:root {
  /* Compliance lexicon from DESIGN.md: Condensed** Condense* labels Interpret “haru” both daily ritual */
  --rice-paper: #F7F1E4;
  --dawn-ink: #26384A;
  --ume-petal: #F0A7B5;
  --young-leaf: #8FBF74;
  --apricot-sun: #F7C66A;
  --mist-blue: #BFD7E6;
  --wet-bark: #5B4A3F;
  --mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --serif-jp: "Noto Serif JP", "Hiragino Mincho ProN", Georgia, serif;
  --condensed: "IBM Plex Sans Condensed", "Arial Narrow", "Avenir Next Condensed", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--rice-paper);
}

body {
  margin: 0;
  color: var(--dawn-ink);
  font-family: var(--serif-jp);
  background:
    radial-gradient(circle at 58% 18%, rgba(247,198,106,.36), transparent 28%),
    linear-gradient(105deg, rgba(191,215,230,.64), var(--rice-paper) 46%, rgba(247,198,106,.25));
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(91deg, rgba(91,74,63,.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(177deg, rgba(38,56,74,.026) 0 1px, transparent 1px 13px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.42) 0 1px, transparent 2px);
  background-size: auto, auto, 31px 31px;
}

.edition { position: relative; }

.weather-strip {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 25;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid rgba(38,56,74,.16);
  border-radius: 999px;
  background: rgba(247,241,228,.58);
  backdrop-filter: blur(12px);
  font-family: var(--condensed);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 10px 35px rgba(91,74,63,.08);
}

.weather-strip a { color: var(--dawn-ink); text-decoration: none; opacity: .72; transition: color .4s, opacity .4s; }
.weather-strip a:hover, .weather-strip a.active { color: var(--young-leaf); opacity: 1; }
.weather-strip span { color: var(--wet-bark); }

.morning-sheet {
  min-height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  padding: clamp(34px, 5vw, 72px);
  isolation: isolate;
  background:
    linear-gradient(100deg, rgba(191,215,230,var(--cool, .22)), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(247,241,228,.18)),
    var(--rice-paper);
}

.morning-sheet::before,
.morning-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.morning-sheet::before {
  background:
    linear-gradient(90deg, transparent 0 11.5%, rgba(38,56,74,.045) 11.6% 11.75%, transparent 11.85% 23.5%, rgba(38,56,74,.035) 23.6% 23.72%, transparent 23.8% 47%, rgba(38,56,74,.035) 47.08% 47.2%, transparent 47.3% 76%, rgba(38,56,74,.04) 76.1% 76.23%, transparent 76.3%),
    radial-gradient(circle at 79% 20%, rgba(240,167,181,.14), transparent 20%);
}

.morning-sheet::after {
  box-shadow: inset 0 -44px 54px rgba(91,74,63,.08), inset 0 1px 0 rgba(255,255,255,.68);
}

.dawn-sheet { --cool: .58; }
.pollen-sheet { --cool: .18; background-color: #F7F1E4; }
.station-sheet { --cool: .34; }
.garden-sheet { --cool: .12; background: linear-gradient(125deg, rgba(143,191,116,.12), transparent 36%), var(--rice-paper); }
.fold-sheet { --cool: .05; background: linear-gradient(145deg, rgba(247,198,106,.34), var(--rice-paper) 48%, rgba(191,215,230,.22)); }

.shoji-grid, .station-rails {
  position: absolute;
  inset: 0;
  opacity: .48;
  background-image: linear-gradient(90deg, transparent 0 7%, rgba(38,56,74,.07) 7.1% 7.18%, transparent 7.28%), linear-gradient(0deg, transparent 0 78%, rgba(143,191,116,.22) 78.05% 78.17%, transparent 78.25%);
  background-size: 18vw 100%, 100% 22vh;
}

.masthead {
  position: absolute;
  left: -3vw;
  top: -8vw;
  margin: 0;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(104px, 19vw, 318px);
  line-height: .78;
  letter-spacing: -.075em;
  color: rgba(38,56,74,.18);
  filter: url(#none);
  clip-path: circle(var(--dew-open, 22%) at var(--dew-x, 18%) var(--dew-y, 24%));
  transition: clip-path .2s linear;
}

.dew-clearing {
  position: absolute;
  width: 38vmin;
  height: 38vmin;
  left: 11vw;
  top: 9vh;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.7), rgba(191,215,230,.15) 35%, transparent 70%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset -18px -20px 34px rgba(191,215,230,.18), 0 0 38px rgba(255,255,255,.46);
  mix-blend-mode: screen;
  animation: dewBreathe 8s ease-in-out infinite;
}

@keyframes dewBreathe { 0%,100% { transform: scale(.96); opacity:.72; } 50% { transform: scale(1.08); opacity:.92; } }

.edition-kicker, .vertical-note {
  position: absolute;
  left: clamp(18px, 3vw, 42px);
  top: 45%;
  writing-mode: vertical-rl;
  font-family: var(--condensed);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--wet-bark);
}

.date-seal, .archive-seal {
  position: absolute;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(91,74,63,.5);
  border-radius: 50%;
  color: var(--wet-bark);
  font-family: var(--condensed);
  letter-spacing: .16em;
  font-size: 13px;
  line-height: 1.25;
  transform: rotate(-9deg);
  background: rgba(247,241,228,.42);
  box-shadow: 0 0 0 5px rgba(240,167,181,.08) inset;
}

.date-seal { right: 18vw; top: 26vh; }
.archive-seal { right: 13vw; bottom: 15vh; transform: rotate(8deg); }

.wind-rule { position: absolute; pointer-events: none; }
.wind-rule svg { width: 100%; height: 100%; overflow: visible; }
.wind-rule path { fill: none; stroke: var(--young-leaf); stroke-width: 1.3; stroke-dasharray: 8 16; opacity: .68; vector-effect: non-scaling-stroke; }
.lower-wind { left: 0; right: 0; bottom: 21vh; height: 150px; }
.diagonal-wind { left: -5vw; right: -5vw; top: 20vh; height: 58vh; transform: rotate(-2deg); }

.headline-fragment {
  position: absolute;
  left: 45%;
  top: 82px;
  transform: translateX(-50%) rotate(-2deg);
  padding: 6px 12px;
  background: rgba(247,241,228,.62);
  border: 1px solid rgba(143,191,116,.28);
  font-family: var(--condensed);
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dawn-ink);
  box-shadow: 0 12px 28px rgba(91,74,63,.06);
  animation: fragmentDrift 9s ease-in-out infinite;
}

