/**
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * THE MOBILE LAYOUT — the second one, and it is a LAYOUT rather than a set of exceptions.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * "has to be clear that we have a desktop layout and mobile layout.. and the themes just color it
 * in basically."
 *
 * There are now two layouts and one theme contract. `parts.css` is the DESKTOP layout and contains
 * no phone rule at all — a test holds that. This file is the phone, and it reads exactly the same
 * ~140 tokens a theme states: not one colour, face or radius is decided here, which is what makes
 * "the themes just colour it in" true rather than a hope.
 *
 * WHY IT HAD TO MOVE. These forty-eight blocks were scattered through six and a half thousand
 * lines of desktop rules, each one sitting beside the desktop rule it narrowed. That arrangement
 * says exactly one thing about the design — *the phone is the desktop, smaller* — and it is the
 * thing the whole product has been fighting. `docs/design-rules.md` has said the opposite in
 * writing the whole time: **the phone is a different drawing, not a narrower one.** You cannot
 * draw a different thing out of a file whose every rule begins by naming what it is overriding.
 *
 * WHAT THIS FILE IS NOT, YET. This first pass is a MOVE and nothing else: every rule is byte for
 * byte the one that was in parts.css, in the same order relative to the others, so not one pixel
 * changes on any theme at any width. That is deliberate — a restructure that also redesigns is a
 * restructure nobody can verify. The app-like drawing (the floating dock, the back and cart chips,
 * the menu sheet, bands as cards, footer groups as scrollable cards) is built ON this file, next,
 * and every one of those is a new drawing rather than a narrowing of an old one.
 *
 * THE ONE RULE FOR EDITING IT. A phone rule goes here. A desktop rule goes in parts.css. If you
 * find yourself writing `@container page (max-width…)` in parts.css, that is the mistake this file
 * was made to stop, and a test will say so.
 *
 * LOADED AFTER parts.css, so a phone rule and a desktop rule of the same specificity resolve the
 * way they always did — the phone one last.
 */

/**
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * A BAND IS A CARD — and on this layout that is not a theme's to decide.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * A block sat here softening `panels: "card"` — the DESKTOP policy by which a theme may ask for
 * its bands to be panels — so that a theme which asked got a tighter panel on a phone. It is gone,
 * because the phone no longer waits to be asked: every band on this layout is a card, on every
 * theme, and what a theme decides about it is the only thing it ever decided — the card's colour,
 * its corner and its line. The drawing is at the foot of this file.
 */

/**
 * …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)}
}

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

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

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

/**
 * 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)}
}

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

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

/**
 * …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)}
}

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

@container (max-width:640px){:is(#clay-page,#design-sheets) .c-cols{columns:1}}

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

/**
 * …AND ON A PHONE THEY GO THREE ACROSS, because the phone is a different drawing.
 *
 * The stack above is right where it was decided: on a desk the walk is three columns and the
 * times are a narrow one, so each is the width of its column and the whole day is readable in a
 * glance. On a phone that column IS the screen, so "09:00" sits alone in a 390px box and a barber
 * open nine to six has seventeen of them — a screen and a half of identical buttons, inside an
 * inner scroller nobody asked for.
 *
 * Three across is six rows for the same day, still ≥44px a side, and no nested scroll: the height
 * cap goes with it, because the reason for the cap was a list that would not end.
 *
 * `@container page`, not the band — the question is how wide the SCREEN is, and the band is the
 * full width of the page in both drawings. See theme-contract.md §5.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .c-times{grid-template-columns:repeat(3,minmax(0,1fr));
    max-height:none;overflow-y:visible}
  :is(#clay-page,#design-sheets) .c-times p{grid-column:1 / -1}
  :is(#clay-page,#design-sheets) .c-times span{padding:calc(var(--c-u)*1.5) calc(var(--c-u)*.5)}
  /* …EXCEPT ON THE RAIL, where the row scrolls rather than fitting three across: there is no width
     to save, and a chip reading "Tomorrow 09:00" with 4px either side is the same squeeze at half
     the size. */
  :is(#clay-page,#design-sheets) .l-bc-soon > span{padding:calc(var(--c-u)*1.5) calc(var(--c-u)*2)}
}

@container (max-width:640px){}

@container (max-width:720px){:is(#clay-page,#design-sheets) .c-place-one{grid-template-columns:1fr}}

@media (max-width: 700px){
  body.clay.panel-open{padding-right:0 !important}
}

/* 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}
  /**
   * WHICH BAND IS THE POSTER — the FIRST one on the page, whatever the page is about.
   *
   * "Page headers in mobile i would also make it that the card is full image (if one is chosen)"
   *
   * Every rule below used to name `[data-band="header"]`, which is the HOME page's header and no
   * other: a sub-page's header is named after the feature it opens — `legal`, `products`, `menu`,
   * `about`. So one page in the site got the poster and the rest got the same picture inside a
   * card with a gutter round it, which is what was photographed on /legal/terms.
   *
   * The composer puts the page's header first and nothing else can be there, so POSITION is the
   * honest test and it needs no band to be named: `:first-of-type` on the home page, and the band
   * after the crumb strip on a sub-page, where the crumbs are first. `:first-of-type` counts
   * `<section>`s — the nav is a `<nav>` and sheets carry no bands at all, both measured — so it
   * cannot reach anything but a page's own opening band.
   *
   * The specificity is unchanged (two classes plus one, and `:has()` adds one), so every rule
   * written to beat or lose to these still does.
   */

  /**
   * …AND ON THE HEADER, THE PICTURE COMES FIRST.
   *
   * Collapsed in document order, the first screen of every site is an overline, a name, a line, a
   * button and a proof to scroll past before you see anything of the business. A hero is a
   * PICTURE; everywhere else on the page the words earn their place first, which is why this is
   * the header and nothing else. "for the header on mobile.. start with the image.. then the text
   * etc."
   *
   * `order`, so the H1 stays first in the document and the accessibility tree never moves.
   */
  :is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in > :has(.c-media){
    order:-1}
  /**
   * …AND A MAP GOES FIRST TOO. "on mobile put the map first."
   *
   * The same argument as the header and it stops there: everywhere else on the page the words earn
   * their place first. A map is not an illustration of the words beside it — it IS where you are,
   * and the sentence about it is the caption. On a phone the two are one column, and the caption
   * was above the thing it captions.
   */
  :is(#clay-page,#design-sheets) .c-arr-beside > .c-in > :has(> .c-map){order:-1}
  /**
   * …AND THE WHOLE HEADER STANDS **ON** THAT PICTURE. ON THE PHONE ONLY.
   *
   * "For the MOBILE header for this layout. Put all in the image. Looks better on mobile. Keep
   * desktop how it is now. And of course if no image then its just in the section."
   *
   * This replaces an earlier half-step where only the RATING stood on the picture — that was the
   * same instinct, one element at a time, and the answer is the whole block.
   *
   * IT IS NOT A DRAWING. A second header shape was built once and it changed the DESKTOP too,
   * which is exactly what was not wanted ("i asked this ONLY for MOBILE"). So this is the collapse
   * rule above carried one step further: `beside` is already a one-column grid on a phone, and
   * both children are put in the SAME CELL — the picture, and the words on its floor. Nothing is
   * moved in the document, the H1 stays where it was, and no theme has to know.
   *
   * ONLY WHERE THERE IS A PICTURE. `:has(.c-media)` is the whole guard: a business with no
   * photograph gets the band it has always had, words in the section, nothing floating on nothing.
   *
   * THE PICTURE IS AS TALL AS A POSTER, because words standing on a 1/1 crop of 373px have about
   * eighty pixels to live in. Its ratio is dropped and it takes a height instead; `.c-media img`
   * is already `object-fit:cover`, so the crop moves rather than the picture stretching.
   *
   * READABLE OVER A PHOTOGRAPH NOBODY VETTED — the same floor `.c-g-photo` uses and for the same
   * reason: a multiply, so a bright picture comes down and a dark one barely moves, with the
   * gradient on top for weight where the words are. Both are the theme's tokens.
   *
   * AND THE WORDS TAKE THE PICTURE'S INK. `--g:var(--c-over)` is what a photo band wears, so the
   * heading, the line and the rating derive their neutrals from a dark room rather than from the
   * band's own ground — which on a light theme would be near-black type on a photograph.
   */
:is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media){row-gap:0;grid-template-rows:auto}
:is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media) > :has(.c-media){grid-row:1;grid-column:1;position:relative;
    /* SQUARE, BECAUSE IT TOUCHES THE GLASS. "if header (or footer) is full width on mobile make
       the corners square so it looks just bit better. Not round." The radius was written when the
       poster still stood in the page column and a corner had page either side of it to be a
       corner against; the poster is the SCREEN now, and a rounded corner on a box whose edge is
       the edge of the phone is a sliver of nothing in each corner. Measured on `_room`, whose
       `--c-r` is 16: the picture 390 wide at x 0 with a 16px corner. `overflow:hidden` stays —
       it is what holds the picture to the box. */
    border-radius:0;overflow:hidden}
:is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media) > :has(.c-media) .c-media{aspect-ratio:auto;
    /* THE WHOLE SCREEN, LESS THE BAR IT STARTS UNDER. Three quarters of the viewport reads as a
       big picture; the WHOLE viewport reads as an arrival, which is what a header is for on the
       one screen a visitor sees first. "make the header full height also for the mobile version..
       nice to start that way." The bar's own height comes out of it so the photograph ends where
       the screen does rather than pushing the next band a bar's worth below the fold. */
    width:100%;height:100%;min-height:var(--c-poster-h);max-height:none;border-radius:0}
