@font-face{
  font-family:'Bodoni Moda';
  src:url('/assets/fonts/bodonimoda-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('/assets/fonts/barlowcond-300.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('/assets/fonts/barlowcond-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Barlow Condensed';
  src:url('/assets/fonts/barlowcond-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   THE MAIN TITLE SEQUENCE
   A deliberately single-world design. A title card is projected
   in a dark room; a light-mode title sequence is not the thing,
   so there is no light palette and every colour is painted
   explicitly rather than inherited. See DESIGN.md.
   ============================================================ */
:root{
  --ground:#17150F;      /* warm near-black, never pure */
  --ground-2:#1E1B14;    /* recessed panels */
  --ground-3:#262218;    /* wells */
  --bone:#EFEAE0;        /* title type */
  --bone-2:#CFC8BA;      /* secondary type */
  --muted:#9B9384;       /* marginalia */
  --gold:#D4B87C;        /* one accent, once per card */
  --crimson:#D98A96;     /* unmade, void, withdrawn */
  --rule:#3E3830;        /* hairline */
  --rule-2:#2A261F;

  --safe:clamp(14px,2.4vw,38px);   /* the title-safe inset */
  --chrome-h:66px;                 /* measured height of the fixed chrome */
  --measure:66ch;

  --f-display:'Bodoni Moda',Didot,'Times New Roman',serif;
  --f-credit:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-text:'Archivo',-apple-system,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--bone);
  font-family:var(--f-text);
  font-size:16px;
  line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--bone);}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--bone);color:var(--ground);padding:10px 16px;
  font:500 12px/1 var(--f-credit);letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:10px;top:10px;}

/* Grain. One layer, fixed, so the whole sequence sits on the same stock. */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* ============================================================
   The frame: fixed chrome, changing content
   ============================================================ */
.frame{position:fixed;inset:0;pointer-events:none;z-index:50;}
.frame i{position:absolute;width:13px;height:13px;border:1px solid var(--rule);}
.frame i:nth-child(1){top:calc(var(--safe) / 2);left:calc(var(--safe) / 2);border-right:0;border-bottom:0;}
.frame i:nth-child(2){top:calc(var(--safe) / 2);right:calc(var(--safe) / 2);border-left:0;border-bottom:0;}
.frame i:nth-child(3){bottom:calc(var(--safe) / 2);left:calc(var(--safe) / 2);border-right:0;border-top:0;}
.frame i:nth-child(4){bottom:calc(var(--safe) / 2);right:calc(var(--safe) / 2);border-left:0;border-top:0;}

.chrome{
  position:fixed;top:0;left:0;right:0;z-index:55;
  display:flex;align-items:center;gap:14px 26px;
  padding:14px var(--safe) 26px;
  /* The chrome is fixed and the cards scroll under it, so it needs a ground
     of its own or captions collide with the nav. A scrim rather than a solid
     bar: this world has no toolbars in it. */
  background:linear-gradient(to bottom,var(--ground) 0,var(--ground) 52%,transparent 100%);
}
.reelno{
  font-family:var(--f-credit);font-weight:500;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
nav.seq{margin-left:auto;pointer-events:auto;}
nav.seq ul{display:flex;flex-wrap:wrap;gap:4px 22px;list-style:none;margin:0;padding:0;}
nav.seq a{
  font-family:var(--f-credit);font-weight:400;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-2);text-decoration:none;padding:4px 0;
  border-bottom:1px solid transparent;
}
nav.seq a:hover{color:var(--bone);border-bottom-color:var(--gold);}
nav.seq a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--gold);}

/* ============================================================
   Cards: the sequence
   ============================================================ */
