/* Lexend Fallback (tire-kick 2026-10-15, fresh-eyes P1-1): the system sans sized and spaced to Lexend's metrics, so the
   words wrap on the same lines before and after the real font lands: no layout shift at the swap. Measured on the site's
   own prose in Chromium: Lexend regular is 10% wider than Arial (measured on five pages, the value with the fewest changed line wraps), Lexend bold 7.5% wider than Arial Bold; ascent 1.0 and
   descent .25 of the em (Lexend) divided by the size adjustment. One face per weight range. */
@font-face{font-family:"Lexend Fallback";font-weight:100 500;src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica");size-adjust:110%;ascent-override:90.91%;descent-override:22.73%;line-gap-override:0%}
@font-face{font-family:"Lexend Fallback";font-weight:600 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Helvetica-Bold"),local("Arial");size-adjust:107.5%;ascent-override:93.02%;descent-override:23.26%;line-gap-override:0%}
/* A New Page design tokens v3 (tire-kick pass 2026-10-15: approved contrast pairs, eyebrow 14px). Drop in as /css/anp-tokens.css, load before page CSS. */
:root{
  /* color */
  --anp-ink:#1F2E55; --anp-ink-deep:#141E3C; --anp-dusk:#2C3D6E;
  --anp-cream:#FBF8F1; --anp-paper:#F4ECDC; --anp-milk:#FFFDF8; --anp-white:#FFFFFF;
  --anp-gold:#F2B544; --anp-gold-edge:#D99A2B; --anp-gold-accent:#E9A93A; --anp-gold-soft:#FFE3A3; --anp-gold-text:#FFCF6E;
  --anp-peach:#FFE6D9; --anp-littles-milk:#FFF6E6;
  /* v3 (Oct 14) APPROVED TEXT PAIRS ONLY. Solid colors, no alpha text (alpha changed ratio per band).
     ON LIGHT (cream #FBF8F1, paper #F4ECDC, white, milk, peach #FFE6D9, littles-milk, dusk band end #E9CFA8):
       --anp-text #1F2E55 (11.1-13.3:1) · --anp-text-muted #4B5674 (4.8-7.3:1) · --anp-text-accent #7A4E00 (4.8-7.2:1, the only "gold" for text on light)
     ON DARK (navy #1F2E55, dusk #2C3D6E, ink-deep #141E3C, world bands):
       --anp-on-night #FFF8EC (10-15.5:1) · --anp-on-night-muted #D9D2C4 (7-8.8:1) · --anp-gold-text #FFCF6E (7.2-11:1)
     ON GOLD BUTTON #F2B544: --anp-ink #1F2E55 only (7.3:1).
     NEVER: gold/gold-accent/gold-soft/gold-text as text on a light band (1.1-2.1:1); #4B5674 or ink on navy (1.0-2.3:1). */
  --anp-text:#1F2E55; --anp-text-muted:#4B5674; --anp-text-accent:#7A4E00; --anp-on-night:#FFF8EC; --anp-on-night-muted:#D9D2C4;
  /* spacing */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;
  --gutter:20px; --section-y:64px; --hero-top:32px; --hero-bottom:48px;
  /* widths */
  --w-text:640px; --w-hero-text:560px; --w-grid:1120px; --w-shell:1200px;
  /* type */
  --font-serif:"Fraunces","Georgia",serif; --font-sans:"Lexend","Lexend Fallback",system-ui,sans-serif;
  /* X1 2026-10-15: plain px sizes first, for old iPads (Safari 12 to 13.0 has no clamp()). The clamp() versions are set in the @supports block right after this rule. */
  --t-h1:40px; --t-h2:34px; --t-h3:22px;
  --t-lede:19px; --t-body:17px; --t-small:14px; --t-eyebrow:14px; /* v3: nothing under 14px (P1-7) */
  --lh-tight:1.1; --lh-head:1.18; --lh-body:1.6;
  /* radius, shadows, glows */
  --r-card:20px; --r-littles:24px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(31,46,85,.06),0 12px 32px rgba(31,46,85,.08);
  --shadow-lift:0 2px 4px rgba(31,46,85,.08),0 20px 44px rgba(31,46,85,.12);
  --shadow-btn:0 4px 0 var(--anp-gold-edge),0 12px 32px rgba(242,181,68,.38);
  --glow-lamp:0 0 18px 6px rgba(242,181,68,.55);
  --glow-firefly:0 0 10px 3px rgba(255,214,140,.7);
  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-door:cubic-bezier(.65,0,.35,1);
  --dur-fast:160ms; --dur-base:280ms; --dur-door:850ms;
}
/* clamp() sizes, only where clamp() is understood (a custom property cannot fall back by repeating itself, so they live here) */
@supports (width:clamp(1px,1vw,2px)){
  :root{--t-h1:clamp(30px, 4.2vw + 14px, 58px); --t-h2:clamp(28px,2.2vw + 18px,40px); --t-h3:clamp(20px,.6vw + 17px,24px);
    --t-lede:clamp(18px,.3vw + 17px,20px); --t-body:clamp(17px,.15vw + 16.5px,18px)}
}
@media (max-width:359px){:root{--gutter:16px;--hero-top:20px;--hero-bottom:32px}}
@media (min-width:768px){:root{--gutter:32px;--t-h1:42px}}
@media (min-width:1024px){:root{--section-y:96px;--hero-top:80px;--hero-bottom:96px;--t-h1:56px}}
@media (min-width:1280px){:root{--t-h1:58px}}

/* section backgrounds */
.band-light{background:radial-gradient(60% 50% at 50% 0%,rgba(242,181,68,.10),transparent 70%),var(--anp-cream)}
.band-paper{background:var(--anp-paper);box-shadow:inset 0 1px 0 rgba(31,46,85,.06)}
.band-white{background:var(--anp-white)}
.band-night{background:radial-gradient(40% 60% at 80% 20%,rgba(255,214,140,.18),transparent 70%),linear-gradient(180deg,var(--anp-dusk),var(--anp-ink) 45%,var(--anp-ink-deep));color:var(--anp-on-night)}
.band-dusk{background:linear-gradient(180deg,var(--anp-cream) 0%,#F3E3C8 60%,#E9CFA8 100%)}
.band-littles{background:radial-gradient(50% 40% at 50% 40%,rgba(255,200,120,.25),transparent 70%),linear-gradient(180deg,var(--anp-littles-milk),var(--anp-peach))}
.section{padding:var(--section-y) var(--gutter)} .section>.inner{max-width:var(--w-grid);margin:0 auto}
.band-curve{position:relative}.band-curve::before{content:"";position:absolute;left:0;right:0;top:-47px;height:48px;background:inherit;clip-path:ellipse(75% 100% at 50% 100%)}

/* type */
.anp-eyebrow{font:600 var(--t-eyebrow)/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase}
.anp-h1{font:500 var(--t-h1)/var(--lh-tight) var(--font-serif);letter-spacing:-.01em}
.anp-h2{font:500 var(--t-h2)/var(--lh-head) var(--font-serif)}
.anp-lede{font:400 var(--t-lede)/1.5 var(--font-sans);max-width:34ch}
.anp-small{font-size:var(--t-small);line-height:1.45}
/* the gold thread underline: one per page */
.gold-thread{position:relative;display:inline-block;color:var(--anp-gold-text)}
.band-light .gold-thread,.band-white .gold-thread,.band-paper .gold-thread,.band-dusk .gold-thread,.band-littles .gold-thread{color:var(--anp-text)}
.gold-thread::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--anp-gold) 15%,var(--anp-gold-soft) 50%,var(--anp-gold) 85%,transparent);
  box-shadow:0 0 12px rgba(242,181,68,.8);transform-origin:left;animation:anp-thread-draw 900ms var(--ease-out) 200ms both}
.band-light .gold-thread,.band-white .gold-thread{color:inherit}

/* components */
.anp-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;width:100%;max-width:360px;border:0;border-radius:var(--r-pill);
  background:var(--anp-gold);color:var(--anp-ink);font:700 17px var(--font-sans);text-decoration:none;box-shadow:var(--shadow-btn);transition:transform var(--dur-fast) var(--ease-out)}
