/* 蓝雅 Lamyai
   A quiet bedding house: natural-latex paper, plantation-green ink, Song-style titles, photographs
   with room around them. No glass, no ornament; one hairline does the dividing.
   Motion is small: things settle in once, buttons answer the finger. */

/* 标题字：霞鹜新致宋的子集，改名 Lamyai Song（IPA 字体许可，见 assets/fonts/LICENSE.txt） */
@font-face { font-family: "Lamyai Song"; src: url("../assets/fonts/lamyai-song.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #f4efe4;
  --bg-2: #ebe4d4;
  --well: #fbf8f1;
  --ink: #17342a;
  --ink-2: #4f6157;
  --line: rgba(23, 52, 42, 0.16);
  --ink-hi: #0e241c;

  --serif: "Lamyai Song", "Songti SC", "STSong", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", sans-serif;

  --fs-s: 14px;
  --fs-body: clamp(15px, 14px + 0.3vw, 17px);
  --fs-h3: clamp(18px, 16px + 0.4vw, 21px);
  --fs-h2: clamp(28px, 18px + 2.2vw, 46px);
  --fs-h1: clamp(36px, 22px + 3.4vw, 64px);

  --margin: clamp(20px, 4vw, 56px);
  --gap: clamp(12px, 1.8vw, 28px);
  --maxw: 1240px;
  --sec: clamp(64px, 9vw, 128px);
  --hd: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: calc(var(--hd) + 12px); }
html.menu-open { overflow: hidden; }
body {
  display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.7; letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
main { flex: 1 0 auto; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: var(--margin); top: -80px; z-index: 100; padding: 12px 16px; background: var(--ink); color: var(--bg); text-decoration: none; }
.skip:focus { top: 12px; }

.frame { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); }
.h1, .h2, .h3, .hero__title, .hero__sub, .range__name, .price-big .num { font-family: var(--serif); font-weight: 400; }
.h1 { font-size: var(--fs-h1); line-height: 1.2; letter-spacing: 0.04em; text-wrap: balance; }
.h2 { font-size: var(--fs-h2); line-height: 1.25; letter-spacing: 0.04em; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.4; letter-spacing: 0.02em; }
.nb { display: inline-block; }
.lead { font-size: clamp(16px, 15px + 0.4vw, 19px); color: var(--ink-2); max-width: 32em; text-wrap: pretty; }
.small { font-size: var(--fs-s); }
.muted, .note { color: var(--ink-2); }
.note { font-size: var(--fs-s); }
.center { text-align: center; }
.holes { display: none; }

/* a name, a dotted leader, a value */
.row { display: flex; align-items: baseline; }
.row > :first-child { display: flex; align-items: baseline; flex: 1 1 auto; white-space: nowrap; color: var(--ink-2); }
.row > :first-child::after { content: ""; flex: 1 1 16px; min-width: 16px; margin: 0 10px; border-bottom: 1px dotted currentColor; opacity: 0.6; transform: translateY(-0.35em); }
.row > :last-child { flex: 0 1 auto; text-align: right; text-wrap: balance; }
.rows { display: grid; gap: 10px; }
.rule { height: 0; border: 0; border-top: 1px solid var(--line); margin: 0; }

/* pictures: white studio backgrounds melt into a slightly lighter paper */
.well { position: relative; overflow: hidden; background: var(--well); }
.well img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 700ms var(--ease); }
.photo { position: relative; overflow: hidden; background: var(--bg-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.is-missing { position: relative; }
.is-missing::after { content: attr(data-missing); position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-size: var(--fs-s); color: var(--ink-2); background: var(--bg-2); }

/* ---------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px;
  border: 1px solid var(--ink); border-radius: 0; cursor: pointer; font-size: var(--fs-body); letter-spacing: 0.12em; text-decoration: none; text-align: center;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--line { background: transparent; color: var(--ink); }
.btn--block { display: flex; width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--ink:hover { background: var(--ink-hi); }
  .btn--line:hover { background: var(--ink); color: var(--bg); }
}
.tlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: var(--fs-body); text-decoration: underline; text-underline-offset: 0.35em; }
.tlink--go::after { content: "›"; margin-left: 6px; text-decoration: none; display: inline-block; }
.tlink--small { min-height: 36px; font-size: var(--fs-s); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.actions--center { justify-content: center; }

/* ---------------------------------------------------------------- header */
.hd { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 300ms ease; }
.hd.is-scrolled { border-bottom-color: var(--line); }
.hd__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--hd); }
.hd__brand { display: flex; align-items: center; min-height: 44px; flex: none; }
.hd__brand img { height: 36px; width: auto; }
.hd__nav { display: flex; gap: clamp(8px, 2vw, 28px); }
.hd__nav a { position: relative; display: inline-grid; place-items: center; min-width: 56px; min-height: 44px; color: var(--ink-2); font-size: 15px; letter-spacing: 0.2em; text-indent: 0.2em; text-decoration: none; transition: color 200ms ease; }
.hd__nav a::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 16px; height: 1px; margin-left: -8px; background: var(--ink); transform: scaleX(0); transition: transform 300ms var(--ease); }
.hd__nav a[aria-current] { color: var(--ink); }
.hd__nav a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .hd__nav a:hover { color: var(--ink); } }

/* phones: two lines that turn into a cross; the menu is a plain sheet of paper */
.hd__burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.hd__burger span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: var(--ink); transition: transform 300ms var(--ease); }
.hd__burger span:nth-child(1) { top: 18px; }
.hd__burger span:nth-child(2) { top: 25px; }
.menu-open .hd__burger span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-open .hd__burger span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.menu { position: fixed; inset: var(--hd) 0 0 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; padding: 24px var(--margin) calc(32px + env(safe-area-inset-bottom)); background: var(--bg); opacity: 0; transition: opacity 240ms ease; }
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__nav { display: grid; }
.menu__nav a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 30px; letter-spacing: 0.24em; text-decoration: none; color: var(--ink-2); }
.menu__nav a[aria-current] { color: var(--ink); }
.menu__wx { color: var(--ink-2); font-size: var(--fs-s); letter-spacing: 0.08em; }

/* the ending: one green block that every page closes with */
.ft { background: var(--ink); color: var(--bg); padding: clamp(40px, 6vw, 72px) 0 calc(24px + env(safe-area-inset-bottom)); }
.ft__grid { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 32px clamp(24px, 5vw, 72px); align-items: start; }
.ft__brand { display: grid; gap: 14px; justify-items: start; }
.ft__brand img { width: 150px; height: auto; }
.ft__brand p { font-family: var(--serif); letter-spacing: 0.14em; color: rgba(244, 239, 228, 0.78); }
.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.ft__nav a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgba(244, 239, 228, 0.16); color: var(--bg); text-decoration: none; letter-spacing: 0.2em; transition: opacity 200ms ease; }
.ft__wx { display: grid; gap: 12px; justify-items: start; }
.ft__wx p { color: rgba(244, 239, 228, 0.78); letter-spacing: 0.06em; }
.btn--cream { background: var(--bg); color: var(--ink); border-color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .btn--cream:hover { background: #fff; } .ft__nav a:hover { opacity: 0.7; } }
.ft__mark { margin-top: clamp(28px, 4vw, 48px); color: rgba(244, 239, 228, 0.66); font-size: 13px; letter-spacing: 0.06em; }
.ft__mark p { padding-top: 20px; border-top: 1px solid rgba(244, 239, 228, 0.16); }

/* ---------------------------------------------------------------- sections */
.sec { padding-block: var(--sec); }
.sec--tint { background: var(--bg-2); }
.sec__title { margin-bottom: clamp(28px, 4vw, 52px); }
.sec__head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.pagehead { padding-block: clamp(32px, 6vw, 80px) clamp(32px, 4vw, 56px); }
.pagehead .lead { margin-top: 14px; }

/* ---------------------------------------------------------------- home: the first screen */
.hero { padding-top: clamp(16px, 4vw, 48px); }
.hero__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero__text { display: grid; gap: clamp(16px, 2vw, 24px); justify-items: start; }
.hero__title { font-size: clamp(88px, 6vw + 56px, 160px); line-height: 1; letter-spacing: 0.12em; }
.hero__sub { font-size: clamp(18px, 1vw + 12px, 26px); letter-spacing: 0.16em; color: var(--ink); }
.hero__text .actions { margin-top: clamp(8px, 1.6vw, 20px); }
.hero__img { display: block; overflow: hidden; background: var(--bg-2); }
.hero__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hero__note { margin-top: 18px; color: var(--ink-2); font-size: 13px; letter-spacing: 0.1em; text-align: right; }

/* about: a long photograph, then four short lines, each with its own picture */
.about__head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.about__wide { margin-bottom: clamp(48px, 7vw, 104px); }
.about__wide .photo img { object-position: 50% 40%; }
.about__rows { display: grid; gap: clamp(44px, 7vw, 104px); }
.about__row { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 6vw, 96px); align-items: center; }
.about__row--flip { grid-template-columns: 5fr 7fr; }
.about__row--flip > :first-child { order: 2; }
.about__text { display: grid; gap: 12px; }
.about__text .h3 { font-family: var(--serif); font-size: clamp(24px, 18px + 1.2vw, 34px); letter-spacing: 0.06em; line-height: 1.3; }
.about__text p { color: var(--ink-2); max-width: 24em; }
.shop__more { margin-top: clamp(32px, 4vw, 56px); }

/* origin: one big photograph and two beside it, the same frame and the same label */
.origin { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: var(--gap); }
.origin figure { position: relative; margin: 0; min-height: 0; }
.origin .photo { height: 100%; }
.origin__main { grid-row: 1 / 3; }
.origin__main .photo { aspect-ratio: auto; min-height: 100%; }
.origin .tag { position: absolute; left: 12px; bottom: 12px; padding: 2px 12px; background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.8; letter-spacing: 0.08em; }
.origin__a .photo, .origin__b .photo { aspect-ratio: 3 / 2; }
.origin__b .photo img { object-position: 50% 40%; }

/* marks and reports */
.marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); max-width: 880px; }
.mark { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.mark__img { display: grid; place-items: center; aspect-ratio: 3 / 2; background: #fff; overflow: hidden; }
.mark__img img { width: 82%; height: auto; transition: transform 600ms var(--ease); }
.mark__no { padding-top: 8px; font-size: 15px; }
.mark__go { font-size: var(--fs-s); color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.35em; }
@media (hover: hover) and (pointer: fine) { .mark:hover .mark__img img { transform: scale(1.04); } }
.reports { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: clamp(24px, 3vw, 40px); }

/* ranges: four pictures, a name and a count under each */
.ranges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.range { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.range .well { aspect-ratio: 4 / 5; margin-bottom: 12px; }
.range__name { font-size: var(--fs-h3); letter-spacing: 0.08em; }
.range__count { font-size: var(--fs-s); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .range:hover .well img, .card a:hover .well img, .pick:hover .well img, .print:hover .photo img { transform: scale(1.04); } }

/* a band: one question, one action */
.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }

.prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.print .photo { aspect-ratio: 4 / 3; }
.print figcaption { padding-top: 12px; font-size: var(--fs-s); color: var(--ink-2); letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- products */
.jump { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.jump a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-2); font-size: 15px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.4em; }
.series { padding-bottom: var(--sec); }
.series__head { display: grid; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); padding-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); }
.series__who { font-size: var(--fs-s); color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) var(--gap); }
.card a { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; }
.card .well { aspect-ratio: 4 / 5; }
.card__body { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; flex: 1; }
.card__line { font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.card__price { margin-top: auto; padding-top: 8px; font-size: var(--fs-s); }
.card__price .v { color: var(--ink); }
.badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 0 8px; border: 1px solid var(--ink); background: var(--well); font-size: 12px; line-height: 1.8; letter-spacing: 0.1em; }

