/*
Theme Name: Nan Made Theme
Theme URI: https://nanmade.com.au
Author: Lamoureux Lane
Description: Custom theme for Nan Made — a commission-free marketplace where women over 50 sell what they bake.
Version: 5.4.0
License: GNU General Public License v2 or later
Text Domain: nan-made-theme
*/

/* ══════════════════════════════════════════════════════════════
   NAN MADE 2.1.0 — written from scratch. Every rule exists once.
   1 TOKENS   2 RESET   3 TYPE   4 BUTTONS   5 HEADER   6 COMPONENTS
   7 HOMEPAGE 8 WHY THIS MATTERS  9 JOIN NAN MADE  10 FOOTER  11 RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── 1 TOKENS ────────────────────────────────────────────────── */
:root{
--red:#E40037;          /* primary scarlet */
--red-deep:#A8002A;
--btn:#F31E2D;          /* button red — postcards and scone box. Never changed. */
--btn-deep:#B91522;
--fuchsia:#FF45C4;
--bubblegum:#FF70D2;
--bubblegum-pale:#FFB3E6;
--blush:#FFD6F2;        /* soft pink — breathing room and heading builds */
--icing:#FFEAF6;        /* almost-white pink — ticker type */
--orange:#FF621F;       /* tiger flame */
--orange-deep:#D63C00;
--ink:#8A0035;
--white:#FFF;

--display:"Playfair Display",Georgia,serif;
--body:"Fraunces",Georgia,serif;
--label:"DM Sans",Arial,sans-serif;

--shell:min(1380px,calc(100% - 56px));
--measure:min(900px,calc(100% - 56px));
--pad-section:clamp(84px,8vw,132px);
--gap:clamp(20px,2.4vw,38px);
}

/* ── 2 RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
.nm-slot{display:block;width:100%;background:rgba(255,255,255,.14)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 3 TYPE ──────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:900;margin:0;letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:italic}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.nm-k{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;text-indent:.2em;
font-size:14px;font-weight:900;margin:0 0 22px;line-height:1.2}

.nm-lead{font-family:var(--display);font-style:italic;font-size:clamp(23px,2.6vw,36px);line-height:1.25}

/* ── 3b THE HEADING SYSTEM ───────────────────────────────────────
   GROUND            FACE     BUILD BENEATH
   red               white    2 steps blush
   fuchsia           white    2 steps blush
   orange            red      3 steps blush
   pale / soft pink  red      2 steps orange
   bubblegum         red      2 steps blush
   Moments on orange: red face, 8 steps blush.
   Small headings anywhere: 1 step.
   ─────────────────────────────────────────────────────────────── */
.h-on-red>h2,.h-on-fuchsia>h2{color:var(--white);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 10px 10px rgba(120,0,50,.3)}
.h-on-orange>h2{color:var(--red);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 11px 11px rgba(120,0,50,.3)}
.h-on-pale>h2{color:var(--red);
text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 10px 10px rgba(120,0,50,.28)}
.h-on-bubblegum>h2{color:var(--red);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 10px 10px rgba(120,0,50,.28)}
.h-moment>h2{color:var(--red);font-size:clamp(4.4rem,8.6vw,10.4rem);line-height:.9;letter-spacing:-.05em;
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--blush),
0 5px 0 var(--blush),0 6px 0 var(--blush),0 7px 0 var(--blush),0 8px 0 var(--blush),0 20px 20px rgba(120,0,50,.32)}
h2{font-size:clamp(3.2rem,6vw,7.2rem);line-height:.92}
h3{font-size:clamp(1.6rem,2.1vw,2.3rem);line-height:1.06}
.h-small,.h-small h3,.h-small h2{text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}
.nm-button--orange{border-color:var(--orange);background:linear-gradient(#FFC372,var(--orange) 50%,#DF5000);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(160,60,0,.22),0 7px var(--orange-deep)}
.nm-button--pink{border-color:var(--fuchsia);background:linear-gradient(#FF8FDC,var(--fuchsia) 48%,#D4009B);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(150,0,105,.22),0 7px #B8008A}

/* ── 5 HEADER, TICKER, NAV ──────────────────────────────────────── */
.nm-topline{display:none}
.nm-ticker{height:40px;background:var(--orange);color:var(--icing);overflow:hidden;display:flex;align-items:center}
.nm-ticker-track{display:flex;gap:5rem;width:max-content;white-space:nowrap;
animation:nmTicker 42s linear infinite;font-family:var(--label);font-size:16px;font-weight:800;letter-spacing:.04em}
@keyframes nmTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nm-header{position:relative;display:flex;align-items:center;gap:24px;min-height:96px;
padding:0 max(20px,calc((100% - 1380px)/2));background:var(--fuchsia)}
.nm-brand{font-family:var(--display);font-weight:900;font-size:44px;line-height:.8;letter-spacing:-.06em;
color:var(--white);text-decoration:none}
.nm-nav{margin-left:auto}
.nm-menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nm-menu a{font-family:var(--label);font-size:15px;font-weight:800;color:var(--white);text-decoration:none;
padding-bottom:3px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.nm-menu a:hover,.nm-menu .current-menu-item>a{color:var(--orange);border-bottom-color:var(--orange)}
.nm-menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:54px;height:44px;
padding:0 12px;margin-left:auto;border:1.5px solid var(--orange);border-radius:13px;cursor:pointer;background:var(--orange);
box-shadow:inset 0 2px 1px rgba(255,255,255,.35),inset 0 -4px rgba(160,60,0,.22),0 6px var(--orange-deep)}
.nm-menu-toggle span:not(.screen-reader-text){display:block;height:3px;border-radius:2px;background:var(--red)}
.nm-menu-toggle:active{transform:translateY(4px)}

/* ── 6 COMPONENTS — reusable, used by every page ────────────────── */
.nm-section{padding:var(--pad-section) max(28px,calc((100% - 1180px)/2));text-align:center}
.nm-section>p{margin:24px auto 0;max-width:880px;font-size:20px;line-height:1.62}
.nm-edge-red{box-shadow:inset 0 -16px var(--red-deep)}
.nm-edge-orange{box-shadow:inset 0 -16px var(--orange-deep)}
.nm-edge-fuchsia{box-shadow:inset 0 -16px var(--red)}
.nm-edge-pale{box-shadow:inset 0 -16px var(--fuchsia)}

/* grounds */
.g-red{background:var(--red);color:var(--white)}
.g-fuchsia{background:var(--fuchsia);color:var(--white)}
.g-orange{background:var(--orange);color:var(--white)}
.g-pale{background:var(--blush);color:var(--red)}
.g-bubblegum{background:var(--bubblegum-pale);color:var(--red)}
.g-icing{background:var(--icing);color:var(--red)}
.g-red .nm-k,.g-fuchsia .nm-k,.g-orange .nm-k{color:var(--blush)}
.g-pale .nm-k,.g-bubblegum .nm-k,.g-icing .nm-k{color:var(--fuchsia)}

/* carousel — five images duplicated to ten, so the loop is exactly half */
.nm-carousel{display:flex;gap:18px;width:max-content;margin:46px 0;animation:nmFlow 60s linear infinite}
@keyframes nmFlow{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nm-carousel-item{width:min(52vw,620px);flex:0 0 auto}
.nm-carousel-item img,.nm-carousel-item .nm-slot{width:100%;height:420px;object-fit:cover}

/* photo strip */
.nm-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:46px auto 40px;max-width:1080px}
.nm-strip-item img,.nm-strip-item .nm-slot{width:100%;aspect-ratio:1/1;object-fit:cover}

/* full-bleed photo band */
.nm-fee-photo img,.nm-fee-photo .nm-slot{width:100%;height:auto;object-fit:contain;background:var(--fuchsia)}

/* two-column split */
.nm-split{display:grid;grid-template-columns:1fr 1fr}
.nm-split-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,5.5vw,96px);
background:var(--red);color:var(--white)}
.nm-split-image img,.nm-split-image .nm-slot{width:100%;height:100%;min-height:460px;object-fit:cover}

/* journal — three sets, loops one third */
.nm-journal{padding:96px 0 104px;overflow:hidden;background:var(--blush)}
.nm-journal>.nm-k,.nm-journal>h2{width:min(1260px,calc(100% - 56px));margin-left:auto;margin-right:auto;text-align:center}
.nm-journal>.nm-k{color:var(--fuchsia)}
.nm-journal>h2{color:var(--red);text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 10px 10px rgba(120,0,50,.28)}
.nm-journal-cards{display:flex;gap:14px;width:max-content;margin-top:46px;animation:nmJournal 96s linear infinite}
.nm-journal:hover .nm-journal-cards{animation-play-state:paused}
@keyframes nmJournal{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.nm-journal-card{flex:0 0 min(380px,84vw)}
.nm-journal-link{display:block;text-decoration:none}
.nm-journal-card img,.nm-journal-card .nm-slot{width:100%;aspect-ratio:4/3;object-fit:cover}
.nm-journal-body{padding:22px 2px 0}
.nm-journal-card h3{margin:0 0 12px;color:var(--red);font-size:clamp(1.4rem,1.8vw,1.9rem);
text-shadow:0 1px 0 var(--orange),0 8px 8px rgba(120,0,50,.26)}
.nm-journal-card p{margin:0;color:var(--ink);font-size:17px;line-height:1.6}
.nm-card-arrow{display:inline-block;margin-top:16px;font-family:var(--label);font-size:14px;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--fuchsia);text-decoration:none}

/* madame monet grid */
.nm-madam-parent{max-width:840px;margin:44px auto 26px}
.nm-madam-parent img,.nm-madam-parent .nm-slot{width:100%;aspect-ratio:16/9;object-fit:cover}
.nm-madam-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:920px;margin:0 auto}
.nm-madam-tile{display:block;text-decoration:none}
.nm-madam-tile img,.nm-madam-tile .nm-slot{width:100%;object-fit:cover}
.nm-madam-tile--sq img,.nm-madam-tile--sq .nm-slot{aspect-ratio:4/3}
.nm-madam-tile--wide img,.nm-madam-tile--wide .nm-slot{aspect-ratio:5/2}
.nm-madam-tile h3{margin:18px 0 0;padding-top:14px;border-top:2px solid var(--blush);color:var(--blush);
font-size:clamp(1.3rem,1.7vw,1.8rem);text-shadow:none}
.nm-madam-tile p{margin:8px 0 0;color:var(--white);font-size:16px;line-height:1.5}

/* faq */
.nm-faq-list{max-width:820px;margin:44px auto 0;text-align:left}
.nm-faq details{border-bottom:2px solid var(--fuchsia);padding:20px 0}
.nm-faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-size:clamp(19px,2.1vw,26px);color:var(--red)}
.nm-faq summary::-webkit-details-marker{display:none}
.nm-faq summary::after{content:"+";float:right;color:var(--fuchsia);font-weight:900}
.nm-faq details[open] summary::after{content:"\2013"}
.nm-faq details p{margin-top:14px;color:var(--red);font-size:17px}

/* search shells */
.nm-market-search{display:flex;align-items:center;gap:14px;max-width:820px;margin:52px auto 0;
padding:12px 12px 12px 26px;background:var(--white);border:3px solid var(--fuchsia);border-radius:22px;
box-shadow:9px 11px 0 var(--red)}
.nm-market-search input[type=search]{flex:1;border:0;outline:0;background:none;font-family:var(--display);
font-style:italic;font-size:clamp(17px,1.9vw,23px);color:var(--red)}
.nm-market-search input[type=search]::placeholder{color:var(--fuchsia);opacity:1}
.nm-search-shell{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:790px;
margin:52px auto 0;padding:14px 14px 14px 25px;background:var(--white);border:3px solid var(--fuchsia);
border-radius:21px;box-shadow:9px 10px var(--red);color:var(--red);font-weight:800;text-align:left}

/* ── 7 HOMEPAGE ─────────────────────────────────────────────────── */
.nm-hero{position:relative;display:flex;align-items:center;min-height:min(84vh,860px);background:var(--red);overflow:hidden}
.nm-hero-bg{position:absolute;inset:0}
.nm-hero-bg img,.nm-hero-bg .nm-slot{width:100%;height:100%;object-fit:cover}
.nm-hero-copy{position:relative;z-index:1;width:min(900px,66vw);padding:clamp(40px,5.5vw,92px) max(28px,calc((100% - 1380px)/2))}
.nm-hero-copy .nm-k{color:var(--white);font-size:12px;text-shadow:0 1px 3px rgba(120,0,50,.4)}
.nm-hero h1{color:var(--white);font-size:clamp(3.6rem,7.4vw,9rem);line-height:.94;
text-shadow:0 1px 0 #FFF,0 2px 0 #FFF,0 3px 0 var(--blush),0 4px 0 var(--blush),0 5px 0 var(--bubblegum),0 16px 20px rgba(120,0,40,.32)}
.nm-hero .nm-sub{max-width:560px;margin:30px 0 0;color:var(--white);font-family:var(--display);font-style:italic;
font-size:clamp(20px,2.2vw,30px);line-height:1.25}

.nm-feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.nm-feature{display:flex;flex-direction:column;padding:18px 0 30px;background:var(--red);color:var(--white)}
.nm-feature>div{display:flex;flex-direction:column;flex:1;padding:0 23px}
.nm-feature h2{font-size:clamp(1.7rem,2.2vw,2.6rem);line-height:.98;margin-bottom:18px;color:var(--white);
text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}
.nm-feature a{margin-top:auto;font-family:var(--label);font-size:15px;font-weight:800;color:var(--white);text-decoration:none}
.nm-tile-img{width:calc(100% - 34px);aspect-ratio:2/3;object-fit:cover;margin:17px;
box-shadow:0 0 0 1px rgba(255,255,255,.4),0 14px 26px -6px rgba(160,0,90,.4);
transform:translateY(-3px);transition:transform .3s ease,box-shadow .3s ease}
.nm-feature:hover .nm-tile-img{transform:translateY(-10px) scale(1.02)}

.nm-market{padding:118px 28px 126px;background:var(--orange);text-align:center}
.nm-market .nm-k{color:var(--blush);margin-bottom:34px}

.nm-discover{padding:110px max(28px,calc((100% - 1260px)/2));background:var(--icing);text-align:center}
.nm-catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}
.nm-cat{display:block;overflow:hidden;background:var(--red);color:var(--white);text-decoration:none;
transition:transform .25s ease,box-shadow .25s ease}
.nm-cat:nth-child(3n+2){background:var(--fuchsia)}
.nm-cat:nth-child(3n){background:var(--orange)}
.nm-cat:hover{transform:scale(1.035);position:relative;z-index:1;box-shadow:0 18px 34px -10px rgba(160,0,90,.4)}
.nm-cat img,.nm-cat .nm-slot{width:100%;aspect-ratio:1/1;object-fit:cover}
.nm-cat b{display:block;padding:16px;font-family:var(--label);font-size:22px}

.nm-editorial-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.nm-editorial{min-height:370px;padding:0 0 40px;background:var(--red);color:var(--white)}
.nm-editorial:nth-child(3){background:var(--orange)}
.nm-editorial img,.nm-editorial .nm-slot{width:100%;aspect-ratio:1.45;object-fit:cover;margin-bottom:26px}
.nm-editorial .nm-k,.nm-editorial h2,.nm-editorial p{padding:0 27px}
.nm-editorial h2{font-size:clamp(1.7rem,2.2vw,2.6rem);color:var(--white);
text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}

.nm-gift{padding:112px 28px;background:var(--blush);color:var(--red);text-align:center}
.nm-gift h2{margin-bottom:44px;font-size:clamp(3.5rem,5.8vw,7.6rem)}
.nm-payoff{display:block;margin-bottom:56px;color:var(--fuchsia);
font:italic 700 clamp(30px,3.4vw,52px)/1.15 var(--display)}

.nm-siren{padding:96px 0 116px;background:var(--red);color:var(--white);overflow:hidden;text-align:center}
.nm-siren-copy>p{max-width:660px;margin:22px auto 0;font-size:19px}
.nm-siren-copy .nm-button{margin-top:38px}

.nm-public{padding:112px max(28px,calc((100% - 1240px)/2));background:var(--orange);color:var(--white);text-align:center}
.nm-public-grid{display:grid;grid-template-columns:1fr;text-align:center}
.nm-public p{max-width:700px;margin:26px auto 0;font-size:19px}
.nm-public .nm-button{margin-top:38px}
.nm-note{display:block;margin-top:28px;font-family:var(--label);font-size:15px;font-weight:900;
letter-spacing:.06em;text-transform:uppercase;color:var(--white)}

