/* SCOPED. Every rule lives under .bold so the design cannot reach the editor's own chrome —
   and the editor cannot reach the design. The two stylesheets are on the same page whenever
   the owner is editing, and unscoped element rules made them fight. */
/* BOLD — the design's stylesheet. One file, shared by the drawing at /wireframe/bold and by
   the renderer in lib/designs/bold.js, so what is judged and what ships are the same CSS. */
/* ============================================================================================
   BOLD — a complete design. Not a layout plus a theme: one thing that owns the arrangement, the
   type, the surfaces and its own components.

   THE PALETTE IS DERIVED FROM ONE COLOUR. The owner picks their brand accent; everything else —
   surfaces, tints, borders, ink, the hover state — is mixed from it. Change `--accent` at the top
   and the whole design recolours without a second set of values existing anywhere.

   THE RULE IT IS BUILT TO: every component states what it does at 1 · a few · many · none. That
   is the only hard requirement, and it is what keeps "it always looks good" true.
   ========================================================================================== */
:root{
  --accent:#FB5A2D;                       /* the one colour a business picks */
  --ink:#0d0d0f;
  --paper:#ffffff;
  /* everything below is MIXED from the two above — this is the whole palette */
  --tint-1:color-mix(in oklab, var(--accent) 6%, var(--paper));
  --tint-2:color-mix(in oklab, var(--accent) 12%, var(--paper));
  --tint-3:color-mix(in oklab, var(--accent) 22%, var(--paper));
  /* A SURFACE THAT IS NOT THE ACCENT. Every frame took --tint-2 — 12% of the brand colour mixed
     into the paper — which is a warm, deliberate surface behind a photograph and a MUDDY one with
     no photograph in it. On a yellow accent over dark paper that is olive, and four products with
     no pictures read as four broken images rather than four products. A photo frame is neutral;
     the accent is for things that mean accent. */
  --fill:color-mix(in oklab, var(--ink) 7%, var(--paper));
  --deep:color-mix(in oklab, var(--accent) 30%, var(--ink));
  --line:color-mix(in oklab, var(--ink) 12%, var(--paper));
  --soft:color-mix(in oklab, var(--ink) 58%, var(--paper));
  /* CONTRAST IS DERIVED, NOT CHOSEN. Two inks are computed from the accent itself, so a lime or a
     yellow is as safe as a navy — nobody has to remember to check.
       --on-accent  : what goes ON TOP of the accent (black on a light accent, white on a dark one)
       --accent-text: the accent as TEXT on the page (pulled dark enough on paper, light enough
                      in dark mode) — so the accent stays the brand without becoming unreadable */
  --on-accent:#fff; --accent-text:var(--accent);
  /* the flipped band — the one surface that goes the other way (footer, cta, a dark gallery) */
  --flip:var(--ink); --flip-ink:var(--paper);
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --text:"Inter",system-ui,sans-serif;
  --step:8px; --gap:calc(var(--step)*3); --band:clamp(72px,11cqw,168px);
  --r:18px;
  /* PHOTOGRAPHS ARE NOT ALWAYS GOOD. A theme may grade them so they sit with its palette — gently,
     because a filter that announces itself is worse than a flat picture. It is never applied in
     the viewer: someone who opened a photograph wants the photograph. */
  --photo-filter:saturate(1.06) contrast(1.04);
  --map-filter:saturate(.9);
}
:root[data-photos="raw"]{--photo-filter:none}
/* DARK IS NOT A SECOND THEME. It is the same design with --ink and --paper swapped: every tint,
   line, button and surface is mixed from them, so nothing else has to be restated. */
:root[data-mode="dark"]{
  --ink:#f5f2ee; --paper:#0b0b0d;
  --map-filter:invert(.92) hue-rotate(180deg) saturate(.6);
  --flip:color-mix(in oklab, var(--paper) 86%, var(--ink)); --flip-ink:var(--ink);
}
@supports (color: oklch(from red l c h)){
  :root{
    --on-accent:oklch(from var(--accent) clamp(0,(.68 - l)*1000,1) 0 h);
    --accent-text:oklch(from var(--accent) min(l,.60) c h);
  }
  :root[data-mode="dark"]{ --accent-text:oklch(from var(--accent) max(l,.74) c h); }
}
.bold *{box-sizing:border-box}

/* ============================================================================================
   THE EDITOR'S STYLESHEETS ARE ON THIS PAGE TOO — and they are older than this design.
   ============================================================================================
   An owner's Bold page loads editor-ui.css and site.css for the panel, the dock and the pickers.
   Both of those carry UNSCOPED class rules, and this design's vocabulary was written without
   knowing that: `.sheet`, `.card`, `.wrap`, `.field`, `.fgrid`, `.qck-badge` are all names they
   already use for something else.

   The result was only ever visible to the OWNER — a visitor's page loads neither file — which is
   why it survived a suite of 566 tests and a walk of the fixture. In the editor it meant:

     .sheet     the editor's dark bottom-sheet, so every sheet on the page inherited WHITE TEXT
                on a white card. The FAQ had no questions, the shop and booking sheets looked
                empty, the opening hours looked unstyled. All of it one `color:#fff`.
     .fgrid     forced to two columns, so the footer's columns collapsed
     .card      given a position, a padding and a radius the design never asked for
     .qck-badge given a display, a height and a border that are not this design's
     .wrap      given the editor's font and colour

   So: everything those files set on a name this design also uses is put back to the browser's own
   value HERE, at the top, before the design says what it wants. Anything below this line is the
   design's decision and wins by coming later. A new collision is fixed by adding a line here —
   never by renaming what the design calls its own parts.
   ============================================================================================ */
.bold .sheet{width:auto;max-width:none;max-height:none;overflow:visible;color:inherit;
  font-family:inherit;background:none;border:0;border-radius:0;padding:0;animation:none}
.bold .card{position:static;height:auto;border-radius:0;overflow:visible;isolation:auto;
  padding:0;transition:none}
/**
 * A BUTTON IS NOT A BUTTON-SHAPED BOX.
 *
 * Anything clickable here is a real <button>, because a div that responds to a tap is not
 * reachable by a keyboard and not announced to a screen reader. But a <button> arrives wearing the
 * browser's own chrome — `buttonface` for a ground, `buttontext` for the ink, a border, centred
 * text, the system font — and any component that does not overwrite ALL of that gets it.
 *
 * It happened three times: the related products in a cart, the service options in a booking, the
 * category chips in a menu. Each was a light pill with dark text on a dark page, and each was
 * fixed on its own. So the reset is here, once, and a component starts from nothing.
 */
.bold button{font:inherit;color:inherit;background:none;border:0;text-align:inherit;
  -webkit-appearance:none;appearance:none}
/* AND SOME OF THEM ARE BUTTONS. The related products in a product sheet are <button class="card">,
   because tapping one opens another product — and a button carries the browser's own chrome:
   `buttonface` for a background, `buttontext` for the ink, centred text, a border. On a dark page
   that is a white block with white writing in it, which is exactly how the cart read. Geometry was
   reset above; this is the rest of what a button brings. */
.bold button.card{background:none;border:0;color:inherit;font:inherit;text-align:left;
  -webkit-appearance:none;appearance:none;cursor:pointer}
/* AND ITS PAGE OFFSETS. site.css gives `.wrap` 56px of top and 96px of bottom padding while an
   owner is editing — room for the bento grid's own chrome. `.wrap` is this design's column, and it
   has one in every band, so the sticky bar was 188px tall in the editor and 75px for a visitor:
   the owner was judging a bar nobody else would ever see. */
.bold .wrap{color:inherit;font-family:inherit;container-type:normal}
/* …and its PAGE OFFSETS, which need the same weight the editor's own rule has
   (`body.is-owner:not(.preview) .wrap`) or they simply lose. */
