/* =====================================================================
   三國字棋 Sanguo Ziqi — 哈洛德遊戲 Harrods Games
   Ink-wash (水墨) site stylesheet. No build step; plain CSS.
   Colour logic: crimson is ONLY the 印章 seal; gold is ONLY the ● pip.
   ===================================================================== */

/* ---- Tokens ---------------------------------------------------------- */
:root {
  --paper:    #f9f6f7;  /* 紙   cool, faintly pink off-white          */
  --ink:      #211c17;  /* 墨   primary text, calligraphy, strokes    */
  --ink-dim:  #6b645a;  /* 淡墨 secondary text, captions              */
  --gold:     #d19a1f;  /* 金   pips (●) + tiny highlights only       */
  --crimson:  #ae2421;  /* 硃   the seal stamp (印章) only            */

  --paper-shade: #f0ebec; /* faint wash for set-apart blocks          */

  --serif: "Noto Serif TC", "Songti TC", serif;     /* display 直書   */
  --sans:  "Noto Sans TC", "PingFang TC", sans-serif;/* body          */
  --brush: "Noto Serif TC", "Songti TC", serif;   /* unit names / display — original 繁體 font */
  --display: "Noto Serif TC", "Songti TC", serif; /* hero title / showcase — original 繁體 font */
  --latin: "Inter", system-ui, -apple-system, sans-serif;

  --measure: 34rem;      /* comfortable reading line length            */
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 11vw, 8rem);
}