/* ── 8 WHY THIS MATTERS ─────────────────────────────────────────── */
.nm-hero-stacked{display:block}
.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{background:var(--red);color:var(--white);text-align:center;
padding:clamp(50px,6vw,96px) max(28px,calc((100% - 1180px)/2)) clamp(46px,5vw,82px)}
.nm-hero-stacked .nm-why-copy .nm-k,.nm-hero-stacked .nm-join-copy .nm-k{color:var(--blush)}
.nm-hero-stacked h1{color:var(--white);font-size:clamp(3.4rem,7vw,8.6rem);line-height:.98;
text-shadow:0 1px 0 #FFF,0 2px 0 #FFF,0 3px 0 var(--blush),0 4px 0 var(--blush),0 5px 0 var(--bubblegum),0 16px 20px rgba(120,0,40,.32)}
.nm-why-photo img,.nm-why-photo .nm-slot,.nm-join-photo img,.nm-join-photo .nm-slot{width:100%;height:auto;
object-fit:contain;background:var(--red)}
.nm-hero-statement{margin:0;padding:clamp(46px,5vw,78px) max(28px,calc((100% - 1000px)/2));
background:var(--red);color:var(--white);text-align:center;font-family:var(--display);font-style:italic;
font-size:clamp(30px,4vw,60px);line-height:1.15}

.nm-why-fee{padding:clamp(64px,6vw,92px) max(28px,calc((100% - 820px)/2)) clamp(70px,7vw,100px);
background:var(--fuchsia);color:var(--white);text-align:center}
.nm-why-fee .nm-k{color:var(--white);font-size:17px}
.nm-why-fee>p{margin:32px auto 0;font-size:24px}
.nm-why-fee .nm-button{margin-top:38px}

.nm-why-story-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
padding:clamp(48px,5vw,84px) max(20px,calc((100% - 1320px)/2));background:var(--bubblegum-pale)}
.nm-why-story-pair img,.nm-why-story-pair .nm-slot{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:30px;
box-shadow:0 14px 28px -10px rgba(140,0,80,.35)}
.nm-why-story-pair h2{color:var(--red);font-size:clamp(2rem,2.9vw,3.2rem);margin-bottom:22px}
.nm-why-story-pair p{color:var(--red);font-size:18px;white-space:pre-line}

.nm-why-carousel,.nm-wisdom{padding:clamp(84px,8vw,124px) 0;overflow:hidden;text-align:center}
.nm-why-carousel{background:var(--red);color:var(--white)}
.nm-wisdom{background:var(--red);color:var(--white)}
.nm-why-carousel p,.nm-wisdom p{max-width:900px;margin:34px auto 0;padding:0 28px;font-size:19px}
.nm-figures-red{background:var(--red)}
.nm-moments,.nm-oz,.nm-twenty{background:var(--orange);color:var(--white)}
.nm-help{background:var(--red);color:var(--white)}
.nm-help p{max-width:980px;margin:24px auto 0;font-size:20px}
.nm-just{display:block;margin:34px auto 0;max-width:900px;color:var(--blush);
font-family:var(--display);font-style:italic;font-size:clamp(24px,2.8vw,40px);line-height:1.25}
.nm-oz-list{list-style:none;padding:0;margin:40px auto 0;max-width:760px;display:grid;gap:20px;text-align:left}
.nm-oz-list li{font-size:19px}
.nm-oz-list b{color:var(--blush)}
.nm-social-grid,.nm-impact{background:var(--fuchsia);color:var(--white)}
.nm-why-market{background:var(--orange);color:var(--white)}
.nm-why-built{background:var(--red);color:var(--white)}

/* ── 9 JOIN NAN MADE ────────────────────────────────────────────── */
.nm-what-is{background:var(--orange);color:var(--white)}
.nm-what-is>p{max-width:680px;color:var(--blush);font-size:clamp(18px,1.7vw,22px)}
.nm-promise-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:clamp(34px,3.6vw,58px) 0 0;background:var(--red)}
.nm-promise img,.nm-promise .nm-slot{width:100%;aspect-ratio:4/3;object-fit:cover}
.nm-promise>div{padding:30px clamp(20px,2.4vw,38px) 44px;text-align:center}
.nm-promise h3{color:var(--white);margin-bottom:14px;text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}
.nm-promise p{color:var(--white);font-size:17px}
.nm-helps{padding:0 0 clamp(70px,7vw,110px);background:var(--red);color:var(--white)}
.nm-helps-carousel{padding-top:14px;overflow:hidden}
.nm-helps-head{padding:clamp(56px,5.5vw,88px) 28px clamp(44px,4.5vw,70px);text-align:center}
.nm-helps-head .nm-k{color:var(--blush)}
.nm-resource-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
.nm-resource{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;background:var(--red)}
.nm-resource--1,.nm-resource--5{background:var(--fuchsia)}
.nm-resource--2,.nm-resource--4{background:var(--orange)}
.nm-resource img,.nm-resource .nm-slot{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s ease}
.nm-resource:hover img{transform:scale(1.04)}
.nm-resource>div{flex:1;padding:28px 26px 26px;text-align:left}
.nm-resource h3{margin:0 0 12px;color:var(--white);font-size:clamp(1.7rem,2.3vw,2.5rem);
text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}
.nm-resource p{margin:0;color:var(--white);font-family:var(--display);font-style:italic;font-size:clamp(19px,1.55vw,23px)}
.nm-resource-arrow{display:inline-block;margin-top:16px;font-size:28px;font-weight:900;color:var(--white)}
.nm-free,.nm-founding,.nm-manifesto,.nm-join-ending{background:var(--orange);color:var(--white)}
.nm-manifesto{background:var(--red)}
.nm-join-ending{background:var(--red)}
.nm-manifesto .nm-lead{color:var(--blush)}
.nm-twohalves{display:grid;grid-template-columns:1fr 1fr}
.nm-half img,.nm-half .nm-slot{width:100%;aspect-ratio:4/3;object-fit:cover}
.nm-half>div{padding:clamp(40px,4.2vw,68px) clamp(30px,3.4vw,56px) clamp(48px,5vw,76px);text-align:center}
.nm-half h3{font-size:clamp(2rem,3vw,3.4rem);margin-bottom:18px;color:var(--blush);text-shadow:none}
.nm-half p{color:var(--white);font-size:18px}
.nm-half--forward{background:var(--red)}
.nm-half--grants{background:var(--fuchsia)}
.nm-faq{background:var(--blush);color:var(--red)}
.nm-wisdom-carousel{margin-top:46px}

/* ── 10 FOOTER ──────────────────────────────────────────────────── */
.nm-footer{background:var(--fuchsia);color:var(--white)}
.nm-footer-top{width:var(--shell);margin:auto;padding:105px 0;text-align:center}
.nm-footer-top .nm-k{color:var(--orange);font-size:13px}
.nm-footer-top h2{font-size:clamp(2.6rem,4.4vw,5.2rem);line-height:.94;color:var(--white);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 10px 10px rgba(120,0,50,.3)}
.nm-footer-top p{max-width:640px;margin:26px auto 0;font-size:18px}
.nm-footer-bottom{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:34px;align-items:start;
padding:54px max(28px,calc((100% - 1380px)/2));background:var(--red);color:var(--white)}
.nm-footer-bottom a{color:var(--white);text-decoration:underline}
.nm-footer-bottom a:hover{color:var(--orange)}
.nm-footer-bottom .nm-k{color:var(--orange);margin-bottom:16px}
.nm-footer-brand{font-family:var(--display);font-weight:900;font-size:53px;line-height:.72;letter-spacing:-.1em;color:var(--orange)}
.nm-footer-copy{margin-top:16px;font-family:var(--label);font-size:13px;font-weight:600}
.nm-footer-menu{list-style:none;padding:0;margin:0;display:grid;gap:10px;
font-family:var(--label);font-size:15px;font-weight:600}

/* ── page + prose ───────────────────────────────────────────────── */
.nm-page{width:100%}
.nm-prose{width:min(800px,calc(100% - 44px));margin:auto;padding:90px 0;color:var(--ink)}
.nm-prose h1,.nm-prose h2,.nm-prose h3{color:var(--red)}

/* ── 11 RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1100px){
.nm-feature-grid,.nm-editorial-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.nm-catgrid,.nm-resource-grid,.nm-promise-strip{grid-template-columns:1fr 1fr}
.nm-why-story-pair,.nm-twohalves,.nm-split,.nm-madam-grid{grid-template-columns:1fr}
.nm-footer-bottom{grid-template-columns:1fr 1fr}
.nm-strip{grid-template-columns:1fr}
}
@media(max-width:700px){
.nm-menu-toggle{display:flex}
.nm-nav{display:none;margin-left:0}
.nm-nav.is-open{display:block;position:absolute;top:64px;right:14px;z-index:9;
width:min(300px,calc(100% - 28px));padding:20px 22px;border-radius:18px;
background:rgba(228,0,55,.94);backdrop-filter:blur(10px);box-shadow:0 18px 40px -12px rgba(90,0,35,.55)}
.nm-menu{display:grid;gap:14px}
.nm-header{min-height:70px;padding:0 16px}
.nm-brand{font-size:36px}
.nm-hero{display:flex;flex-direction:column;min-height:0}
.nm-hero-bg{position:relative;inset:auto;order:2}
.nm-hero-bg img,.nm-hero-bg .nm-slot{height:auto;object-fit:contain}
.nm-hero-copy{order:1;width:100%;padding:30px 20px 26px}
.nm-hero h1{font-size:clamp(3rem,12vw,4.6rem)}
.nm-hero .nm-sub{margin:22px 0 30px;font-size:19px}
.nm-feature-grid,.nm-editorial-grid,.nm-catgrid,.nm-resource-grid,.nm-promise-strip{grid-template-columns:1fr}
.nm-tile-img{aspect-ratio:4/3}
.nm-carousel-item{width:82vw}
.nm-carousel-item img,.nm-carousel-item .nm-slot{height:280px}
.nm-market-search,.nm-search-shell{flex-direction:column;align-items:stretch;padding:18px;gap:12px}
.nm-footer-bottom{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.nm-ticker-track,.nm-carousel,.nm-journal-cards{animation:none}
.nm-journal-cards,.nm-carousel{width:auto;overflow-x:auto}
.nm-feature:hover .nm-tile-img,.nm-cat:hover,.nm-resource:hover img{transform:none}
}

/* ── sections and wrappers not yet covered ──────────────────────── */
.nm-why-statement{padding:var(--pad-section) max(28px,calc((100% - 1060px)/2));background:var(--orange);color:var(--white);text-align:center}
.nm-why-statement h2{margin-bottom:56px}
.nm-why-statement>p{margin:22px auto 0;max-width:800px;font-size:20px}
.nm-why-statement .nm-lead{margin-top:34px;color:var(--blush)}
.nm-market-inner{width:var(--shell);margin:auto}
.nm-help-copy{max-width:none;margin:0 auto}
.nm-why-carousel-copy{width:min(1100px,calc(100% - 56px));margin:auto}
.nm-why-hero,.nm-join-hero{background:var(--red)}
.nm-why-page,.nm-join-page{width:100%}
.nm-split-hero{display:block}
/* ── the three moments on orange keep the deep pink footing ─────── */
.nm-market h2,.nm-why-statement h2,.nm-why-market h2{
color:var(--red);font-size:clamp(4.4rem,8.6vw,10.4rem);line-height:.9;letter-spacing:-.05em;
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--blush),
0 5px 0 var(--blush),0 6px 0 var(--blush),0 7px 0 var(--blush),0 8px 0 var(--blush),0 20px 20px rgba(120,0,50,.32)}

/* ── standard section headings by ground ────────────────────────── */
.nm-siren-copy h2,.nm-split-copy h2,.nm-figures-red h2,.nm-help h2,.nm-wisdom h2,.nm-manifesto h2,
.nm-why-built h2,.nm-helps-head h2,.nm-join-ending h2,.nm-why-carousel h2,.nm-promise h3{
color:var(--white);text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 10px 10px rgba(120,0,50,.3)}
.nm-why-fee h2,.nm-social-grid h2,.nm-impact h2{
color:var(--white);text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 10px 10px rgba(120,0,50,.3)}
.nm-public h2,.nm-moments h2,.nm-oz h2,.nm-twenty h2,.nm-what-is h2,.nm-free h2,.nm-founding h2{
color:var(--red);text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 11px 11px rgba(120,0,50,.3)}
.nm-gift h2,.nm-discover h2,.nm-faq h2{
color:var(--red);text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 10px 10px rgba(120,0,50,.28)}
/* ══════════════════════════════════════════════════════════════
   2.1.1 — SECTION DEFAULTS. The rewrite put these on a .nm-section
   class the templates never use, so nothing inherited them.
   ══════════════════════════════════════════════════════════════ */

/* every section: centred, padded, with air between heading and copy */
.nm-why-page>section,.nm-join-page>section,.front-page>section,
.nm-market,.nm-discover,.nm-gift,.nm-siren,.nm-public,.nm-journal{
padding:var(--pad-section) max(28px,calc((100% - 1180px)/2));text-align:center}
.nm-why-page>section>p,.nm-join-page>section>p{margin:24px auto 0;max-width:880px;font-size:20px;line-height:1.62}
.nm-why-page>section>h2,.nm-join-page>section>h2{margin-bottom:34px}
.nm-why-page>section>.nm-k,.nm-join-page>section>.nm-k{margin:0 auto 24px}
.nm-siren-copy,.nm-help-copy,.nm-helps-head,.nm-public-grid,.nm-why-carousel-copy,.nm-wisdom>div{text-align:center}
.nm-siren-copy h2,.nm-help h2,.nm-helps-head h2,.nm-public h2,.nm-why-carousel h2,.nm-wisdom h2{margin-bottom:30px}

/* sections that stay full-bleed keep no side padding */
.nm-why-story-pair,.nm-twohalves,.nm-promise-strip,.nm-helps,.nm-split,
.nm-figures-red,.nm-wisdom,.nm-why-carousel,.nm-journal{padding-left:0;padding-right:0}
.nm-helps{padding-top:0}

/* left-aligned by design */
.nm-editorial,.nm-editorial *{text-align:left}
.nm-resource>div,.nm-resource>div *{text-align:left}
.nm-faq-list,.nm-faq-list *{text-align:left}
.nm-oz-list,.nm-oz-list *{text-align:left}
.nm-split-copy,.nm-split-copy *{text-align:left}
.nm-why-story-pair article,.nm-why-story-pair article *{text-align:left}
.nm-footer-bottom,.nm-footer-bottom *{text-align:left}

/* IMAGE BOXES — every one given an explicit, consistent frame */
.nm-tile-img{aspect-ratio:2/3}
.nm-cat img,.nm-cat .nm-slot{aspect-ratio:1/1}
.nm-editorial img,.nm-editorial .nm-slot{aspect-ratio:1.45}
.nm-strip-item img,.nm-strip-item .nm-slot{aspect-ratio:1/1}
.nm-promise img,.nm-promise .nm-slot{aspect-ratio:4/3}
.nm-resource img,.nm-resource .nm-slot{aspect-ratio:1/1}
.nm-half img,.nm-half .nm-slot{aspect-ratio:4/3}
.nm-why-story-pair img,.nm-why-story-pair .nm-slot{aspect-ratio:16/10}
.nm-journal-card img,.nm-journal-card .nm-slot{aspect-ratio:4/3}
.nm-split-image img,.nm-split-image .nm-slot{min-height:460px;height:100%}
.nm-carousel-item img,.nm-carousel-item .nm-slot{height:420px}