main.sequence{scroll-snap-type:y proximity;}
.card{
  min-height:72svh;
  display:grid;
  place-items:center;
  /* Clear the fixed chrome. Deriving this from --safe alone put the first
     line of every card underneath it at 768px through 1512px; the scrim
     hid the collision rather than preventing it. */
  padding:calc(var(--chrome-h) + var(--safe) * .55) var(--safe) calc(var(--safe) * 1.1);
  scroll-snap-align:start;
  position:relative;
}
.card-inner{width:100%;max-width:1180px;}

/* Foreground is state: the card in view holds, the others recede.
   Recession is deliberately shallow. At .34 the page read murky for the
   whole half second of a scroll, which is most of the time a visitor is
   actually moving through it; the discipline is legible at .58 and the
   page never looks broken. */
.card{transition:opacity .34s ease;}
.js .card:not(.is-live){opacity:.58;}
.js .card.is-live{opacity:1;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  main.sequence{scroll-snap-type:none;}
  .card{transition:none;}
  .js .card:not(.is-live){opacity:1;}
}

/* ---------- Card one: the title card ---------- */
.titlecard{text-align:center;}
.tc-above{
  font-family:var(--f-credit);font-weight:400;
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--bone-2);margin:0 0 clamp(10px,1.5vw,18px);padding-left:.42em;
}
.tc-name{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(2.6rem,9.2vw,8.2rem);
  line-height:.94;letter-spacing:-.006em;
  margin:0;color:var(--bone);
  text-wrap:balance;
}
.tc-rule{
  width:clamp(70px,9vw,132px);height:1px;background:var(--rule);
  border:0;margin:clamp(14px,2vw,26px) auto;
}
.credit-block{
  display:grid;gap:clamp(5px,.75vw,10px);
  font-family:var(--f-credit);font-weight:300;
  font-size:clamp(13px,1.5vw,17px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--bone);margin:0;padding-left:.34em;
}
.tc-sub{
  font-family:var(--f-credit);font-weight:400;
  font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:clamp(14px,2vw,24px) 0 0;padding-left:.2em;
}
/* The mark sits where a distributor's logo sits on a title card. */
.mark{
  display:inline-block;margin-top:clamp(20px,3vw,40px);
  border:1px solid var(--rule);
  padding:11px 22px;
  font-family:var(--f-credit);font-weight:400;
  font-size:clamp(11px,1.15vw,13px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;
  transition:border-color .25s ease,color .25s ease;
}
.mark:hover{border-color:var(--gold);color:var(--gold);}
.reel-dots{display:flex;gap:11px;justify-content:center;margin-top:clamp(20px,3.2vw,40px);}
.reel-dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--rule);}
.reel-dots i.on{background:var(--gold);border-color:var(--gold);}

/* ---------- Card two: he arrives, the type clears out ---------- */
.platecard{padding-left:0;padding-right:0;}
.platecard .card-inner{max-width:none;}
.plate-full{position:relative;}
/* The plate is capped so its caption stays on the card. At full width on a
   wide viewport the untrimmed frame is tall enough to push the caption below
   the fold, and the caption is what names the picture. He sits right of
   centre, so the crop holds there. */
.plate-full img{
  width:100%;
  max-height:calc(100svh - 200px);
  object-fit:cover;
  object-position:62% 38%;
  display:block;
}
.plate-full figcaption{
  display:flex;flex-wrap:wrap;gap:6px 20px;
  padding:14px var(--safe) 0;
  font-family:var(--f-credit);font-weight:400;
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
}
.plate-full figcaption b{color:var(--bone-2);font-weight:500;}

/* ============================================================
   Card headings and prose
   ============================================================ */
.card-label{
  font-family:var(--f-credit);font-weight:500;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);margin:0 0 11px;padding-left:.32em;
}
h2.card-h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.04;letter-spacing:-.008em;
  margin:0 0 clamp(14px,2.1vw,24px);color:var(--bone);text-wrap:balance;
}
h3.sub-h{
  font-family:var(--f-credit);font-weight:500;
  font-size:clamp(13px,1.4vw,15px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone);margin:1.7em 0 .6em;
}
.prose{max-width:var(--measure);color:var(--bone-2);}
.prose p{margin:0 0 1.15em;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--bone);font-weight:600;}