/* ---- Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--paper);
  /* faint ink-wash atmosphere: two soft ink blooms + paper grain, fixed so it
     reads as the texture of the rice paper rather than scrolling content */
  background-image:
    radial-gradient(60vw 50vw at 88% -5%, rgba(33,28,23,.05), transparent 60%),
    radial-gradient(55vw 45vw at -10% 12%, rgba(33,28,23,.04), transparent 60%),
    radial-gradient(40vw 40vw at 75% 105%, rgba(174,36,33,.03), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Visible keyboard focus everywhere (ink ring, never gold/crimson) */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: 100%; max-width: 64rem; margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 印章 seal stamp (signature element) ----------------------------- */
/* Crimson exists only here: a small carved-chop with a paper-coloured
   character. Slight rotation + soft edge so it reads as stamped ink.   */
.seal {
  display: inline-grid;
  place-items: center;
  background: var(--crimson);
  color: var(--paper);
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1;
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(249,246,247,.28),
    0 1px 0 rgba(33,28,23,.10);
  -webkit-mask-image: radial-gradient(circle at 38% 30%, #000 96%, rgba(0,0,0,.86) 100%);
          mask-image: radial-gradient(circle at 38% 30%, #000 96%, rgba(0,0,0,.86) 100%);
  user-select: none;
}
.seal--lg { width: 3.4rem; height: 3.4rem; font-size: 2rem;  transform: rotate(-2.5deg); }
.seal--sm { width: 1.7rem; height: 1.7rem; font-size: .95rem; transform: rotate(-3deg); }

/* ---- gold ● pips (signature element) --------------------------------- */
/* Gold exists only here, echoing the in-game rank dots. Pips = 升階等級 1–3
   (merge level), capped at 3 — NOT the unit's tier. No stars.          */
.pips { display: inline-flex; gap: .34em; align-items: center; }

/* ---- 品階 tier tag (T1–T5) — shown by COLOUR/cost, the in-game rarity
   ladder (grey→綠→藍→紫→金). Tier = how strong the unit is; it is NOT the
   「第N階」 pip level. Higher tier = 高階. */
.tier-tag {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-weight: 700; font-size: .72rem;
  letter-spacing: .08em; line-height: 1;
  padding: .28em .5em; border-radius: 3px;
  border: 1.5px solid currentColor;
}
.tier-1 { color: #858585; background: rgba(133,133,133,.12); }
.tier-2 { color: #2ea647; background: rgba(46,166,71,.12); }
.tier-3 { color: #3469d9; background: rgba(52,105,217,.12); }
.tier-4 { color: #992bd1; background: rgba(153,43,209,.12); }
.tier-5 { color: #c98f0a; background: rgba(224,166,20,.14); }
/* 第N階 pip-level label (1–3, the merge level the ● dots show) */
.pip-label { font-family: var(--sans); font-size: .72rem; color: var(--ink-dim); letter-spacing: .08em; }
.showcase-caption .dot { color: var(--ink-dim); }
.showcase-caption .who-inline { font-family: var(--brush); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.pip {
  width: .52em; height: .52em; border-radius: 50%;
  background: var(--gold); box-sizing: border-box;
}
.pip--empty { background: transparent; border: 1.5px solid var(--ink-dim); }
.rank-label {
  font-family: var(--sans); font-size: .8rem; color: var(--ink-dim);
  letter-spacing: .08em;
}

/* ---- brush-stroke divider -------------------------------------------- */
.brush-rule { display: block; width: min(78%, 30rem); height: 18px; margin: 0 auto; color: var(--ink); opacity: .82; }
.brush-rule path { fill: currentColor; }
.brush-rule--dim { opacity: .35; }

/* ---- header ---------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(33,28,23,.08);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 60px;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand .seal { width: 1.6rem; height: 1.6rem; font-size: .9rem; transform: rotate(-3deg); }
.brand-logo { width: 2rem; height: 2rem; object-fit: contain; mix-blend-mode: multiply; }
.brand-name { font-family: var(--brush); font-weight: 900; font-size: 1.15rem; letter-spacing: .04em; }
.head-nav { display: flex; align-items: center; gap: clamp(.9rem, 3vw, 1.6rem); }
.head-nav a {
  text-decoration: none; color: var(--ink-dim); font-size: .92rem;
  letter-spacing: .04em; transition: color .2s ease;
}
.head-nav a:hover { color: var(--ink); }

/* ---- buttons --------------------------------------------------------- */
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-weight: 500; font-size: 1rem;
  text-decoration: none; line-height: 1.2;
  padding: .85rem 1.5rem; border-radius: 3px; border: 1px solid var(--b);
  transition: transform .18s ease, background .2s ease, color .2s ease;
}
.btn .lat { font-family: var(--latin); font-size: .78rem; letter-spacing: .04em; opacity: .85; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { transform: translateY(-2px); background: #15110d; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { transform: translateY(-2px); background: rgba(33,28,23,.05); }
.btn--soon {
  background: transparent; color: var(--ink-dim); border: 1px dashed var(--ink-dim);
  cursor: not-allowed;
}
.btn[aria-disabled="true"] { pointer-events: none; }

/* ---- hero ------------------------------------------------------------ */
.hero { padding: 0 0 clamp(2rem, 6vw, 4rem); position: relative; overflow: hidden; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(1.2rem, 4vw, 1.8rem); padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* full-bleed brushwork banner — spans the whole viewport width. object-fit
   cover crops top/bottom on very wide screens, keeping the title centred.
   mix-blend-mode multiplies the white ground into the rice-paper page.    */
.hero-banner { margin: 0; width: 100%; line-height: 0; }
.hero-banner img {
  display: block;
  width: 100%;
  height: clamp(15rem, 38vw, 30rem);
  object-fit: cover;
  object-position: center 42%;
  mix-blend-mode: multiply;
}

/* the vertical-calligraphy lockup — 直書, reads top to bottom.
   Layout is done with flex columns; writing-mode only rotates the text,
   so the huge showcase glyph can never overflow its column.            */
.hero-calli {
  display: flex; flex-direction: row; justify-content: center;
  align-items: flex-start; gap: clamp(1rem, 6vw, 3rem);
}
.calli-col { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; position: relative; }
/* ink-splash bloom behind the showcase name — soft, organic, sits under the brush strokes */
.hero-calli .calli-col:last-child::before {
  content: ""; position: absolute; z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -48%);
  width: clamp(11rem, 42vw, 18rem); height: clamp(13rem, 50vw, 22rem);
  background:
    radial-gradient(50% 42% at 52% 40%, rgba(33,28,23,.10), rgba(33,28,23,.05) 55%, transparent 72%),
    radial-gradient(38% 30% at 38% 66%, rgba(33,28,23,.07), transparent 70%);
  border-radius: 49% 51% 58% 42% / 46% 44% 56% 54%;
  filter: blur(3px);
  pointer-events: none;
}
.hero-calli .calli-col:last-child > * { position: relative; z-index: 1; }
/* 直書 stack: each glyph is its own block, stacked top-to-bottom.
   Visually identical to upright vertical text for single CJK chars,
   but free of writing-mode/orthogonal-flex sizing bugs.              */
.vstack { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; }
.vstack > span { display: block; }
.hero-title {
  font-family: var(--display); font-weight: 900; color: var(--ink);
  font-size: clamp(2.6rem, 14vw, 4.6rem); line-height: 1.04; letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(33,28,23,.04);
}
.hero-showcase {
  display: block; font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(3.6rem, 20vw, 7rem); line-height: 1.02; letter-spacing: 0;
  writing-mode: vertical-rl; text-orientation: upright;
  filter: drop-shadow(0 3px 2px rgba(33,28,23,.07));
}
.calli-col .seal--lg { transform: rotate(-3deg); }   /* red chop at column foot */

.showcase-caption {
  display: flex; align-items: center; gap: .7rem; justify-content: center;
  font-family: var(--sans); font-size: .9rem; color: var(--ink-dim);
  letter-spacing: .1em; margin: 0;
}

.hero-tagline {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.25rem, 5vw, 1.9rem); letter-spacing: .05em;
  margin: 0; max-width: 26rem; line-height: 1.6;
}
.hero-sub {
  margin: 0; color: var(--ink-dim); max-width: var(--measure);
  font-size: 1rem; line-height: 1.85;
}
.hero-latin {
  font-family: var(--latin); font-size: .82rem; letter-spacing: .42em;
  text-transform: uppercase; color: var(--ink-dim); margin: 0;
}

/* ---- generic section ------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }
.section-head { display: flex; align-items: center; gap: .85rem; justify-content: center; margin-bottom: 1.4rem; }
.section-head h2 {
  font-family: var(--serif); font-weight: 900; margin: 0;
  font-size: clamp(1.7rem, 6vw, 2.5rem); letter-spacing: .05em;
}
.section-lede {
  max-width: var(--measure); margin: 0 auto 2.5rem; text-align: center;
  color: var(--ink-dim); font-size: 1.06rem;
}
.eyebrow {
  font-family: var(--latin); font-size: .76rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-dim);
  text-align: center; margin: 0 0 .6rem;
}

/* ---- 以字為棋 specimen grid ----------------------------------------- */
.specimens {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 5vw, 3rem); max-width: 38rem; margin: 0 auto;
}
.specimen { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.specimen .glyph {
  font-family: var(--brush); font-weight: 700; color: var(--ink);
  font-size: clamp(2.8rem, 15vw, 4.4rem); line-height: 1.05;
  writing-mode: vertical-rl; text-orientation: upright;
  filter: drop-shadow(0 2px 2px rgba(33,28,23,.06));
}
.specimen .who { font-family: var(--sans); font-size: 1rem; color: var(--ink); letter-spacing: .06em; }
.specimen .rank { display: flex; flex-direction: column; align-items: center; gap: .3rem; }

/* ---- 遊戲模式 cards -------------------------------------------------- */
.modes { display: grid; gap: clamp(1.25rem, 4vw, 2rem); max-width: 40rem; margin: 0 auto; }
.mode {
  border: 1px solid rgba(33,28,23,.12); border-radius: 4px;
  padding: clamp(1.4rem, 5vw, 2rem); background: var(--paper);
  transition: border-color .2s ease, transform .2s ease;
}
.mode:hover { border-color: rgba(33,28,23,.3); transform: translateY(-2px); }
.mode h3 {
  font-family: var(--serif); font-weight: 900; margin: 0 0 .4rem;
  font-size: 1.4rem; display: flex; align-items: baseline; gap: .6rem;
}
.mode h3 .lat { font-family: var(--latin); font-size: .8rem; letter-spacing: .12em; color: var(--ink-dim); font-weight: 400; }
.mode p { margin: 0; color: var(--ink-dim); }

/* ---- 公平競技 ------------------------------------------------------- */
.fair { background: var(--paper-shade); }
.fair .wrap { max-width: 46rem; }
.fair-statement {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.3rem, 4.6vw, 1.85rem); line-height: 1.85;
  text-align: center; margin: 0 auto; max-width: 36rem; letter-spacing: .02em;
}
.fair-tags { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2rem; }
.tag {
  font-family: var(--sans); font-size: .9rem; color: var(--ink);
  border: 1px solid rgba(33,28,23,.25); border-radius: 999px;
  padding: .4rem 1rem; letter-spacing: .04em;
}
.tag .lat { font-family: var(--latin); }

/* ---- 攻略 hub preview ----------------------------------------------- */
.guide-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.8rem; max-width: 36rem; margin: 0 auto 2.4rem; }
.guide-cat {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.12rem;
  color: var(--ink); padding: .35rem 0;
}
.guide-cat .seal { flex: 0 0 auto; }

/* ---- footer ---------------------------------------------------------- */
.site-foot { padding-block: var(--section-y) 3rem; border-top: 1px solid rgba(33,28,23,.08); }
.site-foot .wrap { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.foot-brand { display: inline-flex; align-items: center; gap: .65rem; }
.foot-brand .brand-name { font-size: 1.3rem; }
.foot-brand .seal { width: 1.8rem; height: 1.8rem; font-size: 1rem; transform: rotate(-3deg); }
.foot-note { color: var(--ink-dim); font-size: .95rem; max-width: 30rem; margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.foot-links a { color: var(--ink-dim); text-decoration: none; font-size: .92rem; letter-spacing: .04em; }
.foot-links a:hover { color: var(--ink); }
.copyright { color: var(--ink-dim); font-size: .8rem; letter-spacing: .04em; margin: 0; }

/* ---- guide hub & article pages -------------------------------------- */
.page-head { padding-block: clamp(2.5rem, 8vw, 4rem) 0; }
.page-head .wrap { text-align: center; }
.page-head h1 {
  font-family: var(--serif); font-weight: 900; margin: .3rem 0 0;
  font-size: clamp(2.1rem, 8vw, 3.2rem); letter-spacing: .06em;
}
.back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; color: var(--ink-dim); font-size: .92rem;
  letter-spacing: .04em; transition: color .2s ease;
}
.back-link:hover { color: var(--ink); }

.cat-block { max-width: 42rem; margin: 0 auto; padding-block: 1.6rem; }
.cat-block h2 {
  font-family: var(--serif); font-weight: 900; font-size: 1.5rem;
  display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem;
}
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.guide-list a {
  display: flex; align-items: baseline; gap: .8rem; text-decoration: none;
  color: var(--ink); padding: .7rem .4rem; border-bottom: 1px solid rgba(33,28,23,.07);
  transition: background .18s ease, padding-left .18s ease;
}
.guide-list a:hover { background: rgba(33,28,23,.04); padding-left: .9rem; }
.guide-list .g-tag {
  font-family: var(--latin); font-size: .8rem; color: var(--ink-dim);
  flex: 0 0 auto; min-width: 2ch;
}
.guide-list .g-title { font-weight: 500; }

/* article body */
.article { max-width: var(--measure); margin: 0 auto; padding-block: clamp(2rem, 6vw, 3rem) 0; }
.article .eyebrow { text-align: left; }
.article h1 { font-family: var(--brush); font-weight: 900; font-size: clamp(1.9rem, 7vw, 2.7rem); letter-spacing: .04em; margin: .2rem 0 1.4rem; }
.article h2 {
  font-family: var(--serif); font-weight: 900; font-size: 1.4rem;
  margin: 2.4rem 0 .8rem; display: flex; align-items: center; gap: .6rem;
}
.article h3 { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; margin: 1.8rem 0 .5rem; }
.article p { margin: 0 0 1.1rem; }
.article ul, .article ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.article li { margin-bottom: .5rem; }
.article strong { font-weight: 700; }
.article blockquote {
  margin: 1.4rem 0; padding: .6rem 0 .6rem 1.2rem; color: var(--ink-dim);
  border-left: 2px solid rgba(33,28,23,.18); font-family: var(--serif);
}

/* screenshot placeholder slot */
.shot {
  margin: 1.6rem auto; max-width: 16rem; aspect-ratio: 9 / 16;
  border: 1.5px dashed var(--ink-dim); border-radius: 6px;
  display: grid; place-items: center; text-align: center;
  color: var(--ink-dim); background: var(--paper-shade);
}
.shot span { font-size: .9rem; letter-spacing: .12em; }
.shot small { display: block; font-size: .76rem; opacity: .8; margin-top: .3rem; }

.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 3rem auto 0; max-width: var(--measure); }

/* ---- brush-in load animation (hero) ---------------------------------- */
.ink-in { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ink-in {
    animation: ink-bleed 1.1s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes ink-bleed {
    0%   { opacity: 0; filter: blur(10px); transform: translateY(8px); }
    60%  { opacity: .9; filter: blur(1.5px); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ink-in { opacity: 1; animation: none; }
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .head-nav { gap: .9rem; }
  .head-nav a.hide-xs { display: none; }
  .specimens { gap: 1.4rem 1rem; }
  .guide-cats { grid-template-columns: 1fr; }
}
@media (min-width: 720px) {
  .modes { grid-template-columns: 1fr; }
}

/* ── 攻略內文:表格、陣型圖、小標(由 Markdown 置入的內容) ───────────── */
.article .table-wrap{
  overflow-x:auto;
  margin:1.6rem 0;
  -webkit-overflow-scrolling:touch;
}
.article table{
  border-collapse:collapse;
  width:100%;
  font-family:var(--sans);
  font-size:.92rem;
  line-height:1.5;
}
.article th,
.article td{
  text-align:left;
  padding:.55rem .8rem;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  vertical-align:top;
  white-space:nowrap;
}
.article thead th{
  font-weight:700;
  color:var(--ink);
  border-bottom:2px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.article tbody td{ color:var(--ink-dim); }
.article tbody tr:last-child td{ border-bottom:none; }

.article pre.diagram{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--paper-shade);
  border-left:3px solid var(--gold);
  border-radius:2px;
  padding:1rem 1.1rem;
  margin:1.5rem 0;
  overflow-x:auto;
  font-size:.9rem;
  line-height:1.7;
  color:var(--ink);
  white-space:pre;
}

.article h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.12rem;
  margin:1.8rem 0 .5rem;
  color:var(--ink);
}
.article code{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--paper-shade);
  padding:.08em .4em;
  border-radius:3px;
  font-size:.88em;
  color:var(--crimson);
}

/* =====================================================================
   潑墨 — dynamic ink-splash enhancement layer
   All motion is gated behind prefers-reduced-motion: no-preference.
   Decorative layers are aria-hidden in markup and pointer-events:none.
   ===================================================================== */

/* ---- 1. Hero ink-bloom on load (sits behind the title column) -------- */
/* The existing .calli-col:last-child::before is a static bloom; here we add
   an animated wash that soaks in once on load behind the whole hero.      */
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 36% at 50% 46%, rgba(33,28,23,.04), transparent 72%);
  opacity: 0; transform: scale(.7); transform-origin: 50% 46%;
}
.hero > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: ink-soak 1.6s cubic-bezier(.22,.7,.25,1) .15s forwards; }
  @keyframes ink-soak {
    0%   { opacity: 0;   transform: scale(.55); filter: blur(14px); }
    55%  { opacity: .95; filter: blur(5px); }
    100% { opacity: 1;   transform: scale(1); filter: blur(2px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { opacity: 1; transform: scale(1); }
}

/* ---- 2. Scroll-triggered 暈染 reveal for section headings ------------ */
/* JS adds .inked when the heading scrolls into view. A soft ink wash
   bleeds out from behind the heading, then the seal "presses" in.        */
.section-head { position: relative; }
.section-head::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.4);
  width: 14rem; height: 7rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(33,28,23,.07), transparent 72%);
  border-radius: 48% 52% 55% 45% / 50% 46% 54% 50%;
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js .section-head.inked::before { animation: wash-spread .9s ease-out forwards; }
  html:not(.js) .section-head::before { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  @keyframes wash-spread {
    0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4); filter: blur(8px); }
    60%  { opacity: .9; }
    100% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(3px); }
  }
  html.js .section-head .seal { transition: transform .5s cubic-bezier(.34,1.56,.5,1), opacity .5s ease; }
  html.js .section-head:not(.inked) .seal { transform: scale(.4) rotate(-12deg); opacity: 0; }
  html.js .section-head.inked .seal { transform: scale(1) rotate(-3deg); opacity: 1; }
}

/* ---- 3. Ambient ink drift (very slow, far background) ---------------- */
/* A second fixed layer over the body's static ink-wash, drifting almost
   imperceptibly. Pure transform on a pseudo-element on <body>.           */
body::before {
  content: ""; position: fixed; inset: -20% -20% -20% -20%; z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(30vw 26vw at 20% 30%, rgba(33,28,23,.025), transparent 60%),
    radial-gradient(34vw 28vw at 82% 68%, rgba(33,28,23,.022), transparent 62%);
  opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: ink-drift 46s ease-in-out infinite alternate; }
  @keyframes ink-drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  }
}

