/* KIAM 咸 — style.css
   Tokens and rules: DESIGN.md (this folder) on top of ../../DESIGN-SYSTEM/DESIGN.md.
   One file, no build. Order: fonts → tokens → base → layout → components → pages → phone. */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: "Anybody";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("../fonts/anybody-roman.woff2") format("woff2");
}
@font-face {
  font-family: "Anybody";
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url("../fonts/anybody-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-roman.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
}
/* Five glyphs only: 咸 酸 甜 汽 水 */
@font-face {
  font-family: "Kiam SC";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/notosc-subset.woff2") format("woff2");
  unicode-range: U+54B8, U+9178, U+751C, U+6C7D, U+6C34;
}

/* ---------- Tokens ---------- */
:root {
  --salt: #efefea;
  --plum: #3d1a1b;
  --sea: #18606e;
  --sea-deep: #134c57;
  --stone: #5e5853;

  --calamansi: #d8d54f;
  --grapefruit: #f08a80;
  --pineapple: #f2c24b;
  --roselle: #a81b36;
  --watermelon: #ee5a73;

  /* per-surface set — components only ever read these */
  --bg: var(--salt);
  --ink: var(--plum);
  --ink-2: var(--stone);
  --link: var(--sea);
  --focus: var(--sea);
  --rule: var(--plum);
  --paper: var(--salt);

  --display: "Anybody", "Arial Narrow", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
  --sc: "Kiam SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --gutter: max(clamp(1rem, 4vw, 4rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --max: 1280px;
  --section: clamp(64px, 9vw, 128px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.5;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(61,26,27,.12); }
[id] { scroll-margin-top: var(--s5); }
a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--plum); color: var(--salt); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 750; line-height: 1; }
p { margin: 0 0 1em; max-width: 66ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }
small, .small { font-size: 1rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }
button { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--plum); color: var(--salt); padding: 10px 14px;
  font-family: var(--display); font-weight: 600; text-decoration: none; z-index: 20;
}
.skip:focus { top: var(--s3); }