/* ---------------------------------------------------------------- product detail */
.pd { padding: clamp(12px, 3vw, 40px) 0 var(--sec); }
.pd__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.gallery__main { aspect-ratio: 1 / 1; }
.gallery__main img { transition: opacity 220ms ease; }
.gallery__main img.is-swapping { opacity: 0; }
.thumbs { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.thumb { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; background: var(--well); cursor: pointer; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 200ms ease; }
.thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
.label__body { display: grid; gap: 22px; }
.crumb { font-size: var(--fs-s); }
.crumb a { color: var(--ink-2); }
.label .h1 { font-size: clamp(30px, 22px + 1.6vw, 44px); }
.label .lead { font-size: var(--fs-body); margin-top: 8px; }
.price-big { display: flex; align-items: baseline; gap: 10px; }
.price-big .num { font-size: clamp(38px, 30px + 1.6vw, 52px); line-height: 1; letter-spacing: 0.02em; }
.price-big .unit { font-size: var(--fs-s); color: var(--ink-2); }
.price-ask { font-family: var(--serif); font-size: var(--fs-h3); }
.opt__label { font-size: var(--fs-s); color: var(--ink-2); margin-bottom: 8px; }
.opts { display: grid; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 15px; text-decoration: none; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease; }
.chip[aria-current="true"], .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--ink); } }
.specs { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; }
.specs dd { max-width: 68%; }

/* the buy button follows on phones and tablets once the one above has scrolled away */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px var(--margin) calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden; transition: transform 380ms var(--ease), visibility 0s linear 380ms;
}
.buybar.is-on { transform: none; visibility: visible; transition: transform 380ms var(--ease), visibility 0s; }
.buybar__info { display: grid; min-width: 0; line-height: 1.4; }
.buybar__name { overflow: hidden; font-family: var(--serif); white-space: nowrap; text-overflow: ellipsis; }
.buybar__price { font-size: 13px; color: var(--ink-2); }
.buybar .btn { flex: none; min-height: 44px; padding: 0 28px; }

