:root {
  /*
   * Colour: brand-tokens.css (shared) + register-campus.css (matcha classroom).
   * Layout + type scale stay here.
   */

  /* you er yuan shi bu ju can shu */
  --nav-h: 52px;
  --card-radius: 0;
  --btn-radius: 0;

  /* zi hao jie ti（zheng wen/dao hang tai gao，peach di ke du） */
  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: 2rem;
  --text-2xl: 2.75rem;
  --text-3xl: 3.5rem;
  --text-accent: 0.875rem;

  /* yi dong duan zi hao */
  --text-hero-mobile: clamp(2rem, 8vw, 3rem);
  --text-h1-mobile: clamp(1.75rem, 6vw, 2.5rem);
  --text-h2-mobile: clamp(1.25rem, 4vw, 1.75rem);
  --text-h3-mobile: clamp(1rem, 3vw, 1.25rem);
  --text-body-mobile: clamp(1.0625rem, 2.5vw, 1.1875rem);
  --text-caption-mobile: 0.875rem; /* GOV.UK floor is 16; captions stay one step down */

  /* xing gao */
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-loose: 1.9;

  /* zi ju */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* jian ju */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 12rem;
  --padding-mobile: 1.25rem;

  /* duan dian · phone / tablet / desktop / wide-custom */
  --bp-xs: 320px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;

  /* dong xiao shi chang */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;
}

/* ji chu zhong zhi */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 18px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* prefers-reduced-motion · quan wei gui ze zai a11y.css */

body {
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  overflow-x: clip;
  background-color: var(--surface);
  background-image: none;
  color: var(--ink);
  font-family: var(--font-classroom);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Craft defaults · headings hold together, body copy avoids orphans,
   and numbers in schedules and year pages stay in column. */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

time,
.tabular {
  font-variant-numeric: tabular-nums;
}

.sc {
  font-family: 'Noto Serif SC', serif;
  font-weight: 500;
}

.twin-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 1rem 0.35rem;
  background: var(--gold-soft);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid var(--dusk);
}

.twin-banner:hover {
  color: var(--ink);
  background: var(--peach);
}

.site-jump {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior: contain;
  /* SOLID opaque nav ... never glass / clear.
     White, not cream, so the bar reads against lined paper. */
  background: #ffffff;
  background-color: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  border-bottom: 2px solid var(--accent, #006b45);
  margin: 0 0 var(--space-sm);
}

.site-jump::-webkit-scrollbar { display: none; }

.site-jump a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 2px;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  touch-action: manipulation;
}

.site-jump a:hover {
  color: var(--accent-crimson);
  border-bottom-color: var(--accent-crimson);
  text-decoration-color: var(--accent-crimson);
  background: var(--tulip-blush);
}

.site-jump a:focus-visible {
  text-decoration-color: var(--dusk);
}

.site-jump a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent-crimson);
  background: transparent;
  font-weight: 700;
  text-decoration-color: var(--accent-crimson);
}

/* soft group: guides + twin site · keep links, lower visual weight */
.site-jump a.site-jump-soft {
  color: var(--ink-subtle);
  letter-spacing: 0.04em;
  font-size: calc(var(--text-xs) * 0.96);
}
.site-jump a.site-jump-soft:hover,
.site-jump a.site-jump-soft:focus-visible {
  color: var(--accent-crimson);
}
.site-jump a.site-jump-soft[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent-crimson);
  background: var(--dusty-pink-soft);
  font-weight: 700;
  text-decoration-color: var(--accent-crimson);
}
.site-jump .site-jump-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 1.1rem;
  margin: 0 var(--space-3xs);
  background: rgba(31, 22, 48, 0.18);
  pointer-events: none;
}

@media (max-width: 640px) {
  /* Clear fixed dock (~3.25rem) + Cookie tab sitting above it (~3.5rem) */
  body {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* kindergarten-home/kiss-home set a padding shorthand that would win on specificity */
  body.kindergarten-home,
  body.kiss-home,
  body.choice-home,
  body.guide-page,
  body.journey-page,
  body.scratch-studio-page,
  body.campus-survival-page,
  body.footprint-page {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* mu zhi qu：kua zhan tiao zhuan fang zai di bu dai */
  .site-jump {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 95;
    border-bottom: none;
    border-top: 2px solid var(--accent, #006b45);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    background-color: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
  }

  .site-jump a {
    border-bottom: none;
    border-top: 2px solid transparent;
    min-height: 48px;
    padding: 0 var(--space-xs);
  }

  .site-jump a:hover {
    border-bottom-color: transparent;
    border-top-color: var(--accent-crimson);
  }

  .site-jump a[aria-current="page"] {
    border-top-color: var(--accent-crimson);
    border-bottom-color: transparent;
  }

  .site-jump .site-jump-sep {
    height: 0.9rem;
    margin: 0 2px;
  }
}

/* shuang zhang hao ju zhen yu jiu yun ying kuang jia yang shi（yi liu） */
.stack-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: var(--space-sm);
}

.stack-col {
  padding: var(--space-s) var(--space-m);
  background: var(--bg-soft-warm);
  border: 1px solid var(--border);
  border-top: 3px solid var(--matcha-ops);
  border-radius: 0 0 4px 4px;
}

.stack-col.ops {
  border-top-color: var(--accent-crimson);
}

.stack-col .stack-k {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-3xs);
}

.stack-col h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-h3-mobile);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.stack-col h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--tulip-mist);
}

.stack-col h3 a:hover {
  border-bottom-color: var(--accent-crimson);
  color: var(--accent-crimson);
}

.stack-role {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--ink-muted);
}

.stack-col p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

.stack-col .obj {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.stack-col .obj em {
  font-style: normal;
  color: var(--matcha-ops);
  font-weight: 600;
}

.stack-links {
  font-size: var(--text-xs);
  margin: var(--space-xs) 0 0 !important;
  color: var(--ink-subtle);
}

.ops-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.ops-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xs) var(--space-s);
  padding: var(--space-s) var(--space-s);
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tulip-petal);
  border-radius: 0 4px 4px 0;
}

.ops-row.ops-head {
  display: none;
}

.ops-epoch {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  color: var(--ink);
}

.ops-years {
  display: inline-block;
  margin-left: var(--space-3xs);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ops-takeaway,
.ops-proof {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-muted);
}

.ops-proof {
  color: var(--matcha-ops);
  font-weight: 500;
}

.ops-takeaway::before {
  content: "takeaway · ";
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.ops-proof::before {
  content: "proof · ";
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  font-weight: 400;
}

.clean-handoff .roots-block ol {
  margin: var(--space-sm) 0 var(--space-md);
}

/* skip-link / :focus-visible · quan wei gui ze zai a11y.css（WCAG 2.2 AA） */

/* bu ju */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--padding-mobile);
}

.container > section,
.container > footer {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .container > section,
  .container > footer {
    opacity: 0;
    transform: translateY(12px);
    animation: fade-up var(--transition-slow) forwards;
  }

  .container > section:nth-of-type(2) { animation-delay: 70ms; }
  .container > section:nth-of-type(3) { animation-delay: 140ms; }
  .container > section:nth-of-type(4) { animation-delay: 210ms; }
  .container > section:nth-of-type(5) { animation-delay: 280ms; }
  .container > footer { animation-delay: 350ms; }
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* dao hang */
.year-nav {
  position: static;
  padding: 1rem var(--padding-mobile);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-link {
  color: var(--ink-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) 0;
  transition: color var(--dur-base) var(--ease-out);
}

.back-link:hover { color: var(--ink); }

/* zhu shi jue */
.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--padding-mobile);
}

.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-hero-mobile);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--ink);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.tagline {
  font-size: var(--text-caption-mobile);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: var(--space-s);
}

.subtitle {
  font-size: var(--text-body-mobile);
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 100%;
}

.hero-now {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--tulip-deep);
  margin-top: var(--space-sm);
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  width: 100%;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-s);
  min-height: 48px;
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0;
  border: 3px solid var(--accent);
  text-align: center;
  box-sizing: border-box;
  touch-action: manipulation;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.hero-actions .btn {
  width: 100%;
}

.btn-primary {
  background-color: var(--accent, #006b45);
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
  border-color: var(--accent-hover, #005537);
  box-shadow: 3px 3px 0 rgba(0, 84, 55, 0.22);
  font-weight: 700;
  text-decoration: none !important;
}

.btn-primary:visited {
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--accent-hover, #005537);
  border-color: var(--accent-hover, #005537);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.btn-primary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn-secondary {
  background-color: var(--surface);
  color: var(--crimson-ink);
  border-color: var(--accent-crimson);
  border-width: 3px;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--dusk);
  color: var(--dusk);
  background-color: var(--dusty-pink-soft);
}

.btn-secondary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* shuang zhan ju zhen */
.stack-section {
  margin-top: 0;
}

.stack-matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: var(--space-md);
}

.stack-col {
  padding: var(--space-m) var(--space-m) var(--space-m);
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-top: 3px solid var(--matcha-ops);
  border-radius: 0 0 4px 4px;
}

.stack-col.ops {
  border-top-color: var(--accent-crimson);
  background: linear-gradient(180deg, #fff 0%, var(--tulip-blush) 100%);
}

.stack-k {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: var(--space-3xs);
}

.stack-col h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 0 var(--space-xs);
  line-height: 1.25;
}

.stack-col h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.stack-col h3 a:hover {
  color: var(--accent-crimson);
  border-color: var(--accent-crimson);
}

.stack-role {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--ink-subtle);
}

.stack-col p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

.stack-col .obj {
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--matcha-ops);
  margin-bottom: var(--space-xs);
}

.stack-col.ops .obj {
  color: var(--accent-crimson);
}

.stack-col .obj em {
  font-style: normal;
  color: var(--ink-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: var(--space-3xs);
}

.stack-links {
  margin: 0 !important;
  font-size: var(--text-xs) !important;
}

.stack-links a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

@media (min-width: 640px) {
  .stack-matrix {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero-actions .btn {
    width: auto;
    flex: 1 1 auto;
    min-width: 10rem;
  }
}

.hero-image {
  width: 140px;
  max-width: 140px;
  height: 140px;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  border: 2px solid var(--tulip-mist);
}

/* zhang jie */
.topic,
.year-content,
.years-nav {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg) var(--padding-mobile);
}

.topic h2,
.year-content h2,
.years-nav h2,
.connect h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-h2-mobile);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

.topic-content p,
.philosophy-block p,
.impact-block p,
.activity-block p,
.piece-section p {
  font-size: var(--text-body-mobile);
  line-height: var(--leading-loose);
  color: var(--ink);
  max-width: 100%;
  margin-bottom: var(--space-md);
}

/* nian ji wang ge（yi liu） */
.years-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.year-card {
  display: block;
  text-decoration: none;
  border-left: 2px solid var(--tulip-petal);
  border-radius: 0 4px 4px 0;
  padding: var(--space-m) var(--space-m);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.year-card:hover,
.year-card:focus-visible {
  border-color: var(--tulip-deep);
  background-color: var(--tulip-blush);
}

@media (prefers-reduced-motion: no-preference) {
  .year-card:hover,
  .year-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--shadow);
  }
}

.year-card h3,
.class-card h3,
.piece-name {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-h3-mobile);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}

.year-span,
.activity-block h3,
.piece-year,
.piece-label,
.footer-note,
.copyright-line {
  font-size: var(--text-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.year-span,
.piece-year,
.activity-block h3 {
  margin-bottom: var(--space-xs);
}

.year-motto {
  font-size: var(--text-sm);
  color: var(--tulip-deep);
  margin-bottom: var(--space-xs);
  font-style: italic;
}

.year-brief,
.class-card p,
.footer-intro,
.piece-oneliner {
  font-size: var(--text-body-mobile);
  color: var(--ink-muted);
  line-height: var(--leading-normal);
}

.classes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.class-card,
.piece-card {
  border-left: 2px solid var(--tulip-mist);
  padding-left: var(--space-sm);
  transition: border-color var(--dur-base) var(--ease-out);
}

.class-card:hover,
.piece-card:hover {
  border-color: var(--tulip-petal);
}

.activities {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.portfolio-pieces {
  margin-top: var(--space-xl);
}

.piece-card {
  border-left: 2px solid var(--tulip-petal);
  padding-left: var(--space-md);
  margin-bottom: var(--space-xl);
}

.piece-header {
  margin-bottom: var(--space-md);
}

.piece-oneliner {
  margin: 0;
}

.piece-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.piece-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.piece-section p {
  margin: 0;
  max-width: 62ch;
}

.piece-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.piece-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.piece-links a {
  font-size: var(--text-sm);
}

.piece-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.tag {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: var(--tulip-blush);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 2px;
}

.selected-work {
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--padding-mobile);
}

.section-intro {
  color: var(--ink-muted);
  font-size: var(--text-md);
  margin-bottom: var(--space-lg);
  max-width: 52ch;
}

/* wen hua dian zhui · @zhao.langxi / ya nian */
.heritage-line {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--accent-quiet); /* secondary matcha brand · AA on pink-cream */
  margin: var(--space-xs) 0 0;
}

.heritage-line .sc {
  color: var(--accent-quiet);
  font-size: var(--step-0);
}

.duck-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-s);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay);
  background: linear-gradient(135deg, rgba(196, 160, 53, 0.1), rgba(58, 107, 92, 0.07));
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
}

.duck-badge .sc {
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--accent-quiet);
}

.section-label-bilingual {
  display: block;
  font-size: var(--text-accent);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: var(--space-3xs);
}

.section-label-bilingual .sc {
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--jade-soft);
  margin-right: 0.35em;
}

.roots-block {
  background: linear-gradient(180deg, var(--matcha-wash) 0%, transparent 100%);
  border-left: 3px solid var(--jade-soft);
  padding: var(--space-m) var(--space-m) var(--space-m) var(--space-m);
  border-radius: 0 4px 4px 0;
}

.roots-block p {
  font-size: var(--text-body-mobile);
  line-height: 1.75;
  color: var(--ink-muted);
  margin-bottom: var(--space-xs);
  max-width: 62ch;
}

.roots-block p:last-child {
  margin-bottom: 0;
}

.roots-block .sc-inline {
  font-family: 'Noto Serif SC', serif;
  color: var(--accent-quiet);
  font-weight: 500;
}

.coming-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-top: var(--space-sm);
}

.coming-card {
  display: block;
  padding: var(--space-s) var(--space-m);
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.coming-card:hover,
.coming-card:focus-visible {
  border-color: var(--matcha-ops);
  box-shadow: 0 2px 12px var(--shadow);
}

@media (prefers-reduced-motion: no-preference) {
  .coming-card:hover,
  .coming-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px var(--shadow);
  }
}

.coming-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-h3-mobile);
  font-weight: 400;
  color: var(--ink);
  margin-bottom: var(--space-3xs);
}

.coming-card .coming-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-crimson);
  margin-bottom: var(--space-2xs);
}

.coming-card .coming-tag::before {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--accent-crimson);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .coming-card .coming-tag::before {
    animation: tag-pulse 2.2s ease-in-out infinite;
  }
}

@keyframes tag-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.82);
  }
}

.coming-card p {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

.coming-card .tags {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* zhi xing shou ce yu jiu yun ying ye yang shi（yi liu，ye mian yi gui dang） */
.exec-meta {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: var(--space-3xs) 0;
  letter-spacing: 0.02em;
}

.exec-meta.shipping-signal {
  color: var(--ink);
  font-weight: 500;
  max-width: 52ch;
}

.exec-meta.shipping-signal a {
  color: var(--tulip-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 58, 74, 0.35);
}

.exec-meta.shipping-signal a:hover {
  border-bottom-color: var(--tulip-deep);
}

.exec-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  align-items: center;
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-subtle);
}

.exec-links a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.identity-quote,
.protocol-quote {
  margin: 0 0 var(--space-lg);
  padding: var(--space-m) var(--space-m);
  background: linear-gradient(180deg, var(--tulip-blush) 0%, transparent 100%);
  border-left: 3px solid var(--tulip-deep);
  border-radius: 0 4px 4px 0;
}

.identity-quote p,
.protocol-quote p {
  margin: 0;
  font-size: var(--text-body-mobile);
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 62ch;
}

.identity-quote strong,
.protocol-quote strong {
  color: var(--ink);
  font-weight: 600;
}

.footprint-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xs);
}

.footprint-list li {
  position: relative;
  padding-left: var(--space-s);
  margin-bottom: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.55;
}

.footprint-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--matcha-ops);
  font-weight: 600;
}

.ops-table-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin: var(--space-lg) 0 var(--space-sm);
}

.protocol-steps {
  list-style: none;
  counter-reset: protocol;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.protocol-steps li {
  counter-increment: protocol;
  display: grid;
  grid-template-columns: 2rem 1fr;
  column-gap: var(--space-xs);
  row-gap: var(--space-3xs);
  margin-bottom: var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: rgba(253, 246, 247, 0.85);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.protocol-steps li::before {
  content: counter(protocol, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  color: var(--tulip-deep);
  line-height: 1.2;
}

.protocol-steps li strong {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--ink);
  letter-spacing: 0.02em;
}

.protocol-steps li span {
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.55;
}

.opus-block {
  margin-bottom: var(--space-lg);
}

.opus-subhead {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.opus-lede {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0 0 var(--space-sm);
  max-width: 55ch;
  line-height: 1.6;
}

.labs-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: var(--space-md) 0 var(--space-sm);
}

.research-labs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  margin-bottom: var(--space-md);
}

.lab-card {
  padding: var(--space-s) var(--space-m);
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-top: 3px solid var(--matcha-ops);
  border-radius: 0 0 4px 4px;
}

.lab-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-h3-mobile);
  font-weight: 400;
  color: var(--ink);
  margin: var(--space-3xs) 0 0.45rem;
}

.lab-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}

.lab-card .sc-inline {
  font-family: 'Noto Serif SC', serif;
  color: var(--accent-quiet);
}

.coming-tag.status-exploring {
  color: var(--matcha-ops);
}

.coming-tag.status-exploring::before {
  background: var(--matcha-ops);
}

.coming-tag.status-curating {
  color: var(--accent-crimson);
}

.coming-tag.status-curating::before {
  background: var(--accent-crimson);
}

.coming-tag.status-sketching {
  color: var(--clay);
}

.coming-tag.status-sketching::before {
  background: var(--clay);
}

.roadmap-details {
  margin: var(--space-md) 0 var(--space-lg);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(253, 246, 247, 0.7);
}