/* BODY TEXT — plum was reading as purple. Red everywhere on pale grounds. */
:root{--ink:#B0002A}
.nm-journal-card p,.nm-journal-card h3{color:var(--red)}
.nm-prose{color:var(--red)}

/* PALE-GROUND HEADINGS — three steps so the red has real depth */
.nm-gift h2,.nm-discover h2,.nm-faq h2,.nm-journal>h2{
color:var(--red);text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 3px 0 var(--orange),
0 4px 0 var(--red-deep),0 14px 14px rgba(120,0,50,.3)}

/* JOIN HERO — always two lines, properly sized */
.nm-join-hero h1,.nm-why-hero h1{font-size:clamp(3rem,6vw,7.4rem);line-height:1.02}
.nm-what-is h2{font-size:clamp(4rem,7.6vw,9rem)}
.nm-what-is>p{margin-top:28px}
/* homepage sections have no wrapper, so each is named directly */
.nm-market,.nm-discover,.nm-gift,.nm-siren,.nm-public{text-align:center;
padding:var(--pad-section) max(28px,calc((100% - 1180px)/2))}
.nm-market>p,.nm-discover>p,.nm-gift>p,.nm-siren>p,.nm-public>p{margin:24px auto 0;max-width:880px;font-size:20px}
.nm-market>h2,.nm-discover>h2,.nm-gift>h2,.nm-siren>h2,.nm-public>h2{margin-bottom:34px}
.nm-market>.nm-k,.nm-discover>.nm-k,.nm-gift>.nm-k,.nm-siren>.nm-k,.nm-public>.nm-k{margin:0 auto 24px}
.nm-feature-grid,.nm-editorial-grid{padding:0}
.nm-journal{padding-left:0;padding-right:0}
/* ══════════════════════════════════════════════════════════════
   2.1.2 — THE BOTTOM EDGES. Every coloured band carries a deeper
   line along its foot, the same construction as the buttons.
   The rewrite moved these onto .nm-edge-* classes the templates
   never use, so all 27 of them vanished and the bands went flat.
   ══════════════════════════════════════════════════════════════ */
.nm-market,.nm-siren,.nm-public,.nm-gift,.nm-discover,
.nm-why-statement,.nm-why-fee,.nm-split,.nm-figures-red,.nm-moments,.nm-help,
.nm-why-market,.nm-wisdom,.nm-social-grid,.nm-oz,.nm-why-carousel,.nm-why-built,
.nm-what-is,.nm-helps,.nm-free,.nm-founding,.nm-manifesto,.nm-impact,
.nm-join-ending,.nm-twenty,.nm-promise-strip,.nm-footer-bottom{position:relative}

.nm-siren,.nm-figures-red,.nm-help,.nm-wisdom,.nm-manifesto,.nm-why-built,
.nm-helps,.nm-join-ending,.nm-split,.nm-promise-strip,.nm-why-carousel{
box-shadow:inset 0 -16px var(--red-deep)}

.nm-market,.nm-public,.nm-moments,.nm-why-market,.nm-oz,.nm-twenty,
.nm-why-statement,.nm-what-is,.nm-free,.nm-founding{
box-shadow:inset 0 -16px var(--orange-deep)}

.nm-why-fee,.nm-social-grid,.nm-impact{box-shadow:inset 0 -16px var(--red)}
.nm-gift{box-shadow:inset 0 -16px var(--fuchsia)}
.nm-discover,.nm-journal{box-shadow:inset 0 -16px var(--bubblegum)}
.nm-why-story-pair{box-shadow:inset 0 -16px var(--fuchsia)}
.nm-footer-bottom{box-shadow:inset 0 -16px var(--red-deep)}

/* the editorial and feature rows sit as one band, edge on the row not each tile */
.nm-feature-grid,.nm-editorial-grid{box-shadow:inset 0 -16px var(--red-deep)}
/* ══════════════════════════════════════════════════════════════
   2.1.3 — THE 3x3 DISCOVERY GRID
   The markup uses .nm-cat-img and a <span> holding the title with a
   <b> arrow. The rewrite styled img and b directly, so the image rule
   never applied and the label lost its layout entirely.
   ══════════════════════════════════════════════════════════════ */
.nm-catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:47px}
.nm-cat{display:block;overflow:hidden;background:var(--red);color:var(--white);text-decoration:none;
transition:transform .25s ease,box-shadow .25s ease}
.nm-cat:nth-child(3n+2){background:var(--fuchsia)}
.nm-cat:nth-child(3n){background:var(--orange)}
.nm-cat:hover{transform:scale(1.035);position:relative;z-index:1;box-shadow:0 18px 34px -10px rgba(160,0,90,.4)}
.nm-cat-img,.nm-cat .nm-slot{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.nm-cat span{display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:16px 19px 20px;color:var(--white);font:800 28px/.92 var(--display);text-align:left}
.nm-cat b{font-family:var(--body);font-size:22px;font-weight:900}
/* ══════════════════════════════════════════════════════════════
   2.1.4 — IMAGES AND THE HERO
   wp_get_attachment_image() writes explicit width and height
   attributes onto every img. Without height:auto the browser
   honours that height and distorts the picture. This is why every
   image on the site was out of shape.
   ══════════════════════════════════════════════════════════════ */
img{max-width:100%;height:auto;display:block}

/* every framed image: fill the width, take its shape from the ratio, crop from the centre */
.nm-tile-img,
.nm-cat-img,.nm-cat .nm-slot,
.nm-editorial img,.nm-editorial .nm-slot,
.nm-strip-item img,.nm-strip-item .nm-slot,
.nm-promise img,.nm-promise .nm-slot,
.nm-resource img,.nm-resource .nm-slot,
.nm-half img,.nm-half .nm-slot,
.nm-why-story-pair img,.nm-why-story-pair .nm-slot,
.nm-journal-card img,.nm-journal-card .nm-slot,
.nm-madam-parent img,.nm-madam-parent .nm-slot,
.nm-madam-tile img,.nm-madam-tile .nm-slot,
.nm-carousel-item img,.nm-carousel-item .nm-slot,
.nm-hero-bg img,.nm-hero-bg .nm-slot,
.nm-why-photo img,.nm-why-photo .nm-slot,
.nm-join-photo img,.nm-join-photo .nm-slot,
.nm-fee-photo img,.nm-fee-photo .nm-slot,
.nm-split-image img,.nm-split-image .nm-slot{
width:100%;object-fit:cover;object-position:center}

/* then the ratio each one holds */
.nm-tile-img{height:auto;aspect-ratio:2/3}
.nm-cat-img,.nm-cat .nm-slot{height:auto;aspect-ratio:1/1}
.nm-editorial img,.nm-editorial .nm-slot{height:auto;aspect-ratio:1.45}
.nm-strip-item img,.nm-strip-item .nm-slot{height:auto;aspect-ratio:1/1}
.nm-promise img,.nm-promise .nm-slot{height:auto;aspect-ratio:4/3}
.nm-resource img,.nm-resource .nm-slot{height:auto;aspect-ratio:1/1}
.nm-half img,.nm-half .nm-slot{height:auto;aspect-ratio:4/3}
.nm-why-story-pair img,.nm-why-story-pair .nm-slot{height:auto;aspect-ratio:16/10}
.nm-journal-card img,.nm-journal-card .nm-slot{height:auto;aspect-ratio:4/3}
.nm-madam-parent img,.nm-madam-parent .nm-slot{height:auto;aspect-ratio:16/9}
.nm-madam-tile--sq img,.nm-madam-tile--sq .nm-slot{height:auto;aspect-ratio:4/3}
.nm-madam-tile--wide img,.nm-madam-tile--wide .nm-slot{height:auto;aspect-ratio:5/2}
.nm-carousel-item img,.nm-carousel-item .nm-slot{height:420px;aspect-ratio:auto}
.nm-split-image img,.nm-split-image .nm-slot{height:100%;min-height:460px;aspect-ratio:auto}

/* photographs that must never crop */
.nm-why-photo img,.nm-why-photo .nm-slot,
.nm-join-photo img,.nm-join-photo .nm-slot,
.nm-fee-photo img,.nm-fee-photo .nm-slot{height:auto;aspect-ratio:auto;object-fit:contain;background:var(--red)}
.nm-fee-photo img,.nm-fee-photo .nm-slot{background:var(--fuchsia)}
.nm-hero-bg img,.nm-hero-bg .nm-slot{height:100%;aspect-ratio:auto}

/* HERO — headline sits at the top, not floating in the middle */
.nm-hero{align-items:flex-start}
.nm-hero-copy{padding-top:clamp(28px,3.2vw,52px)}
.nm-hero .nm-k{margin-bottom:16px}
/* the three the audit found unresolved */
.nm-editorial-img{display:block;width:100%;height:auto;aspect-ratio:1.45;object-fit:cover;object-position:center;margin:0 0 26px}
.nm-tile-img{height:auto}
.nm-why-photo img,.nm-why-photo .nm-slot,.nm-join-photo img,.nm-join-photo .nm-slot{height:auto;aspect-ratio:auto;object-fit:contain}
.nm-feature img{width:calc(100% - 34px);height:auto;aspect-ratio:2/3;object-fit:cover;margin:17px}
/* hero tiles keep their inset frame — the global image rule had overridden it */
.nm-tile-img{width:calc(100% - 34px);height:auto;aspect-ratio:2/3;object-fit:cover;margin:17px;
box-shadow:0 0 0 1px rgba(255,255,255,.4),0 14px 26px -6px rgba(160,0,90,.4);
transform:translateY(-3px);transition:transform .3s ease,box-shadow .3s ease}
.nm-feature:hover .nm-tile-img{transform:translateY(-10px) scale(1.02)}
.nm-button--orange{box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px rgba(120,40,0,.2),0 7px var(--orange-deep)}
.nm-carousel{margin:48px 0}
.nm-carousel-item .nm-slot{box-shadow:0 7px 16px rgba(72,0,28,.25);display:block}
.nm-carousel-item img{box-shadow:0 7px 16px rgba(72,0,28,.25);display:block}
.nm-discover{padding:105px max(28px,calc((100% - 1260px)/2))}
.nm-discover h2{font-size:clamp(3rem,5.6vw,6.4rem);line-height:.9}
.nm-editorial h2{font-size:clamp(1.9rem,2.6vw,3.1rem);line-height:1}
.nm-editorial p{color:var(--white)}
.nm-editorial-img{box-shadow:0 7px 16px rgba(72,0,28,.22)}
.nm-faq{padding:clamp(84px,8vw,124px) max(28px,calc((100% - 900px)/2));box-shadow:inset 0 -16px var(--fuchsia)}
.nm-faq details{text-align:left}
.nm-faq details p{text-align:left;line-height:1.66}
.nm-faq h2{text-align:center;font-size:clamp(3.2rem,5.6vw,6.4rem);line-height:.9}
.nm-faq summary{text-align:left}
.nm-feature h2{line-height:.95}
.nm-feature:hover .nm-tile-img{box-shadow:0 0 0 1px rgba(255,255,255,.55),0 26px 40px -8px rgba(160,0,90,.45)}
.nm-fee-photo img{display:block}
.nm-figures-red{padding:clamp(84px,8vw,124px) 0}
.nm-figures-red h2{text-align:center;font-size:clamp(3.4rem,6.2vw,7.2rem);line-height:.9}
.nm-footer-top p{line-height:1.6}
.nm-founding{padding:clamp(84px,8vw,132px) max(28px,calc((100% - 1000px)/2));text-align:center}
.nm-founding h2{font-size:clamp(3.6rem,6.6vw,7.6rem);line-height:.9}
.nm-free{padding:clamp(84px,8vw,132px) max(28px,calc((100% - 1000px)/2));text-align:center}
.nm-free h2{font-size:clamp(3.6rem,6.6vw,7.6rem);line-height:.9}
.nm-gift{padding:96px 28px}
.nm-half .nm-slot{display:block}
.nm-half img{display:block}
.nm-half p{line-height:1.62}
.nm-header{padding:0 max(28px,calc((100% - 1380px)/2));gap:28px;min-height:88px}
.nm-help{padding:clamp(84px,8vw,124px) max(28px,calc((100% - 1180px)/2));text-align:center;display:block}
.nm-help h2{font-size:clamp(3.8rem,7vw,8.2rem);line-height:.9}
.nm-help p{color:var(--white);line-height:1.6}
.nm-helps-head .nm-k{text-align:center}
.nm-helps-head h2{text-align:center}
.nm-hero{background:var(--fuchsia);color:var(--white);display:grid;min-height:calc(100svh - 139px)}
.nm-hero h1{line-height:.84}
.nm-hero-bg{width:100%;height:100%;object-fit:cover}
.nm-hero-copy{padding:clamp(55px,8vw,132px) max(28px,calc((100% - 1250px)/2));display:flex}
.nm-hero-stacked{min-height:0}
.nm-hero-stacked .nm-join-copy{padding:clamp(60px,7vw,110px) max(28px,calc((100% - 1180px)/2)) clamp(52px,5vw,88px);align-items:center}
.nm-hero-stacked .nm-why-copy{padding:clamp(60px,7vw,110px) max(28px,calc((100% - 1180px)/2)) clamp(52px,5vw,88px);align-items:center}
.nm-hero-statement{box-shadow:inset 0 -16px var(--red-deep)}
.nm-impact{padding:clamp(84px,8vw,124px) max(28px,calc((100% - 1120px)/2));text-align:center}
.nm-impact h2{font-size:clamp(2.8rem,4.6vw,5.4rem);line-height:.9}
.nm-join-ending{padding:clamp(84px,8vw,132px) max(28px,calc((100% - 1000px)/2));text-align:center}
.nm-join-ending h2{font-size:clamp(4rem,8vw,9.6rem);line-height:.9}
.nm-journal{padding:96px 0 104px;box-shadow:inset 0 -16px var(--fuchsia)}
.nm-journal-card{background:none;padding:0;box-shadow:none}
.nm-journal-card h3{font-size:clamp(1.4rem,1.9vw,2rem);line-height:1.05}
.nm-journal-card p{display:block}
.nm-journal-cards{padding:0 0 10px}
.nm-journal>.nm-k{color:var(--blush);width:100%}
.nm-k{margin:0 0 22px}
.nm-madam-parent img{display:block}
.nm-madam-tile img{display:block}
.nm-madam-tile p{padding:8px 0 0;margin:0}
.nm-manifesto{padding:clamp(84px,8vw,132px) max(28px,calc((100% - 1000px)/2))}
.nm-manifesto .nm-lead{font-size:clamp(24px,2.8vw,38px);line-height:1.25}
.nm-manifesto h2{font-size:clamp(3.8rem,7vw,8.2rem);line-height:.9}
.nm-market{padding:118px 28px 126px}
.nm-market h2{font-size:clamp(4.8rem,9.5vw,10.8rem)}
.nm-menu{gap:25px}
.nm-menu a{font-size:14px}
.nm-menu-toggle:active{box-shadow:inset 0 2px 1px rgba(255,255,255,.35),0 2px var(--orange-deep)}
.nm-moments{padding:clamp(90px,9vw,140px) max(28px,calc((100% - 1060px)/2));text-align:center}
.nm-moments h2{font-size:clamp(3.6rem,6.6vw,7.6rem);line-height:.9}
.nm-oz{padding:clamp(84px,8vw,124px) max(28px,calc((100% - 900px)/2));text-align:center}
.nm-oz h2{font-size:clamp(3.4rem,6.2vw,7.2rem);line-height:.9}
.nm-oz-list li{color:var(--white);line-height:1.55}
.nm-promise .nm-slot{display:block}
.nm-promise h3{font-size:clamp(1.5rem,2.1vw,2.2rem);line-height:1.05}
.nm-promise img{display:block}
.nm-promise p{line-height:1.6}
.nm-promise-strip{gap:0}
.nm-public{padding:96px 28px}
.nm-public p{color:var(--white);margin:26px 0 0;line-height:1.62}
.nm-public-grid{gap:clamp(36px,5vw,74px);align-items:center}
.nm-resource{padding:0;box-shadow:none}
.nm-resource .nm-slot{margin:0;display:block}
.nm-resource h3{line-height:1.02}
.nm-resource img{margin:0;display:block}
.nm-resource p{line-height:1.4}
.nm-resource-arrow{margin:16px 0 0;line-height:1}
.nm-resource-grid{padding:0;gap:0;margin:0 auto;align-items:stretch}
.nm-search-shell{box-shadow:9px 10px var(--red-deep)}
.nm-siren{padding:96px 0 116px}
.nm-siren-copy{width:min(1000px,calc(100% - 56px));margin:auto}
.nm-siren-copy h2{font-size:clamp(3.4rem,6.2vw,7.2rem);line-height:.9}
.nm-siren-copy>p{line-height:1.6}
.nm-slot{background:var(--bubblegum);color:var(--white);padding:16px;text-align:center;display:grid;min-height:250px}
.nm-social-grid{padding:clamp(90px,9vw,140px) max(28px,calc((100% - 1180px)/2));text-align:center}
.nm-social-grid h2{font-size:clamp(4rem,7.4vw,8.8rem);line-height:.9}
.nm-split{background:var(--red)}
.nm-split-copy{padding:clamp(55px,7vw,105px)}
.nm-split-hero{grid-template-columns:1fr 2fr;display:grid;min-height:720px}
.nm-split-image .nm-slot{display:block;min-height:500px}
.nm-split-image img{display:block;min-height:500px}
.nm-strip-item img{display:block}
.nm-ticker{color:#FFEAF6}
.nm-tile-img{display:block}
.nm-twenty{padding:clamp(84px,8vw,124px) max(28px,calc((100% - 900px)/2));text-align:center}
.nm-twenty h2{font-size:clamp(3.4rem,6.2vw,7.2rem);line-height:.9}
.nm-twohalves{padding:0;gap:0}
.nm-what-is{padding:clamp(84px,8vw,132px) max(28px,calc((100% - 1000px)/2));text-align:center}
.nm-what-is h2{font-size:clamp(4.4rem,8.4vw,10rem);line-height:.9}
.nm-what-is>p{margin:26px auto 0;line-height:1.55}
.nm-why-built{padding:clamp(84px,8vw,132px) max(28px,calc((100% - 980px)/2));text-align:center}
.nm-why-built h2{font-size:clamp(3.8rem,7vw,8.2rem);line-height:.9}
.nm-why-carousel{background:var(--fuchsia);padding:100px 0}
.nm-why-carousel p{color:var(--white)}
.nm-why-fee h2{font-size:clamp(4rem,7.6vw,9rem);line-height:.9}
.nm-why-fee>p{color:var(--white);line-height:1.5}
.nm-why-market{padding:clamp(90px,9vw,140px) max(28px,calc((100% - 1000px)/2));text-align:center}
.nm-why-market h2{font-size:clamp(3.6rem,6.8vw,7.8rem)}
.nm-why-statement{padding:clamp(90px,9vw,140px) max(28px,calc((100% - 1060px)/2))}
.nm-why-statement .nm-lead{font-size:clamp(24px,2.8vw,40px);line-height:1.2}
.nm-why-statement>p{color:var(--white);line-height:1.62}
.nm-why-story-pair{background:var(--bubblegum-pale);gap:clamp(24px,3vw,48px)}
.nm-why-story-pair .nm-slot{display:block}
.nm-why-story-pair article{padding:0;min-height:0}
.nm-why-story-pair h2{line-height:1.02}
.nm-why-story-pair img{display:block}
.nm-why-story-pair p{line-height:1.66}
.nm-wisdom h2{text-align:center;font-size:clamp(3.8rem,7vw,8.2rem);line-height:.9}
.nm-wisdom p{color:var(--white)}
.nm-wisdom>div{width:min(950px,calc(100% - 56px));margin:auto}
/* ══════════════════════════════════════════════════════════════
   2.3.0
   ══════════════════════════════════════════════════════════════ */

/* HERO — the restore added display:flex with no direction, so the
   eyebrow, headline and subheading laid out as three columns. */
.nm-hero-copy,.nm-why-copy,.nm-join-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.nm-hero-copy>*,.nm-hero .nm-k,.nm-hero h1,.nm-hero .nm-sub{width:100%;text-align:left;margin-left:0}
.nm-hero .nm-k{margin-bottom:16px}
.nm-hero h1{margin:0}
.nm-hero .nm-sub{margin:26px 0 0}

/* stacked heroes: heading band, full-width photograph, statement beneath */
.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{align-items:center;text-align:center}
.nm-hero-stacked .nm-why-copy>*,.nm-hero-stacked .nm-join-copy>*{text-align:center;width:100%}

/* MARKETPLACE eyebrow larger */
.nm-market>.nm-k{font-size:17px;margin-bottom:30px}

/* GLOSS on the red headings that were reading flat */
.nm-discover h2,.nm-gift h2{color:var(--red);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--bubblegum),
0 5px 0 var(--bubblegum),0 6px 0 var(--fuchsia),0 7px 0 var(--fuchsia),0 8px 0 var(--red-deep),
0 20px 20px rgba(120,0,50,.32)}
.nm-discover .nm-k{color:var(--fuchsia)}

/* SHARE BAND — eyebrow spaced and centred, copy centred */
.nm-public{text-align:center}
.nm-public>.nm-k,.nm-public-grid>div>.nm-k{display:block;width:100%;text-align:center;margin:0 auto 30px}
.nm-public h2{margin-bottom:26px}
.nm-public p,.nm-public .nm-note{text-align:center;margin-left:auto;margin-right:auto}
.nm-public-grid>div{width:100%}

/* JOURNAL — red ground, editorial */
.nm-journal{background:var(--red);box-shadow:inset 0 -16px var(--red-deep)}
.nm-journal>.nm-k{color:var(--blush)}
.nm-journal>h2{color:var(--white);font-size:clamp(3.4rem,6.2vw,7.2rem);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 12px 12px rgba(120,0,50,.3)}
.nm-journal-card h3{color:var(--white);text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}
.nm-journal-card p{color:var(--white)}
.nm-card-arrow{color:var(--blush)}

/* PAY IT FORWARD — image fills its half, no red padding around it */
.nm-split{gap:0}
.nm-split-image{display:block}
.nm-split-image img,.nm-split-image .nm-slot{width:100%;height:100%;min-height:0;object-fit:cover;margin:0}

/* STORY — padding reduced */
.nm-why-story-pair{padding:clamp(30px,3vw,52px) max(20px,calc((100% - 1320px)/2))}

/* space between the recruitment button and the section that follows */
.nm-siren{padding-bottom:clamp(96px,9vw,140px)}
.nm-siren-copy .nm-button{margin-bottom:8px}
/* stacked hero, both pages: heading band, full-width photo, statement beneath */
.nm-hero-stacked{display:block;min-height:0}
.nm-hero-stacked .nm-why-photo,.nm-hero-stacked .nm-join-photo{display:block;min-height:0;width:100%}
.nm-hero-stacked .nm-why-photo img,.nm-hero-stacked .nm-why-photo .nm-slot,
.nm-hero-stacked .nm-join-photo img,.nm-hero-stacked .nm-join-photo .nm-slot{
width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:var(--red);min-height:0}
.nm-hero-statement{margin:0}
.nm-button--orange{background:linear-gradient(#FFC372,var(--orange) 50%,#DF5000);border-color:var(--fuchsia);
box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px rgba(120,40,0,.2),0 7px var(--orange-deep)}
.nm-button--pink{background:linear-gradient(#FF8FDC,var(--fuchsia) 48%,#D4009B);border-color:var(--fuchsia);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(150,0,105,.22),0 7px #B8008A}
.nm-button--orange:active{box-shadow:inset 0 2px 1px rgba(255,255,255,.45),0 2px var(--orange-deep)}
.nm-button--pink:active{box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 2px #B8008A}

/* THE FLAT REDS — on a pale pink ground, a pink footing is invisible.
   These build straight into orange and deep red instead. */
.nm-discover h2,.nm-gift h2,.nm-journal-card h3{
color:var(--red);
text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 3px 0 var(--orange),0 4px 0 var(--orange),
0 5px 0 var(--orange),0 6px 0 var(--orange),0 7px 0 var(--red-deep),0 8px 0 var(--red-deep),
0 20px 20px rgba(120,0,50,.34)}
.nm-journal-card h3{color:var(--white);text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}

/* HOMEPAGE EDITORIAL STRIP — smaller headings, two lines, tighter */
.nm-editorial h2{font-size:clamp(1.5rem,1.95vw,2.2rem);line-height:1.04;margin-bottom:14px;
max-width:14ch;padding-left:27px;padding-right:27px}
.nm-editorial p{font-size:17px;line-height:1.55}
.nm-editorial{padding-bottom:34px}

/* HERO — less padding above, so the photograph is not cut off */
.nm-hero-copy{padding-top:clamp(20px,2.2vw,36px)}
.nm-hero .nm-k{font-size:14px;margin-bottom:14px}
.nm-hero h1{font-size:clamp(3.8rem,7.8vw,9.4rem)}
.nm-hero .nm-sub{margin-top:30px}

/* STACKED HEROES — eyebrow, heading and photograph all move up */
.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{
padding-top:clamp(26px,2.8vw,44px);padding-bottom:clamp(30px,3.2vw,52px)}
.nm-hero-stacked .nm-k{margin-bottom:16px}
.nm-hero-statement{padding-top:clamp(30px,3.4vw,54px);padding-bottom:clamp(30px,3.4vw,54px);
font-size:clamp(26px,3.2vw,46px)}

/* PAY IT FORWARD — snug */
.nm-split-copy{padding:clamp(38px,4vw,68px)}

/* BAKING WITH FIERCE PURPOSE — larger, with room before the copy */
.nm-why-statement h2{font-size:clamp(4.8rem,9vw,11rem);margin-bottom:56px}
.nm-why-statement>.nm-k{font-size:17px;margin-bottom:26px}
/* ══════════════════════════════════════════════════════════════
   2.3.2 — the pale sections go hot, and the hero comes down
   ══════════════════════════════════════════════════════════════ */

/* MADE WITH LOVE, JUST FOR YOU — fuchsia ground.
   Red on pale pink can never look glossy: depth needs somewhere dark
   to fall into, and a pale ground gives it nowhere. */
.nm-discover{background:var(--fuchsia);box-shadow:inset 0 -16px var(--red)}
.nm-discover .nm-k{color:var(--blush)}
.nm-discover h2{color:var(--white);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--red),0 4px 0 var(--red),
0 5px 0 var(--red),0 6px 0 var(--red-deep),0 7px 0 var(--red-deep),0 20px 20px rgba(120,0,50,.34)}

/* A GIFT FOR YOU — same reasoning, fuchsia ground */
.nm-gift{background:var(--fuchsia);color:var(--white);box-shadow:inset 0 -16px var(--red)}
.nm-gift .nm-k{color:var(--blush)}
.nm-gift h2{color:var(--white);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--red),0 4px 0 var(--red),
0 5px 0 var(--red),0 6px 0 var(--red-deep),0 7px 0 var(--red-deep),0 20px 20px rgba(120,0,50,.34)}
.nm-gift p{color:var(--white)}
.nm-gift .nm-payoff{color:var(--blush)}

/* HOMEPAGE HERO — everything comes down off the top edge */
.nm-hero-copy{padding-top:clamp(40px,4.6vw,74px)}
.nm-hero .nm-k{margin-bottom:24px}
.nm-hero h1{margin-top:20px;max-width:15ch}
.nm-hero .nm-sub{margin-top:50px}

/* Baking With Fierce Purpose: never more than two lines */
.nm-why-statement h2{max-width:16ch;margin-left:auto;margin-right:auto}
/* ══════════════════════════════════════════════════════════════
   2.4.0 — ONE GLOSS, EVERY PAGE
   The newest heading treatment only reached the homepage because the
   Join sections carry different class names. Written globally now.
   ══════════════════════════════════════════════════════════════ */

/* headings on ORANGE — red face, deep pink footing */
.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-public h2,.nm-moments h2,
.nm-oz h2,.nm-twenty h2,.nm-what-is h2,.nm-free h2,.nm-founding h2{
color:var(--red);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--blush),
0 5px 0 var(--blush),0 6px 0 var(--blush),0 7px 0 var(--bubblegum),0 8px 0 var(--fuchsia),
0 22px 22px rgba(120,0,50,.34)}

/* headings on RED or FUCHSIA — white face, red footing */
.nm-siren-copy h2,.nm-split-copy h2,.nm-figures-red h2,.nm-help h2,.nm-wisdom h2,.nm-manifesto h2,
.nm-why-built h2,.nm-helps-head h2,.nm-join-ending h2,.nm-why-carousel h2,.nm-why-fee h2,
.nm-social-grid h2,.nm-impact h2,.nm-discover h2,.nm-gift h2,.nm-journal>h2{
color:var(--white);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--red),0 4px 0 var(--red),
0 5px 0 var(--red),0 6px 0 var(--red-deep),0 7px 0 var(--red-deep),0 22px 22px rgba(120,0,50,.34)}

/* ── JOIN PAGE ─────────────────────────────────────────────────── */
/* What Is Nan Made → fuchsia */
.nm-what-is{background:var(--fuchsia);box-shadow:inset 0 -16px var(--red)}
.nm-what-is h2{color:var(--white);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--red),0 4px 0 var(--red),
0 5px 0 var(--red),0 6px 0 var(--red-deep),0 7px 0 var(--red-deep),0 22px 22px rgba(120,0,50,.34)}
.nm-what-is>p{color:var(--blush)}