/* ---------------------------------------------------------------- finder */
.quiz { max-width: 820px; }
.quiz__body { display: grid; gap: 36px; }
.q { min-width: 0; margin: 0; padding: 0; border: 0; }
.q legend { padding: 0; margin-bottom: 14px; font-family: var(--serif); font-size: var(--fs-h3); letter-spacing: 0.04em; }
.q .note { margin: -8px 0 12px; }
.q__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.q__opt { position: relative; }
.q__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.q__opt label { display: flex; align-items: center; min-height: 54px; padding: 10px 16px; border: 1px solid var(--line); cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease; }
.q__opt input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.q__opt input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .q__opt label:hover { border-color: var(--ink); } }
.result { margin-top: clamp(48px, 6vw, 80px); max-width: 820px; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hd) + 16px); }
.result .h2 { margin-bottom: clamp(20px, 3vw, 32px); }
.slips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.pick { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.pick .well { aspect-ratio: 4 / 3; }
.pick__body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.pick__tag { align-self: flex-start; padding: 0 8px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.8; letter-spacing: 0.1em; }
.pick__tag--alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pick__why { font-size: var(--fs-s); color: var(--ink-2); }
.pick .row { font-size: var(--fs-s); }
.pick__go { margin-top: 4px; font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 0.35em; }
.result .actions { margin-top: 28px; }

/* ---------------------------------------------------------------- contact */
.visit { max-width: 960px; border-top: 1px solid var(--line); }
.visit__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); padding-top: clamp(28px, 4vw, 48px); }
.visit__main { display: grid; gap: 28px; align-content: start; }
.person { display: flex; align-items: center; gap: 16px; }
.avatar { position: relative; flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--bg-2); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar__fallback { position: absolute; inset: 0; display: none; place-items: center; font-family: var(--serif); font-size: 28px; }
.avatar.is-missing .avatar__fallback { display: grid; }
.person__name { font-family: var(--serif); font-size: var(--fs-h3); letter-spacing: 0.06em; }
.ways { display: grid; gap: 12px; }
.ways dd { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 12px; }
.ways .wid { letter-spacing: 0.06em; }
.visit__qr { display: grid; justify-items: start; }
.qr { display: grid; justify-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: zoom-in; color: var(--ink-2); }
.qr img { width: min(220px, 100%); height: auto; background: #fff; padding: 10px; }
.paysec .receipt { width: 100%; max-width: 520px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.split__text { display: grid; gap: 14px; }
.receipt__body { display: grid; gap: 18px; }
.receipt__title { font-family: var(--serif); font-size: var(--fs-h3); }
.steps { display: grid; gap: 10px; counter-reset: step; }
.steps li { display: flex; gap: 12px; align-items: baseline; }
.steps li::before { counter-increment: step; content: counter(step); flex: none; font-family: var(--serif); color: var(--ink-2); }

/* ---------------------------------------------------------------- film on the mattress page */
.film { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.film .sec__head { margin-bottom: 0; }
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-2); }
.video video { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- dialogs and toast */
dialog.sheet { width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 0; background: var(--bg); color: var(--ink); overflow: auto; }
dialog.sheet::backdrop { background: rgba(23, 52, 42, 0.45); }
.sheet__close { position: absolute; top: 10px; right: 10px; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.sheet__body { display: grid; gap: 20px; padding: 28px 24px 28px; }
.sheet__body .h3 { padding-right: 44px; }
.sheet .row { font-size: 15px; }
.sheet .row dd { max-width: 70%; }
.sheet__actions { display: grid; gap: 10px; }
.sheet--qr .sheet__body { justify-items: center; text-align: center; padding-top: 56px; }
.sheet--qr img { width: min(320px, 100%); background: #fff; padding: 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; background: var(--ink); color: var(--bg); font-size: 14px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 300ms var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.has-buybar .toast { bottom: 84px; }

/* ---------------------------------------------------------------- motion: settle in once */
@media (prefers-reduced-motion: no-preference) {
  .hero__text > * { animation: settle 900ms var(--ease) backwards; }
  .hero__text > :nth-child(2) { animation-delay: 120ms; }
  .hero__text > :nth-child(3) { animation-delay: 240ms; }
  .hero__img img { animation: fade 1200ms ease 100ms backwards; }
  .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  dialog.sheet[open] { animation: settle 360ms var(--ease); }
  dialog.sheet[open]::backdrop { animation: fade 300ms ease; }
  dialog.sheet.is-closing { animation: fade-out 180ms ease forwards; }
  dialog.sheet.is-closing::backdrop { animation: fade-out 180ms ease forwards; }
}
@keyframes settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; }
  .ranges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prints { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd__grid { grid-template-columns: 1fr 1fr; }
  .split, .film, .visit__grid { grid-template-columns: 1fr; }
  .about__row, .about__row--flip { grid-template-columns: 1fr; gap: 20px; }
  .about__row--flip > :first-child { order: 0; }
  .origin { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .origin__main { grid-column: 1 / 3; grid-row: auto; }
  .origin__main .photo { aspect-ratio: 3 / 2; min-height: 0; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / 3; }
  .buybar { display: flex; }
  .hero__note { text-align: left; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 700px) {
  :root { --hd: 60px; }
  .hd__brand img { height: 30px; }
  .hd__nav { display: none; }
  .hd__burger { display: block; }
  .hero__title { font-size: clamp(72px, 22vw, 96px); }
  .hero__img img { aspect-ratio: 4 / 5; }
  .hero__text .actions { width: 100%; }
  .hero__text .btn { flex: 1 1 0; padding: 0 12px; }
  .prints { grid-template-columns: 1fr; }
  .origin { grid-template-columns: 1fr; }
  .origin__main { grid-column: auto; }
  .marks { grid-template-columns: 1fr; gap: 28px; }
  .ft__grid { grid-template-columns: 1fr; }
  .ft__brand { grid-column: auto; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd__grid { grid-template-columns: 1fr; }
  .slips { grid-template-columns: 1fr; }
  .q__opts { grid-template-columns: 1fr 1fr; }
  .specs dd, .ways dd { max-width: 72%; }
  .band .btn { width: 100%; }
  dialog.sheet { width: 100%; max-width: none; max-height: 88dvh; margin: auto 0 0; }
  .sheet__body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- green and cream
   Header, first screen, the shop band, page titles and the ending are plantation green;
   everything that carries reading or pictures stays on cream. */
.hd { background: var(--ink); }
.hd.is-scrolled { border-bottom-color: rgba(244, 239, 228, 0.16); }
.hd__nav a { color: rgba(244, 239, 228, 0.7); }
.hd__nav a::after { background: var(--bg); }
.hd__nav a[aria-current] { color: var(--bg); }
.hd__burger span { background: var(--bg); }
.menu { background: var(--ink); }
.menu__nav a { color: rgba(244, 239, 228, 0.7); border-bottom-color: rgba(244, 239, 228, 0.16); }
.menu__nav a[aria-current] { color: var(--bg); }
.menu__wx { color: rgba(244, 239, 228, 0.7); }
@media (hover: hover) and (pointer: fine) { .hd__nav a:hover { color: var(--bg); } }

.pagehead, .hero--green, .sec--green { background: var(--ink); color: var(--bg); }
.pagehead { padding-block: clamp(28px, 5vw, 64px) clamp(36px, 5vw, 64px); margin-bottom: clamp(32px, 5vw, 64px); }
.pagehead .lead { color: rgba(244, 239, 228, 0.78); }
.pagehead .lead a { color: var(--bg); }
.hero--green { padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 88px); }
.hero--green .hero__sub { color: rgba(244, 239, 228, 0.86); }
.hero--green .hero__title { color: var(--bg); }
.hero--green .btn--ink { background: var(--bg); color: var(--ink); border-color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .hero--green .btn--ink:hover { background: #fff; } }
.hero__img { background: none; overflow: visible; width: 100%; height: auto; }
.hero__grid { grid-template-columns: 5fr 7fr; }
.sec--green .range { color: var(--bg); }
.sec--green .range__count { color: rgba(244, 239, 228, 0.7); }
.sec--green .h2 { color: var(--bg); }
.sec--green .btn--ink { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.sec--green .tlink { color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .sec--green .btn--ink:hover { background: #fff; } }
/* a cream rule above the green ending sits flush against the section before it */
.ft { margin-top: 0; }

@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .hero__img { max-width: 560px; }
}
@media (max-width: 700px) {
  .hero__title { font-size: clamp(72px, 22vw, 96px); }
  .hero__sub { font-size: 18px; letter-spacing: 0.1em; }
  .hero__img { max-width: none; }
}

.pagehead .jump a { color: rgba(244, 239, 228, 0.86); text-decoration-color: rgba(244, 239, 228, 0.3); }
@media (max-width: 700px) { .hero--green .hero__text .btn { flex: 0 0 auto; padding: 0 40px; } }

/* ---------------------------------------------------------------- home v5: the plantation */
.page-home .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: calc(100svh - var(--hd)); padding: 0; overflow: hidden; background: var(--ink); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 36, 28, 0.82) 0%, rgba(14, 36, 28, 0.35) 45%, rgba(14, 36, 28, 0.1) 100%); }
.hero__inner { display: grid; justify-items: start; gap: 18px; padding-bottom: clamp(48px, 9vw, 120px); color: var(--bg); }
.page-home .hero__title { color: var(--bg); font-size: clamp(96px, 8vw + 56px, 200px); line-height: 1; letter-spacing: 0.14em; }
.page-home .hero__sub { color: rgba(244, 239, 228, 0.92); font-size: clamp(18px, 1vw + 12px, 26px); letter-spacing: 0.14em; margin-bottom: 12px; }

.statement { background: var(--ink); color: var(--bg); }
.statement__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 6vw, 96px); align-items: end; }
.statement__h { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 20px + 2.8vw, 60px); line-height: 1.35; letter-spacing: 0.06em; }
.statement .lead { color: rgba(244, 239, 228, 0.8); }

.journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.step figcaption { display: grid; gap: 6px; padding-top: 16px; }
.step__k { font-family: var(--serif); font-size: clamp(24px, 18px + 1vw, 32px); letter-spacing: 0.2em; }
.step__v { color: var(--ink-2); max-width: 20em; }

.band-photo { position: relative; isolation: isolate; min-height: clamp(420px, 70vh, 720px); display: flex; align-items: center; color: var(--bg); }
.band-photo__img { position: absolute !important; inset: 0; z-index: -1; height: 100%; }
.band-photo__img::after { content: ""; position: absolute; inset: 0; background: rgba(14, 36, 28, 0.55); }
.band-photo__text { display: grid; gap: 16px; }
.band-photo__text .h2 { color: var(--bg); font-size: clamp(40px, 24px + 3.4vw, 80px); letter-spacing: 0.16em; }
.band-photo__text p { font-size: clamp(17px, 15px + 0.5vw, 21px); color: rgba(244, 239, 228, 0.9); letter-spacing: 0.06em; }

.feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) var(--gap); }
.feat .h3 { margin-top: 14px; font-family: var(--serif); letter-spacing: 0.08em; }
.feat p { margin-top: 4px; font-size: var(--fs-s); color: var(--ink-2); }

.closing__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 6vw, 96px); align-items: center; }
.closing__text { display: grid; gap: 18px; justify-items: start; }

.ft__credit { margin-top: 8px; font-size: 12px; line-height: 1.7; }
.ft__credit a { color: inherit; }

@media (max-width: 1023px) {
  .statement__grid, .closing__grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr 1fr 1fr; }
  .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .closing__grid > .photo { max-width: 420px; }
}
@media (max-width: 700px) {
  .page-home .hero { min-height: calc(92svh - var(--hd)); }
  .page-home .hero__title { font-size: clamp(88px, 28vw, 120px); }
  .journey { grid-template-columns: 1fr; gap: 40px; }
  .journey .photo { aspect-ratio: 4 / 3 !important; }
  .band-photo { min-height: 420px; }
}

/* ---------------------------------------------------------------- hierarchy: three clear sizes of heading */
:root { --fs-h2: clamp(32px, 18px + 3.2vw, 64px); --fs-h1: clamp(44px, 26px + 4.4vw, 96px); --fs-h3: clamp(18px, 16px + 0.4vw, 22px); }
.sec__title { margin-bottom: clamp(32px, 5vw, 72px); }
.pagehead { position: relative; isolation: isolate; background: var(--ink); padding-block: clamp(56px, 9vw, 128px) clamp(40px, 6vw, 80px); overflow: hidden; }
.pagehead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../assets/img/forest-rows-1600.webp") center 60% / cover; opacity: 0.28; }
.pagehead .h1 { color: var(--bg); letter-spacing: 0.12em; }
.feat .h3, .range__name { font-size: clamp(18px, 16px + 0.4vw, 22px); }
.step__k { font-size: clamp(26px, 18px + 1.4vw, 38px); }

@media (max-width: 700px) { .page-home .hero__sub { font-size: 16px; letter-spacing: 0.06em; } }


/* ================================================================ home v6
   A bedding-brand home: a benefit headline over a real bedroom, the ranges right away,
   four plain facts, the story told while the picture holds still, one product up close,
   choosing by sleeping position, and a way to ask. */
