/* ============================================================
   Life Net United — "A storybook about growing"
   Cream paper canvas · navy ink · gold flourishes
   ============================================================ */

/* ==== Cross-document page transitions (turning a page) ==== */
@view-transition{ navigation: auto; }

@media (prefers-reduced-motion: no-preference){
  /* the old page settles back into the binding, the new leaf lifts in */
  ::view-transition-old(root){
    animation: leaf-out .34s var(--spring-page) both;
  }
  ::view-transition-new(root){
    animation: leaf-in .5s var(--spring-page) both;
  }
  @keyframes leaf-out{
    to{ opacity:0; transform:translateY(-10px) scale(.992); filter:saturate(.9); }
  }
  @keyframes leaf-in{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:none; }
  }
  /* named shared elements (card art → page hero) morph a touch slower & softer */
  ::view-transition-group(.svc-hero){
    animation-duration:.55s;
    animation-timing-function:var(--spring-page);
  }
}

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

:root{
  --paper:    #FBF7E9;   /* the page of the book */
  --paper-2:  #F4EDD9;   /* alternate band */
  --card:     #FDFAF0;
  --ink:      #1E2C44;   /* deep navy — everything is "drawn" in this */
  --ink-soft: #56637D;
  --line:     #22304833;                 /* ink at ~20% for hairlines */
  --gold:     #C9A05C;
  --gold-deep:#B8923F;   /* text-safe gold */
  --blue:     #3A5C92;   /* brand blue (placeholder until logo file) */
  --sage:     #8FA591;
  --clay:     #BC6A47;
  --sky:      #AFC7E0;
  --night:    #121B2A;   /* the "goodnight" footer */
  --night-2:  #1A2740;

  --radius: 22px;
  --maxw: 1120px;

  /* physics springs (Motion-style linear() curves) */
  --spring-enter: linear(0, 0.0445 4.2%, 0.1478 8.3%, 0.2764 12.5%, 0.409 16.7%, 0.5332 20.8%, 0.6423 25%, 0.7341 29.2%, 0.8083 33.3%, 0.8665 37.5%, 0.9107 41.7%, 0.9433 45.8%, 0.9666 50%, 0.9827 54.2%, 0.9933 58.3%, 1 62.5%, 1.0038 66.7%, 1.0024);
  --spring-hover: linear(0, 0.0454 4.2%, 0.1532 8.3%, 0.2903 12.5%, 0.4337 16.7%, 0.5689 20.8%, 0.6879 25%, 0.7869 29.2%, 0.8654 33.3%, 0.9247 37.5%, 0.9673 41.7%, 0.9962 45.8%, 1.0141 50%, 1.0239 54.2%, 1.0279 58.3%, 1.028 62.5%, 1.0015);
  --spring-page: linear(0, 0.0439 4.2%, 0.1441 8.3%, 0.2673 12.5%, 0.3932 16.7%, 0.5105 20.8%, 0.6138 25%, 0.7011 29.2%, 0.7728 33.3%, 0.8302 37.5%, 0.8751 41.7%, 0.9097 45.8%, 0.9359 50%, 0.9553 54.2%, 0.9695 58.3%, 0.9797 62.5%, 0.9869 66.7%, 0.9919 70.8%, 1.0006);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Mulish', system-ui, sans-serif;
  background-color:var(--paper);
  /* paper grain baked into the body background — no fixed overlay layer */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main, header, footer, nav{ position:relative; z-index:1; }

h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600; line-height:1.12; letter-spacing:-.01em;
  text-wrap:balance; color:var(--ink);
}
p{ color:var(--ink-soft); }
img, svg{ max-width:100%; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }
section{ padding:92px 0; position:relative; }
.band{ background:var(--paper-2); }

/* ---------- storybook text bits ---------- */
.eyebrow{
  font-weight:800; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:16px; display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--gold); }

/* hand-drawn underline flourish (like the reference art) */
.u-gold, .u-clay, .u-blue{ position:relative; white-space:nowrap; }
.u-gold::after, .u-clay::after, .u-blue::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:-.08em; height:.34em;
  background-repeat:no-repeat; background-size:100% 100%; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 25 4, 55 10, 80 6 S 112 7, 117 5' fill='none' stroke='%23C9A05C' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.u-clay::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 25 4, 55 10, 80 6 S 112 7, 117 5' fill='none' stroke='%23BC6A47' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.u-blue::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 25 4, 55 10, 80 6 S 112 7, 117 5' fill='none' stroke='%233A5C92' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* the storybook caption box (rounded, thin ink border, centered) */
