/* ==========================================================================
   朱邦復文化基金會 — CBFHK
   Ink on paper; Cangjie keystrokes as structure; seal-red for the chop only.
   ========================================================================== */

:root {
  --ink: #1A1D24;          /* 墨 blue-black ink */
  --ink-soft: #3A3F4A;
  --paper: #FBFAF6;        /* 紙 bright warm paper */
  --paper-dim: #F1EFE7;
  --seal: #C03B2B;         /* 硃 cinnabar, seals and marks only */
  --indigo: #2F4A6E;       /* 靛 links, quiet accents */
  --stone: #83868D;        /* 灰 captions, metadata */
  --hairline: rgba(26, 29, 36, 0.14);

  --font-display: "Bodoni Moda", "Noto Serif TC", serif;
  --font-serif: "Noto Serif TC", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --nav-h: 4.25rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Bilingual switching ---------------------------------------------- */
/* Every copy element holds an .en and a .zh span; body class shows one.   */

.zh { display: none; }
body.lang-zh .zh { display: revert; }
body.lang-zh .en { display: none; }

body.lang-zh { line-height: 1.9; }
body.lang-zh p { letter-spacing: 0.015em; }

::selection { background: var(--ink); color: var(--paper); }

a { color: var(--indigo); }

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -200vw;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---- Navigation -------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--gutter);
  background: rgba(251, 250, 246, 0.96);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease;
}
.nav.scrolled { border-bottom-color: var(--hairline); }

.nav-mark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

.nav-seal {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  background: var(--seal);
  color: var(--paper);
  border-radius: 4px;
}
.nav-seal svg { width: 1.15rem; height: 1.15rem; display: block; }

.nav-name { display: flex; flex-direction: column; line-height: 1.25; }
.nav-name-zh { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; }
.nav-name-en {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.nav-links { display: flex; gap: 1.6rem; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.lang-switch {
  display: flex;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
}
.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--stone);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.lang-btn:not([aria-pressed="true"]):hover { color: var(--ink); }

/* ---- Shared section scaffolding ---------------------------------------- */

section { position: relative; }

.section-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 8.5rem) var(--gutter);
}

.spine {
  position: absolute;
  top: clamp(5rem, 12vh, 8.5rem);
  left: clamp(0.4rem, 1.6vw, 1.6rem);
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.55em;
  color: var(--stone);
  opacity: 0.75;
  user-select: none;
}
.spine::after {
  content: "";
  display: block;
  width: 1px;
  height: 3.2rem;
  margin: 1rem auto 0;
  background: var(--hairline);
}
.spine-light { color: rgba(251, 250, 246, 0.5); }
.spine-light::after { background: rgba(251, 250, 246, 0.25); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.1rem;
}
body.lang-zh .eyebrow { letter-spacing: 0.34em; }
.eyebrow-light { color: rgba(251, 250, 246, 0.55); }

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  max-width: 40rem;
}
body.lang-zh .section-head h2 {
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.45;
}

