/* ═════════════════════════════════════════════════════════════════
   กลิ่นอาย · KLINAI — second edition, fourth pass.

   THE THESIS
   KILIAN photographs the bottle: a full-bleed scene per chapter and a UI
   with no colour in it, so the only colour on screen is the product.
   This shop may not photograph a bottle — the products are real and
   nobody's product photography is ours. So it photographs what is
   INSIDE: eighteen raw materials, given a maison's seriousness.

   TAKEN FROM THE REFERENCE — mood and tone, never layout
   achromatic UI · one typeface · full-bleed image bands alternating with
   quiet ground sections · small heavily-tracked type · sensory fragments.

   ── WHAT THE FOURTH PASS FIXED ─────────────────────────────────
   Every photograph on the page was the same shape. Measured: 21 of 21
   images PORTRAIT, aspect 0.34–0.69, only four distinct rendered sizes,
   and nothing landscape or square anywhere. Splitting a band into columns
   makes columns; doing it four times makes a page of columns. The pass
   before this one counted components and left the shapes alone.

   There are now TWO image families and they share nothing:

   1. `.banner` — ONE landscape photograph, full-bleed, printed through a
      film with the identity over it. Wide, cinematic, dark. Four of them,
      at four different heights.
   2. `.tiles` — the materials as clean SQUARES on the page ground. No
      film, no scrim, caption in ground-coloured type underneath. Bright,
      small, breathing.

   That is the reference's own alternation — a dark scene, then product
   on a bright ground — instead of the same strip four times.

   The layer block also absorbed the ledger: each time group carries its
   own materials AND its own duration bar. The three groups are equal
   width whatever their tile count, so all nine bars stay comparable and
   a two-material layer simply shows bigger squares than a three.
   ═════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light dark;

  /* Achromatic on purpose. Every colour a visitor sees comes out of a
     photograph — the reference's strongest move and the one worth taking. */
  --bg:      #FFFFFF;
  --fg:      #0A0A0A;
  --dim:     #6E6E6E;   /* 5.10:1 on white · 7.04:1 on #0A0A0A — recomputed 2026-08-12 */
  --faint:   #8A8A8A;   /* 3.45:1 — RULES AND DECORATION ONLY. Below the 4.5:1 floor in
                           both themes, so no text rule may name it. Five did, and an
                           audit counted 616 failing nodes on 2026-08-12. */
  --hair:    rgba(10,10,10,.16);
  --hair-2:  rgba(10,10,10,.08);
  --onfilm:  #FFFFFF;   /* text over a photographic banner, both themes */
  --film:    .62;       /* the film a banner is printed through */

  /* One family. The reference uses Helvetica Neue LT Pro for every string;
     this uses the same genre from the system, and Thai falls through to a
     Thai face because no Latin grotesque contains Thai glyphs. */
  --f: "Helvetica Neue", Helvetica, "Sukhumvit Set", "Noto Sans Thai",
       "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI",
       Arial, sans-serif;

  --t-10:10px; --t-11:11px; --t-13:13px; --t-15:15px;
  --t-19:19px; --t-28:28px; --t-44:44px; --t-64:64px;

  --s1:8px; --s2:16px; --s3:28px; --s4:48px; --s5:80px; --s6:132px; --s7:200px;
  --col: 1180px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0A0A0A; --fg:#F2F2F2; --dim:#9A9A9A; --faint:#6E6E6E;
    --hair:rgba(255,255,255,.18); --hair-2:rgba(255,255,255,.09);
    --film:.68;
  }
}
:root[data-theme="dark"]{
  --bg:#0A0A0A; --fg:#F2F2F2; --dim:#9A9A9A; --faint:#6E6E6E;
  --hair:rgba(255,255,255,.18); --hair-2:rgba(255,255,255,.09);
  --film:.68;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f); font-size:var(--t-15); line-height:1.85;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; line-height:1.15; }

/* Latin is the only script that may be tracked or uppercased. Thai loses its
   vowel marks to letter-spacing and has no case at all.

   `.lat` is for strings that are Latin in BOTH languages — the wordmark, the
   houses, the bottles, `50 ml · EDP`.
   `.ui` is for a label that SWAPS: it reads as plain Thai on the Thai page and
   only takes the tracked-caps treatment once the page is in English. The pass
   before this had the whole interface — nav, kickers, buttons, every field
   label — sitting in English on a Thai page. */
