/* =========================================================
   听风录 · Kaedehara Kazuha fan scroll
   ========================================================= */

:root{
  --paper:      #efe7d8;
  --paper-2:    #e6dcc9;
  --paper-3:    #d9ccb4;
  --ink:        #1d1915;
  --ink-soft:   #4a4137;
  --ink-faint:  #8b7f6d;
  --vermilion:  #b23a2b;
  --ember:      #d0552c;
  --gold:       #a88449;
  --jade:       #4c7a70;
  --night:      #12181b;
  --night-2:    #1a2327;
  --moon:       #cfe0dd;

  --serif: "Noto Serif SC", serif;
  --disp:  "ZCOOL XiaoWei", "Noto Serif SC", serif;
  --brush: "Ma Shan Zheng", "ZCOOL XiaoWei", serif;
  --latin: "Cormorant Garamond", "Noto Serif SC", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --gut: clamp(20px, 6vw, 120px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(15px, 1.02vw, 17px);
  line-height:1.95;
  text-wrap:pretty;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--vermilion);color:var(--paper)}

img{max-width:100%;display:block}
a{color:inherit}
em{font-style:normal}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.6em 1em;
}
.skip-link:focus{left:12px;top:12px}

.svg-defs{position:absolute}

/* ---------- paper grain + vignette ---------- */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,95,60,.10) 0 1px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(120,95,60,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, rgba(120,95,60,.07) 0 1px, transparent 1.4px);
  background-size:7px 7px, 11px 11px, 5px 5px;
}
.grain::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(70,52,32,.16) 100%);
}

/* ---------- falling leaves canvas ---------- */
#leaf-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:60;
  transition:filter .8s ease;
}

#gust-layer{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:62;
}

/* ---------- spine progress ---------- */
.spine{
  position:fixed;left:clamp(10px,1.6vw,26px);top:16vh;bottom:16vh;
  width:18px;z-index:80;pointer-events:none;
  opacity:.85;
}
.spine-line{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom, transparent, rgba(80,60,40,.28) 12%, rgba(80,60,40,.28) 88%, transparent);
  transform:translateX(-.5px);
}
.spine-fill{
  position:absolute;left:0;top:0;width:1px;height:0;
  background:linear-gradient(to bottom, var(--vermilion), var(--ember));
}
.spine-leaf{
  position:absolute;left:50%;top:0;width:18px;height:18px;
  transform:translate(-50%,-50%);
  color:var(--vermilion);
  filter:drop-shadow(0 2px 3px rgba(120,40,20,.25));
}
.spine-leaf svg{width:100%;height:100%;display:block;transform:rotate(18deg)}

