/* Worlds by Kai. One stylesheet, no build step. Tokens first, then layout by section. */
@font-face{font-family:"Fraunces WBK";src:url("fonts/fraunces-wbk-v2.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces WBK";src:url("fonts/fraunces-italic-wbk-v2.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Noto Sans WBK";src:url("fonts/noto-sans-wbk-v1.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* Brand kit: paper, ink, coral. Rust is coral dark enough to carry text on paper. */
  --paper:#F6F1E7;--paper-2:#EDE7DC;--ink:#202925;--coral:#F18470;--rust:#A34735;
  --muted:#5C655F;--on-ink-muted:#B7C2B9;
  /* The ground the hero artwork was painted on, so the artwork sits on the page itself. */
  --plate:#F6ECDE;
  --rule:#20292526;
  --serif:"Fraunces WBK",Georgia,"Times New Roman",serif;
  --sans:"Noto Sans WBK",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --gutter:clamp(20px,5vw,64px);
  --fold:clamp(12px,2.2vw,30px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);font-synthesis:none;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,figure,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;text-wrap:balance}
h1{font-size:clamp(2.625rem,1.15rem + 5.9vw,5.25rem);line-height:1.01;letter-spacing:-.024em}
h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.25rem);line-height:1.07;letter-spacing:-.02em}
h3{font-size:1.5rem;line-height:1.2;letter-spacing:-.012em}
/* Italic has one job on this site: the imagined, and Kai's own voice. */
em{font-family:var(--serif);font-style:italic;font-weight:500}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--rust);outline-offset:4px;border-radius:4px}
.on-ink :focus-visible{outline-color:var(--coral)}
.container{width:min(100% - var(--gutter)*2,1200px);margin-inline:auto}
.icon{width:1.05em;height:1.05em;flex:none}
.skip-link{position:absolute;top:8px;left:16px;z-index:10;transform:translateY(-200%);padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--paper)}
.skip-link:focus{transform:none}
.kicker{font:600 .8125rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.on-ink .kicker{color:var(--on-ink-muted)}
.lead{font-size:clamp(1.125rem,1.03rem + .45vw,1.3125rem);line-height:1.55}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65em;min-height:52px;padding:.7em 1.5em;border:1.5px solid transparent;border-radius:999px;font:600 1rem/1.2 var(--sans);text-decoration:none;transition:background-color .16s,color .16s,border-color .16s}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--rust)}
.btn--coral{background:var(--coral);color:var(--ink)}
.btn--coral:hover{background:var(--paper)}
.btn--quiet{min-height:44px;padding:.45em 1.15em;border-color:currentColor;font-size:.9375rem}
.btn--quiet:hover{background:var(--ink);color:var(--paper)}

/* Header */
.site-header{background:var(--paper)}
.home .site-header,.band-plate{background:var(--plate)}
.site-header__inner{display:flex;align-items:center;gap:clamp(14px,3vw,40px);min-height:88px}
.brand{display:inline-flex;align-items:center;flex:none;min-height:44px;text-decoration:none}
.brand img{width:165px}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:clamp(18px,2.6vw,36px)}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;font-weight:500;text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.5em}

/* Hero: the promise on the left, the world on the right */
.hero{padding-block:clamp(8px,2vw,28px) clamp(36px,5vw,64px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}
/* The headline is sized from its own column (and the viewport height), so its three lines never rewrap. */
.hero__copy{padding-block:16px;container-type:inline-size}
/* Pinned to the display cut: the same letterforms and the same line width in em at every size. */
.hero h1{margin-top:18px;font-variation-settings:"opsz" 96}
@supports (font-size:1cqi){.hero h1{font-size:clamp(2.25rem,min(15.4cqi,10.6svh),5.25rem)}}
.hero h1 span{display:block}
.actions{margin-top:clamp(28px,3.4vw,44px)}
.status{display:flex;align-items:baseline;gap:10px;margin-top:22px;font-size:.9375rem;line-height:1.5}
.status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--coral);transform:translateY(-1px)}
.hero__figure{justify-self:end;width:min(100%,640px,(100svh - 190px)*.8);min-width:min(100%,340px)}
.hero-film__stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:16px}
.hero-film__still,.hero-film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The still's studio ground is settled into --plate by tools/build_assets.py, so it needs no frame. */
.hero-film__video{opacity:0;pointer-events:none;transition:opacity .35s ease}
.hero-film.has-frame .hero-film__video{opacity:1}
/* When the film ends, hold the last frame briefly, then give the page back its W. */
.hero-film[data-state="ended"] .hero-film__video{opacity:0;transition:opacity 1.1s ease .9s}
.film-toggle{position:absolute;left:4%;bottom:3.5%;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px 8px 12px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:600 .875rem/1 var(--sans);cursor:pointer;transition:background-color .16s}
.film-toggle:hover{background:var(--rust)}
.film-toggle[hidden]{display:none}
.film-toggle svg{width:18px;height:18px;flex:none}
.film-toggle__pause,.hero-film[data-state="playing"] .film-toggle__play,.hero-film[data-state="loading"] .film-toggle__play{display:none}
.hero-film[data-state="playing"] .film-toggle__pause,.hero-film[data-state="loading"] .film-toggle__pause{display:block}
.film-toggle__time{font-weight:400;opacity:.8}
.hero-film[data-state="playing"] .film-toggle__time,.hero-film[data-state="loading"] .film-toggle__time{display:none}
/* While the film is still loading the button says so; its accessible name stays the action it performs. */
.hero-film[data-state="loading"] [data-film-label]{font-size:0}
.hero-film[data-state="loading"] [data-film-label]::after{content:"Loading…";font-size:.875rem}
.film-status{font-size:.875rem;color:var(--rust)}
.film-status:not(:empty){margin-top:10px}
.hero__figure figcaption{margin-top:12px;font-size:.875rem;line-height:1.5;color:var(--muted)}