.lat{ letter-spacing:.22em; text-transform:uppercase; font-weight:500; }
.ui{ font-weight:500; }
html[lang="en"] .ui{ letter-spacing:.22em; text-transform:uppercase; }
.wrap{ max-width:var(--col); margin:0 auto; padding:0 var(--s4); }

/* ── masthead ──────────────────────────────────────────────
   The reference puts a black promotional strip above everything, then the
   logotype centred with the nav under it. The strip carries the ฿150 trial,
   so the price is on screen at 0px instead of the 1224px a customer review
   measured on the first edition. */
.promo{ background:#0A0A0A; color:#FFF; text-align:center;
  font-size:var(--t-11); line-height:1.6; padding:11px var(--s3); }
.promo a{ text-decoration:underline; text-underline-offset:3px; }
.head{ position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--hair-2); }
.head-1{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:var(--s2); padding:var(--s3) var(--s4) var(--s2); }
.mark{ text-align:center; line-height:1; }
.mark b{ font-size:var(--t-28); font-weight:400; display:block; }
.mark span{ font-size:var(--t-10); color:var(--dim); display:block; margin-top:7px; }
.tools{ display:flex; gap:var(--s2); align-items:center; font-size:var(--t-10); }
.tools.right{ justify-content:flex-end; }
.tools button{ background:none; border:0; padding:0; cursor:pointer;
  color:var(--dim); font:inherit; font-size:var(--t-10); letter-spacing:.22em;
  text-transform:uppercase; }
.tools button[aria-pressed="true"]{ color:var(--fg); }
.tools button:hover{ color:var(--fg); }
.nav{ display:flex; justify-content:center; gap:var(--s4);
  padding:0 var(--s4) var(--s3); font-size:var(--t-11); }
.nav a{ text-decoration:none; color:var(--dim); }
.nav a:hover{ color:var(--fg); }

/* ── family 1 · the banner ─────────────────────────────────
   ONE landscape photograph, edge to edge, printed through a film. Four of
   them, four heights, and nothing else on the page is this shape. */
.banner{ position:relative; overflow:hidden; background:#0A0A0A;
  /* the identity sits on the banner and the masthead is sticky: without this
     an anchor lands the banner's top edge underneath it */
  scroll-margin-top:150px; }
.banner > img{ width:100%; height:var(--bh,420px); object-fit:cover;
  filter:brightness(var(--film)) saturate(.6) contrast(1.06);
  transform:scale(1.001);
  transition:transform 2.2s cubic-bezier(.2,.8,.2,1); }
.banner:hover > img{ transform:scale(1.03); }
.over{ position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  text-align:center; padding:var(--s4); pointer-events:none;
  /* an ellipse behind the words, not a sheet over the picture — a flat wash
     over the whole image read as murk. The vertical radius is 74% because a
     short banner otherwise puts its eyebrow outside the deep part, measured
     at 4.38:1 when it was 60%. */
  background:radial-gradient(58% 86% at 50% 50%,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.70) 46%, rgba(0,0,0,.30) 70%, rgba(0,0,0,0) 84%); }
.over > div{ pointer-events:auto; max-width:46ch; }
.over, .over a{ color:var(--onfilm); }
.eyebrow{ font-size:var(--t-10); margin:0 0 var(--s3); }
.over h1{ font-size:var(--t-64); }
.over h2{ font-size:var(--t-44); }
.over .sub{ margin:var(--s3) 0 0; font-size:var(--t-15); }
/* the reference's only call to action: small caps, underlined, no button */
.ghost{ display:inline-block; margin-top:var(--s3); font-size:var(--t-10);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:5px; }
/* ── the 10px link on a photograph, and why it gets a plate ────────────────────
   An audit on 2026-08-12 swept all 160 strings that sit on a banner, in both
   themes and both languages, against the BRIGHTEST pixel under each one: 28 of
   them under 4.5:1, worst 3.69:1 on "Kilian Paris's page ↗". The headline never
   failed — it is 44px, needs only 3:1, and sits in the deepest part of the
   ellipse. What failed was the smallest string, sitting lowest, over whichever
   part of the photograph happens to be bright.
   Growing the ellipse helps but cannot PROVE anything: it is tuned against the
   ten photographs that exist today, and the eleventh will be brighter. A plate
   removes the photograph from the question — 62% black over even a pure white
   pixel composites to #616161, which is 6.19:1 under white text. Measured floor,
   not a tuned one. */