/* ---- 4. Brush-stroke dividers that draw themselves on scroll --------- */
/* Only hide+draw when JS is active (html.js). Without JS, dividers show as-is. */
@media (prefers-reduced-motion: no-preference) {
  html.js .brush-rule path {
    clip-path: inset(0 100% 0 0);
  }
  html.js .brush-rule.drawn path {
    animation: stroke-draw 1s cubic-bezier(.5,.1,.2,1) forwards;
  }
  @keyframes stroke-draw {
    to { clip-path: inset(0 0 0 0); }
  }
}

/* ---- 5. Ink-bleed hover on mode cards & buttons --------------------- */
.mode { position: relative; overflow: hidden; }
.mode::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: var(--mx, 50%); top: var(--my, 50%);
  width: 0; height: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,28,23,.06), transparent 70%);
  transform: translate(-50%,-50%);
  transition: width .55s ease, height .55s ease, opacity .4s ease;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .mode:hover::after { width: 30rem; height: 30rem; opacity: 1; }
}
.mode > * { position: relative; z-index: 1; }
.btn { position: relative; overflow: hidden; }
.btn:not(.btn--soon)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(33,28,23,.10), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.btn--soon):hover::after { opacity: 1; }
}
.btn > * { position: relative; z-index: 1; }

/* ---- 6. Occasional ink-drop in hero negative space ------------------ */
@media (prefers-reduced-motion: no-preference) {
  .ink-drop {
    position: absolute; z-index: 0; pointer-events: none;
    width: .5rem; height: .5rem; border-radius: 50%;
    background: rgba(33,28,23,.5);
    opacity: 0;
  }
  .ink-drop.fall { animation: drop-bloom 2.4s cubic-bezier(.4,0,.5,1) forwards; }
  @keyframes drop-bloom {
    0%   { opacity: 0; transform: translateY(-60px) scale(.4); }
    18%  { opacity: .85; transform: translateY(0) scale(1); }
    30%  { transform: translateY(2px) scale(2.2); opacity: .5; filter: blur(2px); }
    100% { transform: translateY(2px) scale(6); opacity: 0; filter: blur(6px); }
  }
}