/* 松子商社 R16 — 白底文具店节奏（结构参考公开文具电商，内容自有） */
:root {
  --bg: #ffffff;
  --bg-soft: #fafafa;
  --ink: #1a1a1a;
  --ink-muted: #4a4a4a; /* ~9.7:1 on white — AA+ for body & small */
  --ink-faint: #525252; /* ~8.6:1 — captions still AA */
  --line: #f0f0f0;
  --line-strong: #e5e5e5;
  --accent: #2f4a3c; /* 松绿 — primary CTA + current-nav / active chip */
  --pad: clamp(16px, 4vw, 40px);
  /* Golden content measure ≈ 0.618 × viewport (1/φ), with a floor and a ceiling.
     Use as: width: min(100%, var(--measure)); margin-inline: auto.
     Floor 30rem (480px): phones at or under 480px CSS pixels resolve to 100%
     (full-bleed, pad only). A 20rem floor would pin a 390px phone to 320px.
     30rem meets 61.8vw near 777px, so a 768px tablet is already on the ratio
     (480px vs 475px).
     Ceiling 72rem (1152px): 61.8vw reaches it near 1864px. Wider viewports
     keep a 4-up page instead of growing into magnified cards. */
  --measure: max(30rem, min(72rem, 61.8vw));
  --serif: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Direction A — clear type scale (paper, not poster) */
  --fs-eyebrow: 12px;                          /* level 0 labels */
  --fs-caption: 13px;                          /* chips, meta, legal */
  --fs-body: 16px;                             /* default body */
  --fs-lead: 17px;                             /* lead / dual intros */
  --fs-nav: 14px;
  --fs-card: 16px;                             /* card / list titles */
  --fs-price: 15px;                            /* prices & primary numbers */
  --fs-h3: clamp(19px, 2.2vw, 23px);           /* subheads */
  --fs-h2: clamp(28px, 3.6vw, 40px);           /* section titles */
  --fs-h1: clamp(36px, 5vw, 52px);             /* page titles */
  --fs-hero: clamp(32px, 4.6vw, 48px);         /* home hero */
  --fs-num: clamp(22px, 2.8vw, 28px);          /* cart totals etc. */
  --lh-tight: 1.25;
  --lh-body: 1.7;
  --track-wide: 0.12em;
  --track-label: 0.16em;

  /* Medium radius system — soft stationery, not pill-template */
  --radius: 12px;
  --radius-sm: 12px;
  --radius-lg: 12px;

  --header-h: 68px;
  /* Middle link band. Inset is the minimum air between the links
     and the pinned logo / cart. Gap is the space between links; leftover
     width stays beside the logo and the cart instead of stretching the row. */
  --nav-inset: clamp(48px, 5vw, 104px);
  --nav-gap: 30px;
}
*, *::before, *::after { box-sizing: border-box; }
/* Author display:grid/flex beats the UA [hidden] rule, which left empty heroes and filter bars on screen. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .activity-carousel__scroller { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }
a.card:hover,
a.cat-tile:hover,
.nav a:hover,
.page-toc a:hover,
.cart-link:hover,
.cart-item__title a:hover { opacity: 1; }
.nav a:hover { color: var(--accent); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: var(--pad);
  top: 8px;
  transform: translateY(-160%);
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius);
  z-index: 80;
  letter-spacing: 0.06em;
}
.skip-link:focus {
  transform: none;
  opacity: 1;
}
button { font: inherit; cursor: pointer; }
/* Centered golden column. Header background stays full-bleed; this inner aligns nav with the page. */
.wrap {
  width: min(100%, var(--measure));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* —— Header —— */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* Soft pine wash at the top, ending in the page white. */
  background: linear-gradient(180deg, #d5e2da 0%, #e7f0eb 34%, #f5faf7 70%, #ffffff 100%);
  border-bottom: 1px solid rgba(47, 74, 60, 0.08);
}
.site-header__inner {
  /* Full-bleed bar, three tracks: logo, link band, tools.
     The outer tracks stay max-content, so the logo and the cart / language
     switch keep their edge positions. Only the middle band's inset changes. */
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 20px;
  min-height: 68px;
}
.brand {
  grid-column: 1;
  font-family: var(--serif);
  font-size: 20px; letter-spacing: var(--track-wide);
  font-weight: 500;
}
.brand span { font-weight: 400; letter-spacing: 0.18em; font-size: var(--fs-caption); color: var(--ink-muted); margin-left: 8px; }
.nav {
  grid-column: 2;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-items: safe center;
  justify-content: safe center;
  gap: var(--nav-gap);
  padding-inline: var(--nav-inset);
  margin-inline: 0;
  min-width: 0;
  font-size: var(--fs-nav);
  letter-spacing: 0.06em;
}
.nav a { white-space: nowrap; }
/* English labels are longer in this band. Tighten type only — the inset
   stays, so the links do not sit on the logo or the cart. */
@media (min-width: 1280px) and (max-width: 1480px) {
  .brand { font-size: 18px; letter-spacing: 0.08em; }
  .nav { letter-spacing: 0.02em; font-size: 13px; }
  .header-actions { gap: 10px; }
}
.nav a[aria-current="page"] { border-bottom: 1px solid var(--accent); padding-bottom: 2px; color: var(--accent); }
.header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-nav);
}
/* Below the desktop bar the links are a drawer, out of flow. Two tracks
   keep a single gap between the logo and the tools. A leftover middle
   column would count the gap twice and shove the menu button off-screen. */
@media (max-width: 1279px) {
  .site-header__inner { grid-template-columns: max-content minmax(0, 1fr); }
  .header-actions { grid-column: 2; }
}
.lang-toggle {
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  letter-spacing: 0.08em;
  font-size: var(--fs-caption);
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
.activity-band__more { margin: 16px 0 0; }
.activity-band__more a { letter-spacing: 0.08em; border-bottom: 1px solid var(--line-strong); }
.cart-link {
  position: relative;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* The count badge hangs off the link. Keep it from touching the language pill. */
  margin-inline-end: 14px;
}
.cart-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.lang-switch.fluid-slider {
  --slider-track: rgba(47, 74, 60, 0.08);
  padding: 3px;
  border-radius: 999px;
}
.lang-switch.fluid-slider > button {
  padding: 6px 12px;
  font-size: 12px;
  min-height: 32px;
  border-radius: 999px;
}
.lang-switch .fluid-slider__thumb { border-radius: 999px; }
.cart-badge {
  position: absolute; top: -8px; right: -14px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--ink); color: #fff;
  font-size: 11px; line-height: 16px; text-align: center;
}

