/* Jeffrey Grover: site styles, v4: one stage.
   Every page stands on the same dark ground, under the same film grain, with the
   same header, title block, index rows, captions and photograph frame. The home
   page is that stage lit by one full-screen photograph; the six rooms share one
   layout. Portraits are black and white inside a black full-frame border;
   captions follow Avedon's "name, occupation" form; the only accent is
   grease-pencil red. */

:root{
  --ground:#0B0B0A;
  --ground-2:#131312;
  --ink:#EFEDE7;
  --ink-2:#ABA9A1;
  --ink-3:#8C8982;
  --rule:rgba(239,237,231,.12);
  --rule-2:rgba(239,237,231,.42);
  --film:#000;
  --blank:#1B1B1A;
  --pencil:#EC5A3F;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Schibsted Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,3.2vw,48px);
  --max:1520px;
  --frame:clamp(5px,.5vw,9px);
  --header:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --fade:.6s;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px);background:var(--ground)}
body{margin:0;min-height:100svh;color:var(--ink);font:400 16.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* film grain over the whole stage, behind the content (in front of the photograph on the home page) */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--pencil)}
p,h1,h2,h3,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:400;text-wrap:balance}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--pencil);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--ground);padding:10px 14px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.label{font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- page changes (Chrome, Edge, Safari 18.2+): the header stays put, the photograph dissolves in place ---------- */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}
::view-transition-old(frame),::view-transition-new(frame){height:100%;object-fit:cover}

