/* ============================================================
   UNDERSTORY — Field Journal of Wild Places
   Shared stylesheet
   ============================================================ */

:root{
  --moss:#1d2b1a;
  --moss-deep:#0e1a0c;
  --moss-mid:#2f4527;
  --sage:#7d9266;
  --fern:#a8bd87;
  --bark:#3a2a1b;
  --earth:#6e4a2a;
  --earth-light:#8b5a2b;
  --sunlight:#f3e9a8;
  --glow:#fff2bc;
  --cream:#f1ead9;
  --cream-2:#e6dec7;
  --paper:#ece4cd;
  --ink:#0b0f0a;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter Tight','Helvetica Neue',sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
::selection{background:var(--moss);color:var(--sunlight)}
img{max-width:100%;display:block}
a{color:inherit}

/* ----- Custom cursor ----- */
.cursor-dot,.cursor-glow{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);will-change:transform;
}
.cursor-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--ink);mix-blend-mode:difference;
  transition:width .35s,height .35s;
}
.cursor-glow{
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,242,188,.35) 0%,rgba(255,242,188,.08) 35%,transparent 70%);
  filter:blur(8px);mix-blend-mode:screen;
  transition:opacity .4s,width .4s,height .4s;
}
@media (hover:none){.cursor-dot,.cursor-glow{display:none}body{cursor:auto}}

/* ----- Grain overlay ----- */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}
}

/* ----- NAV ----- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 36px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);mix-blend-mode:difference;
}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:500;text-decoration:none}
.nav .brand .mark{
  width:14px;height:14px;border-radius:50%;
  background:var(--sunlight);
  box-shadow:0 0 18px var(--sunlight);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 18px var(--sunlight)}
  50%{transform:scale(.78);box-shadow:0 0 8px var(--sunlight)}
}
.nav ul{display:flex;gap:34px;list-style:none}
.nav a{color:inherit;text-decoration:none;position:relative;padding-bottom:3px}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.7,0,.2,1);
}
.nav a:hover::after, .nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav .meta{font-variant-numeric:tabular-nums}
@media (max-width:880px){
  .nav{padding:18px 18px}
  .nav ul{display:none}
  .nav .meta{display:none}
}

/* ----- Reveal animations ----- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.24s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.32s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.40s}

/* ----- Floating leaves background ----- */
.floating-leaves{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.floating-leaves svg{position:absolute;opacity:.55;animation:leafFloat linear infinite}
@keyframes leafFloat{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--lx,80px),110vh,0) rotate(720deg)}
}

/* ============================================================
   RAIN HERO — full-screen real rain over the forest photo
   ============================================================ */
.hero-rain{
  position:relative;height:100vh;min-height:680px;
  overflow:hidden;background:#0a120a;
}

/* the forest backdrop, color-graded for a rainy day */
.hero-rain .backdrop{
  position:absolute;inset:-2%;
  background-image:url("forest.png");
  background-size:cover;background-position:center;
  filter:brightness(.62) saturate(.78) contrast(1.08) hue-rotate(-6deg);
  /* slow ambient drift — almost imperceptible */
  animation:rainDrift 30s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes rainDrift{
  from{transform:scale(1.02) translate(-4px,-2px)}
  to{transform:scale(1.04) translate(4px,2px)}
}

/* atmospheric mist sweeping across — drifts horizontally */
.hero-rain .mist{
  position:absolute;inset:-10%;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 40% at 30% 40%,rgba(180,200,220,.22),transparent 60%),
    radial-gradient(ellipse 70% 30% at 70% 60%,rgba(170,190,210,.18),transparent 60%);
  filter:blur(40px);
  animation:mistDrift 26s ease-in-out infinite alternate;
}
@keyframes mistDrift{
  from{transform:translate(-3%,0)}
  to{transform:translate(3%,-1%)}
}

/* desaturated cold overlay to push the rainy feeling */
.hero-rain .cold-grade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(40,55,70,.22) 0%,
    rgba(30,45,60,.10) 40%,
    rgba(10,15,20,.30) 100%);
  mix-blend-mode:multiply;
}