/* Lights down. While the film is playing, the first screen (header and hero) goes dark, so
   the film is the brightest thing in the room. Pausing brings the lights straight back up;
   at the end they come up together with the fade back to the illustration. The state is the
   film controller's own data-state, read with :has(), so there is no extra script. Anyone
   who asks for reduced motion keeps the lights on, as does a browser without :has(). */
@media (prefers-reduced-motion:no-preference){
@supports selector(:has(*)){
  .home{--lights:0;--lights-fade:.5s;--lights-delay:0s;--ink-delay:.1s;--stage-text:var(--ink);--stage-muted:var(--muted);--stage-inverse:var(--paper);--stage-hover:var(--rust);--stage-ring:var(--rust)}
  /* The film opens on the same illustration and ground as the page, so the lights wait half a second and
     then go down with the camera's push-in rather than ahead of it. */
  .home:has(.hero-film[data-state="playing"]){--lights:1;--lights-fade:1.1s;--lights-delay:.5s;--ink-delay:.9s;--stage-text:var(--paper);--stage-muted:var(--on-ink-muted);--stage-inverse:var(--ink);--stage-hover:var(--coral);--stage-ring:var(--coral)}
  /* After the last frame: hold, then raise the lights while the film fades out (same .9s + 1.1s). */
  .home:has(.hero-film[data-state="ended"]){--lights-fade:1.1s;--lights-delay:.9s;--ink-delay:1.35s}
  .home .site-header,.hero{position:relative;isolation:isolate;color:var(--stage-text);transition:color .3s ease var(--ink-delay)}
  .home .site-header::before,.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:var(--lights);pointer-events:none;transition:opacity var(--lights-fade) ease var(--lights-delay)}
  /* The dark ends on the same shallow fold that the dark bands further down begin with. */
  .hero::before{clip-path:polygon(0 0,100% 0,100% 100%,75% calc(100% - var(--fold)),50% 100%,25% calc(100% - var(--fold)),0 100%)}
  .hero .kicker,.hero__figure figcaption,.hero .btn--primary>*{transition:color .3s ease var(--ink-delay)}
  .hero .kicker,.hero__figure figcaption{color:var(--stage-muted)}
  /* The main action is always the inverse of its surface: ink on the plate, paper in the dark. Its fill
     follows the hero's own (transitioning) text colour, so hover keeps its quick response. */
  .hero .btn--primary{color:inherit;background:currentColor}
  .hero .btn--primary>*{color:var(--stage-inverse)}
  .hero .btn--primary:hover{background:var(--stage-hover)}
  .home:has(.hero-film[data-state="playing"]) .site-header .btn--quiet:hover{background:var(--paper);color:var(--ink)}
  .home .site-header :focus-visible,.hero :focus-visible{outline-color:var(--stage-ring)}
  /* The header lockup is drawn in the current text colour (the same file, used as a mask), so it
     turns with the lights. The image stays in the page for its name and for forced-colours mode. */
  @supports ((mask-image:none) or (-webkit-mask-image:none)){
    .home .site-header .brand{position:relative}
    .home .site-header .brand::after{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("img/logo-primary.svg") left center/100% auto no-repeat;mask:url("img/logo-primary.svg") left center/100% auto no-repeat}
    .home .site-header .brand img{opacity:0}
    @media (forced-colors:active){
      .home .site-header .brand::after{display:none}
      .home .site-header .brand img{opacity:1}
    }
  }
}
}

/* Three kinds of question: the legend under the plate */
.kinds{padding-bottom:clamp(64px,9vw,112px)}
.kinds .container{padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--rule)}
.kinds__title{font-size:clamp(1.625rem,1.3rem + 1.3vw,2.375rem);line-height:1.14}
.kinds__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4.5vw,64px);margin-top:clamp(28px,4vw,44px)}
.planes{width:68px;height:51px}
.planes path{fill:var(--ink);fill-opacity:.15}
.planes--1 path:nth-child(1),.planes--2 path:nth-child(2),.planes--3 path:nth-child(3){fill:var(--rust);fill-opacity:1}
.kind h3{margin-top:16px}
.kind p{max-width:32ch;margin-top:6px;color:var(--muted)}

/* Dark bands start on a shallow fold: the W, at page width */
.fold{position:relative;margin-top:calc(var(--fold)*-1);clip-path:polygon(0 0,25% var(--fold),50% 0,75% var(--fold),100% 0,100% 100%,0 100%)}