.section-lede {
  margin-top: 1.2rem;
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-ink {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn-ink:hover { background: var(--ink-soft); }

.btn-line {
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ---- Keycaps ------------------------------------------------------------ */

.keyrow { display: inline-flex; gap: 0.45rem; }

.keycap {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  box-shadow: 0 3px 0 var(--ink);
  font-family: var(--font-mono);
}
.keycap b {
  position: absolute;
  top: 0.18rem;
  left: 0.32rem;
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--stone);
}
.keycap i {
  font-style: normal;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  padding-top: 0.2rem;
}

/* ---- Hero ---------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--nav-h);
}

.hero-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: 0.002em;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
body.lang-zh .hero-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.7rem, 3.3vw, 2.6rem);
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.nw { white-space: nowrap; }

.hero-sub {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin-bottom: 2.2rem;
}

.hero-cta { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 2.4rem; }

.hero-cred {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--stone);
}

/* Hero glyph: the hui meander, one unbroken line */

.hero-glyph {
  justify-self: center;
  text-align: center;
}

.meander {
  width: clamp(220px, 27vw, 340px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.meander .m-line {
  stroke: var(--ink);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 1150;
  stroke-dashoffset: 1150;
  animation: draw 2.4s cubic-bezier(0.5, 0, 0.25, 1) 0.4s forwards;
}

.meander .m-dot {
  fill: var(--seal);
  opacity: 0;
  animation: dotin 0.5s ease 2.8s forwards, breathe 3.2s ease-in-out 3.4s infinite;
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dotin { to { opacity: 1; } }
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.hero-rule {
  height: 1px;
  background: var(--hairline);
  margin: 0 var(--gutter);
}

@keyframes press {
  0%   { transform: translateY(0); box-shadow: 0 3px 0 var(--ink); }
  45%  { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
  100% { transform: translateY(0); box-shadow: 0 3px 0 var(--ink); }
}

/* ---- Manifesto ----------------------------------------------------------- */

.manifesto { background: var(--paper); }

.manifesto-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.1vw, 2.4rem);
  line-height: 1.35;
  max-width: 52rem;
}
body.lang-zh .manifesto-text {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.04em;
  font-size: clamp(1.35rem, 2.7vw, 2.1rem);
}

/* ---- Pillars -------------------------------------------------------------- */

.pillars { background: var(--paper-dim); }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  margin-top: 3.2rem;
}

.pillar {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2rem 1.8rem 2.2rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -24px rgba(26, 29, 36, 0.35);
}

.pillar-type {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.6rem;
  min-height: 5.4rem;
}

.pillar .keycap { width: 2.1rem; height: 2.1rem; box-shadow: 0 2px 0 var(--ink); }
.pillar .keycap b { font-size: 0.5rem; top: 0.12rem; left: 0.24rem; }
.pillar .keycap i { font-size: 0.85rem; }

.pillar-char {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 4.6rem;
  line-height: 1;
  display: block;
}

.pillar h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
body.lang-zh .pillar h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
}
.pillar p { font-size: 0.95rem; color: var(--ink-soft); }

/* Typed-in animation: keys press in order, then the character commits */

.pillar .keycap { opacity: 0; transform: translateY(6px); }
.pillar .pillar-char { opacity: 0; transform: scale(1.12); }

.pillar.in .keycap {
  animation: keyin 0.4s ease forwards, press 0.34s ease 0.42s;
}
.pillar.in .keycap:nth-child(1) { animation-delay: 0.15s, 0.3s; }
.pillar.in .keycap:nth-child(2) { animation-delay: 0.4s, 0.55s; }
.pillar.in .keycap:nth-child(3) { animation-delay: 0.65s, 0.8s; }

.pillar.in .pillar-char {
  animation: commit 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 1.05s forwards;
}

@keyframes keyin { to { opacity: 1; transform: translateY(0); } }
@keyframes commit { to { opacity: 1; transform: scale(1); } }

.pillar-link { margin-top: 0.9rem; font-size: 0.85rem; }
.pillar-link a { color: var(--indigo); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.pillar-link a:hover { border-bottom-color: var(--indigo); }

/* ---- Current project (Yansi) ------------------------------------------------ */

.now { background: var(--paper); }

.now-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.now .hero-cta { margin: 2rem 0 0; }

.now-figure { text-align: center; }
.now-chars {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(5rem, 10vw, 7.5rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
}
.now-url {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--stone);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

/* ---- Yansi project page ------------------------------------------------------ */

.hero-compact { min-height: auto; padding-bottom: clamp(2rem, 6vh, 4rem); }

.yansi-figure {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ychar { text-align: center; }
.ychar-glyph {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(5rem, 9vw, 7.5rem);
  line-height: 1.15;
  opacity: 0;
  transform: scale(1.12);
}
.ychar .keyrow { margin-top: 0.9rem; }
.ychar .keycap {
  width: 2.1rem;
  height: 2.1rem;
  box-shadow: 0 2px 0 var(--ink);
  opacity: 0;
  transform: translateY(6px);
}
.ychar .keycap b { font-size: 0.5rem; top: 0.12rem; left: 0.24rem; }
.ychar .keycap i { font-size: 0.85rem; }

.ychar:nth-child(1) .keycap { animation: keyin 0.4s ease forwards, press 0.34s ease; }
.ychar:nth-child(1) .keycap:nth-child(1) { animation-delay: 0.3s, 0.45s; }
.ychar:nth-child(1) .keycap:nth-child(2) { animation-delay: 0.5s, 0.65s; }
.ychar:nth-child(1) .keycap:nth-child(3) { animation-delay: 0.7s, 0.85s; }
.ychar:nth-child(1) .keycap:nth-child(4) { animation-delay: 0.9s, 1.05s; }
.ychar:nth-child(1) .ychar-glyph { animation: commit 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 1.3s forwards; }

.ychar:nth-child(2) .keycap { animation: keyin 0.4s ease forwards, press 0.34s ease; }
.ychar:nth-child(2) .keycap:nth-child(1) { animation-delay: 1.7s, 1.85s; }
.ychar:nth-child(2) .keycap:nth-child(2) { animation-delay: 1.9s, 2.05s; }
.ychar:nth-child(2) .ychar-glyph { animation: commit 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 2.3s forwards; }

.yansi-name-note {
  flex-basis: 100%;
  text-align: center;
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--stone);
}

.why { background: var(--paper); }
.why-body { margin-top: 2rem; }
.why-body p { max-width: var(--measure); color: var(--ink-soft); margin-bottom: 1.4rem; }
.why-body p:last-child { margin-bottom: 0; }

.how { background: var(--paper-dim); }

.lesson-list { list-style: none; margin-top: 3rem; }
.lesson {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid var(--hairline);
}
.lesson:last-child { border-bottom: 1px solid var(--hairline); }
.lesson-char {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 3rem;
  line-height: 1;
}
.lesson h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
body.lang-zh .lesson h3 {
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.22em;
}
.lesson p { max-width: var(--measure); color: var(--ink-soft); font-size: 0.95rem; }

.next { background: var(--paper); }
.next-text { max-width: var(--measure); color: var(--ink-soft); }
.next .hero-cta { margin: 2rem 0 0; }

/* Vision board: pinned idea cards, in no particular order */

.board {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.8rem;
  margin-top: 3.5rem;
  max-width: 56rem;
}

.idea {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2rem 1.8rem 1.9rem;
  box-shadow: 0 10px 30px -22px rgba(26, 29, 36, 0.4);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.idea:nth-child(1) { --tilt: -0.8deg; }
.idea:nth-child(2) { --tilt: 0.9deg; }
.idea:nth-child(3) { --tilt: -0.5deg; }
.idea:nth-child(4) { --tilt: 1deg; }
.idea:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(26, 29, 36, 0.45);
}

/* the pin: same red point that ends the meander */
.idea::before {
  content: "";
  position: absolute;
  top: -0.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--seal);
  box-shadow: 0 1px 2px rgba(26, 29, 36, 0.3);
}

.idea-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.7rem;
}
body.lang-zh .idea-tag { letter-spacing: 0.3em; font-size: 0.76rem; }
.idea-tag-live { color: var(--seal); }

.idea h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.45;
  margin-bottom: 0.6rem;
}
.idea p:not(.idea-tag) {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.idea-live { border-color: var(--ink); }

.idea-more {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.idea-more::before { background: var(--stone); }
.idea-more-text { color: var(--stone); font-size: 0.92rem; }

.idea-aim {
  grid-column: 1 / -1;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  --tilt: 0deg;
  padding: 2.4rem 2.2rem;
}
.idea-aim:hover { transform: none; }
.idea-tag-aim { color: rgba(251, 250, 246, 0.6); }
.idea-aim h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.35;
  max-width: 40rem;
  margin-bottom: 0;
}
body.lang-zh .idea-aim h3 {
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.6;
}

.board-note {
  margin-top: 2.2rem;
  max-width: 56rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  line-height: 1.9;
  color: var(--stone);
}

.road-cta {
  margin-top: 3.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hairline);
}

/* ---- The name (dark slab) -------------------------------------------------- */

.name-slab {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}

.slab-watermark {
  position: absolute;
  right: -0.08em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(16rem, 34vw, 30rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(251, 250, 246, 0.07);
  writing-mode: vertical-rl;
  pointer-events: none;
  user-select: none;
}

.slab-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 1.18;
  max-width: 44rem;
}
body.lang-zh .slab-title {
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.slab-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: 3rem;
  position: relative;
  z-index: 1;
}

.slab-text p {
  max-width: var(--measure);
  color: rgba(251, 250, 246, 0.82);
  margin-bottom: 1.4rem;
}
.slab-text p:last-child { margin-bottom: 0; }

.slab-facts {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-left: 1px solid rgba(251, 250, 246, 0.18);
  padding-left: clamp(1.4rem, 3vw, 2.4rem);
  align-self: start;
}

.fact-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.fact-num small {
  font-size: 1rem;
  font-family: var(--font-mono);
  margin-left: 0.3rem;
  color: rgba(251, 250, 246, 0.6);
}
.fact-label {
  font-size: 0.85rem;
  color: rgba(251, 250, 246, 0.6);
  max-width: 16rem;
  display: block;
}

/* ---- Projects ---------------------------------------------------------------- */

.project-list { list-style: none; margin-top: 3rem; }

.project {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--hairline);
}
.project:last-child { border-bottom: 1px solid var(--hairline); }