.banner .ghost, .shelf-links a{ background:rgba(0,0,0,.62); padding:6px 12px;
  border-radius:2px; }
.banner .ghost{ padding-bottom:7px; }
.ghost:hover{ opacity:.6; }
/* the shelf is three LINKS under the opening headline. It was three more
   photographs, which is how the page ended up entirely columns. */
.shelf-links{ margin:var(--s4) 0 0; font-size:var(--t-11); }
.shelf-links a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4);
  padding-bottom:4px; }
.shelf-links a:hover{ border-bottom-color:#FFF; }

/* ── family 2 · the tiles ──────────────────────────────────
   The materials as SQUARES on the page ground. No film, no scrim, caption in
   ground-coloured type underneath — the opposite treatment to a banner in every
   respect, which is the point. This is the reference's product row.

   A tile is a photograph of a thing, and that is the whole claim it makes: it
   is not a formula and not an ingredient list. What the page SAYS about that is
   nothing at all — the shop's own line is that these are set out beside the
   bottle to be smelled, and the rest belongs in the footer disclosure. */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1); }
.tiles figure{ margin:0; min-width:0; overflow:hidden; }
/* `height` is load-bearing: the tags carry width="760" height="760" for G3.3 and
   for CLS, and that attribute height beats `aspect-ratio` unless CSS sets one —
   the tiles once measured 104x760, a portrait sliver produced by the fix for
   portrait slivers. */
.tiles img{ width:100%; height:104px; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.tiles figure:hover img{ transform:scale(1.05); }
.tiles figcaption{ margin-top:6px; margin-bottom:var(--s2); font-size:var(--t-10);
  color:var(--dim); line-height:1.4; overflow-wrap:anywhere; }
html[lang="en"] .tiles figcaption{ letter-spacing:.08em; text-transform:uppercase; }

/* ── the shelf — all three bottles in ONE section ──────────
   They used to be three chapters a scroll apart, which meant the three could
   never be compared. Side by side, the differences that matter — what the shop
   has, what it would have to order, what each one costs to find out — read in
   one glance. */
.shelf{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);
  margin-top:var(--s5); }
/* `> img` stopped matching the moment the card image was wrapped in a link, and the
   1900x700 banners went back to rendering as tall portraits — the same failure as the
   shape pass, reintroduced by adding an anchor. Match both shapes of the card. */
.bottle > img, .bottle > a > img{ width:100%; height:190px; object-fit:cover;
  margin-bottom:var(--s3); filter:saturate(.85) contrast(1.03);
  transition:filter .5s ease; }
.bottle > a:hover > img{ filter:saturate(1) contrast(1.03); }
.brand{ margin:0; font-size:var(--t-10); color:var(--dim); }
.bottle h3{ font-size:var(--t-28); margin:var(--s1) 0 var(--s3); }
/* a definition list, because every row of it is literally a fact with a label —
   and every one is either the shop's own or a link to whoever owns it */
.facts{ margin:0 0 var(--s3); display:grid; grid-template-columns:auto 1fr;
  gap:6px var(--s2); font-size:var(--t-13); border-top:1px solid var(--hair-2);
  padding-top:var(--s2); }
.facts dt{ font-size:var(--t-10); color:var(--dim); align-self:center; }
.facts dd{ margin:0; color:var(--fg); }
/* top / heart / base — the house's own three, and the tiles under each one are
   the materials of that layer. The label used to read `วางให้ดมข้างขวด`, which
   named a shop gesture and not the thing itself. */