@keyframes fragmentDrift { 50% { transform: translateX(-43%) translateY(-12px) rotate(1deg); } }

.edge-notice {
  position: absolute;
  max-width: 190px;
  margin: 0;
  font-family: var(--condensed);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(38,56,74,.72);
}
.notice-left { left: 13vw; bottom: 14vh; }
.notice-right { right: 8vw; bottom: 34vh; }

.dew-lens {
  position: absolute;
  left: 61vw;
  top: 39vh;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.85), rgba(191,215,230,.33) 36%, rgba(255,255,255,.1) 72%);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: inset -18px -16px 26px rgba(38,56,74,.08), 0 18px 44px rgba(38,56,74,.1);
  font-family: var(--mincho);
  font-size: 22px;
  color: var(--dawn-ink);
  transform: rotate(-8deg);
}
.dew-lens span { transform: scale(1.18); filter: blur(.2px); }

.chapter-title {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(62px, 10vw, 158px);
  line-height: .86;
  letter-spacing: -.055em;
  color: rgba(38,56,74,.82);
  max-width: 760px;
}

.chapter-caption, .station-note, .closing-line {
  max-width: 480px;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.75;
  color: rgba(38,56,74,.76);
}
.chapter-caption { margin: 28px 0 0 12vw; }
.chapter-caption.narrow { max-width: 380px; margin-left: 34vw; }