.project-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seal);
  padding-top: 0.5rem;
}
body.lang-zh .project-tag { letter-spacing: 0.4em; font-size: 0.8rem; }

.project h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}
.project p {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Expandable project records */

.project-toggle {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.project-toggle:hover .pt-text { color: var(--indigo); }
.pt-text { transition: color 0.2s ease; }

.project-plus {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--stone);
  transition: transform 0.3s ease, color 0.3s ease;
}
.project.open .project-plus {
  transform: rotate(45deg);
  color: var(--seal);
}

.project-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.7rem;
}
body.lang-zh .project-meta { letter-spacing: 0.18em; font-size: 0.75rem; }

.project-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.project-detail-inner { overflow: hidden; min-height: 0; }
.project.open .project-detail { grid-template-rows: 1fr; }

.pd-text {
  padding-top: 1.3rem;
  margin-bottom: 1.5rem;
}

.pd-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 2rem;
  max-width: var(--measure);
  margin-bottom: 1.5rem;
}
.pd-facts dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.25rem;
}
.pd-facts dd { font-size: 0.9rem; }

.pd-partners {
  font-size: 0.85rem;
  color: var(--stone);
  padding-bottom: 0.4rem;
}
.pd-partners strong { color: var(--ink-soft); font-weight: 600; }

