/* ============================================================================================
   PRESS — a broadsheet.

   THE MEASURE IS NOT A WALL. `.wrap` is where TEXT lives. Photographs cross it: the masthead's
   plates and the gallery's opening shot run off the right edge of the page. Everything that bleeds
   aligns its inner edge to `--edge`, so a bleeding band and a wrapped one share one left margin.

   THERE IS A MARGIN AND THINGS LIVE IN IT. Notes, scores, numbers. The left column is not a label
   slot — it is the place annotations go, and the page reads as annotated rather than stacked.

   RULES ARE STRUCTURE, NOT DECORATION. A hairline runs from the end of a heading to the outer edge
   of the page. A dotted leader carries the eye from a dish to its price. Take the rules out and the
   design is gone; that is the test of whether they were doing anything.

   ONE ACCENT, ONCE A PAGE, AND AS A MARKER. The closer's last word sits on it. Not a section
   background, not a card, not five buttons.

   NO @media, ANYWHERE. The editor's phone preview narrows #clay-page, not the window.
   ============================================================================================ */
:root{
  --accent:#C8F04E;
  --ink:#14140F;
  --paper:#FBFAF7;
  --measure:1340px;
  --gut:clamp(18px,2.6cqw,52px);
  --band:clamp(76px,8.5cqw,150px);
  --navh:66px;
  --r:10px;
  /* PHOTOGRAPHS ARE NOT ALWAYS GOOD, AND THE MASTHEAD'S MAY NOT EVEN BE THEIRS. A generated site
     opens on the best picture available, which for most businesses is a stock one — so the theme
     grades every photograph toward its own palette rather than hoping they arrive matching. Print
     is the reference: ink loses a little of a photograph's colour and gains a little of its
     contrast, which is exactly what stops a borrowed shot reading as pasted on. */
/* STRONG ENOUGH TO UNIFY, which the last one was not.
     A page carries a warm phone snapshot under tungsten, a cool daylight shot and a graded stock
     photograph, side by side, and at 10% nothing changes: the wall still reads as three cameras.
     Print does not have this problem because ink has one colour. So: most of the original
     saturation goes, the paper's warmth comes back over the top, and everything on the page ends
     up in the same narrow range. It is a strong filter on purpose — the alternative is a page that
     looks assembled from a group chat. */
  --photo-filter:saturate(.62) contrast(1.12) sepia(.16) brightness(1.02);
}
/* someone who asked for the photograph unretouched gets the photograph */
:root[data-photos="raw"]{--photo-filter:none}
/* THE DARK PAPER. Not the light one inverted — ink brought forward, the paper colour used as the
   type, and the rules pulled up so a hairline still reads on a dark ground. */
:root[data-mode="dark"]{
  --ink:#F4F1EA;
  --paper:#12120F;
}
.press{
  /* READABLE FIRST. These were 60/38 and the page came back as "hard to read" — a warm paper
     eats contrast that a white one does not, so the soft ink has to be nearer the full ink than
     it would be on white. Nothing on this page is set in anything lighter than --faint, and
     --faint is only ever used for labels and numbers, never for a sentence. */
  --soft:color-mix(in oklab, var(--ink) 78%, var(--paper));
  --faint:color-mix(in oklab, var(--ink) 55%, var(--paper));
  --rule:color-mix(in oklab, var(--ink) 18%, var(--paper));
  --fill:color-mix(in oklab, var(--ink) 6%, var(--paper));
  --on-accent:#14140F;
  --serif:"Awesome Serif","Fraunces",Georgia,serif;
  --sans:"Satoshi","Inter",system-ui,sans-serif;
  /* WHERE THE PAGE'S LEFT MARGIN IS, for the bands that do not use .wrap. One number, so a
     bleeding band and a wrapped one line up exactly. */
  --edge:max(var(--gut), calc((100cqw - var(--measure)) / 2 + var(--gut)));
}
@supports (color: oklch(from red l c h)){
  .press{ --on-accent:oklch(from var(--accent) clamp(0,(.62 - l)*1000,1) 0 h); }
}
.press *{box-sizing:border-box}

/* THE CONTAINER every rule below asks. Declaring it is the theme's own job — without this line
   every @container rule in this file matches nothing on a real page. */
#clay-page{container-type:inline-size;container-name:page}

/* ============================================================================================
   THE EDITOR'S STYLESHEETS ARE ON THIS PAGE TOO, and they are older than this design.
   An owner's page loads editor-ui.css and site.css for the panel and the dock; both style bare
   class names this design also uses. Each collision is answered once, here.
   ============================================================================================ */
.press .wrap{color:inherit;font-family:inherit;container-type:normal}
body.is-owner .press .wrap, body.is-owner:not(.preview) .press .wrap{padding-top:0;padding-bottom:0}
.press .card{position:static;height:auto;overflow:visible;isolation:auto;padding:0;transition:none;
  background:none;border:0;color:inherit;font:inherit;text-align:left}
.press .sheet{width:auto;max-width:none;max-height:none;overflow:visible;color:inherit;
  font-family:inherit;background:none;border:0;padding:0;animation:none}
.press .row{display:grid;margin:0}
.press .form{display:grid;grid-template-columns:none;gap:0}
.press .field, .press .fld{margin-bottom:0}
.press button{font:inherit;color:inherit;background:none;border:0;text-align:inherit;
  -webkit-appearance:none;appearance:none}

/* -------------------------------------------------------------------------------- the page */
.press{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
.press .wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gut)}
.press .band{padding:calc(var(--band)/2) 0;position:relative}

/* AWESOME SERIF IS DRAWN TIGHT — its own word space is narrow, so the display sizes need it back
   or "the whole page" sets as one word. */
.press h1,.press h2,.press h3,.press blockquote,.press .fig-n,.press .big-n,
.press .closer-h,.press .open-h,.press .story-h{
  font-family:var(--serif);font-weight:500;letter-spacing:-.006em;word-spacing:.08em;margin:0}
.press h1{font-size:clamp(40px,5.2cqw,86px);line-height:1.04;letter-spacing:-.015em}
.press h2{font-size:clamp(27px,3.2cqw,52px);line-height:1.06}
.press h3{font-size:clamp(17px,1.6cqw,22px);line-height:1.25}
.press p{margin:0;color:var(--soft)}
/* A DISPLAY LINE IS A HEADING, whatever tag it is written as. `.press p{color:soft}` was painting
   "Opens at 10:00" and the closer grey while every other heading was ink — the one thing on the
   page that looked like it had been left unfinished. */
.press .closer-h, .press .open-h, .press .story-h{color:var(--ink)}
.press .lede{font-size:clamp(16.5px,1.25cqw,19px);line-height:1.62;max-width:46ch;margin-top:0;color:var(--soft)}
.press .lead-p{font-size:clamp(17px,1.35cqw,21px);line-height:1.62;max-width:52ch}
.press .prose{font-size:clamp(16px,1.15cqw,18px);line-height:1.72;max-width:58ch;color:var(--soft)}
.press .fine{font:500 13.5px/1.5 var(--sans);color:var(--faint);margin-top:16px}

/* THE LABEL — small caps in the sans, the one voice that is never the serif. */
.press .lbl{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)}

/* THE NUMBERS. `seq` counts (01/04); `num` just marks (01). Both tabular, both in the margin. */
.press .seq, .press .num{font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--faint);
  font-variant-numeric:tabular-nums;flex:0 0 auto;display:block}
.press .seq em{font-style:normal;opacity:.5}

/* ------------------------------------------------------------------------------ the buttons */
.press .btn{display:inline-flex;align-items:center;gap:9px;padding:12px 21px;border-radius:999px;
  font:600 14px/1 var(--sans);text-decoration:none;color:var(--ink);cursor:pointer;
  border:1px solid var(--ink);background:none;transition:background .18s,color .18s,border-color .18s}
