:root{
    --paper:#FDFAF5;
    --paper-warm:#F8F1E7;
    --sand:#E8DCC8;
    --ink-muted:#9A8B7C;
    --card:#F5EFE4;
    --card-2:#EFE6D6;
    --ink:#3A3028;
    --ink-soft:#6B5E4F;
    --marigold:#E3A244;
    --marigold-deep:#B87420;
    --terracotta:#C67B5C;
    --indigo:#293755;
    --indigo-2:#1F2C46;
    --cream:#FBF3E4;
    --line:rgba(58,48,40,.10);
    --shadow-sm:0 2px 8px rgba(58,48,40,.06);
    --shadow:0 12px 30px -12px rgba(58,48,40,.22);
    --shadow-lg:0 30px 60px -20px rgba(41,55,85,.45);
    --r-lg:24px;
    --r-md:18px;
    --r-sm:12px;
    --maxw:1160px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{font-family:"Bricolage Grotesque",system-ui,sans-serif;line-height:1.08;letter-spacing:-.02em}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{
    font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);
    display:inline-flex;align-items:center;gap:.55rem;
    background:var(--card);border:1px solid var(--line);
    padding:.5rem .85rem;border-radius:999px;
  }
  .eyebrow b{color:var(--marigold-deep);font-weight:600}
  .deva{font-size:1.05em;color:var(--terracotta)}

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:1rem;
    min-height:52px;padding:0 1.5rem;border-radius:999px;cursor:pointer;
    border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
    white-space:nowrap;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--marigold-deep);color:var(--cream);box-shadow:0 8px 20px -8px rgba(184,116,32,.6)}
  .btn-primary:hover{background:#a3651a;box-shadow:0 12px 26px -8px rgba(184,116,32,.7)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{background:var(--card);border-color:rgba(58,48,40,.2)}
  .btn-ghost-light{background:transparent;color:var(--cream);border-color:rgba(251,243,228,.35)}
  .btn-ghost-light:hover{background:rgba(251,243,228,.1)}
  .btn-sm{min-height:44px;padding:0 1.15rem;font-size:.92rem}

  /* Header — scoped to the site header, which is a direct child of body.
     A bare `header` selector also matches <header> inside an <article>, which
     is how the blog post title ended up sticky and painting over the page. */
  body > header{
    position:sticky;top:0;z-index:50;
    background:rgba(253,250,245,.82);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  /* Brand lockup — hands mark + wordmark */
  .brand{display:flex;align-items:center;gap:11px;line-height:1.1}
  .brand__mark{
    width:38px;height:38px;flex:none;display:block;object-fit:contain;object-position:center;
  }
  .brand__text{display:flex;flex-direction:column;line-height:1.1}
  .brand .name{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.28rem;letter-spacing:-.02em}
  .brand .desc{font-size:.72rem;color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap}
  /* The full tagline needs room; below 1100px fall back to the short descriptor. */
  .brand .desc .desc-long{display:inline}
  .brand .desc .desc-short{display:none}
  @media (max-width:1100px){
    .brand .desc .desc-long{display:none}
    .brand .desc .desc-short{display:inline}
  }
  .brand .name .dot{color:var(--marigold-deep)}
  .foot-brand .mark{width:32px;height:32px;object-fit:contain;margin-bottom:10px;display:block}
  @media (max-width:480px){
    .brand__mark{width:32px;height:32px}
    .brand .name{font-size:1.12rem}
  }
  .nav-links{display:flex;align-items:center;gap:1.75rem}
  .nav-links a.link{font-size:.95rem;color:var(--ink-soft);font-weight:500;transition:color .15s}
  .nav-links a.link:hover{color:var(--ink)}
  .menu-btn{display:none}

  /* Hero */
  .hero{padding:64px 0 72px;position:relative}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero h1{font-size:clamp(2.4rem,5.2vw,3.9rem);font-weight:600;margin:1.25rem 0 1rem;max-width:14ch}
  .hero .sub{font-size:1.18rem;color:var(--ink-soft);max-width:34ch;margin-bottom:1.75rem}
  .hero .cta-row{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}
  .hero .note{margin-top:1.1rem;font-size:.92rem;color:var(--ink-soft);display:flex;align-items:center;gap:.5rem}
  .hero .note i{color:var(--marigold-deep)}
  .cred{
    margin-top:1.6rem;padding:1rem 1.15rem;border-left:3px solid var(--marigold);
    background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:.98rem;color:var(--ink);max-width:44ch;font-style:italic;
  }

  /* Hero device area */
  .device-stage{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:520px;gap:24px}
  .device-caption{
    position:relative;z-index:2;text-align:center;max-width:34ch;
    font-size:.98rem;line-height:1.5;color:var(--ink-soft);
  }
  .device-stage::before{
    content:"";position:absolute;width:min(420px,90%);height:420px;
    background:radial-gradient(circle at 50% 45%, rgba(227,162,68,.28), rgba(227,162,68,0) 62%);
    filter:blur(6px);z-index:0;
  }

  /* Phone mockup */
  .phone{
    position:relative;z-index:2;width:290px;height:592px;
    background:#1a2338;border-radius:44px;padding:12px;
    box-shadow:var(--shadow-lg), 0 0 0 2px rgba(41,55,85,.9), inset 0 0 0 2px rgba(255,255,255,.04);
  }
  .phone::after{ /* side button */
    content:"";position:absolute;right:-3px;top:150px;width:3px;height:64px;border-radius:2px;background:#2c3a5a;
  }
  .screen{
    position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;
    background:linear-gradient(180deg,#2f3f61 0%, #293755 45%, #1f2c46 100%);
    color:var(--cream);display:flex;flex-direction:column;
  }
  .notch{
    position:absolute;top:12px;left:50%;transform:translateX(-50%);
    width:96px;height:26px;background:#12192b;border-radius:999px;z-index:5;
  }
  .screen-top{
    /* clears the 26px notch that ends at y=38 */
    padding:48px 22px 0;display:flex;align-items:center;justify-content:space-between;
    font-size:.78rem;color:rgba(251,243,228,.7);
  }
  .screen-top .app{font-family:"Bricolage Grotesque";font-weight:600;font-size:.9rem;color:var(--cream);letter-spacing:-.01em}

  .diya-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:0 24px}
  .diya-glow{
    position:absolute;width:230px;height:230px;border-radius:50%;
    background:radial-gradient(circle at 50% 50%, rgba(227,162,68,.55), rgba(227,162,68,.12) 55%, rgba(227,162,68,0) 72%);
    animation:breathe 5.5s ease-in-out infinite;
  }
  .diya-orb{
    position:relative;width:96px;height:96px;border-radius:50%;
    background:radial-gradient(circle at 42% 38%, #FCE3AE, #E3A244 46%, #C67B5C 100%);
    box-shadow:0 0 44px 6px rgba(227,162,68,.55);
    animation:breathe 5.5s ease-in-out infinite;
  }
  .diya-orb::after{
    content:"";position:absolute;top:14px;left:26px;width:20px;height:26px;border-radius:50%;
    background:rgba(255,247,230,.75);filter:blur(3px);
  }
  .diya-label{
    position:relative;margin-top:30px;text-align:center;z-index:3;
  }
  .diya-label .kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,243,228,.6)}
  .diya-label .stepname{font-family:"Bricolage Grotesque";font-weight:600;font-size:1.32rem;margin-top:.35rem;color:var(--cream)}
  .diya-label .glossy{font-size:.78rem;color:rgba(251,243,228,.55);margin-top:.4rem}

  .screen-bottom{padding:0 22px 30px}
  .progress-dots{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
  .progress-dots span{width:8px;height:8px;border-radius:50%;background:rgba(251,243,228,.22)}
  .progress-dots span.on{background:var(--marigold);width:22px;border-radius:999px}
  .screen-cta{
    background:var(--marigold-deep);color:var(--cream);text-align:center;
    padding:14px;border-radius:16px;font-weight:600;font-size:.98rem;
    display:flex;align-items:center;justify-content:center;gap:.5rem;
  }
  .screen-sub{text-align:center;font-size:.76rem;color:rgba(251,243,228,.55);margin-top:12px}

  .float-tag{
    position:absolute;z-index:4;background:var(--paper);color:var(--ink);
    border:1px solid var(--line);border-radius:14px;padding:.6rem .8rem;
    box-shadow:var(--shadow);font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:.5rem;
  }
  .float-tag i{color:var(--terracotta);font-size:1.1rem}
  .float-tag .t-sub{display:block;font-weight:400;color:var(--ink-soft);font-size:.72rem}
  .tag-a{top:70px;left:-8px}
  .tag-b{bottom:96px;right:-14px}

  /* Section basics */
  section{position:relative}
  .sec-pad{padding:80px 0}
  .sec-head{max-width:52ch}
  /* Standalone, not just inside .sec-head — the signup card and interior page
     headers use it too, and scoping it made those render unstyled. */
  .kick{display:inline-block;color:var(--marigold-deep);font-weight:600;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
  .sec-head h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:600;margin:.6rem 0 0}

  /* Stats, narrative, feature-card and five-step CSS removed 2026-08-13 along with
     their sections — rules were left with zero markup using them. */

  /* Photo card — real South Asian photography, shown close to true.
     Only a whisper of warmth; the quilts already carry the palette. */
  .photo-card{
    border-radius:var(--r-md);overflow:hidden;position:relative;border:1px solid var(--line);
    box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--sand);
  }
  .photo-card img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(1.04) contrast(1.02);
  }
  .photo-card::after{
    content:"";position:absolute;inset:0;background:var(--marigold);
    mix-blend-mode:soft-light;opacity:.10;pointer-events:none;
  }
  .photo-card .cap{
    position:absolute;bottom:0;left:0;right:0;z-index:2;
    padding:16px 18px;color:var(--cream);font-size:.85rem;font-weight:500;
    background:linear-gradient(180deg,rgba(28,39,64,0),rgba(28,39,64,.82));
  }

  /* Full-bleed split — the photo is a wall of the section, not a card sitting in it */
  .split{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;overflow:hidden}
  .split--warm{background:var(--paper-warm)}
  .split__media{position:relative;min-height:580px;background:var(--sand)}
  .split__media img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(1.04) contrast(1.02);
  }
  .split__media::after{
    content:"";position:absolute;inset:0;background:var(--marigold);
    mix-blend-mode:soft-light;opacity:.10;pointer-events:none;
  }
  .split__body{display:flex;align-items:center;padding:clamp(52px,6vw,92px) clamp(24px,4.6vw,72px)}
  .split__inner{max-width:54ch}
  .split--flip .split__media{order:2}

  /* Evidence items inside a split */
  .ev-lede{font-size:1.08rem;color:var(--ink-soft);margin-top:1rem;max-width:50ch}
  .ev-list{margin-top:30px;display:grid;gap:22px}
  .ev-item{padding-left:20px;border-left:2px solid var(--sand)}
  .ev-item h3{font-size:1.04rem;font-weight:600;margin-bottom:.4rem;line-height:1.35}
  .ev-item p{color:var(--ink-soft);font-size:1rem;line-height:1.62}
  .ev-item .src{display:block;margin-top:.5rem;font-size:.79rem;color:var(--ink-muted);font-style:italic}
  .ev-close{
    margin-top:32px;font-family:"Bricolage Grotesque";font-weight:600;
    font-size:clamp(1.1rem,2.2vw,1.32rem);line-height:1.35;color:var(--ink);max-width:36ch;
  }

  @media (max-width:900px){
    .split{grid-template-columns:1fr}
    .split__media{min-height:0;aspect-ratio:4/3}
    .split--flip .split__media{order:0}
    .split__body{padding:46px 24px 54px}
    .split__inner{max-width:none}
  }

  /* CTA band */
  .cta-band{background:linear-gradient(160deg,var(--indigo) 0%, var(--indigo-2) 100%);color:var(--cream)}
  .cta-inner{text-align:center;max-width:44ch;margin:0 auto;padding:84px 0}
  .cta-inner h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:600;color:var(--cream)}
  .cta-inner p{font-size:1.15rem;color:rgba(251,243,228,.78);margin:1.1rem 0 2rem}
  .cta-inner .cta-row{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}

  /* Footer */
  footer{background:var(--paper);border-top:1px solid var(--line);padding:52px 0 44px}
  .foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
  .foot-brand .name{font-family:"Bricolage Grotesque";font-weight:700;font-size:1.2rem}
  .foot-brand .name .dot{color:var(--marigold-deep)}
  .foot-brand .tag{font-size:.92rem;color:var(--ink-soft);margin-top:.35rem;max-width:34ch}
  .foot-links{display:flex;gap:1.5rem;flex-wrap:wrap}
  .foot-links a{font-size:.92rem;color:var(--ink-soft);font-weight:500}
  .foot-links a:hover{color:var(--ink)}
  .disclaimer{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft);max-width:60ch}
  .disclaimer a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:.18em}
  .disclaimer a:hover{color:var(--marigold-deep)}
  .disclaimer br{content:"";display:block;margin-top:.5rem}

  /* Reveal animation */
  .reveal{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}
  .d4{animation-delay:.35s}.d5{animation-delay:.45s}.d6{animation-delay:.55s}

  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes breathe{
    0%,100%{transform:scale(1);opacity:.92}
    50%{transform:scale(1.09);opacity:1}
  }

  /* Responsive */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .device-stage{order:-1;min-height:0;padding-top:8px}
  }
  @media (max-width:640px){
    .sec-pad{padding:60px 0}
    .hero{padding:44px 0 56px}
    .tag-a{left:-4px;top:56px}.tag-b{right:-6px}
    .cta-inner{padding:64px 0}
  }
  @media (prefers-reduced-motion:reduce){
    .reveal{animation:none;opacity:1;transform:none}
    .diya-glow,.diya-orb{animation:none}
    html{scroll-behavior:auto}
  }

  /* ══════════════════════════════════════════════════════════════════════
     SHELL — added with the shared header/footer build (2026-08-13)
     ══════════════════════════════════════════════════════════════════════ */

  /* The brand lockup is a link home; it must not look like body copy. */
  a.brand{text-decoration:none;color:inherit}

  /* Active page in the nav */
  .nav-links a.link[aria-current="page"]{
    color:var(--ink);font-weight:600;
    box-shadow:inset 0 -2px 0 var(--marigold);
  }

  /* Mobile nav toggle — hidden until the links stop fitting */
  .nav-toggle{
    display:none;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:12px;
    background:transparent;border:1px solid var(--line);
    color:var(--ink);font-size:1.35rem;cursor:pointer;
  }
  .nav-toggle:hover{background:var(--card)}

  /* Let the nav tighten before it collapses. A half-screen desktop window is
     ~700–960px and has ample room for five links; collapsing to a hamburger
     there hides navigation for no reason. */
  @media (max-width:1100px){
    .nav-links{gap:1.3rem}
  }
  @media (max-width:940px){
    .nav-links{gap:1rem}
    .nav-links a.link{font-size:.9rem}
  }
  /* In the tightest band the descriptor yields so the links survive.
     Below 700px the nav collapses anyway and the descriptor returns. */
  @media (max-width:830px) and (min-width:701px){
    .brand .desc{display:none}
  }

  @media (max-width:700px){
    .nav{position:relative;flex-wrap:wrap}
    .nav-toggle{display:flex}
    .nav-links{
      display:none;width:100%;order:3;
      flex-direction:column;align-items:stretch;gap:0;
      padding:8px 0 16px;
    }
    .nav-links.is-open{display:flex}
    .nav-links a.link{
      padding:14px 4px;font-size:1rem;
      border-bottom:1px solid var(--line);
    }
    .nav-links a.link[aria-current="page"]{box-shadow:none;color:var(--marigold-deep)}
    .nav-links .btn{margin-top:14px;text-align:center;justify-content:center}
  }

  /* Footer — now three columns with headings */
  .foot-grid{gap:44px}
  .foot-links{flex-direction:column;gap:.6rem;align-items:flex-start}
  .foot-head{
    font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink);margin-bottom:.25rem;
  }

  /* Interior page scaffolding */
  .wrap-narrow{max-width:720px;margin:0 auto;padding:0 24px}
  .page-head h1{
    font-family:"Bricolage Grotesque";font-weight:600;
    font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.12;letter-spacing:-.02em;
    margin:.6rem 0 1.2rem;
  }
  .page-head p{font-size:1.08rem;color:var(--ink-soft);margin-bottom:1.1rem;max-width:62ch}
  .page-head .pull{
    font-family:"Bricolage Grotesque";font-weight:600;font-size:1.2rem;
    color:var(--ink);border-left:3px solid var(--marigold);padding-left:18px;margin:1.6rem 0;
  }
  .stub-note{
    margin-top:2rem;padding:14px 18px;border-radius:var(--r-sm);
    background:var(--card);border:1px dashed var(--terracotta);
    font-size:.9rem;color:var(--ink-soft);
  }

  /* Scroll reveal (progressive enhancement — visible by default if JS is off) */
  .reveal-on-scroll{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
  .reveal-on-scroll.is-visible{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    .reveal-on-scroll{opacity:1;transform:none;transition:none}
  }

  /* Footer tap targets. The design system floor is 44px; footer links were
     rendering at 24px, which is a real miss for a one-handed user. */
  @media (max-width:860px){
    .foot-links{gap:0}
    .foot-links a{
      display:flex;align-items:center;min-height:44px;
      border-bottom:1px solid var(--line);
    }
    .foot-links a:last-child{border-bottom:0}
    .foot-head{margin-top:.5rem}
  }
  a.brand{min-height:44px}

  /* ══ Signup — editorial, not a form widget ══════════════════════════════
     Sits in the same full-bleed split as the rest of the page. No floating
     card: that shape is the one thing every email-capture section does, and
     it made this the only section shaped differently from its neighbours. */
  .signup__title{font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:600;margin:.6rem 0 0}
  .signup__lede{color:var(--ink-soft);margin-top:.9rem;max-width:46ch}
  .signup__form{margin-top:30px;max-width:34rem}

  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .field{margin-bottom:14px;display:flex;flex-direction:column}
  .field label{
    font-size:.74rem;font-weight:600;color:var(--ink-soft);
    letter-spacing:.07em;text-transform:uppercase;margin-bottom:.45rem;
  }
  /* Underline fields rather than boxes — lighter, and closer to the editorial
     tone of the page than four heavy rounded rectangles. */
  .field input{
    font-family:inherit;font-size:1.02rem;color:var(--ink);
    background:transparent;border:0;border-bottom:1.5px solid var(--sand);
    border-radius:0;padding:.6rem .1rem;min-height:46px;
    transition:border-color .18s ease,box-shadow .18s ease;
  }
  .field input:focus{
    outline:none;border-bottom-color:var(--marigold);
    box-shadow:0 2px 0 0 var(--marigold);
  }
  .field input[aria-invalid="true"]{border-bottom-color:var(--terracotta)}

  .reasons{border:0;padding:0;margin:26px 0 28px}
  .reasons legend{
    font-size:.74rem;font-weight:600;color:var(--ink-soft);
    letter-spacing:.07em;text-transform:uppercase;margin-bottom:.9rem;padding:0;
  }
  .reasons .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-muted)}

  /* A quiet list with a real check mark, not four grey slabs. */
  .reason{
    display:flex;align-items:center;gap:.8rem;
    min-height:44px;padding:.35rem 0;cursor:pointer;
  }
  .reason input{position:absolute;opacity:0;width:0;height:0}
  .reason__box{
    width:22px;height:22px;flex:none;border-radius:6px;
    border:1.5px solid var(--sand);background:var(--paper);
    position:relative;transition:border-color .15s ease,background .15s ease;
  }
  .reason__box::after{
    content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;
    border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg) scale(.6);
    opacity:0;transition:opacity .15s ease,transform .15s ease;
  }
  .reason__text{font-size:1rem;color:var(--ink-soft);line-height:1.45;transition:color .15s ease}
  .reason:hover .reason__box{border-color:var(--terracotta)}
  .reason input:checked + .reason__box{background:var(--marigold-deep);border-color:var(--marigold-deep)}
  .reason input:checked + .reason__box::after{opacity:1;transform:rotate(45deg) scale(1)}
  .reason input:checked ~ .reason__text{color:var(--ink)}
  .reason input:focus-visible + .reason__box{
    outline:2px solid var(--marigold-deep);outline-offset:3px;
  }

  /* Button sits at its natural width — full-width reads as an untouched default */
  .signup__actions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
  .signup__note{font-size:.84rem;color:var(--ink-muted);line-height:1.5;max-width:22ch}
  .signup__status{margin-top:1.2rem;font-size:.97rem;font-weight:500;max-width:38rem}
  .signup__status.is-error{color:#9E5A3E}
  .signup__status.is-success{
    color:var(--ink);border-left:3px solid var(--marigold);
    padding:.9rem 1.1rem;background:var(--card);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
  }

  @media (max-width:560px){
    .field-row{grid-template-columns:1fr;gap:0}
    .signup__actions{gap:.9rem}
    .signup__actions .btn{width:100%}
    .signup__note{max-width:none}
  }

  /* Share your Nani — long-form page elements */
  /* Scoped to beat `.page-head p` / `.essay p`, which are more specific than a
     bare class and were flattening the opening line back to body size. */
  .lede-lg,
  .page-head p.lede-lg,
  .essay p.lede-lg{
    font-size:clamp(1.12rem,2.2vw,1.3rem);color:var(--ink);
    line-height:1.6;margin-bottom:1.4rem;max-width:52ch;
  }
  /* Contact — the address is the point of the page, so it gets to be the
     largest, most tappable thing on it rather than a link buried in a sentence. */
  .contact-card{
    margin:30px 0 0;padding:22px 24px;
    background:var(--card);border:1px solid var(--line);
    border-left:3px solid var(--marigold);
    border-radius:0 var(--r-md) var(--r-md) 0;box-shadow:var(--shadow-sm);
  }
  .contact-card .label{
    display:block;
    font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-muted);font-weight:600;
  }

  /* Inline links in body copy. The global reset (a{color:inherit;
     text-decoration:none}) is right for nav and cards, but it makes a link
     inside a paragraph indistinguishable from the text around it. */
  .page-head p a,.listen a,.listen__note a,.essay p a{
    color:var(--marigold-deep);text-decoration:underline;
    text-underline-offset:.18em;text-decoration-thickness:1px;
  }
  .page-head p a:hover,.listen a:hover,.listen__note a:hover,.essay p a:hover{color:#a3651a}
  .contact-card a{
    display:inline-flex;align-items:center;margin-top:.4rem;min-height:44px;
    font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;
    font-size:clamp(1.2rem,3.4vw,1.6rem);letter-spacing:-.02em;line-height:1.25;
    color:var(--marigold-deep);word-break:break-word;
  }
  .contact-card a:hover{color:#a3651a;text-decoration:underline}
  .contact-card .aside{margin-top:.35rem;font-size:.92rem;color:var(--ink-soft)}

  .listen{list-style:none;margin:24px 0 0;padding:0}
  .listen li{
    padding:.75rem 0 .75rem 0;border-bottom:1px solid var(--line);
    color:var(--ink-soft);font-size:1rem;line-height:1.55;
  }
  .listen li:last-child{border-bottom:0}
  .listen strong{color:var(--ink);font-weight:600}
  .listen__note{
    margin-top:1.2rem;font-size:.97rem;color:var(--ink-soft);
    font-style:italic;max-width:44ch;
  }
  .signup__future{
    margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);
    font-size:.95rem;color:var(--ink-soft);line-height:1.6;max-width:56ch;
  }
  /* The signup section on this page is a plain column, not a split */
  .signup.sec-pad{background:var(--paper-warm);border-top:1px solid var(--line)}
  .signup.sec-pad .signup__form{margin-top:26px}

  /* About — a personal essay. Deliberately no photography (design spec §6B:
     a stock image of "a grandmother" on this page would poison it), so the
     rhythm has to come from typography and section colour alone. */
  .essay{border-top:1px solid var(--line)}
  .essay--warm{background:var(--paper-warm)}
  .essay--close{background:var(--card)}
  .essay h2{
    font-size:clamp(1.6rem,3.2vw,2.15rem);font-weight:600;
    margin-bottom:1.4rem;max-width:20ch;
  }
  .essay p,.page-head p{
    font-size:1.06rem;line-height:1.75;color:var(--ink-soft);
    margin-bottom:1.15rem;max-width:62ch;
  }
  .essay p strong{color:var(--ink);font-weight:600}
  .essay .pull,.page-head .pull{
    font-family:"Bricolage Grotesque";font-weight:600;
    font-size:clamp(1.15rem,2.3vw,1.4rem);line-height:1.4;color:var(--ink);
    border-left:3px solid var(--marigold);padding-left:20px;
    margin:1.8rem 0 .5rem;max-width:48ch;
  }
  .byline{
    margin-top:2rem;font-size:.95rem;color:var(--ink-muted);
    letter-spacing:.02em;
  }
  .about-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.2rem}
  .about-note{margin-top:1rem;font-size:.9rem;color:var(--ink-muted)}

  /* The many words for grandmother. Latin transliteration throughout — the
     section's whole point is that no single language speaks for everyone, so
     setting it in one script would undercut it. */
  .names{
    list-style:none;margin:26px 0 0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px;
  }
  .names li{
    display:flex;align-items:baseline;gap:.5rem;
    background:var(--paper);border:1px solid var(--sand);
    border-radius:999px;padding:.5rem .95rem;
  }
  .names__word{
    font-family:"Bricolage Grotesque";font-weight:600;
    font-size:1rem;color:var(--ink);letter-spacing:-.01em;
  }
  .names__lang{font-size:.76rem;color:var(--ink-muted);letter-spacing:.02em}
  .names__note{margin-top:1.1rem;font-style:italic}

  /* ═══════════════════════════════════════════════════════════
     Blog — index cards, post layout, prose
     ═══════════════════════════════════════════════════════════ */

  /* ── Index ── */
  .post-list{list-style:none;margin:2.5rem 0 0;display:grid;gap:1.1rem}
  .post-card__link{
    display:block;padding:1.4rem 1.5rem;background:var(--card);
    border:1px solid var(--line);border-radius:var(--r-md);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .post-card__link:hover{
    transform:translateY(-2px);box-shadow:var(--shadow);
    border-color:rgba(58,48,40,.2);
  }
  .post-card__title{
    font-family:"Bricolage Grotesque",system-ui,sans-serif;
    font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  }
  .post-card__date{display:block;font-size:.83rem;color:var(--ink-muted);margin-top:.35rem}
  .post-card__excerpt{margin-top:.7rem;color:var(--ink-soft);font-size:.98rem}
  .post-card__more{
    display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
    font-size:.9rem;font-weight:600;color:var(--marigold-deep);
  }

  /* ── Post shell ── */
  .post__head{padding:56px 0 0}
  .post__back{
    display:inline-block;font-size:.9rem;color:var(--ink-soft);
    margin-bottom:1.4rem;transition:color .15s;
  }
  .post__back:hover{color:var(--marigold-deep)}
  .post__title{
    font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:600;
    letter-spacing:-.025em;line-height:1.1;max-width:20ch;
  }
  .post__meta{
    margin-top:1rem;font-size:.9rem;color:var(--ink-muted);
    display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  }
  .post__author{color:var(--ink-soft);font-weight:600}
  .post__meta time::before{content:"·";margin-right:.6rem;color:var(--sand)}

  /* ── Post prose ── */
  .post__body{padding:2.2rem 0 1rem;font-size:1.06rem}
  .post__body > p{margin-bottom:1.15rem;color:var(--ink-soft)}
  .post__body .lede-lg{color:var(--ink);font-size:1.2rem;margin-bottom:1.5rem}
  .post__body h2{
    font-size:clamp(1.4rem,3vw,1.85rem);font-weight:600;letter-spacing:-.02em;
    margin:2.6rem 0 .9rem;
  }
  .post__body h3{font-size:1.15rem;font-weight:600;margin:1.9rem 0 .6rem}
  .post__body ul,.post__body ol{margin:0 0 1.3rem 1.15rem;color:var(--ink-soft)}
  .post__body li{margin-bottom:.55rem;padding-left:.25rem}
  .post__body li::marker{color:var(--marigold)}
  .post__body strong{color:var(--ink);font-weight:600}
  .post__body a:not(.btn){
    color:var(--marigold-deep);text-decoration:underline;
    text-underline-offset:3px;text-decoration-thickness:1px;
  }
  .post__body a:not(.btn):hover{text-decoration-thickness:2px}

  /* Wide content scrolls inside itself; the page never scrolls sideways. */
  .table-scroll{overflow-x:auto;margin:0 0 1.5rem;-webkit-overflow-scrolling:touch}
  .post-table{border-collapse:collapse;width:100%;min-width:460px;font-size:.95rem}
  .post-table th{
    text-align:left;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-muted);padding:0 .9rem .6rem 0;border-bottom:1px solid var(--line);
  }
  .post-table td{
    padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--line);
    color:var(--ink-soft);vertical-align:top;
  }
  .post-table tr:last-child td{border-bottom:none}

  .callout{
    margin:1.8rem 0;padding:1.2rem 1.35rem;border-radius:var(--r-sm);
    background:var(--card);border-left:3px solid var(--marigold);
  }
  .callout p{color:var(--ink);font-size:1rem}
  .callout p + p{margin-top:.7rem}
  .callout--warn{background:#F7ECE6;border-left-color:var(--terracotta)}

  .post-sources,.post-related{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
  .post-sources h3,.post-related h3{
    font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;
    color:var(--ink-muted);margin-bottom:.7rem;font-family:inherit;font-weight:600;
  }
  .post-sources ul,.post-related ul{list-style:none;margin:0;font-size:.93rem}
  .post-sources li,.post-related li{margin-bottom:.5rem;color:var(--ink-soft)}

  /* ── Author bio ── */
  .author-bio{
    display:flex;gap:1rem;align-items:flex-start;
    margin:2.6rem 0 4rem;padding:1.4rem 1.5rem;
    background:var(--paper-warm);border:1px solid var(--line);border-radius:var(--r-md);
  }
  .author-bio__mark{width:40px;height:40px;flex:none;object-fit:contain}
  .author-bio__name{font-weight:600;margin-bottom:.3rem}
  .author-bio__text{font-size:.93rem;color:var(--ink-soft);line-height:1.6}
  @media (max-width:520px){
    .author-bio{flex-direction:column;gap:.7rem}
  }

  /* ── The Nani thread ──────────────────────────────────────
     Every post carries one of these: the line back to where the
     practice comes from. Marigold rule, warm ground, set apart
     from the body copy without shouting. */
  .tradition{
    margin:2rem 0;padding:1.3rem 1.5rem 1.35rem;
    background:var(--paper-warm);border:1px solid var(--line);
    border-left:3px solid var(--marigold);border-radius:0 var(--r-md) var(--r-md) 0;
  }
  .tradition__label{
    display:flex;align-items:center;gap:.5rem;
    font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
    font-weight:600;color:var(--marigold-deep);margin-bottom:.6rem;
  }
  .tradition__label::before{
    content:"";width:14px;height:14px;flex:none;border-radius:50%;
    background:radial-gradient(circle at 40% 36%, #FCE3AE, #E3A244 55%, #C67B5C 100%);
    box-shadow:0 0 8px 1px rgba(227,162,68,.45);
  }
  .tradition p{color:var(--ink);font-size:1rem;line-height:1.62}
  .tradition p + p{margin-top:.65rem}
  .tradition cite{
    display:block;margin-top:.7rem;font-style:normal;
    font-size:.83rem;color:var(--ink-muted);
  }

  /* ── Post figures ────────────────────────────────────────── */
  .post-figure{margin:2rem 0}
  .post-figure img{
    width:100%;height:auto;display:block;border-radius:var(--r-md);
    border:1px solid var(--line);background:var(--card);
  }
  .post-figure figcaption{
    margin-top:.6rem;font-size:.85rem;color:var(--ink-muted);line-height:1.5;
  }
  /* Pulls out of the narrow column on wide screens so a hero image can breathe. */
  @media (min-width:900px){
    .post-figure--wide{margin-left:-80px;margin-right:-80px}
  }
  .post-figure--hero{margin-top:0;margin-bottom:2.2rem}