:root{
  --bg:#dceefb; --fg:#0b2137; --accent:#0b57d0; --dim:rgba(11,33,55,.66);
  --measure:36rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:'Inter',system-ui,sans-serif;font-weight:300;
  font-size:clamp(1.04rem,.76rem + .62vw,1.2rem);line-height:1.76;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  transition:background-color 1.1s cubic-bezier(.4,0,.2,1),color 1.1s cubic-bezier(.4,0,.2,1);
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}

.noise{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}

#prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%}

main,header,footer,nav{position:relative;z-index:5}
.wrap{width:min(var(--measure),calc(100vw - 2.4rem));margin-inline:auto}
.wide{width:min(72rem,calc(100vw - 2.4rem));margin-inline:auto}

.mono{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dim)}
.mono.hot{color:var(--accent)}

/* ══ SITE NAV (inner pages) ═══════════════════════ */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1.2rem,4vw,3rem);
  background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--fg) 16%, transparent)}
.nav .brand{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(.95rem,.8rem + .4vw,1.2rem);line-height:1}
.nav .links{display:flex;gap:1.6rem;align-items:center}
.nav .links a{font-family:'Inter',sans-serif;font-size:.66rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--dim);transition:color .25s;padding:.3rem 0;
  border-bottom:1px solid transparent}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:760px){
  .nav{flex-wrap:wrap;gap:.45rem;padding:.75rem clamp(1rem,4vw,2rem)}
  .nav .links{width:100%;gap:1.05rem;justify-content:flex-start}
  .nav .links a{font-size:.58rem;letter-spacing:.15em}
}