.caption{
  border:1.5px solid var(--ink); border-radius:26px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  padding:26px 34px; text-align:center;
  font-family:'Fraunces', Georgia, serif; font-weight:500;
  font-size:clamp(1.05rem, 1.9vw, 1.3rem); color:var(--ink); line-height:1.55;
  max-width:640px; margin:0 auto;
  box-shadow:0 10px 30px -22px rgba(30,44,68,.5);
}
.caption small{ display:block; font-family:'Mulish'; font-size:.8rem; color:var(--ink-soft); margin-top:10px; font-weight:600; }

/* storybook arrow buttons (rounded square, ink border, drawn arrow) */
.page-btn{
  width:56px; height:56px; border-radius:16px; border:1.5px solid var(--ink);
  background:var(--card); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease; color:var(--ink);
}
.page-btn{ transition:transform .45s var(--spring-hover), background .2s ease; }
.page-btn:hover{ transform:translateY(-3px); background:#fff; }
.page-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.page-btn svg{ width:26px; height:26px; }
.page-btn[disabled]{ opacity:.35; cursor:not-allowed; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Mulish'; font-weight:800; font-size:.95rem;
  padding:15px 28px; border-radius:40px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none;
  transition:transform .45s var(--spring-hover), box-shadow .45s ease;
}
.btn:hover{ transform:translateY(-3px); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.btn-gold{ background:var(--gold); color:var(--night); box-shadow:0 12px 26px -14px rgba(184,146,63,.8); }
.btn-ink{ background:var(--ink); color:var(--paper); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1.5px solid var(--line);
}
.site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; }
.lockup{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.lockup svg{ width:40px; height:40px; flex:none; }
.lockup .name{ font-family:'Fraunces', Georgia, serif; font-weight:600; font-size:1.1rem; color:var(--ink); line-height:1; }
.lockup .name small{ display:block; font-family:'Mulish'; font-weight:700; font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin-top:4px; }
.site-nav nav{ display:flex; gap:4px; align-items:center; }
.site-nav nav a{ font-size:.88rem; font-weight:700; color:var(--ink-soft); text-decoration:none; padding:10px 12px; border-radius:10px; }
.site-nav nav a:hover{ color:var(--ink); background:var(--paper-2); }
.site-nav nav a.current{ color:var(--ink); }
.site-nav nav .btn{ padding:11px 20px; font-size:.85rem; margin-left:8px; }
.nav-toggle{ display:none; }

/* ---------- hero ---------- */
.hero{ padding:0 0 0; overflow:hidden; }
.hero .stage{ position:relative; overflow:hidden; height:clamp(360px, 56vw, 640px); }
.hero .scene{ display:block; width:100%; height:auto; }
.hero-img{
  width:100%; height:calc(clamp(360px, 56vw, 640px) + 70px); object-fit:cover; object-position:center 62%;
  margin-top:-70px;              /* overscan: the scroll drift reveals this band — never a gap */
  display:block;
  /* feather only the bottom + sides into the paper — the top meets the nav cleanly */
  -webkit-mask-image:radial-gradient(150% 135% at 50% 18%, #000 68%, transparent 99%);
          mask-image:radial-gradient(150% 135% at 50% 18%, #000 68%, transparent 99%);
}

/* ---------- framed storybook plates (generated illustrations) ---------- */
.plate{
  margin:0; background:var(--card); border:1.5px solid var(--ink); border-radius:18px;
  padding:12px 12px 4px; box-shadow:0 16px 40px -26px rgba(30,44,68,.6);
}
.plate img{ width:100%; display:block; border-radius:10px; }
.plate figcaption{
  font-family:'Fraunces', Georgia, serif; font-style:italic; text-align:center;
  padding:10px 10px 8px; color:var(--ink-soft); font-size:.95rem;
}
/* chapter cards with full-bleed illustrated tops */
.chapter .scene{ margin:-30px -26px 18px; border-bottom:1.5px solid var(--line); overflow:hidden; border-radius:20px 20px 0 0; }
.chapter .scene img{ width:100%; height:172px; object-fit:cover; display:block; transition:transform .6s var(--spring-hover); }
.chapter:hover .scene img{ transform:scale(1.04); }
/* sketch fallback scene — same band as image scenes, doodle centered on paper */
.chapter .scene.sketch{
  height:172px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2);
}
.chapter .scene.sketch svg{ height:120px; width:auto; transition:transform .6s var(--spring-hover); }
.chapter:hover .scene.sketch svg{ transform:scale(1.06); }
.hero-copy{ text-align:center; max-width:720px; margin:0 auto; padding:34px 26px 0; }
.hero-copy h1{ font-size:clamp(2.5rem, 6vw, 4.2rem); }
.hero-copy .lede{ font-size:clamp(1.05rem, 2vw, 1.25rem); max-width:54ch; margin:18px auto 26px; }

/* ---------- chapters (services) ---------- */
.chapters{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:54px; }
.chapter{
  border:1.5px solid var(--ink); border-radius:var(--radius);
  background:var(--card); padding:30px 26px 26px; position:relative;
  display:flex; flex-direction:column; text-decoration:none;
  transition:transform .45s var(--spring-hover), box-shadow .45s ease;
  box-shadow:0 12px 30px -24px rgba(30,44,68,.55);
}
.chapter:hover{ transform:translateY(-5px) rotate(-.35deg); box-shadow:0 20px 44px -24px rgba(30,44,68,.6); }
.chapter .ch-num{
  position:absolute; top:-16px; left:22px; z-index:5; background:var(--paper);
  border:1.5px solid var(--ink); border-radius:30px; padding:3px 14px;
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-size:.82rem; color:var(--ink);
}
.chapter.featured .ch-num{ background:var(--gold); border-color:var(--gold-deep); color:var(--night); font-style:normal; font-weight:700; font-family:'Mulish'; text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; padding:6px 14px; }
.chapter .art{ height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.chapter .art svg{ height:100%; width:auto; }
.chapter h3{ font-size:1.35rem; margin-bottom:8px; }
.chapter p{ font-size:.92rem; flex:1; }
.chapter .go{ margin-top:16px; font-weight:800; font-size:.88rem; color:var(--gold-deep); }
.chapter.featured{ background:linear-gradient(180deg, #FBF3DC, var(--card) 55%); }

/* ---------- story path (drawn dotted line between sections) ---------- */
.story-path{ display:block; margin:-30px auto; width:120px; height:150px; }
.story-path path{
  fill:none; stroke:var(--ink); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:1 10;
}
.story-path.draw path{
  stroke-dasharray:1 10; stroke-dashoffset:400;
  animation:drawpath 1.6s ease-out forwards;
}
@keyframes drawpath{ to{ stroke-dashoffset:0; } }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:50px; }
.step{ text-align:center; padding:0 10px; }
.step .art{ height:130px; display:flex; align-items:flex-end; justify-content:center; margin-bottom:18px; }
.step h3{ font-size:1.2rem; margin-bottom:8px; }
.step p{ font-size:.92rem; max-width:32ch; margin:0 auto; }

/* ---------- the testimonial book (page-turn) ---------- */
.book-zone{ text-align:center; }
.book{
  margin:44px auto 26px; max-width:760px; position:relative;
  perspective:1600px;
}
.book .spread{
  display:grid; grid-template-columns:1fr 1fr; min-height:320px;
  border:1.5px solid var(--ink); border-radius:18px; background:var(--card);
  box-shadow:0 24px 60px -30px rgba(30,44,68,.6);
  position:relative; overflow:visible;
}
.book .spread::before{ /* spine */
  content:""; position:absolute; left:50%; top:10px; bottom:10px; width:1.5px;
  background:var(--line); transform:translateX(-50%);
}
.book .pg{
  padding:44px 40px 52px; display:flex; flex-direction:column; justify-content:center; gap:14px;
  position:relative; text-align:center; align-items:center;
}
/* shared typography for BOTH static pages and the flipping faces (bugfix: faces
   previously missed these styles and rendered sans-serif) */
.book .quote{
  font-family:'Fraunces', Georgia, serif !important; font-weight:500;
  font-size:1.12rem; line-height:1.55; color:var(--ink); margin:0;
}
.book .who{ font-weight:800; font-size:.78rem; letter-spacing:.06em; color:var(--gold-deep); text-transform:uppercase; margin:0; }
.book .orn{ height:40px; display:flex; align-items:center; justify-content:center; }
.book .orn svg{ height:100%; width:auto; }
/* storybook page numbers */
.book .pgnum{
  position:absolute; bottom:16px; font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-size:.8rem; color:var(--ink-soft);
}
.book .pg.left .pgnum, .book .face.back .pgnum{ left:26px; }
.book .pg.right-static .pgnum, .book .face.front .pgnum{ right:26px; }
/* stacked page edges under the book (a real, thick storybook) */
.book .spread{
  box-shadow:
    0 6px 0 -2px var(--card), 0 8px 0 -2px var(--ink),
    0 14px 0 -6px var(--card), 0 16px 0 -6px var(--ink),
    0 22px 0 -10px var(--card), 0 24px 0 -10px var(--ink),
    0 34px 60px -30px rgba(30,44,68,.55);
}
/* gold bookmark ribbon over the spine */
.book .ribbon{
  position:absolute; top:-10px; left:calc(50% - 9px); width:18px; height:64px; z-index:5;
  background:var(--gold);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow:0 4px 10px -4px rgba(30,44,68,.5);
}
/* the flipping page (leaf). JS positions it; .anim enables the turn transition */
.book .flip{
  position:absolute; top:0; right:0; width:50%; height:100%;
  transform-origin:left center; transform-style:preserve-3d;
  transition:none;
  pointer-events:none;
  z-index:4;
}
.book .flip.anim{ transition:transform .8s var(--spring-page); }
/* the turning leaf casts a soft moving shadow */
.book .flip.anim .face{ box-shadow:0 18px 34px -18px rgba(30,44,68,.5); }
/* pages are clickable like a real book */
.book .pg{ cursor:pointer; }
/* spine shading — pages darken slightly toward the gutter */
.book .pg.left{ background:linear-gradient(270deg, rgba(30,44,68,.06), transparent 12%); }
.book .pg.right-static{ background:linear-gradient(90deg, rgba(30,44,68,.06), transparent 12%); }
.book .flip .face.front{ background:linear-gradient(90deg, rgba(30,44,68,.07), transparent 14%), var(--card); }
.book .flip .face.back{ background:linear-gradient(270deg, rgba(30,44,68,.07), transparent 14%), var(--card); }
.book .flip .face{
  position:absolute; inset:0; backface-visibility:hidden;
  background:var(--card); border:1.5px solid var(--ink);
  border-radius:0 18px 18px 0; padding:44px 40px 52px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
  align-items:center; text-align:center;
}
.book .flip .face.back{ transform:rotateY(180deg); border-radius:18px 0 0 18px; }
.book-controls{ display:flex; gap:14px; justify-content:center; }

/* ---------- blog ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px; }
.post-card{
  border:1.5px solid var(--ink); border-radius:var(--radius); background:var(--card);
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:transform .45s var(--spring-hover), box-shadow .45s ease;
  box-shadow:0 12px 30px -24px rgba(30,44,68,.55);
}
.post-card:hover{ transform:translateY(-4px) rotate(.3deg); }
.post-card .thumb{ height:150px; background:var(--paper-2); border-bottom:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; }
.post-card .thumb svg{ height:82%; width:auto; }
.post-card .body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card .tag{ align-self:flex-start; font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--night); background:var(--gold); border-radius:30px; padding:4px 12px; }
.post-card .tag.alt{ background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); }
.post-card h3{ font-size:1.15rem; }
.post-card p{ font-size:.88rem; flex:1; }
.post-card .meta{ font-size:.75rem; color:var(--ink-soft); font-weight:600; }
.cat-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cat{ font-size:.78rem; font-weight:800; color:var(--ink); background:var(--card); border:1.5px solid var(--ink); border-radius:30px; padding:7px 16px; text-decoration:none; }
.cat:hover, .cat.on{ background:var(--gold); border-color:var(--gold-deep); color:var(--night); }

/* article */
.article{ max-width:720px; margin:0 auto; }
.article .crumbs{ font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:18px; }
.article .crumbs a{ color:var(--gold-deep); text-decoration:none; }
.article h1{ font-size:clamp(2rem, 4.6vw, 3rem); margin:10px 0 14px; }
.article .byline{ font-size:.85rem; color:var(--ink-soft); font-weight:600; margin-bottom:30px; }
.article h2{ font-size:1.5rem; margin:38px 0 12px; }
.article p{ margin-bottom:16px; font-size:1.02rem; }
.article ul{ margin:0 0 16px 22px; color:var(--ink-soft); }
.article li{ margin-bottom:8px; }
.article .caption{ margin:34px auto; }

/* ---------- forms ---------- */
.form-card{
  border:1.5px solid var(--ink); border-radius:var(--radius); background:var(--card);
  padding:34px; max-width:520px; box-shadow:0 16px 40px -26px rgba(30,44,68,.6);
}
.field{ margin-bottom:16px; text-align:left; }
.field label{ display:block; font-weight:800; font-size:.8rem; margin-bottom:6px; color:var(--ink); }
.field input, .field textarea{
  width:100%; border:1.5px solid var(--ink); border-radius:12px; padding:12px 14px;
  font-family:'Mulish'; font-size:.95rem; background:var(--paper); color:var(--ink);
}
.field input:focus, .field textarea:focus{ outline:none; box-shadow:0 0 0 3px #C9A05C55; }
.microcopy{ font-size:.75rem; color:var(--ink-soft); margin:4px 0 16px; }

/* ---------- night footer ---------- */
.night{
  background:
    radial-gradient(90% 70% at 80% 0%, rgba(201,160,92,.12), transparent 60%),
    var(--night);
  color:#ECE6D8; padding:0; margin-top:90px; position:relative;
}
.night .scene{ display:block; width:100%; height:auto; margin-top:-1px; }
.night h2, .night h3, .night h4{ color:#F1EADA; }
.night p, .night a{ color:#A7B1C5; }
.night .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px; padding:10px 0 50px; }
.night .cols a{ display:block; text-decoration:none; font-size:.9rem; padding:4px 0; }
.night .cols a:hover{ color:var(--gold); }
.night .cols h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-family:'Mulish'; font-weight:800; margin-bottom:12px; }
.night .tagline{ font-family:'Fraunces', Georgia, serif; font-size:1.25rem; color:#ECE6D8; margin:10px 0 6px; }
.night .legal{
  border-top:1px solid rgba(255,255,255,.12); padding:22px 0 30px;
  font-size:.76rem; color:#7f8aa3; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.night .legal a{ font-size:.76rem; }

/* ---------- the reading ribbon (how far into the story you are) ---------- */
.read-ribbon{
  position:fixed; top:0; left:0; right:0; height:5px; z-index:80; pointer-events:none;
}
.read-ribbon .bar{
  height:100%; background:var(--gold); transform:scaleX(0); transform-origin:left center;
  will-change:transform;
}
.read-ribbon .tail{
  position:absolute; top:0; left:-18px; width:14px; height:26px; background:var(--gold);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  will-change:transform;
}

/* ---------- illuminated drop caps ---------- */
.dropcap::first-letter{
  font-family:'Fraunces', Georgia, serif; font-weight:600; float:left;
  font-size:3.4em; line-height:.82; padding:4px 10px 0 0; color:var(--gold-deep);
}

/* ---------- ambient birds drifting across the sky ---------- */
.bird-drift{
  position:absolute; z-index:3; pointer-events:none; color:var(--ink); opacity:.7;
  animation:birdfly var(--fly, 52s) linear infinite;
}
.bird-drift svg{ width:34px; height:20px; animation:floaty 5s ease-in-out infinite; }
@keyframes birdfly{ from{ transform:translateX(-8vw); } to{ transform:translateX(108vw); } }

/* ---------- "the beginning" closer ---------- */
.the-end{ text-align:center; padding:64px 0 26px; }
.the-end .fleuron{ color:var(--gold-deep); margin-bottom:14px; display:inline-block; }
.the-end p{
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-size:1.35rem; color:var(--ink);
}

/* ---------- storybook motion: drawn underlines, settling plates, growing fleuron ---------- */
/* the hand-drawn underline draws itself once its heading has risen in */
.rise .u-gold::after, .rise .u-clay::after, .rise .u-blue::after{
  transform:scaleX(0); transform-origin:left center;
  transition:transform .9s var(--spring-page) .45s;
}
.rise.in .u-gold::after, .rise.in .u-clay::after, .rise.in .u-blue::after{ transform:scaleX(1); }

/* framed plates + captions settle like pictures laid on a table */
.plate.rise{ transform:translateY(26px) rotate(1.1deg); }
.caption.rise{ transform:translateY(26px) rotate(-.5deg); }
.plate.rise.in, .caption.rise.in{ transform:none; }

/* the closing sprout grows up from the ground */
.the-end .fleuron svg{ transform:scaleY(.15); transform-origin:center bottom; transition:transform 1.1s var(--spring-enter) .15s; }
.the-end.in .fleuron svg{ transform:scaleY(1); }

/* ---------- scroll animation states ---------- */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--spring-enter), transform .9s var(--spring-enter); }
.rise.in{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.12s; } .rise.d2{ transition-delay:.24s; } .rise.d3{ transition-delay:.36s; }

/* drifting critters (birds/leaves that travel through) */
.drift{ position:absolute; pointer-events:none; opacity:.85; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.floaty{ animation:floaty 6s ease-in-out infinite; }

/* ---------- the mobile page leaf (hidden on desktop) ---------- */
.mleaf, .mdim{ display:none; }

/* ---------- two-column splits (collapse to one column on small screens) ---------- */
.split, .split-esa, .split-teaser{ display:grid; gap:44px; align-items:center; }
.split{ grid-template-columns:1fr 1fr; }
.split-esa{ grid-template-columns:1.1fr .9fr; }
.split-teaser{ grid-template-columns:.9fr 1.1fr; }
.duo{ grid-template-columns:1fr 1fr; }          /* related-posts pair */
@media (max-width: 880px){
  .split, .split-esa, .split-teaser{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width: 600px){
  .duo{ grid-template-columns:1fr !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 940px){
  .chapters, .steps, .post-grid{ grid-template-columns:repeat(2,1fr); }
  .night .cols{ grid-template-columns:1fr 1fr; }
  .site-nav nav{ display:none; }
  .nav-toggle{ display:inline-flex; }
  section{ padding:64px 0; }
}
.book-hint{ display:none; font-size:.78rem; color:var(--ink-soft); margin-top:10px; }
@media (max-width: 600px){
  .chapters, .steps, .post-grid{ grid-template-columns:1fr; }
  .night .cols{ grid-template-columns:1fr; }
  /* the book becomes a single held page — one story at a time */
  .book{ max-width:420px; touch-action:pan-y; }   /* horizontal drags are ours; vertical still scrolls */
  .book .spread{
    grid-template-columns:1fr; min-height:300px;
    perspective:1300px;                            /* real depth for the turning leaf */
  }
  .mdim{
    display:block; position:absolute; inset:0; z-index:5; pointer-events:none;
    border-radius:18px; opacity:0;
    background:linear-gradient(90deg, rgba(30,44,68,.45), rgba(30,44,68,.12) 55%, transparent 85%);
  }
  .mleaf{
    display:none; position:absolute; inset:0; z-index:6;
    transform-origin:left center; transform-style:preserve-3d;
    will-change:transform; pointer-events:none;
  }
  .mleaf .mface{
    position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border:1.5px solid var(--ink); border-radius:18px; background:var(--card);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:14px; padding:40px 30px 52px; text-align:center;
  }
  .mleaf .mface.front{
    background:linear-gradient(270deg, rgba(30,44,68,.08), transparent 22%), var(--card);
    box-shadow:-10px 14px 30px -14px rgba(30,44,68,.5);
  }
  .mleaf .mface.back{
    transform:rotateY(180deg);
    /* the blank back of a paper page — faint ink bleed-through */
    background:
      linear-gradient(90deg, rgba(30,44,68,.08), transparent 20%),
      repeating-linear-gradient(0deg, transparent 0 24px, rgba(30,44,68,.05) 24px 25px),
      var(--card);
    box-shadow:-10px 14px 30px -14px rgba(30,44,68,.5);
  }
  .mleaf .pgnum{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); }
  .book .spread::before{ display:none; }   /* no spine */
  .book .pg.right-static, .book .flip{ display:none; }
  .book .pg.left{ padding:40px 30px 52px; }
  .book .pg.left .pgnum{ left:50%; transform:translateX(-50%); }
  .book .ribbon{ left:auto; right:26px; }  /* bookmark hangs off the page edge */
  .book-hint{ display:block; }
}

/* ---------- reduced motion: the book holds still ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  .floaty{ animation:none !important; }
  .bird-drift{ animation:none !important; display:none; }
  .story-path.draw path{ animation:none !important; stroke-dashoffset:0 !important; }
  .book .flip.anim{ transition:none !important; }
  *{ transition-duration:.001ms !important; }
}