/* Films: present only once a film has been added */
.films{padding-block:calc(clamp(64px,9vw,116px) + var(--fold)) clamp(64px,9vw,116px);background:var(--ink);color:var(--paper)}
.films__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.films h2{margin-top:14px}
.films__meta{margin-top:16px;font-size:.9375rem;color:var(--on-ink-muted)}
.films__meta span{margin-inline:.5em}
.films__text{max-width:44ch;margin-top:18px;color:var(--on-ink-muted)}
.films .btn{margin-top:30px}
.film-slot{display:block;overflow:hidden;aspect-ratio:16/9;border-radius:16px;background:#2B3631}
.film-slot img{width:100%;height:100%;object-fit:cover}
.films__grid--short{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
.films__grid--short .film-slot{aspect-ratio:9/16;max-width:300px;justify-self:end;width:100%}

/* About and contact: who answers for the films, what they keep to, where to write */
.about{padding-block:clamp(64px,9vw,120px);background:var(--paper-2)}
.about__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:center}
.letter h2{margin-top:14px}
.letter__lead{max-width:24ch;margin-top:20px;font-family:var(--serif);font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.25;letter-spacing:-.012em}
.letter__body{max-width:46ch;margin-top:18px}
.letter__contact{margin-top:26px;scroll-margin-top:24px}
.email{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.7vw,2.25rem);line-height:1.2;letter-spacing:-.012em;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:.22em;overflow-wrap:anywhere}
.email:hover{text-decoration-color:var(--ink)}
.letter__note{margin-top:6px;font-size:.9375rem;color:var(--muted)}
.keeps{padding:clamp(24px,3vw,36px);border-radius:20px;background:var(--coral)}
.keeps h3{font:600 .8125rem/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.keeps ul{margin-top:14px}
.keeps li{padding-block:13px;border-top:1px solid #20292540;font-family:var(--serif);font-size:1.1875rem;line-height:1.3}
.keeps li:last-child{padding-bottom:0}

/* Footer */
.site-footer{padding-block:calc(clamp(32px,4vw,48px) + var(--fold)) clamp(28px,3.5vw,40px);background:var(--ink);color:var(--paper)}
.site-footer__inner{display:flex;flex-wrap:wrap;align-items:center;gap:8px clamp(24px,4vw,56px)}
.site-footer nav{margin-left:auto}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:4px 28px}
.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;text-decoration:none}
.site-footer nav a:hover{text-decoration:underline}
.site-footer small{font-size:.875rem;color:var(--on-ink-muted)}

/* Privacy and 404 */
.page{padding-block:clamp(36px,6vw,84px) clamp(72px,10vw,128px)}
.page h1{max-width:15ch;margin-top:16px;font-size:clamp(2.5rem,1.3rem + 4.8vw,4.5rem)}
.page .lead{max-width:44ch;margin-top:22px;color:var(--muted)}
.prose{max-width:60ch;margin-top:clamp(36px,5vw,56px)}
.prose section{padding-block:18px;border-top:1px solid var(--rule)}
.prose h2{font:600 1.0625rem/1.4 var(--sans);letter-spacing:0}
.prose p{margin-top:4px;color:var(--muted)}
.prose a{color:var(--ink)}
.not-found{padding-block:clamp(56px,10vw,128px) clamp(88px,12vw,160px);text-align:center}
.not-found .planes{width:132px;height:99px;margin-inline:auto}
.not-found .planes path:nth-child(2){fill:var(--rust);fill-opacity:1}
.not-found h1{margin-block:28px 30px;font-size:clamp(2.5rem,1.5rem + 4vw,4.25rem)}

@media (max-width:900px){
  .hero__grid,.films__grid,.films__grid--short,.about__grid{grid-template-columns:minmax(0,1fr)}
  .hero__copy{padding-block:8px 0}
  .hero__figure{justify-self:center;width:min(100%,520px)}
  .films__grid--short .film-slot{justify-self:start;max-width:240px}
  /* A real thumbnail leads on small screens. */
  .films__grid a.film-slot{order:-1}
}
@media (max-width:720px){
  .kinds__list{grid-template-columns:minmax(0,1fr);gap:24px}
  .kind{display:grid;grid-template-columns:68px minmax(0,1fr);gap:0 18px}
  .kind .planes{grid-row:span 2;margin-top:4px}
  .kind h3{margin-top:0}
  .kind p{max-width:none}
}
@media (max-width:640px){
  /* The hero's own button is right below, so the header keeps to the logo and two links. */
  .site-header__inner{min-height:72px}
  .header-cta{display:none}
  .brand img{width:142px}
  .btn{width:100%}
  .site-footer nav{margin-left:0;width:100%}
}
/* A soft cross-fade between pages where the browser supports it; nothing to load, nothing to script. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
@media print{
  body{background:#fff;color:#000}
  .site-header,.site-footer,.skip-link,.film-toggle,.hero-film__video{display:none}
  .fold{margin-top:0;clip-path:none}
  .films,.about{background:none;color:#000}
}