/* ══ LANDING ══════════════════════════════════════ */
.landing{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:5vh clamp(1.2rem,4vw,3rem);position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#4aa6ea 0%,#7cc3f2 26%,#b3dcf7 56%,#dceefb 82%,#eaf6fe 100%)}
.landing>*:not(.sky){position:relative;z-index:2}
.landing .glow{display:none}
@keyframes glowIn{to{opacity:1}}
.landing .eyebrow{opacity:0;animation:fade .9s .3s forwards;color:#0d3f77}
h1.brandmark{font-family:'Anton',sans-serif;text-transform:uppercase;font-weight:400;
  font-size:clamp(2.9rem,.4rem + 10.4vw,8.6rem);line-height:.9;letter-spacing:-.03em;
  margin:1.1rem 0 0;max-width:11ch}
h1.brandmark .ln{display:block}
h1.brandmark .w{display:inline-block;margin-right:.14em;
  opacity:0;transform:translateY(.4em) scale(1.26);filter:blur(16px);
  animation:slam .95s cubic-bezier(.14,.9,.24,1) forwards;
  animation-delay:calc(.45s + var(--i)*.135s)}
@keyframes slam{55%{filter:blur(0)}to{opacity:1;transform:none;filter:blur(0)}}
h1.brandmark{color:#0a2440}
h1.brandmark .hot{color:#fff;text-shadow:0 6px 34px rgba(10,40,80,.30)}
.landing .tagline{margin-top:1.3rem;max-width:38ch;color:rgba(10,36,64,.78);
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(1.1rem,.9rem + .7vw,1.5rem);line-height:1.5;
  opacity:0;animation:fade 1.2s 1.5s forwards}
@keyframes fade{to{opacity:1}}

/* the two squares */
.squares{display:flex;gap:clamp(1rem,2.6vw,2rem);margin-top:clamp(2rem,4.5vh,3.2rem);
  flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fade 1.1s 1.9s forwards}
.sq{position:relative;width:clamp(9.5rem,22vw,12.5rem);aspect-ratio:1;display:grid;place-items:center;
  border:2px solid #0a2440;color:#0a2440;background:rgba(255,255,255,.42);
  backdrop-filter:blur(3px);overflow:hidden;isolation:isolate;
  box-shadow:0 14px 40px -22px rgba(8,34,64,.55);
  transition:color .45s cubic-bezier(.16,1,.3,1),border-color .45s,transform .45s cubic-bezier(.16,1,.3,1)}
.sq span{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.15rem,.8rem + 1.5vw,2.1rem);line-height:1;position:relative;z-index:2}
.sq::before{content:'';position:absolute;inset:0;background:var(--accent);z-index:1;
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sq:hover,.sq:focus-visible{border-color:var(--accent);color:#fff;transform:translateY(-6px);outline:none}
.sq:hover::before,.sq:focus-visible::before{transform:scaleY(1)}
.sq .idx{position:absolute;top:.7rem;left:.8rem;z-index:2;
  font-family:'Inter',sans-serif;font-size:.6rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(10,36,64,.7);transition:color .45s}
.sq:hover .idx{color:#fff}


/* ══ STORIES INDEX ════════════════════════════════ */
.page-head{padding:clamp(4rem,14vh,9rem) 0 clamp(2rem,6vh,4rem)}
.page-head h1{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(3rem,.8rem + 12vw,10rem);line-height:.86;letter-spacing:-.035em}
.page-head .sub{margin-top:1.4rem;color:var(--dim);max-width:40ch}

.story-list{border-top:1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  padding-bottom:clamp(4rem,12vh,8rem)}
.story-row{display:block;position:relative;padding:clamp(2rem,5vh,3.4rem) 0;
  border-bottom:1px solid color-mix(in srgb, var(--fg) 16%, transparent);overflow:hidden}
.story-row .inner{display:grid;grid-template-columns:6rem 1fr;gap:clamp(1rem,3vw,2.6rem);
  align-items:start;position:relative;z-index:2;
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.story-row:hover .inner{transform:translateX(clamp(.4rem,1.4vw,1.2rem))}
.story-row .n{font-family:'Anton',sans-serif;font-size:clamp(2.2rem,1rem + 3.4vw,4rem);
  line-height:.8;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb, var(--fg) 42%, transparent);
  transition:color .45s,-webkit-text-stroke-color .45s}
.story-row:hover .n{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.story-row h2{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.6rem,1rem + 3vw,3.4rem);line-height:.98;letter-spacing:-.028em;
  max-width:20ch;transition:color .45s}
.story-row:hover h2{color:var(--accent)}
.story-row .dek{margin-top:.9rem;color:var(--dim);max-width:52ch;font-size:.98rem}
.story-row .meta{margin-top:1rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.story-row .go{position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:2;
  font-family:'Anton',sans-serif;font-size:1.4rem;color:var(--accent);
  opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.story-row:hover .go{opacity:1;transform:translateY(-50%) translateX(-.3rem)}
@media (max-width:640px){
  .story-row .inner{grid-template-columns:1fr;gap:.6rem}
  .story-row .go{display:none}
}

/* ══ SONGS ════════════════════════════════════════ */
.player{margin-top:clamp(2.4rem,6vh,3.6rem);max-width:46rem;
  border:2px solid color-mix(in srgb, var(--fg) 22%, transparent);padding:.75rem;
  background:color-mix(in srgb, var(--fg) 4%, transparent)}
.player iframe{display:block;width:100%;height:min(70svh,520px);border:0;border-radius:2px}
.player.video{max-width:60rem}
.player.video iframe{aspect-ratio:16/9;height:auto}
.vid-title{margin-top:1.4rem;max-width:46rem;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.05rem,.9rem + .9vw,1.7rem);line-height:1.08;letter-spacing:-.02em}
@media (max-width:640px){.player iframe{height:min(64svh,420px)}}
.player-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1rem;max-width:46rem;align-items:center}

/* ══ SONGS (placeholder) ══════════════════════════ */
.holding{min-height:64svh;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:clamp(4rem,10vh,7rem)}
.holding .big{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.8rem,1rem + 4vw,4rem);line-height:1;letter-spacing:-.03em;max-width:18ch}
.holding p{margin-top:1.6rem;color:var(--dim);max-width:44ch}
.backlink{display:inline-block;margin-top:2.6rem;font-family:'Inter',sans-serif;font-size:.66rem;
  font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--accent);padding-bottom:.3rem}

/* ══ SHARED STORY TYPOGRAPHY ══════════════════════ */
[data-reveal]{opacity:0;transform:translateY(2.2rem);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}

section{padding:11vh 0}
p+p{margin-top:1.3em}
em{font-style:italic;font-family:'Instrument Serif',Georgia,serif;font-size:1.1em}
strong{font-weight:600;color:var(--accent)}
.lead{font-size:clamp(1.2rem,.98rem + .85vw,1.62rem);line-height:1.5;font-weight:300}

.hero{min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  padding:6rem clamp(1.2rem,4vw,3rem) 5rem;position:relative;overflow:hidden}
.hero .glow{position:absolute;width:120vw;height:120vw;left:58%;top:-6%;
  transform:translate(-50%,0);pointer-events:none;
  background:radial-gradient(circle,rgba(255,250,225,.85),rgba(190,225,255,.35) 38%,transparent 70%);
  filter:blur(40px);opacity:0;animation:glowIn 2.6s .5s forwards}
.hero .top{opacity:0;animation:fade .9s .35s forwards}
h1.title{font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(2.6rem,.4rem + 10.6vw,9.4rem);line-height:.95;letter-spacing:-.028em;
  text-transform:uppercase;margin:1.6rem 0}
h1.title .ln{display:block}
h1.title .w{display:inline-block;margin-right:.16em;
  opacity:0;transform:translateY(.42em) scale(1.28);filter:blur(16px);
  animation:slam .95s cubic-bezier(.14,.9,.24,1) forwards;
  animation-delay:calc(.55s + var(--i)*.115s)}
h1.title .hot{color:var(--accent)}
.hero-dek{max-width:44ch;color:var(--dim);font-size:clamp(1.04rem,.88rem + .5vw,1.28rem);
  line-height:1.6;opacity:0;animation:fade 1.2s 1.75s forwards}
.hero-foot{margin-top:3rem;display:flex;gap:2rem;flex-wrap:wrap;opacity:0;
  animation:fade 1s 2.2s forwards}

.card{min-height:80svh;display:flex;align-items:center;padding:10vh clamp(1.2rem,4vw,3rem)}
.card q,.card .big{quotes:none;display:block;font-family:'Anton',sans-serif;font-weight:400;
  text-transform:uppercase;font-size:clamp(2rem,.5rem + 7.2vw,6.2rem);line-height:.94;
  letter-spacing:-.03em;max-width:17ch}
.card .w{display:inline-block;margin-right:.14em;opacity:0;transform:translateY(.44em) scale(1.14);
  filter:blur(12px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s;
  transition-delay:calc(var(--i)*.062s)}
.card.in .w{opacity:1;transform:none;filter:blur(0)}
.card .after{margin-top:2rem;max-width:40ch;color:var(--dim);font-size:1.02rem}
.card.hot q,.card.hot .big{color:var(--accent)}

.msg{border:1px solid color-mix(in srgb, var(--fg) 30%, transparent);padding:1.9rem 1.6rem;
  background:rgba(255,255,255,.42)}
.msg .mono{margin-bottom:1.1rem;display:block}
.msg .body{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.25rem,1rem + 1vw,1.75rem);
  line-height:1.48;font-style:italic}
.msg .hit{color:var(--accent);font-style:italic;border-bottom:2px solid var(--accent);padding-bottom:.06em}

.pullbig{margin:clamp(3rem,9vh,6rem) 0;max-width:24ch;font-family:'Anton',sans-serif;
  text-transform:uppercase;font-size:clamp(1.5rem,1rem + 2.6vw,3.2rem);line-height:1.02;
  letter-spacing:-.025em;color:var(--accent)}

.signs-head{min-height:76svh;display:flex;align-items:center;padding:0 clamp(1.2rem,4vw,3rem)}
.signs-head h2{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(2.6rem,.6rem + 10.4vw,9.4rem);line-height:.86;letter-spacing:-.035em}
.signs-head .sub{margin-top:1.6rem;color:var(--dim);max-width:34ch}

.sign{padding:14vh 0;position:relative;overflow:hidden}
.sign .ghost{position:absolute;right:-.06em;top:50%;font-family:'Anton',sans-serif;
  font-size:clamp(13rem,40vw,34rem);line-height:.7;opacity:.07;pointer-events:none;
  user-select:none;will-change:transform}
.sign h3{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.9rem,.9rem + 4.2vw,4.4rem);line-height:.96;letter-spacing:-.03em;
  margin:.9rem 0 2rem;max-width:16ch}
.sign .num{font-family:'Anton',sans-serif;font-size:1.1rem;letter-spacing:.1em;color:var(--accent)}
.sign-body{max-width:var(--measure);color:var(--dim)}
.sign-body strong{color:var(--fg);font-weight:600}
.inline-pull{margin:2.8rem 0;max-width:26ch;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.2rem,.95rem + 1.5vw,2.2rem);line-height:1.05;letter-spacing:-.02em;color:var(--accent)}
.case{margin:2.4rem 0;max-width:var(--measure);border-left:3px solid var(--accent);padding-left:1.4rem}
.case .mono{display:block;margin-bottom:.8rem;color:var(--accent)}
.case p{font-size:.98em;color:var(--dim)}

.scripture{margin:3rem 0;max-width:var(--measure)}
.scripture .ref{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:1.05rem;display:block;margin-bottom:1rem;color:var(--accent)}
.scripture p{font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.14rem,.95rem + .6vw,1.44rem);line-height:1.58;font-style:italic}

.signoff{min-height:80svh;display:grid;place-items:center;text-align:center;padding:0 1.2rem}
.signoff q{quotes:none;display:block;font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(3rem,.6rem + 13vw,12rem);line-height:.84;letter-spacing:-.045em;color:var(--accent)}
.signoff .w{display:inline-block;margin-right:.12em;opacity:0;transform:translateY(.5em) scale(1.3);
  filter:blur(22px);transition:all 1.15s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*.17s)}
