/* ============================================================
   Neneda — shared design system (locked on the signed homepage)
   One source of truth. Every page links this; no per-page drift.
   ============================================================ */
  :root{
    --paper:#F5ECD7; --paper-2:#EFE3C4; --ink:#3A2418; --ink-soft:#6B4F3F;
    --signal:#C2614A; --rust:#8B3A1F; --sage:#6B7A5C;
    --font-display:'Besley',Georgia,'Times New Roman',serif;
    --font-hand:'Caveat','Segoe Script',cursive;
    --font-body:'Vollkorn',Georgia,'Times New Roman',serif;
    --ease:cubic-bezier(0.25,1,0.5,1); --t-slow:720ms;
    --tilt-md:-2deg; --tilt-lg:2deg;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.06 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
      radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.4) 0, transparent 50%),
      radial-gradient(ellipse at 80% 90%, rgba(139,58,31,0.04) 0, transparent 60%),
      var(--paper);
    background-attachment:fixed}
  a{color:var(--rust);text-underline-offset:3px}
  *:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
  .skip{position:absolute;left:-999px}
  .skip:focus{position:fixed;left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}
  .wrap{max-width:680px;margin:0 auto;padding:0 28px}

  /* NAV */
  header.nav{position:fixed;top:0;left:0;right:0;z-index:30;
    display:flex;justify-content:space-between;align-items:center;
    padding:18px 28px;background:linear-gradient(var(--paper),rgba(245,236,215,0));
    opacity:0;transition:opacity var(--t-slow) var(--ease)}
  header.nav.show{opacity:1}
  .wordmark{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
  .wordmark .period{color:var(--signal)}
  header.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
  header.nav a.lnk{font-family:var(--font-body);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft);text-decoration:none}
  header.nav a.lnk:hover{color:var(--rust)}
  @media(max-width:620px){header.nav ul{gap:14px}header.nav a.lnk{font-size:.72rem}}

  /* HERO — Chapter 1, The Mother (full framed print, never cropped) */
  .hero{position:relative;padding:clamp(96px,13vw,124px) 0 clamp(52px,7vw,68px);text-align:center}
  .hero .kicker{font-family:var(--font-body);font-weight:500;font-size:12.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--signal);margin:0 0 14px;
    opacity:0;transform:translateY(12px);transition:opacity 800ms var(--ease) 60ms,transform 800ms var(--ease) 60ms}
  .hero h1{font-family:var(--font-hand);font-weight:600;font-size:clamp(2.4rem,6.4vw,3.7rem);line-height:1.0;
    margin:0 0 26px;color:var(--ink);
    opacity:0;transform:translateY(14px);transition:opacity 880ms var(--ease),transform 880ms var(--ease)}
  .hero .frame{display:inline-block;max-width:500px;width:82%;margin:0 auto;background:#FBF5E5;padding:16px 16px 18px;
    box-shadow:0 1px 0 rgba(58,36,24,.06),0 22px 50px -26px rgba(58,36,24,.55),inset 0 0 0 1px rgba(58,36,24,.06);
    transform:rotate(-1.2deg) translateY(18px);opacity:0;
    transition:opacity var(--t-slow) var(--ease) 120ms,transform var(--t-slow) var(--ease) 120ms}
  .hero .frame img{display:block;width:100%;height:auto;border:1px solid rgba(58,36,24,.1)}
  .hero .frame figcaption{font-family:var(--font-body);font-weight:500;font-size:12px;letter-spacing:.03em;
    text-transform:uppercase;color:var(--ink-soft);margin-top:15px;line-height:1.55}
  .hero.in .kicker,.hero.in h1{opacity:1;transform:none}
  .hero.in .frame{opacity:1;transform:rotate(-1.2deg)}

  /* CHAPTERS */
  section.chap{padding:clamp(80px,12vw,150px) 0;border-top:1px dashed rgba(107,79,63,.45)}
  section.chap.band{background:rgba(239,227,196,.55)}
  .marker{font-family:var(--font-hand);font-weight:600;font-size:1.6rem;color:var(--signal);margin:0 0 6px}
  h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,4.4vw,2.6rem);line-height:1.1;
    letter-spacing:-.015em;margin:0 0 .5em;max-width:18ch}
  h3{font-family:var(--font-display);font-weight:600;font-size:1.2rem;margin:30px 0 8px}
  p{max-width:64ch}
  .lede{font-size:1.18rem;line-height:1.55}
  blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--signal);
    font-style:italic;font-size:1.12rem;color:var(--ink)}
  blockquote .sig{display:block;font-style:normal;font-family:var(--font-hand);font-size:1.5rem;color:var(--ink);margin-top:8px}
  ul.tracks{columns:2;column-gap:34px;padding:0;margin:14px 0 0;list-style:none;max-width:64ch}
  ul.tracks li{break-inside:avoid;padding:7px 0 7px 22px;position:relative;font-size:.98rem}
  ul.tracks li::before{content:"";position:absolute;left:0;top:14px;width:9px;height:9px;border:1.5px solid var(--signal);border-radius:2px}
  @media(max-width:560px){ul.tracks{columns:1}}

  /* POLAROID product */
  .polaroid{background:#FBF5E5;padding:14px 14px 46px;display:inline-block;max-width:560px;width:100%;
    box-shadow:0 1px 0 rgba(58,36,24,.06),0 16px 34px -18px rgba(58,36,24,.45),inset 0 0 0 1px rgba(58,36,24,.04);
    transform:rotate(var(--tilt-md));margin:30px 0 6px;
    opacity:0;transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
  .polaroid.in{opacity:1}
  .polaroid img{width:100%;display:block;border:1px solid rgba(58,36,24,.08)}
  .polaroid figcaption{font-family:var(--font-hand);font-size:1.35rem;color:var(--ink);text-align:center;margin-top:12px}

  /* CTA stamp */
  .stamp{display:inline-block;background:var(--rust);color:var(--paper);font-family:var(--font-hand);
    font-weight:600;font-size:1.35rem;padding:12px 30px 10px;transform:rotate(var(--tilt-md));
    text-decoration:none;margin-top:26px}
  .stamp:hover{transform:rotate(0deg)}
  .note{font-family:var(--font-body);font-size:.92rem;color:var(--ink-soft);max-width:60ch;margin-top:14px;font-style:italic}

  /* reveal */
  .reveal{opacity:0;transform:translateY(8px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
  .reveal.in{opacity:1;transform:none}

  /* FOOTER */
  footer{background:var(--ink);color:var(--paper);padding:70px 0 80px;margin-top:0}
  footer .wrap{max-width:760px}
  footer .statement{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3.4vw,2rem);
    line-height:1.25;max-width:24ch;margin:0 0 30px}
  footer .cred{font-family:var(--font-body);font-size:.92rem;line-height:1.9;color:#d8c8b2}
  footer .cred a{color:#e6c3b3}
  footer .mark{width:46px;height:auto;margin-bottom:24px;opacity:.92}

  /* ---- INTERIOR PAGES (About, FAQ, landing pages, Privacy) ---- */
  .pagehead{padding:clamp(104px,13vw,132px) 0 0}
  .pagehead .marker{display:block;font-size:1.5rem;margin-bottom:2px}
  .pagehead h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,5.2vw,3rem);line-height:1.08;
    letter-spacing:-.02em;margin:.12em 0 .35em;max-width:20ch;color:var(--ink)}
  .pagehead .lede{max-width:60ch;color:var(--ink)}
  section.body{padding:clamp(34px,6vw,56px) 0 clamp(48px,8vw,80px)}
  section.body.band{background:rgba(239,227,196,.55);border-top:1px dashed rgba(107,79,63,.45)}

  /* FAQ — open Q&A list, content fully in markup (AEO) */
  .faq{margin:6px 0 0}
  .faq .item{padding:24px 0;border-top:1px solid rgba(107,79,63,.24)}
  .faq .item:first-child{border-top:none;padding-top:6px}
  .faq .q{font-family:var(--font-display);font-weight:600;font-size:1.2rem;line-height:1.25;color:var(--ink);margin:0 0 8px;max-width:none}
  .faq .a{margin:0}
  .faq .a p{margin:0 0 12px}
  .faq .a p:last-child{margin-bottom:0}

  @media (prefers-reduced-motion: reduce){
    *{transition:none!important}
    .reveal,.hero .kicker,.hero h1,.hero .frame,.polaroid{opacity:1!important;transform:none!important}
    html{scroll-behavior:auto}
  }