.press .btn i{font-style:normal;font-size:1.05em;transition:transform .18s}
.press .btn:hover i{transform:translateX(3px)}
.press .btn.fill{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.press .btn.fill:hover{filter:brightness(1.05)}
.press .btn.ghost{border-color:var(--rule);color:var(--soft);padding:10px 17px;font-size:13px}
.press .btn.ghost:hover{border-color:var(--ink);color:var(--ink)}
.press .btn.sm{padding:9px 15px;font-size:13px}
.press .btn.wide{width:100%;justify-content:center;margin-top:18px}
.press .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.press :focus{outline:none}
.press :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.press .ico{display:inline-flex;width:16px;height:16px;flex:0 0 auto}
.press .ico svg{width:100%;height:100%}

/* ============================================================================================
   THE BAR. Sticky, four ways in, the rest behind one control, and the basket in it.
   Press's own part is the RULE that fills whatever space is left between the brand and the links,
   which is what makes a bar read as a masthead rather than as a strip of buttons.
   ============================================================================================ */
.press nav{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.press nav.band-edit{position:sticky;top:0}
.press nav .wrap{display:flex;align-items:center;gap:clamp(12px,1.6cqw,24px);min-height:var(--navh);
  transition:min-height .25s}
.press nav .brand{font-family:var(--serif);font-size:21px;letter-spacing:-.015em;min-width:0;
  white-space:nowrap;flex:0 0 auto}
.press nav .brand.has-logo{display:flex;align-items:center}
.press nav .brand.has-logo img{height:26px;width:auto;max-width:160px;object-fit:contain;display:block}
.press nav .brand.cut-round img{border-radius:5px}
.press nav .brand.cut-circle img{border-radius:999px;width:26px;height:26px;object-fit:cover}
.press .nav-rule{flex:1 1 auto;height:1px;background:var(--rule);min-width:14px}
.press nav .links{display:flex;align-items:center;gap:clamp(14px,1.8cqw,28px);flex:0 0 auto}
.press nav a{color:var(--soft);text-decoration:none;font-size:14.5px;white-space:nowrap}
.press nav a:hover{color:var(--ink)}
.press nav .more{font:600 12px/1 var(--sans);color:var(--ink);border:1px solid var(--rule);
  border-radius:999px;padding:7px 11px;cursor:pointer;min-width:38px;display:grid;place-items:center}
.press nav .more:hover{border-color:var(--ink)}
.press nav .more em{font-style:normal;grid-area:1/1}
.press nav .more i{font-style:normal;font-size:11px;grid-area:1/1;opacity:0;transform:scale(.7)}
.press nav .more[aria-expanded="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.press nav .more[aria-expanded="true"] em{opacity:0}
.press nav .more[aria-expanded="true"] i{opacity:1;transform:none}
.press nav .nav-end{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.press nav .cart{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--ink);font:600 13px/1 var(--sans);cursor:pointer}
.press nav .cart[hidden]{display:none}
.press nav .burger{display:none;width:38px;height:38px;place-items:center;cursor:pointer;color:var(--ink)}
.press nav .burger svg{width:22px;height:22px}
/* the whole list, when there is more than the bar holds — numbered, like everything else here */
.press .nav-all{position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--rule)}
.press .nav-all .wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:0 clamp(18px,3cqw,44px);padding-top:6px;padding-bottom:18px;min-height:0}
.press .nav-line{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid var(--rule)}
.press .nav-all a{font-family:var(--serif);font-size:19px;color:var(--ink)}
@container page (max-width:900px){
  .press nav .links{display:none}
  .press nav .burger{display:grid}
  .press .nav-all .wrap{grid-template-columns:1fr}
}
/* THE BAR TIGHTENS AS YOU GO. Pure CSS, and only where the browser has the timeline — a nav that
   depends on script to be usable is a nav that is briefly not one. */
@supports (animation-timeline: scroll()){
  .press nav .wrap{animation:press-bar linear both;animation-timeline:scroll(root);animation-range:0 260px}
  @keyframes press-bar{ to{ min-height:52px } }
}

/* ============================================================================================
   THE MASTHEAD — the label above its heading, both on the page's own left margin.

   It used to hang the label out in a 190px margin with a hairline floating off to the right, and
   the page came back as "messy, hard to read". It was: the eye had to find the start of every band
   somewhere new. Now every band opens at the same x, the supporting line sits beside the heading,
   and one hairline closes the head.
   ============================================================================================ */
/* the left column is as wide as the HEADING needs and no wider (the h2 is capped at 15ch), so the
   supporting line sits beside the heading rather than floating in the middle of the band */
.press .mast{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;
  gap:8px clamp(20px,3cqw,64px);align-items:end;
  padding-bottom:clamp(18px,2cqw,30px);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(26px,3.2cqw,48px)}
.press .mast-l{grid-column:1;min-width:0}
.press .mast-l .lbl{margin-bottom:14px}
.press .mast-l h2{max-width:15ch;text-wrap:balance}
.press .mast-r{grid-column:2;min-width:0;padding-bottom:.4em}
.press .mast-act{grid-column:3;align-self:end;padding-bottom:.3em}
@container page (max-width:820px){
  .press .mast{grid-template-columns:1fr;align-items:start;gap:14px}
  .press .mast-l, .press .mast-r, .press .mast-act{grid-column:1}
  .press .mast-l h2{max-width:none}
  .press .mast-r{padding-bottom:0}
  .press .mast-act{padding-bottom:0;justify-self:start}
}

/* ============================================================================================
   THE PLATES. A photograph is contained and framed; an empty frame is a hairline and nothing in
   it, because a pattern in an empty box reads as a file that failed to load.
   ============================================================================================ */
.press .fig{background:var(--fill);border-radius:var(--r);overflow:hidden;position:relative}
.press .fig img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-filter)}
/**
 * EVERY PHOTOGRAPH, NOT JUST THE MASTHEAD'S.
 *
 * A generated page carries pictures from three places at once: a stock library, a photographer,
 * and somebody's phone under a different light in a different year. Grading only the opening one
 * made the join worse, not better — one photograph that belonged to the page and eight that did
 * not. So the wash is on the frame itself, and everything on the page shares it: the same paper
 * warmth over all of them is what makes a mixed set read as one set.
 *
 * It is deliberately weak. A filter you can name is a filter that has gone too far; this one is
 * only meant to be missed when it is turned off.
 */
.press .fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb,var(--paper) 16%,transparent);mix-blend-mode:multiply}
/* opened on purpose — the viewer and the sheet thumbs show what was actually uploaded */
.press .viewer .fig img, .press .sheet .thumbs .fig img{filter:none}
.press .viewer .fig::after, .press .sheet .thumbs .fig::after{content:none}
.press .fig:empty{border:1px solid var(--rule)}
.press .fig.tall{aspect-ratio:3/4}
.press .fig.wide{aspect-ratio:16/10}
.press .fig.sq{aspect-ratio:1}
.press .fig.port{aspect-ratio:4/5}
.press .fig.sm{width:64px;height:64px;flex:0 0 64px;border-radius:3px}

/* ============================================================================================
   THE HERO — the one band that owns the whole width. Paper left, plates right, running off the
   edge of the screen. How many photographs there are decides the arrangement.
   ============================================================================================ */
.press .hero{padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;border-bottom:1px solid var(--rule)}
.press .hero.bare{display:block;padding:clamp(40px,6cqw,110px) 0}
.press .hero.bare .hero-in{padding:0 var(--gut);max-width:var(--measure);margin:0 auto}
.press .hero-say{display:flex;align-items:center;padding:clamp(44px,6cqw,110px) clamp(24px,3cqw,64px)
  clamp(44px,6cqw,110px) var(--edge)}
.press .hero-in{width:100%;max-width:36em}
.press .hero h1{margin-top:18px;max-width:14ch;text-wrap:balance}
.press .hero .lede{margin-top:22px}
.press .tagpill{display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;border:1px solid var(--rule);
  font:600 11px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--soft)}
.press .proof{display:flex;align-items:center;gap:11px;margin-top:32px;font-size:14px;color:var(--soft)}
.press .proof b{font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink)}
.press .faces{display:flex}
.press .faces i{width:26px;height:26px;border-radius:99px;background:var(--fill);margin-right:-8px;
  display:block;background-size:cover;background-position:center;border:2px solid var(--paper)}

/* THE PLATES, AND THE COUNT DECIDES. One is a portrait; two stack; three make a plate and a pair.
   Each fills its cell, so the column is one solid block of picture whatever it holds. */