/* ---------- side rail ---------- */
.rail{
  position:fixed;right:clamp(12px,2.2vw,34px);top:50%;z-index:80;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:16px;
  align-items:flex-end;
  font-size:11px;letter-spacing:.24em;
}
.rail-dot{
  display:flex;align-items:center;gap:8px;
  color:var(--ink-faint);cursor:pointer;
  transition:color .4s var(--ease);
}
.rail-dot::before{
  content:"";width:14px;height:1px;background:currentColor;
  transition:width .45s var(--ease);
}
.rail-dot em{
  font-style:normal;opacity:0;transform:translateX(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  white-space:nowrap;
}
.rail-dot:hover em,.rail-dot.is-on em{opacity:1;transform:none}
.rail-dot:hover,.rail-dot.is-on{color:var(--vermilion)}
.rail-dot.is-on::before{width:26px}
.rail.is-dark .rail-dot{color:rgba(220,230,228,.42)}
.rail.is-dark .rail-dot.is-on,.rail.is-dark .rail-dot:hover{color:#e5a58f}
body.dark-mode .spine-line{background:linear-gradient(to bottom, transparent, rgba(210,225,222,.22) 12%, rgba(210,225,222,.22) 88%, transparent)}

/* ---------- sound toggle ---------- */
.sound{
  position:fixed;left:clamp(52px,5.4vw,86px);bottom:24px;
  z-index:85;display:flex;align-items:center;gap:10px;
  padding:9px 18px 9px 14px;
  background:rgba(239,231,216,.72);
  border:1px solid rgba(80,60,40,.18);
  border-radius:40px;
  backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  color:var(--ink-soft);
  font-family:var(--serif);font-size:11.5px;letter-spacing:.3em;
  cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.sound:hover{background:rgba(252,247,238,.9);color:var(--ink)}
.sound-bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.sound-bars i{
  display:block;width:2px;height:3px;background:var(--ink-faint);border-radius:2px;
  transition:background .3s;
}
.sound[aria-pressed="true"] .sound-bars i{background:var(--vermilion);animation:bar 1.1s ease-in-out infinite}
.sound[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:.15s}
.sound[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:.32s}
.sound[aria-pressed="true"] .sound-bars i:nth-child(4){animation-delay:.08s}
@keyframes bar{0%,100%{height:3px}50%{height:11px}}

/* =========================================================
   Ink title (drawn from code)
   ========================================================= */
.ink-title{position:relative}
.ink-title svg{display:block;overflow:visible}
.ink-title path.trace{
  fill:none;
  stroke:var(--ink);
  stroke-width:3.5;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.5;
  filter:blur(.3px);
}
.ink-title path.fill{filter:url(#ink-bleed);}
.ink-title path.fill{
  fill:var(--ink);
  stroke:none;
}
.ink-title.on-dark path.trace{stroke:var(--moon)}
.ink-title.on-dark path.fill{fill:var(--moon)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height:100svh;
  min-height:640px;
  padding:0 var(--gut);
  display:flex;align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-sun{
  position:absolute;
  width:min(62vw,760px);aspect-ratio:1;border-radius:50%;
  left:34%;top:44%;transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 42% 38%, #f7d9a8 0%, #eabf80 32%, #dc9f63 58%, rgba(220,159,99,0) 71%);
  filter:blur(2px);
  opacity:.92;
  z-index:-2;
  animation:sunBreath 14s ease-in-out infinite;
}
@keyframes sunBreath{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.03)}}

.hero-rings{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-rings i{
  position:absolute;left:34%;top:44%;width:min(78vw,940px);aspect-ratio:1;
  border:1px solid rgba(178,58,43,.16);border-radius:50%;
  transform:translate(-50%,-50%);
}
.hero-rings i:nth-child(2){width:min(92vw,1120px);border-color:rgba(178,58,43,.09)}
.hero-rings i:nth-child(3){width:min(110vw,1340px);border-color:rgba(178,58,43,.05)}

.hero-mist{
  position:absolute;inset:-10% -20%;z-index:-1;
  background:
    radial-gradient(ellipse 46% 30% at 50% 88%, rgba(239,231,216,.95), transparent 70%),
    radial-gradient(ellipse 30% 22% at 20% 78%, rgba(239,231,216,.9), transparent 70%),
    radial-gradient(ellipse 30% 22% at 82% 82%, rgba(239,231,216,.9), transparent 70%);
}

.hero-meta{
  position:absolute;top:clamp(22px,4vh,44px);left:var(--gut);right:var(--gut);
  display:flex;gap:14px;justify-content:flex-end;
  font-size:11px;letter-spacing:.34em;color:var(--ink-soft);
  z-index:3;
  mix-blend-mode:multiply;
}
.hero-meta .dot{opacity:.45}

.hero-figure{
  position:absolute;
  right:-3vw;
  bottom:0;
  height:94%;
  aspect-ratio:2073/1519;
  width:auto;
  min-width:0;
  max-width:calc(100% + 3vw);
  z-index:1;
  will-change:transform;
}
.hero-figure .fig-char{
  position:absolute;
  left:34.7%;
  bottom:10.9%;
  height:88%;
  width:auto;
}
.hero-figure img{display:block}
.fig-char{
  position:relative;z-index:2;
  height:100%;width:auto;max-width:none;
  filter:drop-shadow(0 22px 34px rgba(90,50,30,.16));
  animation:figIn 1.6s var(--ease-out) both;
  animation-delay:.25s;
  will-change:transform;
}
.fig-ribbons{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:contain;
  opacity:.9;
  animation:ribbonDrift 26s ease-in-out infinite;
  will-change:transform;
  transform-origin:60% 50%;
}










@keyframes figIn{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(14px) drop-shadow(0 26px 40px rgba(90,50,30,.18))}to{opacity:1;transform:none}}
@keyframes ribbonDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10px,-8px,0) scale(1.012)}}

.hero-copy{
  position:relative;z-index:4;
  padding-top:2vh;
  width:min(40vw,470px);
  max-height:92svh;
  display:flex;flex-direction:column;align-items:flex-start;
}
.eyebrow{
  font-family:var(--latin);font-size:clamp(12px,.9vw,15px);
  letter-spacing:.22em;
  color:var(--ink-faint);margin:0 0 22px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
  opacity:0;animation:rise 1s var(--ease) 1.15s forwards;
}
.eyebrow em{
  font-family:var(--serif);font-size:11px;letter-spacing:.3em;
  color:var(--vermilion);text-transform:none;
}
.ink-title[data-glyphs="枫原万叶"]{
  width:auto;
  height:clamp(300px,42vh,400px);
  margin:-6vh 0 14px;
  margin-left:-.04em;
}
.ink-title[data-glyphs="枫原万叶"] svg{height:100%;width:auto}
.hero-tag{
  font-family:var(--brush);
  font-size:clamp(26px,2.6vw,42px);
  letter-spacing:.18em;
  margin:0 0 18px;color:var(--vermilion);
  line-height:1.2;
  text-shadow:0 1px 0 rgba(255,250,240,.5);
  opacity:0;animation:rise .9s var(--ease) .95s forwards;
}
.hero-line{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(12.5px,.92vw,15px);
  letter-spacing:.14em;color:var(--ink-soft);
  margin:0;
  padding-top:16px;
  border-top:1px solid rgba(80,60,40,.2);
  max-width:24em;
  position:relative;
  opacity:0;animation:rise 1s var(--ease) 1.25s forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-seal{
  position:absolute;
  left:var(--gut);bottom:11vh;
  writing-mode:vertical-rl;
  display:flex;gap:2px;
  font-family:var(--brush);font-size:16px;
  color:#f6ede0;
  background:var(--vermilion);
  padding:9px 5px;
  letter-spacing:.1em;
  border-radius:2px;
  box-shadow:inset 0 0 0 2px rgba(255,240,225,.25);
  opacity:0;animation:rise 1s var(--ease) 1.6s forwards;
  z-index:5;
}

.scroll-cue{
  position:absolute;right:clamp(40px,5vw,84px);bottom:9vh;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.42em;color:var(--ink-faint);
  text-decoration:none;z-index:6;
  writing-mode:vertical-rl;
}
.cue-line{width:1px;height:72px;background:linear-gradient(to bottom,rgba(80,60,40,.05),rgba(80,60,40,.5));position:relative;overflow:hidden}
.cue-line::after{
  content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;
  background:var(--vermilion);animation:cueRun 2.4s var(--ease) infinite;
}
@keyframes cueRun{0%{top:-40%}70%,100%{top:110%}}

/* =========================================================
   LETTER
   ========================================================= */
.section-mark{
  position:absolute;
  top:clamp(40px,10vh,110px);
  left:var(--gut);
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.42em;color:var(--ink-faint);
}
.section-mark::after{content:"";width:clamp(30px,8vw,120px);height:1px;background:currentColor;opacity:.4}

.letter{
  position:relative;
  padding:clamp(90px,15vh,160px) var(--gut) clamp(70px,12vh,130px);
  background:
    linear-gradient(to bottom, var(--paper), var(--paper-2) 40%, var(--paper));
}
.letter-inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  min-height:min(72vh,660px);
  gap:clamp(30px,6vw,100px);
  max-width:1240px;margin:0 auto;
  align-items:start;
}
.letter-head{
  position:relative;
  align-self:stretch;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:6px;
}
.letter-title{
  position:absolute;left:-.04em;top:clamp(0px,2vh,24px);
  height:clamp(110px,13vw,190px);
  margin:0;
}
.letter-title svg{height:100%;width:auto}
.kicker{
  font-size:11px;letter-spacing:.36em;color:var(--vermilion);
  margin:0 0 18px;
}
.handwritten{
  font-family:var(--brush);
  font-weight:400;
  font-size:clamp(56px,7vw,108px);
  line-height:1;
  margin:0 0 18px;
  letter-spacing:.04em;
  color:var(--ink);
}
.latin{
  font-family:var(--latin);
  font-style:italic;
  font-size:clamp(15px,1.3vw,20px);
  letter-spacing:.06em;
  color:var(--ink-faint);
  margin:0;
}
.vertical-letter{
  writing-mode:vertical-rl;
  text-orientation:upright;
  height:min(66vh,600px);
  justify-self:end;
  margin-right:clamp(30px,4vw,64px) !important;
  font-size:clamp(14px,1.05vw,16.5px);
  line-height:2.15;
  letter-spacing:.16em;
  color:var(--ink-soft);
  display:flex;
  flex-direction:row-reverse;
  flex-wrap:wrap;
  gap:0 1.5em;
  align-content:flex-start;
  margin-top:clamp(10px,3vh,40px);
}
.vertical-letter p{margin:0 0 0 .9em;max-height:100%}
.vertical-letter .letter-poem{
  color:var(--vermilion);font-size:1.45em;letter-spacing:.2em;
  font-family:var(--brush);
  margin-left:.4em;
  padding-top:0;
}
.letter-sign{
  font-family:var(--brush);
  font-size:1.35em;
  letter-spacing:.2em;
  color:var(--vermilion);
  margin-top:1.2em;
}
.margin-note{
  position:absolute;left:0;top:clamp(240px,34vh,360px);
  writing-mode:horizontal-tb;
  font-size:11.5px;letter-spacing:.24em;color:var(--ink-faint);
  display:flex;flex-direction:column;gap:.7em;
  padding-left:14px;border-left:1px solid rgba(178,58,43,.35);
  opacity:.9;
  max-width:20em;
}
.hairline{
  height:1px;max-width:1240px;margin:clamp(60px,10vh,120px) auto 0;
  background:linear-gradient(to right,transparent,rgba(80,60,40,.22) 20%,rgba(80,60,40,.22) 80%,transparent);
}

/* =========================================================
   ORIGIN
   ========================================================= */
.origin{
  position:relative;
  padding:clamp(90px,14vh,150px) var(--gut) clamp(70px,12vh,140px);
}
.origin-wrap{max-width:1240px;margin:0 auto}
.origin-head{margin:0 0 clamp(30px,6vh,70px);padding-left:clamp(0px,8vw,120px)}
.origin-title,.poem-title{height:clamp(76px,8.4vw,124px);margin:0 0 12px}
.origin-title svg,.poem-title svg,.voice-title svg,.end-final svg{height:100%;width:auto}
.voice-title{height:clamp(92px,8.6vw,128px);margin:0 0 16px}
.big-serif{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(40px,5.4vw,78px);
  letter-spacing:.22em;
  line-height:1.2;
  margin:0 0 14px;
}
.timeline{
  list-style:none;margin:0;padding:0;
  position:relative;
}
.timeline::before{
  content:"";position:absolute;left:clamp(0px,4vw,60px);top:6px;bottom:6px;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(80,60,40,.25) 6%,rgba(80,60,40,.25) 94%,transparent);
}
.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:clamp(70px,14vw,200px) minmax(0,1fr);
  gap:clamp(14px,3vw,44px);
  padding:clamp(18px,3.4vh,34px) 0 clamp(18px,3.4vh,34px) clamp(0px,4vw,60px);
  border-bottom:1px solid rgba(80,60,40,.12);
}
.tl-item:last-child{border-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:calc(clamp(0px,4vw,60px) - 3px);top:calc(clamp(18px,3.4vh,34px) + 12px);
  width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1px solid var(--vermilion);
  transition:background .5s, transform .5s;
}
.tl-item.is-on::before{background:var(--vermilion);transform:scale(1.35)}
.tl-year{
  font-family:var(--latin);font-style:italic;
  font-size:clamp(15px,1.4vw,21px);
  color:var(--vermilion);letter-spacing:.1em;
  padding-top:.2em;
}
.tl-body h3{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(24px,2.6vw,38px);
  letter-spacing:.14em;margin:0 0 10px;
}
.tl-body p{
  margin:0;max-width:40ch;
  color:var(--ink-soft);
  text-wrap:pretty;
  font-size:clamp(14px,.98vw,16px);
  letter-spacing:.04em;
}
.origin-foot{
  max-width:34em;
  margin:clamp(50px,9vh,100px) 0 0 auto;
  font-family:var(--brush);
  font-size:clamp(21px,2.3vw,34px);
  line-height:1.85;
  letter-spacing:.06em;
  color:var(--ink);
  text-align:right;
}
.origin-foot em{color:var(--vermilion)}