/* ---------- the frame: black full-negative border ---------- */
.frame{display:block;position:relative;background:var(--film);padding:var(--frame);box-shadow:0 0 0 1px rgba(239,237,231,.1)}
.frame img{width:100%}
.frame picture{background:var(--blank)}
.js .frame img,.js .sheet img{opacity:0;transition:opacity .5s var(--ease)}
.js .frame img.loaded{opacity:1}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:.75em;min-height:44px;border:1.5px solid var(--rule-2);border-radius:999px;padding:.5em .55em .5em 1.15em;font:600 .92rem/1 var(--sans);letter-spacing:-.005em;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.pill .dot{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--ground);flex:none;transition:transform .25s var(--ease)}
.pill svg{width:12px;height:12px;fill:currentColor}
.pill:hover{border-color:var(--ink)}
.pill:hover .dot{transform:translateX(2px)}
.pill.solid{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.pill.solid .dot{background:var(--ground);color:var(--ink)}
.pill.plain{padding-right:1.15em}

/* ---------- header: the same on every page ---------- */
.site-header{position:sticky;top:0;z-index:40;view-transition-name:site-header;background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.site-header.scrolled{border-bottom-color:var(--rule)}
.site-header .wrap{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{font:500 1.42rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;color:var(--ink)}
.brand{display:inline-flex;align-items:center;gap:14px}
.brand .mono{height:30px;width:auto;flex:none;overflow:visible;color:var(--ink)}
.brand .mono .ring{fill:none;stroke:rgba(239,237,231,.55);transition:stroke .3s;stroke-width:2.1px;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
@keyframes pencil{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.intro .brand .mono .ring{stroke-dashoffset:1}
.go .brand .mono .ring{animation:pencil .9s cubic-bezier(.45,.05,.3,1) .3s both}
.brand:hover .mono .ring,.brand:focus-visible .mono .ring{stroke:var(--pencil);animation:pencil .75s cubic-bezier(.45,.05,.3,1) both}
.is-scene .site-header .brand .wm-text{display:none}
.nav{display:none;align-items:stretch;gap:0;font-size:clamp(1rem,.92rem + .2vw,1.1rem);font-weight:500;letter-spacing:-.005em}
.nav a{--pad:clamp(9px,1.05vw,18px);position:relative;display:block;padding:10px var(--pad);text-decoration:none;color:rgba(239,237,231,.8);transition:color .2s}
.nav a::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:5px;height:2px;background:var(--pencil);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:none}
/* one red line at a time: pointing at another room retracts the current room's line */
.nav:has(a:hover) a[aria-current="page"]:not(:hover){color:rgba(239,237,231,.8)}
.nav:has(a:hover) a[aria-current="page"]:not(:hover)::after{transform:scaleX(0)}
.head-actions{display:flex;align-items:center;gap:14px}
.head-actions .pill{min-height:40px;padding:.45em 1.05em;font-size:.9rem}
.cast-pill[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--ground)}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;font-size:.92rem}
.menu-btn span{display:grid;gap:5px}
.menu-btn span i{display:block;width:20px;height:1.5px;background:currentColor}
@media (max-width:599px){
  .wordmark{font-size:1.15rem}
  .brand{gap:10px}
  .brand .mono{height:26px}
}
@media (max-width:599px){
  .site-header .brand .wm-text{display:none}
  .head-actions{gap:10px}
  .head-actions .pill{min-height:34px;padding:.4em .8em;font-size:.8rem}
}
@media (min-width:1080px){.nav{display:flex}.menu-btn{display:none}}
/* over the home photograph the header floats on a soft shadow */
.is-scene .site-header{position:fixed;inset:0 0 auto;background:linear-gradient(rgba(8,8,8,.62),rgba(8,8,8,0));-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.is-scene .site-header .nav a{color:rgba(239,237,231,.86)}
.is-scene .site-header.scrolled{background:color-mix(in srgb,var(--ground) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- HOME: the stage, lit by one photograph ---------- */
.is-scene::after{z-index:2}
.scene{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:var(--header)}
.scene-bg{position:fixed;inset:0;z-index:0;background:var(--ground);overflow:hidden}
.scene-bg .sb{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.scene-bg .sb.on{opacity:1}
.scene-bg picture,.scene-bg img{width:100%;height:100%}
.scene-bg img{object-fit:cover;object-position:62% 28%;filter:grayscale(1) contrast(1.08) brightness(.8);transform:scale(1.06);transition:transform 12s linear}
.scene-bg .sb.on img{transform:scale(1)}
.scene-bg [data-key="film"] img,.scene-bg [data-key="writing"] img{object-position:50% 40%}
.scene-bg [data-key="television"] img{object-position:78% 30%}
.scene-bg .sb.hero{display:none}
.scene-bg .sb.hero.prev{display:block;z-index:3}
html:not([data-hero]) .sb.hero[data-v="0"],html[data-hero="0"] .sb.hero[data-v="0"],html[data-hero="1"] .sb.hero[data-v="1"],
html[data-hero="2"] .sb.hero[data-v="2"],html[data-hero="3"] .sb.hero[data-v="3"]{display:block}
.scene-bg .sb.hero[data-v="0"] img,.scene-bg .sb.hero[data-v="0"] video{object-position:72% 40%}
.scene-bg .sb.hero[data-v="1"] img,.scene-bg .sb.hero[data-v="1"] video{object-position:6% 40%}
.scene-bg .sb.hero[data-v="2"] img,.scene-bg .sb.hero[data-v="2"] video{object-position:62% 34%}
.scene-bg .sb.hero[data-v="3"] img,.scene-bg .sb.hero[data-v="3"] video{object-position:60% 30%}
.scene-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(.8);opacity:0;transition:opacity .75s var(--ease)}
.scene-bg video.playing{opacity:1}
.scene-shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(8,8,8,.86) 0%,rgba(8,8,8,.52) 38%,rgba(8,8,8,.42) 58%,rgba(8,8,8,.74) 100%),
  linear-gradient(0deg,rgba(8,8,8,.8) 0%,transparent 50%)}
.scene-shade::after{content:"";position:absolute;inset:0;background:rgba(8,8,8,.55);opacity:0;transition:opacity .6s var(--ease)}
.scene-grid,.scene-foot{position:relative;z-index:3;width:100%}
.scene-grid{display:grid;gap:clamp(28px,4vw,72px);align-items:end;padding-block:clamp(18px,3vh,34px)}
.scene-id{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;min-height:calc(100svh - var(--header) - 40px)}
.scene-id .tag{display:flex;flex-wrap:wrap;gap:4px 16px;color:rgba(239,237,231,.72)}
.scene-id h1{font:400 clamp(4.4rem,1rem + 12vw,11.5rem)/.84 var(--display);letter-spacing:-.04em;margin-left:-.05em}
.scene-id h1{text-shadow:0 2px 30px rgba(0,0,0,.35)}
.scene .actions{display:flex;flex-wrap:wrap;gap:10px}
.scene .pill:not(.solid){border-color:rgba(239,237,231,.6)}
.doors{display:flex;flex-direction:column;border-top:1px solid var(--rule-2)}
.doors a{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;gap:0 12px;padding:11px 0 12px;border-bottom:1px solid rgba(239,237,231,.18);text-decoration:none;transition:color .25s}
.doors .n{font:500 .72rem/1 var(--mono);letter-spacing:.1em;color:rgba(239,237,231,.62);transition:color .25s}
.doors .t{font:600 clamp(1.45rem,.9rem + 1.6vw,2.4rem)/1.05 var(--sans);letter-spacing:-.035em;text-shadow:0 1px 22px rgba(0,0,0,.5)}
.doors .c{grid-column:2;margin-top:4px;font-size:.84rem;line-height:1.35;color:rgba(239,237,231,.62);transition:color .25s}
.doors a:hover .n,.doors a:focus-visible .n{color:var(--pencil)}
.doors a:hover .c,.doors a:focus-visible .c{color:var(--ink)}
@media (hover:hover){.doors:hover a:not(:hover){color:rgba(239,237,231,.5)}}
.scene-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 28px;padding-block:14px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(239,237,231,.18);font-size:.84rem;color:rgba(239,237,231,.72)}
.scene-foot i{font:italic 500 1.06em/1 var(--display);color:var(--ink)}
.scene-side{position:relative}
.scene-side .scene-cap{position:absolute;left:0;right:0;top:calc(100% + 12px)}
.scene-cap{font-size:.8rem;line-height:1.4;color:rgba(239,237,231,.6);min-height:1.4em;transition:opacity .25s}
.scene-cap::before{content:"On screen";font:500 .6rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(239,237,231,.45);margin-right:10px}
.scene-cap i{font:italic 500 1.08em/1 var(--display);color:rgba(239,237,231,.9)}
.scene-foot .label{color:var(--pencil)}
.scene-cap{flex:0 1 auto}
/* the Now line: a slow ticker that pauses under the pointer and stands still for reduced motion */
.now{display:flex;align-items:baseline;gap:14px;flex:1 1 100%;min-width:0}
.now .label{flex:none}
.ticker{flex:1 1 0;width:0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.belt{display:flex;width:max-content;animation:ticker 52s linear infinite}
.ticker:hover .belt,.ticker:focus-within .belt{animation-play-state:paused}
.track{display:flex;flex:none}
.track li{position:relative;white-space:nowrap;padding-right:2.6em}
.track li::after{content:"";position:absolute;right:1.15em;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--pencil)}
.track a,.track button{color:inherit;font:inherit;text-decoration:none;text-underline-offset:.22em;text-decoration-color:var(--pencil)}
.track a:hover,.track button:hover,.track a:focus-visible,.track button:focus-visible{text-decoration-line:underline}
@keyframes ticker{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker{-webkit-mask-image:none;mask-image:none}
  .track[aria-hidden]{display:none}
  .track{flex-wrap:wrap;row-gap:4px}
}
@media (min-width:1000px){
  .scene{height:100svh;min-height:680px}
  .scene-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);flex:1;align-items:center;align-content:center}
  .scene-id{min-height:0;gap:22px}
  .scene-id h1{font-size:min(clamp(6rem,1rem + 12.4vw,15rem),25vh)}
  .doors a{padding:10px 0 11px}
}
@media (max-width:999px){
  .scene-shade{background:linear-gradient(0deg,rgba(8,8,8,.94) 0%,rgba(8,8,8,.6) 36%,rgba(8,8,8,.12) 66%,rgba(8,8,8,.3) 100%)}
  .scene-bg img{object-position:52% 18%;filter:grayscale(1) contrast(1.1) brightness(1.05)}
  .scene-bg [data-key="film"] img{object-position:30% 40%}

  .scene-bg video{filter:grayscale(1) contrast(1.1) brightness(1.05)}
  /* once the list of rooms rises over the photograph, the photograph steps back so the list reads */
  .scene.dim .scene-shade::after{opacity:1}
}