blockquote.epigraph-q{
  margin:0 0 clamp(18px,2.4vw,30px);
  max-width:56ch;
}
blockquote.epigraph-q p{
  font-family:var(--f-display);font-weight:400;font-style:italic;
  font-size:clamp(1.25rem,2.6vw,1.85rem);line-height:1.42;
  margin:0 0 14px;color:var(--bone);
}
blockquote.epigraph-q cite{
  font-family:var(--f-credit);font-style:normal;font-weight:400;
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}

/* ============================================================
   The credit roll: the record
   ============================================================ */
.roll{display:grid;gap:0;max-width:1080px;margin:0 auto;}
.roll-row{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:0 clamp(16px,2.4vw,36px);
  padding:11px 0;
  border-bottom:1px solid var(--rule-2);
  align-items:baseline;
  text-decoration:none;
  color:inherit;
}
.roll-row:last-child{border-bottom:0;}
.roll-row:hover{background:var(--ground-2);}
.roll-role{
  text-align:right;
  font-family:var(--f-credit);font-weight:400;
  font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
  padding-top:.5em;
}
.roll-name{text-align:left;display:flex;flex-direction:column;gap:5px;}
.roll-title{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.18rem,2.5vw,1.85rem);line-height:1.08;color:var(--bone);
}
.roll-meta{
  font-family:var(--f-credit);font-weight:400;
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;
}
.roll-note{
  font-size:13.5px;line-height:1.55;color:var(--bone-2);
  font-family:var(--f-text);letter-spacing:0;text-transform:none;
  max-width:56ch;margin-top:2px;
}
@media (max-width:720px){
  .roll-row{grid-template-columns:minmax(0,1fr);gap:7px;}
  .roll-role{text-align:left;padding-top:0;}
}

/* Status. Border style carries the meaning as much as colour does. */
.st{
  font-family:var(--f-credit);font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:3px 8px;border:1px solid currentColor;white-space:nowrap;line-height:1.5;
}
.st-out{color:var(--bone-2);}
.st-slate{color:var(--gold);}
.st-unmade{color:var(--crimson);border-style:dashed;}

/* ============================================================
   Slate
   ============================================================ */
.slate-grid{display:grid;gap:clamp(17px,2.4vw,31px);grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));}
.slate-card{border-top:1px solid var(--gold);padding-top:16px;}
.slate-card h3{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.04;margin:0 0 12px;color:var(--bone);
}
.slate-card p{margin:0 0 1em;color:var(--bone-2);font-size:15px;max-width:52ch;}
.slate-card p:last-of-type{margin-bottom:0;}
.slate-facts{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;
  margin:13px 0 0;padding-top:11px;border-top:1px solid var(--rule-2);
  font-size:13.5px;
}
.slate-facts dt{
  font-family:var(--f-credit);font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:3px;
}
.slate-facts dd{margin:0;color:var(--bone-2);}

/* ============================================================
   Plates grid
   ============================================================ */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:clamp(18px,2.4vw,30px);}
