/* venn · private dining · the room (18 Oct 2026)
   Six photos of the room in a row, inside the page's margins, then "room details": an index of four things in the room
   and what they are made from, with one photo that follows the name, and a credit to Estúdio Morto Vivo. Every photo opens a full-screen viewer (.rm-lb, js/private-dining-room.js).
   Uses the tokens from private-dining-2026.css (plum ground, cream type, lamp amber). */

.rm{margin-top:clamp(64px,8vw,112px)}

/* the heading runs the width of the page: the title on the left, the words on the right */
.rm-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,4vw,64px);align-items:end;padding-bottom:clamp(20px,2.5vw,32px);border-bottom:1px solid var(--edge)}
.rm-head h2{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.95}
.rm-lede{font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.22;color:var(--strong)}
.rm-sub{margin-top:12px;color:var(--muted);font-size:1.0625rem}
@media (max-width:700px){
  .rm-head{grid-template-columns:1fr;gap:14px}
  .rm-lede{font-size:1.4rem}
}

/* every photo is a button that opens the viewer */
.rm-t{display:block;position:relative;width:100%;padding:0;border:0;margin:0;background:#3A2E3F;cursor:zoom-in;overflow:hidden;-webkit-tap-highlight-color:transparent;color:inherit}
.rm-t img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .6s ease}
.rm-t:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
@media (hover:hover){.rm-t:hover img{transform:scale(1.04)}}

/* six in a row; three by two on phones */
.rm-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:clamp(28px,3.5vw,48px)}
.rm-row .rm-t{aspect-ratio:4/5}
@media (max-width:700px){.rm-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.rm-row .rm-t{aspect-ratio:1}}

/* room details: an index, the names on the left and one photo on the right that follows the name you point at or tap */
.rm-ix{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,64px);margin-top:clamp(64px,8vw,112px)}
.rm-ix__side{display:flex;flex-direction:column;gap:clamp(22px,3vw,32px)}
.rm-ix h3{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--strong)}
.rm-ix__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--edge)}
.rm-ix__l li{border-bottom:1px solid var(--edge)}
.rm-ix__name{display:grid;gap:4px;width:100%;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;transition:padding .3s ease,box-shadow .3s ease}
.rm-ix__n{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.1;color:var(--muted);transition:color .2s}
.rm-ix__m{font-size:.95rem;line-height:1.4;color:var(--muted);opacity:.8}
.rm-ix__name.is-on{padding-left:14px;box-shadow:inset 2px 0 0 var(--lamp)}
.rm-ix__name.is-on .rm-ix__n{color:var(--strong)}
@media (hover:hover){.rm-ix__name:hover .rm-ix__n{color:var(--strong)}}
.rm-ix__name:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.rm-ix__stage{position:relative;display:block;width:100%;aspect-ratio:4/5;max-height:82vh;padding:0;border:0;margin:0;background:#3A2E3F;cursor:zoom-in;overflow:hidden;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.rm-ix__f{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.rm-ix__f.is-on{opacity:1}
.rm-ix__f img{display:block;width:100%;height:100%;object-fit:cover}
.rm-ix__stage:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}

/* the credit: their mark, then the line with the link */
.rm-mv{display:flex;align-items:center;gap:16px;margin-top:auto}
.rm-mv__logo{flex:none;display:block;width:30px;opacity:.9;transition:opacity .2s}
.rm-mv__logo img{display:block;width:100%;height:auto}
.rm-mv__logo:hover{opacity:1}
.rm-mv p{color:var(--muted);font-size:1rem;line-height:1.5;max-width:28em}
.rm-mv p a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(241,236,226,.4);text-underline-offset:4px}
.rm-mv p a:hover{text-decoration-color:var(--lamp)}
.rm-mv p a:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}

/* phones: title, the photo, the names as a tidy list, the credit */
@media (max-width:700px){
  .rm-ix{grid-template-columns:1fr;gap:0}
  .rm-ix__side{display:contents}
  .rm-ix h3{order:0;font-size:2rem;margin-bottom:18px}
  .rm-ix__stage{order:1;aspect-ratio:1;max-height:none}
  .rm-ix__l{order:2;margin-top:14px}
  .rm-mv{order:3;margin-top:22px}
  .rm-ix__name{gap:3px;padding:13px 0;min-height:56px}
  .rm-ix__n{font-size:1.4rem}
  .rm-ix__m{font-size:.875rem}
  .rm-ix__name.is-on{padding-left:12px}
}

/* the viewer */
.rm-lb{position:fixed;inset:0;z-index:100000;display:grid;grid-template-rows:1fr;background:#18131B;
  padding:calc(56px + env(safe-area-inset-top,0px)) max(72px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(72px,env(safe-area-inset-left,0px));touch-action:pan-y}
.rm-lb[hidden]{display:none}
.rm-lb__fig{margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-height:0}
.rm-lb__fig img{width:100%;height:100%;object-fit:contain;min-height:0;user-select:none;-webkit-user-drag:none}
.rm-lb__fig figcaption{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.9rem;min-height:1.4em}
#rm-lb-cap{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.1rem;color:var(--fg)}
.rm-lb__n{font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto}
.rm-lb__x{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));width:44px;height:44px;border:0;background:none;cursor:pointer}
.rm-lb__x::before,.rm-lb__x::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:1.5px;background:var(--strong)}
.rm-lb__x::before{transform:rotate(45deg)}.rm-lb__x::after{transform:rotate(-45deg)}
.rm-lb__go{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;border:1px solid var(--edge);background:rgba(24,19,27,.5);color:var(--fg);font-size:1.1rem;cursor:pointer}
.rm-lb__go--prev{left:calc(12px + env(safe-area-inset-left,0px))}
.rm-lb__go--next{right:calc(12px + env(safe-area-inset-right,0px))}
.rm-lb__x:focus-visible,.rm-lb__go:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
@media (max-width:700px){
  .rm-lb{padding-inline:max(0px,env(safe-area-inset-left,0px)) max(0px,env(safe-area-inset-right,0px))}
  .rm-lb__fig figcaption{padding-inline:16px}
  .rm-lb__go{top:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin-top:0}
  .rm-lb__go--prev{left:auto;right:calc(76px + env(safe-area-inset-right,0px))}
  .rm-lb__fig{padding-bottom:60px}
}
@media (prefers-reduced-motion:reduce){.rm-t img,.rm-ix__f,.rm-ix__name{transition:none}}