/* ============================================================================
THE STORE — the skeleton every variation shares.
Loaded AFTER assets/page.css and BEFORE shopassets/store.css. It owns
structure, spacing and behaviour; store.css owns colour, type, the shape of
a tile and the two page models (the catalogue scrolls, the rest is one
screen). Until 2026-09-03 there were four designs over this skeleton.
FOUR THINGS THAT ARE NOT STYLE CHOICES
--------------------------------------
1. THE STORE DOES NOT EDIT assets/page.css. That file's own comment warns
that a plain rule added below its phone media block silently loses, and
it is shared with three finished pages. Everything the store needs is
added here, at a specificity that wins.
2. `body.shop` UNDOES TWO PAGE RULES, both of which are right for a page
that is one screen and wrong for a catalogue that scrolls (store.css
puts them back on `body.fit`, the one-screen pages):
`main{display:flex;align-items:center}` would centre a grid vertically,
and `.copy{position:fixed}` would park the copyright on top of it.
3. object-fit: CONTAIN, NEVER COVER. The measured aspect ratios of the real
works run 0.67 to 1.67 — a 2.5x spread — and a `cover` tile would slice
the top off a tall canvas. The plate absorbs the variation; the artwork
is never cut. This is the one rule in the file that may not be traded for
a tidier grid.
4. EVERY NEW COMPONENT CARRIES ITS OWN HIGH-CONTRAST RULE, doubled as
`html[data-a11y-contrast][data-a11y-contrast]` (0,2,x). page.css writes
its contrast rules that way so they outrank per-variant palettes; a
single-attribute rule here would lose to them at the overlaps, and a
component with no rule at all simply gets no high-contrast treatment.
IS 5568 is a legal requirement, not a preference.
The phone block is LAST in this file, and must stay last. A media query adds
no specificity.
========================================================================== */
:root{
/* Tile geometry. A variation may retune these; it should not need to
restate the grid. */
--tile-min:220px;
--tile-ratio:1; /* the PLATE's box. The picture inside is contained. */
--gap:18px;
--pad:clamp(18px, 4vw, 46px);
--edge:rgba(243,236,227,.38); /* a component boundary: 3:1 minimum */
--line:rgba(243,236,227,.16); /* a decorative separator */
--plate:rgba(243,236,227,.07);
}
/* ---- the scrolling document ---------------------------------------------- */
body.shop{display:block;min-height:100vh;min-height:100dvh}
body.shop main{display:block;flex:none;min-height:0;
padding:0 0 clamp(40px, 7vw, 90px)}
body.shop .copy{position:static;text-align:center;
margin:clamp(26px,5vw,54px) 0 0;padding:0 20px}
body.shop .bg{z-index:0}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad)}
/* page.css gives .actions a desktop rule that makes a button row step OUT of
its parent -- width:min(760px,92vw) with margin-inline:calc(50% - min(380px,
46vw)) -- so the row can escape the 70ch reading measure of .col and centre
on the page. That is right there and wrong here: inside the store the same
row sits in a ~450px info column, where 50% resolves to 225 against a 380
offset and drags the row 58px off the left edge of the document. Measured on
the necklace page at 1280: 73px of horizontal scroll, in both languages and
at every text step, i.e. geometry rather than type. A store row is already
centred by justify-content and needs no escape hatch. */
body.shop .actions{width:auto;margin-inline:0}
/* ---- the grid ------------------------------------------------------------- */
.grid{list-style:none;margin:0;padding:clamp(10px,2vw,22px) 0 0;
display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile-min),1fr));
gap:var(--gap)}
.grid > li{margin:0;min-width:0}
.tile{display:flex;flex-direction:column;gap:10px;text-decoration:none;
color:inherit;position:relative;height:100%}
.plate{display:flex;align-items:center;justify-content:center;
aspect-ratio:var(--tile-ratio);background:var(--plate);border-radius:3px;
overflow:hidden;padding:10px}
/* width/height 100% and NOT max-width/auto. With auto sizing, an that
carries a w-descriptor srcset takes its intrinsic width from the sizes
attribute -- so a 260px sizes hint laid the artwork out at 260px inside a
614px plate and left it floating in empty ground. Filling the plate and
letting object-fit do the work means the LAYOUT is the plate and sizes only
chooses which file to fetch, which is what sizes is for. */
.plate img{display:block;width:100%;height:100%;object-fit:contain}
/* The drawn stand-in for an item with no photograph. Deliberately NOT a stock
image and deliberately not a grey box pretending to be one: two rules and a
dot, so it reads as "nothing here yet" rather than as a product. */
.ph{display:flex;align-items:center;justify-content:center;
width:100%;height:100%;border-radius:2px;
background:repeating-linear-gradient(135deg,var(--plate) 0 10px,transparent 10px 20px)}
.ph::after{content:"";width:26px;height:26px;border-radius:50%;
box-shadow:inset 0 0 0 2px var(--edge)}
.tinfo{display:flex;flex-direction:column;gap:3px;padding:0 2px}
.tname{font-size:calc(15px * var(--a11y-scale));line-height:1.3;font-weight:600}
.tprice{font-size:calc(14px * var(--a11y-scale));opacity:.82;
font-variant-numeric:tabular-nums}
.tflag{align-self:flex-start;margin-top:2px;padding:3px 9px;border-radius:2px;
font-size:calc(11px * var(--a11y-scale));letter-spacing:.04em;
text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--edge)}
.tflag.is-sample{opacity:.85}
/* ---- the product page ----------------------------------------------------- */
.pprice{margin:10px 0 0;font-size:calc(clamp(20px,2.2 * var(--fit),30px) * var(--a11y-scale));
font-variant-numeric:tabular-nums}
.pprose{margin:clamp(14px,2vw,22px) 0 0;color:var(--dim);
font-size:calc(clamp(15px,1.55 * var(--fit),17px) * var(--a11y-scale))}
.pprose p{margin:0 0 .7em}
.pdims{margin:14px 0 0;color:var(--dim);font-size:calc(13px * var(--a11y-scale))}
/* Real radios, styled. A