/* ---------- ROOMS: one layout for all six tabs ---------- */
.room{--media-w:min(44vw,calc((100svh - var(--header) - 120px) * .8));display:grid;gap:clamp(20px,3vw,40px);padding-top:clamp(16px,2.2vw,28px)}
@media (min-width:1000px){.room{grid-template-columns:var(--media-w) minmax(0,1fr);column-gap:clamp(36px,4.4vw,80px);align-items:start}}
.room-media{position:sticky;top:calc(var(--header) + clamp(16px,2.2vw,28px));z-index:3}
.room-frame{aspect-ratio:4/5;width:100%;view-transition-name:frame}
.room-frame .m{position:absolute;inset:var(--frame);overflow:hidden;background:var(--blank);opacity:0;visibility:hidden;transition:opacity var(--fade) var(--ease),visibility 0s linear var(--fade)}
.room-frame .m.on{opacity:1;visibility:visible;z-index:2;transition:opacity var(--fade) var(--ease),visibility 0s}
.room-frame .m.was{opacity:1;visibility:visible;z-index:1;transition:none}
.room-frame .m picture,.room-frame .m img{width:100%;height:100%}
.room-frame .m img{object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.06);transition:opacity .5s var(--ease),filter 1.4s var(--ease)}
.room-frame .m.dev img{filter:grayscale(0) contrast(1.02);transition:opacity .5s var(--ease),filter 2.2s var(--ease)}
.room-frame .m.color img{filter:none}
.room-frame .m.contain,.room-frame .m.contain picture{background:var(--film)}
.room-frame .m.contain img{object-fit:contain;filter:none}
.room-frame .m.cover img{filter:grayscale(1) contrast(1.04)}
.room-frame .m.cover.dev img{filter:grayscale(0)}
/* credits without a photograph get a title card */
.room-frame .plate{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:clamp(26px,3vw,48px);background:var(--ground-2)}
.room-frame .plate::before{content:"";position:absolute;inset:clamp(10px,1.1vw,16px);border:1px solid var(--rule);pointer-events:none}
.plate .pt{font:italic 400 clamp(2rem,1.1rem + 2.3vw,3.5rem)/1.02 var(--display);letter-spacing:-.02em;text-wrap:balance}
.plate .pr{font-weight:600;font-size:1.02rem}
.plate .pm{font:500 .68rem/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.plate.card .pt{font-size:clamp(1.7rem,1rem + 1.9vw,2.9rem);line-height:1.08}
.plate.card .pm{color:var(--pencil)}
.cap{font-size:.84rem;line-height:1.45;color:var(--ink-2);padding-top:10px}
.cap i{font:italic 500 1.08em/1 var(--display);color:var(--ink)}
.cap .mono{display:block;font:500 .64rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.room-cap{min-height:3.5em;transition:opacity .18s}
.room-cap .cs{display:none}
.room-cap.swap{opacity:0}

.room-head .label{display:flex;flex-wrap:wrap;gap:4px 18px}
.room-head h1{font:400 clamp(3.2rem,1.6rem + 4.2vw,6.6rem)/.9 var(--display);letter-spacing:-.04em;margin:12px 0 14px -.03em}
.room-head h1.long{font-size:clamp(2.8rem,1.3rem + 3.3vw,5.2rem)}
.room-lede{color:var(--ink-2);max-width:46ch;font-size:1.02rem;line-height:1.5;margin-bottom:24px}

/* the index: every list on the site */
.index{border-top:1px solid var(--rule-2)}
.index .group{padding:22px 0 9px;font:500 .66rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--rule)}
.index .row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 32px;column-gap:16px;row-gap:2px;align-items:baseline;width:100%;padding:12px 0 13px 20px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;transition:background-color .2s}
.index .row::before{content:"";position:absolute;left:2px;top:20px;width:7px;height:7px;border-radius:50%;background:var(--pencil);opacity:0;transform:scale(.3);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.index li.active > .row::before{opacity:1;transform:none}
.index .row[data-i]:hover,.index a.row:hover{background-color:rgba(239,237,231,.04)}
.index .t{font-weight:600;font-size:clamp(1rem,.96rem + .2vw,1.1rem);letter-spacing:-.012em;transition:color .25s}
.index .r{grid-column:1;font:italic 400 1.04rem/1.3 var(--display)}
.index .m{grid-column:1;font:500 .63rem/1.45 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.index .go{grid-column:2;grid-row:1/4;align-self:center;justify-self:end;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--ground);transition:transform .25s var(--ease)}
.index .go svg{width:10px;height:10px;fill:currentColor}
.index .row:hover .go{transform:scale(1.08)}
@media (min-width:720px){
  .index .row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 32px}
  .index .r{grid-column:2;grid-row:1}
  .index .m{grid-column:1/3}
  .index .go{grid-column:3}
}
@media (hover:hover){.index:hover li:not(.active) > .row[data-i] .t{color:var(--ink-2)}}