/* Mobile menu toggle */
.nav-toggle {
  border-radius: var(--radius-sm);
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  flex-shrink: 0;
}
.nav-toggle__bars {
  display: block; width: 18px; height: 12px; position: relative;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--ink); transition: transform .2s ease, top .2s ease, opacity .2s ease;
}
.nav-toggle__bars span { top: 5px; }
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 5px; transform: rotate(-45deg); }

.nav-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.28);
}
.nav-backdrop.is-on { display: block; }

/* —— Hero —— */
.hero {
  display: grid;
  /* Copy takes more of the golden column than the plate, so the seasonal
     summary can stay one line and still hold a few more characters.
     (0.92/1 wrapped that line on a laptop; 1.15/0.85 was the full-bleed split.) */
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line);
  /* First screen is the featured module; next section starts at the fold. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  background: var(--bg);
  width: min(100%, var(--measure));
  margin-inline: auto;
}
.hero__media {
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.hero__frame {
  position: relative;
  flex: none;
  width: auto;
  height: min(62dvh, 520px);
  max-width: min(420px, 82%);
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background: #f5f2eb;
  background-clip: border-box;
  overflow: clip;
  isolation: isolate;
}
.hero__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: linear-gradient(160deg, #e8e4dc, #d4cfc4 50%, #c9c2b4);
  background-clip: border-box;
  overflow: clip;
}
.hero__media,
.hero__copy { min-width: 0; }
.hero__copy {
  display: flex; flex-direction: column; justify-content: center;
  /* Tighter than --pad (16–40px). The seasonal line needs the column. */
  padding: clamp(40px, 6vw, 80px) clamp(16px, 2vw, 20px);
  border-left: 1px solid var(--line);
}
.eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-label);
  color: var(--ink-muted); margin: 0 0 16px;
  font-weight: 500; text-transform: none;
}
.hero__copy h1 {
  font-family: var(--serif);
  font-weight: 500; font-size: var(--fs-hero);
  line-height: 1.3; margin: 0 0 22px; letter-spacing: 0.04em;
  text-wrap: balance;
}
.hero__copy p {
  color: var(--ink-muted); margin: 0 0 28px; max-width: 36em;
  font-size: var(--fs-lead); line-height: 1.75;
}
/* 28em capped the seasonal line once the column was wide enough. 36em
   keeps a reading ceiling and leaves room for a few more characters. */
#hero-summary { max-width: 36em; text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.link-quiet {
  font-size: var(--fs-nav); letter-spacing: 0.08em; color: var(--ink-muted);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
}
.link-quiet:hover { color: var(--ink); opacity: 1; border-color: var(--ink); }
.btn {
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 44px; padding: 0 28px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  letter-spacing: var(--track-wide); font-size: var(--fs-nav); font-weight: 500;
  transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(47, 74, 60, 0.16);
}
.btn--ghost {
  background: transparent; color: var(--ink); border-color: var(--ink);
}
.btn--ghost:hover { opacity: 0.75; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

/* —— Sections —— */
.section { padding: clamp(48px, 8vw, 88px) 0; border-bottom: 1px solid var(--line); width: 100%; }
.section--soft { background: var(--bg-soft); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.section__head h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h2); letter-spacing: 0.05em; margin: 0;
  line-height: var(--lh-tight);
}
.section__head a { font-size: var(--fs-nav); letter-spacing: 0.1em; color: var(--ink-muted); }
.section__head h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
  margin: 0;
  line-height: var(--lh-tight);
}

/* News list */
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 24px; padding: 20px 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body);
  text-wrap: pretty;
}
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list time { color: var(--ink-muted); font-size: var(--fs-caption); letter-spacing: 0.06em; }

/* Product grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px 20px;
}
#featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%;
  max-width: 420px;
  justify-self: start;
}
/* Shop entrance hold. The grid is filled after the iris (or after pagereveal),
   and GSAP from() only then sets the rise start. Without this, that gap paints
   every card at full opacity, then the tween hides them and plays.
   36px matches Y_CARD in motion.js. Reduced motion never uses this rule. */