/* three promises → soft pink, red heading, red text */
.nm-promise-strip{background:var(--blush);box-shadow:inset 0 -16px var(--fuchsia);padding-top:clamp(30px,3.2vw,50px)}
.nm-promise h3{color:var(--red);
text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 3px 0 var(--red-deep),0 10px 10px rgba(120,0,50,.28)}
.nm-promise p{color:var(--red)}

/* How Nan Made Helps You — carousel tight to the top, whole block compressed */
.nm-helps{padding-top:0;padding-bottom:clamp(40px,4vw,64px)}
.nm-helps-carousel{padding-top:0}
.nm-helps-carousel .nm-carousel{margin:0 0 6px}
.nm-helps-head{padding:clamp(34px,3.4vw,54px) 28px clamp(28px,3vw,44px)}
.nm-helps-head .nm-k{margin-bottom:18px}

/* Pay It Forward + Micro Grants — flush, no padding around the block */
.nm-twohalves{padding:0;gap:0}
.nm-half>div{padding:clamp(32px,3.4vw,54px) clamp(26px,3vw,46px) clamp(36px,3.8vw,58px)}
.nm-half h3{color:var(--blush)}
.nm-half--grants h3{color:var(--white)}

/* founding — quieter, with room before the button */
.nm-founding h2{font-size:clamp(2.8rem,5vw,5.6rem);line-height:.96}
.nm-founding>p{margin-top:26px;font-size:19px}
.nm-founding .nm-button{margin-top:44px}
.nm-free h2{font-size:clamp(3rem,5.4vw,6.2rem)}
.nm-manifesto h2,.nm-why-built h2{font-size:clamp(3rem,5.4vw,6.2rem)}
.nm-join-ending h2{font-size:clamp(3.4rem,6.4vw,7.6rem)}
.nm-join-ending .nm-button{margin-top:36px}
.nm-wisdom h2{font-size:clamp(3rem,5.4vw,6.2rem)}

/* stacked heroes — another 20px off the top */
.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{padding-top:clamp(14px,1.8vw,26px)}

/* footer heading its own colour */
.nm-footer-top h2{color:var(--orange);
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--orange-deep),0 12px 12px rgba(120,0,50,.3)}
/* ══════════════════════════════════════════════════════════════
   2.4.1 — THE BUTTONS. One definition. Nothing else defines them.
   ══════════════════════════════════════════════════════════════ */