/**
 * …AND A SUB-PAGE'S HEADER IS HALF OF ONE. "For mobile pages the header doesnt have to be as high
 * as we have for header on homeage. Can be half at least of what it is now.."
 *
 * A whole screen of photograph is an ARRIVAL — it is the first thing a visitor ever sees of the
 * business, and "make the header full height also for the mobile version.. nice to start that way"
 * was asked for that screen. Somebody who has tapped through to Book or Terms has already
 * arrived; there the same full screen is a picture between them and what they came for, and it is
 * the second one they have scrolled past.
 *
 * The two are told apart by the same pair the poster is anchored to, and by nothing new: the home
 * page's header is `:first-of-type`, and a sub-page's is the band after the crumb strip. Declared
 * on the BAND so the picture reads one number, whichever page it is on.
 */
:is(#clay-page,#design-sheets) .c-band:first-of-type.c-arr-beside{
  --c-poster-h:calc(100svh - var(--c-bar))}
:is(#clay-page,#design-sheets) .l-crumbs + .c-band.c-arr-beside{
  --c-poster-h:calc((100svh - var(--c-bar)) * .5)}
  /* THE PICTURE FILLS THAT BOX, and it has to be told so in the one way that always works: a
     percentage height resolves against the parent's SPECIFIED height, and this parent's height
     comes from a grid stretch, so `height:100%` on the img quietly fell back to the file's own
     ratio — a 222px photograph at the top of a 592px poster with black under it. Taken out of
     flow instead, where `inset:0` is the whole answer and no ancestor has to have a number. */
:is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media) > :has(.c-media) .c-media img{position:absolute;inset:0;height:100%;width:100%}
:is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media) > :has(.c-media)::after{content:"";position:absolute;inset:0;z-index:1;
    -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) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media) > :not(:has(.c-media)){grid-row:1;grid-column:1;z-index:2;
    align-self:end;padding:calc(var(--c-u)*4);--g:var(--c-over);color:var(--c-ink)}
  /**
   * …AND FULL WIDTH MEANS THE GUTTER TOO. "why is there spacing all arounD? i said full height and
   * width for the mobile one."
   *
   * It was a full-height picture inside the page COLUMN — `--c-page` is the measure less a gutter,
   * and the band keeps its own rhythm above and below — so the poster arrived as a tall photograph
   * with a black margin on all four sides. A hero is the one band that is not in the column: it is
   * the screen. The column goes to the full width and the band's air goes to nought, and only for
   * this one band, on the phone, where there is a picture.
   */
  :is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside:has(.c-media){
    padding-block:0}
  :is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside > .c-in:has(.c-media){
    width:100%}
}

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

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

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

@container (max-width:760px){
  :is(#clay-page,#design-sheets) .l-close-a{justify-content:flex-start}
}

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

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

@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 mandatory;
    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}
}

@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 mandatory;
    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}
}

/* 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 mandatory;
    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}
}

/**
 * …AND THE FIVE RAILS THAT ONLY EXIST ON A PHONE RUN TO THE EDGE LIKE EVERY OTHER ONE.
 *
 * The same three declarations as the rail rule up by `.c-chips`, said once more because these are
 * a GRID at every width above this and a grid must not bleed — the breakpoint is the only reason
 * there are two rules rather than one, and `:has(> * + *)` covers each drawing's own `-solo` and
 * `--c-cols:1` opt-out exactly as it does up there.
 */
@container page (max-width:640px){
  :is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) >
    :is(.l-does-cards,.l-does-tiles,.l-does-panels,.l-team-panels,.l-team-overs):has(> * + *){
    margin-inline:calc(var(--c-edge) * -1);padding-inline:var(--c-edge) 0;
    scroll-padding-inline:var(--c-edge) 0}
}

@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-courses{columns:1} }

/**
 * 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)}
}

@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-about{--c-title-share:1} }

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

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

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

@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-capture{--c-title-share:1} }

@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-visit{--c-title-share:1} }

@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-visit-week{--c-title-share:1} }

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

/* the bleed is the one rail rule up by `.c-chips` — `.l-run` is named in it */
@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-run{--c-run:82%} }

/**
 * ON A PHONE IT IS A ROW OF CHIPS ALONG THE TOP — not a column of links above the document.
 *
 * Collapsed to one column, a contents list of six is six rows a reader scrolls PAST to reach the
 * thing they came for, and by the time they are reading it the list is gone. Asked for by name:
 * "links at top.. maybe even like the 'menu' (food drink) so its horizontal and clickable.. easy
 * on phone.. sticky to top.. when scroll past".
 *
 * So it is the same object the menu page's course strip is: one row, scrolled sideways, stuck
 * under the bar, and the one you are in lit. `c-on` is the class the scroll-spy toggles — the same
 * name the course strip uses, so there is one word for "the one you are on" on this whole site.
 */