figure.plate{margin:0;}
figure.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule-2);}
figure.plate.tall img{aspect-ratio:3/4;}
figure.plate figcaption{padding:10px 2px 0;}
figure.plate .pl{
  display:block;margin-bottom:4px;
  font-family:var(--f-credit);font-weight:500;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
figure.plate .pc{font-size:13px;line-height:1.5;color:var(--bone-2);}

/* ============================================================
   Entries (films sheet)
   ============================================================ */
.entry{padding:clamp(21px,2.8vw,38px) 0;border-top:1px solid var(--rule-2);}
/* The first entry keeps its space above. It loses the rule, not the room:
   at padding-top:0 The Third Degree butted straight onto the intro. */
.entry:first-of-type{border-top:0;padding-top:clamp(20px,3vw,38px);}
.entry-t{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.02;margin:0 0 12px;color:var(--bone);
}
.entry-y{
  font-family:var(--f-credit);font-weight:400;font-size:.42em;
  letter-spacing:.2em;color:var(--muted);vertical-align:middle;margin-left:14px;white-space:nowrap;
}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin:0 0 18px;}
.entry > p{max-width:var(--measure);margin:0 0 1.05em;color:var(--bone-2);}
.entry-facts{
  display:grid;grid-template-columns:minmax(130px,auto) minmax(0,1fr);gap:7px 24px;
  margin:14px 0 0;padding-top:13px;border-top:1px solid var(--rule-2);
  max-width:78ch;font-size:14px;
}
.entry-facts dt{
  font-family:var(--f-credit);font-weight:500;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:4px;
}
.entry-facts dd{margin:0;color:var(--bone-2);}

/* ============================================================
   Bio / contact two-column
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(20px,2.8vw,39px);align-items:start;}

/* Biography. Four direct grid children rather than two columns of stacked
   content, so the portrait can move independently of the facts list when the
   grid collapses. On a phone the reading order becomes quote, portrait,
   prose, facts: the picture sits directly under the quote instead of after
   the whole biography. */
.bio-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(20px,2.8vw,39px) clamp(20px,2.8vw,39px);
  align-items:start;
}
.bio-quote{grid-column:1;grid-row:1;}
.bio-prose{grid-column:1;grid-row:2;}
.bio-portrait{grid-column:2;grid-row:1;margin:0;}
.bio-facts{grid-column:2;grid-row:2;}
@media (max-width:920px){
  .bio-split{grid-template-columns:minmax(0,1fr);}
  .bio-quote,.bio-prose,.bio-portrait,.bio-facts{grid-column:1;grid-row:auto;}
  .bio-quote{order:1;}
  .bio-portrait{order:2;max-width:440px;}
  .bio-prose{order:3;}
  .bio-facts{order:4;}
}
@media (max-width:920px){ .split{grid-template-columns:minmax(0,1fr);} .split aside{max-width:440px;} }
.facts{border-top:1px solid var(--rule);padding-top:18px;display:grid;gap:14px;}
.facts > div{display:grid;gap:3px;}
.facts dt{
  font-family:var(--f-credit);font-weight:500;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.facts dd{margin:0;font-size:14.5px;color:var(--bone-2);}

.pending{border:1px dashed var(--rule);padding:20px 22px;max-width:var(--measure);}
.pending h3{
  margin:0 0 9px;font-family:var(--f-credit);font-weight:500;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.pending p{margin:0 0 .7em;font-size:14.5px;color:var(--bone-2);}
.pending p:last-child{margin-bottom:0;}

/* ============================================================
   End card
   ============================================================ */
.endcard{text-align:center;}
.endcard .mail{
  display:inline-block;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.35rem,4.4vw,3rem);line-height:1.1;
  color:var(--bone);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:6px;
  overflow-wrap:anywhere;
}
.endcard .mail:hover{color:var(--gold);}
.endcard .fin{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,2.4vw,1.6rem);color:var(--muted);
  margin:clamp(24px,3.5vw,45px) 0 0;
}
/* Studio credit. Deliberately quieter than the client's own links: the gold
   belongs to his content, so this sits in muted with a hairline underline. */
.colophon .mgl{color:var(--muted);}
.colophon .mgl a{
  color:var(--bone-2);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:1px;
}
.colophon .mgl a:hover{color:var(--gold);border-bottom-color:var(--gold);}

