/* ==========================================================================
   YUNORA — Core stylesheet
   Design language: Eastern nature · jade · fortune · stillness
   雲 (nature/freedom) · 韻 (grace/balance) · 運 (fortune)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts — all self-hosted, none fetched from a third party.

   The site is aimed at the United States and built in China, and Google Fonts
   is unreachable from one of those. Hosting the files here is the only way both
   audiences see the same page rather than one seeing Georgia and 楷体.

     Cormorant Garamond   display     latin subset       OFL 1.1
     Inter                body        latin subset       OFL 1.1
     段宁毛笔行艺体        brush       22 characters      see NOTICE-brush.txt
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/inter-latin-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
/* 毛笔行艺 — running brush. 段宁毛笔行艺体, subset from 20 MB to 19 KB. It carries
   both 雲韻運 and 云韵运, which is why the display characters could go back to
   the traditional forms the seal uses. Only three are rendered today; the
   subset holds 22 so the brush can spread without a rebuild. */
@font-face {
  font-family: "YUNORA Brush";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yunora-brush.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   1. Design tokens

   The palette is built on five elements, each a real colour of jadeite:
     水  Water    green   翠      flow, life
     土  Earth    yellow  黄翡    ground, fortune
     火  Fire     red     红翡    warmth, protection
     气  Air      white   白翡    breath, stillness
     玄  Mystery  black   墨翠    the unknown
   -------------------------------------------------------------------------- */
:root {
  /* 玄 — Mystery. Black jadeite is black in the hand and green in the sun,
     so every dark in this palette leans green and never neutral. */
  --ink-900: #0A1410;
  --ink-800: #101E19;
  --ink-700: #1B3128;
  --ink-600: #2A4A3D;

  /* 水 — Water. Green: the heart of the brand. */
  --jade-700: #235744;
  --jade-600: #2E6B55;
  --jade-500: #3F8468;
  --jade-400: #6BA88C;
  --jade-300: #9CC7B2;
  --jade-200: #C7DFD3;
  --jade-100: #E4EFE9;

  /* 气 — Air. Rice paper, snow, 白翡. */
  --rice-100: #FDFBF6;
  --rice-200: #F6F2E8;
  --rice-300: #EBE4D5;
  --rice-400: #D8CFBB;

  /* 土 — Earth. Honey jade and gold leaf. */
  --gold-700: #8E6F22;
  --gold-600: #AE8B32;
  --gold-500: #C6A253;
  --gold-400: #DCC183;
  --gold-200: #F4E7C6;

  /* 火 — Fire. Red jadeite and cinnabar. Used sparingly and on purpose. */
  --fire-700: #7C2A1D;
  --fire-600: #9E3B2C;
  --fire-500: #B8503C;
  --fire-400: #CE7A63;
  --fire-200: #F0D3C8;
  --cinnabar: var(--fire-600);

  /* Semantic */
  --bg: var(--rice-100);
  --bg-alt: var(--rice-200);
  --fg: var(--ink-800);
  --fg-muted: #5C6F66;
  --fg-faint: #8A9791;
  --line: rgba(29, 54, 44, 0.14);
  --line-soft: rgba(29, 54, 44, 0.08);

  /* Typography */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-han: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", serif;
  /* 毛笔 — brush, for characters set large enough to show a stroke.
     Self-hosted, so every visitor gets the same brush. The system faces behind
     it only cover the swap window and any character outside the subset. */
  --font-brush: "YUNORA Brush",
                "STXingkai", "华文行楷",
                "Kaiti SC", "STKaiti", "华文楷体",
                "KaiTi", "楷体", "DFKai-SB", "BiauKai",
                var(--font-han);

  --step--1: clamp(0.75rem, 0.72rem + 0.14vw, 0.82rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2.15rem);
  --step-3: clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.2vw, 4.75rem);
  --step-5: clamp(3.4rem, 2rem + 6vw, 7.5rem);

  /* Space & rhythm */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5rem, 11vh, 9.5rem);
  --measure: 62ch;
  --shell: 1320px;

  /* Motion — everything here is slow on purpose. Stillness is a brand value. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.7s;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection {
  background: var(--jade-600);
  color: var(--rice-100);
}

:focus-visible {
  outline: 1px solid var(--jade-500);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Paper grain — laid over the whole document at very low opacity so flat
   colour fields read as stone and paper rather than screen. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink-800);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.01em;
}

/* Small-caps label. The connective tissue of the whole site. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--jade-600);
}

.eyebrow--light { color: var(--jade-300); }
.eyebrow--gold { color: var(--gold-600); }

.lede {
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 48ch;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1.15em; }
.prose--center { margin-inline: auto; text-align: center; }

.muted { color: var(--fg-muted); }
.han {
  font-family: var(--font-han);
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 940px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vh, 6rem); }
.section--dark {
  background: var(--ink-900);
  color: var(--rice-200);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--rice-100); }
.section--dark .lede,
.section--dark .muted { color: rgba(228, 239, 233, 0.62); }
.section--alt { background: var(--bg-alt); }

/* A field for the collections to sit in. White at the left, green at the right,
   travelling the same way the three bangles do, with earth, fire and mystery
   held to the corners as accents rather than areas. */
