/* 220 — an AI autobiography. The film's own stylesheet.
   This page does not wear the studio's look (assets/site.css): the film's identity is its
   on-screen title card, so the page is that card and nothing else. Three colours and two
   faces, copied from the film's renderer (220-film, scripts/cut.py) and its channel art
   (identity/build.py), never tuned here: Ink, Paper, Mist; Trebuchet MS Bold for the title and
   cards, Menlo for the machine cards (the agents' words) and the clock. One colour per surface,
   no gradient, outline, shadow or glow (the minimalism principle the film's art follows).

   Themes follow site.css's convention, mirrored because this page is dark-first: the title card
   is Paper on Ink, so Ink is the default, and Paper is the light theme, chosen by
   prefers-color-scheme: light or forced with data-theme="light" on <html>. */

:root{
  /* The film's three colours (cut.py). Fixed: a frame of the film looks the same in both themes. */
  --film-ink:#15171C;
  --film-paper:#FFFFFF;
  --film-mist:#A9ADB6;

  /* The page's roles, dark-first. */
  --ground:var(--film-ink);
  --text:var(--film-paper);
  --soft:var(--film-mist);
  /* Mist at 22 % on Ink: the hairline between sections. A mix of the film's colours, not a new one. */
  --rule:#36383E;

  --title:"Trebuchet MS","Trebuchet",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:Menlo,ui-monospace,SFMono-Regular,Consolas,monospace;
  --gutter:clamp(16px,5vw,48px);
  --measure:62ch;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:var(--film-paper);
    --text:var(--film-ink);
    /* Mist on Paper reads at 2.2:1, too faint for text; Ink at 66 % on Paper is 5.7:1. */
    --soft:#656669;
    /* Ink at 14 % on Paper. */
    --rule:#DEDFE0;
  }
}
:root[data-theme="light"]{
  --ground:var(--film-paper);
  --text:var(--film-ink);
  --soft:#656669;
  --rule:#DEDFE0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--title);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
p{margin:0}
h1,h2{margin:0;font-weight:700;line-height:1.1;text-wrap:balance}
a{color:var(--text);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ——— billing: the first line of the opening credits ——— */
.billing{
  max-width:1120px;margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--gutter) 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--soft);
}
.billing a{color:var(--soft);text-decoration:none}
.billing a:hover{color:var(--text);text-decoration:underline}

main{max-width:1120px;margin:0 auto;padding-inline:var(--gutter)}

/* ——— the title card ——— */
.card{
  min-height:min(86svh,820px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding-block:clamp(48px,9vh,96px) clamp(40px,7vh,72px);
}
.card h1{display:flex;flex-direction:column;align-items:center}
.card .num{
  font-size:clamp(112px,30vw,280px);line-height:.9;letter-spacing:-.01em;
}
.card .sub{
  margin-top:clamp(14px,2.4vw,26px);
  font-size:clamp(19px,4.6vw,40px);letter-spacing:.01em;text-transform:uppercase;line-height:1.1;
}
.card .logline{
  margin-top:clamp(18px,2.8vw,30px);max-width:40ch;
  font-family:var(--mono);font-size:clamp(15px,1.9vw,20px);line-height:1.6;color:var(--text);
  text-wrap:balance;
}

/* ——— the Premiere, set as a machine card: the clock first, then the line ——— */
.premiere{
  margin-top:clamp(40px,7vh,72px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.stamp{font-family:var(--mono);font-size:13px;color:var(--soft);letter-spacing:.02em}
.stamp time{color:var(--text)}
.premiere .when{font-family:var(--mono);font-size:clamp(15px,1.8vw,18px);text-wrap:balance}
.premiere .local{font-family:var(--mono);font-size:13px;color:var(--soft)}
/* Two calls, equal size: watch the film, open its recipe. One filled, one ruled; no third style. */
.ctas{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{
  display:inline-block;
  font-family:var(--title);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;color:var(--ground);background:var(--text);
  border:2px solid var(--text);padding:13px 24px;
}
.btn:hover{background:transparent;color:var(--text)}
.btn.ghost{background:transparent;color:var(--text)}
.btn.ghost:hover{background:var(--text);color:var(--ground)}
.btn:focus-visible{outline-offset:5px}
.channel{font-family:var(--mono);font-size:13px;color:var(--soft)}
.channel a{color:var(--soft)}

/* ——— sections ——— */
section{padding-block:clamp(48px,8vw,84px);border-top:1px solid var(--rule)}
.card{border-top:0}
.label{
  font-family:var(--mono);font-size:13px;color:var(--soft);letter-spacing:.02em;margin-bottom:22px;
}
.prose{max-width:var(--measure)}
.big{font-size:clamp(34px,6.4vw,64px);line-height:1.02;letter-spacing:-.01em;margin-bottom:22px}
.prose p+p,.prose .lead+p{margin-top:16px}
.prose .lead{font-weight:700;font-size:clamp(20px,2.4vw,24px);line-height:1.35;text-wrap:balance}

/* A frame of the film: a machine card, 16:9, the film's colours whatever the theme, set the
   way cut.py sets it — the stamp small in Mist, the words in Paper, left-aligned, high on the
   frame. Text, not an image, so it reads to a screen reader and stays sharp. */
.frame{margin:clamp(36px,5vw,56px) 0 0;max-width:820px}
.frame .screen{
  aspect-ratio:16/9;background:var(--film-ink);color:var(--film-paper);
  border:1px solid var(--rule);
  padding:clamp(18px,6%,56px) clamp(18px,7%,64px);
  display:flex;flex-direction:column;justify-content:center;
  font-family:var(--mono);
}
.frame .screen .t{font-size:clamp(10px,1.5vw,14px);color:var(--film-mist)}
.frame blockquote{margin:6px 0 0;font-size:clamp(14px,2.3vw,22px);line-height:1.45;text-wrap:balance}
.frame figcaption{margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--soft)}

.facts{margin:clamp(36px,5vw,56px) 0 0;padding:0;max-width:var(--measure);font-size:16px}
.facts div{display:flex;flex-wrap:wrap;gap:4px 20px;padding-block:11px;border-bottom:1px solid var(--rule)}
.facts div:first-child{border-top:1px solid var(--rule)}
.facts dt{flex:none;min-width:11ch;font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--soft)}
.facts dd{margin:0;flex:1 1 20ch}

/* What is open and what is not, side by side; one column on a phone. */
.ledger{
  margin-top:clamp(32px,4.5vw,48px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,56px);
}
.ledger h3{
  margin:0 0 6px;font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--soft);
}
.ledger ul{list-style:none;margin:0;padding:0}
.ledger li{padding-block:12px;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5}
.ledger li:first-child{border-top:1px solid var(--rule)}
.ledger li b{font-weight:700}
.repo{margin-top:clamp(32px,4.5vw,48px);font-family:var(--mono);font-size:clamp(16px,2.6vw,22px);overflow-wrap:anywhere}
.note{margin-top:8px;font-family:var(--mono);font-size:13px;color:var(--soft);max-width:var(--measure)}

/* ——— the end card ——— */
footer{
  max-width:1120px;margin:0 auto;padding:clamp(48px,7vw,72px) var(--gutter) calc(56px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--soft);
}
footer .prod{font-family:var(--title);font-weight:700;font-size:clamp(17px,2.2vw,20px);color:var(--text)}
footer .prod a{text-decoration:none}
footer .prod a:hover{text-decoration:underline}
footer p+p{margin-top:12px}
footer a{color:inherit}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}