/* the rain canvas, full hero */
.hero-rain .rain{
  position:absolute;inset:0;pointer-events:none;
  /* tiny stripe sheen on the glass between viewer & scene */
}

/* faint vignette/darken toward edges */
.hero-rain .vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 35%,rgba(0,0,0,.55) 95%),
    linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 20%,transparent 70%,rgba(0,0,0,.55) 100%);
}

/* hero content */
.hero-content{
  position:relative;z-index:10;height:100%;
  display:grid;grid-template-rows:1fr auto;
  padding:120px 48px 48px;
  color:var(--cream);
}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  display:flex;align-items:center;gap:14px;
  opacity:0;animation:rise .9s .3s cubic-bezier(.2,.7,.2,1) both;
}
.eyebrow .line{width:46px;height:1px;background:currentColor;opacity:.7}

.hero-rain h1{
  font-family:'Fraunces',serif;
  font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(72px,15vw,260px);
  line-height:.86;letter-spacing:-.02em;
  margin-top:24px;
  color:var(--cream);
  text-shadow:
    0 2px 24px rgba(0,0,0,.55),
    0 0 70px rgba(180,200,220,.22);
}
.hero-rain h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-rain h1 .word span{
  display:inline-block;
  transform:translateY(110%);
  animation:wordRise 1.1s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-rain h1 .word:nth-child(1) span{animation-delay:.45s}
.hero-rain h1 .word:nth-child(2) span{animation-delay:.6s}
.hero-rain h1 em{
  font-style:italic;font-weight:300;
  color:#dbe7f0;
  font-variation-settings:"opsz" 144,"SOFT" 100;
}
@keyframes wordRise{to{transform:translateY(0)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.hero-foot{
  display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:end;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;animation:rise 1s 1.4s cubic-bezier(.2,.7,.2,1) both;
}
.hero-foot p{max-width:34ch;line-height:1.7;opacity:.92}
.hero-foot .center{display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-cue{
  width:1px;height:64px;background:linear-gradient(180deg,transparent,var(--cream),transparent);
  position:relative;overflow:hidden;
}
.scroll-cue::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:30%;
  background:#dbe7f0;animation:slide 2s ease-in-out infinite;
}
@keyframes slide{0%{transform:translateY(-100%)}100%{transform:translateY(330%)}}
.hero-foot .right{text-align:right}
.hero-foot .big{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:38px;letter-spacing:-.01em;text-transform:none;
  color:#dbe7f0;line-height:1;
}
/* rare water beads sitting on the "glass" between viewer and scene */
.screen-bead{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:8;
  background:
    /* main bright highlight, upper-left */
    radial-gradient(circle at 32% 28%,
      rgba(255,255,255,.65) 0%,
      rgba(255,255,255,.18) 18%,
      transparent 38%),
    /* dim lower-right shadow inside the bead */
    radial-gradient(circle at 68% 78%,
      rgba(0,0,0,.18) 0%,
      transparent 45%),
    /* a faint refraction tint */
    radial-gradient(circle at 50% 60%,
      rgba(180,200,215,.10) 0%,
      transparent 70%);
  /* the meniscus / 3D bead edge */
  box-shadow:
    inset 0.5px 1px 1.5px rgba(255,255,255,.45),
    inset -1px -1.5px 2px rgba(0,0,0,.28),
    inset 0 0 0 0.5px rgba(255,255,255,.10),
    0 1px 3px rgba(0,0,0,.35),
    0 0 0 0.5px rgba(0,0,0,.12);
  /* refract the scene behind */
  backdrop-filter: blur(1.4px) brightness(1.06) contrast(1.05);
  -webkit-backdrop-filter: blur(1.4px) brightness(1.06) contrast(1.05);
  opacity:0;
  transform:scale(0);
  animation: beadLand .55s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:opacity 1.6s ease-out;
  will-change:transform, opacity, top, height;
}
.screen-bead.fade{opacity:0}
@keyframes beadLand{
  0%   {opacity:0; transform:scale(.2)}
  60%  {opacity:1; transform:scale(1.08)}
  100% {opacity:1; transform:scale(1)}
}
/* a tiny secondary catchlight — pseudo-element for extra realism */
.screen-bead::after{
  content:"";
  position:absolute;
  left:24%; top:18%;
  width:18%; height:14%;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(.5px);
}

@media (max-width:720px){
  .hero-content{padding:110px 22px 30px}
  .hero-foot{grid-template-columns:1fr;gap:24px}
  .hero-foot .center,.hero-foot .right{align-items:flex-start;text-align:left}
}

/* ============================================================
   SECTION PAGE HERO (simpler, for inner pages)
   ============================================================ */
.page-hero{
  position:relative;padding:160px 48px 80px;background:var(--moss-deep);color:var(--cream);
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 80% 10%,rgba(243,233,168,.18),transparent 50%),
    radial-gradient(ellipse at 10% 90%,rgba(125,146,102,.16),transparent 55%);
  pointer-events:none;
}
.page-hero .crumbs{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fern);margin-bottom:30px;display:flex;gap:14px;align-items:center;
}
.page-hero .crumbs a{text-decoration:none}
.page-hero .crumbs span{opacity:.5}
.page-hero h1{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(54px,9vw,140px);
  line-height:.93;letter-spacing:-.025em;
  color:var(--cream);max-width:14ch;
}
.page-hero h1 em{font-style:italic;color:var(--sunlight)}
.page-hero .lede{
  margin-top:30px;max-width:60ch;font-size:18px;line-height:1.6;
  color:rgba(241,234,217,.82);
}
.page-hero .meta{
  display:flex;gap:36px;margin-top:48px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;
}
.page-hero .meta div span{display:block;color:var(--sage);margin-bottom:6px}
.page-hero .meta div b{color:var(--cream);font-weight:500;font-family:'Fraunces',serif;
  font-style:italic;font-size:22px;text-transform:none;letter-spacing:-.01em}

/* ============================================================
   GENERIC LAYOUT
   ============================================================ */
.container{max-width:1240px;margin:0 auto}

/* ============================================================
   EDITORIAL/PROSE
   ============================================================ */
.editorial{padding:140px 48px 120px;background:var(--cream);position:relative}
.editorial::before{
  content:"";position:absolute;top:0;left:0;right:0;height:120px;
  background:linear-gradient(180deg,var(--moss-deep),transparent);
  opacity:.08;pointer-events:none;
}
.ed-grid{display:grid;grid-template-columns:1fr 2.4fr;gap:80px;align-items:start}
.ed-grid .label{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--moss-mid);position:sticky;top:120px;
}
.ed-grid .label .num{
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:74px;display:block;letter-spacing:-.02em;
  color:var(--moss);margin-bottom:6px;line-height:1;
}
.lede{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(28px,3.4vw,52px);line-height:1.18;letter-spacing:-.015em;
  color:var(--moss-deep);
}
.lede em{font-style:italic;color:var(--earth)}
.lede .drop{
  float:left;font-size:1.6em;line-height:.85;
  padding:.05em .12em 0 0;font-weight:400;color:var(--moss);
}
@media (max-width:880px){
  .editorial{padding:90px 22px}
  .ed-grid{grid-template-columns:1fr;gap:24px}
  .ed-grid .label{position:static}
}

