/* ============================================================
   matsurika.quest -- a field journal of small attentions
   Honeyed-neutral, grainy-textured, parallax book-scholarly.
   ============================================================ */

:root{
  --cream-wove:#f5e9cf;
  --dust-jacket:#ead6a8;
  --honey-amber:#d9b873;
  --aged-gilt:#a87f3a;
  --faded-ink:#8b6f3a;
  --bookbinder:#3a2e1f;
  --dust-shadow:#1a1208;
  --page-edge:#fdf6e3;
  --squiggle:#7a5a2a;
  --measure:32rem;
  --ease-ink:cubic-bezier(0.22,0.61,0.36,1.0);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--cream-wove);
  color:var(--bookbinder);
  font-family:"Lora",Georgia,serif;
  font-size:1.125rem;
  line-height:1.78;
  overflow-x:hidden;
  position:relative;
}

/* coarse grain at the document base */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 30% 20%, rgba(168,127,58,0.10), transparent 60%),
             radial-gradient(circle at 75% 70%, rgba(217,184,115,0.12), transparent 55%);
}

/* ---------- Grain layers ---------- */
.grain-fine,.grain-coarse{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
}
.grain-fine{ z-index:60; opacity:0.045; mix-blend-mode:multiply; }
.grain-coarse{ z-index:1; opacity:0.025; mix-blend-mode:multiply; }

/* ---------- Progress rule ---------- */
.progress-rail{
  position:fixed;
  top:0; left:0;
  width:1px;
  height:100vh;
  background:rgba(58,46,31,0.12);
  z-index:70;
}
.progress-fill{
  display:block;
  width:1px;
  height:0%;
  background:var(--honey-amber);
  transition:height 80ms linear;
}

/* ---------- Running head ---------- */
.running-head{
  position:fixed;
  top:1.6rem; right:2rem;
  font-family:"JetBrains Mono",monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--faded-ink);
  z-index:70;
  transition:opacity 500ms ease;
}

/* ============================================================
   SPREAD SCAFFOLD
   ============================================================ */
.spread{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
}

.layer{ position:absolute; inset:0; will-change:transform; }
.layer--bg{ z-index:1; }
.layer--fg{ z-index:5; pointer-events:none; }
.layer--mid{ position:relative; z-index:3; width:100%; }

/* ---------- Gradient-mesh backgrounds ---------- */
.mesh::before{
  content:"";
  position:absolute;
  inset:-30%;
  transform:scale(1.4);
  filter:blur(80px);
  animation:meshturn 240s linear infinite;
}
@keyframes meshturn{ to{ transform:scale(1.4) rotate(360deg); } }

