/* built from lea-brand/tokens.css + brand.css + build/src/site.css */
/* Loved Ever After · brand tokens v3.0 (22 Oct 2026). System: "Sunlit" (approved 22 Oct 2026 under the 15-minute rule; reversible).
   SINGLE SOURCE OF TRUTH for colour/type/space. kit/tokens.css is an identical copy for export (fonts path ../fonts/).
   Every value is traced in LEA_Brand_Identity.pdf (appendix pp.37–57). Contrast ratios are WCAG 2.2 relative luminance;
   "75y" = simulated 75-year-old lens (analysis/vision.py). Import this file into every asset. */
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url(fonts/literata.woff2) format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;src:url(fonts/literata-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-hyperlegible-next.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/atkinson-hyperlegible-next-italic.woff2) format("woff2")}
:root{
  /* Colour roles: "Sunlit". --amber = Sunflower #FFC233 (fields, buttons, mark; NEVER text: 1.58:1 on paper; ink on it 10.74:1 AAA).
     --stone = Butter #FFF1C9 bands (ink 15.41, ink-soft 7.81, amber-deep 7.02). Ink #1D1A17 on paper 16.92. Names kept so drafts switch by import only. */
  --amber:#FFC233;         /* brand colour: fields, buttons, ribbon, plan card. Sunflower. NEVER text on light grounds (1.58:1). Ink on it 10.74:1 (AAA) */
  --amber-hi:#FFCF5C;      /* hover/pressed fill. Ink on it 11.82:1 */
  --amber-deep:#6F4A08;    /* brand-coloured text: eyebrows, taglines, numerals, questions. On paper 7.72:1, on butter 7.02:1 */
  --paper:#FFFCF7;         /* page background: warm white, deliberately NOT category cream */
  --stone:#FFF1C9;         /* Butter alternate band. Ink 15.41:1, ink-soft 7.81:1 */
  --white:#FFFFFF;         /* form fields, cards on stone */
  --ink:#1D1A17;           /* headings + body text. On paper 16.92:1, on butter 15.41:1, on sunflower 10.74:1 (AAA) */
  --ink-soft:#4E4950;      /* secondary text on paper/stone/white only (8.58 / 7.81 / 8.78). NOT on sunflower (5.44, AA only) */
  --line:#E6DCC6;          /* decorative dividers only (non-text) */
  --field:#7A747B;         /* input borders on white, 4.55:1 (WCAG 1.4.11 needs 3:1) */
  --focus:#1D1A17;         /* 3px focus ring + 3px offset */
  --overlay:29,26,23;      /* rgb of the warm-ink photo overlay */
  /* Type */
  --display:"Literata",Georgia,serif;
  --text:"Atkinson Hyperlegible Next",Verdana,system-ui,sans-serif;
  --fs-body:1.1875rem;     /* 19px. Minimum running-text size 18px; never below 16px for any reader-facing text */
  --fs-small:1.125rem;     /* 18px notes, labels, buttons */
  --fs-label:1rem;         /* 16px eyebrows (uppercase, tracked) */
  --fs-h3:1.625rem;        /* 26px */
  --fs-h2:clamp(2rem,3.4vw,2.75rem);
  --fs-h1:clamp(2.5rem,5.2vw,4.25rem);
  --lh-body:1.6; --lh-head:1.12; --measure:36em;
  /* Space (8-pt base) */
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2rem;--s5:3rem;--s6:4.5rem;--s7:7rem;
  --max:72rem; --radius:6px; --radius-pill:999px;
  /* Motion */
  --ease:cubic-bezier(.2,.0,.0,1); --dur:240ms;
}
@media (prefers-reduced-motion:reduce){:root{--dur:0ms}}

:root{--sunflower:var(--amber);--butter:var(--stone)}