@media (prefers-reduced-motion: no-preference) {
  #product-grid.motion-pending > .card {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 36px, 0);
  }
}
.card__media {
  position: relative;
  border-radius: var(--radius);
  aspect-ratio: 1;
  background: var(--bg-soft);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: clip;
  isolation: isolate;
  background-clip: border-box;
  transition: box-shadow .2s ease;
}
.card__media img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
}
.card:hover .card__media { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* legacy nested swatch removed; keep class inert if any leftover markup */
.card__swatch { display: none; }
.card__meta { display: flex; flex-direction: column; gap: 4px; }
.card__title {
  font-family: var(--serif); font-size: var(--fs-card); letter-spacing: 0.04em;
  font-weight: 500; margin: 0;
}
.card__price { font-size: var(--fs-price); color: var(--ink); letter-spacing: 0.04em; font-weight: 500; }
.card__cat { font-size: var(--fs-caption); color: #2a2a2a; letter-spacing: 0.12em; }

/* Category tiles */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cat-tile {
  overflow: clip;
  isolation: isolate;
  border-radius: var(--radius);
  --cat-tint: #efeae2;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat-tint) 72%, #fff) 0%, #fff 58%);
  padding: 36px 24px;
  text-align: center;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.cat-tile::before { content: none; }
.cat-tile {
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--cat-tint) 85%, var(--accent) 15%);
}
.cat-tile:hover {
  border-color: var(--line-strong); opacity: 1;
  box-shadow:
    inset 0 4px 0 color-mix(in srgb, var(--cat-tint) 85%, var(--accent) 15%),
    0 8px 20px rgba(47,74,60,.06);
}
.cat-tile[data-cat="stationery"] { --cat-tint: #e8dcc8; }
.cat-tile[data-cat="accessory"] { --cat-tint: #e4d4a8; }
.cat-tile[data-cat="bag"] { --cat-tint: #ddd6c8; }
.cat-tile[data-cat="apparel"] { --cat-tint: #c9d6de; }
.cat-tile[data-cat="lifestyle"] { --cat-tint: #e2cfc8; }
.cat-tile[data-cat="ip"] { --cat-tint: #e4d4a8; }
.cat-tile[data-cat="campus"] { --cat-tint: #c9d6de; }
.cat-tile[data-cat="limited"] { --cat-tint: #e8d4cc; }
.cat-tile strong {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 19px; letter-spacing: 0.1em; margin-bottom: 8px;
  position: relative;
}
.cat-tile span {
  font-size: var(--fs-nav); color: var(--ink-muted); letter-spacing: 0.08em;
  position: relative;
}

/* Store band */
.store-band {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center;
}
.store-band h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h2); letter-spacing: 0.05em; margin: 0 0 16px;
  line-height: var(--lh-tight);
}
.store-band p { color: var(--ink-muted); margin: 0 0 12px; max-width: 42ch; font-size: var(--fs-lead); }
.store-band__ph {
  border-radius: var(--radius);
  aspect-ratio: 4/3; background: var(--bg-soft); border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  background-clip: border-box;
  overflow: clip;
  background-image: linear-gradient(160deg, #f5f2eb, #e8e4dc 55%, #ddd6c8);
}

/* Home — 活动动态: copy left, synced image carousel right */
.activity-band,
.foundation-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.activity-band h2,
.foundation-band h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  line-height: var(--lh-tight);
}
.activity-band__meta {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.06em;
}
.activity-band__summary {
  margin: 0;
  max-width: 42ch;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.75;
  text-wrap: pretty;
}
.activity-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 22px;
}
.activity-navbtn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  letter-spacing: 0.08em;
  font-size: var(--fs-nav);
}
.activity-navbtn:hover { border-color: var(--accent); color: var(--accent); opacity: 1; transform: translateY(-1px); }
.activity-navbtn:active { transform: scale(0.97); }
.activity-controls__status {
  margin: 0;
  min-width: 3.5em;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
}
.activity-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-basis: 100%;
  gap: 0;
  margin-top: 0;
}
.activity-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}
.activity-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #cfcfcf;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.activity-dot[aria-current="true"]::before { background: var(--accent); }
.activity-navbtn:focus-visible,
.activity-dot:focus-visible,
.activity-carousel__scroller:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.activity-carousel {
  min-width: 0;
  border-radius: var(--radius);
  overflow: clip;
  isolation: isolate;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  background-clip: border-box;
}
.activity-carousel__scroller {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.activity-carousel__scroller::-webkit-scrollbar { display: none; }
.activity-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
}
.activity-slide__ph,
.activity-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.activity-slide__ph { border-radius: 0; }

/* Home — 松子基金会: image left, text right */
.foundation-band__media {
  border-radius: var(--radius);
  overflow: clip;
  isolation: isolate;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  background: var(--bg-soft);
  background-clip: border-box;
}
.foundation-band__ph {
  aspect-ratio: 4 / 3;
  background-image: linear-gradient(155deg, #eef3ef, #c5d5cb 46%, #8ea497);
}
.foundation-points {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.foundation-points li {
  display: grid;
  gap: 4px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.foundation-points li:last-child { border-bottom: 1px solid var(--line); }
.foundation-points strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-card);
  letter-spacing: 0.04em;
}
.foundation-points span {
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
  text-wrap: pretty;
}
.foundation-band__lead {
  margin: 0 0 22px;
  max-width: 38ch;
  color: var(--ink-muted);
  font-size: var(--fs-lead);
  line-height: 1.75;
  text-wrap: pretty;
}

/* Footer — three even columns. The old 4-track grid left a blank lane. */
.site-footer {
  padding: 56px 0 36px;
  background: linear-gradient(180deg, #f4f7f5 0%, #ffffff 42%);
  border-top: 1px solid rgba(47, 74, 60, 0.12);
  font-size: var(--fs-nav); color: var(--ink-muted); letter-spacing: 0.04em;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 32px 40px;
  align-items: start;
  margin-bottom: 32px;
}
.site-footer h3 {
  font-family: var(--serif); font-size: var(--fs-nav); font-weight: 500;
  color: var(--ink); letter-spacing: 0.1em; margin: 0 0 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer p { margin: 0; text-wrap: pretty; line-height: 1.7; }
.site-footer__brand p + p { margin-top: 12px; }
.site-footer__pages ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
.site-footer__contact ul { display: grid; gap: 12px; }
.site-footer a {
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.site-footer a:hover { opacity: 1; color: var(--accent); border-bottom-color: currentColor; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--ink-muted);
}

/* —— Shop / filter page —— */
.page-head {
  /* padding-block only — keep .wrap padding-inline so heads align with content */
  padding-block: 52px 32px;
  padding-inline: var(--pad); /* explicit in case class order/specificity shifts */
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h1); letter-spacing: 0.06em; margin: 0 0 14px;
  line-height: var(--lh-tight);
}
.page-head h1:last-child { margin-bottom: 0; }
/* Same title-only band as .faq-page. The 14px under the h1 was the lead
   gap; with that line gone the shared 52/32 padding holds the title. */
.cart-page .page-head { border-bottom: 1px solid var(--line); }
.cart-page .page-head h1 { margin-bottom: 0; }
.page-head p { margin: 0; color: var(--ink-muted); font-size: var(--fs-lead); line-height: 1.7; text-wrap: pretty; }
.page-head p + p { margin-top: 0.85em; }
.filters {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0;
}
.filters.fluid-slider {
  flex-wrap: nowrap;
  gap: 0;
  width: max-content;
  max-width: 100%;
  margin-block: 22px 8px;
  padding: 4px;
  border-radius: 999px;
  background: #eceae4;
  border: 1px solid rgba(47, 74, 60, 0.1);
}
.filter-chip {
  border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg);
  min-height: 44px;
  padding: 8px 16px; font-size: var(--fs-nav); letter-spacing: 0.1em; color: var(--ink-muted);
}
.filter-chip.is-active, .filter-chip[aria-pressed="true"] {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.filters.fluid-slider {
  --slider-thumb: #1f3a2c;
}
.filters.fluid-slider > .filter-chip {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #3a3a3a;
  padding-inline: 22px;
}
.filters.fluid-slider > .filter-chip[aria-pressed="true"],
.filters.fluid-slider > .filter-chip.is-active {
  background: var(--slider-thumb);
  color: #fff;
}
/* Once the thumb is placed it is the only dark shape, at rest and while
   it moves. Painting the chip as well swapped an 8px rounded rect for the
   thumb's capsule at the start and end of every click. */
.filters.fluid-slider.is-ready > .filter-chip[aria-pressed="true"],
.filters.fluid-slider.is-ready > .filter-chip.is-active,
.filters.fluid-slider.is-sliding > .filter-chip,
.filters.fluid-slider.is-sliding > .filter-chip[aria-pressed="true"],
.filters.fluid-slider.is-sliding > .filter-chip.is-active {
  background: transparent;
  border-color: transparent;
}
/* Match the chip radius from `.fluid-slider > button` (8px). A 999px
   thumb becomes a circle on the short labels. */
.filters.fluid-slider .fluid-slider__thumb {
  border-radius: 8px;
}
/* Shop index only. Other pages keep the hairline under the title.
   The pill used to sit on 32px of title padding plus a 22px top margin,
   and only 8px above the cards. Drop the rule and let the bar's own
   margins hold it between the lead and the grid, with a little more
   air under the control than above it. */
.shop-page .page-head {
  border-bottom: 0;
  padding-bottom: 0;
}
.shop-page .filters.fluid-slider {
  margin-block: 28px 36px;
}

/* —— PDP —— */
.pdp {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-bottom: 1px solid var(--line);
  min-height: 70vh;
  width: min(100%, var(--measure));
  margin-inline: auto;
}
.pdp__media {
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  border-right: 1px solid var(--line);
}
.pdp__ph {
  border-radius: var(--radius);
  width: min(440px, 88%); aspect-ratio: 1;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  background-clip: border-box;
  overflow: clip;
}
.pdp__info { padding: clamp(40px, 6vw, 72px) var(--pad); }
/* Desktop only: the column is side by side from 1200, same edge as the drawer. */
@media (min-width: 1200px) {
  .pdp__info { padding-inline-start: calc(var(--pad) + clamp(24px, 2.5vw, 40px)); }
}
.pdp__info h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h2); letter-spacing: 0.05em; margin: 0 0 14px;
  line-height: var(--lh-tight);
}
.pdp__price { font-size: var(--fs-num); margin: 0 0 24px; letter-spacing: 0.04em; font-weight: 500; color: var(--ink); }
.pdp__summary {
  color: var(--ink-muted); margin: 0 0 16px; max-width: 28em;
  font-size: var(--fs-lead); line-height: 1.75; text-wrap: pretty;
}
.pdp__materials {
  font-size: var(--fs-caption); color: #2a2a2a; margin: 0 0 32px;
  letter-spacing: 0.04em; text-wrap: pretty;
}
/* Short sentences stay on one line; the break falls between them. */
.keep-phrase { white-space: nowrap; }
.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.qty-row label { font-size: var(--fs-nav); letter-spacing: 0.1em; color: var(--ink-muted); }
.qty-row input {
  border-radius: var(--radius-sm);
  width: 64px; height: 40px; border: 1px solid var(--line-strong);
  text-align: center; background: var(--bg);
}
.pdp__actions { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.toast {
  border-radius: var(--radius-sm);
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: var(--fs-nav);
  letter-spacing: 0.08em; opacity: 0; pointer-events: none; transition: .25s ease; z-index: 100;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* —— Cart / Checkout —— */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th {
  text-align: left; font-weight: 500; font-size: var(--fs-caption); letter-spacing: 0.14em;
  color: var(--ink-muted); padding: 0 0 12px; border-bottom: 1px solid var(--line);
}
.cart-table td { padding: 20px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-item { display: flex; align-items: center; gap: 16px; }
.cart-item__swatch {
  border-radius: var(--radius-sm); width: 64px; height: 64px; border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  flex-shrink: 0; background-size: cover; overflow: clip; background-clip: border-box; }
.cart-item__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cart-item__title { font-family: var(--serif); font-size: var(--fs-card); margin: 0 0 4px; font-weight: 500; }
.cart-item__rm {
  border: 0; background: 0; padding: 0;
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--ink-muted); font-size: var(--fs-caption); cursor: pointer;
  touch-action: manipulation;
  transition: color 160ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-item__rm:hover { color: var(--ink); transform: translateY(-1px); }
.cart-item__rm:active { transform: scale(0.97); color: var(--ink); }
.cart-empty, .empty-state {
  padding: 56px 0 72px;
  text-align: center;
  color: var(--ink-muted);
}
.grid > .empty-state,
.grid > .cart-empty { grid-column: 1 / -1; }
.cart-empty .btn, .empty-state .btn { margin-top: 20px; }
.missing-product {
  margin: clamp(48px, 10vh, 96px) auto;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f4ee;
  text-align: center;
  box-shadow: 0 16px 40px rgba(47, 74, 60, 0.06);
}
.missing-product h1 { margin: 0 0 12px; }
.missing-product p { margin: 0 auto 20px; max-width: 28em; color: var(--ink-muted); }
.hero__cycle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 10px;
  margin-top: 22px;
  width: 100%;
  max-width: 100%;
}
.hero__cycle .hero__switch {
  margin-top: 0;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  row-gap: 6px;
  height: auto;
}
.hero__cycle .hero__switch:not(.hero__switch--dots) {
  flex-wrap: nowrap;
  overflow-x: auto;
  height: auto;
}
.hero__cycle .hero__switch:not(.hero__switch--dots) > button {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(100%, 22rem);
  min-width: 0;
}
.hero__switch--dots {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  gap: 0;
  overflow: visible;
}
.hero__dot {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  max-width: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  overflow: visible;
}
.hero__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ink);
  opacity: 0.28;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}
.hero__dot[aria-selected="true"]::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
}
.hero__dot:hover::before {
  transform: translate(-50%, -50%) scale(1.2);
}
.hero__dot[aria-selected="true"]:hover::before {
  transform: translate(-50%, -50%) scale(1.35);
}
.hero__dot:active::before {
  transform: translate(-50%, -50%) scale(0.97);
}
.hero__dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero__dot::before { transition: none; }
  .hero__dot:hover::before,
  .hero__dot:active::before,
  .hero__dot[aria-selected="true"]::before,
  .hero__dot[aria-selected="true"]:hover::before {
    transition: none;
  }
}
.hero__meter {
  grid-column: 1;
  grid-row: 2;
  height: 2px;
  border-radius: 2px;
  background: rgba(47, 74, 60, 0.16);
  overflow: hidden;
}
.hero__meter > span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}
.page-pad { padding-bottom: 72px; }
/* Cart inset is the list-padding rule: row text never sits on the sheet edge. */
#cart-root { --cart-inset: 24px; }
.cart-summary {
  margin-top: 28px;
  padding: 22px var(--cart-inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f4ee;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px 32px;
}
.cart-summary .note-pay {
  flex: 1 1 18rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 36em;
  word-break: keep-all;
}
#checkout-lead { word-break: keep-all; }
.cart-summary__pay {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.cart-summary__total {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.cart-summary__figure {
  font-family: var(--serif);
  font-size: var(--fs-num);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.note-pay {
  border-radius: var(--radius-sm);
  margin-top: 16px; padding: 14px 16px; background: var(--bg-soft);
  border: 1px solid var(--line); font-size: var(--fs-nav); color: var(--ink); max-width: 480px;
}
.form-grid { display: grid; gap: 16px; max-width: 520px; }
.form-grid label { display: grid; gap: 6px; font-size: var(--fs-nav); letter-spacing: 0.08em; color: var(--ink-muted); }
.form-grid input, .form-grid textarea, .form-grid select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg);
  padding: 12px 14px; font: inherit; color: var(--ink);
}
.form-grid textarea { min-height: 100px; resize: vertical; }
.form-grid input:user-invalid,
.form-grid textarea:user-invalid { border-color: #8d3b32; }
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
  padding-bottom: 80px;
}
.order-summary h2 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  letter-spacing: 0.06em;
  font-weight: 500;
  margin: 0 0 16px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-nav);
}
.summary-total {
  font-family: var(--serif);
  font-size: var(--fs-num);
  font-weight: 500;
  margin: 16px 0 0;
}
.order-banner {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: #f4f8f5;
  color: var(--ink);
}
.order-banner strong {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.order-banner p { margin: 6px 0 0; color: var(--ink-muted); font-size: var(--fs-nav); }
#cart-root > .cart-sheet { margin-top: 28px; }
.cart-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.cart-sheet--empty .empty-state { padding: 56px var(--cart-inset) 64px; }
.cart-list { display: grid; }
.cart-line {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 28px;
  align-items: center;
  padding: 20px var(--cart-inset);
}
.cart-line.is-leaving { pointer-events: none; overflow: hidden; }
.cart-line + .cart-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--cart-inset);
  right: var(--cart-inset);
  height: 1px;
  background: var(--line);
}
.cart-line .cart-item { min-width: 0; align-items: center; }
.cart-line__copy { min-width: 0; }
.cart-line .cart-item__title { margin: 0; text-wrap: pretty; }
.cart-line .cart-item__title a:hover { color: var(--accent); }
.cart-line__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 8px;
}
.cart-line__unit {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.cart-line__kicker {
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 500;
}
.cart-line__unit .cart-line__kicker {
  font-size: inherit;
  letter-spacing: 0.08em;
}
.cart-line__amt { font-variant-numeric: tabular-nums; }
.cart-line__each { letter-spacing: 0.04em; }
.cart-line__note {
  margin: 6px 0 0;
  color: #8d3b32;
  font-size: var(--fs-nav);
  line-height: 1.45;
}
.cart-line .cart-item__rm { margin-top: 2px; }
.cart-stepper {
  display: inline-grid;
  grid-template-columns: 44px 3.25rem 44px;
  align-items: stretch;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  box-sizing: border-box;
}
.cart-stepper:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong)); }
.cart-stepper:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.cart-stepper__btn {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  border-radius: 10px;
  touch-action: manipulation;
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1), background .18s ease, color .18s ease;
}
.cart-stepper__btn:hover:not(:disabled) {
  background: #f4f8f5;
  color: var(--accent);
}
.cart-stepper__btn:active:not(:disabled),
.cart-stepper__btn.is-pressed:not(:disabled) {
  transform: scale(0.97);
  background: #e4eee8;
  color: var(--accent);
  transition-duration: 40ms;
}
.cart-stepper__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.cart-stepper__btn:disabled {
  color: var(--ink-faint);
  opacity: 0.35;
  cursor: not-allowed;
}
.cart-stepper__icon { width: 16px; height: 16px; display: block; }
.cart-stepper__input {
  border: 0;
  border-inline: 1px solid var(--line-strong);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  align-self: stretch;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
  box-sizing: border-box;
}
.cart-stepper__input:focus,
.cart-stepper__input:focus-visible { outline: none; }
.cart-line__sub {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  gap: 2px;
  min-width: 6.5rem;
}
.cart-line__amount {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.faq-page .section {
  /* The section rule plus the footer rule drew a second full-bleed line in the empty band. */
  border-bottom: 0;
  padding-bottom: clamp(36px, 6vw, 64px);
}
.faq-page .page-head { border-bottom: 1px solid var(--line); }
.faq-page .page-head h1 { margin-bottom: 0; }
.faq-list { display: grid; gap: 18px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0 18px;
}
.faq-item summary {
  cursor: pointer;
  min-height: 60px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: translateY(-2px) rotate(45deg);
}
.faq-item[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq-item p {
  margin: 0;
  padding: 0 28px 20px 2px;
  color: var(--ink-muted);
  max-width: 62ch;
  font-weight: 400;
  line-height: 1.75;
  text-wrap: pretty;
}

/* —— Home dual module (关于我们 | 动态) —— */
.dual-mod {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.dual-mod__col {
  padding-right: clamp(20px, 3vw, 40px);
}
.dual-mod__col + .dual-mod__col {
  padding-right: 0;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--line);
}
.dual-mod__lead {
  margin: 0 0 20px;
  color: var(--ink-muted);
  max-width: 42ch;
  font-size: var(--fs-lead);
  line-height: 1.75;
  text-wrap: pretty;
}
.award-teasers,
.teaser-list {
  list-style: none; margin: 0; padding: 0;
}
.award-teasers li,
.teaser-list li {
  display: grid; gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.award-teasers li:last-child,
.teaser-list li:last-child { border-bottom: 1px solid var(--line); }
.award-teasers strong,
.teaser-list strong {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-card); letter-spacing: 0.04em;
}
.award-teasers span,
.teaser-list span {
  font-size: var(--fs-caption); color: var(--ink-muted); letter-spacing: 0.04em;
}
.dual-mod--close .dual-mod__col + .dual-mod__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, #efeae2 40%, #fff) 0%, #fff 72%);
  padding: clamp(22px, 3vw, 32px);
}

/* —— Info pages (about / news) —— */
.page-toc-bar {
  border-bottom: 1px solid var(--line);
  padding-block: 16px 18px;
  background: var(--bg);
}
.about-page .about-panel {
  padding-top: 28px;
  padding-bottom: clamp(40px, 6vw, 72px);
}
.about-page .about-panel .section__head { margin-bottom: 18px; }
.section__tag {
  font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); color: var(--ink-muted); font-weight: 500;
}
.info-block { max-width: none; }
.info-prose { max-width: 40em; }
.info-lead {
  margin: 0 0 28px; color: var(--ink-muted); max-width: none;
  font-size: var(--fs-lead); line-height: 1.75; text-wrap: pretty;
}
.dept-grid + .info-lead { margin-top: 28px; }
.info-prose h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h3); letter-spacing: 0.05em; margin: 32px 0 12px;
}
.info-prose h3:first-child { margin-top: 0; }
.info-prose p {
  margin: 0 0 14px; color: var(--ink-muted); max-width: none;
  font-size: var(--fs-body); line-height: 1.8; text-wrap: pretty;
}
.info-list {
  list-style: none; margin: 0; padding: 0;
}
.info-list li {
  display: grid; gap: 4px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.info-list li:last-child { border-bottom: 1px solid var(--line); }
.info-list strong {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-card); letter-spacing: 0.04em;
}
.info-list span { color: var(--ink-muted); font-size: var(--fs-body); line-height: 1.7; text-wrap: pretty; }
.info-list--compact li {
  grid-template-columns: 1fr;
  padding: 12px 0;
}