body.is-owner .bold .wrap, body.is-owner:not(.preview) .bold .wrap{padding-top:0;padding-bottom:0}
.bold .field{margin-bottom:0}
.bold .fgrid{display:block;grid-template-columns:none;gap:0}
.bold .map-attr,.bold .map-pulse{all:unset}
.bold .qck-badge{height:auto;white-space:nowrap;max-width:none;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* THE BREAKPOINTS ARE THE PAGE'S OWN WIDTH, not the window's.
   The editor previews a phone by NARROWING the canvas, and a `@media` query never sees that: at a
   400px canvas in a 1280px window every desktop rule still applied, so the phone preview showed a
   two-column menu with the prices wrapping — a preview that lies about the thing it is previewing.
   A container query asks the page how wide IT is, which is the same answer on a real phone and
   makes the preview true. */
#clay-page{container-type:inline-size;container-name:page}
.bold{background:var(--paper);color:var(--ink);font:16px/1.55 var(--text);-webkit-font-smoothing:antialiased}
/**
 * THE PAGE IS WIDE AND THE TYPE IS ENORMOUS.
 *
 * This design is called Bold and it was drawing 46px headlines in a 1180px column with half the
 * screen empty beside them. A wide measure, a display face used at the size it was cut for, and
 * headings that go to the edge of the room they are in — that is the whole look, and everything
 * else here is restraint around it.
 *
 * `cqw` not `vw`: the unit is the PAGE's width, so the phone preview is true and a narrowed canvas
 * scales the type the way a phone actually would.
 */
.bold .wrap{max-width:1520px;margin:0 auto;padding:0 clamp(20px,4cqw,72px);
  transition:max-width .3s cubic-bezier(.2,.7,.25,1)}
.bold .wrap.tight{max-width:1080px}
.bold h1, .bold h2, .bold h3, .bold .d{font-family:var(--display);font-weight:800;
  letter-spacing:-.045em;line-height:.86;margin:0;text-wrap:balance}
.bold h1{font-size:clamp(56px,13cqw,220px);letter-spacing:-.055em}
.bold h2{font-size:clamp(38px,7.5cqw,124px);letter-spacing:-.05em}
.bold h3{font-size:clamp(19px,2.1cqw,30px);letter-spacing:-.025em;line-height:1.08}
/**
 * THE SCALE LIVES HERE, NOT IN THE MARKUP.
 *
 * Seventeen headings and prices carried an inline `font-size` — in `vw`, so they never narrowed
 * with the page either. About's heading was clamp(28px,3.4vw,46px) while every other band heading
 * ran to 124px, which is why that section read as unstyled: it was, in the sense that mattered.
 * It had been opted out of the design's own type.
 *
 * A heading BESIDE something — a photograph, a column of facts — is smaller than one that opens an
 * empty band, because it is sharing the width. That is a real distinction and it is now a class,
 * so the design decides it once instead of the markup deciding it eight times.
 */
.bold .h-beside{font-size:clamp(30px,4.6cqw,76px);letter-spacing:-.04em}
.bold .h-small{font-size:clamp(22px,2.6cqw,34px);letter-spacing:-.03em}
.bold .h-sheet{font-size:clamp(26px,4cqw,48px);letter-spacing:-.035em;margin-top:8px}
.bold .price.lead{font-size:clamp(24px,2.8cqw,38px)}
.bold .price.mid{font-size:clamp(19px,2.1cqw,26px)}
.bold .d.mid{font-size:clamp(17px,1.8cqw,22px)}
.bold .fine{font-size:14px;margin-top:12px}
.bold p{margin:0;color:var(--soft);font-size:clamp(15px,1.15cqw,18px);line-height:1.6}
/* the eyebrow is a rail: a rule, then the word, so a heading always has something under its chin */
.bold .eyebrow{display:inline-flex;align-items:center;gap:12px;
  font:700 11px/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-text)}
.bold .eyebrow::before{content:"";width:clamp(18px,3cqw,46px);height:2px;background:var(--accent);flex:0 0 auto}
.bold .btn{display:inline-flex;align-items:center;gap:10px;padding:18px 30px;border-radius:999px;background:var(--ink);
  color:var(--paper);font:700 15px/1 var(--text);letter-spacing:-.01em;text-decoration:none;border:0;
  cursor:pointer;transition:transform .18s,background .18s}
.bold .btn:hover{transform:translateY(-2px);background:var(--accent);color:var(--on-accent)}
.bold .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bold .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.bold .btn.sm{padding:11px 18px;font-size:13px}
/* A TAG IS ONE LINE. It wrapped inside its own pill, which is a label that has stopped being a
   label — and it is a word, so it can always be shortened rather than folded. */
.bold .tag{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--tint-2);
  color:var(--accent-text);font:600 12px/1 var(--text);white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}
/* WHAT IS TRUE RIGHT NOW gets the accent, wherever it appears — today's row in a week, a thing
   that cannot be bought. It is the one kind of content on the page that changes without the owner
   touching anything, and it is what makes a site feel like it is about today rather than about
   whenever it was made. */
.bold .live-mark{position:absolute;top:12px;left:12px;z-index:2;padding:6px 11px;border-radius:999px;
  background:var(--ink);color:var(--paper);font:700 11px/1 var(--text);letter-spacing:.08em;text-transform:uppercase}
.bold .card{position:relative}
.bold .card:has(.live-mark) .img{opacity:.55}
/* the score: a measurement, not a label, so it is never a pill */
.bold .score{font:700 13px/1 var(--text);color:var(--soft);white-space:nowrap;display:inline-flex;
  align-items:baseline;gap:4px}
.bold .score i{font-style:normal;opacity:.66;font-weight:500}
.bold .foot{flex-wrap:wrap;row-gap:8px}
.bold .price{font-family:var(--display);font-weight:800;font-size:clamp(19px,1.9cqw,28px);
  letter-spacing:-.03em;white-space:nowrap}
/* …except where it is a sentence in the price's type rather than a price */
.bold .price.sum{white-space:normal;overflow-wrap:anywhere}
.bold .img{background:var(--fill);border-radius:var(--r);overflow:hidden;position:relative}
/* AN EMPTY FRAME IS A DECISION, NOT A HOLE. A site is generated before anybody has uploaded
   anything, and half of them stay that way for weeks — so this is a state the design has to mean,
   not one it falls into. A flat panel and a hairline: no pattern, no icon, no "add an image here".
   It had an accent rule across the bottom corner and that was the wrong instinct — a bright stub
   in the corner of an empty box reads as something that failed to load, not as a decision.
   Restraint reads as intentional; anything added to an empty frame reads as a missing file. */
.bold .img:empty{background:var(--fill);border:1px solid var(--line)}
.bold .img img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-filter)}
.bold .viewer .img img, .bold .sheet .thumbs .img img{filter:none}
/**
 * THE BEAT. Every band had the same padding and the same paper, so a page of fourteen sections read
 * as one long scroll with headings in it. A design has a rhythm: room, then a surface that changes
 * under you, then room again.
 */
/* A SEAM IS ONE BAND'S WORTH OF ROOM, NOT TWO. Every band carried a full --band top AND bottom, so
   the space between any two of them was double — up to 400px of nothing, and on this page eight of
   the fifteen seams fell between bands standing on the SAME ground, where that space is not
   separating anything. It is separation when the ground changes and a hole when it does not.
   So each band contributes HALF a seam, and the two halves make one. A band that carries its own
   ground keeps the full measure: a block of colour needs room inside it to read as a block. */
.bold section{padding:calc(var(--band)/2) 0;position:relative}
.bold .band-tint, .bold .band-dark{padding:var(--band) 0}
.bold .band-tint{background:var(--tint-1)}
.bold .band-dark{background:var(--flip);color:var(--flip-ink)}
.bold .band-dark p{color:color-mix(in oklab,var(--flip-ink) 68%,var(--flip))}
.bold .band-dark .btn{background:var(--flip-ink);color:var(--flip)}
.bold .band-dark .btn:hover{background:var(--accent);color:var(--on-accent)}
.bold .head{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,3cqw,48px);align-items:end;
  margin-bottom:clamp(28px,4cqw,64px)}
