:root{--cf-ink:#0b0b0a;--cf-paper:#f2f0e9;--cf-yellow:#ffcc00}

/* The navigation belongs to the film first, then becomes a calm utility bar. */
#nav{height:auto;background:linear-gradient(180deg,rgba(8,8,7,.58),rgba(8,8,7,0));border:0;backdrop-filter:none;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
#nav .nav-inner{height:78px}
#nav .nav-logo img{height:70px;width:auto;mix-blend-mode:normal;filter:none;transition:filter .3s ease,opacity .3s ease}
#nav .nav-links a{color:rgba(255,255,255,.78);text-shadow:0 1px 14px rgba(0,0,0,.35)}
#nav .nav-links a:hover{color:#fff}
#nav .hamburger{color:#fff}
#nav.is-solid{background:rgba(243,243,240,.92);border-bottom:1px solid rgba(10,10,10,.09);backdrop-filter:blur(16px)}
#nav.is-solid .nav-logo img{filter:none;mix-blend-mode:multiply}
#nav.is-solid .nav-links a{color:#565650;text-shadow:none}
#nav.is-solid .nav-links a:hover{color:#0a0a0a}
#nav.is-solid .hamburger{color:#0a0a0a}

/* Give the pictures room; typography supports the film instead of covering it. */
.cf-beat{padding-left:clamp(1.5rem,5vw,5rem);padding-right:clamp(1.5rem,5vw,5rem);text-shadow:0 2px 28px rgba(0,0,0,.58)}
/* Hero lines: a sentence-case lead-in, then the payoff at display size. */
#hero.cf-film{height:820vh}
.cf-beat h1,.cf-beat h2{font-size:clamp(2.7rem,5.4vw,5.7rem);line-height:.86;max-width:13ch;text-transform:none}
.cf-beat .cf-big{display:block;text-transform:uppercase;text-wrap:balance}
.cf-beat .cf-lead{display:block;max-width:24ch;margin-bottom:clamp(.8rem,1.4vw,1.25rem);font:500 clamp(1.1rem,1.75vw,1.6rem)/1.3 'Space Grotesk',sans-serif;letter-spacing:-.015em;color:#f2efe7;text-wrap:pretty;text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 22px rgba(0,0,0,.7)}
.cf-beat-plan .cf-lead{margin-left:auto}
/* The film's shade darkens the left; this right-aligned line brings its own, fading in with the text. */
.cf-beat-plan{background:linear-gradient(270deg,rgba(0,0,0,.42),rgba(0,0,0,.18) 40%,transparent 62%)}
.cf-beat-long h2{font-size:clamp(2.3rem,4.4vw,4.6rem);max-width:15ch;line-height:.9}
.cf-hang{margin-left:-.42em}
.cf-beat-scale h2{max-width:14ch}.cf-beat-scale .cf-big{color:#ffcc00}.cf-beat-scale .cf-first{display:block;color:#f2efe7}
.cf-chapter{bottom:1.7rem}.cf-cue{bottom:4.15rem}

/* Editorial bridge from the cinematic sequence into the original site. */
#about{position:relative;background:var(--cf-paper);padding:clamp(5.5rem,10vw,9.5rem) 0 clamp(5rem,9vw,8rem);overflow:hidden}
#about:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(10,10,10,.12)}
.about-kicker{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;margin-bottom:clamp(4rem,8vw,7rem);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#696860}
.about-kicker i{height:1px;background:#c7c4ba}
.about-grid{grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(3rem,8vw,8rem);align-items:start}
.about-h{max-width:13ch;font-size:clamp(2.5rem,5.25vw,5.5rem);line-height:.94;letter-spacing:-.055em;margin-bottom:2rem}
.about-p{max-width:58ch;color:#5c5b55;line-height:1.75}
.about-lead{font-size:clamp(1.05rem,1.35vw,1.25rem);color:#272724}
.about-actions{display:flex;align-items:center;gap:1.5rem;margin-top:2.25rem;flex-wrap:wrap}
.about-text-link{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #aaa79f;padding:.55rem 0;color:#111}
.about-text-link span{display:inline-block;margin-left:.3rem;transition:transform .2s}.about-text-link:hover span{transform:translateX(4px)}
#about .about-grid>div:last-child{position:sticky;top:7rem}
#about .about-grid>div:last-child>div{border-radius:2px!important;box-shadow:18px 18px 0 #e2dfd5}
#about .about-grid img{filter:saturate(.9) contrast(1.03)}
.about-process{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(4.5rem,8vw,7.5rem);border-top:1px solid #bdbab1;border-bottom:1px solid #bdbab1}
.about-process>div{padding:2rem clamp(1rem,2.5vw,2.4rem) 2.3rem 0;border-right:1px solid #bdbab1}
.about-process>div+div{padding-left:clamp(1rem,2.5vw,2.4rem)}.about-process>div:last-child{border-right:0}
.about-process span{display:block;color:#a29f96;font-size:.68rem;font-weight:700;letter-spacing:.12em;margin-bottom:1.4rem}
.about-process strong{display:block;font-family:var(--fh);font-size:clamp(1.15rem,1.7vw,1.55rem);letter-spacing:-.03em;color:#111;margin-bottom:.55rem}
.about-process p{font-size:.82rem;line-height:1.6;color:#696860;max-width:30ch}

@media(max-width:768px){
  #nav .nav-inner{height:68px}#nav .nav-logo img{height:56px}
  #nav .mob-menu{background:rgba(243,243,240,.97);border-bottom:1px solid rgba(0,0,0,.1)}
  #hero.cf-film{height:660vh}.cf-stage{height:100svh}
  .cf-beat{justify-content:flex-end;padding:0 1.25rem 8.5rem;align-items:flex-start;text-align:left}
  .cf-beat h1,.cf-beat h2{font-size:clamp(2.3rem,10vw,3.7rem);line-height:.9;max-width:12ch}
  .cf-beat-long h2{font-size:clamp(2rem,8.4vw,3.1rem);max-width:13ch}
  .cf-beat .cf-lead{font-size:clamp(1.05rem,4.6vw,1.3rem);max-width:26ch}
  .cf-beat-plan .cf-lead{margin-left:0}
  .cf-beat-plan{background:none}
  .cf-beat-make,.cf-beat-scale{padding-bottom:8.5rem}
  .cf-shade{background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72) 100%)}
  .cf-chapter{left:1.25rem;right:1.25rem;bottom:1.25rem;grid-template-columns:1.5rem auto 1fr 1.5rem}.cf-cue{right:1.25rem;bottom:3.35rem}
  #about{padding-top:4.5rem}.about-kicker{grid-template-columns:1fr;gap:.65rem;margin-bottom:3.25rem}.about-kicker i{display:none}.about-kicker span:last-child{color:#a09e96}
  .about-grid{grid-template-columns:1fr;gap:3.5rem}.about-h{font-size:clamp(2.65rem,11.5vw,4.1rem)}
  #about .about-grid>div:last-child{position:relative;top:auto}#about .about-grid>div:last-child>div{box-shadow:10px 10px 0 #e2dfd5}
  .about-process{grid-template-columns:1fr}.about-process>div,.about-process>div+div{padding:1.5rem 0;border-right:0;border-bottom:1px solid #bdbab1}.about-process>div:last-child{border-bottom:0}
}
@media(max-width:420px){.cf-cue{font-size:.5rem}.cf-beat small{font-size:.58rem}.about-actions{align-items:flex-start;flex-direction:column;gap:.7rem}}
@media(prefers-reduced-motion:reduce){#nav,.nav-logo img,.about-text-link span{transition:none!important}#hero.cf-film{height:300vh}}