/* ---------- Surfaces ---------- */
.surface-plum { --bg: var(--plum); --ink: var(--salt); --ink-2: #c9b9b6; --link: var(--salt); --focus: var(--salt); --rule: rgba(239,239,234,.4); --paper: var(--plum); background: var(--bg); color: var(--ink); }
.band { background: var(--bg); color: var(--ink); }
.band--calamansi  { --bg: var(--calamansi);  --ink: var(--plum); --ink-2: #4c3a2c; --link: var(--sea);  --focus: var(--plum); --rule: rgba(61,26,27,.5); }
.band--grapefruit { --bg: var(--grapefruit); --ink: var(--plum); --ink-2: #57302c; --link: var(--plum); --focus: var(--plum); --rule: rgba(61,26,27,.5); }
.band--pineapple  { --bg: var(--pineapple);  --ink: var(--plum); --ink-2: #543a24; --link: var(--plum); --focus: var(--plum); --rule: rgba(61,26,27,.5); }
.band--roselle    { --bg: var(--roselle);    --ink: var(--salt); --ink-2: #f3d2d6; --link: var(--salt); --focus: var(--salt); --rule: rgba(239,239,234,.5); }
.band--watermelon { --bg: var(--watermelon); --ink: var(--plum); --ink-2: #4a2529; --link: var(--plum); --focus: var(--plum); --rule: rgba(61,26,27,.5); }

/* ---------- Type roles ---------- */
.wordmark {
  font-family: var(--display); font-weight: 850; font-stretch: 150%;
  letter-spacing: -.01em; line-height: .9; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .35em;
}
.wordmark .sc { font-family: var(--sc); font-weight: 900; font-size: .78em; line-height: 1; transform: translateY(-.04em); }
.h1 { font-size: clamp(2.5rem, 5.3vw, 4.75rem); font-stretch: 135%; font-weight: 800; letter-spacing: -.02em; line-height: .97; text-wrap: balance; }
.h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); font-stretch: 125%; font-weight: 750; letter-spacing: -.015em; line-height: 1; text-wrap: balance; }
.h3 { font-size: 1.375rem; font-stretch: 110%; font-weight: 650; line-height: 1.15; }
.lede { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.4; max-width: 30em; }
.ui { font-family: var(--display); font-stretch: 100%; font-weight: 550; font-size: .875rem; line-height: 1.2; letter-spacing: .005em; }
.figure { font-family: var(--display); font-stretch: 110%; font-weight: 600; font-variant-numeric: tabular-nums; }
.quote { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.25; font-optical-sizing: auto; font-variation-settings: "opsz" 72; text-wrap: pretty; max-width: 22em; }
.note { color: var(--ink-2); font-size: 1rem; }
.note em { font-style: italic; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: var(--s6); }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.rule-top { border-top: 1px solid var(--rule); }

/* ---------- Header / nav ---------- */
.top { padding-block: var(--s5); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.top .wordmark { font-size: 1.5rem; padding: 10px 0; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.4vw, 36px); }
.nav a { font-family: var(--display); font-weight: 550; font-size: 1rem; text-decoration: none; color: var(--ink); padding: 10px 2px; display: inline-block; }
.nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--sea); }
.nav-toggle { display: none; background: none; border: 1px solid var(--rule); padding: 10px 16px; min-height: 44px; font-family: var(--display); font-weight: 600; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--sea); color: var(--salt);
  font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s var(--ease), transform .1s var(--ease);
}
.btn:hover { background: var(--sea-deep); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.surface-plum .btn { background: var(--salt); color: var(--plum); }
.surface-plum .btn:hover { background: #fff; }
.link-quiet { color: var(--ink); }

/* ---------- The bottle ---------- */
.bottle { --fill: var(--calamansi); width: 100%; height: auto; overflow: visible; font-family: var(--display); }
.bottle .glass { fill: rgba(255,255,255,.13); stroke: var(--plum); stroke-width: 1.5; }
.bottle .cap { fill: var(--plum); }
.bottle .liquid { fill: var(--fill); }
.bottle .shine { fill: #fff; opacity: .16; }
.bottle .label { fill: var(--salt); stroke: var(--plum); stroke-width: 1; }
.bottle .label-rule { stroke: var(--plum); stroke-width: .75; }
.bottle text { fill: var(--plum); }
.bottle .t-mark { font-weight: 850; font-stretch: 150%; font-size: 12px; letter-spacing: -.01em; }
.bottle .t-sc { font-family: var(--sc); font-weight: 900; font-size: 9px; }
.bottle .t-name { font-weight: 720; font-stretch: 112%; font-size: 9.6px; letter-spacing: -.005em; }
.bottle .t-ml { font-weight: 550; font-stretch: 100%; font-size: 7.5px; letter-spacing: .02em; }
.bottle .level { transform-box: fill-box; transform-origin: bottom; }

/* the one load moment: liquid rises in the five hero bottles */
.lineup .bottle .level { animation: fill 1.1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .lineup .bottle .level { animation: none; } }

/* ---------- Home: hero ---------- */
.hero { padding-block: clamp(24px, 4vw, 56px) 0; }
.hero-title { margin-bottom: clamp(32px, 4vw, 56px); }
.hero-body { align-items: end; }
.hero-aside { grid-column: 1 / 5; display: grid; gap: var(--s5); align-content: end; padding-bottom: 52px; }
.hero-aside p { max-width: 22em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: center; }
.lineup { grid-column: 5 / 13; }
.lineup-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(12px, 2.4vw, 40px); align-items: end; padding-inline: clamp(0px, 3vw, 48px); }
.lineup-item { text-decoration: none; color: var(--ink); display: grid; gap: 0; }
.lineup-item .bottle { width: min(100%, 170px); margin-inline: auto; transition: transform .25s var(--ease); }
.lineup-item:hover .bottle, .lineup-item:focus-visible .bottle { transform: translateY(-6px); }
.lineup-item:focus-visible { outline-offset: 6px; }
.shelf { border-top: 1px solid var(--rule); margin-top: -1px; }
.lineup-names { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(12px, 2.4vw, 40px); padding: var(--s3) clamp(0px, 3vw, 48px) 0; }
.lineup-names li { list-style: none; display: grid; grid-template-rows: 2.4em auto; font-family: var(--display); font-weight: 600; font-size: .95rem; line-height: 1.2; text-align: center; }
.lineup-names li span { display: block; color: var(--ink-2); font-weight: 500; font-size: .85rem; margin-top: 2px; }
.lineup-names li .season { color: var(--sea); }
.lineup ul { margin: 0; padding: 0; }

/* ---------- Home: sections ---------- */
.two { align-items: start; }
.two .media { grid-column: 1 / 6; }
.two .copy { grid-column: 7 / 13; }
.two.two--flip .media { grid-column: 8 / 13; grid-row: 1; }
.two.two--flip .copy { grid-column: 1 / 7; grid-row: 1; }
.copy .h2 { margin-bottom: var(--s5); }
.copy .h2 + p { margin-top: 0; }

/* nutrition-panel table: a real print device, used because the brand quotes numbers */
.panel { border-top: 6px solid var(--ink); border-bottom: 2px solid var(--ink); width: 100%; border-collapse: collapse; font-family: var(--display); font-stretch: 100%; }
.panel caption { text-align: left; font-family: var(--display); font-weight: 700; font-stretch: 120%; font-size: 1.25rem; padding: var(--s3) 0 var(--s2); }
.panel th, .panel td { text-align: left; padding: 10px 0; border-top: 1px solid var(--rule); font-weight: 500; font-size: 1rem; vertical-align: baseline; }
.panel td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.panel td .vs { display: block; font-weight: 450; font-size: .85rem; color: var(--ink-2); }
.panel tr.total th, .panel tr.total td { border-top: 2px solid var(--ink); font-weight: 700; }

.serve { position: relative; }
.serve .media { grid-column: 1 / 9; }
.serve .copy { grid-column: 9 / 13; align-self: end; }
.serve ol { padding-left: 1.2em; margin: var(--s5) 0 0; }
.serve li { margin-bottom: var(--s3); }
.serve li::marker { font-family: var(--display); font-weight: 650; color: var(--sea); }

/* stockist teaser */
.buy-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.buy-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.buy-list .name { font-family: var(--display); font-weight: 650; font-size: 1.1rem; }
.buy-list .area { color: var(--ink-2); font-style: italic; }
.buy-list .stock { color: var(--ink-2); font-size: 1rem; }

/* reviews teaser + page */
.moments { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.moment { margin: 0; }
.moment figcaption { margin-top: var(--s3); color: var(--ink-2); font-size: 1rem; }
.moment figcaption b { font-family: var(--display); font-weight: 600; color: var(--ink); }
.said { margin: 0; }
.said p { margin: 0; }
.said footer { margin-top: var(--s4); font-family: var(--display); font-weight: 600; font-size: 1rem; }
.said footer span { display: block; font-family: var(--text); font-weight: 400; font-style: italic; color: var(--ink-2); }

/* home teaser placements */
.teaser .m1 { grid-column: 1 / 6; }
.teaser .m2 { grid-column: 6 / 9; grid-row: 1; }
.teaser .q1 { grid-column: 9 / 13; grid-row: 1; align-self: end; }

/* reviews page placements: every child placed on both axes */
.wall .m-dinner  { grid-column: 1 / 8;  grid-row: 1; }
.wall .q-a       { grid-column: 9 / 13; grid-row: 1; align-self: end; }
.wall .m-pink    { grid-column: 1 / 4;  grid-row: 2; }
.wall .q-b       { grid-column: 4 / 8;  grid-row: 2; align-self: center; }
.wall .m-hands   { grid-column: 8 / 13; grid-row: 2; }
.wall .q-c       { grid-column: 1 / 5;  grid-row: 3; align-self: end; }
.wall .m-table   { grid-column: 5 / 13; grid-row: 3; }
.wall .m-market  { grid-column: 1 / 4;  grid-row: 4; }
.wall .m-laugh   { grid-column: 4 / 7;  grid-row: 4; }
.wall .q-d       { grid-column: 8 / 13; grid-row: 4; align-self: center; }
.wall .m-stairs  { grid-column: 1 / 8;  grid-row: 5; }
.wall .q-e       { grid-column: 8 / 13; grid-row: 5; align-self: end; }
.wall .m-toast   { grid-column: 1 / 6;  grid-row: 6; }
.wall .q-f       { grid-column: 6 / 9;  grid-row: 6; align-self: center; }
.wall .m-lunch   { grid-column: 9 / 13; grid-row: 6; }
.wall { row-gap: clamp(40px, 6vw, 96px); }

/* ---------- Sodas page ---------- */
.range-intro .h1 { grid-column: 1 / 10; }
.range-intro .lede { grid-column: 1 / 8; }
.soda { padding-block: clamp(48px, 7vw, 96px); scroll-margin-top: var(--s5); }
.soda .grid { align-items: center; }
.soda .s-bottle { grid-column: 1 / 4; }
.soda .s-bottle .bottle { width: min(100%, 220px); }
.soda .s-copy { grid-column: 4 / 9; }
.soda .s-photo { grid-column: 9 / 13; }
.soda.soda--flip .s-bottle { grid-column: 10 / 13; grid-row: 1; }
.soda.soda--flip .s-copy { grid-column: 5 / 10; grid-row: 1; }
.soda.soda--flip .s-photo { grid-column: 1 / 5; grid-row: 1; }
.soda .h2 { margin-bottom: var(--s4); }
.soda .season-tag { font-family: var(--display); font-weight: 600; font-size: .95rem; display: inline-block; border: 1px solid var(--rule); padding: 6px 12px; margin-bottom: var(--s4); }
.soda .facts { margin: var(--s5) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); font-size: 1rem; }
.soda .facts b { display: block; font-family: var(--display); font-weight: 650; font-size: 1.05rem; }
.soda .s-photo img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.taste { margin: var(--s5) 0 0; display: grid; gap: var(--s2); }
.taste-row { display: grid; grid-template-columns: 2.4em 4.2em auto; align-items: center; gap: var(--s3); }
.taste-row .sc { font-family: var(--sc); font-weight: 900; font-size: 1.25rem; line-height: 1; }
.taste-row .word { font-family: var(--display); font-weight: 600; font-size: .95rem; }
.taste-row .dots { display: flex; gap: 6px; }
.taste-row .dots i { width: 14px; height: 14px; border-radius: 999px; border: 1.5px solid var(--ink); display: block; }
.taste-row .dots i.on { background: var(--ink); }

/* six-pack builder */
.pack .h2 { margin-bottom: var(--s3); }
.pack-form { grid-column: 1 / 8; }
.pack-sum { grid-column: 9 / 13; align-self: start; position: sticky; top: var(--s5); }
.pack-rows { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.pack-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--s4); padding: 14px 0; border-bottom: 1px solid var(--rule); }
.pack-row .swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--rule); background: var(--fill); }
.pack-row .name { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.pack-row .name span { display: block; font-family: var(--text); font-weight: 400; font-style: italic; color: var(--ink-2); font-size: .95rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule); }
.stepper button { width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1; }
.stepper button:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper output { min-width: 2.2em; text-align: center; font-family: var(--display); font-weight: 650; font-variant-numeric: tabular-nums; }
.pack-total { font-family: var(--display); font-weight: 600; }
.pack-total .big { display: block; font-size: clamp(3rem, 6vw, 5rem); font-stretch: 125%; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pack-total .of { color: var(--ink-2); font-weight: 500; }
.pack-price { margin: var(--s4) 0 var(--s5); font-size: 1.1rem; }
.pack-price b { font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.pack-msg { color: var(--ink-2); font-size: 1rem; margin-top: var(--s3); min-height: 1.5em; }

/* ---------- Story page ---------- */
.story-head .h1 { grid-column: 1 / 11; }
.prose { grid-column: 2 / 9; }
.prose p { font-size: 1.2rem; line-height: 1.55; }
.prose .quote { margin: var(--s7) 0; padding-left: var(--s5); border-left: 3px solid var(--ink); }
.prose h2 { margin: var(--s8) 0 var(--s4); font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.aside-img { grid-column: 9 / 13; align-self: start; position: sticky; top: var(--s5); }
.aside-img figcaption { margin-top: var(--s3); color: var(--ink-2); font-size: .95rem; font-style: italic; }
.strip img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 9em 1fr; gap: var(--s5); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.timeline time { font-family: var(--display); font-weight: 650; font-variant-numeric: tabular-nums; }
.timeline p { max-width: 50ch; }

/* ---------- Stockists page ---------- */
.door { grid-column: 1 / 7; }
.door-facts { grid-column: 7 / 13; align-self: end; }
.door-facts dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); }
.door-facts dt { font-family: var(--display); font-weight: 600; }
.door-facts dd { margin: 0; }
.map-wrap { grid-column: 1 / 8; }
.map { width: 100%; height: auto; }
.map .land { fill: transparent; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.map .water { fill: none; stroke: var(--ink); stroke-width: .5; stroke-dasharray: 2 4; opacity: .5; }
.map .pin { cursor: pointer; }
.map .pin circle { fill: var(--sea); stroke: var(--bg); stroke-width: 2; transition: r .15s var(--ease); }
.map .pin .hit { fill: transparent; stroke: none; }
.map .pin text { font-family: var(--display); font-weight: 600; font-size: 9px; fill: var(--ink); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.map .pin.is-on circle:not(.hit), .map .pin:hover circle:not(.hit), .map .pin:focus-visible circle:not(.hit) { fill: var(--plum); r: 9; }
.map .pin:focus-visible { outline: none; }
.map .pin:focus-visible circle:not(.hit) { stroke: var(--sea); stroke-width: 3; }
.map .pin.pin--door circle:not(.hit) { fill: var(--plum); }
.map .pin.pin--door text { font-weight: 750; }
.map-note { font-size: .95rem; color: var(--ink-2); margin-top: var(--s3); }
.stockists { grid-column: 8 / 13; }
.stockists ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: s; }
.stockists li { border-bottom: 1px solid var(--rule); }
.stockists li { scroll-margin-top: var(--s5); }
.stockists .row { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding: 14px 8px; margin: 0 -8px; color: var(--ink); transition: background-color .15s var(--ease); }
.stockists li:hover .row, .stockists li.is-on .row { background: rgba(61,26,27,.07); }
.stockists li:target .row { background: rgba(24,96,110,.12); }
.stockists .name { grid-column: 1; grid-row: 1; font-family: var(--display); font-weight: 650; font-size: 1.1rem; }
.stockists .area { grid-column: 2; grid-row: 1; font-style: italic; color: var(--ink-2); text-align: right; }
.stockists .stock { grid-column: 1 / -1; grid-row: 2; color: var(--ink-2); font-size: 1rem; }

/* contact */
.contact-copy { grid-column: 1 / 6; }
.contact-form { grid-column: 7 / 13; }
.field { display: grid; gap: var(--s2); margin-bottom: var(--s5); }
.field label { font-family: var(--display); font-weight: 600; font-size: 1rem; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1.05rem; color: var(--ink); background: transparent;
  border: 1px solid var(--rule); padding: 12px 14px; width: 100%; min-height: 48px;
}
.field textarea { min-height: 9em; resize: vertical; }
.field .err { color: var(--ink); font-family: var(--display); font-weight: 600; font-size: .95rem; }
.field.is-invalid input, .field.is-invalid textarea { border-width: 2px; }
.form-done { border: 1px solid var(--rule); padding: var(--s5); }
.form-done p { max-width: none; }
.contact-list { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.contact-list li { display: grid; grid-template-columns: 7em 1fr; gap: var(--s4); padding: 10px 0; border-top: 1px solid var(--rule); }
.contact-list li:last-child { border-bottom: 1px solid var(--rule); }
.contact-list b { font-family: var(--display); font-weight: 600; }

/* ---------- Footer ---------- */
.foot { padding-block: var(--s8) var(--s6); }
.foot .grid { row-gap: var(--s7); }
.foot .f-brand { grid-column: 1 / 5; }
.foot .f-brand .wordmark { font-size: 2.25rem; }
.foot .f-brand p { margin-top: var(--s4); max-width: 22em; color: var(--ink-2); }
.foot .f-pages { grid-column: 5 / 7; }
.foot .f-talk { grid-column: 7 / 10; }
.foot h3 { font-size: 1rem; font-stretch: 100%; font-weight: 650; margin-bottom: var(--s3); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--ink); display: inline-block; padding: 3px 0; }
.foot .f-hours { grid-column: 10 / 13; }
.foot .f-legal { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: var(--s5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); font-family: var(--display); font-size: .875rem; color: var(--ink-2); }

/* ---------- Phone ---------- */
@media (max-width: 960px) {
  .hero-aside { grid-column: 1 / -1; padding-bottom: 0; }
  .lineup { grid-column: 1 / -1; }
  .two .media, .two .copy, .two.two--flip .media, .two.two--flip .copy { grid-column: 1 / -1; grid-row: auto; }
  .two.two--flip .media { grid-row: 1; }
  .serve .media, .serve .copy { grid-column: 1 / -1; }
  .teaser .m1 { grid-column: 1 / 8; }
  .teaser .m2 { grid-column: 8 / 13; grid-row: auto; }
  .teaser .q1 { grid-column: 1 / -1; grid-row: auto; }
  .soda .s-bottle, .soda.soda--flip .s-bottle { grid-column: 1 / 4; grid-row: auto; }
  .soda .s-copy, .soda.soda--flip .s-copy { grid-column: 4 / 13; grid-row: auto; }
  .soda .s-photo, .soda.soda--flip .s-photo { grid-column: 4 / 13; grid-row: auto; }
  .pack-form, .pack-sum { grid-column: 1 / -1; position: static; }
  .prose { grid-column: 1 / 12; }
  .aside-img { grid-column: 1 / 8; position: static; }
  .door, .door-facts { grid-column: 1 / -1; }
  .map-wrap, .stockists { grid-column: 1 / -1; }
  .contact-copy, .contact-form { grid-column: 1 / -1; }
  .foot .f-brand { grid-column: 1 / -1; }
  .foot .f-pages { grid-column: 1 / 5; }
  .foot .f-talk { grid-column: 5 / 9; }
  .foot .f-hours { grid-column: 9 / 13; }
  .wall > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .wall .q-a, .wall .q-b, .wall .q-c, .wall .q-d, .wall .q-e, .wall .q-f { padding-block: var(--s4); }
  .range-intro .h1, .range-intro .lede { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); z-index: 10; }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: var(--s3) var(--gutter); }
  .nav a { display: block; padding: 14px 0; font-size: 1.25rem; }
  .top { position: relative; }
  .lineup-row { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x proximity; gap: var(--s5); padding: 0 var(--gutter) var(--s3); margin-inline: calc(-1 * var(--gutter)); scrollbar-width: thin; scrollbar-color: var(--plum) transparent; }
  .lineup-item { flex: 0 0 46vw; scroll-snap-align: center; }
  .lineup-item .bottle { width: 100%; }
  .lineup-names { display: none; }
  .lineup-item .lineup-cap { display: grid; grid-template-rows: 2.4em auto; }
  .soda .s-bottle, .soda.soda--flip .s-bottle { grid-column: 1 / 5; }
  .soda .s-copy, .soda.soda--flip .s-copy { grid-column: 1 / -1; }
  .soda .s-photo, .soda.soda--flip .s-photo { grid-column: 5 / 13; grid-row: 1; }
  .soda .facts { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: var(--s1); }
  .foot .f-pages, .foot .f-talk, .foot .f-hours { grid-column: 1 / -1; }
  .buy-list li { grid-template-columns: 1fr; gap: 2px; }
  .contact-list li { grid-template-columns: 1fr; gap: 2px; }
  .door-facts dl { grid-template-columns: 1fr; }
  .stockists .row { grid-template-columns: 1fr; }
  .stockists .area { grid-column: 1; grid-row: 2; text-align: left; }
  .stockists .stock { grid-row: 3; }
  .taste-row { grid-template-columns: 2em 3.6em auto; }
}
.lineup-cap { display: none; text-align: center; font-family: var(--display); font-weight: 600; font-size: .95rem; margin-top: var(--s3); }
.lineup-cap span { display: block; color: var(--ink-2); font-weight: 500; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- Spacing utilities (only where a section needs one extra step) ---------- */
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-6 { margin-bottom: var(--s6); }
.mb-7 { margin-bottom: var(--s7); }

/* fill per soda — classes, not inline styles, so the CSP can stay without unsafe-inline */
.bottle--calamansi  { --fill: var(--calamansi); }
.bottle--grapefruit { --fill: var(--grapefruit); }
.bottle--pineapple  { --fill: var(--pineapple); }
.bottle--roselle    { --fill: var(--roselle); }
.bottle--watermelon { --fill: var(--watermelon); }