/* 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:#C87F5E;                       /* 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. */
  /* …AND THE THEME'S OWN CHROME AGREES WITH THE PARTS. The bar, the footer and the sheets are
     drawn from these; leaving them pure ink-and-paper made the furniture around a branded page
     the one neutral thing on it. Same idea, same small amount — see `--c-brand` in parts.css. */
  --fill:color-mix(in oklab, var(--accent) 12%, 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(--accent) 14%, color-mix(in oklab, var(--ink) 12%, var(--paper)));
  --soft:color-mix(in oklab, var(--accent) 7%, 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);
  /* SQUARE, AND SQUARE EVERYWHERE. This was 18px while the parts contract below asks for 0, so
     the page had square bands with rounded photographs in them and a pill in the bar over square
     buttons underneath — one theme drawn two ways. Circles set their own 999px and are unaffected. */
  --r:0px;
  /* 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. */
/* STRONG ENOUGH TO UNIFY. A warm phone snapshot under tungsten next to a cool daylight shot next
     to a graded stock photograph reads as three cameras, and a 6% wash does not change that. Bold
     pulls them all toward one high-contrast, slightly cool register instead. */
  /* THE SAME GRADE, for this theme's own furniture — see the grade in the parts contract below.
     Two numbers for one decision is two designs. */
  --photo-filter:sepia(.3) saturate(1.2) hue-rotate(-8deg) contrast(.92) brightness(1.04);
  --map-filter:saturate(.9);
}
/* THE ESCAPE HATCH — the picture as they took it, all three layers off together. It named only
   the curve, so turning the grade off left the wash and the grain on: a warm film over an
   ungraded photograph, which is neither of the two things anybody asked for. */
:root[data-photos="raw"],
:root[data-photos="raw"] :is(#clay-page,#design-sheets).bold{
  --photo-filter:none; --c-photo:none; --c-photo-wash:none; --c-photo-grain: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.
 *
 * SCOPED TO THE PAGE, not to the document. It was `:root[data-mode="dark"]`, and `--ink` and
 * `--paper` are names the EDITOR's own stylesheet uses too — so a dark site repainted the editor's
 * chrome around it, and the mode could only ever be applied by reloading, because the one element
 * the editor's live preview can safely set an attribute on is the page rather than <html>.
 *
 * Both selectors, because the attribute lands in both places: the server writes it on <html> and
 * on the page, and the design panel writes it on the page as you press it.
 */
#clay-page.bold[data-mode="dark"], #design-sheets.bold[data-mode="dark"],
:root[data-mode="dark"] #clay-page.bold, :root[data-mode="dark"] #design-sheets.bold{
  --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);

  /* …AND THE PARTS' OWN TOKENS, in the same breath. They were written into the document by the
     server as an inline <style>, which is why pressing Dark in the panel changed the theme's own
     chrome and left every band the model draws on white paper until the next load. */
  /**
   * THE DARKEST COLOUR ON THE PAGE IS STILL THEIR COLOUR.
   *
   * Not #0d0d0f — the accent taken all the way down. A dark ground carries far more colour than a
   * light one before anything becomes hard to read, which is why the brand runs at nearly twice
   * the strength here: a green business gets a near-black with green in it, a red one gets a
   * near-black with red in it, and the two do not look like the same site with the buttons
   * repainted. It is still near-black; nothing about the contrast changes.
   */
  /* THE DEEPEST STEP OF THE PALETTE — see `--c-a-*` in parts.css. This was its own mix over its
     own near-black; so were the two below it, each with a different percentage and a different
     grey, so the page's paper, its contrast band and its photo scrim were three unrelated darks. */
  --c-paper:var(--c-a-950);
  --c-ink:#f7f7f5;
  /* HOW MUCH OF THEIR COLOUR IS IN THE GREYS. It was 26%, which put a visible shade of the accent
     on every rule and every fill on the page. Half of that: the brand is there in the tint of a
     hairline and in the boxes, and nowhere does the page read as coloured. */
  --c-brand:13%;
  /* DARK IS DARK. The contrast band is a LIFTED dark rather than the near-white this design's ink
     becomes, and the accent band is the accent taken down into the room instead of a floodlight
     in it — the same colour, at the strength a dark page can carry. */
  --c-flip:var(--c-a-900);
  --c-flip-ink:#f7f7f5;
  --c-band-accent:var(--c-a-700);
  /* the ink on it is derived from it — a stated near-white is right on a deep step of most
     palettes and wrong the moment an owner's accent makes that step a pale one */
}
/**
 * DERIVED WHERE THE ACCENT ACTUALLY IS, WHICH IS NOT `:root`.
 *
 * These two read `--accent` and hand back an ink that is always readable on it. They were computed
 * on `:root` — and the OWNER's accent is written on `#clay-page.bold`, by `vars()`, precisely so it
 * cannot repaint the editor's chrome. So the maths ran against this file's DEFAULT colour and
 * never once saw the colour the business chose: pick a pale yellow or a mint and every accent
 * control kept the ink computed for the dark default, which is white. The basket in the bar went
 * unreadable, and it was the one control that means "you have something waiting".
 *
 * Computed in both places now — the root, for anything outside the page, and the page itself,
 * where the real colour lands.
 */
@supports (color: oklch(from red l c h)){
  :root, #clay-page.bold, #design-sheets.bold{
    --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"], :root[data-mode="dark"] #clay-page.bold,
  :root[data-mode="dark"] #design-sheets.bold{
    --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.
   ============================================================================================ */
/* geometry is NOT reset here any more — `parts.css` sets every one of those on `#design-sheets
   .sheet`, which outranks this, so the resets were a second answer that could only ever fight it */
.bold .sheet{color:inherit;font-family:inherit;background:none;border:0}
.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}
/* …and the badge is no longer among them: parts.css states the whole object now, including the
   undoing of site.css that this line existed to do — once, for every theme, rather than in the one
   theme somebody happened to look at. */

/* 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}
/**
 * A BUTTON IS A BUTTON, WHEREVER IT IS.
 *
 * This one is the design's own — the bar, the footer's sign-up, the sheets — and the bands are
 * drawn from `.c-act` in the parts contract. They were two different buttons: `.c-act` is set in
 * the display face, upper case, at the parts' own scale; this was 15px Inter in sentence case. So
 * the bar said "Reserve a table" in one hand and the band under it said "BOOK A TABLE" in another,
 * on every page, which is the whole of "still not all buttons are the same on the page".
 *
 * Same tokens as `.c-act`, at the same three sizes. The hover is this design's own and stays.
 */
.bold .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:calc(var(--c-u,8px)*1.75) calc(var(--c-u,8px)*3);border-radius:var(--c-r,0px);
  background:var(--ink);color:var(--paper);
  font:var(--c-weight,800) var(--c-t1,14px)/1 var(--c-display,var(--display));
  letter-spacing:.02em;text-transform:var(--c-case,uppercase);white-space:nowrap;
  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 calc(var(--c-bw,1px)*2) currentColor}