.press .hero-pics{display:grid;gap:2px;min-height:clamp(420px,52cqw,760px)}
.press .hplate{position:relative;overflow:hidden;background:var(--fill)}
.press .hplate .fig{position:absolute;inset:0;border-radius:0;background:var(--fill)}
.press .hero.n1 .hero-pics{grid-template-rows:1fr}
.press .hero.n2 .hero-pics{grid-template-rows:1fr 1fr}
.press .hero.n3 .hero-pics{grid-template-columns:1fr 1fr;grid-template-rows:1.35fr 1fr}
.press .hero.n3 .p1{grid-column:1/-1}
.press .hero.n3 .p2{grid-column:1;grid-row:2}
.press .hero.n3 .p3{grid-column:2;grid-row:2}
/* two plates stack, and the second is the shorter of the pair — a spread is not two equal halves */
.press .hero.n2 .hero-pics{grid-template-rows:1.15fr 1fr}
.press .hero.n2 .p2 .fig{opacity:.98}
/* THE MASTHEAD'S PLATES BELONG TO THE PAPER.
   The opening photograph is now often a STOCK one — chosen for the trade rather than shot in this
   building — and the place that gives it away is the join, where a picture from somebody else's
   world butts up against this page's type column. So the plates are printed rather than pasted:
   the paper's colour bled into their inner edge, ink pooled along the bottom the way it does at
   the foot of a page. It costs nothing, it applies to their own photographs too, and it means the
   masthead looks deliberate whichever kind of picture ended up in it. */
.press .hero .fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 42%,transparent),transparent 30%),
             linear-gradient(0deg,color-mix(in srgb,var(--ink) 24%,transparent),transparent 44%)}
@container page (max-width:900px){
  /* ON A PHONE THE PICTURE COMES FIRST — a headline under a photograph is a magazine opening;
     a headline over nothing with the photograph two screens down is a page that starts empty. */
  .press .hero{grid-template-columns:1fr}
  .press .hero-pics{order:-1;min-height:0;grid-template-rows:1fr;aspect-ratio:4/3}
  .press .hero.n2 .hero-pics, .press .hero.n3 .hero-pics{
    grid-template-columns:1fr 1fr;grid-template-rows:1fr;aspect-ratio:16/9}
  .press .hero.n3 .p1{grid-column:auto}
  .press .hero.n3 .p3{display:none}
  .press .hero-say{padding:clamp(28px,6cqw,48px) var(--gut)}
  .press .hero h1{max-width:none}
}

/* ============================================================================================
   THE STORY — the paragraph at a book's measure, its facts and its picture as ONE block beside it.

   The first version stacked the notes above the picture in a tall right-hand column and left the
   bottom two thirds of the left one empty: a band that was mostly nothing. They sit together now
   and the band is as tall as its content.
   ============================================================================================ */
.press .story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4cqw,72px);align-items:center}
.press .story-b{min-width:0}
.press .story-m{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2cqw,30px);
  align-content:center;min-width:0}
.press .notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:0 clamp(16px,2cqw,32px)}
.press .note{display:grid;gap:3px;padding:14px 0 0;border-top:1px solid var(--rule);align-content:start}
.press .note b{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.2cqw,34px);
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.press .note span{font:600 11px/1.35 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint)}
.press .story-f .fig{aspect-ratio:4/3;border-radius:calc(var(--r) + 4px)}
.press .story-h{font-size:clamp(26px,3cqw,46px);line-height:1.08;max-width:16ch}
@container page (max-width:900px){
  .press .story{grid-template-columns:1fr;gap:30px}
}

/* ============================================================================================
   THE INDEX — a menu set the way a printed one is: the dish, a DOTTED LEADER, the price.
   ============================================================================================ */
.press .entries{display:grid}
.press .entry{display:grid;grid-template-columns:auto minmax(0,auto) minmax(24px,1fr) auto;
  gap:clamp(12px,1.6cqw,26px);align-items:baseline;padding:17px 0;border-top:1px solid var(--rule)}
.press .entry:last-child{border-bottom:1px solid var(--rule)}
.press .entry-t{min-width:0}
.press .entry-t p{font-size:13.5px;margin-top:4px;color:var(--faint)}
/* the leader itself: a row of dots on the baseline, filling whatever space is left */
.press .leader{align-self:baseline;height:1em;min-width:24px;
  background-image:radial-gradient(circle, var(--rule) 1px, transparent 1px);
  background-size:6px 6px;background-position:0 .68em;background-repeat:repeat-x}
.press .grp{font-family:var(--serif);font-size:clamp(19px,2cqw,27px);
  margin:clamp(26px,3cqw,44px) 0 2px}
.press .grp:first-of-type{margin-top:0}
.press .grp + .entries .entry:first-child{border-top:0}
/* A COURSE MAY CARRY ITS OWN PLATE, its own line and the hours it is served. The photograph is a
   wide band above the heading — a printed menu heads a course, it does not illustrate every dish —
   and the hours are set in the margin of the heading rather than beside it. */
.press .grp-p{margin:clamp(26px,3cqw,44px) 0 12px;overflow:hidden;aspect-ratio:21/7}
.press .grp-p img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-filter,none)}
.press .grp-p + .grp{margin-top:0}
.press .grp-w{font-style:italic;font-size:.62em;opacity:.55;white-space:nowrap;margin-left:.5em}
.press .grp-n{margin:2px 0 10px;font-size:clamp(14px,1.15cqw,16px);line-height:1.5;
  color:color-mix(in oklab,var(--paper) 55%,var(--ink));max-width:56ch}
.press .fig-n{font-family:var(--serif);font-size:clamp(17px,1.5cqw,21px);
  font-variant-numeric:tabular-nums;white-space:nowrap}
@container page (max-width:620px){
  .press .entry{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px}
  .press .leader{display:none}
}

/* ============================================================================================
   THE GOODS — the one place this design overlaps. The paper card sits ON the plate, offset,
   breaking its bottom edge.
   ============================================================================================ */
.press .goods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.6cqw,44px) clamp(14px,2cqw,32px)}
.press .goods.c1{grid-template-columns:minmax(0,min(460px,100%))}
.press .goods.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.press .goods.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.press .good{position:relative;display:block;text-decoration:none;color:inherit;
  padding-bottom:clamp(52px,5cqw,76px)}
.press .good .fig{aspect-ratio:4/5;transition:filter .3s}
.press .good:hover .fig{filter:brightness(1.03)}
.press .good-c{position:absolute;left:clamp(10px,1.4cqw,22px);right:clamp(24px,3cqw,52px);
  bottom:0;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(13px,1.4cqw,20px);display:grid;gap:5px;
  transition:transform .25s cubic-bezier(.2,.7,.25,1)}
.press .good:hover .good-c{transform:translateY(-4px)}
.press .good-c p{font-size:13px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.press .good-f{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:5px}
.press .score{font:500 12.5px/1 var(--sans);color:var(--faint);white-space:nowrap}
.press .score em{font-style:normal;opacity:.7}
/* NO PHOTOGRAPHS ANYWHERE IN THE BAND — the card stands on its own instead of hanging off an
   empty grey rectangle. It keeps the number, the name, the line and the price, which is what a
   printed price list carries. */
.press .good.dry{padding-bottom:0}
.press .good.dry .good-c{position:static;left:auto;right:auto;background:none;
  border:1px solid var(--rule);border-radius:calc(var(--r) + 4px);
  padding:clamp(20px,2.2cqw,30px);min-height:190px;align-content:space-between;gap:10px}
.press .good.dry:hover .good-c{transform:none;border-color:var(--ink)}
.press .good.dry h3{font-size:clamp(20px,2cqw,28px)}
.press .good.dry .good-f{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)}
.press .gone{position:absolute;top:10px;left:10px;z-index:2;padding:5px 10px;border-radius:999px;
  background:var(--ink);color:var(--paper);font:600 10px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase}
