/*
  Rooms - the individual room pages (/rooms/<slug>/).

  The index's CSS lives in rooms.html's <style> block, because that block arrived
  with the draft and build-index.ps1 only appends to it. The six room pages are
  generated from rooms.json, so they need their stylesheet to be a file: this is
  that file, and it repeats the design tokens above anything else.

  Contrast: every grey in the palette is #999999 rather than the draft's #888888.
  Measured against the page's own ground (#1A1A1A), #888888 gives 4.91:1 and
  #999999 gives 6.10:1. Both clear WCAG AA for body text (4.5:1), but the draft's
  grey sat 0.4 of a point above the line, so tags, captions, eyebrows and bylines
  were one small adjustment away from failing. #999999 leaves the palette
  monochrome and the margin real. Light text (#E5E5E5) is 13.4:1 and unchanged.
*/
:root{
  --bg-dark:#1A1A1A;
  --color-mid:#999999;
  --color-light:#E5E5E5;
  --color-accent-border:rgba(153,153,153,0.25);
  --font-main:"Montserrat",sans-serif;
  --topbar-height:64px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root:not([data-theme="light"]){ color-scheme: dark; }
*{box-sizing:border-box;margin:0;padding:0}
html{background-color:var(--bg-dark);color:var(--color-light);font-family:var(--font-main);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-height) + 1rem)}
body{background-color:var(--bg-dark);color:var(--color-light);line-height:1.7;font-weight:300;overflow-x:hidden;min-height:100%}
h1,h2,h3{font-weight:200;letter-spacing:0.12em;text-transform:uppercase;color:var(--color-light)}
p{font-size:1rem;letter-spacing:0.03em}
a{color:inherit}
:focus-visible{outline:2px solid var(--color-light);outline-offset:3px}

/* --- Cross-document view transitions ----------------------------------------
   Index and room pages are separate documents, so the transition is the
   cross-document kind: `navigation:auto` asks the browser to run one for
   same-origin navigations, and the shared name (set inline, per room, on the two
   images involved) is what makes the panel preview expand into the room's own
   plate instead of the whole page crossfading around it. A browser that does not
   support the API ignores all of this and navigates normally. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:500ms;animation-timing-function:ease-out}

/* --- The minimal top bar ---------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--topbar-height);padding:calc(0.5rem + env(safe-area-inset-top,0px)) 2rem 0.5rem;background-color:rgba(26,26,26,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-accent-border)}
.topbar a{text-decoration:none;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.2em;color:var(--color-mid);transition:color 0.3s ease}
.topbar a:hover{color:var(--color-light)}
.topbar-mark{font-size:1rem;letter-spacing:0.3em;color:var(--color-light)}

/* --- The room --------------------------------------------------------------- */
.room-main{max-width:1000px;margin:0 auto;padding:5rem 2rem 7rem}
.eyebrow{display:inline-block;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.25em;color:var(--color-mid);margin-bottom:1.25rem}
.room-title{font-size:clamp(1.75rem,4.5vw,3rem);line-height:1.25;margin-bottom:1.25rem}
.room-status{color:var(--color-light);font-size:0.95rem;letter-spacing:0.1em;text-transform:uppercase}
.room-work-title{font-size:1.05rem;color:var(--color-light);letter-spacing:0.08em;margin-top:-0.75rem;margin-bottom:1.5rem}
.room-byline{color:var(--color-mid);font-size:0.95rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:1.5rem}
.room-bio{color:var(--color-mid);font-size:1.05rem;line-height:1.9;max-width:60ch;margin-bottom:1.5rem;font-style:italic}
.room-links{color:var(--color-mid);font-size:0.85rem;letter-spacing:0.1em;margin-bottom:2rem}
.room-links a{color:var(--color-mid)}
.room-statement{color:var(--color-light);font-size:1.05rem;line-height:1.9;max-width:65ch;border-left:2px solid var(--color-accent-border);padding-left:1.5rem}

/* The opening plate is gone: an occupied room page goes straight from the
   statement to the sequence, and an invited one has no image at all. The shared
   view-transition-name moved onto the sequence's first plate. */

/* --- The sequence -----------------------------------------------------------
   One plate per viewport, centred, with the caption and the "03 / 12" counter
   below it. All the plates are in the document: this is a finite sequence you
   read through, not a carousel that loops. Arrow keys move between plates
   (room.js); nothing moves on its own. */
.sequence{list-style:none}
.sequence-item{min-height:100vh;min-height:100svh;display:grid;align-content:center;justify-items:center;gap:1.25rem;padding:4rem 1rem;scroll-margin-top:calc(var(--topbar-height) + 1rem)}

/* Each plate keeps its OWN ratio and is never cropped. width and height are both
   auto, so the browser scales the picture down until it fits BOTH budgets and no
   further: a landscape plate runs out of width first, a portrait one runs out of
   height first. That is what "adapts to the format" means here - there is no fixed
   frame for a photograph to be forced into.

   The reserved space is what the caption, the counter, the gap and the padding
   actually need (8rem of padding + 1.25rem gap + ~2 lines of caption + the counter),
   not a round number. At 18rem a portrait plate was losing about a third of its
   height to room nothing was using, which is why tall pictures looked small.

   The build writes the real width and height onto every <img>, so the browser
   reserves the right shape before the file arrives and nothing shifts on load. */
.sequence-item img,.sequence-item video{display:block;width:auto;height:auto;max-width:min(100%,1400px);max-height:calc(100vh - 13rem);max-height:calc(100svh - 13rem);border:1px solid var(--color-accent-border);box-shadow:0 15px 30px rgba(0,0,0,0.4)}
/* A plate that moves sits in exactly the box a still would: the poster is the
   plate's own .webp and the element carries the same width and height, so a sequence
   reads identically whether a plate is a photograph or a clip. Black behind it,
   because a clip that has not been asked for yet is a poster on a letterbox and a
   player expects black rather than the room's warmer ground. */