.roadmap-details summary {
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: var(--space-xs) var(--space-s);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: 500;
}

.roadmap-details summary::-webkit-details-marker {
  display: none;
}

.roadmap-details summary::before {
  content: "+";
  display: inline-block;
  width: 1.25rem;
  margin-right: var(--space-2xs);
  color: var(--tulip-deep);
  font-weight: 600;
}

.roadmap-details[open] summary::before {
  content: " to ";
}

.roadmap-details .roadmap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  padding: 0 var(--space-s) var(--space-s);
}

.focus-line {
  font-size: var(--text-xs) !important;
  color: var(--ink-muted) !important;
  margin-top: var(--space-2xs) !important;
  line-height: 1.55 !important;
}

.focus-line em {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-subtle);
  margin-right: var(--space-3xs);
}

.matrix-heading {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 400;
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--ink);
}

.matrix-intro {
  margin-bottom: var(--space-sm);
}

.status-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.status-matrix th,
.status-matrix td {
  border: 1px solid var(--border);
  padding: var(--space-xs) var(--space-xs);
  text-align: left;
  vertical-align: top;
}

.status-matrix thead th {
  background: var(--tulip-blush);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

.status-matrix tbody th {
  font-weight: 500;
  color: var(--ink);
  background: rgba(250, 232, 236, 0.35);
}

.status-matrix tbody td {
  color: var(--ink-muted);
  line-height: 1.55;
}

.admin-snapshot tbody th {
  width: 36%;
}

/* .visually-hidden · jian a11y.css */

.handoff-pillars {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 var(--space-md);
}

.handoff-pillars li {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
  margin-bottom: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}

.handoff-pillars li:last-child {
  border-bottom: none;
}

.handoff-pillars li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--jade-soft);
}

.handoff-pillars strong {
  color: var(--ink);
}

.ops-dash {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
  counter-reset: none;
}

.ops-dash > li {
  margin: 0;
}

.ops-dash-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-s) var(--space-m);
  min-height: 48px;
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tulip-petal);
  border-radius: 0 4px 4px 0;
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.ops-dash-card:hover,
.ops-dash-card:focus-visible {
  border-left-color: var(--tulip-deep);
  background: #fff;
  box-shadow: 0 4px 14px var(--shadow);
}

.ops-dash-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--text-sm);
  color: var(--tulip-deep);
  margin-bottom: var(--space-3xs);
  letter-spacing: 0.06em;
}

.ops-dash-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 var(--space-3xs);
}

.ops-dash-card p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.55;
}

@media (min-width: 640px) {
  .research-labs {
    grid-template-columns: repeat(3, 1fr);
  }

  .roadmap-details .roadmap-grid {
    grid-template-columns: 1fr;
  }

  .ops-dash {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .roadmap-details .roadmap-grid {
    grid-template-columns: 1fr;
  }
}

.topic-cultural {
  border-top: 1px solid var(--gold-soft);
}

.topic-cultural h2::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: linear-gradient(90deg, var(--cinnabar-soft), var(--gold-soft));
  margin-top: var(--space-2xs);
}

.footer-duck-note {
  font-size: var(--text-xs);
  color: var(--ink-subtle);
  margin-top: var(--space-sm);
  letter-spacing: 0.04em;
}

.footer-duck-note .sc {
  color: var(--accent-quiet);
}

.footer-duck-note a {
  color: var(--jade-soft);
}

.work-previews {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.work-preview {
  display: block;
  text-decoration: none;
  border-left: 2px solid var(--tulip-mist);
  padding-left: var(--space-md);
  transition: border-color var(--dur-base) var(--ease-out);
}

.work-preview:hover,
.work-preview:focus-visible {
  border-color: var(--tulip-deep);
}

.work-preview .work-year {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
  display: block;
  margin-bottom: var(--space-xs);
}

.work-preview h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 0 var(--space-xs);
  font-weight: 500;
}

.work-preview p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* jian jie yuan xin xi yang shi（yi liu） */
.profile-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
}

.profile-meta-row {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr;
  gap: var(--space-sm);
  align-items: baseline;
  border-left: 2px solid var(--tulip-mist);
  padding-left: var(--space-sm);
}

.profile-meta dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin: 0;
}

.profile-meta dd {
  font-size: var(--text-body-mobile);
  color: var(--ink);
  margin: 0;
  line-height: var(--leading-normal);
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.link-list li {
  border-left: 2px solid var(--tulip-mist);
  padding-left: var(--space-sm);
  font-size: var(--text-body-mobile);
  line-height: var(--leading-normal);
  color: var(--ink);
}

.resources-section {
  background: var(--tulip-blush);
}

/* san ming zhi gui ze xiang guan yang shi */
.sandwich-section {
  background: var(--tulip-blush);
}

.sandwich-section ol {
  list-style: none;
  counter-reset: principle;
  padding-left: 0;
  margin: var(--space-sm) 0 var(--space-md);
}

.sandwich-section ol li {
  counter-increment: principle;
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  margin-bottom: var(--space-xs);
}

.sandwich-section ol li::before {
  content: counter(principle) ".";
  color: var(--tulip-deep);
  font-variant-numeric: tabular-nums;
  min-width: 1.5rem;
}

ol {
  padding-left: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
}

ol li::marker { color: var(--tulip-deep); }

/* jiu qing dan ye yang shi（yi liu，ye mian yi gui dang） */
.table-wrap {
  overflow-x: auto;
  margin: var(--space-md) 0;
  -webkit-overflow-scrolling: touch;
}

.coord-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.coord-table th,
.coord-table td {
  border: 1px solid var(--border);
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  vertical-align: top;
}

.coord-table th {
  background: var(--tulip-blush);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}

.coord-table tbody tr:nth-child(even) {
  background: rgba(250, 232, 236, 0.35);
}

.coord-table .col-status {
  white-space: nowrap;
}

.table-note {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.module-checklists {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.module-checklist-block h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}

.coord-checklist {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-sm);
}

.coord-checklist li {
  margin-bottom: var(--space-3xs);
}

.coord-checklist label {
  display: flex;
  gap: var(--space-2xs);
  align-items: flex-start;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.coord-checklist input[type="checkbox"] {
  margin-top: 0.2rem;
  min-width: 1rem;
  min-height: 1rem;
  accent-color: var(--tulip-deep);
}

.checklist-actions {
  margin-bottom: var(--space-md);
}

.coord-btn {
  font-family: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--tulip-blush);
  color: var(--ink);
  cursor: pointer;
  min-height: 48px;
}

.coord-btn:hover,
.coord-btn:focus-visible {
  border-color: var(--tulip-deep);
  background: var(--tulip-mist);
}

.owner-jade {
  font-weight: 600;
  color: var(--tulip-deep);
}

.status-badge {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 0.2rem var(--space-2xs);
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.3;
}

.status-draft { background: #f5f0e8; color: #7a6a4a; }
.status-video { background: #fce8ee; color: #8a3d52; }
.status-blank { background: #f0ece8; color: #6b5a4a; }
.status-pending { background: #f5f0e8; color: #7a6a4a; }
.status-blocked { background: #eee8f0; color: #5a4a6b; }

.open-todos li {
  list-style: disc;
  margin-left: var(--space-m);
  margin-bottom: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* jiu kan ban ye dao hang yang shi（yi liu，ye mian yi gui dang） */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin: var(--space-md) 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.nav-links a {
  font-size: var(--text-sm);
  text-decoration: none;
}

.nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-crimson);
  background: var(--dusty-pink-soft);
}

main.container > h1 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-hero-mobile);
  color: var(--ink);
  margin: var(--space-lg) 0 var(--space-xs);
}

main.container > h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-h2-mobile);
  font-weight: 500;
  margin: var(--space-lg) 0 var(--space-sm);
  color: var(--ink);
}

main.container > h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 500;
  margin: var(--space-md) 0 var(--space-xs);
}

main.container table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--space-sm) 0 var(--space-md);
}

main.container table th,
main.container table td {
  border: 1px solid var(--border);
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  vertical-align: top;
}

main.container table th {
  background: var(--tulip-blush);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

main.container table tbody tr:nth-child(even) {
  background: rgba(250, 232, 236, 0.35);
}

/* jiu kan ban yang shi（yi liu） */
body.coord-page {
  background-color: var(--tulip-light);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(237, 213, 218, 0.55) 1px, transparent 0);
  background-size: 22px 22px;
}

.coord-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  align-items: center;
  padding: var(--space-sm) var(--padding-mobile);
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--border);
}

.coord-nav a {
  font-size: var(--text-sm);
  text-decoration: none;
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 2px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

.coord-nav a[aria-current="page"] {
  background: var(--dusty-pink-soft);
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-crimson);
}

.coord-nav .nav-divider {
  color: var(--ink-subtle);
  font-size: var(--text-xs);
  user-select: none;
}

.board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-sm);
  background: rgba(253, 246, 247, 0.85);
  border: 1px dashed var(--border);
  border-radius: 2px;
}

.board-legend dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
  width: 100%;
  margin-bottom: 0.15rem;
}

.board-legend dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.open-todos-panel {
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-md);
  background: linear-gradient(165deg, #fff9e8 0%, #fff4d6 100%);
  border: 1px solid #e8d9a8;
  border-radius: 2px;
  box-shadow: 2px 3px 0 rgba(61, 43, 43, 0.06);
  transform: rotate(-0.35deg);
}

.open-todos-panel h2 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 500;
  margin: 0 0 var(--space-sm);
  color: var(--tulip-soil);
}

.open-todos-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.open-todos-list li {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink);
  padding-left: var(--space-s);
  position: relative;
}

.open-todos-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--tulip-stem);
  font-weight: 600;
}

.open-todos-list .todo-owner {
  font-weight: 600;
  color: var(--tulip-deep);
}

.module-board {
  border: 1px solid var(--border);
  border-radius: 2px;
  background: rgba(253, 246, 247, 0.92);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  box-shadow: 0 2px 8px var(--shadow);
}

.module-board.is-owned {
  border-left: 4px solid var(--tulip-deep);
  background: linear-gradient(135deg, rgba(250, 232, 236, 0.5) 0%, rgba(253, 246, 247, 0.95) 40%);
}

.module-board-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-s);
  margin-bottom: var(--space-sm);
}

.module-board-header h2 {
  margin: 0;
  flex: 1 1 auto;
}

.module-board .section-intro {
  margin-bottom: var(--space-sm);
}

.owner-tag {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  padding: 0.2rem var(--space-2xs);
  border-radius: 2px;
  background: var(--tulip-blush);
  color: var(--ink-muted);
  white-space: nowrap;
}

.owner-tag.owner-jade,
.owner-jade.owner-tag {
  background: var(--tulip-petal);
  color: var(--tulip-soil);
  font-weight: 600;
}

.owner-tag.owner-shared {
  background: #e8f0e9;
  color: #3d5c42;
}

.owner-tag.owner-external {
  background: #f0ece8;
  color: #6b5a4a;
}

.type-badge {
  display: inline-block;
  font-size: var(--text-xs);
  text-transform: lowercase;
  padding: 0.1rem var(--space-3xs);
  border-radius: 2px;
  background: var(--tulip-mist);
  color: var(--ink-muted);
}

.notes-cell {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: var(--leading-normal);
}

.notes-cell .status-badge {
  margin-right: var(--space-3xs);
  vertical-align: middle;
}

.status-badge.status-ready {
  background: #e8f0e9;
  color: #2d4a32;
}

.status-badge.status-unpublished {
  background: #f0ece8;
  color: #6b5a4a;
}

.status-badge.status-blocked { background: #eee8f0; color: #5a4a6b; }

.status-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

@media (min-width: 480px) {
  .status-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .status-summary {
    grid-template-columns: repeat(4, 1fr);
  }
}

.status-stat {
  padding: var(--space-sm);
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-align: center;
}

.status-stat .stat-num {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--tulip-deep);
  line-height: 1.2;
}

.status-stat .stat-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
}

.hub-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

@media (min-width: 480px) {
  .hub-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.hub-card {
  display: block;
  text-decoration: none;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tulip-petal);
  border-radius: 0 2px 2px 0;
  background: rgba(253, 246, 247, 0.9);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.hub-card:hover,
.hub-card:focus-visible {
  border-left-color: var(--tulip-deep);
  background: var(--tulip-blush);
}

.hub-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 var(--space-3xs);
}

.hub-card p {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
  line-height: var(--leading-normal);
}

.draft-link {
  font-size: var(--text-xs);
  white-space: nowrap;
}

.prereq-chain {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  padding: var(--space-md);
  background: var(--tulip-blush);
  border-left: 3px solid var(--tulip-stem);
  border-radius: 0 2px 2px 0;
}

.prereq-chain p {
  margin-bottom: var(--space-2xs);
}

.prereq-chain p:last-child {
  margin-bottom: 0;
}

.checklist-table caption,
.coord-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  padding-bottom: var(--space-2xs);
}

.checklist-table td:first-child {
  font-weight: 500;
  color: var(--ink);
}

.checklist-table .col-status {
  white-space: nowrap;
}

.status-unpub,
.status-unpublished {
  /* yi liu：biao ji you xian yong .status-badge */
  color: var(--ink-muted);
  font-style: italic;
}

.owner-jade {
  font-weight: 600;
  color: var(--tulip-deep);
}

.note-box {
  background: var(--tulip-blush);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tulip-mist);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  border-radius: 2px;
}

.note-box.owned {
  border-left-color: var(--tulip-deep);
}

.note-box h3 {
  margin-top: 0;
}

ul.checklist {
  list-style: none;
  padding-left: 0;
  margin: var(--space-sm) 0 0;
}

ul.checklist li {
  position: relative;
  padding-left: var(--space-m);
  margin-bottom: var(--space-3xs);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

ul.checklist li::before {
  content: "□";
  position: absolute;
  left: 0;
  color: var(--tulip-deep);
}

.open-task {
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--tulip-stem);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.table-scroll {
  overflow-x: auto;
  margin: var(--space-sm) 0 var(--space-md);
  -webkit-overflow-scrolling: touch;
}

.checklist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.checklist-table th,
.checklist-table td {
  border: 1px solid var(--border);
  padding: var(--space-2xs) var(--space-xs);
  text-align: left;
  vertical-align: top;
}

.checklist-table th {
  background: var(--tulip-blush);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  position: sticky;
  top: 0;
  z-index: 1;
}


/* lian jie */
a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--accent-quiet);
  transition:
    color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* ye jiao */
.footer {
  padding: 3rem var(--padding-mobile);
  border-top: 1px solid var(--border);
  margin-top: var(--space-xl);
  text-align: center;
}

.connect {
  text-align: center;
  padding: var(--space-2xl) var(--padding-mobile);
}

.footer-intro {
  margin-bottom: var(--space-md);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.links {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-lg);
}

/* The handle takes matcha deep on cream (6.07:1) and darkens to ink
   on hover, so the colour shift never trades away contrast. */
.links a.link-instagram,
.footer-ig-note a.link-instagram,
a.link-instagram {
  color: var(--accent);
}

.links a.link-instagram:hover,
.links a.link-instagram:focus-visible,
.footer-ig-note a.link-instagram:hover,
.footer-ig-note a.link-instagram:focus-visible,
a.link-instagram:hover,
a.link-instagram:focus-visible {
  color: var(--ink);
}

.footer-ig-note {
  font-size: var(--text-sm);
  color: var(--ink-subtle);
  margin-bottom: var(--space-sm);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

.footer-ig-note a:not(.link-instagram) {
  color: var(--ink-muted);
}

.links a,
.nav-link {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
}

.elsewhere {
  text-align: center;
  padding-bottom: var(--space-md);
}

.elsewhere-label {
  font-size: var(--text-accent);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-subtle);
  margin-bottom: var(--space-xs);
}

.elsewhere .links {
  margin-bottom: var(--space-sm);
}

.year-navigation {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: center;
  margin-bottom: var(--space-lg);
}

.nav-spacer {
  display: none;
  color: var(--ink-subtle);
}

.copyright-line {
  text-transform: none;
  letter-spacing: var(--tracking-normal);
}

/* ping ban ji yi shang */
@media (min-width: 768px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: var(--space-md);
    align-items: start;
    padding: var(--space-xl) var(--space-md);
  }

  .hero h1 {
    font-size: var(--text-h1-mobile);
  }

  .hero-image {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 60vh;
    margin: 0 0 var(--space-md);
    border-radius: 4px;
    border: none;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }

  .hero-actions .btn {
    width: auto;
    padding: var(--space-2xs) var(--space-s);
    min-height: 48px;
  }

  .coming-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .stack-matrix {
    grid-template-columns: 1fr 1fr;
  }

  .ops-row {
    grid-template-columns: minmax(10rem, 1.1fr) 1.4fr 1.2fr;
    align-items: start;
    gap: var(--space-s);
  }

  .ops-row.ops-head {
    display: grid;
    background: var(--bg-soft-warm);
    border-left-color: var(--matcha-ops);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 600;
  }

  .ops-takeaway::before,
  .ops-proof::before {
    content: none;
  }

  .topic,
  .year-content,
  .years-nav,
  .selected-work {
    padding: var(--space-xl) var(--space-md);
    margin-bottom: var(--space-2xl);
  }

  .topic-content p,
  .philosophy-block p,
  .impact-block p,
  .activity-block p,
  .piece-section p,
  .footer-intro {
    max-width: 65ch;
  }

  .years-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
  }

  .classes-grid {
    grid-template-columns: 1fr 1fr;
  }

  .links {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .year-navigation {
    flex-direction: row;
    justify-content: center;
  }

  .nav-spacer {
    display: inline;
  }

  .piece-card {
    padding-left: var(--space-md);
  }
}

/* zhuo mian（bao liu liang lie nian ji bu ju） */
@media (min-width: 1024px) {
  .years-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* shen se mo shi · jin zhen zheng shen se di de xie tiao ye huan fen bi zi；nai you jiao shi ye jin zhi qian zi */
@media (prefers-color-scheme: dark) {
  body.coord-page {
    --tulip-light: #1E1518;
    --tulip-blush: #251A1D;
    --text-primary: #F2E0E3;
    --text-secondary: #D4B0B6;
    --text-ghost: #C9A8A8;
    --border: #3D2B2E;
    --shadow: rgba(0, 0, 0, 0.3);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(61, 43, 46, 0.6) 1px, transparent 0);
  }

  body.coord-page .open-todos-panel {
    background: linear-gradient(165deg, #2a2618 0%, #1f1c14 100%);
    border-color: #4a4430;
  }

  body.coord-page .module-board {
    background: rgba(30, 21, 24, 0.92);
  }

  body.coord-page .board-legend {
    background: rgba(30, 21, 24, 0.85);
  }

  body.coord-page .hub-card {
    background: rgba(30, 21, 24, 0.9);
  }
}

/* da yin */
@media print {
  .year-nav,
  .background-watermark,
  .footer .links {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: var(--step--2);
    color: #666;
  }

  a[href^="mailto"]::after {
    content: "";
  }

  .year-card,
  .class-card,
  .activity-block {
    break-inside: avoid;
  }

  h2 {
    break-after: avoid;
  }
}

/* you er yuan feng zhu ye · matchaxmoxie index */
body.kindergarten-home {
  padding:
    calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(48px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  padding-top: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px));
  line-height: 1.55;
}