.section--field {
  background:
    radial-gradient(48% 40% at 84% 14%, rgba(198, 162, 83, 0.26), transparent 70%),
    radial-gradient(34% 30% at 12% 82%, rgba(158, 59, 44, 0.14), transparent 72%),
    radial-gradient(40% 36% at 90% 92%, rgba(10, 20, 16, 0.14), transparent 74%),
    radial-gradient(70% 62% at 50% 48%, rgba(157, 199, 178, 0.28), transparent 72%),
    linear-gradient(100deg, #FDFBF6 0%, #F2F6F1 32%, #DFEDE4 64%, #C2DFCE 100%);
}
@media (max-width: 900px) {
  /* The row stacks, so the progression has to run top to bottom instead */
  .section--field {
    background:
      radial-gradient(52% 26% at 86% 10%, rgba(198, 162, 83, 0.24), transparent 70%),
      radial-gradient(40% 20% at 10% 62%, rgba(158, 59, 44, 0.13), transparent 72%),
      radial-gradient(46% 24% at 88% 94%, rgba(10, 20, 16, 0.13), transparent 74%),
      linear-gradient(172deg, #FDFBF6 0%, #F2F6F1 34%, #DFEDE4 66%, #C2DFCE 100%);
  }
}

.stack > * + * { margin-top: var(--stack-gap, 1.5rem); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 980px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
}

/* Section heading block */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 720px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Ornament — rules, seals, watermarks
   -------------------------------------------------------------------------- */

/* Hairline with a lozenge at its centre. Used to close sections quietly. */
.rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: min(100%, 320px);
  color: var(--gold-500);
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.55;
}
.rule__node {
  width: 5px; height: 5px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}
.rule--center { margin-inline: auto; }

/* 横印 — the cinnabar seal. A signature, not the logo.

   Three characters in a row, left to right, with 界格 rules between them. The
   red block and the characters carry separate SVG filters: #seal-press roughs
   the block's edge hard and eats holes in the ink, #seal-ink does the same to
   the glyphs far more gently so they stay readable. Split that way, the stamp
   looks pressed rather than printed without turning the name to mush.

   Markup is always: <span class="seal"><i>雲</i><i>韻</i><i>運</i></span>   */
.seal {
  --seal-h: 2.5rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  flex: none;
  width: calc(var(--seal-h) * 2.75);
  height: var(--seal-h);
  padding: calc(var(--seal-h) * 0.1);
  color: var(--rice-100);
  font-family: var(--font-han);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
/* the stone itself */
.seal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cinnabar);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1.5px rgba(253, 251, 246, 0.32);
  filter: url(#seal-press);
}
.seal i {
  position: relative;
  z-index: 1;
  font-style: normal;
  display: grid;
  place-items: center;
  font-size: calc(var(--seal-h) * 0.58);
  filter: url(#seal-ink);
}
/* 界格 — the rules between characters */
.seal i + i { box-shadow: inset 1px 0 0 rgba(253, 251, 246, 0.22); }

/* --------------------------------------------------------------------------
   5b. The logo — a five-colour ring

   Proportions are the brand: 水 green 45%, 气 white 35%, and 火 red / 土 yellow /
   玄 black sharing the remaining 20% at 6.7% each.

   The three accents are spread ~120° apart rather than bunched, so green and
   white each break into two arcs around them. Reading clockwise from the top:

     green 9.2 · red 6.7 · white 26.6 · yellow 6.7 · green 26.7 · black 6.6
     · white 8.4 · green 9.2                                    ( = 100 )

   Green opens and closes the sweep so the 0/100 seam is invisible. Every
   boundary is feathered ±2.2%, which is what makes the ring fade rather than
   band — it reads as an aura, which is the half of the name that means one.

   --edge and --lip give the ring its outline; they flip for dark grounds so the
   white arcs never dissolve into paper nor the black into night.
   -------------------------------------------------------------------------- */
.logo-ring {
  --ring-size: 1.95rem;
  --hole: 58%;
  /* The mark runs a lighter green than the UI does — at ring scale the deep
     jade reads almost black. Tune the logo here, not in --jade-*. */
  --ring-green: var(--jade-400);
  --edge: rgba(10, 20, 16, 0.3);
  --lip: rgba(10, 20, 16, 0.22);

  display: block;
  flex: none;
  width: var(--ring-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    /* outer edge and inner lip, so every segment keeps a silhouette */
    radial-gradient(circle closest-side at 50% 50%, transparent 0 87%, var(--edge) 100%),
    radial-gradient(circle closest-side at 50% 50%, transparent 0 calc(var(--hole) - 1%), var(--lip) calc(var(--hole) + 4%), transparent calc(var(--hole) + 13%)),
    conic-gradient(from -12deg,
      var(--ring-green) 0 7%,
      var(--fire-500) 11.4% 13.7%,
      var(--rice-100) 18.1% 40.3%,
      var(--gold-500) 44.7% 47%,
      var(--ring-green) 51.4% 73.7%,
      var(--ink-900) 78.1% 80.3%,
      var(--rice-100) 84.7% 88.6%,
      var(--ring-green) 93% 100%);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, #0000 0 var(--hole), #000 calc(var(--hole) + 0.8%) 100%);
          mask: radial-gradient(circle closest-side at 50% 50%, #0000 0 var(--hole), #000 calc(var(--hole) + 0.8%) 100%);
  transition: transform 2.4s var(--ease-out);
}
.site-footer .logo-ring,
.section--dark .logo-ring {
  --edge: rgba(253, 251, 246, 0.38);
  --lip: rgba(253, 251, 246, 0.28);
}
.wordmark:hover .logo-ring { transform: rotate(36deg); }

/* Oversized character set behind content at near-invisible opacity. */
.watermark {
  position: absolute;
  font-family: var(--font-han);
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 0.8;
  color: var(--ink-700);
  opacity: 0.035;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.section--dark .watermark { color: var(--jade-200); opacity: 0.05; }
.watermark--right { right: -0.12em; top: 50%; transform: translateY(-50%); }
.watermark--left { left: -0.12em; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--rice-100);
  --btn-bg: var(--ink-800);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn:hover {
  background: var(--jade-700);
  border-color: var(--jade-700);
  transform: translateY(-1px);
}
.btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-800);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--rice-100);
}

.btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--rice-100);
  border-color: rgba(251, 249, 244, 0.32);
}
.btn--light:hover {
  background: var(--rice-100);
  border-color: var(--rice-100);
  color: var(--ink-900);
}