.dept-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.dept-grid li {
  overflow: clip;
  isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, #efeae2 55%, #fff) 0%, #fff 70%);
  padding: 28px 22px;
  position: relative;
}
.dept-grid li::before { content: none; }
.dept-grid li {
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--accent) 55%, #c9d6de);
}
.dept-grid h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h3); letter-spacing: 0.08em; margin: 0 0 10px;
}
.dept-grid p { margin: 0; color: var(--ink-muted); font-size: var(--fs-body); text-wrap: pretty; }

.timeline {
  list-style: none; margin: 0; padding: 0;
}
.timeline li {
  display: grid; grid-template-columns: 88px 1fr;
  gap: 20px; padding: 20px 0;
  border-top: 1px solid var(--line);
}
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline time {
  font-size: var(--fs-nav); letter-spacing: 0.1em; color: var(--accent);
  font-weight: 500;
}
.timeline strong {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-card); letter-spacing: 0.05em; margin-bottom: 6px;
}
.timeline p { margin: 0; color: var(--ink-muted); max-width: none; font-size: var(--fs-body); text-wrap: pretty; }

.honor-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.honor-cols h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h3); letter-spacing: 0.06em; margin: 0 0 8px;
}

.notice-board {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 8px 28px 12px;
  width: 100%;
}