/* Mobile dock + Cookie tab · must follow kindergarten-home padding shorthand */
@media (max-width: 640px) {
  body.kindergarten-home,
  body.kiss-home,
  body.choice-home,
  body.guide-page,
  body.journey-page,
  body.scratch-studio-page,
  body.campus-survival-page,
  body.footprint-page {
    padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/*
 * Body copy links only. Do NOT style .site-jump here:
 * same specificity as .site-jump a, later in the cascade, used to
 * zero border-bottom and kill crimson active/hover highlights on home.
 */
/* Body links inside main only (nav is outside). The exclusion list
   lives in :where() so it costs nothing: chained :not(.class) was
   pushing this prose rule to (0,12,2), above every component that
   needed to own its own link colour, which is how the year nav's
   current chip ended up accent text on an accent chip. Anything that
   paints its own fill goes in the list. */
.kindergarten-home main a:not(:where(.open-cta, .open-link-cta, .btn, .btn-primary, .btn-secondary, .btn-outline, .howto-play, .howto-download, .howto-howto, .scratch-primary-cta, .desk-photo-link)) {
  color: var(--dusk);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2.5px;
  border-bottom: 0;
}

.kindergarten-home main a:not(:where(.open-cta, .open-link-cta, .btn, .btn-primary, .btn-secondary, .btn-outline, .howto-play, .howto-download, .howto-howto, .scratch-primary-cta, .desk-photo-link)):hover {
  color: var(--accent-crimson);
  text-decoration-color: var(--accent-crimson);
}

.kindergarten-home main a:not(:where(.open-cta, .open-link-cta, .btn, .btn-primary, .btn-secondary, .btn-outline, .howto-play, .howto-download, .howto-howto, .scratch-primary-cta, .desk-photo-link)):focus-visible {
  outline: 4px solid var(--focus-ring, var(--accent-crimson));
  outline-offset: 3px;
}

.kindergarten-home .mono {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

.kindergarten-home .sc {
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
}

/* Legacy top bar (kiss-home hides it) · same pink IU gear as .site-jump */
.kindergarten-home .site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  min-height: var(--nav-h);
  background: var(--surface);
  border-bottom: 4px solid var(--accent-crimson);
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

.kindergarten-home .site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-s);
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-muted);
  text-decoration: none;
  border: 0;
  border-bottom: 4px solid transparent;
}

.kindergarten-home .site-nav a:hover,
.kindergarten-home .site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--dusty-pink-soft);
  border-bottom-color: var(--accent-crimson);
}

.kindergarten-home .site-nav a.nav-home {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 14px;
  text-transform: none;
}

.kindergarten-home .site-nav .nav-sep {
  width: 3px;
  background: var(--ink);
  margin: var(--space-2xs) var(--space-3xs);
  align-self: stretch;
}

.kindergarten-home .wrap {
  max-width: 920px;
  margin: 0 auto;
}

.kindergarten-home .twin-note {
  text-align: left;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: var(--space-l);
  padding: var(--space-xs) var(--space-s);
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 4px 4px 0 var(--lavender);
  max-width: 58ch;
}

/* shou zhong liang shan men · xue sheng / zhao pin ru kou */
.kiss-home .start-here {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 var(--space-2xs);
}

.kiss-home .doors {
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-l);
  max-width: 54ch;
}

.kiss-home .door {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-height: 44px;
  padding: var(--space-s) var(--space-s);
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 4px 4px 0 var(--golden-hour);
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
}

.kiss-home .door:hover {
  box-shadow: 4px 4px 0 var(--coral);
  color: var(--ink);
}

.kiss-home .door:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.kiss-home .door--primary {
  box-shadow: 4px 4px 0 var(--coral);
}

.kiss-home .door-who {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.15rem, 3.5vw, 1.35rem);
  line-height: 1.2;
  color: var(--ink);
}

.kiss-home .door-what {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--ink-muted);
}

.kindergarten-home .twin-note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 3px;
  border-bottom: 0;
}

.kindergarten-home .hero {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: var(--space-l) var(--space-l);
  align-items: center;
  margin-bottom: var(--space-m);
}

.kindergarten-home .hero-visual {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--lily-pink, var(--coral));
  background: var(--surface);
  box-shadow: none;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kindergarten-home .classroom-board {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 48%;
  height: 34%;
  background: var(--chalkboard);
  border: 3px solid var(--accent);
  z-index: 2;
}

.kindergarten-home .classroom-board::before,
.kindergarten-home .classroom-board::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 4px;
  background: #FFF8F0;
  box-shadow: 0 0 0 1px rgba(255, 248, 240, 0.35);
}

.kindergarten-home .classroom-board::before { top: 22%; }
.kindergarten-home .classroom-board::after { top: 52%; width: 60%; }

/* jian zhi luo ri（bu yong ruan yuan） */
.kindergarten-home .classroom-sun {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 42%;
  height: 36%;
  transform: translateX(-50%);
  z-index: 1;
}

.kindergarten-home .classroom-sun::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 48px solid transparent;
  border-right: 48px solid transparent;
  border-bottom: 56px solid var(--golden-hour);
}

.kindergarten-home .classroom-sun::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 72px;
  height: 14px;
  transform: translateX(-50%);
  background: var(--coral);
  border: 3px solid var(--accent);
  border-bottom: 0;
}

.kindergarten-home .horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 48%;
  height: 4px;
  background: var(--ink);
  z-index: 1;
}

.kindergarten-home .classroom-apple {
  position: absolute;
  bottom: 8%;
  left: 14%;
  width: 16%;
  height: 16%;
  background: var(--apple-red);
  border: 3px solid var(--accent);
  z-index: 3;
}

.kindergarten-home .star-sticker {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid var(--surface);
  transform: rotate(15deg);
  z-index: 3;
}

.kindergarten-home .star-1 { top: 8%; left: 8%; }
.kindergarten-home .star-2 { bottom: 10%; right: 10%; transform: rotate(-20deg); }

.kindergarten-home .name-tag {
  position: absolute;
  top: 6%;
  left: 6%;
  padding: var(--space-3xs) var(--space-2xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--surface);
  border: 2px dashed var(--coral);
  color: var(--ink);
  z-index: 4;
}

.kindergarten-home .hero-text h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 6.5vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.kindergarten-home .hero-text h1 .sc {
  color: var(--dusk);
  font-size: 0.82em;
}

.kindergarten-home .hero-tag {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(17px, 2.5vw, 20px);
  color: var(--ink-muted);
  max-width: 44ch;
  margin-bottom: var(--space-s);
}

/* shou ping gou zi · HS senior reason-to-care（xian yu long feng shuang zhan） */
.kindergarten-home .hero-hook {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 3.6vw, 1.75rem);
  line-height: 1.25;
  color: var(--coral-ink);
  max-width: 28ch;
  margin: 0 0 var(--space-2xs);
}

.kindergarten-home .hero-why {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 40ch;
  margin: 0 0 var(--space-xs);
}

.open-invest--hero {
  margin-top: 0;
  margin-bottom: var(--space-l);
  padding: var(--space-m) var(--space-m) var(--space-m);
  max-width: none;
  /* cut-paper keyline stays ... it is the classroom motif ... but in
     matcha deep rather than black, and with the corner radius the rest
     of the site uses */
  background: linear-gradient(165deg, var(--surface-raised) 0%, var(--surface) 60%, var(--surface-warm) 100%);
  border: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 6px 6px 0 var(--accent-wash-strong);
}

.open-invest--hero h2,
.open-invest h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.twin-note--after-invest {
  margin-top: var(--space-2xs);
}

/* ── choice-first home · Stanford warmer · one clear composition ── */
.choice-home .hero--choice {
  margin-bottom: var(--space-l);
  align-items: center;
  gap: var(--space-l) var(--space-l);
}

.choice-home .hiatus-banner {
  margin: 0 0 var(--space-l);
  max-width: none;
}

/* Brand = hero-level signal (not tiny courier label) */
.choice-home .hero-brand-line,
.choice-home .hero-iu {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.55rem, 4.2vw, 2.05rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
  line-height: 1.12;
}

.choice-home .hero-brand-line .sc {
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  color: var(--accent-crimson);
}

/* Soft energy ... whisper under brand, not a second headline */
.choice-home .hero-energy-line {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--crimson-ink);
  margin: 0 0 var(--space-s);
}

/* vibe / cookie moved below the fold · keep rule harmless if reintroduced */
.choice-home .hero-vibe-line,
.choice-home .hero-cookie-line,
.choice-home .hero-bagel-quote .hero-cookie-offer {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
  max-width: 34ch;
}

/* Bagel quote = only personality signal with 凤凰 */
.choice-home .hero-bagel-quote {
  margin: 0 0 var(--space-l);
  padding: 0;
  border: 0;
  max-width: 32ch;
}

.choice-home .hero-bagel-quote p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 1.05rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0 0 var(--space-3xs);
}

.choice-home .hero-bagel-quote cite {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  margin-top: var(--space-3xs);
}

.choice-home .hero-bagel-quote cite a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.choice-home .hero-bagel-quote cite a:hover,
.choice-home .hero-bagel-quote cite a:focus-visible {
  color: var(--accent-crimson);
}

/* Deliberate CTA ... restrained, not a shout */
.choice-home .hero-text h1 {
  font-size: clamp(1.65rem, 4.5vw, 2.15rem);
  max-width: 16ch;
  margin: 0 0 var(--space-2xs);
  line-height: 1.15;
  position: relative;
  padding-bottom: var(--space-2xs);
  color: var(--ink);
}

.choice-home .hero-text h1::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: var(--space-xs);
  border-radius: 2px;
  background: var(--accent-crimson);
}

.choice-home .hero-cta-link {
  color: inherit;
  text-decoration: none;
}

.choice-home .hero-cta-link:hover,
.choice-home .hero-cta-link:focus-visible {
  color: var(--accent-crimson);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.choice-home .hero-hook {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(0.92rem, 2vw, 1.02rem);
  color: var(--ink-muted);
  max-width: 34ch;
  margin: 0;
  line-height: 1.45;
}

.open-invest--hero .invest-lede {
  font-size: clamp(1.15rem, 2.6vw, 1.3rem);
  margin-bottom: var(--space-s);
}

.situation-plan-next {
  margin: var(--space-s) 0 var(--space-2xs);
}

.situation-plan-secondary {
  margin: 0 0 var(--space-2xs);
}

.situation-pick-status:empty {
  display: none;
}

.situation-pick-status:not(:empty) {
  margin: 0 0 var(--space-xs);
}

.choice-home-visual {
  margin-top: var(--space-m);
}

.choice-home .twin a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  touch-action: manipulation;
}

/* footer · centered human / quote / soft (shared chrome) */
.footer-kiss {
  text-align: center;
  margin: 2.5rem auto 0;
  padding:
    1rem
    max(16px, env(safe-area-inset-right, 0px))
    max(1.75rem, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  width: 100%;
  max-width: 36rem;
  box-sizing: border-box;
  border-top: 1px solid var(--border-faint, rgba(43, 45, 51, 0.14));
}

.footer-kiss > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 36rem;
  line-height: 1.45;
  text-align: center;
}

.footer-kiss .human {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.footer-kiss .footer-quote {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  font-style: italic;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

.footer-kiss .footer-soft {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
  max-width: 36rem;
}

.footer-kiss > p:not(.human):not(.footer-quote):not(.footer-soft) {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

.path-page-header {
  margin: 0 0 var(--space-m);
  max-width: 52ch;
}

.path-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 var(--space-2xs);
}

.path-page-header h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 var(--space-xs);
}

.path-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}

.path-visual-grid {
  display: grid;
  gap: var(--space-m);
  margin: 0 0 var(--space-l);
}

.scratch-path-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3xs);
  margin: 0 0 var(--space-2xs);
  max-width: 40ch;
}

.scratch-path-open-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-ink);
}

.scratch-path-open-title {
  font-size: clamp(1.45rem, 3.8vw, 1.85rem);
}

.scratch-path-open-hint {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 1.1rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

@media (max-width: 560px) {
  /* Side-by-side on tiny phones became a postage stamp ... stack photo above copy */
  .choice-home .hero,
  .kindergarten-home.choice-home .hero {
    grid-template-columns: 1fr;
    gap: var(--space-xs) 0;
    align-items: start;
    text-align: left;
    margin-bottom: var(--space-s);
  }

  .choice-home .hero-visual,
  .kindergarten-home.choice-home .hero-visual,
  .kindergarten-home.choice-home .hero-visual--photo,
  .choice-home .hero-visual--photo {
    max-width: 200px;
    width: 100%;
    margin: 0;
    transform: none;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .choice-home .hero-brand-line,
  .choice-home .hero-iu {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    margin-bottom: 2px;
  }

  .choice-home .hero-energy-line {
    font-size: 0.9rem;
    margin-bottom: var(--space-2xs);
  }

  .choice-home .hero-bagel-quote {
    margin-bottom: var(--space-xs);
  }

  .choice-home .hero-bagel-quote p {
    font-size: 0.86rem;
  }

  .choice-home .hero-bagel-quote .hero-cookie-offer {
    font-size: 0.68rem;
  }

  .choice-home .hero-text h1 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    margin-bottom: var(--space-3xs);
    max-width: none;
    padding-bottom: 0;
  }

  .choice-home .hero-text h1::after {
    content: none;
  }

  .choice-home .hero-hook {
    font-size: 0.9rem;
    max-width: none;
  }

  .choice-home .hiatus-banner {
    margin-bottom: var(--space-xs);
    padding: var(--space-xs) var(--space-xs);
  }
}

.kindergarten-home .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-muted);
}

.kindergarten-home .hero-meta .ig {
  color: var(--coral-ink);
}

.kindergarten-home .sunset-badge {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: var(--space-3xs) var(--space-2xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--peach);
  border: 3px solid var(--accent);
}

.kindergarten-home .poem {
  margin: var(--space-l) 0 var(--space-xl);
  padding: var(--space-m) var(--space-l);
  background: var(--surface);
  border: 4px solid var(--accent);
  border-left: 8px solid var(--coral);
  box-shadow: 5px 5px 0 var(--lavender);
  position: relative;
}

.kindergarten-home .poem::before {
  content: "★";
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 24px;
  color: var(--golden-hour);
  text-shadow: 1px 1px 0 var(--ink);
}

.kindergarten-home .poem p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(16px, 2.3vw, 18px);
  line-height: 1.65;
  color: var(--ink);
  max-width: 58ch;
}

.kindergarten-home .poem cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 12.5px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dusk);
}

.kindergarten-home .section-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
}

.kindergarten-home .section-head h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 4vw, 28px);
  color: var(--ink);
}

.kindergarten-home .section-head .sc-label {
  font-family: "Noto Serif SC", serif;
  font-size: 14px;
  color: var(--coral-ink);
}

.kindergarten-home .section-lede {
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 52ch;
  margin: -8px 0 var(--space-m);
}

.kindergarten-home .project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}

.kindergarten-home .project-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  padding: var(--space-s);
  border: 4px solid var(--accent);
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--lavender);
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kindergarten-home .project-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--coral);
}

.kindergarten-home .project-card:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.kindergarten-home .project-card.sun::before,
.kindergarten-home .project-card.sky::before,
.kindergarten-home .project-card.grass::before,
.kindergarten-home .project-card.apple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.kindergarten-home .project-card.sun::before { background: var(--golden-hour); }
.kindergarten-home .project-card.sky::before { background: var(--lavender); }
.kindergarten-home .project-card.grass::before { background: var(--coral); }
.kindergarten-home .project-card.apple::before { background: var(--apple-red); }

.kindergarten-home .card-emoji {
  font-size: 28px;
  line-height: 1;
  margin-bottom: var(--space-2xs);
}

.kindergarten-home .card-title {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  margin-bottom: var(--space-3xs);
}

.kindergarten-home .card-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
  flex: 1;
}

.kindergarten-home .card-tags {
  margin-top: var(--space-xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dusk);
}

.kindergarten-home .card-arrow {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--coral-ink);
}

.kindergarten-home .now-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.kindergarten-home .now-card {
  padding: var(--space-s);
  background: var(--surface);
  border: 4px solid var(--accent);
  border-top: 8px solid var(--golden-hour);
  box-shadow: 4px 4px 0 var(--lavender);
}

.kindergarten-home .now-card.sky {
  border-top-color: var(--dusk);
}

.kindergarten-home .now-k {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-3xs);
}

.kindergarten-home .now-card h3 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 17px;
  margin-bottom: var(--space-2xs);
  color: var(--ink);
}

.kindergarten-home .now-card h3 a {
  color: inherit;
  border: 0;
}

.kindergarten-home .now-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.kindergarten-home .about {
  margin-bottom: var(--space-xl);
  padding: var(--space-m) 0;
  border-top: 4px dashed var(--lavender);
}

.kindergarten-home .about p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink);
  max-width: 62ch;
  margin-bottom: var(--space-xs);
}

.kindergarten-home .about .roots {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  margin-top: var(--space-s);
}

.kindergarten-home .about .roots .sc {
  color: var(--coral-ink);
}

.kindergarten-home .stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-s) 0 var(--space-m);
}

.kindergarten-home .stat-chip {
  padding: var(--space-2xs) var(--space-xs);
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--gold-soft);
  border: 3px solid var(--accent);
}

.kindergarten-home .footer {
  padding-top: var(--space-m);
  border-top: 4px solid var(--accent);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  font-size: 12.5px;
  color: var(--ink-muted);
}

.kindergarten-home .footer .k {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
  display: block;
  margin-bottom: var(--space-3xs);
}

.kindergarten-home .footer .human {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 14px;
  color: var(--ink);
  max-width: 40ch;
}

