:root {
  --paper: oklch(95% 0.015 104);
  --paper-deep: oklch(90% 0.025 105);
  --ink: oklch(19% 0.025 155);
  --ink-soft: oklch(39% 0.022 155);
  --night: oklch(15% 0.03 155);
  --celadon: oklch(72% 0.05 158);
  --cinnabar: oklch(55% 0.13 34);
  --line: oklch(28% 0.02 155 / 0.22);
  --serif: "Noto Serif SC", "Songti SC", SimSun, serif;
  --sans: "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.75; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 10px 14px; color: var(--paper); background: var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
a:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 4px; }

.site-header {
  min-height: 76px;
  padding: 14px clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-weight: 600; text-decoration: none; letter-spacing: 0.06em; }
.brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.back-link { min-height: 44px; display: grid; align-items: center; font-size: 0.8rem; text-underline-offset: 5px; }

main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.hero { min-height: calc(100vh - 77px); padding-block: clamp(56px, 8vw, 104px); display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.22fr); gap: clamp(38px, 7vw, 96px); align-items: center; }
.eyebrow, .season, .section-number { margin: 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; }
.eyebrow, .section-number { color: var(--cinnabar); }
.season { margin-top: 48px; color: var(--ink-soft); }
h1 { margin: 22px 0 30px; font-family: var(--serif); font-size: clamp(3.6rem, 7vw, 6.8rem); line-height: 1.13; font-weight: 600; letter-spacing: -0.055em; }
.lead { max-width: 31rem; margin: 0; font-family: var(--serif); font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.9; }

.hero-poster { margin: 0; position: relative; overflow: hidden; background: var(--night); }
.hero-poster img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; filter: saturate(0.9) contrast(1.02); }
.hero-poster figcaption { padding: 12px 0; display: flex; justify-content: space-between; gap: 20px; color: var(--ink-soft); font-size: 0.68rem; letter-spacing: 0.12em; }

.statement, .closing { padding-block: clamp(88px, 12vw, 156px); display: grid; grid-template-columns: 116px minmax(0, 1.15fr) minmax(280px, 0.65fr); gap: 34px; align-items: end; border-top: 1px solid var(--line); }
.statement h2, .closing h2 { margin: 0; font-family: var(--serif); font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.25; font-weight: 600; letter-spacing: -0.045em; }
.statement > p:last-child, .closing > p:last-child { margin: 0 0 8px; color: var(--ink-soft); }

.principles { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--ink); }
.principles article { min-height: 260px; padding: 28px; border-right: 1px solid var(--line); }
.principles article:first-child { padding-left: 0; }
.principles article:last-child { border-right: 0; }
.principles span { color: var(--cinnabar); font-size: 0.68rem; }
.principles h2 { margin: 54px 0 18px; font-family: var(--serif); font-size: 1.55rem; }
.principles p { margin: 0; color: var(--ink-soft); font-size: 0.86rem; }

footer { padding-block: 34px 54px; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--ink); color: var(--ink-soft); font-size: 0.78rem; }
footer p { margin: 0; }
footer a { text-underline-offset: 5px; }

@media (max-width: 800px) {
  .site-header {
    min-height: 66px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .brand img { width: 36px; height: 36px; }
  .brand span { font-size: 0.86rem; }
  .hero { min-height: auto; padding-block: 60px 84px; grid-template-columns: 1fr; }
  .season { margin-top: 34px; }
  h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .hero-poster { margin-top: 16px; }
  .hero-poster img { aspect-ratio: 4 / 5; object-position: 58% center; }
  .statement, .closing { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; align-items: start; }
  .statement h2, .closing h2 { grid-column: 2; font-size: 2.6rem; }
  .statement > p:last-child, .closing > p:last-child { grid-column: 2; }
  .principles { grid-template-columns: 1fr 1fr; }
  .principles article, .principles article:first-child { min-height: 230px; padding: 24px 18px; }
  .principles article:nth-child(2) { border-right: 0; }
  .principles article:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .principles h2 { margin-top: 36px; }
}

@media (max-width: 480px) {
  .site-header {
    gap: 12px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .brand { min-width: 0; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .brand span { font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; }
  .back-link { font-size: 12px; white-space: nowrap; }
  main, footer { width: min(1180px, calc(100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .hero { padding-block: 52px 72px; gap: 32px; }
  h1 { font-size: clamp(2.5rem, 13vw, 3.5rem); line-height: 1.16; }
  .lead { font-size: 1rem; }
  .hero-poster figcaption { display: grid; gap: 2px; }
  .statement, .closing { padding-block: 72px; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .statement h2, .closing h2 { font-size: clamp(2rem, 10vw, 2.7rem); }
  .principles { grid-template-columns: 1fr; }
  .principles article,
  .principles article:first-child { min-height: 0; padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .principles article:last-child { border-bottom: 0; }
  .principles h2 { margin-top: 24px; }
  footer { padding-bottom: max(44px, env(safe-area-inset-bottom)); flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}