.press .good:has(.gone) .fig{opacity:.55}
@container page (max-width:900px){
  .press .goods, .press .goods.c2, .press .goods.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/**
 * ON A PHONE THE SHOP SCROLLS SIDEWAYS, AND THE CARD KEEPS ITS SIZE.
 *
 * `.goods.c3` was written INSIDE the narrow query and beat the plain `.goods` rule on specificity,
 * so a 370px phone got three columns — three cards too narrow to read a product name in. A rail
 * that snaps is what a shop looks like on a phone: one card at a time, at full size, and the next
 * one peeking in is what tells you there are more.
 */
@container page (max-width:620px){
  .press .goods, .press .goods.c1, .press .goods.c2, .press .goods.c3{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    padding-bottom:8px;scrollbar-width:none;
    /* the rail runs to the screen edge, so the last card is not stranded against a margin */
    /* A RAIL ENDS AT THE SCREEN, and the last card gets the margin instead of the rail: padding on
       the track makes every card stop short, which is a rail that never quite reaches the edge. */
    margin-right:calc(-1 * var(--gut));padding-right:0;
    /* A CUT CARD READS AS A BUG; A FADED ONE READS AS "THERE IS MORE".
       The second card was being sliced flat by the viewport, mid-word, with a hard vertical edge —
       which on a phone is indistinguishable from a broken layout. The rail dissolves at the right
       edge instead, so the thing that is cut off looks deliberately cut off. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
  .press .goods::-webkit-scrollbar{display:none}
  /* narrower, so more of the NEXT card shows: a sliver reads as an accident, a third reads as a rail */
  .press .goods > .good{flex:0 0 min(66cqw,280px);scroll-snap-align:start}
  .press .goods > .good:last-child{margin-right:var(--gut)}
}

/* ============================================================================================
   THE SPREAD — photographs laid out as they are on a page: an opening plate that runs off the
   right edge, and the rest under it at different heights. Never a grid of equal squares.
   ============================================================================================ */
/* THE SPREAD keeps the page's left margin and runs to the screen's right edge — one gutter, not
   none. A plate cut exactly in half by the viewport reads as a broken image, not as a bleed. */
.press .spread{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(12px,1.8cqw,28px);padding-left:var(--edge);padding-right:var(--gut);align-items:start}
.press .spread.one{grid-template-columns:1fr}
.press .shot{position:relative;display:block;text-decoration:none;overflow:hidden;
  border-radius:var(--r) 0 0 var(--r)}
.press .shot .fig{border-radius:inherit;transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.press .shot:hover .fig{transform:scale(1.015)}
.press .shot.lead .fig{aspect-ratio:5/4}
.press .spread.one .shot.lead .fig{aspect-ratio:21/9}
/* HOW MANY FOLLOW THE LEAD decides the column beside it: one plate stands alone, two or more pair
   up. A single plate stretched across two columns is a photograph nobody chose that shape for. */
.press .spread-r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8cqw,28px)}
.press .spread.n2 .spread-r{grid-template-columns:1fr}
.press .spread.n3 .spread-r, .press .spread.n4 .spread-r, .press .spread.n5 .spread-r{
  grid-template-columns:1fr 1fr}
.press .spread-r .shot{border-radius:var(--r)}
/* the stagger: each plate a different height, so the row never reads as a contact sheet */
.press .spread-r .s1 .fig{aspect-ratio:4/5}
.press .spread-r .s2 .fig{aspect-ratio:1;margin-top:clamp(14px,2.4cqw,42px)}
.press .spread-r .s3 .fig{aspect-ratio:5/6}
.press .shot-n{position:absolute;left:10px;bottom:10px;padding:4px 9px;border-radius:3px;
  background:var(--paper);color:var(--ink);font:500 11px/1 var(--sans);letter-spacing:.05em}
@container page (max-width:820px){
  .press .spread{grid-template-columns:1fr;padding-left:var(--gut);padding-right:var(--gut)}
  .press .shot{border-radius:var(--r)}
  .press .spread-r .s2 .fig{margin-top:0}
}

/* ============================================================================================
   WHAT SOMEBODY SAID — the quotation at reading size, the score in the one filled card.
   ============================================================================================ */
.press .said{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(24px,3.4cqw,72px);align-items:center}
.press .said-q{min-width:0}
.press blockquote{font-size:clamp(23px,2.6cqw,40px);line-height:1.18;font-style:italic;
  max-width:22ch;text-wrap:balance;color:var(--ink)}
.press cite{display:block;margin-top:22px;font:600 12px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-style:normal}
.press .said-n{min-width:0}
.press .big-n{font-family:var(--serif);font-weight:500;font-size:clamp(48px,6cqw,92px);
  line-height:.9;letter-spacing:-.04em;display:block;color:var(--ink)}
.press .big-n em{font-style:normal;font-size:.36em;opacity:.55;letter-spacing:0}
@container page (max-width:820px){
  .press .said{grid-template-columns:1fr;gap:26px}
  .press blockquote{max-width:none}
}

/* ------------------------------------------------------- the questions, beside their heading */
.press .ask{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,3.4cqw,80px);align-items:start}
.press .ask-l{display:grid;gap:16px;justify-items:start;align-content:start;position:sticky;top:96px}
.press .ask-l h2{max-width:12ch}
.press .ask-l .acts{margin-top:8px}
.press .qs{display:grid;min-width:0}
.press .q{border-top:1px solid var(--rule)}
.press .q:last-child{border-bottom:1px solid var(--rule)}
.press .q summary{display:flex;align-items:center;gap:clamp(12px,1.8cqw,28px);padding:20px 0;
  cursor:pointer;list-style:none}
.press .q summary::-webkit-details-marker{display:none}
.press .q .qt{font-family:var(--serif);font-size:clamp(17px,1.7cqw,23px);flex:1;color:var(--ink)}
.press .q .mark{width:24px;height:24px;border:0;position:relative;flex:0 0 24px}
.press .q .mark::before,.press .q .mark::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--ink);transition:transform .22s}
.press .q .mark::before{width:14px;height:1.4px;transform:translate(-50%,-50%)}
.press .q .mark::after{width:1.4px;height:14px;transform:translate(-50%,-50%)}
.press .q[open] .mark::after{transform:translate(-50%,-50%) scaleY(0)}
.press .q .a{padding:0 0 22px;max-width:60ch}
@container page (max-width:820px){
  .press .ask{grid-template-columns:1fr;gap:26px}
  .press .ask-l{position:static}
  .press .ask-l h2{max-width:none}
}

/* ============================================================================================
   OPEN OR NOT — one sentence, and a card beside it so the band is a section rather than three
   short lines on an empty page. The seven rows of the week are in the sheet.
   ============================================================================================ */
.press .open{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.4cqw,72px);align-items:center;
  border-top:1px solid var(--rule);padding-top:clamp(26px,3cqw,48px)}