.bold .head > div:first-child{min-width:0}
.bold .head h2{margin-top:clamp(10px,1.2cqw,18px)}
.bold .head p{max-width:44ch;margin-top:clamp(12px,1.4cqw,20px)}
@container page (max-width:820px){.bold .head{grid-template-columns:1fr;align-items:start}}
.bold .rule{height:1px;background:var(--line);border:0;margin:0}

/* nav — sticky, quiet, one action */
.bold nav{position:sticky;top:0;z-index:30;background:color-mix(in oklab,var(--paper) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* MIN-height, not height. A fixed bar cannot grow, so anything that wraps inside it is clipped
   rather than shown — in the editor, where the bar also carries a cart and a gear, the business
   name broke onto a second line and the first line was cut off by the bar's own edge. */
.bold nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:16px}
/* AND THE NAME IS ONE LINE. A long one shortens; it never wraps and never pushes the controls off
   the bar. `min-width:0` because a flex child will not shrink below its content without it. */
.bold nav .name{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the mark takes the bar's height and its own width — never stretched, never cropped */
.bold nav .name.has-logo{display:flex;align-items:center;overflow:visible}
.bold nav .name.has-logo img{height:30px;width:auto;max-width:190px;object-fit:contain;display:block}
/* the cut the owner chose. A wordmark keeps its own width; a square or a circle is cropped to it. */
.bold nav .name.cut-round img{border-radius:8px}
.bold nav .name.cut-circle img{border-radius:999px;width:30px;height:30px;object-fit:cover}
.bold nav .name.cut-square img{border-radius:0}
@container page (max-width:820px){ .bold nav .name.has-logo img{height:26px;max-width:150px} }
/* THE NAME ON THE LEFT, everything else on the right. A row of links starting right beside the
   name reads as more words in the name; against the controls they read as the way around. */
.bold nav .links{display:flex;gap:28px;align-items:center;margin-left:auto}
/* the controls, together, at the end — never spaced apart by the bar itself */
.bold nav .nav-end{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:clamp(16px,2.4cqw,40px)}
.bold nav a{color:var(--ink);text-decoration:none;font-size:15px;opacity:.72;transition:opacity .15s}
.bold nav a:hover{opacity:1}

/**
 * FULL WIDTH MEANS THE EDGE OF THE SCREEN.
 *
 * A photograph meant to run the width of the page was still sitting inside the text gutter, so it
 * stopped short of both edges and read as a large picture in a column rather than as the width of
 * the site. Text keeps the gutter — that is what a gutter is for; pictures do not.
 *
 * `100cqw` is the PAGE, not the window, so this stays true inside the editor's phone preview.
 */
.bold .bleed{width:100cqw;max-width:100cqw;margin-left:calc(50% - 50cqw);margin-right:calc(50% - 50cqw);
  border-radius:0}
@container page (min-width:1100px){
  /* on a wide desktop a full-bleed picture is a band of its own again, so it keeps its corners */
  .bold .bleed{width:auto;max-width:none;margin-left:0;margin-right:0;border-radius:calc(var(--r)*1.4)}
}

/* hero — the design's signature: type first, image as ground */
.bold .hero{padding:calc(var(--step)*10) 0 calc(var(--step)*8)}
.bold .hero h1{max-width:14ch}
.bold .hero .sub{font-size:20px;max-width:44ch;margin-top:22px}
.bold .hero .acts{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.bold .hero .shot{margin-top:calc(var(--step)*7);height:clamp(280px,40cqw,560px);border-radius:calc(var(--r)*1.4)}
/* the photograph beside the words, square — the design's signature opening */
.bold .hero-split{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
/* THE NAME IS THE LOUDEST THING ON THE PAGE. It was capped at 74px while a section heading ran
   to 124 — so the largest type a visitor met was the word "Menu", and the business was a
   subtitle to its own site. In a theme called Bold that is the wrong way round. */
.bold .hero-split h1{font-size:clamp(44px,7.4cqw,124px);max-width:none}
.bold .hero-split .shot{margin:0;height:auto;aspect-ratio:1}
.bold .hero.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.bold .hero.split .shot{margin:0;height:clamp(300px,40cqw,600px)}
.bold .proof{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:14px;color:var(--soft)}
/* THE FACES. `background-image` with no `background-size` draws the picture at its natural size,
   so a 1000px photograph showed one corner of itself inside a 30px disc — a flat patch of colour
   that looked exactly like the placeholder it replaced. They were loading the whole time. */
.bold .dots{display:flex}
.bold .dots i{width:30px;height:30px;border-radius:99px;background:var(--tint-3);margin-right:-10px;
  display:block;background-size:cover;background-position:center;border:2px solid var(--paper)}

/* A BOOKING IS A WALK. One question at a time, every answered step still readable and still
   tappable to go back to. */
.bold .steps{display:grid;gap:0}
.bold .step{border-top:1px solid var(--line)}
.bold .step:last-child{border-bottom:1px solid var(--line)}
.bold .step-head{display:flex;align-items:center;gap:14px;width:100%;padding:20px 0;background:none;border:0;
  font:inherit;color:inherit;cursor:pointer;text-align:left}
.bold .step-n{width:28px;height:28px;flex:0 0 auto;border-radius:999px;background:var(--tint-2);color:var(--accent-text);
  display:grid;place-items:center;font:600 13px/1 var(--text)}
.bold .step.on .step-n{background:var(--ink);color:var(--paper)}
.bold .step.done .step-n{background:var(--accent);color:var(--on-accent)}
.bold .step-t{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em}
.bold .step-v{margin-left:auto;color:var(--soft);font-size:14px;text-align:right}
.bold .step-body{display:none;padding:0 0 26px}
.bold .step.on .step-body{display:block}
.bold .step[hidden]{display:none}

/* the categories, in the sheet where the whole list is */
.bold .cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 26px;position:sticky;top:0;z-index:4;
  padding:10px 0;background:var(--paper)}
.bold .cats .opt{padding:10px 16px;font-size:14px}
/* A GROUP HEADING OPENS A GROUP. It sat in the row rhythm at almost row size, with the list's own
   hairline above and below it, so a category read as one more dish with a line through it. It is a
   heading: bigger, with room above it, and the rows under it start their own run. */
.bold .group-t{font-size:clamp(24px,2.8cqw,38px);letter-spacing:-.03em;margin:clamp(30px,4cqw,56px) 0 6px}
.bold .group-t:first-of-type{margin-top:0}
.bold .group-t + .rows .row:first-child{border-top:0}
.bold [data-in] + [data-in]{margin-top:0}

/* FOCUS IS THE THEME'S TOO. The browser's blue ring is the one part of a design nobody chose. */
.bold :focus{outline:none}
.bold :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* the nav's overflow: one more row that opens the whole thing */
.bold .more-links, .bold .nav-burger{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0}
/* MORE IS A CONTROL, not a link that happens to be called More. Three marks, in the links' own
   colour, so the row reads as "these, and there are others" rather than as a fifth destination. */
.bold .more-links{width:30px;height:30px;display:grid;place-items:center;border-radius:999px;opacity:.72}
.bold .more-links svg{width:18px;height:18px;fill:currentColor}
.bold .more-links:hover{opacity:1;background:var(--tint-2)}
.bold .more-links{opacity:.72}
.bold .more-links:hover{opacity:1}
/* A CONTROL LOOKS LIKE ONE. It was a bare 40x40 with an empty icon slot in it — nothing to see
   and nothing to aim at. Bold draws it: the mark in the ink, on the tint, at a size a thumb finds. */
.bold .nav-burger{display:none;width:44px;height:44px;place-items:center;border-radius:12px;
  background:var(--tint-2);color:var(--ink)}
.bold .nav-burger svg{width:22px;height:22px;fill:currentColor}
.bold .nav-burger:hover{background:var(--tint-3)}
.bold .nav-burger[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.bold .nav-all{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line)}
/* THE DRAWER USES THE WIDTH IT HAS. It was one narrow column against the left edge — a phone's
   list on a screen wide enough for four of them, with the other three quarters empty. The footer
   already organises the same links into columns; so does this. */
.bold .nav-all .wrap{display:grid;gap:0 clamp(20px,3cqw,48px);padding-top:10px;padding-bottom:22px;
  height:auto;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.bold .nav-all a{padding:14px 0;border-top:1px solid var(--line);font-size:18px;opacity:1;
  display:block}
@container page (max-width:560px){ .bold .nav-all .wrap{grid-template-columns:1fr} }
.bold nav{position:sticky;top:0;z-index:30}

/* list — rows. 1 = a feature, few = rows, many = two columns + a way in */
.bold .rows{display:grid;gap:0}
.bold .row{display:grid;grid-template-columns:1fr auto;gap:24px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline;transition:padding-left .2s}
.bold .row:hover{padding-left:10px}
.bold .hours-list{display:grid}
.bold .hour-row{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--line)}
.bold .hour-row:last-child{border-bottom:1px solid var(--line)}
.bold .hour-row span:last-child{color:var(--soft)}
.bold .hours-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4cqw,64px);align-items:center}
.bold .hours-side{display:grid;gap:clamp(18px,2.4cqw,30px)}
/* THE WEEK AS A WEEK. Seven columns, the letter over the hour it opens, today filled in — the
   shape of a week rather than a spreadsheet of one. */
.bold .week{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1cqw,14px)}
.bold .week .day{display:grid;gap:10px;align-content:center;justify-items:center;text-align:center;
  min-height:clamp(120px,13cqw,190px);padding:clamp(14px,1.8cqw,24px) 8px;
  border-radius:calc(var(--r)*1.1);background:var(--fill)}