.nm-button,.nm-share{display:inline-flex;align-items:center;justify-content:center;
min-height:58px;padding:15px 31px 16px;
border:1.5px solid var(--orange);border-radius:15px;cursor:pointer;
color:var(--white);text-decoration:none;
font:700 clamp(18px,1.55vw,25px)/1.1 var(--display);
background:linear-gradient(#FA4452,var(--btn) 45%,#D71928);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(130,9,20,.18),0 7px var(--btn-deep);
text-shadow:0 1px rgba(120,0,15,.3);
transition:transform .12s ease,box-shadow .12s ease}
.nm-button:hover,.nm-share:hover{transform:translateY(-2px);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(130,9,20,.18),0 9px var(--btn-deep)}
.nm-button:active,.nm-share:active{transform:translateY(5px);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 2px var(--btn-deep)}

.nm-button--orange{background:linear-gradient(#FFC372,var(--orange) 50%,#DF5000);border-color:var(--fuchsia);
box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px rgba(120,40,0,.2),0 7px var(--orange-deep)}
.nm-button--orange:hover{box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px rgba(120,40,0,.2),0 9px var(--orange-deep)}
.nm-button--orange:active{box-shadow:inset 0 2px 1px rgba(255,255,255,.45),0 2px var(--orange-deep)}

.nm-button--pink{background:linear-gradient(#FF8FDC,var(--fuchsia) 48%,#D4009B);border-color:var(--blush);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(150,0,105,.22),0 7px #B8008A}
.nm-button--pink:hover{box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(150,0,105,.22),0 9px #B8008A}
.nm-button--pink:active{box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 2px #B8008A}

/* the small header button */
.nm-join{display:inline-flex;align-items:center;justify-content:center;
padding:13px 18px;border:1.5px solid var(--orange);border-radius:15px;cursor:pointer;
color:var(--white);text-decoration:none;font:800 14px/1.1 var(--label);
background:linear-gradient(#FA4452,var(--btn) 45%,#D71928);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(130,9,20,.18),0 6px var(--btn-deep);
text-shadow:0 1px rgba(120,0,15,.3);transition:transform .12s ease,box-shadow .12s ease}
.nm-join:active{transform:translateY(4px);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 2px var(--btn-deep)}

/* HEROES — eyebrow and headline right at the top on both pages */
.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{
padding-top:clamp(8px,1vw,16px);padding-bottom:clamp(22px,2.4vw,38px)}
.nm-hero-stacked .nm-k{margin-bottom:12px}
.nm-hero-stacked h1{margin:0}

/* PAY IT FORWARD on Why This Matters — image flush, copy snug */
.nm-split{gap:0;align-items:stretch}
.nm-split-copy{padding:clamp(34px,3.6vw,58px) clamp(30px,3.4vw,56px)}
.nm-split-image{display:block;height:100%}
.nm-split-image img,.nm-split-image .nm-slot{display:block;width:100%;height:100%;min-height:0;
aspect-ratio:auto;object-fit:cover;margin:0}
/* ══════════════════════════════════════════════════════════════
   2.5.0
   ══════════════════════════════════════════════════════════════ */

/* pink button gets a red outline */
.nm-button--pink{border-color:var(--red)}

/* share band — button centred, note beneath it, in capitals */
.nm-public .nm-button,.nm-public .nm-share{margin:40px auto 0}
.nm-public .nm-note{display:block;margin:26px auto 0;text-align:center;
font-family:var(--label);font-size:15px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--white)}

/* the story pair stays side by side on desktop */
@media(min-width:901px){.nm-why-story-pair{display:grid;grid-template-columns:1fr 1fr}}

/* stacked heroes: thin band, full-width photo, substantial statement */
.nm-hero-statement{padding:clamp(34px,3.6vw,58px) max(28px,calc((100% - 1100px)/2));
font-size:clamp(30px,4.2vw,62px);line-height:1.12}

/* JOIN — the three promises butt straight against the colour above, one ground only */
.nm-promise-strip{padding-top:0;padding-bottom:0;box-shadow:none;background:var(--blush)}
.nm-promise>div{padding:26px clamp(20px,2.4vw,38px) 34px}

/* How Nan Made Helps You — red finishes right under the cards */
.nm-helps{padding-bottom:0;box-shadow:none}
.nm-resource-grid{margin-bottom:0}

/* Pay It Forward + Micro Grants — flush to both sides and to the bands above and below */
.nm-twohalves{padding:0;gap:0}
.nm-half{padding:0}
.nm-half>div{padding:clamp(28px,3vw,46px) clamp(22px,2.6vw,40px) clamp(32px,3.4vw,52px)}

/* Madame Monet — stop it screaming */
.nm-impact h2,.nm-social-grid h2{font-size:clamp(2.4rem,4vw,4.6rem);line-height:.96}
.nm-impact>.nm-k,.nm-social-grid>.nm-k{font-size:14px}

/* Baking A New Story For Women — fuchsia band, louder */
.nm-footer-top{background:var(--fuchsia);width:100%;max-width:none;padding:clamp(70px,7vw,110px) max(28px,calc((100% - 1180px)/2))}
.nm-footer-top h2{color:var(--white);font-size:clamp(3.4rem,6.4vw,7.4rem);line-height:.92;
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--red),0 4px 0 var(--red),
0 5px 0 var(--red),0 6px 0 var(--red-deep),0 7px 0 var(--red-deep),0 22px 22px rgba(120,0,50,.34)}
.nm-footer-top .nm-k{color:var(--blush)}
.nm-footer-top p{color:var(--white);font-size:19px}

/* journal must not clip */
.nm-journal{overflow:hidden}
.nm-journal-cards{will-change:transform}
/* ══════════════════════════════════════════════════════════════
   2.5.1 — sections that must carry no padding of their own.
   These are <section> children of the page wrapper, so they were
   inheriting clamp(84px,8vw,132px) on every side. That was the gap
   above the eyebrow and the gap stopping Pay It Forward hugging.
   ══════════════════════════════════════════════════════════════ */
.nm-why-page>.nm-why-hero,.nm-join-page>.nm-join-hero,
.nm-why-page>.nm-split,.nm-join-page>.nm-twohalves,
.nm-why-page>.nm-why-story-pair,.nm-join-page>.nm-promise-strip,
.nm-join-page>.nm-helps,.nm-why-page>.nm-figures-red,
.nm-why-page>.nm-wisdom,.nm-why-page>.nm-why-carousel,
.nm-join-page>.nm-journal,.nm-why-page>.nm-journal{padding:0}

/* the heading band inside the hero keeps its own tight padding */
.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{
padding:clamp(10px,1.2vw,20px) max(28px,calc((100% - 1180px)/2)) clamp(20px,2.2vw,34px)}
.nm-hero-stacked .nm-k{margin:0 0 10px}
.nm-hero-stacked h1{margin:0}

/* PAY IT FORWARD — the photograph hugs its half on every edge */
.nm-split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;padding:0}
.nm-split-image{display:block;height:100%;padding:0;margin:0}
.nm-split-image img,.nm-split-image .nm-slot{display:block;width:100%;height:100%;
min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover;margin:0}
.nm-split-copy{padding:clamp(34px,3.6vw,58px) clamp(30px,3.4vw,56px)}

/* the story pair keeps its own inner padding */
.nm-why-page>.nm-why-story-pair{padding:clamp(30px,3vw,52px) max(20px,calc((100% - 1320px)/2))}
.nm-join-page>.nm-promise-strip{padding:0}
.nm-join-page>.nm-helps{padding:0 0 0}

/* space beneath "she has been waiting her whole life" before the button */
.nm-help .nm-lead,.nm-siren-copy .nm-lead{margin-bottom:14px}
.nm-help .nm-button,.nm-help .nm-share{margin-top:46px}
.nm-siren-copy .nm-button{margin-top:46px;margin-bottom:0}
.nm-public .nm-button,.nm-public .nm-share{margin-top:46px}
/* ══════════════════════════════════════════════════════════════
   2.5.2 — the hero statement and the figures section
   The statement is a direct <p> child of its section, so the generic
   "section > p" rule was shrinking it to 20px body text. That thin red
   bar under the hero is the statement, not a button.
   ══════════════════════════════════════════════════════════════ */
.nm-why-page>section>p.nm-hero-statement,
.nm-join-page>section>p.nm-hero-statement,
p.nm-hero-statement{
margin:0;max-width:none;
padding:clamp(40px,4.4vw,72px) max(28px,calc((100% - 1100px)/2));
background:var(--red);color:var(--white);text-align:center;
font-family:var(--display);font-style:italic;font-weight:700;
font-size:clamp(30px,4.4vw,64px);line-height:1.12;
box-shadow:inset 0 -16px var(--red-deep)}

/* THESE AREN'T JUST FIGURES — padding restored, copy held inside the section */
.nm-why-page>.nm-figures-red{padding:clamp(76px,7vw,116px) 0 clamp(70px,6.6vw,104px)}
.nm-figures-red h2{margin-bottom:34px;padding:0 28px}
.nm-figures-red>p,.nm-figures-red p{max-width:900px;margin:36px auto 0;
padding:0 max(28px,calc((100% - 900px)/2));font-size:19px;line-height:1.62}
.nm-figures-red .nm-carousel{margin-top:8px}

/* the buttons, stated once more at high specificity so nothing can reach past them */
a.nm-button,button.nm-button,button.nm-share,a.nm-share{
display:inline-flex;align-items:center;justify-content:center;
min-height:58px;padding:15px 31px 16px;
border:1.5px solid var(--orange);border-radius:15px;cursor:pointer;
color:var(--white);text-decoration:none;
font:700 clamp(18px,1.55vw,25px)/1.1 var(--display);
background:linear-gradient(#FA4452,var(--btn) 45%,#D71928);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(130,9,20,.18),0 7px var(--btn-deep);
text-shadow:0 1px rgba(120,0,15,.3)}
a.nm-button--orange,button.nm-button--orange{background:linear-gradient(#FFC372,var(--orange) 50%,#DF5000);
border-color:var(--fuchsia);
box-shadow:inset 0 2px 1px rgba(255,255,255,.45),inset 0 -4px rgba(120,40,0,.2),0 7px var(--orange-deep)}
a.nm-button--pink,button.nm-button--pink{background:linear-gradient(#FF8FDC,var(--fuchsia) 48%,#D4009B);
border-color:var(--red);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(150,0,105,.22),0 7px #B8008A}

/* ══════════════════════════════════════════════════════════════
   3.0.0 — WOOCOMMERCE AND DOKAN
   Shop, product, cart, checkout, account, vendor dashboard, stores.
   Built from the same components as the rest of the site.
   ══════════════════════════════════════════════════════════════ */

/* ── shared shell ─────────────────────────────────────────────── */
.woocommerce,.woocommerce-page,.dokan-dashboard,.dokan-store{
width:var(--shell);margin:0 auto;padding:clamp(40px,4.4vw,72px) 0 clamp(70px,7vw,110px);color:var(--red)}
.woocommerce h1,.woocommerce h2,.woocommerce-page h1,.woocommerce-page h2{
color:var(--red);text-shadow:0 1px 0 var(--orange),0 2px 0 var(--orange),0 3px 0 var(--red-deep),0 12px 12px rgba(120,0,50,.28)}
.woocommerce a,.woocommerce-page a{color:var(--red)}

/* page banner — every shop page opens on a red band */
.nm-woo-banner{background:var(--red);color:var(--white);text-align:center;
padding:clamp(30px,3.4vw,54px) max(28px,calc((100% - 1180px)/2));box-shadow:inset 0 -16px var(--red-deep)}
.nm-woo-banner h1{color:var(--white);font-size:clamp(2.8rem,5.6vw,6.4rem);line-height:.94;
text-shadow:0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--red),0 4px 0 var(--red-deep),0 18px 18px rgba(120,0,50,.34)}
.woocommerce-breadcrumb{font-family:var(--label);font-size:13px;font-weight:800;letter-spacing:.14em;
text-transform:uppercase;color:var(--fuchsia);margin-bottom:26px}

/* ── product grid ─────────────────────────────────────────────── */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:40px 0 0;padding:0}
.woocommerce ul.products li.product{background:var(--white);margin:0;padding:0;text-align:left;overflow:hidden;
box-shadow:0 14px 30px -14px rgba(160,0,90,.34);transition:transform .25s ease,box-shadow .25s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 24px 40px -16px rgba(160,0,90,.4)}
.woocommerce ul.products li.product a img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
padding:20px 22px 8px;color:var(--red);font-family:var(--display);font-weight:900;
font-size:clamp(1.2rem,1.6vw,1.6rem);line-height:1.1}
.woocommerce ul.products li.product .price{display:block;padding:0 22px 4px;color:var(--fuchsia);
font-family:var(--display);font-weight:900;font-size:22px}
.woocommerce ul.products li.product .price del{opacity:.5;font-weight:400}
.woocommerce ul.products li.product .button{margin:14px 22px 24px}
.woocommerce ul.products li.product .onsale{position:absolute;margin:12px;padding:6px 12px;border-radius:999px;
background:var(--orange);color:var(--white);font-family:var(--label);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.woocommerce .woocommerce-result-count{font-family:var(--label);font-size:14px;font-weight:700;color:var(--fuchsia)}
.woocommerce .woocommerce-ordering select{padding:12px 16px;border:2px solid var(--fuchsia);border-radius:14px;
background:var(--white);color:var(--red);font-family:var(--label);font-weight:700}

/* ── every WooCommerce and Dokan button becomes a Nan Made button ── */
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce #respond input#submit,.woocommerce-page .button,.dokan-btn,.dokan-btn-theme,
.woocommerce a.button.alt,.woocommerce button.button.alt{
display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:13px 26px 14px;
border:1.5px solid var(--orange);border-radius:15px;cursor:pointer;
color:var(--white);text-decoration:none;
font:700 clamp(16px,1.2vw,20px)/1.1 var(--display);
background:linear-gradient(#FA4452,var(--btn) 45%,#D71928);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(130,9,20,.18),0 6px var(--btn-deep);
text-shadow:0 1px rgba(120,0,15,.3);
transition:transform .12s ease,box-shadow .12s ease}
.woocommerce .button:hover,.woocommerce a.button:hover,.dokan-btn:hover{
transform:translateY(-2px);color:var(--white);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px rgba(130,9,20,.18),0 8px var(--btn-deep)}
.woocommerce .button:active,.woocommerce a.button:active,.dokan-btn:active{
transform:translateY(4px);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 2px var(--btn-deep)}
.woocommerce a.added_to_cart{display:inline-block;margin-left:14px;font-family:var(--label);font-weight:800;color:var(--fuchsia)}

/* ── single product ───────────────────────────────────────────── */
.woocommerce div.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,3.6vw,60px);align-items:start}
.woocommerce div.product div.images img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.woocommerce div.product .product_title{font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:.96;margin-bottom:18px}
.woocommerce div.product p.price,.woocommerce div.product span.price{
color:var(--fuchsia);font-family:var(--display);font-weight:900;font-size:clamp(28px,3vw,44px)}
.woocommerce div.product .woocommerce-product-details__short-description{font-size:18px;line-height:1.66;margin:20px 0}
.woocommerce div.product form.cart{display:flex;align-items:center;gap:14px;margin:28px 0}
.woocommerce div.product .quantity input{width:88px;padding:14px;border:2px solid var(--fuchsia);border-radius:14px;
text-align:center;font-family:var(--display);font-weight:900;font-size:20px;color:var(--red)}
.woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;gap:8px;list-style:none;margin:44px 0 0;padding:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:var(--blush);border-radius:14px 14px 0 0}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{display:block;padding:14px 22px;
font-family:var(--label);font-weight:800;color:var(--red);text-decoration:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:var(--fuchsia)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--white)}
.woocommerce div.product .woocommerce-tabs .panel{background:var(--blush);padding:clamp(26px,3vw,48px);border-radius:0 14px 14px 14px}

/* ── cart ─────────────────────────────────────────────────────── */
.woocommerce table.shop_table{width:100%;border-collapse:separate;border-spacing:0;border:0;background:var(--white);
box-shadow:0 14px 30px -14px rgba(160,0,90,.3)}
.woocommerce table.shop_table th{background:var(--red);color:var(--white);padding:18px;
font-family:var(--label);font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-align:left}
.woocommerce table.shop_table td{padding:18px;border-top:1px solid var(--blush);color:var(--red);vertical-align:middle}
.woocommerce table.shop_table img{width:82px;height:auto;aspect-ratio:1/1;object-fit:cover}
.woocommerce .cart_totals h2{font-size:clamp(1.8rem,2.6vw,2.8rem)}
.woocommerce .cart_totals table{margin-top:18px}
.woocommerce .coupon input[type=text]{padding:14px 18px;border:2px solid var(--fuchsia);border-radius:14px;
font-family:var(--body);color:var(--red)}
.woocommerce .cart-empty,.woocommerce-info,.woocommerce-message{
padding:20px 24px;border:0;border-left:6px solid var(--orange);border-radius:14px;
background:var(--blush);color:var(--red);font-weight:700}
.woocommerce-error{padding:20px 24px;border:0;border-left:6px solid var(--red);border-radius:14px;
background:var(--blush);color:var(--red);list-style:none}

/* ── checkout, account, forms ─────────────────────────────────── */
.woocommerce form .form-row{display:block;margin-bottom:20px}
.woocommerce form .form-row label{display:block;margin-bottom:8px;
font-family:var(--label);font-size:14px;font-weight:800;color:var(--red)}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection--single,
.dokan-form-control,.dokan-dashboard input[type=text],.dokan-dashboard input[type=email],
.dokan-dashboard input[type=password],.dokan-dashboard select,.dokan-dashboard textarea{
width:100%;padding:15px 18px;border:2px solid var(--fuchsia);border-radius:14px;background:var(--white);
font-family:var(--body);font-size:17px;color:var(--red);outline:none}
.woocommerce form .form-row input.input-text:focus,.dokan-form-control:focus{border-color:var(--red)}
.woocommerce-checkout #customer_details{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.woocommerce-checkout h3{font-family:var(--display);font-weight:900;color:var(--red);
font-size:clamp(1.6rem,2.2vw,2.4rem);margin-bottom:18px}
.woocommerce-checkout #order_review{background:var(--blush);padding:clamp(24px,3vw,44px);border-radius:18px;margin-top:34px}
#add_payment_method #payment,.woocommerce-checkout #payment{background:transparent}
.woocommerce-checkout #payment ul.payment_methods{padding:0;border:0;list-style:none}
.woocommerce-checkout #payment div.form-row{padding:0}

/* my account */
.woocommerce-account .woocommerce-MyAccount-navigation{width:26%;float:left}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.woocommerce-account .woocommerce-MyAccount-navigation li a{display:block;padding:14px 18px;border-radius:12px;
background:var(--blush);color:var(--red);font-family:var(--label);font-weight:800;text-decoration:none}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--red);color:var(--white)}
.woocommerce-account .woocommerce-MyAccount-content{width:70%;float:right}
.woocommerce-account .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);float:none;width:100%}
.woocommerce-account .col2-set .col-1,.woocommerce-account .col2-set .col-2{width:100%;float:none;
background:var(--blush);padding:clamp(24px,3vw,42px);border-radius:18px}

