/* =====================================================================
   Fox & Cat — theme
   Glass + colour theming lifted from PaperNotes (paper theme removed),
   retuned for a cozy dark reading experience layered over live wallpapers.
   ===================================================================== */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }

:root{
  --ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --read:'Newsreader',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;

  /* cozy dark base — the wallpaper shows behind everything; these tint the glass */
  --canvas:#12141b;
  --ink:#efe9dc;
  --ink-soft:#c4bcab;
  --ink-faint:#8f8776;
  --edge:rgba(239,233,220,.14);
  --edge2:rgba(239,233,220,.08);
  --shadow:rgba(0,0,0,.5);

  /* accent — overwritten per chapter by the mood engine */
  --accent:#e0a15c;
  --accent-soft:rgba(224,161,92,.16);

  /* glass panels: translucent, blurred, with an inset highlight */
  --panelS:#1b1e27;
  --cardS:#20242f;
  --panel: color-mix(in oklab, var(--panelS) 62%, transparent);
  --card:  color-mix(in oklab, var(--cardS) 66%, transparent);
  --blur:26px; --sat:1.7;
  --glass-hi: inset 0 1px 0 color-mix(in oklab, #fff 26%, transparent), 0 14px 40px var(--shadow);

  --fs:1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--ui);
  min-height:100vh;
  overflow-x:hidden;
}

::selection{ background:var(--accent-soft); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--edge); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-faint); background-clip:padding-box; }

/* ---- background layers driven by the mood engine ------------------- */
.wall{
  position:fixed; inset:0; z-index:0;
  background-size:cover; background-position:center;
  will-change:opacity; opacity:0;
  transition:opacity 1.25s ease;
  transform:scale(1.04); /* tiny overscan so edges never show during parallax */
}
#scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  transition:background 1.1s ease;
}
#firefly-canvas{
  position:fixed; inset:0; z-index:2; pointer-events:none;
}

/* the reading column & chrome sit above */
.stage{ position:relative; z-index:3; }

/* ---- thin reading-progress bar ------------------------------------- */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--accent); z-index:20;
  box-shadow:0 0 10px var(--accent);
  transition:width .12s linear, background 1s ease;
}

/* ---- top bar ------------------------------------------------------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:15;
  display:flex; align-items:center; gap:12px;
  height:52px; padding:0 18px;
  background:linear-gradient(180deg, color-mix(in oklab,var(--panelS) 55%,transparent), transparent);
  backdrop-filter:blur(8px);
}
.topbar .home{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ink); text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:-.01em;
  padding:6px 8px; border-radius:9px;
}
.topbar .home:hover{ color:var(--accent); }
.topbar .home .glyph{ width:22px; height:22px; color:var(--accent); display:flex; }
.topbar .spacer{ flex:1; }
.topbar .cc{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* =====================================================================
   READER
   ===================================================================== */
.reader{
  max-width:720px;
  margin:0 auto;
  padding:120px 28px 40px;
  animation:rise .5s ease both;
}

/* chapter hero */
.hero{ text-align:center; margin:8px 0 40px; }
.hero .numeral{
  font-family:var(--read); font-weight:300; font-style:italic;
  font-size:clamp(56px,12vw,104px); line-height:.9;
  color:var(--accent); letter-spacing:.02em;
  filter:drop-shadow(0 4px 24px var(--accent-soft));
}
.hero .kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint); margin:14px 0 6px;
}
.hero .tagline{
  font-family:var(--read); font-style:italic; font-size:19px;
  color:var(--ink-soft); max-width:38ch; margin:0 auto;
}
.hero .art{ width:132px; height:132px; margin:6px auto 4px; color:var(--ink); }
.hero .art svg{ width:100%; height:100%; overflow:visible; }
.float{ animation:float 7s ease-in-out infinite; }
.float.slow{ animation-duration:9s; }

/* the glass reading page */
.page{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:18px;
  box-shadow:var(--glass-hi);
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  padding:44px clamp(22px,5vw,52px);
}

/* ---- markdown reading typography (from PaperNotes .md) -------------- */
.md{ font-family:var(--read); color:var(--ink); font-size:calc(19.5px*var(--fs)); line-height:1.8; }
.md > *:first-child{ margin-top:0; }
.md p{ margin:0 0 1.15em; }
.md strong{ font-weight:600; color:var(--ink); }
.md em{ font-style:italic; }
.md del{ color:var(--ink-faint); }
.md h1,.md h2,.md h3{ font-family:var(--read); font-weight:560; line-height:1.25; letter-spacing:-.01em; text-wrap:balance; }
.md h2{ font-size:1.4em; margin:1.7em 0 .5em; }
.md a{ color:var(--accent); text-decoration-color:var(--accent-soft); text-underline-offset:3px; }
.md a:hover{ text-decoration-color:var(--accent); }
.md blockquote{
  margin:1.4em 0; padding:.2em 0 .2em 1.3em;
  border-left:2px solid var(--accent); color:var(--ink-soft); font-style:italic;
}

/* section breaks (--- in the md) become a cozy motif, per chapter */
.md hr{
  border:none; height:34px; margin:2.1em auto;
  background-repeat:no-repeat; background-position:center; background-size:auto 100%;
  opacity:.85;
}
/* the motif svg is injected per-chapter as a CSS var --divider (data-uri) */
.md hr{ background-image:var(--divider); }