@media (prefers-reduced-motion: no-preference) {
  .kindergarten-home .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: kg-rise 0.5s ease forwards;
  }

  .kindergarten-home .reveal:nth-child(2) { animation-delay: 0.05s; }
  .kindergarten-home .reveal:nth-child(3) { animation-delay: 0.1s; }
  .kindergarten-home .reveal:nth-child(4) { animation-delay: 0.15s; }

  @keyframes kg-rise {
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 680px) {
  /* choice-home keeps a compact side-by-side sunflower hero (see ≤560 rule) */
  .kindergarten-home:not(.choice-home) .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .kindergarten-home:not(.choice-home) .hero-visual {
    max-width: 240px;
    margin: 0 auto;
    transform: none;
  }

  .kindergarten-home:not(.choice-home) .hero-tag {
    margin-left: auto;
    margin-right: auto;
  }

  .kindergarten-home .hero-meta {
    justify-content: center;
  }

  .kindergarten-home .now-strip {
    grid-template-columns: 1fr;
  }

  .kindergarten-home .project-grid {
    grid-template-columns: 1fr;
  }

  /* dao hang huan hang · mu lu bu heng xiang gun */
  .kindergarten-home .site-nav {
    justify-content: center;
    overflow-x: visible;
    flex-wrap: wrap;
    row-gap: 0;
  }

  .kindergarten-home .site-nav .nav-sep {
    display: none;
  }
}

/* gui dang shuo ming ye */
.archive-page {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m) 4rem;
}

.archive-page h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  margin-bottom: var(--space-s);
  color: var(--ink);
}

.archive-page p {
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-muted);
  margin-bottom: var(--space-s);
}

.archive-page .archive-box {
  padding: var(--space-m);
  margin: var(--space-m) 0;
  background: var(--surface);
  border: 4px solid var(--accent);
  border-left: 8px solid var(--coral);
  box-shadow: 5px 5px 0 var(--lavender);
}

.archive-page .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}



/* nai you di qiang zhi shen mo · jin zhi fen bi qian zi luo zai nai you shang（hai zi ye ke du） */
body.kindergarten-home,
body.kiss-home,
body.guide-page,
body.journey-page,
body.scratch-studio-page,
body.campus-survival-page,
body.kindergarten-home .gwc-block,
body.kiss-home .gwc-block,
body.guide-page .guide-section,
body.guide-page .guide-attr,
body.scratch-studio-page .howto-body,
body.scratch-studio-page .howto-meta,
body.kiss-home .twin-note,
body.kiss-home .hero-tag,
body.kiss-home .hero-meta,
body.kiss-home .quiet-links,
body.kiss-home .footer-kiss,
body.kiss-home .footer-kiss .human,
body.kiss-home figcaption {
  color: #2b2d33 !important;
}

body.kindergarten-home .gwc-block li,
body.kiss-home .gwc-block li,
body.guide-page .guide-section li,
body.scratch-studio-page .howto-body li,
body.scratch-studio-page .howto-body p,
body.scratch-studio-page .howto-meta p {
  color: #2b2d33 !important;
}

/* keep-it-simple ri luo zhu ye · shao ka pian · an jing gui dang */
body.kiss-home {
  padding-top: max(28px, env(safe-area-inset-top, 0px));
}

/* nai you jiao shi ye：suo ding shen mo，xi tong shen se mo shi bu de ji cheng fen bi fen zi */
body.kindergarten-home,
body.kiss-home,
body.guide-page,
body.journey-page,
body.scratch-studio-page,
body.campus-survival-page {
  color-scheme: light only;
  color: #2b2d33 !important;
  --ink: var(--charcoal-fleece, #2b2d33);
  --crayon-ink: var(--charcoal-fleece, #2b2d33);
  --text-primary: var(--charcoal-fleece, #2b2d33);
  --text-secondary: var(--window-grey, #6b7178);
  --text-ghost: #4a4e55;
  --text-muted: var(--window-grey, #6b7178);
}

/* ying xiong qu / ke cheng biao：ying mo，fang huan cun jiu CSS ji cheng fen bi fen */
.guide-page .guide-hero .studio-kicker,
.guide-page .guide-hero .studio-lede,
.guide-page .guide-hero h1,
.guide-page .guide-hero .studio-note,
.journey-courses,
.journey-courses li,
.journey-courses code,
.kiss-home .gwc-block,
.kiss-home .gwc-block p,
.kiss-home .gwc-block li,
.kiss-home .gwc-block h2,
.campus-survival-page .coord-checklist label,
.campus-survival-page .campus-subh,
.campus-survival-page .year23-banner p,
.scratch-studio-page .howto-body,
.scratch-studio-page .howto-body p,
.scratch-studio-page .howto-body li {
  color: #2b2d33 !important;
}

.kiss-home .gwc-quiet,
.guide-page .guide-hero .studio-note,
.journey-note {
  color: #2F2438 !important;
}

.kiss-home .gwc-block {
  margin: var(--space-l) 0 var(--space-l);
  padding: var(--space-m);
  background: var(--surface);
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--coral);
  /* nai you ka pian qiang zhi shen mo · ke cheng lie biao jue bu yong fen bi qian zi */
  color: var(--ink);
}

.kiss-home .gwc-block h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.kiss-home .gwc-block p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
  max-width: 42ch;
}

.kiss-home .gwc-quiet {
  font-size: 0.92rem !important;
  color: var(--ink-muted) !important;
}

.kiss-home .quiet-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--space-l);
}

.kiss-home .footer-kiss {
  border-top: 4px solid var(--accent);
  font-size: 13px;
  color: var(--ink-muted);
}

.kiss-home .footer-kiss .human {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
}

.kiss-home .archive-kiss h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  margin-bottom: var(--space-xs);
  color: var(--ink);
}

.kiss-home .archive-kiss p {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: var(--space-xs);
  max-width: 48ch;
}

.kiss-home .sunset-badge,
.kiss-home .poem,
.kiss-home .project-grid,
.kiss-home .now-strip,
.kiss-home .about,
.kiss-home .site-nav {
  display: none;
}

/* Scratch gong zuo shi · matchaxmoxie jiao cheng wang ge yu ke zhan kai zhi yin */
.scratch-studio-page .studio-hero {
  margin: var(--space-2xs) 0 var(--space-l);
}

.scratch-studio-page .studio-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.scratch-studio-page .studio-hero h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.85rem, 5vw, 2.5rem);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
  line-height: 1.15;
}

.scratch-studio-page .studio-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 1.08rem;
  color: var(--ink);
  max-width: 44ch;
  margin-bottom: var(--space-xs);
  line-height: 1.55;
}

.scratch-studio-page .studio-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  max-width: 52ch;
  line-height: 1.5;
}

.scratch-studio-page .studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-m);
  margin: 0 0 var(--space-l);
}

.scratch-studio-page .howto-card {
  border: 0;
  box-shadow: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.scratch-studio-page .howto-thumb {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 168px;
  text-decoration: none;
  color: var(--ink);
  border: 4px solid var(--accent);
  box-shadow: 4px 4px 0 var(--coral);
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, #e8f0e4 0%, #f3f8f0 38%, #fff4e8 100%);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.scratch-studio-page .howto-thumb:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--coral);
}

.scratch-studio-page .howto-thumb:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.scratch-studio-page .howto-bar {
  display: block;
  padding: 7px var(--space-2xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  background: var(--accent, #006b45);
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 1;
}

.scratch-studio-page .howto-bar-bot {
  background: var(--accent-hover, #005537);
  font-size: 0.78rem;
}

.scratch-studio-page .howto-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xs) var(--space-xs) var(--space-3xs);
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  line-height: 1.15;
  color: var(--ink, #222a25);
  position: relative;
  z-index: 1;
}

.scratch-studio-page .howto-illus {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 2.4rem;
  padding-bottom: var(--space-3xs);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.scratch-studio-page .howto-thumb--jump {
  background: linear-gradient(180deg, #cfe6d2 0%, #d4f0c8 55%, #fff3c4 100%);
}

.scratch-studio-page .howto-thumb--catch {
  background: linear-gradient(180deg, #e8f0e4 0%, #ffe8d6 55%, #ffd4c4 100%);
}

.scratch-studio-page .howto-thumb--pong {
  background: linear-gradient(180deg, #e8f0e4 0%, #e8f5d4 55%, #d4f0c8 100%);
}

.scratch-studio-page .howto-thumb--click {
  background: linear-gradient(180deg, #e8f0e4 0%, #ffe4ec 55%, #ffd4e0 100%);
}

.scratch-studio-page .howto-thumb--intro {
  background: linear-gradient(180deg, #f4a261 0%, #e76f51 42%, #5c4b7a 100%);
}

.scratch-studio-page .howto-thumb--intro .howto-bar {
  background: #3a3350;
}

/* This title was the one thumbnail that inverted to cream, and over the
   pale end of its own gradient that landed at 2.45:1. Ink matches every
   other thumbnail and holds 4.28:1 or better across the band the text
   actually covers; the halo keeps it off the busy orange. */
.scratch-studio-page .howto-thumb--intro .howto-title {
  color: var(--ink, #222a25);
  text-shadow: 0 1px 0 rgba(255, 248, 240, 0.55);
}

.scratch-studio-page .howto-thumb--scroll {
  background: linear-gradient(180deg, #b8d4c0 0%, #e8f0e4 45%, #fff0e0 100%);
}

.scratch-studio-page .howto-thumb--pet {
  background: linear-gradient(180deg, #e8f0e4 0%, #f5e6d3 55%, #e8d4b8 100%);
}

.scratch-studio-page .howto-thumb--story {
  background: linear-gradient(180deg, #e8f0e4 0%, #e8dff5 55%, #f8e8f0 100%);
}

.scratch-studio-page .howto-thumb--char {
  background: linear-gradient(180deg, #e8f0e4 0%, #fff0c8 55%, #ffd4a8 100%);
}

.scratch-studio-page .howto-meta h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin-bottom: var(--space-3xs);
}

.scratch-studio-page .howto-meta p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.45;
  margin-bottom: var(--space-3xs);
}

.scratch-studio-page .howto-status {
  font-family: "Courier New", Courier, monospace !important;
  font-size: var(--step--1) !important;
  font-weight: 700;
  color: var(--dusk) !important;
  letter-spacing: 0.02em;
}

.scratch-studio-page .howto-card--intro .howto-status {
  color: var(--coral-ink) !important;
}

/* ye nei mu lu：tiao zhuan dao ge how-to ka pian */
.scratch-studio-page .studio-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-m);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.scratch-studio-page .studio-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3xs) var(--space-3xs);
  color: var(--dusk);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-bottom: 0;
  touch-action: manipulation;
}

.scratch-studio-page .studio-toc a:hover,
.scratch-studio-page .studio-toc a:focus-visible {
  color: var(--ink);
}

/* ke zhe die jiao cheng zheng wen（details/summary） */
.scratch-studio-page .howto-lesson {
  margin-top: var(--space-3xs);
  border: 3px solid var(--accent);
  background: rgba(255, 248, 240, 0.92);
  box-shadow: 3px 3px 0 var(--lavender);
}

.scratch-studio-page .howto-lesson summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
}

.scratch-studio-page .howto-lesson summary::-webkit-details-marker {
  display: none;
}

.scratch-studio-page .howto-lesson summary::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  margin-right: var(--space-3xs);
  color: var(--coral-ink);
  font-weight: 700;
}

.scratch-studio-page .howto-lesson[open] summary::before {
  content: " to ";
}

.scratch-studio-page .howto-lesson:focus-within {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 2px;
}

.scratch-studio-page .howto-body {
  padding: 0 var(--space-xs) var(--space-s);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.5;
}

.scratch-studio-page .howto-body h3 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  margin: var(--space-xs) 0 var(--space-3xs);
  color: var(--dusk);
}

.scratch-studio-page .howto-body ol,
.scratch-studio-page .howto-body ul {
  margin: var(--space-3xs) 0 var(--space-2xs) var(--space-s);
  padding: 0;
}

.scratch-studio-page .howto-body li {
  margin-bottom: var(--space-3xs);
}

.scratch-studio-page .howto-body code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.88em;
  background: rgba(126, 184, 224, 0.25);
  padding: 0.05em 0.28em;
}

.scratch-studio-page .howto-you-make {
  margin-bottom: var(--space-2xs);
}

.scratch-studio-page .howto-next {
  margin-top: var(--space-xs);
  padding-top: var(--space-2xs);
  border-top: 2px dashed rgba(92, 75, 122, 0.35);
}

.scratch-studio-page .howto-cookie-nudge {
  margin: var(--space-2xs) 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 42ch;
}

.scratch-pick-reveal .situation-pick-status {
  margin: 0 0 var(--space-2xs);
}

.scratch-studio-page .howto-body a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
}

/* ru men .sb3 xia zai an niu yu jia zai shuo ming */
.scratch-studio-page .scratch-load-help {
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-s);
  border: 3px solid var(--accent);
  background: rgba(255, 248, 240, 0.95);
  box-shadow: 3px 3px 0 var(--golden-hour);
  color: var(--ink);
}

.scratch-studio-page .scratch-load-help h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 1.15rem;
  margin: 0 0 var(--space-2xs);
  color: var(--ink);
}

.scratch-studio-page .scratch-load-help ol {
  margin: 0;
  padding-left: var(--space-m);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
}

.scratch-studio-page .scratch-load-help li {
  margin-bottom: var(--space-3xs);
}

.scratch-studio-page .scratch-load-help a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
}

.scratch-studio-page .howto-actions {
  margin: 0.45rem 0 0;
}

.scratch-studio-page .howto-play,
.scratch-studio-page .howto-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem var(--space-xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff8f0;
  background: var(--dusk);
  border: 3px solid var(--accent);
  box-shadow: 2px 2px 0 var(--coral-ink);
  text-decoration: none;
  touch-action: manipulation;
}

.scratch-studio-page .howto-download {
  background: transparent;
  color: var(--dusk);
  box-shadow: none;
}

.scratch-studio-page .howto-play:hover,
.scratch-studio-page .howto-play:focus-visible,
.scratch-studio-page .howto-download:hover,
.scratch-studio-page .howto-download:focus-visible {
  background: var(--coral-ink);
  color: #fff8f0;
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 2px;
}

.scratch-studio-page .howto-download-hint {
  display: inline-block;
  margin-left: var(--space-3xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.82rem;
  color: var(--ink);
}

.scratch-studio-page .howto-starter-note {
  margin: 0 0 var(--space-xs);
  padding: var(--space-2xs) var(--space-2xs);
  border-left: 4px solid var(--golden-hour);
  background: rgba(242, 201, 107, 0.22);
  color: var(--ink);
}

.scratch-studio-page .howto-starter-note a {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--dusk);
}

/* mao dian ding wei shi gao liang dang qian jiao cheng mian ban */
.scratch-studio-page .howto-card:target .howto-lesson,
.scratch-studio-page .howto-lesson:target {
  border-color: var(--coral-ink);
}

@media (max-width: 520px) {
  .scratch-studio-page .studio-grid {
    grid-template-columns: 1fr;
  }
}

/* Informatics 2027 ji zhi nan */
.guide-page .guide-hero {
  margin: var(--space-2xs) 0 var(--space-m);
}

.guide-page .guide-hero .studio-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2xs);
  line-height: 1.45;
  max-width: 56ch;
}

.guide-page .guide-hero h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.7rem, 4.8vw, 2.35rem);
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: var(--space-xs);
  max-width: 28ch;
}

.guide-page .guide-hero .studio-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 1.12rem;
  color: var(--ink);
  max-width: 48ch;
  margin-bottom: var(--space-xs);
  line-height: 1.55;
}

.guide-page .guide-hero .studio-note {
  font-size: var(--step-0);
  color: var(--ink-muted);
  max-width: 52ch;
  line-height: 1.55;
}

.guide-attr {
  margin: 0 0 var(--space-l);
  padding: var(--space-s) var(--space-s);
  background: var(--surface);
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--lavender);
}

.guide-attr-label {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusk);
  margin-bottom: var(--space-2xs);
}

.guide-attr p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: var(--space-2xs);
  max-width: 54ch;
}

.guide-attr a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
}

.guide-attr a:hover {
  color: var(--coral-ink);
}

.guide-attr-note {
  font-size: 0.88rem !important;
  color: var(--ink-muted) !important;
}

.guide-list {
  margin: var(--space-2xs) 0 var(--space-3xs);
  padding-left: 1.2rem;
  max-width: 52ch;
}

.guide-list li {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: var(--space-2xs);
}

.guide-list code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.65);
  padding: 0.05em 0.3em;
  border: 1px solid var(--paper-shadow);
}

.guide-photo {
  margin: 0 0 var(--space-l);
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--coral);
  background: var(--surface);
  overflow: hidden;
}

.guide-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.92) contrast(1.02);
}

.guide-photo figcaption,
.photo-frame figcaption {
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--charcoal-fleece, var(--ink));
  padding: var(--space-xs) var(--space-xs) var(--space-xs);
  border-top: 3px solid var(--lily-pink, var(--border));
  background: var(--babys-breath, var(--surface));
}

.guide-photo--home {
  margin-top: var(--space-2xs);
}

.kiss-home .gwc-block .guide-list {
  margin-top: var(--space-xs);
}

.guide-list--links {
  max-width: 58ch;
}

.guide-list--links a {
  color: var(--ink);
  border-bottom: 3px solid var(--golden-hour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

.guide-list--links a:hover {
  color: var(--coral-ink);
}

.guide-photo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0 0 var(--space-l);
}

.guide-photo--thumb {
  margin: 0;
  box-shadow: 4px 4px 0 var(--lavender);
}

.guide-photo--thumb figcaption {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  padding: var(--space-2xs) var(--space-xs) var(--space-xs);
}

@media (max-width: 520px) {
  .guide-photo-strip {
    grid-template-columns: 1fr;
  }
}

/* zhi nan ye · Informatics 2027 ji（xiang kuang bu ju） */
.guide-page .guide-wrap {
  max-width: 720px;
}

.guide-page .guide-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-l);
  padding: var(--space-xs) var(--space-s);
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 4px 4px 0 var(--lavender);
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.45;
}

.guide-page .guide-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3xs) 2px;
  color: var(--ink);
  border-bottom: 3px solid var(--golden-hour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  touch-action: manipulation;
}

.guide-page .guide-toc a:hover {
  color: var(--coral-ink);
}

.guide-page .guide-toc a:focus-visible {
  outline: 4px solid var(--dusk);
  outline-offset: 3px;
}

.guide-page .guide-section {
  margin: 0 0 var(--space-l);
}