/* Understated text link with a rule that grows on hover. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jade-700);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.link:hover { gap: 1rem; color: var(--ink-800); }
.section--dark .link { color: var(--jade-300); }
.section--dark .link:hover { color: var(--rice-100); }

/* --------------------------------------------------------------------------
   7. Header & navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.35rem;
  transition: background var(--dur) var(--ease-soft),
              padding var(--dur) var(--ease-soft),
              box-shadow var(--dur) var(--ease-soft),
              color var(--dur) var(--ease-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Over-hero state: transparent. The heroes are pale now, so the bar stays dark. */
.site-header--over { color: var(--ink-900); }
.site-header--over .nav__link { color: var(--ink-700); }
.site-header--over .wordmark { color: var(--ink-900); }
.site-header--over .nav-toggle span { background: var(--ink-900); }

/* Scrolled state: paper backdrop, dark text */
.site-header--pinned {
  background: rgba(251, 249, 244, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: 0.9rem;
  color: var(--ink-800);
}
.site-header--pinned .nav__link { color: var(--fg-muted); }
.site-header--pinned .wordmark { color: var(--ink-800); }
.site-header--pinned .nav-toggle span { background: var(--ink-800); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  color: var(--ink-800);
  transition: color var(--dur) var(--ease-soft);
}
/* The ring keeps its five colours in every header state, so it needs no
   overrides in --over / --pinned. It is the fixed point in the lockup. */
.site-header .logo-ring { --ring-size: 1.8rem; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.4vw, 2.4rem);
}
.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-block: 0.4rem;
  transition: color var(--dur) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.site-header--over .nav__link:hover,