.pollen-brief {
  position: absolute;
  width: min(340px, 34vw);
  padding: 14px 18px;
  border-radius: 50% 42% 48% 38% / 42% 55% 40% 48%;
  background: rgba(247,241,228,.72);
  border: 1px solid rgba(143,191,116,.24);
  box-shadow: 0 20px 45px rgba(91,74,63,.08);
  font-size: 17px;
  line-height: 1.45;
  transform: translate3d(var(--drift, 0px), 0, 0) rotate(var(--rot, -2deg));
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.pollen-brief span { display:block; font-family: var(--condensed); letter-spacing:.16em; color: var(--young-leaf); margin-bottom: 5px; }
.pollen-brief:hover { box-shadow: 0 28px 55px rgba(91,74,63,.13); }
.brief-a { right: 12vw; top: 20vh; --rot: 4deg; }
.brief-b { left: 15vw; top: 44vh; --rot: -6deg; }
.brief-c { right: 21vw; bottom: 18vh; --rot: -1deg; }
.brief-d { left: 43vw; top: 57vh; --rot: 5deg; }

.pollen-cloud::before, .pollen-cloud::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--apricot-sun) 0 2px, transparent 3px), radial-gradient(circle, var(--ume-petal) 0 1.5px, transparent 2.5px), radial-gradient(circle, var(--young-leaf) 0 1.3px, transparent 2.4px);
  background-size: 91px 73px, 127px 109px, 63px 97px;
  opacity: .42;
  animation: pollenFloat 18s linear infinite;
}
.pollen-cloud::after { animation-duration: 25s; animation-direction: reverse; opacity: .24; }
@keyframes pollenFloat { to { transform: translate3d(80px,-70px,0); } }

.vertical-title {
  writing-mode: vertical-rl;
  position: absolute;
  right: 6vw;
  top: 10vh;
  max-height: 78vh;
  font-size: clamp(52px, 8vw, 118px);
}
.station-note { margin-left: 10vw; margin-top: 5vh; }
.station-rails { background-size: 11vw 100%, 100% 14vh; opacity:.58; }

.timetable {
  position: absolute;
  left: 10vw;
  right: 24vw;
  bottom: 12vh;
  display: grid;
  gap: 12px;
}
.platform-strip {
  display: grid;
  grid-template-columns: 44px 82px 1fr;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  background: linear-gradient(90deg, rgba(191,215,230,.34), rgba(247,241,228,.76));
  border-top: 1px solid rgba(38,56,74,.16);
  border-bottom: 1px solid rgba(38,56,74,.1);
  box-shadow: 12px 14px 30px rgba(91,74,63,.06);
  transform: translateX(var(--strip-shift, -40px));
  opacity: var(--strip-opacity, .72);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s;
}
.platform-strip b, .platform-strip time { font-family: var(--condensed); letter-spacing:.14em; color: var(--wet-bark); }
.platform-strip span { font-size: 18px; }
.station-bell { position:absolute; left:48vw; top:18vh; width:54px; height:54px; border:1px solid rgba(91,74,63,.4); border-radius:50% 50% 42% 42%; opacity:.35; }
.station-bell::after { content:""; position:absolute; left:22px; bottom:-12px; width:10px; height:10px; border-radius:50%; background:var(--wet-bark); }

.washi-panel {
  position: absolute;
  inset: 12vh 9vw 11vh 28vw;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 35px 90px rgba(91,74,63,.12), inset 0 0 90px rgba(191,215,230,.13);
  transform: rotate(-1.4deg);
}
.correction-stack { position:absolute; right:10vw; top:28vh; width:min(560px, 48vw); display:grid; gap:24px; }
.petal-correction {
  position: relative;
  padding: 28px 30px 28px 74px;
  background: rgba(247,241,228,.72);
  clip-path: polygon(5% 0, 100% 4%, 95% 88%, 55% 100%, 0 91%);
  box-shadow: 0 26px 48px rgba(91,74,63,.1);
  transition: transform .45s ease;
}
.petal-correction:hover { transform: translateY(-7px) rotate(.5deg); }
.petal-correction.second { margin-left: 70px; }
.proof-mark { position:absolute; left:25px; top:24px; color:var(--ume-petal); font-family:var(--mincho); font-size:34px; }
.petal-correction h3 { margin:0 0 10px; font-family:var(--mincho); font-weight:400; font-size:28px; color:var(--dawn-ink); }
.petal-correction p { margin:0; line-height:1.7; }
.botanical-lines span { position:absolute; width:1px; height:34vh; background:var(--young-leaf); opacity:.35; transform-origin:bottom; }
.botanical-lines span:nth-child(1) { left:16vw; bottom:10vh; transform:rotate(-18deg); }
.botanical-lines span:nth-child(2) { left:19vw; bottom:12vh; transform:rotate(10deg); background:var(--ume-petal); }
.botanical-lines span:nth-child(3) { left:22vw; bottom:8vh; transform:rotate(24deg); }
.botanical-lines span:nth-child(4) { left:25vw; bottom:14vh; transform:rotate(-5deg); background:var(--apricot-sun); }