.guide-page .guide-section h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.35rem, 3.5vw, 1.7rem);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
  line-height: 1.2;
}

.guide-page .guide-section p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: var(--space-2xs);
  max-width: 54ch;
}

.guide-page .guide-section a {
  color: var(--ink);
  border-bottom: 3px solid var(--golden-hour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

.guide-page .guide-section a:hover {
  color: var(--coral-ink);
}

.guide-page .guide-callout {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 0.85rem !important;
  font-weight: 700;
  color: var(--dusk) !important;
  letter-spacing: 0.02em;
  margin-top: var(--space-xs) !important;
}

/* xiao yuan sheng cun · Year '23 dang an tiao fu */
.campus-survival-page .year23-banner {
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-s);
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--golden-hour);
}

.campus-survival-page .year23-banner-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.campus-survival-page .year23-banner p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: var(--space-2xs);
  max-width: 54ch;
}

.campus-survival-page .year23-banner a {
  color: var(--ink);
  border-bottom: 3px solid var(--golden-hour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

/* hong mu ying xiong tu：ya gao du + cai diao mu lian，bi mian chi diao shou ping */
.campus-survival-page .guide-photo--hero {
  max-width: 100%;
  margin: var(--space-2xs) 0 var(--space-l);
}

.campus-survival-page .guide-photo--hero img {
  width: 100%;
  max-height: min(42vh, 320px);
  height: auto;
  object-fit: cover;
  object-position: center 72%;
}

.campus-survival-page .year23-tag {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.campus-survival-page .campus-subh {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin: var(--space-s) 0 var(--space-2xs);
  line-height: 1.25;
}

.campus-survival-page .coord-checklist {
  max-width: 54ch;
  margin-bottom: var(--space-xs);
}

.campus-survival-page .coord-checklist label {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.45;
}

.campus-survival-page .coord-checklist input[type="checkbox"] {
  accent-color: var(--coral-ink);
}

@media print {
  .campus-survival-page .year23-banner,
  .campus-survival-page .guide-toc,
  .campus-survival-page .twin-note,
  .campus-survival-page .quiet-links,
  .campus-survival-page .footer-kiss {
    display: none !important;
  }
}

/* xiao yuan sheng cun ye · xiao jie biao ti / Q&A / da bao gou xuan */
.guide-page .guide-subhead {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin: var(--space-s) 0 var(--space-2xs);
  line-height: 1.25;
}

.guide-page .guide-print-hint {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 0.85rem !important;
  font-weight: 700;
  color: var(--dusk) !important;
}

.guide-page .guide-qna {
  margin: var(--space-xs) 0 var(--space-3xs);
  max-width: 54ch;
}

.guide-page .guide-qna dt {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin: var(--space-xs) 0 var(--space-3xs);
}

.guide-page .guide-qna dd {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 var(--space-3xs);
}

.guide-page .guide-qna a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
  font-weight: 700;
}

.guide-page .guide-pack {
  list-style: none;
  padding: 0;
  margin: var(--space-2xs) 0 var(--space-s);
  max-width: 54ch;
}

.guide-page .guide-pack li {
  margin-bottom: var(--space-3xs);
}

.guide-page .guide-pack label {
  display: flex;
  gap: var(--space-2xs);
  align-items: flex-start;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.45;
  cursor: pointer;
}

.guide-page .guide-pack input[type="checkbox"] {
  margin-top: 0.2rem;
  min-width: 1.35rem;
  min-height: 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  accent-color: var(--coral);
}

.guide-page .guide-pack-btn {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  font-weight: 700;
  padding: var(--space-2xs) var(--space-s);
  border: 3px solid var(--accent-crimson);
  background: var(--dusty-pink-soft);
  color: var(--crimson-ink);
  box-shadow: 3px 3px 0 var(--dusk);
  cursor: pointer;
  min-height: 44px;
}

.guide-page .guide-pack-btn:hover,
.guide-page .guide-pack-btn:focus-visible {
  background: var(--accent-crimson);
  border-color: var(--crimson-ink);
  color: #faf6f6;
}

.guide-page .guide-pack-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media print {
  .guide-page .guide-toc,
  .guide-page .twin-note,
  .guide-page .quiet-links,
  .guide-page .footer-kiss,
  .guide-page .guide-pack-btn,
  .guide-page .guide-photo-strip {
    display: none !important;
  }

  .guide-page .guide-pack label {
    break-inside: avoid;
  }
}

.photo-frame {
  margin: 0 0 var(--space-l);
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--coral);
  background: var(--surface);
  overflow: hidden;
  transform: rotate(-0.4deg);
}

.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.9) sepia(0.08) contrast(1.03);
}

.photo-frame figcaption a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
  font-weight: 700;
}

.photo-frame--home {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(0.6deg);
}

/* shou ye huan ying tu：ya gao du + cai diao hong mu lian，lu chu tou ying pian zhu ti */
.photo-frame--home img {
  width: 100%;
  max-height: min(42vh, 280px);
  height: auto;
  object-fit: cover;
  object-position: center 72%;
}

/* zhi nan ye tong kuan huan ying tu cai qie */
.guide-photo--welcome img {
  width: 100%;
  max-height: min(42vh, 320px);
  height: auto;
  object-fit: cover;
  object-position: center 72%;
}

.photo-frame--wide {
  transform: rotate(0.3deg);
  box-shadow: 5px 5px 0 var(--lavender);
}

.photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: var(--space-s) 0 var(--space-2xs);
}

.photo-pair .photo-frame {
  margin-bottom: 0;
}

  @media (max-width: 560px) {
  .photo-pair {
    grid-template-columns: 1fr;
  }

  .photo-frame--home {
    max-width: 100%;
  }

  .photo-frame--home img,
  .guide-photo--welcome img {
    max-height: min(36vh, 240px);
  }
}

/* xue shu wai lian dang an zhu jiao · Informatics zhi nan */
.guide-archive-note {
  margin-top: var(--space-xs) !important;
  max-width: 58ch !important;
  line-height: 1.55 !important;
}

.guide-archive-note a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
  font-weight: 700;
}

.guide-archive-note a:hover {
  color: var(--coral-ink);
}

/* Year '23 dang an tiao · xiao yuan tip sheets ri qi fang huo */
.year23-banner {
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-s);
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--golden-hour);
}

.year23-banner-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.year23-banner p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: var(--space-2xs);
  max-width: 58ch;
}

.year23-banner p:last-child {
  margin-bottom: 0;
}

.year23-banner a {
  color: var(--ink);
  border-bottom: 3px solid var(--golden-hour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

.year23-banner a:hover {
  color: var(--coral-ink);
}

.year23-tag {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(244, 162, 97, 0.35);
  border: 2px solid var(--accent);
  padding: var(--space-3xs) var(--space-2xs);
  margin: 0 0 var(--space-xs);
}

.campus-survival-page .campus-subh {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  color: var(--ink);
  margin: var(--space-s) 0 var(--space-2xs);
}

.campus-survival-page .coord-checklist {
  margin: 0 0 var(--space-xs);
  max-width: 56ch;
}

.campus-survival-page .coord-checklist label {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.45;
}

.guide-page .year23-tag {
  margin-top: 0;
}

/* si nian IU lu jing ye · ke cheng ming+xue qi，wu cheng ji */
.journey-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-l);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* HS jian yi lou dou · you xu bu zhou · hai zi ke du */
.advice-funnel-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 54ch;
  margin: 0 0 var(--space-xs);
}

.kiss-home .gwc-block h3#advice-funnel-heading,
.guide-page .gwc-block h2#advice-funnel-heading {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
  line-height: 1.25;
  color: var(--ink);
  margin: var(--space-m) 0 var(--space-2xs);
}

.advice-funnel {
  list-style: decimal;
  list-style-position: outside;
  margin: 0 0 var(--space-l);
  padding: 0 0 0 var(--space-m);
  max-width: 58ch;
}

.advice-funnel li,
.kiss-home .gwc-block .advice-funnel li,
.guide-page .gwc-block .advice-funnel li {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-xs);
  padding-left: var(--space-3xs);
}

.advice-funnel li::marker {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-weight: 700;
  color: var(--coral-ink);
}

.advice-funnel strong {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.92rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin-bottom: var(--space-3xs);
}

.advice-funnel a {
  color: var(--dusk);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.advice-funnel a:hover {
  color: var(--coral-ink);
}

.advice-funnel a:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 2px;
}

.advice-funnel .year23-tag {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold-soft);
  border: 2px solid var(--accent);
  padding: 2px var(--space-2xs);
  margin: 0 0 var(--space-3xs);
}

.advice-funnel abbr {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}

.journey-year-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3xs) 2px;
  color: var(--ink);
  border-bottom: 3px solid var(--dusk);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  touch-action: manipulation;
}

.journey-year-nav a:hover,
.journey-year-nav a[aria-current="page"] {
  color: var(--accent-crimson);
  border-bottom-color: var(--accent-crimson);
}

.journey-year-nav a:focus-visible {
  outline: 3px solid var(--focus-ring, var(--accent-crimson));
  outline-offset: 3px;
}

.journey-courses {
  list-style: none;
  padding: 0;
  margin: var(--space-2xs) 0 0;
  max-width: 54ch;
  color: var(--ink);
}

.journey-courses li,
.kiss-home .gwc-block .journey-courses li,
.journey-page .gwc-block .journey-courses li,
.guide-page .gwc-block .journey-courses li {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.45;
  margin: 0 0 var(--space-2xs);
  padding-left: 0;
}

.journey-courses code,
.kiss-home .gwc-block .journey-courses code,
.journey-page .gwc-block .journey-courses code,
.guide-page .gwc-block .journey-courses code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.88em;
  font-weight: 700;
  color: var(--ink);
  margin-right: 0.35em;
}

.journey-note {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 54ch;
  margin: 0 0 var(--space-l);
}

.journey-note a {
  color: var(--dusk);
  border-bottom: 2px solid var(--golden-hour);
  text-decoration: none;
  font-weight: 700;
}

.journey-callout {
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--golden-hour);
  padding: var(--space-s) var(--space-s) var(--space-2xs);
  background: var(--surface);
  margin-bottom: var(--space-l);
}

/* matchaxmoxie xiao tie shi · shi yong gu li + you got this */
.miss-zhao-tip {
  margin: var(--space-m) 0 var(--space-l);
  padding: var(--space-s) var(--space-s);
  background: #fff;
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--coral);
  color: var(--ink);
  max-width: 54ch;
}

.miss-zhao-tip-label,
.miss-zhao-tip .miss-zhao-tip-label {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin-bottom: var(--space-2xs);
}

.miss-zhao-tip p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 var(--space-2xs);
  max-width: none;
}

.miss-zhao-tip p:last-child {
  margin-bottom: 0;
}

.miss-zhao-tip .you-got-this {
  font-weight: 700;
  color: var(--coral-ink);
}

.miss-zhao-tip strong {
  color: var(--ink);
  font-weight: 700;
}

.miss-zhao-tip a {
  color: var(--ink);
  border-bottom: 3px solid var(--golden-hour);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 700;
}

.miss-zhao-tip a:hover {
  color: var(--coral-ink);
}

.miss-zhao-tip a:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.classroom-credo {
  margin: 0;
  padding-left: var(--space-m);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  line-height: 1.55;
}

.classroom-credo li {
  margin-bottom: 0.45rem;
}

.classroom-credo li:last-child {
  margin-bottom: 0;
}

.classroom-credo strong {
  color: var(--ink);
  font-weight: 700;
}

.choice-home .credo-tip {
  margin-top: 0;
  margin-bottom: var(--space-m);
}

/* ------------------------------------------------------------------
   xiang ying shi：shou ji（~320-480）/ ping ban（~768）/ zhuo mian / kuan ping（1200+）
   ------------------------------------------------------------------ */

body {
  overflow-x: clip;
}

.guide-page .guide-pack label {
  min-height: 44px;
  padding: var(--space-3xs) 0;
  touch-action: manipulation;
}

.guide-page .guide-section a,
.kiss-home .quiet-links a,
.kindergarten-home .twin-note a {
  touch-action: manipulation;
}

/* shou ji · mu lu shu pai、shou jin nei bian ju、ka pian dan lie */
@media (max-width: 480px) {
  html {
    font-size: 17px;
  }

  body.kindergarten-home,
  body.kiss-home,
  body.guide-page,
  body.journey-page,
  body.scratch-studio-page,
  body.campus-survival-page {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .kindergarten-home .wrap,
  .guide-page .guide-wrap {
    max-width: 100%;
  }

  .guide-page .guide-toc,
  .scratch-studio-page .studio-toc,
  .journey-year-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .guide-page .guide-toc a,
  .scratch-studio-page .studio-toc a,
  .journey-year-nav a {
    display: flex;
    width: 100%;
    min-height: 44px;
    padding: var(--space-2xs) var(--space-3xs);
  }

  .guide-page .guide-toc {
    padding: var(--space-2xs) var(--space-xs);
  }

  .campus-survival-page .year23-banner,
  .miss-zhao-tip,
  .kiss-home .gwc-block,
  .kiss-home .door,
  .journey-callout {
    padding: var(--space-xs) var(--space-xs);
    box-shadow: 3px 3px 0 var(--lavender);
  }

  .kiss-home .doors {
    max-width: none;
  }

  .campus-survival-page .guide-photo--hero img {
    max-height: min(36vh, 260px);
  }

  .classes-grid,
  .years-grid,
  .hub-cards,
  .status-summary {
    grid-template-columns: 1fr !important;
  }

  .class-card,
  .piece-card {
    padding-left: var(--space-xs);
  }

  .journey-courses li {
    font-size: 1.02rem;
    line-height: 1.5;
  }
}

/* xiao ping ban · dao hang huan hang，ka pian reng ke du */
@media (min-width: 481px) and (max-width: 767px) {
  .guide-page .guide-toc,
  .scratch-studio-page .studio-toc,
  .journey-year-nav {
    gap: var(--space-3xs) var(--space-xs);
  }

  .kindergarten-home .wrap {
    max-width: 720px;
  }

  /* tablet: sticky top nav that can wrap instead of cramped scroll */
  .site-jump {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 0;
  }

  .site-jump a {
    min-height: 48px;
    padding: 0 var(--space-xs);
  }

  .choice-home .hero {
    gap: var(--space-m);
  }

  .choice-home .hero-visual {
    max-width: 260px;
  }

  .open-invest--hero {
    padding: var(--space-m) var(--space-m) var(--space-s);
  }

  .situation-btn,
  .open-pick-btn {
    min-height: 96px;
    padding: var(--space-s) var(--space-m);
  }
}

/* ping ban ji yi shang · ke cheng / nian ji wang ge ke liang lie */
@media (min-width: 768px) {
  .guide-page .guide-toc {
    gap: var(--space-2xs) var(--space-s);
    padding: var(--space-s) var(--space-s);
  }

  .kindergarten-home .wrap {
    max-width: 860px;
  }

  .campus-survival-page .guide-photo--hero img {
    max-height: min(44vh, 360px);
  }
}

/* zhuo mian */
@media (min-width: 1024px) {
  .kindergarten-home .wrap {
    max-width: 920px;
  }

  .guide-page .guide-wrap {
    max-width: 760px;
  }
}

/* kuan ping · liu bai，dan hang zhang bu guo du la chang */
@media (min-width: 1200px) {
  html {
    font-size: 19px;
  }

  .kindergarten-home .wrap {
    max-width: 980px;
  }

  .guide-page .guide-wrap,
  .archive-page {
    max-width: 800px;
  }

  .guide-page .guide-section p,
  .journey-courses,
  .miss-zhao-tip {
    max-width: 58ch;
  }
}

/* ------------------------------------------------------------------
   FOOTPRINT TRAIL · kindergarten footsteps · cream + dark ink
   ------------------------------------------------------------------ */

.footprint-page .guide-hero {
  margin-bottom: var(--space-2xs);
}

.foot-trail {
  list-style: none;
  margin: var(--space-m) 0 var(--space-l);
  padding: 0;
  max-width: 42rem;
  position: relative;
}

.foot-trail::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  background: repeating-linear-gradient(
    to bottom,
    var(--ink) 0 10px,
    transparent 10px 18px
  );
  opacity: 0.28;
  pointer-events: none;
}

.foot-stop {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-xs) var(--space-s);
  align-items: start;
  margin: 0 0 var(--space-l);
  position: relative;
}

.foot-print {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--ink);
  padding-top: 0.15rem;
  z-index: 1;
}

.foot-print svg {
  display: block;
  width: 2.35rem;
  height: auto;
}

.foot-print--alt {
  transform: scaleX(-1) rotate(-8deg);
  color: var(--coral-ink);
}

.foot-print:not(.foot-print--alt) {
  transform: rotate(8deg);
}

.foot-num {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 var(--space-3xs);
}

.foot-copy h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.15rem, 3.2vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 0.45rem;
}

.foot-copy p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 var(--space-xs);
  max-width: 54ch;
}

.foot-copy a {
  color: var(--dusk);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.foot-copy a:hover {
  color: var(--coral-ink);
}

.foot-copy a:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 2px;
}

.foot-photo {
  margin: var(--space-2xs) 0 0;
}

/* leave-a-footprint · “my print so far” shi shi xing + tu li · jin gong kai ke he shi shi shi */
.trail-legend {
  max-width: 42rem;
  margin: var(--space-s) 0 var(--space-m);
  padding: var(--space-xs) var(--space-s);
  background: var(--surface);
  border: 2px dashed var(--paper-shadow);
  border-radius: 14px;
}

.trail-legend p {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}

.trail-legend strong {
  color: var(--coral-ink);
}

.foot-print-so-far {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  border-left: 4px solid var(--sunshine);
  border-radius: 0 10px 10px 0;
  padding: var(--space-2xs) var(--space-xs);
  margin: 0 0 var(--space-xs);
  max-width: 54ch;
}

.foot-print-so-far .print-label {
  font-weight: 700;
  color: var(--coral-ink);
}

.foot-print-so-far a {
  color: var(--dusk);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.foot-print-so-far a:hover {
  color: var(--coral-ink);
}

.foot-print-so-far a:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 2px;
}

.print-status {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem var(--space-2xs);
  border-radius: 999px;
  margin-right: var(--space-3xs);
  border: 2px solid currentColor;
  white-space: nowrap;
}

.print-status--done {
  color: #1f5c3d;
  background: #dcefe3;
}

.print-status--wip {
  color: #7a4e00;
  background: #fbe8c6;
}