.press .open-l{display:grid;gap:16px;justify-items:start;align-content:center}
.press .open-l .lbl{margin-bottom:2px}
.press .open-h{font-size:clamp(30px,4cqw,62px);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.press .open-l .acts{margin-top:6px}
.press .open-r{min-width:0}
.press .state{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.press .state b{width:7px;height:7px;border-radius:99px;background:var(--faint);display:block}
.press .state.on b{background:#3F9E5B}

/* THE CARD — the shape the reference uses and the one thing that gives a thin band presence:
   a rounded plate with a couple of lines at the top and a photograph inside it. */
.press .slab{border-radius:calc(var(--r) + 6px);border:1px solid var(--rule);background:var(--fill);
  padding:clamp(18px,2cqw,28px);display:grid;gap:clamp(16px,2cqw,26px);align-content:start}
.press .slab-t{display:grid;gap:8px;justify-items:start}
.press .slab-n{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3cqw,42px);
  line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.press .slab .fig{border-radius:var(--r);aspect-ratio:16/11}
/* the lit one: the single filled card on a page, and the only place the accent covers an area */
.press .slab.lit{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.press .slab.lit .lbl, .press .slab.lit .big-n, .press .slab.lit .slab-n,
.press .slab.lit .state{color:var(--on-accent)}
.press .slab.lit .lbl, .press .slab.lit .state{opacity:.72}
.press .slab.lit .state b{background:var(--on-accent)}
.press .slab.lit.on .state b, .press .slab.lit .state.on b{background:var(--on-accent)}
@container page (max-width:820px){ .press .open{grid-template-columns:1fr;gap:26px} }

/* the other kind of facts — a tally, numbered, on rules */
.press .tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0}
.press .tal{padding:16px clamp(16px,2.4cqw,40px) 0 0;border-top:1px solid var(--rule);display:grid;gap:6px}
.press .tal b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.4cqw,50px);
  line-height:1;letter-spacing:-.03em}
.press .tal span{display:block;font:600 10.5px/1.3 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}

/* ============================================================================================
   EVERY WAY IN — an index with leaders, and the address as a stamp in the margin.
   ============================================================================================ */
.press .ways{display:grid}
.press .way{display:grid;grid-template-columns:auto minmax(0,auto) minmax(24px,1fr) minmax(0,auto) auto;
  gap:clamp(12px,1.6cqw,26px);align-items:baseline;padding:16px 0;border-top:1px solid var(--rule);
  text-decoration:none;color:inherit}
.press .way:last-child{border-bottom:1px solid var(--rule)}
.press .way-k{font:600 11px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.press .way-v{font-size:15.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.press .way i{font-style:normal;color:var(--faint);transition:transform .18s}
.press .way:hover i{transform:translate(2px,-2px);color:var(--ink)}
.press .way:hover .way-v{color:var(--ink)}
.press .stamp{margin-top:26px}
@container page (max-width:700px){
  .press .way{grid-template-columns:auto minmax(0,1fr) auto;row-gap:3px}
  .press .way .leader{display:none}
  .press .way-k{grid-column:2/-1}
  .press .way-v{grid-column:2/3}
}

/* --------------------------------------------------------------------------------- the form */
/* the form starts on the page's left margin like everything else — centred, it was the one band
   that began somewhere different */
.press .form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2cqw,32px);max-width:760px}
.press .fld{display:grid;gap:7px}
.press .fld.full{grid-column:1/-1}
/* the submit is a button, not a bar — a grid cell stretches its child, and a full-measure lime
   rectangle is the accent taking over the page it was meant to punctuate */
.press .fld.act{margin-top:8px;justify-items:start}
.press .fld span{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
/* A RULE, NOT A BOX. A box is a screen; a line is a page. */
.press .fld input, .press .fld textarea{font:400 16px/1.5 var(--sans);color:var(--ink);
  padding:9px 0;border:0;border-bottom:1px solid var(--rule);background:none;border-radius:0;width:100%}
.press .fld input:focus, .press .fld textarea:focus{outline:0;border-bottom-color:var(--ink)}
.press .fld textarea{resize:vertical}
@container page (max-width:620px){ .press .form{grid-template-columns:1fr} }

/* ============================================================================================
   THE CLOSER — rule to rule, and the one place the accent is a MARKER rather than a button.
   ============================================================================================ */
.press .closer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(18px,3cqw,64px);align-items:end;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:clamp(30px,4cqw,68px) 0}
.press .closer-l .lbl{margin-bottom:16px}
.press .closer-h{font-size:clamp(30px,4.2cqw,68px);line-height:1.05;letter-spacing:-.02em;
  max-width:16ch;text-wrap:balance}
/* NO HIGHLIGHTER. A band of accent behind the last word read as a marker pen left on the page.
   The accent belongs on the button, where it means "press this". */
.press .closer-h mark{background:none;color:inherit;padding:0}
.press .closer-r{position:relative;z-index:0;padding-bottom:.3em}
@container page (max-width:820px){ .press .closer{grid-template-columns:1fr;gap:18px;align-items:start} }

/* THE PITCH — the closer with a photograph running off the right edge behind it */
.press .pitch{padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:stretch;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.press .pitch-say{display:flex;align-items:center;
  padding:clamp(38px,5cqw,90px) clamp(24px,3cqw,64px) clamp(38px,5cqw,90px) var(--edge)}
.press .pitch-in{width:100%;max-width:30em}
.press .pitch-in .closer-h{margin-top:16px}
.press .pitch-f{position:relative;overflow:hidden;min-height:clamp(300px,32cqw,520px)}
.press .pitch-f .fig{position:absolute;inset:0;border-radius:0}
@container page (max-width:900px){
  .press .pitch{grid-template-columns:1fr}
  .press .pitch-f{min-height:0;aspect-ratio:16/10;order:-1}
  .press .pitch-say{padding:clamp(28px,5cqw,48px) var(--gut)}
}

/* ============================================================================================
   THE FACES — portraits in a stagger, the name written across the bottom of the plate.
   ============================================================================================ */
.press .faces-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.4cqw,40px);align-items:start}
.press .faces-row.c1{grid-template-columns:minmax(0,min(380px,100%))}
.press .faces-row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.press .face{position:relative;display:grid;gap:0}
/* the stagger: the middle one drops, so the row is a composition and not a shelf */
/* the stagger, and it is three different drops — two the same and one different is an accident */
.press .face.f1{margin-top:0}
.press .face.f2{margin-top:clamp(18px,3cqw,54px)}
.press .face.f3{margin-top:clamp(8px,1.4cqw,24px)}
.press .face .fig{border-radius:var(--r)}
.press .face-t{position:relative;margin:-26px 0 0 clamp(10px,1.4cqw,20px);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
  padding:12px 15px;display:grid;gap:4px;width:fit-content;max-width:calc(100% - 20px)}
.press .face-t h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.press .marks{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.press .marks.row{gap:10px}
.press .mark{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:34px;height:34px;
  border-radius:999px;border:1px solid var(--rule);color:var(--soft);text-decoration:none}
.press .mark:hover{border-color:var(--ink);color:var(--ink)}
.press .mark.wide{width:auto;padding:0 15px;height:38px;font:600 13px/1 var(--sans)}
@container page (max-width:900px){
  .press .faces-row, .press .faces-row.c2, .press .faces-row.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .press .face.f2, .press .face.f3{margin-top:0}
}
/* and the same rail for the team — a portrait squeezed to a third of a phone is not a portrait */
@container page (max-width:620px){
  .press .faces-row, .press .faces-row.c1, .press .faces-row.c2, .press .faces-row.c3{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    padding-bottom:8px;scrollbar-width:none;
    margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}
  .press .faces-row::-webkit-scrollbar{display:none}
  .press .faces-row > .face{flex:0 0 min(70cqw,280px);scroll-snap-align:start}
}

/* ---------------------------------------------------------------------------------- the reel */
.press .reel{position:relative;display:block;width:100%;max-width:1040px;border-radius:var(--r);
  overflow:hidden;background:var(--fill);cursor:pointer;padding:0;border:0}
.press .reel.play{cursor:pointer}
.press .reel video, .press .reel iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.press .reel .fig{aspect-ratio:16/9}
.press .play-m{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;background:var(--paper);display:grid;place-items:center;
  transition:transform .2s}
.press .reel.play:hover .play-m{transform:translate(-50%,-50%) scale(1.06)}
.press .play-m::after{content:"";border-left:17px solid var(--ink);border-top:10px solid transparent;
  border-bottom:10px solid transparent;margin-left:4px}

/* ============================================================================================
   THE COLOPHON — ink, in both grounds.

   A light page that ends on a dark block reads as finished; one that fades out on the paper it
   started on reads as having run out. So the foot of the page flips its own tokens rather than
   following the mode, which is a decision this design makes and does not leave to the owner.
   ============================================================================================ */
.press footer{
  --ink:#F4F1EA;
  --paper:#141410;
  --soft:color-mix(in oklab, var(--ink) 72%, var(--paper));
  --faint:color-mix(in oklab, var(--ink) 46%, var(--paper));
  --rule:color-mix(in oklab, var(--ink) 22%, var(--paper));
  --fill:color-mix(in oklab, var(--ink) 10%, var(--paper));
  background:var(--paper);color:var(--ink);
  margin-top:calc(var(--band)/2);padding:clamp(44px,5cqw,90px) 0 26px}
.press footer .wrap{max-width:var(--measure)}

.press .colo{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(24px,3.4cqw,64px)}
.press .colo-a{display:grid;gap:16px;align-content:start;justify-items:start;max-width:26ch}
.press .colo-h{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.7cqw,40px);
  line-height:1.1;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.press .colo-a .acts{margin-top:6px}
.press .colo-c{display:grid;gap:0;align-content:start}
.press .colo-c > .lbl{margin-bottom:16px}
.press .pair{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--rule)}
.press .pair:first-child{border-top:0;padding-top:0}
.press .pair-v{font-size:14.5px;color:var(--ink);text-decoration:none;text-transform:none}
.press a.pair-v:hover{color:var(--accent)}
.press .colo-links{display:grid;gap:11px}
.press footer a{color:var(--soft);text-decoration:none;font-size:14.5px}
.press footer a:hover{color:var(--ink)}
.press footer .mark{border-color:var(--rule);color:var(--soft)}
.press footer .mark:hover{border-color:var(--ink);color:var(--ink)}

/* THE BAR ACROSS THE BOTTOM — the mark on the left, every section on the page on the right.
   This is the fix for "there are still no links in the footer": most sites carry no footer groups
   at all, so it builds the list from the page's own sections, which every site has. */
.press .fbar{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(38px,4.4cqw,76px)}
.press .fbar .brand{font-family:var(--serif);font-size:22px;color:var(--ink)}
.press .fbar .brand.has-logo img{height:26px;width:auto;max-width:170px;object-fit:contain;display:block}
.press .fbar .brand.cut-circle img{border-radius:999px;width:26px;height:26px;object-fit:cover}
.press .fbar .brand.cut-round img{border-radius:5px}
.press .fnav{display:flex;gap:clamp(14px,1.8cqw,30px);flex-wrap:wrap}
.press .fnav a{font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.press .fend{display:flex;justify-content:space-between;gap:20px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--rule);font-size:13px;color:var(--faint)}
@container page (max-width:820px){
  .press .colo{grid-template-columns:1fr 1fr}
  .press .colo-a{grid-column:1/-1;max-width:none}
}
@container page (max-width:520px){ .press .colo{grid-template-columns:1fr} }

