:root{
    --ink:#0a0a0b; --ink-2:#0e0f11; --ink-3:#141517;
    --bone:#e8e4dc; --bone-dim:#918d86; --bone-faint:#57544f;
    --signal:#c8703c;
    --line:rgba(232,228,220,.11); --line-soft:rgba(232,228,220,.055);
    --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    --brand:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
    --sans:"Helvetica Neue",-apple-system,system-ui,"Segoe UI",Arial,sans-serif;
    --mono:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
    --wrap:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);font-size:17px;line-height:1.75;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
  ::selection{background:rgba(200,112,60,.32);color:#fff}
  img{max-width:100%;display:block}
  a{color:var(--bone);text-decoration:none}
  h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance;line-height:1.06;margin:0}
  p{margin:0 0 1.2rem;max-width:60ch}
  section{position:relative}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.4rem,5vw,4rem)}
  .band{padding:clamp(5rem,11vw,9rem) 0}
  .rule{height:1px;background:var(--line);border:0;margin:0}

  /* mono metadata is the spine of the whole thing: instruments, not marketing */
  .m{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
  .m-sig{color:var(--signal)}
  .dim{color:var(--bone-dim)}

  /* Reveal is an enhancement, never a gate: content is visible unless JS is live AND
     has armed the animation. If the observer never fires, a timer reveals everything. */
  .reveal{opacity:1;transform:none}
  html.js-reveal .reveal{opacity:0;transform:translateY(18px);
    transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  html.js-reveal .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){html.js-reveal .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

  /* film grain, inline so nothing leaves the page */
  .grain{position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* nav */
  nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    background:rgba(10,10,11,.6);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
  nav.stuck{border-bottom-color:var(--line);background:rgba(10,10,11,.93)}
  .navin{max-width:var(--wrap);margin:0 auto;padding:1rem clamp(1.4rem,5vw,4rem);
    display:flex;align-items:baseline;justify-content:space-between;gap:2rem}
  .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--brand);font-size:.95rem;
    letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bone);line-height:1}
  .brand img{width:26px;height:26px;display:block;flex:none}
  .navlinks{display:flex;gap:1.8rem}
  .navlinks a{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--bone-faint);transition:color .25s}
  .navlinks a:hover{color:var(--bone)}


  /* hero as a title card */
  .hero{position:relative;min-height:96svh;display:flex;align-items:flex-end;overflow:hidden;
    background:url('assets/iceland-arch-w1200.jpg') center/cover no-repeat}
  @media(min-width:1100px){.hero{background-image:url('assets/iceland-arch.jpg')}}
  .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    pointer-events:none;opacity:0;transition:opacity .7s ease}
  .hero-vid.on{opacity:1}
  /* iOS paints its own play button over a video it will not autoplay; this removes it */
  .hero-vid::-webkit-media-controls{display:none!important}
  .hero-vid::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
  @media(prefers-reduced-motion:reduce){.hero-vid{transition:none}}
  .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,10,11,.72),rgba(10,10,11,.22) 30%,rgba(10,10,11,.62) 70%,var(--ink) 99%)}
  .hero .wrap{position:relative;z-index:2;padding-bottom:clamp(3.5rem,9vh,6rem);width:100%}
  .hero h1{font-size:clamp(2.5rem,7.4vw,5.6rem);line-height:1.0;letter-spacing:-.022em;
    margin:1.4rem 0 1.6rem;max-width:15ch;color:#f4f1ec}
  .hero h1 em{font-style:italic;color:var(--signal)}
  .hero-sub{font-size:clamp(1rem,1.9vw,1.22rem);max-width:38ch;color:#ddd8d0;margin:0}
  .hero-foot{margin-top:clamp(2.4rem,6vh,3.6rem);display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}
  .hero-foot .m{display:flex;gap:.7rem;align-items:center}
  .hero-foot .m::before{content:"";width:26px;height:1px;background:var(--bone-faint)}

  /* philosophy plate */
  .plate{position:relative;height:clamp(400px,72svh,760px);overflow:hidden;background:#000}
  .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .plate::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(10,10,11,.26),rgba(10,10,11,.02) 36%,rgba(10,10,11,.6) 72%,var(--ink) 99%)}
  .plate-in{position:absolute;inset:auto 0 0 0;z-index:2;padding-bottom:clamp(2rem,6vh,3.4rem)}
  .plate-stmt{font-family:var(--serif);font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1.1;
    max-width:19ch;color:#f4f1ec;margin:.9rem 0 0}

  /* statement */
  .stmt{font-family:var(--serif);font-size:clamp(1.5rem,3.5vw,2.5rem);line-height:1.34;
    max-width:20ch;color:#f4f1ec;margin:0}
  .two{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,6rem);align-items:start}
  @media(max-width:880px){.two{grid-template-columns:1fr;gap:2rem}}
  .sec-label{display:flex;gap:1rem;align-items:baseline;margin:0 0 2.4rem}

  /* the question */
  .qband{background:var(--ink-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .threads{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,3.2rem);margin-top:2.6rem}
  .thread{border-top:1px solid var(--line);padding-top:1.2rem}
  .thread p{font-size:.95rem;color:var(--bone-dim);margin:.7rem 0 0;max-width:none}
  @media(max-width:820px){.threads{grid-template-columns:1fr}}

  /* field record */
  .entry{display:grid;grid-template-columns:120px 1fr 1.05fr;gap:clamp(1.4rem,3.4vw,3rem);
    padding:clamp(2.6rem,6vw,4.2rem) 0;border-top:1px solid var(--line);align-items:start}
  .entry-meta{display:flex;flex-direction:column;gap:.5rem;padding-top:.4rem}
  .entry h3{font-size:clamp(1.45rem,2.9vw,2.05rem);margin:0 0 1rem;color:#f4f1ec}
  .q{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.32rem);
    line-height:1.45;color:var(--signal);margin:0 0 1.1rem;max-width:30ch}
  .entry p.body{font-size:.96rem;color:var(--bone-dim);margin:0}
  .entry-img img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.12) contrast(1.03);
    transition:filter .7s,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .entry:hover .entry-img img{filter:none;transform:scale(1.02)}
  @media(max-width:940px){
    .entry{grid-template-columns:1fr;gap:1.3rem}
    .entry-meta{flex-direction:row;gap:1.2rem;padding-top:0}
    .entry-img{order:-1}
  }

  /* output */
  .outs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:2.6rem}
  .out{border-top:1px solid var(--line);padding-top:1.2rem}
  .out h3{font-size:1.12rem;margin:.6rem 0 .5rem;color:#f4f1ec}
  .out p{font-size:.9rem;color:var(--bone-dim);margin:0;max-width:none}
  @media(max-width:900px){.outs{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.outs{grid-template-columns:1fr}}

  /* credits */
  .credits{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem);margin-top:2.4rem}
  .cred{border-top:1px solid var(--line);padding-top:1rem}
  .cred h3{font-family:var(--sans);font-size:.98rem;font-weight:600;margin:0 0 .3rem;color:#f4f1ec}
  @media(max-width:820px){.credits{grid-template-columns:1fr 1fr}}
  .withlist{margin-top:1.4rem;font-size:.92rem;color:var(--bone-dim);line-height:2;max-width:none}
  .withlist span::after{content:" / ";color:var(--bone-faint)}
  .withlist span:last-child::after{content:""}

  /* strip */
  .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
  .strip img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(.35) contrast(1.05);transition:filter .6s}
  .strip img:hover{filter:none}
  @media(max-width:700px){.strip{grid-template-columns:repeat(2,1fr)}}

  /* contact */
  .big-link{font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,2.7rem);color:#f4f1ec;
    border-bottom:1px solid rgba(232,228,220,.22);padding-bottom:.1rem;transition:border-color .35s,color .35s}
  .big-link:hover{border-bottom-color:var(--signal);color:var(--signal)}

  footer{padding:3.2rem 0 3.6rem;border-top:1px solid var(--line-soft)}
  .footin{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:center}
  .who-bio{font-size:.86rem;line-height:1.6;color:var(--bone-dim);margin:.55rem 0 0;max-width:none}

  /* ---- spotlight film ---- */
  .feat{position:relative;padding:clamp(4rem,9vw,7rem) 0 0}
  .feat-img{position:relative;aspect-ratio:21/9;overflow:hidden;background:var(--ink-3)}
  .feat-img img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;filter:saturate(.92)}
  .feat-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 2%,rgba(10,10,11,.45) 40%,rgba(10,10,11,.1) 100%)}
  .feat-head{position:relative;z-index:2;margin-top:clamp(-6rem,-8vw,-3.5rem)}
  .feat-head h2{font-size:clamp(2.6rem,7.4vw,5.6rem);letter-spacing:-.022em;max-width:16ch}
  .feat-log{font-family:var(--serif);font-size:clamp(1.18rem,2.3vw,1.62rem);line-height:1.45;
    color:var(--bone);max-width:44ch;margin:1.8rem 0 0}
  .kick{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
  .kick .dot{width:5px;height:5px;border-radius:50%;background:var(--signal);flex:none}

  /* ---- fact rows ---- */
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.6rem 2rem;
    border-top:1px solid var(--line);padding-top:1.6rem;margin-top:2.6rem}
  .facts div span{display:block}
  .facts .v{font-size:.92rem;line-height:1.5;color:var(--bone);margin-top:.4rem;font-family:var(--sans)}

  /* ---- film blocks ---- */
  .film{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
    padding:clamp(3.5rem,8vw,6.5rem) 0;border-top:1px solid var(--line-soft)}
  .film:first-of-type{border-top:0}
  .film.flip>.film-txt{order:2}
  .film-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
  .film-txt h3{font-size:clamp(1.8rem,3.4vw,2.9rem);letter-spacing:-.015em;margin-bottom:1.1rem}
  .film-txt p{color:var(--bone-dim);font-size:1rem}
  .film-txt p.lede{color:var(--bone);font-size:1.06rem}

  /* ---- expedition callout ---- */
  .exped{border-left:2px solid var(--signal);padding:.2rem 0 .2rem 1.5rem;margin:2rem 0 1.4rem}
  .exped p{margin:.5rem 0 0;color:var(--bone);font-size:.98rem}

  /* ---- catalogue ---- */
  .cat{border-top:1px solid var(--line)}
  .cat a,.cat div.row{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,2fr) auto;gap:1.2rem 2rem;
    padding:1.5rem 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
  .cat h4{font-family:var(--serif);font-weight:500;font-size:1.28rem;margin:0;line-height:1.2}
  .cat p{margin:0;color:var(--bone-dim);font-size:.9rem;max-width:52ch}

  /* ---- link ---- */
  .go{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--signal);border-bottom:1px solid rgba(200,112,60,.34);
    padding-bottom:.35rem;margin-top:1.8rem;transition:border-color .3s,gap .3s}
  .go:hover{border-bottom-color:var(--signal);gap:.95rem}

  .lockmark{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--bone-faint);margin-left:.1rem}

  @media(max-width:860px){
    .film{grid-template-columns:1fr;gap:1.8rem}
    .film.flip>.film-txt{order:0}
    .cat a,.cat div.row{grid-template-columns:1fr;gap:.5rem}
    .feat-img{aspect-ratio:4/3}
    .feat-head{margin-top:-2rem}
  }

  /* ---- company / purpose ---- */
  .purpose{font-family:var(--serif);font-size:clamp(1.45rem,3.2vw,2.42rem);line-height:1.26;
    letter-spacing:-.015em;max-width:26ch;margin:0}
  .purpose em{font-style:italic;color:var(--signal)}
  .bg{max-width:52ch}
  .bg p{color:var(--bone-dim);font-size:1.02rem}
  .bg p.lede{color:var(--bone)}
  .colsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.2rem,6vw,5.5rem);align-items:start}

  /* ---- team row ---- */
  .team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem 2.2rem;
    border-top:1px solid var(--line);padding-top:2.4rem;margin-top:clamp(3rem,7vw,4.6rem)}
  @media(max-width:1040px){.team{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem 2.2rem}
  .mem img{max-width:150px}}
  .mem h3{font-family:var(--serif);font-size:1.32rem;font-weight:500;margin:0 0 .35rem;letter-spacing:-.01em}
  .mem .role{display:block;margin-bottom:.9rem}
  .mem p{font-size:.86rem;line-height:1.62;color:var(--bone-dim);margin:0;max-width:38ch}

  .cat .row:hover h4{color:var(--signal);transition:color .3s}

  /* ---- production status system ----
     filled dot = work in hand, hollow ring = not yet shot, faint = delivered */
  .status{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
    font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim);
    border:1px solid var(--line);border-radius:100px;padding:.42rem .82rem .42rem .72rem;
    white-space:nowrap}
  .status i{width:6px;height:6px;border-radius:50%;flex:none}
  .status-post i{background:var(--signal);box-shadow:0 0 0 3px rgba(200,112,60,.16)}
  .status-post{color:var(--bone);border-color:rgba(200,112,60,.42)}
  .status-pre i{background:transparent;border:1.5px solid var(--signal)}
  .status-pre{color:var(--bone);border-color:rgba(200,112,60,.26)}
  .status-rel i{background:var(--bone-faint)}
  .statusrow{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1.2rem}
  .funder{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--signal)}
  .film-txt .statusrow{margin-bottom:1rem}
  .cat .row .status{justify-self:end}

  .feat-log.q-lead{font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.2;letter-spacing:-.015em;max-width:20ch}
  .attrib{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--signal);margin:.95rem 0 0;display:block}

  /* ---- pulldown for the long read ---- */
  .more{margin-top:1.7rem}
  .more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;
    font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
    color:var(--signal);border-bottom:1px solid rgba(200,112,60,.34);padding-bottom:.35rem;
    transition:border-color .3s}
  .more>summary::-webkit-details-marker{display:none}
  .more>summary::marker{content:""}
  .more>summary:hover{border-bottom-color:var(--signal)}
  .more .chev{display:inline-block;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
  .more[open] .chev{transform:rotate(90deg)}
  .more .lbl-close{display:none}
  .more[open] .lbl-open{display:none}
  .more[open] .lbl-close{display:inline}
  .more .inner{padding-top:1.5rem;animation:unfold .5s cubic-bezier(.2,.7,.2,1)}
  @keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.more .inner{animation:none}.more .chev{transition:none}}

  /* ---- poster reel: the slate at a glance ---- */
  .reelsec{padding:clamp(3.4rem,7vw,5.5rem) 0 clamp(5.4rem,10vw,8rem)}
  .reelhead{max-width:var(--wrap);margin:0 auto 1.7rem;padding:0 clamp(1.4rem,5vw,4rem);
    display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
  /* --edge lines the first poster up with the page content, not the window edge;
     scroll-padding makes snapping respect that gutter instead of eating it */
  .reel{--gut:clamp(1.4rem,5vw,4rem);
    --edge:max(var(--gut), calc((100% - var(--wrap))/2 + var(--gut)));
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(192px,246px);gap:1.05rem;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    padding:.3rem var(--gut) 1.3rem var(--edge);
    scroll-padding-left:var(--edge);scroll-padding-right:var(--gut);
    scrollbar-width:thin;scrollbar-color:rgba(232,228,220,.22) transparent}
  .reel::-webkit-scrollbar{height:3px}
  .reel::-webkit-scrollbar-track{background:transparent}
  .reel::-webkit-scrollbar-thumb{background:rgba(232,228,220,.22);border-radius:3px}
  .poster{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;background:var(--ink-3);
    border:1px solid var(--line);scroll-snap-align:start;isolation:isolate}
  .poster img{width:100%;height:100%;object-fit:cover;
    filter:saturate(.88) brightness(.82);
    transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .45s ease}
  .poster::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to top,rgba(10,10,11,.95) 3%,rgba(10,10,11,.55) 32%,rgba(10,10,11,0) 64%)}
  a.poster:hover img,a.poster:focus-visible img{transform:scale(1.055);filter:saturate(1) brightness(1)}
  a.poster:focus-visible{outline:1px solid var(--signal);outline-offset:2px}
  .poster-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem .95rem 1.05rem}
  .poster h4{font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.22;
    letter-spacing:-.01em;margin:0 0 .4rem;text-wrap:balance}
  .poster .pm{font-family:var(--mono);font-size:.56rem;letter-spacing:.17em;text-transform:uppercase;
    color:var(--bone-dim);display:block}
  .poster .flag{position:absolute;top:.8rem;left:.8rem;z-index:2;
    font-size:.55rem;padding:.3rem .58rem .3rem .5rem;gap:.42rem;
    background:rgba(10,10,11,.62);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
  .poster .flag i{width:5px;height:5px}
  @media(prefers-reduced-motion:reduce){.poster img{transition:none}a.poster:hover img{transform:none}}


  /* the Boy and the Butterfly card carries the finished poster, graded already,
   so it opts out of the reel's darkening and keeps its own bottom third clear */
  .poster.filmposter img{filter:none}
  .poster.filmposter::after{background:linear-gradient(to top,rgba(10,10,11,.62) 2%,rgba(10,10,11,0) 22%)}
  /* official key art is square with the title baked in, so never crop it */
  .poster.keyart img{height:auto;object-fit:contain;position:absolute;top:0;left:0}
  .poster.keyart::after{background:linear-gradient(to top,rgba(10,10,11,.9) 12%,rgba(10,10,11,0) 42%)}
  .poster.keyart .poster-in h4{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


  .rolet{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.18em;
    text-transform:uppercase;margin-bottom:.42rem;color:var(--signal)}
  .rolet.ft{color:var(--bone-dim)}
  .poster.keyart .rolet{text-shadow:0 1px 6px rgba(10,10,11,.9)}

  .mem img{width:100%;max-width:160px;aspect-ratio:1;object-fit:cover;display:block;margin-bottom:.9rem;
    border:1px solid var(--line);filter:grayscale(1) contrast(1.02) brightness(.96);
    transition:filter .5s ease}
  .mem:hover img{filter:grayscale(0) contrast(1) brightness(1)}
  @media(prefers-reduced-motion:reduce){.mem img{transition:none}}

  .leadstmt{font-family:var(--serif);font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.45;
    color:var(--bone);margin:0 0 1.5rem;max-width:46ch}

  /* ---- upcoming work: compact expandable rows ---- */
  .ups{border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
  .up{border-bottom:1px solid var(--line-soft)}
  .up>summary{list-style:none;cursor:pointer;display:grid;
    grid-template-columns:78px minmax(0,1fr) auto;gap:1.3rem;align-items:center;
    padding:1.5rem 0;transition:opacity .35s}
  .up>summary::-webkit-details-marker{display:none}
  .up>summary::marker{content:""}
  .up>summary:hover{opacity:.76}
  .up>summary:focus-visible{outline:1px solid var(--signal);outline-offset:3px}
  .up-th{width:78px;height:78px;object-fit:cover;border:1px solid var(--line);display:block}
  .up h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.14rem,2vw,1.42rem);
    letter-spacing:-.012em;margin:0 0 .45rem;line-height:1.2}
  .up .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
  .up .hook{margin:.55rem 0 0;font-size:.92rem;line-height:1.55;color:var(--bone-dim);max-width:56ch}
  .up .chv{font-family:var(--mono);font-size:1.05rem;color:var(--signal);
    transition:transform .34s cubic-bezier(.2,.7,.2,1);display:inline-block}
  .up[open] .chv{transform:rotate(90deg)}
  .up .body{padding:.2rem 0 2.6rem;animation:unfold .5s cubic-bezier(.2,.7,.2,1)}
  .up .body .col{max-width:62ch}
  .up .body img.wide{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 1.8rem;border:1px solid var(--line)}
  @media(max-width:700px){
    .up>summary{grid-template-columns:58px minmax(0,1fr) auto;gap:.9rem}
    .up-th{width:58px;height:58px}
  }
  @media(prefers-reduced-motion:reduce){.up .body{animation:none}.up .chv{transition:none}}

  /* ---- live glow on the three current productions ---- */
  @property --glowang{syntax:'<angle>';initial-value:0deg;inherits:false}

  .poster.glow{
    border-color:rgba(200,112,60,.5);
    animation:glowbloom 4.2s ease-in-out infinite}

  /* travelling light around the edge, drawn as a masked conic ring */
  .poster.glow::before{
    content:"";position:absolute;inset:-1px;z-index:4;pointer-events:none;padding:1.5px;
    background:conic-gradient(from var(--glowang),
      rgba(200,112,60,0) 0deg, rgba(232,160,96,.95) 45deg, rgba(200,112,60,.25) 120deg,
      rgba(200,112,60,0) 180deg, rgba(200,112,60,.6) 250deg, rgba(200,112,60,0) 330deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    animation:glowturn 5.5s linear infinite}

  @keyframes glowturn{to{--glowang:360deg}}
  @keyframes glowbloom{
    0%,100%{box-shadow:0 0 10px rgba(200,112,60,.20)}
    50%{box-shadow:0 0 28px rgba(200,112,60,.52)}}

  a.poster.glow:hover{animation-duration:2.2s}
  a.poster.glow:hover::before{animation-duration:2.6s}

  @media(prefers-reduced-motion:reduce){
    .poster.glow,.poster.glow::before{animation:none}
    .poster.glow{box-shadow:0 0 16px rgba(200,112,60,.35)}
    .poster.glow::before{background:rgba(200,112,60,.6)}}

  /* ---- project subpages ---- */
  .proj{padding:clamp(4.5rem,9vw,7rem) 0 clamp(1.6rem,3vw,2.4rem)}
  .back{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.68rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:2rem;
    transition:color .3s}
  .back:hover{color:var(--signal)}
  .proj-h{font-size:clamp(2.1rem,6vw,4rem);letter-spacing:-.022em;max-width:18ch}
  .proj .statusrow{margin-bottom:0}

  .backhome{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.72rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
    border:1px solid var(--line);padding:.95rem 1.4rem;transition:border-color .3s,color .3s,gap .3s}
  .backhome:hover{border-color:rgba(200,112,60,.55);color:var(--signal);gap:1.05rem}

  /* ================= mobile ================= */

  /* nav keeps its links on phones; brand takes the first row, links the second */
  @media(max-width:820px){
    .navin{flex-wrap:wrap;align-items:center;gap:.45rem 1.1rem;padding-top:.75rem;padding-bottom:.75rem}
    .brand{flex:1 1 100%;font-size:.66rem;letter-spacing:.24em}
    .navlinks{gap:1.15rem;flex-wrap:wrap}
    .navlinks a{font-size:.6rem;letter-spacing:.14em;
      /* keep the look, grow the tap area to ~44px */
      padding:.82rem .2rem;margin:-.82rem -.2rem}
    .brand{padding:.6rem 0;margin:-.6rem 0}
  }

  /* company section stacks */
  @media(max-width:860px){
    .colsplit{grid-template-columns:1fr;gap:1.8rem}
    .purpose{max-width:none}
    .bg{max-width:none}
  }

  @media(max-width:640px){
    /* let more of the next poster show, so the reel reads as scrollable */
    .reelsec{padding-bottom:clamp(5.6rem,14vw,7.5rem)}
    .reel{grid-auto-columns:minmax(156px,63vw);gap:.8rem;padding-bottom:1.1rem}
    .reelhead{margin-bottom:1.1rem}
    .poster h4{font-size:.94rem}
    .poster .pm,.poster .rolet{font-size:.52rem;letter-spacing:.14em}
    .poster .flag{top:.6rem;left:.6rem;font-size:.5rem;padding:.26rem .48rem .26rem .42rem}

    /* credit tables read as a single column */
    .facts{grid-template-columns:1fr;gap:1.1rem;padding-top:1.2rem;margin-top:2rem}

    /* team collapses: faces and names at a glance, bio on tap */
    .team{grid-template-columns:1fr;gap:0;padding-top:0;border-top:0}
    .mem{border-bottom:1px solid var(--line-soft)}
    .mem > summary{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:1rem;
      align-items:center;padding:1.05rem 0;cursor:pointer;list-style:none}
    .mem > summary::-webkit-details-marker{display:none}
    .mem > summary::marker{content:""}
    .mem img{width:76px;height:76px;max-width:none;margin:0}
    .mem h3{font-size:1.04rem;margin:0 0 .22rem}
    .mem .role{margin:0;font-size:.55rem;letter-spacing:.15em}
    .mem .chv{font-family:var(--mono);font-size:1rem;color:var(--signal);
      transition:transform .3s cubic-bezier(.2,.7,.2,1)}
    .mem[open] .chv{transform:rotate(90deg)}
    .mem p{max-width:none;font-size:.88rem;line-height:1.62;padding:0 0 1.3rem}

    .hero{min-height:78svh}
    .hero .wrap{padding-bottom:clamp(2.6rem,6vh,3.6rem)}
    .hero-foot{margin-top:clamp(1.6rem,4vh,2.4rem)}
    .hero h1{max-width:12ch}
    .hero-sub{font-size:.98rem;line-height:1.55}
    .purpose{font-size:clamp(1.34rem,6.4vw,1.9rem)}
    .leadstmt{font-size:1.12rem;max-width:none}
    .feat-log{max-width:none}
    p{max-width:none}
    .backhome{width:100%;justify-content:center}
    .footin{gap:.5rem}
  }

  /* nothing may push the page sideways */
  @media(max-width:640px){
    .wrap,.reelhead{padding-left:1.15rem;padding-right:1.15rem}
    .reel{--gut:1.15rem;--edge:1.15rem;padding-left:1.15rem;padding-right:1.15rem;
      scroll-padding-left:1.15rem}
  }

  /* The projected landscape behind Albert is pale blue and green exactly where the type
     sits, so the plate carries a wedge of shade on the reading side as well as the usual
     bottom scrim, and the measure is held inside that wedge. */
  #live .plate::after{background:
    linear-gradient(90deg, rgba(10,10,11,.93) 0%, rgba(10,10,11,.86) 22%, rgba(10,10,11,.52) 46%, rgba(10,10,11,.18) 68%, rgba(10,10,11,0) 86%),
    linear-gradient(180deg, rgba(10,10,11,.40) 0%, rgba(10,10,11,.08) 28%, rgba(10,10,11,.60) 64%, rgba(10,10,11,.93) 87%, var(--ink) 100%)}
  #live .plate-stmt{max-width:17ch;font-size:clamp(1.75rem,3.5vw,2.95rem);line-height:1.08;
    text-wrap:balance;
    text-shadow:0 1px 2px rgba(10,10,11,.6), 0 3px 26px rgba(10,10,11,.85)}
  #live .plate-in .m-sig{text-shadow:0 2px 12px rgba(10,10,11,.9)}

  /* the stage frame is 3:2; at phone aspect a centre crop loses both Albert and the audience */
  @media(max-width:640px){
    #live .plate{height:clamp(340px,54svh,460px)}
    /* push the bright projection up and left, out from under the type */
    #live .plate img{object-position:74% 54%}
    #live .plate-stmt{font-size:clamp(1.3rem,5.6vw,1.72rem);max-width:19ch;line-height:1.12}
    #live .plate::after{background:
      linear-gradient(180deg, rgba(10,10,11,.44) 0%, rgba(10,10,11,.10) 20%, rgba(10,10,11,.58) 50%, rgba(10,10,11,.90) 76%, var(--ink) 97%),
      linear-gradient(90deg, rgba(10,10,11,.80) 0%, rgba(10,10,11,.52) 38%, rgba(10,10,11,.14) 70%, rgba(10,10,11,0) 92%)}
  }

  /* team disclosure is a phone affordance only; on wider screens it is a static card */
  @media(min-width:641px){
    .mem > summary{display:block;list-style:none;cursor:default;pointer-events:none}
    .mem > summary::-webkit-details-marker{display:none}
    .mem > summary::marker{content:""}
    .mem .chv{display:none}
    .mem:not([open]) > p{display:block}
  }

  /* sizzle player on project pages */
  .sizzle{margin:2.4rem 0 0}
  .sizzle video{display:block;width:100%;aspect-ratio:16/9;background:#000;
    border:1px solid var(--line);outline:none}
  .sizzle figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bone-faint);margin-top:.7rem}
  @media (max-width:640px){ .sizzle{margin-top:1.8rem} }

  /* Live: on phones the label sits above the photo, matching the slate heading */
  .platehead{display:none;max-width:var(--wrap);margin:0 auto 1rem;
    padding:0 clamp(1.4rem,5vw,4rem)}
  @media(max-width:640px){
    .platehead{display:block}
    #live{scroll-margin-top:4.4rem}
    #live .plate-in .m-sig{display:none}
    #live .plate-in .plate-stmt{margin-top:0}
  }

  /* company signature: the hand mark locked up with the Barlow Condensed wordmark */
  .footbrand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--brand);
    font-size:.82rem;letter-spacing:.14em;font-weight:600}
  .footbrand img{width:18px;height:18px;display:block;flex:none}
  @media(max-width:640px){
    .brand{gap:.48rem;font-size:.84rem;letter-spacing:.16em}
    .brand img{width:22px;height:22px}
  }

  /* funder credit on a reel poster */
  .poster .funder{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--signal);margin-top:.42rem;line-height:1.35;
    padding-top:.42rem;border-top:1px solid rgba(200,112,60,.3)}
  @media(max-width:640px){ .poster .funder{font-size:.47rem;letter-spacing:.11em} }

  /* ---- campfire: the closing plate under contact ---- */
  .fire{position:relative;overflow:hidden;background:var(--ink);
    min-height:clamp(470px,72svh,700px);display:flex;align-items:flex-end;isolation:isolate}
  .fire-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center 62%;z-index:0;opacity:.9}
  .fire-embers{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
  .fire::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      linear-gradient(180deg,var(--ink) 0%,rgba(10,10,11,.40) 22%,rgba(10,10,11,.26) 44%,rgba(10,10,11,.72) 68%,rgba(10,10,11,.93) 88%,var(--ink) 100%),
      linear-gradient(90deg,var(--ink) 0%,rgba(10,10,11,0) 22%,rgba(10,10,11,0) 78%,var(--ink) 100%)}
  .fire-in{position:relative;z-index:3;width:100%;padding-bottom:clamp(2.2rem,6vh,3.6rem)}
  .fire-stmt{font-family:var(--serif);font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.05;
    color:#f4f1ec;margin:0 0 1rem;text-shadow:0 2px 22px rgba(10,10,11,.75)}
  .fire .big-link{text-shadow:0 2px 18px rgba(10,10,11,.8)}
  @media(max-width:640px){
    .fire{min-height:clamp(290px,44svh,400px)}
    .fire-in{padding-bottom:clamp(1.8rem,5vh,2.6rem)}
  }

  .fire-kick{margin:0 0 .9rem}
  .fire-sub{color:#ddd8d0;font-size:clamp(1rem,2vw,1.16rem);line-height:1.5;
    margin:0 0 1.5rem;max-width:32ch;text-shadow:0 2px 16px rgba(10,10,11,.85)}
  @media(max-width:640px){
    .fire-sub{font-size:.98rem;margin-bottom:1.2rem;max-width:26ch}
    .fire-kick{margin-bottom:.7rem}
  }

  /* request-access link, sits under the private-link note */
  .reqlink{color:var(--signal);border-bottom:1px solid rgba(200,112,60,.38);
    padding-bottom:1px;transition:border-color .25s,color .25s}
  .reqlink:hover{color:#e8955f;border-bottom-color:rgba(200,112,60,.8)}