.print-status--soon {
  color: var(--dusk);
  background: #e8e2f2;
}

.footprint-page .journey-year-nav {
  margin-top: var(--space-2xs);
}

@media (max-width: 480px) {
  .foot-trail::before {
    left: 0.95rem;
  }

  .foot-stop {
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-2xs) var(--space-xs);
    margin-bottom: var(--space-m);
  }

  .foot-print svg {
    width: 2rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .foot-stop {
    animation: foot-fade 0.55s ease both;
  }

  .foot-stop:nth-child(1) { animation-delay: 0.02s; }
  .foot-stop:nth-child(2) { animation-delay: 0.06s; }
  .foot-stop:nth-child(3) { animation-delay: 0.10s; }
  .foot-stop:nth-child(4) { animation-delay: 0.14s; }
  .foot-stop:nth-child(5) { animation-delay: 0.18s; }
  .foot-stop:nth-child(6) { animation-delay: 0.22s; }
  .foot-stop:nth-child(7) { animation-delay: 0.26s; }
  .foot-stop:nth-child(8) { animation-delay: 0.30s; }
  .foot-stop:nth-child(9) { animation-delay: 0.34s; }
  .foot-stop:nth-child(10) { animation-delay: 0.38s; }
  .foot-stop:nth-child(11) { animation-delay: 0.42s; }
}

@keyframes foot-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── invest → return · open list (no card chrome) ── */
.open-invest,
.invest-block {
  margin: 0 0 var(--space-l);
  padding: 0;
  max-width: 58ch;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.invest-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0 0 var(--space-s);
}

.open-pick-list,
.situation-choices,
.scratch-pick-choices {
  list-style: none;
  display: grid;
  gap: var(--space-xs);
  margin: 0 0 var(--space-m);
  padding: 0;
}

@media (min-width: 720px) {
  .situation-choices {
    grid-template-columns: 1fr;
    gap: var(--space-s);
  }
}

.open-pick-list > li {
  margin: 0;
  padding: 0;
}

.open-pick-btn,
.situation-btn,
.scratch-pick-btn,
a.open-pick-btn,
a.situation-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  min-width: 44px;
  min-height: 88px; /* ≥44×44 touch target; taller for thumb + label */
  padding: var(--space-s) var(--space-s);
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--step-0);
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--accent-wash-strong);
  border-left: 5px solid var(--accent-crimson);
  border-radius: 0;
  box-shadow: 3px 3px 0 rgba(43, 45, 51, 0.14);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

/* Three seats, three edge colours. These used to be three unrelated
   hues; inside one palette they read as a deliberate ramp only if they
   step through it, so deep / mid / clay rather than two greens and an odd
   one out. */
.situation-btn[data-situation="ap-csp"] {
  border-left-color: var(--accent);
}

.situation-btn[data-situation="undecided"] {
  border-left-color: var(--accent-quiet);
}

.situation-btn[data-situation="visiting"] {
  border-left-color: var(--warm-ink);
}

.open-pick-btn:hover,
.situation-btn:hover,
.scratch-pick-btn:hover,
a.open-pick-btn:hover,
a.situation-btn:hover {
  background: var(--dusty-pink-soft);
  color: var(--dusk);
  border-color: var(--accent-wash-strong);
  border-left-color: var(--crimson-ink);
  box-shadow: 5px 5px 0 var(--accent-wash);
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .open-pick-btn:hover,
  .situation-btn:hover,
  .scratch-pick-btn:hover,
  a.open-pick-btn:hover,
  a.situation-btn:hover {
    transform: translateY(-2px);
  }
}

.open-pick-btn:focus-visible,
.situation-btn:focus-visible,
.scratch-pick-btn:focus-visible,
a.open-pick-btn:focus-visible,
a.situation-btn:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.open-pick-btn[aria-pressed="true"],
.situation-btn[aria-pressed="true"],
.scratch-pick-btn[aria-pressed="true"],
a.situation-btn[aria-current="true"],
a.open-pick-btn[aria-current="true"] {
  background: var(--dusty-pink-soft);
  border-color: var(--accent-crimson);
  border-left-width: 6px;
  box-shadow: 4px 4px 0 var(--accent-wash);
  color: var(--dusk);
}

.open-pick-btn[aria-pressed="true"] .open-pick-label,
.situation-btn[aria-pressed="true"] .open-pick-label,
.situation-btn[aria-pressed="true"] .situation-btn-label,
a.situation-btn[aria-current="true"] .open-pick-label,
a.situation-btn[aria-current="true"] .situation-btn-label {
  text-decoration: none;
  color: var(--accent-crimson);
}

.open-pick-thumb {
  display: block;
  width: 96px;
  height: 64px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center 40%;
  border: 2px solid rgba(31, 22, 48, 0.1);
  filter: saturate(0.95) sepia(0.04) contrast(1.02);
}

.open-pick-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}

.open-pick-label,
.situation-btn-label {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  line-height: 1.2;
}

.open-pick-hint,
.situation-btn-hint {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.05rem, 2.3vw, 1.15rem);
  color: var(--ink-muted);
  line-height: 1.35;
}

.open-link-cta,
.open-cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-2xs) var(--space-m);
  font-family: var(--font-display, Fraunces, Georgia, serif);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  /* Cream on matcha: never inherit --dusk / link colour onto the label */
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
  background: var(--accent, #006b45);
  background-color: var(--accent, #006b45);
  border: 2px solid var(--accent-hover, #005537);
  border-radius: var(--radius, 20px);
  box-shadow: 3px 3px 0 rgba(0, 84, 55, 0.22);
  text-decoration: none !important;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.open-link-cta:visited,
.open-cta:visited {
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
}

.open-link-cta:hover,
.open-cta:hover,
.open-link-cta:focus-visible,
.open-cta:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--accent-hover, #005537);
  background-color: var(--accent-hover, #005537);
  border-color: var(--accent-hover, #005537);
  box-shadow: 5px 5px 0 rgba(179, 113, 79, 0.28);
  text-decoration: none !important;
}

.open-link-cta:focus-visible,
.open-cta:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .open-link-cta:hover,
  .open-cta:hover {
    transform: translateY(-2px);
  }
}

.open-link-cta:focus-visible,
.open-cta:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.situation-pick-status {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-crimson);
}

.open-pick-selected {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-crimson);
}

.situation-plan {
  margin-top: var(--space-m);
  padding: var(--space-m) var(--space-s) var(--space-s);
  background: linear-gradient(180deg, rgba(255, 250, 244, 0.95) 0%, rgba(255, 232, 204, 0.5) 100%);
  border: 2px solid rgba(31, 22, 48, 0.14);
  box-shadow: 4px 4px 0 rgba(31, 22, 48, 0.08);
}

.situation-plan-title {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--accent-crimson);
  margin: 0 0 var(--space-3xs);
}

.situation-plan-progress {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dusk);
  margin: 0 0 var(--space-xs);
}

.situation-plan-steps {
  counter-reset: plan-step;
  margin: 0 0 var(--space-xs);
  padding-left: 0;
  list-style: none;
}

.situation-plan-steps li {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.02rem, 2.4vw, 1.12rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--space-xs);
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xs);
  background: #fffaf4;
  border: 2px solid rgba(31, 22, 48, 0.12);
  border-left: 5px solid var(--sunset-warm);
  counter-increment: plan-step;
}

.situation-plan-steps li::before {
  content: counter(plan-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: var(--space-2xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fffaf4;
  background: var(--sunset-ink);
  vertical-align: middle;
}

.situation-plan-steps strong {
  display: block;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin-bottom: 2px;
}

.situation-plan-note,
.situation-cookie-note {
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: 0;
}

.situation-cookie-note {
  margin: var(--space-2xs) 0 0;
  max-width: 42ch;
  line-height: 1.45;
}

.open-link-soft {
  display: inline;
  min-height: 44px;
  padding: 0;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.02rem, 2.4vw, 1.12rem);
  font-weight: 700;
  color: var(--dusk);
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(42, 31, 61, 0.35);
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.open-link-soft:hover {
  color: var(--coral-ink);
  border-bottom-color: var(--coral-ink);
}

.open-link-soft:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.advice-funnel-progress-wrap {
  margin: 0 0 var(--space-s);
  max-width: 58ch;
}

.advice-funnel-progress {
  display: block;
  width: 100%;
  height: 1.25rem;
  margin: 0 0 var(--space-2xs);
  accent-color: var(--coral-ink);
}

.advice-funnel-progress-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0;
}

.advice-funnel-check {
  display: flex;
  gap: var(--space-2xs);
  align-items: flex-start;
  cursor: pointer;
  min-height: 44px;
}

.advice-funnel-check input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--coral-ink);
}

.advice-funnel-content {
  flex: 1;
  min-width: 0;
}

.advice-funnel__done .advice-funnel-content {
  opacity: 0.72;
}

.advice-funnel__done .advice-funnel-content strong {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.advice-funnel-reward {
  margin: 0 0 var(--space-l);
  padding: var(--space-s) 0 0;
  max-width: 58ch;
  background: transparent;
  border: 0;
  border-top: 2px solid rgba(31, 22, 48, 0.14);
  box-shadow: none;
}

.advice-funnel-reward h4 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.advice-funnel-path-name {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.advice-funnel-reward-note {
  font-size: var(--step-0);
  color: var(--ink-muted);
  margin: 0 0 var(--space-xs);
}

.invest-btn {
  display: inline;
  min-height: 44px;
  padding: 0;
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--coral-ink);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--coral-ink);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}

.invest-btn:hover,
.invest-btn--link:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.invest-btn:focus-visible,
.invest-btn--link:focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 3px;
}

.footprint-progress {
  margin: 0 0 var(--space-xs);
  padding: 0 0 var(--space-2xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(31, 22, 48, 0.14);
}

.footprint-progress-label {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin-right: var(--space-3xs);
}

.scratch-pick-block {
  margin-bottom: var(--space-l);
  max-width: 52ch;
}

.scratch-welcome-back {
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 var(--space-xs);
}

.scratch-pick-reveal {
  padding-top: var(--space-s);
  border-top: 2px solid rgba(31, 22, 48, 0.14);
}

.scratch-pick-get,
.scratch-pick-why,
.scratch-pick-path {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.scratch-pick-why {
  color: var(--ink-muted);
}

.scratch-pick-path a {
  color: var(--dusk);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.scratch-primary-cta {
  margin: var(--space-s) 0 var(--space-xs);
}

.scratch-secondary-ctas {
  margin: 0 0 var(--space-s);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.05rem, 2.3vw, 1.15rem);
  line-height: 1.6;
}

.scratch-cta-sep {
  color: var(--ink-muted);
}

.scratch-play-page .scratch-play-hero {
  margin-bottom: var(--space-2xs);
}

.scratch-play-page .scratch-pick-block {
  margin-top: var(--space-2xs);
  max-width: 40rem;
}

.scratch-player-shell {
  margin: 0 0 var(--space-m);
}

.scratch-player-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-2xs);
}

.scratch-howto-play {
  margin: 0 0 var(--space-xs);
  padding: 0 0 var(--space-xs);
  max-width: 40ch;
  border-bottom: 2px solid rgba(31, 22, 48, 0.12);
}

.scratch-howto-heading {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.15rem, 2.6vw, 1.3rem);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.scratch-howto-steps {
  margin: 0 0 var(--space-2xs);
  padding-left: var(--space-m);
}

.scratch-howto-steps li {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.02rem, 2.3vw, 1.12rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: var(--space-3xs);
}

.scratch-howto-steps strong {
  color: var(--coral-ink);
}

.scratch-howto-tip {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(0.98rem, 2.2vw, 1.05rem);
  line-height: 1.4;
  color: var(--ink-muted);
  margin: 0;
}

.scratch-pick-switch-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.02rem, 2.3vw, 1.12rem);
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

.scratch-control-btn {
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2xs) var(--space-s);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 700;
  font-size: var(--step-0);
  border: 3px solid var(--accent);
  cursor: pointer;
  touch-action: manipulation;
  color: var(--ink);
  background: #fff8f0;
}

.scratch-control-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.scratch-control-btn--flag {
  background: var(--accent, #006b45);
  color: var(--on-accent, #ffffff);
  border-color: var(--ink);
}

.scratch-control-btn--stop {
  background: #c23b3b;
  color: #fff8f0;
  border-color: var(--ink);
}

.scratch-control-btn:not(:disabled):hover,
.scratch-control-btn:not(:disabled):focus-visible {
  outline: 3px solid var(--focus-ring, var(--dusk));
  outline-offset: 2px;
}

.scratch-player-status {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--coral-ink);
  margin: 0 0 var(--space-xs);
}

.scratch-player-status--error {
  color: #8a1f1f;
}

.scratch-stage {
  width: min(100%, 480px);
  aspect-ratio: 4 / 3;
  max-width: 480px;
  background:
    linear-gradient(160deg, rgba(255, 248, 240, 0.9), rgba(244, 162, 97, 0.18)),
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 10px,
      rgba(31, 22, 48, 0.03) 10px,
      rgba(31, 22, 48, 0.03) 11px
    );
  border: 3px solid var(--accent);
  overflow: hidden;
}

.scratch-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.scratch-pick-switch-heading {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.2rem, 2.8vw, 1.4rem);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.scratch-play-secondary {
  margin-top: var(--space-s);
  padding-top: var(--space-s);
  border-top: 2px solid rgba(31, 22, 48, 0.14);
}

.scratch-steps-heading {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.25rem, 3vw, 1.45rem);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

.scratch-load-steps {
  margin: 0 0 var(--space-s);
  padding-left: var(--space-m);
  max-width: 46ch;
}

.scratch-load-steps li {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.08rem, 2.4vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.scratch-progress-wrap {
  margin: 0 0 var(--space-xs);
}

.scratch-load-progress {
  display: block;
  width: 100%;
  max-width: 28rem;
  height: 1.1rem;
  margin: 0 0 var(--space-2xs);
  accent-color: var(--coral-ink);
}

.scratch-progress-text {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--coral-ink);
  margin: 0 0 var(--space-xs);
}

.open-check-list,
.scratch-check-list {
  list-style: none;
  margin: 0 0 var(--space-xs);
  padding: 0;
}

.open-check-list > li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(31, 22, 48, 0.1);
}

.open-check {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  min-height: 48px;
  padding: var(--space-xs) 0;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: clamp(1.08rem, 2.4vw, 1.2rem);
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
}

.open-check input[type="checkbox"] {
  width: 1.3rem;
  height: 1.3rem;
  min-width: 1.3rem;
  min-height: 1.3rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--coral-ink);
}

.scratch-progress-reward {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  color: var(--coral-ink);
  margin: 0 0 var(--space-xs);
  line-height: 1.3;
}

.scratch-howto-link-wrap {
  margin: 0;
}

.howto-card--picked {
  outline: 0;
  box-shadow: none;
}

.howto-card--picked .howto-meta h2 {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  color: var(--coral-ink);
}

.scratch-studio-page .scratch-load-help {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .open-pick-btn .open-pick-label,
  .scratch-pick-btn .open-pick-label {
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
}

@media (max-width: 520px) {
  /* Keep row layout · stacked 120px thumbs blew each seat past ~280px tall */
  .open-pick-btn,
  .situation-btn {
    flex-direction: row;
    align-items: center;
    min-height: 72px;
    padding: var(--space-xs) var(--space-xs);
    gap: var(--space-2xs);
  }

  .open-pick-thumb {
    width: 72px;
    height: 56px;
    margin-top: 0;
  }

  .open-pick-label,
  .situation-btn-label {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem);
  }

  .open-pick-hint,
  .situation-btn-hint {
    font-size: var(--step-0);
  }

  .open-invest--hero {
    padding: var(--space-s) var(--space-xs) var(--space-xs);
  }

  .situation-plan-next .open-link-cta,
  .scratch-howto-play {
    max-width: none;
  }

  .situation-plan-next .open-link-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    line-height: 1.35;
  }
}

/* ... site-wide interior · panels, step cards, grids (20260723b) ... */