/* =========================================================
   BLADE (night chapter)
   ========================================================= */
.blade{
  position:relative;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, #24343a 0%, transparent 62%),
    radial-gradient(ellipse 60% 40% at 80% 40%, rgba(60,90,95,.22), transparent 70%),
    linear-gradient(to bottom, var(--night), #0d1315 50%, #101a1d 100%);
  color:var(--moon);
  overflow:hidden;
  isolation:isolate;
}
.rain{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:repeating-linear-gradient(104deg, transparent 0 14px, rgba(200,225,225,.10) 14px 15px, transparent 15px 44px);
  background-size:auto 260px;
  animation:rainFall 1.1s linear infinite;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.35) 55%, transparent 82%);
}
@keyframes rainFall{to{background-position:-26px 260px}}
.lightning{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 50% at 62% 12%, rgba(200,225,240,.5), transparent 62%);
  opacity:0;
  mix-blend-mode:screen;
}
.blade-glow{
  position:absolute;left:12%;top:20%;width:76%;height:1.5px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(160,240,235,.0) 10%,rgba(160,240,235,.85) 45%,rgba(200,255,250,.95) 55%,rgba(160,240,235,.0) 92%,transparent);
  filter:blur(.4px);
  transform-origin:left center;
  transform:rotate(-14deg) scaleX(0);
  box-shadow:0 0 18px 2px rgba(120,230,220,.35);
  animation:slash 7.4s var(--ease-out) infinite;
}
@keyframes slash{
  0%,62%{transform:rotate(-14deg) scaleX(0);opacity:0}
  64%{opacity:1}
  68%{transform:rotate(-14deg) scaleX(1);opacity:1}
  80%{transform:rotate(-14deg) scaleX(1);opacity:.0}
  100%{transform:rotate(-14deg) scaleX(1);opacity:0}
}
.blade-inner{
  position:relative;z-index:3;
  max-width:1100px;margin:0 auto;
  padding:clamp(70px,12vh,140px) var(--gut) clamp(70px,10vh,130px);
}
.blade-kicker{
  font-size:11px;letter-spacing:.42em;color:#7fa39d;
  margin:0 0 clamp(18px,4vh,40px);
}
.ink-title[data-glyphs="一刀"]{
  position:absolute;
  right:var(--gut);
  top:clamp(60px,12vh,130px);
  height:clamp(180px,26vh,260px);
  width:auto;
  margin:0;
  opacity:.42;
}
.ink-title[data-glyphs="一刀"] svg{height:100%;width:auto}
.blade-text{
  max-width:30em;
  font-size:clamp(15px,1.06vw,17.5px);
  line-height:2.15;
  color:#cdd9d6;
  letter-spacing:.07em;
  orphans:2;widows:2;
}
.blade-text p{margin:0 0 1.1em}
.blade-lead{
  font-family:var(--disp);font-size:1.5em;letter-spacing:.14em;
  color:#e6f0ee;
}
.blade-poem{
  margin:clamp(36px,6vh,70px) 0 0 auto;
  padding:0;max-width:min(38em,80%);
  writing-mode:vertical-rl;
  height:clamp(220px,34vh,340px);
  font-family:var(--brush);
  font-size:clamp(19px,1.9vw,28px);
  line-height:2.1;letter-spacing:.14em;
  color:#e7cfb4;
  display:flex;flex-direction:row-reverse;justify-content:flex-start;
  gap:0;
}
.blade-poem p{margin:0 0 0 .9em}
.blade-note{
  position:absolute;left:var(--gut);bottom:clamp(30px,6vh,70px);
  writing-mode:vertical-rl;
  font-size:11px;letter-spacing:.4em;color:#7c9893;
  margin:0;
}
body.is-blade .rail.is-dark .rail-dot{color:rgba(220,230,228,.4)}