.page-home .hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: calc(100svh - var(--hd)); padding: 0; overflow: hidden; background: var(--ink); }
.page-home .hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-home .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }
.page-home .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14, 36, 28, 0.78) 0%, rgba(14, 36, 28, 0.42) 42%, rgba(14, 36, 28, 0) 70%), linear-gradient(to top, rgba(14, 36, 28, 0.5), rgba(14, 36, 28, 0) 40%); }
.page-home .hero__inner { display: grid; justify-items: start; gap: 22px; padding-bottom: clamp(56px, 10vw, 136px); color: var(--bg); }
.page-home .hero__title { display: grid; color: var(--bg); font-size: clamp(44px, 24px + 4.6vw, 104px); line-height: 1.12; letter-spacing: 0.06em; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; }
.page-home .hero__sub { color: rgba(244, 239, 228, 0.9); font-size: clamp(16px, 14px + 0.5vw, 20px); letter-spacing: 0.06em; }
.btn--ghost { background: transparent; color: var(--bg); border-color: rgba(244, 239, 228, 0.7); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--bg); color: var(--ink); } }

.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(28px, 4vw, 56px); }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cat { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.cat .well { aspect-ratio: 4 / 5; margin-bottom: 12px; }
.cat__name { font-family: var(--serif); font-size: clamp(19px, 16px + 0.6vw, 24px); letter-spacing: 0.08em; }
.cat__count { font-size: var(--fs-s); color: var(--ink-2); }
.cat .go { display: inline-block; transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cat:hover .go { transform: translateX(6px); } .cat:hover .well img { transform: scale(1.05); } }

.proof { background: var(--ink); color: var(--bg); padding-block: clamp(48px, 7vw, 96px); }
.proof__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); }
.proof__item { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(244, 239, 228, 0.24); }
.proof__num { font-family: var(--serif); font-size: clamp(34px, 22px + 2.4vw, 60px); line-height: 1.1; letter-spacing: 0.04em; }
.proof__txt { font-size: var(--fs-s); color: rgba(244, 239, 228, 0.72); letter-spacing: 0.06em; }

.story__title { margin-bottom: clamp(32px, 5vw, 64px); }
.story__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); }
.story__media { position: sticky; top: calc(var(--hd) + 32px); align-self: start; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.story__img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity 700ms ease, transform 1200ms var(--ease); }
.story__img.is-on { opacity: 1; transform: none; }
.story__img .photo { height: 100%; }
.story__steps { display: grid; }
.story__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0.32; transition: opacity 500ms ease; }
.story__step.is-on { opacity: 1; }
.story__k { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 24px + 2.6vw, 64px); letter-spacing: 0.2em; }
.story__step p { color: var(--ink-2); max-width: 22em; font-size: clamp(16px, 15px + 0.3vw, 19px); }
.story__mobile-img { display: none; }

.feature { background: var(--ink); color: var(--bg); padding-block: var(--sec); }
.feature__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.feature .h2 { color: var(--bg); }
.feature .lead { color: rgba(244, 239, 228, 0.8); margin-top: 16px; }
.feature__specs { display: grid; gap: 0; margin: 28px 0; border-top: 1px solid rgba(244, 239, 228, 0.2); }
.feature__specs div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(244, 239, 228, 0.2); }
.feature__specs dt { color: rgba(244, 239, 228, 0.66); }

.sleep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.pose { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.pose .photo { margin-bottom: 14px; }
.pose__k { font-family: var(--serif); font-size: clamp(24px, 18px + 1vw, 34px); letter-spacing: 0.1em; }
.pose__v { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .pose:hover .photo img { transform: scale(1.04); } }

.band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(460px, 75vh, 760px); color: var(--bg); }
.band__bg { position: absolute; inset: -12% 0; z-index: -1; will-change: transform; }
.band__bg .photo { height: 100%; }
.band__bg::after { content: ""; position: absolute; inset: 0; background: rgba(14, 36, 28, 0.62); }
.band__text { display: grid; gap: 18px; justify-items: start; }
.band__text .h2 { color: var(--bg); }
.band__text p { color: rgba(244, 239, 228, 0.86); }

/* motion */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero__bg img { animation: slow-in 2.4s var(--ease) backwards; }
  .hero__title .line > span { animation: line-up 1100ms var(--ease) backwards; }
  .hero__title .line:nth-child(2) > span { animation-delay: 140ms; }
  .page-home .hero__sub { animation: settle 900ms var(--ease) 420ms backwards; }
  .page-home .hero__inner .actions { animation: settle 900ms var(--ease) 560ms backwards; }
  .js [data-reveal] { transition-delay: calc(var(--i, 0) * 100ms); }
  .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(12% 10% 12% 10%); transition: clip-path 1300ms var(--ease); }
  .js [data-reveal="clip"].is-in { clip-path: inset(0); }
  .js [data-reveal="clip"] img { transform: scale(1.15); transition: transform 1800ms var(--ease); }
  .js [data-reveal="clip"].is-in img { transform: none; }
}
@keyframes slow-in { from { transform: scale(1.12); } }
@keyframes line-up { from { transform: translateY(105%); } }

@media (max-width: 1023px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story__grid { grid-template-columns: 1fr; }
  .story__media { display: none; }
  .story__step { min-height: 0; opacity: 1; padding-bottom: 44px; }
  .story__mobile-img { display: block; }
  .feature__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .page-home .hero { min-height: calc(90svh - var(--hd)); }
  .page-home .hero__bg img { object-position: 50% 30%; }
  .page-home .hero__bg::after { background: linear-gradient(to top, rgba(14, 36, 28, 0.86) 0%, rgba(14, 36, 28, 0.4) 50%, rgba(14, 36, 28, 0.05) 100%); }
  .page-home .hero__inner .actions { width: 100%; }
  .page-home .hero__inner .btn { flex: 1 1 0; padding: 0 12px; }
  .sleep__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ================================================================ the shop on the home page: all products, one row of range buttons */
.shop__head { display: grid; gap: 10px; margin-bottom: 24px; }
.tabs { display: flex; gap: 8px; margin-bottom: clamp(24px, 3vw, 40px); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 15px; letter-spacing: 0.04em; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease); }
.tab span { color: var(--ink-2); font-size: 13px; }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tab[aria-pressed="true"] span { color: rgba(244, 239, 228, 0.7); }
.tab:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .tab:hover { border-color: var(--ink); } }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--gap); }
.item { position: relative; display: grid; gap: 3px; align-content: start; color: var(--ink); text-decoration: none; }
.item .well { aspect-ratio: 1 / 1; margin-bottom: 10px; }
.item.is-hidden { display: none; }
.item.is-entering { animation: item-in 520ms var(--ease) backwards; animation-delay: calc(var(--k, 0) * 40ms); }
.item__badge { position: absolute; top: 10px; left: 10px; padding: 0 8px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.9; letter-spacing: 0.1em; }
.item__name { font-family: var(--serif); font-size: clamp(17px, 15px + 0.4vw, 21px); letter-spacing: 0.04em; }
.item__key { font-size: 13px; color: var(--ink-2); }
.item__price { margin-top: 4px; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
@media (hover: hover) and (pointer: fine) { .item:hover .well img { transform: scale(1.05); } }
.shop__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(36px, 5vw, 64px); }
@keyframes item-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .item.is-entering { animation: none; } }

.card__line { font-size: 13px; }
.card__price { font-size: 16px; font-weight: 500; }

@media (max-width: 1023px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .tabs { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .item__name { font-size: 16px; }
  .item__key { font-size: 12px; }
  .shop__foot .btn { width: 100%; }
  /* phones: say less */
  .shop__head .lead, .story__step p, .feature .lead { font-size: 15px; }
  .proof__txt { font-size: 12px; }
  .story__k { font-size: 30px; }
  .story__step { padding-bottom: 32px; }
}

/* every range button stays visible: they wrap instead of scrolling */
.tabs { flex-wrap: wrap; overflow: visible; }
@media (max-width: 700px) { .tabs { margin-inline: 0; padding-inline: 0; gap: 8px 6px; } .tab { min-height: 38px; padding: 0 12px; font-size: 14px; } }


.item__badge { left: auto; right: 10px; }


/* four range cards; each lists the products inside */
.ranges4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.range-card { display: grid; align-content: start; gap: 10px; color: var(--ink); text-decoration: none; }
.range-card .well { aspect-ratio: 4 / 5; }
.range-card__name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 4px; font-family: var(--serif); font-size: clamp(20px, 16px + 0.8vw, 26px); letter-spacing: 0.06em; }
.range-card__name span { font-family: var(--sans); font-size: 13px; color: var(--ink-2); letter-spacing: 0.04em; white-space: nowrap; }
.range-card__list { display: flex; flex-wrap: wrap; gap: 6px; }
.range-card__list li { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ink-2); transition: border-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .range-card:hover .well img { transform: scale(1.05); }
  .range-card:hover .range-card__list li { border-color: var(--ink); color: var(--ink); }
}
@media (max-width: 1023px) { .ranges4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); } }
@media (max-width: 700px) {
  .ranges4 { gap: 28px 12px; }
  .range-card__name { flex-direction: column; gap: 0; font-size: 18px; }
  .range-card__list li { padding: 1px 8px; font-size: 12px; }
}

/* ================================================================ phones, tightened
   One idea per block, short rows instead of tall stacks, every label on one line. */