.interior-panel {
  margin: 0 0 var(--space-l);
  padding: var(--space-m) var(--space-m) var(--space-m);
  background: var(--surface, #fff4e8);
  background-color: var(--cream, #fff4e8);
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--accent-crimson);
  color: var(--ink);
}

.path-page-header.interior-panel {
  max-width: none;
}

.path-page-header.interior-panel .path-lede {
  max-width: 52ch;
}

.guide-page .guide-hero.interior-panel {
  max-width: none;
}

.guide-page .guide-hero.interior-panel h1 {
  max-width: 32ch;
}

.archive-kiss.interior-panel {
  max-width: none;
}

.archive-link-grid {
  display: grid;
  gap: var(--space-xs);
  list-style: none;
  margin: var(--space-m) 0 var(--space-2xs);
  padding: 0;
}

@media (min-width: 560px) {
  .archive-link-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.archive-link-grid a {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-height: 72px;
  padding: var(--space-xs) var(--space-s);
  text-decoration: none;
  color: var(--ink);
  background: #fffaf4;
  border: 2px solid rgba(31, 22, 48, 0.14);
  border-left-width: 5px;
  border-left-color: var(--sunset-warm);
  box-shadow: 3px 3px 0 rgba(31, 22, 48, 0.08);
  touch-action: manipulation;
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.archive-link-grid a:hover {
  background: #fff0dc;
  color: var(--coral-ink);
  border-color: rgba(31, 22, 48, 0.22);
  box-shadow: 5px 5px 0 rgba(31, 22, 48, 0.12);
  transform: translateY(-2px);
}

.archive-link-grid .link-title {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  line-height: 1.25;
}

.archive-link-grid .what {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

.kiss-home .gwc-block {
  background: linear-gradient(165deg, #ffffff 0%, var(--surface) 72%, var(--accent-wash) 100%);
  border-radius: 0;
}

.guide-page .guide-section {
  margin: var(--space-l) 0 var(--space-l);
  padding: var(--space-m);
  background: linear-gradient(165deg, #ffffff 0%, var(--surface) 72%, var(--accent-wash) 100%);
  border: 4px solid var(--accent);
  box-shadow: 5px 5px 0 var(--accent-crimson);
}

.guide-page .guide-section h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.35rem, 3.8vw, 1.65rem);
  color: var(--ink);
  margin-bottom: var(--space-2xs);
}

.advice-funnel {
  list-style: none;
  margin: 0 0 var(--space-l);
  padding: 0;
  max-width: none;
  display: grid;
  gap: var(--space-xs);
}

.advice-funnel li {
  counter-increment: advice-step;
  position: relative;
  margin: 0 !important;
  padding: var(--space-s) var(--space-s) var(--space-s) 3.4rem !important;
  background: #fffaf4;
  border: 2px solid rgba(31, 22, 48, 0.14);
  border-left-width: 5px;
  border-left-color: var(--sunset-warm);
  box-shadow: 3px 3px 0 rgba(31, 22, 48, 0.08);
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.advice-funnel {
  counter-reset: advice-step;
}

.advice-funnel li::before {
  content: counter(advice-step);
  position: absolute;
  left: 14px;
  top: 16px;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  font-weight: 700;
  color: #fffaf4;
  background: var(--sunset-ink);
  border: 2px solid var(--accent);
}

.advice-funnel li:hover {
  background: #fff0dc;
  box-shadow: 5px 5px 0 rgba(31, 22, 48, 0.12);
  transform: translateY(-2px);
}

.advice-funnel li::marker {
  content: none;
}

.journey-year-nav {
  margin: 0 0 var(--space-l);
  padding: var(--space-xs) var(--space-s);
  background: var(--surface);
  border: 3px solid var(--accent);
  box-shadow: 4px 4px 0 var(--accent-crimson);
  gap: var(--space-2xs) var(--space-2xs);
}

.journey-year-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--dusty-pink-soft);
  border: 2px solid var(--paper-shadow);
  border-bottom: 2px solid var(--paper-shadow);
  touch-action: manipulation;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.journey-year-nav a:hover,
.journey-year-nav a[aria-current="page"] {
  color: #ffffff;
  background: var(--accent-crimson);
  border-color: var(--ink);
}

.footprint-page .coord-checklist {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-s) 0 var(--space-m);
  padding: 0;
  list-style: none;
}

@media (min-width: 560px) {
  .footprint-page .coord-checklist {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footprint-page .coord-checklist li {
  margin: 0;
}

.footprint-page .coord-checklist label {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  min-height: 56px;
  padding: var(--space-xs) var(--space-s);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--ink);
  background: #fffaf4;
  border: 2px solid rgba(31, 22, 48, 0.14);
  border-left-width: 5px;
  border-left-color: var(--accent-quiet);
  box-shadow: 3px 3px 0 rgba(31, 22, 48, 0.08);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.footprint-page .coord-checklist label:hover {
  background: #fff0dc;
  box-shadow: 5px 5px 0 rgba(31, 22, 48, 0.12);
  transform: translateY(-1px);
}

.footprint-page .coord-checklist input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin-top: 0.1rem;
  accent-color: var(--sunset-warm);
  flex-shrink: 0;
}

.path-visual-grid {
  display: grid;
  gap: var(--space-m);
  margin: 0 0 var(--space-l);
}

@media (min-width: 720px) {
  .path-visual-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .path-visual-grid .photo-frame--wide {
    grid-column: 1 / -1;
  }
}

/* .footer-soft base lives under .footer-kiss shared chrome above */

/* ... 404 · phoenix classroom ... */
body.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-404 main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    max(32px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(48px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.page-404 h1 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(3rem, 12vw, 5rem);
  color: var(--dusk);
  margin-bottom: var(--space-2xs);
}

.page-404 .lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  color: var(--ink-muted);
  max-width: 36ch;
  margin: 0 auto 20px;
  font-size: var(--step-0);
  line-height: 1.5;
}

.page-404 .mono {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--space-m);
  color: var(--ink-muted);
  max-width: 42ch;
}

.page-404 .page-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  justify-content: center;
  margin: var(--space-2xs) 0 0;
  max-width: 36rem;
}

.page-404 .page-404-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-2xs) var(--space-s);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  color: #fffaf4;
  background: var(--sunset-ink);
  border: 2px solid var(--accent);
  box-shadow: 3px 3px 0 rgba(31, 22, 48, 0.15);
  touch-action: manipulation;
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.page-404 .page-404-actions a:not(:first-child) {
  background: #fffaf4;
  color: var(--coral-ink);
}

.page-404 .page-404-actions a:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 rgba(31, 22, 48, 0.12);
}

.page-404 .footer-kiss {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 4px solid var(--accent);
  max-width: 36rem;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .archive-link-grid a:hover,
  .advice-funnel li:hover,
  .footprint-page .coord-checklist label:hover,
  .page-404 .page-404-actions a:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════
   showcase layer · 2026-07-23 · 凤凰 polish
   selection · scrollbar · hero lockup · sunset accents ·
   card depth · press states · scroll reveals
   ════════════════════════════════════════════════════════ */

/* ... selection · dusk chalk moment ... */
::selection {
  background: var(--dusk);
  color: var(--surface);
}

/* ... scrollbar · lily chrome, non-breaking ... */
html {
  scrollbar-color: var(--accent-wash-strong) transparent;
  scrollbar-width: thin;
}

/* Home paper · matcha wash over ruled classroom lines.
   This used to be a hard-coded pink lily wash left over from the
   kindergarten palette, which fought every matcha token on the page. */
body.choice-home {
  background-color: var(--surface);
  background-image:
    linear-gradient(
      180deg,
      var(--accent-wash) 0%,
      rgba(0, 107, 69, 0.045) 34rem,
      transparent 72rem
    ),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(0, 84, 55, 0.055) 28px,
      rgba(0, 84, 55, 0.055) 29px
    );
  background-repeat: no-repeat, repeat;
}

/* ... hero visual · babys-breath to lily sky + 凤 ... */
.kindergarten-home .hero-visual {
  background:
    radial-gradient(58% 42% at 50% 32%, var(--accent-wash-strong), transparent 74%),
    linear-gradient(
      180deg,
      var(--peach) 0%,
      var(--accent-crimson) 42%,
      var(--lavender) 72%,
      var(--dusk) 100%
    );
}

.kindergarten-home .hero-visual::after {
  content: "凤";
  content: "凤" / "";
  position: absolute;
  left: 50%;
  top: 1%;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 0;
  font-family: "Noto Serif SC", serif;
  font-weight: 500;
  font-size: clamp(84px, 20vw, 148px);
  line-height: 1.1;
  color: rgba(255, 250, 244, 0.34);
  pointer-events: none;
  user-select: none;
}

/* ... hero lockup · brand first, CTA clear, energy soft ... */
.choice-home .hero-brand-line,
.choice-home .hero-iu {
  color: var(--ink);
}

.choice-home .hero-energy-line {
  color: var(--crimson-ink);
}

.choice-home .hero-vibe-line,
.choice-home .hero-cookie-line {
  color: var(--ink-muted);
}

.choice-home .hero-text h1 {
  letter-spacing: 0;
}

.choice-home .hero-text h1::after {
  width: 3.25rem;
  height: 4px;
  border-radius: 2px;
  background: var(--sunset-warm);
}

/* ... section headings · chalk accent bar ... */
.kiss-home .gwc-block h2::after,
.guide-page .guide-hero h1::after,
.footprint-page .guide-hero h1::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: var(--space-2xs);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sunset-warm) 0%, var(--lavender) 100%);
}

/* ... photo frames · chunky shadow deepens on hover ... */
.photo-frame {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.photo-frame:hover {
  transform: rotate(-0.4deg) translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--coral);
}

.photo-frame--home:hover {
  transform: rotate(0.6deg) translate(-2px, -2px);
}

.photo-frame--wide:hover {
  transform: rotate(0.3deg) translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--lavender);
}

/* ... gwc cards · sunset top edge ... */
.kiss-home .gwc-block {
  border-top-color: var(--sunset-warm);
}

/* ... footer · sunset-to-dusk rule ... */
.kiss-home .footer-kiss,
.page-404 .footer-kiss {
  border-top: 4px solid var(--sunset-warm);
  border-image: linear-gradient(90deg, var(--sunset-warm) 0%, var(--lavender) 100%) 1;
}

/* ... press states · everything settles under the thumb ... */
.btn:active,
.situation-btn:active,
.open-pick-btn:active,
.scratch-pick-btn:active,
.open-link-cta:active,
.journey-year-nav a:active,
.site-jump a:active,
.page-404 .page-404-actions a:active {
  transform: translateY(1px);
  transition-duration: 60ms;
}

