:root {
  --vermillion: #df3b2f;
  --vermillion-deep: #a42e27;
  --ink: #181817;
  --ivory: #fffaf0;
  --paper: #fffdf8;
  --blue: #4d86ac;
  --indigo: #284d67;
  --celadon: #96ad91;
  --coral: #ed8a77;
  --gold: #d5aa67;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 35%, rgba(237, 138, 119, .07), transparent 20rem),
    linear-gradient(180deg, var(--paper), var(--ivory));
  font-family: var(--serif);
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }

.sr-only,
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  background: white;
  border: 1px solid var(--ink);
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 4.7vw, 4.5rem);
  background: rgba(255, 250, 240, .95);
  border-bottom: 1px solid rgba(164, 46, 39, .16);
  box-shadow: 0 3px 16px rgba(46, 60, 65, .06);
  backdrop-filter: blur(12px);
}
.wordmark { width: clamp(190px, 24vw, 350px); }
.wordmark img { width: 100%; }
nav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 3.4rem); }
nav a {
  position: relative;
  padding: 29px 0 23px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .19em;
  font: 700 .68rem/1 var(--sans);
}
nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: var(--vermillion);
  transform: scaleX(0);
  transition: transform .2s ease;
}
nav a:hover::after,
nav a:focus-visible::after,
nav a.active::after { transform: scaleX(1); }
.menu-button { display: none; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(550px, 45vw, 690px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6rem 1.5rem 8.4rem;
  background: #173452;
  border-bottom: 1px solid rgba(40, 77, 103, .24);
}
.hero[data-season="spring"] { --season-image: url("assets/season-spring.webp"); }
.hero[data-season="summer"] { --season-image: url("assets/season-summer.webp"); }
.hero[data-season="autumn"] { --season-image: url("assets/season-autumn.webp"); }
.hero[data-season="winter"] { --season-image: url("assets/season-winter.webp"); }
.ambience,
.time-wash,
.weather,
.creatures { position:absolute; inset:0; pointer-events:none; }
.ambience { z-index:-1; overflow:hidden; }
.time-wash { z-index:2; background:transparent; transition:background 8s ease-in-out; }
.celestial-orb { position:absolute; z-index:2; left:var(--orb-x,72%); top:var(--orb-y,18%); width:clamp(48px,6vw,88px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:#ef6048; box-shadow:0 0 38px rgba(239,96,72,.35); transition:left 50s linear,top 50s linear,background 3s; }
.hero[data-period="night"] .celestial-orb { background:#fff7d6; box-shadow:0 0 34px rgba(231,241,255,.72); }
.particle { position:absolute; pointer-events:none; will-change:transform,opacity; }
.firefly { width:3px;height:10px;border-radius:50% 50% 45% 45%;background:linear-gradient(#171b18 0 47%,#e9f273 54% 100%);box-shadow:0 5px 7px 2px rgba(232,246,105,.75),0 5px 15px 6px rgba(214,238,95,.35);animation:firefly-wander var(--duration) ease-in-out infinite,blink var(--blink) ease-in-out infinite;transform-origin:center; }
.firefly::before,.firefly::after{content:"";position:absolute;top:1px;width:7px;height:5px;background:rgba(224,231,211,.48);border:1px solid rgba(35,45,38,.52);}
.firefly::before{right:1px;border-radius:90% 15% 70% 20%;transform:rotate(24deg);transform-origin:right center;animation:wing-left .19s ease-in-out infinite alternate;}
.firefly::after{left:1px;border-radius:15% 90% 20% 70%;transform:rotate(-24deg);transform-origin:left center;animation:wing-right .19s ease-in-out infinite alternate;}
.butterfly { width:12px;height:9px;animation:drift var(--duration) ease-in-out infinite alternate; }
.butterfly::before,.butterfly::after{content:"";position:absolute;width:7px;height:9px;border-radius:70% 30%;background:rgba(238,124,107,.82)}
.butterfly::after{right:0;transform:scaleX(-1)}
.bee { width:10px;height:6px;border-radius:50%;background:repeating-linear-gradient(90deg,#dfac35 0 3px,#3b3022 3px 5px);animation:drift var(--duration) linear infinite alternate; }
.leaf,.petal,.snowflake,.raindrop { top:-20px; animation:fall var(--duration) linear infinite; }
.leaf { width:10px;height:8px;background:#d45830;border-radius:80% 20%;transform:rotate(35deg); }
.petal { width:8px;height:6px;background:#f5a3ad;border-radius:80% 20%; }
.snowflake { width:7px;height:7px;border-radius:50%;background:white;box-shadow:0 0 3px rgba(255,255,255,.9); }
.raindrop { width:1px;height:17px;background:linear-gradient(transparent,rgba(210,230,244,.78)); }
.shooting-star { z-index:3; top:16%; left:72%; width:90px; height:1px; opacity:0; transform:rotate(-24deg); background:linear-gradient(90deg,transparent,#fff); filter:drop-shadow(0 0 4px white); }
.hero[data-period="night"] .shooting-star.active { animation:shoot 1.15s ease-out; }
.kitsunebi { position:absolute; z-index:3; left:12%; bottom:18%; width:52px;height:74px;opacity:0;transition:opacity 2s;filter:drop-shadow(0 0 8px rgba(78,207,231,.82)) drop-shadow(0 0 18px rgba(52,130,202,.48)); }
.kitsunebi svg{display:block;width:100%;height:100%;overflow:visible;}
.foxfire-outer{fill:url(#foxfire-core);filter:url(#foxfire-glow);}
.foxfire-inner{fill:rgba(222,255,239,.78);}
.foxfire-swirl{fill:none;stroke:#17272c;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;}
.hero[data-period="night"] .kitsunebi.visible { opacity:.9;animation:kitsune-float 8s ease-in-out infinite alternate; }
.hero[data-period="night"] .kitsunebi.visible svg{animation:foxfire-breathe 2.4s ease-in-out infinite alternate;}
.ambience-controls { position:absolute;z-index:5;right:1rem;bottom:1rem;display:flex;gap:.4rem; }
.ambience-controls button,.sound-picker { padding:.45rem .65rem;border:1px solid rgba(40,77,103,.38);background:rgba(255,250,240,.88);color:#273e4c;text-transform:uppercase;letter-spacing:.08em;font:700 .57rem/1 var(--sans);cursor:pointer; }
.sound-picker:hover,.sound-picker:focus-visible,.ambience-controls button:hover,.ambience-controls button:focus-visible{background:#fffaf0;border-color:var(--vermillion)}
.hero.motion-paused .particle,.hero.motion-paused .shooting-star,.hero.motion-paused .kitsunebi { animation-play-state:paused!important; }
@keyframes drift { from{transform:translate3d(-30px,10px,0) rotate(-8deg)} to{transform:translate3d(90px,-45px,0) rotate(12deg)} }
@keyframes firefly-wander {
  0%{transform:translate3d(0,0,0)}
  22%{transform:translate3d(var(--fly-x1,42px),var(--fly-y1,-34px),0)}
  48%{transform:translate3d(var(--fly-x2,-28px),var(--fly-y2,-66px),0)}
  73%{transform:translate3d(var(--fly-x3,68px),var(--fly-y3,-18px),0)}
  100%{transform:translate3d(0,0,0)}
}
@keyframes blink { 0%,100%{opacity:.2} 45%,70%{opacity:1} }
@keyframes wing-left{to{transform:rotate(66deg) scaleX(.7)}}
@keyframes wing-right{to{transform:rotate(-66deg) scaleX(.7)}}
@keyframes fall { to{transform:translate3d(var(--drift,20px),760px,0) rotate(300deg)} }
@keyframes shoot { 0%{opacity:0;transform:translate(0,0) rotate(-24deg)} 12%{opacity:1} 100%{opacity:0;transform:translate(-340px,190px) rotate(-24deg)} }
@keyframes kitsune-float { from{transform:translate3d(0,7px,0) rotate(-3deg)} to{transform:translate3d(38px,-34px,0) rotate(4deg)} }
@keyframes foxfire-breathe{from{transform:scale(.94,.98)}to{transform:scale(1.04,1.07)}}
.hero-scrim {
  position: absolute;
  z-index: -1;
  inset: 7% 27% 16%;
  background: radial-gradient(ellipse, rgba(255, 253, 248, .88), rgba(255, 253, 248, .34) 58%, transparent 76%);
  filter: blur(2px);
}
.hero-copy {
  width: min(900px, 68vw);
  margin-top: -2rem;
  text-align: center;
}
.eyebrow,
.kicker,
.chapter-label {
  margin: 0 0 .8rem;
  color: var(--vermillion-deep);
  text-transform: uppercase;
  letter-spacing: .22em;
  font: 800 .7rem/1.45 var(--sans);
}
.hero-logo {
  width: min(900px, 100%);
  margin-inline: auto;
  filter: drop-shadow(0 5px 0 rgba(255, 250, 240, .85)) drop-shadow(0 11px 15px rgba(41, 45, 39, .15));
}
.tagline {
  width: fit-content;
  max-width: 42rem;
  margin: 1.2rem auto 1.8rem;
  padding: .45rem 1.1rem;
  background: rgba(255, 250, 240, .72);
  font-size: clamp(1rem, 1.8vw, 1.32rem);
  letter-spacing: .045em;
}
.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1rem 1.45rem 1rem 1.6rem;
  color: white;
  background: linear-gradient(135deg, #e64d3a, #c92f26);
  border: 1px solid rgba(117, 29, 22, .5);
  box-shadow: 0 7px 18px rgba(118, 47, 33, .22);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .17em;
  font: 800 .7rem/1 var(--sans);
  transition: transform .18s ease, box-shadow .18s ease;
}
.primary-button:hover,
.primary-button:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 23px rgba(118, 47, 33, .27); }
.chapter-status {
  position: absolute;
  right: 0;
  bottom: 2.2rem;
  left: 0;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .22em;
  font: 800 .64rem/1 var(--sans);
}
.chapter-status span { color: var(--vermillion-deep); }
.chapter-status span::after { content: "◆"; padding: 0 .65rem; color: var(--gold); font-size: .48rem; }

section:not(.hero) { scroll-margin-top: 74px; }
.welcome {
  position: relative;
  overflow: hidden;
  padding: clamp(5.5rem, 10vw, 8.5rem) 1.4rem;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(77, 134, 172, .055) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(rgba(77, 134, 172, .045) 1px, transparent 1px) 0 0 / 34px 34px,
    var(--paper);
}
.welcome::before,
.welcome::after {
  content: "";
  position: absolute;
  width: 27rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(223, 59, 47, .11);
}
.welcome::before { left: -18rem; top: -11rem; }
.welcome::after { right: -18rem; bottom: -13rem; }
.section-rule {
  width: min(540px, 72vw);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin: 0 auto 2.1rem;
  color: var(--gold);
}
.section-rule span { height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.section-rule span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.section-rule i { width: 10px; aspect-ratio: 1; border: 1px solid currentColor; transform: rotate(45deg); }
h2,
h3 { margin: 0; font-weight: 500; line-height: 1.12; }
.welcome h2 { font-size: clamp(2.6rem, 6vw, 5.8rem); letter-spacing: .035em; }
.welcome-copy {
  max-width: 760px;
  margin: 1.6rem auto 0;
  color: #46443f;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}
.theme-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .8rem 1.3rem;
  margin-top: 2.2rem;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: .2em;
  font: 800 .68rem/1 var(--sans);
}
.theme-list b { color: var(--coral); font-size: .45rem; }

.manga {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(5.5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 9rem);
  background:
    linear-gradient(115deg, rgba(213, 170, 103, .12), transparent 32%),
    var(--ivory);
  border-block: 1px solid rgba(40, 77, 103, .16);
}
.manga-heading h2,
.news h2 { font-size: clamp(2.3rem, 4.6vw, 4.6rem); }
.manga-heading > p:last-child,
.news > div > p:last-child { max-width: 48ch; margin: 1.5rem 0 0; color: #57544d; }
.chapter-card {
  background: rgba(255, 253, 248, .91);
  border: 1px solid rgba(40, 77, 103, .25);
  box-shadow: 18px 18px 0 rgba(150, 173, 145, .58);
}
.chapter-art {
  position: relative;
  min-height: 380px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 250, 225, .98) 0 7.5rem, rgba(255, 250, 225, .3) 7.6rem 9.2rem, transparent 9.3rem),
    linear-gradient(180deg, #6ca5c2 0 43%, #f4baa5 44% 63%, #5f836f 100%);
}
.chapter-art::before,
.chapter-art::after {
  content: "";
  position: absolute;
  bottom: -9rem;
  width: 79%;
  height: 20rem;
  border-radius: 50% 50% 0 0;
  background: var(--indigo);
  opacity: .62;
}
.chapter-art::before { left: -18%; transform: rotate(9deg); }
.chapter-art::after { right: -20%; transform: rotate(-8deg); opacity: .47; }
.chapter-gate {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  width: 11rem;
  height: 14rem;
  border-inline: 1.25rem solid var(--vermillion);
  transform: translateX(-50%);
}
.chapter-gate::before,
.chapter-gate::after {
  content: "";
  position: absolute;
  left: 50%;
  height: 1rem;
  background: var(--vermillion);
  transform: translateX(-50%);
}
.chapter-gate::before { top: 0; width: 15rem; }
.chapter-gate::after { top: 2rem; width: 12.7rem; height: .65rem; }
.chapter-flame,
.foxfire {
  position: absolute;
  width: 35px;
  height: 49px;
  border-radius: 66% 34% 63% 37%;
  background: radial-gradient(circle at 45% 60%, #fff6be 0 16%, #77d7d6 18% 46%, #277d9b 70%);
  box-shadow: 0 0 22px rgba(102, 215, 215, .95);
  transform: rotate(45deg);
}
.chapter-flame::after,
.foxfire::after {
  content: "";
  position: absolute;
  inset: 14px 10px 8px;
  border: 3px solid #1b292d;
  border-right-color: transparent;
  border-radius: 50%;
}
.flame-one { left: 20%; top: 35%; }
.flame-two { right: 18%; top: 51%; transform: rotate(45deg) scale(.72); }
.chapter-details { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.6rem; }
.chapter-details p { margin-bottom: .35rem; }
.chapter-details h3 { font-size: clamp(1.45rem, 2.5vw, 2.1rem); }
.status-badge {
  flex: 0 0 auto;
  padding: .62rem .75rem;
  color: var(--vermillion-deep);
  border: 1px solid rgba(164, 46, 39, .46);
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 800 .61rem/1 var(--sans);
}

.news {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(5rem, 9vw, 8rem) clamp(1.5rem, 8vw, 9rem);
  color: var(--ivory);
  background:
    radial-gradient(circle at 14% 50%, rgba(77, 134, 172, .3), transparent 22rem),
    linear-gradient(135deg, #18364a, #284d67 58%, #1d4057);
}
.news .kicker { color: #ff9d8c; }
.news > div > p:last-child { color: #d9e2df; }
.news-ornament { position: relative; min-height: 180px; border: 1px solid rgba(255, 250, 240, .22); transform: rotate(45deg); }
.foxfire { left: 50%; top: 50%; width: 58px; height: 78px; transform: translate(-50%, -50%) rotate(45deg); }
.coming-soon {
  min-width: 190px;
  padding: 1.5rem;
  border-block: 1px solid rgba(255, 250, 240, .34);
  text-align: center;
}
.coming-soon span,
.coming-soon small { display: block; }
.coming-soon span { text-transform: uppercase; letter-spacing: .19em; font: 800 .68rem/1 var(--sans); }
.coming-soon small { margin-top: .7rem; color: #bdcbc8; }

footer {
  padding: 4.4rem 1.5rem 3.5rem;
  text-align: center;
  background:
    linear-gradient(rgba(255, 250, 240, .89), rgba(255, 250, 240, .95)),
    url("assets/shrine-landscape-desktop.webp") center bottom / cover;
  border-top: 1px solid rgba(164, 46, 39, .18);
}
footer img { width: min(390px, 82vw); margin: 0 auto 1rem; }
footer p { margin: .5rem 0 0; font-size: .86rem; }
footer p:first-of-type { text-transform: uppercase; letter-spacing: .17em; font: 800 .63rem/1.5 var(--sans); }
.rating-note { color: #625f58; }

@media (max-width: 900px) {
  .manga { grid-template-columns: 1fr; }
  .manga-heading { max-width: 690px; }
  .news { grid-template-columns: 120px minmax(0, 1fr); }
  .coming-soon { grid-column: 2; justify-self: start; }
}

@media (max-width: 700px) {
  .site-header { height: 64px; padding-inline: 1rem; }
  .wordmark { width: min(235px, 69vw); }
  .menu-button {
    display: grid;
    gap: 4px;
    width: 42px;
    padding: 10px;
    border: 0;
    background: transparent;
  }
  .menu-button span:not(.sr-only) { display: block; height: 2px; background: var(--ink); }
  nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem 1rem 1rem;
    background: rgba(255, 250, 240, .98);
    border-bottom: 1px solid rgba(164, 46, 39, .16);
  }
  nav.open { display: flex; }
  nav a { padding: 1rem .35rem; border-bottom: 1px solid rgba(40, 77, 103, .1); }
  nav a::after { bottom: 8px; right: auto; width: 42px; }

  .hero {
    min-height: calc(100svh - 64px);
    padding: 5rem 1.1rem 9.5rem;
    background-image: var(--season-image, url("assets/season-autumn.webp"));
    background-position: center;
  }
  .hero-scrim { inset: 8% 4% 23%; background: radial-gradient(ellipse, rgba(255, 253, 248, .77), rgba(255, 253, 248, .18) 66%, transparent 78%); }
  .hero-copy { width: min(100%, 560px); margin-top: -7rem; }
  .hero-logo { width: 100%; }
  .eyebrow { margin-bottom: 1.35rem; font-size: .61rem; }
  .tagline { max-width: 22rem; padding: .35rem .7rem; font-size: 1rem; }
  .chapter-status { bottom: 2rem; color: var(--ink); }

  section:not(.hero) { scroll-margin-top: 64px; }
  .welcome { padding-block: 5rem; }
  .welcome h2 { font-size: clamp(2.7rem, 14vw, 4.6rem); }
  .manga { padding: 5rem 1.2rem 5.7rem; }
  .chapter-card { box-shadow: 10px 10px 0 rgba(150, 173, 145, .58); }
  .chapter-art { min-height: 315px; }
  .chapter-details { align-items: flex-start; flex-direction: column; }
  .news { grid-template-columns: 1fr; padding: 5rem 1.2rem; text-align: center; }
  .news-ornament { width: 115px; min-height: 115px; margin: 0 auto; }
  .news > div > p:last-child { margin-inline: auto; }
  .coming-soon { grid-column: 1; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .shooting-star,.kitsunebi{animation:none!important}
  .weather,.shooting-star{display:none}
}

/* Approved editorial composition */
body { background:#f1f1ef; }
.page {
  --season-image:url("assets/season-autumn.webp");
  --night-image:url("assets/season-autumn-night.webp");
}
html[data-season="spring"] .page { --season-image:url("assets/season-spring.webp"); --night-image:url("assets/season-spring-night.webp"); }
html[data-season="summer"] .page { --season-image:url("assets/season-summer.webp"); --night-image:url("assets/season-summer-night.webp"); }
html[data-season="autumn"] .page { --season-image:url("assets/season-autumn.webp"); --night-image:url("assets/season-autumn-night.webp"); }
html[data-season="winter"] .page { --season-image:url("assets/season-winter.webp"); --night-image:url("assets/season-winter-night.webp"); }
.page { width:min(1500px,100%); margin:0 auto; overflow:hidden; background:var(--paper); box-shadow:0 0 30px rgba(31,45,54,.12); }
.site-header { padding-inline:clamp(1rem,3.8vw,3.8rem); }
.wordmark { width:clamp(180px,21vw,320px); }
.hero { min-height:540px; padding:2rem clamp(1rem,5vw,5rem) 2.6rem; display:block; text-align:center; background:#173452; }
.ambience { z-index:0; }
.season-scene { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; pointer-events:none; }
.scene-day { z-index:0; background-image:var(--season-image); }
.scene-night { z-index:1; opacity:var(--night-blend,0); background-image:var(--night-image); transition:opacity 8s ease-in-out; }
.time-wash { z-index:2; background:transparent; mix-blend-mode:normal; transition:background 8s ease-in-out; }
.milky-way { position:absolute; z-index:2; top:-9%; left:4%; width:92%; height:48%; opacity:calc(var(--night-blend,0) * .56); pointer-events:none; transform:rotate(-7deg); filter:blur(.2px); background:
  radial-gradient(ellipse at 50% 48%,rgba(236,244,255,.32) 0 4%,rgba(177,203,230,.18) 18%,rgba(139,165,202,.08) 35%,transparent 62%),
  radial-gradient(circle at 12% 57%,rgba(255,255,255,.9) 0 1px,transparent 1.7px),
  radial-gradient(circle at 29% 38%,rgba(255,255,255,.76) 0 1px,transparent 1.6px),
  radial-gradient(circle at 47% 61%,rgba(255,255,255,.82) 0 1px,transparent 1.5px),
  radial-gradient(circle at 64% 32%,rgba(255,255,255,.72) 0 1px,transparent 1.7px),
  radial-gradient(circle at 81% 54%,rgba(255,255,255,.86) 0 1px,transparent 1.5px);
  transition:opacity 8s ease-in-out;
}
.hero[data-period="dawn"] .time-wash { background:linear-gradient(rgba(62,74,114,.05),rgba(245,152,116,.09)); }
.hero[data-period="sunset"] .time-wash { background:linear-gradient(rgba(45,64,107,.05),rgba(238,115,82,.11)); }
.hero[data-period="night"] .time-wash { background:transparent; mix-blend-mode:normal; }
.celestial-orb { z-index:3; background:#f4b059; box-shadow:0 0 34px 10px rgba(255,199,108,.30); }
.hero[data-period="night"] .celestial-orb {
  z-index:5;
  background:
    radial-gradient(circle at 34% 34%,rgba(177,184,190,.32) 0 5%,transparent 6%),
    radial-gradient(circle at 64% 60%,rgba(177,184,190,.26) 0 8%,transparent 9%),
    radial-gradient(circle at 46% 72%,rgba(177,184,190,.20) 0 4%,transparent 5%),
    #fff5cf;
  box-shadow:0 0 34px 9px rgba(222,236,255,.36);
}
.lantern-glow { position:absolute; z-index:3; top:69%; width:clamp(54px,6vw,88px); aspect-ratio:1; opacity:calc(var(--night-blend,0) * .92); border-radius:50%; background:radial-gradient(circle,rgba(255,255,210,1) 0 7%,rgba(255,186,72,.82) 21%,rgba(255,107,27,.34) 46%,transparent 74%); mix-blend-mode:screen; filter:blur(.4px); animation:lantern-flicker 2.8s steps(1,end) infinite; pointer-events:none; transform-origin:center; }
.lantern-left { left:20.1%; transform:translate(-50%,-50%); }
.lantern-right { right:20.1%; transform:translate(50%,-50%); animation-delay:-1.35s; }
.hero.motion-paused .lantern-glow { animation-play-state:paused!important; }
@keyframes lantern-flicker {
  0%,100% { filter:blur(.35px) brightness(.92); opacity:calc(var(--night-blend,0) * .78); }
  14% { filter:blur(.6px) brightness(1.22); opacity:calc(var(--night-blend,0) * 1); }
  18% { filter:blur(.25px) brightness(.94); opacity:calc(var(--night-blend,0) * .82); }
  43% { filter:blur(.7px) brightness(1.28); opacity:calc(var(--night-blend,0) * .98); }
  48% { filter:blur(.3px) brightness(1.02); opacity:calc(var(--night-blend,0) * .86); }
  76% { filter:blur(.55px) brightness(1.16); opacity:calc(var(--night-blend,0) * .96); }
}
.hero::before { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,250,240,.03),rgba(255,250,240,.13) 40% 60%,rgba(255,250,240,.03)); }
.key-art-card { position:relative; z-index:4; width:min(850px,72%); margin:0 auto; padding:8px; background:rgba(255,250,240,.93); border:1px solid rgba(49,91,118,.55); box-shadow:0 3px 12px rgba(31,50,61,.19); }
.key-art { min-height:300px; border:1px solid rgba(33,45,50,.34); background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)),var(--season-image) center 68%/cover no-repeat; filter:grayscale(1) contrast(.82) brightness(1.17); }
.hero-title { position:absolute; z-index:2; left:50%; top:50%; width:min(650px,86%); transform:translate(-50%,-50%); padding:1rem 1.5rem; background:rgba(255,253,248,.76); }
.hero-title p { margin:0 0 .3rem; color:var(--vermillion-deep); text-transform:uppercase; letter-spacing:.2em; font:800 .61rem/1.3 var(--sans); }
.hero-title img { width:100%; margin:auto; filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)); }
.tagline { position:relative; z-index:4; width:fit-content; margin:.75rem auto; padding:.3rem .9rem; background:rgba(255,250,240,.9); text-transform:uppercase; letter-spacing:.17em; font-size:.72rem; }
.primary-button { position:relative; z-index:4; min-width:320px; justify-content:center; }
.chapter-status,.hero-copy,.hero-scrim { display:none; }
.editorial { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:clamp(2.3rem,5vw,4.8rem); padding:2.7rem clamp(2rem,7vw,7rem) 5rem; background:rgba(255,255,255,.96); border-top:1px solid rgba(49,91,118,.16); }
.section-heading { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.section-heading h2 { flex:0 0 auto; margin:0; text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; font-weight:500; }
.section-heading span { height:1px; flex:1; background:#b9bdbe; }
.panel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.manga-panel { position:relative; min-height:300px; overflow:hidden; border:1px solid #777; background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),var(--season-image); filter:grayscale(1) contrast(1.18); }
.panel-one{background-position:25% 70%;background-size:290%}.panel-two{background-position:51% 68%;background-size:320%}.panel-three{background-position:75% 64%;background-size:285%}
.manga-panel::after { content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,rgba(0,0,0,.025) 8px); }
.manga-panel span { position:absolute;z-index:2;left:10%;right:10%;bottom:9%;padding:.65rem;background:rgba(255,255,255,.9);border:1px solid #333;text-align:center;text-transform:uppercase;letter-spacing:.1em;font:600 .58rem/1.45 var(--sans); }
.panel-note { margin:.55rem 0 0;text-transform:uppercase;letter-spacing:.17em;font-size:.61rem; }
.sidebar section+section{margin-top:2.3rem}.sidebar p{color:#5a564f;font-size:.9rem}
.latest-card{border:1px solid #ddd4c7;background:#fffdf8}.latest-image{min-height:145px;background:var(--season-image) 72% 66%/210% no-repeat;filter:grayscale(1) contrast(1.12)}.latest-card p{display:flex;justify-content:space-between;margin:0;padding:.9rem 1rem;color:var(--ink);text-transform:uppercase;letter-spacing:.11em;font-size:.65rem}.latest-card b{color:var(--vermillion)}
.coming-soon{margin-top:1rem;padding:.85rem 1rem;color:#fff;background:var(--vermillion);text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem}.coming-soon span{margin-left:1rem}
footer { position:relative; z-index:2; padding:6rem 2rem 2rem; color:var(--ink); text-align:center; background:linear-gradient(transparent,rgba(255,250,240,.95) 48%),var(--season-image) center bottom/cover no-repeat; }
footer img{width:min(320px,72vw);margin:0 auto 1rem}footer p{margin:.25rem 0;font-size:.72rem;letter-spacing:.07em}
@media(max-width:860px){.key-art-card{width:88%}.editorial{grid-template-columns:1fr}.site-header{grid-template-columns:1fr auto}}
@media(max-width:620px){.hero{min-height:610px;padding:4rem .8rem 2rem}.season-scene{background-size:auto 100%}.key-art-card{width:100%}.key-art{min-height:285px}.hero-title{width:94%;padding:.8rem}.tagline{max-width:95%;line-height:1.55}.primary-button{min-width:0;width:94%;font-size:.62rem}.editorial{padding:2.3rem 1rem 3.5rem}.panel-grid{grid-template-columns:1fr 1fr}.manga-panel{min-height:255px}.panel-three{grid-column:1/-1;min-height:210px}.ambience-controls{bottom:.4rem;right:.4rem}.lantern-glow{display:none}}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