/* =========================================================
   WIND (interactive)
   ========================================================= */
.wind{
  position:relative;
  padding:clamp(80px,12vh,130px) var(--gut) clamp(60px,10vh,110px);
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, #f6efe2 0%, transparent 70%),
    linear-gradient(to bottom,var(--paper), #e9dfcc);
  overflow:hidden;
  display:flex;align-items:center;
}
#vortex{position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:pan-y}
.wind-inner{
  position:relative;z-index:2;
  width:100%;max-width:1240px;margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,6vw,96px);
  align-items:center;
  pointer-events:none;
}
.wind-inner > *{pointer-events:auto}
.wind-main{display:flex;flex-direction:column;gap:clamp(18px,3vh,34px)}
.wind-title{display:flex;align-items:flex-end;gap:clamp(16px,2vw,28px)}
.wind-title .ink-title{width:auto;height:clamp(180px,25vh,260px);margin:0}
.wind-title .ink-title svg{height:100%;width:auto}
.wind-title-side{display:flex;flex-direction:column;gap:6px;padding-bottom:6px}
.wind-title-side .latin{letter-spacing:.24em}
.wind-title-side .kicker{margin:0}
.wind-copy{max-width:30em}
.wind-lead{
  font-family:var(--disp);
  font-size:clamp(20px,2.1vw,30px);
  line-height:1.9;letter-spacing:.08em;
  margin:0 0 1.1em;
}
.wind-copy p{color:var(--ink-soft);margin:0 0 1em;letter-spacing:.05em}
.wind-hint{
  display:flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:.3em;color:var(--ink-faint);
  margin-top:2.2em !important;
}
.hint-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--vermilion);
  box-shadow:0 0 0 0 rgba(178,58,43,.5);
  animation:pulse 2.2s var(--ease) infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(178,58,43,.45)}70%{box-shadow:0 0 0 12px rgba(178,58,43,0)}100%{box-shadow:0 0 0 0 rgba(178,58,43,0)}}

.wind-btn{
  margin-top:1.4em;
  font-family:var(--serif);
  font-size:12px;letter-spacing:.34em;
  color:var(--ink);
  background:transparent;
  border:1px solid rgba(80,60,40,.35);
  padding:14px 26px 14px 30px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s;
}
.wind-btn span{position:relative;z-index:2}
.wind-btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.wind-btn:hover{color:var(--paper);border-color:var(--ink)}
.wind-btn:hover::before{transform:translateY(0)}
.wind-quote{
  position:absolute;right:clamp(24px,6vw,110px);bottom:clamp(40px,8vh,90px);
  writing-mode:vertical-rl;
  font-family:var(--brush);font-size:clamp(16px,1.4vw,21px);
  letter-spacing:.3em;color:rgba(80,60,40,.3);
  margin:0;z-index:2;pointer-events:none;
}

