/* ============================================================================================
   THE PARTS — one stylesheet, every site, every theme.

   A theme sets the TOKENS below and nothing else. It does not restyle a row, a card or a field:
   if it did, we would be back to five implementations of the same thing drifting apart, which is
   what made a page rounded at the top and square underneath.

   Everything here is written in tokens. There is no pixel value in a component rule that is not
   derived from `--c-u`, the type scale, or the radius. That is the rule that makes the whole site
   feel composed rather than assembled.

   TWO HOSTS, ONE STYLESHEET. Every rule is `:is(#clay-page,#design-sheets)`, because the overlays
   are a SIBLING of the page, not a child of it. Written for the page alone — which is how this
   file started — the basket, a product and the photo viewer got no tokens and no components at
   all: the way out came out as a bordered link, the two-column basket stacked, and the whole
   overlay looked like a stylesheet had failed to load, which is exactly what had happened.
   Nothing about a sheet is a different design, so nothing about it is a second stylesheet.
   ========================================================================================== */

/**
 * EVERY BOX IS A BORDER BOX — and this was missing, which is the most expensive single line in
 * this stylesheet.
 *
 * Without it a card is `content-box`: its padding and its border sit OUTSIDE the width and height
 * the layout gave it. A card with 20px of padding and a 5px border renders 50px taller than the
 * grid track holding it, so on a phone the third way-in overlapped the first — and every column
 * sum, every `minmax`, every `100% - gap` in this file was quietly out by the same amount.
 *
 * It looks like a dozen unrelated layout faults, which is exactly how it was reported. It is one.
 *
 * Scoped to our two hosts like everything else here, so it cannot reach the editor's own chrome.
 */