.anp-btn:hover{transform:translateY(-2px)} .anp-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--anp-gold-edge)}
.anp-btn:focus-visible,.anp-link:focus-visible{outline:3px solid var(--anp-gold-soft);outline-offset:3px}
@media(min-width:1024px){.anp-btn{height:52px;width:auto}}
.anp-link{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.anp-link-quiet{font-size:14px;font-weight:400;color:var(--anp-text-muted);text-decoration:underline;text-underline-offset:3px}
.anp-card{background:var(--anp-milk);border-radius:var(--r-card);box-shadow:var(--shadow-card);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
@media(hover:hover){.anp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}}
.anp-chip{width:36px;height:36px;border-radius:50%;background:var(--anp-gold);color:var(--anp-ink);display:grid;place-items:center;font:700 16px var(--font-sans)}
.anp-icon{width:24px;height:24px;color:var(--anp-ink);flex:none}.anp-icon--lg{width:48px;height:48px}

/* sparkle: fireflies (never on teen pages) */
.fireflies{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;overflow:hidden}
.fireflies i{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFD68C;box-shadow:var(--glow-firefly);opacity:.8;animation:anp-float 8s ease-in-out infinite}
.fireflies i:nth-child(2){animation-duration:9.5s;animation-delay:-2s;width:4px;height:4px}
.fireflies i:nth-child(3){animation-duration:7s;animation-delay:-4s}
.fireflies i:nth-child(4){animation-duration:10s;animation-delay:-1s;opacity:.55}
.fireflies i:nth-child(5){animation-duration:8.5s;animation-delay:-6s;width:3px;height:3px}
.lane-teen .fireflies{display:none}

/* page-turn reveal for sections (add .reveal; JS adds .is-in via IntersectionObserver) */
.reveal{opacity:0;transform:perspective(900px) rotateY(-8deg) translateY(16px);transform-origin:left center;transition:opacity 600ms var(--ease-out),transform 700ms var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

@keyframes anp-float{0%,100%{transform:translate(0,0);opacity:.35}25%{opacity:.9}50%{transform:translate(8px,-14px);opacity:.7}75%{transform:translate(-6px,-6px);opacity:1}}
@keyframes anp-thread-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes anp-twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .fireflies{display:none}.reveal{opacity:1;transform:none}
}

/* v3 contrast guards: any text inside a dark band defaults to the on-night pair, any muted text inside it to on-night-muted */
.band-night,.band-night p,.band-night li{color:var(--anp-on-night)}
.band-night .muted,.band-night .anp-small,.band-night .anp-link-quiet,.band-night [class*=muted]{color:var(--anp-on-night-muted)}
.band-light .anp-link-quiet,.band-paper .anp-link-quiet,.band-white .anp-link-quiet,.band-dusk .anp-link-quiet{color:var(--anp-text-muted)}

/* L8: fixed navy for fills that must stay navy when --anp-ink flips to cream in night mode */
:root{--anp-navy:#1F2E55;--anp-navy-deep:#141E3C}

/* ===================================================================================================================
   L8 NIGHT MODE (2026-10-15). A dim navy palette for the signed-in reading app. Every text pair is AA or better.
   Opt-in: only a page whose <html> carries data-anp-app gets it (the boot script in each reading-program page sets it).
   The marketing pages load this same file and stay exactly as designed; delete "[data-anp-app]" below to widen it.
   Who decides: data-theme="light" (Settings, forced day) beats the device; data-theme="dark" (forced night) beats the
   device; with no data-theme the device decides (prefers-color-scheme). Screen only, so printables stay on paper.
   The raw colors the tokens cannot reach are handled in /reading-program/design/pass-dark.css (generated).
   Pairs after the flip, measured:  #FFF8EC on #141E3C 15.5, on #1C2850 13.5, on #26335F 11.6, on #2E3C6E 10.0;
   #D9D2C4 (muted) on #141E3C 10.9, on #1C2850 9.5, on #26335F 8.1;  #FFCF6E (gold text) on #1C2850 9.8, on #26335F 8.4;
   #1F2E55 on the gold button #F2B544 7.3 (pinned, never flips).  Gold stays gold.
   =================================================================================================================== */
@media screen and (prefers-color-scheme: dark){
:root[data-anp-app]:not([data-theme="light"]){
  color-scheme:dark;
  /* 1. the marketing tokens: light surfaces become the night-navy family, text takes the approved on-night pairs */
  --anp-cream:#141E3C; --anp-paper:#1A2545; --anp-milk:#1C2850; --anp-white:#171F38;
  --anp-peach:#24284D; --anp-littles-milk:#1A2545;
  --anp-text:var(--anp-on-night); --anp-text-muted:var(--anp-on-night-muted); --anp-text-accent:var(--anp-gold-text);
  /* 2. the reading app's own lamp tokens (design/anp.css), flipped the same way. --anp-ink is text there, so it follows the text */
  --anp-paper-lamp:#141E3C; --anp-card-warm:#1C2850; --anp-parchment:#26335F; --anp-parchment-deep:#2E3C6E; --anp-brand-tint:#2A3A6B; --anp-lantern-tint:#3B3220;
  --anp-ink:var(--anp-on-night); --anp-ink-soft:var(--anp-on-night-muted); --anp-brand:var(--anp-on-night); --anp-brand-deep:#E8DFCB;
  --anp-danger:#FF8F7C; --anp-success:#6FD3A0; --anp-moss:#6FD3A0; --anp-info:#8DB8FF; --anp-warn-bg:#3B3220; --anp-warn-ink:var(--anp-gold-text);
  --anp-on-danger:#33100A;
  /* 3. lamplight.css (cancel, gift, privacy, terms): its one swap block */
  --ink:var(--anp-on-night); --ink-soft:var(--anp-on-night-muted); --paper:#141E3C; --cream:#1A2545; --cream-deep:#26335F; --card:#1C2850;
  --brand:var(--anp-on-night); --brand-deep:#E8DFCB; --brand-tint:#2A3A6B; --gold-tint:#3B3220;
  --line:rgba(255,248,236,.14); --line-strong:rgba(255,248,236,.28); --shade:rgba(0,0,0,.05);
  --success:#6FD3A0; --danger:#FF8F7C; --ember:#F0A07A;
  /* 4. stand-ins for raw colors that scripts write into inline styles (day value is the old literal, in the script) */
  --anp-quiet-ink:var(--anp-on-night-muted); --anp-chip-bg:rgba(255,248,236,.12); --anp-violet-ink:#CFC2F5;
  --anp-undo-bg:#2E3C6E; --anp-undo-ink:var(--anp-on-night);
  --anp-gate-wash-1:#141E3C; --anp-gate-wash-2:#0F1830; --anp-gate-card:#1C2850; --anp-gate-edge:rgba(255,248,236,.14); --anp-gate-ink:var(--anp-on-night); --anp-gate-soft:var(--anp-on-night-muted);
  --anp-gate-line:rgba(255,248,236,.40); --anp-gate-field:#141E3C; --anp-gate-field-ink:var(--anp-on-night);
  --anp-banner-bg:#3B3220; --anp-banner-line:rgba(255,200,120,.35); --anp-banner-ink:var(--anp-on-night); --anp-banner-link:var(--anp-gold-text);
  --anp-note-bg:#3B3220; --anp-note-ink:var(--anp-on-night);
  /* 5. near-transparent shadows (a dim page does not cast them); the gold button shadow (--shadow-btn) stays */
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.04);
  --shadow-lift:0 2px 4px rgba(0,0,0,.05),0 20px 44px rgba(0,0,0,.05);
  --anp-shadow:0 6px 24px rgba(0,0,0,.05); --anp-shadow-lift:0 10px 32px rgba(0,0,0,.06);
  --shadow-1:0 1px 3px rgba(0,0,0,.05); --shadow-2:0 2px 6px rgba(0,0,0,.04),0 14px 34px rgba(0,0,0,.05); --shadow-book:0 2px 4px rgba(0,0,0,.06),0 24px 48px -12px rgba(0,0,0,.10);
}
:root[data-anp-app]:not([data-theme="light"]) .band-dusk{background:linear-gradient(180deg,var(--anp-cream) 0%,#18234A 60%,#1D2A57 100%)}
:root[data-anp-app]:not([data-theme="light"]) .band-paper{box-shadow:inset 0 1px 0 rgba(255,248,236,.08)}
:root[data-anp-app]:not([data-theme="light"]) .band-littles{background:radial-gradient(50% 40% at 50% 40%,rgba(255,200,120,.10),transparent 70%),linear-gradient(180deg,var(--anp-littles-milk),var(--anp-peach))}
:root[data-anp-app]:not([data-theme="light"]) .anp-btn,:root[data-anp-app]:not([data-theme="light"]) .anp-chip{color:#1F2E55}
:root[data-anp-app]:not([data-theme="light"]) .anp-card{border:1px solid rgba(255,248,236,.10)}
:root[data-anp-app]:not([data-theme="light"]) [data-look="littles"]{--anp-paper-lamp:#141E3C;--anp-card-warm:#1C2850;--anp-parchment:#26335F}
:root[data-anp-app]:not([data-theme="light"]) [data-look="older"]{--anp-brand:var(--anp-on-night);--anp-brand-deep:#E8DFCB}
}
@media screen{
:root[data-anp-app][data-theme="dark"]{
  color-scheme:dark;
  /* 1. the marketing tokens: light surfaces become the night-navy family, text takes the approved on-night pairs */
  --anp-cream:#141E3C; --anp-paper:#1A2545; --anp-milk:#1C2850; --anp-white:#171F38;
  --anp-peach:#24284D; --anp-littles-milk:#1A2545;
  --anp-text:var(--anp-on-night); --anp-text-muted:var(--anp-on-night-muted); --anp-text-accent:var(--anp-gold-text);
  /* 2. the reading app's own lamp tokens (design/anp.css), flipped the same way. --anp-ink is text there, so it follows the text */
  --anp-paper-lamp:#141E3C; --anp-card-warm:#1C2850; --anp-parchment:#26335F; --anp-parchment-deep:#2E3C6E; --anp-brand-tint:#2A3A6B; --anp-lantern-tint:#3B3220;
  --anp-ink:var(--anp-on-night); --anp-ink-soft:var(--anp-on-night-muted); --anp-brand:var(--anp-on-night); --anp-brand-deep:#E8DFCB;
  --anp-danger:#FF8F7C; --anp-success:#6FD3A0; --anp-moss:#6FD3A0; --anp-info:#8DB8FF; --anp-warn-bg:#3B3220; --anp-warn-ink:var(--anp-gold-text);
  --anp-on-danger:#33100A;
  /* 3. lamplight.css (cancel, gift, privacy, terms): its one swap block */
  --ink:var(--anp-on-night); --ink-soft:var(--anp-on-night-muted); --paper:#141E3C; --cream:#1A2545; --cream-deep:#26335F; --card:#1C2850;
  --brand:var(--anp-on-night); --brand-deep:#E8DFCB; --brand-tint:#2A3A6B; --gold-tint:#3B3220;
  --line:rgba(255,248,236,.14); --line-strong:rgba(255,248,236,.28); --shade:rgba(0,0,0,.05);
  --success:#6FD3A0; --danger:#FF8F7C; --ember:#F0A07A;
  /* 4. stand-ins for raw colors that scripts write into inline styles (day value is the old literal, in the script) */
  --anp-quiet-ink:var(--anp-on-night-muted); --anp-chip-bg:rgba(255,248,236,.12); --anp-violet-ink:#CFC2F5;
  --anp-undo-bg:#2E3C6E; --anp-undo-ink:var(--anp-on-night);
  --anp-gate-wash-1:#141E3C; --anp-gate-wash-2:#0F1830; --anp-gate-card:#1C2850; --anp-gate-edge:rgba(255,248,236,.14); --anp-gate-ink:var(--anp-on-night); --anp-gate-soft:var(--anp-on-night-muted);
  --anp-gate-line:rgba(255,248,236,.40); --anp-gate-field:#141E3C; --anp-gate-field-ink:var(--anp-on-night);
  --anp-banner-bg:#3B3220; --anp-banner-line:rgba(255,200,120,.35); --anp-banner-ink:var(--anp-on-night); --anp-banner-link:var(--anp-gold-text);
  --anp-note-bg:#3B3220; --anp-note-ink:var(--anp-on-night);
  /* 5. near-transparent shadows (a dim page does not cast them); the gold button shadow (--shadow-btn) stays */
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.04);
  --shadow-lift:0 2px 4px rgba(0,0,0,.05),0 20px 44px rgba(0,0,0,.05);
  --anp-shadow:0 6px 24px rgba(0,0,0,.05); --anp-shadow-lift:0 10px 32px rgba(0,0,0,.06);
  --shadow-1:0 1px 3px rgba(0,0,0,.05); --shadow-2:0 2px 6px rgba(0,0,0,.04),0 14px 34px rgba(0,0,0,.05); --shadow-book:0 2px 4px rgba(0,0,0,.06),0 24px 48px -12px rgba(0,0,0,.10);
}
:root[data-anp-app][data-theme="dark"] .band-dusk{background:linear-gradient(180deg,var(--anp-cream) 0%,#18234A 60%,#1D2A57 100%)}
:root[data-anp-app][data-theme="dark"] .band-paper{box-shadow:inset 0 1px 0 rgba(255,248,236,.08)}
:root[data-anp-app][data-theme="dark"] .band-littles{background:radial-gradient(50% 40% at 50% 40%,rgba(255,200,120,.10),transparent 70%),linear-gradient(180deg,var(--anp-littles-milk),var(--anp-peach))}
:root[data-anp-app][data-theme="dark"] .anp-btn,:root[data-anp-app][data-theme="dark"] .anp-chip{color:#1F2E55}
:root[data-anp-app][data-theme="dark"] .anp-card{border:1px solid rgba(255,248,236,.10)}
:root[data-anp-app][data-theme="dark"] [data-look="littles"]{--anp-paper-lamp:#141E3C;--anp-card-warm:#1C2850;--anp-parchment:#26335F}
:root[data-anp-app][data-theme="dark"] [data-look="older"]{--anp-brand:var(--anp-on-night);--anp-brand-deep:#E8DFCB}
:root[data-anp-app][data-theme="light"]{
  color-scheme:light;
}
}
/* END L8 NIGHT MODE */