/* =========================================================
   POEM
   ========================================================= */
.poem{
  position:relative;
  padding:clamp(100px,15vh,160px) var(--gut) clamp(60px,10vh,110px);
}
.poem-wrap{max-width:1300px;margin:0 auto}
.poem-head{margin:0 0 clamp(34px,6vh,64px);padding-left:clamp(0px,8vw,120px)}












/* =========================================================
   VOICE
   ========================================================= */
.voice{
  position:relative;
  padding:clamp(80px,13vh,150px) var(--gut) clamp(70px,12vh,140px);
  background:linear-gradient(to bottom,var(--paper-2), #e4d8c2);
}
.voice-head{max-width:1240px;margin:0 auto clamp(30px,6vh,70px);padding-left:clamp(0px,8vw,120px)}
.tanzaku{
  list-style:none;margin:0 auto;padding:0;
  max-width:1240px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(12px,2vw,26px);
}
.tz{
  position:relative;
  flex:0 0 auto;
  width:clamp(120px,11vw,164px);
  padding:clamp(20px,3vw,34px) clamp(14px,1.8vw,24px) clamp(26px,4vw,46px);
  background:linear-gradient(to bottom, #fbf6ec, #f0e7d6);
  box-shadow:0 14px 30px -22px rgba(80,55,25,.55), inset 0 0 0 1px rgba(80,60,40,.08);
  writing-mode:vertical-rl;
  height:clamp(212px,27vh,268px);
  transform-origin:50% 0;
  transition:transform .7s var(--ease-out), box-shadow .7s;
}
.tz:nth-child(2n){margin-top:clamp(20px,5vh,60px)}
.tz:nth-child(3n){margin-top:clamp(8px,2vh,26px)}
.tz:hover{transform:translateY(-4px) rotate(.4deg);box-shadow:0 26px 50px -28px rgba(80,55,25,.6), inset 0 0 0 1px rgba(178,58,43,.16)}
.tz p{
  margin:0;
  font-family:var(--brush);
  font-weight:400;
  font-size:clamp(14px,1.15vw,17px);
  line-height:2.0;letter-spacing:.08em;
  color:var(--ink);
}
.tz-no{
  display:block;
  font-family:var(--latin);font-style:italic;
  font-size:12px;letter-spacing:.2em;
  color:var(--vermilion);
  margin-left:14px;
}
.tz::after{
  content:"";position:absolute;left:50%;top:-1px;width:1px;height:clamp(16px,3vh,30px);
  background:rgba(80,60,40,.25);
}

/* =========================================================
   END
   ========================================================= */
.end{
  position:relative;
  background:
    radial-gradient(ellipse 50% 40% at 30% 22%, #24343a 0%, transparent 62%),
    linear-gradient(to bottom, var(--night), #0b1113 70%, #080c0e);
  color:var(--moon);
  padding:clamp(80px,13vh,150px) var(--gut) clamp(30px,5vh,50px);
  overflow:hidden;
  isolation:isolate;
}
.end-moon{
  position:absolute;right:16%;top:12%;
  width:clamp(120px,16vw,240px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f3f7f2, #cfdedb 45%, #9fb6b2 62%, rgba(159,182,178,0) 70%);
  opacity:.9;
  filter:blur(.4px);
  animation:moonUp 3s var(--ease-out) both;
}
@keyframes moonUp{from{opacity:0;transform:translateY(18px)}to{opacity:.9;transform:none}}
.end-figure{
  position:absolute;right:6%;bottom:0;width:min(38vw,420px);height:78%;
  background:url('../img/kazuha-full.webp') bottom right/contain no-repeat;
  opacity:.14;
  filter:grayscale(1) brightness(1.6) contrast(.9);
  mix-blend-mode:screen;
  pointer-events:none;
}
.end-inner{
  position:relative;z-index:2;
  max-width:1100px;margin:0 auto;
}
.end-kicker{
  font-size:11px;letter-spacing:.46em;color:#7fa39d;margin:0 0 clamp(24px,5vh,50px);
}
.end-copy{
  font-family:var(--disp);
  font-size:clamp(18px,1.9vw,27px);
  line-height:2.05;letter-spacing:.1em;
  color:#dbe6e3;
  max-width:22em;
  margin:0 0 clamp(30px,5vh,56px);
}
.end-signature{display:flex;align-items:center;gap:clamp(18px,3vw,34px);margin-bottom:clamp(36px,6vh,70px)}
.seal{
  width:clamp(76px,8vw,110px);height:clamp(76px,8vw,110px);
  color:var(--vermilion);
  animation:sealIn 1.1s var(--ease-out) both;
}
@keyframes sealIn{from{opacity:0;transform:rotate(-8deg) scale(.86)}to{opacity:.95;transform:none}}
.end-meta p{margin:0;font-family:var(--disp);letter-spacing:.24em;font-size:clamp(15px,1.4vw,19px);color:#dfe9e6}
.end-meta .latin{font-family:var(--latin);font-style:italic;letter-spacing:.1em;color:#89a8a3;font-size:clamp(13px,1.1vw,16px);margin:.3em 0}
.end-date{font-size:11.5px !important;letter-spacing:.34em !important;color:#6e8c88 !important;margin-top:.7em !important}
.end-final{height:clamp(130px,15vw,210px);margin:0}
.end-final.ink-title path.fill{fill:#e9ded0}
.end-final.ink-title path.trace{stroke:#e7b49a}
.colophon{
  position:relative;z-index:2;
  max-width:1100px;margin:clamp(70px,12vh,130px) auto 0;
  padding-top:22px;
  border-top:1px solid rgba(190,215,210,.14);
  font-size:10.5px;letter-spacing:.22em;color:#5d7a76;
  line-height:2.1;
}
.colophon p{margin:0}


/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1020px){
  .hero-figure{height:80%;right:-16vw;opacity:.94}

  .hero-copy{width:min(46vw,420px);padding-top:0}
  .hero{min-height:100svh;align-items:center}
  .ink-title[data-glyphs="枫原万叶"]{height:clamp(260px,40vh,360px)}
  .hero-seal{display:none}
  .letter-inner{grid-template-columns:1fr}
  .letter-head{position:static;margin-bottom:10px}
  .vertical-letter{height:clamp(320px,62vh,560px);font-size:14.5px;line-height:2}
  .margin-note{position:static;margin-top:10px;padding-left:12px}
  .letter-head{display:block;margin-bottom:6px}
  .letter-title{position:relative;top:0;left:0;height:96px}
  .letter-head .latin{margin:6px 0 4px}
  .letter-head .kicker{margin-bottom:8px}
  .origin-foot{text-align:left;margin-left:0}
  .wind-inner{grid-template-columns:1fr}
  .wind-copy{justify-self:start}
  .blade-poem{max-width:100%}
  .rail{display:none}
  .spine{left:8px;opacity:.6}
}
@media (max-width:620px){
  :root{--gut:20px}
  .hero{
    height:100svh;min-height:620px;padding:0 var(--gut);
    display:block;overflow:hidden;
  }
  .hero-meta{
    position:absolute;top:20px;left:var(--gut);right:var(--gut);
    justify-content:flex-start;flex-wrap:wrap;
    font-size:9.5px;letter-spacing:.2em;gap:8px;
  }
  .hero-sun{width:130vw;left:46%;top:34%;opacity:.8}
  .hero-figure{
    position:absolute;right:-26vw;bottom:27svh;
    height:58svh;width:auto;margin:0;opacity:.97;
    aspect-ratio:2073/1519;
  }

  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:46svh;z-index:3;
    background:linear-gradient(to top, var(--paper) 42%, rgba(239,231,216,.85) 66%, rgba(239,231,216,0));
    pointer-events:none;
  }
  .hero-copy{
    position:absolute;left:var(--gut);right:var(--gut);bottom:7svh;
    width:auto;max-width:none;padding:0;z-index:6;
  }
  .ink-title[data-glyphs="枫原万叶"]{height:clamp(150px,21svh,196px);margin:0 0 4px;margin-left:-4px}
  .hero-tag{font-size:clamp(22px,6.4vw,27px);letter-spacing:.1em;margin:0 0 8px;white-space:nowrap}
  .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:8px;gap:6px}
  .hero-line{font-size:11.5px;letter-spacing:.04em;padding-top:8px;max-width:100%;border-top-color:rgba(80,60,40,.16)}
  .hero-seal{display:none}
  .scroll-cue{right:14px;bottom:18px}
  .cue-line{height:34px}
  .sound{left:14px;bottom:12px;font-size:9.5px;padding:7px 13px 7px 10px}
  .section-mark{top:32px;font-size:9.5px;letter-spacing:.3em}
  .timeline::before{left:0}
  .tl-item{grid-template-columns:1fr;gap:4px;padding-left:22px}
  .tl-item::before{left:-3px;top:calc(clamp(18px,3.4vh,34px) + 10px)}
  .origin-foot{font-size:20px}
  .blade-poem{height:auto;min-height:300px}


  .tanzaku{gap:10px}
  .tz{
    writing-mode:vertical-rl;width:calc(50% - 5px);max-height:none;
    height:clamp(200px,34vh,270px);
    padding:14px 8px 18px;overflow:visible;
  }
  .tz p{font-size:13px;line-height:1.85;letter-spacing:.08em}
  .tz:nth-child(2n),.tz:nth-child(3n){margin-top:0}
  .tz:nth-child(2n){margin-top:18px}
  .end-figure{opacity:.08;width:70vw}
  .end-copy{font-size:18px}
  .end-final{font-size:38px}
  .vertical-letter{height:auto;max-height:none;writing-mode:horizontal-tb;font-size:14px;line-height:2.1;letter-spacing:.1em}
  .vertical-letter p{margin:0 0 1em;text-indent:2em}
  .vertical-letter .letter-poem{text-indent:0;margin:0 0 1em;font-size:1.4em}
  .letter-sign{text-align:right;margin-top:1.4em}
  .letter-inner{gap:20px}
  .tl-year{font-size:14px}
  .journey-scroll{display:none}
  .journey-text{font-size:17px}
  .skill-window{grid-template-columns:1fr;margin-top:34px;gap:14px}
  .skill-frame{max-width:100%;transform:rotate(-.4deg)}
  .skill-window figcaption{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
  .skill-window .cap-no{font-size:24px;margin:0}
  .skill-window figcaption em{font-size:15px}
  .ink-title[data-glyphs="一刀"]{height:150px;top:44px;right:20px}
  .blade{padding-top:20px}
  .blade-inner{padding-top:70px}
  .wind{padding-top:110px;padding-bottom:54px}
  .wind .section-mark{top:64px}
  .wind-title .ink-title{width:auto;height:132px;margin-left:-2px}
  .wind-title .ink-title svg{height:100%;width:auto}
  .wind-title-side .latin{font-size:13px;letter-spacing:.18em}
  .origin-title,.poem-title{height:64px}
  .voice-title{height:80px}
  .end-final{height:110px}
  .wind-copy{padding-bottom:8px}
  .wind-lead{font-size:19px;line-height:1.85}
  .wind-hint{font-size:10px;letter-spacing:.2em;margin-top:1.6em !important}
  .wind-btn{font-size:11px;padding:12px 20px 12px 24px;margin-bottom:10px}
  .wind-quote{display:none}
  .sound{letter-spacing:.18em}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}


/* ---------- skill window (official E capture) ---------- */
.skill-window{
  position:relative;z-index:3;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(14px,2vh,22px);
  pointer-events:none;
}
.skill-frame{
  position:relative;
  width:100%;
  max-width:520px;
  padding:clamp(8px,1.1vw,14px);
  background:
    linear-gradient(150deg,#fbf5e9,#e9dcc5);
  box-shadow:
    0 40px 70px -50px rgba(70,45,20,.75),
    0 2px 0 rgba(255,255,255,.6) inset;
  transform:rotate(-.6deg);
  clip-path:polygon(0 1.5%,4% 0,22% .9%,48% .2%,72% 1.2%,96% 0,100% 2%,99.2% 26%,100% 52%,99% 78%,100% 98%,74% 99.4%,50% 98.6%,26% 99.6%,3% 98.8%,0 97%,.8% 72%,0 48%,.9% 24%);
}
.skill-frame img{
  width:100%;display:block;
  aspect-ratio:560/538;
  object-fit:cover;
  filter:saturate(.86) contrast(1.04) sepia(.12);
  mix-blend-mode:multiply;
  opacity:.94;
}
.skill-grain{
  position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(80,60,40,.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(80,55,25,.22));
  mix-blend-mode:multiply;
}
.skill-corner{
  position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:rgba(178,58,43,.5);border-style:solid;border-width:0;
}
.skill-corner.tl{left:-2px;top:-2px;border-left-width:1px;border-top-width:1px}
.skill-corner.tr{right:-2px;top:-2px;border-right-width:1px;border-top-width:1px}
.skill-corner.bl{left:-2px;bottom:-2px;border-left-width:1px;border-bottom-width:1px}
.skill-corner.br{right:-2px;bottom:-2px;border-right-width:1px;border-bottom-width:1px}
.skill-window figcaption{
  display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  font-size:11px;letter-spacing:.26em;color:var(--ink-faint);
  padding:0;
}
.skill-window .cap-no{
  font-family:var(--latin);font-style:italic;
  font-size:34px;line-height:1;letter-spacing:0;
  color:var(--vermilion);margin-bottom:4px;
}
.skill-window figcaption em{
  font-family:var(--brush);font-style:normal;
  font-size:clamp(16px,1.4vw,21px);letter-spacing:.14em;
  color:var(--ink-soft);
}
@media (max-width:1020px){
  .skill-window{grid-template-columns:1fr;align-items:start}
}


/* ---------- journey full-bleed scene ---------- */
.journey{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.journey-media{position:absolute;inset:-8% 0 -8% 0;z-index:0}
.journey-media img{
  width:100%;height:100%;object-fit:cover;object-position:72% 38%;
  transform:scale(1.06);
  filter:saturate(.92) contrast(1.02);
  will-change:transform;
}
.journey-veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top, rgba(20,12,8,.94) 0%, rgba(22,14,9,.72) 34%, rgba(239,231,216,0) 70%),
    linear-gradient(to right, rgba(20,12,8,.72) 0%, rgba(20,12,8,.35) 38%, transparent 62%);
}
.journey-copy{
  position:relative;z-index:2;
  width:100%;max-width:1240px;margin:0 auto;
  padding:0 var(--gut) clamp(50px,9vh,96px);
  color:#f3e9d9;
}
.journey-kicker{
  font-size:11px;letter-spacing:.5em;color:#e8b7a4;
  margin:0 0 22px;
}
.journey-text{
  font-family:var(--disp);
  font-size:clamp(18px,2vw,29px);
  line-height:2.05;letter-spacing:.1em;
  margin:0 0 26px;
  max-width:24em;
  text-shadow:0 2px 24px rgba(20,12,8,.35);
}
.journey-text em{color:#f0c9a8;font-style:normal}
.journey-meta{
  font-size:10.5px;letter-spacing:.36em;color:rgba(243,233,217,.5);
  margin:0;
}
.journey-scroll{
  position:absolute;right:clamp(30px,5vw,80px);top:50%;z-index:2;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  display:flex;gap:6px;
  font-family:var(--brush);font-size:15px;letter-spacing:.3em;
  color:rgba(243,233,217,.55);
}
.journey-scroll span{
  border-left:1px solid rgba(243,233,217,.22);
  padding-left:6px;
}
@media (max-width:620px){
  .journey-scroll{display:none}
  .journey-text{font-size:17px}
}

.bday{
  display:inline-block;margin-left:10px;padding-left:10px;
  border-left:1px solid rgba(140,170,165,.3);
  color:#d98f74;letter-spacing:.2em;
}


/* ---------- constellation ---------- */
.constellation{
  margin:clamp(46px,8vh,90px) 0 0;
  overflow:visible;
  padding:clamp(24px,4vw,44px) clamp(18px,3vw,40px);
  border:1px solid rgba(80,60,40,.14);
  background:
    radial-gradient(ellipse 60% 80% at 50% 10%, rgba(178,58,43,.05), transparent 70%),
    linear-gradient(160deg, rgba(255,251,243,.55), rgba(233,222,201,.32));
  position:relative;
  overflow:hidden;
}
.const-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.const-head h3{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(20px,2vw,27px);letter-spacing:.24em;margin:0;
}
.const-head p{margin:0;font-size:11.5px;letter-spacing:.22em;color:var(--ink-faint)}
.const-sky{position:relative;height:clamp(190px,26vh,250px);margin:0 clamp(30px,5vw,74px) 0 0}
.const-lines{position:absolute;inset:0;width:100%;height:100%}
.star{
  position:absolute;left:var(--x);top:var(--y);
  width:30px;height:30px;transform:translate(-50%,-50%);
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--ink);
}
.star i{
  position:absolute;left:50%;top:50%;width:9px;height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--vermilion);
  box-shadow:0 0 0 0 rgba(178,58,43,.28);
  transition:width .4s var(--ease-out), height .4s var(--ease-out), background .4s, box-shadow .5s;
}
.star::after{
  content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(178,58,43,.18);
  opacity:0;transition:opacity .4s, transform .6s var(--ease-out);
}
.star:hover i,.star.is-on i{
  width:13px;height:13px;
  box-shadow:0 0 22px 4px rgba(200,80,50,.35);
}
.star:hover::after,.star.is-on::after{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
.star em{
  position:absolute;left:50%;top:calc(100% + 6px);
  transform:translateX(-50%);
  writing-mode:vertical-rl;
  font-style:normal;font-family:var(--brush);
  font-size:14px;letter-spacing:.2em;white-space:nowrap;
  color:var(--ink);
  opacity:.8;transition:opacity .4s,color .4s;
  text-shadow:0 0 6px rgba(239,231,216,.9);
}
.star:hover em,.star.is-on em{opacity:1;color:var(--vermilion);text-shadow:none}
.const-note{
  margin:26px 0 0;
  padding-top:14px;
  border-top:1px solid rgba(80,60,40,.12);
  font-family:var(--brush);
  font-size:clamp(15px,1.3vw,19px);
  letter-spacing:.1em;color:var(--ink-soft);
  min-height:2.4em;
  transition:opacity .3s;
}
@media (max-width:620px){
  .constellation{padding:20px 14px}
  .const-sky{height:190px}
  .star em{font-size:11px;top:calc(100% + 3px)}
  .const-note{font-size:14px}
}


/* ---------- red maple collectible: see motion.css ---------- */
.hero,.origin,.blade,.wind,.voice{position:relative}
.leaf-count{
  position:fixed;right:clamp(14px,2.2vw,34px);bottom:24px;z-index:85;
  display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 10px;
  background:rgba(239,231,216,.72);
  border:1px solid rgba(80,60,40,.16);
  border-radius:40px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  font-family:var(--latin);font-size:13px;letter-spacing:.1em;color:var(--ink-soft);
  transition:background .4s, color .4s, transform .5s var(--ease-out);
}
.leaf-count .lc-icon{width:16px;height:16px;color:#c99a3c;display:block}
.leaf-count .lc-icon svg{width:100%;height:100%;display:block}
.leaf-count b{font-weight:600;color:var(--vermilion)}
.leaf-count.bump{transform:scale(1.12)}
.leaf-count.is-full{background:rgba(178,58,43,.9);color:#fbefe0;border-color:transparent}
.leaf-count.is-full b{color:#fff}
.leaf-count.is-full .lc-icon{color:#ffd88a}
body.dark-mode .leaf-count{background:rgba(25,34,37,.7);border-color:rgba(200,220,215,.14);color:#b7c8c6}
body.dark-mode .sound{background:rgba(25,34,37,.7);border-color:rgba(200,220,215,.14);color:#b7c8c6}

/* ---------- ending poem + whisper ---------- */
.end-poem{
  display:flex;gap:.6em;flex-wrap:wrap;
  font-family:var(--brush);
  font-size:clamp(22px,2.4vw,34px);
  letter-spacing:.14em;color:#e7cfb4;
  margin:0 0 clamp(30px,5vh,56px);
}
.end-poem .ep-b{opacity:.18;filter:blur(3px);transition:opacity 1.6s var(--ease), filter 1.6s var(--ease)}
.end-poem.is-complete .ep-b{opacity:1;filter:none;color:#f0b394}
.end-whisper{
  margin:0 0 clamp(40px,7vh,80px);
  max-width:30em;
  padding:22px 26px;
  border-left:2px solid var(--vermilion);
  background:linear-gradient(90deg, rgba(178,58,43,.18), rgba(178,58,43,.04) 60%, transparent);
  font-family:var(--serif);
  font-size:clamp(14px,1.05vw,16px);
  line-height:2.1;letter-spacing:.08em;color:#f2efe6;
  display:flex;flex-direction:column;gap:.4em;
}
.end-whisper:not([hidden]){animation:whisperIn 1.4s var(--ease-out) both}
.end-whisper span:first-child{font-family:var(--brush);font-size:1.25em;color:#f0c9a8;letter-spacing:.12em}
@keyframes whisperIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.end-hint{
  font-size:11px;letter-spacing:.3em;color:#5f7b76;margin:-20px 0 40px;
}
@media (max-width:620px){
  .leaf-count{right:14px;bottom:12px;padding:7px 12px 7px 9px;font-size:12px}
  .gold-leaf{width:26px;height:26px}
}


/* long quotes under the tanzaku */
.voice-long{
  max-width:1240px;margin:clamp(34px,6vh,64px) auto 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(18px,3vw,40px);
}
.voice-long blockquote{
  margin:0;padding:22px 0 0;
  border-top:1px solid rgba(80,60,40,.18);
  position:relative;
}
.voice-long blockquote::before{
  content:"「";
  position:absolute;left:-2px;top:8px;
  font-family:var(--brush);font-size:34px;color:var(--vermilion);opacity:.35;
}
.voice-long p{
  margin:0 0 14px;
  padding-left:26px;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(14px,1.05vw,16.5px);
  line-height:2.1;letter-spacing:.06em;
  color:var(--ink-soft);
}
.voice-long blockquote{display:flex;flex-direction:column;height:100%}
.voice-long cite{
  display:block;padding-left:26px;margin-top:auto;
  font-style:normal;font-size:11px;letter-spacing:.26em;
  color:var(--ink-faint);
}
@media (max-width:620px){
  .voice-long{margin-top:26px;gap:18px}
  .voice-long p{font-size:14px;line-height:2}
}