/* first-letter warmth on the opening paragraph */
.md .lede::first-letter{
  font-size:3.1em; line-height:.8; float:left;
  padding:.06em .12em 0 0; color:var(--accent); font-weight:500;
}

/* end-of-chapter block */
.chapter-end{ margin:52px auto 8px; text-align:center; }
.chapter-end .curl{ width:120px; height:96px; margin:0 auto 10px; color:var(--ink-soft); }
.chapter-end .curl svg{ width:100%; height:100%; }
.chapter-end .fin{
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-faint);
}

/* chapter navigation */
.chapnav{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:34px 0 40px; }
.chapnav a{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ui); font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none;
  background:var(--panel); border:1px solid var(--edge); border-radius:11px;
  padding:11px 16px; backdrop-filter:blur(var(--blur));
  transition:border-color .18s, transform .18s;
}
.chapnav a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.chapnav a .mini{ width:20px; height:20px; color:var(--accent); }
.chapnav a.ghost{ color:var(--ink-soft); }

/* =====================================================================
   LANDING
   ===================================================================== */
.cover{
  position:relative; z-index:3;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:80px 24px 40px; text-align:center;
}
.cover .crest{ width:180px; height:150px; margin:0 auto 6px; color:var(--ink); }
.cover .crest svg{ width:100%; height:100%; overflow:visible; }
.cover h1{
  font-family:var(--read); font-weight:400;
  font-size:clamp(44px,9vw,84px); line-height:1;
  margin:8px 0 6px; letter-spacing:-.015em;
}
.cover h1 .amp{ color:var(--accent); font-style:italic; font-weight:300; }
.cover .sub{
  font-family:var(--read); font-style:italic; font-size:clamp(16px,2.6vw,21px);
  color:var(--ink-soft); max-width:34ch; margin:2px auto 4px;
}
.cover .byline{
  font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:10px;
}

.chapters{
  position:relative; z-index:3;
  max-width:940px; margin:0 auto; padding:10px 22px 110px;
  display:grid; gap:18px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:820px){ .chapters{ grid-template-columns:1fr; max-width:460px; } }

.ch-card{
  display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--edge); border-radius:18px;
  box-shadow:var(--glass-hi);
  backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));
  padding:24px 22px 22px;
  transition:transform .22s ease, border-color .22s ease;
}
.ch-card:hover{ transform:translateY(-5px); border-color:var(--c,var(--accent)); }
.ch-card .art{ width:80px; height:80px; color:var(--c,var(--ink)); }
.ch-card .art svg{ width:100%; height:100%; overflow:visible; }
.ch-card .num{
  font-family:var(--read); font-style:italic; font-weight:300; font-size:34px;
  color:var(--c,var(--accent)); line-height:1;
}
.ch-card .who{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint);
}
.ch-card .teaser{
  font-family:var(--read); font-style:italic; font-size:16px; line-height:1.6; color:var(--ink-soft);
  margin:0;
}
.ch-card .go{
  margin-top:auto; font-family:var(--ui); font-size:12.5px; font-weight:700; letter-spacing:.02em;
  color:var(--c,var(--accent)); display:inline-flex; align-items:center; gap:7px;
}

.cover-foot{
  position:relative; z-index:3; text-align:center; padding:0 20px 46px;
  font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em;
}
.cover-foot .km{ opacity:.7; }

/* =====================================================================
   motion
   ===================================================================== */
@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes drift{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-6px) rotate(1deg)} }
@keyframes blink{ 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(.1)} }
.tail{ transform-origin:left center; animation:drift 6s ease-in-out infinite; }

/* the sleepy neko element */
.oneko{
  position:fixed; width:32px; height:32px; z-index:5;
  image-rendering:pixelated; pointer-events:none;
  background-repeat:no-repeat;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .wall{ transition:opacity .2s ease; }
}

@media (max-width:640px){
  .reader{ padding:100px 16px 30px; }
  .page{ padding:30px 20px; border-radius:14px; }
  .md{ font-size:calc(18px*var(--fs)); }
}

/* inline-svg sizing for injected motifs */
.topbar .home .glyph svg,
.hero .art svg,
.chapter-end .curl svg,
.chapnav a .mini svg,
.ch-card .art svg,
.cover .crest svg{ width:100%; height:100%; display:block; }

/* weather (rain/snow) sits just under the fireflies */
#weather-canvas{ position:fixed; inset:0; z-index:2; pointer-events:none; }

/* ambient sound toggle */
.sound-toggle{
  position:fixed; right:16px; bottom:16px; z-index:30;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:var(--ink); 
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  border:1px solid var(--edge);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 6px 20px rgba(0,0,0,0.28);
  transition:transform .2s ease, opacity .2s ease, color .2s ease;
  opacity:0.6;
}
.sound-toggle:hover{ transform:translateY(-1px); opacity:1; }
.sound-toggle[data-on="1"]{ color:var(--accent); opacity:0.92; }
.sound-toggle svg{ width:20px; height:20px; }
@media (max-width:640px){ .sound-toggle{ right:12px; bottom:12px; } }