.bold .btn.ghost:hover{background:var(--ink);color:var(--paper)}
/* the compact one — the bar, a row's own way in. `c-act-compact`'s numbers, exactly. */
.bold .btn.sm{padding:calc(var(--c-u,8px)*1.25) calc(var(--c-u,8px)*2.25);font-size:var(--c-t0,12px)}
/* and the big one, where a button closes a page */
.bold .btn.lg{padding:calc(var(--c-u,8px)*2.25) calc(var(--c-u,8px)*4);font-size:var(--c-t2,16px)}
/* 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}
/* `div.img` — the FRAME, which is a div. The model page writes its photographs as `<img
   class="img">` and both renderers live under `.bold`, so an unpinned `.img` here is aimed at a
   v23 page as well as this one. See the placeholder note below, and the contract test. */
.bold div.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. */
/**
 * A PLACEHOLDER IS AN EMPTY BOX, NOT AN EMPTY ELEMENT.
 *
 * This outlines the box that stands in for a picture that is not there. `:empty` means "has no
 * child nodes" — which an `<img>` never has, so once the model page started writing real
 * photographs as `<img class="img">` this drew a 1px line around EVERY photograph on the site.
 * Reported as "let's remove these borders at bold theme", and it is not a border anybody chose:
 * a v21 placeholder rule reaching a v23 page because both live under `.bold`.
 *
 * `div.img` — the placeholder is a div and always was. An element that IS an image is never a
 * box waiting for one.
 */
.bold div.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)}
/**
 * EVERY PHOTOGRAPH, NOT JUST THE HERO'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: one photograph that belonged to the page and eight that did not. The wash
 * is on the frame, so everything shares it, and a mixed set reads as one set.
 *
 * Deliberately weak. A filter you can name has gone too far; this one should only be noticed when
 * it is switched off.
 */
.bold div.img::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:color-mix(in srgb,var(--ink) 14%,transparent);mix-blend-mode:multiply}
.bold .viewer .img img, .bold .sheet .thumbs .img img{filter:none}
.bold .viewer .img::after, .bold .sheet .thumbs .img::after{content: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. */
/* A BARE ELEMENT RULE REACHES THINGS IT WAS NEVER MEANT TO. This gave 79px of padding to every
   <section> on the page, including each step of the booking flow — four closed steps with a
   hand's width of nothing between them, which read as a broken form. Scoped to the bands this
   file still draws (the navigation and the footer), and nothing else. */
.bold > nav, .bold > footer{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 */
/**
 * `> nav`, NOT `nav` — the bar is a CHILD of the page, and it is the only one.
 *
 * A breadcrumb is a `<nav>`. So is a menu drawer. Every rule in this block was written for the bar
 * at the top of the page and matched all of them: the crumb on every page came out sticky, blurred
 * and with a 1px rule running the full width of its column — a black bar under "Home / Menu" that
 * looked like a broken component and was this selector being one character too generous.
 *
 * A theme may not name a bare tag the library also draws with. There is a test.
 */
/**
 * THE BAR'S OWN RULES ARE GONE, AND THAT IS THE FIX.
 *
 * Everything that used to be here described a nav THIS THEME NO LONGER DRAWS: `.wrap`, `.name`,
 * `.links`, `.nav-end`, `.has-logo`, `.cut-circle`. The library draws the bar now — `.l-nav-in`,
 * `.l-mark`, `.l-nav-l`, `.l-nav-e` — so every one of those selectors matched nothing, except the
 * two that named a bare TAG and a bare `a`. Those two kept matching, against markup written years
 * after them, and they are what a business saw:
 *
 *   `a:not(.name):not(.btn) { opacity: .72 }` — written when the bar's links were the only links
 *   in it, and exempting the mark and the button BY THE CLASS NAMES THEY NO LONGER HAVE. So a
 *   business's own logo, which is black, rendered grey; and the site's one action in the bar
 *   rendered grey beside a hero button in the same theme that was black. Twice before, this rule
 *   was patched by adding another `:not()` — which is the same fix a third time.
 *
 * The dim is a NUMBER now, `--c-nav-dim`, and the library applies it to the links and to nothing
 * else. A theme says how much it wants; it cannot say what to put it on. See parts.css.
 *
 * The sticky bar, its blur and its rule are the library's too — a theme that restated them was
 * a second description of a component, which is the thing this layer exists to stop.
 */
:is(#clay-page,#design-sheets).bold{--c-nav-dim:.72}

/**
 * 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 OPENING PHOTOGRAPH IS GROUNDED, NOT FLOATED.
   It is now often a STOCK one — the best picture available for the trade rather than one shot in
   this building — and a borrowed photograph reads as borrowed when it sits on the page untouched.
   So the hero plate gets what the rest of the design already has: the accent breathed across its
   top, the ink weighted at its foot so the picture sits DOWN on the page instead of hovering over
   it. Their own photograph gets the same treatment, because a header that changes character
   depending on where the picture came from is worse than either version. */
.bold .hero .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 44%,color-mix(in srgb,var(--ink) 30%,transparent)),
             radial-gradient(120% 88% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%)}
/* 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 */
/* THE CHIPS STICK BELOW THE HEAD, NOT UNDER IT.
   They were pinned at `top:0` — the same place the sheet's own head is pinned — and at z-index 4,
   below it. So they scrolled straight under the heading and were simply gone. The head's height is
   not a constant (its title wraps), so it is MEASURED on open: design-client.js sets --cats-top. */
.bold .cats{display:flex;gap:8px;flex-wrap:wrap;margin:-14px 0 26px;
  position:sticky;top:calc(var(--cats-top,0px) - 2px);z-index:7;
  padding:14px 0 12px;background:var(--paper);box-shadow:0 1px 0 var(--line)}
.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}
/* A COURSE CAN CARRY ITS OWN PICTURE, its own line and the hours it is served — a heading is a
   thing now, not the word above a group. The photograph is wide and short: it opens the course
   without pushing the dishes off the screen, which is what a square would do on a phone. */
.bold .group-p{margin:clamp(30px,4cqw,56px) 0 14px;border-radius:var(--r,14px);overflow:hidden;aspect-ratio:21/7}
.bold .group.has-pic .group-t{margin-top:0}
.bold .group-p img{width:100%;height:100%;object-fit:cover;display:block}
.bold .group-w{font-style:normal;font-size:.42em;letter-spacing:0;opacity:.5;vertical-align:middle;margin-left:.5em;white-space:nowrap}
.bold .group-n{margin:0 0 10px;opacity:.62;max-width:60ch;line-height:1.5}
.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. */
/* and it is square too — see `.nav-cart`: one bar, one shape */
.bold .more-links{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--c-r,0px);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}
/* NOT ON A LAPTOP. The bar holds the four that were ranked and everything else is in the footer,
   so there is nothing behind it; on a phone the same control opens every page. */