/* article body */
.article{padding:90px 48px;background:var(--cream)}
.article-body{max-width:760px;margin:0 auto}
.article-body p{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 24,"SOFT" 50;
  font-size:21px;line-height:1.62;color:var(--ink);
  margin-bottom:30px;letter-spacing:-.005em;
}
.article-body p.drop:first-letter{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:6.2em;line-height:.85;
  float:left;padding:.05em .14em 0 0;color:var(--moss);
}
.article-body h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:46px;line-height:1.05;letter-spacing:-.02em;
  color:var(--moss-deep);margin:60px 0 22px;
}
.article-body h2 em{font-style:italic;color:var(--earth)}
.article-body em{font-style:italic;color:var(--earth)}
.article-body .pull{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:38px;line-height:1.15;letter-spacing:-.015em;
  color:var(--moss-deep);
  border-left:3px solid var(--earth);
  padding:10px 0 10px 28px;margin:50px 0;
  position:relative;
}
.article-body figure{margin:60px 0}
.article-body figure img{border-radius:2px;box-shadow:0 30px 80px -20px rgba(11,15,10,.4)}
.article-body figure figcaption{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--moss-mid);margin-top:16px;line-height:1.6;
}
.article-body .marker{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--earth);margin:40px 0 14px;display:block;
}