.signoff.in .w{opacity:1;transform:none;filter:blur(0)}
.signoff .glyph{font-size:clamp(2.6rem,1rem + 7vw,6rem);line-height:1.2}

/* next / prev story */
.storynav{border-top:1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  padding:clamp(3rem,8vh,5rem) 0}
.storynav a{display:block}
.storynav .lbl{margin-bottom:.9rem;display:block}
.storynav .t{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.4rem,1rem + 2.2vw,2.8rem);line-height:1;letter-spacing:-.025em;
  max-width:18ch;transition:color .4s}
.storynav a:hover .t{color:var(--accent)}

footer{padding:3.4rem 0 5rem;border-top:1px solid color-mix(in srgb, var(--fg) 16%, transparent)}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.9rem;align-items:center}
footer a:hover{color:var(--accent)}

@media (max-width:640px){
  section{padding:8vh 0}
  .sign{padding:10vh 0}
  .card{min-height:auto;padding:14vh clamp(1.2rem,4vw,3rem)}
}
html.reduced *,html.reduced *::before,html.reduced *::after{animation:none!important;transition:none!important}
html.reduced [data-reveal],html.reduced .w{opacity:1!important;transform:none!important;filter:none!important}
html.reduced .sky .band{animation:none}
html.reduced .glow,html.reduced .top,html.reduced .eyebrow,html.reduced .hero-dek,
html.reduced .hero-foot,html.reduced .squares,html.reduced .tagline{opacity:1}