/* ── dokan: store page, dashboard, geolocation ────────────────── */
.dokan-store-sidebar,.dokan-single-store{background:var(--white)}
.dokan-single-store .profile-frame{border:0}
.dokan-store-info,.dokan-store-widget{background:var(--blush);padding:clamp(20px,2.4vw,34px);border-radius:18px;color:var(--red)}
.dokan-dashboard .dokan-dash-sidebar{background:var(--red)}
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li a{color:var(--white);font-family:var(--label);font-weight:700}
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li.active,
.dokan-dashboard .dokan-dash-sidebar ul.dokan-dashboard-menu li:hover{background:var(--red-deep)}
.dokan-dashboard-content{background:var(--white);padding:clamp(22px,2.6vw,40px);border-radius:18px;
box-shadow:0 14px 30px -14px rgba(160,0,90,.28)}
.dokan-dashboard-content .dokan-dashboard-header h1{font-size:clamp(1.8rem,2.6vw,2.6rem)}
.dokan-geo-location-filter-form,.dokan-geolocation-location-filter-form{
display:flex;flex-wrap:wrap;align-items:center;gap:14px;max-width:900px;margin:34px auto 0;
padding:14px 14px 14px 24px;background:var(--white);border:3px solid var(--fuchsia);border-radius:22px;
box-shadow:9px 11px 0 var(--red)}
.dokan-geo-location-filter-form input[type=text],.dokan-geo-location-filter-form input[type=search]{
flex:1;min-width:180px;border:0;outline:0;background:none;
font-family:var(--display);font-style:italic;font-size:clamp(16px,1.6vw,21px);color:var(--red)}
.dokan-geo-location-filter-form input::placeholder{color:var(--fuchsia);opacity:1}
.dokan-range-slider,.irs{margin-top:10px}
.irs-bar,.irs-from,.irs-to,.irs-single{background:var(--fuchsia)}
.irs-handle{border-color:var(--red)}
#dokan-store-listing-filter-wrap,.dokan-store-list-filter-wrap{background:var(--blush);padding:18px;border-radius:18px}
.dokan-geolocation-map,.dokan-map{border-radius:18px;overflow:hidden;border:3px solid var(--fuchsia)}

/* ── pagination ───────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul{display:flex;gap:8px;justify-content:center;border:0;margin-top:44px}
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
display:grid;place-items:center;min-width:46px;min-height:46px;border-radius:12px;
background:var(--blush);color:var(--red);font-family:var(--label);font-weight:800}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--red);color:var(--white)}

@media(max-width:900px){
.woocommerce ul.products{grid-template-columns:1fr 1fr}
.woocommerce div.product,.woocommerce-checkout #customer_details,.woocommerce-account .col2-set{grid-template-columns:1fr}
.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{width:100%;float:none}
}
@media(max-width:640px){
.woocommerce ul.products{grid-template-columns:1fr}
.dokan-geo-location-filter-form{flex-direction:column;align-items:stretch;padding:18px}
}

/* the geolocation search sitting at the top of the shop */
.nm-shop-geo{margin:0 0 40px}
/* ══════════════════════════════════════════════════════════════
   3.0.1 — DEPTH THAT SCALES
   Every orange heading already used the same eight steps. The trouble
   was that eight pixels on a 173px letter is a thick wall, and eight
   pixels on a 90px letter is half as deep — so the big ones sang and
   the smaller ones read flat. The build is now measured in em, so the
   depth is proportional to the letter at every size.
   ══════════════════════════════════════════════════════════════ */
.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-moments h2,.nm-public h2,.nm-oz h2,.nm-twenty h2,.nm-free h2,.nm-founding h2{color:var(--red);text-shadow:0 0.0035em 0 var(--blush),0 0.007em 0 var(--blush),0 0.0105em 0 var(--blush),0 0.014em 0 var(--blush),0 0.0175em 0 var(--blush),0 0.021em 0 var(--blush),0 0.0245em 0 var(--blush),0 0.028em 0 var(--blush),0 0.0315em 0 var(--blush),0 0.035em 0 var(--blush),0 0.0385em 0 var(--blush),0 0.042em 0 var(--blush),0 0.0455em 0 var(--fuchsia),0 0.049em 0 var(--fuchsia),0 0.0525em 0 var(--fuchsia),0 0.056em 0 var(--fuchsia),0 0.0595em 0 var(--fuchsia),0 0.063em 0 var(--fuchsia),0 .12em .11em rgba(120,0,50,.34)}.nm-siren-copy h2,.nm-split-copy h2,.nm-figures-red h2,.nm-help h2,.nm-wisdom h2,.nm-manifesto h2,.nm-why-built h2,.nm-helps-head h2,.nm-join-ending h2,.nm-why-carousel h2,.nm-why-fee h2,.nm-social-grid h2,.nm-impact h2,.nm-discover h2,.nm-gift h2,.nm-what-is h2,.nm-journal>h2,.nm-footer-top h2{color:var(--white);text-shadow:0 0.0035em 0 var(--blush),0 0.007em 0 var(--blush),0 0.0105em 0 var(--blush),0 0.014em 0 var(--blush),0 0.0175em 0 var(--blush),0 0.021em 0 var(--blush),0 0.0245em 0 var(--blush),0 0.028em 0 var(--blush),0 0.0315em 0 var(--blush),0 0.035em 0 var(--blush),0 0.0385em 0 var(--blush),0 0.042em 0 var(--blush),0 0.0455em 0 var(--red-deep),0 0.049em 0 var(--red-deep),0 0.0525em 0 var(--red-deep),0 0.056em 0 var(--red-deep),0 0.0595em 0 var(--red-deep),0 0.063em 0 var(--red-deep),0 .12em .11em rgba(120,0,50,.34)}.nm-editorial h2,.nm-resource h3,.nm-half h3,.nm-promise h3,.nm-feature h2,.nm-journal-card h3{color:var(--white);text-shadow:0 0.0037em 0 var(--blush),0 0.0075em 0 var(--blush),0 0.0112em 0 var(--blush),0 0.015em 0 var(--blush),0 0.0187em 0 var(--red-deep),0 0.0225em 0 var(--red-deep),0 0.0262em 0 var(--red-deep),0 0.03em 0 var(--red-deep),0 .12em .11em rgba(120,0,50,.34)}.nm-promise h3,.nm-journal-card h3{color:var(--red);text-shadow:0 0.0037em 0 var(--orange),0 0.0075em 0 var(--orange),0 0.0112em 0 var(--orange),0 0.015em 0 var(--orange),0 0.0187em 0 var(--red-deep),0 0.0225em 0 var(--red-deep),0 0.0262em 0 var(--red-deep),0 0.03em 0 var(--red-deep),0 .12em .11em rgba(120,0,50,.34)}.nm-journal-card h3{color:var(--white);text-shadow:0 .02em 0 var(--blush),0 .09em .08em rgba(120,0,50,.3)}
/* 3.0.2 — headings on orange in the button red #F31E2D, with a fine
   soft pink keyline so the letter separates from the ground. */
.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-moments h2,.nm-public h2,.nm-oz h2,.nm-twenty h2,.nm-free h2,.nm-founding h2{color:var(--btn);text-shadow:0 0.0035em 0 var(--blush),0 0.007em 0 var(--blush),0 0.0105em 0 var(--blush),0 0.014em 0 var(--blush),0 0.0175em 0 var(--blush),0 0.021em 0 var(--blush),0 0.0245em 0 var(--blush),0 0.028em 0 var(--blush),0 0.0315em 0 var(--blush),0 0.035em 0 var(--blush),0 0.0385em 0 var(--blush),0 0.042em 0 var(--blush),0 0.0455em 0 var(--fuchsia),0 0.049em 0 var(--fuchsia),0 0.0525em 0 var(--fuchsia),0 0.056em 0 var(--fuchsia),0 0.0595em 0 var(--fuchsia),0 0.063em 0 var(--fuchsia),0 .12em .11em rgba(120,0,50,.34);}
/* ══════════════════════════════════════════════════════════════
   3.0.3 — the 20% labels, and two grounds on Join
   ══════════════════════════════════════════════════════════════ */

/* Micro grants, The Baking Equipment Library, Photography — hot pink */
.nm-oz-list b,.nm-twenty .nm-oz-list b{color:var(--fuchsia);font-family:var(--display);
font-weight:900;font-size:clamp(20px,1.9vw,26px)}
.nm-oz-list li{display:block;line-height:1.6}

/* Why We Built This — hot pink ground */
.nm-why-built{background:var(--fuchsia);box-shadow:inset 0 -16px var(--red)}
.nm-why-built .nm-k{color:var(--blush)}
.nm-why-built .nm-lead{color:var(--blush)}

/* Let's Get Baking — orange ground */
.nm-join-ending{background:var(--orange);box-shadow:inset 0 -16px var(--orange-deep)}
.nm-join-ending .nm-k{color:var(--blush)}
/* ══════════════════════════════════════════════════════════════
   3.1.0 — RED LACQUER
   Large display headings on orange, treated as polished red enamel
   rather than red type with a shadow. Built in em so the gloss scales
   with the letter at every size.
     face      #F31E2D, the Nan Made red
     highlight fine warm pink along the upper-left, never white
     depth     ten fused steps descending through darker reds
     reflect   a tight low-opacity pink glow beneath
   No grey, no black, no purple, no hard outline.
   ══════════════════════════════════════════════════════════════ */