/* Loved Ever After · web components. Use tokens only; no raw hex outside tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/var(--lh-body) var(--text);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
.draftbar{background:var(--ink);color:#fff;font:600 .875rem/1.4 var(--text);text-align:center;padding:.45rem 1rem}
.draftbar a{color:#FFE2A8}
h1,h2,h3,h4{text-wrap:balance;font-family:var(--display);color:var(--ink);font-weight:600;margin:0;letter-spacing:-.012em;font-optical-sizing:auto}
h1{font-size:var(--fs-h1);line-height:1.06;font-weight:600}
h2{font-size:var(--fs-h2);line-height:var(--lh-head)}
h3{font-size:var(--fs-h3);line-height:1.2;color:var(--ink)}
p{margin:0 0 var(--s2);max-width:var(--measure)}
a{color:var(--ink);text-decoration-color:var(--amber-deep);text-underline-offset:.18em;text-decoration-thickness:1.5px}
.eyebrow{text-wrap:balance;display:flex;align-items:flex-start;gap:.6rem;font:700 var(--fs-label)/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:var(--s2)}
.eyebrow::before{content:"";flex:none;width:.7rem;height:1.05rem;margin-top:.08rem;background:var(--amber);clip-path:polygon(0 0,100% 0,100% 100%,50% 76%,0 100%)} /* the ribbon */
.lede{font-size:1.3125rem;line-height:1.6}
.rule{width:3rem;height:3px;background:var(--amber);border:0;margin:var(--s3) 0;border-radius:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:.75rem 2rem;background:var(--amber);color:var(--ink);font:700 var(--fs-small)/1.25 var(--text);text-decoration:none;border-radius:var(--radius);border:0;cursor:pointer;transition:background var(--dur) var(--ease)}
.btn:hover{background:var(--amber-hi)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.inkband :focus-visible{outline-color:var(--paper)}
.note{font-size:var(--fs-small);color:var(--ink-soft)}
/* header */
.site{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) 0}
.mark{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;color:var(--ink)}
.mark img{display:block;height:2.25rem;width:auto}
.contact{font-size:var(--fs-small);color:var(--ink-soft)}.contact a{font-weight:700}
section{padding:var(--s7) 0}
.stone{background:var(--stone)}
.amberband{background:var(--amber);color:var(--ink)}
.amberband h2,.amberband h3,.amberband .eyebrow{color:var(--ink)}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1.05fr;min-height:40rem}
.hero .copy{padding:var(--s6) var(--s5) var(--s6) max(var(--s4),calc((100vw - var(--max))/2 + var(--s4)));display:flex;flex-direction:column;justify-content:center}
.hero .photo{position:relative;overflow:hidden;border-bottom-left-radius:0}
.hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .cta{margin-top:var(--s4);display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
.credit{position:absolute;right:0;bottom:0;font-size:.875rem;color:#fff;background:rgba(var(--overlay),.8);padding:.3rem .65rem}
.tagline{font:italic 500 1.5rem/1.3 var(--display);color:var(--amber-deep);margin:var(--s3) 0 0}
.hero-b{display:none} body.b .hero-a{display:none} body.b .hero-b{display:grid}
.split>*{min-width:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center}
.split.wide{grid-template-columns:1.1fr .9fr}
.narrow{max-width:48rem}
.split .img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius)}.split .img img{width:100%;height:100%;object-fit:cover}
.steps{list-style:none;padding:0;margin:var(--s4) 0 0;counter-reset:s}
.steps li{display:grid;grid-template-columns:3.25rem 1fr;gap:var(--s2);padding:var(--s3) 0;border-top:1px solid var(--line)}
.steps li:before{counter-increment:s;content:counter(s);font:600 2.25rem/1 var(--display);color:var(--amber-deep)}
.steps h3{margin-bottom:.35rem}.steps p{margin:0}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s5)}
.trust h3{font-size:1.5rem;margin:var(--s2) 0 .5rem}.trust p{font-size:var(--fs-small);margin:0}.trust .rule{margin:0}
details{border-top:1px solid var(--line);padding:var(--s3) 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{font:600 1.5rem/1.3 var(--display);color:var(--ink);cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details p{margin:.75rem 0 0;max-width:42em}
footer{padding:var(--s5) 0;font-size:var(--fs-small);color:var(--ink-soft);border-top:1px solid var(--line)}
footer p{max-width:none}
.tbc{margin-left:.3em;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-soft);font:600 .875rem/1.5 var(--text);padding:0 .35em;border-radius:3px;white-space:nowrap}
/* forms */
form.card{background:var(--white);padding:var(--s5);border:1px solid var(--line);border-radius:var(--radius)}
label,.lbl{display:block;font:700 var(--fs-small)/1.3 var(--text);color:var(--ink);margin:var(--s3) 0 .5rem}
label:first-child{margin-top:0}
.opt{font-weight:400;color:var(--ink-soft)}
input[type=text],input[type=email],textarea{width:100%;min-height:3.25rem;padding:0 1rem;border:1.5px solid var(--field);border-radius:var(--radius);font:var(--fs-small) var(--text);background:var(--white);color:var(--ink)}
textarea{padding:.75rem 1rem;min-height:6.5rem;resize:vertical;line-height:1.5}
textarea::placeholder{color:var(--ink-soft);opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{margin:0;font-weight:400;display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:0 1.1rem;border:1.5px solid var(--field);border-radius:var(--radius-pill);background:var(--white);cursor:pointer}
input[type=radio]{accent-color:var(--amber-deep);width:1.15rem;height:1.15rem}
@media (max-width:860px){
  .wrap{padding:0 var(--s3)} section{padding:var(--s6) 0}
  .hero,body.b .hero-b{grid-template-columns:1fr;min-height:0}
  .hero .photo{order:-1;aspect-ratio:4/3.4}
  .hero .copy{padding:var(--s5) var(--s3)}
  .split,.trust,.split.wide{grid-template-columns:1fr;gap:var(--s4)}
  .split .img{aspect-ratio:4/3}
  .contact span{display:none}
  .site{flex-direction:column;align-items:flex-start;gap:.6rem;padding:var(--s2) var(--s3)}
  .mark img{height:1.85rem}
  form.card{padding:var(--s4) var(--s3)}
}
.amberband .eyebrow::before,.plan .eyebrow::before{background:var(--ink)}
input,textarea,select{color:var(--ink);accent-color:var(--ink)} /* Sunlit rule: warm ink, never UA pure black */

/* Loved Ever After · site layer (lea-launch). Tokens only: every colour/size comes from tokens.css,
   so the final brand tokens can be dropped in without touching this file. */
.skip{position:absolute;left:var(--s2);top:-10rem;z-index:10;background:var(--ink);color:var(--paper);padding:.75rem 1.25rem;border-radius:var(--radius);font-weight:700;text-decoration:none}
.skip:focus{top:var(--s2)}
.site nav{display:flex;gap:var(--s3);align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:.25rem var(--s3);margin-top:var(--s2)}
footer a{color:var(--ink-soft)}
fieldset{border:0;padding:0;margin:var(--s3) 0 0;min-width:0}
legend{display:block;font:700 var(--fs-small)/1.3 var(--text);color:var(--ink);margin:0 0 .5rem;padding:0}
.req{font-weight:400;color:var(--ink-soft)}
.chips label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.chips label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.err{display:block;color:var(--ink);font-size:var(--fs-small);font-weight:700;margin-top:.4rem}
.err:empty{display:none}
.err:not(:empty)::before{content:"! ";color:var(--amber-deep)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--ink);border-width:2.5px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.status{margin:var(--s3) 0 0;padding:var(--s2) var(--s3);border-left:3px solid var(--amber);background:var(--paper);font-size:var(--fs-small)}
.status:empty{display:none}
.btn[disabled]{opacity:.7;cursor:progress}
.voice.soon .play{background:var(--line)}
.voice.soon .play:after{border-left-color:var(--ink-soft)}
/* storage notice (UK/EU only) */
.notice{position:relative;z-index:1;max-width:var(--max);margin:0 auto var(--s3);background:var(--ink);color:var(--paper);padding:var(--s3);border-radius:var(--radius);font-size:var(--fs-small)}
.notice p{margin:0 0 var(--s2);max-width:none;color:var(--paper)}
.notice a{color:var(--paper)}
.notice .row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.notice button{min-height:2.75rem;padding:.5rem 1.1rem;border-radius:var(--radius);font:700 var(--fs-small)/1.2 var(--text);cursor:pointer;border:2px solid var(--paper)}
.notice .ok{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.notice .no{background:transparent;color:var(--paper)}
.notice :focus-visible{outline-color:var(--paper)}
/* prose pages */
.prose{max-width:46rem;padding:var(--s5) 0 var(--s6)}
.prose h1{font-size:var(--fs-h2);margin-bottom:var(--s3)}
.prose h2{font-size:var(--fs-h3);margin:var(--s5) 0 var(--s2)}
.prose h3{font-size:1.25rem;margin:var(--s4) 0 var(--s1)}
.prose p,.prose li{max-width:40em}
.prose ul,.prose ol{padding-left:1.4rem;margin:0 0 var(--s2)}
.prose li{margin-bottom:.4rem}
.prose table{border-collapse:collapse;width:100%;margin:var(--s2) 0 var(--s3);font-size:var(--fs-small)}
.prose th,.prose td{text-align:left;vertical-align:top;border-top:1px solid var(--line);padding:.6rem .75rem .6rem 0}
.prose th{font-weight:700}
.legalflag{background:var(--stone);border-left:4px solid var(--amber);padding:var(--s2) var(--s3);border-radius:0 var(--radius) var(--radius) 0;font-size:var(--fs-small);margin:0 0 var(--s4)}
.legalflag p{margin:0}
.invite{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);margin-top:var(--s4)}
.invite input{font-size:1rem}
.invite .row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.btn.ghost{background:transparent;border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--stone)}
@media (max-width:860px){.prose{padding:var(--s4) 0 var(--s5)}.invite{padding:var(--s3)}}
@media print{.notice,.skip,.site nav{display:none}}
.site .mark{min-height:2.75rem;align-items:center} .site .mark::before{margin-top:0}
.invite h2{margin-top:0}

/* region and currency selector (header): one currency per page, choice remembered */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.region,.region:last-of-type{position:relative;font-size:var(--fs-small);border:0;padding:0;flex:none}
.region summary{font:700 var(--fs-small)/1.2 var(--text);list-style:none;cursor:pointer;min-height:2.75rem;display:flex;align-items:center;gap:.4rem;padding:0 .9rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:700}
.region summary::-webkit-details-marker{display:none}
.region summary::after{content:"";width:.45rem;height:.45rem;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-2px) rotate(45deg);margin-left:.2rem}
.region[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.region summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.region ul{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;list-style:none;margin:0;padding:.4rem;min-width:15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 30px rgba(var(--overlay),.12)}
.region li{margin:0}
.region a{display:flex;justify-content:space-between;gap:1rem;min-height:2.75rem;align-items:center;padding:0 .8rem;border-radius:calc(var(--radius) - 4px);color:var(--ink);text-decoration:none}
.region a:hover,.region a:focus-visible{background:var(--stone)}
.region a[aria-current]{font-weight:700}
.region a[aria-current]::before{content:"✓";margin-right:-.4rem}
.region a span{color:var(--ink-soft)}
@media (max-width:560px){.region .rname{display:none}}
.tax{font-size:var(--fs-small);color:var(--ink-soft);margin:.5rem 0 0}
.done h3:focus{outline:none}
.done .invite{margin-top:var(--s3)}
.done .invite h4{margin:0 0 .4rem}
.done .row,.invite .row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
mark{background:var(--amber);color:var(--ink);padding:0 .2em}
@media (max-width:860px){.site{flex-direction:row;align-items:center;flex-wrap:nowrap}}