@media (min-width:781px){ .bold .more-links{display:none} }
.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:var(--c-r,0px);
  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)}
/* …AND IN A SHEET IT WRAPS. The rail above is right for a taste of a shop and wrong for the whole
   of it: nobody swipes sideways through twelve products looking for one. "Everything" is a grid at
   every width, two across on a phone, and it scrolls the way the sheet already scrolls — down. */
.bold .sheet .cards.sheet-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  overflow:visible;gap:var(--gap)}
@container page (max-width:640px){
  .bold .sheet .cards.sheet-cards{grid-template-columns:repeat(2,1fr);gap:12px}
  .bold .sheet .cards.sheet-cards > *{flex:initial}
}
/* 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. */
/* NO MARGIN ABOVE THE FOOTER. It shows the page's own background between the last band and the
   footer — invisible while every band was white, a white bar across the screen the moment the
   page ends on the accent or on ink, which is how every page ends. The last band's own rhythm and
   the footer's own padding are the space. */
.bold footer{background:var(--flip);color:var(--flip-ink);padding:calc(var(--step)*9) 0 calc(var(--step)*5)}
.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)}
/* THE SIGN-UP, IN THE FOOTER — its own column at the end of the row, and a row of its own once the
   footer folds. It is a line, a field and the same button the bar uses, so nothing about it is a
   second kind of form. */
/* A ROW OF ITS OWN, under the columns: the footer's four tracks are sized for lists of links and a
   field pushed into one of them comes out 90px wide. */
.bold .fsign{grid-column:1/-1;display:grid;gap:12px;align-content:start;position:relative;
  margin-top:clamp(22px,2.6cqw,38px);padding-top:clamp(20px,2.4cqw,32px);
  border-top:1px solid color-mix(in oklab,var(--flip-ink) 18%,var(--flip))}
.bold .fsign .t{font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.bold .fsign-l{color:color-mix(in oklab,var(--flip-ink) 62%,var(--flip));max-width:34ch;font-size:15px}
.bold .fsign-f{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.bold .fsign-i{flex:1 1 160px;min-width:0;padding:11px 14px;border-radius:var(--r);font:inherit;font-size:15px;
  border:1.5px solid color-mix(in oklab,var(--flip-ink) 24%,var(--flip));background:transparent;color:var(--flip-ink)}
.bold .fsign-i::placeholder{color:color-mix(in oklab,var(--flip-ink) 45%,var(--flip))}
.bold .fsign-i:focus{outline:0;border-color:var(--accent)}
.bold .fsign .btn{background:var(--flip-ink);color:var(--flip);flex:0 0 auto}
.bold .fsign .btn:hover{background:var(--accent);color:var(--on-accent)}
.bold .fsign-s{font-size:14px;color:color-mix(in oklab,var(--flip-ink) 72%,var(--flip))}

/* 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. */
/* WHERE A SHEET SITS IS `parts.css` — it comes up from the bottom, on every theme, and the page
   behind it stops scrolling there too. What is left here is the ROOM BEHIND IT, which is paint.
   The container is the sheet's own and is declared once in parts.css; a second one on the host
   meant `@container page` inside a sheet could mean either. */
/**
 * A SHEET IS A SHEET WHEREVER IT IS.
 *
 * These were scoped to `#design-sheets` alone, and the navigation's own drawer is a sheet drawn
 * INSIDE the page — so it got the layer's geometry and none of this theme's paint: no paper, no
 * scrim, no border, no shadow. On a phone that is the site's own menu opening as unpainted text
 * over whatever you were reading.
 *
 * Both hosts, like the tokens above. There is a test.
 */
:is(#clay-page,#design-sheets).bold .sheet-veil{background:color-mix(in oklab,var(--c-paper) 78%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08)}
.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 other paper. */
:is(#clay-page,#design-sheets).bold .viewer{background:var(--c-flip);color:var(--c-flip-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)}

/**
 * A SHEET IS PAINT HERE, AND NOTHING ELSE.
 *
 * What used to be in this place was a whole second description of the sheet layer: where the veil
 * sits, how wide the card is, what its padding is, that the head is sticky and how far it is
 * pulled out to reach the edges, and two media queries restating all of it for a phone. The layer
 * itself says every one of those things once, in parts.css, for every theme — so the two
 * descriptions fought, and the one that won depended on which selector happened to be longer.
 *
 * Geometry is never a theme's. This states the surface, the line and the shadow.
 */
:is(#clay-page,#design-sheets).bold .sheet{background:var(--c-paper);color:var(--c-ink);
  border:1px solid var(--c-line);border-bottom:0;
  box-shadow:0 -24px 70px rgba(0,0,0,.34)}
:is(#clay-page,#design-sheets).bold .sheet-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:calc(var(--c-u)*2.5)}
/* THE PHOTOGRAPH GETS THE OTHER PAPER — a picture is looked at against the darker of the two, and
   the head that sits over it is painted the same so it can be read. */
:is(#clay-page,#design-sheets).bold .viewer .sheet{background:var(--c-flip);color:var(--c-flip-ink);
  border-color:var(--c-flip-ink);box-shadow:none}
.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{min-height:40px;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}
/* THE SAME RIGHT EDGE AS EVERY OTHER ONE. This was 12px while the rest are 14px, so the gear at
   the top of the page sat two pixels out of the column the others make down the right-hand side —
   and two pixels is exactly the amount that reads as "not aligned" without being nameable. */
.bold > nav .band-gear{top:50%;transform:translateY(-50%);right:14px;left:auto}
/* ROOM FOR THE GEAR, AND ONLY WHILE THE GEAR IS THERE. Preview hides it (above) but the owner
   attribute stays on the body, so the bar kept a 60px hole at its right edge and the button and
   the menu control stopped reaching the corner — in the one mode whose whole job is showing the
   owner what a visitor sees. */
body[data-owner]:not(.preview) .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}
/* 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 IS NOT THIS DESIGN'S. "The design draws it, so the design places it" is what used to
   be here, and it is the sentence that produced four descriptions of one pill — this block
   centring it over the bottom bar, another below sizing its mark correctly, chunky's sizing the
   mark into a square, and site.css underneath all three. It is stated once in parts.css now,
   beside the bar it has to keep clear of. */

/* 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. */
/**
 * THE BASKET IS A BUTTON IN THE BAR, so it is shaped like one.
 *
 * It was a 999px pill in a bar whose button is square and whose menu control is square, set in
 * Inter at 13px beside a button set in the display face — three controls, three shapes, in the one
 * place every page shows. The radius, the type and the height come from the same tokens the button
 * beside it uses; the accent is its own, because it is the one control that means "you have
 * something waiting".
 */
.bold .nav-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  padding:calc(var(--c-u,8px)*1.25) calc(var(--c-u,8px)*2.25);border-radius:var(--c-r,0px);
  background:var(--accent);color:var(--on-accent);
  font:var(--c-weight,800) var(--c-t0,12px)/1 var(--c-display,var(--display));
  letter-spacing:.02em;text-transform:var(--c-case,uppercase);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}


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

   Same design, same elements — the sizes are what change. Written looking at a 390px render: a
   hero photograph floating in a third of the width, a shop card sliced flat by the viewport, and
   the badge sitting on the last band.
   ============================================================================================ */
@container page (max-width:620px){
  /* MORE PAGE, LESS MARGIN. The gutter was 20px a side on a 390px screen — a tenth of the display
     given to nothing. A phone is already narrow; the margin is the first thing to go. */
  .bold .wrap{padding:0 11px}
  /* THE OPENING PHOTOGRAPH FILLS THE WIDTH. It was a square holding its desktop proportions, so a
     phone got a small picture with a margin down its right side that looked like a mistake. */
  .bold .hero .shot{width:100%;height:auto;aspect-ratio:4/3;margin-top:calc(var(--step)*4)}
  .bold .hero-split .shot, .bold .hero.split .shot{width:100%;height:auto;aspect-ratio:4/3}
  /* A CUT CARD READS AS A BUG; A FADED ONE READS AS "THERE IS MORE". The second product was being
     sliced flat by the viewport, mid-word, with a hard vertical edge — on a phone that is
     indistinguishable from a broken layout. */
  .bold .cards, .bold .cards.c2, .bold .cards.c3, .bold .cards.c4{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent)}
  /* two buttons side by side at 390px leave neither of them tappable — the first one leads */
  .bold .hero .acts{display:grid;grid-template-columns:1fr;gap:10px}
  .bold .hero .acts .btn{justify-content:center;width:100%}
  /* the badge floats over the last band; a page needs room under its own last line */
  .bold footer{padding-bottom:calc(var(--band)*0.5 + 44px)}
  /* a rail ends at the screen; the LAST card carries the margin, not the track */
  .bold .cards > *:last-child{margin-right:11px}
}
/* ============================================================================================
   THE MENU, AS AN ASK
   Nothing is itemised — no dish, no price, no card. The number and the courses are facts that
   need no picture; a photograph is atmosphere beside them; the button is the point.
   ============================================================================================ */
.bold .ask-b{display:flex;align-items:baseline;gap:clamp(14px,2cqw,30px);margin-top:clamp(22px,3cqw,44px);flex-wrap:wrap}
.bold .ask-n{font-family:var(--display);font-weight:800;font-size:clamp(64px,9cqw,160px);
  line-height:.86;letter-spacing:-.04em}
.bold .ask-l{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.2cqw,32px);line-height:1.1}
.bold .ask-g{margin-top:8px;font-size:clamp(15px,1.3cqw,19px);line-height:1.5;opacity:.62;max-width:30ch}
/* when a course is actually served — their own fact, set apart from the list of course names */
.bold .ask-w{margin-top:6px;font-size:clamp(13px,1.05cqw,15px);line-height:1.5;opacity:.45;max-width:30ch;letter-spacing:.01em}
@container page (max-width:620px){
  .bold .ask-b{gap:12px}
  .bold .ask-n{font-size:clamp(56px,20cqw,90px)}
}

/* their own mark on the map. A generic pin says "a place"; their logo says "here". */
.bold .map-logo{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;overflow:hidden;border:3px solid var(--paper);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.55);background:var(--paper);z-index:2}
.bold .map-logo img{width:100%;height:100%;object-fit:cover;display:block;filter:none}