/* About: chapters of one sitting */
.index.chapters .row{grid-template-columns:minmax(0,1fr);padding-block:18px 21px;cursor:default}
.index.chapters .row::before{top:21px}
.chapter .k{font:500 .66rem/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);transition:color .3s}
.index li.active .chapter .k{color:var(--pencil)}
.chapter .h{font:650 clamp(1.3rem,1.08rem + .8vw,1.8rem)/1.1 var(--sans);letter-spacing:-.03em;margin-top:5px}
.chapter .h i{font:italic 400 1.06em/1 var(--display)}
.chapter .p{margin-top:8px;color:var(--ink-2);font-size:1rem;line-height:1.6;max-width:56ch}
.chapter .p i{font:italic 400 1.05em/1 var(--display);color:var(--ink)}

/* modules that follow an index (About, For casting) */
.extra{margin-top:clamp(34px,4vw,52px)}
.extra-h{font:500 .7rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.extra-2{display:grid;gap:34px}
@media (min-width:720px){.extra-2{grid-template-columns:1fr 1fr;gap:28px}}
.index.compact .row{grid-template-columns:minmax(0,1fr);padding-left:0;row-gap:1px}
.index.compact .r,.index.compact .m{grid-column:1;grid-row:auto}
.extra-note{margin-top:12px;color:var(--ink-2);font-size:.9rem;max-width:56ch}
.extra-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-size:.95rem}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2)}
.stats div{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule)}
.stats dt{font:500 .62rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.stats dd{font-size:1rem}
@media (max-width:519px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.reps .row{grid-template-columns:minmax(0,1fr) auto;padding-left:0}
.reps .ph{grid-column:2;grid-row:1/4;align-self:center;font:500 .8rem/1 var(--mono);letter-spacing:.03em;white-space:nowrap}
@media (min-width:720px){.reps .row{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto}.reps .ph{grid-column:3}}
/* the contact sheet, with grease-pencil picks */
.sheet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.1vw,14px);background:var(--film);padding:clamp(12px,1.3vw,18px);box-shadow:0 0 0 1px rgba(239,237,231,.1)}
.sheet button{display:flex;flex-direction:column;gap:7px}
.sheet .ph{position:relative;display:block}
.sheet picture{background:var(--blank)}
.sheet img{aspect-ratio:1;width:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1)}
.js .sheet img.loaded{opacity:.72}
.js .sheet button:hover img.loaded,.js .sheet button.active img.loaded{opacity:1}
.sheet .fn{font:500 .62rem/1 var(--mono);letter-spacing:.12em;color:var(--ink-3)}
.sheet .sel .fn{color:var(--pencil)}
.ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible;pointer-events:none;color:var(--pencil)}