/* ══ DRIFTING CLOUDS (landing hero) ═══════════════ */
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sky .band{position:absolute;left:0;right:0;background-repeat:repeat-x;
  will-change:background-position}
.sky .far{top:6%;height:44%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271100%27%20height%3D%27300%27%20viewBox%3D%270%200%201100%20300%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27160%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%2726%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%27%23ffffff%27%20opacity%3D%27.55%27%20filter%3D%27url%28%23b%29%27%3E%3Cellipse%20cx%3D%27120%27%20cy%3D%27170%27%20rx%3D%27150%27%20ry%3D%2734%27%2F%3E%3Cellipse%20cx%3D%27330%27%20cy%3D%27150%27%20rx%3D%27120%27%20ry%3D%2728%27%2F%3E%3Cellipse%20cx%3D%27560%27%20cy%3D%27175%27%20rx%3D%27170%27%20ry%3D%2732%27%2F%3E%3Cellipse%20cx%3D%27820%27%20cy%3D%27145%27%20rx%3D%27130%27%20ry%3D%2726%27%2F%3E%3Cellipse%20cx%3D%271000%27%20cy%3D%27180%27%20rx%3D%27140%27%20ry%3D%2730%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:1100px 100%;
  opacity:.55;animation:driftFar 150s linear infinite}