/* split-image, treated versions */
.treated{
  width:100%;aspect-ratio:16/9;
  background:url("forest.png") center/cover no-repeat;
  position:relative;overflow:hidden;
}
.treated.warm{filter:saturate(1.35) hue-rotate(-12deg) brightness(1.06)}
.treated.cool{filter:saturate(.5) hue-rotate(20deg) brightness(.78) contrast(1.15)}
.treated.duotone{filter:saturate(0) sepia(.4) hue-rotate(60deg) brightness(.9) contrast(1.3)}
.treated.shadow{filter:brightness(.4) saturate(1.2) contrast(1.3)}

/* ============================================================
   THREE MOVEMENTS
   ============================================================ */
.movements{padding:120px 48px;background:var(--moss-deep);color:var(--cream);position:relative;overflow:hidden}
.movements::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 80% 20%,rgba(243,233,168,.10),transparent 50%),
    radial-gradient(ellipse at 10% 90%,rgba(125,146,102,.18),transparent 55%);
  pointer-events:none;
}
.movements h2{
  font-family:'Fraunces',serif;font-weight:200;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(40px,6vw,90px);line-height:1;letter-spacing:-.02em;
  margin-bottom:80px;max-width:14ch;
}
.movements h2 em{font-style:italic;color:var(--sunlight)}
.mvmts{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;position:relative;z-index:2}
.mvmt{border-top:1px solid rgba(241,234,217,.18);padding-top:28px;transition:border-color .6s}
.mvmt:hover{border-top-color:var(--sunlight)}
.mvmt .idx{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);margin-bottom:18px;display:flex;justify-content:space-between;
}
.mvmt h3{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:62px;line-height:.95;letter-spacing:-.02em;
  margin-bottom:24px;color:var(--cream);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.mvmt:hover h3{transform:translateX(8px)}
.mvmt h3 em{font-style:italic;color:var(--fern)}
.mvmt p{font-size:15px;line-height:1.7;color:rgba(241,234,217,.78);max-width:38ch}
.mvmt .leaf{margin-top:32px;width:60px;height:60px;opacity:.4;transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.mvmt:hover .leaf{opacity:1;transform:rotate(20deg) scale(1.15)}
@media (max-width:880px){.movements{padding:80px 22px}.mvmts{grid-template-columns:1fr;gap:40px}}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{padding:160px 48px;background:var(--cream-2);position:relative;overflow:hidden}
.quote-wrap{max-width:1100px;margin:0 auto;position:relative;z-index:2}
.quote blockquote{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(34px,5.4vw,82px);line-height:1.05;letter-spacing:-.02em;
  color:var(--moss-deep);
}
.quote blockquote .mark{font-size:1.3em;color:var(--earth);display:inline-block;transform:translateY(.1em);margin-right:.05em}
.quote cite{
  display:block;margin-top:48px;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--moss-mid);
}
.quote .deco{
  position:absolute;font-family:'Fraunces',serif;
  font-size:520px;line-height:.8;color:var(--moss);opacity:.06;font-weight:200;
  top:-80px;right:-40px;pointer-events:none;user-select:none;
}
@media (max-width:720px){.quote{padding:90px 22px}.quote .deco{font-size:280px;top:-30px;right:-20px}}

/* ============================================================
   STATS
   ============================================================ */
.stats{padding:140px 48px;background:var(--cream);border-top:1px solid rgba(11,15,10,.08);border-bottom:1px solid rgba(11,15,10,.08)}
.stats-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.stat{border-top:1px solid var(--ink);padding-top:22px}
.stat .num{
  font-family:'Fraunces',serif;font-weight:200;
  font-variation-settings:"opsz" 144,"SOFT" 80;
  font-size:clamp(56px,7vw,108px);line-height:1;
  letter-spacing:-.03em;color:var(--moss-deep);font-variant-numeric:tabular-nums;
}
.stat .num sup{font-size:.4em;vertical-align:top;margin-left:6px;color:var(--earth);font-style:italic}
.stat .lbl{
  margin-top:12px;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--moss-mid);line-height:1.5;
}
@media (max-width:880px){.stats{padding:80px 22px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:32px}}

