:root{
  --ink:#101725;
  --paper:#f4f0e7;
  --sun:#ffd77c;
  --rain:#728ca6;
  --accent:#e7ad65;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--paper);
  color:var(--ink);
}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.skip{
  position:absolute;left:1rem;top:-5rem;
  z-index:200;background:white;padding:1rem;
}
.skip:focus{top:1rem}
:focus-visible{outline:3px solid #ed9238;outline-offset:4px}
#curtain{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:#080808;color:white;
  letter-spacing:.3em;font-size:.8rem;
  pointer-events:none;
  animation:curtain-out .95s ease-in-out forwards;
}
@keyframes curtain-out{
  0%,30%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
.topbar{
  position:absolute;z-index:20;top:0;left:0;width:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.5rem 4vw;
  color:#111d2d;font-size:.68rem;letter-spacing:.12em;
}
.brand{text-decoration:none;font-weight:900}
.edition{opacity:.7}
#motion{
  border:1px solid currentColor;background:transparent;
  padding:.6rem .75rem;color:inherit;font-size:.65rem;
}
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(115deg,#f5c984 0%,#c7d2d3 52%,#637f9e 100%);
  transition:background 1s ease;
}
.hero[data-weather=sun]{
  background:linear-gradient(120deg,#ffe2a3,#f3ae80,#e5d5a8);
}
.hero[data-weather=rain]{
  background:linear-gradient(120deg,#617c96,#3b536d,#202f47);
}
.sky-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sun{
  position:absolute;width:clamp(160px,24vw,360px);aspect-ratio:1;
  border-radius:50%;top:12%;left:14%;
  background:#ffe3a1;
  box-shadow:0 0 90px 35px #ffe3a16b;
  animation:breathe 7s ease-in-out infinite alternate;
  transition:opacity 1s ease,transform 1s ease;
}
.halo{
  position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;
  border:1px solid #ffffff50;border-radius:50%;
  top:-20vw;left:-10vw;
  animation:rotate 50s linear infinite;
}
.cloud{
  position:absolute;width:50vw;height:14vw;
  background:#dce3e8b8;
  filter:blur(35px);border-radius:50%;
  transition:opacity 1s ease;
}
.cloud-one{top:15%;right:-10%;animation:drift 17s ease-in-out infinite alternate}
.cloud-two{bottom:20%;left:-20%;animation:drift 25s ease-in-out infinite alternate-reverse}
.horizon{
  position:absolute;bottom:-15%;left:-10%;width:120%;height:36%;
  border-radius:50% 50% 0 0;
  background:linear-gradient(#1b33454d,#101725a8);
  filter:blur(15px);
}
.rainfield{position:absolute;inset:0;opacity:.5;transition:opacity 1s}
.drop{
  position:absolute;top:-25%;
  width:1px;height:55px;background:#e8f3ff9c;
  transform:rotate(13deg);
  animation:rainfall linear infinite;
}
.hero[data-weather=sun] .rainfield{opacity:0}
.hero[data-weather=rain] .rainfield{opacity:1}
.hero[data-weather=rain] .sun{opacity:.1;transform:scale(.7)}
.hero[data-weather=rain] .cloud{opacity:.95}
.hero[data-weather=sun] .cloud{opacity:.25}
.hero-content{
  position:relative;z-index:2;text-align:center;
  padding:9rem 1.5rem 5rem;max-width:900px;
}
.eyebrow,.chapter-number{
  font-size:.72rem;font-weight:700;letter-spacing:.23em;
}
h1{
  font-size:clamp(4rem,12vw,11rem);
  letter-spacing:-.095em;line-height:.82;
  margin:2rem 0;
  font-weight:900;
}
.amp{display:block;font-family:Georgia,serif;font-weight:400;font-style:italic;font-size:.55em;margin:.3em}
.hero-line{font-size:clamp(1.3rem,2.8vw,2.1rem);font-family:Georgia,serif}
.hero-copy{max-width:550px;margin:1.5rem auto;line-height:1.7}
.weather-controls{
  display:flex;flex-wrap:wrap;gap:.6rem;
  justify-content:center;margin:2.5rem auto 1rem;
}
.weather-controls button{
  border:1px solid #1a283b;background:#ffffff3d;
  color:#102035;padding:.9rem 1.1rem;font-size:.7rem;
  font-weight:800;letter-spacing:.12em;
  transition:transform .2s,background .2s;
}
.weather-controls button:hover{transform:translateY(-3px)}
.weather-controls button.active{background:#101725;color:white}
.weather-message{min-height:3em;font-family:Georgia,serif;font-style:italic}
.enter{display:inline-block;margin-top:2rem;font-size:.7rem;letter-spacing:.15em;font-weight:800}
.chapter,.interactive-section{
  padding:clamp(5rem,10vw,10rem) max(6vw,calc((100vw - 950px)/2));
}
.chapter h2,.interactive-section h2,.finale h2{
  font-size:clamp(2.6rem,7vw,6rem);
  letter-spacing:-.065em;line-height:1.05;
  margin:1.5rem 0 2rem;
}
.chapter p,.interactive-section p{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.85;max-width:720px;
}
.quote{
  margin:4rem 0;padding:3rem 0;
  border-top:1px solid;border-bottom:1px solid;
  font-weight:900;letter-spacing:-.05em;
  font-size:clamp(2.2rem,6vw,5rem);
}
.interactive-section{background:#e1e3dd}
.mixer{margin-top:3rem;padding:clamp(1.5rem,5vw,4rem);background:#f9f6ed}
.mixer-labels{display:flex;justify-content:space-between;font-size:.7rem;font-weight:800;letter-spacing:.1em}
#mixer-output{font-family:Georgia,serif;font-size:clamp(1.3rem,3vw,2rem);line-height:1.5;min-height:5rem;margin-top:2rem}
#weather-range{width:100%;margin:2rem 0;accent-color:#253b59;cursor:pointer}
.dark-chapter{background:#101725;color:#f4f0e7}
.dark-chapter label{display:block;margin:2rem 0 1rem;line-height:1.6}
textarea{
  width:100%;min-height:230px;padding:1.3rem;
  background:#f4f0e7;color:#101725;border:0;
  resize:vertical;line-height:1.6;
}
.journal-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.journal-actions button{
  padding:1rem 1.2rem;border:1px solid #f4f0e7;
  color:#f4f0e7;background:transparent;
  font-size:.75rem;font-weight:800;
}
.journal-actions button:hover{background:#f4f0e7;color:#101725}
.privacy{font-size:.85rem!important;opacity:.75}
details{border-top:1px solid #999;padding:1.5rem 0;margin-top:3rem}
summary{cursor:pointer;font-weight:800;letter-spacing:.1em}
.references{padding-top:1rem}
.references p{font-size:.9rem}
.finale{
  padding:clamp(6rem,12vw,12rem) 6vw;text-align:center;
  background:linear-gradient(130deg,#f8d8a0,#c4d4d5,#6987a2);
}
.finale h2{font-size:clamp(2.7rem,7.5vw,7rem)}
.finale p{max-width:620px;margin:1.5rem auto;line-height:1.8}
.final-line{font-family:Georgia,serif;font-size:1.6rem}
.final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:3rem}
.final-actions a,.related a{
  display:inline-block;padding:1.2rem 1.5rem;
  border:1px solid #101725;text-decoration:none;
  font-weight:800;font-size:.75rem;letter-spacing:.1em;
}
.final-actions .primary-link{background:#101725;color:white}
.related{padding:5rem 6vw;text-align:center;background:#ece9e1}
.related h2{font-size:clamp(1.8rem,4vw,3rem)}
.related p{max-width:600px;margin:1.5rem auto;line-height:1.7}
footer{
  background:#101725;color:#f4f0e7;
  padding:2rem 5vw;display:flex;flex-wrap:wrap;gap:1.5rem;
  justify-content:space-between;align-items:center;
  font-size:.7rem;letter-spacing:.1em;
}
footer a{text-decoration:none}
@keyframes breathe{to{transform:scale(1.08)}}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(12vw)}}
@keyframes rainfall{to{transform:translate(15vw,135vh) rotate(13deg)}}
@media(max-width:650px){
  .edition{display:none}
  .topbar{padding:1rem}
  .hero-content{padding-top:8rem}
  h1{font-size:clamp(3.6rem,15vw,6rem)}
  .weather-controls button{padding:.8rem;font-size:.63rem}
  .chapter,.interactive-section{padding:5rem 6vw}
  .sun{left:2%;top:15%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  #curtain{display:none}
}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important;
  scroll-behavior:auto!important;
}
body.reduce-motion #curtain{display:none}