:is(#clay-page,#design-sheets),
:is(#clay-page,#design-sheets) *,
:is(#clay-page,#design-sheets) *::before,
:is(#clay-page,#design-sheets) *::after{box-sizing:border-box}

/**
 * THE SHEET HOST IS NOT A SURFACE.
 *
 * `#design-sheets` is where the basket, the product, the booking walk and the photo viewer are
 * drawn. It carries the theme's class so those sheets inherit the palette — and a theme paints its
 * own class (`.bold{background:var(--paper)}`), so the HOST was painted the colour of the page.
 *
 * At full width that was invisible: the host is `position:static` with nothing in it, so it has no
 * box to paint. In the editor's phone and tablet preview it becomes `position:fixed; inset:0` with
 * the frame's width — and an opaque slab the size of the frame went over the top of the site.
 * Reported as "preview mode mobile & tablet is now just a whitescreen", and it was: the whole
 * preview was one flat rectangle of the theme's paper with the page behind it.
 *
 * The sheets paint themselves (`.sheet`), and so does the veil behind them. The host paints
 * nothing, at every width, which is what it always meant to do. An ID outranks the theme's class,
 * so this holds without a theme having to know about it.
 */
#design-sheets{background:none}

:is(#clay-page,#design-sheets){
  /* ── ink and ground ───────────────────────────────────────────────────────────────────── */
  --c-paper:#ffffff;
  --g:var(--c-paper);            /* what I am sitting on */
  --c-ink:#0d0d0f;
  --c-faint:var(--c-soft);
  --c-accent:#C87F5E;
  --c-on:#ffffff;                       /* what sits on the accent — see below, it is derived */

  /**
   * ── THE ACCENT'S OWN PALETTE ── one hue, eleven steps, and every dark thing on the page is one
   * of them.
   *
   * A theme needs more than an accent: it needs the room the accent lives in. Before this there
   * were SIX different near-blacks between the two themes — `#0b0b0d`, `#191920`, `#0d0d0f`,
   * `#141210`, `#241E18`, `#151515` — each hand-picked, none related to the business's colour and
   * none related to each other. A footer, a contrast band and a photo scrim on the same site were
   * three unrelated dark greys, and the accent sat on top of them looking like it had been dropped
   * in from somewhere else.
   *
   * So: mix the accent toward white for the light end and toward BLACK for the dark end. Mixing
   * toward black drops the chroma as it drops the lightness, which is exactly what a near-black
   * wants to be — a very dark version of their colour rather than a dark version of their colour,
   * which would be a neon in a dark room.
   *
   * NOT A NEW DECISION PER THEME. A theme names a step; it does not mix its own. What it may still
   * do is choose WHICH step — a light theme's contrast band is 950, a dark theme's is 900, because
   * the same darkness reads differently depending on what it is next to.
   *
   * `color-mix` rather than `oklch(from …)`: it needs no `@supports` guard, and toward black the
   * two are indistinguishable at these strengths.
   */
  --c-a-50: color-mix(in oklab, var(--c-accent)  6%, #fff);
  --c-a-100:color-mix(in oklab, var(--c-accent) 12%, #fff);
  --c-a-200:color-mix(in oklab, var(--c-accent) 22%, #fff);
  --c-a-300:color-mix(in oklab, var(--c-accent) 40%, #fff);
  --c-a-400:color-mix(in oklab, var(--c-accent) 68%, #fff);
  --c-a-500:var(--c-accent);
  --c-a-600:color-mix(in oklab, var(--c-accent) 82%, #000);
  --c-a-700:color-mix(in oklab, var(--c-accent) 62%, #000);
  --c-a-800:color-mix(in oklab, var(--c-accent) 42%, #000);
  /**
   * …AND THE TWO DEEPEST STEPS ARE A DARK PAGE, NOT A COLOURED ONE.
   *
   * On a dark site `--c-paper` IS `--c-a-950`, so this mix is the whole page. A restrained accent
   * tints it the way it should — that is the point of mixing at all — but a SATURATED one dyes it:
   * a business whose colour is `#23FF86` got a page of dark green, top to bottom, and said in as
   * many words "this to me is not dark mode". The proportion was not the problem; 15% of a neon is
   * still a neon.
   *
   * So the HUE carries and the CHROMA is capped. The page keeps the business's cast — warm, cool,
   * green-ish — and can never become their colour, whatever they pick. The plain mix stays as the
   * fallback for a browser without relative colour syntax, where a slight over-tint is the safer
   * failure.
   */
  --c-a-900:color-mix(in oklab, var(--c-accent) 26%, #000);
  --c-a-950:color-mix(in oklab, var(--c-accent) 15%, #000);
  @supports (color: oklch(from #000 l c h)) {
    --c-a-900:oklch(from color-mix(in oklab, var(--c-accent) 26%, #000) l min(c, .022) h);
    --c-a-950:oklch(from color-mix(in oklab, var(--c-accent) 15%, #000) l min(c, .016) h);
  }

  /**
   * THE NEUTRALS CARRY THE BRAND — this is the one number that decides how much.
   *
   * Every grey on the page was mixed from ink and paper alone, so two businesses with two very
   * different colours got the same rules, the same tints and the same grey text: the accent showed
   * up on a button and nowhere else, and a site read as our design with their colour dropped into
   * it. A brand is not one button.
   *
   * So every neutral is pulled a little way toward the accent. A LITTLE: the rule under a heading
   * is still a rule, the body text is still readable, and nothing here is the accent itself — it
   * is the accent's shadow in the greys, which is what makes a page look like it was made for one
   * business rather than tinted after the fact.
   *
   * One token, so a theme that wants more of it or none of it says so once, and a dark page can
   * carry more than a light one (a dark ground takes colour without losing contrast).
   */
  --c-brand:7%;                         /* how much of the accent is in the neutrals */
  /* TEXT TAKES LESS OF IT THAN A SURFACE DOES, and it is measured rather than guessed: the
     surfaces lift toward the accent and the secondary text is pulled toward it, so at equal
     strength the two close on each other and a line under a heading drops below AA. A quarter,
     and a little more ink in it, keeps every secondary line over 4.5:1 in both modes. */
  --c-soft:color-mix(in oklab, var(--c-accent) calc(var(--c-brand) / 4),
                     color-mix(in oklab, var(--c-ink) 66%, var(--c-paper)));
  --c-line:color-mix(in oklab, var(--c-accent) var(--c-brand),
                     color-mix(in oklab, var(--c-ink) 14%, var(--c-paper)));
  --c-fill:color-mix(in oklab, var(--c-accent) var(--c-brand),
                     color-mix(in oklab, var(--c-ink) 5%, var(--c-paper)));
  /**
   * THE FILL AS A GROUND — the same colour, and it has to be a SECOND token.
   *
   * `--c-fill` is redefined on every band (see the ground-aware block below), because a box drawn
   * inside a dark band must be a lifted dark rather than the pale one mixed for the page. But the
   * `fill` GROUND is `--g: var(--c-fill)`, and a `--c-fill` derived from `--g` makes those two
   * definitions a cycle: the browser throws both away, the band paints no background at all, and
   * the ink derived from the missing ground falls back to the page's — near-white text on a cream
   * page. Every `c-g-fill` band on every site, invisible.
   *
   * So the ground reads THIS, which is stated once here and never derived from a ground.
   */
  --c-ground-fill:color-mix(in oklab, var(--c-accent) var(--c-brand),
                            color-mix(in oklab, var(--c-ink) 5%, var(--c-paper)));

  /**
   * THE TWO GROUNDS THAT ARE NOT PAPER — named, so a dark page can answer them differently.
   *
   * `ink` and `accent` used to BE `--c-ink` and `--c-accent`, which is right on paper and wrong in
   * the dark: a dark page's ink is nearly white, so the one band meant to be the darkest thing on
   * the page came out as the only white one on it. And a full-strength accent that is a warm
   * ground under black type on paper is a floodlight in a dark room.
   *
   * So both are tokens of their own. A light theme leaves them exactly as they were; a dark one
   * answers "the contrast band is a LIFTED dark" and "the accent band is a DEEPER accent", and
   * every band on the page is dark, which is the whole of what dark mode means.
   */
  /* THE DEEPEST STEP, not the ink. The contrast band and the footer were `--c-ink` — a neutral
     near-black nobody chose — beside an accent band of the business's colour. Same hue now. */
  --c-flip:var(--c-a-950);              /* the contrast band's ground */
  --c-flip-ink:var(--c-paper);          /* and what is written on it */
  --c-band-accent:var(--c-accent);      /* the accent AS A GROUND — a whole band of it */
  --c-band-accent-safe:var(--c-band-accent);   /* …the same, held apart from the paper — see above */
  --c-on-band:var(--c-on);              /* and what is written on that */
  /**
   * THE ACCENT AS INK — a link, a live figure, a hover, set IN the business's colour on the room.
   *
   * `--c-act-bg-safe` holds the accent apart from the paper for a BUTTON, where the words on it
   * are derived from the button. Text has no such second chance: it is the colour, straight on the
   * band, and a business whose accent is a deep maroon had "Call ›" and "WhatsApp ›" written in
   * near-black on a near-black page. Reported as "again the contrast doesnt work here", with a
   * photograph of two links nobody could read.
   *
   * TEXT NEEDS MORE THAN A BUTTON DOES — 4.5:1 rather than 3:1 — so the floors are further from
   * the middle than the button's .55: .46 in light and .74 in dark. Hue and chroma untouched, so a
   * maroon stays a maroon and only stops being as deep as the paper it is written on.
   */
  --c-accent-ink:var(--c-accent);

  /**
   * THE GRADE EVERY PHOTOGRAPH TAKES — the one answer that repairs a bad picture.
   *
   * Most owners upload a badly-lit photograph of their room, and no arrangement fixes that. A
   * grade does: black and white hides a colour cast, a warm low-key curve makes an ordinary
   * candlelit shot look intentional. It was `saturate(1.05)`, hard-coded, on photo GROUNDS only —
   * so every theme got the same taste and no theme could have its own.
   *
   * `none` is the default and a real answer: a theme that wants the owner's photograph exactly as
   * they took it says nothing. One token, applied to every photograph the page draws — a card, a
   * strip, a hero — because a grade that applies to half of them is worse than no grade at all.
   */
  --c-photo:none;
  /* THE ACCENT DOES NOT TOUCH PHOTOGRAPHS. It tinted every picture toward the owner's colour,
     which is a lovely idea and looks terrible the moment somebody picks green, blue or yellow —
     and it painted a coloured wash over any picture that failed to load, since a broken <img> is
     still an <img>. A grade is the DESIGNER's decision and it is the same for every business:
     black and white, warm, cool, or nothing. It all lives in `--c-photo` above. */
  /* how dark it gets under the type on a photo band, top and bottom */
  /* with the multiplicative floor under them these are SHAPE rather than the whole defence — see
     `.c-g-photo .c-behind::after`. They still weight the bottom, where words usually land. */
  --c-scrim-a:.28;
  --c-scrim-b:.46;
  /* how far a photograph behind words is scaled DOWN. 1 is the picture untouched. */
  --c-scrim-dim:.34;
  /**
   * …AND A THEME MAY ASK FOR THE PICTURE TO BE SOFT AS WELL AS DARK.
   *
   * The floor above is a multiply, which is what makes words readable over a photograph nobody
   * vetted. A BLUR is the other half of the same job and it is a matter of taste rather than of
   * safety, so it is a knob at nought: "for the about with the image behind it.. its really
   * important that the theme blurs it.. or makes it dark.. or overlays the color of theme
   * whatever is fitting". Dark is compulsory; soft is the theme's to want.
   */
  --c-scrim-blur:0px;
  /**
   * THE NOTIONAL GROUND BEHIND A PHOTOGRAPH — what type ON a picture is computed against.
   *
   * Ink is derived from `--g`, "what am I sitting on", and over a photograph the honest answer is
   * "a dark room with a scrim in it" rather than any colour the theme owns: `--c-flip` is LIGHT in
   * a dark theme, so deriving from it puts dark type on a photograph. This was a literal written
   * into the rule below and repeated by every design that puts words on a picture; it is a token
   * now so a theme with a very light grade can lift it rather than every one of them being stuck.
   */
  /* the deepest step, so a photograph's scrim is the same dark as the footer under it */
  --c-over:var(--c-a-950);

  /* ── type ─────────────────────────────────────────────────────────────────────────────── */
  --c-display:system-ui,sans-serif;
  --c-body:system-ui,sans-serif;
  --c-weight:700;                       /* headings */
  --c-case:none;                        /* uppercase for a theme that shouts */
  --c-track:-.01em;
  --c-lead-h:1.02;                      /* leading on a heading */
  --c-body-h:1.5;                       /* …and on a line of text */

  /**
   * THE SAME NUMBER IS NOT THE SAME SIZE IN TWO DIFFERENT FACES.
   *
   * The scale is in pixels and a face's PERCEIVED size is its x-height, not its point size. Inter
   * has a very large x-height; a Didone has a small one. So a dish name set in the display face at
   * `--c-t2` sat beside its description set in the body face at `--c-t1` — one step smaller by the
   * scale — and read as visibly SMALLER than it: the title looked like the caption.
   *
   * This only bites where the two faces meet at body size — a row's name over its line, a card's
   * name over its note, a question over its answer. A heading has no body text beside it to be
   * measured against, so the design's own numbers stand.
   *
   * 1 is no correction, which is right for any theme whose two faces are close.
   */
  --c-display-adj:1;

  /**
   * THE THIRD TYPE ROLE — the small tracked capitals a page labels things with.
   *
   * There were two roles, display and body, and one `--c-case` applied to headings. So a theme was
   * all-uppercase or all-sentence-case, and a design that wants sentence-case serif headings AND
   * tracked capitals on its addresses, its eyebrows and its facts could not say so: it had to pick
   * one and lose the other.
   *
   * An eyebrow, a field's label, a tag and a line of facts are all the same voice. It is named
   * once here, so a theme answers it once.
   */
  --c-label:var(--c-body);
  --c-label-weight:600;
  --c-label-case:uppercase;
  --c-label-track:.18em;
  --c-eyebrow-deco:none;                /* underline, for a theme that rules its eyebrows */

  /**
   * HOW FAR THE NAVIGATION'S LINKS STAND BACK — and nothing else in the bar.
   *
   * A bar holds three different things: the business's MARK, a row of LINKS, and the one ACTION.
   * Only the links stand back; the mark is the business and the action is the point of the page.
   * This is a number rather than a rule so a theme states how much and never how — a theme that
   * wrote the rule itself wrote it against the tag (`nav a`) and dimmed all three, which put a
   * business's own black logo and its only button on the page at 72% on every page of the site.
   *
   * `1` is no dim at all, which is the right default: a theme opts into the effect.
   */
  --c-nav-dim:1;

  /* the button's own voice, because it is not always the heading's */
  --c-act-font:var(--c-display);
  --c-act-weight:var(--c-weight);
  --c-act-case:var(--c-case);
  --c-act-bg:var(--c-ink);              /* on paper */
  --c-act-ink:var(--c-paper);
  /**
   * …AND THE ONE THE PAGE ACTUALLY PAINTS WITH, which is not always the one the theme asked for.
   *
   * A theme states the accent as a button's ground because that is the theme's taste. Whether the
   * owner's colour can be TOLD APART from the paper it is standing on is not a matter of taste,
   * and it is not something a theme can answer: the theme is written before anybody picks a
   * colour. Measured on chunky, whose button ground IS the accent — an owner picking black got a
   * black button on black paper at a contrast of 1.00, and one picking white got 1.06 in light
   * mode. The buttons were still there; there was simply nothing to see.
   *
   * So the theme keeps stating its taste and the CONTRACT holds the floor: `-safe` is the same
   * colour, at a lightness this paper can be told from, and the rules below paint with it. A
   * theme that never picks an extreme never notices, and a theme written tomorrow is safe without
   * knowing this exists. The guard itself is a few lines further down, beside the other things
   * derived from a ground.
   *
   * Pass-through here so a browser without relative colour syntax gets exactly what it got before.
   */
  --c-act-bg-safe:var(--c-act-bg);
  /**
   * THE ONE BUTTON THAT IS ALWAYS THEIR COLOUR — the action in the bar.
   *
   * Everywhere else a button wears what the THEME chose, which is the point of a theme choosing:
   * bold's are ink, and its whole idea is type first. The bar is the exception, because the button
   * in it is the site's single action and the one control a visitor sees on every page before they
   * see anything else. It carries the business's colour, on every theme.
   *
   * A theme may still say otherwise — this is a token like the rest — but it no longer has to
   * remember to, and the same lightness floor holds it apart from the paper.
   */
  /**
   * …AND IT IS THE SAME COLOUR AS A BAND OF THE ACCENT, not a second version of it.
   *
   * This was the raw accent while a BAND of the accent is `--c-band-accent`, which bold takes down
   * to `--c-a-700`. So one green appeared twice on one screen at two different lightnesses, either
   * side of the threshold where the derived ink flips: the band came out dark green with white
   * type and the button bright green with BLACK type, on the same page, from the same colour.
   * Reported as "for this accent color the text in main bar button should be white no? … and make
   * sure that works.. there too" — and the answer was not to overrule the contrast maths, which is
   * right (on that green white measures 3.53:1 and black 5.95:1). It was that the button should
   * not have been the brighter green in the first place.
   *
   * One accent-as-a-ground, named once, and the button and the band cannot disagree again. A theme
   * that wants a different button in the bar still says `--c-act-bar-bg`.
   */
  --c-act-bar-bg:var(--c-band-accent);
  --c-act-bar-safe:var(--c-act-bar-bg);
  /**
   * A BUTTON ON AN INVERTED GROUND IS NOT "THE OTHER WAY ROUND" — it is whatever contrasts with
   * the ground it is standing on, and those are different things.
   *
   * This pair used to be `--c-paper` on `--c-ink`, which reads correctly and is wrong half the
   * time: an inverted ground is `--c-flip`, and `--c-flip` is DARK on a dark page as well as on a
   * light one. So in dark mode the band was near-black and the button took `--c-paper`, which is
   * also near-black — measured on the reviews band, a button at lightness 0.08 on a ground at
   * 0.14. A dark button on a dark band, with the contrast rules watching.
   *
   * So the default is derived per ground, beside the other ground-aware neutrals — see
   * `--c-on-g`.
   *
   * `--c-act-on` and `--c-act-on-ink` are what a THEME says when it wants its own, and they are
   * DELIBERATELY NOT DECLARED here. `var(--c-act-on, …)` reaches its fallback only when the
   * property is guaranteed-invalid, which means never set — declaring it empty (`--c-act-on:;`)
   * sets it to an EMPTY value, which is perfectly valid, substitutes nothing, and makes the
   * `background` that reads it invalid instead. It reads as "the default is unset" and behaves as
   * "the button has no colour": measured, that took every button on an inverted band to pure
   * black on a dark ground, which is the same bug with an extra step. Unstated means UNSTATED.
   */
  /* THE SAME FOR A BUTTON'S EDGE, and the same default: a theme whose buttons sit on a hard offset
     shadow had to write its own `.c-act` rule to get one. `none` changes nothing. */
  --c-act-shadow:none;

  /**
   * ONE SCALE, AND IT IS COMPUTED — a base and a ratio, not seven numbers.
   *
   * Seven independent sizes can contradict each other, and they did: a theme set a dish's name one
   * step above its description on the scale and it came out visibly SMALLER, because the name is in
   * the display face and the description is in the body face, and a face's perceived size is its
   * x-height rather than its point size.
   *
   * Two things fix that for good. The steps are DERIVED from one ratio, so they are ordered by
   * construction and a theme cannot make step 4 smaller than step 3 by editing a number. And any
   * role set in the display face reads `--c-d…` instead of `--c-t…` — the same step, corrected for
   * that face's x-height — so "one step bigger" is one step bigger on the page and not just in the
   * stylesheet.
   *
   * A theme states TWO values, `--c-base` and `--c-ratio`, and gets a scale. It may still overrule
   * a single step where a design genuinely wants one; it just no longer has to write seven.
   */
  --c-base:16px;                        /* body — the one size everything else is measured from */
  --c-ratio:1.28;                       /* 1.2 is a quiet design, 1.4 shouts */
  /**
   * THE SMALL END HAS ITS OWN RATIO, and this is why every theme's captions were unreadable.
   *
   * One ratio drove the scale in BOTH directions: a design that wants a headline five steps up
   * needs a big ratio, and the same number then divided the small end twice. Bold shouts at 1.42,
   * so its eyebrows, tags and compact buttons came out at 16 / 1.42 / 1.42 = 7.9px — smaller than
   * anything a person reads on a phone, on every band of every site it draws.
   *
   * Going up and coming down are not the same decision. `--c-ratio` stays the shout; this is the
   * step between body, a note and a caption, and it is gentle because those three are all read.
   * A theme that genuinely wants a tighter or wider small end says so in one number.
   */
  --c-ratio-sm:1.18;
  --c-t0:calc(var(--c-t2) / var(--c-ratio-sm) / var(--c-ratio-sm)); /* eyebrow, tag, caption */
  --c-t1:calc(var(--c-t2) / var(--c-ratio-sm));                     /* note, secondary */
  --c-t2:var(--c-base);                 /* body */
  /**
   * FLUID AS WELL AS ORDERED — and `min()` was the wrong tool.
   *
   * Taking the SMALLER of the step and a width made the scale stop growing: a hero capped at the
   * ratio's own answer, so on a 2000px band the name of the business was 87px in a room built for
   * three times that, and the design read as timid rather than large.
   *
   * `clamp()` instead, with the step as the FLOOR. Each size is at least one ratio above the one
   * under it — which is what keeps the order guaranteed, at any width, in any face — and is free
   * to grow with the band up to a ceiling three steps higher.
   */
  --c-t3:clamp(calc(var(--c-t2) * var(--c-ratio)), 1.8cqw, calc(var(--c-t2) * var(--c-ratio) * var(--c-ratio)));
  --c-t4:clamp(calc(var(--c-t3) * var(--c-ratio)), 2.8cqw, calc(var(--c-t3) * var(--c-ratio) * var(--c-ratio)));
/* THE TOP OF THE SCALE IS DRIVEN BY WIDTH AND THE BOTTOM IS NOT, so on a wide screen a heading
   ran away from its own paragraph — 78px over 16px, which is not emphasis, it is two unrelated
   designs sharing a band. The width terms are pulled back so a heading stays under four times its
   body at 1400px, which is where `sizes.test.js` measures it. */
  --c-t5:clamp(calc(var(--c-t4) * var(--c-ratio)), 4.2cqw, calc(var(--c-t4) * var(--c-ratio) * var(--c-ratio) * var(--c-ratio)));
/* AND THE TOP STEP CAME DOWN. At 7.8cqw the biggest heading on a page was 109px against 16px of
   body — nearly SEVEN times it, where every other role on the scale is held under four. A short
   name at that size is a poster, which is the point of it; a fifty-character sentence at that size
   is a billboard three lines deep that owns the whole band and leaves its own line and button
   looking like a footnote. 6cqw is 84px at 1400: still the largest thing on the page by a long way,
   and a max-length title lands in three lines rather than filling the screen. */
  --c-t6:clamp(calc(var(--c-t5) * var(--c-ratio)), 6cqw, calc(var(--c-t5) * var(--c-ratio) * var(--c-ratio) * var(--c-ratio)));

  /* THE SAME STEPS IN THE DISPLAY FACE. One correction, applied once, so every display role is
     optically the size its step says it is. `--c-display-adj` is 1 when the two faces match. */
  --c-d1:calc(var(--c-t1) * var(--c-display-adj));
  --c-d2:calc(var(--c-t2) * var(--c-display-adj));
  --c-d3:calc(var(--c-t3) * var(--c-display-adj));
  --c-d4:calc(var(--c-t4) * var(--c-display-adj));

  /* ── space, shape, measure ────────────────────────────────────────────────────────────── */
  --c-u:8px;                            /* the unit. Nothing is spaced by anything else. */
  --c-density:1;                        /* a theme that breathes: 1.25. A dense one: .85 */
  --c-r:0px;                            /* radius — ONE value, used by every part */
  --c-bw:1px;                           /* border width */
  --c-gap:calc(var(--c-u) * 3 * var(--c-density));   /* between cells. 0 = they share edges. */
  /**
   * THE MOST COLUMNS THIS THEME WILL EVER ALLOW.
   *
   * A block says how many columns its content wants; nothing said how many the DESIGN wants, so
   * the answer came from `auto-fit` — "as many as fit" — and on a wide screen six questions became
   * four columns one line tall. Nobody chose four. Nobody could have.
   *
   * A ceiling is a theme decision: a design of big deliberate tiles caps at 3 and one of small
   * cards caps at 4. It is a maximum, never a count — three products in a cap of four are three.
   */
  --c-cap-max:4;
  --c-band-rule:var(--c-bw);            /* the line between bands. 0 = grounds do the separating. */
  --c-band-min:0px;                     /* a picture band may be the whole screen: 100svh */
  --c-measure:1180px;                   /* nothing text-bearing is ever wider than this */
  /**
   * THE PAGE'S OWN COLUMN — the widest anything on it ever is, and where its edges are.
   *
   * The bands sat in it, the navigation used the full gutter as PADDING (so twice the inset the
   * bands had), and the footer used the text measure (so a third edge again). Three insets down
   * one page: at 1920 the mark was at 64, the hero at 220 and the footer at 260, and every one of
   * them was somebody's idea of "the edge". Reported as "top bar menu is not aligned with the
   * page", which is exactly what it was.
   *
   * Declared once here so the furniture and the bands cannot disagree about it.
   */
  --c-page:min(1480px, 100% - var(--c-gut));

  /**
   * …AND NOTHING IS EVER WIDER THAN ITS OWN READING LENGTH, which is a count of CHARACTERS and
   * not a number of pixels. `--c-measure` is the band's ceiling; these are each ROLE's.
   *
   * Measured, the pages were already inside the band — 64 characters of body, 19 of headline — but
   * by accident: only `.c-line` and `.c-prose` said so, and everything else was short because its
   * container happened to be narrow. A wider band, a denser theme or a longer sentence puts any of
   * them out and nothing says a word. `ch` is the unit that cannot drift: it is the width of a
   * digit in the element's OWN face and size, so a cap written here holds at every step of the
   * scale and in every theme.
   *
   * The numbers are the ordinary ones: prose is comfortable to about 65, a headline wants 20–40
   * (it is read in one glance, not scanned), and a note beside something else wants less again.
   */
  --c-cap-body:64ch;                    /* running prose */
  --c-cap-title:40ch;                   /* a headline is read in a glance */
  --c-cap-note:55ch;                    /* a line under a row, a card, or a button */

  /**
   * A HEADING IS SET AT THE SIZE ITS OWN WORDS CAN CARRY.
   *
   * The scale is fluid on WIDTH and blind to LENGTH, so a two-word name and a twelve-word sentence
   * came out at exactly the same size. On the bold look that is 109px, and a 49-character title
   * generated for a pizzeria was EIGHT lines of one or two words each, 891px tall, running out of
   * its own band — a column of words rather than a headline. `--c-cap-title` does not save it: a
   * cap in `ch` grows with the type, so at 109px "40 characters to the line" is 2600px of room the
   * column has not got, and it never binds.
   *
   * So the room and the length decide it together. The step a design chose is the CEILING — a
   * short name is exactly as large as it always was, which is the whole point of the top of the
   * scale — `--c-t3` is the floor, so a heading is never smaller than the lead under it however
   * long somebody makes it, and in between the size comes down as the words go up.
   *
   * `--c-len` is the length of the heading, put on the element by `head()` in parts.js, which is
   * the one place a heading is built — CSS cannot count characters, so somebody has to hand it
   * over. `--c-title-share` is how much of the page's column the heading's column is: 1 across the
   * page, and a fraction where a SHAPE splits the band. That number is the shape's own geometry
   * and is declared with the rest of it, next to the `grid-template-columns` it comes from; a
   * shape that splits and does not declare it fails `rules.test.js`.
   *
   * `--c-title-fit` is how much of that column one character spends. It is measured rather than
   * derived: a display face set in caps with tracking is far wider per character than the half-em
   * a text face averages, and this is the number that lands a long title on three or four lines
   * instead of eight.
   */
  --c-title-share:1;
  --c-title-fit:5;

  /**
   * WHAT A CARD IS — a box, an outline, or nothing at all.
   *
   * `.c-card` was one treatment for every theme that will ever exist: no ground, no border, no
   * padding, a photograph on top of a name. That is a fine card and it is not the only one. A
   * filled block with the type inside it and the picture bleeding to its edges is a different
   * design, and no amount of colour makes the first one into the second.
   *
   * Nothing changes by default: transparent, no border, no padding, exactly as it was.
   */
  --c-card-bw:0px;
  --c-card-pad:0px;
  /**
   * AND WHETHER ITS EDGE CASTS. A shadow is paint — it says nothing about where a card is — but
   * there was no token for one, so a theme built on a hard offset edge had nowhere to put it and
   * the only way to get it was a component rule of its own, which is the thing this file exists to
   * stop. `none` is the default, so nothing that was drawn yesterday moves.
   */
  --c-card-shadow:none;
  /* …AND ITS SECONDARY TEXT. `--c-soft` is mixed for the PAGE's paper, so the moment a card has a
     ground of its own the line under its name is a grey chosen for a surface it is no longer on —
     which on a dark card is unreadable, on a light band, with nothing about the band wrong. */
  /* a card with no ground of its own is simply the band's, so its ink needs no answer */
  /**
   * AND `transparent` IS NOT HOW YOU SAY THAT — it is how you say "white type on cream paper".
   *
   * `--g` is what the ink is derived from, and `transparent` has a lightness of 0, so a theme
   * writing `--c-card-bg:transparent` to mean "no fill, please" was telling the derivation it was
   * on black: every name and price inside every card came out white, on paper. Nothing looked
   * broken — the words were simply not there, and the card read as a photograph with a gap under
   * it. A theme that wants no fill writes `--c-card-bg:var(--c-card-g)`, "whatever the band is",
   * or writes nothing at all and gets the same. There is a test that no theme writes the other. */

  /**
   * A QUOTATION IS ALWAYS A CARD WITH A GROUND — the rule, not a taste.
   *
   * It used to be bare words on the band, which is typographically the honest drawing of a
   * quotation and is wrong here for one reason: a review is PROOF, and proof that looks like the
   * paragraph above it reads as the business talking about itself. Three of them in a row with
   * nothing around them is a column of text nobody stops at.
   *
   * So a quotation has a ground, an edge and room, on every theme — and unlike a card, whose
   * ground defaults to the band's, this one is always a real colour. That is why its ink can be
   * DERIVED (below) rather than inherited: a light quote card on a black proof band gets black
   * type without any theme having to remember.
   */
  --c-quote-bg:var(--c-fill);
  --c-quote-ink:var(--c-ink);
  --c-quote-bw:var(--c-card-bw);
  --c-quote-pad:calc(var(--c-u) * 3 * var(--c-density));

  /* a field: a box, or a rule under it and nothing else */
  --c-field-bg:var(--c-paper);
  --c-field-bw:var(--c-bw);             /* all four sides… */
  --c-field-bw-b:var(--c-bw);           /* …and the bottom, which may be the only one */
  /* SPLIT, because the button standing beside a field has to be as tall as one and the only way
     to be sure of that is to be padded by the same value — a shorthand pair cannot be half-read. */
  --c-field-pad-y:calc(var(--c-u) * 2);
  --c-field-pad-x:calc(var(--c-u) * 2);
  --c-field-pad:var(--c-field-pad-y) var(--c-field-pad-x);
  --c-rhythm:clamp(40px,6cqw,96px);     /* the air above and below a band */
  --c-gut:clamp(20px,5cqw,64px);        /* the page gutter */
  --c-bar:64px;                         /* how tall the sticky bar is — chips clear it */
}

/**
 * EVERY INK IS DERIVED FROM THE GROUND IT IS ON. Nothing on this page names a colour.
 *
 * THE BUG THIS ENDS. A theme used to set a ground here and an ink there, independently, and
 * nothing connected the two — so a panel could paint itself cream inside a dark band and keep the
 * band's cream text, a fact's number could be pinned to the page's ink and vanish on a dark band,
 * a card could take a grey mixed for paper it was no longer on, and a pale accent could keep the
 * white ink computed for a dark one. Four separate reports, one cause: an element naming a colour
 * instead of asking what it is sitting on.
 *
 * `--g` IS THE ANSWER TO "WHAT AM I ON". Every surface sets it — a band, a card, a panel — and
 * every ink below is mixed from it. Change the ground and the type follows, automatically, at any
 * depth, because a card inside a dark band inside a light page is just another `--g`.
 *
 *   --c-on-g   pure black or pure white, whichever the ground can carry
 *   --c-ink    text. 92% of that toward the ground, so it is warm rather than absolute
 *   --c-soft   the secondary line. Measured: 66% holds above 4.5:1 on any ground.
 *   --c-faint  a caption, a timestamp
 *   --c-line   a rule
 *
 * These keep their old names ON PURPOSE. Every rule in this file already asks for `--c-soft` and
 * `--c-line`, so redefining what they MEAN makes the whole stylesheet ground-aware without a
 * single rule changing — and it deletes the override list that used to re-colour eight classes by
 * hand on every inverted band.
 *
 * A theme states GROUNDS. It does not state inks, and there is no longer anywhere to put one.
 */
/* DECLARED WHEREVER `--g` CAN CHANGE, because a custom property resolves once on the element that
   declares it and its children inherit the ANSWER, not the sum. Stated only on the page, every
   band inherited the ink computed for paper — which is dark text on the dark bands. Each surface
   that sets a ground therefore restates the derivation, and only those. */
@supports (color: oklch(from red l c h)){
  :is(#clay-page,#design-sheets), :is(#clay-page,#design-sheets) .c-band, :is(#clay-page,#design-sheets) .c-card, :is(#clay-page,#design-sheets) .c-tone-tint .c-in,
  :is(#clay-page,#design-sheets) .c-bleed-t, :is(#clay-page,#design-sheets) [data-g],
  /* THE FURNITURE SETS A GROUND TOO — the bar and the foot. The foot paints the CONTRAST ground,
     which on a light page is nearly black, and without this every neutral in it stayed the one
     mixed for the page: dark text on a dark footer, on every page of every light site. */
  /* …AND A QUOTATION, which states its own ground the same way a card does. */
  :is(#clay-page,#design-sheets) .c-quote,
  /* …AND THE CARD THE VISIT BAND PUTS ON A MAP, for the same reason: it is paper standing on a
     picture ground, so the neutrals it inherits were the ones mixed for the picture. */
  :is(#clay-page,#design-sheets) .l-visit-card,
  /* …AND A HERO WHOSE WORDS ARE ON A PANEL — `heroWords: "card"`, the same case again: a sheet of
     the theme's paper standing on a photograph. The panel restates `--g`; without being named here
     that restatement reaches nothing, and the title, the line and the eyebrow keep the light inks
     the picture band mixed. Pale type on pale paper, which is how it first shipped. */
  :is(#clay-page,#design-sheets)[data-tone-heroWords="card"] .c-g-photo > :is(.c-in,.c-in-wide),
  :is(#clay-page,#design-sheets) .l-nav, :is(#clay-page,#design-sheets) .l-foot,
  /* …AND THE NAVIGATION'S OWN DRAWER, which wears the footer's ground — see below. Without being
     named here it would keep the inks mixed for the page's paper: near-black type on a near-black
     sheet, which is the pale-on-pale failure one selector up, upside down. */
  :is(#clay-page,#design-sheets) .sheet-host[data-navall] .sheet{
    --c-on-g:oklch(from var(--g) clamp(0, (.62 - l) * 1000, 1) 0 h);
    /* …and the pure colour that sits ON that one — the editor's cog inside the editor's disc. Both
       ends pure, so neither can pick up the owner's accent. See `.band-gear`. */
    --c-in-g:oklch(from var(--g) clamp(0, (l - .62) * 1000 + 1, 1) 0 h);
    --c-ink:color-mix(in oklab, var(--c-on-g) 92%, var(--g));
    /* AND THE BRAND IS IN THEM, which is the whole point of `--c-brand` and was lost right here.
       The definitions at the top of this file mix the accent into the neutrals — that is what
       makes a rule on a sage site sage and a rule on a rust site rust. These override them on
       every ground, and they were derived from pure black or pure white alone, so the accent was
       thrown away on the page itself and on every band: measured on a green site, `--c-line` came
       out at a chroma of 0.003, which is grey. A rule and a fill carry the full measure; the
       secondary line carries the same quarter the top of the file measured for it. */
    --c-soft:color-mix(in oklab, var(--c-accent) calc(var(--c-brand) / 4),
                       color-mix(in oklab, var(--c-on-g) 66%, var(--g)));
    --c-faint:color-mix(in oklab, var(--c-accent) calc(var(--c-brand) / 4),
                        color-mix(in oklab, var(--c-on-g) 48%, var(--g)));
    --c-line:color-mix(in oklab, var(--c-accent) var(--c-brand),
                       color-mix(in oklab, var(--c-on-g) 16%, var(--g)));
    /* AND THE FILL, which was not restated here at all — so an inverted band's fill was the one
       computed for the page's paper: a pale grey box on a black band. */
    --c-fill:color-mix(in oklab, var(--c-accent) var(--c-brand),
                       color-mix(in oklab, var(--c-on-g) 5%, var(--g)));
    /* AND THE BUTTON ON THIS GROUND. `--c-on-g` is already the pure colour that contrasts with
       whatever this band is wearing, which is exactly what a solid button wants to be; the words
       on it are the ground itself. A theme that has said its own (`--c-act-on`) keeps it — this
       is the answer for a theme that has not, and until now that answer was a fixed `--c-paper`
       which is only the opposite of the ground on a light page. */
    --c-act-bg-on:var(--c-act-on, var(--c-on-g));
    --c-act-ink-on:var(--c-act-on-ink, var(--g));
  }
}

/**
 * CONTRAST IS DERIVED, NOT CHOSEN — and it went missing when the parts contract arrived.
 *
 * The theme's own chrome has computed this for a long time: `--on-accent` reads the accent's
 * LIGHTNESS and hands back black or white, so a lime or a pale yellow is as safe as a navy and
 * nobody has to remember to check. The parts contract did not: `--c-on` and `--c-on-band` were a
 * hex each theme wrote by hand, always white, because every theme was tried with a dark accent.
 * An owner picking a pale yellow got white type on it — in the one place their own colour appears.
 *
 * So it is computed here, for every theme at once, from the only thing that decides it. `.564` is
 * the lightness where black overtakes white; the `clamp` turns the comparison into 0 or 1 and the
 * chroma goes to 0, so the answer is always pure black or pure white and never a tinted grey.
 *
 * THAT NUMBER IS SEARCHED, NOT GUESSED. It was `.68`, which is where a mid grey stops LOOKING
 * dark — not where the contrast crosses over. Between the two an accent got the weaker of the two
 * poles and nobody read it as a bug because the type stayed legible-ish: measured then, an accent
 * at l .65 was given white at 3.23:1 with black available on the same button at 6.49:1.
 *
 * For a GREY the crossover is exactly where `(Y + .05)² = 1.05 × .05`, at l .5637. Colour is not
 * that tidy — lightness is not luminance, and a vivid violet at l .58 carries less light than a
 * grey at .50 — so no single lightness gets the stronger pole onto every colour. `.58` is the one
 * that leaves the WORST colour best off, at 4.16:1; picking by luminance instead, which no
 * stylesheet can be asked to do, would top out at 4.58:1. The contract test re-runs that search
 * and fails if this drifts off it.
 *
 * A theme may still write its own — a design whose accent is only ever its own colour can say so —
 * but it no longer has to, and the default is right rather than lucky. Without `oklch(from …)` the
 * hex above stands, which is what every browser did until now.
 */
@supports (color: oklch(from red l c h)){
  :is(#clay-page,#design-sheets){
    --c-on:oklch(from var(--c-accent) clamp(0, (.58 - l) * 1000, 1) 0 h);
    --c-on-band:oklch(from var(--c-band-accent-safe) clamp(0, (.58 - l) * 1000, 1) 0 h);
    /* and the same for a button that IS the accent, which is the commonest one of all */
    --c-act-ink:oklch(from var(--c-act-bg-safe) clamp(0, (.58 - l) * 1000, 1) 0 h);
    --c-act-bar-ink:oklch(from var(--c-act-bar-safe) clamp(0, (.58 - l) * 1000, 1) 0 h);
    /* AND THE QUOTATION, which is the case the card cannot have: its ground is always a real
       colour, never `transparent`, so deriving from it is safe — and it is the whole reason a
       light quote card on a dark proof band needs no theme to think about it. */
    --c-quote-ink:oklch(from var(--c-quote-bg) clamp(0, (.58 - l) * 1000, 1) 0 h);
  }
  /* NOT THE CARD. Its ground defaults to `transparent`, whose lightness is 0 — deriving from it
     would hand every theme that has not set one white type on white paper. A card with no ground
     of its own inherits the band's ink, which is already the right answer. */
}

/**
 * A GROUND MADE OF THE OWNER'S COLOUR STAYS TELLABLE FROM THE PAPER.
 *
 * Contrast has two questions in it and the block above only answers one. "What is written ON this
 * colour" is derived and has been for a while. "Can this colour be SEEN against the page" was
 * nobody's — the theme picks the accent as a ground before it knows what the accent is, and the
 * owner picks the accent without being told what it will be standing on. Measured on chunky, over
 * every accent and both modes: black in dark mode gave a button-to-paper contrast of 1.00, white
 * in light mode 1.06, pale yellow 1.20. Three cards on the board are that one number.
 *
 * The fix is a LIGHTNESS FLOOR, not a colour swap: `min()`/`max()` on the l channel with the hue
 * and the chroma untouched, so a navy stays navy and a yellow stays yellow — they only stop being
 * as pale, or as deep, as the paper behind them. For an accent already on the right side of the
 * floor this is arithmetically a no-op, which is why every existing site looks the same.
 * A pure black or a pure white has no hue to keep, and comes out the grey the floor names.
 *
 * `.60` and `.55` are SOLVED, over every colour an owner can pick — swept in the contract test,
 * with the chroma gamut-mapped the way a browser maps it and the dark paper coupled to the accent
 * it is mixed from. They are not the lightnesses a grey would need: a saturated cyan at l .62
 * carries far more luminance than a grey at .62 and clears only 2.93:1, which is why the numbers
 * are lower than the grey maths alone would suggest. At these two the worst colour there is
 * clears 3.17:1 light and 3.62:1 dark.
 *
 * KEYED ON `data-mode`, which is the attribute a theme's own mode control writes (it is named in
 * the control the theme hands the panel, so the two cannot drift). A theme with no mode gets the
 * light rule, which is the right answer for paper. Both hosts, and both the page's own attribute
 * and the root's, because a mode can be set live on either.
 */
@supports (color: oklch(from red l c h)){
  /**
   * .55 IN LIGHT, AND THE NUMBER IS THE ONE THAT SETTLES THE INK.
   *
   * It was .60, and .60 is two hundredths above the point where the derivation above flips from
   * white type to black (.58). So an owner picking a bright blue — #31A0FF, oklch l .690 — had it
   * held down to exactly .60 and then handed BLACK words, while the same theme's own default
   * (#0071E3, l .563) sits under the flip and gets white. Two buttons on one site, one of each,
   * and nothing in the editor to explain why. Reported with a photograph of it: "this should be
   * white text on the blue".
   *
   * The flip stays where it is — a test searches for the lightness that leaves the WORST colour
   * best off and asserts the sheet is standing there, and .58 is still it. What moves is the cap,
   * far enough that no held colour can land on the black side of that flip. Measured over every
   * chroma and hue: at .60 the worst white-on-button is 3.67:1, at .55 it is 4.53 — over the floor
   * for body text, where the old pairing was under it.
   *
   * The cost is a shade: a button an owner picked at l .69 arrives at .55 rather than .60. That is
   * the trade — a slightly deeper button on every light theme, and white words on all of them.
   *
   * A GENUINELY PALE COLOUR STILL TAKES BLACK, where nothing caps it: dark mode has a floor rather
   * than a ceiling, and `--c-on`, `--c-on-band` and `--c-quote-ink` derive from colours that were
   * never held at all.
   */
  :is(#clay-page,#design-sheets){
    --c-act-bg-safe:oklch(from var(--c-act-bg) min(l, .55) c h);
    --c-band-accent-safe:oklch(from var(--c-band-accent) min(l, .55) c h);
    --c-act-bar-safe:oklch(from var(--c-act-bar-bg) min(l, .55) c h);
    /* …and the accent written as WORDS on the room — see the note beside `--c-accent-ink` */
    --c-accent-ink:oklch(from var(--c-accent) min(l, .46) c h);
  }
  :is(#clay-page,#design-sheets)[data-mode="dark"],
  :root[data-mode="dark"] :is(#clay-page,#design-sheets){
    --c-act-bg-safe:oklch(from var(--c-act-bg) max(l, .55) c h);
    --c-band-accent-safe:oklch(from var(--c-band-accent) max(l, .55) c h);
    --c-act-bar-safe:oklch(from var(--c-act-bar-bg) max(l, .55) c h);
    --c-accent-ink:oklch(from var(--c-accent) max(l, .74) c h);
  }
}

/* ============================================================================================
   THE OWNER'S GEAR — the same on every theme, because it is not a theme's to design.

   It is the editor's control, not part of the page: an owner moving between designs should not
   have to find a different button each time. It was styled per theme, which is how one theme's
   gear ended up a cream slab with a hard shadow while another's was a plain disc.

   AND IT MUST NOT COST THE BAR ITS STICKINESS. A gear needs a positioned ancestor, so both themes
   that have shipped wrote `position:relative` on the band — and the navigation IS a band, so the
   later rule beat `position:sticky` and the bar stopped sticking the moment an owner looked at it.
   Bold found it and fixed it in Bold. `.c-band` is already `position:relative` (below), so every
   band the parts draw needs nothing; a theme's own furniture must scope its rule away from the bar.
   ========================================================================================== */
:is(#clay-page,#design-sheets) .band-gear{display:none}
/**
 * …AND THE FOOTER IS A BAND TOO.
 *
 * A gear is `position:absolute` and needs a positioned box to sit in. `.c-band` has one and the
 * bar is `sticky`, which counts — the footer had neither, so its gear was absolutely positioned
 * against the page and landed 14px from the top of the whole site, behind the navigation, where
 * nobody could see it or press it. The footer's gear opens the Features list, the same one the
 * bar's does (the bar is the first few of it and the footer is the rest), so it is the one gear an
 * owner reaches for to reorder their site and it was the one that was not there.
 *
 * Only the footer: writing this for `nav` too is what once cost the bar its stickiness.
 */
body[data-owner] :is(#clay-page,#design-sheets) footer[data-band]{position:relative}

/* THE ONE THAT WAS THERE: a solid disc in the page's contrast colour with a soft drop shadow, so
   it reads on a photograph, on paper and on a black band without being part of any of them. It is
   Bold's, unchanged, moved here — an owner has been finding this button for months and a redesign
   of it is a redesign of their muscle memory. */
body[data-owner] :is(#clay-page,#design-sheets) .band-gear{display:grid;position:absolute;top:14px;right:14px;z-index:20;
  width:38px;height:38px;place-items:center;padding:0;cursor:pointer;border:0;
  border-radius:999px;
  /**
   * …AND ITS COLOUR IS THE GROUND'S, NOT THE THEME'S.
   *
   * `--c-flip` and `--c-flip-ink` are a THEME's inverted surface, and both carry the owner's accent
   * in them — so the editor's own button turned green on a green site and pink on a pink one, and
   * wore cream on one theme and near-white on the other. Reported twice as "the setting icon again
   * taking the colour of the theme / accent", and the paragraph above this one has said it should
   * not since the day it was written.
   *
   * `--c-on-g` is the PURE colour that contrasts with whatever this band is wearing, and `--g` is
   * that band. Derived per ground a few blocks up, so the disc is near-black on paper, white on a
   * dark band, and always the opposite of the photograph behind it — with no tint from anybody's
   * palette. Same disc, same size, same place, same shadow: an owner has been finding this button
   * for months and only the colour changes.
   *
   * The fallback is what it was, for a browser without relative colour syntax.
   */
  /**
   * …AND THE COG IS PURE TOO.
   *
   * The disc was the pure contrast and the GLYPH was `--g`, the band itself — which is right on
   * paper and on ink, and wrong on the one band that is the accent: a white disc with a green cog
   * in it on a green band, and a pink one on a pink site. The disc had already been fixed for
   * exactly this reason; the glyph inside it was still wearing the owner's colour.
   *
   * `--c-on-g` is pure by construction (chroma 0, lightness 0 or 1), so the opposite of it is that
   * lightness flipped: a black cog on a white disc, a white cog on a black one, and no palette
   * anywhere near either. Same disc, same size, same place — an owner has been finding this button
   * for months and only what is inside it changes.
   */
  background:var(--c-on-g, var(--c-flip));
  color:var(--c-in-g, var(--c-flip-ink));
  box-shadow:0 6px 18px rgba(0,0,0,.18);transition:opacity .15s}
/* AN OUTLINE ICON MUST NOT BE FILLED. The shared library serves the cog as a STROKED path with
   `fill="none"`, and forcing `fill:currentColor` on every svg in here turned it into a solid blob
   — a flower, not a gear. Only a theme that inlines its own filled svg gets the fill, and the
   library's slot is merely sized. */
body[data-owner] :is(#clay-page,#design-sheets) .band-gear > svg{width:18px;height:18px;fill:currentColor}
body[data-owner] :is(#clay-page,#design-sheets) .band-gear .ico{width:19px;height:19px;display:grid;place-items:center}
body[data-owner] :is(#clay-page,#design-sheets) .band-gear .ico svg{width:100%;height:100%}
body[data-owner] :is(#clay-page,#design-sheets) nav .band-gear{top:50%;transform:translateY(-50%)}
body.preview :is(#clay-page,#design-sheets) .band-gear{display:none!important}
/* The chevrons that sat either side of the gear were styled here. They are gone — an arrangement
   is what the content asks for now, not a thing to step through. See lib/designs/runtime/owner.js. */


/* WHO MADE THIS SITE — and not while its owner is working on it.
   The badge belongs to a VISITOR's page. In the editor it is one more thing fixed to the bottom of
   the screen, over the dock, saying something the owner already knows — and it was there because
   whether to draw it was a decision each theme made in its own stylesheet: Chunky hid it, Bold
   never did, so half the sites had a badge in the workspace and the difference was which theme
   they were on. One rule, here, for every theme. Preview is a visitor's view, so it comes back. */
body[data-owner]:not(.preview) :is(#clay-page,#design-sheets) .qck-badge{display:none}

/* ── the shell ─────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-band{
  --c-card-g:var(--g);
  /* HOW MUCH AIR — `--c-band-air` is the theme's TONE, one word (`roomy`, `tight`, `airy`) turned
     into a number by lib/designs/tone.js. `--c-density` is the OWNER's, and `--c-rhythm` is the
     scale. Three multipliers, three owners, and none of them has to know about the others. */
  padding:calc(var(--c-rhythm) * var(--c-density) * var(--c-band-air, 1)) 0;
  container-type:inline-size;position:relative;isolation:isolate;
  background:var(--g);color:var(--c-ink);
}
/**
 * A BAND AS A CARD — `data-tone-panels="card"`, and only then.
 *
 * "Sections could be cards." It is the loudest structural thing a theme can say short of drawing
 * its own sections, and it had no way to be said: a band ran edge to edge and the GROUND under it
 * was the only thing separating it from the one above.
 *
 * THE GROUND BECOMES THE CARD'S FILL rather than a stripe across the screen, which is what makes
 * the two policies compose instead of fight. `--g` is already the band's own surface — every
 * ground class sets it and nothing else reads it — so the card takes `--g` and the band underneath
 * takes the page's paper. A theme's GROUND table keeps working unchanged and now paints panels.
 *
 * NOT THE FURNITURE, and not a band that is already a room. The navigation and the footer are the
 * edges of the page rather than things on it; a photo band IS its picture and a card floating on a
 * full-bleed photograph is a card on a card. Both are excluded here rather than in the themes,
 * because both are true of every theme that ever asks for this.
 */
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-band:not(.c-g-photo){
  background:var(--c-paper);padding-block:calc(var(--c-u)*2*var(--c-band-air,1))}
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-band:not(.c-g-photo) > :is(.c-in,.c-in-wide){
  background:var(--g);color:var(--c-ink);border-radius:var(--c-r-lg,var(--c-r));
  border:var(--c-bw) solid var(--c-line);
  padding:calc(var(--c-rhythm) * var(--c-density) * var(--c-band-air, 1))
          calc(var(--c-u) * 4 * var(--c-density))}
/**
 * …AND ON A PHONE THE PANEL GIVES ITS SIDE PADDING BACK.
 *
 * A panel is inset from the screen by half the page gutter and then pads its own contents again.
 * On a desk those are two small numbers on a wide page. On a phone they compound: measured on the
 * live site at 430 CSS pixels, 10 of gutter plus 41.6 of padding put the first letter of every
 * heading 52 pixels from the edge of the screen — a quarter of the width gone before a word is
 * read, on the device most of these sites are read on. Reported with a photograph of it.
 *
 * BOTH ENDS COME DOWN, and together they land the content at about five percent of the screen —
 * which is the rule the page gutter was already written to (`--c-gut: 5cqw`) and the number this
 * was measured against. One unit of white either side of the panel, two units of padding inside
 * it: 24 pixels from the edge of a 430px phone, where it was 52.
 *
 * The panel keeps its CORNER, because that is the half of it that is the design. It is the inset
 * that shrinks, not the shape.
 *
 * The VERTICAL padding is left exactly where it is. That one is the air between bands, and a
 * design that says it is roomy has to be roomy on a phone too or it is two designs.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-band:not(.c-g-photo) > :is(.c-in,.c-in-wide){
    /* the inset comes down to one unit — enough white either side to read as a card edge, and no
       more than that. The panel keeps its corner, which is the half of it that IS the design. */
    width:calc(100% - var(--c-u) * 2);max-width:none;
    padding-inline:calc(var(--c-u) * 2);
    /**
     * …AND THE AIR INSIDE IT LOSES THE DENSITY MULTIPLIER.
     *
     * `--c-density` is how generous a theme is, and it multiplies a rhythm that is ALREADY at its
     * floor on a phone (`clamp(52px, 7cqw, 120px)` — 7cqw is 27 at 390, so 52 wins). 52 × 1.3 is
     * 67.6 top and bottom, which is 135 pixels of nothing between the last card of one band and
     * the first word of the next: measured on the home page, and a sixth of the screen spent
     * scrolling past white.
     *
     * Four fifths of the rhythm, then: 41 above and below instead of 68, and about a hundred
     * pixels between one band's last card and the next band's first word rather than a hundred and
     * seventy. A phone is still roomy; it just stops paying the desk's generosity twice over on a
     * screen a third of the width.
     */
    padding-block:calc(var(--c-rhythm) * .8 * var(--c-band-air, 1))}
}
/* a card separates itself, so the hairline between bands is a seam drawn over a seam */
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-band + .c-band{border-top:0}
/* …and a run of bands that are meant to look alike closes up rather than stacking two paddings */
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-run + .c-run{padding-top:0}

/**
 * THE HERO'S WORDS IN A PANEL — `data-tone-heroWords="card"`, over a picture and nowhere else.
 *
 * "For the header you could use a card around the title." The other way a hero has always been
 * drawn, and until now there was no way to ask for it: the words went straight onto the photograph
 * with the scrim doing the work.
 *
 * `.c-g-photo` is the guard, not the band's id: what makes a panel right here is that the words
 * are ON a picture. Beside one they are already in their own column and a panel round them is a
 * box inside a box — which is exactly what happened the first time this was written against
 * `[data-band="header"]`.
 */
:is(#clay-page,#design-sheets)[data-tone-heroWords="card"] .c-g-photo > :is(.c-in,.c-in-wide){
  /**
   * `--g` FIRST, AND THAT IS THE WHOLE FIX FOR THE INK.
   *
   * Every text role on the page is derived from `--g`, the surface a thing is sitting on (see
   * `--c-on-g` above). A photo band sets `--g` to the dark overlay, so its title, its line, its
   * eyebrow and its button are all the light versions — and a card that painted a pale background
   * and set `color` alone got pale type on pale paper, which is what the first version of this
   * did. Restating the surface re-runs the derivation for every role at once, which is the same
   * idiom `.c-tone-tint` uses and the reason none of them are listed here.
   *
   * The token is the OPAQUE paper; the background is the translucent mix of it. The derivation
   * needs a colour it can read a lightness off, and what the eye sees is paper either way.
   */
  --g:var(--c-paper);
  background:color-mix(in oklab, var(--c-paper) 88%, transparent);color:var(--c-ink);
  border-radius:var(--c-r-lg,var(--c-r));width:max-content;max-width:min(100%, 62ch);
  padding:calc(var(--c-u)*5) calc(var(--c-u)*5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
:is(#clay-page,#design-sheets)[data-tone-heroWords="card"] .c-g-photo > .c-in-mid{margin-inline:auto}
/**
 * …AND ON A PHONE THE PANEL IS THE COLUMN.
 *
 * `width:max-content` is what makes this a CARD on a desk — a shape the words decide the width of,
 * with the picture either side of it. In 390 pixels there is no either side: the panel came out
 * wider than the band and was cut off down its right edge, taking the last letter of the heading
 * with it. Measured on a phone, on the About room.
 *
 * `--c-page` is the column every other band stands in and it already carries the gutter, so this
 * is "as wide as this band allows" without a number in it. `min-width:0` as well, because a grid
 * item's automatic minimum is its CONTENT — which is what let a `max-content` width out of its
 * own grid area in the first place.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets)[data-tone-heroWords="card"] .c-g-photo > .c-in,
  :is(#clay-page,#design-sheets)[data-tone-heroWords="card"] .c-g-photo > .c-in-wide{
    width:var(--c-page);max-width:var(--c-page);min-width:0;
    /* …and 40 either side of a 374px panel is a fifth of it spent on air. The panel is the column
       on a phone (above); a column pads like one. */
    padding:calc(var(--c-u)*4) calc(var(--c-u)*3)}
}
/* …and the scrim is no longer doing the work, so it can stand back and let the picture through */
/* …AND A THEME THAT PUTS THE WORDS IN A PANEL NEEDS LESS OF IT, because the panel is the
   readability and the picture is allowed to be a picture. */
:is(#clay-page,#design-sheets)[data-tone-heroWords="card"] .c-g-photo{
  --c-scrim-a:.1;--c-scrim-b:.24;--c-scrim-dim:.72}

/* A LINE BETWEEN BANDS IS ONE WAY TO SEPARATE THEM, not the only one. A design that alternates
   ground every band is already saying "you have moved", and a hairline on top of that is a seam
   drawn over a seam. `--c-band-rule:0` takes it away. */
:is(#clay-page,#design-sheets) .c-band + .c-band{border-top:var(--c-band-rule) solid var(--c-line)}
/* THE MEASURE. At 2560 the words are still 1180 and centred — a line of text that grows with the
   window is unreadable, and a photograph that grows with it is stretched. */
/**
 * THE PAGE HAS ONE COLUMN, and the bar, the bands and the footer all stand on it.
 *
 * This was `min(--c-measure, 100% - gut)` while `.l-nav-in` and `.l-foot-in` were `--c-page`. Two
 * different edges, and which one you SAW depended on an accident: bold's measure (1400) is wider
 * than its page at ordinary widths, so bold happened to line up and chunky's (1240) did not.
 * Measured at 1440: chunky's bar and footer ran 28..1412 and every band inside them 100..1340 —
 * 72px of daylight on both sides, on all ten pages. Bold has the same bug from 1544px up.
 *
 * `--c-measure` is a LINE-LENGTH ceiling and it goes back to being only that. It caps text by role
 * in `ch` (R4) and it clamps a set of one or two so a pair does not spread — a cap on the reading,
 * not on where the page's edge is. Putting it on the band's container capped the photographs too,
 * and gave the page a second left edge to explain.
 *
 * `.c-in-wide` still exists for a band that means to run wider than the page column.
 */
:is(#clay-page,#design-sheets) .c-in{width:var(--c-page);margin-inline:auto}
:is(#clay-page,#design-sheets) .c-in-mid{max-width:min(720px, 100% - var(--c-gut));text-align:center;margin-inline:auto}
:is(#clay-page,#design-sheets) .c-in-wide{width:var(--c-page)}
:is(#clay-page,#design-sheets) .c-behind{position:absolute;inset:0;z-index:-1;overflow:hidden}
:is(#clay-page,#design-sheets) .c-behind img{width:100%;height:100%;object-fit:cover;display:block}
/**
 * A PICTURE THAT IS THE GROUND HAS NO RATIO — it fills the band.
 *
 * `media()` gives every photograph a ratio box, which is exactly right everywhere a picture sits
 * IN a layout and exactly wrong for one that IS the layout: a 1400x700 band got a 1040x780 box in
 * it, so the photograph covered three quarters of the header and the rest was the paper showing
 * through. The band decides how tall it is; the ground fills whatever that turns out to be.
 */
:is(#clay-page,#design-sheets) .c-behind .c-media{width:100%;height:100%;aspect-ratio:auto;
  border-radius:0}

/* grounds a theme can ask for. The ONLY four. */
:is(#clay-page,#design-sheets) .c-g-fill{--g:var(--c-ground-fill)}
:is(#clay-page,#design-sheets) .c-g-ink{--g:var(--c-flip)}
:is(#clay-page,#design-sheets) .c-g-accent{--g:var(--c-band-accent-safe)}
/**
 * …AND ON IT THERE IS NO ROOM TO DIM ANYTHING.
 *
 * `--c-soft` is mixed 66% toward `--c-on-g` — the pure black or white the ground can carry — which
 * is right on paper, on tint and on ink, where the ground is a neutral and 66% is already a long
 * way from it. On the ACCENT band the ground is a saturated colour, and a mix through it gains far
 * less luminance than the same percentage through a grey: a line of body copy measured 2.6–3.0
 * against it on all four themes, which is under the floor for normal text on the one band whose
 * job is the last thing anybody reads.
 *
 * IT CANNOT BE FIXED BY MIXING HARDER. Taken all the way to the pure pole it only reaches ~4.1,
 * because the accent's own lightness is what caps it — the same ceiling `contract.test.js`
 * searched for and documented: a pole chosen by lightness cannot beat 4.16:1 across the gamut.
 *
 * So secondary text on the accent band is not dimmed at all. There is nowhere to dim it TO, and a
 * dimmed line at 2.7:1 is worse than an undimmed one at 4.1 in every way. It is the only ground
 * where `--c-soft` and `--c-ink` are the same colour, and that is a statement rather than an
 * oversight.
 */
/* …AND A PHOTOGRAPH IS THE SAME PROBLEM, WORSE.
   The accent at least has a lightness this file can reason about. A photograph has none: it is
   whatever the business uploaded, and the scrim only guarantees the DARKEST parts. A line dimmed
   to 66% of the way to white, over a pizza in daylight, is the grey-on-grey reported here — "same
   for grey text on image.. doesnt work". So nothing is dimmed on a picture either. */
:is(#clay-page,#design-sheets) :is(.c-g-accent,.c-g-photo){
  /* the PURE pole for both, which is every bit of contrast this ground has to give: `--c-ink` is
     mixed 92% toward it elsewhere, and here the last 8% is worth more than the softness it buys */
  --c-ink:var(--c-on-g);
  --c-soft:var(--c-on-g);
  /* …AND THE FAINT STEP GOES WITH THEM. It is 48% and it is used for the "from Google" half of a
     proof line, which on the header sits directly on the photograph. */
  --c-faint:var(--c-on-g)}
/* A PICTURE BAND MAY BE THE SCREEN. `--c-band-min:100svh` and it is; the default is 0 and it is
   as tall as what is in it. Content centres itself in whatever height it ends up with. */
:is(#clay-page,#design-sheets) .c-g-photo{--g:var(--c-over);min-height:var(--c-band-min);
  display:grid;align-content:center}
/**
 * …BUT A PICTURE BAND WITH NO PICTURE IN IT IS NOT A PICTURE BAND.
 *
 * `--c-band-min` is a floor for a POSTER: a photograph filling the screen with the words on it.
 * Where the business has no photograph the ground stays `photo` — the drawing is the same drawing
 * and it paints a tinted surface instead — and the floor came with it, so a heading, one line and
 * a button came out as three things floating in the middle of six hundred and forty empty pixels.
 * Reported as "spacing is off" with a photograph of exactly that, and again as "dont understand
 * these gaps for this theme.. in many places".
 *
 * The height belongs to the PICTURE. No `.c-behind`, no floor — the band is as tall as what is in
 * it, which is what every other band on the page already does.
 */
@supports selector(:has(*)){
  :is(#clay-page,#design-sheets) .c-g-photo:not(:has(> .c-behind)){--c-band-min:0px}
}
/**
 * A GRADIENT CANNOT GUARANTEE ANYTHING OVER A PHOTOGRAPH NOBODY VETTED.
 *
 * The scrim was 15% black at the top falling to 55% at the bottom, which is right over a dark
 * room and does nothing at all over a bright one: white capitals over a photograph of orange and
 * pink sorbet, which is what "is unreadable.." was pointing at. And a HERO centres its words, so
 * they sit where the gradient is weakest.
 *
 * ADDING A DARKER GRADIENT DOES NOT FIX IT EITHER. To beat a white photograph an overlay has to
 * reach ~85% black, and that makes a dark photograph a black rectangle. The two cases want
 * opposite things from an additive layer.
 *
 * SO THE FLOOR IS MULTIPLICATIVE. `brightness()` scales whatever is behind it rather than adding
 * to it: a white plate comes down to a third, a dark one is already there and barely moves. The
 * gradient stays on top for the shape it gives — a little more weight where words usually land —
 * and between them the composite is dark enough for white type over any picture at all.
 *
 * Both halves are tokens, so a theme with a deliberately washed-out look can say so.
 */
:is(#clay-page,#design-sheets) .c-g-photo .c-behind::after{content:"";position:absolute;inset:0;
  -webkit-backdrop-filter:brightness(var(--c-scrim-dim,.34)) blur(var(--c-scrim-blur,0px));
  backdrop-filter:brightness(var(--c-scrim-dim,.34)) blur(var(--c-scrim-blur,0px));
  background:linear-gradient(180deg,rgba(0,0,0,var(--c-scrim-a)),rgba(0,0,0,var(--c-scrim-b)))}
:is(#clay-page,#design-sheets) .c-g-glass .c-in{background:color-mix(in oklab,var(--c-paper) 62%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  padding:calc(var(--c-u) * 4 * var(--c-density));border-radius:var(--c-r)}

/**
 * ON AN INVERTED GROUND THE SECONDARY TEXT INVERTS TOO.
 *
 * `--c-soft` is a mid grey mixed for PAPER. On the black band it was a dark grey on near-black —
 * "from Google" under the reviews measured 2.6:1, which is not readable, and it is the one line on
 * that band whose whole job is saying where the score came from.
 *
 * Every small text class belongs here, not two of them: a card's line, a row's line and a fine
 * print line are the same kind of thing as the ones that were already listed.
 */
/* the list that used to re-colour eight classes by hand on every inverted band is gone:
   they all ask for --c-soft, and --c-soft is now mixed from the ground they are on. */

/**
 * THE CORNER — the header that is not a stack.
 *
 * Every other header arrangement is a column that varies where it sits. This one holds the name
 * in one corner of the screen and the line, the button and the proof in the other, with the
 * photograph as the whole room between them. On a phone there are no corners, so it closes back
 * into a column and keeps the height.
 */
/**
 * BLEED — a panel of words against a picture, edge to edge, no gutter between them.
 *
 * The two halves touch: there is no measure, no gap and no radius between them, which is the one
 * geometry the page could not previously make. The WORDS still sit in a readable column inside
 * their half, because a panel is not an excuse for a 700px line of text.
 */
:is(#clay-page,#design-sheets) .c-bleed{display:grid;grid-template-columns:1fr 1fr;min-height:var(--c-band-min);
  padding:0;--c-title-share:.42}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
:is(#clay-page,#design-sheets) .c-bleed > .c-bleed-t{display:grid;align-content:center;
  padding:calc(var(--c-rhythm) * var(--c-density)) var(--c-gut)}
:is(#clay-page,#design-sheets) .c-bleed > .c-bleed-t > div{max-width:46ch}
:is(#clay-page,#design-sheets) .c-bleed > .c-bleed-m{position:relative;overflow:hidden;min-height:52svh}
:is(#clay-page,#design-sheets) .c-bleed > .c-bleed-m img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:var(--c-photo)}

@container (max-width:820px){:is(#clay-page,#design-sheets) .c-bleed{grid-template-columns:1fr;--c-title-share:1}}

/* BESIDE — the heading in a narrow column and the content in a wide one next to it. This is the
   shape a design uses when it wants a page to read as a document rather than a stack of posters. */
/* every recipe carries this, so a stylesheet has one place to reach a composed band */
:is(#clay-page,#design-sheets) .c-plate{min-width:0}
:is(#clay-page,#design-sheets) .c-aside-b{min-width:0}
:is(#clay-page,#design-sheets) .c-aside-h{--c-title-share:.24}
:is(#clay-page,#design-sheets) .c-aside{display:grid;grid-template-columns:minmax(0,var(--c-aside-w,.28fr)) minmax(0,1fr);
  gap:calc(var(--c-u)*4*var(--c-density)) calc(var(--c-u)*7*var(--c-density));align-items:start}
:is(#clay-page,#design-sheets) .c-aside-h{position:sticky;top:calc(var(--c-bar) + var(--c-u)*3)}
@container (max-width:820px){
  :is(#clay-page,#design-sheets) .c-aside{grid-template-columns:1fr}
  :is(#clay-page,#design-sheets) .c-aside-h{--c-title-share:1}
  :is(#clay-page,#design-sheets) .c-aside-h{position:static}
}

:is(#clay-page,#design-sheets) .c-corner{display:grid}
:is(#clay-page,#design-sheets) .c-corner > .c-in{display:grid;grid-template-rows:1fr auto;gap:calc(var(--c-u)*4);
  width:min(1480px, 100% - var(--c-gut));padding-block:calc(var(--c-u)*5)}
/* WIDE ENOUGH TO BE A TITLE. At 14ch a 124px face put one word on each of eight lines, which is
   a column of words rather than a name. It takes most of the room and the type shrinks with the
   band, so a long title stays a title instead of becoming a list. */
:is(#clay-page,#design-sheets) .c-corner-a{align-self:start;max-width:min(76%, 22ch);--c-title-share:.76}
:is(#clay-page,#design-sheets) .c-corner-a .c-title{--c-title-step:var(--c-t6);line-height:var(--c-lead-h)}
:is(#clay-page,#design-sheets) .c-corner-b{align-self:end;justify-self:end;text-align:right;max-width:46ch}
:is(#clay-page,#design-sheets) .c-corner-b .c-line{max-width:none;margin-left:auto}
:is(#clay-page,#design-sheets) .c-corner-b .c-acts,:is(#clay-page,#design-sheets) .c-corner-b .c-proof{justify-content:flex-end}
@container (max-width:760px){
  :is(#clay-page,#design-sheets) .c-corner-a{max-width:none;--c-title-share:1}
  :is(#clay-page,#design-sheets) .c-corner-b{justify-self:start;text-align:left}
  :is(#clay-page,#design-sheets) .c-corner-b .c-line{margin-left:0}
  :is(#clay-page,#design-sheets) .c-corner-b .c-acts,:is(#clay-page,#design-sheets) .c-corner-b .c-proof{justify-content:flex-start}
}

/* ── head ──────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-head{display:flex;flex-direction:column;gap:calc(var(--c-u) * 1.5)}
:is(#clay-page,#design-sheets) .c-head.c-mid{align-items:center;text-align:center}
/**
 * THE EYEBROW AS A CHIP — `data-tone-eyebrow="tag"`, and only then.
 *
 * "Some theme have the eyebrow in tags." That was a real theme decision with no way to be said, so
 * a theme that wanted it had to reach into `.c-eyebrow` from its own stylesheet — which is a theme
 * DRAWING rather than painting, and it drifts the moment the drawing changes. One rule here, keyed
 * off what the theme states, and every eyebrow on every band answers at once.
 *
 * `width:max-content` because a chip is the size of its word. As a plain line it is a block and
 * takes the measure, which is why this is a rule rather than a token.
 */
:is(#clay-page,#design-sheets)[data-tone-eyebrow="tag"] .c-eyebrow{
  display:inline-block;width:max-content;max-width:100%;
  padding:calc(var(--c-u)*.5) calc(var(--c-u)*1.5);
  border:var(--c-bw) solid var(--c-line);border-radius:var(--c-r-pill,999px);
  /**
   * A CHIP HAS A GROUND. It was 6% of the ink over TRANSPARENT, which is a tint of whatever is
   * behind it — on paper that is a chip, and on the black band or over a photograph it is nothing
   * at all: a hairline outline round grey capitals. Reported as "if you use pills like this.. use
   * background its unreadable", over both.
   *
   * Mixed into the band's own ground rather than into transparent, so it is OPAQUE on every
   * ground, one step off whatever it sits on, and a picture cannot show through it. `--g` is what
   * every band already sets — paper, fill, ink, accent, or the photograph's overlay — so this is
   * one rule and not one per ground.
   */
  background:color-mix(in oklab, var(--c-ink) 10%, var(--g, var(--c-paper)))}
/* …AND ITS WORDS ARE THE BAND'S INK, not the dimmed step. A label in a box is already quiet by
   being small and tracked; dimming it as well is what made it grey on grey. */
:is(#clay-page,#design-sheets)[data-tone-eyebrow="tag"] .c-eyebrow{color:var(--c-ink)}
/* …and a chip in a centred band centres with it rather than hanging off the left edge */
:is(#clay-page,#design-sheets)[data-tone-eyebrow="tag"] .c-mid .c-eyebrow,
:is(#clay-page,#design-sheets)[data-tone-eyebrow="tag"] .c-in-mid .c-eyebrow{margin-inline:auto}
:is(#clay-page,#design-sheets) .c-eyebrow{font:var(--c-label-weight) var(--c-t0)/1 var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--c-soft);
  margin:0;text-decoration:var(--c-eyebrow-deco);text-underline-offset:.4em}
:is(#clay-page,#design-sheets) .c-title{font-family:var(--c-display);font-weight:var(--c-weight);
  letter-spacing:var(--c-track);line-height:var(--c-lead-h);margin:0;
  text-transform:var(--c-case);text-wrap:balance;max-width:var(--c-cap-title);
  --c-title-step:var(--c-t5);
  /* THE WHOLE SUM IS WRITTEN HERE and not composed out of a `--c-title-col` declared with the
     other tokens, because a custom property's `var()`s are resolved where the property is
     DECLARED. A column written up there is a column measured up there: `--c-title-share` was
     read at the page, where it is 1, and the split shapes' fractions never arrived. Units are
     different — `cqw` survives into the value and resolves here, against this band. */
  font-size:clamp(var(--c-t3),
                  calc(min(1480px, 100cqw - var(--c-gut)) * var(--c-title-share)
                       * var(--c-title-fit) / var(--c-len, 8)),
                  var(--c-title-step))}
/* WHICH STEP A HEADING MAY REACH — the same two decisions there always were, said as the ceiling
   the length is fitted under rather than as the size itself. */
:is(#clay-page,#design-sheets) .c-title.c-big{--c-title-step:var(--c-t6)}
:is(#clay-page,#design-sheets) h1.c-title{--c-title-step:var(--c-t6)}
/**
 * BODY TEXT IS SET AT THE BODY STEP. It was `--c-t3` — the step ABOVE body, which is where a lead
 * paragraph under a headline lives — and `.c-line` is not only the lead: it is every line of prose
 * on the site, under every heading, in every card and on every page. So body copy came out at 23px
 * against a 14px button and a 12px overline, and the whole page read as though the type had been
 * set by three different people. Every theme has had this.
 */
:is(#clay-page,#design-sheets) .c-line{font:var(--c-t2)/var(--c-body-h) var(--c-body);color:var(--c-soft);margin:0;
  max-width:var(--c-cap-body)}
/* …and a LEAD is still a lead: the one directly under a page's own heading keeps the step up. */
:is(#clay-page,#design-sheets) .c-head > .c-line:first-of-type{font-size:var(--c-t3)}
/* A CAPPED BLOCK THAT IS CENTRED STILL CENTRES. Without this a 40ch heading in a centred band
   sits hard against the left edge of the band and the text inside it is centred within that —
   which reads as a mistake, because it is one. */
/**
 * A CENTRED BAND CENTRES EVERY CAPPED BLOCK IN IT.
 *
 * Every role that carries running text has a measure — a max-width in characters, R4 — and a
 * capped block with `margin:0` in a centred band sits hard against the left of the band with its
 * text centred inside it, which reads as a mistake because it is one.
 *
 * ONE RULE, ALL THE ROLES, BOTH VOCABULARIES. There were three of these, written on different days
 * for different roles: the heading and the lead, then the form's note, and nothing at all for
 * `.c-fine` — so the single-quotation band centred the score, the quotation and the button and put
 * the name of the person who said it against the left edge. Three rules covering a set of roles do
 * not stay in step, and the one that is missing is only ever found by looking.
 */
:is(#clay-page,#design-sheets) :is(.c-mid,.c-head.c-mid,.c-in-mid)
  :is(.c-line,.c-title,.c-fine,.c-form-note){margin-inline:auto}
/* the gap between a head and whatever it introduces — ONE value, everywhere */
:is(#clay-page,#design-sheets) .c-head + *{margin-top:calc(var(--c-u) * 4 * var(--c-density))}

/* ── action ────────────────────────────────────────────────────────────────────────────── */
/* A BUTTON IS NOT ALWAYS THE HEADING'S VOICE. It was locked to the display family and to
   `--c-case`, so a design with sentence-case serif headings could not have small sans buttons
   without giving up one or the other. Three tokens, all defaulting to what they were. */
/* A BUTTON IS SET AT READING SIZE. It was one step BELOW body, so the single thing a page asks
   anybody to do was the smallest text on it — 14px under a 16px paragraph, on every theme. */
/**
 * `border:0` — AND IT IS NOT A TIDY-UP.
 *
 * `.c-act` is worn by an `<a>` and by a `<button>`, and a `<button>` arrives with the browser's
 * own `2px outset` border on it. Every theme so far hid that under a border, a shadow or a
 * hairline of its own, so for as long as this file has existed HALF the buttons on every site have
 * had a 2px bevel round them and half have not: Add to cart and Send are buttons, See the menu and
 * Book a table are links, and they sat next to each other looking almost the same. It showed the
 * moment a theme drew a plain filled lozenge with nothing around it — "seeing some lines around
 * buttons" — and it was never that theme's line.
 *
 * `.c-quiet` draws its outline with an inset shadow rather than a border, on purpose, so nothing
 * that wants a ring loses one here.
 */
:is(#clay-page,#design-sheets) .c-act{display:inline-flex;align-items:center;justify-content:center;
  font:var(--c-act-weight) var(--c-t2)/1 var(--c-act-font);letter-spacing:.02em;
  text-transform:var(--c-act-case);text-decoration:none;border:0;border-radius:var(--c-r);
  white-space:nowrap;cursor:pointer;transition:opacity .14s ease,transform .14s ease}
:is(#clay-page,#design-sheets) .c-act:active{transform:translateY(1px)}
:is(#clay-page,#design-sheets) .c-act-inline{padding:calc(var(--c-u)*2) calc(var(--c-u)*3);
  background:var(--c-act-bg-safe);color:var(--c-act-ink);box-shadow:var(--c-act-shadow)}
:is(#clay-page,#design-sheets) .c-act-block{padding:calc(var(--c-u)*2) calc(var(--c-u)*4);font-size:var(--c-t2);
  background:var(--c-act-bg-safe);color:var(--c-act-ink);box-shadow:var(--c-act-shadow)}
:is(#clay-page,#design-sheets) .c-act-compact{padding:calc(var(--c-u)*1.5) calc(var(--c-u)*2);font-size:var(--c-t0);
  background:var(--c-act-bg-safe);color:var(--c-act-ink);box-shadow:var(--c-act-shadow)}
:is(#clay-page,#design-sheets) .c-act.c-quiet{background:none;color:inherit;
  box-shadow:inset 0 0 0 calc(var(--c-bw)*2) currentColor}
/**
 * A BUTTON ON AN INVERTED GROUND — and the FOOTER is one of them.
 *
 * The list below is every ground that is not the page's paper. `--c-act-bg-on` is derived per
 * ground a few blocks up and has been correct all along; this is the rule that decides where it
 * gets painted, and the footer was missing from it. The footer paints the CONTRAST ground — on a
 * light page that is nearly black — so the sign-up button fell back to the theme's own, which on
 * bold is near-black ink: measured, 1.07:1. A button, in the footer of every light Bold site,
 * that could not be seen at all. Reported as "still button contrast rule doesn't seem to work",
 * and it was right: the derivation worked, the paint never reached it.
 *
 * The NAV is deliberately not here. Its ground is the paper on both themes, and the button in it
 * is the site's main action — it wears what the theme chose for a button, which is the whole point
 * of a theme choosing.
 *
 * `.c-g-fill` is not here either: a tint of the paper is still the paper.
 *
 * This list and the derivation's list are two descriptions of "which surfaces set a ground", so a
 * test holds them together — that is how the footer went missing in the first place.
 */
:is(#clay-page,#design-sheets) .c-g-ink .c-act-inline,:is(#clay-page,#design-sheets) .c-g-ink .c-act-block,
:is(#clay-page,#design-sheets) .c-g-ink .c-act-compact,:is(#clay-page,#design-sheets) .c-g-accent .c-act-compact,
:is(#clay-page,#design-sheets) .c-g-photo .c-act-compact,
:is(#clay-page,#design-sheets) .c-g-accent .c-act-inline,:is(#clay-page,#design-sheets) .c-g-accent .c-act-block,
:is(#clay-page,#design-sheets) .c-g-photo .c-act-inline,:is(#clay-page,#design-sheets) .c-g-photo .c-act-block,
:is(#clay-page,#design-sheets) .l-foot .c-act-inline,:is(#clay-page,#design-sheets) .l-foot .c-act-block,
:is(#clay-page,#design-sheets) .l-foot .c-act-compact{
  background:var(--c-act-bg-on);color:var(--c-act-ink-on)}
/**
 * …AND THE ACTION IN THE BAR IS THEIR COLOUR — see `--c-act-bar-bg`.
 *
 * The three places a visitor meets the site's one action before they meet anything else: the top
 * bar, the dock on a phone, and the drawer that opens out of it. Everywhere else a button wears
 * what the theme chose; here it wears the business's, on every theme, held apart from the paper by
 * the same floor as everything else and with its ink derived from the result.
 *
 * AFTER the inverted-ground rule above on purpose: the bar and the drawer stand on paper, so
 * nothing here is fighting that rule — but if a theme ever puts its bar on a dark band, the one
 * that comes last is the one that should win, and it is this one. Their colour is the point.
 */
:is(#clay-page,#design-sheets) .l-nav .c-act-inline,:is(#clay-page,#design-sheets) .l-nav .c-act-block,
:is(#clay-page,#design-sheets) .l-nav .c-act-compact,
:is(#clay-page,#design-sheets) .l-bar .c-act-inline,:is(#clay-page,#design-sheets) .l-bar .c-act-block,
:is(#clay-page,#design-sheets) .l-bar .c-act-compact,
:is(#clay-page,#design-sheets) [data-navall] .c-act-inline,:is(#clay-page,#design-sheets) [data-navall] .c-act-block,
:is(#clay-page,#design-sheets) [data-navall] .c-act-compact{
  background:var(--c-act-bar-safe);color:var(--c-act-bar-ink)}
:is(#clay-page,#design-sheets) .c-acts{display:flex;gap:calc(var(--c-u)*1.5);flex-wrap:wrap;
  margin-top:calc(var(--c-u)*4*var(--c-density))}
/**
 * A CENTRED BAND CENTRES ITS ROWS — every row, and however the band came to be centred.
 *
 * `text-align:center` does nothing to a flex row, and the actions and the proof are both flex
 * rows: so a centred band centred its heading, its line and its button and left the rating hard
 * against the left edge, the one thing on the band sitting where nothing else sits. It reads as a
 * mistake because it is one.
 *
 * BOTH WAYS OF SAYING CENTRED, because there are two and they are not the same element. `c-mid` is
 * a WRAPPER inside the band that centres what it holds; `c-in-mid` is the band's own column being
 * narrow and centred, and its rows are its direct children. A rule written for one of them misses
 * every band drawn the other way — which is exactly what happened: the first fix left the header
 * drawn over a photograph still wrong, because that one centres the band rather than a box inside
 * it, and the two sat side by side in the catalogue looking like one of them was broken.
 */
:is(#clay-page,#design-sheets) .c-mid .c-acts,
:is(#clay-page,#design-sheets) .c-acts.c-mid,
:is(#clay-page,#design-sheets) .c-in-mid .c-acts,
:is(#clay-page,#design-sheets) .c-mid .c-proof,
:is(#clay-page,#design-sheets) .c-in-mid .c-proof,
/* …AND THE OPEN-NOW LINE, which is the same element for the same reason: a FLEX row (it carries a
   dot before the words), so `text-align` centres nothing and it sat hard against the left edge of
   a centred band with the heading, the description and the button all centred above it. Reported
   with a screenshot of the Visit band drawn over a photograph — one line, in the wrong place, on
   the biggest thing on the page. */
:is(#clay-page,#design-sheets) .c-mid .c-now,
:is(#clay-page,#design-sheets) .c-in-mid .c-now{justify-content:center}

/* ── row ───────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-rows{list-style:none;margin:0;padding:0}
:is(#clay-page,#design-sheets) .c-row{display:flex;gap:calc(var(--c-u)*2);align-items:flex-start;
  padding:calc(var(--c-u)*2*var(--c-density)) 0;border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .c-row:last-child{border-bottom:0}
/* A ROW THAT IS A CHOICE says which one is chosen — the booking's services are rows rather than
   chips, because a service has a line and a chip has no room for one. */
/**
 * THE ROW THAT IS CHOSEN DOES NOT MOVE.
 *
 * The bar is an inset shadow, so the row was padded away from it to keep the words clear — and a
 * padding moves the CONTENT: measured on the booking page, the chosen service's thumbnail sat at
 * x=36 and every other one at x=24, so picking a service jogged its own row twelve pixels right.
 *
 * The padding stays, because the words do have to clear the bar; a negative margin of the same
 * size grows the BOX to the left instead, so the bar lands in the space beside the list and the
 * content is exactly where it is in every other row.
 */
:is(#clay-page,#design-sheets) .c-row.on{box-shadow:inset 3px 0 0 var(--c-accent);
  padding-left:calc(var(--c-u)*1.5);margin-left:calc(var(--c-u)*-1.5)}
:is(#clay-page,#design-sheets) .c-row-t{display:flex;flex-direction:column;gap:calc(var(--c-u)*.5);min-width:0;flex:1}
:is(#clay-page,#design-sheets) .c-row-n{font:var(--c-weight) var(--c-d2)/1.2 var(--c-display);
  text-transform:var(--c-case);letter-spacing:var(--c-track)}
/* A ROW THAT LEADS SOMEWHERE IS A HEADING, not a line item. A menu category is a destination —
   "Kitchen", "Coffee", "Breakfast" — and it was set at body size under a band heading four times
   its height, which read as a list of labels somebody forgot to style. A dish stays a dish. */
:is(#clay-page,#design-sheets) .c-row-l{text-decoration:none;color:inherit;font-size:var(--c-d4)}
:is(#clay-page,#design-sheets) .c-row-l:hover{text-decoration:underline;text-underline-offset:.22em}
:is(#clay-page,#design-sheets) .c-row-s{font:var(--c-t1)/1.45 var(--c-body);color:var(--c-soft);
  max-width:var(--c-cap-note)}
:is(#clay-page,#design-sheets) .c-row-m{font:var(--c-weight) var(--c-d2)/1.2 var(--c-display);font-style:normal;
  font-variant-numeric:tabular-nums;white-space:nowrap}
:is(#clay-page,#design-sheets) .c-row-a{flex:0 0 auto}
:is(#clay-page,#design-sheets) .c-row.c-dim{opacity:.5}
/**
 * `hidden` MEANS HIDDEN — and a layout class was quietly beating it.
 *
 * The browser hides `[hidden]` with a `display:none` in its own stylesheet, which ANY rule of ours
 * that sets `display` overrides. `.l-basket` is `display:grid`, so the full basket stayed on screen
 * next to "Nothing in the cart yet": both states of the same panel at once, and the client that
 * set `.hidden = true` looked like the thing that was broken.
 *
 * It is `!important` because that is the only weight that survives a rule written later by
 * somebody who does not know this one exists — which is exactly how it happened the first time.
 */
:is(#clay-page,#design-sheets) [hidden]{display:none !important}

:is(#clay-page,#design-sheets) .c-thumb{flex:0 0 calc(var(--c-u)*7);width:calc(var(--c-u)*7)}
/* a thumbnail that opens the picture says so before it is pressed */
:is(#clay-page,#design-sheets) .c-thumb-go{cursor:zoom-in}

/* ── card ──────────────────────────────────────────────────────────────────────────────── */
/* A CARD IS A BOX, AN OUTLINE OR NOTHING — the theme says which, and nothing is the default.
   When it IS a filled box, the photograph belongs to the box: it bleeds to the box's own edges
   rather than sitting inside the padding with a frame of ground around it. */
:is(#clay-page,#design-sheets) .c-card{position:relative;display:flex;flex-direction:column;
  gap:calc(var(--c-u)*1);
  align-items:flex-start;min-width:0;--g:var(--c-card-bg, var(--c-card-g));
  background:var(--g);color:var(--c-ink);box-shadow:var(--c-card-shadow);
  border:var(--c-card-bw) solid var(--c-line);border-radius:var(--c-r);padding:var(--c-card-pad)}
/**
 * THE WHOLE CARD IS THE LINK, not the four words of its name.
 *
 * `card()` makes the NAME an anchor where the card has somewhere to go, and nothing else: the
 * photograph, the price and the ninety per cent of the card that is not the name were dead. On a
 * shop that is the picture of the thing you are trying to open. Reported as "can not open a
 * product that has options from clicking on the card in the shop" — the button worked, the object
 * did not.
 *
 * A stretched link rather than wrapping the card in an `<a>`, because a card can hold a BUTTON —
 * Add, and Choose options — and a button inside a link is invalid markup and unpredictable
 * behaviour. The anchor stays exactly where it is for a screen reader; only its hit area grows.
 * Anything that is itself pressable is raised above the overlay.
 */
:is(#clay-page,#design-sheets) .c-card .c-card-l::after{content:"";position:absolute;inset:0;
  z-index:1;border-radius:inherit}
:is(#clay-page,#design-sheets) .c-card :is(.c-act,button,a:not(.c-card-l)){position:relative;
  z-index:2}
:is(#clay-page,#design-sheets) .c-card .c-media{width:100%;margin-bottom:calc(var(--c-u)*1.5)}
/**
 * …AND IT TAKES THE CARD'S INNER CURVE WHERE IT TOUCHES IT.
 *
 * The photograph is pulled out to the card's own edges by those negative margins, and it was then
 * squared off — which is right on a square theme and wrong on every rounded one: a hard corner
 * sitting inside a 20px curve pokes through it, so the card looks like a photograph with a frame
 * drawn slightly wrong around it. Measured on chunky: a card at radius 20 with a 5px border,
 * holding a picture at radius 0.
 *
 * The value is the card's INNER radius — the outer curve less the border it sits inside, which is
 * what makes two curves nest instead of crossing. `max(0px, …)` because a theme may have a border
 * thicker than its radius, and a negative radius is not a thing.
 *
 * Only the TOP two corners: the picture bleeds up, left and right and stops before the bottom of
 * the card, so those are the only corners it shares with the frame.
 */
:is(#clay-page,#design-sheets) .c-card .c-media:first-child{margin:calc(var(--c-card-pad) * -1)
  calc(var(--c-card-pad) * -1) calc(var(--c-u)*1.5);width:auto;align-self:stretch;
  border-radius:max(0px, calc(var(--c-r) - var(--c-card-bw)))
                max(0px, calc(var(--c-r) - var(--c-card-bw))) 0 0}
/* A CARD WITH NO PHOTOGRAPH IS NOT A CARD WITH A HOLE IN IT — `card()` has said so since it was
   written and marked the case, and no rule has ever answered the mark. It closes up, and it takes
   the room the picture would have had as air above the name, so a row of cards where one has no
   photograph does not read as one that failed to load. */
:is(#clay-page,#design-sheets) .c-card.c-nopic{padding-top:calc(var(--c-u)*1.5)}
/**
 * A CARD WITH NO PICTURE IS BIG ONLY WHEN NONE OF THEM HAVE ONE.
 *
 * The name was promoted to hero size on every picture-less card, which is right for a set that has
 * no photographs at all — a list of categories, a menu — and badly wrong for the ordinary case: a
 * shop of eight products where the tote bag was never shot. That one tile came out with its name
 * four times the size of the two beside it, in the same row, which reads as a mistake because it
 * is one. It was also the "some cards have different heights" report: one giant name in a row of
 * small ones is what made the row uneven.
 *
 * `grid()` marks the set when EVERY cell in it lacks a picture, so the promotion happens for the
 * set and never for the odd one out. A lone picture-less card keeps its siblings' type and simply
 * closes up, which is what the rule above always said it did.
 */
:is(#clay-page,#design-sheets) .c-grid-bare .c-card.c-nopic .c-card-n{font-size:var(--c-t5)}
/* AND THE BUTTONS LINE UP ACROSS THE ROW. A card is a column; its action is pushed to the bottom
   of whatever height the row settled on, so four products with descriptions of different lengths
   do not put four Add buttons at four heights. This is the whole of "cards have equal heights" —
   the boxes were always equal, it was the contents that floated. */
:is(#clay-page,#design-sheets) .c-grid > .c-card{height:100%}
:is(#clay-page,#design-sheets) .c-card > .c-act{margin-top:auto}
/**
 * A CARD IS SIZED BY THE CARD, NOT BY THE BAND.
 *
 * Every step of the scale grows with `cqw`, and the container is the BAND — so a product name at
 * step 4 was 39px in a card 330px wide, with a price the same size under it. Four of them across a
 * page and the whole shop reads as a zoom: "it all feels very big, I thought I was zoomed in", in
 * those words. A phone already knew this and dropped the name to step 2 under 560px; between the
 * two there was nothing, and the desktop kept the band's own HEADING size for the name of a thing
 * in a grid of eight.
 *
 * Step 3, which is the step between them, and the price with it: a card's name is bigger than its
 * note and smaller than the heading over the grid, which is the whole of what a card's name is.
 */
:is(#clay-page,#design-sheets) .c-card-n{font:var(--c-weight) var(--c-d3)/1.1 var(--c-display);
  text-transform:var(--c-case);letter-spacing:var(--c-track)}
/**
 * A CARD'S NOTE IS BODY COPY, AND IT IS SET AT THE BODY SIZE (R9).
 *
 * It was one step down, which put two sizes of prose in the same band: the band's own line at step
 * 2 and every card's note at step 1, describing the same things at two scales for no reason
 * anybody could name. Five type sizes in one band is what R9 exists to stop, and this was the
 * fifth in the two bands that broke it. It is still SOFT, which is what tells a note from a line.
 */
:is(#clay-page,#design-sheets) .c-card-s{font:var(--c-t2)/1.45 var(--c-body);color:var(--c-soft);
  max-width:var(--c-cap-note)}
:is(#clay-page,#design-sheets) .c-card-m{font:var(--c-weight) var(--c-d3)/1 var(--c-display);
  font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets) .c-card .c-act{margin-top:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .c-grid > .c-card > .c-act{margin-top:auto;margin-block-start:auto}
:is(#clay-page,#design-sheets) .c-card.c-dim{opacity:.55}
/**
 * A CARD THAT GOES SOMEWHERE — the whole card is the target, and the markup stays one link.
 *
 * `card()` makes the NAME the anchor when it has a destination, and this stretches that anchor
 * over the card. That is why the card is not an `<a>` with an Add button inside it: a button
 * inside a link is invalid and taps unpredictably on a phone, which is the one place it matters.
 * Anything else in the card that is itself pressable is raised above the sheet.
 */
:is(#clay-page,#design-sheets) .c-card:has(.c-card-l){position:relative}
:is(#clay-page,#design-sheets) .c-card-l{color:inherit;text-decoration:none}
:is(#clay-page,#design-sheets) .c-card-l::after{content:"";position:absolute;inset:0;border-radius:var(--c-r)}
:is(#clay-page,#design-sheets) .c-card-l:focus-visible::after{outline:2px solid var(--c-accent);outline-offset:2px}
:is(#clay-page,#design-sheets) .c-card > .c-act,
:is(#clay-page,#design-sheets) .c-card > .c-tag,
:is(#clay-page,#design-sheets) .c-card > .c-tags{position:relative;z-index:1}
/**
 * A CARD'S BUTTON IS THE SIZE OF ITS WORDS, not the size of the card.
 *
 * A card is a grid, and a grid stretches its children — so a compact action came out as a bar the
 * full width of the card, three of them across What we do, which reads as three empty rectangles
 * with a word in each. `compact` means compact wherever it is.
 */
:is(#clay-page,#design-sheets) .c-card > .c-act-compact{justify-self:start}

/* ── media ─────────────────────────────────────────────────────────────────────────────── */
/**
 * NO PHOTOGRAPH DECIDES HOW TALL A BAND IS — R3 and R5, in one line.
 *
 * The ratio was already the drawing's rather than the file's, which is half the rule: a `4/5` hero
 * beside a narrow column of words is a portrait box as wide as half a desktop, so on a 2000px
 * screen it came out 1250px tall and the business's own NAME was below the fold. Nothing was
 * "wrong": the ratio was honoured exactly, and a ratio with no ceiling is a height the window
 * decides.
 *
 * So a box may not be taller than most of the screen. It keeps its width, the ratio gives way, and
 * `object-fit: cover` means the photograph fills whatever is left — which is why this cannot crop
 * badly enough to matter and why it is safe to apply to every picture on the site. A card 300px
 * wide is nowhere near the cap, so this is a no-op everywhere except the places that were broken.
 *
 * `svh`, not `vh`: on a phone `vh` is the window with the browser's chrome pretending not to be
 * there, which is the one measurement that is wrong on the device this is for.
 */
:is(#clay-page,#design-sheets) .c-media{aspect-ratio:var(--c-ar,4/3);overflow:hidden;background:var(--c-fill);
  border-radius:var(--c-r);position:relative;max-height:var(--c-shot-max,78svh)}
:is(#clay-page,#design-sheets) .c-media img{width:100%;height:100%;object-fit:cover;display:block}

/**
 * A MAP IS A KIND OF MEDIA — the same box, the same ratio, the same corner.
 *
 * So every arrangement that can put a picture beside the words can put a map there, and nothing
 * about a band had to learn a new shape. The tiles are absolutely placed around the centre by
 * `mapArt`; this only holds them still and puts a mark on the point.
 *
 * `--c-map` is the basemap a theme asks for — `light`, `dark` or `color` — and it is read in
 * `page.js` rather than here, because the choice is a URL and not a rule.
 */
:is(#clay-page,#design-sheets) .c-map{background:var(--c-map-ground, var(--c-fill))}
:is(#clay-page,#design-sheets) .c-map-in{position:absolute;inset:0;overflow:hidden;display:block}
/**
 * A TILE IS 256 PIXELS AND NOTHING MAY STRETCH IT — and this needs `.c-map` in front of it.
 *
 * A map is a kind of media, so it is drawn in a `.c-media` box — and `.c-media img` sets
 * `width:100%;height:100%;object-fit:cover`, which is exactly right for a photograph and fatal
 * for a mosaic. One class more specific than this rule, so it WON: every one of the thirty-five
 * tiles was blown up to the size of the whole frame and stacked at its own offset, and what you
 * saw was one arbitrary tile enlarged four times with the pins — correctly placed, in real
 * coordinates — sitting on top of it. Reported as "looks like locations are in the ocean".
 *
 * The tiles were right, the pins were right, the projection was right. A photograph's rule ate
 * the map.
 */
:is(#clay-page,#design-sheets) .c-map .c-map-t{position:absolute;width:256px;height:256px;
  max-width:none;object-fit:fill;user-select:none;-webkit-user-drag:none}
/**
 * A DARK ROOM GETS A DARK MAP — and ONLY a light basemap may be turned into one.
 *
 * `--c-map` picks the basemap when the page is DRAWN, because a tile is a URL. Dark mode is a live
 * toggle a visitor flips after that, so the URL cannot follow it: a dark page showed a white
 * rectangle where the map is, which is a hole punched in the room — the exact thing the theme's
 * basemap choice exists to avoid.
 *
 * So the tiles are inverted instead, which is what lets one download serve both rooms. A flat
 * basemap is nearly all light greys and one or two flat colours, and `invert` + `hue-rotate(180)`
 * turns that into a dark basemap whose roads and water keep their hue. Held against real
 * `dark_all` tiles side by side the two are within a hair of each other, which is what makes the
 * second download not worth it.
 *
 * `[data-base="light"]` IS THE WHOLE POINT OF THE ATTRIBUTE. A theme that already asked for the
 * dark basemap would have had it inverted back to white by this rule — dark mode making the map
 * lighter — and a colour basemap inverted is a photographic negative, not a map. Only paper gets
 * turned over.
 *
 * On the TILES only: the pins are the accent and the credit is type, and both are ours to colour.
 */
:is(#clay-page,#design-sheets)[data-mode="dark"] .c-map[data-base="light"] .c-map-t,
:root[data-mode="dark"] :is(#clay-page,#design-sheets) .c-map[data-base="light"] .c-map-t{
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92)}
:is(#clay-page,#design-sheets)[data-mode="dark"] .c-map[data-base="light"],
:root[data-mode="dark"] :is(#clay-page,#design-sheets) .c-map[data-base="light"]{
  --c-map-ground:#0f0f10}
/* a colour basemap is not inverted, only settled down, so it stops shouting in a dark room */
:is(#clay-page,#design-sheets)[data-mode="dark"] .c-map[data-base="color"] .c-map-t,
:root[data-mode="dark"] :is(#clay-page,#design-sheets) .c-map[data-base="color"] .c-map-t{
  filter:brightness(.78) saturate(.85)}
/**
 * THE POINT ITSELF — the accent, because it is the one thing on the map that is this business.
 *
 * ABSOLUTELY PLACED BY THE DRAWING, not centred by this file: with several branches each pin is at
 * its own offset from the middle, and a rule that pinned everything to 50% would stack three shops
 * on one dot. The `margin` is what keeps the mark centred ON its point rather than hanging below
 * and right of it.
 *
 * OUTSIDE `.c-map-in`, which is what clips the tiles — so a pin is never half-cut by the overflow
 * rule that the mosaic needs.
 */
/**
 * …AND IT IS A PIN, not a dot with a glow round it.
 *
 * A dot floating over a street says "something is near here"; a pin says WHICH DOORWAY, because it
 * has a point and the point is on the spot. It was a circle with a soft accent halo — on a pale
 * basemap that reads as a smudge, and with three branches as three smudges. Reported with the rest
 * of the map as "map really needs to be 10x better".
 *
 * Built out of the element and its two pseudos rather than an SVG, so it costs no markup and no
 * request, and it is the theme's accent with the basemap's own paper as its ring — the same two
 * colours the mark already used. The wedge is drawn twice, the ground colour under the accent, so
 * the ring goes round the point as well as round the head.
 *
 * `margin` is what puts the TIP on the coordinate. The drawing places the pin's top-left corner at
 * the projected point (see `mapArt`), so the mark is pulled up by its whole height and left by
 * half its width — otherwise every place on every map is 26px north-west of where it is.
 */
/**
 * …AND IT IS BIG ENOUGH TO HOLD SOMETHING, AND IT RINGS IN WHITE.
 *
 * The first pin was 18px with its ring in the BASEMAP's own paper, which is the one colour that
 * cannot separate it from the basemap: on the dark tiles it came out as a flat dark-red blob with
 * no edge, and three branches were three blobs. Reported with a photograph of exactly that —
 * "markers are really bad .. look at what we had before with bento".
 *
 * So: 34px, a white ring on every basemap, and a real drop shadow doing the separating. White
 * works on both because the shadow is what lifts it off a pale map and the ring is what lifts it
 * off a dark one — which is what every map product on earth does, for this reason.
 *
 * The head holds the BUSINESS'S OWN MARK where they have one, cut to the shape they picked on
 * Brand (`data-shape`), and falls back to a disc of the accent where they have not. The wedge is
 * still drawn twice — white under accent — so the point keeps the ring the head has.
 */
:is(#clay-page,#design-sheets) .c-map-pin{position:absolute;width:34px;height:34px;
  margin:-46px 0 0 -17px;border-radius:999px;background:var(--c-accent);
  background-size:cover;background-position:50% 50%;
  border:3px solid #fff;
  box-shadow:0 3px 10px rgba(0,0,0,.42), 0 1px 2px rgba(0,0,0,.3)}
/* the mark itself, and the three silhouettes the owner may have picked for it */
:is(#clay-page,#design-sheets) .c-map-pin-mark{background-image:var(--c-pin-mark);
  background-color:#fff}
:is(#clay-page,#design-sheets) .c-map-pin[data-shape="square"]{border-radius:6px}
:is(#clay-page,#design-sheets) .c-map-pin[data-shape="round"]{border-radius:11px}
:is(#clay-page,#design-sheets) .c-map-pin[data-shape="circle"]{border-radius:999px}
:is(#clay-page,#design-sheets) .c-map-pin::before,
:is(#clay-page,#design-sheets) .c-map-pin::after{content:"";position:absolute;left:50%;
  width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent}
:is(#clay-page,#design-sheets) .c-map-pin::before{top:26px;margin-left:-8px;
  border-top:14px solid #fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
:is(#clay-page,#design-sheets) .c-map-pin::after{top:25px;margin-left:-5px;
  border-left-width:5px;border-right-width:5px;border-top:10px solid var(--c-accent)}
/* on a pin carrying a photograph the point is the accent under the white, as it always was —
   the mark is in the HEAD, and a wedge cut out of a logo is not a wedge, it is a broken logo. */
/**
 * THE LICENCE THE TILES COME UNDER — the smallest type on the page, and no pill behind it.
 *
 * It had a tinted slab under it, which on a dark band read as a light grey label stuck to the
 * corner of the map: the loudest thing in the picture was the credit. Asked to hide it as far as
 * the licence allows, and this is that far — resting at a third opacity with a text shadow doing
 * the legibility work a background was doing, and coming up to full when the map is pointed at.
 * It is still there, still readable, still names both parties. That is the deal the tiles come on.
 */
:is(#clay-page,#design-sheets) .c-map-by{position:absolute;right:7px;bottom:6px;
  font:var(--c-t0)/1 var(--c-body);font-size:9px;letter-spacing:.02em;color:var(--c-ink);
  opacity:.34;transition:opacity .18s ease;pointer-events:none;
  text-shadow:0 0 3px var(--c-map-ground, var(--c-paper)),
              0 0 6px var(--c-map-ground, var(--c-paper))}
:is(#clay-page,#design-sheets) .c-map:hover .c-map-by{opacity:.85}
/**
 * A BAND'S OWN PICTURE IS CONTENT, NOT THE ROOM.
 *
 * `--c-shot-max` is 78svh, which is right for the one picture that IS the room — a header the
 * screen tall, with the words over it. It is wrong for the picture BESIDE a story or centred under
 * a heading: those take the width of the band, and a band is wide whenever it carries a set, so a
 * 4/3 photograph across a 1300px page came out 950px tall. A portrait of one person, three times
 * the height of the paragraph it belongs to, and the band under it pushed off the screen.
 *
 * Half a screen is the cap. It applies to the band's OWN picture — a direct child of the page
 * column, or the one `beside` puts in its own half — and to nothing else: a card's picture, a tile
 * in a mosaic and a shot in a strip are sized by their cell and never reach it, and the ground
 * (`.c-behind`) is deliberately exempt because being the room is its whole job.
 */
/**
 * …AND A CAP MAKES IT SHORTER, NEVER NARROWER.
 *
 * `max-height` on a box with an `aspect-ratio` and no stated width does not clamp the height — it
 * TRANSFERS, and the browser makes the box narrow enough that the ratio fits the cap. A 4/3
 * photograph under a story came out 624px wide in an 800px column, hard against the left edge,
 * with a quarter of the band empty beside it and the button above overlapping its corner. That is
 * not a smaller picture, it is a different and much worse arrangement, and it was reported as
 * "this is really bad".
 *
 * `width:100%` is the whole fix: a stated width leaves nothing to transfer to, so the ratio sets
 * the height, the cap clamps it, and `object-fit:cover` crops. Wide as its column, half a screen
 * tall at most.
 */
:is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .c-media,
:is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > div > .c-media{--c-shot-max:min(52svh,520px);width:100%}

/**
 * THE GRADE — every photograph on the page, in two layers.
 *
 * The CURVE is a filter and belongs to the theme. The TINT is a colour in `color` blend mode and
 * belongs to the owner: `mix-blend-mode:color` keeps the picture's own light and dark and replaces
 * only its hue, which is what a duotone is and what `sepia()` cannot be talked into doing.
 *
 * Both default to nothing, so a theme that says neither draws the owner's photograph exactly as
 * they took it. A band's background picture takes the same two, in the same order, or a hero would
 * be graded differently from the card three bands below it.
 */
:is(#clay-page,#design-sheets) .c-media img,:is(#clay-page,#design-sheets) .c-behind img{filter:var(--c-photo)}


/* ── quote ─────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-quote{margin:0;display:flex;flex-direction:column;gap:calc(var(--c-u)*1.5);
  --g:var(--c-quote-bg);background:var(--g);color:var(--c-quote-ink);
  border:var(--c-quote-bw) solid var(--c-line);border-radius:var(--c-r);
  padding:var(--c-quote-pad);box-shadow:var(--c-card-shadow)}
/**
 * A REVIEW IS READ, SO IT IS SET AT READING SIZE.
 *
 * It was `--c-t3` — a HEADING step — from back when a quotation was bare words on a band and the
 * only thing making it carry was its size. Now that it is a card with a ground, the card does that
 * work, and a heading step inside a narrow column is a billboard: four of them side by side came
 * out as four walls of shouting text, eight words to a line, with the shortest review a third
 * empty. Body size, and the ground carries it.
 */
:is(#clay-page,#design-sheets) .c-quote blockquote{margin:0;font:var(--c-t2)/1.5 var(--c-body)}
/* THE NAME UNDER IT IS THE CARD'S OWN INK, QUIETENED — never `--c-soft`, which is mixed for the
   PAGE's paper and is therefore a grey chosen for a surface the quotation is no longer on. On a
   light card over a dark band that grey came out very nearly the colour of the card. */
/* THE ATTRIBUTION IS A BLOCK AT THE FOOT, and `margin-top:auto` is what puts it there: the cards
   in a row are one height, so every name lines up across the set however long the quotations are.
   Beside the words it read as part of them; under them, it is the signature. */
:is(#clay-page,#design-sheets) .c-quote figcaption{display:flex;flex-direction:column;gap:calc(var(--c-u)*.5);
  margin-top:auto;padding-top:calc(var(--c-u)*2)}
/* THE CARD'S OWN INK, QUIETENED — never `--c-soft`, which is mixed for the PAGE's paper and is
   therefore a grey chosen for a surface the quotation is no longer sitting on. On a light quote
   card over a dark proof band it came out very nearly the colour of the card. */
:is(#clay-page,#design-sheets) .c-quote .c-who{font:var(--c-weight) var(--c-t1)/1.2 var(--c-display);
  letter-spacing:var(--c-track);color:inherit}
/**
 * FIVE STARS, DRAWN — not a font's glyph and not an image.
 *
 * A star is a shape, so it is a shape: one background image in the ink of whatever it sits on, and
 * a half score is the same shape clipped down the middle. Nothing to load, nothing to line up, and
 * it takes the colour of its surroundings on every theme without any of them saying so.
 */
:is(#clay-page,#design-sheets) .c-stars{display:inline-flex;gap:2px;align-items:center;
  line-height:1;flex:0 0 auto}
/* A STAR IS A DRAWN SHAPE — `stars()` in parts.js emits the SVG and the path lives there. All this
   owns is the size and how much of the ink an unfilled one keeps, which is paint. The half star
   clips itself inside the SVG, so nothing here stacks a second layer on a first. */
:is(#clay-page,#design-sheets) .c-star{width:1em;height:1em;display:block;opacity:.22}
:is(#clay-page,#design-sheets) .c-star-on,
:is(#clay-page,#design-sheets) .c-star-half{opacity:1}
:is(#clay-page,#design-sheets) .c-when{font:var(--c-label-weight) var(--c-t0)/1.2 var(--c-body);
  text-transform:var(--c-label-case);letter-spacing:var(--c-label-track);color:inherit;opacity:.6}

/* ── field ─────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-form{display:grid;gap:calc(var(--c-u)*2);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
:is(#clay-page,#design-sheets) .c-field{display:flex;flex-direction:column;gap:calc(var(--c-u)*1)}
:is(#clay-page,#design-sheets) .c-field.c-wide{grid-column:1/-1}
:is(#clay-page,#design-sheets) .c-lab{font:var(--c-label-weight) var(--c-t0)/1 var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--c-soft)}
/* A FIELD IS A BOX OR A RULE. Four borders and a fill is one answer; a single hairline under the
   line you type on, with the label sitting on it, is another — and a form is the most theme-
   visible machine we have, so it cannot be the only part of the page with no say in it. */
:is(#clay-page,#design-sheets) .c-field input,:is(#clay-page,#design-sheets) .c-field select,:is(#clay-page,#design-sheets) .c-field textarea{
  font:var(--c-t2)/1.4 var(--c-body);color:var(--c-ink);background:var(--c-field-bg);
  border:var(--c-field-bw) solid var(--c-line);border-bottom-width:var(--c-field-bw-b);
  border-radius:var(--c-r);padding:var(--c-field-pad);width:100%}
:is(#clay-page,#design-sheets) .c-field textarea{min-height:calc(var(--c-u)*14);resize:vertical}
:is(#clay-page,#design-sheets) .c-field :is(input,select,textarea):focus{outline:0;border-color:var(--c-accent)}
/* A FIELD THE FORM REFUSED SAYS SO ON ITSELF, and not only in the line under the button — the
   sentence is at the foot of the form and the mistake is halfway up it. `c-bad` is put on by the
   client and taken off the moment somebody starts fixing it. `--c-warn` is the theme's own word
   for "wrong" where it has one; a plain red is the fallback rather than the accent, because on a
   red-accented theme a wrong field would be indistinguishable from a chosen one. */
:is(#clay-page,#design-sheets) .c-field :is(input,select,textarea).c-bad,
:is(#clay-page,#design-sheets) .c-field :is(input,select,textarea).c-bad:focus{
  border-color:var(--c-warn,#d64545);border-width:max(var(--c-field-bw),1.5px)}
/**
 * A FIELD SITS ON THE BAND IT IS IN, not on the page.
 *
 * `--c-field-bg` is the PAPER, which is right for a form on paper and wrong everywhere else — and
 * the commonest form on the whole site is the sign-up in the FOOTER, which is not on paper on any
 * theme. On a dark site that was a white-ish box on a near-black foot: not the theme's colour, not
 * the footer's, just the page's, sitting there. Reported as "input on dark doesn't really match
 * the theme colours — should be a slightly lighter version of the footer".
 *
 * So on any band wearing a ground of its own — the tint, the ink, the accent, and the footer —
 * the field is that ground lifted a little towards its own ink. It works out by itself on every
 * theme, in light and in dark, and needs no theme to state anything: `--g` is the ground and
 * `--c-on-g` is the pure colour that contrasts with it, both already derived per band.
 *
 * Plain paper is untouched. A form on paper was never the complaint and a grey box there would be
 * a change nobody asked for.
 */
:is(#clay-page,#design-sheets) :is(.c-g-fill,.c-g-ink,.c-g-accent,.c-g-photo) .c-field,
:is(#clay-page,#design-sheets) footer .c-field{
  --c-field-bg:color-mix(in oklab, var(--c-on-g) 7%, var(--g));
  --c-line:color-mix(in oklab, var(--c-on-g) 18%, var(--g))}
/* a capture: the fields, the button on its own row, and the line that says what happened */
:is(#clay-page,#design-sheets) .c-form-go{grid-column:1/-1;display:flex;justify-content:flex-start}
/**
 * A FORM WITH ONE OR TWO FIELDS IS ONE LINE, not a grid the width of the page.
 *
 * `auto-fit` spread a single email field across a fifth of an 1180px measure and dropped the
 * button onto a row of its own, centred, a hand's width away from the box it belongs to — which
 * is a sign-up nobody reads as a sign-up. The field and its button travel together, at a width a
 * person can take in, and centred under a centred heading.
 */
:is(#clay-page,#design-sheets) .c-form.c-form-row{display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:calc(var(--c-u)*1.5);max-width:min(620px,100%)}
/* …and it follows its heading: centred under a centred one, at the margin under a left one */
:is(#clay-page,#design-sheets) .c-in-mid .c-form.c-form-row{margin-inline:auto}
:is(#clay-page,#design-sheets) .c-form.c-form-row .c-field{flex:1 1 200px;min-width:0;text-align:left}
:is(#clay-page,#design-sheets) .c-form.c-form-row .c-form-go{flex:0 0 auto;grid-column:auto;justify-content:flex-start}
/* and a stacked one keeps a measure too — a message box 1180px wide is a page, not a field */
:is(#clay-page,#design-sheets) .c-form:not(.c-form-row){max-width:min(720px,100%)}
:is(#clay-page,#design-sheets) .c-in-mid .c-form:not(.c-form-row){margin-inline:auto;text-align:left}
/* the line about the form travels with the form, at the form's own width and alignment */
:is(#clay-page,#design-sheets) .c-capture{display:grid;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-form-note{max-width:min(620px,100%)}
:is(#clay-page,#design-sheets) .c-in-mid .c-form-note{text-align:center}
:is(#clay-page,#design-sheets) .c-fine{grid-column:1/-1;margin:0;font:var(--c-t1)/1.5 var(--c-body);color:var(--c-soft);
  max-width:var(--c-cap-note)}
/* A PANEL THAT PAINTS ITS OWN GROUND MUST PAINT ITS OWN INK. `--c-fill` is mixed from PAPER, so
   inside a dark band - where the text colour is the band's cream - the sign-up form came out as a
   cream heading on a cream panel, invisible, with only the field labels and the button (which set
   their own colours) still readable. */
:is(#clay-page,#design-sheets) .c-tone-tint .c-in{--g:var(--c-fill);background:var(--g);color:var(--c-ink);border-radius:var(--c-r);
  padding-block:calc(var(--c-u)*7);padding-inline:calc(var(--c-u)*4)}

/* ── chip ──────────────────────────────────────────────────────────────────────────────── */
/**
 * A FILTER STRIP IS ONE LINE, AND IT SCROLLS.
 *
 * Wrapping put eight categories on three lines above a menu, which pushes the food off the screen
 * and reads as a paragraph of buttons. One line, sideways, snapping — the gesture a phone already
 * means, and on a desktop it simply never wraps.
 */
:is(#clay-page,#design-sheets) .c-chips{display:flex;gap:var(--c-u);flex-wrap:nowrap;overflow-x:auto;
  overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
/* THE BLEED BELONGS ONLY TO A STRIP ON THE PAGE'S OWN COLUMN — the same rule the rails follow.
   A row of chips that runs the width of the page reaches into the gutter so the first chip lines
   up with the heading over it. A row of chips inside something — a product's Size and Colour, in
   the narrower half of a two-column product — has no gutter to reach into: the negative margin is
   simply 48px of width the column does not have, and it pushed the choices off the side of every
   product on every theme. Nothing under `.c-in` is a page-wide strip by accident.
   AND THE SNAP IS PADDED TO MATCH — it snaps by `proximity` rather than `mandatory`, so it does
   not lose the gutter sitting still; it loses it the first time somebody scrolls and lets go. */
:is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .c-chips{
  margin-inline:calc(var(--c-gut) / -2);padding-inline:calc(var(--c-gut) / 2);
  scroll-padding-inline:calc(var(--c-gut) / 2)}
:is(#clay-page,#design-sheets) .c-chips::-webkit-scrollbar{display:none}
:is(#clay-page,#design-sheets) .c-chips > *{flex:0 0 auto;scroll-snap-align:start}
:is(#clay-page,#design-sheets) .c-chip{font:var(--c-weight) var(--c-t1)/1 var(--c-display);text-transform:var(--c-case);
  padding:calc(var(--c-u)*1.5) calc(var(--c-u)*2);border-radius:var(--c-r);cursor:pointer;
  border:calc(var(--c-bw)*2) solid var(--c-line);background:var(--c-paper);color:var(--c-ink);
  display:inline-flex;gap:calc(var(--c-u));align-items:center}
:is(#clay-page,#design-sheets) .c-chip.c-on{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
:is(#clay-page,#design-sheets) .c-chip-m{font-weight:400;opacity:.6;font-variant-numeric:tabular-nums}
/* WHAT THE CHOICE LOOKS LIKE — a dot of its colour, or a crop of its own photograph.
   Both are sized off the chip's own type so they line up with the word rather than with the box,
   and neither may shrink: a swatch that flexes is an oval. */
:is(#clay-page,#design-sheets) .c-chip-sw{flex:0 0 auto;width:1em;height:1em;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .18)}
:is(#clay-page,#design-sheets) .c-chip-th{flex:0 0 auto;width:1.6em;height:1.6em;border-radius:calc(var(--c-r) / 2);
  object-fit:cover;margin-inline-start:calc(var(--c-u) * -.5)}

/* A FILTER STICKS, AND IT CLEARS THE BAR. It used to stick at 0 and sit UNDER the navigation, so
   the chips were visible and unclickable. Both numbers come from the same token. */
/* PADDING-BLOCK, NOT `padding`. The rule above bleeds the strip to the edge of the screen with a
   negative margin and puts the chips back on the column with an equal padding — and this was
   written as the SHORTHAND, which sets all four sides, so it kept the bleed and threw the
   compensation away. Every filtered page had its first chip hard against the edge of the glass
   while the heading under it started at the gutter, and the last one clipped by the other edge.
   Only the vertical is this rule's business. */
:is(#clay-page,#design-sheets) .c-chips.c-stick{position:sticky;top:var(--c-bar);z-index:3;background:var(--c-paper);
  padding-block:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) [id]{scroll-margin-top:calc(var(--c-bar) + var(--c-u)*2)}

/* ── grid and strip ────────────────────────────────────────────────────────────────────── */
/* THE THEME'S CEILING APPLIES EVEN WHEN THE BLOCK NAMES NO CAP. `auto-fit` alone answers "as many
   as fit", which is the browser deciding a composition. `--c-cap-max` is the design's most. */
/* HOW WIDE ONE CARD IS IN THE RAIL — every grid of cards becomes one on a phone (see the foot of
   this file), so every grid states it, here, once. 78% leaves the next card peeking, which is what
   makes the gesture obvious without a word about it. */
:is(#clay-page,#design-sheets) .c-grid{--c-rail:78%;display:grid;gap:var(--c-gap);
  grid-template-columns:repeat(auto-fit,minmax(max(var(--c-min,220px),
    calc((100% - var(--c-gap) * (var(--c-cap-max) - 1)) / var(--c-cap-max))),1fr))}
/**
 * TWO THINGS DO NOT SPREAD ACROSS THE WHOLE MEASURE with a chasm between them — but they are not
 * two columns AT EVERY WIDTH either.
 *
 * `repeat(2, minmax(0,1fr))` is a hard two: two cards on a 390px phone were two 170px slivers,
 * whatever minimum the block asked for. The cap was written looking at a desk.
 *
 * IT HAS TO CAP THE COUNT, THOUGH. `minmax(min(100%, --c-min), 1fr)` caps nothing at all: it is
 * `auto-fit` with a 260px floor, so on Bold's 1400px measure a cap of two came out as THREE
 * columns — which is how four reviews, deliberately re-columned to two so they would tile, drew
 * as three and one on its own. The floor has to be a HALF of the row, exactly the way the caps of
 * three and four below are written. Where half is narrower than the block's own minimum, the
 * minimum wins and they stack, which is the phone case the hard two got wrong.
 *
 * The max-width is the other half of what a cap of two is for: two things do not spread across
 * the whole measure with a chasm between them.
 *
 * (Quotations are not this case — they scroll sideways under 560px, on purpose, and that rule
 * takes over before this one matters. This is for everything else that comes in twos.)
 */
:is(#clay-page,#design-sheets) .c-grid[style*="--c-cap:2"]{
  grid-template-columns:repeat(auto-fit,minmax(max(var(--c-min,220px),calc((100% - var(--c-gap)) / 2)),1fr))}
/* …AND THE NARROWING IS FOR TWO THINGS, not for two COLUMNS. Four reviews are two columns because
   four in three is one on its own — but four is a block, not a pair, and clamping it to 62% of the
   measure left a third of the band empty beside it. The clamp is what stops a PAIR spreading with
   a chasm between them, so it belongs to a set of exactly two. */
:is(#clay-page,#design-sheets) .c-grid[style*="--c-cap:2"]:not(:has(> :nth-child(3))){
  max-width:calc(var(--c-measure) * .62)}
:is(#clay-page,#design-sheets) .c-grid[style*="--c-cap:1"]{grid-template-columns:minmax(0,1fr);
  max-width:calc(var(--c-measure) * .42)}
/* A CAP OF THREE OR FOUR IS ALSO A CAP. Only 1 and 2 were written, so a block asking for at most
   three got `auto-fit` — which on a 1400px measure is five columns of four words each, and that is
   exactly what a page of reviews came out as. `auto-fit` still applies underneath: these are the
   most it may have, never the number it must have. */
/* …and the theme's ceiling still applies on top: a wider minimum means fewer columns, so taking
   the LARGER of the block's minimum and the design's honours both without either overruling the
   other. A block asking for four in a design that caps at three gets three. */

:is(#clay-page,#design-sheets) .c-grid[style*="--c-cap:3"]{grid-template-columns:repeat(auto-fit,minmax(max(var(--c-min,220px),calc((100% - var(--c-gap)*2) / 3),calc((100% - var(--c-gap) * (var(--c-cap-max) - 1)) / var(--c-cap-max))),1fr))}
:is(#clay-page,#design-sheets) .c-grid[style*="--c-cap:4"]{grid-template-columns:repeat(auto-fit,minmax(max(var(--c-min,220px),calc((100% - var(--c-gap)*3) / 4),calc((100% - var(--c-gap) * (var(--c-cap-max) - 1)) / var(--c-cap-max))),1fr))}
/**
 * A SET WHOSE COUNT IS OURS HAS NO HOLE IN IT — and the minimum card width was making one.
 *
 * `grid()` already picks a column count that divides the set: three ways in go three across, four
 * go two and two, and nothing is left alone. Then `auto-fit` was handed a floor of `--c-min` as
 * well, and at a middling width that floor won — three cards in a 700px band came out two and
 * then one on its own, with a hole beside it the size of a card. That reads as a card that failed
 * to load, and it is the fault this whole option exists to prevent.
 *
 * So where the count is OURS it is stated outright: no `auto-fit`, no minimum, exactly the number
 * that divides the set. The cards get narrower instead of one of them getting lonely, which is the
 * right trade for a set of three or four — and under 560 it is a rail anyway, so they never get
 * narrow enough to matter. A shop, whose count is the business's, is untouched.
 */
:is(#clay-page,#design-sheets) .c-grid-whole[style*="--c-cap:2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
:is(#clay-page,#design-sheets) .c-grid-whole[style*="--c-cap:3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(#clay-page,#design-sheets) .c-grid-whole[style*="--c-cap:4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* AFTER the two rules above, on purpose: same specificity, so what decides is which comes last. */


/* THE COUNT DECIDES THE COLUMNS. `auto-fit` fills the row with as many minimum-width cells as go
   in it, so two photographs sat small and left-packed with the rest of the row empty. `strip()`
   works out how many there are and caps it; two photographs are two halves. */
:is(#clay-page,#design-sheets) .c-strip{display:grid;gap:calc(var(--c-u)*.5);
  grid-template-columns:repeat(var(--c-cols,3),minmax(0,1fr))}
:is(#clay-page,#design-sheets) .c-strip .c-media{border-radius:var(--c-r)}
/* AND THE PICTURE INSIDE IT TAKES THE BOX'S CORNERS, NOT ITS OWN. `media()` writes an <img class="img">
   and a theme with an older `.img` rule of its own — Bold had one, at 18px — was rounding every
   photograph on every page while the box around it stayed square. The box decides; the token
   decides the box. */
:is(#clay-page,#design-sheets) .c-media{border-radius:var(--c-r);overflow:hidden}
:is(#clay-page,#design-sheets) .c-media > .img{border-radius:0}

/**
 * THE MOSAIC — which, until now, was a class name and no rule at all.
 *
 * `blocks.js` has asked for `c-mosaic` since the gallery was written and nothing has ever drawn
 * one, so "mosaic" and "grid" were the same auto-fit row: seven photographs came out as five and
 * then two, with three holes beside them.
 *
 * A FIXED NUMBER OF COLUMNS, not auto-fit, and every cell the same. A feature cell twice the size
 * was tried first and it only tiles for counts nobody has: at seven it left two holes AND stood a
 * screen and a half tall. Four equal squares, three at tablet, two on a phone — a short last row
 * reads as a grid; a row of five beside a row of two reads as a mistake.
 */
:is(#clay-page,#design-sheets) .c-mosaic .c-strip{gap:calc(var(--c-u)*1)}
/**
 * TWO UP ON A PHONE, WHEREVER IT IS CARDS.
 *
 * `auto-fit` at 390px gives one column, so three products were a 1900px column of pictures — a
 * screen and a half of scrolling to get past a teaser of three things. Two of them side by side is
 * what every shop on a phone does, and it is the difference between a page you flick through and
 * one you give up on.
 *
 * Cards only: a grid of quotations at two-up on a phone is two columns of one word each, and the
 * facts strip is already narrow enough to sit two across on its own.
 */
@container (max-width:560px){
  :is(#clay-page,#design-sheets) .c-grid:has(> .c-card){grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(var(--c-u)*1.5)}
  :is(#clay-page,#design-sheets) .c-grid:has(> .c-card) .c-card-n{font-size:var(--c-t2)}
}

/**
 * ON A PHONE A ROW OF PHOTOGRAPHS SCROLLS SIDEWAYS.
 *
 * Four squares stacked into a column of four is a screen and a half of scrolling to get past the
 * pictures — and the pictures are the one part of a page nobody needs to read. A snapping strip
 * shows the first and says there are more, in the gesture a phone already means.
 *
 * `overflow-x` on the strip only: the PAGE must never scroll sideways (scripts/check-overflow).
 */
/* HOW WIDE A CARD IS IN THE RAIL — the rail itself is stated once, at the foot of this file. */
:is(#clay-page,#design-sheets) .c-strip{--c-rail:72%}

/**
 * THE WAYS IN — as many columns as there are, across the WHOLE band.
 *
 * `grid`'s `cap` narrows the measure as well as the columns, which is right for two quotations
 * and wrong for two ways in: they came out in two thirds of the band with the last third empty.
 * These fill it, whatever there are of them.
 */
:is(#clay-page,#design-sheets) .c-does{--c-rail:78%;display:grid;gap:calc(var(--c-u)*3*var(--c-density));
  grid-template-columns:repeat(var(--c-cols,3),minmax(0,1fr));margin-top:calc(var(--c-u)*4*var(--c-density));
  /* FOUR ROWS, SHARED — picture, name, line, way in. Without this a card with a photograph and one
     without were two different cards at two different heights with their buttons on two different
     lines, which is exactly how a row of ways in reads as broken. */
  grid-template-rows:auto auto auto auto;align-items:start}
:is(#clay-page,#design-sheets) .c-does > .c-does-c{display:grid;grid-row:span 4;grid-template-rows:subgrid;
  gap:calc(var(--c-u)*1.5);align-content:start}
/* the picture row is empty for a card that has none — empty, never a grey box (R1) */
:is(#clay-page,#design-sheets) .c-does .c-does-pic:empty{display:none}
:is(#clay-page,#design-sheets) .c-does .c-does-pic .c-media{border-radius:var(--c-r)}
/* AN EMPTY LINE STILL HOLDS ITS ROW. Hiding it took the card out of step with its neighbours by
   one row, so the card with no line had its button where the others had their line. Empty is
   zero-height; the row is as tall as the tallest line across the three, and the buttons agree. */
:is(#clay-page,#design-sheets) .c-does .c-card-s:empty{min-height:0}
:is(#clay-page,#design-sheets) .c-does .c-does-a{display:flex;align-items:end}
@container (max-width:900px){:is(#clay-page,#design-sheets) .c-does{grid-template-columns:repeat(2,minmax(0,1fr))}}
/**
 * ON A PHONE THEY GO SIDEWAYS, like the photographs do.
 *
 * Stacked, four ways in is four screens of scrolling before the page even starts — and the point
 * of this band is to be read at a glance. One row, snapping, the next card peeking so the gesture
 * is obvious. `overflow-x` on the row only: the PAGE never scrolls sideways (scripts/check-overflow).
 */
@container (max-width:560px){
  /* SIDEWAYS, so the shared rows go — a scroller is one row of cards and each is its own height */
  :is(#clay-page,#design-sheets) .c-does > .c-does-c{grid-row:auto;grid-template-rows:none}
}
/* a capped grid under a CENTRED heading is centred too — the reviews sat hard left under a
   heading in the middle of the band, which reads as two bands that happened to touch */
:is(#clay-page,#design-sheets) .c-grid.c-mid{margin-inline:auto}
/* A LINE THAT SAYS IT IS CENTRED IS CENTRED. The rule was written for a line INSIDE something
   centred (`.c-mid .c-line`), so the one place that puts the class on the line itself — the
   reviews' own sentence, under a heading in the middle of the band — sat hard against the left
   edge, on every site with a line on its reviews. */
:is(#clay-page,#design-sheets) .c-line.c-mid{margin-inline:auto;text-align:center}

/**
 * ON A PHONE THE QUOTATIONS SCROLL SIDEWAYS, like the ways in and the photographs.
 *
 * Four reviews stacked is four screens of somebody else's words between a visitor and the rest of
 * the page. One at a time, snapping, the next peeking — the gesture a phone already means.
 *
 * `overflow-x` on the row only: the PAGE must never scroll sideways (scripts/check-overflow).
 */
:is(#clay-page,#design-sheets) .c-grid.c-quotes{--c-rail:82%}
/**
 * A QUOTATION HAS A MEASURE, and a grid track made of `1fr` does not.
 *
 * Every other grid on the site is cards with pictures in them, and a wide card is a bigger
 * picture. A review is a sentence: the track stretched to fill the row, so on a laptop two
 * quotations came out as two boxes 900px wide with one line of type across each and a hand's
 * depth of nothing under it. Reported twice — "cards cant' be this long.. looks strange" and
 * "Review cards are way too large".
 *
 * `fr` cannot be capped (`min(1fr, 44ch)` is not a track size), so the track is a real maximum
 * instead: as many columns of the reading measure as fit, packed from the start. At three
 * quotations it fills the row; at two it is two readable cards and honest space beside them,
 * which is what a pair of quotations looks like in print.
 */
:is(#clay-page,#design-sheets) .c-grid.c-quotes{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--c-min,240px)),var(--c-quote,42ch)))}
/**
 * …AND WHERE THE BAND IS CENTRED, SO IS THE SPACE BESIDE THEM.
 *
 * A capped track leaves the row's remainder somewhere. Packed from the start it all lands on the
 * right, so two quotations under a centred heading sat left of it with a hand's width of nothing
 * beside them — "crazy gap on the right.. ??". Split in two it reads as the margin it is.
 *
 * Only where the band is centred: in a band whose words start on the left, the first quotation
 * lines up with the heading above it and moving it would be the fault, not the fix.
 *
 * And only above the rail. Under 560px this row is a horizontal scroller, where centring
 * overflowing content puts the first quotation off the left edge with no way back to it.
 */
@container page (min-width:561px){
  :is(#clay-page,#design-sheets) .c-arr-centre .c-grid.c-quotes{justify-content:center}
}
@container (max-width:560px){
  /* a quotation reads left even where the band is centred, and one on its own is the band again */
  :is(#clay-page,#design-sheets) .c-grid.c-quotes{text-align:left}
  :is(#clay-page,#design-sheets) .c-grid.c-quotes:not(:has(> * + *)){text-align:center}
}

/* A CAPPED GRID IS CAPPED, NOT FIXED. `--c-cap:2` names the most columns it may have, and the
   rule set exactly two at every width — so a pair of quotations on a 390px phone came out as two
   columns three words wide. Anything that is not a card goes to one. */
/**
 * …AND A RAIL HAS NO COLUMNS TO CAP, which is not a detail — it was a review nobody could see.
 *
 * The note on the cap-of-two above says quotations are not its case, because "they scroll sideways
 * under 560px and that rule takes over before this one matters". It does not take over: the rail
 * is `.c-grid.c-quotes` (two classes) and this is a class plus an attribute plus a `:not(:has())`,
 * so THIS wins, and it hands a horizontal rail one explicit `minmax(0,1fr)` track.
 *
 * In a rail the implicit tracks are 82% each and overflow on purpose, so the free space is
 * negative and `1fr` resolves to ZERO. The first quotation went into that track and came out 0px
 * wide: on every phone, the home page's reviews band silently dropped its first review and opened
 * on the second.
 *
 * So the caps stand aside for the things that become rails — by the same names the rail rule uses.
 */
@container (max-width:560px){
  :is(#clay-page,#design-sheets) .c-grid[style*="--c-cap:2"]:not(:has(> .c-card)):not(:is(.c-strip,.c-does,.c-quotes,.l-faces)){grid-template-columns:minmax(0,1fr)}
}

/**
 * AND A CARD IS NOT A COLUMN ON A PHONE — docs/design-rules.md R12.
 *
 * "No two-column anything below 560px unless both columns are genuinely narrow." A card carries a
 * photograph, a name, a line and a button: at 179px that is a picture the size of a stamp over
 * three words a line with a button that wraps. The set stacks, which is the arrangement's own
 * declared collapse rather than a breakpoint someone reached for.
 *
 * A STRIP of photographs is the exception and keeps its columns — pictures ARE narrow, and a wall
 * of them two across is the point of the wall.
 */
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .c-grid:has(> .c-card){grid-template-columns:minmax(0,1fr)}
}

/* ── two up ────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-two{display:grid;gap:calc(var(--c-u)*4*var(--c-density));align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
/* …and top-aligned where one side is a tall photograph and the other is three lines: centred put
   a screen of air above the writing and lined its middle up with nothing. */
:is(#clay-page,#design-sheets) .c-two.c-top{align-items:start}
/* ONE WAY IN is a portrait beside the words, not a card in a row of one. It sat in a third of the
   band with air above and below it; the picture takes its half floor to ceiling and the writing
   sits in the middle of the other. */
:is(#clay-page,#design-sheets) .c-two.c-does-one{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:calc(var(--c-u)*7*var(--c-density))}
/* THE COLLAPSE COMES LAST, so every variant above it stacks on a phone. It was written first and
   the one-card split kept its two columns at 390px — a portrait squeezed into a third of the
   screen with a headline crushed beside it. */
@container (max-width:640px){:is(#clay-page,#design-sheets) .c-two,:is(#clay-page,#design-sheets) .c-two.c-does-one{grid-template-columns:1fr}}
:is(#clay-page,#design-sheets) .c-cols{columns:2;column-gap:calc(var(--c-u)*5)}
@container (max-width:640px){:is(#clay-page,#design-sheets) .c-cols{columns:1}}
:is(#clay-page,#design-sheets) .c-cols > *{break-inside:avoid}

/* ── tags ──────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-tags{display:flex;gap:calc(var(--c-u)*1);flex-wrap:wrap;margin-top:calc(var(--c-u)*.5)}
:is(#clay-page,#design-sheets) .c-tag{font:var(--c-label-weight) var(--c-t0)/1 var(--c-label);font-style:normal;
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);color:var(--c-soft);
  border:var(--c-bw) solid var(--c-line);
  padding:calc(var(--c-u)*.5) calc(var(--c-u));border-radius:var(--c-r)}

/* ── the booking flow ──────────────────────────────────────────────────────────────────────
   Not a component of its own: steps, chips, fields and actions, with a calendar. The calendar is
   the only geometry here that nothing else needs. It scrolls with the PAGE — the version before
   this scrolled inside itself, so the page stood still while the form moved. */
:is(#clay-page,#design-sheets) .c-book{margin-top:calc(var(--c-u)*4*var(--c-density))}
:is(#clay-page,#design-sheets) .c-step{border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .c-step:last-child{border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .c-step-h{display:flex;align-items:center;gap:calc(var(--c-u)*2);width:100%;
  padding:calc(var(--c-u)*3) 0;background:none;border:0;cursor:pointer;text-align:left;
  color:inherit;font:inherit}
:is(#clay-page,#design-sheets) .c-step-n{width:calc(var(--c-u)*4);height:calc(var(--c-u)*4);flex:0 0 auto;
  border-radius:var(--c-r);border:calc(var(--c-bw)*2) solid var(--c-line);display:grid;
  place-items:center;font:var(--c-weight) var(--c-t0)/1 var(--c-display)}
:is(#clay-page,#design-sheets) .c-step.on .c-step-n{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
:is(#clay-page,#design-sheets) .c-step-t{font:var(--c-weight) var(--c-t2)/1 var(--c-display);
  text-transform:var(--c-case);letter-spacing:var(--c-track)}
:is(#clay-page,#design-sheets) .c-step-v{margin-left:auto;font:var(--c-t1)/1 var(--c-body);color:var(--c-soft)}
/* THE RUNTIME OWNS THIS STATE. It toggles `on` and `done`; a component that invents `c-on` for
   the same thing is a component nothing can open, which is a booking page of four closed boxes. */
:is(#clay-page,#design-sheets) .c-step-b{display:none;padding:0 0 calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .c-step.on .c-step-b{display:block}
:is(#clay-page,#design-sheets) .c-step-b > * + *{margin-top:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .c-step-b2{width:calc(var(--c-u)*5);height:calc(var(--c-u)*5);border-radius:var(--c-r);
  border:calc(var(--c-bw)*2) solid var(--c-line);background:var(--c-paper);color:inherit;
  font:var(--c-weight) var(--c-t2)/1 var(--c-display);cursor:pointer}

:is(#clay-page,#design-sheets) .c-cal-h{display:flex;align-items:center;justify-content:space-between;
  gap:calc(var(--c-u)*2);margin-bottom:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-cal-m{font:var(--c-weight) var(--c-t2)/1 var(--c-display);text-transform:var(--c-case)}
:is(#clay-page,#design-sheets) .c-cal-b{width:calc(var(--c-u)*5);height:calc(var(--c-u)*5);border-radius:var(--c-r);
  border:calc(var(--c-bw)*2) solid var(--c-line);background:var(--c-paper);color:inherit;
  font-size:var(--c-t3);cursor:pointer;line-height:1;display:grid;place-items:center;padding:0}
:is(#clay-page,#design-sheets) .c-cal-b .ico{width:18px;height:18px;display:grid;place-items:center}
:is(#clay-page,#design-sheets) .c-cal-b .ico svg{width:100%;height:100%}
/**
 * A CALENDAR IS A SMALL OBJECT.
 *
 * `max-width` alone did not hold it: in a column a third of a wide page, seven `1fr` tracks with
 * `aspect-ratio:1` cells gave squares the size of a thumbnail each and a month the height of the
 * screen. The CELL is what has a size — 44px, which is the smallest a thumb can hit, up to 56 —
 * and the grid is however wide seven of those are. Nothing about it grows with the window.
 */
:is(#clay-page,#design-sheets) .c-cal{display:grid;
  grid-template-columns:repeat(7,minmax(0,clamp(38px,7.2cqw,54px)));
  gap:calc(var(--c-u)*.5);justify-content:start;width:max-content;max-width:100%}
/* THE WEEKDAY ROW IS A LABEL, so it is the height of a label. It had a pad on every side and sat
   in a grid whose other rows are square, which left a band of nothing between the days of the week
   and the first day of the month. */
:is(#clay-page,#design-sheets) .c-cal .head{font:600 var(--c-t0)/1 var(--c-body);letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-soft);display:grid;place-items:center;
  height:calc(var(--c-u)*3)}
/* A CELL WITH NOTHING IN IT IS NOT A CELL. The days before the 1st are spacers; giving them the
   square the real days have is what put a blank row above every month starting late in the week. */
:is(#clay-page,#design-sheets) .c-cal > span:not([data-day]):not(.head){aspect-ratio:1}
:is(#clay-page,#design-sheets) .c-cal [data-day]{aspect-ratio:1;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--c-r);border:var(--c-bw) solid transparent;
  font:var(--c-t1)/1 var(--c-body);font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets) .c-cal [data-day]:hover{border-color:var(--c-line)}
:is(#clay-page,#design-sheets) .c-cal .on,:is(#clay-page,#design-sheets) .c-cal .sel{background:var(--c-ink);color:var(--c-paper)}
:is(#clay-page,#design-sheets) .c-cal .off,:is(#clay-page,#design-sheets) .c-cal .out{opacity:.28;pointer-events:none}
:is(#clay-page,#design-sheets) .c-cal .pad{visibility:hidden}

/**
 * OUR OWN DATE AND TIME PICKER — the one control a themed page could not paint.
 *
 * `<input type="date">` opens the BROWSER's calendar: a white card with a blue selection and
 * Chrome's own blue "Clear / Today", identical on a cream restaurant and a black studio. So a date
 * field is a text input that never invites a keyboard (`data-pick`, see `field()`), and this is
 * the panel design-client.js opens under it — built out of the same `.c-cal` the booking calendar
 * uses, so a month looks the same wherever it is drawn and no theme states anything.
 *
 * ON A PHONE IT IS A SHEET. A popover anchored to a field near the bottom of a form is a popover
 * mostly off the screen; under 640px it comes up from the foot instead, which is the gesture the
 * device already means.
 */
:is(#clay-page,#design-sheets) .c-pick{position:relative;display:block}
:is(#clay-page,#design-sheets) .c-pick > input{cursor:pointer;padding-inline-end:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .c-pick-i{position:absolute;inset-inline-end:calc(var(--c-u)*2);
  top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:.55;pointer-events:none}
:is(#clay-page,#design-sheets) .c-pick-i svg{width:100%;height:100%;display:block}

/* ITS OWN CLASS NAMES, not `.c-cal`'s. The booking calendar's rules are scoped under
   `#clay-page`, so an id beats anything this could say and the panel would inherit a grid sized
   for a band rather than for a popover. One drawing, two skins is a cascade fight; two names is
   not. */
.c-pick-veil{position:fixed;inset:0;z-index:60;background:transparent}
.c-pick-pop{position:fixed;z-index:61;
  background:var(--c-paper,#fff);color:var(--c-ink,#111);
  border:var(--c-bw,1px) solid var(--c-line,rgb(0 0 0 / .16));
  border-radius:var(--c-r,10px);box-shadow:0 18px 48px rgb(0 0 0 / .22);
  padding:calc(var(--c-u,8px)*2);width:max-content;max-width:min(94vw,360px)}
.c-pick-h{display:flex;align-items:center;justify-content:space-between;
  gap:var(--c-u,8px);margin-bottom:var(--c-u,8px)}
.c-pick-m{font:var(--c-weight,600) var(--c-t2,1rem)/1 var(--c-display,inherit);
  text-transform:var(--c-case,none)}
.c-pick-b{width:calc(var(--c-u,8px)*5);height:calc(var(--c-u,8px)*5);border-radius:var(--c-r,10px);
  border:var(--c-bw,1px) solid var(--c-line,rgb(0 0 0 / .16));background:none;color:inherit;
  cursor:pointer;display:grid;place-items:center;font:inherit}
.c-pick-b svg{width:18px;height:18px}
.c-pick-cal{display:grid;grid-template-columns:repeat(7,minmax(0,40px));
  gap:calc(var(--c-u,8px)*.5);justify-content:center;width:max-content;margin-inline:auto}
.c-pick-cal .head{font:600 var(--c-t0,.75rem)/1 var(--c-body,inherit);letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-soft,rgb(0 0 0 / .55));display:grid;place-items:center;
  height:calc(var(--c-u,8px)*3)}
.c-pick-cal > span:not([data-day]):not(.head){aspect-ratio:1}
.c-pick-cal [data-day]{aspect-ratio:1;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--c-r,10px);border:var(--c-bw,1px) solid transparent;background:none;color:inherit;
  font:var(--c-t1,.9rem)/1 var(--c-body,inherit);font-variant-numeric:tabular-nums}
.c-pick-cal [data-day]:hover{border-color:var(--c-line,rgb(0 0 0 / .16))}
.c-pick-cal [data-day].on{background:var(--c-ink,#111);color:var(--c-paper,#fff)}
.c-pick-cal [data-day].out{opacity:.28;pointer-events:none}
/* THE CLOCK — two columns of numbers that scroll, because a day has 24 hours and a drop-down is
   the browser's control again. */
.c-pick-t{display:grid;grid-template-columns:1fr 1fr;gap:var(--c-u,8px);
  margin-top:calc(var(--c-u,8px)*1.5)}
.c-pick-col{max-height:calc(var(--c-u,8px)*26);overflow-y:auto;scrollbar-width:thin;
  display:grid;gap:calc(var(--c-u,8px)*.5);padding-inline-end:calc(var(--c-u,8px)*.5)}
.c-pick-col button{border:var(--c-bw,1px) solid transparent;background:none;color:inherit;
  border-radius:var(--c-r,10px);padding:calc(var(--c-u,8px)*1) calc(var(--c-u,8px)*1.5);cursor:pointer;
  font:var(--c-t1,.9rem)/1 var(--c-body,inherit);font-variant-numeric:tabular-nums;text-align:center}
.c-pick-col button.on{background:var(--c-ink,#111);color:var(--c-paper,#fff)}
.c-pick-foot{display:flex;justify-content:space-between;gap:var(--c-u,8px);
  margin-top:calc(var(--c-u,8px)*1.5)}
.c-pick-foot button{border:var(--c-bw,1px) solid var(--c-line,rgb(0 0 0 / .16));background:none;
  color:inherit;border-radius:var(--c-r,10px);
  padding:calc(var(--c-u,8px)*1) calc(var(--c-u,8px)*2);cursor:pointer;
  font:var(--c-t1,.9rem)/1 var(--c-body,inherit)}
.c-pick-foot .c-pick-ok{background:var(--c-ink,#111);color:var(--c-paper,#fff);
  border-color:var(--c-ink,#111)}
@media (max-width:640px){
  .c-pick-veil{background:rgb(0 0 0 / .32)}
  .c-pick-pop{inset:auto 0 0 0;width:auto;max-width:none;
    border-radius:var(--c-r,10px) var(--c-r,10px) 0 0;
    padding:calc(var(--c-u,8px)*3) calc(var(--c-u,8px)*2) calc(var(--c-u,8px)*3 + env(safe-area-inset-bottom))}
}

/**
 * THE TIMES ARE A LIST, NOT A STRIP.
 *
 * They were chips in a horizontal scroller: on a desk that ran the free times off the side of the
 * column and under the calendar next to it, and a person comparing 09:00 with 15:15 had to swipe
 * between them. A day has eight or ten of these and they are the column's whole content — so they
 * stack, each one the width of the column, each one a target.
 */
:is(#clay-page,#design-sheets) .c-times{display:grid;gap:calc(var(--c-u));
  max-height:calc(var(--c-u)*52);overflow-y:auto;overscroll-behavior:contain}
:is(#clay-page,#design-sheets) .c-times span{font:var(--c-weight) var(--c-t1)/1 var(--c-display);
  padding:calc(var(--c-u)*1.5) calc(var(--c-u)*2);border-radius:var(--c-r);cursor:pointer;
  border:calc(var(--c-bw)*2) solid var(--c-line);text-align:center;min-height:calc(var(--c-u)*5);
  font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets) .c-times span.on{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
:is(#clay-page,#design-sheets) .c-times p{font:var(--c-t1)/1.45 var(--c-body);color:var(--c-soft);margin:0}
/**
 * WHAT THEY PICKED, AND THE WAY BACK — the times' replacement, so it stands where they were.
 *
 * A choice you cannot see is a choice you cannot check, and one you cannot undo is a page people
 * leave rather than risk. Both, in one control.
 */
:is(#clay-page,#design-sheets) .c-chosen{display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--c-u)*2);width:100%;text-align:left;cursor:pointer;
  padding:calc(var(--c-u)*1.5) calc(var(--c-u)*2);border-radius:var(--c-r);
  border:calc(var(--c-bw)*2) solid var(--c-line);background:none;color:inherit;
  margin-bottom:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .c-chosen b{font:var(--c-weight) var(--c-t2)/1.2 var(--c-display)}
:is(#clay-page,#design-sheets) .c-chosen span{font:var(--c-t1)/1 var(--c-body);color:var(--c-soft);
  text-decoration:underline;flex:0 0 auto}
/* THE LINE UNDER A FIELD — an explanation, which is why it is not the placeholder. See `field()`. */
:is(#clay-page,#design-sheets) .c-field .c-note{font:var(--c-t1)/1.45 var(--c-body);color:var(--c-soft);
  margin-top:calc(var(--c-u)*.5)}
/* THE LABEL SITS OVER THE ANSWERS, not beside them. Beside them, in a column a third of a page
   wide, "How many" breaks onto two lines and the chips lose a third of their room to it. */
:is(#clay-page,#design-sheets) .c-party{display:flex;align-items:center;gap:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .c-party:has(.c-party-n){display:grid;justify-items:start;
  gap:calc(var(--c-u))}
/* the chips do not scroll — under eight of them there is nothing to scroll to, and a strip that
   scrolls when it does not need to is a strip somebody swipes at and nothing happens */
:is(#clay-page,#design-sheets) .c-party-n{overflow:visible;flex-wrap:wrap;margin-inline:0;padding-inline:0}
/* THE DAY OVER THE TIMES. Its own line, because it is the answer to "which day am I looking at". */
:is(#clay-page,#design-sheets) [data-daylabel]:empty{display:none}
:is(#clay-page,#design-sheets) [data-daylabel]{margin:0 0 calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .c-party b{font:var(--c-weight) var(--c-t3)/1 var(--c-display);min-width:calc(var(--c-u)*3);
  text-align:center;font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets) .c-quote-line{font:var(--c-t2)/1.5 var(--c-body);color:var(--c-soft);margin:0}
:is(#clay-page,#design-sheets) .c-book-two{align-items:start}
@container (max-width:640px){:is(#clay-page,#design-sheets) .c-book-two{grid-template-columns:1fr}}

/* ── pages ─────────────────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-page{padding-top:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .c-group{margin-top:calc(var(--c-u)*7*var(--c-density))}
:is(#clay-page,#design-sheets) .c-group[hidden]{display:none}
:is(#clay-page,#design-sheets) .c-prose{font:var(--c-t3)/1.65 var(--c-body);max-width:62ch;margin:0}
/**
 * A DOCUMENT HAS RHYTHM, and this had none.
 *
 * `.c-prose` is several documents in a row — a heading, its paragraphs, the next heading — and it
 * set a measure and a leading and said nothing about the space between any of them. So Privacy's
 * one line and the word Terms sat one on top of the other with no more air than two sentences of
 * the same paragraph, and nothing on the page said where one document ended. "can use some more
 * spacing and you got them refersed".
 *
 * Off the same scale as everything else. A heading opens a document, so the space goes ABOVE it —
 * and never above the first one, which would push the whole column down from the top of the band.
 */
:is(#clay-page,#design-sheets) .c-prose > .c-title{margin:calc(var(--c-u)*7) 0 calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-prose > .c-title:first-child{margin-top:0}
:is(#clay-page,#design-sheets) .c-prose > .c-line{margin:0 0 calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-prose > .c-line:last-child{margin-bottom:0}
:is(#clay-page,#design-sheets) .c-shot{padding:0;border:0;background:none;cursor:pointer;display:block}
:is(#clay-page,#design-sheets) .c-week{max-width:calc(var(--c-u)*52)}

/* ── the owner's way in ────────────────────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .c-doc{display:block}
/* the band is the positioning context; the gear itself is the editor's control and the editor
   styles it — a second set of rules for the same button is two buttons drifting apart */
:is(#clay-page,#design-sheets) .c-own{position:relative}

/* ── questions ─────────────────────────────────────────────────────────────────────────────
   A feature's own, answered on its page. One open at a time is the browser's job, not ours. */
/* the proof line under a header's button: the faces, then the words */
:is(#clay-page,#design-sheets) .c-proof{display:flex;align-items:center;gap:calc(var(--c-u)*1.5);
  margin-top:calc(var(--c-u)*3);font:var(--c-t1)/1.4 var(--c-body);color:var(--c-soft)}
:is(#clay-page,#design-sheets) .c-proof.c-mid{justify-content:center}
/**
 * THE PROOF BELONGS TO THE BUTTON, so it sits closer to it than the button sits to the heading.
 *
 * Three gaps down one column and three different numbers: 1.5 inside the heading, 4 to the button,
 * 3 to the rating under it. One ladder instead — 1.5 inside a group, 2 between a thing and its
 * footnote, 4 between groups — so "same spacing for element" is a rule rather than a coincidence.
 *
 * The margin BELOW it is gone: it was there to hold the set off the score, and it could not do
 * that job (the proof is the last child of the words, so `:last-child` zeroed it and the set is
 * the words' SIBLING anyway). The stack's own gap does it now, for every kind of thing.
 */
:is(#clay-page,#design-sheets) .c-proof{margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-faces{display:flex}
:is(#clay-page,#design-sheets) .c-faces i{width:calc(var(--c-u)*4);height:calc(var(--c-u)*4);border-radius:999px;
  background-size:cover;background-position:center;border:2px solid var(--c-paper);margin-left:-8px}
:is(#clay-page,#design-sheets) .c-faces i:first-child{margin-left:0}
:is(#clay-page,#design-sheets) .c-proof-t b{color:var(--c-ink);font-weight:700}
/**
 * THE PROOF TAKES THE DERIVED INK LIKE EVERY OTHER ROLE — no literal colour here.
 *
 * There were two lines here forcing `rgba(255,255,255,.8)` and `#fff` on a photo band and an ink
 * band. They were written when both of those were always DARK, and they opted the one line on the
 * page that carries a business's rating out of the whole contrast derivation: `--c-soft` and
 * `--c-ink` are already mixed against `--g`, the surface each band is actually wearing, and any
 * literal written on top of that is a colour nothing can check.
 *
 * Both cases arrived at once with the new themes. Salon's hero words sit on a PANEL of paper inside
 * a photo band, so white-on-white measured 1.14:1. Vitrine's `ink` band is the LIGHT one — `--c-flip`
 * means "the other surface", not "the dark one" — so its proof measured 1.19:1. Reported with a
 * screenshot of "4.7 ★ 1054 Google" and the fair question: we have a contrast rule, why is this
 * possible? Because these two lines were not obeying it.
 *
 * `parts.test.js` now measures every text role against every ground on every theme, which is the
 * check that would have caught it and will catch the next literal.
 */

/* a fact: the number that carries, and what it is underneath */
/* the facts strip: a year, a count, a thing that is true and short. It is a second thought after
   the paragraph, not the next line of it, so it stands off from what it follows. */
:is(#clay-page,#design-sheets) .c-facts{margin-top:calc(var(--c-u)*4);margin-bottom:calc(var(--c-u)*4)}
/* a single photograph on a page of prose: a figure, not a billboard the width of the measure */
:is(#clay-page,#design-sheets) .c-shots-one{margin-top:calc(var(--c-u)*5);max-width:min(720px,100%)}
/* a page heading and the block it introduces are one thing: no seam, no second rhythm */
:is(#clay-page,#design-sheets) .c-page-lead{padding-bottom:0}

/* ── the page header ───────────────────────────────────────────────────────────────────────
   One band at the top of every page: the overline, the heading, the line under it, and the
   feature's first photograph beside them. It pays its own rhythm above and none below, because
   the band under it is the thing this page is — and the DESCENDERS get room: with no bottom
   padding at all the tail of a "Q" was painted over by the next band's ground. */
:is(#clay-page,#design-sheets) .c-page-head{padding-bottom:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-page-head + .c-band{border-top:0}
:is(#clay-page,#design-sheets) .c-page-head .c-two{gap:calc(var(--c-u)*5*var(--c-density))}
:is(#clay-page,#design-sheets) .c-page-head .c-media{border-radius:var(--c-r)}
/* the page's own heading is the biggest type on it, and it needs the leading a display face with
   descenders actually occupies */
:is(#clay-page,#design-sheets) .c-page-head h1.c-title{padding-bottom:.06em}

/* ── a place ───────────────────────────────────────────────────────────────────────────────
   The visit page: one panel per address — its picture or its map, then its overline, its street,
   whether it is open right now, every way to reach it, and the week it keeps. */
:is(#clay-page,#design-sheets) .c-place{display:grid;gap:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .c-place + .c-place{margin-top:calc(var(--c-u)*7*var(--c-density));
  padding-top:calc(var(--c-u)*7*var(--c-density));border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .c-place .c-media{border-radius:var(--c-r)}
:is(#clay-page,#design-sheets) .c-place-t{display:grid;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-place-t .c-week{max-width:none;margin-top:calc(var(--c-u)*1)}
/* one place has the room for the two columns; several are a grid of panels and each is one column */
:is(#clay-page,#design-sheets) .c-place-one{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
@container (max-width:720px){:is(#clay-page,#design-sheets) .c-place-one{grid-template-columns:1fr}}
:is(#clay-page,#design-sheets) .c-places{align-items:start}

/* the street itself — a fact under the heading, at the size of a line and the weight of a name */
/* AN ADDRESS IS A FACT, NOT A HEADING. Set in the display face one step under the title it sat
   directly below, a long street ran to three lines of serif and came out larger than the
   description above it - the hierarchy exactly inverted. It is the label voice: small, tracked,
   quiet, and the same voice the footer says it in. */
:is(#clay-page,#design-sheets) .c-place-a{font:var(--c-label-weight) var(--c-t1)/1.5 var(--c-label);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);margin:0;
  letter-spacing:var(--c-track);max-width:34ch}
/* open right now — a dot and the sentence, the same answer the footer gives */
:is(#clay-page,#design-sheets) .c-now{display:flex;align-items:center;gap:calc(var(--c-u)*1.5);margin:0;
  font:600 var(--c-t1)/1.4 var(--c-body);color:var(--c-soft)}
:is(#clay-page,#design-sheets) .c-now i{width:8px;height:8px;border-radius:999px;flex:0 0 auto;
  background:color-mix(in oklab,currentColor 45%,transparent)}
:is(#clay-page,#design-sheets) .c-now.c-on{color:var(--c-ink)}
:is(#clay-page,#design-sheets) .c-now.c-on i{background:#2fbf6b}
:is(#clay-page,#design-sheets) .c-g-ink .c-now.c-on,:is(#clay-page,#design-sheets) .c-g-accent .c-now.c-on{color:inherit}
:is(#clay-page,#design-sheets) .c-page-lead + .c-band{border-top:0}
:is(#clay-page,#design-sheets) .c-fact{display:flex;flex-direction:column;gap:calc(var(--c-u)*.5)}
/* `inherit`, NOT `--c-ink`. A fact's number was pinned to the page's ink, so on the one band a
   design turns dark it was near-black on near-black — the number invisible and its label under it
   readable, which reads as a layout that failed to load. Everything else on a band takes the
   band's colour; this was the one thing that did not. */
:is(#clay-page,#design-sheets) .c-fact b{font:var(--c-weight) var(--c-t4)/1 var(--c-display);color:inherit}
:is(#clay-page,#design-sheets) .c-fact span{font:var(--c-t1)/1.3 var(--c-body);color:var(--c-soft)}
:is(#clay-page,#design-sheets) .c-sub{font:600 var(--c-t3)/1.2 var(--c-display);margin:calc(var(--c-u)*5) 0 calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .c-fine{font:var(--c-t1)/1.5 var(--c-body);color:var(--c-soft);margin:calc(var(--c-u)*2) 0 0}
/* a small line under a centred band — the attribution on the reviews, sitting with the button
   rather than hanging off the left edge under whichever quote came first */
:is(#clay-page,#design-sheets) .c-fine.c-mid{text-align:center}

/* A CENTRED BAND CENTRES ITS HEADING. The questions are read, not admired: `c-in-mid` sets
   `text-align:center` on the whole band, so every answer came out centred under a left-aligned
   question — which is what "some faqs are centered text..?" is. */
:is(#clay-page,#design-sheets) .c-asks{margin-top:calc(var(--c-u)*3);text-align:left}
/**
 * ENOUGH OF THEM AND THEY READ AS TWO COLUMNS — TWO, which is what this has always claimed.
 *
 * `auto-fit` with a 280px minimum is not two columns, it is "as many as fit", and on a 1400px
 * measure that is four: six questions came out as four columns one line tall, which reads as a
 * row of labels rather than a set of questions. The block asked for two and the browser answered.
 *
 * The same shape as the capped grid — the larger of the minimum and half the measure — so two is
 * the most it can ever be, and one is what it becomes when there is not room for two.
 */
:is(#clay-page,#design-sheets) .c-asks-two{display:grid;column-gap:calc(var(--c-u)*5);
  grid-template-columns:repeat(auto-fit,minmax(max(280px,calc((100% - var(--c-u)*5) / 2)),1fr))}
:is(#clay-page,#design-sheets) .c-ask{border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .c-ask summary{cursor:pointer;list-style:none;padding:calc(var(--c-u)*2) 0;
  font:var(--c-weight) var(--c-d2)/1.3 var(--c-display);text-transform:var(--c-case);
  letter-spacing:var(--c-track);display:flex;justify-content:space-between;gap:var(--c-u)}
:is(#clay-page,#design-sheets) .c-ask summary::-webkit-details-marker{display:none}
:is(#clay-page,#design-sheets) .c-ask summary::after{content:"+";font-weight:400;opacity:.5}
:is(#clay-page,#design-sheets) .c-ask[open] summary::after{content:"–"}
:is(#clay-page,#design-sheets) .c-ask .c-line{padding-bottom:calc(var(--c-u)*3);max-width:64ch}
/* A RUN OF QUESTIONS ABOUT ONE THING — the questions page, under the feature each set belongs to.
   The heading uses the same `c-sub` every other run-of-writing does; what this adds is the space
   between one run and the next, and no space above the first (the band's head already paid it). */
:is(#clay-page,#design-sheets) .c-ask-set{text-align:left}
:is(#clay-page,#design-sheets) .c-ask-set + .c-ask-set{margin-top:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .c-ask-set > .c-sub{margin-top:calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .c-ask-set:first-child > .c-sub{margin-top:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .c-ask-set .c-asks{margin-top:calc(var(--c-u)*1.5)}

/* ============================================================================================
   THE LIBRARY'S SHAPES — `l-…`

   Every rule here belongs to a shape in lib/designs/library.js, which is the /wireframe catalogue
   ported to real data. They are LAYOUT: where things go, in tokens, with no colour and no size of
   their own. A theme reaches them by stating a taste, never by naming them.

   `c-…` is a component — a row, a card, a field — shared by every shape. `l-…` is one shape's own
   arrangement of them.

   AND THE GRID GOES ON `> .c-in`. `band()` wraps what it is given in `.c-in` (the measure and the
   gutter) unless the shape asked to be bare, so a grid written on the shape itself lays out ONE
   child and every column silently collapses to a stack. It looks exactly like the shape ignoring
   its own rule.
   ========================================================================================== */

/**
 * AND THE SHEET IS A CONTAINER OF ITS OWN.
 *
 * `#design-sheets` is a sibling of the page, fixed over the whole window, so a shape inside it
 * measured the WINDOW and a basket in an 980px sheet on a 1600px screen never reached its narrow
 * arrangement — the two columns stayed side by side in a box half that wide. The sheet itself is
 * the container, named `page` like the page is, so every `@container page` rule in this file means
 * the same thing in both places and no shape needs a second answer for being in an overlay.
 */
:is(#clay-page,#design-sheets) .sheet{container-type:inline-size;container-name:page}
/**
 * THE MENU IS THE FOOTER, FROM THE OTHER END.
 *
 * The drawer is a sheet, so it took the sheet layer's paper — which on a light site is a white
 * card of links over a white page, the one overlay on the site with nothing to say it is an
 * overlay. It is the same list of every page the footer holds, opened from the other end of the
 * screen, and the footer has been the dark band on a light site since it existed. "the menu is
 * white.. on light mode.. i lie it dark like the footer".
 *
 * `--c-flip` is that band, so this is not a colour: it is the same token, and it follows a theme
 * and a mode without either of them saying anything. On a dark site the flip is the lighter of the
 * two, so the drawer lifts off the page there instead of sinking into it — which is what an
 * overlay is for either way.
 *
 * `.sheet-host[data-navall] .sheet` rather than `[data-navall] .sheet`: a theme paints `.sheet` at
 * id + two classes, and this has to outrank it without being marked important.
 */
:is(#clay-page,#design-sheets) .sheet-host[data-navall] .sheet{
  --g:var(--c-flip);background:var(--g);color:var(--c-ink);border-color:var(--c-line)}
/* the grab handle needs no rule of its own: it is already `--c-line`, and `--c-line` is derived
   from `--g` above, so it follows the drawer onto the dark by itself. */

/* ── the sheet layer ── it comes UP from the bottom, like every sheet on a phone ────────────
 *
 * A SHEET IS NOT A DIALOG. Both themes positioned their own: fixed, centred, floating in the
 * middle of the screen — which is a desktop alert box, and it is what everything that is not a
 * phone app looks like. A sheet slides up from the edge your thumb is already at, it is as wide as
 * the screen, and it stays attached to that edge. The editor's own panels do exactly this; the
 * sites they build did not.
 *
 * IT IS HERE, ONCE. Geometry is never a theme's — a theme states paper, ink, border and shadow, and
 * two themes each positioning the same overlay is two descriptions of one behaviour, which is the
 * whole disease this layer was rebuilt to end.
 */
/**
 * THE PAGE UNDER IT DOES NOT MOVE.
 *
 * A sheet takes the screen, and a screen that still scrolls behind it is two things moving at once
 * under one finger: you drag the basket and the shop slides past behind it. `overscroll-behavior`
 * on the sheet stops the CHAIN once the sheet has been scrolled to its end; it does nothing about
 * a drag that starts on the veil, which is most of the screen.
 *
 * `overflow:hidden` ALONE IS NOT A LOCK. It is the answer on a desktop and it is ignored on a
 * phone: iOS Safari scrolls the document anyway, so on the device where a sheet is most of the
 * product, the whole page went on sliding under it. The lock that actually holds is taking the
 * body out of the flow — and that loses your place, so the client puts the offset on as `top` and
 * scrolls back to it on the way out. See `lock()` in design-client.js; without it this rule is
 * still correct, it simply pins the page at the top instead of where you were.
 */
body.sheet-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
/* THE EDITOR'S PANEL TAKES THE RIGHT OF THE SCREEN, and a fixed layer has to move out of its way
   or it opens underneath it. One theme knew this and the other did not — which is exactly the kind
   of thing a layer is for. Owner-only: `panel-open` is the editor's class and no visitor has it. */
body.panel-open :is(#clay-page,#design-sheets) .sheet-host{right:min(380px,92vw)}
:is(#clay-page,#design-sheets) .sheet-host{position:fixed;inset:0;z-index:80}
:is(#clay-page,#design-sheets) .sheet-veil{position:fixed;inset:0;display:flex;align-items:flex-end;
  justify-content:center;overflow:hidden;padding:0}
/* ONE PADDING, NAMED, because the sticky head has to cancel it to reach both edges and a second
   copy of the number is a head that stops short of the corner on one screen size. */
:is(#clay-page,#design-sheets) .sheet{--c-sheet-pad:var(--c-gut);
  width:100%;max-width:min(920px, 100%);margin:0;
  max-height:92svh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  border-radius:var(--c-r) var(--c-r) 0 0;
  padding:0 var(--c-sheet-pad) calc(var(--c-u)*4);
  animation:c-sheet-up .26s cubic-bezier(.22,.8,.3,1)}
/* THE GRAB HANDLE — it says which way this thing moves before anybody touches it. Drawn by the
   layer rather than by any sheet, so no drawing has to remember it. */
:is(#clay-page,#design-sheets) .sheet::before{content:"";display:block;width:calc(var(--c-u)*5);height:4px;
  border-radius:999px;background:var(--c-line);margin:calc(var(--c-u)*1.5) auto 0}
/**
 * THE WAY OUT NEVER SCROLLS AWAY.
 *
 * A basket with nine things in it, or a menu with sixty, put the Close button a screen and a half
 * above wherever you were reading — so the way out of a thing that covers the screen was the one
 * thing you could not see. The editor's own panels have always pinned their head; the sites they
 * build did not.
 *
 * `background:inherit` rather than a colour: the sheet is painted by the theme (and the photo
 * viewer is painted differently from the rest), so the head takes whatever the sheet it is in is
 * wearing and no theme has to state this twice.
 */
:is(#clay-page,#design-sheets) .sheet-head{position:sticky;top:0;z-index:3;background:inherit;
  margin-inline:calc(var(--c-sheet-pad) * -1);
  padding:calc(var(--c-u)*2) var(--c-sheet-pad)}
@keyframes c-sheet-up{from{transform:translateY(12%);opacity:.6}to{transform:none;opacity:1}}
/* ON A WIDE SCREEN it still comes from the bottom and still touches it — it simply stops being
   the whole width, because a form 1600px wide is a form nobody can read a line of. */
@media (min-width:940px){
  :is(#clay-page,#design-sheets) .sheet{--c-sheet-pad:calc(var(--c-u)*5)}
}
@media (prefers-reduced-motion:reduce){
  :is(#clay-page,#design-sheets) .sheet{animation:none}
}


/* ── the arrangements ──────────────────────────────────────────────────────────────────────
 * TWO SHAPES, WRITTEN ONCE, WHERE THERE WERE NINE RULES.
 *
 * `.l-hero` and `.l-capture` were both `5fr 7fr`. `.l-does-one`, `.l-about` and `.l-visit` were
 * all `1fr 1fr`. `.l-asks` and `.l-text` were both `4fr 8fr`. Each was written on a different day,
 * each repeated `display:grid` and the same gap, and each carried its own `@container` block
 * saying the same thing about a phone. Nine descriptions of two arrangements.
 *
 * A shape now says only what makes it different — its split, and where the two columns line up
 * against each other — and the arrangement says everything they share. That is R6 and R10 done as
 * the doc asks: ONE reflow rule per arrangement, and alignment owned by the arrangement rather
 * than restated per band.
 *
 * `--c-split` and `--c-align` are set on the same element that reads them, so a shape's rule is
 * two declarations rather than four, and adding a tenth beside band is a split.
 */
:is(#clay-page,#design-sheets) .c-arr-beside > .c-in,
:is(#clay-page,#design-sheets) .c-arr-aside > .c-in{
  display:grid;gap:calc(var(--c-u)*5)}
/* TWO ARRANGEMENTS, TWO NATURES, AND EACH ONE'S DEFAULT IS ITS OWN. `beside` is two halves that
   line up against each other; `aside` is a narrow heading column and a wide one of content, which
   reads from the TOP because the heading is short and the content is not. A shape says nothing
   unless it wants something other than its arrangement's usual — which is what a default is for,
   and it is why adding an aside band takes no CSS at all. */
:is(#clay-page,#design-sheets) .c-arr-beside > .c-in{
  grid-template-columns:var(--c-split, 1fr 1fr);align-items:var(--c-align, center)}
:is(#clay-page,#design-sheets) .c-arr-aside > .c-in{
  grid-template-columns:var(--c-split, 4fr 8fr);align-items:var(--c-align, start)}
/* R6 — ONE COLLAPSE RULE PER ARRANGEMENT, and this is the whole of it: on a phone the two columns
   become one, and the heading gets the band's full width back (see `--c-title-share`). */
@container (max-width:760px){
  :is(#clay-page,#design-sheets) .c-arr-beside > .c-in,
  :is(#clay-page,#design-sheets) .c-arr-aside > .c-in{grid-template-columns:1fr}
}
/* a band that is one column is one column — nothing to arrange, and no gap to leave between two
   things that are not there. Named so the stylesheet has an answer for every word in the
   vocabulary rather than three of them. */
:is(#clay-page,#design-sheets) .c-arr-centre > .c-in{display:block}
:is(#clay-page,#design-sheets) .c-arr-stack > .c-in{display:block}
:is(#clay-page,#design-sheets) .c-arr-rail > .c-in{display:block}
/**
 * A PICTURE STACKED UNDER THE WORDS IS NOT TOUCHING THEM.
 *
 * `media: centre` is the words and then the photograph, one under the other, and the column they
 * sit in is a plain block — so the two boxes met at the same pixel. The button is the last thing
 * in the words, and on a theme that gives it an offset shadow the button was ON the picture.
 * `beside` has a grid gap and never had this; the stacked arrangement had nothing.
 *
 * Either way up — `centre-below` puts the picture first — so it is the seam between the two that
 * is spaced, not one of them.
 */
/**
 * …AND NEITHER IS ANYTHING ELSE. THE WHOLE STACK HAS ONE GAP.
 *
 * This said it about a PICTURE and only about a picture, and a stacked band is `the words, then
 * the set` far more often than it is `the words, then a photograph`. The two were siblings in a
 * plain block with nothing between them, so on the reviews band the rating line sat directly on
 * top of the first card — the score and the quotation touching, with more air between the heading
 * and the button above them than between two different things. Reported as "spacing needs to be
 * better.. also make sure all elements like eyebrow, title, descrtiption, button etc.. have same
 * spacing for element".
 *
 * One rule for every child after the first, off the same scale, so a band's rhythm does not depend
 * on which KIND of thing happens to be under its words.
 */
:is(#clay-page,#design-sheets) :is(.c-arr-stack,.c-arr-centre) > .c-in > * + *{
  margin-block-start:calc(var(--c-u)*4)}

/* ── header/beside ── words on the floor of the narrow column, the picture beside them ────── */
:is(#clay-page,#design-sheets) .l-hero > .c-in{--c-split:5fr 7fr;--c-align:stretch}
/**
 * THE WORDS ARE CENTRED AGAINST THE PICTURE — R10, and this is the example the rule was written
 * from: text one side, image the other, the text block always centred vertically against it.
 *
 * They stood on the floor of the column. Beside a picture that is most of the screen tall, "on the
 * floor" is at the bottom of the screen: the name of the business was the last thing on the first
 * screenful instead of the first. The alignment belongs to the arrangement — no theme can move it,
 * so no theme can break it.
 */
:is(#clay-page,#design-sheets) .l-hero-w{display:flex;flex-direction:column;justify-content:center;
  padding-block:calc(var(--c-u)*3);
  --c-title-share:.40}   /* five of the band's twelve columns — see `--c-title-share` */
/* AND A CEILING OF ITS OWN, lower than the page's. A hero is the one band where the whole point is
   that the words next to it are read without scrolling, so it stops short of a screenful rather
   than filling one. `height:100%` alone let the row — which this box was itself setting — decide. */
/* AND IT IS THE COLUMN. `aspect-ratio` with a definite height gives a definite WIDTH, so the
   picture came out narrower than the half of the page it was in and sat against the words with a
   third of the band empty to the right of it — the band is drawn edge to edge and the photograph
   stopped 290px short of the edge. Both dimensions definite means the ratio steps aside and
   `object-fit:cover` does the cropping, which is what it is there for. */
:is(#clay-page,#design-sheets) .l-hero-p .c-media{width:100%;height:100%;
  min-height:min(48svh,520px);max-height:min(68svh,720px)}
:is(#clay-page,#design-sheets) .l-hero-solo > .c-in{grid-template-columns:1fr}
:is(#clay-page,#design-sheets) .l-hero-solo .l-hero-w{--c-title-share:1}
@container (max-width:820px){
  /* THE HERO IS THE ONE THAT COLLAPSES EARLIER — 820, not the arrangement's 760, because the
     picture beside it is most of a screen tall and two narrow columns of that are worse than one
     of each. It is the exception, so it is the only one that still says anything about a phone. */
  :is(#clay-page,#design-sheets) .l-hero > .c-in{grid-template-columns:1fr}
  :is(#clay-page,#design-sheets) .l-hero .l-hero-w{--c-title-share:1}
  :is(#clay-page,#design-sheets) .l-hero-p .c-media{min-height:0}
}

/* ── header/over ── the words on the photograph ──────────────────────────────────────────── */
/* THE PICTURE IS THE BAND. `c-behind` holds it and `band()` gives the ground `photo`, which is
   where the white type comes from; this only has to say how tall the room is and stop the words
   spreading across a whole screen. A measure is a measure whatever is behind it. */
:is(#clay-page,#design-sheets) .l-hero-over{min-height:min(78svh,760px);display:grid;
  align-content:center}
:is(#clay-page,#design-sheets) .l-hero-over .c-head{max-width:var(--c-measure);margin-inline:auto}

/* ── header/stack ── the name, then the room ─────────────────────────────────────────────── */
/* THE WORDS FIRST AND NOTHING BESIDE THEM, so they take the measure rather than the band, and the
   photograph under them takes the whole of it. The gap is the one between a head and what it
   introduces, which every other band uses too. */
:is(#clay-page,#design-sheets) .l-hero-top > .c-in{display:grid;gap:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-hero-top .l-hero-w{max-width:var(--c-measure);margin-inline:auto}
:is(#clay-page,#design-sheets) .l-hero-wide .c-media{width:100%;
  max-height:min(62svh,640px)}

/* ── does/cards ── one way in is a split: its words one half, its picture the other ────── */
:is(#clay-page,#design-sheets) .l-does-one > .c-in{--c-split:1fr 1fr;--c-title-share:.46}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-does-one{--c-title-share:1} }

/* ── shop/shelf ── a rail at every width, not only on a phone ────────────────────────────── */
/* THE RAIL RULE AT THE FOOT OF THIS FILE IS FOR A PHONE — every row of cards becomes one there.
   This is a row that IS one, on a desk as well, because the shelf is the point rather than the
   fallback. Same behaviour, same bleed, said here because it is a different decision. */
:is(#clay-page,#design-sheets) .l-shelf-h{display:flex;justify-content:space-between;
  align-items:flex-end;gap:calc(var(--c-u)*3);margin-bottom:calc(var(--c-u)*4)}
/* AND THE CARDS LINE UP ACROSS IT. A shelf of six with notes of different lengths put every price
   at a different height, which reads as six cards that failed to settle rather than one shelf.
   Four rows, and each card is a subgrid of them — the same trick a row of cards already uses, so
   the photograph, the name, the note and the price share a line all the way along. */
:is(#clay-page,#design-sheets) .l-shelf{display:grid;grid-auto-flow:column;
  grid-template-rows:auto auto 1fr auto;
  /* A BARE PERCENTAGE, NOT `minmax(0, …)`. In `minmax(0, 23%)` the base is 0 and 23% is only a
     growth LIMIT — and a rail overflows, so there is no free space to grow into and every track
     collapses to whatever its content happens to measure. That is how a shelf card came out 146px
     wide inside a 1060px band. `23%` alone is `minmax(23%, 23%)`, which is the intent. Same rule
     as the shared rail at the foot of this file, which says it the same way. */
  grid-auto-columns:var(--c-shelf,23%);gap:var(--c-gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:var(--c-u)}
/* …and the gutter only where there IS one — see the rails and the chips above */
:is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .l-shelf{
  margin-inline:calc(var(--c-gut) / -2);padding-inline:calc(var(--c-gut) / 2);
  scroll-padding-inline:calc(var(--c-gut) / 2)}
:is(#clay-page,#design-sheets) .l-shelf::-webkit-scrollbar{display:none}
:is(#clay-page,#design-sheets) .l-shelf > *{scroll-snap-align:start;
  grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:calc(var(--c-u)*1)}
@container (max-width:760px){
  :is(#clay-page,#design-sheets) .l-shelf{--c-shelf:72%}
  :is(#clay-page,#design-sheets) .l-shelf-h{flex-direction:column;align-items:flex-start}
}

/* ── shop/one ── one product, the photograph square beside it ────────────────────────────── */
:is(#clay-page,#design-sheets) .l-shop-one{--c-split:6fr 6fr}

/* ── about/facts ── the numbers across the band, the picture wide under them ─────────────── */
:is(#clay-page,#design-sheets) .l-about-f > .c-in{display:grid;gap:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-about-fw{max-width:var(--c-measure)}
/* BIGGER THAN THE FACTS IN A CORNER, because here they ARE the band. `--c-min` is what decides how
   many share a row, and it is the only thing this needs to say. */
:is(#clay-page,#design-sheets) .l-facts-big{--c-min:200px;gap:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-facts-big .c-title{font-size:var(--c-t5)}
/* THE PICTURE IS THE FLOOR OF THIS BAND, edge to edge of the page column and no taller than a
   third of a screen — it is the room the facts happened in, not the subject. */
:is(#clay-page,#design-sheets) .l-about-p .c-media{width:100%;max-height:min(38svh,380px)}

/* ── reviews/one ── one quotation, at the size it is worth ───────────────────────────────── */
/* THE MEASURE STILL HOLDS. A quotation set large is still read, so it takes the heading's measure
   rather than the band — R4. Everything else here is the room around it. */
:is(#clay-page,#design-sheets) .l-proof-one{text-align:center}
:is(#clay-page,#design-sheets) .l-proof-q{margin:calc(var(--c-u)*3) auto;
  max-width:var(--c-cap-title);font:var(--c-weight) var(--c-t4)/1.25 var(--c-display);
  letter-spacing:var(--c-track)}
:is(#clay-page,#design-sheets) .l-proof-one .l-proof-s{justify-content:center}

/* ── close/beside ── the words one side, the button the other ────────────────────────────── */
:is(#clay-page,#design-sheets) .l-close-b{--c-split:7fr 5fr;--c-align:center}
:is(#clay-page,#design-sheets) .l-close-a{display:flex;justify-content:flex-end}
@container (max-width:760px){
  :is(#clay-page,#design-sheets) .l-close-a{justify-content:flex-start}
}

/* ── does/rows ── one way in per row, the sides swapping down the page ───────────────────── */
/* THE SWAP IS THE POINT. Every row the same way round is a column of the same picture in the same
   place, which reads as a table; alternating is what makes it a page. It is the arrangement's, not
   the theme's — R10 — so nothing can turn it off. */
:is(#clay-page,#design-sheets) .l-does-rows{display:grid;gap:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-does-row{display:grid;grid-template-columns:1fr 1fr;
  gap:calc(var(--c-u)*4);align-items:center}
:is(#clay-page,#design-sheets) .l-does-row:nth-child(even) .l-does-row-p{order:2}
:is(#clay-page,#design-sheets) .l-does-row-t{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*1.5);align-items:flex-start;max-width:var(--c-cap-note)}
@container (max-width:760px){
  :is(#clay-page,#design-sheets) .l-does-row{grid-template-columns:1fr}
  :is(#clay-page,#design-sheets) .l-does-row:nth-child(even) .l-does-row-p{order:0}
}

/* ── does/tiles ── edge to edge, the name on the photograph ──────────────────────────────── */
/* THE SPACE BETWEEN TILES IS THE THEME'S, NOT THIS FILE'S.
   This declared `gap:0` — tiles touching was the whole idea of the drawing. But how much air sits
   between two things is exactly the sort of decision a theme already makes everywhere else on the
   page, and it has a token for it: "i feel like the theme decides the space between the cta's".
   So it takes `--c-gap` like every other set. A theme that wants them touching sets it to zero,
   and that is a decision it makes rather than one this drawing makes for it.
   The heading above them keeps the page's own column either way, because a heading edge to edge
   is a heading with nowhere to start. */
:is(#clay-page,#design-sheets) .l-does-tiles-b{padding-bottom:0}
:is(#clay-page,#design-sheets) .l-does-tiles-b > .c-in{padding-bottom:calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .l-does-tiles{display:grid;gap:var(--c-gap);
  grid-template-columns:repeat(var(--c-tiles,3),minmax(0,1fr))}
:is(#clay-page,#design-sheets) .l-does-tile{position:relative;display:block;padding:0;
  border:0;background:none;overflow:hidden;isolation:isolate;text-decoration:none;color:inherit;
  /* THE TILE HOLDS THE SHAPE, NOT THE PICTURE INSIDE IT. A tile with no photograph is the theme's
     own fill with the words on it — still a tile — and without a ratio on the tile itself that
     case collapsed to the height of two lines of type while its neighbours stayed square. */
  aspect-ratio:var(--c-ar,4/3);background:var(--c-fill)}
:is(#clay-page,#design-sheets) .l-does-tile-p{position:absolute;inset:0;width:100%;height:100%;
  aspect-ratio:auto;border-radius:0;margin:0}
/**
 * THE FAN, THE ASIDE AND THE WALL ARE GONE — and so is every rule that only they read.
 *
 * Three review versions were judged at /wireframe and thrown out by name: "remove fan for
 * mobile", "aside seems the same as standard.. so remove", "wall remove..". A class with no
 * drawing is a rule nobody can reach and a maintenance cost for ever, so the CSS goes with the
 * drawings. `standard` and `marquee` are what is left, and the shared rail in `.c-grid` is what
 * keeps reviews horizontal on a phone.
 */


/**
 * REVIEWS, AS A RAIL THAT MOVES ON ITS OWN — `reviews/marquee`.
 *
 * A row that drifts sideways forever, so the band reads as a wall of voices rather than as three
 * somebody chose. The list is drawn twice and the run is moved by exactly HALF its width, so the
 * second copy arrives as the first leaves and the seam is invisible.
 *
 * `overflow:hidden` on the frame and `overflow-x` nowhere: the page must never scroll sideways
 * (scripts/check-overflow), and a marquee that a visitor can also scroll is two mechanics arguing.
 */
/* THE HEADING STAYS WHERE EVERY OTHER HEADING IS, and only the rows break out.
   This first zeroed the band's inset and put the gutter back on the head instead — the same idea
   said twice, and it came out wrong by the difference between them: the heading sat further in
   than every other band on the page. So the band is untouched and the ROWS reach past it.
   `overflow-x:clip` ON THE BAND, because reaching past it is exactly how a drawing makes the PAGE
   scroll sideways — which it did, at 390. `clip` rather than `hidden`: `hidden` would make the
   band a scroll container and swallow the sticky navigation with it. */
:is(#clay-page,#design-sheets) .l-rev-marquee-b{overflow-x:clip}
:is(#clay-page,#design-sheets) .l-rev-rows{margin-inline:calc(var(--c-gut) * -1)}
:is(#clay-page,#design-sheets) .l-rev-marquee{overflow:hidden;
  /* THE ENDS FADE, so a card does not appear and vanish at a hard edge. `mask` rather than a
     gradient laid over the top, which would need the band's ground and get it wrong on every
     theme that paints its own. */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent)}
/* THE HEAD OF A BAND ENDS SOMEWHERE. `.c-head + *` gives the space under a HEADING, but the score
   and the button that follow it are in the head's own wrapper — so the wrapper ended flush against
   the set and `4.8 ★ 646 Google` sat directly on top of the first review. Reported as "on the
   standard the spacing is off". The wrapper is what needs the space, not the heading inside it. */
:is(#clay-page,#design-sheets) .c-in > div:has(> .c-head) + .c-grid,
:is(#clay-page,#design-sheets) .c-in > div:has(> .c-head) + .c-rows,
:is(#clay-page,#design-sheets) .c-in > div:has(> .c-head) + .c-strip{
  margin-top:calc(var(--c-u) * 4 * var(--c-density))}

/* THE SCORE AND THE WAY OUT, between the heading and the reviews — the same two things the
   dialled band puts there, so a version cannot quietly drop the most persuasive line on the page. */
:is(#clay-page,#design-sheets) .l-rev-top{display:flex;flex-direction:column;
  align-items:flex-start;gap:calc(var(--c-u)*2);margin-bottom:calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .c-mid .l-rev-top,
:is(#clay-page,#design-sheets) .c-in-mid .l-rev-top{align-items:center}

/* TWO ROWS, and the space between them is the theme's like every other gap on the page */
:is(#clay-page,#design-sheets) .l-rev-rows{display:grid;gap:var(--c-gap);max-width:none}
:is(#clay-page,#design-sheets) .l-rev-run{display:flex;width:max-content;
  animation:l-rev-drift 60s linear infinite}
/* THE SECOND ROW GOES THE OTHER WAY. Both rows drifting together is a conveyor belt; opposed, the
   band reads as a room of voices — which is the reference, and the whole reason there are two.
   `reverse` rather than a second keyframe, so there is one description of the movement. */
:is(#clay-page,#design-sheets) .l-rev-back{animation-direction:reverse}
:is(#clay-page,#design-sheets) .l-rev-lane{display:flex;gap:var(--c-gap);
  padding-right:var(--c-gap)}
/* A QUOTATION IN THE ROW IS A FIXED WIDTH, or the run has no length to animate and every card is
   a different size as the text changes. */
:is(#clay-page,#design-sheets) .l-rev-lane > *{flex:0 0 min(24rem, 78vw)}
@keyframes l-rev-drift { from { transform:translate3d(0,0,0) }
                         to   { transform:translate3d(-50%,0,0) } }
/* IT STOPS WHEN YOU WANT TO READ IT — a control that moves away from the pointer trying to reach
   it is a control nobody catches. Focus as well as hover, for a keyboard. */
:is(#clay-page,#design-sheets) .l-rev-marquee:hover .l-rev-run,
:is(#clay-page,#design-sheets) .l-rev-marquee:focus-within .l-rev-run{animation-play-state:paused}
/* …AND IT NEVER STARTS for somebody who asked their machine for less motion. They get the rail
   they would have had anyway: the same markup, pushed by hand. */
@media (prefers-reduced-motion: reduce){
  :is(#clay-page,#design-sheets) .l-rev-run{animation:none;width:auto;overflow-x:auto;
    scroll-snap-type:x proximity;scrollbar-width:none}
  :is(#clay-page,#design-sheets) .l-rev-run > [aria-hidden="true"]{display:none}
  :is(#clay-page,#design-sheets) .l-rev-lane > *{scroll-snap-align:start}
}
/* ON A PHONE IT DRIFTS FASTER over a narrower screen, or the same speed reads as stopped */
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-rev-run{animation-duration:38s}
}

/**
 * WHAT WE DO, AS COLOUR AND TYPE — `does/panels`, and there is no photograph in it.
 *
 * A slab of the theme's colour, a chip at the top, the name as large as a heading gets, and a `+`
 * on the floor with one line of small type beside it. It first carried a picture as well and came
 * out resembling two references at once and being neither; the row of tall photographs is
 * `does/tiles`, and this is the panel.
 *
 * EVERY COLOUR IS A TOKEN. Whether the slab is the theme's fill, its accent or a tint is the
 * theme's business — this file says only where things sit and that the panel is tall.
 */
:is(#clay-page,#design-sheets) .l-does-panels{display:grid;gap:var(--c-gap);
  grid-template-columns:repeat(var(--c-cols,2),minmax(0,1fr))}
/* THE RAIL RUNS OFF THE EDGE ON PURPOSE. `overflow-x` on the row only — the PAGE must never scroll
   sideways (scripts/check-overflow), which is the rule every rail on this site obeys. */
:is(#clay-page,#design-sheets) .l-does-panels-rail{grid-template-columns:none;
  grid-auto-flow:column;grid-auto-columns:min(22rem, 78%);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:var(--c-u)}
:is(#clay-page,#design-sheets) .l-does-panels-rail > *{scroll-snap-align:start}
/* THE PANEL IS TALL AND MOSTLY EMPTY ON PURPOSE — the words at the top, the way in on the floor,
   and the colour between them doing the work a photograph does everywhere else. */
:is(#clay-page,#design-sheets) .l-does-panel{position:relative;display:flex;flex-direction:column;
  justify-content:space-between;gap:calc(var(--c-u)*4);
  /* TALL, because the emptiness IS the design — a chip, a name, and a long fall to the way in. At
     a card's height the three sit on top of each other and it is a card again. */
  min-height:calc(var(--c-u)*7*7);overflow:hidden;text-decoration:none;color:inherit;
  padding:max(var(--c-card-pad), calc(var(--c-u)*3));
  background:var(--c-card-bg,var(--c-fill));border-radius:var(--c-r);
  border:var(--c-card-bw,var(--c-bw)) solid var(--c-line);box-shadow:var(--c-card-shadow,none);
  transition:transform .18s ease, border-color .18s ease}
:is(#clay-page,#design-sheets) .l-does-panel:hover{border-color:var(--c-accent)}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  :is(#clay-page,#design-sheets) .l-does-panel:hover{transform:translateY(-3px)}
}
:is(#clay-page,#design-sheets) .l-does-panel-w{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*2);align-items:flex-start}
:is(#clay-page,#design-sheets) .l-does-panel-w .c-card-n{font-size:var(--c-t4)}
/* THE OVERLINE AS A CHIP — this version's own answer, not the theme's `eyebrow` tone. A panel is a
   card and the label sits ON it, which is what makes it read as a shelf tag rather than as an
   introduction to a paragraph. */
:is(#clay-page,#design-sheets) .l-does-panel-tag{
  padding:calc(var(--c-u)*1) calc(var(--c-u)*2);border-radius:var(--c-pill,999px);
  background:var(--c-flip);color:var(--c-paper);
  font:600 var(--c-t1)/1.4 var(--c-body);letter-spacing:.01em}
/* …AND THE FLOOR: the way in, and one line beside it where the reference puts a price */
:is(#clay-page,#design-sheets) .l-does-panel-f{display:flex;align-items:center;
  gap:calc(var(--c-u)*2);min-width:0}
:is(#clay-page,#design-sheets) .l-does-panel-go{flex:0 0 auto;
  width:calc(var(--c-u)*4);height:calc(var(--c-u)*4);border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-flip);color:var(--c-paper)}
:is(#clay-page,#design-sheets) .l-does-panel-go svg{width:calc(var(--c-u)*2);
  height:calc(var(--c-u)*2)}
@container page (max-width:640px){
  /* two panels are a rail on a phone as well — side by side they are two columns of air */
  :is(#clay-page,#design-sheets) .l-does-panels{grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:78%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:var(--c-u)}
  :is(#clay-page,#design-sheets) .l-does-panels > *{scroll-snap-align:start}
  /* …and one is not a rail, same as everywhere else */
  :is(#clay-page,#design-sheets) .l-does-panels[style*="--c-cols:1"]{grid-auto-flow:row;
    grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow-x:visible;padding-bottom:0}
}

/**
 * WHAT WE DO, AS CARDS YOU PRESS — `does/cards`, and the card IS the button.
 *
 * THE PHONE IS A DIFFERENT DRAWING, NOT A NARROWER ONE. Three cards side by side become a RAIL you
 * swipe rather than a column you scroll past: on a phone a stack of three tall cards is three
 * screens of scrolling before the page says anything else, and the whole point of this variant is
 * that the three are a choice you make at a glance. The house rule has said "a mechanic that cannot
 * survive 390px needs a phone equivalent, not a deletion" since it was written; this is one.
 *
 * `@container`, never `@media` — the editor's device preview narrows the PAGE and not the window.
 */
/* THE CARDS FILL THE BAND — NEVER A GAP DOWN THE RIGHT.
   This was capped at a card's natural width so two of them stayed card-sized, and that left a hole
   where the third would have been: "i never want gaps.. then grow the card". So they grow. What
   keeps two from being a wall of photograph is the CROP, which the drawing widens as the count
   falls (see `does/cards`) — not a ceiling on the set.
   HOW MANY ACROSS is the drawing's answer, not this file's: three of anything is three across,
   four go two by two rather than three and an orphan. It arrives as `--c-cols`. */
:is(#clay-page,#design-sheets) .l-does-cards{display:grid;gap:var(--c-gap);
  grid-template-columns:repeat(var(--c-cols,3),minmax(0,1fr))}
/* THE CARD IS THE BUTTON, SO IT IS PAINTED LIKE ONE.
   The words under the picture had the card's fill — a pale strip with dark type — while the theme's
   own buttons on the same page were black with white on them. "the card is a button so should be in
   the colour of the buttons of that theme". So the strip takes the ACTION tokens, which is the
   answer the theme already gave for every other control: `--c-act-bg-safe` and `--c-act-ink`, the
   same two `.c-act-inline` reads. Nothing new is invented and no theme has to be edited. */
:is(#clay-page,#design-sheets) .l-does-card{display:flex;flex-direction:column;
  text-decoration:none;overflow:hidden;
  background:var(--c-act-bg-safe);color:var(--c-act-ink);border-radius:var(--c-r);
  border:var(--c-card-bw,var(--c-bw)) solid transparent;box-shadow:var(--c-act-shadow,none);
  transition:transform .18s ease, box-shadow .18s ease, opacity .14s ease}
/* …AND THE WORDS ON IT ARE THE BUTTON'S WORDS. `c-card-n` is painted for a card sitting on paper,
   so left alone the name came out in the ink colour on a black button and could not be read. */
:is(#clay-page,#design-sheets) .l-does-card .c-card-n{color:inherit;
  font-family:var(--c-act-font,inherit);text-transform:var(--c-act-case,none)}
/* A BUTTON DOES NOT CHANGE COLOUR ON HOVER, IT LIFTS. Borrowing the accent for a border put a
   third colour on a two-colour control. */
:is(#clay-page,#design-sheets) .l-does-card:hover{opacity:.92}
/* A CARD THAT MOVES ON HOVER SAYS IT IS A CONTROL — and a theme with no shadow gets the lift only */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  :is(#clay-page,#design-sheets) .l-does-card:hover{transform:translateY(-3px)}
}
:is(#clay-page,#design-sheets) .l-does-card .l-does-card-p{width:100%;border-radius:0;margin:0}
/* `max()`, NOT A FALLBACK. `--c-card-pad` is not undefined — parts.css declares it as `0px` and
   most themes keep it, because their plain card is not a filled box and its words sit against
   nothing. This card IS a filled box, so zero padding puts the name hard against a painted edge:
   reported as "no spacing / margin in the card", and a `var(x, fallback)` could never have caught
   it, because the token has a value. A theme may go wider than the floor and may not go under it. */
:is(#clay-page,#design-sheets) .l-does-card-w{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*1);flex:1;padding:max(var(--c-card-pad), calc(var(--c-u)*3))}
/* ONE WAY IN IS THE SAME CARD, WIDER — with a ceiling on the picture.
   It was briefly a card lying down, picture one side and words the other, and that is a second
   geometry inside one version: "this creates a whole other style.. half half". So it stays upright
   and full width, and what keeps it from being a screenful of photograph is a max-height rather
   than a different shape. The ratio still decides everything up to that ceiling.
   A FIXED CEILING, NOT `svh`. A viewport unit is a different number in the catalogue than on a
   phone — /wireframe sizes its frame to the whole document — so the one place this is judged would
   have shown a ceiling that never applied, and "the site looks like the wireframe" quietly stops
   being true. */
@container page (min-width:641px){
  :is(#clay-page,#design-sheets) .l-does-cards-solo .l-does-card-p{max-height:24rem}
}
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-does-cards{
    /* THE DESKTOP TEMPLATE HAS TO BE UNSAID, or the rail never starts: explicit `grid-template-
       columns` beats `grid-auto-columns`, so three ways in became three slivers of a phone rather
       than three cards you swipe. The cap goes with it — a rail is as wide as its contents. */
    grid-template-columns:none;max-width:none;
    display:grid;grid-auto-flow:column;grid-auto-columns:78%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:var(--c-u)}
  :is(#clay-page,#design-sheets) .l-does-cards > *{scroll-snap-align:start}
  /* …EXCEPT WHERE THERE IS ONLY ONE, which is not a rail. A single card kept the rail's 78% and
     sat short of the right edge with nothing to swipe to — reported as "on mobile also doesnt
     seem to fit the width". Nothing to scroll: it fills the phone like any other band. */
  :is(#clay-page,#design-sheets) .l-does-cards-solo{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:minmax(0,1fr);overflow-x:visible;padding-bottom:0}
}

/* THE WORDS HAVE TO STAY READABLE OVER A PHOTOGRAPH NOBODY VETTED. A scrim rather than a guess
   about the picture: it is the same answer `c-g-photo` gives a header, one step darker at the
   bottom where the words are. */
:is(#clay-page,#design-sheets) .l-does-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.12) 52%, rgba(0,0,0,0));
  z-index:1}
:is(#clay-page,#design-sheets) .l-does-tile-w{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:calc(var(--c-u)*.5);
  padding:calc(var(--c-u)*3);color:#fff}
:is(#clay-page,#design-sheets) .l-does-tile-w .c-card-s{color:rgba(255,255,255,.82)}
/* ON A PHONE THEY ARE A RAIL, exactly as the cards are — three ways in stacked is three screens of
   scrolling before the page says anything else, and these are a choice you make at a glance. Said
   for this drawing specifically: "the mobile version for sure needs horizontal scroll". A tile is
   a picture with a word on it, so it survives narrower than a card and takes more of the screen. */
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-does-tiles{grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-bottom:var(--c-u)}
  :is(#clay-page,#design-sheets) .l-does-tiles > *{scroll-snap-align:start}
  /* …and one tile is not a rail, same as one card is not */
  :is(#clay-page,#design-sheets) .l-does-tiles-solo{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:minmax(0,1fr);overflow-x:visible;padding-bottom:0}
}

/* ── does/list ── the ways in as a ruled list of names ───────────────────────────────────── */
/* A RULE BETWEEN, NOT AROUND. The list is read down, so what separates one way in from the next is
   a line under it — and the last one has none, because a rule under the final row is a line
   under nothing. */
:is(#clay-page,#design-sheets) .l-does-list{list-style:none;margin-block-end:0;margin-inline:0;
  padding:0;display:grid}
/* A ROW HERE IS A BLOCK, not the flex row `.c-row` usually is. It wears `c-row` so the rules that
   count a repeated set know it is one (R8, R11) — and that class makes it a flex container, which
   sized the link inside to its own text and left the chevron floating in the middle of the row
   instead of at the end of it. */
:is(#clay-page,#design-sheets) .l-does-li{display:block;padding:0;
  border-bottom:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .l-does-li:last-child{border-bottom:0}
:is(#clay-page,#design-sheets) .l-does-li-a{display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:calc(var(--c-u)*2);
  padding:calc(var(--c-u)*3) 0;text-decoration:none;color:inherit}
:is(#clay-page,#design-sheets) .l-does-li-a .c-row-n{font-size:var(--c-t4)}
:is(#clay-page,#design-sheets) .l-does-li-a .c-card-s{grid-column:1;max-width:var(--c-cap-note)}
/* THE ARROW IS AN SVG, NOT A ROTATED BORDER. A border is a RULE, and every rule on this site is
   the line token — a chevron made of two of them is a drawing wearing a rule's clothes, and the
   test that keeps rules honest is right to say so. */
:is(#clay-page,#design-sheets) .l-does-li-go{grid-row:1 / span 2;grid-column:2;
  width:calc(var(--c-u)*3);height:calc(var(--c-u)*3);opacity:.5}
:is(#clay-page,#design-sheets) .l-does-li-a:hover .l-does-li-go{opacity:1}

/* ── menu/courses ── the strip, then the courses two across ─────────────────────────────────
   COLUMNS, NOT A GRID. Two grid columns put each course in a cell of the same height as the one
   beside it, so Wine (two lines) held a hole open the depth of Mains (six) and a menu read as a
   page with things missing from it. A menu is a column of courses that happens to be poured into
   two — which is what `columns` is, and what every printed menu does. */
:is(#clay-page,#design-sheets) .l-courses{columns:2;column-gap:calc(var(--c-u)*5);
  margin-top:calc(var(--c-u)*3)}
/* a course is never split across the fold of the two columns */
:is(#clay-page,#design-sheets) .l-course{break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .l-course .c-head{margin-bottom:calc(var(--c-u)*1.5)}
/**
 * A COURSE HEADING IS A HEADING.
 *
 * It was set at step 2 — the same size as the dish names under it and as their descriptions — so
 * "Mains" and "Nasi Campur" were the same size and the menu read as one long list with the odd
 * word in it. Two steps down from a page heading, one step up from a dish: it is smaller than the
 * page's own title because it is inside it, and bigger than a row because it names a set of them.
 */
:is(#clay-page,#design-sheets) .l-course .c-title{font-size:var(--c-t4)}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-courses{columns:1} }

/* ── reviews/proof ── the score one side, the way out the other, quotes beneath ───────────── */
:is(#clay-page,#design-sheets) .l-proof > .c-in{display:block}
:is(#clay-page,#design-sheets) .l-proof-h{display:flex;justify-content:space-between;align-items:flex-end;
  gap:calc(var(--c-u)*3);flex-wrap:wrap;margin-bottom:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-proof-h .c-title{margin:0;font-size:var(--c-t4)}
/* the score is the FACT beside the heading, not the heading — see reviews/proof */
:is(#clay-page,#design-sheets) .l-proof-s{margin:calc(var(--c-u)*1) 0 0;
  font:var(--c-weight) var(--c-d4)/1 var(--c-display);color:var(--c-ink);
  display:flex;align-items:center;gap:calc(var(--c-u)*1.5)}
/* the stars beside a display-sized number are set to the type, not to it */
:is(#clay-page,#design-sheets) .l-proof-s .c-stars{font-size:var(--c-t3)}
:is(#clay-page,#design-sheets) .l-proof-h .c-line{margin:calc(var(--c-u)*.5) 0 0}

/* ── about/beside ── half words, half picture, centred against each other ─────────────────── */
:is(#clay-page,#design-sheets) .l-about{--c-title-share:.46}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
:is(#clay-page,#design-sheets) .l-about > .c-in{--c-split:1fr 1fr}
:is(#clay-page,#design-sheets) .l-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:calc(var(--c-u)*3);margin-top:calc(var(--c-u)*3)}
/**
 * THREE NUMBERS STAY THREE ACROSS ON A PHONE, or the third one is an orphan.
 *
 * `auto-fit, minmax(110px, 1fr)` fits two columns in 342 and leaves the third alone on a second
 * row, centred in the left half against nothing — measured on the About page. A number and its
 * label are four characters and two words; 110 is a desk's minimum, not a phone's.
 *
 * 88 fits three across at 390 with the gap in between. Four fit two by two, which is the pairing
 * rule (docs/section-versions.md), and five or more wrap the way they always did.
 */
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .l-facts{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
    gap:calc(var(--c-u)*2)}
}
:is(#clay-page,#design-sheets) .l-facts .c-fact .c-title{margin:0;font-size:var(--c-t3)}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-about{--c-title-share:1} }

/* ── about/room ── the place itself, with everything said about it on one panel ─────────────
   THE DRAWING IS SEVEN LINES IN library.js AND IT IS SUPPOSED TO BE. A band whose ground is a
   photograph already has a scrim, centred content and a panel round its words if the theme's
   `heroWords` tone asks for one — so this file only says the two things that are true of THIS
   band and of no other photo band: it is a room rather than a strip, and on a phone the panel
   stops being a shape and becomes the column. */
:is(#clay-page,#design-sheets) .l-about-room{--c-band-min:min(72svh,720px)}
/* THE NUMBERS ARE A ROW UNDER THE WRITING, NOT A TABLE ACROSS THE PANEL. `l-facts` is an auto-fit
   grid, which is right beside a paragraph in a column and wrong inside a panel only as wide as its
   own longest line: three numbers came out in three stretched thirds with the writing above them
   at half the width. Here they are as wide as they need to be, together, in the middle. */
:is(#clay-page,#design-sheets) .l-about-room .l-facts{display:flex;flex-wrap:wrap;
  justify-content:center;gap:calc(var(--c-u)*5)}
@container page (max-width:760px){
  /* THE PHONE IS A DIFFERENT DRAWING, not a narrower one. A `max-content` panel inside 390 pixels
     is a column two words wide with a photograph round it; here the panel IS the column, and the
     picture is behind all of it. */
  /* THE PANEL'S OWN WIDTH IS NOT SAID HERE. `max-content` on a phone was cutting the heading off
     down the right edge, and that is true of every photo band on every theme that puts its words
     in a panel — so it is answered once, beside the rule that causes it. See `heroWords` above. */
  :is(#clay-page,#design-sheets) .l-about-room{--c-band-min:min(80svh,620px)}
  /* THREE NUMBERS ACROSS, and the gap is what decides it. At 40 between them the third dropped to
     a row of its own and sat under the first, centred against nothing — measured inside the glass
     panel, 320 of numbers in 294 of column. Two units, and they fit. */
  :is(#clay-page,#design-sheets) .l-about-room .l-facts{gap:calc(var(--c-u)*2)}
}

/* ── aboutPage/story ── the story beside one picture, the writing, the people ───────────────
   The parts stack down the page with air between them; only the top half is two columns, and the
   writing keeps the MEASURE rather than the band's width — a paragraph the width of a desk is a
   paragraph nobody reaches the end of a line of. */
:is(#clay-page,#design-sheets) .l-story{--c-title-share:.46;display:grid;grid-template-columns:1fr 1fr;
  gap:calc(var(--c-u)*5);align-items:center}
:is(#clay-page,#design-sheets) .l-story-w{max-width:var(--c-measure)}
:is(#clay-page,#design-sheets) .l-story-more{--c-title-share:.30;display:grid;grid-template-columns:4fr 8fr;
  gap:calc(var(--c-u)*5);align-items:start;margin-top:calc(var(--c-u)*7)}
:is(#clay-page,#design-sheets) .l-story-t{max-width:var(--c-measure);display:grid;
  gap:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .l-story-t .c-title + .c-line{margin-top:0}
:is(#clay-page,#design-sheets) .l-story-t .c-line + .c-title{margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-story-p{margin-top:calc(var(--c-u)*7)}
:is(#clay-page,#design-sheets) .l-faces{--c-min:180px;--c-rail:62%;margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-story-pics{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:calc(var(--c-u)*2);
  margin-top:calc(var(--c-u)*7)}
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-story,
  :is(#clay-page,#design-sheets) .l-story-more{grid-template-columns:1fr}
  :is(#clay-page,#design-sheets) .l-story,:is(#clay-page,#design-sheets) .l-story-more{--c-title-share:1}
}


/* ── asks/beside ── the heading narrow, the answers wide ──────────────────────────────────── */
/* FOUR TWELFTHS BESIDE THE QUESTIONS, EIGHT WHEN IT IS ALONE — a run with no list beside it drops
   into the wide column (`:only-child` below), so the band's own share is that one and the narrow
   heading column overrides it. See `--c-title-share`. */
:is(#clay-page,#design-sheets) .l-asks{--c-title-share:.63}
:is(#clay-page,#design-sheets) .l-asks-h{--c-title-share:.30}
:is(#clay-page,#design-sheets) .l-asks-h .c-acts{margin-top:calc(var(--c-u)*2)}
/* A RUN WITH NO HEADING KEEPS THE ANSWERS' COLUMN. The questions page leads with the general ones
   — the run that is about the business rather than about one thing it does — and those wear no
   heading. As the only child of the grid they landed in the 4fr column: the first six answers on
   the page were a third the width of the rest of them, and did not line up with any of them. */
:is(#clay-page,#design-sheets) .l-asks > .c-in > :only-child{grid-column:2}
/* CONSECUTIVE RUNS ARE ONE PAGE, NOT SIX SECTIONS. One run is one band so that no band carries
   two headings at the same level — but six bands is six bands' worth of rhythm, which on a
   business with two questions per feature is a screen of air per answer. A run that follows a run
   opens where the last one closed.

   SAID OF A RUN, not of the questions page. `c-run` is what a band wears when it is one of several
   drawn on purpose — the questions page's feature runs today, a page of chapters tomorrow — and
   this is the rhythm every one of them wants. It is also what tells the adjacency rule that a
   repeat here is the design rather than the fault it is written to catch. */
:is(#clay-page,#design-sheets) .c-run + .c-run{padding-top:0}
/* …AND THE BOTTOM OF ONE IS THE TOP OF THE NEXT. Closing only the top left a whole band's worth of
   air under a run that has one question in it, so the page was still a screen per answer. The gap
   BETWEEN two runs is the space under a heading; the last one keeps its full close, because what
   follows it is the end of the page rather than another run. */
:is(#clay-page,#design-sheets) .c-run:has(+ .c-run){padding-bottom:calc(var(--c-u)*5 * var(--c-density))}
@container (max-width:760px){
  :is(#clay-page,#design-sheets) .l-asks,:is(#clay-page,#design-sheets) .l-asks-h{--c-title-share:1}
  :is(#clay-page,#design-sheets) .l-asks > .c-in > :only-child{grid-column:auto} }

/* ── capture/beside ── the reason, then the form ──────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .l-capture{--c-title-share:.40}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
:is(#clay-page,#design-sheets) .l-capture > .c-in{--c-split:5fr 7fr;--c-align:start}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-capture{--c-title-share:1} }

/* ── visit/map ── the map, and where you are ──────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .l-visit{--c-title-share:.46}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
:is(#clay-page,#design-sheets) .l-visit > .c-in{--c-split:1fr 1fr;--c-align:start}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-visit{--c-title-share:1} }

/* ── visit/over ── the map behind, where you are on it ────────────────────────────────────── */
:is(#clay-page,#design-sheets) .l-visit-over{min-height:min(62svh,560px);display:grid;
  align-content:center}
/* THE WORDS SIT ON A CARD, not straight on the map. A map is busy in a way a photograph is not —
   roads, labels, a dozen colours — and text over it is legible in one place and gone in the next,
   which is not something a scrim can fix because the busy part moves with the location. */
:is(#clay-page,#design-sheets) .l-visit-card{--g:var(--c-paper);background:var(--g);color:var(--c-ink);
  border-radius:var(--c-r);padding:calc(var(--c-u)*4);max-width:min(46ch,100%);margin-inline:auto;
  box-shadow:var(--c-card-shadow);border:var(--c-card-bw) solid var(--c-line)}
/* AND THE BUTTON ON IT IS A BUTTON ON PAPER. The photo ground inverts every action inside it, on
   the promise that it is standing on a photograph — this one is standing on the card. */
:is(#clay-page,#design-sheets) .c-g-photo .l-visit-card :is(.c-act-inline,.c-act-block,.c-act-compact){
  background:var(--c-act-bg);color:var(--c-act-ink)}

/* ── visit/week ── where you are, and every day of it ─────────────────────────────────────── */
:is(#clay-page,#design-sheets) .l-visit-week{--c-title-share:.36}
:is(#clay-page,#design-sheets) .l-visit-week > .c-in{--c-split:7fr 5fr;--c-align:start}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-visit-week{--c-title-share:1} }

/* ── gallery/mosaic ── one large, the rest around it ──────────────────────────────────────── */
/* FOUR ACROSS, and the first takes two of them by two. Written as a plain auto-fill grid the large
   one would decide the column width for everything; a fixed four-column grid with one item
   spanning two is the only arrangement where the small ones stay a quarter and the large one stays
   twice that in both directions. */
:is(#clay-page,#design-sheets) .l-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--c-gap)}
:is(#clay-page,#design-sheets) .l-mosaic-one{grid-column:span 2;grid-row:span 2}
/* TWO ACROSS ON A PHONE and the large one takes both — a quarter of 390px is a thumbnail, and a
   gallery of thumbnails is a gallery nobody opens. */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#clay-page,#design-sheets) .l-mosaic-one{grid-column:span 2;grid-row:span 1}
}

/* ── gallery/run ── the photographs on a rail, at every width ─────────────────────────────── */
:is(#clay-page,#design-sheets) .l-run{display:grid;grid-auto-flow:column;
  /* a bare percentage, for the reason written on `.l-shelf` above */
  grid-auto-columns:var(--c-run,38%);gap:var(--c-gap);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:var(--c-u)}
:is(#clay-page,#design-sheets) .l-run > *{scroll-snap-align:start}
/* …and the gutter only where there is one — see the rails and the chips above */
:is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .l-run{
  margin-inline:calc(var(--c-gut) / -2);padding-inline:calc(var(--c-gut) / 2);
  scroll-padding-inline:calc(var(--c-gut) / 2)}
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-run{--c-run:82%} }

/* ── the dials ── the four classes lib/designs/dials.js draws with, and no others ─────────── */
/* A DIALLED BAND OWNS NO GEOMETRY OF ITS OWN beyond these. Everything else it uses is a part:
   `c-head`, `c-acts`, `c-grid`, `c-rows`, `c-card`, `c-media`. That is the whole point — a fix to
   a part is a fix to every dial position that uses it, at once, on every theme. */
:is(#clay-page,#design-sheets) .d-over{min-height:min(70svh,700px);display:grid;align-content:center}
:is(#clay-page,#design-sheets) .d-beside > .c-in{--c-split:6fr 6fr;--c-align:center}
/**
 * A MAP BESIDE A LIST IS AS TALL AS THE LIST.
 *
 * The two halves are centred against each other, which is right for a photograph: a photograph has
 * a shape it has to keep, and stretching it to match a column of text crops it. A MAP has no such
 * shape — it is a window on a place, and a taller window is more of the place. Beside the seven
 * days of a week it sat as a small 4:3 card with a hand's width of nothing under it.
 *
 * Only where it is the whole of its half, so a map inside anything else is untouched.
 */
:is(#clay-page,#design-sheets) .d-beside > .c-in > div > .c-map:only-child{
  align-self:stretch;height:100%;aspect-ratio:auto;min-height:var(--c-map-min,300px)}
:is(#clay-page,#design-sheets) .d-beside > .c-in > div:has(> .c-map:only-child){align-self:stretch}
/**
 * THE SET BESIDE THE WORDS: the narrow column is the LIST, the wide one is what it is about.
 *
 * Which is what this always said, and the split could not honour it — `4fr 8fr` is narrow-first,
 * and the words come first whenever the dial says left. So the legal page ran its prose down the
 * narrow track with a column of enormous section links beside it. The band names the side now
 * (`d-aside-r` = the set went first) and the split follows.
 *
 * And more air between them: two columns of unrelated things need a gutter you can see, not the
 * gap a row of cards uses.
 */
:is(#clay-page,#design-sheets) .d-aside > .c-in{--c-split:8fr 4fr;--c-align:start;
  column-gap:calc(var(--c-u)*7)}
:is(#clay-page,#design-sheets) .d-aside-r > .c-in{--c-split:4fr 8fr}
/**
 * AN INDEX IS NOT THE PAGE — it is drawn quieter than the thing it points at.
 *
 * The narrow column is a list of rows, and a row's name is DISPLAY type: right for a menu, wrong
 * for a table of contents. On a typographic theme the legal page's two links came out at the size
 * of the headings they point at, each with a rule running the whole width of the column under it —
 * "links still way to wide.. and not on the right". The words in the wide column were smaller than
 * the list beside them, which is the wrong way round on any page.
 *
 * Body type, tighter rows, and the rule hugs the row rather than the column: a list of two ends
 * after two, instead of a long line under a short word.
 */
:is(#clay-page,#design-sheets) .c-aside .c-row-n{
  font:var(--c-weight) var(--c-t2)/1.35 var(--c-display);letter-spacing:0}
:is(#clay-page,#design-sheets) .c-aside .c-row{padding-block:calc(var(--c-u)*1.5);
  gap:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .c-aside .c-row-s{font-size:var(--c-t0)}
/* AND IT STAYS WHERE YOU LEFT IT while the document scrolls past — which is the whole reason a
   contents list is beside the words rather than above them. */
@container page (min-width:761px){
  :is(#clay-page,#design-sheets) .c-aside{position:sticky;top:calc(var(--c-bar) + var(--c-u)*3)}
}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .d-beside{--c-title-share:1} }

/* SCROLL — the same rail as every other row of cards on this site, and stated the same way: a
   BARE percentage, never `minmax(0, …)`. See `.l-shelf` for what that costs. */
:is(#clay-page,#design-sheets) .d-scroll{display:grid;grid-auto-flow:column;
  grid-auto-columns:var(--c-scroll,30%);gap:var(--c-gap);
  grid-template-rows:auto auto 1fr auto;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:var(--c-u)}
/* the cards line up across the rail — name under name, price under price, whatever the words do */
:is(#clay-page,#design-sheets) .d-scroll > *{scroll-snap-align:start;grid-row:span 4;
  display:grid;grid-template-rows:subgrid;row-gap:calc(var(--c-u)*1)}
:is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .d-scroll{
  margin-inline:calc(var(--c-gut) / -2);padding-inline:calc(var(--c-gut) / 2);
  scroll-padding-inline:calc(var(--c-gut) / 2)}
/* a quotation has no picture to set its width, so it takes more of the rail — same number the
   shared rail uses for `.c-quotes`, and stated once beside it rather than guessed again here */
:is(#clay-page,#design-sheets) .d-scroll.c-quotes{--c-scroll:82%;text-align:left}
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .d-scroll{--c-scroll:78%} }

/* BENTO — a wall of unequal boxes that still tiles. Six columns, so a big one takes three and a
   small one takes two: the only split where the row closes on both counts. */
:is(#clay-page,#design-sheets) .d-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--c-gap)}
:is(#clay-page,#design-sheets) .d-bento > *{grid-column:span 2}
:is(#clay-page,#design-sheets) .d-bento > :nth-child(3n+1){grid-column:span 3}
:is(#clay-page,#design-sheets) .d-bento > :nth-child(3n+2){grid-column:span 3}
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .d-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#clay-page,#design-sheets) .d-bento > *,
  :is(#clay-page,#design-sheets) .d-bento > :nth-child(3n+1),
  :is(#clay-page,#design-sheets) .d-bento > :nth-child(3n+2){grid-column:span 1}
}

/* ── nav/bar ── the mark at one end, everything else clustered at the other ───────────────── */
/* THE BAR SPANS THE SCREEN AND ITS CONTENTS DO NOT. A sticky bar's ground has to reach both
   edges; what is written on it belongs in the same column as the page under it. */
:is(#clay-page,#design-sheets) .l-nav{position:sticky;top:0;z-index:40;--g:var(--c-paper);background:var(--g);color:var(--c-ink);
  border-bottom:var(--c-band-rule,var(--c-bw)) solid var(--c-line);padding:0}
:is(#clay-page,#design-sheets) .l-nav-in{width:var(--c-page);margin-inline:auto;min-height:var(--c-bar);
  display:flex;align-items:center;gap:calc(var(--c-u)*2)}
/* AND ROOM FOR THE GEAR WHILE THEY ARE EDITING. The band's own settings button is pinned to the
   right of the bar, and on a phone that is exactly where the menu control is — so the owner's own
   site had two round buttons on top of each other. Only while they are editing; a visitor's bar
   runs to the edge of the column like everything else. */
/* …AND PREVIEW IS NOT EDITING. `body.preview` takes every gear off the page — the rule beside
   `.band-gear` says so — but the room reserved for one stayed, so the menu, the basket and the
   button sat a gear's width in from the edge with nothing there. Preview is what the owner checks
   their own bar against, and it was the one place the bar was never right. */
body[data-owner]:not(.preview) :is(#clay-page,#design-sheets) .l-nav-in{padding-inline-end:calc(var(--c-u)*7)}
:is(#clay-page,#design-sheets) .l-mark{font:var(--c-weight) var(--c-t2)/1 var(--c-display);
  letter-spacing:var(--c-track);color:inherit;text-decoration:none;white-space:nowrap;
  display:flex;align-items:center}
/**
 * THE MARK PUSHES, AND EVERYTHING ELSE FOLLOWS IT TO THE RIGHT.
 *
 * The auto margin used to be on the LINKS, with a rule taking it off the controls whenever the
 * links were present. On a phone the links are `display:none` — which does not stop them being a
 * sibling — so the controls kept the "links are here" answer, nothing pushed them anywhere, and
 * the basket, the button and the menu all bunched against the logo with the right half of the bar
 * empty. Put on the mark it is true in all three cases: links and controls, controls alone, links
 * alone.
 */
:is(#clay-page,#design-sheets) .l-nav .l-mark{margin-inline-end:auto}
:is(#clay-page,#design-sheets) .l-mark img{height:calc(var(--c-u)*5);width:auto;display:block}
/**
 * …AND HOW IT IS CUT — the owner's own choice, on Brand.
 *
 * `content.logoShape` has been carried since the field existed and drawn by nothing: picking
 * Circle changed the panel and left a square logo in the bar. A circle needs a square box to be a
 * circle, so the mark takes its own height as its width when it is cut at all.
 */
:is(#clay-page,#design-sheets) .l-mark[data-cut] img{border-radius:inherit}
:is(#clay-page,#design-sheets) .l-mark[data-cut="square"]{border-radius:0}
:is(#clay-page,#design-sheets) .l-mark[data-cut="round"]{border-radius:var(--c-r);overflow:hidden}
:is(#clay-page,#design-sheets) .l-mark[data-cut="circle"]{border-radius:999px;overflow:hidden}
:is(#clay-page,#design-sheets) .l-mark[data-cut="circle"] img,
:is(#clay-page,#design-sheets) .l-mark[data-cut="round"] img{
  width:calc(var(--c-u)*5);object-fit:cover}
/* THE ROWS AND THE CONTROLS TRAVEL TOGETHER. Loose children of a space-between bar put the gaps
   between THEM, which marooned the basket in the middle of the bar a hand's width from the
   button beside it. */
:is(#clay-page,#design-sheets) .l-nav-l{display:flex;gap:calc(var(--c-u)*3);align-items:center;min-width:0}
:is(#clay-page,#design-sheets) .l-nav-l a{font:600 var(--c-t1)/1 var(--c-body);color:inherit;text-decoration:none;
  white-space:nowrap;padding:calc(var(--c-u)*.5) 0;border-bottom:var(--c-bw) solid transparent;
  /* THE LINKS, and only the links — see --c-nav-dim. The mark and the action are the bar's other
     two things and neither of them stands back. */
  opacity:var(--c-nav-dim);transition:opacity .15s}
:is(#clay-page,#design-sheets) .l-nav-l a:hover{border-bottom-color:var(--c-accent);opacity:1}
/**
 * …AND SPREAD ACROSS THE BAR — `data-tone-navspread="even"`, and only then.
 *
 * The default is the rule above the mark: everything follows it to the right, so the links and the
 * controls are one cluster at the far edge. A design whose bar is a composed strip rather than a
 * pushed-aside one wants the other answer — the mark at one edge, the pages evenly between, the
 * controls at the other — and had no way to say it, so it reached into three of the bar's own
 * rules from its own stylesheet. That is a theme deciding where something goes, which is R10.
 *
 * The auto margin MOVES to the end cluster rather than coming off the bar: a site with no pages at
 * all still has its basket at the far edge instead of jammed against the name.
 */
:is(#clay-page,#design-sheets)[data-tone-navspread="even"] .l-nav .l-mark{margin-inline-end:0}
:is(#clay-page,#design-sheets)[data-tone-navspread="even"] .l-nav-l{flex:1 1 auto;justify-content:space-evenly}
:is(#clay-page,#design-sheets)[data-tone-navspread="even"] .l-nav-e{margin-inline-start:auto}
/**
 * …OR AS CHIPS — `data-tone-nav="tag"`, and only then.
 *
 * "Some menu items in the top bar are in cards." The bar drew plain links and a theme that wanted
 * chips had no way to say so. The underline that marks the current one becomes a filled chip
 * instead, because an underline under a box is two marks for one state.
 */
:is(#clay-page,#design-sheets)[data-tone-nav="tag"] .l-nav-l{gap:calc(var(--c-u)*1)}
:is(#clay-page,#design-sheets)[data-tone-nav="tag"] .l-nav-l a{
  padding:calc(var(--c-u)*1) calc(var(--c-u)*1.5);border-bottom:0;
  border:var(--c-bw) solid var(--c-line);border-radius:var(--c-r-pill,999px)}
:is(#clay-page,#design-sheets)[data-tone-nav="tag"] .l-nav-l a:hover{
  border-color:var(--c-accent);background:color-mix(in oklab, var(--c-accent) 12%, transparent)}
:is(#clay-page,#design-sheets) .l-nav-e{display:flex;align-items:center;gap:calc(var(--c-u)*1.5)}
/* ONE HEIGHT FOR EVERYTHING IN THE BAR — the basket was a circle beside a button whose height
   came from its padding, so nothing in the row lined up with anything else. */
:is(#clay-page,#design-sheets) .l-nav .c-act,:is(#clay-page,#design-sheets) .l-cart,:is(#clay-page,#design-sheets) .l-burger{height:42px;min-height:42px;
  box-sizing:border-box}
:is(#clay-page,#design-sheets) .l-cart,:is(#clay-page,#design-sheets) .l-burger{width:42px;display:grid;place-items:center;padding:0;
  background:none;color:inherit;cursor:pointer;border-radius:999px;
  border:var(--c-bw) solid currentColor}
:is(#clay-page,#design-sheets) .l-cart[hidden],:is(#clay-page,#design-sheets) .l-burger[hidden]{display:none}
:is(#clay-page,#design-sheets) .l-cart .ico,:is(#clay-page,#design-sheets) .l-burger .ico{width:18px;height:18px;display:grid;
  place-items:center}
:is(#clay-page,#design-sheets) .l-cart .ico svg,:is(#clay-page,#design-sheets) .l-burger .ico svg{width:100%;height:100%}
:is(#clay-page,#design-sheets) .l-cart b{font:var(--c-weight) var(--c-t0)/1 var(--c-display);margin-inline-start:2px}
:is(#clay-page,#design-sheets) .l-burger{display:none}
/* THE DRAWER IS A SHEET — the layer above says where it sits, how it arrives and what the page
   behind it does. All that is left here is how its rows are set. */
/* THE WAY HOME AT THE TOP OF THE DRAWER — the mark and the name, with room under them */
:is(#clay-page,#design-sheets) .l-nav-home{display:flex;align-items:center;gap:calc(var(--c-u)*1.5);
  padding-bottom:calc(var(--c-u)*3);margin-bottom:calc(var(--c-u)*1.5);
  border-bottom:var(--c-bw) solid var(--c-line);color:inherit;text-decoration:none}
:is(#clay-page,#design-sheets) .l-nav-home b{font:var(--c-weight) var(--c-t2)/1.1 var(--c-display)}
:is(#clay-page,#design-sheets) .l-nav-rows{display:flex;flex-direction:column;gap:calc(var(--c-u)*1.5)}
/* THE ROWS, and only the rows. Written as "every anchor in the drawer" it also caught the site's
   one ACTION at the end of it and set `color:inherit` — so the button kept its own ground and lost
   its own ink, and on a dark theme it was a white block with white writing on it. */
:is(#clay-page,#design-sheets) .l-nav-rows a{font:var(--c-weight) var(--c-t2)/1.1 var(--c-display);
  letter-spacing:var(--c-track);color:inherit;text-decoration:none}
/* FOUR LINKS AT 390px IS FOUR TRUNCATED WORDS. The way around goes behind the menu control and
   the space buys a legible mark and a reachable action. */
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) .l-nav-l{display:none}
  :is(#clay-page,#design-sheets) .l-burger{display:grid}
}

/* ── footer/two ── the business one side, every way to reach them the other ───────────────── */
/* THE FOOTER STATES ITS GROUND, it does not merely paint one.
   It painted `--c-flip` — the contrast ground, which on a light page is nearly black — and left
   every neutral inside it at the page's. So on a light theme the sign-up's overline, its line and
   the copyright were dark text on a dark footer: 1.66:1, on every page of every site on that
   theme. It happened to look right on a dark theme, which is why it survived. `--g` plus the
   selector list above is the whole mechanism; the footer simply was not in it. */
:is(#clay-page,#design-sheets) .l-foot{--g:var(--c-flip);background:var(--g);color:var(--c-flip-ink);
  padding:calc(var(--c-rhythm)*.8) 0 calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .l-foot-in{width:var(--c-page);margin:0 auto;display:grid;
  grid-template-columns:5fr 7fr;gap:calc(var(--c-u)*5);align-items:start}
:is(#clay-page,#design-sheets) .l-fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .l-fcol{display:flex;flex-direction:column;gap:calc(var(--c-u)*1.5);
  align-items:flex-start}
:is(#clay-page,#design-sheets) .l-fc-t{font:var(--c-label-weight) var(--c-t0)/1 var(--c-display);
  text-transform:var(--c-label-case);letter-spacing:var(--c-label-track);opacity:.62}
:is(#clay-page,#design-sheets) .l-fcol a{font:400 var(--c-t1)/1.3 var(--c-body);color:inherit;text-decoration:none;
  border-bottom:2px solid transparent}
:is(#clay-page,#design-sheets) .l-fcol a:hover{border-bottom-color:var(--c-accent)}
:is(#clay-page,#design-sheets) .l-sign{display:grid;gap:calc(var(--c-u)*1.5);margin-top:calc(var(--c-u)*2);width:100%}
:is(#clay-page,#design-sheets) .l-sign-f{display:flex;flex-wrap:wrap;gap:calc(var(--c-u)*1.5);align-items:end}
:is(#clay-page,#design-sheets) .l-sign-f .c-field{flex:1 1 150px;min-width:0}
/**
 * …AND THE BUTTON IS AS TALL AS THE BOXES IT STANDS IN A ROW WITH.
 *
 * `Subscribe` is a `c-act-compact` — the small button, set at the caption step with tight padding,
 * which is right in a card and wrong here: measured in the footer, two 56px inputs with a 35px
 * button sitting on their baseline, twenty-one pixels short. It is not a small button next to
 * some boxes, it is the third control in a row of three.
 *
 * So it takes the FIELD's measurements rather than a height of its own: the same vertical padding,
 * the same type step, the same line, and a transparent border of the field's own width, because a
 * theme with a 3px field border (chunky) makes its inputs 6px taller than a borderless button
 * padded identically. Nothing here is a number — change the field and the button follows.
 */
:is(#clay-page,#design-sheets) .l-sign-f > .c-act{
  font:var(--c-act-weight) var(--c-t2)/1.4 var(--c-act-font);
  padding-block:var(--c-field-pad-y);
  border:var(--c-field-bw) solid transparent;border-bottom-width:var(--c-field-bw-b)}
/* THE RULE ABOVE THE FINE PRINT IS A RULE, and every rule on this site is `--c-line`. It was
   `currentColor` — full-strength ink — so on a dark page the faintest separator on the page came
   out as the brightest line on it, at the very bottom, on every page. */
:is(#clay-page,#design-sheets) .l-foot-f{width:var(--c-page);margin:calc(var(--c-u)*5) auto 0;
  padding-top:calc(var(--c-u)*3);border-top:var(--c-bw) solid var(--c-line);
  display:flex;flex-wrap:wrap;gap:calc(var(--c-u)*2);justify-content:space-between}
/* the quiet credit — the small print's size, the soft ink, and it underlines when reached for */
:is(#clay-page,#design-sheets) .l-foot-credit{color:var(--c-soft);text-decoration:none}
:is(#clay-page,#design-sheets) .l-foot-credit:hover{text-decoration:underline}
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-foot-in{grid-template-columns:1fr} }

/* ── cart/two ── the things one side, what it comes to the other ──────────────────────────── */
/* `l-basket`, not `l-cart` — that one is the BUTTON in the bar, and a class doing two jobs is
   how a rule for one silently reshapes the other. */
:is(#clay-page,#design-sheets) .l-basket{--c-title-share:.55;display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--c-u)*4);
  align-items:start}
:is(#clay-page,#design-sheets) .l-basket-s{display:grid;gap:calc(var(--c-u)*1.5)}
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-basket{grid-template-columns:1fr;--c-title-share:1} }

/* ── product/pdp ── the pictures one half, what you decide with the other ─────────────────── */
:is(#clay-page,#design-sheets) .l-pdp{--c-title-share:.55;display:grid;grid-template-columns:7fr 5fr;gap:calc(var(--c-u)*4);
  align-items:start}
:is(#clay-page,#design-sheets) .l-pdp-w{display:grid;gap:calc(var(--c-u)*2);align-content:start}
:is(#clay-page,#design-sheets) .l-pdp-t{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:calc(var(--c-u)*1.5);margin-top:calc(var(--c-u)*1.5)}
/* NO PICTURE, NO COLUMN FOR ONE — a product with no photographs is one column of words, not one
   column of words beside an empty square. */
:is(#clay-page,#design-sheets) .l-pdp-solo{grid-template-columns:1fr;--c-title-share:1}
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-pdp{grid-template-columns:1fr;--c-title-share:1} }

/* ── one line in the basket ───────────────────────────────────────────────────────────────── */
/* the picture holds a square of its own and never grows — the name has the flexible column */
:is(#clay-page,#design-sheets) .c-row-p{flex:0 0 auto;width:74px}
/* the buttons inside the quantity chip are the chip's, so the chip's own padding is theirs */
:is(#clay-page,#design-sheets) .c-chip-qty{align-self:start;margin-top:calc(var(--c-u)*.5);
  font-variant-numeric:tabular-nums}
:is(#clay-page,#design-sheets) .c-chip-qty button{background:none;border:0;font:inherit;color:inherit;
  cursor:pointer;padding:0 calc(var(--c-u)*.5);line-height:1}

/* ── cart/receipt · cart/pinned · product/pinned ── one column, and a bar that stays ───────── */
/* THE TILL IS THE LIST AND WHAT IT COMES TO, in that order, at every width. No columns, so there
   is no width at which one of them is half-empty and no collapse rule to keep in step. */
:is(#clay-page,#design-sheets) .l-till{display:grid;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-till-t{display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--c-u)*2);padding-top:calc(var(--c-u)*2);border-top:var(--c-bw) solid var(--c-line)}

/* A BAR THAT DOES NOT LEAVE. Sticky against the sheet's own scroller, so however long the list is
   the total and the button are on the screen. It carries the paper under it — a transparent bar
   over a moving list is unreadable at the moment somebody is spending money — and the gutter's
   worth of padding on each side so it lines up with the column it belongs to rather than the box.
   `bottom:calc(-1 * gap)` cancels the grid gap under it, or the bar floats a gap off the floor. */
:is(#clay-page,#design-sheets) .l-pin{position:sticky;bottom:0;z-index:2;display:grid;
  gap:calc(var(--c-u)*1.5);background:var(--c-paper);color:var(--c-ink);
  padding:calc(var(--c-u)*2) 0 calc(var(--c-u)*2);
  border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .l-pin-r{display:flex;align-items:baseline;justify-content:space-between;
  gap:calc(var(--c-u)*2)}
/* THE BASKET'S BAR IS ONE LINE — what it comes to on the left, the way out on the right. A block
   button the width of the sheet is the receipt's drawing; a bar that never leaves the screen has
   to cost as little height as it can, or it is a third of a phone permanently spent. */
:is(#clay-page,#design-sheets) .l-pin-row{grid-template-columns:auto 1fr;align-items:center;
  column-gap:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-pin-row .l-pin-r{justify-content:flex-start;gap:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .l-pin-row > .c-act{justify-self:end}
:is(#clay-page,#design-sheets) .l-pin-row > .c-fine{grid-column:1 / -1;margin:0}
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .l-pin-row{grid-template-columns:1fr}
  :is(#clay-page,#design-sheets) .l-pin-row > .c-act{justify-self:stretch;text-align:center}
}
/* the product's bar is a price and a buy on ONE line, because both are short */
:is(#clay-page,#design-sheets) .l-pin-buy{grid-template-columns:auto 1fr;align-items:center;
  gap:calc(var(--c-u)*2);margin-top:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-pin-buy .c-acts{justify-content:flex-end}
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .l-pin-buy{grid-template-columns:1fr}
  :is(#clay-page,#design-sheets) .l-pin-buy .c-acts{justify-content:flex-start}
}

/* ── product/tall ── the photograph wide, everything else under it ────────────────────────── */
:is(#clay-page,#design-sheets) .l-pdp-tall{display:grid;gap:calc(var(--c-u)*2)}
/* the words under a full-width picture would run the whole width of the sheet, which is twice the
   line length anything is read at — R4 says the cap is in characters, so it is capped here */
:is(#clay-page,#design-sheets) .l-pdp-under{max-width:var(--c-cap-body);margin-top:calc(var(--c-u)*2)}

/* the rest of the shop under a product — a class, because a shape may not write a size */
:is(#clay-page,#design-sheets) .l-others{--c-min:200px}

/* A THUMBNAIL SWAPS THE BIG PICTURE and says so before it is pressed; the one showing is opaque
   and the rest step back, which is the only state this control has. */
:is(#clay-page,#design-sheets) .l-pdp-t .c-media{cursor:pointer;opacity:.55;transition:opacity .15s}
:is(#clay-page,#design-sheets) .l-pdp-t .c-media.on,
:is(#clay-page,#design-sheets) .l-pdp-t .c-media:hover{opacity:1}
/* ONE CHOICE, ONE ROW. The name of the choice sits over its values rather than beside them, so a
   product with four options is four bands of the same shape and not a table that reflows. */
:is(#clay-page,#design-sheets) .c-opt{display:grid;gap:calc(var(--c-u)*1)}
:is(#clay-page,#design-sheets) .c-opt + .c-opt{margin-top:calc(var(--c-u)*2)}

/* ── viewer/one ── auto · 1fr · auto, and the middle column is the point ──────────────────── */
:is(#clay-page,#design-sheets) .l-view{display:grid;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-view-h{display:flex;justify-content:space-between;align-items:center}
:is(#clay-page,#design-sheets) .l-view-r{display:grid;grid-template-columns:auto 1fr auto;gap:calc(var(--c-u)*1.5);
  align-items:center}
/**
 * THE TWO ARROWS ARE ONE OBJECT EACH — round, the size of a thumb, and the icon centred in it.
 *
 * They were the generic compact button wearing a quotation mark: a pill as wide as a word with a
 * glyph floating high in it, on the one screen that is nothing but a photograph and two arrows.
 * 44px is the smallest a thumb reliably hits, which is what decides the size here.
 */
:is(#clay-page,#design-sheets) .l-view-b{width:44px;height:44px;flex:0 0 44px;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:999px;color:inherit;
  border:var(--c-bw) solid var(--c-line);background:var(--c-fill)}
:is(#clay-page,#design-sheets) .l-view-b:hover{background:var(--c-line)}
:is(#clay-page,#design-sheets) .l-view-b .ico{width:20px;height:20px;display:grid;place-items:center}
:is(#clay-page,#design-sheets) .l-view-b .ico svg{width:100%;height:100%}
/**
 * THE PICTURE HAS NO FRAME HERE, AND THAT IS THE WHOLE OF THIS SCREEN.
 *
 * The viewer's box is a `.c-media` at 3/2, and a `.c-media` is a FRAME: a fixed ratio, a corner,
 * and the placeholder fill behind whatever is put in it. Every other picture on the site wants
 * that. This one is a lightbox — the one place a photograph is shown as it is — and a portrait
 * photograph in a 3/2 frame came out as a tall picture floating in the middle of a pale grey slab
 * with two hundred pixels of nothing either side of it. Photographed: "doesnt look good".
 *
 * So the frame steps back: no fill, no corner, and a HEIGHT rather than a ratio, so the box does
 * not jump between one photograph and the next while somebody pages through. What is left is the
 * picture, contained, on the sheet's own paper — which on a theme whose viewer is black is a
 * photograph on black, and that is what a lightbox is.
 */
:is(#clay-page,#design-sheets) .l-view-r > .c-media{aspect-ratio:auto;background:none;
  /* …AND THE THUMBNAILS STAY ON THE SCREEN. At 72svh the picture plus the head plus the strip came
     to more than the sheet, so the row that says which photograph you are on — and is the fastest
     way to another one — sat below the fold on a laptop. */
  border-radius:0;height:min(58svh, 520px);max-height:none}
/* THE WAY OUT SITS WHERE A WAY OUT SITS. Where the library draws the viewer the head holds the
   close button and nothing else, and a `space-between` head with one child puts it hard left. */
:is(#clay-page,#design-sheets) .viewer .sheet-head:has(> :only-child){justify-content:flex-end}
:is(#clay-page,#design-sheets) .l-view-t{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:calc(var(--c-u)*1)}

/* ── bar/bottom ── a phone design; the desktop bar never left the screen ──────────────────── */
:is(#clay-page,#design-sheets) .l-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  align-items:center;justify-content:space-between;gap:calc(var(--c-u)*1.5);
  padding:calc(var(--c-u)*1.5) calc(var(--c-gut)/2);background:var(--c-paper);color:var(--c-ink);
  border-top:var(--c-bw) solid var(--c-line)}
:is(#clay-page,#design-sheets) .l-bar .c-act{flex:1 1 auto;justify-content:center}
/* nothing to say yet — the client fills it in when the page has a state (a total, a slot) */
:is(#clay-page,#design-sheets) .l-bar .c-fine[hidden]{display:none}
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) .l-bar{display:flex}
  /* AND ROOM UNDER THE PAGE FOR IT. A bar fixed over the last band covers the last band — on
     every page, and the last thing on most of them is the footer's own links. */
  #clay-page:has(.l-bar) .l-foot{padding-bottom:calc(var(--c-u)*11)}
}

/* ── badge ── OUR mark on somebody else's site, and not a theme's to design ───────────────── */
/**
 * THE BADGE IS THE SAME OBJECT ON EVERY THEME, for the same reason the owner's gear is: it is not
 * part of anybody's design. It is Clay saying who made this, on a page that belongs to a business,
 * and it has to be legible and out of the way on every theme that will ever exist — including the
 * ones nobody has written yet.
 *
 * It was described THREE times instead. `site.css` (the bento editor's stylesheet, which a
 * designed page also loads) centres it at the bottom; chunky's theme pins it bottom-right and
 * sizes the mark; bold carries a rule whose whole job is undoing site.css. Three descriptions, and
 * the two faults they produced were exactly the two you get from three descriptions:
 *
 *   · THE WORDMARK WAS SQUASHED. `Clay.site` is a 385×120 drawing and chunky gave it a
 *     `1.15em × 1.15em` box, so it fitted by WIDTH and rendered a third as tall — measured, a 13px
 *     square holding artwork 13 wide and 4 high. Beside "Made with" at 11px it read as a smudge.
 *     Height and auto width: the mark keeps its own proportions and matches the words next to it.
 *
 *   · IT SAT ON TOP OF THE BOTTOM BAR. The bar is fixed to the bottom of a phone and carries the
 *     page's one action; the badge was fixed 14px above the bottom, which is inside it. Measured
 *     on BOTH themes, not just the one the card was written about. The footer already steps aside
 *     for the bar by exactly this much — same number, one place it comes from.
 */
:is(#clay-page,#design-sheets) .qck-badge{position:fixed;z-index:55;
  right:calc(var(--c-gut) / 2);bottom:calc(var(--c-u)*2);left:auto;transform:none;
  display:inline-flex;align-items:center;gap:calc(var(--c-u));width:max-content;
  max-width:calc(100% - var(--c-gut));height:auto;white-space:nowrap;text-decoration:none;
  font:var(--c-label-weight) var(--c-t0)/1 var(--c-body);letter-spacing:0;
  padding:calc(var(--c-u)) calc(var(--c-u)*1.5);border:0;border-radius:999px;
  background:var(--c-flip);color:var(--c-flip-ink);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 4px 14px rgba(0,0,0,.2)}
:is(#clay-page,#design-sheets) .qck-badge .qb-tx{opacity:.85}
/* THE MARK KEEPS ITS SHAPE. It arrives as whatever the server hands over — an svg today — so the
   wrapper is told to be a line box and the drawing is told its HEIGHT only. A width as well is how
   a wordmark ends up a third of its size inside a square. */
:is(#clay-page,#design-sheets) .qck-badge .qb-mark{display:inline-flex;align-items:center;flex:0 0 auto}
:is(#clay-page,#design-sheets) .qck-badge .qb-mark svg{height:1.25em;width:auto;display:block}
/* AND IT STEPS OVER THE BAR, by the same allowance the footer uses — see `bar/bottom` above. */
@container page (max-width:820px){
  #clay-page:has(.l-bar) .qck-badge{bottom:calc(var(--c-u)*11 + var(--c-u)*2)}
}
/* …AND OUT FROM UNDER THE OWNER'S PANEL. An editing owner never sees the badge at all (the rule
   beside the gear), but a previewing one can have the Design panel open beside the page — and the
   panel takes the right of the screen, which is the corner the badge is now in. */
body.panel-open :is(#clay-page,#design-sheets) .qck-badge{
  right:calc(min(380px, 92vw) + var(--c-gut) / 2)}

/* ── text/toc ── the contents one side, the writing the other ─────────────────────────────── */
:is(#clay-page,#design-sheets) .l-text{--c-title-share:.30}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
:is(#clay-page,#design-sheets) .l-toc{position:sticky;top:calc(var(--c-bar) + var(--c-u)*2);display:grid;
  gap:calc(var(--c-u)*1.5)}
/* A CONTENTS LIST IS NOT A SET OF HEADINGS. `row()` sets a name at the display size, which is
   right in a menu and wrong here: beside the document it points at, every entry came out as loud
   as the heading it names, and the page read as two columns of headings. It is a list of places to
   go — body size, and the ink says which is a link. */
:is(#clay-page,#design-sheets) .l-toc .c-row-n{font:var(--c-t2)/var(--c-body-h) var(--c-body);
  text-transform:none;letter-spacing:normal;color:var(--c-soft)}
:is(#clay-page,#design-sheets) .l-toc .c-row-n:hover{color:var(--c-ink)}
:is(#clay-page,#design-sheets) .l-toc .c-row{padding-block:calc(var(--c-u))}
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-text{--c-title-share:1}
  :is(#clay-page,#design-sheets) .l-toc{position:static}
}

/* ── signin · manage · states ── small, one job each ──────────────────────────────────────── */
:is(#clay-page,#design-sheets) .l-signin,:is(#clay-page,#design-sheets) .l-manage{display:grid;gap:calc(var(--c-u)*2);
  max-width:var(--c-cap-max,46ch)}
:is(#clay-page,#design-sheets) .l-states{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-state{display:grid;gap:calc(var(--c-u)*1.5);align-content:start}
:is(#clay-page,#design-sheets) .l-state .c-title{font-size:var(--c-t3);margin:0}

/* ── visitPage/many ── each branch its own ────────────────────────────────────────────────── */
:is(#clay-page,#design-sheets) .l-places{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-place{display:grid;gap:calc(var(--c-u)*1.5);align-content:start}

/* ── bookingPage/three ── what · when · what time, all at once ────────────────────────────── */
:is(#clay-page,#design-sheets) .l-book{--c-title-share:.33;display:grid;grid-template-columns:4fr 5fr 3fr;gap:calc(var(--c-u)*4);
  align-items:start}
:is(#clay-page,#design-sheets) .l-book .l-step{min-width:0}
/**
 * A STEP IN A COLUMN IS ALWAYS OPEN.
 *
 * `.c-step-b` is `display:none` until the client marks its step `.on` — right for the SHEET, where
 * the three are a walk and only one is answered at a time. Side by side they are not a walk: the
 * page opened with a month, a list of times and a form that were all in the document and all
 * hidden, so the whole booking page read as three headings, three rules and nothing under them.
 * The `.on` class still marks where you are; here it no longer decides whether the column exists.
 */
/**
 * NO ECHO WHERE THE ANSWER IS ALREADY ON THE SCREEN.
 *
 * `data-chosen` is what a CLOSED step says about itself — it is how a phone's accordion tells you
 * what you picked three steps ago. Side by side with every step open it printed the chosen service
 * beside the word "Service", the ISO date beside "Day" and the time beside "Time", each of them
 * directly above the thing it was repeating.
 */
:is(#clay-page,#design-sheets) .l-book .c-step-v{display:none}
:is(#clay-page,#design-sheets) .l-book .c-step-h{cursor:default}
:is(#clay-page,#design-sheets) .l-book .c-step-b,
:is(#clay-page,#design-sheets) .l-book-who .c-step-b{display:block}
/* THE DETAILS LIVE IN THE THIRD COLUMN NOW — where the times were, so the flow does not jump
   somewhere else at the last step. It is as wide as its column and no wider. */
:is(#clay-page,#design-sheets) .l-book-who{max-width:100%}
:is(#clay-page,#design-sheets) .l-book-who .c-form{grid-template-columns:1fr}
/* ON A PHONE IT IS A WALK AGAIN. Three columns at 390px is three slivers, and the whole reason
   the walk exists is that a month, forty times and five fields at once is a wall. */
@container page (max-width:900px){ :is(#clay-page,#design-sheets) .l-book{grid-template-columns:1fr;--c-title-share:1} }

/* ── the breadcrumb ── one step back, never a map of a site two levels deep ───────────────── */
/* ITS OWN STRIP, AGAINST THE BAR. A band's rhythm is for a band; the line that says where you are
   is chrome, and it belongs a couple of units under the navigation rather than a screenful. The
   band below it opens as it always did, so the page keeps its rhythm from the heading down. */
:is(#clay-page,#design-sheets) .l-crumbs{padding:calc(var(--c-u)*3) 0 0}
:is(#clay-page,#design-sheets) .l-crumbs + .c-band{padding-top:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-crumbs + .c-band{border-top:0}
/**
 * A BREADCRUMB IS NOT A BAND, AND ON A PANEL THEME IT WAS BEING DRAWN AS ONE.
 *
 * `panels: "card"` moves a band's ground onto its `.c-in` and pads that panel with the page's
 * rhythm — which is right for a band and absurd for a line of thirteen pixels. Measured on a shop
 * page: the crumb sat in a 243px panel with 115 of padding above it and 115 below, so "Home /
 * Monello Shop" floated in the middle of an empty box, a screen away from the heading it belongs
 * to. "Breadcrump way too high.. not sure if this is a wireframe problem or theme."
 *
 * It is neither: it is the panel treatment meeting a piece of chrome. `page()` already hands the
 * crumb the ground of the band UNDER it, precisely so the two are one surface — so the answer is
 * to join them. The crumb keeps the panel's top corners, the head keeps its bottom ones, the edge
 * where they meet is square and unpadded, and what a visitor sees is one panel with a crumb along
 * the top of it. Which is what a breadcrumb is.
 */
/* THE SAME SHAPE AS THE RULE IT OVERRULES. The panel treatment is written on
   `[data-tone-panels] .c-band:not(.c-g-photo) > .c-in` — an attribute and three classes — so a
   shorter selector here loses on weight and the crumb keeps its 115 pixels. */
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-band.l-crumbs:not(.c-g-photo) > .c-in,
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .c-band.l-crumbs:not(.c-g-photo) > .c-in-wide{
  padding-block:calc(var(--c-u)*2);
  border-end-start-radius:0;border-end-end-radius:0}
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .l-crumbs + .c-band:not(.c-g-photo) > .c-in,
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .l-crumbs + .c-band:not(.c-g-photo) > .c-in-wide{
  border-start-start-radius:0;border-start-end-radius:0}
/* …and nothing between the two panels, or the join is a hairline of paper */
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .l-crumbs{padding-block-end:0}
:is(#clay-page,#design-sheets)[data-tone-panels="card"] .l-crumbs + .c-band{padding-top:0}
:is(#clay-page,#design-sheets) .l-crumb{display:flex;gap:calc(var(--c-u));align-items:center;
  margin-bottom:0;font:var(--c-t0)/1 var(--c-body);color:var(--c-soft);
  letter-spacing:var(--c-label-track);text-transform:var(--c-label-case);flex-wrap:wrap}
:is(#clay-page,#design-sheets) .l-crumb a{color:inherit;text-decoration:none;
  border-bottom:var(--c-bw) solid currentColor}
:is(#clay-page,#design-sheets) .l-crumb b{color:var(--c-ink);font-weight:inherit}

/* ── pagehead/beside ── the words, and the feature's own picture beside them ──────────────── */
:is(#clay-page,#design-sheets) .l-phead{--c-title-share:.55}   /* the heading is in this many twelfths of the page — see `--c-title-share` */
:is(#clay-page,#design-sheets) .l-phead > .c-in{--c-split:7fr 5fr}
@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-phead{--c-title-share:1} }

/* the street, under the heading rather than as one — see visit/map in the library */
/* AN ADDRESS IS NEVER SHOUTED. `text-transform` inherits, so a street sitting inside a head that
   uppercases its overline came out as JL. RAYA PENGOSEKAN UBUD NO.108, KECAMATAN UBUD — which is
   two lines of capitals nobody can read and, worse, is not how the street is written. It is said
   explicitly here rather than left to whatever it happens to sit inside. */
:is(#clay-page,#design-sheets) .c-place-a{font:var(--c-t2)/var(--c-body-h) var(--c-body);color:var(--c-ink);
  text-transform:none;letter-spacing:normal;
  margin:calc(var(--c-u)*1) 0 0;max-width:40ch}

/* ── close/centre ── the last thing on the page, and the narrowest ────────────────────────── */
:is(#clay-page,#design-sheets) .l-close > .c-in{max-width:var(--c-cap-max,52ch)}

/**
 * ── THE RAIL ── on a phone, a row of cards scrolls sideways. One rule, four rows.
 *
 * Stacked, four of anything is four screens of scrolling before the page starts again — and the
 * photographs, the ways in, the quotations and the faces are all rows a visitor takes in at a
 * glance rather than reads. One at a time, snapping, the next one peeking so the gesture is
 * obvious: what a phone already means.
 *
 * EVERY ROW OF CARDS, NOT FOUR NAMED ONES — and the shop is the exception that says why.
 *
 * It listed the rows it knew about, so a row drawn after it was written simply did not scroll:
 * `.c-does` in that list is a class nothing emits any more, and What we do — drawn with the shared
 * `grid()` like everything else — stacked into a column of cards on a phone while the reviews
 * beside it scrolled. A list of names goes stale the day somebody draws a fifth row.
 *
 * So it is every `.c-grid`, and the one kind that opts OUT says so. A rail is a TASTE of a set —
 * three cards you swipe and move on. A catalogue is not a taste, and a row you swipe HIDES
 * products, so the shop's grids carry `c-grid-all` and wrap the way a page of forty things should.
 *
 * THREE COPIES OF THIS EXISTED, one under each of the first three rows, and the fourth row (the
 * people, on the story page) had none — so the team stacked into a column of portraits while
 * everything above and below it scrolled. Three hand-written copies of one behaviour do not stay
 * the same: they had three different bleed rules and two of them had no `padding-bottom`.
 *
 * A row states how wide ONE card is (`--c-rail`) and nothing else. Everything here is the rail.
 *
 * `overflow-x` on the row only: the PAGE must never scroll sideways (scripts/check-overflow).
 */
@container (max-width:560px){
  :is(#clay-page,#design-sheets) :is(.c-strip,.l-faces,.c-grid:not(.c-grid-all)){
    display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:none;
    grid-auto-columns:var(--c-rail,78%);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:var(--c-u);
    /**
     * AND THE SNAP RESPECTS THE GUTTER, which is the half that was missing.
     *
     * The bleed and its compensating padding are a pair (see the chips), and on a SNAPPING rail
     * they are not enough on their own: `scroll-snap-align:start` snaps an item to the scrollport,
     * whose start is the padding edge, so the browser quietly scrolled the rail right by exactly
     * the padding it had just been given. Measured: padding 10px, `scrollLeft` 10, first card
     * resting at x=0 with the heading above it at x=10.
     *
     * `scroll-padding` is what moves the snapport itself. Same number as the padding, from the
     * same token, so the card the rail settles on lines up with the words above it.
     */
    scroll-padding-inline:0}
  /**
   * THE BLEED IS FOR A ROW THAT SITS ON THE PAGE'S OWN COLUMN, and only for one.
   *
   * Running the cards into the gutter is what makes a rail look like a rail rather than a boxed
   * carousel — but it is a NEGATIVE MARGIN, and a negative margin needs somewhere to go. A row
   * nested deeper than the page column has no gutter beside it, so the bleed simply made it wider
   * than the screen: the other products under a product were 408px in a 388px phone, and the whole
   * page scrolled sideways. Found by `scripts/sweep.mjs` the minute every grid became a rail.
   */
  :is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > :is(.c-strip,.l-faces,.c-grid:not(.c-grid-all)){
    margin-inline:calc(var(--c-gut) / -2);padding-inline:calc(var(--c-gut) / 2);
    scroll-padding-inline:calc(var(--c-gut) / 2)}
  :is(#clay-page,#design-sheets) :is(.c-strip,.l-faces,.c-grid:not(.c-grid-all))::-webkit-scrollbar{display:none}
  :is(#clay-page,#design-sheets) :is(.c-strip,.l-faces,.c-grid:not(.c-grid-all)) > *{scroll-snap-align:start}
  /* ONE OF ANYTHING HAS NOTHING TO SCROLL TO, so it is simply the width of the band. Stated once
     here rather than three times: one of the three said it with `:has`, one with an attribute
     selector on an inline custom property, and one did not say it at all. */
  :is(#clay-page,#design-sheets) :is(.c-strip,.l-faces,.c-grid:not(.c-grid-all)):not(:has(> * + *)){
    grid-auto-columns:100%}
  /**
   * AND WHERE A SET IS GENUINELY STACKED, AN EMPTY FRAME PROTECTS NOTHING.
   *
   * `card()` keeps the frame of a picture that has not arrived so a row of cards still lines up —
   * see the note beside `slot` in parts.js. That reasoning is about a ROW: the name sits at the
   * top of one card and under a photograph on the two beside it, and the row reads as broken.
   *
   * On a phone a plain grid is one card per row, so there is nothing beside it and nothing to line
   * up with — and the frame becomes a blank block the height of the screen between two products.
   * The rails above are the exception and are excluded by the same names: they put three cards
   * side by side on a phone, which is a row, which is where the frame earns its place.
   *
   * Measured rather than assumed: every grid here is one per row at 560px and two or more at 600.
   */
  :is(#clay-page,#design-sheets) .c-grid:not(:is(.c-strip,.c-does,.c-quotes,.l-faces)) .c-card > .c-media:empty{display:none}
}

/* ── footer/two ── where else this business is, under its name ────────────────────────────── */
/* MARKS, NOT WORDS. Nobody scans "Instagram, Facebook, TikTok" as a list; they look for the mark.
   Sized off the same scale as everything else, and the row wraps rather than pushing the column. */
:is(#clay-page,#design-sheets) .l-social{display:flex;flex-wrap:wrap;gap:calc(var(--c-u)*1.5);
  margin-top:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-social a{display:grid;place-items:center;width:calc(var(--c-u)*5);
  height:calc(var(--c-u)*5);border-radius:999px;color:inherit;text-decoration:none;
  border:var(--c-bw) solid var(--c-line);transition:border-color .14s ease,opacity .14s ease}
:is(#clay-page,#design-sheets) .l-social a:hover{border-color:var(--c-accent)}
:is(#clay-page,#design-sheets) .l-social .ico{width:18px;height:18px;display:grid;place-items:center}
:is(#clay-page,#design-sheets) .l-social .ico svg{width:100%;height:100%}


/* ═══════════════════════════════════════════════════════════════════════════════════════════
 * THE VERSIONS COLLECTED AT /edit/sections
 *
 * One block per drawing, in the order they sit in library.js. Tokens only — a version states
 * geometry and the theme states everything else, which is what lets one drawing be judged on
 * every paint at /wireframe → SECTION → VERSION.
 * ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* `header/shapes` is gone, and its twelve-column grid with it — the drawing was deleted, and a
   class no drawing emits is a rule nobody can reach. */


/* ── header/word ── the name as large as the band carries, pictures on its baseline ───────── */
:is(#clay-page,#design-sheets) .l-hd-word{display:grid;gap:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-hd-word-top{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;gap:var(--c-gap);align-items:start}
:is(#clay-page,#design-sheets) .l-hd-word-top .c-line{max-width:46ch;margin:0}
:is(#clay-page,#design-sheets) .l-hd-word-top .c-acts{margin:0;justify-content:end}
/* THE SIZE IS THE LENGTH. A scale that ignores how many characters there are is how a sentence
   becomes eight lines tall; this drawing is the extreme case of it, because the point is a word
   that fills the band. The count arrives as `--c-len` and the division happens here. */
:is(#clay-page,#design-sheets) .l-hd-word-t{margin:0;line-height:.88;
  font-size:clamp(var(--c-t5), calc(190cqw / var(--c-len,20)), 17cqw)}
/* THE TOPS OF THE PICTURES COVER THE BOTTOM OF THE LETTERS — one step of the scale, negative,
   written as `*4*-1` so it is still a value off the scale rather than a number nobody chose. */
:is(#clay-page,#design-sheets) .l-hd-word-p{display:grid;
  grid-template-columns:repeat(var(--c-cols,4),minmax(0,1fr));gap:calc(var(--c-u)*.5);
  margin-block-start:calc(var(--c-u)*3*-1);position:relative;z-index:1}
/* THE ROW HAS A CEILING AND THE CEILING IS NOT THE RATIO'S.
   `.c-media` caps at most of the screen, and a cap with no definite WIDTH hands the ratio the job
   of deciding how wide the picture is — so one photograph in a 1327px column came out 561px wide
   with 766px of nothing beside it. Both dimensions are stated, the ratio steps aside, and
   `object-fit:cover` does the crop. A FIXED unit, because `svh` in the catalogue is the height of
   the whole document and the ceiling would show nowhere it is judged. */
:is(#clay-page,#design-sheets) .l-hd-word-p .c-media{width:100%;max-height:26rem}
/**
 * …AND THE SAME ON `header/word` — the name comes before what is said about it.
 *
 * The top strip carries the overline, the sentence and the button, and on a desk it sits ABOVE the
 * word because there is room beside it. Stacked on a phone that reads: label, sentence, button,
 * and only then the name of the business — the one word this whole drawing exists to show.
 *
 * The strip stops being a box and its parts take their own places: the label, then the name with
 * the photographs standing on its baseline (which is the design, and is kept together), then the
 * sentence and the button under them.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-hd-word{display:flex;flex-direction:column}
  :is(#clay-page,#design-sheets) .l-hd-word-top{display:contents}
  :is(#clay-page,#design-sheets) .l-hd-word-top .c-eyebrow{order:1}
  :is(#clay-page,#design-sheets) .l-hd-word-t{order:2}
  /* AND THE OVERLAP GOES WITH THE COLUMN. The tops of the pictures covering the bottom of the
     letters is the drawing's signature — over ONE WORD filling the band, which is what it is for.
     A sentence that has wrapped to three lines is not that: the picture's top edge lands on the
     baseline of the last line and reads as two things that collided, not as one that overlaps.
     Photographed at 390. The pull comes off and the column's own gap does the work. */
  :is(#clay-page,#design-sheets) .l-hd-word-p{order:3;margin-block-start:0}
  :is(#clay-page,#design-sheets) .l-hd-word-top .c-line{order:4;max-width:none}
  :is(#clay-page,#design-sheets) .l-hd-word-top .c-acts{order:5;justify-content:start}
  /* the rating is a child of the drawing rather than of the strip, and an unstated order is 0 —
     which put it above everything else. Every child of a re-ordered column has to say where it is. */
  :is(#clay-page,#design-sheets) .l-hd-word > .c-proof{order:6}
  /* FOUR PICTURES ACROSS A PHONE IS FOUR SLIVERS. They swipe instead — and one is not a rail,
     so the template only gives way when there is more than one. */
  :is(#clay-page,#design-sheets) .l-hd-word-p:not([style*="--c-cols:1"]){
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:52%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none}
  :is(#clay-page,#design-sheets) .l-hd-word-p > *{scroll-snap-align:start}
}

/* ── header/bento ── four soft boxes, sized by what the business has ──────────────────────── */
/* SIX COLUMNS AND A SPAN PER BOX, and the span is the DRAWING's answer — no photograph is four
   columns of words plus nothing, not a hole where a picture would have been. */
:is(#clay-page,#design-sheets) .l-hd-bento{display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--c-gap)}
:is(#clay-page,#design-sheets) .l-hd-bento > *{grid-column:span var(--c-span,6)}
:is(#clay-page,#design-sheets) :is(.l-hd-bento-w,.l-hd-bento-s,.l-hd-bento-a){
  background:var(--c-card-bg,var(--c-fill));color:var(--c-ink);
  border:var(--c-card-bw,0) solid var(--c-line);border-radius:var(--c-r);
  padding:max(var(--c-card-pad), calc(var(--c-u)*4))}
:is(#clay-page,#design-sheets) .l-hd-bento-w{position:relative;display:flex;
  flex-direction:column;justify-content:end;gap:calc(var(--c-u)*2);min-height:calc(var(--c-u)*40)}
:is(#clay-page,#design-sheets) .l-hd-bento-w .c-title{margin:0}
:is(#clay-page,#design-sheets) .l-hd-bento-tag{margin:0;font-family:var(--c-label);
  font-size:var(--c-t0);font-weight:var(--c-label-weight);letter-spacing:var(--c-label-track);
  text-transform:var(--c-label-case);align-self:start;
  padding:calc(var(--c-u)*.5) calc(var(--c-u)*1.5);border-radius:999px;
  background:var(--c-a-100);color:var(--c-a-800)}
/* THE ARROW IN THE CORNER IS THE SAME DESTINATION AS THE BUTTON. A header has one goal. */
:is(#clay-page,#design-sheets) .l-hd-bento-go{position:absolute;
  inset-block-start:calc(var(--c-u)*4);inset-inline-end:calc(var(--c-u)*4);
  width:calc(var(--c-u)*7);height:calc(var(--c-u)*7);display:grid;place-items:center;
  border-radius:999px;border:var(--c-bw) solid var(--c-line);color:inherit;
  transition:border-color .14s ease,transform .18s ease}
:is(#clay-page,#design-sheets) .l-hd-bento-go svg{width:45%;height:45%}
:is(#clay-page,#design-sheets) .l-hd-bento-go:hover{border-color:var(--c-accent)}
:is(#clay-page,#design-sheets) .l-hd-bento-p .c-media{height:100%;width:100%;max-height:none}
:is(#clay-page,#design-sheets) .l-hd-bento-a{display:flex;flex-direction:column;
  justify-content:center;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-hd-bento-a .c-line{margin:0;max-width:44ch}
:is(#clay-page,#design-sheets) .l-hd-bento-a .c-acts{margin:0}
:is(#clay-page,#design-sheets) .l-hd-bento-s{display:grid;align-items:center}
:is(#clay-page,#design-sheets) .l-hd-bento-s .c-proof{margin:0}
/**
 * THE SCORE IS THE POINT OF THAT BOX, so it is the size of one.
 *
 * The proof line is built for sitting under a button — a score, a count and where they came from,
 * all at body size on one line. In a bento it gets a whole box to itself, and a box the size of a
 * card with one small line in the middle of it reads as a box that failed to fill. The number goes
 * up a step and takes its own line; everything after it flows underneath, as the caption it is.
 */
:is(#clay-page,#design-sheets) .l-hd-bento-s .c-proof-t{display:block}
:is(#clay-page,#design-sheets) .l-hd-bento-s .c-proof-t b:first-child{display:block;
  font-size:var(--c-t5);line-height:var(--c-lead-h);margin-block-end:calc(var(--c-u)*.5)}
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-hd-bento > *{grid-column:1/-1}
  :is(#clay-page,#design-sheets) .l-hd-bento-w{min-height:0}
  /**
   * THE ARROW GOES TO THE FOOT OF THE CARD, NOT THE HEAD OF IT.
   *
   * Taken out of the corner it becomes a row of the column, and `order:-1` put that row FIRST: a
   * 56px black disc against the right edge with 250 pixels of nothing beside it, and the label
   * and the headline starting below all that. Measured on a phone — the chip sat 72 pixels down a
   * card whose content is 291 tall. It reads as a hole, because it is one.
   *
   * Last instead, under the words, hard right: the way in at the end of what it is a way into,
   * which is where a card puts one.
   */
  :is(#clay-page,#design-sheets) .l-hd-bento-go{position:static;order:1;
    margin-inline-start:auto;margin-block-start:calc(var(--c-u)*1)}
}

/* ── header/rule ── a masthead: three hairlines and the words between them ────────────────── */
:is(#clay-page,#design-sheets) .l-hd-rule{display:grid;gap:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-hd-rule-t{margin:0}
:is(#clay-page,#design-sheets) .l-hd-rule-m{display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:var(--c-gap);align-items:center;
  border-block:var(--c-bw) solid var(--c-line);
  padding-block:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-hd-rule-m .c-line{margin:0;max-width:52ch}
/* A LINK WITH A RULE UNDER IT, not a filled lozenge — in this drawing the hairlines ARE the
   design, and a black button in the middle of them is a different page. */
:is(#clay-page,#design-sheets) .l-hd-rule-go{display:inline-flex;align-items:center;
  gap:calc(var(--c-u)*1.5);text-decoration:none;color:inherit;font-family:var(--c-act-font);
  font-weight:var(--c-act-weight);text-transform:var(--c-act-case);
  padding-block-end:calc(var(--c-u)*.5);border-bottom:var(--c-bw) solid currentColor}
:is(#clay-page,#design-sheets) .l-hd-rule-go svg{width:1.1em;height:1.1em;
  transition:transform .18s ease}
:is(#clay-page,#design-sheets) .l-hd-rule-go:hover svg{transform:translateX(3px)}
:is(#clay-page,#design-sheets) .l-hd-rule-p{width:100%}
:is(#clay-page,#design-sheets) .l-hd-rule-f{display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:var(--c-gap);align-items:center;
  border-block-start:var(--c-bw) solid var(--c-line);padding-block-start:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-hd-rule-f .c-proof,
:is(#clay-page,#design-sheets) .l-hd-rule-f .c-eyebrow{margin:0}
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) :is(.l-hd-rule-m,.l-hd-rule-f){
    grid-template-columns:minmax(0,1fr);justify-items:start;gap:calc(var(--c-u)*2)}
}

/* ── people/rail ── the names above the faces, and a row you skim ─────────────────────────── */
/* A RAIL AT EVERY WIDTH, not only on a phone. A team is a thing you skim; a grid of five faces is
   a wall of eye contact, and the reference is a row that runs past both edges of the screen. */
:is(#clay-page,#design-sheets) .l-team-rail{--c-rail:62%;display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,calc(var(--c-u)*30));gap:var(--c-gap);justify-content:center;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-block-end:var(--c-u);text-align:start}
/**
 * …AND ON A PHONE ITS CARDS STOP SHRINKING.
 *
 * `minmax(0, 30u)` reads as "up to 240 wide" and means "down to nothing": the minimum is zero, so
 * four people in a 342px column came out as four 78px cards with the names clipped — "Kade",
 * "Waya", "Putu", "Ny". A rail that fits everything is not a rail; it is a squashed row.
 *
 * The shared rail two hundred lines up has answered this since it was written — one card is a
 * PERCENTAGE of the screen, so the row overflows and scrolls. Same idea, same token name, and the
 * rail starts at the left edge rather than centring a row that is wider than its container.
 */
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .l-team-rail{grid-auto-columns:var(--c-rail);
    justify-content:start}
}
:is(#clay-page,#design-sheets) .l-team-rail > *{scroll-snap-align:start}
:is(#clay-page,#design-sheets) .l-team-card{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*2);background:var(--c-card-bg,var(--c-fill));color:var(--c-ink);
  border:var(--c-card-bw,0) solid var(--c-line);border-radius:var(--c-r);
  padding:max(var(--c-card-pad), calc(var(--c-u)*2))}
:is(#clay-page,#design-sheets) .l-team-w{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*.5)}
/* A PERSON'S NAME IS A NAME, NOT A HEADING — one step above the job and no more, so a row of five
   of them does not read as five bands that ran together. */
:is(#clay-page,#design-sheets) .l-team-n{font-family:var(--c-display);font-size:var(--c-t3);
  font-weight:var(--c-weight);line-height:var(--c-lead-h);letter-spacing:var(--c-track)}
:is(#clay-page,#design-sheets) .l-team-r{font-size:var(--c-t1);color:var(--c-soft)}
:is(#clay-page,#design-sheets) .l-team-p{width:100%}

/* ── people/panel ── a card laid over the bottom of the portrait ──────────────────────────── */
:is(#clay-page,#design-sheets) .l-team-panels{display:grid;gap:var(--c-gap);
  grid-template-columns:repeat(var(--c-cols,3),minmax(0,1fr))}
/* THE ROOM FOR THE PANEL IS THE CARD'S OWN, not the row's — a padding on the row would move the
   band's edges and a margin on the last one would not be there at all. */
:is(#clay-page,#design-sheets) .l-team-panel{position:relative;
  padding-block-end:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-team-pw{position:absolute;inset-inline:calc(var(--c-u)*3);
  inset-block-end:0;display:flex;flex-direction:column;gap:calc(var(--c-u)*.5);
  background:var(--c-card-bg,var(--c-paper));color:var(--c-ink);
  border:var(--c-card-bw,0) solid var(--c-line);border-radius:var(--c-r);
  padding:max(var(--c-card-pad), calc(var(--c-u)*2))}
:is(#clay-page,#design-sheets) .l-team-pw .l-team-r{order:-1}

/* ── people/over ── the name in the corner of the photograph ──────────────────────────────── */
:is(#clay-page,#design-sheets) .l-team-overs{display:grid;gap:var(--c-gap);
  grid-template-columns:repeat(var(--c-cols,3),minmax(0,1fr))}
:is(#clay-page,#design-sheets) .l-team-over{position:relative;overflow:hidden;
  border-radius:var(--c-r)}
/* THE WORDS HAVE TO STAY READABLE OVER A PHOTOGRAPH NOBODY VETTED — the same scrim the tiles use */
:is(#clay-page,#design-sheets) .l-team-over::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.68), rgba(0,0,0,.10) 46%, rgba(0,0,0,0));z-index:1}
:is(#clay-page,#design-sheets) .l-team-ow{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:calc(var(--c-u)*.5);padding:calc(var(--c-u)*3);color:#fff}
:is(#clay-page,#design-sheets) .l-team-ow .l-team-r{color:rgba(255,255,255,.82)}
/* ONE PERSON IS NOT A SCREENFUL OF PORTRAIT. Across a whole band a 4/5 crop is taller than the
   phone it is read on, and `.c-media`'s own ceiling is measured in `svh` — which in the catalogue
   is the height of the entire document, so it never fires where this is judged. */
:is(#clay-page,#design-sheets) :is(.l-team-panels,.l-team-overs)[style*="--c-cols:1"] .l-team-p{
  max-height:26rem}
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) :is(.l-team-panels,.l-team-overs){
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none;padding-block-end:var(--c-u)}
  :is(#clay-page,#design-sheets) :is(.l-team-panels,.l-team-overs) > *{scroll-snap-align:start}
  /* …and one of a thing is not a rail: a single card kept at 72% sits short of the right edge
     with nothing to swipe to. */
  :is(#clay-page,#design-sheets) :is(.l-team-panels,.l-team-overs)[style*="--c-cols:1"]{
    grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);
    overflow-x:visible;padding-block-end:0}
}

/* ── asks/aside ── the heading at the top of the column and the way out at its foot ───────── */
:is(#clay-page,#design-sheets) .l-asks-aside{display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--c-gap)}
/* THE COLUMN ONLY EXISTS WHERE THERE IS SOMETHING IN IT — see the note in library.js. On its own
   page the head has said the words already, and a fixed pair left the left third blank. */
:is(#clay-page,#design-sheets) .l-asks-aside[style*="--c-cols:2"]{
  grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
/* THE COLUMN'S TWO ENDS FRAME THE ANSWERS. That is the whole drawing: a heading at the top and a
   button hard under it is the arrangement the dialled band already draws. */
:is(#clay-page,#design-sheets) .l-asks-aside-w{display:flex;flex-direction:column;
  justify-content:space-between;gap:calc(var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-asks-aside-f{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*3)}
:is(#clay-page,#design-sheets) .l-asks-aside-f .c-acts{margin:0}
/* EVERY QUESTION IS A RAISED CARD, and the mark that opens it is a circle at the far end. */
/* A STACK OF CARDS, NOT ONE BOX WITH RULES IN IT. `.c-asks` is not a grid — a `gap` on it does
   nothing at all, so the raised cards touched and read as a single panel. */
:is(#clay-page,#design-sheets) .l-asks-cards{display:grid;align-content:start;
  grid-template-columns:minmax(0,1fr);gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-asks-cards .c-ask{background:var(--c-card-bg,var(--c-paper));
  border:var(--c-card-bw,0) solid var(--c-line);border-radius:var(--c-r);
  padding:max(var(--c-card-pad), calc(var(--c-u)*3));border-bottom:0}
@container page (max-width:760px){
  /**
   * ONE COLUMN, AND IT HAS TO SAY `--c-cols:2` TO WIN.
   *
   * The pair above is `.l-asks-aside[style*="--c-cols:2"]` — a class AND an attribute — and a bare
   * `.l-asks-aside` in here is one class, so it lost on weight and the phone kept the desk's two
   * columns: a 102px column of heading beside a 178px column of questions, on a 430px screen. Seen
   * on a real phone, on the live site, with the heading wrapping to two words a line and every
   * question three. R12 says it in one line — "no two-column anything below 560px unless both
   * columns are genuinely narrow" — and this is the rule that was supposed to enforce it.
   *
   * Named rather than made `!important`: the pair and the collapse are two statements about the
   * same drawing, and the second has to be able to see the first.
   */
  :is(#clay-page,#design-sheets) .l-asks-aside,
  :is(#clay-page,#design-sheets) .l-asks-aside[style*="--c-cols:2"]{
    grid-template-columns:minmax(0,1fr)}
  /* IN READING ORDER ON A PHONE — heading, questions, then the way out. The "sit at the bottom"
     trick needs a column tall enough to have a bottom. */
  :is(#clay-page,#design-sheets) .l-asks-aside-w{display:contents}
  :is(#clay-page,#design-sheets) .l-asks-aside-f{order:3}
}

/* ── asks/bar ── a rule across the band, a picture low in the margin ──────────────────────── */
:is(#clay-page,#design-sheets) .l-asks-bar-t{display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:var(--c-gap);align-items:end;
  border-block-end:var(--c-bw) solid var(--c-line);padding-block-end:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-asks-bar-t .c-title{margin:0;font-size:var(--c-t4)}
:is(#clay-page,#design-sheets) .l-asks-bar-go{display:inline-flex;align-items:center;
  gap:calc(var(--c-u)*1.5);text-decoration:none;color:var(--c-soft)}
:is(#clay-page,#design-sheets) .l-asks-bar-go svg{width:1.1em;height:1.1em;
  transition:transform .18s ease}
:is(#clay-page,#design-sheets) .l-asks-bar-go:hover{color:var(--c-ink)}
:is(#clay-page,#design-sheets) .l-asks-bar-go:hover svg{transform:translateX(3px)}
:is(#clay-page,#design-sheets) .l-asks-bar-b{display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--c-gap);
  margin-block-start:calc(var(--c-u)*7)}
:is(#clay-page,#design-sheets) .l-asks-bar-b[style*="--c-cols:2"]{
  grid-template-columns:minmax(0,3fr) minmax(0,8fr)}
/* THE PICTURE IS LOW ON PURPOSE — it is what stops a tall margin reading as a column that failed
   to fill. With no photograph the sentence simply sits there and nothing else moves. */
:is(#clay-page,#design-sheets) .l-asks-bar-m{display:flex;flex-direction:column;
  justify-content:end;gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-asks-bar-p{width:100%}
/* `align-content:start`, or one question in a column beside a photograph is a card stretched to
   the height of the picture with a line of type at the top of it. */
:is(#clay-page,#design-sheets) .l-asks-fills{display:grid;align-content:start;
  grid-template-columns:minmax(0,1fr);gap:calc(var(--c-u)*1.5)}
:is(#clay-page,#design-sheets) .l-asks-fills .c-ask{background:var(--c-fill);
  border-radius:var(--c-r);padding:calc(var(--c-u)*3);border-bottom:0}
/**
 * A QUESTION IN A BOX PAYS FOR ITS ROOM ONCE.
 *
 * `.c-ask summary` carries `padding-block: 2u` because in the DIALLED band a question is a row in
 * a ruled list and that padding is the row. Put the same question in a card and the card pays for
 * it too: measured, 24 of card plus 16 of summary above a 22px line and the same underneath — a
 * 102 pixel lozenge holding one line of type. On a phone that is a blob, and it is the shape
 * `asks/aside` and `asks/fills` are both drawn out of.
 *
 * The box provides the room; the row inside it does not. Same for the answer, which was padding
 * its own bottom inside a card that already had one.
 */
:is(#clay-page,#design-sheets) .l-asks-cards .c-ask summary,
:is(#clay-page,#design-sheets) .l-asks-fills .c-ask summary{padding-block:0}
:is(#clay-page,#design-sheets) .l-asks-cards .c-ask .c-line,
:is(#clay-page,#design-sheets) .l-asks-fills .c-ask .c-line{padding-bottom:0;
  padding-top:calc(var(--c-u)*2)}
@container page (max-width:760px){
  /* the same trap as `l-asks-aside` above — the pair is a class and an attribute, so the collapse
     has to name the attribute too or the phone keeps three-eighths of a screen of photograph */
  :is(#clay-page,#design-sheets) .l-asks-bar-b,
  :is(#clay-page,#design-sheets) .l-asks-bar-b[style*="--c-cols:2"]{
    grid-template-columns:minmax(0,1fr);
    margin-block-start:calc(var(--c-u)*4)}
  :is(#clay-page,#design-sheets) .l-asks-bar-t{grid-template-columns:minmax(0,1fr);
    justify-items:start;gap:calc(var(--c-u)*2)}
}

/* ── capture/beside · capture/three ── the reason, the card, and the other ways ───────────── */
:is(#clay-page,#design-sheets) .l-cap-beside{display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--c-gap);align-items:start}
/* TWO COLUMNS ONLY WHERE THERE IS SOMETHING FOR THE SECOND ONE. On its own page the head has
   already said the words and a business with no telephone has no ways, so a fixed pair left a
   third of a screen of nothing beside the form. */
:is(#clay-page,#design-sheets) .l-cap-beside[style*="--c-cols:2"]{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* `width:100%` AS WELL AS THE CAP. A centred band lays its children out shrink-to-fit, so a
   max-width alone left the form at its own content width — 363px of card in 1254px of band. */
:is(#clay-page,#design-sheets) .l-cap-beside:not([style*="--c-cols:2"]) .l-cap-card{
  width:100%;max-width:min(680px,100%);margin-inline:auto}
:is(#clay-page,#design-sheets) .l-cap-three{display:grid;gap:var(--c-gap);align-items:start;
  grid-template-columns:minmax(0,1fr)}
:is(#clay-page,#design-sheets) .l-cap-three[style*="--c-cols:2"]{
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
:is(#clay-page,#design-sheets) .l-cap-three[style*="--c-cols:3"]{
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr)}
:is(#clay-page,#design-sheets) .l-cap-w{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*4)}
/* THE FORM IS A CARD AND THE WORDS ARE NOT — which is what makes the band read as an invitation
   with a form in it rather than as a form with a heading over it. */
/* ONE FIELD PER ROW. `.c-form` fits as many columns as the width allows, which is right for a
   form across a whole band and wrong inside a card: a name and a mail box side by side in a
   column is two half-fields, and the reference is a stack of full-width ones. */
:is(#clay-page,#design-sheets) .l-cap-card{background:var(--c-card-bg,var(--c-paper));
  color:var(--c-ink);border:var(--c-card-bw,0) solid var(--c-line);border-radius:var(--c-r);
  padding:max(var(--c-card-pad), calc(var(--c-u)*5));grid-template-columns:minmax(0,1fr)}
:is(#clay-page,#design-sheets) .l-cap-ways{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*4)}
:is(#clay-page,#design-sheets) .l-cap-list{list-style:none;margin:0;padding:0;display:grid;
  gap:calc(var(--c-u)*2)}
:is(#clay-page,#design-sheets) .l-cap-way a{display:flex;align-items:center;
  gap:calc(var(--c-u)*2);text-decoration:none;color:inherit}
:is(#clay-page,#design-sheets) .l-cap-way .ico{width:calc(var(--c-u)*5);height:calc(var(--c-u)*5);
  flex:0 0 auto;display:grid;place-items:center;border-radius:999px;
  border:var(--c-bw) solid var(--c-line);color:var(--c-soft)}
:is(#clay-page,#design-sheets) .l-cap-way .ico svg{width:46%;height:46%}
/* NO GLYPH, NO EMPTY CIRCLE — a blank slot beside three real ones is worse than three. */
:is(#clay-page,#design-sheets) .l-cap-way .ico[data-blank]{display:none}
/* EVERY PAIR NAMED WITH ITS ATTRIBUTE. `.l-cap-beside` was in this list as a bare class and won
   only because `:is()` borrows the heaviest weight in its own list from `.l-cap-three[style*=…]`
   standing beside it — true today, and untrue the moment somebody removes that entry. Said
   properly, one per line, and `rules.test.js` now checks that every stated pair is answered. */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-cap-beside,
  :is(#clay-page,#design-sheets) .l-cap-beside[style*="--c-cols:2"],
  :is(#clay-page,#design-sheets) .l-cap-three,
  :is(#clay-page,#design-sheets) .l-cap-three[style*="--c-cols:2"],
  :is(#clay-page,#design-sheets) .l-cap-three[style*="--c-cols:3"]{
    grid-template-columns:minmax(0,1fr)}
}

/* ── EVERY VERSION'S CARD, ON A PHONE ───────────────────────────────────────────────────────
 *
 * A version's card asks for MORE room inside it than a card normally gets — `max(--c-card-pad,
 * 5u)` and the like — and that is right on a desk, where the card is 500 pixels wide and the extra
 * air is what makes it a panel rather than a box. On a phone the same card is 308 pixels wide and
 * 40 of padding either side is a quarter of it: measured on `capture/beside`, 228 pixels of usable
 * column inside a 308 pixel card, inside a panel, inside a 390 pixel screen.
 *
 * So on a phone a version's card pads like every other card on the site — `--c-card-pad`, the
 * theme's own number, with no floor under it. The card is still a card; it simply stops being a
 * frame. Reported with a photograph of a contact form whose labels started a third of the way in.
 *
 * One block for all of them, because it is one decision. A drawing that genuinely needs more room
 * on a phone than a card gets can say so after this and win on order.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-cap-card,
  :is(#clay-page,#design-sheets) .l-asks-cards .c-ask,
  :is(#clay-page,#design-sheets) .l-asks-fills .c-ask,
  :is(#clay-page,#design-sheets) .l-does-panel,
  :is(#clay-page,#design-sheets) .l-does-card-w,
  :is(#clay-page,#design-sheets) .l-team-card,
  :is(#clay-page,#design-sheets) .l-team-pw,
  :is(#clay-page,#design-sheets) .l-hd-bento-w,
  :is(#clay-page,#design-sheets) .l-hd-bento-s,
  :is(#clay-page,#design-sheets) .l-hd-bento-a,
  :is(#clay-page,#design-sheets) .l-does-bw{padding:var(--c-card-pad)}
}

/* ── gallery/masonry ── columns, so no photograph is padded to match its neighbour ────────── */
/* `columns`, NOT a grid: a grid has ROWS, and a row is exactly the thing that forces every picture
   in it to one height. */
:is(#clay-page,#design-sheets) .l-gal-masonry{columns:var(--c-cols,3);column-gap:var(--c-gap)}
:is(#clay-page,#design-sheets) .l-gal-brick{break-inside:avoid;margin-block-end:var(--c-gap)}
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-gal-masonry{columns:2}
}

/* ── gallery/scatter ── four corners, the words standing in the middle ────────────────────── */
:is(#clay-page,#design-sheets) .l-gal-scatter{display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--c-gap);align-items:center}
:is(#clay-page,#design-sheets) .l-gal-tl{grid-column:1/4;grid-row:1;align-self:end}
/* STAGGERED, or four pictures in two tidy rows is a table with photographs in it. Each corner
   takes a different end of its row, which is what makes the set read as scattered without any of
   them being placed by hand. */
:is(#clay-page,#design-sheets) .l-gal-tr{grid-column:10/13;grid-row:1;align-self:start}
:is(#clay-page,#design-sheets) .l-gal-bl{grid-column:2/5;grid-row:2;align-self:start}
:is(#clay-page,#design-sheets) .l-gal-br{grid-column:9/13;grid-row:2;align-self:end}
:is(#clay-page,#design-sheets) .l-gal-corner .c-media{width:100%}
:is(#clay-page,#design-sheets) .l-gal-scatter-w{grid-column:4/10;grid-row:1/3;align-self:center;
  display:flex;flex-direction:column;gap:calc(var(--c-u)*3);text-align:center}
:is(#clay-page,#design-sheets) .l-gal-scatter-w .c-acts{margin:0;justify-content:center}
/* ON A PHONE IT IS A DIFFERENT DRAWING — the words, then the pictures two across. Corners that
   overlap need a room to be corners of, and 390 pixels is not one. */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-gal-scatter{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(#clay-page,#design-sheets) .l-gal-scatter-w{grid-column:1/3;grid-row:1;order:-1}
  :is(#clay-page,#design-sheets) :is(.l-gal-tl,.l-gal-tr,.l-gal-bl,.l-gal-br){
    grid-column:auto;grid-row:auto}
}

/* ── gallery/arc ── a ring of pictures, each turned to sit on the curve ───────────────────── */
/* THE ORBIT IS A POINT, so a picture is placed by turning the point and pushing the picture out
   along its own axis — which is what leaves it tangential without a second transform. */
/* THE RING'S CENTRE IS NOT THE BOX'S CENTRE. Pinned at 50% the band had to be a whole diameter
   tall to hold the top of the ring, and the pictures only ever occupy the top of it — so the
   bottom half was an empty screen. The centre is stated as a distance from the top instead, the
   words are hung on that same line, and the box only reaches as far below it as the widest arc
   actually goes. */
:is(#clay-page,#design-sheets) .l-gal-arc{position:relative;display:grid;justify-items:center;
  align-items:start;overflow:hidden;--c-ring:clamp(190px, 24cqw, 360px);
  --c-mid:calc(var(--c-ring) + var(--c-u)*3);
  padding-block-start:var(--c-mid);
  min-height:calc(var(--c-mid) + var(--c-u)*5)}
:is(#clay-page,#design-sheets) .l-gal-orbit{position:absolute;top:var(--c-mid);left:50%;
  width:0;height:0;transform:rotate(var(--c-turn,0deg))}
:is(#clay-page,#design-sheets) .l-gal-sat{position:absolute;left:0;top:0;
  width:clamp(96px, 12cqw, 180px);
  transform:translate(-50%,-50%) translateY(calc(var(--c-ring) * -1))}
:is(#clay-page,#design-sheets) .l-gal-arc-w{position:relative;z-index:2;display:flex;
  flex-direction:column;gap:calc(var(--c-u)*3);text-align:center;
  max-width:calc(var(--c-ring) * 1.6);margin-block-start:calc(var(--c-u)*3*-1)}
:is(#clay-page,#design-sheets) .l-gal-arc-w .c-acts{margin:0;justify-content:center}
/**
 * ON A PHONE THE RING COMES IN AND THE WORDS COME OUT FROM UNDER IT.
 *
 * Measured at 390: a 156px ring with 86px satellites puts the outermost picture's left edge at -4,
 * so the arc was clipped down one side by its own `overflow:hidden`. And the arc is not a half
 * circle — six pictures at the capped 42° step spread 210°, which carries the lowest two BELOW the
 * horizontal and straight through the heading, which was being pulled up into them by a negative
 * margin written for a desk.
 *
 * So: a ring that fits (`30cqw`, and the widest satellite is 18), the words at the full width of
 * the column rather than 1.6 rings of it, and the pull replaced by clearance. The drawing is the
 * same drawing — a fan of pictures over the words — at a size a phone can hold.
 */
/**
 * ON A PHONE THERE IS NO ROOM FOR A CIRCLE, AND THAT IS THE HONEST ANSWER.
 *
 * The arc is a ring of photographs standing over the words, and a ring needs width — it is the one
 * dimension a phone does not have. Every attempt to keep it was a smaller ring: at 390 the
 * outermost picture was clipped by the band's own `overflow:hidden`, and six pictures at the
 * capped 42° step spread 210°, which carries the lowest two below the horizontal and straight
 * through the heading. Shrinking the ring far enough to clear the words leaves photographs the
 * size of a thumbnail, which is a ring of nothing.
 *
 * So on a phone this is a DIFFERENT DRAWING, which is the fifth rule in docs/section-versions.md
 * and exists for exactly this: the words at the top and the same photographs two by two under
 * them. The orbit stops turning, the satellite stops orbiting, and both simply become cells.
 *
 * The circle is not scaled down, and nothing is cropped to fit it. That is the whole point.
 */
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-gal-arc{display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--c-gap);
    padding-block-start:0;min-height:0;overflow:visible;justify-items:stretch;
    align-items:start}
  :is(#clay-page,#design-sheets) .l-gal-orbit{position:static;transform:none;
    width:auto;height:auto}
  :is(#clay-page,#design-sheets) .l-gal-sat{position:static;transform:none;width:100%}
  /* the words at the top, across both columns, and set from the left like every other band's */
  :is(#clay-page,#design-sheets) .l-gal-arc-w{grid-column:1/-1;order:-1;max-width:none;
    margin-block-start:0;text-align:start}
  :is(#clay-page,#design-sheets) .l-gal-arc-w .c-acts{justify-content:start}
}

/* ── gallery/fan ── one row seen at an angle, and nothing scrolls ─────────────────────────── */
:is(#clay-page,#design-sheets) .l-gal-fan{display:flex;justify-content:center;align-items:center;
  gap:calc(var(--c-u)*1.5);perspective:1400px;overflow:hidden;--c-lean:38deg}
/* `--c-t` is -1 at the left edge, 0 in the middle and +1 at the right: the turn IS that number,
   and the square of it is how far back the leaf sits. Both come from the drawing. */
/* THE LEAVES FILL THE BAND. At a fixed width four photographs sat in the middle of a wide band
   with half of it empty either side, which reads as a row that failed to load rather than as a
   wall you are standing in front of. They share the width instead, with a ceiling so one
   photograph is not the whole screen. */
:is(#clay-page,#design-sheets) .l-gal-leaf{flex:1 1 0;min-width:0;
  max-width:calc(var(--c-u)*44);
  transform:rotateY(calc(var(--c-t,0) * var(--c-lean) * -1))
            translateZ(calc(var(--c-t,0) * var(--c-t,0) * -70px))}
:is(#clay-page,#design-sheets) .l-gal-leaf .c-media{width:100%}
/**
 * ON A PHONE THE FAN IS A RAIL THAT STILL LEANS — because six of anything across 390 is six
 * slivers, and a shallower angle does not make a 55px photograph into a photograph.
 *
 * "Nothing scrolls" is a statement about a DESK, where the whole wall is in front of you at once.
 * On a phone the wall is longer than the room: the leaves keep their lean and their depth and you
 * push them past, which is what every other set on this site does at this width (R12).
 *
 * `overflow:visible hidden` — sideways is the scroll and downwards is still clipped, so a leaf
 * tipped back in space cannot add height to the band.
 */
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-gal-fan{--c-lean:16deg;gap:var(--c-u);
    justify-content:start;overflow:auto hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none;
    padding-inline:calc(var(--c-u)*2);padding-block-end:var(--c-u)}
  :is(#clay-page,#design-sheets) .l-gal-leaf{flex:0 0 auto;width:56%;max-width:none;
    scroll-snap-align:center}
}

/* ── does/wall ── squares built out of the photograph, some of them ways in ───────────────── */
/* THE TILES ARE THE BAND, so the band has no air of its own: the strips of untiled photograph
   above and below the grid read as a wall that failed to finish drawing. */
:is(#clay-page,#design-sheets) .l-does-wall-b{position:relative;isolation:isolate;padding-block:0}
:is(#clay-page,#design-sheets) .l-does-wall-back{position:absolute;inset:0;width:100%;height:100%;
  max-height:none;border-radius:0}
:is(#clay-page,#design-sheets) .l-does-wall{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(var(--c-cols,7),minmax(0,1fr));
  grid-template-rows:repeat(var(--c-rows,3),minmax(calc(var(--c-u)*15),auto));gap:1px}
/* THE SQUARES THAT ARE NOT A WAY IN ARE THE PHOTOGRAPH, DIMMED — which is what makes the wall read
   as built out of the picture rather than laid over it. */
:is(#clay-page,#design-sheets) .l-does-pane{background:rgba(0,0,0,.30);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
:is(#clay-page,#design-sheets) .l-does-brick{grid-column:var(--c-col,1) / span 2;
  grid-row:var(--c-row,1);z-index:2;position:relative;display:flex;flex-direction:column;
  justify-content:end;gap:calc(var(--c-u)*.5);text-decoration:none;
  background:var(--c-card-bg,var(--c-paper));color:var(--c-ink);border-radius:var(--c-r);
  padding:calc(var(--c-u)*3);transition:transform .18s ease}
:is(#clay-page,#design-sheets) .l-does-brick .c-card-n{color:inherit}
/* THE FEATURE'S OWN OVERLINE, in the corner where a running number used to be. It is words now
   rather than two digits, so it keeps clear of the plus in the opposite corner and stays on one
   line — a tile is a name and a way in, and an overline that wraps has become the card. */
:is(#clay-page,#design-sheets) .l-does-brick-i{font-family:var(--c-label);font-size:var(--c-t0);
  letter-spacing:var(--c-label-track);color:var(--c-soft);
  padding-inline-end:calc(var(--c-u)*5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#clay-page,#design-sheets) .l-does-brick-p{position:absolute;
  inset-block-start:calc(var(--c-u)*2);inset-inline-end:calc(var(--c-u)*2);
  width:calc(var(--c-u)*3);height:calc(var(--c-u)*3);color:var(--c-soft)}
:is(#clay-page,#design-sheets) .l-does-brick-p svg{width:100%;height:100%}
/* ONE OF THEM IS THE ACCENT ONE — the reference has a single coloured square, and one is the
   count that makes it mean something. */
:is(#clay-page,#design-sheets) .l-does-wall a:nth-of-type(2){
  background:var(--c-band-accent-safe,var(--c-accent));color:var(--c-on-band,var(--c-on))}
:is(#clay-page,#design-sheets) .l-does-wall a:nth-of-type(2) :is(.l-does-brick-i,.l-does-brick-p){
  color:inherit;opacity:.7}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  :is(#clay-page,#design-sheets) .l-does-brick:hover{transform:translateY(-3px)}
}
@container page (max-width:760px){
  /* A WALL NEEDS A WALL'S WIDTH. On a phone the squares behind it are noise, so it is the cards
     alone, stacked — the photograph stays as the ground under them. */
  :is(#clay-page,#design-sheets) .l-does-wall{grid-template-columns:minmax(0,1fr);
    grid-template-rows:none;gap:var(--c-gap)}
  :is(#clay-page,#design-sheets) .l-does-pane{display:none}
  :is(#clay-page,#design-sheets) .l-does-brick{grid-column:1 / -1;grid-row:auto}
}

/* ── does/bento ── one tall way in, the rest lying down beside it ─────────────────────────── */
/* TWO COLUMNS THAT END LEVEL. They used to stop wherever their own contents did, so a bento was
   a tall card, a short stack and a hole in whichever corner lost — reported as "why is thre a gap
   here". Both columns take the row's height now and the slack goes somewhere deliberate: into the
   pictures, and into the one line of small type that had nowhere to be. */
:is(#clay-page,#design-sheets) .l-does-bento{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:var(--c-gap);align-items:stretch}
:is(#clay-page,#design-sheets) .l-does-bento-one{grid-template-columns:minmax(0,1fr)}
:is(#clay-page,#design-sheets) .l-does-bcol{display:flex;flex-direction:column;
  gap:calc(var(--c-u)*3)}
/* THE WIDE COLUMN REACHES THE BOTTOM OF THE ROW, and the score is what reaches it: a tall card
   is taller than two lying down, so this column ended short and the band had a hole in its
   corner. Stretched, with the one line of small type pushed to the foot, the columns end level
   and the hole is the thing that was homeless. Flex rather than grid, because a track cannot be
   pushed and a flex item can. */
:is(#clay-page,#design-sheets) .l-does-bwide{display:flex;flex-direction:column;
  gap:var(--c-gap);align-self:stretch}
:is(#clay-page,#design-sheets) .l-does-bwide > .c-proof{margin-block-start:auto}

/**
 * EVERY PICTURE OF THE THING BEING HIRED — a strip you swipe, under the list you chose it from.
 *
 * A service is a slot in a diary and the thumbnail on its row says enough. A scooter is an object
 * somebody is deciding about: the front, the back, the seat, the dent. A villa is four rooms. It
 * scrolls at every width rather than wrapping, because it is a look at ONE thing and a grid of
 * eight pictures reads as the catalogue the list above it already is.
 */
:is(#clay-page,#design-sheets) .l-book-pics{display:grid;grid-auto-flow:column;
  grid-auto-columns:44%;gap:var(--c-gap);
  margin-block-start:calc(var(--c-u)*3);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;padding-bottom:var(--c-u)}
:is(#clay-page,#design-sheets) .l-book-pics::-webkit-scrollbar{display:none}
:is(#clay-page,#design-sheets) .l-book-pics > *{scroll-snap-align:start}
:is(#clay-page,#design-sheets) .l-book-pics[hidden]{display:none}
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .l-book-pics{grid-auto-columns:72%}
}
:is(#clay-page,#design-sheets) :is(.l-does-btall,.l-does-bside){display:flex;
  text-decoration:none;overflow:hidden;background:var(--c-card-bg,var(--c-paper));
  color:var(--c-ink);border:var(--c-card-bw,0) solid var(--c-line);border-radius:var(--c-r);
  transition:transform .18s ease, opacity .14s ease}
:is(#clay-page,#design-sheets) .l-does-btall{flex-direction:column;flex:1 1 auto}
/* …AND THE TALL CARD'S SLACK IS ITS PICTURE, NOT ITS WHITE SPACE. The words are centred in what
   is left of the card, so growing the card without growing the photograph floats three lines in
   the middle of a blank one. */
:is(#clay-page,#design-sheets) .l-does-btall > .l-does-bp{flex:1 1 auto;min-height:0}
/* THE WIDE ONE IS THE SAME CARD LYING DOWN, and that is allowed because it is the count that
   chooses it — the first way in is tall and the rest are wide, on every site, every time. */
:is(#clay-page,#design-sheets) .l-does-bside{flex-direction:row;align-items:stretch;
  /* …AND THEY SHARE WHAT IS LEFT OVER. One card lying down beside a tall one is a card and then
     a hole; grown, the two columns are two columns. The tall card sets the height and these
     divide it, so the picture takes the extra rather than the air below it. */
  flex:1 1 auto}
:is(#clay-page,#design-sheets) .l-does-bside > *{flex:1 1 0;min-width:0}
:is(#clay-page,#design-sheets) .l-does-bp{width:100%;border-radius:0;margin:0}
/* ONE WAY IN IS THE SAME TALL CARD, ACROSS THE BAND — with a ceiling on the picture, or a business
   with one service opens on a screenful of photograph. A FIXED unit: `svh` in the catalogue is the
   height of the whole document, so a viewport ceiling shows nowhere it is judged. */
:is(#clay-page,#design-sheets) .l-does-bento-one .l-does-bp{max-height:24rem}
:is(#clay-page,#design-sheets) .l-does-bw{display:flex;flex-direction:column;
  justify-content:center;gap:calc(var(--c-u)*1.5);
  padding:max(var(--c-card-pad), calc(var(--c-u)*4))}
:is(#clay-page,#design-sheets) .l-does-go{display:inline-flex;align-items:center;
  gap:calc(var(--c-u)*1.5);font-family:var(--c-act-font);font-weight:var(--c-act-weight);
  margin-block-start:calc(var(--c-u)*1)}
:is(#clay-page,#design-sheets) .l-does-go svg{width:1.1em;height:1.1em;
  transition:transform .18s ease}
:is(#clay-page,#design-sheets) :is(.l-does-btall,.l-does-bside):hover .l-does-go svg{
  transform:translateX(3px)}
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  :is(#clay-page,#design-sheets) :is(.l-does-btall,.l-does-bside):hover{transform:translateY(-3px)}
}
@container page (max-width:760px){
  /**
   * ONE COLUMN, AND THE PROOF AT THE FOOT OF IT.
   *
   * The score belongs to the BAND, and on a desk it sits under the tall card in the left column,
   * which is the bottom of that column and reads as the end of the band. Stacked, the same source
   * order drops it between the first way in and the second: a line of small type wedged in the
   * middle of a set of cards, aligned with nothing. Photographed on a phone.
   *
   * The left column stops being a column (`display:contents`) so all four things are items of one
   * stack, and the stack is ordered: the ways in, then what other people said about them.
   */
  :is(#clay-page,#design-sheets) .l-does-bento{display:flex;flex-direction:column;
    gap:var(--c-gap)}
  :is(#clay-page,#design-sheets) .l-does-bcol{display:contents}
  :is(#clay-page,#design-sheets) .l-does-btall{order:1}
  :is(#clay-page,#design-sheets) .l-does-bwide{order:2}
  :is(#clay-page,#design-sheets) .l-does-bcol > .c-proof{order:3}
  /* stacked, nothing is pushed anywhere — the wide column is a stack like the rest of them */
  :is(#clay-page,#design-sheets) .l-does-bwide > .c-proof{margin-block-start:0}
  /* A CARD ON ITS SIDE AT 390 IS TWO SLIVERS — on a phone every way in is the tall one. */
  :is(#clay-page,#design-sheets) .l-does-bside{flex-direction:column;flex:0 0 auto}
  /**
   * …AND ITS TWO HALVES GO BACK TO THEIR OWN SIZE.
   *
   * `flex:1 1 0` is what makes the picture and the words share the width when the card is lying
   * down. Turned upright it shares the HEIGHT instead — of a card whose height is its contents,
   * so there is nothing to share, and a photograph with a basis of zero and no text in it came
   * out exactly zero tall. Every side card on a phone was words with no picture above them.
   */
  :is(#clay-page,#design-sheets) .l-does-bside > *{flex:0 0 auto}
}

/* the three wrappers the drawings above name and nothing else needed to say anything about: the
   questions bar is a plain stack, and the two gallery bands only need somewhere to isolate their
   own stacking from the page's */
:is(#clay-page,#design-sheets) .l-asks-bar{display:block}
:is(#clay-page,#design-sheets) :is(.l-gal-scatter-b,.l-gal-arc-b){isolation:isolate}