/* ============================================================
   JOURNAL LIST
   ============================================================ */
.journal{padding:140px 48px;background:var(--cream)}
.journal-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:80px;max-width:1240px;margin-left:auto;margin-right:auto}
.journal-head h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.02em;color:var(--moss-deep);
}
.journal-head h2 em{font-style:italic;color:var(--earth)}
.journal-head .meta{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--moss-mid);text-align:right;line-height:1.7;
}
.entries{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:0}
.entry{
  display:grid;grid-template-columns:120px 200px 1fr auto;gap:40px;align-items:start;
  padding:34px 0;border-top:1px solid rgba(11,15,10,.18);
  text-decoration:none;
  transition:padding-left .6s cubic-bezier(.2,.7,.2,1),background .4s;position:relative;
}
.entry:last-child{border-bottom:1px solid rgba(11,15,10,.18)}
.entry::before{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:var(--moss);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.entry:hover{padding-left:24px}
.entry:hover::before{width:6px}
.entry .date{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--moss-mid);padding-top:8px}
.entry .loc{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--earth);padding-top:8px}
.entry .title{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 80;
  font-size:clamp(22px,2.4vw,36px);line-height:1.12;letter-spacing:-.015em;color:var(--moss-deep);
}
.entry .title em{font-style:italic;color:var(--earth)}
.entry .arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);
  display:grid;place-items:center;align-self:center;color:var(--ink);
  transition:background .4s,color .4s,transform .5s cubic-bezier(.2,.7,.2,1);
}
.entry:hover .arrow{background:var(--moss);color:var(--sunlight);transform:rotate(-45deg)}
@media (max-width:880px){
  .journal{padding:80px 22px}
  .journal-head{flex-direction:column;align-items:flex-start;margin-bottom:50px}
  .journal-head .meta{text-align:left}
  .entry{grid-template-columns:1fr auto;gap:14px}
  .entry .date,.entry .loc{padding-top:0;font-size:10px}
  .entry .loc{grid-column:1;grid-row:2}
  .entry .date{grid-column:1;grid-row:1}
  .entry .title{grid-column:1;grid-row:3;margin-top:6px}
  .entry .arrow{grid-column:2;grid-row:1/4}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--moss-deep);color:var(--cream);
  padding:38px 0;overflow:hidden;
  border-top:1px solid rgba(241,234,217,.1);border-bottom:1px solid rgba(241,234,217,.1);
}
.marquee-track{
  display:flex;gap:60px;animation:marqueeMove 42s linear infinite;white-space:nowrap;
  font-family:'Fraunces',serif;font-weight:200;font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(56px,9vw,140px);line-height:1;letter-spacing:-.02em;
}
.marquee-track span{display:flex;align-items:center;gap:60px}
.marquee-track span::after{content:"";display:inline-block;width:18px;height:18px;border-radius:50%;background:var(--sunlight);flex-shrink:0}
@keyframes marqueeMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   CTA & FOOTER
   ============================================================ */
.cta{padding:160px 48px 80px;background:var(--cream);text-align:center;position:relative;overflow:hidden}
.cta h2{
  font-family:'Fraunces',serif;font-weight:200;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(48px,9vw,150px);line-height:.92;letter-spacing:-.025em;
  color:var(--moss-deep);max-width:14ch;margin:0 auto;
}
.cta h2 em{font-style:italic;color:var(--earth)}
.cta .sub{margin:32px auto 56px;max-width:48ch;font-size:16px;line-height:1.7;color:var(--moss-mid)}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 30px 18px 36px;border-radius:999px;background:var(--moss-deep);color:var(--cream);
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.btn .dot{width:9px;height:9px;border-radius:50%;background:var(--sunlight);box-shadow:0 0 14px var(--sunlight)}
.btn::before{content:"";position:absolute;inset:0;background:var(--earth);transform:translateY(100%);transition:transform .55s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-3px)}
.btn.ghost{background:transparent;color:var(--moss-deep);border:1px solid var(--moss-deep)}
.btn.ghost::before{background:var(--moss-deep)}
.btn.ghost:hover{color:var(--cream)}

