/* 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. */
  --photo-filter:saturate(.88) contrast(1.2) brightness(.96) hue-rotate(-4deg);
  --map-filter:saturate(.9);
}
:root[data-photos="raw"]{--photo-filter:none}
/**
 * DARK IS NOT A SECOND THEME. It is the same design with --ink and --paper swapped: every tint,
 * line, button and surface is mixed from them, so nothing else has to be restated.
 *
 * 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}
.bold .img{background:var(--fill);border-radius:var(--r);overflow:hidden;position:relative}
/* AN EMPTY FRAME IS A DECISION, NOT A HOLE. A site is generated before anybody has uploaded
   anything, and half of them stay that way for weeks — so this is a state the design has to mean,
   not one it falls into. A flat panel and a hairline: no pattern, no icon, no "add an image here".
   It had an accent rule across the bottom corner and that was the wrong instinct — a bright stub
   in the corner of an empty box reads as something that failed to load, not as a decision.
   Restraint reads as intentional; anything added to an empty frame reads as a missing file. */
.bold .img:empty{background:var(--fill);border:1px solid var(--line)}
.bold .img img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--photo-filter)}
/**
 * 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 .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. */
.bold .page-head{padding:clamp(46px,7cqw,132px) 0 clamp(26px,3.4cqw,54px)}
/* 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;
  --c-accent:var(--accent,#C87F5E);

  --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}