/* a link to one credit (/film/#charliebird) lands on it, clear of the pinned photograph */
.index > li{scroll-margin-top:calc(34vh - 28px)}
.index > li:target > .row{animation:landed 2.6s var(--ease)}
@keyframes landed{from{background-color:rgba(236,90,63,.16)}to{background-color:transparent}}
@media (max-width:999px){.index > li{scroll-margin-top:calc(var(--header) + min(48vw, 27svh) * 1.25 + 56px)}}
/* About: press */
.press{display:grid;gap:22px;border-top:1px solid var(--rule-2);padding-top:20px}
.press blockquote{margin:0;font:italic 400 clamp(1.3rem,1.05rem + .9vw,1.9rem)/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
.press p{margin-top:8px;font:500 .64rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.press cite{font-style:normal;color:var(--pencil)}
/* About: quick answers */
.faq{border-top:1px solid var(--rule-2)}
.faq li{padding:14px 0 16px;border-bottom:1px solid var(--rule)}
.faq .q{font:650 1.06rem/1.3 var(--sans);letter-spacing:-.015em;text-wrap:balance}
.faq .a{margin-top:6px;color:var(--ink-2);font-size:.97rem;line-height:1.58;max-width:62ch}
.faq .a i{font:italic 400 1.05em/1 var(--display);color:var(--ink)}
/* a small label that follows the pointer over credits that do something */
.cue{position:fixed;left:0;top:0;z-index:60;pointer-events:none;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:var(--ink);color:var(--ground);font:600 .74rem/1 var(--sans);white-space:nowrap;opacity:0;transform:translate3d(-200px,-200px,0);transition:opacity .2s var(--ease)}
.cue::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pencil)}
.cue.show{opacity:1}
.room-next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(34px,4vw,52px)}
.room-next a{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--rule-2);text-decoration:none}
.room-next .nm{font:400 clamp(1.4rem,1.1rem + 1vw,2.1rem)/1.05 var(--display);letter-spacing:-.01em}
.room-next a:last-child{text-align:right;align-items:flex-end}
.room-next a:hover .nm{font-style:italic}
/* in a room the footer closes the index column, so the pinned photograph never has to slide away */
.room-list .site-footer{margin-top:clamp(34px,4vw,52px)}
.room-list .site-footer .wrap{padding-inline:0;max-width:none}