/* (the badge's mark was sized here too — correctly, which is why it read properly on this theme
   and as a smudge on the other. One description, in parts.css.) */

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

/* the calendar's weekday row — the runtime writes it, and without a rule for it the seven columns
   are numbers with nothing saying which is which */
.bold .cal .head{display:grid;place-items:center;min-height:auto;padding:6px 0;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;opacity:.55;pointer-events:none}

/* ============================================================================================
   A PAGE — /menu, /shop, /photos, /book, /visit, /about.

   The bands above are a home page: a taste of each thing, capped, with one way to the rest of it.
   A page is the rest. It gets no head with an exit in it, no "All 24", no second call to action —
   somebody who is standing in the menu does not need to be sold the menu.

   What Bold does with the room instead: ONE heading at the size this design saves for the hero,
   the thing itself in full underneath it, and — where the business takes bookings — a single block
   of ink at the foot. Three parts. Never four.
   ========================================================================================== */
.bold .page{display:block}
/* THE ANNOUNCEMENT. There is no hero on a page, so this is the page's opening statement and the
   only <h1> on it: the accent rail, the name of the thing, and one line if there is one. */
/**
 * …AND IT IS THE SAME BLACK THE HOME PAGE'S HEADER IS.
 *
 * The front page opens on a dark band and every other page opened on paper, so /menu, /shop and
 * /visit read as a different site from the one you arrived on. "if main header on homepage in
 * this case is black the sinlge page headers shoild also be black." The opening of a page is the
 * one band a visitor sees on every address; it is the thing that has to be the same.
 *
 * The deepest step of the palette, not a stated black — a green business gets a near-black with
 * green in it, the same one the home page's header and the footer already wear.
 */
.bold .page-head{padding:clamp(46px,7cqw,132px) 0 clamp(26px,3.4cqw,54px);
  --g:var(--c-flip);background:var(--g);color:var(--c-flip-ink)}
/* a page heading is whatever the section is called, and a section can be called one long word.
   The type is enormous, so that word is wider than a phone — it breaks rather than hangs off. */
.bold .page-head h1{font-size:clamp(44px,10cqw,168px);letter-spacing:-.05em;overflow-wrap:break-word}
.bold .page-line{margin-top:clamp(16px,1.8cqw,26px);max-width:46ch;
  font-size:clamp(16px,1.45cqw,21px);line-height:1.5}
/* the head has already made the room a band would have made — its own top padding is spent */
.bold .page > section{padding-top:0}
.bold .page > section:last-child{padding-bottom:calc(var(--band)*.75)}

/* the week, under the one sentence that answers "can I walk in" — not welded to it */
.bold .hours-list{margin-top:clamp(20px,2.6cqw,38px)}

/* THE CHIPS DO NOT STICK HERE. In a sheet they pin under the sheet's own head; on a page the head
   that would hold them is the site's navigation, which is pinned itself and sits above them — so a
   sticky filter slid underneath it and was simply gone. On a page they sit where they are read:
   once, at the top of the list. */
.bold .page-cats{position:static;top:auto;z-index:auto;background:none;box-shadow:none;
  padding:0;margin:0 0 clamp(20px,2.6cqw,38px)}

/* THE COURSES STAND APART. `.group-t:first-of-type` zeroes a group heading's top margin — and a
   group holds exactly one heading, so it zeroes every one of them and the courses run together as
   a single unbroken column of rows. On a page of forty dishes that is the whole reading problem,
   so the space belongs to the GROUP rather than to its heading. */