.bold .week .dl{font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.bold .week .dh{font-family:var(--display);font-weight:800;font-size:clamp(18px,2.2cqw,30px);letter-spacing:-.03em}
.bold .week .day.today{background:var(--accent);color:var(--on-accent)}
.bold .week .day.today .dl{opacity:.85}
.bold .week .day.shut{opacity:.42}
@container page (max-width:520px){ .bold .week{gap:4px} .bold .week .dh{font-size:12px} }
@container page (max-width:820px){ .bold .hours-split{grid-template-columns:1fr} }
/* THE STATE, LARGE. A dot, the word, and when it changes — the whole answer, at the size of an
   answer. It opens the week, like every other way in on this page. */
.bold .open-card{position:relative;display:flex;flex-direction:column;gap:12px;text-decoration:none;
  margin-top:clamp(22px,3cqw,38px);padding:clamp(24px,3cqw,40px);border-radius:calc(var(--r)*1.4);
  background:var(--flip);color:var(--flip-ink);min-height:clamp(190px,20cqw,280px);justify-content:flex-end}
.bold .open-card .dot-line{display:inline-flex;align-items:center;gap:10px;font:700 13px/1 var(--text);
  letter-spacing:.1em;text-transform:uppercase;opacity:.72}
.bold .open-card .dot-line b{width:10px;height:10px;border-radius:99px;background:#8c8c8c;display:block}
.bold .open-card.is-open .dot-line b{background:#4ade80}
.bold .open-card .open-h{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.94;
  font-size:clamp(30px,4.4cqw,66px);max-width:12ch}
.bold .hour-row.today span{color:var(--accent-text);font-weight:600}
.bold .hour-row.today i{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
/* …and in the sheet, where the whole week is */
.bold .sheet .row.today{background:var(--tint-1)}
.bold .sheet .row.today h3, .bold .sheet .row.today .price{color:var(--accent-text)}
.bold .sheet .row .now{font-style:normal;font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);margin-left:8px}
.bold .sheet .row.gone{opacity:.5}
.bold .row:last-child{border-bottom:1px solid var(--line)}
.bold .row .meta{display:flex;gap:8px;margin-top:10px}
.bold .two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
/* STACKED, THEY ARE ONE LIST. Two columns of rows collapse under each other on a phone, and the
   last row of the first column keeps its closing line while the first row of the second opens with
   its own — two rules with a gap between them, in the middle of what reads as one list. */
@container page (max-width:820px){
  .bold .two-col{gap:0}
  .bold .two-col > .rows:not(:last-child) .row:last-child{border-bottom:0}
}
.bold .feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.bold .feature .img{height:380px}

/* cards — the shop */
.bold .cards{display:grid;gap:var(--gap)}
/* ONE ROW, whatever the screen: four, three, two, one. A band is a taste, not a catalogue. */
.bold .cards.c4{grid-template-columns:repeat(4,1fr)}
@container page (max-width:1100px){.bold .cards.c4{grid-template-columns:repeat(3,1fr)}}
@container page (max-width:820px){.bold .cards.c4, .bold .cards.c3{grid-template-columns:repeat(2,1fr)}}
/* ON A PHONE A ROW OF CARDS SCROLLS, it does not become a tower. Four products stacked is four
   screens of scrolling before the next section; sideways, it is one gesture and the shape of the
   row survives. The scroll is the element's own, so the page never moves sideways. */
@container page (max-width:640px){
  .bold .cards.c4, .bold .cards.c3, .bold .cards.c2{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    gap:12px;padding-bottom:6px;scrollbar-width:none}
  .bold .cards.c4::-webkit-scrollbar, .bold .cards.c3::-webkit-scrollbar, .bold .cards.c2::-webkit-scrollbar{display:none}
  .bold .cards.c4 > *, .bold .cards.c3 > *, .bold .cards.c2 > *{
    flex:0 0 min(68cqw,300px);scroll-snap-align:start}
}
.bold .cards.c3{grid-template-columns:repeat(3,1fr)}
.bold .cards.c2{grid-template-columns:repeat(2,1fr)}
/* ONE OF SOMETHING IS NOT A BILLBOARD. `c1` had no rule at all, so a team of one person became a
   single full-width column: a 1325px-wide square photograph, 1446px tall, of one member of staff.
   Every shape has to state what it does at one, a few and many — this is `one`. A portrait at a
   portrait's size, and the name allowed to carry the band instead of the picture. */
.bold .cards.c1{grid-template-columns:minmax(0,min(420px,100%))}
.bold .cards.c1 .person h3{font-size:clamp(26px,3.4cqw,46px);line-height:1.02}
.bold .cards.c1 .person p{font-size:clamp(15px,1.3cqw,18px)}
.bold .card{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.bold .card .img{aspect-ratio:4/5}
.bold .card:hover .img{transform:scale(1.012)}
.bold .card .img{transition:transform .25s}
.bold .card .foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
/* NO PHOTOGRAPHS is a version of the card, not a card with a hole: the name gets the room the
   picture would have had. */
.bold .card.dry{background:var(--tint-1);border-radius:var(--r);padding:26px;min-height:190px;
  justify-content:space-between;transition:background .2s}
.bold .card.dry:hover{background:var(--tint-2)}
.bold .card.dry h3{font-size:clamp(22px,2cqw,30px)}

/* gallery — a row, or a mosaic */
.bold .mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:190px;gap:var(--step)}
.bold .mosaic .img:first-child{grid-row:span 2}
.bold .strip{display:flex;gap:var(--step);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.bold .strip .img{flex:0 0 42%;aspect-ratio:4/3;scroll-snap-align:center}

/* accordion */
.bold .qa{border-top:1px solid var(--line)}
.bold .qa:last-of-type{border-bottom:1px solid var(--line)}
.bold .qa summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;gap:20px;align-items:center}
.bold .qa summary::-webkit-details-marker{display:none}
.bold .qa summary h3{font-family:var(--display);font-weight:600}
.bold .qa .plus{width:28px;height:28px;border-radius:99px;background:var(--tint-2);display:grid;place-items:center;color:var(--accent-text);flex:0 0 auto}
.bold .qa p{padding:0 0 24px;max-width:70ch}
.bold .qa .plus::after{content:"+"}
.bold .qa[open] .plus::after{content:"\2212"}
.bold .qa[open] .plus{background:var(--ink);color:var(--paper)}

/* stats + strip of marks */
/* NEVER AN ORPHAN. Four facts in a three-across grid is three and then one on its own with a
   divider pointing at nothing. It wraps by pairs instead, so a fourth has company. */
.bold .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.bold .stats.n4{grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4cqw,34px) 0}
.bold .stats.n4 .stat:nth-child(odd){padding-left:0;border-left:0}
.bold .stat{padding:0 32px;border-left:1px solid var(--line)}
.bold .stat:first-child{padding-left:0;border-left:0}
.bold .stat .n{font-family:var(--display);font-weight:800;font-size:clamp(38px,4.6cqw,72px);letter-spacing:-.04em}
.bold .marks{display:flex;gap:10px 26px;flex-wrap:wrap;align-items:center}
/* a mark is a link, so it must not look like a raw one: no purple, no underline, ever */
.bold .mark{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;color:inherit}
.bold .mark:hover{color:var(--accent-text)}
.bold .mark i{width:34px;height:34px;border-radius:99px;background:var(--tint-2);display:grid;place-items:center;
  color:var(--accent-text);flex:0 0 auto}
.bold .mark i:empty{display:none}
.bold .mark .ico{width:18px;height:18px}
.bold .fcol .marks{gap:8px 18px}
.bold .fcol .mark i{width:28px;height:28px;background:color-mix(in oklab,var(--flip-ink) 12%,var(--flip))}
.bold .fcol .mark{font-size:15px}
.bold .fcol .mark:hover{color:var(--flip-ink)}
.bold .fcol .open-now{margin-bottom:6px}

/* quote */
/* REVIEWS — three claims, three grounds. The score is a number the height of the block, the quote
   is set like a quote and not like a paragraph, and the count is the crowd. Each one opens the
   rest, so the whole band is a door rather than a poster with a link under it. */
.bold .rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.bold .rv-grid.c2{grid-template-columns:repeat(2,1fr)}
.bold .rv-grid.c1{grid-template-columns:minmax(0,min(560px,100%))}
@container page (max-width:900px){.bold .rv-grid, .bold .rv-grid.c2{grid-template-columns:1fr}}
.bold .rv-card{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;
  min-height:clamp(240px,26cqw,380px);padding:clamp(24px,3cqw,44px);border-radius:calc(var(--r)*1.4);
  text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s}
.bold .rv-card:hover{transform:translateY(-3px)}
.bold .rv-card.ink{background:var(--flip);color:var(--flip-ink)}
.bold .rv-card.paper{background:var(--fill)}
.bold .rv-card.accent{background:var(--accent);color:var(--on-accent)}
.bold .rv-card p{font-size:clamp(14px,1.2cqw,17px);font-weight:600;color:inherit;opacity:.62;margin:0}
.bold .rv-card.accent p{opacity:.78}
.bold .rv-n{font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:.82;
  font-size:clamp(64px,9cqw,150px);display:flex;align-items:flex-start;gap:.06em}
.bold .rv-n i{font-style:normal;font-size:.26em;color:var(--accent);line-height:1}
.bold .rv-card.accent .rv-n i{color:var(--on-accent)}
.bold .rv-stars{color:var(--accent);font-size:clamp(15px,1.5cqw,20px);letter-spacing:.22em;line-height:1}
.bold .rv-card blockquote{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  line-height:1.02;font-size:clamp(24px,2.9cqw,44px)}
/**
 * THE ARROW IS THE MOTIF.
 *
 * A mark that appears on one section is that section's idea; a mark that appears on every way in
 * is the theme. So the same disc sits on anything that opens something else — a review block, the
 * opening-hours card, a "the whole week", an "All 40" — and the ghost button that used to say it
 * in words wears it too.
 */
.bold .go{position:absolute;right:clamp(16px,1.8cqw,26px);bottom:clamp(16px,1.8cqw,26px);
  width:clamp(40px,3.4cqw,54px);height:clamp(40px,3.4cqw,54px);border-radius:999px;
  display:grid;place-items:center;font-size:18px;background:var(--flip);color:var(--flip-ink);
  transition:transform .18s}
.bold a:hover > .go{transform:translate(2px,-2px)}
.bold .rv-card.ink .go, .bold .open-card .go{background:var(--flip-ink);color:var(--flip)}
.bold .rv-card.accent .go{background:var(--ink);color:var(--paper)}
/* …AND IN A LINE OF TEXT, after the words. On every way in, not only the ghost-shaped ones: a
   gallery's "All 17" is a solid button and had no arrow while the review's "All 1042" beside it
   did, which reads as two different ideas rather than one theme. `[data-act]` and a section href
   are exactly the set that opens something. */
.bold .fhours a[data-act]::after, .bold .btn[data-act]::after, .bold .btn.ghost::after{
  content:"\2197";font-size:1.05em;line-height:1;margin-left:2px;opacity:.8}
/* except the ones that are not a way in at all */
.bold .btn.ghost[data-close]::after, .bold .btn.ghost[data-qty]::after,
.bold .btn.ghost[data-mv]::after, .bold .btn.ghost[data-step]::after{content:none}
.bold .quote{max-width:24ch;font-family:var(--display);font-weight:600;font-size:clamp(26px,3.6cqw,52px);line-height:1.08;letter-spacing:-.02em}

/* THE MAP — real tiles, the theme's marker, no key and no iframe. */
.bold .img.map{height:420px;padding:0;position:relative;overflow:hidden;background:var(--tint-1)}
.bold .map-tiles{position:absolute;inset:0;filter:var(--map-filter,none)}
.bold .map-tile{position:absolute;width:256px;height:256px;transform:translate(-50%,-50%);max-width:none}
.bold .map-pin, .bold .map-dot, .bold .map-square{position:absolute;left:50%;top:50%;z-index:2}
.bold .map-pin{width:22px;height:30px;margin:-30px 0 0 -11px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:var(--accent);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.bold .map-pin::after{content:"";position:absolute;left:50%;top:8px;width:8px;height:8px;margin-left:-4px;
  border-radius:99px;background:var(--on-accent)}
.bold .map-dot{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:99px;background:var(--accent);
  box-shadow:0 0 0 4px var(--paper)}
.bold .map-square{width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--accent);box-shadow:0 0 0 4px var(--paper)}
.bold .map-pulse{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:99px;
  background:var(--accent);opacity:.35;animation:map-pulse 2.4s ease-out infinite}
@keyframes map-pulse{from{transform:scale(1);opacity:.35}to{transform:scale(5);opacity:0}}
.bold .map-attr{position:absolute;right:8px;bottom:6px;z-index:3;font:500 10px/1 var(--text);
  color:var(--soft);background:color-mix(in oklab,var(--paper) 70%,transparent);padding:4px 7px;border-radius:6px}

/* map + contact */
.bold .contact{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:center}
.bold .contact .img{height:420px}
.bold .lines{display:grid;gap:2px}
.bold .line{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:20px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.bold .line:last-child{border-bottom:1px solid var(--line)}
.bold .line i{width:36px;height:36px;border-radius:99px;background:var(--tint-2);display:block}
.bold .line .arrow{opacity:.35;transition:transform .18s,opacity .18s}
.bold .line:hover .arrow{opacity:1;transform:translate(2px,-2px)}
/* WHAT IT IS, AND WHAT IT SAYS. The label alone is a category; the number is what somebody came
   for, and it was stored, listed in the editor and never drawn. */
.bold .line-t{display:grid;gap:3px;min-width:0}
.bold .line-t b{font-weight:600;font-size:clamp(15px,1.35cqw,18px)}
.bold .line-t em{font-style:normal;color:var(--soft);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the ways that did not fit — the same door every other band offers */
.bold .btn.way{margin-top:4px}
.bold .fhours a[data-act]{display:inline-flex;align-items:center;gap:4px}
.bold .line:hover .arrow{opacity:1}
.bold .open-now{display:inline-flex;align-items:center;gap:9px;font-weight:600}
.bold .open-now b{width:9px;height:9px;border-radius:99px;background:#22c55e;display:block}

/* form */
.bold .form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bold .contact.split{grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.bold .field{display:grid;gap:8px}
.bold .field span{font:600 13px/1 var(--text);color:var(--soft)}
.bold .field input, .bold .field textarea{font:400 16px/1.4 var(--text);padding:16px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink)}
.bold .field input:focus, .bold .field textarea:focus{outline:0;border-color:var(--accent-text);box-shadow:0 0 0 3px var(--tint-2)}
.bold .field.full{grid-column:1/-1}
/* A BUTTON IS THE WIDTH OF WHAT IT SAYS. `full` means it gets the whole ROW of the form, not that
   everything in it is stretched across the page — a 1500px "Subscribe" is a bar, not a control. */
.bold .field.full > .btn{width:auto;justify-self:start}
@container page (max-width:560px){ .bold .field.full > .btn{width:100%;justify-content:center} }

/* cta */
.bold .cta{background:var(--flip);color:var(--flip-ink);border-radius:calc(var(--r)*1.6);padding:clamp(40px,6cqw,110px);text-align:center}
.bold .cta h2{max-width:16ch;margin:0 auto}
/* THE BUTTON GROWS WITH THE BAND. A call to action under a 110px heading was still wearing the
   same pill as a link in a row, which reads as a heading with an afterthought under it. */
.bold .cta .btn{margin-top:clamp(26px,3cqw,44px);background:var(--accent);color:var(--on-accent);
  padding:clamp(18px,1.9cqw,28px) clamp(30px,4cqw,60px);font-size:clamp(15px,1.35cqw,20px)}

/* footer */
/* HALF A SEAM, like every other band. The footer carried a full --band above it AND the section
   before it contributed its own half, so the gap before the one block that ends the page was the
   biggest on it. It has its own ground; that is what separates it. */
.bold footer{background:var(--flip);color:var(--flip-ink);padding:calc(var(--step)*9) 0 calc(var(--step)*5);
  margin-top:calc(var(--band)/2)}
.bold footer a{color:color-mix(in oklab,var(--flip-ink) 72%,var(--flip));text-decoration:none;font-size:15px}
.bold footer a:hover{color:var(--flip-ink)}
.bold .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px}
.bold .fcol{display:grid;gap:12px;align-content:start}
.bold .fcol .t{font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;opacity:.5}
/* the hours, under the business they belong to */
.bold .fhours{display:grid;gap:10px;margin-top:clamp(20px,2.4cqw,32px);align-content:start}
.bold .fhours .t{font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.bold .sign{display:flex;gap:10px}
.bold .sign input{flex:1;padding:14px 16px;border-radius:99px;border:1px solid color-mix(in oklab,var(--flip-ink) 24%,var(--flip));background:transparent;color:var(--flip-ink)}

/* A SHEET IS A PAGE. It takes the screen, the page behind it stays put, and the veil is a way
   out. Not a dialog: no trapping, no scroll-jacking, no second scrollbar. */
/* A SHEET IS A `page` TOO. Every narrow rule in this stylesheet is written `@container page`, and
   a sheet is NOT inside #clay-page — it is a fixed layer beside it. So on a phone not one of them
   applied in here: the booking form stayed two columns and ran off the side of the screen, the
   product sheet kept its desktop split, and the whole overlay was the only part of the design that
   had never been narrowed. It is its own `page` container now, which is what it is. */
.bold .sheet-host{container-type:inline-size;container-name:page;
  position:fixed;inset:0;z-index:70;overflow-y:auto;overscroll-behavior:contain;
  background:color-mix(in oklab,var(--paper) 78%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08);
  padding:clamp(12px,3vw,40px) 0;animation:sheet-in .22s ease}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
body.sheet-open{overflow:hidden}
.bold .sheet-host .sheet{margin:0 auto}
.bold .sheet-host .qty button{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0 4px}
/* A PHOTOGRAPH IS LOOKED AT AGAINST DARK. The viewer took the sheet's own paper, so on a light
   site a picture that did not fill the frame sat in a white room — and the frame around it was a
   different colour from the letterboxing inside it. One ground, and it is the ink either way. */
.bold .viewer{background:var(--ink);color:var(--paper)}
.bold .viewer .sheet{background:transparent}
.bold .viewer .sheet-head{background:var(--ink);color:var(--paper)}
.bold .viewer .sheet-head::before, .bold .viewer .sheet-head::after{background:var(--ink)}
.bold .viewer [data-close]{border-color:color-mix(in oklab,var(--paper) 34%,transparent);color:var(--paper)}
.bold .viewer .img[data-shot]{position:relative;background:var(--ink)}
.bold .viewer .img[data-shot] img{object-fit:contain}
/* the arrows sit ON the picture, not in the room beside it */
.bold .viewer [data-step]{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;padding:0;justify-content:center;border-radius:999px;
  background:color-mix(in oklab,var(--ink) 55%,transparent);color:var(--paper);backdrop-filter:blur(6px)}
.bold .viewer [data-step="-1"]{left:12px}
.bold .viewer [data-step="1"]{right:12px}
.bold .basket-pill{position:fixed;right:16px;bottom:16px;z-index:50;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:600 14px/1 var(--text);box-shadow:0 12px 34px rgba(0,0,0,.22)}
.bold .basket-pill:hover{transform:translateY(-2px)}
/* icons come from the library the editor already uses; until they do, the slot holds its space */
.bold .ico{display:inline-flex;width:1.15em;height:1.15em;flex:0 0 auto}
.bold .ico svg{width:100%;height:100%}
.bold .line i, .bold .mark i{display:grid;place-items:center;color:var(--accent-text)}

/* sheets — a sheet is a page */
.bold .sheet{background:var(--paper);border:1px solid var(--line);border-radius:calc(var(--r)*1.3);padding:clamp(22px,3vw,42px);box-shadow:0 30px 90px rgba(0,0,0,.14);margin:0 auto;max-width:1080px}
/* WHAT IS BEHIND A SHEET IS THE PAGE, OUT OF FOCUS. The veil was a tinted BLOCK the height of its
   own content, so it stopped where the sheet stopped and the rest of the screen was whatever
   happened to be under it — a band of colour with the page showing below the fold. The scrim is
   the HOST, which is already fixed to the whole viewport; the veil is now just the room around
   the sheet. */
.bold .sheet-veil{background:none;padding:clamp(20px,4vw,54px) clamp(16px,3vw,40px);border-radius:0;min-height:100%}
/* THE WAY OUT IS ALWAYS IN FRONT OF YOU. The head scrolled away with the content, so on a long
   menu or a booking walk the only close button was somewhere above the top of the screen. It
   sticks now, on the sheet's own paper, so it is legible over whatever scrolls under it. */
/* THE WAY OUT IS ALWAYS IN FRONT OF YOU. The head scrolled away with the content, so on a long
   menu or a booking walk the only close button was above the top of the screen.
   FULL-BLEED, because a sticky bar that only covers its own box lets the rows scroll through it:
   it is pulled out to the sheet's padding edges and puts that padding back as its own, so what
   passes underneath passes behind something opaque. */
.bold .sheet-head{display:flex;justify-content:space-between;align-items:start;gap:20px;
  position:sticky;top:0;z-index:6;background:var(--paper);
  padding:clamp(22px,3vw,42px) clamp(22px,3vw,42px) 18px;
  margin:calc(-1 * clamp(22px,3vw,42px)) calc(-1 * clamp(22px,3vw,42px)) 22px;
  border-radius:calc(var(--r)*1.3) calc(var(--r)*1.3) 0 0}
.bold .sheet-head::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;
  background:linear-gradient(var(--paper),transparent);pointer-events:none}
/* NOTHING IS ABOVE IT. A sticky header pins to the top of the SCROLLPORT, and the scrollport
   started above the host's padding and the veil's — so a ~90px band above the pinned bar had rows
   scrolling straight through it and a dish photograph appeared over the heading.
   The first attempt painted an opaque strip above the header, which is exactly as wrong the other
   way: at the top of the sheet, before the header has stuck to anything, that strip is a white
   rectangle floating above the card. So the gap is CLOSED instead — the sheet begins where the
   scrollport begins, and the header pins to the real top with nothing over it. */
.bold .sheet-host{padding-top:0}
.bold .sheet-veil{padding-top:0}
.bold .sheet-head [data-close]{flex:0 0 auto;align-self:flex-start}

/* ON A PHONE A SHEET IS THE SCREEN. The host is 78% paper with a blur behind it, which on a
   desktop is the point — the page stays visible around the edges, so the sheet reads as sitting
   over it rather than replacing it. On a phone there are no edges: those few translucent pixels
   above the sticky header were the menu showing through, drifting under the heading as you
   scrolled. Full bleed, opaque, no gap for anything to show through.

   AFTER the rules it overrides, not before. Written above them it lost on source order and the
   header kept the desktop's 22px negative margins inside an 18px sheet — so the one thing meant to
   sit flush hung 4px off each edge and put a sideways scrollbar on every sheet.

   The HOST is in a plain media query: it is the element that declares the container, and an
   element cannot match its own `@container`. It is the size of the window here anyway. */
@media (max-width:760px){
  .bold .sheet-host{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;padding:0}
}
@container page (max-width:760px){
  .bold .sheet-veil{padding:0}
  .bold .sheet{border:0;border-radius:0;box-shadow:none;min-height:100dvh;padding:18px;max-width:none}
  .bold .sheet-head{border-radius:0;padding:16px 18px 14px;margin:-18px -18px 18px}
}
.bold .pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:44px}
.bold .pdp .main{aspect-ratio:4/5}
.bold .pdp .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.bold .pdp .thumbs .img{aspect-ratio:1}
.bold .opts{display:flex;gap:10px;flex-wrap:wrap}
.bold .opt{padding:12px 18px;border-radius:12px;border:1.5px solid var(--line);font-weight:500;
  cursor:pointer;background:none;color:inherit}
.bold .opt:hover{border-color:var(--accent);color:var(--accent-text)}
.bold .opt.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bold .opt.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.bold .qty{display:inline-flex;align-items:center;gap:16px;border:1.5px solid var(--line);border-radius:12px;padding:12px 18px;font-weight:600}
/* BUY. The stepper and the button, side by side while there is room for both. On a phone there is
   not: the button was given the remainder of a 390px row and became a circle with "Add to cart"
   wrapped onto three lines inside it. Under, and full width, which is where a phone wants it. */
.bold .buyrow{display:flex;gap:14px;align-items:center}
.bold .buyrow .btn{flex:1;justify-content:center}
@container page (max-width:560px){
  .bold .buyrow{display:grid;grid-template-columns:1fr;gap:12px}
  .bold .buyrow .qty{justify-content:space-between}
}
.bold .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.bold .cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;background:var(--tint-1);font-size:14px}
.bold .cal span.off{opacity:.32}
.bold .cal span.on{background:var(--ink);color:var(--paper)}
.bold .cal span[data-day]{cursor:pointer}
.bold .cal span.mid{background:var(--tint-3)}
.bold .cal span.off{opacity:.32;cursor:default}
.bold .cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.bold .times span{cursor:pointer}
.bold .times span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bold .times{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bold .times span{padding:12px 0;text-align:center;border-radius:10px;border:1.5px solid var(--line);font-size:14px}

/* THE OWNER IS LOOKING. A band says it can be opened, and the page makes room for the panel
   instead of hiding behind it — a sheet you cannot reach is a sheet you cannot edit. */
.bold .band{position:relative}
.bold body[data-owner] .band:hover{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
body.preview .bold .band-gear,body.preview .bold .band{outline:0 !important}
body.preview .bold .band-gear{display:none !important}
body.preview .fb-fab,body.preview .feedback-fab,body.preview #fb-fab{display:none !important}
/* THE OWNER'S WAY IN — unchanged, except that it is always there. It was revealed on hover, and a
   phone has no hover, so the one control that opens a section was missing on the device most of
   them are edited from. Nothing else about it moves. */
/* THE NAV'S GEAR HAS NOWHERE TO SIT. Every other band has empty space at its top right; the bar
   does not — it already ends in the owner's own button. So the bar makes room for it, at the right
   like every other band, and ONLY while an owner is looking: a visitor's bar is not reshaped to
   leave a hole for a control they will never see.
   `right:auto` was worse than the overlap it fixed — it dropped the gear to the left of the name. */
/* THE BAR IS STICKY EVEN WHILE IT IS BEING EDITED.
   In owner mode the nav is also a `band`, so the gear has something to position against — and
   `.bold .band{position:relative}` is written later at the same specificity, so it won. The bar
   stopped sticking the moment an owner looked at it, in edit AND in preview, which is the one
   place they would judge whether it sticks. An element-plus-class selector settles it. */
.bold nav.band{position:sticky;top:0}
.bold nav .band-gear{top:50%;transform:translateY(-50%);right:12px;left:auto}
body[data-owner] .bold nav .wrap{padding-right:60px}
.bold .band-gear{position:absolute;top:14px;right:14px;z-index:20;transition:opacity .15s;
  width:38px;height:38px;border:0;border-radius:999px;background:var(--flip);color:var(--flip-ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18)}
/* …and one that is switched off says so. Only the owner is ever shown it. */
.bold .band.is-off{opacity:.34;filter:saturate(.4)}
.bold .band.is-off::after{content:"Hidden";position:absolute;left:14px;top:14px;z-index:19;
  padding:5px 11px;border-radius:999px;background:var(--flip);color:var(--flip-ink);
  font:600 11px/1 var(--text);letter-spacing:.06em;text-transform:uppercase}
body.panel-open{padding-right:min(380px,92vw);transition:padding .22s ease}
body.panel-open .sheet-host{right:min(380px,92vw)}
/* The panel takes the right of the screen, so what is anchored to the RIGHT moves out of its way.
   The badge is anchored to the LEFT — moving it left by the panel's width walked it off the edge
   of the screen, leaving a pill half hanging out of the corner. */
body.panel-open .basket-pill{transform:translateX(calc(min(380px,92vw) * -1))}

/* the badge — floating, the theme style's to switch off, never a line of footer text */
/* CENTRED AT THE BOTTOM — where it has always been, and where nothing else lives. In the corner
   it sat under the Feedback pill, which is the owner's tool and not part of the site. The design
   draws it, so the design places it. */
.bold .qck-badge{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:40;
  display:inline-flex;align-items:center;gap:8px;transition:transform .18s,background .18s;
  padding:10px 15px;border-radius:999px;background:var(--flip);color:var(--flip-ink);
  font:600 12px/1 var(--text);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.bold .qck-badge:hover{background:var(--accent);color:var(--on-accent);transform:translateX(-50%) translateY(-2px)}
/* the panel takes the right of the screen, so the middle of what is left moves with it */
body.panel-open .bold .qck-badge{transform:translateX(calc(-50% - min(190px,46vw)))}
body.panel-open .bold .qck-badge:hover{transform:translateX(calc(-50% - min(190px,46vw))) translateY(-2px)}

/* the label that says which state you are looking at — this page only */
.bold .state{position:sticky;top:74px;z-index:5;background:var(--accent);color:var(--on-accent);font:600 11px/1 var(--text);
  letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:99px;display:inline-block;margin-bottom:22px}

@container page (max-width:820px){
  /* custom properties inherit, so they are declared on what consumes them: `:root` is outside the
     container and cannot be reached from in here */
  .bold section, .bold footer, .bold .cards{--band:calc(var(--step)*8);--gap:calc(var(--step)*2)}
  .bold .wrap{padding:0 16px}
  .bold .hero.split, .bold .hero-split, .bold .feature, .bold .contact, .bold .contact.split,
  .bold .pdp, .bold .form, .bold .two-col{grid-template-columns:1fr;gap:26px}
  .bold .cards.c4, .bold .cards.c3{grid-template-columns:1fr 1fr}
  .bold .stats{grid-template-columns:1fr;gap:18px}.bold .stat{padding:0;border-left:0}
  .bold .mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
  /* a wall of photographs, edge to edge — the one place a phone should not have a margin.
     `calc(50% - 50cqw)` and nothing else: adding a fixed negative margin ON TOP of a 100cqw width
     counts the gutter twice, which is 28px of overflow — and inside a sheet, where the container is
     the sheet rather than the page, it overflowed there too. */
  /* …and only on the PAGE. `.wrap` is the page's own column; inside a sheet the nearest `page`
     container is the sheet itself, so a full-bleed width there is measured against the wrong box
     and hangs off the edge. */
  /* THE MOSAIC KEEPS THE GUTTER. Running it to the edge cost 2px of overflow three times over —
     the width is measured against whichever `page` container is nearest, and that is not always
     the one the margins are computed from. Fourteen pixels is not worth a sideways scrollbar.
     `.bleed` is still there for anything that genuinely wants the edge. */
  /* the gap tightens on a phone; the CORNERS do not change — square ones here and round ones on a
     desktop is the same wall of photographs behaving like two different designs. Left over from a
     full-bleed treatment that was backed out. */
  .bold .mosaic{gap:6px}
  .bold .fgrid{grid-template-columns:1fr 1fr}
  .bold nav .links, .bold .more-links{display:none}
  .bold .nav-burger{display:grid}
  .bold .head{grid-template-columns:1fr}
  .bold .hero .shot{height:clamp(220px,62cqw,400px)}
}

/* A ROW WITH A PICTURE. The sheet is where the whole list lives, so a dish that has a photograph
   shows it — three columns instead of two, and the same row when it has none. */
.bold .row.has-pic{grid-template-columns:96px 1fr auto;align-items:center}
.bold .row.has-pic .img{width:96px;height:96px;border-radius:calc(var(--r)*.7);overflow:hidden;background:var(--tint-1)}
@media (max-width:560px){.bold .row.has-pic{grid-template-columns:64px 1fr auto}
  .bold .row.has-pic .img{width:64px;height:64px}}

/* A SECTION WITH NOTHING IN IT YET — only ever drawn for the owner. It is the band, in its place,
   saying what it is and that it is waiting; a visitor's page never has one. */
.bold .empty-band{padding:calc(var(--band)*.6) 0}
.bold .empty-band .wrap{border:1.5px dashed var(--line);border-radius:var(--r);
  padding:clamp(26px,4cqw,44px);background:var(--tint-1)}
.bold .empty-band h2{font-size:clamp(24px,3cqw,38px)}
.bold .empty-band p{margin-top:10px}

/* THE BASKET, in the bar. Shown only when there is something in it — the design decides how it
   looks; that it lives in the (sticky) top bar is the rule every theme keeps. */
.bold .nav-cart{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  padding:9px 14px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font:700 13px/1 var(--text);transition:transform .18s}
.bold .nav-cart[hidden]{display:none}
.bold .nav-cart:hover{transform:translateY(-1px)}
.bold .nav-cart .ico{width:1.05em;height:1.05em}

/* THE INVITATION — a card. Beside its picture when it has one, the full width when it does not.
   Four drawings in one component; the data picks which. */
.bold .invite{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4cqw,56px);align-items:center;
  border-radius:calc(var(--r)*1.6);padding:clamp(26px,4cqw,64px);overflow:hidden}
.bold .invite.dry{grid-template-columns:1fr;max-width:none;text-align:center}
.bold .invite.dry > *{max-width:34ch;margin-inline:auto}
.bold .invite .img{border-radius:calc(var(--r)*1.1)}
.bold .invite h2{font-size:clamp(30px,4.6cqw,76px);letter-spacing:-.04em}
.bold .invite .sub{margin-top:14px;font-size:clamp(16px,1.4cqw,19px)}
.bold .invite .acts{margin-top:26px}
@container page (max-width:820px){.bold .invite{grid-template-columns:1fr;gap:26px}}

/* PEOPLE — a face, a name, what they do. Without photographs it is names and roles, never a grid
   of empty circles. */
/* A PERSON. The face leads, the name is display type rather than a caption under a picture, and
   what they do is said in the accent — the one place a role belongs, because it is the thing you
   are scanning for when you look at a team at all. */
.bold .person{display:flex;flex-direction:column;gap:14px}
.bold .person .face{border-radius:calc(var(--r)*1.2);aspect-ratio:4/5}
.bold .person h3{font-size:clamp(20px,2.2cqw,32px);letter-spacing:-.03em;margin-top:2px}
.bold .person p{font:700 11px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text)}

/* A FILM — the poster and a play. Nothing is loaded until somebody presses it. */
/* A FILM IS BIG, NOT ENDLESS. Sixteen-by-nine across a 1520px page is an 855px poster and a
   1235px band for one video — taller than the menu, for something nobody has pressed yet. */
/* what is embedded is a window, and a window across a 1520px page is 855px of it */
.bold .img.embed{aspect-ratio:16/9;max-width:1100px}
.bold .img.embed iframe{width:100%;height:100%;border:0;display:block}
.bold .film{position:relative;display:block;width:100%;max-width:1100px;padding:0;border:0;background:none;cursor:pointer}
/* THEIR OWN CLIP, in the design's frame. A control bar the browser draws cannot be restyled, so
   the design gives it a frame it can: the same radius and ground every photograph on this page
   gets, and a ratio that holds before a single byte of the film has loaded. */
.bold .film.reel{cursor:default;background:var(--fill);border-radius:calc(var(--r)*1.2);overflow:hidden}
.bold .film.reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.bold .film .img{border-radius:calc(var(--r)*1.2)}
.bold .film .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:999px;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 14px 40px rgba(0,0,0,.28);transition:transform .18s}
.bold .film .play::after{content:"";border-left:20px solid var(--ink);border-top:12px solid transparent;
  border-bottom:12px solid transparent;margin-left:5px}
.bold .film:hover .play{transform:translate(-50%,-50%) scale(1.06)}

/* the ways to reach one person — marks under the name, never a column of labels */
.bold .person .marks{display:flex;gap:10px;margin-top:2px}
.bold .person .mark{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:var(--tint-2);color:var(--accent-text);text-decoration:none;transition:background .15s}
.bold .person .mark:hover{background:var(--tint-3)}
.bold .person .mark .ico{width:16px;height:16px}

/* THE WHOLE OF SOMETHING WRITTEN — a column somebody can actually read, not the sheet's full width */
.bold .prose{max-width:62ch}
.bold .prose p{font-size:clamp(17px,1.5cqw,20px);line-height:1.7;color:var(--ink)}
.bold .prose p + p{margin-top:1.1em}