@container page (max-width:760px){
  /* scoped to the PAGE'S OWN COLUMN, because that is the one box with a gutter to reach into —
     the same rule `.d-scroll` follows, and a test holds every bleed to it */
  :is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .c-aside{
    position:sticky;top:var(--c-bar);z-index:6;
    margin-inline:calc(var(--c-edge) * -1);
    /* BOTH ENDS HERE, unlike the card rails. This is a BAR — it has a ground and a rule under it —
       so its inset reads as the bar's padding rather than as a stripe of paper the last chip stops
       short of. The asymmetry belongs to a rail of pictures standing on the page, not to a box. */
    padding:calc(var(--c-u)*1.5) var(--c-edge);
    background:var(--g);
    /* the strip has to end somewhere — a rule under it, so it is a bar rather than words that
       happen to be stuck to the top of a scrolling document */
    box-shadow:0 1px 0 var(--c-line)}
  :is(#clay-page,#design-sheets) .c-aside .c-rows{display:flex;gap:calc(var(--c-u)*1);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    scroll-padding-inline:var(--c-edge)}
  :is(#clay-page,#design-sheets) .c-aside .c-rows::-webkit-scrollbar{display:none}
  :is(#clay-page,#design-sheets) .c-aside .c-row{flex:0 0 auto;padding:calc(var(--c-u)*1) calc(var(--c-u)*2);
    border:0;border-radius:999px;background:var(--c-fill);white-space:nowrap}
  :is(#clay-page,#design-sheets) .c-aside .c-row-n{font-size:var(--c-t0)}
  /* the section you are reading, lit — see `indexSpy` in design-client.js */
  :is(#clay-page,#design-sheets) .c-aside .c-row.c-on{background:var(--c-ink);color:var(--g)}
  :is(#clay-page,#design-sheets) .c-aside .c-row.c-on .c-row-n{color:inherit}
  /* the small print under a row is a second line in a pill — a chip is one word */
  :is(#clay-page,#design-sheets) .c-aside .c-row-s{display:none}
}

@container (max-width:760px){ :is(#clay-page,#design-sheets) .d-beside{--c-title-share:1} }

@container page (max-width:760px){ :is(#clay-page,#design-sheets) .d-scroll{--c-scroll:78%} }

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

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

@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-foot-in{grid-template-columns:1fr} }

@container page (max-width:760px){ :is(#clay-page,#design-sheets) .l-basket{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} }

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

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

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

/* 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)}
}

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

/* 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){ }

@container (max-width:760px){ :is(#clay-page,#design-sheets) .l-phead{--c-title-share:1} }

/**
 * ── 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-edge) * -1);padding-inline:var(--c-edge) 0;
    scroll-padding-inline:var(--c-edge) 0}
  :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}
}

/**
 * …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}
}

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

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

/**
 * …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}
}

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

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

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

/* 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. 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.
 *
 * THE FLOOR IS TWO UNITS, NOT NOUGHT. This block first said "no floor under it", and a theme that
 * declares no `--c-card-pad` inherits the `0px` parts.css declares — so on a phone bold's bento
 * header drew a score, a line and a button hard against the fill with nothing around them, and so
 * did every other card in this list. A card with nothing inside its edge is not a card that
 * stopped being a frame; it is a rectangle of colour behind some text. Sixteen pixels is the least
 * that reads as inside. Reported as "spacing in the cards is not good in this one" on
 * `/wireframe?section=header&paint=bold&w=m`.
 *
 * 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:max(var(--c-card-pad), calc(var(--c-u)*2))}
}

@container page (max-width:640px){
  :is(#clay-page,#design-sheets) .l-gal-masonry{columns:2}
}

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

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

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

/* the lift is the THEME's now — see `data-tone-motion` at the end of this file */
@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}
}

@container page (max-width:560px){
}

/* the lift is the THEME's now — see `data-tone-motion` at the end of this file */
@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 phone: one column, and the hire's things become a rail above the card ── */
@container page (max-width:900px){
  :is(#clay-page,#design-sheets) .l-bc-in[data-bkind="rental"] > .l-bc-card{
    justify-self:stretch;width:auto}
  /* the same column, turned on its side: a rail you push, and the cards keep their own width */
  :is(#clay-page,#design-sheets) .l-bc-things{flex-direction:row;
    max-height:none;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory}
  :is(#clay-page,#design-sheets) .l-bc-thing{scroll-snap-align:start;flex:0 0 78%}
  :is(#clay-page,#design-sheets) .l-bc-day{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:560px){
  /* one column on a phone: two columns of quotations at 390px is two columns of one word */
  :is(#clay-page,#design-sheets) .c-wall{column-width:auto;column-count:1}
}

/**
 * …AND ON A PHONE IT IS ONE ROW, not two.
 *
 * Two rails of 80%-wide cards stacked is most of a phone screen spent on four quotations, and the
 * second row is a thing you have to notice pushes on its own. "for mobile make this one row of
 * cards.."
 *
 * The MARKUP does not change — a drawing is one drawing — so the two rows are collapsed with
 * `display:contents` and the wall itself becomes the rail. Document order after the collapse is
 * the alternating split read out (1·3·5·2·4·6), so `order:var(--c-i)` puts the owner's own
 * ranking back; `--c-i` is written by the drawing for exactly this.
 */
@container page (max-width:760px){
  /**
   * `.c-in` — AND WITHOUT IT NONE OF THIS EVER RAN.
   *
   * The wall above is scoped `#clay-page .c-in .l-rev-mq`, one class heavier than the
   * `#clay-page .l-rev-mq` this block used. A container query adds no specificity, so on every
   * phone the desktop rule won: the band stayed a two-row grid with its marquee row collapsed and
   * its mask still on, which is a column of quotations that fades at the edges and pushes nowhere.
   * "Reviews are messed up on mobile."
   *
   * Everything below was written and correct and simply outranked. The selector is the fix.
   */
  #clay-page .c-in .l-rev-mq,
  #design-sheets .c-in .l-rev-mq{display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    /* the leading edge lines the first quotation up with the heading; the trailing edge is not an
       edge, it is where the rail continues — see the rail rule in parts.css */
    padding-inline:var(--c-edge) 0;
    /* …and the SNAP has to know about that padding, or `scroll-snap-align:start` parks the first
       card against the box edge and scrolls the leading gutter away — a rail that opens ten pixels
       along, hard against the screen. */
    scroll-padding-inline-start:var(--c-edge);
    /* AND NO FADE, for the same reason as reduced motion: this is a rail somebody pushes, so the
       leading edge is where they have got to and the drawing above deliberately lines it up with
       the heading. Dimming it dims the quotation they are reading. */
    -webkit-mask-image:none;mask-image:none}
  #clay-page .l-rev-mq::-webkit-scrollbar,
  #design-sheets .l-rev-mq::-webkit-scrollbar{display:none}
  #clay-page .l-rev-mq-r,
  #design-sheets .l-rev-mq-r,
  #clay-page .l-rev-mq-t,
  #design-sheets .l-rev-mq-t{display:contents}
  /**
   * A RAIL YOU CAN REACH THE END OF SHOULD NOT HOLD EVERY REVIEW TWICE — and the thing being
   * hidden is a TRACK, which is why the selector now says so.
   *
   * This was `.l-rev-mq [aria-hidden]`: any descendant, anywhere inside the wall, carrying that
   * attribute. The duplicated tracks carry it — and so does every star. `stars()` emits each one
   * as `<svg class="c-star c-star-on" aria-hidden="true" focusable="false">`, because a star is a
   * shape and the score is already read out by the `aria-label` on the span around them. So this
   * rule matched all five of them and set them `display:none`.
   *
   * The result: ON EVERY PHONE, ON EVERY THEME, NO REVIEW HAS EVER SHOWN ITS STARS. The span
   * stayed in the layout at 0px tall, the markup was correct, the colour was correct — nothing
   * looked broken from the outside, so "think the stars in any theme should be the accent color
   * no?" was answered with a colour that could not be seen on the device it was reported from,
   * and the next card was "there is no stars in the review cards".
   *
   * Naming the track is the fix, and it is the honest selector: `[aria-hidden]` describes what
   * the copies are FOR, not what they ARE. The reduced-motion rule above got this right by
   * accident — it used `>` — and says the class now too, so neither can drift back.
   */
  #clay-page .l-rev-mq .l-rev-mq-t[aria-hidden],
  #design-sheets .l-rev-mq .l-rev-mq-t[aria-hidden]{display:none}
  #clay-page .l-rev-mq-c,
  #design-sheets .l-rev-mq-c{scroll-snap-align:start;width:min(80cqw,22rem);
    order:var(--c-i, 0)}
}

/**
 * …AND ON A PHONE IT IS A RAIL. "Should just be horizontal scroll on mobile. On review page."
 *
 * A wall of full-width cards on a phone is one review per screen with nothing to say how many
 * there are; a rail shows the edge of the next one, which is what says there is more. The MARKUP
 * does not change — one drawing — the grid becomes a flex rail and the cards take a width. Delete
 * this block and the wall comes back exactly as it was.
 */
@container page (max-width:760px){
  /* `.c-in` IS NAMED because this bleeds, and a bleed is only ever correct on the page's own
     column — see the rail rules above and the two tests in rules.test.js that hold both halves of
     it: nothing bleeds where there is no gutter, and every rail bleeds where there is one. */
  #clay-page .c-in .l-revp,
  #design-sheets .c-in .l-revp{display:flex;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    /* out to the glass on both sides, then the LEADING one padded back in so the first card lines
       up with the heading above it. The trailing edge is not an edge — it is where the rail
       carries on, and a card arriving out of a stripe of paper is the thing this says not to do. */
    margin-inline:calc(var(--c-edge) * -1);
    padding-inline:var(--c-edge) 0;
    /* …and the SNAP has to know about that padding, or `scroll-snap-align:start` parks the first
       card against the box edge and scrolls the leading gutter away — the browser undoes the
       compensation the line above just made. Stated as the SAME pair, from the same token, or the
       two drift the moment the gutter changes. See parts.test.js. */
    scroll-padding-inline:var(--c-edge) 0}
  #clay-page .c-in .l-revp::-webkit-scrollbar,
  #design-sheets .c-in .l-revp::-webkit-scrollbar{display:none}
  :is(#clay-page,#design-sheets) .l-revp-c{flex:0 0 auto;width:min(80cqw,22rem);
    scroll-snap-align:start;order:var(--c-i, 0)}
}

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


/* ═════════════════════════════════════════════════════════════════════════════════════════════
   THE APP-LIKE CHROME — the dock, the corner chips, and the menu that grows out of the dock.
   ═════════════════════════════════════════════════════════════════════════════════════════════

   "sticky back button. cart at the top right corner if not empty.. menu at the bottom that grows
   if openend.. would also be nice if litle animations like apple .. like apps.. growing into
   things.. not to crazy but like we have for our analyics dash for example."

   THREE OBJECTS AND NOTHING ELSE PINNED. A phone screen has room for the page and for the way
   around it, and the way around it is: the DOCK at the bottom (mark · action · menu), the CART in
   the top-right when there is something in it, and the way BACK in the top-left when there is
   somewhere to go back to. Everything else is the page.

   IT IS ALL TOKENS. Not one colour, face or radius is decided here — `--c-act-bg`, `--c-paper`,
   `--c-line`, `--c-r`, `--c-u` are the theme's, so this is the same chrome in four different
   designs rather than four chromes. That is the whole of "the themes just colour it in".
*/
@container page (max-width:820px){
  /**
   * THE DOCK FLOATS. It was pinned edge to edge with square corners against the bottom of the
   * screen, which reads as part of the browser rather than part of the site. Inset by one unit on
   * three sides and given the theme's own corner, it reads as an object standing ON the page —
   * which is what lets it grow into the menu rather than being replaced by it.
   *
   * `env(safe-area-inset-bottom)` so it clears the home bar on a phone that has one.
   */
  :is(#clay-page,#design-sheets) .l-bar{
    left:calc(var(--c-u)*1.5);right:calc(var(--c-u)*1.5);
    bottom:calc(var(--c-u)*1.5 + env(safe-area-inset-bottom));
    gap:calc(var(--c-u)*1.5);align-items:center;
    border-radius:min(var(--c-r), calc(var(--c-u)*3));
    /* the tray is the theme's paper with its own edge — a surface, not a stripe */
    background:var(--c-paper);
    box-shadow:inset 0 0 0 var(--c-bw) var(--c-line), 0 calc(var(--c-u)*1.5) calc(var(--c-u)*4) rgb(0 0 0 / .18);
    padding:calc(var(--c-u)*1.25)}
  /* THE MARK AND THE MENU KEEP THEIR SIZE; only the action stretches. A row of three where all
     three flex is a row whose middle moves every time a label changes length. */
  :is(#clay-page,#design-sheets) .l-bar-mark,
  :is(#clay-page,#design-sheets) .l-bar-burger{
    flex:0 0 auto;width:calc(var(--c-u)*5.5);height:calc(var(--c-u)*5.5);
    display:grid;place-items:center;border-radius:var(--c-r-tap);
    padding:0;background:none;border:0;color:inherit;cursor:pointer}
  :is(#clay-page,#design-sheets) .l-bar-mark img{
    width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
  /**
   * …AND A CUT MARK FILLS IT TOO. "Circle logo is not really a circle on mobile."
   *
   * `.l-mark[data-cut="circle"] img` in parts.css gives the picture a WIDTH of five units — a
   * desk number, for a mark that is forty pixels there — and it is one selector heavier than the
   * rule above, so it won. Measured at 390: the dock's mark a 44×44 box with `border-radius:999px`
   * and a 40×44 picture inside it, centred. The box is a circle and the picture is not, so two
   * pixels of the dock showed down each side and the circle came out with flats on it.
   *
   * The dock's button is the one place the mark is sized by the LAYOUT rather than by its own
   * height, so this is the one place that has to say so. Named with the cut, which puts it a
   * selector above the rule it is undoing rather than relying on which file loads last.
   */
  :is(#clay-page,#design-sheets) .l-mark.l-bar-mark[data-cut] img{width:100%;height:100%}
  :is(#clay-page,#design-sheets) .l-bar-burger{box-shadow:inset 0 0 0 var(--c-bw) var(--c-line)}
  :is(#clay-page,#design-sheets) .l-bar-burger .ico{width:1.25em;height:1.25em}
  /* the action is the middle and takes what is left */
  :is(#clay-page,#design-sheets) .l-bar .c-act{flex:1 1 auto;min-width:0}
  /* …AND THE NAVIGATION KEEPS ONLY WHAT THE DOCK DOES NOT HAVE. The action and the menu moved to
     the thumb; drawing them twice is two ways to the same place, one of them out of reach. */
  :is(#clay-page,#design-sheets) .l-nav .l-burger:not(.l-bar-burger),
  :is(#clay-page,#design-sheets) .l-nav-e > .c-act{display:none}
}

/**
 * THERE IS NO BAR ACROSS THE TOP OF A PHONE. "there is still a header."
 *
 * The dock at the thumb carries the mark, the site's one action and the menu; the two chips carry
 * the basket and the way back. Everything a top bar was for is already somewhere a thumb can
 * reach — so what was left up there was a strip of the theme's paper with a logo in it, taking
 * sixty-four pixels off the top of every screen and, on the home page, sixty-four pixels off the
 * poster that is supposed to BE the first screen. Photographed twice.
 *
 * IT IS EMPTIED, NOT REMOVED. `display:none` on the bar would take the basket chip with it — the
 * cart button is a child of the bar and only ESCAPES it by being fixed — and a fixed element
 * inside a hidden ancestor is hidden too. So the bar keeps its box and loses everything else: no
 * ground, no rule, no height, and none of its contents drawn except the chip that has already
 * left. Nothing is moved in the document and no drawing has to know.
 *
 * AND THE HEIGHT IT WAS HOLDING GOES WITH IT. `--c-bar` is "how tall the sticky bar is" and half
 * a dozen rules subtract or clear it: the poster is `100svh - var(--c-bar)`, the contents strip
 * sticks at `top: var(--c-bar)`, an anchor scrolls to clear it. With no bar the honest value is
 * nought, and every one of those rules is then right without being touched.
 */
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) .l-nav{
    position:static;background:none;border-bottom:0;min-height:0;height:0;overflow:visible;
    /* the poster starts at the top of the screen now, and the chips are what stands over it */
    --c-bar:0px}
  :is(#clay-page,#design-sheets) .l-nav-in{
    min-height:0;height:0;padding:0;overflow:visible;
    /* not `display:none`: the basket chip is in here and is fixed to the corner of the screen */
    display:block}
  /* everything the bar drew, and only the chip that has left it survives */
  :is(#clay-page,#design-sheets) .l-nav-in > :not(.l-nav-e){display:none}
  :is(#clay-page,#design-sheets) .l-nav-e > :not(.l-cart){display:none}
  /* …and the band under it takes the whole screen, because `--c-bar` is declared on the bar and a
     band cannot inherit from a sibling. Stated once on the page's own bands. */
  :is(#clay-page,#design-sheets) .c-band{--c-bar:0px}
  /**
   * …EXCEPT ON A PAGE WITH A WAY BACK, where the lane the chip sits in is the new bar.
   *
   * `--c-bar` is "how much room the furniture at the top takes", and half a dozen rules clear it:
   * a filter strip sticks at `top: var(--c-bar)`, an anchor scrolls to clear it. With no bar the
   * honest answer is nought — and on a sub-page it is not, because the way BACK is up there, a
   * 44px chip 12 off the top. At nought the menu's filter strip stuck flush to the screen and the
   * back chip landed on its first pill: measured, the point where the chip is came back as
   * `c-chip`, so the one control that gets you off the page was covering the one that filters it.
   *
   * A GENERAL SIBLING, because that is exactly the question. The crumb band is drawn only where
   * there is somewhere to go back to, and it is the first band on the page — so "every band after
   * a crumb" is "every band on a page with a way back", asked in the one place that knows.
   */
  :is(#clay-page,#design-sheets) :is(.l-crumbs, .l-crumbs ~ .c-band){
    --c-bar:calc(var(--c-u)*8 + env(safe-area-inset-top))}
  /**
   * …AND THAT LANE IS A SURFACE, NOT A WINDOW. "This are still visable behind the tags of rhe menu
   * when scroll.."
   *
   * The two chips are FIXED, so the page runs underneath them for its whole length and comes out
   * of the top of the screen between them. The sticky filter strip on the menu carries the lane
   * while it is stuck — but a strip is only sticky inside its own band, so the moment the menu's
   * card ends the lane is a window again, and on every other sub-page it always was one.
   *
   * The page's own paper, and nothing else: this is not a bar and it carries nothing. The bar is
   * emptied on this layout and stays emptied — what is up there is two chips, and this is the
   * surface they stand on rather than a strip of whatever happens to be scrolling past.
   *
   * NOT WHERE THE HEADER IS A POSTER. There the picture IS the screen and the chips sit on it on
   * purpose; a band of paper across the top would cut its head off. Asked of the band after the
   * crumb strip, which is the only band that can be the poster.
   *
   * A pseudo-element on the crumb band, because that band is already lifted above every band after
   * it (`z-index:51`, a few rules down) — which is the same lift the chips needed and for the same
   * reason. Inside that context it sits under them and over everything else.
   */
  :is(#clay-page,#design-sheets) .c-band.l-crumbs::before{
    content:"";position:fixed;top:0;left:0;right:0;height:var(--c-bar);
    background:var(--c-paper);z-index:0}
  @supports selector(:has(*)){
    :is(#clay-page,#design-sheets) .c-band.l-crumbs:has(+ .c-band.c-arr-beside .c-media)::before{
      display:none}
  }
  /* …AND THE FIRST BAND STARTS UNDER THE CHIP RATHER THAN BEHIND IT. Three units is what parts.css
     gives the band after a crumb, and three units is twenty-four — the chip is forty-four tall and
     sits twelve down, so the page's own eyebrow was printed under it. Photographed: the "P" of
     SHOP showing past the corner of the way back. The lane plus a unit, from the same token the
     sticky things clear by, so the two can never disagree about how tall that corner is. */
  :is(#clay-page,#design-sheets) .l-crumbs + .c-band{
    padding-top:calc(var(--c-bar) + var(--c-u))}
  /**
   * …AND THE CHIPS THEMSELVES ARE ABOVE THE PAGE, not inside one band of it.
   *
   * Every band is `isolation:isolate` — it has to be, or an owner's gear ends up under the next
   * section — so the back chip's `z-index:51` is fifty-one WITHIN the crumb band, and the crumb
   * band is the first of them. Every band drawn after it therefore painted over a chip that is
   * fixed to the corner of the screen: measured on the menu page, the point where the back chip
   * is came back as `c-in`, the next band's own card. It was reachable before only because a band
   * had no card to paint there.
   *
   * The BAND is lifted rather than the chip, because the chip's z-index is already right — it is
   * the context it is trapped in that is not. Same for the bar, which carries the basket.
   */
  :is(#clay-page,#design-sheets) .c-band.l-crumbs{z-index:51}
  :is(#clay-page,#design-sheets) .l-nav{position:relative;z-index:51}
}

/**
 * THE OWNER'S TWO GEARS IN THE TOP-RIGHT CORNER, one of them off the screen.
 *
 * "On the right side there is 2 gears. Can't access think when cart is visable move gear bit down.
 * For header."
 *
 * Every band an owner can edit carries a gear pinned to its top-right, and at the top of a phone
 * two of them land on the same forty pixels — measured, on the owner's own site:
 *
 *   · THE NAVIGATION'S, at y −19. Its rule is `top:50%; translateY(-50%)`, centred in the bar,
 *     which was right while the bar was sixty-four tall. This layout empties the bar, so half of
 *     the gear is above the top of the window and the half that is left is under the status bar.
 *   · THE FIRST BAND'S, at [338,14,38,38] — exactly under the basket chip at [323,12,55,44],
 *     which is fixed and outranks it by thirty-one z-index. Perfectly covered.
 *
 * THE BAR'S GEAR IS NOT DRAWN, because the bar is not drawn: its mark, its links and its menu are
 * all in the dock, and a control for editing a band that has no pixels is a control for nothing.
 * Nothing is lost — the FOOTER's gear opens the same Features list the bar's does (that is written
 * down beside it in parts.css), and the footer is reachable on any phone.
 *
 * THE FIRST BAND'S GEAR STEPS BELOW THE CHIP LANE. Asked for as "move gear bit down", and it moves
 * unconditionally rather than only when the basket is full: the gear is inside a band and the chip
 * is inside the bar, so no ancestor holds both and `:has()` cannot ask the question. A gear
 * sitting fifty-six pixels lower than it needs to on a page with no basket costs nothing; a gear
 * nobody can press costs the band.
 */
@container page (max-width:820px){
  body[data-owner] :is(#clay-page,#design-sheets) nav .band-gear{display:none}
  /* THE BAND AT THE TOP OF THE PAGE, and on a sub-page that is not the first one: the crumb band
     is, and it is a zero-height strip with no gear of its own, so the gear that lands in the chip
     lane belongs to the band AFTER it. Measured on /shop — moving only `:first-of-type` left a
     gear at [338,14] under the basket, which is the fault this rule is for.
     The number is the chip's own inset, the chip, and that inset again — from the same values the
     chip is placed by, so the two cannot disagree about how tall that corner is. */
  body[data-owner] :is(#clay-page,#design-sheets) .c-band:first-of-type > .band-gear,
  body[data-owner] :is(#clay-page,#design-sheets) .l-crumbs + .c-band > .band-gear{
    top:calc(var(--c-u)*1.5 + var(--c-u)*5.5 + var(--c-u)*1.5)}
}

/**
 * THE CART IS A CORNER CHIP, and only when there is something in it.
 *
 * `[data-cart]` is drawn hidden and the client shows it the moment the basket has a line in it, so
 * "if not empty" is already the rule — this is where it sits. Top right, over the page, clear of
 * the dock: the two things a person reaches for are at opposite ends of the screen and neither
 * covers the other.
 */
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) .l-nav .l-cart{
    position:fixed;top:calc(var(--c-u)*1.5 + env(safe-area-inset-top));
    right:calc(var(--c-u)*1.5);z-index:51;
    width:auto;min-width:calc(var(--c-u)*5.5);height:calc(var(--c-u)*5.5);
    padding-inline:calc(var(--c-u)*1.5);
    border-radius:var(--c-r-tap);
    background:var(--c-paper);color:var(--c-ink);
    box-shadow:inset 0 0 0 var(--c-bw) var(--c-line), 0 calc(var(--c-u)) calc(var(--c-u)*3) rgb(0 0 0 / .16)}
}

/**
 * THE MENU GROWS OUT OF THE DOCK — and it is the drawer that has always been there.
 *
 * Same `[data-navall]` sheet, same client, same rows. What changes on a phone is the DRAWING: the
 * rows become a two-across grid of cards, numbered, the way the mockup shows them. A list of eight
 * underlined words is a table of contents; eight cards is a home screen, and that is the whole
 * difference between a website's menu and an app's.
 *
 * THE NUMBERS ARE A COUNTER, not markup. `counter-increment` on the row and `::before` to print
 * it: no drawing has to know how many pages a site has, a page added or removed renumbers itself,
 * and the desktop drawer — which is the same markup — never sees them.
 */
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) [data-navall] .l-nav-rows{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(var(--c-u)*1.5);counter-reset:navrow}
  :is(#clay-page,#design-sheets) [data-navall] .l-nav-rows > a{
    counter-increment:navrow;
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:calc(var(--c-u)*13);
    padding:calc(var(--c-u)*2);
    border-radius:min(var(--c-r), calc(var(--c-u)*2.5));
    background:var(--c-fill);color:var(--c-ink);text-decoration:none;
    box-shadow:inset 0 0 0 var(--c-bw) var(--c-line);
    /* the label sits at the foot of the card, under its own number */
    font:var(--c-weight) var(--c-t2)/1.2 var(--c-display);
    text-transform:var(--c-case);letter-spacing:var(--c-track)}
  /* NO ORPHAN. An odd number of pages leaves one card alone in the last row, which reads as a
     card that failed to load beside it. The last one takes the whole width instead — the same
     "four go two by two, never three and an orphan" rule the section versions are held to. */
  :is(#clay-page,#design-sheets) [data-navall] .l-nav-rows > a:nth-child(odd):last-child{
    grid-column:1 / -1}
  :is(#clay-page,#design-sheets) [data-navall] .l-nav-rows > a::before{
    content:counter(navrow, decimal-leading-zero);
    font:var(--c-label-weight) var(--c-t0)/1 var(--c-label);
    letter-spacing:var(--c-label-track);color:var(--c-faint);
    margin-block-end:auto}
  /* the site's action closes the sheet, full width, under the grid */
  :is(#clay-page,#design-sheets) [data-navall] .sheet > .c-acts .c-act{width:100%}
}

/**
 * …AND THE DOCK STAYS ON TOP OF THE MENU IT OPENED. "Also cab't close rhat menu."
 *
 * The sheet is `z-index:80` and spans the bottom of the screen; the dock is 50 and sits at
 * [12,763,366,69]. So the moment the menu opened it covered the dock — measured, the point where
 * the burger is came back as the SHEET's own action button — and the control a thumb had just
 * pressed to open the menu was underneath it. What was left was the dimmed strip above the sheet
 * and the Escape key, and on a site with nine pages that strip was eighty pixels of browser
 * chrome. On a phone that is a menu you cannot get out of.
 *
 * THE DOCK IS NOT UNDER THE SHEET, IT IS THE THING THE SHEET GREW OUT OF. That is the mockup —
 * "menu at the bottom that grows if opened" — so it stays where it is, above, and the burger goes
 * on being the way in AND the way out. `[data-menu]` already toggles; nothing in the client
 * changes.
 *
 * ONLY WHILE THE MENU IS OPEN, by `:has()` on the drawer's own `hidden`. A dock floating over the
 * basket, the product or the photograph viewer would be the same fault upside down — the viewer
 * is the whole screen and its close is in the corner the dock would sit under.
 *
 * AND THE SHEET ENDS ABOVE IT. Raising the dock alone would leave the menu's own action underneath
 * it, which is the collision that was measured, just wearing the other hat. Eleven units of floor:
 * the dock is 44 of button and 20 of padding, standing 12 off the bottom, and the rest is the gap
 * you can see between the two.
 */
/**
 * TWO RULES, TWO QUERY FAMILIES, AND NEITHER IS A CHOICE.
 *
 * `.l-bar` is in `#clay-page`, so it is inside the `page` container and asks how wide the SCREEN
 * is. The drawer's `.sheet` IS a page container (parts.css gives every sheet one) and an element
 * cannot be styled by a query on its own container — written as `@container page` the padding
 * simply never applied, measured at 32px with the rule sitting right there. The bare query asks
 * the nearest container, which for the sheet is the sheet, and that is the right question anyway.
 *
 * AND THE DOCK ASKS ITS OWN BUTTON WHETHER THE MENU IS OPEN. `:has()` cannot look upward out of
 * `#clay-page`, and by the time the menu is open the drawer has been MOVED into `#design-sheets`
 * (see `navHost` in design-client.js), so no ancestor holds both. The burger already carries
 * `aria-expanded` — the client sets it on every `[data-menu]` — so the dock reads the state off
 * the control inside it. Nothing new is written down and the two cannot disagree.
 */
@container page (max-width:820px){
  @supports selector(:has(*)){
    :is(#clay-page,#design-sheets) .l-bar:has([data-menu][aria-expanded="true"]){z-index:81}
  }
}
@container page (max-width:820px){
  /**
   * …AND THE MENU DOES NOT DRAW THE ACTION A SECOND TIME.
   *
   * The drawer carries the site's one action as a button under the rows, and it carried it
   * because the sheet used to COVER the dock — with the dock underneath, that button was the only
   * copy on screen. It is not underneath any more, so the two ended up stacked forty pixels
   * apart: "BOOK A TABLE" over "BOOK A TABLE", which is the same word twice, the fault the bar's
   * own note names and the reason the menu stopped listing the primary as a card.
   *
   * The one in the DOCK is the one that stays: it is at the thumb, it is there on every screen of
   * the site, and it is where the mockup puts it. The drawer keeps drawing it — the desktop
   * drawer, which no dock stands under, is unchanged — and the phone simply does not show it.
   */
  :is(#clay-page,#design-sheets) [data-navall] .sheet > .c-acts{display:none}
  /**
   * …AND THE DOCK SLIDES UP AND BECOMES THE HEAD OF THE SHEET.
   *
   * "For this i mean that the white bar in this case. Slides up.. and becomes the top of the
   * mobile menu. So that why we dont have the name + logo double."
   *
   * The drawer used to draw its own way HOME at the top — the mark and the name — while the dock
   * sat at the bottom carrying the same mark to the same place. Taking the mark off that row
   * closed the duplicate and left two headers: a title in the sheet and a tray under it. This is
   * the answer that leaves ONE. The tray rides up to the top of the sheet and IS the header: the
   * mark is the way home, the button is the site's action, and the burger — already a cross while
   * the menu is open — is the way out, in the corner a sheet's close belongs in.
   *
   * So the way-home row is not drawn at all here. Nothing is lost: every one of its three jobs is
   * a control in the tray standing where it used to be.
   *
   * IT IS A TRANSFORM, so the tray SLIDES rather than jumping, and its own layout is untouched —
   * the moment the menu closes it is back at the thumb with nothing to undo. `--dock-up` is
   * measured by `showNav` in design-client.js, because where the top of a bottom sheet is depends
   * on how much is in it, and no stylesheet can be told that.
   *
   * AND IT TAKES THE SHEET'S COLUMN while it is up there. The tray stands 1.5 units off the glass
   * and the sheet's own content stands `--c-gut` in; a header nine pixels wider than the cards
   * under it reads as a tray that happens to be there rather than the top of the thing.
   */
  :is(#clay-page,#design-sheets) [data-navall] .l-nav-home{display:none}
  /* THE ROOM THE TRAY NEEDS, on the rows rather than on the sheet: the sheet is a page container
     and cannot be styled by a query on itself — measured, its padding stayed at 32 with the rule
     sitting right there — and it has no ancestor container either, so no container query can
     reach it. Everything INSIDE it is reachable. `--dock-h` is the tray's measured height; two
     units under it is the gap you can see between the tray and the first card. */
  :is(#clay-page,#design-sheets) [data-navall] .l-nav-rows{
    margin-top:calc(var(--dock-h, 0px) + var(--c-u)*2)}
}
/**
 * THE RIDE ITSELF. `--dock-up` is nought until the menu opens, so the tray is where it has always
 * been and this declaration does nothing at all to a page nobody has opened the menu on.
 *
 * The transition is on the transform and on the two insets, and it is the sheet's own curve and
 * duration — the tray and the sheet it becomes the top of arrive together or the join is visible.
 */
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) .l-bar{
    transform:translateY(var(--dock-up, 0px));
    transition:transform .34s cubic-bezier(.32,.72,0,1),
               left .34s cubic-bezier(.32,.72,0,1),
               right .34s cubic-bezier(.32,.72,0,1)}
  @supports selector(:has(*)){
    :is(#clay-page,#design-sheets) .l-bar:has([data-menu][aria-expanded="true"]){
      left:var(--c-gut);right:var(--c-gut)}
  }
  @media (prefers-reduced-motion:reduce){
    :is(#clay-page,#design-sheets) .l-bar{transition:none}
  }
}

/**
 * …AND IT ARRIVES LIKE AN APP. "growing into things.. not to crazy."
 *
 * The cards come up together with the sheet rather than being revealed by it: a short rise and a
 * fade, staggered a few milliseconds apart down the grid, which is what makes a sheet read as a
 * screen that opened rather than a panel that appeared. Six is enough of a stagger to be felt and
 * short enough that the last card is in place before a thumb has left the dock.
 *
 * NOTHING MOVES FOR SOMEBODY WHO ASKED IT NOT TO — the whole thing is inside a motion query, so
 * `prefers-reduced-motion` gets the same menu with none of it.
 */
@container page (max-width:820px){
  @media (prefers-reduced-motion: no-preference){
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a{
      animation:c-nav-rise .34s cubic-bezier(.22, 1, .36, 1) backwards}
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a:nth-child(1){animation-delay:.02s}
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a:nth-child(2){animation-delay:.05s}
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a:nth-child(3){animation-delay:.08s}
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a:nth-child(4){animation-delay:.11s}
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a:nth-child(5){animation-delay:.14s}
    :is(#clay-page,#design-sheets) [data-navall]:not([hidden]) .l-nav-rows > a:nth-child(n+6){animation-delay:.17s}
  }
}

/* THE RISE ITSELF. A `@keyframes` is a DEFINITION and not a rule — it styles nothing until
   something names it, and the only thing that names this is inside the phone's own query above. So
   it sits at the top level of the mobile layout and applies on a desk exactly never. */
@keyframes c-nav-rise{
  from{opacity:0;transform:translateY(calc(var(--c-u)*1.5)) scale(.97)}
  to{opacity:1;transform:none}
}

/**
 * THE WAY BACK IS A STICKY CHIP IN THE CORNER. "sticky back button."
 *
 * The breadcrumb sentence is three small targets in a row of caption type at the top of the
 * screen, and the only one anybody reaches for on a phone is the first step back. So the sentence
 * goes and the chip stands in its place — top left, the mirror of the cart in the top right, the
 * same size and the same corner as the dock's own two buttons so the three read as one set.
 *
 * IT WEARS THE ACTION, because it is one: the mockup's back button is the accent, and the accent
 * on this site is the thing you press. `--c-act-bg` / `--c-act-ink` are the same measured pair
 * every button uses, so a white accent still draws a readable chip.
 */
@container page (max-width:820px){
  :is(#clay-page,#design-sheets) .l-crumbs{padding:0}
  /* the sentence is not drawn; the chip is */
  :is(#clay-page,#design-sheets) .l-crumb{display:contents}
  :is(#clay-page,#design-sheets) .l-crumb > :not(.l-crumb-back){display:none}
  /* `.l-crumb a` — NOT `.l-crumb-back`. The sentence paints every link in it `color:inherit`,
     which is the crumb's own `--c-soft`, and gives it a `currentColor` underline; that rule is
     one selector heavier than the chip's own, so it won, and the chevron came out SOFT INK on the
     accent instead of the accent's measured ink. Measured on the demo at 390: with the accent at
     #6E00FF the chip's `color` resolved to a mid grey (L .70) — and it did that for a white
     accent and a near-black one too, which is the tell that the value was never the accent's at
     all. "About back icon is not readable.. maybe just for this theme" — it was every theme.
     Naming the sentence AND the chip outranks it, and the underline goes with it: a chip is not
     a word in a sentence. */
  :is(#clay-page,#design-sheets) .l-crumb a.l-crumb-back{
    border-bottom:0;
    position:fixed;top:calc(var(--c-u)*1.5 + env(safe-area-inset-top));
    left:calc(var(--c-u)*1.5);z-index:51;
    display:grid;place-items:center;
    width:calc(var(--c-u)*5.5);height:calc(var(--c-u)*5.5);
    border-radius:var(--c-r-tap);
    background:var(--c-act-bg);color:var(--c-act-ink);text-decoration:none;
    box-shadow:inset 0 0 0 var(--c-bw) var(--c-act-bg-safe),
               0 calc(var(--c-u)) calc(var(--c-u)*3) rgb(0 0 0 / .16)}
  :is(#clay-page,#design-sheets) .l-crumb-back .ico{width:1.35em;height:1.35em}
}

/**
 * THE FOOTER'S LINK GROUPS ARE CARDS ON A RAIL. "footer for example link groups in cards so its
 * no so messy and horizontal scroll."
 *
 * `auto-fit minmax(150px, 1fr)` is the right answer on a desk and the wrong one at 390: five
 * groups become two ragged columns of small type stacked five rows deep, and the bottom fifth of
 * every page is a wall of links with no shape to it. Photographed on a phone.
 *
 * A group IS a card — a heading and the things under it — so it is drawn as one, and the row of
 * them is the same rail every other row of cards on this layout uses: the same snap, the same
 * hidden scrollbar, the same gutter bleed, the same `--c-rail` share of the screen. There is one
 * idiom for "a row you push" here and this is it, which is why the footer needs no new one.
 *
 * The GROUPS scroll; the brand block above them does not. It is one thing and it is the thing you
 * are looking at when you reach the bottom.
 */
@container page (max-width:760px){
  :is(#clay-page,#design-sheets) .l-fcols{
    display:grid;grid-auto-flow:column;grid-template-columns:none;
    /* THE FOOTER SETS ITS OWN SHARE. `--c-rail` is a page-wide token and it is set for a row of
       CARDS with a picture in them; a link group is a heading and three words, and at the page's
       share one group fills the screen and the second is invisible — which is a rail nobody knows
       they can push. Two and a bit, so the next one is obviously there. */
    --c-rail:62%;
    grid-auto-columns:var(--c-rail);
    gap:var(--c-gap);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;
    /* the rail runs to the edge of the screen and back — a row that stops inside the gutter reads
       as a row that has ended */
    margin-inline:calc(var(--c-edge) * -1);
    padding-inline:var(--c-edge);
    scroll-padding-inline-start:var(--c-edge);
    padding-bottom:var(--c-u)}
  :is(#clay-page,#design-sheets) .l-fcols::-webkit-scrollbar{display:none}
  /* WHAT A FOOTER CARD IS — said once, for the groups on the rail AND for the brand block above
     them, because they are the same object: a heading and the things under it. The brand column is
     an `.l-fcol` too, so scoping this to the rail alone would have left the one card at the top of
     the footer as the only thing down there that is not one. */
  :is(#clay-page,#design-sheets) .l-foot-in > .l-fcol,
  :is(#clay-page,#design-sheets) .l-fcols > .l-fcol{
    gap:calc(var(--c-u)*1.25);
    padding:calc(var(--c-u)*2);
    border-radius:min(var(--c-r), calc(var(--c-u)*2.5));
    /**
     * …AND IT LIFTS FAR ENOUGH TO BE SEEN. "Again no background.. the footer card is rhe
     * background right.."
     *
     * This was `--c-fill`, on the reasoning that a card lifts by the same step everywhere. The
     * reasoning is right and the token is not, and the reason is worth writing down: a theme
     * STATES its own fill for its own paper — `--pp-100`, `--mn-850`, `--rm-850`, one deliberate
     * step in its own scale — and the footer flips the ground, so the derivation in parts.css
     * overwrites that with a generic five per cent of the ink. Five per cent of white into a
     * near-black plate is not the same step as one shade of a designed ramp.
     *
     * Measured, card against footer: 1.10 on bold, 1.07 on Mono, 1.13 on Room, 1.10 on Seto. That
     * is not a card, it is a hairline with nothing behind it, which is exactly what was reported —
     * for the second time, on two different designs.
     *
     * `--c-lift` IS THE SAME NUMBER THE WELL USES, and that is the point of it being a token: the
     * page's well steps away from its cards and the footer's card steps away from its plate —
     * opposite directions, one magnitude, said once in parts.css. It lands at 1.16 / 1.23 / 1.35 /
     * 1.30 here: a card you can see on all four, and quiet on all four.
     */
    background:color-mix(in oklab, var(--c-on-g, var(--c-ink)) var(--c-lift), var(--g));
    box-shadow:inset 0 0 0 var(--c-bw) var(--c-line)}
  /* …and only the ones on the rail snap, because only they move */
  :is(#clay-page,#design-sheets) .l-fcols > .l-fcol{scroll-snap-align:start;min-width:0}
}

/**
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 * ── BANDS ARE CARDS ── the page is a column of them, and the page itself steps back.
 * ═══════════════════════════════════════════════════════════════════════════════════════════════
 *
 * "now we need to make the mobile layout applike. and really 10x better."
 *
 * A desktop band is a STRIPE ACROSS THE SCREEN. That is the right drawing on a desk, where the
 * screen is wider than anything on it and the way to say "this is a different subject" is to
 * change the room you are standing in. On a phone every band is already the full width of the
 * screen, so a stripe says nothing: the page came out as one unbroken column from the bar to the
 * footer, and the only thing separating What we do from What people say was that the paint
 * changed. Ten bands, ten rooms, no walls — which is why the phone read as a website squeezed
 * rather than as an app.
 *
 * SO THE BAND'S COLUMN BECOMES A CARD AND THE BAND BEHIND IT STEPS BACK. Every band, on every
 * theme, in one column with air between them: the shape the mockup is drawn in, and the shape a
 * phone has meant since the first grouped table view. A card has an edge, so a subject has an
 * end — and ten pixels between two of them do more than a change of paint ever did.
 *
 * THIS IS THE LAYOUT'S DECISION, NOT A THEME'S. There is a desktop policy where a theme may ask
 * for panels (`panels: "card"`, in parts.css) and this is deliberately NOT it: it does not read
 * that tone, and it applies to themes that never asked. "has to be clear that we have a desktop
 * layout and mobile layout.. and the themes just color it in basically" — so the phone says every
 * band is a card, and the theme says what colour the card is, how round its corner is and what
 * its line looks like. Not one colour is named here.
 *
 * THE WELL IS `--c-fill`, AND THAT IS NOT A NEW TOKEN. The page has to be a step away from the
 * cards or they are not standing on anything, and `--c-fill` is already the answer to "one step
 * off this ground, in the direction there is room": `--c-on-g` mixed 5% into the surface, plus the
 * owner's accent, re-derived on every ground. On a light theme it lands within a shade of the
 * mockup's page; on a dark one it lifts a hair off the black. The footer's own cards have used it
 * since they shipped, so a card lifts by the same step everywhere on this layout.
 *
 * WHY THE WELL IS PAINTED BY THE BAND AND NOT BY THE PAGE. `#clay-page` IS the `page` container —
 * every `@container page (…)` rule in this file resolves against it — and an element cannot be
 * styled by a query on its own container. Written as `#clay-page{background:var(--c-fill)}` in
 * here the rule is not wrong, it simply never matches: measured, the page stayed white on a dark
 * theme and every card floated on nothing. The band is the outermost box the phone layout can
 * reach, so the band paints it.
 */
@container page (max-width:820px){
  /**
   * HOW ROUND, AND HOW FAR IN — the two numbers this drawing has, said once on the band so that
   * everything inside it can read them.
   *
   * The corner is the THEME's, capped: `--c-r-lg` is a desk number (some themes run to 32px) and
   * at 370px wide that is a lozenge. The cap is the mockup's 18. A square theme states `--c-r:0`
   * and gets square cards, which is the whole of "the themes just colour it in".
   */
  :is(#clay-page,#design-sheets) .c-band{
    --c-band-r:min(var(--c-r-lg, var(--c-r)), calc(var(--c-u) * 2.25));
    /* …and how far in, which is TWO units and not two and a half. Same card, same reason: at 390
       the difference is eight pixels of content, and it is eight pixels the shop spends twice. */
    --c-band-in:calc(var(--c-u) * 2);
    /* A BAND IS NOW ONLY THE WELL BETWEEN TWO CARDS. Its ground moves onto the card below, its
       rhythm moves inside the card, and what is left of it is the gap.
       `--c-well` AND NOT `--c-fill`: the fill is re-derived on every surface, so reading it here
       gave each band's gap the colour of that band's own ground — a dark band's gap dark, the
       next one's pale, and the page read as a ladder of stripes. The well is computed once on
       the page and inherited unchanged. See `--c-well` in parts.css. */
    background:var(--c-well);
    /**
     * ONE NUMBER FOR THE FRAME ROUND EVERY CARD — the same down the sides as between two of them.
     *
     * "Spacing between the cards/sections a bit better think would look perfect if same space in
     * between as left and right."
     *
     * It was two numbers that had never been asked to agree: sixteen between two cards — a unit
     * from each of the two bands that meet — and TEN down the sides, which is half of
     * `--c-gut`'s floor and a number about the page's COLUMN rather than about cards. Measured at
     * 390 on the live site, every card: left 10, right 10, gap above 16. A frame that is wider at
     * the top and bottom than at the sides reads as cards drifting apart rather than as a page
     * with a margin.
     *
     * Sixteen, not ten, because ten was the fault reported two cards ago — "So here also looks
     * weird more spacing between the cards" — and it is the number the tightest theme's own
     * padding (14.4) has to be told apart from. So the sides come UP to the gap rather than the
     * gap going back down to the sides.
     *
     * SAID ONCE, and spent in two places: half of it above and half below each band, which meet
     * to make the whole gap, and the whole of it down each side of the card. The two can no
     * longer disagree because there is only one of them.
     */
    --c-band-gap:calc(var(--c-u) * 2);
    padding-block:calc(var(--c-band-gap) / 2)}
  /**
   * …AND THE FOOTER'S COLUMN IS THE SAME MARGIN. The footer is not a card — it is the page's own
   * plate, edge to edge, with its ground running to the glass — but what stands INSIDE it is a
   * column, and that column was `--c-page`: the ten-pixel margin every card has just left behind.
   * Ten down the footer under sixteen down everything above it is one page with two left edges.
   */
  :is(#clay-page,#design-sheets) .l-foot{--c-band-gap:calc(var(--c-u) * 2)}
  :is(#clay-page,#design-sheets) .l-foot > :is(.l-foot-in,.l-foot-f){
    width:calc(100% - var(--c-band-gap) * 2);margin-inline:auto}
  /* …AND NOTHING ABOVE THE FIRST THING ON THE PAGE. A gap is what separates two cards; above the
     first one there is no second thing, only the top of the screen, and a strip of well there
     reads as the page having failed to start. */
  :is(#clay-page,#design-sheets) .c-band:first-of-type{padding-block-start:0}
  /* …AND NO HAIRLINE BETWEEN THEM. A card has an edge of its own, so a rule drawn across the well
     between two of them is a seam over a seam — the same reasoning the desktop panel policy
     gives, for the same reason. */
  :is(#clay-page,#design-sheets) .c-band + .c-band{border-top:0}
  /* THE BREADCRUMB IS NOT A BAND ON THIS LAYOUT. Its sentence is not drawn — the chip is, fixed to
     the corner, further up this file — so a card around it is a card around nothing. */
  :is(#clay-page,#design-sheets) .c-band.l-crumbs{padding-block:0}

  /**
   * THE CARD ITSELF — the band's own column, wearing the band's own ground.
   *
   * `--g` and nothing else: a band that is ink is an ink card, a band that is the accent is an
   * accent card, and a band a theme gave no ground to is a card of the theme's paper standing on
   * the theme's fill. Every ink on it was derived for `--g` on the band above, so nothing here has
   * to be restated and nothing can drift.
   *
   * NOT THE GLASS BAND, which is a panel already and has a drawing of its own; not the picture
   * band, which is a room rather than a card — see below.
   */
  :is(#clay-page,#design-sheets) .c-band:not(.c-g-photo):not(.c-g-glass):not(.l-crumbs)
    > :is(.c-in,.c-in-wide){
    background:var(--g);color:var(--c-ink);
    border-radius:var(--c-band-r);
    box-shadow:inset 0 0 0 var(--c-bw) var(--c-line);
    /* …AND THE SIDES ARE THAT SAME NUMBER. `.c-in` is the page's COLUMN — `--c-page`, the measure
       less a gutter — which on a phone is a ten-pixel margin decided by `--c-gut`'s floor and
       nothing to do with cards. Overridden here, and only for a card, so the frame is square.
       `margin-inline:auto` on `.c-in` still centres it. */
    width:calc(100% - var(--c-band-gap) * 2);
    padding-inline:var(--c-band-in);
    /* the band's rhythm, spent INSIDE the card now rather than above and below it. HALF, because
       a card's padding is not the air between two subjects — the gap is that — and a whole
       rhythm inside a 370px card is a third of the screen before a word is read. Six tenths was
       still too much of it: "Too much padding in cards so doesn fit", photographed on the shop,
       where every pixel the card takes comes off two product columns rather than one. */
    padding-block:calc(var(--c-rhythm) * .5 * var(--c-band-air, 1));
    /* THE EDGE A STRIP HAS TO REACH IS NOW THE CARD'S. Every rail, chip row and reviews wall on
       this layout runs past the column it stands in by `--c-edge`, which is half the page gutter
       while the column IS the page. Inside a card it is the card's own padding, or every rail on
       every page stops six pixels short of an edge that is now visible. One token, restated in
       the one place the column changed. */
    --c-edge:var(--c-band-in);
    min-width:0}

  /**
   * …AND A BAND WHOSE COLUMN IS ALREADY A CARD DOES NOT GET A SECOND ONE.
   *
   * "Cards in cards like booking doesn't make much sense." The booking walk is drawn as a card —
   * that is the block, on every theme, with its own ground and its own corner — so putting the
   * band's card around it gave two frames, two paddings and two radii nested inside each other,
   * and the times inside them were squeezed into the middle third of the screen. Photographed.
   *
   * ONE CLASS, NAMED, WITH THE REASON. `.l-bc-in` is the booking walk's own wrapper and it is the
   * one block in the library whose whole drawing IS a card. Anything else added here has to be
   * the same thing: not "a band with a box in it" — every band has boxes in it — but a band whose
   * COLUMN is the card, so that the layout's card would be drawn around the drawing's own.
   *
   * The band keeps its well and its gap; only the frame goes, which leaves the booking card
   * standing on the well exactly as every other card does.
   */
  @supports selector(:has(*)){
    /* the same `:not()` chain the card rule carries, because this has to OUTWEIGH it and a
       `:has()` alone does not: three `:not(.class)` are three classes of specificity, so the
       shorter selector lost and the booking walk kept its second frame. Measured. */
    :is(#clay-page,#design-sheets) .c-band:not(.c-g-photo):not(.c-g-glass):not(.l-crumbs):has(> :is(.c-in,.c-in-wide) > .l-bc-in)
      > :is(.c-in,.c-in-wide){
      background:none;box-shadow:none;border-radius:0;
      padding-inline:0;padding-block:0;
      --c-edge:calc(var(--c-gut) / 2)}
  }

  /**
   * …AND THE TWO HEROES ARE NOT CARDS AT ALL. Both of them are the SCREEN.
   *
   * There are two ways a page opens: a band whose GROUND is a photograph (`.c-g-photo`), and a
   * `beside` header whose picture the phone puts the words on top of (the poster, two hundred
   * lines up this file). Neither is a card, and neither may be inset by so much as a gutter —
   * that was asked for in exactly those words, with a photograph of the fault: "why is there
   * spacing all arounD? i said full height and width for the mobile one."
   *
   * So a picture band keeps its own ground rather than the well (the photograph covers it, and
   * where there is no photograph the tint IS the drawing), and the poster keeps the nought air
   * the rule up there gave it. The card starts at the band under them.
   */
  :is(#clay-page,#design-sheets) .c-g-photo{background:var(--g)}
  /* THE POSTER IS UNDRAWN RATHER THAN EXCLUDED, and that is on purpose. `:has()` inside the card
     rule's own selector would take the WHOLE rule down on a browser that cannot parse it — every
     card on the site, to protect one band — so the card is stated unconditionally and this takes
     it off the one band that must not have it, behind the support query the rest of this file
     already uses for `:has()`. Longhands, not the `padding` shorthand: a shorthand on `.c-in`
     reads to the bleed guard in rules.test.js as taking the inline half away from something that
     bleeds. */
  @supports selector(:has(*)){
    /* …and the poster keeps nought ABOVE it, because it is the top of the screen — but it owes
       the card under it its half of the gap, or the first card hugs the photograph by eight
       where every other card is separated by sixteen.

       THAT GAP IS THE WELL, LIKE EVERY OTHER GAP ON THE PAGE. "There is a small line under the
       photo of rhe header.." — photographed on Room's /contact, a strip of near-black between
       the photograph and the cream page, and the same eight pixels are under the home page's
       poster on every theme whose header ground is not the well. The band was painted `--g` here
       so that a photograph still loading has its tint under it; but the picture only covers the
       band's CONTENT box, and the ground was painted across the padding under it too, which is
       the one part of the band that is meant to read as the space between two cards.
       Measured at 390 on Room: the media ending at 940.2 and the band at 948.2, the strip
       40,27,27 where the well either side of every card below it is 34,34,35.
       So the tint moves in one box, onto the poster's own column, which is exactly the picture's
       extent — nothing that was covered changes, and the gap is the well. */
    :is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside:has(.c-media){
      background:var(--c-well);padding-block:0 var(--c-u)}
    :is(#clay-page,#design-sheets) :is(.c-band:first-of-type,.l-crumbs + .c-band).c-arr-beside:has(.c-media)
      > :is(.c-in,.c-in-wide){
      background:var(--g);border-radius:0;box-shadow:none;
      /* …AND THE FULL WIDTH BACK. The card rule takes `--c-band-gap` off each side, and it is one
         selector heavier than the poster's own `width:100%` two hundred lines up — so the moment
         the frame became a number the poster came in with it: measured at 358 wide at x 16, a
         hero with a margin, which is the exact fault "i said full height and width for the mobile
         one" was about. Undone here with the rest of the card. */
      width:100%;
      padding-inline:0;padding-block:0;
      --c-edge:calc(var(--c-gut) / 2)}
  }
}

/**
 * A ROW OF PILLS DOES NOT BLEED INSIDE A CARD. "For menu food drink. Tags it looks strange."
 *
 * Every rail on this layout runs past the column it stands in — that is what makes it read as a
 * row that carries on rather than a boxed carousel — and since the bands became cards, the column
 * it runs past is the CARD. For a row of pictures that is right: a photo card sliced by the
 * card's edge is a photograph that continues, which is the whole signal.
 *
 * A CHIP IS NOT A PICTURE, IT IS AN OUTLINE. Cut flush against the card's own hairline, a pill
 * comes out as a broken lozenge sitting on the border with its curve severed — photographed on
 * the menu, and reproduced here at 390 on every theme: scrolled sixty pixels, the leading chip
 * lands at x −15 with the card's edge at 27. On a full-bleed page the same cut was made by the
 * edge of the GLASS and read as "there is more"; a drawn border is not an edge of the screen, and
 * a shape cut by one reads as a shape escaping its box.
 *
 * So the pills stay inside the card and are cut by its PADDING instead — sixteen pixels in, with
 * card either side of the cut, which is a row sliding under the card's own edge and is what every
 * app with a filter strip does. Nothing else changes: the row still scrolls, still snaps, and on
 * a page with no card around it — a desk — it still bleeds to the gutter exactly as before.
 *
 * ONLY `.c-chips`. The other five rails that bleed by the same rule in parts.css are rows of
 * cards, pictures and people, and every one of them wants the cut it has.
 */
@container page (max-width:820px){
  /**
   * A STUCK STRIP CARRIES ITS OWN LANE. "Make it nicer that above the tags for menu (food drink)
   * you don't see things scrolling"
   *
   * The strip sticks at `--c-bar`, which on this layout is the lane the way back and the basket
   * are fixed in — and above it there was nothing but the page. Measured on /menu at 390 scrolled
   * 1,400: the strip at y 64, and `elementFromPoint(195, 30)` a course heading running up through
   * the gap and out of the top, half of it behind the two chips.
   *
   * A BOX-SHADOW AND NOT A PSEUDO-ELEMENT, because the strip is `overflow-x:auto` — which makes
   * its overflow-y `auto` too, so anything positioned above it inside it is clipped away. A
   * shadow is the element's own box decoration and is painted outside the border box regardless.
   * `--g` and nothing else: the lane becomes the section carrying on, not a bar laid over it.
   *
   * ONLY WHILE STUCK. At rest the strip is the first thing in the card with the card's own top
   * padding above it and the well above that, and a permanent shadow would paint the section's
   * ground across both. `c-stuck` is put on by `stickSpy` in design-client.js — one
   * IntersectionObserver, because CSS cannot ask.
   */
  :is(#clay-page,#design-sheets) .c-chips.c-stick.c-stuck{
    box-shadow:0 calc(var(--c-bar) * -1) 0 0 var(--g)}
  :is(#clay-page,#design-sheets) :is(.c-in,.c-in-wide) > .c-chips{
    margin-inline:0;padding-inline:0;scroll-padding-inline:0}
}

/**
 * ── THE SHOP IS TWO ACROSS ── a catalogue is browsed, and a column of one is not browsing.
 *
 * The rule above this one stacks every card grid on a phone, and it is right about nearly all of
 * them: `docs/design-rules.md` R12 says no two columns under 560 unless both are genuinely narrow,
 * and a card that carries a photograph, a name, a line and a button is not narrow at 179px.
 *
 * THE CATALOGUE IS THE EXCEPTION, and it is the exception by the same class that already marks it
 * out. `.c-grid-all` is the grid that opts OUT of becoming a rail, and the note on the rail rule
 * says why in one line: "a catalogue is not a taste, and a row you swipe HIDES products". Every
 * other set on the page is three things you glance at; this one is the shop, and its whole job is
 * to let somebody see what there is. One product per screen makes forty products a forty-screen
 * scroll, which is the one page on the site where the answer to "what do they sell" is "keep
 * going". Two across is what every shop on a phone does, and the mockup draws it that way.
 *
 * IT IS NARROW ENOUGH BECAUSE THE CARD IS SHORT. A product card is a square picture, a name, one
 * line and a price — not a paragraph — and the button under it is already the compact one. At 296
 * of card less a 12px gap that is 142 each, which is wider than the 136 the mockup drew.
 *
 * NOTHING IS TAKEN AWAY TO MAKE IT FIT. The button keeps its words: "Add" and "Choose options" go
 * to two different places — one drops a thing in the basket, the other opens the product — and a
 * glyph that does either one of those without saying which is a button that lies about half the
 * time.
 */
@container page (max-width:560px){
  :is(#clay-page,#design-sheets) .c-grid.c-grid-all:has(> .c-card){
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(var(--c-u) * 1.5)}
  /* the name comes down a step with the column — a display size set for a 296px card is two words
     a line in a 142px one */
  :is(#clay-page,#design-sheets) .c-grid.c-grid-all:has(> .c-card) .c-card-n{font-size:var(--c-t2)}
  /**
   * …AND A CARD WITH HALF THE WIDTH SPENDS LESS OF IT ON AIR.
   *
   * `--c-card-pad` is three units, which is right for a card that is 296 across and wrong for one
   * that is 163: measured, twenty-four either side left 115 pixels for a name, so "Cotton mat"
   * and "Natural rubber · 4mm" both wrapped and "Choose options" filled the card edge to edge.
   * "These padding in card still not good", photographed.
   *
   * TWO UNITS, AND IT IS THE TOKEN AND NOT THE PADDING. The photograph at the top of a card is
   * pulled out to the card's edges by a negative margin of exactly `--c-card-pad` — set the
   * padding directly and the picture overshoots by the difference on both sides. One value, read
   * by both, which is what the token is for.
   */
  :is(#clay-page,#design-sheets) .c-grid.c-grid-all > .c-card{--c-card-pad:calc(var(--c-u)*2)}
  /**
   * …AND A PRODUCT WITH NO PHOTOGRAPH KEEPS ITS FRAME, because there is something beside it now.
   *
   * `card()` draws the frame of a picture that has not arrived so a row of cards still lines up,
   * and the rule further up this file takes it away on a phone with a reason that was true when
   * it was written: "on a phone a plain grid is one card per row, so there is nothing beside it
   * and nothing to line up with". The catalogue is two across now, so there is.
   *
   * What it cost, measured on the shop: a product with no picture had its content end 104 pixels
   * down and its button pinned to the foot of a 394-pixel card — two hundred and twenty-nine
   * pixels of nothing in the middle of it, beside a card that was full. That reads as broken
   * padding, which is what it was reported as.
   */
  :is(#clay-page,#design-sheets) .c-grid.c-grid-all .c-card > .c-media:empty{display:block}
  /**
   * …AND THE BUTTON'S WORDS WRAP RATHER THAN LEAVING THE CARD.
   *
   * "Shop cards still don't really fit for mobile on all themes / layotu we have now.. please make
   * sure it does"
   *
   * `.c-act` is `white-space:nowrap` everywhere, which is right for a button standing in a band:
   * a two-line call to action on a page with room is a button that looks broken. In a card half
   * the width of the screen it is the opposite — the words simply leave. Measured at 390 with the
   * longer of the two labels: "Choose options" came out 155px wide in `bold` and 148 in `_mono`,
   * in a card 157 across with 16 of padding either side, so it hung 14 and 8 pixels past the
   * card's own border. Photographed on the shop.
   *
   * NOTHING IS TAKEN AWAY TO MAKE IT FIT — that is the rule this card is about, and dropping the
   * label for a glyph would break it. "Add" and "Choose options" go to two different places, one
   * drops a thing in the basket and the other opens the product, so a button that does not say
   * which lies about half the time. It wraps instead, and it takes the card's full width so the
   * two buttons in a row are the same button.
   *
   * `line-height` because a wrapped button needs one: `.c-act` is set on a single line
   * (`/1`-ish), so two lines of it touch. This is the one place on the site where it has two.
   */
  :is(#clay-page,#design-sheets) .c-grid.c-grid-all > .c-card > .c-act{
    white-space:normal;text-align:center;width:100%;
    line-height:1.25;height:auto;
    padding-inline:var(--c-u)}
}

/**
 * A CHAPTER IS ONE COLUMN ON A PHONE — the heading, then its prose.
 *
 * Two columns on a 390px screen is a heading four characters wide beside a paragraph six: the
 * pair only exists because a desktop band has width going spare. See `.c-chapter` in parts.css.
 */
@media (max-width:760px){
  :is(#clay-page,#design-sheets) .c-chapter{grid-template-columns:minmax(0,1fr);
    gap:calc(var(--c-u)*1.5)}
}