.sky .mid{top:20%;height:52%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27900%27%20height%3D%27340%27%20viewBox%3D%270%200%20900%20340%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27160%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%2720%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%27%23ffffff%27%20opacity%3D%27.78%27%20filter%3D%27url%28%23b%29%27%3E%3Cellipse%20cx%3D%27140%27%20cy%3D%27210%27%20rx%3D%27140%27%20ry%3D%2752%27%2F%3E%3Cellipse%20cx%3D%27280%27%20cy%3D%27175%27%20rx%3D%27110%27%20ry%3D%2760%27%2F%3E%3Cellipse%20cx%3D%27420%27%20cy%3D%27205%27%20rx%3D%27150%27%20ry%3D%2748%27%2F%3E%3Cellipse%20cx%3D%27620%27%20cy%3D%27180%27%20rx%3D%27120%27%20ry%3D%2756%27%2F%3E%3Cellipse%20cx%3D%27790%27%20cy%3D%27215%27%20rx%3D%27135%27%20ry%3D%2750%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:900px 100%;
  opacity:.7;animation:driftMid 98s linear infinite}
.sky .near{bottom:-4%;height:56%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27760%27%20height%3D%27380%27%20viewBox%3D%270%200%20760%20380%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27160%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%2716%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%27%23ffffff%27%20opacity%3D%27.95%27%20filter%3D%27url%28%23b%29%27%3E%3Cellipse%20cx%3D%27120%27%20cy%3D%27265%27%20rx%3D%27150%27%20ry%3D%2766%27%2F%3E%3Cellipse%20cx%3D%27260%27%20cy%3D%27225%27%20rx%3D%27120%27%20ry%3D%2774%27%2F%3E%3Cellipse%20cx%3D%27410%27%20cy%3D%27260%27%20rx%3D%27165%27%20ry%3D%2762%27%2F%3E%3Cellipse%20cx%3D%27610%27%20cy%3D%27235%27%20rx%3D%27130%27%20ry%3D%2770%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:760px 100%;
  opacity:.85;animation:driftNear 64s linear infinite}
@keyframes driftFar{from{background-position:0 0}to{background-position:-1100px 0}}
@keyframes driftMid{from{background-position:0 0}to{background-position:-900px 0}}
@keyframes driftNear{from{background-position:0 0}to{background-position:-760px 0}}

/* the sun, just off-frame */
.sky .sun{position:absolute;top:-22%;left:64%;width:70vw;height:70vw;
  transform:translate(-50%,0);border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,214,.95),rgba(255,238,190,.42) 34%,transparent 68%);
  filter:blur(26px)}