/* ... scroll reveals · classroom-ux.js adds .rv below the fold only ... */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .rv {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.js-reveal .rv.in-view {
    opacity: 1;
    transform: none;
  }

  /* keep the crayon rotation while riding in */
  html.js-reveal .photo-frame.rv {
    transform: rotate(-0.4deg) translateY(16px);
  }

  html.js-reveal .photo-frame--home.rv {
    transform: rotate(0.6deg) translateY(16px);
  }

  html.js-reveal .photo-frame--wide.rv {
    transform: rotate(0.3deg) translateY(16px);
  }

  html.js-reveal .photo-frame.rv.in-view {
    transform: rotate(-0.4deg);
  }

  html.js-reveal .photo-frame--home.rv.in-view {
    transform: rotate(0.6deg);
  }

  html.js-reveal .photo-frame--wide.rv.in-view {
    transform: rotate(0.3deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-frame:hover,
  .photo-frame--home:hover,
  .photo-frame--wide:hover {
    transform: rotate(-0.4deg);
    box-shadow: 5px 5px 0 var(--coral);
  }

  .photo-frame--home:hover {
    transform: rotate(0.6deg);
  }

  .photo-frame--wide:hover {
    transform: rotate(0.3deg);
    box-shadow: 5px 5px 0 var(--lavender);
  }
}

/* ── sunflower hero + desk photos · phoenix personality ── */
.kindergarten-home .hero-visual--photo {
  aspect-ratio: 4 / 5;
  max-width: 280px;
  padding: 0;
  background: var(--dusty-pink-soft);
  box-shadow: 6px 6px 0 var(--sunflower);
}

.kindergarten-home .hero-visual--photo::after {
  content: none;
}

.kindergarten-home .hero-visual--photo picture,
.kindergarten-home .hero-visual--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

/* photo badge removed on choice home ... brand lives in hero text only */
.choice-home .hero-visual--photo .name-tag {
  display: none;
}

.kindergarten-home:not(.choice-home) .hero-visual--photo .name-tag {
  top: auto;
  bottom: 8%;
  left: 8%;
  background: var(--surface);
  border-color: var(--sage);
  box-shadow: 2px 2px 0 rgba(31, 22, 48, 0.12);
}

/* quiet bagel crumb motif */
.kindergarten-home .hero-bagel {
  position: absolute;
  top: 10%;
  right: 8%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 40%, var(--gold-soft) 0 38%, transparent 40%),
    radial-gradient(circle at 50% 50%, #E8C9A0 0 72%, transparent 74%);
  border: 2px solid var(--accent);
  z-index: 4;
  opacity: 0.85;
  transform: rotate(12deg);
}

.choice-home .hero-text h1::after {
  background: var(--accent-crimson);
}

.choice-home .hero-visual--photo {
  transform: none;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  max-width: 260px;
  width: 100%;
  min-height: 0;
}

.choice-home .open-invest--hero {
  background: var(--surface-raised);
  box-shadow: 6px 6px 0 var(--accent-wash-strong);
}

.choice-home .hiatus-banner {
  box-shadow: 5px 5px 0 var(--accent-crimson);
}

@media (prefers-reduced-motion: no-preference) {
  .kindergarten-home .hero-visual--photo {
    animation: kg-photo-settle 0.7s ease both;
  }

  @keyframes kg-photo-settle {
    from {
      opacity: 0.65;
      transform: rotate(-3deg) scale(0.97);
    }
    to {
      opacity: 1;
      transform: rotate(-1deg) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .kindergarten-home .hero-visual--photo {
    animation: none;
  }
}

/* ── hero CTA spacing · Pick a seat after quiet cookie unit ── */
.choice-home .hero-text h1 {
  margin-top: 0;
}

/* ── archive clarity pass · page-start, equal Scratch CTAs, footprint groups ── */
.page-start {
  margin: 0 0 var(--space-m);
  padding: var(--space-xs) var(--space-s);
  max-width: 42rem;
  background: #fffaf4;
  border: 2px solid rgba(31, 22, 48, 0.14);
  border-left: 5px solid var(--sunset-warm, #b3714f);
}

.page-start h2 {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: 1.15rem;
  color: var(--crayon-ink, #2b2d33);
  margin: 0 0 var(--space-2xs);
}

.page-start ol {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--crayon-ink, #2b2d33);
  line-height: 1.45;
  max-width: 48ch;
}

.page-start li {
  margin-bottom: var(--space-3xs);
}

.page-start-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  align-items: center;
  margin: var(--space-xs) 0 var(--space-2xs);
}

.page-start-ctas .open-cta,
.page-start-ctas .open-link-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-s);
}

.page-start-more {
  margin: var(--space-2xs) 0 0;
  font-size: var(--step-0);
  color: var(--crayon-muted, #4a3f5c);
  line-height: 1.45;
  max-width: 48ch;
}

.advice-why-order {
  margin: 0 0 var(--space-xs);
  max-width: 58ch;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--crayon-ink, #2b2d33);
}

.ap-credit-table {
  width: 100%;
  max-width: 52rem;
}

.ap-credit-table caption {
  caption-side: top;
  text-align: left;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.92rem;
  color: var(--crayon-muted, #4a3f5c);
  padding-bottom: var(--space-2xs);
  line-height: 1.4;
}

.scratch-equal-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
}

.scratch-studio-page .scratch-equal-ctas .howto-play,
.scratch-studio-page .scratch-equal-ctas .howto-download,
.scratch-studio-page .scratch-equal-ctas .howto-howto,
.scratch-pick-reveal .scratch-equal-ctas .howto-play,
.scratch-pick-reveal .scratch-equal-ctas .howto-download,
.scratch-pick-reveal .scratch-equal-ctas .howto-howto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 7.5rem;
  padding: 0.45rem var(--space-xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  touch-action: manipulation;
  border: 3px solid var(--crayon-ink, #2b2d33);
}

.scratch-studio-page .howto-howto,
.scratch-pick-reveal .howto-howto {
  color: var(--dusk, #2A1F3D);
  background: transparent;
  box-shadow: none;
}

.scratch-studio-page .howto-howto:hover,
.scratch-studio-page .howto-howto:focus-visible,
.scratch-pick-reveal .howto-howto:hover,
.scratch-pick-reveal .howto-howto:focus-visible {
  background: var(--coral-ink, #9A3D32);
  color: #fff8f0;
  outline: 3px solid var(--focus-ring, #2A1F3D);
  outline-offset: 2px;
}

.scratch-studio-page .howto-practice,
.scratch-pick-practice {
  margin: var(--space-3xs) 0 0;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--crayon-muted, #4a3f5c);
}

.fp-groups {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-xs) 0 var(--space-s);
  max-width: 42rem;
}

.fp-group {
  margin: 0;
  padding: var(--space-xs) var(--space-xs);
  border: 2px solid rgba(31, 22, 48, 0.14);
  background: #fffaf4;
}

.fp-group legend {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: var(--step-0);
  color: var(--crayon-ink, #2b2d33);
  padding: 0 var(--space-3xs);
}

/* ── On the desk · full-width column · linked polaroids · Stanford calm ── */
.desk-photos {
  margin: var(--space-l) 0 var(--space-m);
  padding: var(--space-m) var(--space-m) var(--space-m);
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(160deg, var(--surface-raised) 0%, var(--surface-sunken) 100%);
  border: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 5px 5px 0 var(--warm-wash);
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.desk-photos-heading {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--ink);
  margin: 0 0 var(--space-3xs);
}

.desk-photos-lede {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  color: var(--ink-muted);
  margin: 0 0 var(--space-2xs);
}

.desk-vibe {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: 0.9rem;
  color: var(--ink-muted);
  margin: var(--space-s) 0 var(--space-2xs);
  max-width: 48ch;
}

.desk-listening {
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0 0 var(--space-xs);
  max-width: 48ch;
}

.desk-photos-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-s);
  align-items: stretch;
  list-style: none;
  padding: 0;
  margin: 0;
}

a.desk-photo-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  outline: none;
  min-width: 0;
  /* stretch, don't fix: a 100% height here clipped the third caption
     mid-glyph whenever one tile ran longer than its neighbours */
  block-size: auto;
  align-self: stretch;
}

a.desk-photo-link:hover,
a.desk-photo-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

a.desk-photo-link:focus-visible {
  outline: 4px solid var(--dusk);
  outline-offset: 4px;
}

.desk-photo-link .photo-frame--desk {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .desk-photo-link:hover .photo-frame--desk,
  .desk-photo-link:focus-visible .photo-frame--desk {
    transform: translateY(-3px);
    box-shadow: 5px 6px 0 var(--dusty-pink);
  }
}

.photo-frame--desk,
.choice-home .photo-frame--desk,
.desk-photos-row > .photo-frame--desk,
.desk-photo-link .photo-frame--desk {
  margin: 0;
  display: flex !important;
  flex-direction: column;
  min-block-size: 100%;
  inline-size: 100%;
  box-sizing: border-box;
  transform: none !important;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  opacity: 1 !important;
  visibility: visible !important;
}

.photo-frame--desk picture,
.choice-home .photo-frame--desk picture {
  display: block !important;
  inline-size: 100%;
  margin: 0;
  flex: 0 0 auto;
  /* crop the photo to the frame radius, not the caption */
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px) 0 0;
}

.photo-frame--desk img,
.choice-home .photo-frame--desk img,
.choice-home .photo-frame--desk-tall img {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  max-height: none !important;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.92) sepia(0.06) contrast(1.02);
  opacity: 1 !important;
  visibility: visible !important;
}

/* Polaroid label · typewriter flavour kept, but readable: the old
   0.7rem Courier uppercase was under the legibility floor and the
   frame clipped whatever ran past three lines. */
.photo-frame--desk figcaption {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-xs) var(--space-s);
  margin: 0;
  flex: 1 1 auto;
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--surface-raised);
  border-top: 2px dashed var(--border);
  border-radius: 0 0 calc(var(--radius-md) - 2px) calc(var(--radius-md) - 2px);
  line-height: 1.45;
}

.desk-cap-title {
  display: block;
  font-family: var(--font-classroom);
  font-size: var(--step--1);
  letter-spacing: 0;
  color: var(--ink);
}

.desk-cap-where {
  display: block;
  color: var(--accent);
  letter-spacing: 0.01em;
}

.desk-cap-why {
  display: block;
  color: var(--ink-muted);
  letter-spacing: 0;
  font-weight: 400;
  margin-block-start: var(--space-3xs);
  line-height: 1.45;
}

.desk-photo-link:hover .desk-cap-where,
.desk-photo-link:focus-visible .desk-cap-where {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.desk-photos-nav-soft {
  margin: var(--space-s) 0 0;
  max-width: 48ch;
  font-size: 0.92rem;
  color: var(--crayon-muted, #4a3f5c);
  line-height: 1.45;
}

/* Desk arrival strip · only paints when linked with #desk-note */
.desk-arrival {
  display: none;
  margin: 0 0 var(--space-m);
  padding: var(--space-xs) var(--space-s);
  max-width: none;
  box-sizing: border-box;
  background: #fffaf4;
  border: 3px solid var(--accent);
  border-left: 6px solid var(--accent-crimson);
  box-shadow: 4px 4px 0 var(--dusty-pink);
}

.desk-arrival:target {
  display: block;
}

.desk-arrival-kicker {
  margin: 0 0 var(--space-3xs);
  font-family: "Courier New", Courier, monospace;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-crimson);
}

.desk-arrival-where,
.desk-arrival-why {
  margin: 0 0 var(--space-3xs);
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--ink);
  max-width: 48ch;
}

.desk-arrival-back {
  margin: var(--space-2xs) 0 0;
  font-size: 0.9rem;
}

/* Align home column: hero, desk, banner, seat share one left edge */
.choice-home .hero--choice,
.choice-home .path-page-header.interior-panel,
.choice-home .photo-frame--home,
.choice-home .desk-photos,
.choice-home .hiatus-banner,
.choice-home .open-invest--hero {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Home mast uses same panel as your path; keep Fraunces + matcha CTAs */
.choice-home .path-page-header.interior-panel {
  border-left: 6px solid var(--accent, #006b45);
  padding-left: var(--space-sm, 1rem);
  background: linear-gradient(90deg, rgba(232, 240, 228, 0.55) 0%, transparent 42%);
}

.choice-home .path-page-header.interior-panel h1 {
  font-family: var(--font-display, Fraunces, Georgia, serif);
  color: var(--accent, #006b45);
}

.choice-home .path-page-header.interior-panel .path-kicker {
  color: var(--clay-ink, #8a4e2e);
}

.choice-home .photo-frame--home {
  max-width: 22rem;
  margin: 0 0 var(--space-l);
}

.choice-home .hiatus-banner {
  margin: 0 0 var(--space-m);
}

/* ── Stanford warmer + IMAGE LOCK · hero calm · desk never opacity-0 ── */
.choice-home .hero--choice {
  gap: var(--space-m) var(--space-l);
  align-items: center;
}

/*
  Photo frame must fill: aspect-ratio + absolute picture/img + object-fit cover.
  Do NOT use height:auto on the img ... that left the dusty-pink frame empty below
  a landscape source cropped into a tall 4/5 box.
*/
.choice-home .hero-visual,
.choice-home .hero-visual--photo {
  position: relative;
  transform: none !important;
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block;
  aspect-ratio: 4 / 5;
  max-width: 260px;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  background: var(--dusty-pink-soft);
  box-shadow: 4px 4px 0 rgba(31, 22, 48, 0.14);
}

.choice-home .hero-visual--photo picture {
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100%;
  height: 100%;
  margin: 0;
}

.choice-home .hero-visual--photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  object-fit: cover !important;
  object-position: center 30%;
  opacity: 1 !important;
  visibility: visible !important;
}

.choice-home .hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

.choice-home .hero-brand-line {
  font-family: "Cooper Black", "Cooper Std", Georgia, serif;
  font-size: clamp(1.55rem, 4.2vw, 2.05rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 var(--space-3xs);
}

.choice-home .hero-energy-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.45em;
  font-family: "Comic Neue", "Comic Sans MS", cursive, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  color: var(--crimson-ink);
  margin: 0 0 var(--space-xs);
  line-height: 1.35;
}

.choice-home .hero-eq-sign {
  font-family: "Courier New", Courier, monospace;
  font-weight: 400;
  font-size: 0.95em;
  color: var(--accent-crimson);
}

.choice-home .hero-eq-value {
  font-style: normal;
}

.choice-home .hero-bagel-quote {
  margin: 0 0 var(--space-s);
}

.choice-home .hero-bagel-quote p {
  color: var(--ink-muted);
  font-size: clamp(0.95rem, 2.1vw, 1.05rem);
}

.choice-home .hero-text h1 {
  font-size: clamp(1.65rem, 4.5vw, 2.15rem);
  margin: 0 0 var(--space-3xs);
  max-width: 16ch;
  padding-bottom: 0;
}

/* Kill the short stub bar ... crimson underline on CTA instead */
.choice-home .hero-text h1::after {
  content: none;
}

.choice-home .hero-cta-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-crimson) 70%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.choice-home .hero-cta-link:hover,
.choice-home .hero-cta-link:focus-visible {
  color: var(--accent-crimson);
  text-decoration-color: var(--accent-crimson);
}

.choice-home .hero-hook {
  margin: 0;
}

/* Kill scroll-reveal hide on desk + sunflower hero forever */
html.js-reveal .choice-home .desk-photos,
html.js-reveal .choice-home .desk-photos.rv,
html.js-reveal .choice-home .photo-frame--desk,
html.js-reveal .choice-home .photo-frame--desk.rv,
html.js-reveal .choice-home .desk-photo-link .photo-frame,
html.js-reveal .choice-home .hero-visual.rv,
html.js-reveal .choice-home .hero-visual--photo.rv {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

@media (max-width: 720px) {
  .desk-photos-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .photo-frame--desk img,
  .choice-home .photo-frame--desk img,
  .choice-home .photo-frame--desk-tall img {
    height: 180px !important;
    min-height: 180px !important;
  }
}

@media (max-width: 560px) {
  .choice-home .hero,
  .kindergarten-home.choice-home .hero {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    text-align: left;
  }

  .choice-home .hero-visual,
  .choice-home .hero-visual--photo,
  .kindergarten-home.choice-home .hero-visual--photo {
    max-width: 200px;
    width: 100%;
    margin: 0;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .choice-home .hero-brand-line {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
  }

  .choice-home .hero-text h1 {
    font-size: clamp(1.45rem, 6vw, 1.85rem);
    max-width: none;
  }

  .choice-home .hero-text h1::after {
    content: none;
  }

  .desk-photos {
    padding: var(--space-s) var(--space-xs) var(--space-xs);
    margin-left: 0;
    margin-right: 0;
  }

  .desk-photos-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .photo-frame--desk img,
  .choice-home .photo-frame--desk img,
  .choice-home .photo-frame--desk-tall img {
    height: 150px !important;
    min-height: 150px !important;
  }

  .photo-frame--desk figcaption {
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs);
  }

  .desk-cap-title {
    font-size: 0.7rem;
  }

  .desk-cap-why {
    font-size: 0.65rem;
  }
}

@media (max-width: 360px) {
  .desk-photos-row {
    grid-template-columns: 1fr;
  }

  .photo-frame--desk img,
  .choice-home .photo-frame--desk img,
  .choice-home .photo-frame--desk-tall img {
    height: 200px !important;
    min-height: 200px !important;
  }
}


/* ===== starter-campus bridge · matcha photo-tiles / pills ===== */
.desk-photo-link .photo-frame--desk,
.photo-frame--desk {
  border-radius: var(--radius, 20px);
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 84, 55, 0.16);
}
.desk-photos {
  background-color: var(--surface-raised);
  border-color: var(--accent);
  box-shadow: 5px 5px 0 var(--warm-wash);
}
.site-jump a,
.hero-cta-link,
.open-pick-btn,
.situation-btn {
  border-radius: 999px;
}
.hero-brand-line,
.desk-photos-heading {
  font-family: var(--font-display), Fraunces, Georgia, serif;
  font-weight: 700;
}


/* -- Audience invite line -- */
.choice-home .hero-for {
  margin: 0 0 var(--space-2xs);
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--accent, #006b45);
  max-width: 28ch;
}

@media (prefers-reduced-motion: no-preference) {
  .choice-home .hero-visual--photo {
    animation: mx-settle 0.7s ease both;
  }

  .choice-home .hero-text > * {
    animation: mx-rise 0.5s ease both;
  }

  .choice-home .hero-text > *:nth-child(1) { animation-delay: 0.02s; }
  .choice-home .hero-text > *:nth-child(2) { animation-delay: 0.06s; }
  .choice-home .hero-text > *:nth-child(3) { animation-delay: 0.1s; }
  .choice-home .hero-text > *:nth-child(4) { animation-delay: 0.14s; }
  .choice-home .hero-text > *:nth-child(5) { animation-delay: 0.18s; }
  .choice-home .hero-text > *:nth-child(6) { animation-delay: 0.22s; }

  .choice-home .desk-photos {
    animation: mx-rise 0.55s ease 0.2s both;
  }

  @keyframes mx-settle {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes mx-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}


/* ============================================================
   hero--doors · parity with IU / zhao / jadexzhao mast pattern
   Matcha classroom tokens. Kills leftover kindergarten/choice chrome
   on the home hero only. Text + CTAs + framed photo = one block.
   ============================================================ */
.theme-matchaxmoxie.choice-home .hero--doors,
.theme-matchaxmoxie .hero--doors {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--space-m) !important;
  align-items: center !important;
  margin: 0 0 var(--space-l) !important;
  padding: var(--space-m) 0 var(--space-l) !important;
  border-bottom: 2px solid var(--rule, rgba(0, 84, 55, 0.22)) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: left !important;
}

@media (min-width: 820px) {
  .theme-matchaxmoxie.choice-home .hero--doors,
  .theme-matchaxmoxie .hero--doors {
    /* copy first, framed photo second (doors mast) */
    grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.85fr) !important;
    gap: var(--space-l) !important;
    align-items: center !important;
  }

  .theme-matchaxmoxie .hero--doors .hero-text {
    order: 0 !important;
  }

  .theme-matchaxmoxie .hero--doors .hero-visual {
    order: 1 !important;
    justify-self: end !important;
    max-width: 20rem !important;
  }
}

/* Kill choice-home 4/5 + pale empty slab under square selfie */
.theme-matchaxmoxie .hero--doors .hero-visual,
.theme-matchaxmoxie.choice-home .hero--doors .hero-visual,
.theme-matchaxmoxie .hero--doors .hero-visual--photo {
  position: relative !important;
  margin: 0 !important;
  max-width: 18rem !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: var(--radius, 20px) !important;
  overflow: hidden !important;
  border: 3px solid var(--accent, #006b45) !important;
  box-shadow: 0 14px 30px rgba(0, 84, 55, 0.16) !important;
  background: transparent !important;
  background-image: none !important;
  transform: none !important;
  rotate: none !important;
  animation: none !important;
}

.theme-matchaxmoxie .hero--doors .hero-visual::before,
.theme-matchaxmoxie .hero--doors .hero-visual::after {
  content: none !important;
  display: none !important;
}

.theme-matchaxmoxie .hero--doors .hero-visual picture {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.theme-matchaxmoxie .hero--doors .hero-visual img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center 22% !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.theme-matchaxmoxie .hero--doors .hero-text {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  order: 0 !important;
}

.theme-matchaxmoxie .hero--doors .hero-visual {
  order: 1 !important;
  justify-self: start !important;
}

.theme-matchaxmoxie .hero--doors .eyebrow {
  display: inline-block !important;
  margin: 0 0 var(--space-2xs) !important;
  padding: var(--space-3xs) var(--space-xs) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--clay-ink, #8a4e2e) !important;
  background: var(--warm-wash, rgba(179, 113, 79, 0.16)) !important;
  border-radius: 999px !important;
}

.theme-matchaxmoxie .hero--doors .hero-brand-line {
  margin: 0 0 0.45rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent, #006b45) !important;
}

.theme-matchaxmoxie .hero--doors .hero-brand-line .sc {
  color: var(--accent-quiet, #3d6b4a) !important;
}

.theme-matchaxmoxie .hero--doors h1,
.theme-matchaxmoxie .hero--doors #hero-heading {
  margin: 0 0 var(--space-2xs) !important;
  font-family: var(--font-display, Fraunces, serif) !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 5vw, 2.85rem) !important;
  line-height: 1.08 !important;
  color: var(--accent, #006b45) !important;
  border: none !important;
}

.theme-matchaxmoxie .hero--doors h1::after,
.theme-matchaxmoxie .hero--doors .hero-text h1::after {
  content: none !important;
  display: none !important;
}

.theme-matchaxmoxie .hero--doors .credential-line {
  margin: 0 0 var(--space-xs) !important;
  padding-left: var(--space-xs) !important;
  border-left: 3px solid var(--clay, #b3714f) !important;
  color: var(--ink-muted, #4a554c) !important;
  font-size: 1.02rem !important;
  max-width: 40ch !important;
}

.theme-matchaxmoxie .hero--doors .hero-hook {
  margin: 0 0 var(--space-s) !important;
  max-width: 38ch !important;
  color: var(--ink-muted, #4a554c) !important;
  font-size: var(--step-0) !important;
  line-height: 1.5 !important;
}

.theme-matchaxmoxie .hero--doors .cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-xs) !important;
  margin: 0 !important;
}

.theme-matchaxmoxie .hero--doors .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: var(--space-xs) var(--space-m) !important;
  border-radius: 999px !important;
  background: var(--accent, #006b45) !important;
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
  border: 2px solid var(--accent, #006b45) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.theme-matchaxmoxie .hero--doors .btn:visited {
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
}

.theme-matchaxmoxie .hero--doors .btn:hover,
.theme-matchaxmoxie .hero--doors .btn:focus-visible {
  background: var(--clay-ink, #8a4e2e) !important;
  border-color: var(--clay-ink, #8a4e2e) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(-2px);
}

.theme-matchaxmoxie .hero--doors .btn-outline {
  background: var(--surface, #fff4e8) !important;
  background-color: var(--surface, #fff4e8) !important;
  color: var(--accent, #006b45) !important;
  -webkit-text-fill-color: var(--accent, #006b45) !important;
  border: 2px solid var(--accent, #006b45) !important;
}

.theme-matchaxmoxie .hero--doors .btn-outline:visited {
  color: var(--accent, #006b45) !important;
  -webkit-text-fill-color: var(--accent, #006b45) !important;
}

.theme-matchaxmoxie .hero--doors .btn-outline:hover,
.theme-matchaxmoxie .hero--doors .btn-outline:focus-visible {
  background: var(--surface-sunken, #e8f0e4) !important;
  color: var(--accent, #006b45) !important;
  -webkit-text-fill-color: var(--accent, #006b45) !important;
  border-color: var(--accent-hover, #005537) !important;
}

/* Hide old bagel/energy chrome if any remnant markup */
.theme-matchaxmoxie .hero--doors .hero-energy-line,
.theme-matchaxmoxie .hero--doors .hero-bagel-quote,
.theme-matchaxmoxie .hero--doors .hero-cta-link {
  display: none !important;
}

.theme-matchaxmoxie .site-switcher,
.footer-kiss .site-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin-top: var(--space-xs);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--space-2xs);
  text-align: center;
  width: 100%;
}
.theme-matchaxmoxie .site-switcher a {
  color: var(--accent, #006b45);
  font-weight: 700;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.theme-matchaxmoxie .site-switcher a:hover { text-decoration: underline; }
.theme-matchaxmoxie .site-switcher .current {
  color: var(--ink-muted, #4a554c);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .theme-matchaxmoxie .hero--doors .hero-visual {
    animation: mx-doors-settle 0.65s ease both;
  }
  .theme-matchaxmoxie .hero--doors .hero-text {
    animation: mx-doors-rise 0.55s ease 0.08s both;
  }
  @keyframes mx-doors-settle {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes mx-doors-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 819px) {
  .theme-matchaxmoxie .hero--doors .hero-text {
    order: 0 !important;
  }
  .theme-matchaxmoxie .hero--doors .hero-visual {
    order: 1 !important;
    max-width: 14rem !important;
    justify-self: start !important;
  }
  .theme-matchaxmoxie .hero--doors .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .theme-matchaxmoxie .hero--doors .btn {
    width: 100% !important;
  }
}

/* Site-wide solid CTA floor: cream/white label on matcha fill */
a.open-cta,
a.open-link-cta,
a.btn-primary,
.page-start-ctas .open-cta,
.page-start-ctas .open-link-cta {
  color: var(--on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--on-accent, #ffffff) !important;
  text-decoration: none !important;
}

a.open-cta:hover,
a.open-link-cta:hover,
a.open-cta:focus-visible,
a.open-link-cta:focus-visible,
a.open-cta:visited,
a.open-link-cta:visited,
a.btn-primary:hover,
a.btn-primary:focus-visible,
a.btn-primary:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}


/* ============================================================
   HARD RULE: no clear / glass / see-through navbars
   Sticky/fixed nav stays solid cream when scrolling.
   ============================================================ */
.site-jump,
.kindergarten-home .site-nav,
.theme-matchaxmoxie .site-jump {
  background: #ffffff !important;
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* No empty blue hero slabs */
.hero,
.hero--choice,
.hero--doors,
.path-page-header,
.guide-hero,
.studio-hero {
  background-image: none;
}
.hero-visual,
.hero-visual--photo {
  background: transparent;
  background-color: transparent;
}

/* GOV.UK habit: 5px-ish vertical rhythm, 16px floor, 44px standalone controls.
   Classroom voice stays loose; this only lifts chrome, not copy. */
.site-jump a,
.twin-banner,
.btn,
.btn-primary,
.btn-secondary,
.open-cta,
.open-link-cta {
  min-height: 44px;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus-ring, #222a25);
  outline-offset: 3px;
}

/* ── 404 · actions ────────────────────────────────────────
   The generic `.kindergarten-home main a:not(...)` prose-link
   rule was repainting these buttons matcha-on-clay (~1.6:1).
   The anchors now carry .btn-primary / .btn-outline, which
   that rule already excludes, so the pair below is the only
   thing colouring them: solid matcha, then matcha on paper.
   ──────────────────────────────────────────────────────── */
body.page-404 .page-404-actions .btn-primary,
body.page-404 .page-404-actions .btn-primary:visited {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

body.page-404 .page-404-actions .btn-primary:hover,
body.page-404 .page-404-actions .btn-primary:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

body.page-404 .page-404-actions .btn-outline,
body.page-404 .page-404-actions .btn-outline:visited {
  background: var(--surface-raised);
  border-color: var(--accent);
  color: var(--accent);
}

body.page-404 .page-404-actions .btn-outline:hover,
body.page-404 .page-404-actions .btn-outline:focus-visible {
  background: var(--accent-wash);
  color: var(--accent);
}