/* This is a LABEL, and it has to outrank every note under it. It was --faint,
   which this file's own token comment reserves for "rules and decoration only,
   never body text" — 3.54:1, below the 4.5:1 floor, on the three words that tell
   you which layer of the scent you are looking at. Tracking does the ranking that
   size cannot: everything in this block is 10px, so the label wins on weight,
   colour and letter-spacing instead. */
.mats-h{ margin:var(--s3) 0 var(--s1); font-size:var(--t-10); color:var(--fg);
  letter-spacing:.14em; }
.bottle .mats-h:first-of-type{ margin-top:var(--s4);
  border-top:1px solid var(--hair-2); padding-top:var(--s3); }

/* ── the contrast floor, and why --faint is not on this page any more ──────────
   A tier-auditor run on 2026-08-12 walked 4,207 text nodes in a real browser and
   found 616 of them at 3.45:1 light / 3.88:1 dark — every one painted --faint,
   which the token block above already reserves for "rules and decoration only,
   never body text". `dt.ui` reading ขนาด is body text. So is a footer column head.
   --dim measures 5.10:1 light and 7.04:1 dark, both clear of the 4.5:1 floor, and
   swapping the five rules cleared all 616 at once.
   THE COMMENT ON THE TOKEN WAS ALSO WRONG: it claimed 3.54:1, the real figure is
   3.45:1. A number nobody recomputes is a number that drifts. */

/* ── ground sections ───────────────────────────────────────
   banner → ground → banner → ground. A ground section is nearly empty on
   purpose: it is the pause that makes the next banner land. */
.pad{ padding:var(--s7) 0; scroll-margin-top:150px; }
.pad-b{ padding:var(--s6) 0 var(--s7); }
.pad-t{ padding:var(--s5) 0 var(--s7); scroll-margin-top:150px; }
.center{ text-align:center; }
.kicker{ font-size:var(--t-10); color:var(--dim); margin:0 0 var(--s3); }
h2.head-2{ font-size:var(--t-28); max-width:26ch; margin:0 auto; }
.lede{ margin:var(--s3) auto 0; max-width:52ch; color:var(--dim); font-size:var(--t-15); }
/* a row of actions: the button carries a top margin of its own, which pushed the
   ghost link off the button's baseline the moment the two sat side by side */
.links{ display:flex; gap:var(--s4); justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:var(--s6); scroll-margin-top:150px; }
.links .ghost, .links .cta{ margin-top:0; }

/* ── the offer ─────────────────────────────────────────────
   Kept from the first edition because it is a finding, not a style: a customer
   read found the price three scrolls down. */
.offer{ max-width:640px; margin:var(--s5) auto 0; text-align:left;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.offer-h{ display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s3); padding:var(--s3) 0 var(--s2); }
.offer-h b{ font-weight:400; font-size:var(--t-19); }
.offer-h span{ font-size:var(--t-28); }
.offer ul{ margin:0; padding:0 0 var(--s3); list-style:none; }
.offer li{ display:grid; grid-template-columns:14px 1fr; gap:var(--s2);
  font-size:var(--t-13); color:var(--dim); padding:5px 0; }
.offer li::before{ content:"—"; color:var(--dim); }
.cta{ display:inline-block; margin:var(--s4) 0 0; font-size:var(--t-10);
  text-decoration:none; background:var(--fg); color:var(--bg); padding:16px 34px; }
.cta:hover{ opacity:.78; }

/* ── choosing ──────────────────────────────────────────────*/
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5);
  margin-top:var(--s5); text-align:left; }
.step h3{ font-size:var(--t-19); margin:0 0 var(--s2); }
.step p{ margin:0; font-size:var(--t-13); color:var(--dim); }
.step .n{ display:block; font-size:var(--t-10); color:var(--dim);
  margin-bottom:var(--s2); letter-spacing:.22em; }

/* ── footer ────────────────────────────────────────────────*/
.foot{ border-top:1px solid var(--hair-2); padding:var(--s5) 0 var(--s6);
  font-size:var(--t-11); color:var(--dim); line-height:1.9; }
.foot-in{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s5); }
.foot p{ margin:0; max-width:70ch; }
.foot .col span{ display:block; }
.foot a{ text-decoration:none; border-bottom:1px solid var(--hair); }
.foot a:hover{ color:var(--fg); }