/* inner pages: a still wash, so type stays crisp */
.wash{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271100%27%20height%3D%27300%27%20viewBox%3D%270%200%201100%20300%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27b%27%20x%3D%27-30%25%27%20y%3D%27-30%25%27%20width%3D%27160%25%27%20height%3D%27160%25%27%3E%3CfeGaussianBlur%20stdDeviation%3D%2726%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%27%23ffffff%27%20opacity%3D%27.55%27%20filter%3D%27url%28%23b%29%27%3E%3Cellipse%20cx%3D%27120%27%20cy%3D%27170%27%20rx%3D%27150%27%20ry%3D%2734%27%2F%3E%3Cellipse%20cx%3D%27330%27%20cy%3D%27150%27%20rx%3D%27120%27%20ry%3D%2728%27%2F%3E%3Cellipse%20cx%3D%27560%27%20cy%3D%27175%27%20rx%3D%27170%27%20ry%3D%2732%27%2F%3E%3Cellipse%20cx%3D%27820%27%20cy%3D%27145%27%20rx%3D%27130%27%20ry%3D%2726%27%2F%3E%3Cellipse%20cx%3D%271000%27%20cy%3D%27180%27%20rx%3D%27140%27%20ry%3D%2730%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:1400px auto;background-repeat:repeat-x;
  background-position:center 8%}

html.reduced .sky .band{animation:none}

/* ══ COMMUNITY ════════════════════════════════════ */
.compose{max-width:46rem;margin-top:clamp(2rem,5vh,3rem);
  border:2px solid color-mix(in srgb, var(--fg) 24%, transparent);
  background:rgba(255,255,255,.5);padding:clamp(1.1rem,3vw,1.6rem)}
.compose label{display:block;margin-bottom:.5rem}
.compose input,.compose textarea{width:100%;font-family:'Inter',sans-serif;font-weight:300;
  font-size:1rem;color:var(--fg);background:rgba(255,255,255,.85);
  border:1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  padding:.7rem .85rem;border-radius:2px;transition:border-color .25s}
.compose input:focus,.compose textarea:focus{outline:none;border-color:var(--accent)}
.compose textarea{min-height:8.5rem;resize:vertical;line-height:1.6}
.compose .row{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:1rem}
.compose .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.count{font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}
.count.over{color:#c1121f;font-weight:600}
button.post{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.05rem;line-height:1;color:#fff;background:var(--accent);border:0;
  padding:.85rem 1.5rem;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s}
button.post:hover{transform:translateY(-2px)}
button.post:disabled{opacity:.45;cursor:not-allowed;transform:none}
.notice{margin-top:.9rem;font-size:.92rem;color:var(--accent);min-height:1.2em}
.notice.bad{color:#c1121f}

.feed{margin-top:clamp(2.6rem,7vh,4rem);max-width:46rem}
.feed .empty{color:var(--dim);font-style:italic;
  font-family:'Instrument Serif',Georgia,serif;font-size:1.2rem}
.post{padding:1.4rem 0;border-top:1px solid color-mix(in srgb, var(--fg) 16%, transparent)}
.post .head{display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.6rem}
.post .who{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.02em;
  font-size:1.05rem;line-height:1}
.post .when{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim)}
.post .body{white-space:pre-wrap;overflow-wrap:anywhere}
.post .del{margin-left:auto;font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:#c1121f;background:none;border:0;cursor:pointer;padding:.2rem}
.post .del:hover{text-decoration:underline}

.adminbar{max-width:46rem;margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.adminbar input{flex:1;min-width:12rem;font-family:'Inter',sans-serif;font-size:.9rem;
  padding:.55rem .7rem;border:1px solid color-mix(in srgb, var(--fg) 26%, transparent);
  background:rgba(255,255,255,.85);color:var(--fg);border-radius:2px}
.adminbar button{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;padding:.6rem 1rem;border:1px solid var(--fg);background:none;
  color:var(--fg);cursor:pointer}
.adminbar button:hover{background:var(--fg);color:var(--bg)}