.bold .page-list .group + .group{margin-top:clamp(34px,4.5cqw,72px)}

/* the rest of a row — the description a band has no room for, at a width somebody can read */
.bold .row-b{margin-top:8px;max-width:70ch}
/* what cannot be bought today reads as such wherever the row is drawn, not only in a sheet */
.bold .row.gone{opacity:.5}

/* THE SHOP, WHOLE. The band is one row of cards and a rail on a phone — right for a taste, wrong
   for a catalogue: nobody swipes sideways through twenty things looking for one. Here it wraps. */
.bold .cards.page-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  display:grid;overflow:visible}
@container page (max-width:640px){
  .bold .cards.page-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .bold .cards.page-grid > *{flex:initial;margin-right:0}
}

/* EVERY PHOTOGRAPH, AS A WALL WITH A RHYTHM. The band's mosaic arranges five; a room of forty
   wants a beat instead — every sixth picture takes four times the space and the rest fill in
   around it (`dense`, so no holes are left where a big one did not fit). */
.bold .page-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  grid-auto-rows:clamp(130px,15cqw,230px);grid-auto-flow:dense;gap:var(--step)}
.bold .page-shots .img{height:100%}
.bold .page-shots .img:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
@container page (max-width:640px){
  .bold .page-shots{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(110px,30cqw,170px);gap:6px}
}
/* one photograph above a story: the ground the writing is read against */
.bold .page-shot .img{border-radius:calc(var(--r)*1.4)}


/* THE ONE ACTION. A block of ink, the way the invitation band is — the same component, because it
   is the same moment: the page has been read, and this is what to do about it. */
.bold .page > section.page-foot{padding-bottom:clamp(40px,6cqw,120px)}
.bold .page-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3cqw,40px)}

/* ============================================================================================
   BOLD — the whole theme, now.

   Two tables and nothing else: these tokens, and the arrangement picks in theme.js. There is not
   one component rule in this file. A theme that restyles a row is a theme with its own row, and
   five of those drifting apart is what made a page rounded at the top and square underneath.
   ========================================================================================== */
/**
 * THE SHEET LAYER IS PAINTED BY THE THEME TOO.
 *
 * `#design-sheets` is a SIBLING of the page, not a child, so a token block written for
 * `#clay-page` alone reaches nothing inside a sheet. Every one of them fell all the way back to
 * the defaults in parts.css: Clay's own orange for the accent, white paper, system fonts, square
 * corners. Every basket, every product, every sign-in on every site has been drawn in our paint
 * rather than the business's, and the report was "the accent colour is Clay's, not the theme's".
 *
 * Both hosts, on every rule that DECLARES a token. There is a test.
 */