footer.colophon{
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;
  padding:0 var(--safe) calc(var(--safe) * 1.2);
  font-family:var(--f-credit);font-weight:400;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* ============================================================
   The gallery: card four
   Frames from the production archive, hung as a contact sheet.
   Each is a link to its own file, so it works with no JavaScript;
   the lightbox below is an enhancement layered on top.
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(215px,100%),1fr));
  gap:clamp(12px,1.5vw,20px);
}
.gframe{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--rule-2);
  background:var(--ground-2);
  transition:border-color .2s ease;
}
.gframe:hover,.gframe:focus-visible{border-color:var(--gold);}
.gframe img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:opacity .2s ease;
}
.gframe:hover img{opacity:.86;}
.gframe .gcap{display:block;padding:9px 11px 11px;}
.gframe .gn{
  display:block;margin-bottom:4px;
  font-family:var(--f-credit);font-weight:500;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.gframe .gc{
  font-size:12.5px;line-height:1.45;color:var(--bone-2);
  display:block;
}
.gallery-note{
  margin:clamp(16px,2.2vw,26px) 0 0;
  font-family:var(--f-credit);font-weight:400;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* Lightbox. A native dialog so Escape, focus trapping and the top layer
   all come for free; no library and no scroll locking to get wrong. */
dialog.lightbox{
  border:0;padding:0;max-width:none;max-height:none;
  width:100%;height:100%;
  background:transparent;color:var(--bone);
}
dialog.lightbox::backdrop{background:rgba(9,8,5,.975);}
.lb-inner{
  height:100%;
  display:grid;
  /* minmax(0,1fr), not 1fr: a 1fr track takes the image's intrinsic height
     as its automatic minimum, so the plate overflows and pushes the caption
     off the bottom of the dialog. */
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;
  padding:calc(var(--safe) * 1.4) var(--safe) var(--safe);
}
.lb-inner img{
  width:100%;height:100%;
  object-fit:contain;
  align-self:center;
}
.lb-cap{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font-family:var(--f-credit);font-weight:400;
  font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
}
.lb-cap b{color:var(--gold);font-weight:500;}
.lb-close{
  position:fixed;top:calc(var(--safe) * .8);right:var(--safe);
  background:transparent;border:1px solid var(--rule);
  color:var(--bone);cursor:pointer;
  font-family:var(--f-credit);font-weight:400;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  padding:8px 15px;
}
.lb-close:hover{border-color:var(--gold);color:var(--gold);}

/* ============================================================
   Phones
   The chrome stops being fixed below 700px. Six nav items wrap to
   two or three rows there, which grew the fixed bar to 127px and
   buried the top of every card under it. Static, it scrolls away
   and the links get a real touch target. The corner ticks stay
   fixed, so the frame discipline survives.
   ============================================================ */
@media (max-width:700px){
  .chrome{
    position:static;
    background:none;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
    padding:calc(var(--safe) * 1.1) var(--safe) 2px;
  }
  nav.seq{margin-left:0;width:100%;}
  nav.seq ul{gap:0 20px;}
  nav.seq a{padding:11px 0;min-height:44px;display:flex;align-items:center;}
  /* Cards size to their content on a phone. At 72svh each they carried a
     screenful of dead space, and the gap under the title card before the
     plate was the worst of it. */
  .card{min-height:auto;padding-top:calc(var(--safe) * 1.1);}

  /* The plate runs edge to edge and butts straight up under the title card.
     .card.platecard rather than .platecard so it beats .card's padding
     shorthand on specificity instead of relying on source order. */
  .card.platecard{padding:0;}
  .platecard .card-inner{max-width:none;}
  .plate-full img{max-height:none;width:100%;}
  .platecard .plate-full figcaption{padding:11px var(--safe) 0;gap:4px 14px;}

  .lb-inner{padding:52px var(--safe) var(--safe);}
  .lb-close{top:9px;right:9px;padding:10px 14px;}
}

@media print{
  body{background:#fff;color:#000;}
  body::after,.frame,.chrome{display:none;}
  .card{min-height:0;page-break-inside:avoid;}
  .js .card:not(.is-live){opacity:1;}
}