.fold-stack { position:absolute; left:12vw; bottom:14vh; width:min(690px, 62vw); height:420px; }
.folded-page {
  position:absolute;
  inset:auto 0 0 0;
  height:250px;
  padding:32px;
  background: rgba(247,241,228,.76);
  border: 1px solid rgba(91,74,63,.13);
  box-shadow: 0 34px 80px rgba(91,74,63,.16);
  transform-origin: left bottom;
  transition: transform .65s cubic-bezier(.2,.8,.2,1);
}
.folded-page::before { content:""; position:absolute; inset:0 0 auto; height:50%; background:linear-gradient(180deg, rgba(191,215,230,.18), transparent); clip-path:polygon(0 0,100% 0,94% 100%,0 72%); }
.folded-page span { font-family:var(--condensed); letter-spacing:.2em; text-transform:uppercase; color:var(--wet-bark); }
.folded-page b { position:absolute; right:30px; bottom:26px; font-family:var(--mincho); font-weight:400; font-size:54px; color:rgba(38,56,74,.34); }
.page-one { transform: rotate(-4deg) translateY(-84px); }
.page-two { transform: rotate(3deg) translate(30px,-38px); background:rgba(191,215,230,.3); }
.page-three { transform: rotate(-1deg) translate(68px,24px); background:rgba(247,198,106,.24); }
.fold-stack:hover .page-one { transform: rotate(-7deg) translateY(-115px); }
.fold-stack:hover .page-two { transform: rotate(5deg) translate(42px,-62px); }
.fold-stack:hover .page-three { transform: rotate(0deg) translate(82px,9px); }
.closing-line { position:absolute; right:11vw; top:36vh; }

.cursor-dew {
  position: fixed;
  width: 90px;
  height: 90px;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(191,215,230,.45);
  background: radial-gradient(circle at 35% 32%, rgba(255,255,255,.55), rgba(191,215,230,.16) 42%, transparent 70%);
  transform: translate(-50%, -50%) scale(var(--dew-scale, .45));
  opacity: var(--dew-opacity, 0);
  transition: opacity .25s, transform .25s;
  mix-blend-mode: screen;
}

@media (max-width: 760px) {
  .weather-strip { left: 12px; right: 12px; justify-content: space-between; gap: 6px; font-size: 10px; }
  .morning-sheet { padding: 82px 22px 34px; position: relative; }
  .masthead { font-size: 112px; top: 8vh; left: -18px; }
  .date-seal { right: 24px; top: 28vh; }
  .chapter-caption, .chapter-caption.narrow, .station-note { margin-left: 0; }
  .pollen-brief { width: 72vw; }
  .brief-a, .brief-b, .brief-c, .brief-d { left: 12vw; right: auto; }
  .brief-a { top: 29vh; } .brief-b { top: 45vh; } .brief-c { top: 61vh; } .brief-d { top: 77vh; }
  .vertical-title { writing-mode: horizontal-tb; position: relative; right: auto; top: auto; }
  .timetable { left: 22px; right: 22px; bottom: 8vh; }
  .platform-strip { grid-template-columns: 30px 58px 1fr; padding: 0 10px; }
  .platform-strip span { font-size: 14px; }
  .correction-stack { position: relative; right: auto; top: auto; width: 100%; margin-top: 7vh; }
  .petal-correction.second { margin-left: 0; }
  .fold-stack { left: 5vw; width: 86vw; }
  .closing-line { right: 24px; top: 28vh; width: 72vw; }
}