:is(#clay-page,#design-sheets).bold{
  --c-paper:#ffffff;
  --c-ink:#0d0d0f;
  /**
   * ── THE GRADE: WARM, AND A LITTLE HAZY ────────────────────────────────────────────────────
   *
   * Golden-hour film. Warm without going brown, soft without going flat, and the colour is still
   * colour — the greens are green and the oranges are orange, they are simply lit later in the day
   * than they were shot.
   *
   * IT TOOK THREE GOES AND BOTH ENDS WERE WRONG. The first read the brief literally — sepia .55,
   * contrast .88, a 44% warm screen — and produced a flat brown postcard: sepia at that strength
   * takes the hue out of everything and the screen fogs what is left. The second went the other
   * way to a direct-flash look, saturation and contrast both above one, which is clean and punchy
   * and nothing like the reference: "to me this doesnt look like each other.. little grain.. old
   * school style.. little fade."
   *
   * This is the middle, chosen against the real photograph rather than argued: enough sepia to
   * warm the whites and not enough to flatten a hue, saturation slightly up so what survives is
   * rich, contrast slightly UNDER one with brightness slightly over it — which is the fade — and
   * grain you can see.
   *
   * THREE LAYERS, because a filter alone cannot do the last two (see `--c-photo-*` in parts.css):
   * the CURVE above, a WASH that warms the shadows without fogging the highlights, and the GRAIN —
   * fractal noise at a fixed 140px, so it stays grain at any size rather than becoming a pattern.
   */
  --c-photo:sepia(.3) saturate(1.2) hue-rotate(-8deg) contrast(.92) brightness(1.04);
  /* A WASH THAT WARMS AND DOES NOT FOG. The first pass screened a mid warm at 44% and the page
     went pale and brown; this is a dark warm at two thirds of that, so a highlight barely moves
     and a shadow loses the last of its blue. */
  --c-photo-wash:linear-gradient(178deg,
    color-mix(in srgb, #9e5c26 30%, transparent),
    color-mix(in srgb, #4a2a16 22%, transparent));
  --c-photo-wash-blend:screen;
  --c-photo-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --c-photo-grain-size:140px 140px;
  --c-photo-grain-blend:overlay;
  --c-photo-grain-op:.22;
  --c-accent:var(--accent,#C87F5E);
  /**
   * THE ACCENT AS A GROUND IS THE ACCENT AT ITS RICH STEP — in light too, not only in dark.
   *
   * Dark mode has taken it to `--c-a-700` since it existed, "the accent taken down into the room
   * instead of a floodlight in it". Light mode was the raw colour, and the raw colour is where a
   * mid-tone accent lands on the wrong side of the line: a business whose green is #00A63A got a
   * band and a bar button at oklch l .63, which derives BLACK type at 5.95:1 — measurably correct
   * and the reason for "for this accent color the text in main bar button should be white no?".
   *
   * At `--c-a-600` the same green is l .56: white type, at 4.61:1, which is the answer the card
   * wanted and one that passes AA rather than one that looks better and fails it. A pale accent is
   * untouched in effect — 82% of a yellow is still a yellow and still carries black — and a dark
   * one barely moves, so this is a change to exactly the colours that were on the wrong side.
   *
   * The bar button follows it, because the two are one token now (`--c-act-bar-bg` in parts.css).
   */
  --c-band-accent:var(--c-a-600);
  /**
   * …AND EVERY BUTTON ON THE SITE IS THAT SAME COLOUR.
   *
   * `--c-act-bg` defaults to `--c-ink`, which on paper is a near-black button and in DARK MODE is
   * a near-WHITE one: the site's one action, on the darkest page this theme draws, came out as the
   * brightest neutral object on it and not the business's colour at all. "main buttons are not the
   * accent color.. even if its dark mode it shuld i believe?"
   *
   * The bar button has been the accent since the note above; this makes the other two agree, so
   * there is ONE button colour on the whole site rather than a bar that is theirs and a page that
   * is ours. Same token, so the reasoning above — `--c-a-600` rather than the raw colour, because
   * a mid-tone accent lands on the wrong side of the contrast line — covers all three at once,
   * and `--c-act-ink` is still derived from whatever comes out.
   */
  /* …AND IT IS THE COLOUR THEY PICKED, not a step down from it.
   *
   * It read `--c-band-accent`, which on this theme is `--c-a-600` — 82% of the accent over black.
   * A whole BAND of a colour needs taking down like that, because a heading has to sit on it; a
   * BUTTON is a small object and the owner's own colour is what belongs on it. An owner choosing a
   * bright mint got a mid green and could see the difference against the swatch two inches away:
   * "not sure if this is on purpose.. but the button doesnt really seem the color of the accent".
   *
   * Nothing is risked by it. `--c-act-bg-safe` still holds the result off the paper — a ceiling on
   * a light page, a floor on a dark one — and `--c-act-ink` is still derived from whatever comes
   * out of that, so the words on the button are readable at every lightness the owner can reach.
   * The step existed BEFORE either of those did.
   *
   * The bar button is set with it, because there is one button colour on this site. */
  --c-act-bg:var(--c-accent);
  --c-act-bar-bg:var(--c-accent);
  /**
   * …AND A FILLED CARD IS THE BLACK, NOT THE BUTTON'S COLOUR.
   *
   * A button is a small object and the accent is right on it. The ways-in cards and the people
   * cards are BIG — three or five slabs across the page — and painted the same colour they turn a
   * type-first design into a colour-first one: "these cards also black", "make all these team
   * cards black so its inline with the rest of the theme". Same room as every other break on this
   * theme, so the page stays black · white · black with one accent in it.
   */
  --c-block-bg:var(--c-flip);

  --c-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  --c-body:"Inter",system-ui,sans-serif;
  --c-weight:800;                       /* bold is a type-first design: everything is heavy */
  --c-case:uppercase;
  --c-track:-.03em;
  /**
   * AND THE SMALL TRACKED CAPITALS ARE BOLD'S TOO.
   *
   * The label role — every eyebrow, every overline, the crumb, the fine print above a fact —
   * defaults to the READING face at weight 600. This file's own chrome has always set its labels
   * in the display face at 800 (see `.bold .tag`, `.bold .k-lbl`), so the eyebrow the library
   * draws was the one small-caps line on the page in a different typeface and a lighter weight
   * than the ones beside it. The token existed; nobody was ever asked.
   */
  --c-label:var(--c-display);
  --c-label-weight:800;
  --c-label-track:.14em;                /* the display face is tighter than Inter at 12px */

  /**
   * THE BANDS ARE SET IN BOLD'S OWN TYPE, not one step above the default.
   *
   * This file's own chrome runs an h2 to 124px in a 1520px wrap, and the bands the model draws —
   * which is the whole page — were capped at 52px in a 1180px column. The result read as a
   * different, quieter design wearing Bold's navigation: the headings were the one thing this
   * design is FOR and they were the one thing it had left at the default.
   */
  --c-base:16px;
  --c-ratio:1.42;      /* bold shouts: a big jump between every step */

  --c-u:8px;
  --c-density:1.1;
  --c-r:0px;                            /* square, everywhere, including the booking form */
  --c-bw:1px;
  --c-measure:1400px;
  /* AIR IS PART OF THE TYPE. A 76px heading in a band padded like a 44px one is a heading in a
     box; the space above and below is what makes it read as deliberate rather than cramped. */
  --c-rhythm:clamp(54px,7.2cqw,132px);
  --c-bar:64px;
}
#clay-page.bold .c-tall{min-height:min(78svh,760px);display:flex;align-items:flex-end}

/* dark paper is above, with the rest of dark — it was a `.mode-dark` class nothing ever added */
/**
 * …AND THE GROUND BEHIND THE PAGE.
 *
 * The document's own background is `var(--paper)`, and this design's dark answer is scoped to the
 * page (so it cannot repaint the editor's chrome) — which left a white strip under a short page
 * and a white flash when a phone overscrolls a dark site. The BODY is the one thing outside the
 * page that has to agree with it, so it is answered by name rather than by a token, and nothing
 * else at the document level moves.
 */
:root[data-mode="dark"]{color-scheme:dark;background:#0b0b0d}
:root[data-mode="dark"] body{background:#0b0b0d;color:#f5f2ee}

/* ══ reviews/deck ══ a hand of equal-height cards, overlapping ═════════════════════════════════
 *
 * This theme's own drawing — see bold/shapes.js. The one it replaces rotated every quotation by a
 * different angle and let each find its own height, and the row came out ragged: "in the example i
 * send it was all the same height cards.. it just looked a bit if they where overlapping..
 * playfull". So the geometry is three decisions and no tilt at all.
 *
 *   ONE HEIGHT — a single grid row, cards stretched, the longest quotation sets all of them.
 *   THEY OVERLAP — a fixed pull to the left, so it reads the same with three cards or with six,
 *                  and the FIRST card is on top: the order a hand is laid out in.
 *   THEY STEP — by transform, never by margin. A margin would take the stepped card out of the
 *               row's height and make it shorter, which is the ragged row again by another route.
 */
/**
 * ── A REVIEW IS A BLACK CARD ──────────────────────────────────────────────────────────────────
 *
 * The quotations sat on `--c-fill` — a tint of the page's paper — so on the reviews band, whose
 * ground is already the deepest step of the palette, they were pale rectangles on black: the
 * lightest thing on the darkest band, and the proof read as a form rather than as praise. "make
 * review cards black.. wiht white text and stars in accent color."
 *
 * The deepest step, the near-white ink, and the score in the business's own colour — which is the
 * one place on the card where a colour means something: it is the number people came for.
 *
 * `--c-quote-ink` is DERIVED from the ground a few hundred lines up in parts.css, so stating the
 * ground is the whole of it and the contrast is measured rather than chosen.
 */
/**
 * …AND IT IS THE OPPOSITE OF WHATEVER IT STANDS ON, which `--c-a-950` was not.
 *
 * The deepest step is a fixed dark — it is a mix with black, and it does not move when the page
 * does. So a review card was black on WHITE paper (right, and what the card above asked for) and
 * black on a black band (the reviews band is the contrast room, and in dark mode the paper is that
 * same deepest step) — the card vanished and the proof read as loose text on a void: "+ layout i
 * guess.. reviews should always be cards.. even if black mode.. use the grey or slighly less dark
 * color the dark mode uses".
 *
 * Two grounds, one rule: the card is the theme's contrast room, and on a band that IS the contrast
 * room it is the paper. In light that is a black card on the page and a white one on the dark
 * band; in dark it is the lifted grey on the page and the deeper black on the lifted band. Every
 * combination is a card you can see, and `--c-quote-ink` is derived from the ground so the words
 * follow it without being stated.
 */
:is(#clay-page,#design-sheets).bold{
  --c-quote-bg:var(--c-flip);
  --c-quote-bw:0px}
/* …AND ON A BAND THAT IS ALREADY THE CONTRAST ROOM, one step further from it — never back
   towards it. On a light page that step is the paper, and a row of white cards on the black proof
   band is this design saying what it always says. In the dark it is the step ABOVE the lifted
   dark, because that is the direction the card asked for in words: "use the grey or slighly less
   dark color the dark mode uses". */
:is(#clay-page,#design-sheets).bold .c-g-ink{--c-quote-bg:var(--c-paper)}
:is(#clay-page,#design-sheets).bold[data-mode="dark"] .c-g-ink,
:root[data-mode="dark"] :is(#clay-page,#design-sheets).bold .c-g-ink{--c-quote-bg:var(--c-a-800)}
/* THE SCORE IN THE ACCENT — the lit stars only. An unlit star stays the card's own ink at the
   opacity parts.css gives it, or a five-star rating and a three-star one look the same. */
#clay-page.bold .c-quote .c-star-on,
#clay-page.bold .c-quote .c-star-half,
#design-sheets.bold .c-quote .c-star-on,
#design-sheets.bold .c-quote .c-star-half{color:var(--c-accent)}

/**
 * ── REVIEWS AS TWO DRIFTING ROWS — `reviews/rows` ──────────────────────────────────────────
 *
 * This theme's own drawing — see bold/shapes.js. The one it replaces laid the quotations out as an
 * overlapping hand of cards and was judged with two photographs, one marked "so like this" and
 * one "not like this": "i want the review cards different.. that they basically move around in 2
 * lines".
 *
 * The geometry is three decisions:
 *
 *   THE ROW IS TWICE ITS OWN CONTENT and slides by exactly half its width, so the loop lands where
 *   it started and there is no jump. Half, not a pixel count — it works with three cards or with
 *   twelve and there is no number in here that has to be kept in step with the drawing.
 *
 *   THE TWO ROWS GO OPPOSITE WAYS. `--c-dir` is 1 on the first and -1 on the second, and one
 *   animation reads it. Two rows moving the same way are one thick row.
 *
 *   IT STOPS WHEN YOU POINT AT IT. A moving quotation is a quotation nobody can finish reading.
 *
 * NOTHING MOVES for somebody who asked their machine for less motion, or on a phone — there the
 * row is a rail you push, with snap points, which is what it always should have been.
 */
#clay-page.bold .l-rev-mq,
#design-sheets.bold .l-rev-mq{display:grid;gap:var(--c-gap);
  margin-block-start:calc(var(--c-u)*4);
  /* the rows run past the page's own column on both sides — that is what makes it a wall rather
     than two lists. HALF a gutter back on each side, because that is all there is: `--c-page` is
     `100% - var(--c-gut)` TOTAL, so the column sits half a gutter in on each edge. A whole gutter
     back put the wall 10px past the screen on a phone, and `overflow:hidden` cuts the CHILDREN,
     not the box — so the document grew and a white strip appeared down the right of every page. */
  margin-inline:calc(var(--c-gut) / -2);
  /* …AND WHAT LEAVES THE COLUMN IS CUT AT THE SCREEN, not at the document: a row wider than the
     page is a horizontal scrollbar on every page of the site otherwise. */
  overflow:hidden;
  /**
   * …AND IT IS CUT SOFTLY. A drifting row chopped square by the edge of the screen reads as a
   * layout that has overflowed, not as a wall that carries on: a quotation is half a word wide at
   * the moment it leaves. "reviews still dont appear and disapear in the side of the screen.. come
   * on" — twice now.
   *
   * A mask, not a pair of gradient overlays: an overlay has to be painted in the room's own colour
   * and the wall sits on four different grounds (paper, ink, accent, photo), so it would be wrong
   * on three of them. A mask takes the pixels away and whatever is behind shows through, which is
   * right on every ground and needs no token.
   *
   * The fade is a PROPORTION with a floor and a ceiling — about a third of a card at every width,
   * so a phone does not lose half its quotation and a wide desk does not get a fade you cannot see.
   */
  --l-rev-fade:clamp(1.5rem, 6%, 6rem);
  -webkit-mask-image:linear-gradient(to right, transparent 0,
    #000 var(--l-rev-fade), #000 calc(100% - var(--l-rev-fade)), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0,
    #000 var(--l-rev-fade), #000 calc(100% - var(--l-rev-fade)), transparent 100%)}
#clay-page.bold .l-rev-mq-r,
#design-sheets.bold .l-rev-mq-r{display:flex;width:max-content;
  animation:bold-rev-mq 42s linear infinite}
/* THE DIRECTION, said the one way CSS can say it. A custom property cannot be read as a keyword,
   and a negative duration is not a thing — so the second row runs the same keyframes in reverse,
   matched on the value the drawing wrote. */
#clay-page.bold .l-rev-mq-r[style*="--c-dir:-1"],
#design-sheets.bold .l-rev-mq-r[style*="--c-dir:-1"]{animation-direction:reverse}
#clay-page.bold .l-rev-mq-t,
#design-sheets.bold .l-rev-mq-t{display:flex;gap:var(--c-gap);padding-inline-end:var(--c-gap)}
#clay-page.bold .l-rev-mq-c,
#design-sheets.bold .l-rev-mq-c{flex:0 0 auto;width:min(24rem,78vw);display:flex}
#clay-page.bold .l-rev-mq-c .c-quote,
#design-sheets.bold .l-rev-mq-c .c-quote{margin:0;width:100%;display:flex;flex-direction:column}
/* THE NAME SITS ON THE FLOOR OF ITS CARD. Cards of one height with the name straight under the
   words put every name at a different height, which is a ragged row wearing a tidy shape. */
#clay-page.bold .l-rev-mq-c .c-quote figcaption,
#design-sheets.bold .l-rev-mq-c .c-quote figcaption{margin-block-start:auto;
  padding-block-start:calc(var(--c-u)*3)}
@keyframes bold-rev-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* A MOVING QUOTATION IS ONE NOBODY CAN FINISH READING. */
@media (hover: hover){
  #clay-page.bold .l-rev-mq:hover .l-rev-mq-r,
  #design-sheets.bold .l-rev-mq:hover .l-rev-mq-r{animation-play-state:paused}
}
/**
 * THE PHONE IS A DIFFERENT DRAWING, and so is a machine that asked for less motion.
 *
 * Nothing drifts. The row is a rail you push, the second copy of the cards is taken out of it
 * entirely — a rail you can reach the end of should not have every review in it twice — and the
 * cards snap.
 */
@media (prefers-reduced-motion: reduce){
  /* NOTHING DRIFTS, SO NOTHING LEAVES. The fade says "this carries on past the edge"; on a rail
     somebody pushes, the edge is where they have got to and dimming it is dimming the thing they
     are reading. */
  #clay-page.bold .l-rev-mq,
  #design-sheets.bold .l-rev-mq{-webkit-mask-image:none;mask-image:none}
  #clay-page.bold .l-rev-mq-r,
  #design-sheets.bold .l-rev-mq-r{animation:none;overflow-x:auto;width:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none}
  #clay-page.bold .l-rev-mq-r > [aria-hidden],
  #design-sheets.bold .l-rev-mq-r > [aria-hidden]{display:none}
  #clay-page.bold .l-rev-mq-c,
  #design-sheets.bold .l-rev-mq-c{scroll-snap-align:start}
}
/**
 * …AND ON A PHONE IT IS ONE ROW, not two.
 *
 * Two rails of 80%-wide cards stacked is most of a phone screen spent on four quotations, and the
 * second row is a thing you have to notice pushes on its own. "for mobile make this one row of
 * cards.."
 *
 * The MARKUP does not change — a drawing is one drawing — so the two rows are collapsed with
 * `display:contents` and the wall itself becomes the rail. Document order after the collapse is
 * the alternating split read out (1·3·5·2·4·6), so `order:var(--c-i)` puts the owner's own
 * ranking back; `--c-i` is written by the drawing for exactly this.
 */
@container page (max-width:760px){
  #clay-page.bold .l-rev-mq,
  #design-sheets.bold .l-rev-mq{display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    /* the leading edge lines the first quotation up with the heading; the trailing edge is not an
       edge, it is where the rail continues — see the rail rule in parts.css */
    padding-inline:calc(var(--c-gut) / 2) 0;
    /* …and the SNAP has to know about that padding, or `scroll-snap-align:start` parks the first
       card against the box edge and scrolls the leading gutter away — a rail that opens ten pixels
       along, hard against the screen. */
    scroll-padding-inline-start:calc(var(--c-gut) / 2);
    /* AND NO FADE, for the same reason as reduced motion: this is a rail somebody pushes, so the
       leading edge is where they have got to and the drawing above deliberately lines it up with
       the heading. Dimming it dims the quotation they are reading. */
    -webkit-mask-image:none;mask-image:none}
  #clay-page.bold .l-rev-mq::-webkit-scrollbar,
  #design-sheets.bold .l-rev-mq::-webkit-scrollbar{display:none}
  #clay-page.bold .l-rev-mq-r,
  #design-sheets.bold .l-rev-mq-r,
  #clay-page.bold .l-rev-mq-t,
  #design-sheets.bold .l-rev-mq-t{display:contents}
  /* a rail you can reach the end of should not hold every review twice */
  #clay-page.bold .l-rev-mq [aria-hidden],
  #design-sheets.bold .l-rev-mq [aria-hidden]{display:none}
  #clay-page.bold .l-rev-mq-c,
  #design-sheets.bold .l-rev-mq-c{scroll-snap-align:start;width:min(80cqw,22rem);
    order:var(--c-i, 0)}
}

/**
 * ── AN OUTLINED BUTTON FILLS WHEN YOU POINT AT IT ─────────────────────────────────────────────
 *
 * Bold is a poster: hard edges, blocks of flat colour, nothing soft. The honest hover for an
 * outlined block in that language is that it BECOMES the block — the ring fills, the words flip to
 * the paper, and it presses down two pixels like everything else on this theme.
 *
 * It had none. The theme states no button shadow, so `press` had nothing to shorten and the only
 * feedback was the two-pixel shift — which on a button that is already just an outline reads as
 * nothing at all. Raised as "hover state of this type of button doesnt work.. see whats best for
 * bold".
 *
 * The same pair the filled button already uses, so it is measured: `--c-act-bg-safe` is the
 * accent held apart from the paper, and `--c-act-ink` is derived from it. Nothing new to check.
 *
 * INSIDE THE TWO GUARDS, like every other hover on this site — a phone has no pointer, and
 * somebody who asked for less motion has asked.
 */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  :is(#clay-page,#design-sheets).bold .c-act.c-quiet:hover{
    background:var(--c-act-bg-safe);
    color:var(--c-act-ink);
    box-shadow:inset 0 0 0 calc(var(--c-bw)*2) var(--c-act-bg-safe)}
}

/**
 * ── THE QUESTIONS PAGE: A RAIL AND A PANEL ─────────────────────────────────────────────────────
 *
 * `asksPage/rail` in shapes.js draws it; this is what it looks like. The features down the left,
 * one set of answers on the right — "So left the features that have faq's and when selected it
 * shows on the right."
 *
 * NOTHING IN HERE IS A CONTROL. The rail is the same `data-cats` strip the menu page's courses
 * are, so what a tap DOES is already bound in the shared client; this only decides where the two
 * halves sit and which of them is loud.
 */
:is(#clay-page,#design-sheets).bold .l-faqp{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:calc(var(--c-gap)*1.5);align-items:start}
/* ONE GROUP IS NOT A RAIL — the questions take the width, and there is nothing beside them */
:is(#clay-page,#design-sheets).bold .l-faqp-solo{grid-template-columns:minmax(0,1fr)}
:is(#clay-page,#design-sheets).bold .l-faqp-rail{
  display:grid;align-content:start;gap:calc(var(--c-u)*.5);position:sticky;
  top:calc(var(--c-bar) + var(--c-u)*3)}
/* A TAB IS A WORD, and the one you are reading is the only one at full strength. The rule under it
   is the accent, which is the one place this design lets a colour say "here". */
:is(#clay-page,#design-sheets).bold .l-faqp-tab{
  font:var(--c-t2)/1.4 var(--c-body);text-align:left;color:var(--c-soft);
  background:none;border:0;border-bottom:var(--c-bw) solid transparent;cursor:pointer;
  padding:calc(var(--c-u)*1.25) 0;text-transform:none;letter-spacing:0}
:is(#clay-page,#design-sheets).bold .l-faqp-tab.c-on{
  color:var(--c-ink);border-bottom-color:var(--c-accent)}
/* THE HEADING OVER A SET IS FOR THE PHONE. On the wide drawing the tab beside it already says
   which feature these are, and a heading repeating it is the same word twice on one line. */
:is(#clay-page,#design-sheets).bold .l-faqp-h{display:none}
:is(#clay-page,#design-sheets).bold .l-faqp-set[hidden]{display:none}

/**
 * THE PHONE IS A DIFFERENT DRAWING, not a narrower one.
 *
 * There is no room for a column of features beside anything, so the rail becomes a strip that
 * scrolls across the top and each set says its own name again — because by the time the answers
 * are on the screen the rail has gone off the top of it.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets).bold .l-faqp{grid-template-columns:minmax(0,1fr);
    gap:calc(var(--c-u)*3)}
  :is(#clay-page,#design-sheets).bold .l-faqp-rail{
    position:static;grid-auto-flow:column;grid-auto-columns:max-content;
    gap:calc(var(--c-u)*2);overflow-x:auto;overscroll-behavior-inline:contain}
  :is(#clay-page,#design-sheets).bold .l-faqp-h{
    display:block;margin:0 0 calc(var(--c-u)*1.5);
    font:var(--c-label-weight) var(--c-t0)/1 var(--c-display);
    letter-spacing:.12em;text-transform:uppercase;color:var(--c-soft)}
}