.site-header--pinned .nav__link:hover { color: currentColor; }
.nav__link[aria-current="page"] { color: var(--jade-600); }
.site-header--over .nav__link[aria-current="page"] { color: var(--jade-700); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1px;
  width: 22px;
  background: var(--ink-800);
  transition: transform var(--dur) var(--ease-out), opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: var(--ink-900);
    clip-path: circle(0% at calc(100% - 3rem) 2.5rem);
    transition: clip-path 0.85s var(--ease-out);
  }
  .nav[data-open="true"] { clip-path: circle(150% at calc(100% - 3rem) 2.5rem); }
  .nav__link {
    font-family: var(--font-display);
    font-size: var(--step-2);
    letter-spacing: 0.16em;
    text-transform: none;
    color: var(--rice-200) !important;
  }
}

/* --------------------------------------------------------------------------
   8. Hero — the painted landscape

   Every hero carries the same 青绿山水: pale rice-paper sky, ranges dissolving
   into mist left and right, and green ink opening through the water below. The
   picture does the work the CSS ridges used to, so all of that is gone.

   Two things the composition gives us, and the layout leans on both:
   the top third is nearly empty sky — that is where the type sits — and the
   centre is open water, so a narrow viewport can crop hard to the middle and
   still keep the strongest part of the image.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* The picture is 2.33:1. Tie the hero to that ratio and it lands almost
     uncropped on a desktop; the floor keeps it usable on a phone, where it
     crops to centre, and the ceiling stops it swallowing a short laptop. */
  min-height: clamp(560px, 44vw, 94svh);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #FBF7EF;
  color: var(--ink-800);
  isolation: isolate;
}

.hero__photo,
.page-hero__photo {
  position: absolute;
  /* Overhang so the parallax never drags an edge into view */
  inset: -7% 0;
  z-index: 0;
  pointer-events: none;
  background-color: #FBF7EF;
  background-image: url("../../img/banner.png");
  background-image: image-set(
    url("../../img/banner.webp") type("image/webp"),
    url("../../img/banner.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
@media (max-width: 900px) {
  .hero__photo,
  .page-hero__photo {
    background-image: url("../../img/banner-1200.webp");
    background-image: image-set(url("../../img/banner-1200.webp") type("image/webp"));
  }
}

/* A breath of paper over the top so the type keeps its contrast at any crop.
   Weak enough that it never reaches the ink. */
.hero__photo::after,
.page-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(251, 247, 239, 0.62) 0%,
    rgba(251, 247, 239, 0.24) 34%,
    rgba(251, 247, 239, 0) 60%);
}

.hero__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
  /* weighted upward, into the empty sky */
  padding-block: 7rem 16rem;
}

.hero__wordmark {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--ink-900);
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--ink-700);
}

.hero__han {
  display: flex;
  gap: clamp(1.4rem, 4vw, 3rem);
  font-family: var(--font-han);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing: 0.3em;
  color: var(--jade-600);
  opacity: 0.75;
}

.hero__scroll {
  position: absolute;
  left: 50%; bottom: 2.4rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-700);
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--ink-700), transparent);
  animation: scroll-hint 3.2s var(--ease-soft) infinite;
  transform-origin: top;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(0.35); opacity: 0.25; }
  45% { transform: scaleY(1); opacity: 0.7; }
}

/* Page-level (non-home) hero — the same picture, shorter, cropped higher so
   the ranges rather than the ink sit behind the heading. */
.page-hero {
  position: relative;
  min-height: 60svh;
  display: grid;
  align-items: start;
  padding-block: 10.5rem 6rem;
  background: #FBF7EF;
  color: var(--ink-800);
  overflow: hidden;
}
.page-hero .page-hero__photo {
  inset: 0;
  background-position: center 34%;
}
.page-hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 780px;
}
.page-hero h1 { color: var(--ink-900); }
.page-hero .lede { color: var(--ink-700); }

/* Per-collection light. One picture, three washes over it — the collection is
   still legible at a glance without a second photograph. */