::selection{ background:var(--fg); color:var(--bg); }
:where(a,button):focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* Text arrives rather than appears. Gated on `html.js`, which the pre-paint
   script sets: an element that starts at opacity 0 and waits for an observer is
   an element that is GONE if the script never runs. */
.js .up{ opacity:0; transform:translateY(14px); }
.js .up.in{ opacity:1; transform:none;
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .js .up{ opacity:1; transform:none; }
}

/* ── narrower ──────────────────────────────────────────────
   The shelf stops being three columns and becomes three stacked bottles, and
   the tile grid widens so the squares do not shrink with the column. */
@media (max-width:1080px){
  :root{ --s7:150px; --s6:104px; --s5:64px; --s4:32px; --t-64:48px; --t-44:34px; }
  .shelf{ grid-template-columns:1fr; gap:var(--s6); }
  .bottle > img{ height:240px; }
  .tiles{ grid-template-columns:repeat(6,1fr); }
  .tiles img{ height:120px; }
  .steps{ grid-template-columns:1fr; gap:var(--s4); }
  .foot-in{ grid-template-columns:1fr; gap:var(--s4); }
}
@media (max-width:620px){
  :root{ --s7:104px; --s6:80px; --t-64:36px; --t-44:28px; --t-28:22px; --s4:22px; }
  /* Stacking the masthead into three rows made it 200px of sticky chrome on an
     844px phone — a quarter of the viewport. The three items are 10px, 22px and
     10px; they fit on one row at 360px with room to spare. */
  .head-1{ padding:var(--s2) var(--s4) var(--s1); gap:var(--s1); }
  .mark span{ margin-top:5px; }
  .nav{ gap:var(--s3); flex-wrap:wrap; padding-bottom:var(--s2); }
  .banner, .links, .pad, .pad-t{ scroll-margin-top:130px; }
  .tiles{ grid-template-columns:repeat(3,1fr); }
  .tiles img{ height:96px; }
  .offer-h{ flex-direction:column; gap:0; }
}

/* ═══ pages beyond the home page ═══════════════════════════
   Added when the theme went from one hand-written page to five templates
   generated from `data/shop.json`. Everything above is unchanged. */

/* the masthead's language switch is two links now, not two buttons: with th and
   en at their own URLs the switch is navigation, and a button that navigates is
   a button lying about what it is */
.tools a{ color:var(--dim); text-decoration:none; font-size:var(--t-10); }
html[lang="en"] .tools a{ letter-spacing:.22em; text-transform:uppercase; }
.tools a.on{ color:var(--fg); }
.tools a:hover{ color:var(--fg); }
.mark a{ text-decoration:none; display:block; }

/* a banner headline that is not the opening one. Product names go here too: at 64px
   "Angels' Share On the Rocks" wrapped to three lines, pushed the maker link past the
   bottom of a 420px band, and `overflow:hidden` clipped it away entirely. */
.over h1.mid{ font-size:var(--t-44); }

/* the shelf holds three on the home page and ten on the collection */
/* ten cards whose note lists are different lengths: without `align-items:start` a
   grid row is as tall as its tallest card and the short ones leave a hole */
.grid10{ grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--s4);
  align-items:start; }
.bottle h3 a{ text-decoration:none; }
.bottle h3 a:hover{ opacity:.6; }
.bottle > a{ display:block; }
/* A note with no photograph is a CAPTION THAT LOST ITS PICTURE, not a heading.
   It used to be 13px against a 10px group label, so `วานิลลา` — the one material
   we could not photograph — was the largest, loudest thing in the pyramid and the
   label organising it was the smallest and faintest. Reported by the operator on
   2026-08-12 with the one question the layout deserved: why is that big, and why
   has it no picture? It now matches `.tiles figcaption` exactly, and `.no-shot`
   answers the second half in words. */
.names{ margin:0 0 var(--s2); font-size:var(--t-10); color:var(--dim); line-height:1.5; }
.no-shot{ color:var(--dim); }
.more{ margin:var(--s5) 0 0; text-align:center; }
.more .ghost{ margin-top:0; }