/* --------------------------------------------------------------------------------- the badge */
.press .qck-badge{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:40;
  padding:8px 15px;border-radius:999px;background:var(--ink);color:var(--paper);
  font:600 12px/1 var(--sans);text-decoration:none}
.press .qck-badge:hover{transform:translateX(-50%) translateY(-2px)}

/* ============================================================================================
   THE SHEETS — a sheet is a PAGE here, not a dialog: the same paper, the same rules, the same
   margin, so opening the whole menu feels like turning to the menu.
   ============================================================================================ */
.press .sheet-host{container-type:inline-size;container-name:page;
  position:fixed;inset:0;z-index:70;overflow-y:auto;overscroll-behavior:contain;
  background:var(--paper);padding:0;animation:press-in .22s ease}
@keyframes press-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.sheet-open{overflow:hidden}
.press .sheet-veil{padding:0 0 clamp(40px,6cqw,90px)}
.press .sheet{max-width:1080px;margin:0 auto;padding:0 var(--gut)}
.press .sheet-head{position:sticky;top:0;z-index:6;background:var(--paper);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 0 16px;border-bottom:1px solid var(--rule);margin-bottom:clamp(22px,3cqw,40px)}
.press .sheet-x{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  padding:9px 16px;border-radius:999px;border:1px solid var(--rule);color:var(--ink);
  text-decoration:none;font:600 13px/1 var(--sans)}
.press .sheet-x i{font-style:normal;font-size:11px}
.press .sheet-x:hover{border-color:var(--ink)}
/* THE CHIPS STICK BELOW THE HEAD, NOT UNDER IT.
   `top:78px` was a guess at the head's height and `z-index:4` was below it — so as you scrolled,
   the filters slid behind the heading and half a row of pills sat cut in two under the word
   "Menu". The head's height is not a constant: it depends on the title, which wraps. So it is
   MEASURED on open (design-client.js sets --cats-top) and the guess is only the fallback. */
.press .cats{display:flex;gap:8px;flex-wrap:wrap;margin:-16px 0 24px;
  position:sticky;top:calc(var(--cats-top,78px) - 2px);z-index:7;
  padding:16px 0 12px;background:var(--paper);
  box-shadow:0 1px 0 var(--rule)}
.press .chip{padding:9px 16px;border-radius:999px;border:1px solid var(--rule);
  font:600 13px/1 var(--sans);color:var(--soft);cursor:pointer}
.press .chip:hover{border-color:var(--ink);color:var(--ink)}
.press .chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.press .chip.big{padding:13px 20px;font-size:14px}
.press .chip.big em{font-style:normal;color:var(--faint);margin-left:6px}
.press .chip.on em{color:color-mix(in oklab,var(--paper) 70%,var(--ink))}
.press .opts{display:flex;gap:9px;flex-wrap:wrap}
.press .reading{max-width:64ch}
.press .reading .prose + .grp{margin-top:34px}
.press .total{display:flex;justify-content:space-between;align-items:baseline;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--ink)}
.press .qty{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--rule);
  border-radius:999px;padding:10px 16px;font-weight:600}
.press .qty button{cursor:pointer;padding:0 4px}
/* the accent once a page, and never as a bar. `flex:1` made Add to cart a 460px lime rectangle,
   which is the one thing this design's colour rule exists to prevent. */
.press .buyrow{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.press .buyrow .btn{flex:0 0 auto}
@container page (max-width:560px){
  .press .buyrow{display:grid;grid-template-columns:1fr}
  .press .qty{justify-content:space-between}
}
.press .pdp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3cqw,50px);align-items:start}
.press .pdp .main{aspect-ratio:4/5}
.press .pdp-p{display:grid;gap:12px;align-content:start}
.press .pdp-p .strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.press .pdp-p .strip .img{flex:0 0 76px;aspect-ratio:1;cursor:pointer}
.press .pdp-t{display:grid;gap:14px;align-content:start}
.press .pdp-t .fig-n{font-size:clamp(24px,2.6cqw,36px)}
/* a row in a sheet that carries a thumbnail keeps the picture out of the leader's way */
.press .entry.has-pic{grid-template-columns:auto auto minmax(0,auto) minmax(24px,1fr) auto;align-items:center}
/* the viewer's second arrow, on the right */
.press .arw.r{margin-left:auto}
@container page (max-width:760px){ .press .pdp{grid-template-columns:1fr} }
.press .sum{white-space:normal;overflow-wrap:anywhere;font-size:clamp(17px,1.7cqw,22px)}
/* every review, as a column of quotations with the name in the margin */
.press .quotes{display:grid}
.press .said-one{display:grid;grid-template-columns:minmax(0,var(--col)) minmax(0,1fr);
  --col:170px;gap:clamp(14px,2.4cqw,40px);margin:0;padding:clamp(18px,2.2cqw,32px) 0;
  border-top:1px solid var(--rule)}
.press .said-one:last-child{border-bottom:1px solid var(--rule)}
.press .said-m{display:grid;gap:7px;align-content:start;padding-top:.35em}
.press .said-m cite{margin-top:0;color:var(--ink);letter-spacing:.1em}
.press .said-one blockquote{font-size:clamp(18px,1.9cqw,27px);line-height:1.32;max-width:34ch;
  text-indent:0;font-style:italic}
@container page (max-width:700px){ .press .said-one{grid-template-columns:1fr;gap:10px}
  .press .said-m{padding-top:0} }

/* the week, where it belongs: in the sheet, never on the page */
.press .week{display:grid;max-width:640px}
.press .wk{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-top:1px solid var(--rule);font-size:15px}
.press .wk:last-child{border-bottom:1px solid var(--rule)}
.press .wk.today{font-weight:600}
.press .wk.today em{font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-left:8px}