.range-card__line, .range-card__go { display: none; }
@media (max-width: 700px) {
  :root { --sec: 56px; --margin: 18px; }
  .h2 { font-size: 28px; letter-spacing: 0.04em; }
  .row-head { margin-bottom: 20px; }

  /* first screen: the photo on top, the words below on green, nothing on the face */
  .page-home .hero { display: block; min-height: 0; }
  .page-home .hero__bg { position: relative; inset: auto; z-index: auto; display: block; aspect-ratio: 4 / 4.2; }
  .page-home .hero__bg::after { background: linear-gradient(to top, rgba(23, 52, 42, 1) 0%, rgba(23, 52, 42, 0) 32%); }
  .page-home .hero__inner { position: relative; margin-top: -64px; gap: 14px; padding-bottom: 36px; }
  .page-home .hero__title { font-size: 38px; line-height: 1.2; letter-spacing: 0.04em; }
  .page-home .hero__sub { font-size: 15px; letter-spacing: 0.02em; }
  .page-home .hero__inner .actions { gap: 10px; margin-top: 4px; }
  .page-home .hero__inner .btn { min-height: 48px; }

  /* ranges: a list of rows, picture left, names on one line */
  .ranges4 { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .range-card { grid-template-columns: 88px 1fr 16px; grid-template-rows: auto auto; align-items: center; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .range-card .well { grid-row: 1 / 3; aspect-ratio: 1 / 1; width: 88px; }
  .range-card__name { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 0; font-size: 19px; align-self: end; }
  .range-card__list { display: none; }
  .range-card__line { display: block; grid-column: 2; overflow: hidden; color: var(--ink-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; align-self: start; }
  .range-card__go { display: block; grid-column: 3; grid-row: 1 / 3; color: var(--ink-2); font-size: 22px; }
  .shop__foot { margin-top: 24px; gap: 14px; }

  /* four facts: two by two, smaller */
  .proof { padding-block: 36px; }
  .proof__grid { gap: 20px 16px; }
  .proof__item { padding-top: 12px; gap: 4px; }
  .proof__num { font-size: 30px; }

  /* the story: three short rows */
  .story__title { margin-bottom: 20px; }
  .story__step { display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto 1fr; gap: 4px 14px; padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
  .story__step:last-child { border-bottom: 0; margin-bottom: 0; }
  .story__mobile-img { grid-row: 1 / 3; }
  .story__mobile-img .photo { aspect-ratio: 1 / 1 !important; }
  .story__k { font-size: 22px; letter-spacing: 0.12em; align-self: end; }
  .story__step p { font-size: 14px; line-height: 1.6; align-self: start; }

  /* the featured pillow: picture and facts side by side */
  .feature { padding-block: 40px; }
  .feature__grid { grid-template-columns: 1fr; gap: 20px; }
  .feature__img .well { aspect-ratio: 16 / 10 !important; }
  .feature .lead { font-size: 14px; margin-top: 8px; }
  .feature__specs { margin: 16px 0 20px; }
  .feature__specs div { padding: 9px 0; font-size: 14px; }

  /* sleeping position: two pictures side by side */
  .sleep__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pose .photo { aspect-ratio: 1 / 1 !important; margin-bottom: 8px; }
  .pose__k { font-size: 18px; }
  .pose__v { font-size: 12px; line-height: 1.5; }

  .band { min-height: 360px; }
  .band__text .h2 { font-size: 26px; }
  .band__text p { font-size: 14px; }
  .band__text .actions { width: 100%; gap: 10px; }
  .band__text .btn { flex: 1 1 0; padding: 0 10px; min-height: 46px; font-size: 15px; }

  /* footer: one tight block */
  .ft { padding-top: 32px; }
  .ft__grid { gap: 20px; }
  .ft__brand img { width: 120px; }
  .ft__nav { grid-template-columns: repeat(4, auto); justify-content: start; gap: 0 22px; }
  .ft__nav a { border-bottom: 0; min-height: 36px; }
  .ft__wx { grid-template-columns: 1fr auto; align-items: center; width: 100%; }
  .ft__wx .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .ft__mark { margin-top: 20px; font-size: 12px; }

  /* products page: series links as one scrolling row, one line per label on cards */
  .pagehead { padding-block: 36px 28px; margin-bottom: 24px; }
  .pagehead .h1 { font-size: 40px; }
  .pagehead .lead { font-size: 14px; margin-top: 8px; }
  .jump { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 18px calc(-1 * var(--margin)) 0; padding: 0 var(--margin); scrollbar-width: none; }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid rgba(244, 239, 228, 0.4); border-radius: 999px; text-decoration: none; font-size: 14px; }
  .series__head { padding-top: 20px; margin-bottom: 18px; }
  .series__head .lead { font-size: 14px; }
  .series__who { display: none; }
  .cards { gap: 22px 12px; }
  .card__body { padding-top: 10px; gap: 2px; }
  .card .h3 { overflow: hidden; font-size: 16px; white-space: nowrap; text-overflow: ellipsis; }
  .card__line { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
  .card__price { padding-top: 4px; font-size: 15px; }
  .badge { left: auto; right: 8px; top: 8px; }

  /* product page: name, price, choices, buy; the specs as a plain two-column table */
  .pd { padding-top: 0; }
  .pd__grid { gap: 20px; }
  .gallery { margin-inline: calc(-1 * var(--margin)); }
  .thumbs { padding-inline: var(--margin); }
  .label__body { gap: 16px; }
  .label .h1 { font-size: 28px; }
  .label .lead { font-size: 14px; }
  .price-big .num { font-size: 36px; }
  .note { font-size: 12px; }
  .specs { gap: 0; padding-top: 4px; font-size: 14px; }
  .specs .row { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .specs .row > :first-child::after { display: none; }
  .specs .row > :last-child { max-width: none; text-align: left; text-wrap: pretty; }
}
@media (max-width: 700px) {
  .jump { flex-wrap: wrap; overflow: visible; margin: 16px 0 0; padding: 0; }
  .band__text .actions { flex-direction: column; align-items: stretch; }
  .band__text .btn { flex: none; width: 100%; }
  .pose { align-content: start; }
}

/* ---------------------------------------------------------------- hero seam
   The photo slowly settles in (a scale animation). Without a clip, the scaled picture spilled out of its box
   and showed as a pale band under the green fade while it played. The box now clips it, is green itself,
   and the fade reaches a little past both edges so no hairline can show. */
.hero__bg { overflow: hidden; background: var(--ink); }
.page-home .hero__bg::after { inset: -2px 0; background: linear-gradient(100deg, rgba(14, 36, 28, 0.78) 0%, rgba(14, 36, 28, 0.42) 42%, rgba(14, 36, 28, 0) 70%), linear-gradient(to top, rgba(14, 36, 28, 0.5), rgba(14, 36, 28, 0) 40%); }
@media (max-width: 700px) {
  .page-home .hero__bg { background: var(--ink); }
  .page-home .hero__bg::after { inset: -2px 0; background: linear-gradient(to top, #17342a 0%, rgba(23, 52, 42, 0.92) 14%, rgba(23, 52, 42, 0.5) 34%, rgba(23, 52, 42, 0) 62%); }
  .page-home .hero__inner { margin-top: -88px; }
}

/* ================================================================ depth
   Layers instead of 3D: the first screen stays while the page slides over it like a sheet of paper,
   sections step between three tones, product pictures float on soft shadows, and the featured pillow
   sits on an offset block. */
:root { --green-2: #21473a; --lift: 0 1px 2px rgba(23, 52, 42, 0.06), 0 14px 34px -14px rgba(23, 52, 42, 0.28); --lift-hi: 0 2px 4px rgba(23, 52, 42, 0.08), 0 26px 48px -18px rgba(23, 52, 42, 0.34); }

/* the curtain */
/* Wide screens only: the first screen stays put and dims as the page covers it. The dimming runs on the
   scroll timeline (compositor), not from a script, so scrolling never waits on the main thread. Phones
   scroll the first screen away like any other section. */
@media (min-width: 701px) {
  .page-home .hero { position: sticky; top: var(--hd); z-index: 0; }
}
@keyframes hero-dim { to { opacity: 0.7; } }
@keyframes hero-lift { to { transform: translate3d(0, -60px, 0); opacity: 0; } }
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .page-home .hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0e241c; opacity: 0; animation: hero-dim linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
    .page-home .hero__inner { animation: hero-lift linear both; animation-timeline: scroll(root block); animation-range: 0 80vh; }
  }
}
.page-home main > section:not(.hero), .page-home .ft { position: relative; z-index: 1; }
:where(.page-home main > section:not(.hero)) { background: var(--bg); }
.page-home main > section.shop { box-shadow: 0 -30px 60px -20px rgba(8, 24, 18, 0.45); }

/* three tones, stepping down the page */
.page-home .story { background: var(--bg-2); }
.page-home .proof { background: var(--green-2); }
.page-home .proof__item { border-top-color: rgba(244, 239, 228, 0.3); }

/* pictures float */
.range-card .well, .card .well, .item .well, .pick .well, .gallery__main, .feat .well { box-shadow: var(--lift); transition: box-shadow 450ms var(--ease), transform 450ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .range-card:hover .well, .card a:hover .well, .pick:hover .well { box-shadow: var(--lift-hi); transform: translateY(-6px); }
}
.story__media, .pose .photo, .step .photo { box-shadow: var(--lift); }

/* the featured pillow on an offset block */
.feature__img { position: relative; isolation: isolate; }
.feature__img::before { content: ""; position: absolute; z-index: -1; inset: 28px -28px -28px 28px; background: var(--green-2); }
.feature__img .well { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5); }

/* the contact band: the photo moves slower than the page (already), the words sit on a darker plate */
.band__text { position: relative; }

@media (max-width: 700px) {
  .feature__img::before { inset: 16px -12px -16px 12px; }
  .page-home main > section.shop { box-shadow: 0 -20px 40px -16px rgba(8, 24, 18, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .page-home .hero { position: relative; top: auto; }
}

.feature__img::before { background: #2f5d4c; }


/* the reveal clips the picture itself, not its box, so the offset block behind stays visible */
.js .feature__img[data-reveal="clip"] { clip-path: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .feature__img .well { clip-path: inset(12% 10% 12% 10%); transition: clip-path 1300ms var(--ease), box-shadow 450ms var(--ease); }
  .js .feature__img.is-in .well { clip-path: inset(0 0 -80px 0); }
  .js .feature__img::before { opacity: 0; transform: translate(-16px, -16px); transition: opacity 900ms var(--ease) 300ms, transform 1100ms var(--ease) 300ms; }
  .js .feature__img.is-in::before { opacity: 1; transform: none; }
}

/* ================================================================ finder: a picture beside the questions, a progress line, bigger answers */
.finder-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.finder-art { position: sticky; top: calc(var(--hd) + 32px); }
.finder-art .photo { aspect-ratio: 4 / 5; box-shadow: var(--lift); }
.quiz { max-width: none; }
.quiz__progress { height: 3px; margin-bottom: 32px; background: var(--line); overflow: hidden; }
.quiz__progress span { display: block; height: 100%; width: 8%; background: var(--ink); transition: width 600ms var(--ease); }
.quiz__body { gap: 40px; }
.q legend { font-size: clamp(22px, 18px + 0.8vw, 28px); margin-bottom: 16px; }
.q__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.q__opt label { min-height: 64px; padding: 14px 20px; font-size: 17px; background: var(--well); border-color: transparent; box-shadow: 0 1px 2px rgba(23, 52, 42, 0.06), 0 6px 18px -10px rgba(23, 52, 42, 0.25); transition: box-shadow 300ms var(--ease), background-color 200ms ease, color 200ms ease, transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .q__opt label:hover { transform: translateY(-2px); box-shadow: var(--lift); border-color: transparent; } }
.q__opt input:checked + label { background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: no-preference) { .q { animation: settle 600ms var(--ease) backwards; } }
@media (max-width: 1023px) {
  .finder-grid { grid-template-columns: 1fr; }
  .finder-art { display: none; }
}
@media (max-width: 700px) {
  .q legend { font-size: 20px; }
  .q__opt label { min-height: 56px; font-size: 16px; padding: 12px 14px; }
}

/* ================================================================ polish, round 7 (phones first)
   Selling points as tags under the product name, a shop-style bar on phones, larger tap targets,
   no 12px body copy outside the legal line. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags li { padding: 2px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink); font-size: 13px; line-height: 1.7; letter-spacing: 0.02em; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pill:hover { border-color: var(--ink); } }
.pill:active { transform: scale(0.96); }
.jump a span { margin-left: 6px; font-size: 12px; opacity: 0.65; }
.pagehead .lead a.nb { margin-left: 4px; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.35em; }
.crumb a { display: inline-flex; align-items: center; min-height: 36px; }
.buybar__btns { display: flex; flex: none; gap: 8px; }
.buybar__ask { min-width: 72px; }

@media (max-width: 700px) {
  /* product page: one buy entry, always within reach */
  #pd-actions { display: none; }
  .page-product .ft { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .buybar { padding: 8px var(--margin) calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -12px rgba(23, 52, 42, 0.35); }
  .buybar .btn { min-height: 46px; padding: 0 18px; font-size: 15px; letter-spacing: 0.08em; }
  .buybar__ask { min-width: 64px; }
  .buybar__name { font-size: 15px; }
  .label .h1 { font-size: 26px; }
  .price-big .num { font-size: 38px; }
  .note { font-size: 13px; padding: 10px 12px; background: var(--bg-2); line-height: 1.6; }
  .tlink--small { min-height: 44px; }

  /* readable secondary text */
  .proof__txt, .pose__v, .card__line { font-size: 13px; }
  .card .well { aspect-ratio: 1 / 1; }
  .card__price { font-size: 16px; }

  /* tap targets */
  .ft__nav a { min-height: 44px; }
  .jump a { min-height: 40px; }
  .pill { min-height: 40px; }
  .pagehead .lead a.nb { display: inline-block; margin: 6px 0 0; }
}

.story__step p, .feature .lead, .pagehead .lead, .series__head .lead { text-wrap: pretty; }
@media (max-width: 700px) {
  .ft__nav a { min-width: 44px; }
  .pagehead .lead a.nb { min-height: 40px; line-height: 40px; }
}

/* ---------------------------------------------------------------- round 8 */
/* the story pictures keep their whole 4:3 frame on phones (they used to be cut to a square) */
@media (max-width: 700px) {
  .story__step { grid-template-columns: 136px 1fr; }
  .story__mobile-img .photo { aspect-ratio: 4 / 3 !important; }
}
/* the home page already ends on a contact block, so its footer carries no second copy button */
.page-home .ft__wx { display: none; }
.page-home .ft__grid { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 700px) { .page-home .ft__grid { grid-template-columns: 1fr; } }
/* a long row of thickness chips wraps */
#m-sizes, #m-thick { flex-wrap: wrap; }

/* ---------------------------------------------------------------- round 9: green all the way down the first screens */
.row-head + .shop__sum { margin-top: -8px; }

@media (max-width: 700px) {
  /* immersive first screen: the photograph fills the whole screen under the header, the words sit low
     where a thumb reaches, on a fade into the same green as everything below */
  .page-home .hero { display: flex; align-items: flex-end; min-height: calc(100vh - var(--hd)); min-height: calc(100svh - var(--hd)); }
  .page-home .hero__bg { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .page-home .hero__bg img { height: 100%; object-position: 62% 30%; }
  .page-home .hero__bg::after { inset: -2px 0; background: linear-gradient(to top, #17342a 0%, rgba(23, 52, 42, 0.94) 22%, rgba(23, 52, 42, 0.55) 46%, rgba(23, 52, 42, 0) 72%); }
  .page-home .hero__inner { margin-top: 0; gap: 12px; padding-top: 24px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .page-home .hero__title { font-size: clamp(34px, 10.4vw, 44px); }
  .page-home .hero__sub { font-size: 15px; margin-bottom: 8px; }
  .page-home .hero__inner .actions { margin-top: 8px; }
}

.shop__sum { margin-top: 6px; color: var(--ink-2); font-size: 15px; letter-spacing: 0.06em; }
.series__who { display: none; }

/* ---------------------------------------------------------------- round 11: smooth scrolling on phones
   Nothing on a phone re-paints every frame while scrolling: no pinned first screen, no drifting photo,
   no clipped reveals; pictures blend inside their own frame only. */
.well { isolation: isolate; }
@media (max-width: 700px) {
  .page-home main > section.shop { box-shadow: none; }
  .band__bg { inset: 0; transform: none !important; will-change: auto; }
  .js [data-reveal="clip"], .js .feature__img .well { clip-path: none; transition: box-shadow 450ms var(--ease); }
  .js .feature__img.is-in .well { clip-path: none; }
}
/* ---------------------------------------------------------------- round 12: 泰国好物
   A row at the top of every latex page's ending leads to the Thai goods page; that page is a plain
   price list in five groups. */
.ft__thai { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; margin-bottom: clamp(36px, 5vw, 56px); padding-block: clamp(22px, 3vw, 30px); border-bottom: 1px solid rgba(244, 239, 228, 0.16); color: var(--bg); text-decoration: none; }
.ft__thai-k { grid-column: 1; font-size: 13px; letter-spacing: 0.12em; color: rgba(244, 239, 228, 0.6); }
.ft__thai-t { grid-column: 1; font-family: "Lamyai Song", serif; font-size: clamp(24px, 20px + 1vw, 32px); line-height: 1.3; }
.ft__thai-d { grid-column: 1; font-size: 14px; color: rgba(244, 239, 228, 0.7); }
.ft__thai-go { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(244, 239, 228, 0.4); border-radius: 50%; font-size: 22px; transition: background 300ms var(--ease), color 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .ft__thai:hover .ft__thai-go { background: var(--bg); color: var(--ink); } }

.goods { padding-block: clamp(20px, 3vw, 40px); }
.goods .h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; scroll-margin-top: calc(var(--hd) + 16px); }
.goods .h2 span { font-family: inherit; font-size: 15px; color: var(--ink-2); letter-spacing: 0.04em; }
.goods__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); columns: 2; column-gap: clamp(32px, 5vw, 72px); }
.goods__row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "ship price"; gap: 2px 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); break-inside: avoid; }
.goods__name { grid-area: name; font-size: 16px; }
.goods__name small { display: block; font-size: 13px; color: var(--ink-2); }
.goods__ship { grid-area: ship; font-size: 13px; color: var(--ink-2); }
.goods__ship.is-min { color: #8a5a1f; }
.goods__price { grid-area: price; font-variant-numeric: tabular-nums; font-size: 17px; text-align: right; white-space: nowrap; }
.goods--end { padding-bottom: clamp(56px, 8vw, 96px); }
.goods--end .note { margin-bottom: 20px; }
.page-thai .goods { scroll-margin-top: calc(var(--hd) + 16px); }
@media (max-width: 700px) {
  .goods__list { columns: 1; }
  .goods__price { white-space: normal; max-width: 52vw; font-size: 16px; }
  .ft__thai-go { width: 44px; height: 44px; }
  .goods--end .btn { width: 100%; }
}
/* ---------------------------------------------------------------- round 13: no double-tap zoom; the copy notice
   touch-action: manipulation stops double-tap zoom but keeps pinch zoom. The notice is a small cream card
   with a green tick, rising from the bottom (above the buy bar on product pages). */
html { touch-action: manipulation; }
.toast { display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(360px, calc(100% - 32px)); padding: 12px 18px 12px 12px; border-radius: 14px; background: var(--bg); color: var(--ink); border: 1px solid rgba(23, 52, 42, 0.12); box-shadow: 0 2px 6px rgba(23, 52, 42, 0.08), 0 18px 40px -12px rgba(23, 52, 42, 0.38); font-size: 14px; line-height: 1.45; transform: translate(-50%, 12px) scale(0.98); bottom: calc(24px + env(safe-area-inset-bottom)); }
.toast.is-on { transform: translate(-50%, 0) scale(1); }
.toast__mark { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; }
.toast.is-bad .toast__mark { background: #8a5a1f; }
.toast__txt { display: grid; gap: 1px; }
.toast__txt strong { font-weight: 600; font-size: 15px; }
.toast__txt span { color: var(--ink-2); font-size: 13px; }
.has-buybar .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* ---------------------------------------------------------------- round 14: the phone menu, without jank
   The sheet is always laid out and only fades and slides (opacity + transform, both on the compositor);
   it reaches past the bottom of the screen so no strip of page shows while the browser bar moves;
   the links rise one after another. */
.menu, .menu[hidden] { display: flex; visibility: hidden; opacity: 0; transform: translate3d(0, -10px, 0); bottom: -12vh; padding-bottom: calc(32px + 12vh + env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: none; transition: opacity 260ms ease, transform 420ms var(--ease), visibility 0s linear 420ms; }
.menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms ease, transform 420ms var(--ease), visibility 0s; }
.menu__nav a, .menu__wx { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 200ms ease, transform 200ms ease; }
.menu.is-open .menu__nav a, .menu.is-open .menu__wx { opacity: 1; transform: none; transition: opacity 420ms ease, transform 560ms var(--ease); }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: 60ms; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: 110ms; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: 160ms; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: 210ms; }
.menu.is-open .menu__wx { transition-delay: 280ms; }
.hd__burger span { transition: transform 360ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .menu, .menu.is-open, .menu__nav a, .menu__wx { transition: none !important; transform: none; } }

/* ---------------------------------------------------------------- round 14: 泰国好物, rebuilt
   A green first screen, a sticky row of categories that filters the shelf, cards that lead with the photo
   (a lettered tile until photos arrive), tap a card for the order slip. */
.page-thai .thai-head { background: var(--ink); color: var(--bg); overflow: hidden; position: relative; isolation: isolate; }
.thai-head::before { content: "泰"; position: absolute; z-index: -1; right: -0.08em; bottom: -0.28em; font-family: "Lamyai Song", serif; font-size: clamp(220px, 40vw, 520px); line-height: 1; color: rgba(244, 239, 228, 0.05); pointer-events: none; }
.thai-head__in { display: grid; justify-items: start; gap: 14px; padding-block: clamp(48px, 9vw, 120px) clamp(44px, 7vw, 96px); }
.thai-head__k { font-size: 13px; letter-spacing: 0.2em; color: rgba(244, 239, 228, 0.6); }
.thai-head__t { font-family: "Lamyai Song", serif; font-weight: 400; font-size: clamp(48px, 8vw, 104px); line-height: 1.1; letter-spacing: 0.08em; }
.thai-head__sub { font-size: clamp(15px, 14px + 0.3vw, 18px); color: rgba(244, 239, 228, 0.8); letter-spacing: 0.06em; }
.thai-head__sub b { font-family: "Lamyai Song", serif; font-weight: 400; font-size: 1.6em; color: var(--bg); margin-right: 2px; }
.thai-head .actions { margin-top: 10px; }

.thai-bar { position: sticky; top: var(--hd); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.thai-tabs { margin: 0; padding-block: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.thai-tabs::-webkit-scrollbar { display: none; }
.thai-tabs .chip { flex: none; gap: 6px; min-height: 40px; border-radius: 999px; }
.thai-tabs .chip span { font-size: 12px; opacity: 0.6; }

.thai-shelf { padding-top: clamp(28px, 4vw, 48px); }
.thai-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--gap); }
.thai-card button { all: unset; box-sizing: border-box; display: grid; gap: 3px; width: 100%; cursor: pointer; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.thai-card button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.thai-card__well { aspect-ratio: 1 / 1; margin-bottom: 10px; box-shadow: var(--lift); transition: box-shadow 450ms var(--ease), transform 450ms var(--ease); }
.thai-card__well img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; transition: transform 700ms var(--ease); }
.thai-card button:active .thai-card__well { transform: scale(0.97); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
  .thai-card button:hover .thai-card__well { box-shadow: var(--lift-hi); transform: translateY(-6px); }
  .thai-card button:hover .thai-card__well img { transform: scale(1.04); }
}
.thai-card__name { font-size: 16px; line-height: 1.45; }
.thai-card__note { font-size: 12px; color: var(--ink-2); }
.thai-card__price { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.thai-card__ship { justify-self: start; margin-top: 2px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.thai-card__ship.is-min { border-color: rgba(138, 90, 31, 0.35); color: #8a5a1f; }

/* the lettered tile that stands in for a photo */
.thai-tile { display: grid; align-content: space-between; padding: 14px; color: var(--ink); }
.thai-tile__k { font-size: 11px; letter-spacing: 0.16em; opacity: 0.55; }
.thai-tile__n { font-family: "Lamyai Song", serif; font-size: clamp(18px, 15px + 0.8vw, 24px); line-height: 1.3; letter-spacing: 0.04em; }
.thai-tile--beauty { background: #efe2d8; }
.thai-tile--daily { background: #e3e8df; }
.thai-tile--balm { background: #e8e0c8; }
.thai-tile--health { background: #e6dccd; }
.thai-tile--snack { background: #f0e4c4; }
.thai-note { margin-top: clamp(32px, 4vw, 48px); }

.band--thai { background: var(--ink); color: var(--bg); padding-block: clamp(56px, 8vw, 104px); }
.band--thai .band__text { display: grid; justify-items: start; gap: 14px; }
.band--thai p { color: rgba(244, 239, 228, 0.78); }
.band--thai .thai-back { color: var(--bg); margin-top: 6px; }

@media (max-width: 1023px) { .thai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .thai-head__in { padding-block: 44px 40px; }
  .thai-head .actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .thai-head .actions .btn { width: 100%; padding-inline: 0; }
  .thai-bar { margin-inline: 0; }
  .thai-tabs { margin-inline: calc(-1 * var(--margin)); padding-inline: var(--margin); }
  .thai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .thai-card__name, .thai-card__price { font-size: 15px; }
  .thai-tile { padding: 12px; }
  .band--thai .actions { width: 100%; }
  .band--thai .btn { width: 100%; }
}
/* ---------------------------------------------------------------- round 14: arriving on a page
   Moving between pages cross-fades where the browser supports it, and every page head settles in
   the way the home page's first screen does. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: ease; }
@media (prefers-reduced-motion: no-preference) {
  .pagehead .h1 { animation: settle 900ms var(--ease) backwards; }
  .pagehead .h1 + * { animation: settle 900ms var(--ease) 140ms backwards; }
  .pagehead .lead ~ *, .pagehead .jump { animation: settle 900ms var(--ease) 260ms backwards; }
  .pagehead { animation: fade 600ms ease backwards; }
  .page-thai .thai-head__in > * { animation: settle 900ms var(--ease) backwards; }
  .page-thai .thai-head__in > :nth-child(2) { animation-delay: 120ms; }
  .page-thai .thai-head__in > :nth-child(3) { animation-delay: 240ms; }
  .page-thai .thai-head__in > :nth-child(4) { animation-delay: 360ms; }
  .page-thai .thai-bar { animation: fade 700ms ease 420ms backwards; }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
/* ---------------------------------------------------------------- round 15: the phone menu, after apple.com
   Timings measured on apple.com's own menu: the two lines close and cross in 0.24 s; the panel grows down
   out of the header in 0.406 s on cubic-bezier(0.4, 0, 0.6, 1); each link falls 8 px and fades in over
   0.24 s, starting at 0.2 s and 20 ms apart. Closing runs the other way, quicker. The panel is revealed
   with clip-path (no layout work), in the header's own green, so it reads as the header opening. */
.hd__burger { display: none; color: var(--bg); }
.hd__burger .burger { display: block; width: 20px; height: 20px; margin: 0 auto; overflow: visible; }
.burger__bread { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .hd__burger { display: block; } }
.menu, .menu[hidden], .menu.is-open {
  transform: none; opacity: 1; background: var(--ink);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 330ms cubic-bezier(0.4, 0, 0.6, 1) 90ms, visibility 0s linear 430ms;
}
.menu.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 406ms cubic-bezier(0.4, 0, 0.6, 1), visibility 0s; }
.menu__nav a, .menu__wx { opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity 160ms cubic-bezier(0.4, 0, 0.6, 1), transform 160ms cubic-bezier(0.4, 0, 0.6, 1); transition-delay: 0ms; }
.menu.is-open .menu__nav a, .menu.is-open .menu__wx { opacity: 1; transform: none; transition: opacity 240ms cubic-bezier(0.4, 0, 0.6, 1), transform 240ms cubic-bezier(0.4, 0, 0.6, 1); }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: 200ms; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: 220ms; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: 240ms; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: 260ms; }
.menu.is-open .menu__wx { transition-delay: 300ms; }
.menu-open .hd { border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) { .menu, .menu.is-open { transition: none !important; } }
/* ---------------------------------------------------------------- round 16: the menu on the phone's GPU only
   Phones repaint a clip-path on every frame, and locking the page's scroll made the whole long page lay out
   again on the first frame. Now the green panel is its own layer that grows with scaleY from the header's
   edge, the links only move and fade, and nothing about the page underneath changes: the menu itself
   swallows touches, so the page cannot scroll behind it. */
html.menu-open { overflow: visible; }
.menu, .menu[hidden], .menu.is-open { background: transparent; clip-path: none; contain: layout paint; transition: visibility 0s linear 430ms; }
.menu.is-open { transition: visibility 0s; }
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform-origin: 50% 0; transform: scaleY(0); will-change: transform; transition: transform 330ms cubic-bezier(0.4, 0, 0.6, 1) 90ms; }
.menu.is-open::before { transform: scaleY(1); transition: transform 406ms cubic-bezier(0.4, 0, 0.6, 1); }
.menu { isolation: isolate; }
.menu__nav a, .menu__wx { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .menu::before { transition: none !important; } }
/* ---------------------------------------------------------------- round 17: back to the fade menu
   The Apple-style growing panel felt heavy on the phone. The whole sheet now fades and settles 10 px
   (opacity + transform of one layer), the links rise one after another, and the two lines still close
   and then cross like apple.com's, as CSS transforms on two plain elements. */
.menu, .menu[hidden], .menu.is-open { background: var(--ink); clip-path: none; contain: layout paint; opacity: 0; transform: translate3d(0, -10px, 0); will-change: opacity, transform; transition: opacity 260ms ease, transform 420ms var(--ease), visibility 0s linear 420ms; }
.menu.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 260ms ease, transform 420ms var(--ease), visibility 0s; }
.menu::before { content: none; }
.menu__nav a, .menu__wx { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 200ms ease, transform 200ms ease; }
.menu.is-open .menu__nav a, .menu.is-open .menu__wx { opacity: 1; transform: none; transition: opacity 420ms ease, transform 560ms var(--ease); }
.menu.is-open .menu__nav a:nth-child(1) { transition-delay: 60ms; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: 110ms; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: 160ms; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: 210ms; }
.menu.is-open .menu__wx { transition-delay: 280ms; }

/* the two lines: meet in the middle, then turn into a cross (0.24 s, apple.com's timing); back the same way */
.hd__burger span { position: absolute; left: 12px; width: 20px; height: 1.5px; border-radius: 1px; background: var(--bg); transition: none; will-change: transform; }
.hd__burger span:nth-child(1) { top: 18px; animation: bread-top-close 240ms both; }
.hd__burger span:nth-child(2) { top: 25px; animation: bread-bot-close 240ms both; }
.menu-open .hd__burger span:nth-child(1) { transform: none; animation: bread-top-open 240ms both; }
.menu-open .hd__burger span:nth-child(2) { transform: none; animation: bread-bot-open 240ms both; }
@keyframes bread-top-open { 0% { transform: none; animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } 50% { transform: translateY(3.5px); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); } 100% { transform: translateY(3.5px) rotate(45deg); } }
@keyframes bread-bot-open { 0% { transform: none; animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } 50% { transform: translateY(-3.5px); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); } 100% { transform: translateY(-3.5px) rotate(-45deg); } }
@keyframes bread-top-close { 0% { transform: translateY(3.5px) rotate(45deg); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } 50% { transform: translateY(3.5px); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); } 100% { transform: none; } }
@keyframes bread-bot-close { 0% { transform: translateY(-3.5px) rotate(-45deg); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); } 50% { transform: translateY(-3.5px); animation-timing-function: cubic-bezier(0, 0, 0.58, 1); } 100% { transform: none; } }
.hd__burger.is-fresh span { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open, .menu__nav a, .menu__wx { transition: none !important; transform: none; }
  .hd__burger span { animation-duration: 1ms !important; }
}
/* ---------------------------------------------------------------- round 18: one typeface in the menu and the ending
   The menu's 微信 line and the footer's words were in the phone's sans; they now use the title serif, like
   the menu links and the footer's tagline beside them. Buttons stay as they are everywhere. */
.menu__wx, .ft__nav a, .ft__wx p, .ft__mark, .ft__thai-k, .ft__thai-d { font-family: var(--serif); font-weight: 400; }
.menu__wx { font-size: 16px; letter-spacing: 0.12em; }
.ft__nav a { font-size: 16px; }
.ft__wx p { font-size: 16px; letter-spacing: 0.1em; }@media (max-width: 700px) { .ft__mark { letter-spacing: 0; font-size: 11.5px; } }

/* ---------------------------------------------------------------- round 19: from the menu to the next page, one motion
   Tapping a menu link no longer plays the menu's closing animation first: the open menu cross-fades straight
   into the next page while the header stays put, and the next page's heading settles a little, inside the
   same fade. Nothing runs one after another. */
.hd { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { animation: none; opacity: 0; }
::view-transition-new(site-header) { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .pagehead { animation: none; }
  .pagehead .h1, .pagehead .h1 + *, .pagehead .lead ~ *, .pagehead .jump { animation-name: settle-soft; animation-duration: 520ms; }
  .pagehead .h1 + * { animation-delay: 60ms; }
  .pagehead .lead ~ *, .pagehead .jump { animation-delay: 120ms; }
}
@keyframes settle-soft { from { opacity: 0; transform: translateY(8px); } }
.no-anim .menu, .no-anim .menu *, .no-anim .hd__burger span { transition: none !important; animation: none !important; }
/* ---------------------------------------------------------------- round 20: lighter page arrivals on phones
   The cross-page fade made the phone hold the old page, render the new one and blend both at once, which
   stuttered. The new page now simply appears and its heading settles in; the menu stays up until then, so
   there is no blank flash. The page heads' forest photo is the 800 px file on phones (136 KB, not 409 KB). */
@view-transition { navigation: none; }
.hd { view-transition-name: none; }
@media (max-width: 700px) {
  .pagehead::before { background-image: url("../assets/img/forest-rows-800.webp"); }
}
/* ---------------------------------------------------------------- round 21: menu rows that span the screen
   Each row: the page name on the left in the title serif, a short note and a chevron on the right, so the
   eye runs across the whole width instead of stopping at the left edge. The foot holds the Thai goods
   link and the WeChat ID with a copy button. */
.menu__nav a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 0; font-size: 28px; letter-spacing: 0.2em; }
.menu__nav a::after { content: ""; width: 9px; height: 9px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; margin-right: 4px; }
.menu__t { line-height: 1.2; }
.menu__d { justify-self: end; font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; color: rgba(244, 239, 228, 0.5); }
.menu__nav a[aria-current] .menu__d { color: rgba(244, 239, 228, 0.75); }
.menu__nav a[aria-current] .menu__t::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; vertical-align: middle; border-radius: 50%; background: currentColor; }
.menu__foot { display: grid; gap: 14px; }
.menu__thai { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid rgba(244, 239, 228, 0.18); color: var(--bg); text-decoration: none; }
.menu__thai span { font-size: 12px; letter-spacing: 0.16em; color: rgba(244, 239, 228, 0.55); }
.menu__thai b { font-family: var(--serif); font-weight: 400; font-size: 20px; letter-spacing: 0.08em; }
.menu__wx { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu__wx .pill { border-color: rgba(244, 239, 228, 0.35); color: var(--bg); background: transparent; }
.menu__thai { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 200ms ease, transform 200ms ease; }
.menu.is-open .menu__thai { opacity: 1; transform: none; transition: opacity 420ms ease 250ms, transform 560ms var(--ease) 250ms; }
.no-anim .menu__thai { transition: none !important; }.menu__d { font-family: var(--serif); font-size: 14px; }