footer{background:var(--moss-deep);color:rgba(241,234,217,.75);padding:60px 48px 40px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(241,234,217,.14)}
.foot-grid h4{color:var(--cream);font-weight:500;margin-bottom:18px;font-size:11px;letter-spacing:.22em}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-grid a{color:inherit;text-decoration:none;transition:color .3s}
.foot-grid a:hover{color:var(--sunlight)}
.foot-grid .brand-col p{
  margin-top:16px;font-family:'Fraunces',serif;font-style:italic;
  font-size:24px;line-height:1.3;text-transform:none;letter-spacing:-.01em;
  color:rgba(241,234,217,.85);max-width:30ch;font-weight:300;
}
.foot-bottom{max-width:1240px;margin:0 auto;padding-top:30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:880px){.cta{padding:90px 22px 50px}footer{padding:50px 22px 30px}.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}

/* ============================================================
   ABOUT page specifics
   ============================================================ */
.about-grid{padding:120px 48px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;max-width:1400px;margin:0 auto;align-items:start;background:var(--cream)}
.about-grid .col-img{position:sticky;top:120px;aspect-ratio:3/4;border-radius:2px;overflow:hidden}
.about-grid .col-img .treated{height:100%;aspect-ratio:auto}
.about-grid .col-text h3{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:46px;line-height:1.05;color:var(--moss-deep);
  margin:0 0 24px;letter-spacing:-.02em;
}
.about-grid .col-text h3 em{font-style:italic;color:var(--earth)}
.about-grid p{font-size:17px;line-height:1.7;margin-bottom:22px;color:#222}
.about-grid p:first-of-type:first-letter{
  font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:4.6em;line-height:.85;
  float:left;padding:.04em .14em 0 0;color:var(--moss);
}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;gap:40px;padding:80px 22px}.about-grid .col-img{position:static}}

.team{padding:120px 48px;background:var(--cream-2)}
.team h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.02em;
  color:var(--moss-deep);margin-bottom:60px;max-width:14ch;
}
.team h2 em{font-style:italic;color:var(--earth)}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1240px;margin:0 auto}
.member{padding:30px 0;border-top:1px solid var(--ink)}
.member .nm{
  font-family:'Fraunces',serif;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 80;
  font-size:34px;line-height:1.1;color:var(--moss-deep);margin-bottom:6px;letter-spacing:-.015em;
}
.member .role{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--earth);margin-bottom:18px}
.member p{font-size:14px;line-height:1.65;color:#333}
@media (max-width:880px){.team{padding:80px 22px}.team-grid{grid-template-columns:1fr;gap:24px}}

/* ============================================================
   SUBSCRIBE PAGE
   ============================================================ */
.sub-form{padding:120px 48px;background:var(--cream);text-align:center}
.sub-form .wrap{max-width:680px;margin:0 auto}
.sub-form input[type=email]{
  width:100%;padding:22px 28px;
  font-family:'Fraunces',serif;font-style:italic;font-size:22px;
  background:transparent;border:none;border-bottom:1px solid var(--moss-deep);
  color:var(--moss-deep);outline:none;
  transition:border-color .4s;text-align:center;
}
.sub-form input::placeholder{color:var(--moss-mid);opacity:.7}
.sub-form input:focus{border-color:var(--earth)}
.sub-form button{margin-top:32px;font:inherit;border:none;cursor:none}
.sub-form .smallprint{margin-top:30px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--moss-mid)}