/* one bottle, on its own page */
.one{ max-width:760px; margin:0 auto; }
.facts.wide{ grid-template-columns:120px 1fr; font-size:var(--t-15);
  border-top:1px solid var(--hair); padding-top:var(--s3); margin-bottom:var(--s4); }
/* square on the product page, whatever the column width — `height:auto` is what
   lets `aspect-ratio` beat the width/height attributes the tags carry for G3.3 */
.one .tiles{ grid-template-columns:repeat(4,1fr); }
.one .tiles img{ height:auto; aspect-ratio:1; }
/* where the note list came from — G5.7 wants the source reachable, not implied */
.src{ margin:var(--s4) 0 0; font-size:var(--t-10); }
.src a{ color:var(--dim); text-decoration:none; border-bottom:1px solid var(--hair); }
.src a:hover{ color:var(--fg); }
.one-links{ margin-top:var(--s4); justify-content:flex-start; }

/* the comparison table on the guide */
.cmp{ width:100%; border-collapse:collapse; margin-top:var(--s4); font-size:var(--t-13); }
.cmp th, .cmp td{ text-align:left; padding:var(--s2) var(--s2) var(--s2) 0;
  border-bottom:1px solid var(--hair-2); }
.cmp th{ font-size:var(--t-10); color:var(--dim); }
.cmp td a{ text-decoration:none; border-bottom:1px solid var(--hair); }
.cmp td a:hover{ color:var(--fg); }

/* contact */
.contact{ display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:start;
  max-width:760px; margin:var(--s5) auto 0; text-align:left; }
.qr-box{ text-align:center; }
.qr{ width:220px; height:220px; border:1px solid var(--hair); }
.qr-box p{ margin:var(--s2) 0 0; font-size:var(--t-10); color:var(--dim); }
/* The QR became REAL on 2026-08-12 and points at the studio's own OA, so this line is
   load-bearing: it is the only thing between a scan and someone believing they can buy
   perfume here. Wider than the plate, and it wraps rather than sitting on one line. */
.qr-note{ max-width:34ch; margin-left:auto; margin-right:auto; line-height:1.6; }
.qr-note b{ color:var(--fg); font-weight:600; }
body.short main{ min-height:52vh; }

@media (max-width:1080px){
  .grid10{ grid-template-columns:repeat(2,1fr); }
  .one .tiles{ grid-template-columns:repeat(4,1fr); }
  .contact{ grid-template-columns:1fr; gap:var(--s4); justify-items:center; text-align:center; }
}
@media (max-width:620px){
  .grid10{ grid-template-columns:1fr; }
  .one .tiles{ grid-template-columns:repeat(3,1fr); }
  .facts.wide{ grid-template-columns:100px 1fr; font-size:var(--t-13); }
  .cmp{ font-size:var(--t-11); }
}

/* ── the footer sitemap ────────────────────────────────────
   Added because the five page types were all reachable and only three were ever
   NAMED: the header carried three links, home hid behind the wordmark, and no page
   listed the ten bottles. A visitor could not see the shape of the site from
   anywhere in it — which is what "I still don't see five pages" meant. */
.foot-nav{ display:grid; grid-template-columns:2fr 1fr; gap:var(--s5);
  padding-bottom:var(--s5); margin-bottom:var(--s4);
  border-bottom:1px solid var(--hair-2); }
.foot-nav > div > p{ margin:0 0 var(--s2); font-size:var(--t-10); color:var(--dim); }
.foot-nav ul{ list-style:none; margin:0; padding:0;
  columns:2; column-gap:var(--s4); }
.foot-nav > div + div ul{ columns:1; }
.foot-nav li{ break-inside:avoid; }
.foot-nav a{ display:block; padding:3px 0; font-size:var(--t-13); color:var(--dim);
  text-decoration:none; border:0; }
.foot-nav a:hover{ color:var(--fg); }
/* the page you are on, named in the header */
.nav a[aria-current="page"]{ color:var(--fg); border-bottom:1px solid currentColor;
  padding-bottom:3px; }
@media (max-width:620px){
  .foot-nav{ grid-template-columns:1fr; gap:var(--s4); }
  .foot-nav ul{ columns:2; }
}