.page-hero--cloud .page-hero__photo::after {
  background:
    linear-gradient(180deg, rgba(251, 247, 239, 0.6) 0%, rgba(251, 247, 239, 0.2) 40%, rgba(251, 247, 239, 0) 66%),
    linear-gradient(160deg, rgba(233, 243, 237, 0.5), rgba(255, 255, 255, 0.16));
}
.page-hero--harmony .page-hero__photo::after {
  background:
    linear-gradient(180deg, rgba(251, 247, 239, 0.58) 0%, rgba(251, 247, 239, 0.18) 40%, rgba(251, 247, 239, 0) 66%),
    linear-gradient(160deg, rgba(199, 223, 211, 0.42), rgba(255, 255, 255, 0.1));
}
.page-hero--fortune .page-hero__photo::after {
  background:
    linear-gradient(180deg, rgba(251, 247, 239, 0.58) 0%, rgba(251, 247, 239, 0.18) 40%, rgba(251, 247, 239, 0) 66%),
    linear-gradient(160deg, rgba(244, 231, 198, 0.5), rgba(255, 255, 255, 0.12));
}

/* --------------------------------------------------------------------------
   9. Jade renders — every "photograph" on this site is drawn in CSS
   -------------------------------------------------------------------------- */
.jade {
  --j-light: #CFE6D8;
  --j-mid: #6BA88C;
  --j-deep: #235744;
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 72% 78%, var(--j-deep), rgba(0, 0, 0, 0) 62%),
    radial-gradient(circle at 62% 34%, var(--j-light), rgba(255, 255, 255, 0) 46%),
    linear-gradient(148deg, var(--j-light) 0%, var(--j-mid) 52%, var(--j-deep) 100%);
  box-shadow:
    inset 0 -14px 30px rgba(12, 24, 19, 0.34),
    inset 0 10px 24px rgba(255, 255, 255, 0.28),
    0 24px 48px -18px rgba(12, 24, 19, 0.45);
}
/* Cloudy inclusions — what makes stone read as stone and not as plastic */
.jade::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.34;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: cover;
}