.mesh--a::before{
  background:
    radial-gradient(circle at 20% 25%, #ead6a8 0%, transparent 45%),
    radial-gradient(circle at 80% 30%, #d9b873 0%, transparent 50%),
    conic-gradient(from 40deg at 60% 70%, #f5e9cf, #ead6a8, #d9b873, #f5e9cf);
}
.mesh--b::before{
  background:
    radial-gradient(circle at 70% 20%, #d9b873 0%, transparent 48%),
    radial-gradient(circle at 25% 75%, #ead6a8 0%, transparent 52%),
    conic-gradient(from 120deg at 40% 50%, #f5e9cf, #d9b873, #ead6a8, #f5e9cf);
}
.mesh--c::before{
  background:
    radial-gradient(circle at 50% 15%, #ead6a8 0%, transparent 50%),
    radial-gradient(circle at 15% 60%, #d9b873 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, #ead6a8 0%, transparent 50%),
    conic-gradient(from 200deg at 55% 55%, #f5e9cf, #ead6a8, #d9b873, #f5e9cf);
}
.mesh--d::before{
  background:
    radial-gradient(circle at 30% 70%, #d9b873 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, #ead6a8 0%, transparent 48%),
    conic-gradient(from 280deg at 45% 60%, #f5e9cf, #d9b873, #ead6a8, #f5e9cf);
}
.mesh--e::before{
  background:
    radial-gradient(circle at 60% 75%, #ead6a8 0%, transparent 50%),
    radial-gradient(circle at 20% 20%, #d9b873 0%, transparent 46%),
    conic-gradient(from 60deg at 65% 45%, #f5e9cf, #ead6a8, #d9b873, #f5e9cf);
}
.mesh--f::before{
  background:
    radial-gradient(circle at 80% 60%, #d9b873 0%, transparent 50%),
    radial-gradient(circle at 30% 30%, #ead6a8 0%, transparent 50%),
    conic-gradient(from 160deg at 50% 50%, #f5e9cf, #d9b873, #ead6a8, #f5e9cf);
}
.mesh--colophon::before{
  background:
    radial-gradient(circle at 50% 40%, #ead6a8 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, #d9b873 0%, transparent 45%),
    radial-gradient(circle at 80% 20%, #d9b873 0%, transparent 45%),
    conic-gradient(from 0deg at 50% 50%, #f5e9cf, #ead6a8, #d9b873, #ead6a8, #f5e9cf);
}

/* ---------- Foreground botanical sprigs ---------- */
.layer--fg svg{
  position:absolute;
  opacity:0.5;
  overflow:visible;
}
.sprig{ top:8%; right:6%; width:clamp(120px,16vw,220px); }
.sprig--hero{ top:6%; right:8%; width:clamp(160px,20vw,260px); }
.frond--right{ top:-4%; right:4%; width:clamp(110px,13vw,170px); }
.frond--left{ top:-2%; left:4%; width:clamp(110px,13vw,170px); }
.seedpod{ bottom:8%; left:6%; width:clamp(110px,12vw,180px); }
.folded-paper{ top:12%; left:8%; width:clamp(120px,14vw,200px); }

/* ---------- Dried-petal confetti ---------- */
.petal{
  position:absolute;
  width:14px;
  height:22px;
  background:var(--honey-amber);
  opacity:0.35;
  border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;
  transform:rotate(-15deg);
}
.petal--1{ top:18%; left:12%; background:var(--aged-gilt); transform:rotate(-22deg) scale(0.9); }
.petal--2{ top:42%; left:62%; background:var(--honey-amber); transform:rotate(8deg) scale(1.1); }
.petal--3{ top:68%; left:24%; background:var(--dust-jacket); transform:rotate(-40deg) scale(0.8); }
.petal--4{ top:30%; left:84%; background:var(--aged-gilt); transform:rotate(15deg); }
.petal--5{ top:74%; left:74%; background:var(--honey-amber); transform:rotate(-8deg) scale(0.95); }

/* ============================================================
   FRONTISPIECE
   ============================================================ */
.spread--frontispiece{
  background:linear-gradient(135deg, #f5e9cf 0%, #ead6a8 55%, #d9b873 120%);
  align-items:flex-end;
}
.spread--frontispiece .layer--bg{
  background:radial-gradient(circle at 60% 30%, rgba(253,246,227,0.55), transparent 60%);
}
.frontispiece-content{
  padding:0 clamp(1.5rem,7vw,7rem) clamp(3rem,8vh,7rem);
  max-width:60rem;
}
.kicker{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:clamp(0.95rem,1.6vw,1.15rem);
  color:var(--aged-gilt);
  letter-spacing:0.01em;
  margin-bottom:1.2rem;
}
.fleuron-dots{ color:var(--aged-gilt); font-size:1.1em; margin-right:0.3em; }
.frontispiece-title{
  font-family:"Fraunces",Georgia,serif;
  font-optical-sizing:auto;
  font-weight:900;
  font-size:clamp(3.2rem,9.5vw,8.5rem);
  line-height:0.96;
  letter-spacing:-0.02em;
  color:var(--dust-shadow);
  margin-bottom:1.6rem;
}
.frontispiece-title .word{ display:inline; }
.frontispiece-title .word--dot{ color:var(--aged-gilt); }
.frontispiece-lede{
  font-family:"Lora",Georgia,serif;
  font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  line-height:1.6;
  max-width:38rem;
  color:var(--bookbinder);
}
.scroll-cue{
  margin-top:2.4rem;
  font-family:"JetBrains Mono",monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--faded-ink);
  animation:nudge 3.4s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:translateY(0); opacity:0.7; } 50%{ transform:translateY(6px); opacity:1; } }

/* ============================================================
   CHAPTER SPREADS
   ============================================================ */
.chapter{ padding:8vh 0; }
.chapter-body{
  max-width:var(--measure);
  margin-left:clamp(1.5rem,12vw,11rem);
  padding-right:1.5rem;
  position:relative;
}
@media(min-width:1100px){
  .chapter-body{ margin-left:clamp(4rem,16vw,14rem); }
}
.chapter-numeral{
  position:absolute;
  top:-3.4rem; left:-0.1rem;
  font-family:"Fraunces",Georgia,serif;
  font-weight:900;
  font-size:clamp(2.4rem,5.5vw,4.8rem);
  color:rgba(168,127,58,0.28);
  letter-spacing:-0.02em;
  pointer-events:none;
}
.chapter-title{
  font-family:"Fraunces",Georgia,serif;
  font-optical-sizing:auto;
  font-weight:900;
  font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.08;
  letter-spacing:-0.015em;
  color:var(--dust-shadow);
  margin-bottom:1.8rem;
}
.chapter-prose{
  margin-bottom:1.4rem;
  color:var(--bookbinder);
}
.chapter-prose em{ color:var(--aged-gilt); }

/* ---------- Drop-cap ---------- */
.dropcap{
  float:left;
  font-family:"Fraunces",Georgia,serif;
  font-weight:900;
  font-size:5.2rem;
  line-height:0.82;
  padding:0.18rem 0.7rem 0 0;
  color:var(--honey-amber);
  -webkit-text-stroke:1px var(--aged-gilt);
  background:linear-gradient(180deg, var(--honey-amber), var(--honey-amber));
  -webkit-background-clip:text;
  background-clip:text;
}

/* ---------- Footnote anchors / squiggle underline ---------- */
.fn-anchor{
  font-family:"Fraunces",Georgia,serif;
  font-size:0.62em;
  vertical-align:super;
  color:var(--aged-gilt);
  text-decoration:none;
  margin-left:1px;
  position:relative;
}
/* the anchor word gets a span wrapper via JS for the squiggle */
.squiggle-host{
  position:relative;
  display:inline;
  background-image:linear-gradient(transparent calc(100% - 2px), var(--squiggle) calc(100% - 2px));
  background-size:0% 100%;
  background-repeat:no-repeat;
  transition:background-size 600ms var(--ease-ink);
}
.squiggle-host.drawn{ background-size:100% 100%; }

/* ============================================================
   MARGINALIA RAIL
   ============================================================ */
.marginalia{
  position:absolute;
  top:0; right:0;
  width:280px;
  height:100%;
  padding:14vh 2rem 0 1rem;
  background:linear-gradient(90deg, transparent, rgba(234,214,168,0.45));
  z-index:6;
  pointer-events:none;
}
.footnote{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:0.82rem;
  line-height:1.55;
  color:var(--faded-ink);
  margin-bottom:1.4rem;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 600ms var(--ease-ink), transform 600ms var(--ease-ink);
}
.footnote.active{ opacity:1; transform:translateY(0); }
.footnote em{ color:var(--aged-gilt); }
.fn-num{ font-family:"JetBrains Mono",monospace; font-size:0.7rem; color:var(--aged-gilt); margin-right:0.3em; font-style:normal; }
.fn-mark{ color:var(--aged-gilt); margin-right:0.2em; }

@media(min-width:1100px){
  .marginalia{ position:sticky; }
}
@media(max-width:1099px){
  .marginalia{
    position:static;
    width:100%;
    height:auto;
    padding:1.2rem 0 0 1.5rem;
    margin-top:1.8rem;
    background:none;
    border-left:1px solid rgba(168,127,58,0.4);
  }
  .footnote{ opacity:1; transform:none; }
}

/* ============================================================
   COLOPHON
   ============================================================ */
.spread--colophon{
  text-align:center;
  background:linear-gradient(135deg, #f5e9cf, #ead6a8 70%, #d9b873 130%);
}
.colophon-content{
  max-width:36rem;
  margin:0 auto;
  padding:4rem 1.5rem;
}
.closed-book{ width:clamp(130px,16vw,200px); margin:0 auto 2rem; display:block; opacity:0.8; }
.colophon-text{
  font-family:"Lora",Georgia,serif;
  font-style:italic;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--bookbinder);
  margin-bottom:1.6rem;
}
.colophon-text strong{ font-style:normal; color:var(--aged-gilt); }
.colophon-meta{
  font-family:"JetBrains Mono",monospace;
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--faded-ink);
  margin-bottom:2.6rem;
}
.colophon-cta{
  display:inline-block;
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-size:clamp(1.3rem,3vw,2rem);
  color:var(--dust-shadow);
  text-decoration:none;
  letter-spacing:-0.01em;
  transition:color 400ms ease, letter-spacing 400ms ease;
}
.colophon-cta:hover{ color:var(--aged-gilt); letter-spacing:0.01em; }
.colophon-cta .fleuron-dots{ display:block; margin-bottom:0.4rem; }

/* ---------- reveal animation hook ---------- */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
  transition:opacity 700ms var(--ease-ink), transform 700ms var(--ease-ink);
}

@media(prefers-reduced-motion:reduce){
  .mesh::before{ animation-duration:600s; }
  .scroll-cue{ animation:none; }
}