/* phones and tablets: the desktop layout in miniature, pinned while the list scrolls:
   the whole photograph in the same 4:5 frame on the left, its caption beside it */
@media (max-width:999px){
  .room{padding-top:0}
  .room-media{top:var(--header);margin-inline:calc(var(--gutter) * -1);padding:12px var(--gutter);background:var(--ground);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:min(48%,27svh) minmax(0,1fr);column-gap:16px;align-items:end}
  .room-frame{aspect-ratio:4/5;width:100%}
  .room-frame .plate{padding:12px 12px 14px;gap:6px}
  .room-frame .plate::before{inset:6px}
  .plate .pt{font-size:clamp(1.05rem,.7rem + 2vw,1.6rem)}
  .plate.card .pt{font-size:clamp(.95rem,.7rem + 1.4vw,1.35rem)}
  .plate .pr{font-size:.74rem}
  .plate .pm{font-size:.52rem}
  .room-cap{min-height:0;font-size:.86rem;line-height:1.45;padding:0 0 2px}
  .room-cap .mono{display:block;margin-top:8px}
  .room-cap .cf{display:none}
  .room-cap .cs{display:block}
  .room-cap .cs i{display:block;font:italic 400 clamp(1.3rem,1rem + 1.6vw,1.75rem)/1.08 var(--display);color:var(--ink);text-wrap:balance}
  .room-head h1{font-size:clamp(2.9rem,2rem + 6vw,4.6rem)}
}