/* Colour variants — the five elements, plus two in-between tones */
.jade--green { --j-light: #D2E8DA; --j-mid: #4E9174; --j-deep: #164636; }   /* 水 */
.jade--honey { --j-light: #F8ECCB; --j-mid: #D8B25C; --j-deep: #8E6F22; }   /* 土 */
.jade--red   { --j-light: #F4DACB; --j-mid: #C4694F; --j-deep: #7C2A1D; }   /* 火 · 红翡 */
.jade--white { --j-light: #FDFCF8; --j-mid: #DEE8E0; --j-deep: #A8BDB1; }   /* 气 */
.jade--ink   { --j-light: #4E7C65; --j-mid: #16291F; --j-deep: #050A07; }   /* 玄 · 墨翠 */
.jade--ice { --j-light: #F2FAF6; --j-mid: #C3E0D2; --j-deep: #7FAE97; }
.jade--lavender { --j-light: #EDE6EE; --j-mid: #BFAFC4; --j-deep: #7E6E88; }

/* 墨翠 is black in the hand and green against the sun. Give it the halo that
   says so, rather than letting it read as a hole in the page. */
.jade--ink {
  box-shadow:
    inset 0 -14px 30px rgba(0, 0, 0, 0.5),
    inset 0 10px 26px rgba(107, 168, 140, 0.4),
    0 0 34px -6px rgba(63, 132, 104, 0.45),
    0 24px 48px -18px rgba(5, 12, 8, 0.6);
}

/* Forms */
.jade--bangle {
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 41%, #000 41.6% 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 0 41%, #000 41.6% 100%);
  box-shadow: 0 24px 48px -18px rgba(12, 24, 19, 0.4);
}
.jade--cabochon {
  aspect-ratio: 4 / 5;
  border-radius: 50% / 50%;
}
.jade--pendant {
  aspect-ratio: 3 / 4;
  border-radius: 46% 46% 50% 50% / 38% 38% 62% 62%;
}
.jade--tablet {
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 12px 12px;
}
.jade--drop {
  aspect-ratio: 2 / 3;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}

/* A strand of beads */
.jade-strand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  padding: 12% 8%;
}
.jade-strand .jade { width: 15%; }

/* 月洞门 — the moon gate frame */
.moongate {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(165deg, var(--rice-200), var(--rice-300));
  box-shadow: inset 0 0 0 1px var(--line-soft);
  display: grid;
  place-items: center;
}
.moongate::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(198, 162, 83, 0.34);
  z-index: 3;
  pointer-events: none;
}
.moongate__scene {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #16332A 0%, #2A5C48 55%, #63A084 100%);
}
.moongate__han {
  position: relative;
  z-index: 2;
  font-family: var(--font-han);
  font-size: clamp(3.5rem, 9vw, 6.5rem);
  line-height: 1;
  color: rgba(251, 249, 244, 0.9);
  text-shadow: 0 4px 24px rgba(12, 24, 19, 0.4);
}

/* --------------------------------------------------------------------------
   9b. 玉镯 — the bangle gate

   A jade bangle rendered as a true annulus, with the character sitting in the
   hole. Used wherever a collection is represented, because a bangle is the
   thing itself; a moon gate is only a frame around it.

   The three rings step through one progression:
     雲  white with heavy cotton          气 → water begins
     韻  white and green interwoven       the two meeting
     運  even saturated green             water, whole
   -------------------------------------------------------------------------- */
.bangle-gate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: visible;
  container-type: inline-size;
}
.bangle-gate > * { grid-area: 1 / 1; }

.bangle {
  /* --hole is the radius of the opening as a share of half the box */
  --hole: 62%;
  --r1: #FBFBF7;
  --r2: #EDF3EE;
  --r3: #DCE9E0;
  --cotton: 0.3;
  --cotton-size: 120%;
  --cotton-turn: 0deg;

  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    /* bright lip just outside the opening */
    radial-gradient(circle closest-side at 50% 50%, transparent 0 61%, rgba(255, 255, 255, 0.6) 64%, transparent 71%),
    /* shaded outer edge */
    radial-gradient(circle closest-side at 50% 50%, transparent 0 90%, rgba(10, 20, 16, 0.3) 100%),
    /* specular crown running along the bar */
    radial-gradient(circle closest-side at 50% 50%, transparent 0 66%, rgba(255, 255, 255, 0.42) 79%, transparent 93%),
    /* key light, upper left */
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.75), transparent 42%),
    /* the colour of the stone, banded around the ring */
    conic-gradient(from 200deg,
      var(--r1) 0%, var(--r3) 13%, var(--r1) 28%, var(--r2) 41%,
      var(--r3) 55%, var(--r1) 70%, var(--r2) 85%, var(--r1) 100%);
  -webkit-mask: radial-gradient(circle closest-side at 50% 50%, #0000 0 var(--hole), #000 calc(var(--hole) + 0.7%) 100%);
          mask: radial-gradient(circle closest-side at 50% 50%, #0000 0 var(--hole), #000 calc(var(--hole) + 0.7%) 100%);
  transition: transform 1.8s var(--ease-out);
}

/* 棉絮 — the cotton. One texture, rotated and scaled differently per ring so
   no two read the same. Screened on, so it lightens rather than veils. */
.bangle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='4' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' exponent='3.4'/%3E%3CfeFuncG type='gamma' exponent='3.4'/%3E%3CfeFuncB type='gamma' exponent='3.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: var(--cotton-size) var(--cotton-size);
  background-position: center;
  opacity: var(--cotton);
  mix-blend-mode: screen;
  transform: rotate(var(--cotton-turn));
}

/* 雲 — white, thick with cotton */
.bangle--cloud {
  --r1: #FCFCF8; --r2: #EFF4F0; --r3: #DBE8DF;
  --cotton: 0.62; --cotton-size: 135%; --cotton-turn: 0deg;
}
/* 韻 — white and green interwoven, the way 飘花 runs through a stone */
.bangle--harmony {
  --r1: #F1F7F2; --r2: #A4CCB4; --r3: #3F8468;
  --cotton: 0.3; --cotton-size: 105%; --cotton-turn: 140deg;
}
/* 運 — even saturated green, cotton almost gone */
.bangle--fortune {
  --r1: #43886B; --r2: #2E6B55; --r3: #1A4C3A;
  --cotton: 0.13; --cotton-size: 165%; --cotton-turn: 250deg;
}

/* The character, held in the opening on its own paper ground */
.bangle-gate__han {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(253, 251, 246, 0.94) 0 42%, rgba(253, 251, 246, 0) 74%);
  font-family: var(--font-brush);
  font-weight: 400;
  line-height: 1;
  color: var(--jade-700);
  font-size: clamp(2.2rem, 7vw, 4.4rem);
}
@supports (font-size: 1cqw) {
  .bangle-gate__han { font-size: 36cqw; }
}

/* A bangle turns on the wrist */
.collection-card:hover .bangle { transform: rotate(9deg); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  text-align: center;
  padding: 0 clamp(0.5rem, 2vw, 1.5rem);
}
.collection-card__frame {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  transition: transform 1.1s var(--ease-out);
}
.collection-card:hover .collection-card__frame { transform: translateY(-8px); }
/* The bangle needs its own edges, so this frame must not clip */
.collection-card__frame.bangle-gate { overflow: visible; border-radius: 0; }
.collection-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 300;
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
}
.collection-card__meaning {
  font-size: var(--step--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* What the character means. This used to live in its own section further up
   the page, which meant reading the philosophy and then meeting the character
   that carries it several screens later. It belongs directly under the brush. */
.collection-card__note {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--ink-700);
}
.collection-card__note::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0.35rem auto 1.15rem;
  background: rgba(198, 162, 83, 0.55);
}

/* And what it is cut from. Quieter than the philosophy above it. */
.collection-card__material {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--fg-muted);
}