.event-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.event-card {
  overflow: clip;
  isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex; flex-direction: column;
  background-clip: padding-box;
}
.event-card__link, .review-card__link { color: inherit; display: flex; flex-direction: column; min-height: 100%; }
.event-card__poster,
.review-card__media,
.archive-tile__ph {
  margin: -1px -1px 0;
  width: calc(100% + 2px);
}
.event-card__poster {
  aspect-ratio: 4/3;
  border-bottom: 1px solid var(--line);
}
.event-card__poster img,
.review-card__media img,
.archive-tile__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card__body { padding: 20px 18px 22px; }
.event-card__status {
  margin: 0 0 18px; font-size: var(--fs-eyebrow); letter-spacing: var(--track-label);
  color: var(--accent); font-weight: 500;
}
.event-card h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-card); letter-spacing: 0.04em; margin: 0 0 10px;
}
.event-meta { margin: 0; display: grid; gap: 10px; }
.event-meta div { display: grid; gap: 2px; }
.event-meta dt {
  font-size: var(--fs-eyebrow); letter-spacing: 0.12em; color: var(--ink-muted); font-weight: 500;
}
.event-meta dd { margin: 0; font-size: var(--fs-body); text-wrap: pretty; }

.review-list,
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.review-album { margin-top: 4px; }
.review-card {
  overflow: clip;
  isolation: isolate;
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--bg);
  min-height: 100%;
  background-clip: padding-box;
}
.review-card__media {
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.review-card__body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.review-card h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-h3); letter-spacing: 0.04em; margin: 0 0 8px;
}
.review-card p { margin: 0 0 12px; color: var(--ink-muted); max-width: none; font-size: var(--fs-body); line-height: 1.7; flex: 1; text-wrap: pretty; }
.review-card .eyebrow { margin-bottom: 16px; }
.review-tags {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.review-tags li {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  padding: 4px 10px; font-size: var(--fs-caption); letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.archive-album { margin-top: 8px; }
.archive-grid {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.archive-tile {
  overflow: clip;
  isolation: isolate;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 14px;
  background-clip: padding-box;
}
.archive-tile__ph {
  aspect-ratio: 4/3; border-bottom: 1px solid var(--line);
}
.archive-tile strong {
  font-family: var(--serif); font-weight: 500;
  font-size: var(--fs-card); letter-spacing: 0.04em;
  padding: 0 12px; margin-top: 10px;
}
.archive-tile span {
  font-size: var(--fs-caption); color: var(--ink-muted);
  letter-spacing: 0.06em; padding: 0 12px;
}
.archive-pager {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 16px 24px;
}
.archive-pager__status {
  margin: 0; font-size: var(--fs-nav); letter-spacing: 0.08em; color: var(--ink-muted);
}
.archive-pager .btn:disabled {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
/* Author display:flex on the cards beats the UA [hidden] rule and left every page on screen. */
[data-archive-list] > [hidden],
[data-archive-list] > .is-paged-out {
  display: none !important;
}

/* —— Responsive ——
   Desktop ≥1280: horizontal nav on the full-bleed header. Page content stays on the golden column.
   Below 1280 the nine labels use the drawer.
   Tablet 641–1199: drawer nav, 2-up shop, stacked editorial modules, departments stay 2×2.
   Phone ≤640: one product per row, departments stack.
   Keep the drawer query in sync with js/nav.js (min-width: 1280px). */
@media (max-width: 1199px) {
  .hero, .pdp, .store-band, .dual-mod, .activity-band, .foundation-band { grid-template-columns: 1fr; }
  /* Fullscreen hero is the desktop poster. Stacked, it should be as tall as its content. */
  .hero { min-height: 0; }
  .hero__frame { height: min(34dvh, 260px); max-width: 72%; }
  .hero__media { padding: clamp(16px, 4vw, 28px); }
  .hero__copy { padding: clamp(20px, 4vw, 32px) var(--pad); }
  .hero__copy h1 { margin-bottom: 12px; }
  .hero__copy p { margin-bottom: 16px; }
  .dual-mod__col { padding-right: 0; }
  .dual-mod__col + .dual-mod__col {
    padding-left: 0; padding-top: 32px; margin-top: 8px;
    border-left: 0; border-top: 1px solid var(--line);
  }
  .hero__copy, .pdp__media { border-left: 0; border-right: 0; border-top: 1px solid var(--line); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .honor-cols, .event-grid { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__contact { grid-column: 1 / -1; }
  .review-list, .review-grid { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  .pdp { min-height: 0; }
  .cart-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 8px;
  }
  .site-footer a { display: inline-block; padding-block: 6px; }

  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: fixed;
    flex: none;
    justify-content: flex-start;
    margin-inline: 0;
    top: var(--header-h); left: 0; right: 0;
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    font-size: 15px;
  }
  .nav.is-open { display: flex; }
  .nav a {
    position: relative;
    /* Match the golden column's text edge, including when the panel is full-bleed. */
    padding-block: 14px;
    padding-inline: max(var(--pad), calc((100% - var(--measure)) / 2 + var(--pad)));
    border-bottom: 1px solid var(--line);
  }
  .nav a[aria-current="page"] {
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    color: var(--accent);
    font-weight: 500;
  }
  .nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    left: calc(max(var(--pad), (100% - var(--measure)) / 2 + var(--pad)) - 14px);
  }
}
/* Drawer below 1280px. At 1280 and up the labels stay one row; --nav-gap is unchanged. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: fixed;
    flex: none;
    justify-content: flex-start;
    margin-inline: 0;
    top: var(--header-h); left: 0; right: 0;
    z-index: 45;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.06);
    font-size: 15px;
  }
  .nav.is-open { display: flex; }
  .nav a {
    position: relative;
    padding-block: 14px;
    padding-inline: max(var(--pad), calc((100% - var(--measure)) / 2 + var(--pad)));
    border-bottom: 1px solid var(--line);
  }
  .nav a[aria-current="page"] {
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    color: var(--accent);
    font-weight: 500;
  }
  .nav a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent);
    left: calc(max(var(--pad), (100% - var(--measure)) / 2 + var(--pad)) - 14px);
  }
}
/* Short windows: keep 本季主推 inside one screen so the title and CTA stay in view. */
@media (max-height: 520px) {
  .hero__media { padding: 16px; }
  .hero__frame { height: min(42dvh, 240px); }
  .hero__cycle { margin-top: 10px; row-gap: 0; }
  .hero__meter { display: none; }
  .hero__copy { padding: 16px var(--pad); }
  .hero__copy h1 { margin-bottom: 8px; }
  .hero__copy p { margin-bottom: 10px; }
}
@media (max-width: 1199px) and (max-height: 520px) {
  .hero__media { padding: 8px 12px; }
  .hero__frame { height: min(18dvh, 88px); }
  .hero__copy { padding: 8px var(--pad) 12px; }
  .hero__copy h1 { font-size: clamp(26px, 6vw, 34px); margin-bottom: 6px; }
  .hero__copy p { margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
  .hero .eyebrow { margin-bottom: 4px; }
}
@media (max-width: 480px) {
  .site-header__inner { gap: 8px; }
  .header-actions { gap: 6px; }
  .brand { letter-spacing: 0.06em; }
  .brand span { margin-left: 6px; letter-spacing: 0.12em; }
  .cart-link { padding-inline: 0; gap: 4px; }
  .lang-switch.fluid-slider > button { padding-inline: 8px; }
}
@media (max-width: 380px) {
  .brand { font-size: 17px; }
  .lang-switch.fluid-slider > button { padding-inline: 6px; }
}
@media (max-width: 640px) {
  #cart-root { --cart-inset: 16px; }
  .cart-line { align-items: start; column-gap: 12px; }
  .cart-line__sub { min-width: 4.75rem; }
  .cart-summary__pay { width: 100%; }
  .cart-summary .btn { width: 100%; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #featured-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr; }
  .site-footer__pages ul { grid-template-columns: 1fr 1fr; }
  .news-list li { grid-template-columns: 1fr; gap: 4px; }
  .timeline li { grid-template-columns: 1fr; gap: 6px; }
  .archive-grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* Body copy uses pretty so long Chinese lines do not stretch to equal rags.
   Short headings stay balanced. keep-phrase still refuses a one-character wrap. */
p, li, dd { text-wrap: pretty; }
h1, h2, h3, .card__title { text-wrap: balance; }
/* text-wrap on body spans is more specific than a class-only nowrap. */
span.keep-phrase { white-space: nowrap; text-wrap: nowrap; }

/* —— Motion (onetake-bold: 油纸掀开 + 松绿墨迹 iris + impact) —— */
:root {
  --iris-x: 50%;
  --iris-y: 42%;
  /* Viewport diagonal. iris-boot.js replaces this with the exact cover radius. */
  --iris-r: 150vmax;
  --iris-ease: cubic-bezier(0, 0, 0.58, 1);
  --iris-dur: 0.72s;
}

@view-transition {
  navigation: auto;
}

/* One iris. The group must not also ease width/height: a long page and a
   short page differ by the scrollbar lane, and that second interpolation
   lands after the circle has already opened. Snap the group; only the
   circle moves. Snapshots stay at their intrinsic pixels (no stretch). */
html:active-view-transition {
  scroll-behavior: auto;
}
::view-transition-group(root) {
  animation-duration: 1ms;
  animation-timing-function: step-end;
}
::view-transition-image-pair(root) {
  isolation: isolate;
}
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  height: 100%;
  object-fit: none;
  object-position: left top;
  overflow: clip;
}
/* Old page holds. It does not fade and it does not scale. */
::view-transition-old(root) {
  animation: otk-ink-hold 0.72s linear both;
}
/* Ease-out across the whole cover radius. A 150% circle with a steep
   ease finished on screen in ~140ms and then held, frozen, until 620ms.
   Duration and easing are literal: these pseudos do not reliably inherit
   custom properties, so a var() here would drop the animation. */
::view-transition-new(root) {
  animation: otk-iris-open 0.72s cubic-bezier(0, 0, 0.58, 1) both;
}
@keyframes otk-iris-open {
  from {
    clip-path: circle(0px at var(--iris-x, 50%) var(--iris-y, 42%));
  }
  to {
    clip-path: circle(var(--iris-r, 150vmax) at var(--iris-x, 50%) var(--iris-y, 42%));
  }
}
@keyframes otk-ink-hold {
  from, to { opacity: 1; }
}

/* Fallback curtain for browsers without cross-document view transitions.
   Same origin, same ease. Cover, then open — one curve each, no bounce. */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: #2f4a3c;
  clip-path: circle(0px at var(--iris-x, 50%) var(--iris-y, 42%));
  transition: clip-path 0.72s cubic-bezier(0, 0, 0.58, 1);
  transform: translateZ(0);
}
.page-curtain.is-covering {
  pointer-events: auto;
  will-change: clip-path;
}
.page-curtain.is-on {
  clip-path: circle(var(--iris-r, 150vmax) at var(--iris-x, 50%) var(--iris-y, 42%));
}
.page-curtain.is-exit {
  transition-duration: 0.5s;
}

/* maskRise clip host for titles */
.otk-mask {
  overflow: hidden;
  display: block;
}
.section__head.otk-mask,
.page-head.otk-mask,
.hero__copy.otk-mask {
  overflow: hidden;
}

/* paper-lift removed: stacked with GSAP hero reveals (double hitch) */
html.otk-entered main {
  animation: none;
}
@keyframes otk-paper-lift {
  from, to { opacity: 1; transform: none; }
}

.btn {
  transition: opacity .2s ease, background .2s ease, border-color .2s ease, transform .18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(0.97);
  opacity: 1;
  box-shadow: 0 2px 6px rgba(47, 74, 60, 0.12);
}

.toast {
  transition: opacity .28s cubic-bezier(0.16, 1, 0.3, 1), transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__frame,
.hero__ph,
.store-band__ph,
.foundation-band__ph {
  transform-origin: center center;
}

.card,
.cat-tile {
  transform-origin: 50% 80%;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  .page-curtain {
    transition: none !important;
    display: none !important;
  }
  html.otk-entered main {
    animation: none !important;
  }
  .btn:active:not(:disabled):not([aria-disabled="true"]),
  .cart-stepper__btn:active:not(:disabled),
  .cart-stepper__btn.is-pressed:not(:disabled),
  .cart-item__rm:active {
    transform: none;
  }
  .activity-carousel__scroller { scroll-behavior: auto; }
}

body.nav-open { overflow: hidden; }

@supports not (overflow: clip) {
  .cat-tile,
  .dept-grid li,
  .event-card,
  .review-card,
  .archive-tile,
  .card__media,
  .activity-carousel,
  .foundation-band__media,
  .hero__frame,
  .hero__ph,
  .pdp__ph,
  .story-cover,
  .story-figure { overflow: hidden; }
}

.story {
  width: min(100%, var(--measure));
  margin: 0 auto 64px;
}
.story-cover {
  border-radius: var(--radius);
  overflow: clip;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  background: #f3efe6;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  background-clip: border-box;
}
.story-cover img { width: calc(100% + 2px); height: calc(100% + 2px); margin: -1px; object-fit: cover; display: block; }
.story__body {
  width: min(100%, 61.8%);
  margin: clamp(8px, 2vw, 20px) auto 0;
  font-size: var(--fs-body);
  line-height: 1.8;
}
.story__body h2 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-h3); margin: 28px 0 10px; }
.story__body p { margin: 0 0 16px; color: var(--ink-muted); }
.story__body blockquote { margin: 0 0 16px; padding-left: 14px; border-left: 3px solid var(--accent); }
.story-figure {
  margin: 20px 0;
  border-radius: var(--radius);
  overflow: clip;
  isolation: isolate;
  background-clip: border-box;
}
.story-figure img { width: calc(100% + 2px); margin: -1px; display: block; object-fit: cover; }