.nm-heading--red-lacquer{color:var(--btn);-webkit-text-stroke:0;text-shadow:-.008em -.008em 0 rgba(255,234,246,.62),0 -.004em 0 rgba(255,214,242,.45),0 .003em 0 #FF6B95,0 0.005em 0 #E11B2A,0 0.01em 0 #E11B2A,0 0.015em 0 #E11B2A,0 0.02em 0 #D71928,0 0.025em 0 #D71928,0 0.03em 0 #D71928,0 0.035em 0 #B91522,0 0.04em 0 #B91522,0 0.045em 0 #B91522,0 0.05em 0 #B91522,0 .055em .035em rgba(255,69,196,.32),0 .075em .06em rgba(120,20,30,.2)}
.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-moments h2,.nm-public h2,.nm-oz h2,.nm-twenty h2,.nm-free h2,.nm-founding h2{color:var(--btn);-webkit-text-stroke:0;text-shadow:-.008em -.008em 0 rgba(255,234,246,.62),0 -.004em 0 rgba(255,214,242,.45),0 .003em 0 #FF6B95,0 0.005em 0 #E11B2A,0 0.01em 0 #E11B2A,0 0.015em 0 #E11B2A,0 0.02em 0 #D71928,0 0.025em 0 #D71928,0 0.03em 0 #D71928,0 0.035em 0 #B91522,0 0.04em 0 #B91522,0 0.045em 0 #B91522,0 0.05em 0 #B91522,0 .055em .035em rgba(255,69,196,.32),0 .075em .06em rgba(120,20,30,.2)}
/* 3.1.1 — the lacquer at a visible depth.
   3.1.0 used .005em steps: at a 90px letter that is 0.45px each, which
   the browser rounds together, so ten steps collapsed into nothing.
   Steps are now .012em — about 1.1px at 90px and 2px at 173px, so every
   step lands on its own pixel and the depth is genuinely visible. */
.nm-heading--red-lacquer{color:var(--btn);-webkit-text-stroke:0;text-shadow:-.014em -.014em 0 rgba(255,234,246,.75),0 -.01em 0 rgba(255,214,242,.6),0 .006em 0 #FF6B95,0 0.012em 0 #E11B2A,0 0.024em 0 #E11B2A,0 0.036em 0 #E11B2A,0 0.048em 0 #D71928,0 0.06em 0 #D71928,0 0.072em 0 #D71928,0 0.084em 0 #B91522,0 0.096em 0 #B91522,0 0.108em 0 #B91522,0 .13em .05em rgba(255,69,196,.45),0 .16em .09em rgba(120,20,30,.28)}
.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-moments h2,.nm-public h2,.nm-oz h2,.nm-twenty h2,.nm-free h2,.nm-founding h2{color:var(--btn);-webkit-text-stroke:0;text-shadow:-.014em -.014em 0 rgba(255,234,246,.75),0 -.01em 0 rgba(255,214,242,.6),0 .006em 0 #FF6B95,0 0.012em 0 #E11B2A,0 0.024em 0 #E11B2A,0 0.036em 0 #E11B2A,0 0.048em 0 #D71928,0 0.06em 0 #D71928,0 0.072em 0 #D71928,0 0.084em 0 #B91522,0 0.096em 0 #B91522,0 0.108em 0 #B91522,0 .13em .05em rgba(255,69,196,.45),0 .16em .09em rgba(120,20,30,.28)}
/* ══════════════════════════════════════════════════════════════
   3.2.0 — THE PINK WALL
   A brighter red cannot work on this orange. #FF0033, the brightest
   red available, scores 1.32 against the ground; the button red 1.39.
   Both sit at the same lightness as the orange and disappear.
   Soft pink scores 2.30 and almost-white pink 2.61 — the pink beneath
   the letter is what separates it, and always was.
   Face in #E40037, then fourteen fused steps: a warm lip, a soft pink
   wall, and almost-white pink at the foot catching the light.
   ══════════════════════════════════════════════════════════════ */
.nm-heading--red-lacquer{color:var(--red);-webkit-text-stroke:0;text-shadow:0 -.012em 0 var(--icing),-.012em -.012em 0 rgba(255,234,246,.85),0 0.013em 0 #FF6B95,0 0.026em 0 #FF6B95,0 0.039em 0 var(--blush),0 0.052em 0 var(--blush),0 0.065em 0 var(--blush),0 0.078em 0 var(--blush),0 0.091em 0 var(--blush),0 0.104em 0 var(--blush),0 0.117em 0 var(--blush),0 0.13em 0 var(--icing),0 0.143em 0 var(--icing),0 0.156em 0 var(--icing),0 0.169em 0 var(--icing),0 0.182em 0 var(--icing),0 .21em .06em rgba(255,69,196,.5),0 .24em .1em rgba(150,20,40,.24)}
.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-moments h2,.nm-public h2,.nm-oz h2,.nm-twenty h2,.nm-free h2,.nm-founding h2{color:var(--red);-webkit-text-stroke:0;text-shadow:0 -.012em 0 var(--icing),-.012em -.012em 0 rgba(255,234,246,.85),0 0.013em 0 #FF6B95,0 0.026em 0 #FF6B95,0 0.039em 0 var(--blush),0 0.052em 0 var(--blush),0 0.065em 0 var(--blush),0 0.078em 0 var(--blush),0 0.091em 0 var(--blush),0 0.104em 0 var(--blush),0 0.117em 0 var(--blush),0 0.13em 0 var(--icing),0 0.143em 0 var(--icing),0 0.156em 0 var(--icing),0 0.169em 0 var(--icing),0 0.182em 0 var(--icing),0 .21em .06em rgba(255,69,196,.5),0 .24em .1em rgba(150,20,40,.24)}
/* ══════════════════════════════════════════════════════════════
   3.3.0 — THE RED WALL RESTORED
   v1.9.8, the version that worked, built the letter as a solid red
   object: eight steps of RED extruding downward, and only then the
   pink footing beneath it. Chasing the lacquer spec I removed the red
   wall entirely and went straight from face to pink, which is why the
   heading reads as a thin red face on a pink slab rather than a solid
   red letter. The red wall is what makes it look poured.
   ══════════════════════════════════════════════════════════════ */
.nm-heading--red-lacquer,.nm-market h2,.nm-why-statement h2,.nm-why-market h2,.nm-moments h2,.nm-public h2,.nm-oz h2,.nm-twenty h2,.nm-free h2,.nm-founding h2{color:var(--red);-webkit-text-stroke:0;text-shadow:0 -1px 0 var(--icing),0 1px 0 var(--red),0 2px 0 var(--red),0 3px 0 var(--red),0 4px 0 var(--red),0 5px 0 var(--red),0 6px 0 var(--red),0 7px 0 var(--red),0 8px 0 var(--red),0 9px 0 var(--blush),0 10px 0 var(--blush),0 11px 0 var(--blush),0 12px 0 var(--blush),0 13px 0 var(--icing),0 14px 0 var(--icing),0 22px 12px rgba(255,69,196,.34),0 26px 16px rgba(150,20,40,.2)}
/* ══════════════════════════════════════════════════════════════
   4.0.0 — THE GROUND SYSTEM
   Every section carries its ground in the markup: nm-on-red,
   nm-on-fuchsia, nm-on-orange, nm-on-pale. One rule per ground sets
   the background, the heading treatment, the eyebrow and the body
   colour. Add nm-shout for the three big moments.
   Written as section.nm-on-x h2 so it outranks every older rule by
   specificity, not by position.
   ══════════════════════════════════════════════════════════════ */

/* grounds */
section.nm-on-red{background:var(--red);color:var(--white);box-shadow:inset 0 -16px var(--red-deep)}
section.nm-on-fuchsia{background:var(--fuchsia);color:var(--white);box-shadow:inset 0 -16px var(--red)}
section.nm-on-orange{background:var(--orange);color:var(--white);box-shadow:inset 0 -16px var(--orange-deep)}
section.nm-on-pale{background:var(--blush);color:var(--red);box-shadow:inset 0 -16px var(--fuchsia)}

/* eyebrows */
section.nm-on-red .nm-k,section.nm-on-fuchsia .nm-k,section.nm-on-orange .nm-k{color:var(--blush)}
section.nm-on-pale .nm-k{color:var(--fuchsia)}

/* body copy */
section.nm-on-red p,section.nm-on-fuchsia p,section.nm-on-orange p{color:var(--white)}
section.nm-on-pale p{color:var(--red)}
section.nm-on-red .nm-lead,section.nm-on-fuchsia .nm-lead,section.nm-on-orange .nm-lead{color:var(--blush)}
section.nm-on-orange h2{color:var(--red);-webkit-text-stroke:0;text-shadow:0 -1px 0 var(--icing),0 1px 0 var(--red),0 2px 0 var(--red),0 3px 0 var(--red),0 4px 0 var(--red),0 5px 0 var(--red),0 6px 0 var(--red),0 7px 0 var(--red),0 8px 0 var(--red),0 9px 0 var(--blush),0 10px 0 var(--blush),0 11px 0 var(--blush),0 12px 0 var(--blush),0 13px 0 var(--icing),0 14px 0 var(--icing),0 22px 12px rgba(255,69,196,.34),0 26px 16px rgba(150,20,40,.2)}
section.nm-on-red h2,section.nm-on-fuchsia h2{color:var(--white);-webkit-text-stroke:0;text-shadow:0 -1px 0 var(--icing),0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--fuchsia),0 5px 0 var(--fuchsia),0 6px 0 var(--red),0 22px 12px rgba(255,69,196,.34),0 26px 16px rgba(150,20,40,.2)}
section.nm-on-pale h2{color:var(--red);-webkit-text-stroke:0;text-shadow:0 -1px 0 var(--icing),0 1px 0 var(--red),0 2px 0 var(--red),0 3px 0 var(--red),0 4px 0 var(--red),0 5px 0 var(--orange),0 6px 0 var(--orange),0 7px 0 var(--red-deep),0 22px 12px rgba(255,69,196,.34),0 26px 16px rgba(150,20,40,.2)}
section.nm-shout h2{font-size:clamp(4.4rem,8.6vw,10.4rem);line-height:.9;letter-spacing:-.05em;color:var(--red);-webkit-text-stroke:0;text-shadow:0 -1px 0 var(--icing),0 1px 0 var(--red),0 2px 0 var(--red),0 3px 0 var(--red),0 4px 0 var(--red),0 5px 0 var(--red),0 6px 0 var(--red),0 7px 0 var(--red),0 8px 0 var(--red),0 9px 0 var(--red),0 10px 0 var(--red),0 11px 0 var(--red),0 12px 0 var(--blush),0 13px 0 var(--blush),0 14px 0 var(--blush),0 15px 0 var(--blush),0 16px 0 var(--blush),0 17px 0 var(--icing),0 18px 0 var(--icing),0 19px 0 var(--icing),0 22px 12px rgba(255,69,196,.34),0 26px 16px rgba(150,20,40,.2)}
section.nm-on-red h3,section.nm-on-fuchsia h3,section.nm-on-orange h3{color:var(--white);text-shadow:0 1px 0 var(--blush),0 8px 8px rgba(120,0,50,.26)}
section.nm-on-pale h3{color:var(--red);text-shadow:0 1px 0 var(--orange),0 8px 8px rgba(120,0,50,.26)}
/* ══════════════════════════════════════════════════════════════
   4.1.0 — A LIT FACE AND A DARK SIDE
   Every previous version, including the one that was remembered as
   good, built the wall in the SAME red as the face. A letter whose
   side is the same colour as its front has no visible thickness — it
   simply renders as slightly taller red text. That is why it read
   flat at every size and no amount of pink beneath it helped.
   The face is now the bright #F31E2D catching light, and the wall
   descends through progressively darker reds, so the side of the
   letter is genuinely visible. Pink at the foot as before.
   ══════════════════════════════════════════════════════════════ */
section.nm-on-orange h2{color:#F31E2D;-webkit-text-stroke:0;text-shadow:0 -1px 0 #FFF0FA,0 1px 0 #E4002F,0 2px 0 #D1002B,0 3px 0 #BE0026,0 4px 0 #AB0022,0 5px 0 #98001E,0 6px 0 #88001B,0 7px 0 #780018,0 8px 0 #6B0016,0 9px 0 #5E0013,0 10px 0 var(--blush),0 11px 0 var(--blush),0 12px 0 var(--icing),0 13px 0 var(--icing),0 22px 12px rgba(255,69,196,.34),0 26px 14px rgba(120,0,30,.22)}
section.nm-shout h2{font-size:clamp(4.4rem,8.6vw,10.4rem);line-height:.9;letter-spacing:-.05em;color:#F31E2D;-webkit-text-stroke:0;text-shadow:0 -1px 0 #FFF0FA,0 1px 0 #E4002F,0 2px 0 #D1002B,0 3px 0 #BE0026,0 4px 0 #AB0022,0 5px 0 #98001E,0 6px 0 #88001B,0 7px 0 #780018,0 8px 0 #6B0016,0 9px 0 #5E0013,0 10px 0 #5E0013,0 11px 0 #5E0013,0 12px 0 #5E0013,0 13px 0 #5E0013,0 14px 0 var(--blush),0 15px 0 var(--blush),0 16px 0 var(--icing),0 17px 0 var(--icing),0 22px 12px rgba(255,69,196,.34),0 26px 14px rgba(120,0,30,.22)}
section.nm-on-red h3,section.nm-on-fuchsia h3,section.nm-on-orange h3{color:var(--white);text-shadow:0 2px 0 rgba(160,0,60,.55)}
section.nm-on-pale h3{color:var(--red);text-shadow:0 2px 0 var(--orange)}
/* ══════════════════════════════════════════════════════════════
   4.2.0 — THE TYPEFACE WAS THE PROBLEM
   The lacquer headings were set in Playfair Display, a high-contrast
   serif with very thin hairlines. Thin strokes cannot hold a multi-step
   extrusion — the shadow bleeds through them and the letter turns to
   mush, which is why it read flat no matter how many layers were added
   or how the colours were changed.
   Fraunces at 700 is a fat, low-contrast face and holds it. It was
   already loading on the site as the body face.
   Offsets are in em at .018 increments, so every step lands on its own
   pixel at any size and scales with the type.
   ══════════════════════════════════════════════════════════════ */
section.nm-on-orange h2,section.nm-shout h2{font-family:"Fraunces",Georgia,serif;font-weight:700;font-variation-settings:'opsz' 144;letter-spacing:-.02em;color:#F31E2D;-webkit-text-stroke:0;text-shadow:0 -0.018em 0 #FFF0FA,0 0.018em 0 #E4002F,0 0.036em 0 #D1002B,0 0.054em 0 #BE0026,0 0.072em 0 #AB0022,0 0.09em 0 #98001E,0 0.108em 0 #88001B,0 0.126em 0 #780018,0 0.144em 0 #6B0016,0 0.162em 0 #5E0013,0 0.18em 0 var(--blush),0 0.198em 0 var(--blush),0 0.216em 0 var(--icing),0 0.234em 0 var(--icing),0 0.324em .09em rgba(255,69,196,.36),0 0.36em .12em rgba(120,0,30,.22)}
section.nm-shout h2{font-size:clamp(4.2rem,8.2vw,10rem);line-height:.92;text-shadow:0 -0.018em 0 #FFF0FA,0 0.018em 0 #E4002F,0 0.036em 0 #D1002B,0 0.054em 0 #BE0026,0 0.072em 0 #AB0022,0 0.09em 0 #98001E,0 0.108em 0 #88001B,0 0.126em 0 #780018,0 0.144em 0 #6B0016,0 0.162em 0 #5E0013,0 0.18em 0 #520011,0 0.198em 0 #48000F,0 0.216em 0 #3E000D,0 0.234em 0 var(--blush),0 0.252em 0 var(--blush),0 0.27em 0 var(--icing),0 0.288em 0 var(--icing),0 0.378em .09em rgba(255,69,196,.36),0 0.414em .12em rgba(120,0,30,.22)}
/* ══════════════════════════════════════════════════════════════
   4.3.0 — PINK OUTLINE PLUS DEPTH
   Two parts, and both are needed. The pink keyline separates the red
   from the orange, which nothing else could do — red and orange sit at
   almost the same brightness. The extrusion beneath gives the letter
   its thickness. Set in Fraunces 700, which is fat enough to hold both.
   ══════════════════════════════════════════════════════════════ */
section.nm-on-orange h2,section.nm-shout h2{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.01em;color:#F31E2D;text-shadow:0 0.02em 0 #E4002F,0 0.04em 0 #D1002B,0 0.06em 0 #BE0026,0 0.08em 0 #AB0022,0 0.1em 0 #98001E,0 0.12em 0 #88001B,0 0.14em 0 #780018,0 0.16em 0 #6B0016,0 0.18em 0 #5E0013,0 0.2em 0 #520011,0 0.22em 0 #FFD6F2,0 0.24em 0 #FFD6F2,0 0.26em 0 #FFEAF6,0 0.28em 0 #FFEAF6,0 0.38em .1em rgba(255,69,196,.4)}
section.nm-shout h2{font-size:clamp(4rem,7.8vw,9.6rem);line-height:.98;text-shadow:0 0.02em 0 #E4002F,0 0.04em 0 #D1002B,0 0.06em 0 #BE0026,0 0.08em 0 #AB0022,0 0.1em 0 #98001E,0 0.12em 0 #88001B,0 0.14em 0 #780018,0 0.16em 0 #6B0016,0 0.18em 0 #5E0013,0 0.2em 0 #520011,0 0.22em 0 #48000F,0 0.24em 0 #3E000D,0 0.26em 0 #36000B,0 0.28em 0 #FFD6F2,0 0.3em 0 #FFD6F2,0 0.32em 0 #FFEAF6,0 0.34em 0 #FFEAF6,0 0.44em .1em rgba(255,69,196,.4)}
/* ══════════════════════════════════════════════════════════════
   4.4.0 — THE BUG, FOUND
   The ground system used "section.nm-on-red h2", which catches every
   h2 inside the section — including the small tile and editorial
   headings. At specificity (0,1,2) it outranked their own rules, so
   the small headings inherited the full section treatment. That is
   why they turned heavy and blurry.
   Small headings are now named explicitly at (0,2,2), which outranks
   the ground rule. Three steps of white, one of pink. No blur on any
   heading anywhere on the site.
   ══════════════════════════════════════════════════════════════ */

/* SMALL HEADINGS — named, and beating the ground rule */
section .nm-feature h2,section .nm-editorial h2,section .nm-resource h3,section .nm-half h3,section .nm-madam-tile h3,section .nm-journal-card h3{color:var(--white);-webkit-text-stroke:0;text-shadow:0 0.022em 0 #FFFFFF,0 0.044em 0 #FFFFFF,0 0.066em 0 #FFFFFF,0 0.088em 0 #FF45C4}
section .nm-promise h3{color:var(--red);-webkit-text-stroke:0;text-shadow:0 0.022em 0 #FFD6F2,0 0.044em 0 #FFD6F2,0 0.066em 0 #FFD6F2,0 0.088em 0 #E40037}
section .nm-cat span{text-shadow:0 0.016em 0 #FFFFFF,0 0.032em 0 #FFFFFF,0 0.048em 0 #FFFFFF,0 0.064em 0 #FF45C4}

/* THE ORANGE HEADINGS — started again. Fraunces, pink keyline, solid
   extrusion, no blur. */
section.nm-on-orange h2,section.nm-shout h2{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.01em;color:#F31E2D;text-shadow:0 0.019em 0 #E4002F,0 0.038em 0 #D1002B,0 0.057em 0 #BE0026,0 0.076em 0 #AB0022,0 0.095em 0 #98001E,0 0.114em 0 #88001B,0 0.133em 0 #780018,0 0.152em 0 #6B0016,0 0.171em 0 #FFD6F2,0 0.19em 0 #FFD6F2,0 0.209em 0 #FFEAF6}
section.nm-shout h2{font-size:clamp(4rem,7.8vw,9.6rem);line-height:1;text-shadow:0 0.019em 0 #E4002F,0 0.038em 0 #D1002B,0 0.057em 0 #BE0026,0 0.076em 0 #AB0022,0 0.095em 0 #98001E,0 0.114em 0 #88001B,0 0.133em 0 #780018,0 0.152em 0 #6B0016,0 0.171em 0 #5E0013,0 0.19em 0 #520011,0 0.209em 0 #FFD6F2,0 0.228em 0 #FFD6F2,0 0.247em 0 #FFEAF6,0 0.266em 0 #FFEAF6}
/* ══════════════════════════════════════════════════════════════
   4.5.0 — TWO REAL BUGS
   1. .nm-figures-red and .nm-moments each hold a width:max-content
      carousel and neither clipped its overflow, so both sections were
      physically wider than the screen and dragged the whole page
      sideways. Every other carousel section already clipped.
   2. .nm-why-copy was display:flex with align-items:flex-start, which
      shrink-wrapped the headline and left a gap between it and the
      photograph beneath.
   ══════════════════════════════════════════════════════════════ */
.nm-figures-red,.nm-moments,.nm-why-carousel,.nm-wisdom,.nm-helps,.nm-journal{overflow:hidden}
html,body{overflow-x:hidden}

.nm-hero-stacked .nm-why-copy,.nm-hero-stacked .nm-join-copy{
display:block;align-items:initial;justify-content:initial}
.nm-hero-stacked .nm-why-copy>*,.nm-hero-stacked .nm-join-copy>*{width:100%;text-align:center}
.nm-hero-stacked h1{margin:0;padding:0}
.nm-hero-stacked .nm-why-photo,.nm-hero-stacked .nm-join-photo{display:block;margin:0;line-height:0}
.nm-hero-stacked .nm-why-photo img,.nm-hero-stacked .nm-join-photo img,
.nm-hero-stacked .nm-why-photo .nm-slot,.nm-hero-stacked .nm-join-photo .nm-slot{display:block;margin:0;vertical-align:top}
/* ══════════════════════════════════════════════════════════════
   4.6.0 — SAFARI, AND THE MOBILE HERO
   Safari does not support paint-order on HTML text, so the pink
   -webkit-text-stroke was painting OVER the red face instead of behind
   it. The letter turned pink and the treatment disappeared — which is
   why it showed in Chrome and not in Safari or on the phone.
   The keyline is now built from eight pink shadow offsets instead, so
   it renders identically in every browser.
   ══════════════════════════════════════════════════════════════ */
section.nm-on-orange h2,section.nm-shout h2{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.01em;color:#F31E2D;-webkit-text-stroke:0;paint-order:normal;text-shadow:-0.03em 0em 0 #FFD6F2,0.03em 0em 0 #FFD6F2,0em -0.03em 0 #FFD6F2,0em 0.03em 0 #FFD6F2,-0.022em -0.022em 0 #FFD6F2,0.022em -0.022em 0 #FFD6F2,-0.022em 0.022em 0 #FFD6F2,0.022em 0.022em 0 #FFD6F2,0 0.019em 0 #E4002F,0 0.038em 0 #D1002B,0 0.057em 0 #BE0026,0 0.076em 0 #AB0022,0 0.095em 0 #98001E,0 0.114em 0 #88001B,0 0.133em 0 #780018,0 0.152em 0 #6B0016,0 0.171em 0 #FFD6F2,0 0.19em 0 #FFD6F2,0 0.209em 0 #FFEAF6}
section.nm-shout h2{font-size:clamp(3.6rem,7.4vw,9.2rem);line-height:1.02;text-shadow:-0.03em 0em 0 #FFD6F2,0.03em 0em 0 #FFD6F2,0em -0.03em 0 #FFD6F2,0em 0.03em 0 #FFD6F2,-0.022em -0.022em 0 #FFD6F2,0.022em -0.022em 0 #FFD6F2,-0.022em 0.022em 0 #FFD6F2,0.022em 0.022em 0 #FFD6F2,0 0.019em 0 #E4002F,0 0.038em 0 #D1002B,0 0.057em 0 #BE0026,0 0.076em 0 #AB0022,0 0.095em 0 #98001E,0 0.114em 0 #88001B,0 0.133em 0 #780018,0 0.152em 0 #6B0016,0 0.171em 0 #5E0013,0 0.19em 0 #520011,0 0.209em 0 #48000F,0 0.228em 0 #FFD6F2,0 0.247em 0 #FFD6F2,0 0.266em 0 #FFEAF6}

/* MOBILE — the four hero tiles as two by two, on red, image above copy */
@media(max-width:700px){
.nm-feature-grid{grid-template-columns:1fr 1fr;background:var(--red)}
.nm-feature{background:var(--red);padding:10px 0 22px}
.nm-tile-img{width:calc(100% - 16px);margin:8px;aspect-ratio:1/1}
.nm-feature>div{padding:0 14px}
.nm-feature h2{font-size:clamp(1.15rem,4.4vw,1.5rem);line-height:1.02;margin-bottom:10px}
.nm-feature p{font-size:15px;line-height:1.5}
.nm-feature a{font-size:13px}
.nm-editorial-grid{grid-template-columns:1fr 1fr;background:var(--red)}
.nm-editorial{min-height:0;padding-bottom:26px}
.nm-editorial h2{font-size:clamp(1.15rem,4.2vw,1.5rem);padding:0 14px;max-width:none}
.nm-editorial .nm-k,.nm-editorial p{padding:0 14px}
.nm-editorial p{font-size:15px}
.nm-editorial-img{margin-bottom:16px}
}
/* ══════════════════════════════════════════════════════════════
   4.7.0 — PERFORMANCE, AND SAFARI FOR GOOD
   Every -webkit-text-stroke with a width has been stripped from the
   stylesheet. Safari cannot honour paint-order on HTML text, so a
   stroke always paints over the letter face there; and on large type a
   stroke is expensive to rasterise, which was slowing the machine down.
   The pink keyline is now four shadow offsets rather than eight, and
   the wall is eight steps rather than eleven — fourteen layers down to
   ten on the largest headings. Same look, considerably cheaper to
   repaint while the carousels are animating.
   ══════════════════════════════════════════════════════════════ */
section.nm-on-orange h2,section.nm-shout h2{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:-.01em;color:#F31E2D;text-shadow:-0.028em 0em 0 #FFD6F2,0.028em 0em 0 #FFD6F2,0em -0.028em 0 #FFD6F2,0em 0.028em 0 #FFD6F2,0 0.02em 0 #E4002F,0 0.04em 0 #CE002A,0 0.06em 0 #B90024,0 0.08em 0 #A4001F,0 0.1em 0 #8F001A,0 0.12em 0 #7A0016,0 0.14em 0 #FFD6F2,0 0.16em 0 #FFEAF6}
section.nm-shout h2{font-size:clamp(3.6rem,7.4vw,9.2rem);line-height:1.02;text-shadow:-0.028em 0em 0 #FFD6F2,0.028em 0em 0 #FFD6F2,0em -0.028em 0 #FFD6F2,0em 0.028em 0 #FFD6F2,0 0.02em 0 #E4002F,0 0.04em 0 #CE002A,0 0.06em 0 #B90024,0 0.08em 0 #A4001F,0 0.1em 0 #8F001A,0 0.12em 0 #7A0016,0 0.14em 0 #680013,0 0.16em 0 #560010,0 0.18em 0 #FFD6F2,0 0.2em 0 #FFEAF6}

.nm-carousel,.nm-journal-cards,.nm-ticker-track{will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.nm-carousel-item,.nm-journal-card{contain:layout paint}
/* ══════════════════════════════════════════════════════════════
   5.0.0 — OPENING SOON
   ══════════════════════════════════════════════════════════════ */
.nm-soon-page>section{padding:clamp(70px,7vw,120px) max(28px,calc((100% - 1060px)/2));text-align:center}
.nm-soon-page>section>p{margin:24px auto 0;max-width:820px;font-size:20px;line-height:1.62}
.nm-soon-page>section>h2{margin-bottom:30px}
.nm-soon-page>section>.nm-k{margin:0 auto 24px}

.nm-soon-hero{padding-bottom:clamp(44px,4.4vw,70px)}
.nm-soon-hero h1{color:var(--white);font-size:clamp(3.4rem,7vw,8.4rem);line-height:1;
text-shadow:0 1px 0 #FFF,0 2px 0 #FFF,0 3px 0 var(--blush),0 4px 0 var(--blush),0 5px 0 var(--bubblegum),0 6px 0 var(--bubblegum)}
.nm-soon-hero .nm-k{color:var(--blush)}

/* the form */
.nm-soon-form{display:grid;gap:14px;max-width:520px;margin:40px auto 0}
.nm-soon-form input[type=text],.nm-soon-form input[type=email]{
width:100%;padding:17px 22px;border:3px solid var(--fuchsia);border-radius:18px;background:var(--white);
font-family:var(--body);font-size:18px;color:var(--red);outline:none;text-align:center}
.nm-soon-form input::placeholder{color:var(--fuchsia);opacity:1}
.nm-soon-form input:focus{border-color:var(--red)}
.nm-soon-form .nm-button{margin-top:8px;justify-self:center}
.nm-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.nm-soon-thanks{margin-top:40px}
.nm-soon-thanks .nm-lead{color:var(--blush)}

/* the two cards */
.nm-soon-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1060px;margin:46px auto 0;text-align:left}
.nm-soon-card{background:var(--red);padding:clamp(28px,3vw,46px)}
.nm-soon-card h3{color:var(--white);font-size:clamp(1.5rem,2.1vw,2.2rem);line-height:1.06;margin-bottom:16px;
text-shadow:0 2px 0 var(--blush)}
.nm-soon-card p{color:var(--white);font-size:18px;line-height:1.62;margin-bottom:14px}
.nm-soon-card strong{color:var(--blush)}
.nm-soon-card .nm-lead{color:var(--blush);font-size:clamp(20px,2.1vw,28px);margin-top:18px}
.nm-soon-note{font-size:16px;color:var(--blush)}
.nm-soon-card .nm-button{margin-top:20px}

.nm-soon-close h2{margin-bottom:22px}

@media(max-width:820px){.nm-soon-cards{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   BECOME A NAN — the sign-up page. Added 20 August 2026.
   Dokan's fields, Nan Made's frame. Sized from 379 upward.
   ══════════════════════════════════════════════════════════════ */

.nm-join-signup>section{padding:clamp(56px,6vw,110px) max(20px,calc((100% - 1060px)/2));text-align:center}
.nm-signup-hero{padding-bottom:clamp(40px,4vw,70px)}
.nm-signup-hero h1{color:var(--white);font-size:clamp(3rem,7vw,7.6rem);line-height:1;
text-shadow:0 1px 0 #FFF,0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--bubblegum),0 14px 18px rgba(120,0,40,.3)}
.nm-signup-hero .nm-lead{margin:26px auto 0;max-width:620px;font-family:var(--display);font-style:italic;
font-size:clamp(19px,2.1vw,27px);line-height:1.3;color:var(--blush)}

/* the frame — a rounded red edge with a soft pink panel inside it */
.nm-signup-frame{max-width:640px;margin:0 auto;background:var(--red);border-radius:34px;
padding:clamp(8px,1vw,12px);box-shadow:0 16px 34px rgba(150,20,60,.24)}
.nm-signup-frame>*{position:relative;z-index:1}
.nm-signup-frame .nm-k{color:var(--blush);margin:clamp(26px,3vw,36px) 0 14px}
.nm-signup-frame h2{margin-bottom:18px;font-size:clamp(2.5rem,5.4vw,4rem)}
.nm-signup-intro{max-width:520px;margin:0 auto clamp(26px,3vw,36px);padding:0 18px;
font-size:17px;line-height:1.6;color:var(--white)}

.nm-signup-form{background:var(--blush);border-radius:26px;padding:clamp(22px,3vw,40px) clamp(18px,2.6vw,34px);text-align:left}

/* Dokan lays these out in columns. At 379 a woman gets one field at a time. */
.nm-signup-form .dokan-form-group,.nm-signup-form .dokan-from-group,
.nm-signup-form .form-row,.nm-signup-form p.form-row{width:100%;float:none;margin:0 0 20px;padding:0}
.nm-signup-form .dokan-w5,.nm-signup-form .dokan-w6,
.nm-signup-form .dokan-left,.nm-signup-form .dokan-right-margin-30{width:100%;float:none;margin-right:0}

/* labels above their fields, and they stay put while she types */
.nm-signup-form label{display:block;margin:0 0 7px;font-family:var(--label);font-weight:600;
font-size:15px;letter-spacing:.02em;color:var(--red);text-transform:none}
.nm-signup-form label .required{color:var(--fuchsia);text-decoration:none}

/* generous white inputs */
.nm-signup-form input[type=text],.nm-signup-form input[type=email],
.nm-signup-form input[type=tel],.nm-signup-form input[type=password],
.nm-signup-form input[type=url],.nm-signup-form input[type=number],
.nm-signup-form select,.nm-signup-form textarea{
width:100%;min-height:56px;padding:14px 17px;background:var(--white);
border:2px solid var(--bubblegum-pale);border-radius:15px;
font-family:var(--body);font-size:17px;color:var(--ink);appearance:none}
.nm-signup-form select{background-image:linear-gradient(45deg,transparent 50%,var(--red) 50%),linear-gradient(135deg,var(--red) 50%,transparent 50%);
background-position:calc(100% - 21px) 25px,calc(100% - 15px) 25px;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.nm-signup-form input:focus,.nm-signup-form select:focus,.nm-signup-form textarea:focus{
border-color:var(--red);outline:3px solid var(--bubblegum);outline-offset:2px}
.nm-signup-form input::placeholder{color:var(--fuchsia);opacity:.75}

/* the small print Dokan writes under the email field */
.nm-signup-form .dokan-form-group>span,.nm-signup-form em,.nm-signup-form small{
display:block;margin-top:7px;font-size:15px;line-height:1.5;color:var(--red);font-style:normal}

/* the trap for robots is for robots */
.nm-signup-form input[name=email_2],.nm-signup-form input[name=email_2]+label,
.nm-signup-form label[for=reg_email_2],.nm-signup-form .dokan-form-group:has(input[name=email_2]){
position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* the button */
.nm-signup-form input[type=submit],.nm-signup-form button[type=submit],
.nm-signup-form .dokan-btn,.nm-signup-form .woocommerce-Button{
display:block;width:100%;min-height:62px;margin-top:8px;padding:16px 28px;
font-family:var(--label);font-weight:700;font-size:19px;letter-spacing:.01em;color:var(--white);
border:2px solid var(--fuchsia);border-radius:17px;cursor:pointer;
background:linear-gradient(#FF6B72,var(--btn) 50%,#C4111E);
box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 7px var(--btn-deep);
transition:transform .12s ease,box-shadow .12s ease}
.nm-signup-form input[type=submit]:hover,.nm-signup-form button[type=submit]:hover,
.nm-signup-form .dokan-btn:hover{transform:translateY(-2px);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 9px var(--btn-deep)}
.nm-signup-form input[type=submit]:active,.nm-signup-form button[type=submit]:active,
.nm-signup-form .dokan-btn:active{transform:translateY(5px);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),0 2px var(--btn-deep)}

/* the customer-or-Nan choice, if Dokan shows it */
.nm-signup-form input[type=radio],.nm-signup-form input[type=checkbox]{
width:26px;height:26px;min-height:0;margin:0 11px 0 0;accent-color:var(--red);vertical-align:-6px}
.nm-signup-form .dokan-form-group label:has(input[type=radio]),
.nm-signup-form .dokan-form-group label:has(input[type=checkbox]){
display:flex;align-items:center;min-height:48px;margin-bottom:6px;font-size:17px}

.nm-signup-fallback{padding:26px;font-size:18px;line-height:1.6;color:var(--red)}
.nm-signup-fallback a{color:var(--red);text-decoration:underline}

/* what happens next */
.nm-signup-steps{display:grid;gap:20px;max-width:1060px;margin:40px auto 0;text-align:left}
.nm-signup-step{background:var(--orange-deep);border-radius:24px;padding:clamp(24px,3vw,38px)}
.nm-signup-step h3{margin-bottom:12px;font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.06}
.nm-signup-step p{font-size:17px;line-height:1.6;color:var(--white)}

.nm-signup-close .nm-lead{margin:22px auto 0;max-width:640px;font-family:var(--display);font-style:italic;
font-size:clamp(19px,2.1vw,26px);line-height:1.3;color:var(--blush)}

@media(min-width:820px){
.nm-signup-steps{grid-template-columns:repeat(3,1fr)}
.nm-signup-form .dokan-form-group.nm-half{width:calc(50% - 10px);float:left}
}

/* The frame is a red ground sitting inside a pale section, so it has to
   declare its own. Without this the section's pale rules reach inside it —
   a red heading and red body copy on a red frame, which is invisible.
   Check the child before trusting the parent. */
section.nm-on-pale .nm-signup-frame .nm-k{color:var(--blush)}
section.nm-on-pale .nm-signup-frame h2{color:var(--white);
text-shadow:0 -1px 0 var(--icing),0 1px 0 var(--blush),0 2px 0 var(--blush),0 3px 0 var(--blush),
0 4px 0 var(--fuchsia),0 5px 0 var(--fuchsia),0 6px 0 var(--red-deep),
0 16px 10px rgba(255,69,196,.3),0 20px 14px rgba(150,20,40,.18)}
section.nm-on-pale .nm-signup-frame>p,
section.nm-on-pale .nm-signup-frame .nm-signup-intro{color:var(--white)}
/* and the panel inside the frame is pale again, so its type goes back to red */
section.nm-on-pale .nm-signup-form label{color:var(--red)}
section.nm-on-pale .nm-signup-form p,
section.nm-on-pale .nm-signup-form span,
section.nm-on-pale .nm-signup-form em,
section.nm-on-pale .nm-signup-form small{color:var(--red)}

/* ══════════════════════════════════════════════════════════════
   NARROW SCREENS — the last word, so nothing added later can undo it.
   Two rules written after the mobile block had been quietly beating it:
   the headline was rendering at 60.8px where the mobile rule said 48,
   and the hero photograph was stretched to 1500px tall, which pushed it
   below the fold and stopped it ever loading. Added 20 August 2026.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* the headline, sized so the photograph is on screen with it */
  .nm-hero h1{font-size:clamp(2.5rem,11vw,3.3rem);line-height:.96}
  .nm-hero .nm-k{font-size:13px;margin-bottom:12px}
  .nm-hero .nm-sub{margin:18px 0 0;font-size:18px}
  .nm-hero-copy{padding:26px 20px 22px}

  /* the photograph keeps its own shape instead of being stretched */
  .nm-hero{display:flex;flex-direction:column;min-height:0}
  .nm-hero-bg{position:relative;inset:auto;order:2;width:100%;height:auto}
  .nm-hero-bg img,.nm-hero-bg .nm-slot{width:100%;height:auto;max-height:none;
  aspect-ratio:auto;object-fit:contain}
  .nm-hero-copy{order:1;width:100%}
}

/* BECOME A NAN — stripped back on Paige's instruction, 20 August 2026.
   She has read Join Nan Made already. A heading, and the form. */
.nm-join-signup>section.nm-signup-panel{padding:clamp(34px,4vw,64px) max(18px,calc((100% - 700px)/2))}
.nm-join-signup h1{margin:0 auto clamp(24px,3vw,36px);text-align:center;color:var(--white);
font-size:clamp(2.6rem,9vw,4.4rem);line-height:1;
text-shadow:0 1px 0 #FFF,0 2px 0 var(--blush),0 3px 0 var(--blush),0 4px 0 var(--bubblegum),0 12px 16px rgba(120,0,40,.3)}
.nm-join-signup .nm-signup-form{max-width:640px;margin:0 auto}
section.nm-on-red .nm-signup-form label{color:var(--red)}
section.nm-on-red .nm-signup-form p,
section.nm-on-red .nm-signup-form span,
section.nm-on-red .nm-signup-form em,
section.nm-on-red .nm-signup-form small{color:var(--red)}

/* TILE TEST — three border weights on one scrolling page. Temporary, built
   20 August 2026, to be removed once Paige has picked one. */
.nm-tiletest>section{padding:clamp(34px,4vw,70px) max(18px,calc((100% - 1180px)/2))}
.nm-tiletest-top{text-align:center}
.nm-tiletest h1{color:var(--white);font-size:clamp(2.6rem,9vw,4.6rem);line-height:1;
text-shadow:0 1px 0 #FFF,0 2px 0 var(--blush),0 3px 0 var(--bubblegum),0 12px 16px rgba(120,0,40,.3)}
.nm-tiletest-top .nm-lead{margin:18px auto 0;max-width:520px;font-family:var(--display);font-style:italic;
font-size:19px;line-height:1.3;color:var(--blush)}
.nm-tiletest-jump{display:flex;gap:10px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.nm-tiletest-jump a{min-height:48px;display:inline-flex;align-items:center;padding:0 22px;
background:var(--blush);color:var(--red);border-radius:14px;text-decoration:none;
font-family:var(--label);font-weight:700;font-size:17px}
.nm-tiletest-block{text-align:center}
.nm-tiletest-block h2{margin-bottom:12px}
.nm-tiletest-note{max-width:560px;margin:0 auto 26px;font-size:17px;line-height:1.55;color:var(--red)}
.nm-tiletest-grid{max-width:1180px;margin:0 auto;text-align:left}
/* the one value under test */
.nm-tiletest-grid .nm-feature img,.nm-tiletest-grid .nm-tile-img{
width:calc(100% - (var(--nm-tile-border) * 2));margin:var(--nm-tile-border);
height:auto;aspect-ratio:2/3;object-fit:cover}
.nm-tiletest-grid .nm-feature>div{padding:0 var(--nm-tile-border) 0}
@media(max-width:700px){.nm-tiletest-grid{grid-template-columns:1fr 1fr}}