/* a photograph is looked at against ink, whatever the page is made of */
.press .viewer{background:#0B0B09;color:#F4F1EA}
.press .viewer .sheet-head{background:#0B0B09;border-bottom-color:rgba(244,241,234,.2)}
.press .viewer .sheet-x{color:#F4F1EA;border-color:rgba(244,241,234,.34)}
.press .viewer .fig.shot{aspect-ratio:4/3;background:#0B0B09;display:flex;align-items:center;
  justify-content:space-between;padding:0 12px;border-radius:var(--r)}
.press .viewer .fig.shot img{object-fit:contain}
.press .arw{position:relative;z-index:3;width:44px;height:44px;border-radius:999px;
  background:rgba(244,241,234,.18);color:#F4F1EA;display:grid;place-items:center;font-size:22px;cursor:pointer}
.press .viewer .strip{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:6px}
.press .viewer .strip .fig{flex:0 0 84px;height:64px}
.press .cal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.press .cal-head .arw{background:none;border:1px solid var(--rule);color:var(--ink);width:38px;height:38px;font-size:18px}

/* the booking walk */
.press .steps{display:grid}
.press .step{border-top:1px solid var(--rule)}
.press .step:last-child{border-bottom:1px solid var(--rule)}
.press .step-head{display:flex;align-items:center;gap:16px;width:100%;padding:19px 0;cursor:pointer;text-align:left}
.press .step-t{font-family:var(--serif);font-size:19px;flex:1;transition:font-size .2s}
.press .step-v{margin-left:auto;color:var(--faint);font-size:14px;text-align:right}
.press .step-body{display:none;padding:0 0 26px}
.press .step.on .step-body{display:block}
.press .step.on .step-t{font-size:23px}
.press .step[hidden]{display:none}
.press .step.done .step-t{color:var(--soft)}
.press .step.done .num{color:var(--accent)}
.press .party{margin-top:22px;display:grid;gap:10px;justify-items:start}
.press .party[hidden]{display:none}
.press .cal, .press .cal-head{max-width:392px}
.press .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.press .cal span{display:grid;place-items:center;aspect-ratio:1;border-radius:3px;
  font:500 14px/1 var(--sans);cursor:pointer;border:1px solid transparent}
.press .cal span:hover{border-color:var(--rule)}
.press .cal span.on{background:var(--ink);color:var(--paper)}
.press .cal span.mid{background:var(--fill)}
.press .cal span.off{color:var(--faint);opacity:.4;cursor:default;border-color:transparent}
.press [data-times]{display:flex;gap:8px;flex-wrap:wrap}
.press [data-times] span{padding:10px 16px;border-radius:999px;border:1px solid var(--rule);
  font:600 13px/1 var(--sans);cursor:pointer}
.press [data-times] span:hover{border-color:var(--ink)}
.press [data-times] span.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.press [data-times] p{font-size:14px}

/* ============================================================================================
   WHAT THE RUNTIME DRAWS, AND THE THEME HAS TO DRESS.

   design-client.js builds the stateful parts in the browser — the basket's lines, a product's
   options, the other products under one — and it writes its OWN class names doing it: .row .img
   .price .qty .tag .opt .opts .card .eyebrow. They are not this design's vocabulary and they never
   appear in theme.js, which is exactly why they are easy to miss: the page looks finished until
   somebody puts something in a basket.
   ============================================================================================ */
.press .img{border-radius:var(--r);overflow:hidden;background:var(--fill);flex:0 0 auto}
.press .img img{width:100%;height:100%;object-fit:cover;display:block}
.press .price{font-family:var(--serif);font-weight:500;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.press .eyebrow{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint)}
.press .tag{display:inline-block;padding:5px 11px;border-radius:999px;border:1px solid var(--rule);
  font:600 11px/1 var(--sans);letter-spacing:.06em;color:var(--soft);margin:0 5px 5px 0}
.press .opt{padding:10px 16px;border-radius:999px;border:1px solid var(--rule);
  font:600 13px/1 var(--sans);color:var(--soft);cursor:pointer}
.press .opt:hover{border-color:var(--ink);color:var(--ink)}
.press .opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* the basket's own lines, and the "other products" strip under one — both are .card/.row */
.press [data-lines] .row{border-top:1px solid var(--rule)}
.press [data-lines] .row:last-child{border-bottom:1px solid var(--rule)}
.press [data-others] .card{display:grid;gap:10px;text-align:left;cursor:pointer;align-content:start}
.press [data-others] .card .img{aspect-ratio:1}
.press [data-others] .card .price{font-size:17px}
.press [data-thumbs] .img{border-radius:3px}
.press [data-thumbs] .img:hover{outline:1px solid var(--rule);outline-offset:2px}

/* ------------------------------------------------------------------- the owner, and only them */
.press .band-edit{position:relative}
.press .band-gear{position:absolute;top:14px;right:14px;z-index:20;width:38px;height:38px;
  border-radius:999px;background:var(--ink);color:var(--paper);display:grid;place-items:center;
  cursor:pointer;opacity:0;transition:opacity .15s}
.press .band-gear .ico{width:17px;height:17px}
.press .band-edit:hover .band-gear, .press footer .band-gear{opacity:1}
/* THE BAR'S GEAR BEHAVES LIKE EVERY OTHER BAND'S: it sits at the right end of the bar, over it,
   and appears on hover. Two things it must not do — reserve space inside the bar (that pushed the
   cart and the menu button off the right edge, in the editor only, which is a layout no visitor
   ever sees) or hang underneath it (a white disc floating over the hero photograph). The owner's
   chrome may not move the page and may not sit on it. */
.press nav .band-gear{top:50%;right:8px;transform:translateY(-50%);opacity:0}
.press nav:hover .band-gear, .press nav .band-gear:focus-visible{opacity:1}
body.preview .press .band-gear{display:none !important}
.press .is-off{opacity:.45}
.press .empty-band{padding:clamp(24px,3cqw,44px);border:1px dashed var(--rule);border-radius:var(--r);
  max-width:var(--measure);margin:0 auto}
.press .empty-band h2{font-size:clamp(22px,2.6cqw,32px)}
.press .empty-band p{margin-top:8px;font-size:14px}
@container page (max-width:560px){ .press .band-gear{opacity:1} }

/* ============================================================================================
   THE ARRIVAL — the only motion in the design, and it is one thing: a band lifts a few pixels and
   comes up to full as it enters. Scroll-driven, so it costs no script and cannot jank; guarded, so
   a browser without the timeline shows the page exactly as it is meant to end up.
   ============================================================================================ */
/* ============================================================================================
   THE ARRIVAL — and the rule that decides what it is allowed to be.

   NOTHING HERE MAY ANIMATE OPACITY, EVER. The first version faded bands in on a view() timeline
   and the timeline sat at -113% on a real page — every band below the fold rendered at opacity 0,
   nothing errored, and the bottom two thirds of the site were blank paper. A scroll effect that
   fails closed takes the page with it.

   So the whole effect is TRANSFORM, and every starting state is one a reader could live with for
   ever: a photograph five per cent too large, a heading ten pixels low. If the timeline never
   runs, never resolves, or is not supported, the page is simply the page.

   Any theme adding motion inherits this rule. Ask of every keyframe: if this stuck at 0%, is the
   page still readable? If the answer is no, it is the wrong effect.
   ============================================================================================ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* a plate settles out of a slight enlargement as it comes up the screen */
    .press .shot .fig img, .press .hplate .fig img, .press .good .fig img, .press .pitch-f .fig img{
      animation:press-settle linear both;
      animation-timeline:view();
      animation-range:cover;
    }
    @keyframes press-settle{ from{ transform:scale(1.06) } to{ transform:scale(1) } }
    /* and a heading rises the last few pixels into place */
    .press .mast-r h2, .press .story-h, .press .closer-h, .press .open-h, .press blockquote{
      animation:press-lift linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 90%;
    }
    @keyframes press-lift{ from{ transform:translateY(12px) } to{ transform:none } }
  }
}


/* ------------------------------------------------------- THE SIGNATURE — the dish people come for
   The strongest version of this band, and it needs no photograph: the copywriter already found
   which dish reviewers cross town for. With a picture it gets one; without, the count takes the
   other half and the band still reads as an invitation rather than a truncated table. */
.press .signature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.4cqw,64px);align-items:center}
.press .sig-n{font-size:clamp(38px,5.4cqw,88px);line-height:.98;letter-spacing:-.02em;margin-top:12px}
.press .sig-l .prose{margin-top:16px}
.press .sig-p{margin-top:16px;font-size:clamp(19px,1.8cqw,26px)}
.press .sig-f .fig{aspect-ratio:5/4}
.press .sig-c{border-left:1px solid var(--rule);padding-left:clamp(20px,2.4cqw,38px)}
.press .sig-c .big-n{font-size:clamp(60px,8cqw,132px);line-height:.9;letter-spacing:-.03em}
.press .sig-g{margin-top:18px;font-family:var(--serif);font-size:clamp(17px,1.5cqw,22px);
  line-height:1.35;color:var(--soft)}

/* ------------------------------------------------------------------- THE COUNT — no pictures, and
   still not a truncated table. True of a menu of six or four hundred, and impossible to make ugly. */
.press .tally{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(24px,3.4cqw,64px);align-items:start}
.press .tally-n .big-n{font-size:clamp(64px,9cqw,150px);line-height:.9;letter-spacing:-.03em}
.press .tally-g{display:grid;gap:0}
.press .tally-c{display:flex;align-items:baseline;gap:16px;padding:15px 0;text-decoration:none;
  color:var(--ink);border-bottom:1px solid var(--rule);transition:padding-left .18s}
.press .tally-c:first-child{border-top:1px solid var(--rule)}
.press .tally-c:hover{padding-left:8px}
.press .tally-c span{flex:1;font-family:var(--serif);font-size:clamp(21px,2.2cqw,32px);line-height:1.15}
.press .tally-c i{font-style:normal;font-size:12px;color:var(--faint)}
.press .tally-c:hover i{color:var(--ink)}

/* ------------------------------------------------------------------------ THE MENU, AS AN ASK
   Nothing is itemised — no dish, no price, no card. The number and the courses are the facts that
   need no picture; a photograph is atmosphere beside them; the button is the point.

   AND IT IS THE ONE FILLED PLATE ON THE PAGE. This design's rule is one accent, once, as a marker —
   which was being read as "almost no colour anywhere", and a page of cream paper with hairlines on
   it was called boring, correctly. A broadsheet is not colourless: it has one thing on it printed
   solid, and that is what your eye lands on. So the menu's ask is set on INK, the count in the
   accent, and the button is the light thing on the dark plate. Once a page. */
.press .ask{display:grid;grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch;
  border-radius:var(--r);overflow:hidden}