/* ---- Governance ----------------------------------------------------------------- */

.governance { background: var(--paper-dim); }

.gov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.gov-text { margin-top: 1.4rem; max-width: var(--measure); color: var(--ink-soft); }

.gov-points { list-style: none; margin-top: 1.8rem; }
.gov-points li {
  max-width: var(--measure);
  padding: 1.1rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.gov-points strong { color: var(--ink); font-weight: 600; }

.gov-formal {
  margin-top: 2rem;
  max-width: var(--measure);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: var(--stone);
}

.gov-seal-wrap { text-align: center; padding-top: 2rem; }

.seal {
  display: grid;
  place-items: center;
  width: clamp(7rem, 11vw, 9rem);
  aspect-ratio: 1;
  margin: 0 auto 1.6rem;
  background: var(--seal);
  color: var(--paper);
  border-radius: 10px;
  transform: rotate(-4deg) scale(1.5);
  opacity: 0;
  box-shadow: inset 0 0 0 5px var(--seal), inset 0 0 0 7px var(--paper);
}
.seal svg { width: 50%; height: auto; display: block; }
.seal.stamped {
  animation: stamp 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards;
}
@keyframes stamp {
  to { transform: rotate(-3deg) scale(1); opacity: 1; }
}

.seal-note {
  font-size: 0.85rem;
  color: var(--stone);
  max-width: 17rem;
  margin: 0 auto;
}

/* ---- Contact ----------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact .section-head p { max-width: var(--measure); color: var(--ink-soft); margin-bottom: 1.8rem; }

.contact-details { border-left: 1px solid var(--hairline); padding-left: clamp(1.4rem, 3vw, 2.4rem); }
.contact-details > div { margin-bottom: 1.8rem; }
.contact-details dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.35rem;
}
.contact-details dd { font-size: 0.95rem; }
.contact-details a { color: var(--ink); }

/* ---- Footer --------------------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: rgba(251, 250, 246, 0.75);
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 3rem;
}

.footer-id { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }

.footer-seal {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  background: var(--seal);
  color: var(--paper);
  border-radius: 6px;
  transform: rotate(-3deg);
}
.footer-seal svg { width: 1.5rem; height: 1.5rem; display: block; }

.footer-name { font-weight: 600; letter-spacing: 0.14em; color: var(--paper); }
.footer-name-en {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 250, 246, 0.5);
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  color: rgba(251, 250, 246, 0.55);
}
.footer-copy { font-size: 0.8rem; color: rgba(251, 250, 246, 0.4); }

/* ---- Scroll reveal -------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal[data-d="1"] { transition-delay: 0.1s; }
.reveal[data-d="2"] { transition-delay: 0.2s; }
.reveal[data-d="3"] { transition-delay: 0.3s; }
.reveal[data-d="4"] { transition-delay: 0.4s; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ------------------------------------------------------------------------ */

@media (max-width: 980px) {
  .nav-links { display: none; }
  .spine { display: none; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-glyph { order: -1; justify-self: start; text-align: left; }
  .meander { margin: 0; width: clamp(130px, 28vw, 190px); }

  .pillar-grid { grid-template-columns: 1fr; }
  .slab-body, .gov-grid, .contact-grid, .now-grid { grid-template-columns: 1fr; }
  .now-figure { text-align: left; }
  .yansi-figure { justify-content: flex-start; }
  .yansi-name-note { text-align: left; }
  .board { grid-template-columns: 1fr; }
  .idea { --tilt: 0deg; }
  .lesson { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; }
  .lesson-char { font-size: 2.2rem; }
  .slab-facts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.6rem 2.4rem;
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(251, 250, 246, 0.18);
    padding-top: 1.8rem;
  }
  .project { grid-template-columns: 1fr; gap: 0.4rem; }
  .gov-seal-wrap { text-align: left; padding-top: 0; }
  .seal { margin: 0 0 1.4rem; }
  .seal-note { margin: 0; }
}

@media (max-width: 560px) {
  .nav { gap: 0.8rem; }
  .nav-name-en { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 2rem); }
}

/* ---- Reduced motion --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .meander .m-line { animation: none; stroke-dashoffset: 0; }
  .meander .m-dot { animation: none; opacity: 1; }
  .pillar.in .keycap { animation: none; }
  .pillar .keycap, .pillar .pillar-char { opacity: 1; transform: none; }
  .pillar.in .pillar-char { animation: none; }
  .seal { opacity: 1; transform: rotate(-3deg) scale(1); }
  .seal.stamped { animation: none; }
  .project-detail { transition: none; }
  .ychar .keycap, .ychar .ychar-glyph { animation: none; opacity: 1; transform: none; }
  .idea { transition: none; }
  .pillar, .btn { transition: none; }
}