/* The three paragraphs are different lengths, so the cards are too. Pin the
   link to the floor of the stretched card and the row reads as one line. */
.collection-card .link {
  margin-top: auto;
  align-self: center;
  padding-top: 0.4rem;
}

/* Product card */
.piece {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  text-align: center;
}
.piece__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 16%;
  background: linear-gradient(170deg, var(--rice-200), var(--rice-300));
  overflow: hidden;
  transition: background 1s var(--ease-out);
}
.piece__stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 72%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 249, 244, 0.9), transparent 70%);
}
.piece__stage > * {
  position: relative;
  transition: transform 1.1s var(--ease-out);
}
.piece:hover .piece__stage > * { transform: translateY(-6px) scale(1.04); }
.piece:hover .piece__stage { background: linear-gradient(170deg, var(--rice-100), var(--jade-100)); }
.piece__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
}
.piece__meta {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.piece__price {
  font-size: 0.95rem;
  color: var(--jade-700);
  letter-spacing: 0.04em;
}

/* Value / principle card */
.value {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: rgba(251, 249, 244, 0.5);
  border: 1px solid var(--line-soft);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.value:hover { border-color: rgba(198, 162, 83, 0.4); background: var(--rice-100); }
.grid--5 .value { padding: clamp(1.25rem, 1.8vw, 1.75rem); }
.section--dark .value {
  background: rgba(228, 239, 233, 0.03);
  border-color: rgba(228, 239, 233, 0.1);
}
.section--dark .value:hover { background: rgba(228, 239, 233, 0.06); }
.value__glyph {
  font-family: var(--font-han);
  font-size: 2rem;
  line-height: 1;
  color: var(--gold-600);
}
.value h3 { font-size: var(--step-1); }
.value p { font-size: 0.95rem; color: var(--fg-muted); }
.section--dark .value p { color: rgba(228, 239, 233, 0.6); }

/* --------------------------------------------------------------------------
   11. Split feature (image / text side by side)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}
.split__body { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }

/* --------------------------------------------------------------------------
   12. Editorial lists (jade guide, process steps)
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step__index {
  counter-increment: step;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--gold-600);
}
.step__index::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { color: var(--fg-muted); max-width: 60ch; }
.section--dark .step { border-color: rgba(228, 239, 233, 0.12); }
.section--dark .step p { color: rgba(228, 239, 233, 0.6); }

/* Definition rows — used for grading tables */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.spec-table th, .spec-table td {
  text-align: left;
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec-table th {
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-700);
  white-space: nowrap;
}
.spec-table td { color: var(--fg-muted); }
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   13. Quote
   -------------------------------------------------------------------------- */
.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: 0.005em;
}
.quote figcaption {
  font-size: var(--step--1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field input,
.field textarea,
.field select {
  padding: 0.95rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 300;
  transition: border-color var(--dur) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--jade-500);
}
.field textarea { resize: vertical; min-height: 8rem; }
/* The native dropdown popup is painted by the OS — force readable colours so
   light-on-dark select text does not end up white-on-white when it opens. */
.field option { color: var(--ink-800); background: var(--rice-100); }

.section--dark .field label { color: rgba(228, 239, 233, 0.55); }
/* Lets the browser draw date pickers and select arrows for a dark surface */
.section--dark { color-scheme: dark; }
.section--dark .field input,
.section--dark .field textarea,
.section--dark .field select {
  color: var(--rice-100);
  border-bottom-color: rgba(228, 239, 233, 0.2);
}

.form-note { font-size: 0.85rem; color: var(--fg-faint); }
.form-status {
  font-size: 0.9rem;
  color: var(--jade-600);
  min-height: 1.4em;
}
.section--dark .form-status { color: var(--jade-300); }

/* Inline signup */
.signup {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.signup .field { flex: 1 1 260px; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: rgba(228, 239, 233, 0.62);
  padding-block: clamp(4rem, 8vh, 6.5rem) 2.5rem;
  position: relative;
  overflow: hidden;
}
.site-footer a { color: rgba(228, 239, 233, 0.62); transition: color var(--dur) var(--ease-out); }
.site-footer a:hover { color: var(--rice-100); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand { display: flex; flex-direction: column; gap: 1.2rem; max-width: 34ch; }
.footer-brand .wordmark { color: var(--rice-100); font-size: 1.25rem; }
.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--jade-300);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-col li { font-size: 0.92rem; }

.footer-base {
  margin-top: clamp(3rem, 6vh, 4.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(228, 239, 233, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: rgba(228, 239, 233, 0.4);
}

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. Catalogue filter
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding-block: 0.5rem;
}
.chip {
  padding: 0.6rem 1.35rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out);
}
.chip:hover { border-color: var(--jade-400); color: var(--jade-700); }
.chip[aria-pressed="true"] {
  background: var(--ink-800);
  border-color: var(--ink-800);
  color: var(--rice-100);
}
.chip__han {
  font-family: var(--font-han);
  margin-left: 0.5em;
  opacity: 0.6;
}
.piece[hidden] { display: none; }

/* --------------------------------------------------------------------------
   18. Collection intro banner (used at the top of each series page)
   -------------------------------------------------------------------------- */
.series-mark {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
/* Same three characters, same role, so the same brush */
.series-mark__glyph {
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: clamp(3.2rem, 7.5vw, 5.4rem);
  line-height: 0.9;
  color: var(--gold-600);
}
.series-mark__meta { display: flex; flex-direction: column; gap: 0.25rem; }

/* Accordion (FAQ) */
.faq { border-top: 1px solid var(--line-soft); }
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding-block: 1.35rem;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink-800);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--gold-600);
  transition: transform var(--dur) var(--ease-out);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 0.9rem; color: var(--fg-muted); max-width: 68ch; }

/* --------------------------------------------------------------------------
   19. The five elements
   水 green · 土 yellow · 火 red · 气 white · 玄 black
   -------------------------------------------------------------------------- */
.elements {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
@media (max-width: 980px) { .elements { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .elements { grid-template-columns: repeat(2, 1fr); } }

.element {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-align: center;
}
.element__stone {
  width: min(100%, 140px);
  transition: transform 1.1s var(--ease-out);
}
.element:hover .element__stone { transform: translateY(-6px) scale(1.04); }
.element__glyph {
  font-family: var(--font-han);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-500);
}
.element__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.2;
}
.element__colour {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.element__note {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 26ch;
}
.section--dark .element__note { color: rgba(228, 239, 233, 0.6); }
.section--dark .element__name { color: var(--rice-100); }
.section--dark .element__colour { color: var(--gold-400); }

/* The five colours reduced to a row of dots — a quiet signature mark */
.elements-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.elements-strip i {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(10, 20, 16, 0.12);
}
.e-water { background: var(--jade-500); }
.e-earth { background: var(--gold-500); }
.e-fire { background: var(--fire-500); }
.e-air { background: var(--rice-100); }
.e-mystery { background: var(--ink-900); }
.section--dark .elements-strip i { box-shadow: 0 0 0 1px rgba(253, 251, 246, 0.22); }

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */
/* Keep in-page anchors clear of the fixed header */
[id] { scroll-margin-top: 6.5rem; }

.center { text-align: center; }
.mt-s { margin-top: 1rem; }
.mt-m { margin-top: 2rem; }
.mt-l { margin-top: clamp(2.5rem, 5vw, 4rem); }
.relative { position: relative; z-index: 1; }
.flow-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.flow-row--center { justify-content: center; }