.press .ask.has-pic{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.press .ask-l{background:var(--ink);color:var(--paper);
  padding:clamp(30px,4cqw,64px) clamp(26px,3.4cqw,56px);display:flex;flex-direction:column;justify-content:center}
.press .ask-n{display:flex;align-items:baseline;gap:14px}
.press .ask-n .big-n{font-size:clamp(66px,9cqw,150px);line-height:.88;letter-spacing:-.03em;
  color:var(--accent)}
.press .ask-l .lbl{color:color-mix(in oklab,var(--paper) 62%,var(--ink))}
.press .ask-g{margin-top:16px;font-family:var(--serif);font-size:clamp(19px,1.9cqw,28px);
  line-height:1.3;color:color-mix(in oklab,var(--paper) 78%,var(--ink));max-width:22ch}
/* when a course is served — italic, smaller, set apart: a note in the margin of the courses */
.press .ask-w{margin-top:10px;font-family:var(--serif);font-style:italic;
  font-size:clamp(14px,1.15cqw,17px);line-height:1.45;
  color:color-mix(in oklab,var(--paper) 58%,var(--ink));max-width:26ch}
.press .ask .acts{margin-top:clamp(22px,2.6cqw,36px)}
/* the button is the light thing on the dark plate — the accent has already been spent on the count */
.press .ask .acts .btn{border-color:var(--paper);color:var(--paper)}
.press .ask .acts .btn:hover{background:var(--paper);color:var(--ink)}
.press .ask .acts .btn.fill{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.press .ask-f{position:relative}
.press .ask-f .fig{border-radius:0;height:100%;min-height:clamp(240px,26cqw,440px)}
@container page (max-width:620px){
  .press .ask, .press .ask.has-pic{grid-template-columns:1fr}
  .press .ask-f{order:-1}
  .press .ask-f .fig{min-height:0;aspect-ratio:16/10}
  .press .ask-l{padding:26px 20px 28px}
  .press .ask .acts .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------ WHERE THEY ARE, AND HOW TO GET THEM
   The ways were a printed index — a row, a dotted leader, the value in the right margin. The
   leader belongs to a menu: your eye follows the dots to a price, which is a thing you READ. This
   band is not read, it is used, and a phone number set like a line in a table does not look like
   something you press. Plates instead, each one the size of a thumb. */
.press .place-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(22px,3cqw,56px);align-items:start}
.press .place-l{min-width:0}
/* A ROW, NOT A BOX. Four bordered cards in a stretch grid all take the height of the tallest —
   which is the one with the full address in it — so a telephone number sat in a box with three
   empty lines under it. Rows on a hairline instead: each one exactly as tall as what is in it,
   and the whole band reads as a list of ways in rather than four mismatched cards. */
.press .doorways{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 clamp(20px,3cqw,48px);align-items:start;margin-top:18px;
  border-top:1px solid var(--rule)}
.press .doorway{display:flex;flex-direction:column;gap:3px;position:relative;text-decoration:none;
  color:var(--ink);padding:14px 30px 15px 0;border-bottom:1px solid var(--rule);
  transition:padding-left .18s}
.press .doorway:hover{padding-left:8px}

.press .doorway-v{font-family:var(--serif);font-size:clamp(17px,1.5cqw,21px);line-height:1.25;
  word-break:break-word}
.press .doorway i{position:absolute;right:6px;top:16px;font-style:normal;font-size:12px;
  color:var(--faint)}
.press .doorway:hover i{color:var(--ink)}
.press .place-more{margin-top:18px}
.press .plot{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--fill);
  border:1px solid var(--rule);border-radius:var(--r);filter:saturate(.55) contrast(1.04)}
.press .plot-t{position:absolute;inset:0;display:block}
.press .plot .map-tile{position:absolute;width:256px;height:256px;max-width:none;display:block}
/* the marker is a printer's cross, not a balloon — this design has no balloons in it */
.press .plot-x{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
  pointer-events:none}
.press .plot-x::before,.press .plot-x::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 55%,transparent)}
.press .plot-x::before{width:26px;height:2px;transform:translate(-50%,-50%)}
.press .plot-x::after{width:2px;height:26px;transform:translate(-50%,-50%)}

/* the shop's own sheet — the same cards, filling it. Never the menu's printed index. */
.press .sheet-goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(12px,1.6cqw,22px)}
@container page (max-width:620px){
  .press .sheet-goods{grid-template-columns:1fr 1fr;gap:10px}
  .press .sheet-goods .good-c h3{font-size:16px}
}

/* ============================================================================================
   THE PHONE.

   Same design, same elements — the sizes are what change. Every rule here was written looking at
   a 390px render, not derived from the desktop ones: a question set smaller than its own answer,
   plates so tall the gallery took four thumb-swipes, and the badge sitting on top of a heading.
   ============================================================================================ */
@container page (max-width:620px){
  /* MORE PAGE, LESS MARGIN. The gutter was 18px a side on a 390px screen — nearly a tenth of the
     display given to nothing. A phone is already narrow; the margin is the first thing to go. */
  .press{--gut:11px}
  /* CATEGORY CHIPS DO NOT WRAP INTO A BLOCK. Twelve of them at 390px became four rows of pills
     that pushed the first dish off the screen — and they are sticky, so that block then followed
     you down the page. One line that scrolls, running to the screen edge the way every other rail
     here does. */
  .press .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-right:calc(-1 * var(--gut));padding-right:0;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .press .cats::-webkit-scrollbar{display:none}
  .press .cats .chip{flex:0 0 auto}
  .press .cats .chip:last-child{margin-right:var(--gut)}

  /* A PAGE OF ONE PAPER SCROLLS AS ONE THING.
     On a desktop the bands are told apart by width — a wrapped column, a bleeding plate, a rule
     running to the edge. A phone has no width to spend, so every band is the same full-bleed
     column and fourteen of them read as one endless scroll. So the paper itself alternates: a
     wash of the accent so faint it is barely a colour, on a PATTERN rather than per section type,
     which is what stops it reading as "these two bands are related". */
  .press .band:nth-of-type(4n+2){background:color-mix(in srgb,var(--accent) 5%,var(--paper))}
  .press .band:nth-of-type(4n+4){background:color-mix(in srgb,var(--ink) 3%,var(--paper))}

  /* THE MAP GOES ON A PHONE. The screen is not wide enough for a legible map AND for the ways to
     reach somebody to stay above the fold, and the ways are what the band is for. */
  .press .place-2{grid-template-columns:1fr}
  .press .plot{display:none}
  /* two plates a row at 390px is two words a line — one channel per row, full width */
  .press .doorways{grid-template-columns:1fr;gap:0}
  /* the courses stay TWO up on a phone: one per row is a card the height of the screen, and four
     of them is the whole menu band turned into a scroll of its own */
  .press .courses{grid-template-columns:1fr 1fr;gap:9px}
  /* the signature and the count stack: a phone has no second column to give either of them */
  .press .signature, .press .tally{grid-template-columns:1fr;gap:22px}
  .press .sig-c{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:20px}
  .press .courses .course-c h3{font-size:18px}
  .press .courses .course-c p{display:none}
  /* THE QUESTION IS THE THING BEING READ. It was set at 15px serif under a 15.5px sans answer, so
     the eye landed on the answer first and the accordion read as a wall of paragraphs. */
  .press .q summary .qt{font-size:18px;line-height:1.3}
  .press .q .prose, .press .q p{font-size:15px;line-height:1.6}
  /* plates were near-square and stacked five deep — over two thousand pixels of scroll for a
     gallery. A phone reads a wall of pictures in landscape, the way it holds the camera. */
  .press .shot.lead .fig, .press .spread-r .fig{aspect-ratio:4/3}
  .press .spread{gap:10px}
  /* the badge floats over the last band; a page needs room under its own last line */
  .press footer{padding-bottom:calc(var(--band)/2 + 44px)}
  /* two buttons side by side at 390px leave neither of them tappable — the first one leads */
  .press .hero .acts{display:grid;grid-template-columns:1fr;gap:10px}
  .press .hero .acts .btn{justify-content:center;width:100%}
  /* a band was as short as its heading. Give the page a beat you can feel between sections. */
  .press .band{padding:calc(var(--band)*0.62) 0}
}
/* their own mark on the map, dropped on the paper — not a balloon, and not a generic pin */
.press .plot-l{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:8px;overflow:hidden;border:2px solid var(--paper);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);background:var(--paper)}
.press .plot-l img{width:100%;height:100%;object-fit:cover;display:block;filter:none}

/* the badge carries the wordmark now, handed in by the server — a word, not a glyph */
.press .qck-badge{display:inline-flex;align-items:center;gap:7px}
.press .qb-mark{display:inline-flex;align-items:center;flex:0 0 auto}
.press .qb-mark svg{height:15px;width:auto;display:block}

.press .qb-tx{white-space:nowrap}