/* ---------- page not found ---------- */
.lost{min-height:calc(100svh - var(--header) - 90px);display:flex;flex-direction:column;justify-content:center;padding-block:40px 56px}
.lost h1{font:400 clamp(3.4rem,1.6rem + 6vw,8rem)/.9 var(--display);letter-spacing:-.04em;margin:12px 0 14px -.03em}
.lost .doors{max-width:760px;margin-top:10px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule);padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));font-size:.84rem;color:var(--ink-2)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px}
.foot ul{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot .wordmark{font-size:1.1rem}

/* ---------- dialogs ---------- */
dialog{border:0;padding:0;background:transparent;color:inherit;max-width:none;max-height:none}
dialog::backdrop{background:rgba(5,5,5,.94)}
.player{width:min(1180px,calc(100vw - 2 * var(--gutter)))}
.player .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;color:var(--ink)}
.player .ptitle{font:italic 400 1.2rem/1.2 var(--display)}
.player .close{min-height:44px;font-weight:600}
.player .box{position:relative;aspect-ratio:16/9;background:#000}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.menu{width:100vw;height:100dvh;background:var(--ground);color:var(--ink)}
.menu[open]{display:flex;flex-direction:column}
.menu .top{height:var(--header);display:flex;align-items:center;justify-content:space-between}
.menu nav{display:flex;flex-direction:column;justify-content:center;flex:1;gap:6px}
.menu nav a{display:flex;align-items:baseline;gap:14px;font:400 min(clamp(2.1rem,1.3rem + 5vw,3.8rem),calc((100vw - 66px) / 8.8))/1.16 var(--display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.menu .wrap{width:100%}
dialog:focus,dialog:focus-visible{outline:none}
.menu nav a .n{font:500 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--pencil)}
.menu nav a:hover,.menu nav a[aria-current="page"]{font-style:italic}
.menu .close{min-height:44px;font-weight:600}
.menu-actions{display:flex;flex-wrap:wrap;gap:10px;padding-block:18px calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule)}

/* ---------- motion ---------- */
/* entrances: the page composes itself once, quickly (set in <head>; never when motion is reduced) */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rise-name{from{opacity:.4;transform:translateY(12px);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes settle{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:scale(1)}}
.intro .scene-id > :not(h1),.intro .doors a,.intro .scene-foot,.intro .room-head > *,.intro .index > li:nth-child(-n+12){opacity:0}
.intro .scene-id h1{opacity:.4;filter:blur(12px);transform:translateY(12px)}
.go .scene-bg .sb.on img{animation:settle 2.8s var(--ease) both}
.go .scene-id .tag{animation:rise .9s var(--ease) .25s both}
.go .scene-id h1{animation:rise-name 1.3s var(--ease) .1s both}
.go .scene-id .actions{animation:rise .9s var(--ease) .9s both}
.go .doors a{animation:rise .8s var(--ease) both}
.go .doors a:nth-child(1){animation-delay:.6s}.go .doors a:nth-child(2){animation-delay:.68s}.go .doors a:nth-child(3){animation-delay:.76s}
.go .doors a:nth-child(4){animation-delay:.84s}.go .doors a:nth-child(5){animation-delay:.92s}.go .doors a:nth-child(6){animation-delay:1s}
.go .scene-foot{animation:fade-in 1s var(--ease) 1.2s both}
.go .room-head > *{animation:rise .6s var(--ease) both}
.go .room-head > :nth-child(2){animation-delay:.05s}.go .room-head > :nth-child(3){animation-delay:.1s}
.go .index > li:nth-child(-n+12){animation:rise .55s var(--ease) both}
.go .index > li:nth-child(1){animation-delay:.12s}.go .index > li:nth-child(2){animation-delay:.15s}.go .index > li:nth-child(3){animation-delay:.18s}
.go .index > li:nth-child(4){animation-delay:.21s}.go .index > li:nth-child(5){animation-delay:.24s}.go .index > li:nth-child(6){animation-delay:.27s}
.go .index > li:nth-child(7){animation-delay:.3s}.go .index > li:nth-child(8){animation-delay:.33s}.go .index > li:nth-child(9){animation-delay:.36s}
.go .index > li:nth-child(10){animation-delay:.39s}.go .index > li:nth-child(11){animation-delay:.42s}.go .index > li:nth-child(12){animation-delay:.45s}

/* About: the contact sheet prints frame by frame, then the grease pencil circles the picks */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:360deg}
@keyframes draw{from{--sweep:0deg}to{--sweep:360deg}}
.sheet .ring{-webkit-mask-image:conic-gradient(from 215deg,#000 var(--sweep),transparent 0);mask-image:conic-gradient(from 215deg,#000 var(--sweep),transparent 0)}
.js .sheet:not(.inview) .ring{--sweep:0deg}
.js .sheet:not(.inview) button{opacity:0}
.sheet.inview button{animation:rise .6s var(--ease) both}
.sheet.inview button:nth-child(2){animation-delay:.07s}.sheet.inview button:nth-child(3){animation-delay:.14s}.sheet.inview button:nth-child(4){animation-delay:.21s}
.sheet.inview button:nth-child(5){animation-delay:.28s}.sheet.inview button:nth-child(6){animation-delay:.35s}.sheet.inview button:nth-child(7){animation-delay:.42s}.sheet.inview button:nth-child(8){animation-delay:.49s}
.sheet.inview .ring{animation:draw 1.1s cubic-bezier(.45,.05,.3,1) .75s both}
.sheet.inview button:nth-child(7) .ring{animation-delay:1.45s}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .scene-bg img{transform:none!important}
}

/* ---------- phones: the home page as a cover, one row of buttons ---------- */
@media (max-width:599px){

  .scene-id{gap:18px}
  .scene-side .scene-cap{display:none}
  .scene-id .tag{flex-direction:column;gap:5px}
  .scene-id h1{font-size:min(29vw,20svh);line-height:.8;margin-left:-.045em}
  .pill .xl{display:none}
  .scene .actions,.menu-actions{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:8px}
  .scene .actions .pill,.menu-actions .pill{justify-content:space-between;min-height:46px;gap:6px;padding:.45em .42em .45em .95em;font-size:clamp(.76rem,3.4vw,.88rem)}
  .scene-bg .sb.hero[data-v] img,.scene-bg .sb.hero[data-v] video{object-position:50% 30%}
  .scene .actions .pill .dot,.menu-actions .pill .dot{width:26px;height:26px}
}