.sequence-item video{background-color:#000}
.sequence-caption{font-size:0.85rem;color:var(--color-light);letter-spacing:0.05em;text-align:center;max-width:60ch}
.sequence-counter{font-size:0.75rem;color:var(--color-mid);letter-spacing:0.25em;text-transform:uppercase}
.sequence-counter span{color:var(--color-light)}

/* --- The long version of a room's work ---------------------------------------
   A facade: the room's own still, with a real link to the piece underneath, and the
   player built only when a reader asks for it (room.js). Deliberately styled as a
   picture with a label on it rather than as a player, because nothing here is loaded
   or running until a click - a facade that looked like an already-playing video
   would be telling the reader something untrue about what their browser has done. */
.room-embed{margin-top:5rem;padding-top:3rem;border-top:1px solid var(--color-accent-border)}
.room-embed-title{font-size:0.8rem;letter-spacing:0.25em;color:var(--color-mid);margin-bottom:1.5rem}
.embed-facade{position:relative;display:block;text-decoration:none;border:1px solid var(--color-accent-border);box-shadow:0 15px 30px rgba(0,0,0,0.4)}
.embed-facade img{display:block;width:100%;height:auto;transition:opacity 0.3s ease}
.embed-facade:hover img{opacity:0.85}
.embed-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0.8rem 1.75rem;border:1px solid var(--color-light);background-color:rgba(26,26,26,0.75);color:var(--color-light);font-size:0.8rem;letter-spacing:0.2em;text-transform:uppercase;transition:background-color 0.3s ease,color 0.3s ease}
.embed-facade:hover .embed-play,.embed-facade:focus-visible .embed-play{background-color:var(--color-light);color:var(--bg-dark)}
.embed-frame{display:block;width:100%;border:0;box-shadow:0 15px 30px rgba(0,0,0,0.4)}
.room-embed-note{margin-top:1rem;font-size:0.85rem;color:var(--color-mid);letter-spacing:0.05em}

/* --- Invited and open rooms ------------------------------------------------- */
.room-brief{color:var(--color-mid);font-size:1.05rem;line-height:1.9;max-width:60ch;font-style:italic;margin-bottom:1.5rem}
a.action{display:inline-block;padding:0.8rem 1.75rem;border:1px solid var(--color-light);color:var(--color-light);text-decoration:none;font-size:0.8rem;letter-spacing:0.2em;text-transform:uppercase;transition:background-color 0.3s ease,color 0.3s ease}
a.action:hover{background-color:var(--color-light);color:var(--bg-dark)}

/* --- The end of a sequence, and the enquiries line ---------------------------
   The way on and the way back. Two steps at the two ends of the row when both are
   present, so the forward link does not wander towards the middle of the page just
   because a backward one exists. Each step is a link with its own room note beside
   it: the note belongs to the link it follows, not to the row. */
.room-next{margin-top:4rem;display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.room-step{display:flex;align-items:baseline;gap:1rem}
.room-next-note{font-size:0.75rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--color-mid)}
.room-enquiries{margin-top:2.5rem;font-size:0.9rem;color:var(--color-mid)}
.room-enquiries a{color:var(--color-mid)}

/* --- The notice pages (/privacy/ and /terms/) --------------------------------
   A list of short statements and nothing else, on the same ground and in the same
   type as the rooms. */
.notice-list{list-style:none;display:grid;gap:1.5rem;max-width:65ch}
.notice-list li{color:var(--color-light);font-size:1.05rem;line-height:1.8;padding-left:1.75rem;position:relative}
.notice-list li::before{content:"·";position:absolute;left:0;color:var(--color-mid);font-size:1.05rem}
.notice-trailer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--color-accent-border);color:var(--color-mid);font-size:0.9rem;max-width:65ch}
.notice-trailer a{color:var(--color-mid)}

/* --- Footer ----------------------------------------------------------------- */
.container{max-width:1000px;margin:0 auto;padding:0 2rem}
.footer{padding:3rem 0 calc(3rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--color-accent-border);background-color:#111111}
.footer-line{color:var(--color-mid);font-size:0.85rem}
.footer-line a{color:var(--color-mid);text-decoration:none;border-bottom:1px solid var(--color-accent-border)}
.footer-line a:hover{color:var(--color-light);border-color:var(--color-light)}

/* --- Image loading ----------------------------------------------------------
   There is no fade, and the `img-fade` class carries no style. The draft faded
   every image up from opacity 0 on its load event, which made visibility depend
   on two things going right: the load event arriving, and the 600ms transition
   running to completion. When either did not happen - a cached image whose event
   was missed, a lazy image that never started, a renderer whose animation clock
   is paused (background tab, print, screenshot) - the layout had already reserved
   the box and the reader got an empty one. Measured on the index: the sequence
   image sitting at opacity 0 with `complete` still false, and the room panel at
   opacity 0 with its animation at currentTime 0. Images are visible now, and a
   fade is not worth a blank page. The class stays as a marker, and room.js still
   sets the `js` class that the panel rules are gated on. The class deliberately
   carries no rule of its own. */

@media (max-width:768px){
  .room-main{padding:3rem 1.25rem 5rem}
  .topbar{padding-left:1.25rem;padding-right:1.25rem}
}

/* --- Reduced motion ---------------------------------------------------------
   No crossfade, no shared-element morph, no smooth scrolling, no image fade:
   the page changes when it changes. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  a.action,.topbar a,.embed-facade img,.embed-play{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}