.tiers{padding:80px 48px 140px;background:var(--cream)}
.tiers-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.tier{
  background:var(--cream-2);padding:46px 38px;border-radius:2px;
  position:relative;overflow:hidden;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),background .4s;
}
.tier:hover{transform:translateY(-6px)}
.tier.feature{background:var(--moss-deep);color:var(--cream)}
.tier .nm{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:30px;color:var(--earth)}
.tier.feature .nm{color:var(--sunlight)}
.tier .price{
  font-family:'Fraunces',serif;font-weight:200;
  font-variation-settings:"opsz" 144,"SOFT" 100;
  font-size:78px;line-height:1;letter-spacing:-.03em;
  color:var(--moss-deep);margin-bottom:10px;
}
.tier.feature .price{color:var(--cream)}
.tier .price sub{font-size:.25em;font-family:'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--moss-mid);font-style:normal;margin-left:6px;vertical-align:baseline}
.tier.feature .price sub{color:var(--sage)}
.tier .desc{font-size:14px;line-height:1.6;margin-bottom:30px;opacity:.85}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.tier li{font-size:14px;line-height:1.5;display:flex;gap:12px;align-items:flex-start}
.tier li::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--earth);margin-top:8px}
.tier.feature li::before{background:var(--sunlight)}
@media (max-width:880px){.tiers{padding:50px 22px 80px}.tiers-grid{grid-template-columns:1fr;gap:18px}}

/* ============================================================
   COSMIC QORYM FOOTER CREDIT — network icon with flash animations
   ============================================================ */
.powered-by{
  max-width:1240px;margin:60px auto 0;
  padding:56px 24px 22px;
  border-top:1px solid rgba(241,234,217,.10);
  display:flex;flex-direction:column;align-items:center;gap:22px;
}

.qorym-link{
  display:inline-flex;flex-direction:column;align-items:center;gap:18px;
  text-decoration:none;
  color:rgba(241,234,217,.40);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.32em;text-transform:uppercase;
  transition:color .4s, transform .6s cubic-bezier(.2,.7,.2,1);
  padding:6px 4px;
}
.qorym-link:hover{color:rgba(241,234,217,.85);transform:translateY(-2px)}

.qorym-icon{
  width:40px;height:40px;display:block;
  animation:qiSystemFlash 6.5s ease-in-out infinite;
}
/* a global "system flash" — entire icon glows brightly for a half-second every cycle */
@keyframes qiSystemFlash{
  0%,92%,100%{filter:drop-shadow(0 0 0 transparent)}
  94%{filter:drop-shadow(0 0 5px rgba(78,224,240,.6)) drop-shadow(0 0 12px rgba(78,224,240,.25))}
  97%{filter:drop-shadow(0 0 2px rgba(78,224,240,.3))}
}

/* counter-rotating dashed rings */
.qi-ring-outer{
  transform-origin:50px 50px;transform-box:fill-box;
  animation:qiSpin 36s linear infinite;
}
.qi-ring-inner{
  transform-origin:50px 50px;transform-box:fill-box;
  animation:qiSpin 26s linear infinite reverse;
}
@keyframes qiSpin{to{transform:rotate(360deg)}}

/* center node breathes with the network pulse */
.qi-center{
  transform-origin:50px 50px;transform-box:fill-box;
  animation:qiBreathe 3.2s ease-in-out infinite;
}
@keyframes qiBreathe{
  0%,100%{transform:scale(1);opacity:.95}
  50%{transform:scale(1.10);opacity:1}
}

/* satellite nodes — staggered flash sequence */
.qi-sat{
  transform-origin:center;transform-box:fill-box;
  animation:qiFlash 5s ease-in-out infinite;
}
.qi-sat-1{animation-delay:0s}
.qi-sat-2{animation-delay:-.83s}
.qi-sat-3{animation-delay:-1.66s;animation-duration:4s}   /* red outlier flashes faster */
.qi-sat-4{animation-delay:-2.5s}
.qi-sat-5{animation-delay:-3.33s}
.qi-sat-6{animation-delay:-4.16s}
@keyframes qiFlash{
  0%,86%,100%{opacity:.92;transform:scale(1)}
  90%{opacity:1;transform:scale(1.20)}
  93%{opacity:.78;transform:scale(1.05)}
  96%{opacity:.92;transform:scale(1)}
}

/* on hover, intensify everything */
.qorym-link:hover .qi-center{animation-duration:1.6s}
.qorym-link:hover .qi-sat{animation-duration:2.4s}
.qorym-link:hover .qorym-icon{animation-duration:3s}
.qorym-link:hover .qi-ring-outer{animation-duration:14s}
.qorym-link:hover .qi-ring-inner{animation-duration:10s}

@media (max-width:720px){
  .powered-by{padding:44px 18px 18px;margin-top:44px}
}