@font-face{font-family:'Aleo';src:url(/assets/fonts/aleo-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Aleo';src:url(/assets/fonts/aleo-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Aleo';src:url(/assets/fonts/aleo-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Figtree';src:url(/assets/fonts/figtree-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url(/assets/fonts/figtree-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --cocoa:#3B2418; --cocoa-soft:#7A6153; --hair:rgba(59,36,24,.18);
  --milk:#FBF7F1; --skim:#F3EDE4; --cream:#FFFDF9;
  --peach:#F2B48F; --peach-wash:#F9E4D6; --peach-ink:#9E4F28;
  --straw:#D9536B; --straw-soft:#F3C3CC; --straw-ink:#B23A50;
  --avo:#8C9A5A; --avo-soft:#D7DDB9; --avo-ink:#5F6B36;
  --display:'Aleo',Georgia,'Times New Roman',serif; --text:'Figtree','Helvetica Neue',Arial,sans-serif; --proof:'Aleo',Georgia,'Times New Roman',serif;
  --t-micro:10px; --t-label:11px; --t-fine:12px; --t-xs:13px;
  --t-sm:15px; --t-body:17px; --t-h5:19px; --t-h4:22px;
  --t-h3:26px; --t-h2:clamp(30px,3.9vw,46px); --t-h1:clamp(40px,6vw,76px); --t-lead:clamp(19px,2.3vw,23px);
  --t-display:clamp(28px,4vw,42px); --t-pull:clamp(24px,3.4vw,34px); --t-num:36px;
  --lh-body:1.62; --lh-head:1.06; --lh-tight:1.22; --lh-flat:1.5;
  --wrap:920px; --measure:66ch; --lead-measure:48ch; --head-measure:17ch;
}

/* ── base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--milk);color:var(--cocoa);
  font:400 var(--t-body)/var(--lh-body) var(--text);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
::selection{background:var(--peach-wash)}
:focus-visible{outline:2px solid var(--straw-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--cocoa);color:var(--milk);
  padding:12px 18px;z-index:60}
.skip:focus{left:0}

/* ── type ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0 0 14px;
  text-wrap:balance}
h1{font-size:var(--t-h1);line-height:var(--lh-head);letter-spacing:-.018em}
h2{font-size:var(--t-h2);line-height:var(--lh-head);letter-spacing:-.012em}
h3{font-size:var(--t-h3);line-height:var(--lh-tight);letter-spacing:-.005em}
h4{font-size:var(--t-h5);line-height:var(--lh-tight)}
h1 em,h2 em{font-style:italic;color:var(--peach-ink)}
p{margin:0 0 16px}
b,strong{font-family:var(--display);font-weight:600;font-size:1.02em}
em,i{font-style:italic}
a{color:var(--peach-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--cocoa)}
.lead{font-size:var(--t-lead);line-height:var(--lh-flat);color:var(--cocoa)}
.small{font-size:var(--t-xs);line-height:var(--lh-flat);color:var(--cocoa-soft)}
.measure{max-width:var(--measure)}
.eyebrow,.lbl-k,.tag,.k,.slbl{font-family:var(--text);font-weight:500;font-size:var(--t-label);
  letter-spacing:.17em;text-transform:uppercase;color:var(--cocoa-soft);
  margin:0 0 10px;display:block}
.hr{height:1px;background:var(--hair);border:0;margin:0}
/* The footnote numeral: display face, italic, strawberry, raised. Reserved for
   citation and nothing else — spend it elsewhere and it stops meaning source. */
.fn{font-family:var(--display);font-style:italic;color:var(--straw-ink);
  font-size:.72em;vertical-align:.42em}
.src{font-family:var(--display);font-style:italic;font-size:var(--t-xs);line-height:var(--lh-flat);
  color:var(--straw-ink);margin:0}
/* A signature is not a citation. Strawberry means "this is where the claim came
   from" everywhere else in the system, so the one place a name is set in the
   same italic takes the ink color instead. */
.sig{font-family:var(--display);font-style:italic;font-size:var(--t-h5);line-height:var(--lh-tight);
  color:var(--cocoa);margin:0}
.srcrow{display:flex;gap:12px;align-items:flex-start;margin-top:26px;
  padding-top:16px;border-top:1px solid var(--hair)}
.srcrow .fn{flex:none;font-size:var(--t-sm);vertical-align:0}

/* ── layout ───────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.wrap--tight{max-width:760px}
.sec{padding:clamp(48px,7vw,88px) 0}
.sec--bone{background:var(--skim);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.sec--cocoa{background:var(--cocoa);color:var(--milk)}
.two{display:grid;gap:clamp(24px,4vw,48px)}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.cols{display:grid;gap:clamp(24px,4vw,44px)}
@media(min-width:760px){.cols{grid-template-columns:2fr 1fr 1fr}}
.panel{background:var(--cream);border:1px solid var(--hair);
  padding:clamp(24px,4vw,38px)}
.stack{display:flex;flex-direction:column;gap:16px}

/* ── header, announce, footer ─────────────────────────────────────── */
.announce{background:var(--cocoa);color:var(--milk);font-size:var(--t-xs);line-height:var(--lh-flat);
  text-align:center;padding:11px 20px}
.announce strong{font-family:var(--display);font-weight:600;font-size:var(--t-sm)}
.announce a{color:var(--peach)}
.announce a:hover{color:var(--milk)}
.hd{border-bottom:1px solid var(--hair);background:var(--milk);
  position:sticky;top:0;z-index:30}
.hd .wrap{display:flex;align-items:center;gap:14px;padding-top:17px;padding-bottom:17px;
  flex-wrap:wrap;max-width:1180px}
.mark{flex:none;display:block;width:26px;height:25px}
.wordmark{font-family:var(--display);font-weight:600;font-size:var(--t-h5);
  color:var(--cocoa);text-decoration:none;letter-spacing:-.005em}
.wordmark:hover{color:var(--peach-ink)}
.navshop{margin-left:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  justify-content:flex-end}
.navshop .tag{margin:0;display:none}
@media(min-width:1180px){.navshop .tag{display:block}}
/* On a phone the header was three rows and, being sticky, covered a third of
   the screen for the whole scroll. The section links go — the page is one
   scroll and the footer carries all of them — and what stays is the wordmark
   and the one thing anybody came to do. */
@media(max-width:700px){
  .hd .wrap{flex-wrap:nowrap;gap:10px;padding-top:12px;padding-bottom:12px}
  .navshop .navlink:not(.navlink--go){display:none}
  .navlink--go{padding:9px 12px;font-size:var(--t-label);white-space:nowrap}
  .wordmark{font-size:var(--t-h5)}
}
.navlink{font-size:var(--t-fine);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cocoa-soft);text-decoration:none;padding:6px 0;min-height:24px;
  display:inline-flex;align-items:center}
.navlink:hover{color:var(--cocoa)}
.navlink[aria-current]{color:var(--cocoa);border-bottom:1px solid var(--cocoa)}
.navlink--go{border:1px solid var(--cocoa);color:var(--cocoa);padding:8px 14px}
.navlink--go:hover{background:var(--cocoa);color:var(--milk)}
.ft{background:var(--cocoa);color:var(--milk);padding:64px 0 40px}
.ft .mark{width:30px;height:29px;margin-bottom:14px}
.ft h2{color:var(--milk);font-size:var(--t-h3);margin-bottom:10px}
.ft a{color:var(--milk);text-decoration:none;border-bottom:1px solid rgba(251,247,241,.35)}
.ft a:hover{color:var(--peach);border-color:var(--peach)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font-size:var(--t-xs)}
.ft .cols{grid-template-columns:1fr;gap:36px}
@media(min-width:760px){.ft .cols{grid-template-columns:2fr 1fr 1fr}}
.fine{margin:44px 0 0;padding-top:20px;border-top:1px solid rgba(251,247,241,.22);
  font-size:var(--t-fine);line-height:var(--lh-body);color:#D9CFC7}

/* ── buttons ──────────────────────────────────────────────────────── */
/* A hairline box and an arrow. No fill, no radius, no shadow. */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--text);
  font-weight:500;font-size:var(--t-xs);letter-spacing:.02em;color:var(--cocoa);
  background:none;border:1px solid var(--cocoa);padding:15px 22px;min-height:48px;
  text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn::after{content:"\2192";font-family:var(--display);font-size:var(--t-body);line-height:0}
.btn:hover{background:var(--cocoa);color:var(--milk)}
.btn.is-disabled,.btn:disabled{border-color:var(--hair);color:var(--cocoa-soft);
  cursor:not-allowed}
.btn.is-disabled:hover,.btn:disabled:hover{background:none;color:var(--cocoa-soft)}
.ghost{border-color:var(--hair)}
.btn--quiet{border-color:var(--hair);color:var(--cocoa-soft)}
.btn--quiet:hover{background:none;border-color:var(--cocoa);color:var(--cocoa)}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}

/* ── the reading rail ─────────────────────────────────────────────── */
/* Eight fawn tracks down the left margin, one per chapter, deepening toward
   the one you are in. It is the site's only piece of persistent chrome, and it
   is the mark's own footprint rather than a scrollbar or a set of dots. Below
   1240px there is no margin to put it in, so it is replaced by the hairline
   at the very top of the window. */
.rail{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:25;
  display:none}
@media(min-width:1240px){.rail{display:block}}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;
  position:relative}
.rail ol::before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:1px;
  background:var(--hair)}
.rail a{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:var(--cocoa-soft);padding:2px 0}
.rail .track{opacity:.32;position:relative;transition:opacity .25s}
.rail .lb{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;opacity:0;transform:translateX(-5px);
  transition:opacity .22s,transform .22s}
.rail a:hover .track,.rail a:focus-visible .track{opacity:.6}
.rail a:hover .lb,.rail a:focus-visible .lb{opacity:1;transform:none}
.rail a[aria-current] .track{opacity:1}
.rail a[aria-current] .lb{opacity:1;transform:none;color:var(--cocoa)}
@media (prefers-reduced-motion:reduce){
  .rail .track,.rail .lb{transition:none}}

.prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--peach);
  z-index:40;transition:width .1s linear}
@media(min-width:1240px){.prog{display:none}}
@media (prefers-reduced-motion:reduce){.prog{transition:none}}

/* ── a chapter ────────────────────────────────────────────────────── */
.ch{padding:clamp(54px,7vw,96px) 0;position:relative;
  scroll-margin-top:76px}
/* A chapter can be painted. The washes are the only tints light enough to
   carry secondary text at AA — brand.py has the numbers and refuses the build
   if one stops passing — so a coloured chapter is a real ground and not a
   band that copy has to be lifted off. Hairlines darken with the ground so
   they stay visible on it. */
.ch--wash{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ch--peach{background:var(--peach-wash)}
.ch--avo{background:#EAEEDC}
.ch--sky{background:#E4EEF5}
.ch--honey{background:#F8EBCF}
.ch--plum{background:#F1E6F0}
.ch--cream{background:var(--cream)}
.ch--first{padding-top:clamp(48px,7vw,84px)}
.ch__n{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--peach-ink);
  display:block;margin:0 0 18px}
.ch__n::before{content:"";display:inline-block;width:34px;height:1px;
  background:var(--peach);vertical-align:.34em;margin-right:12px}
.ch__body{max-width:var(--measure)}
.ch__body p{font-size:var(--t-body);line-height:var(--lh-body)}
.ch__after{max-width:var(--measure);margin-top:26px}

/* A pull quote. One per chapter at most, and only for a sentence that is the
   chapter's actual claim rather than a nice line. */
.pull{font-family:var(--display);font-weight:500;
  font-size:var(--t-pull);line-height:var(--lh-tight);letter-spacing:-.01em;
  color:var(--cocoa);max-width:20ch;margin:38px 0;padding-left:22px;
  border-left:1px solid var(--peach)}

/* ── the opening ──────────────────────────────────────────────────── */
.lede{position:relative;overflow:hidden;background:var(--milk);
  border-bottom:1px solid var(--hair);
  padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,90px)}
/* The hollow a fawn presses into the grass, cropped by the page edge so it
   reads as ground the type sits on rather than a logo floating in space. */
.lede::after{content:"";position:absolute;pointer-events:none;
  right:-9vw;bottom:-16vw;width:min(58vw,660px);height:min(58vw,660px);
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20104%20104%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M18%2046C10%2022%2040%204%2070%208c26%204%2032%2030%2028%2052-4%2020-26%2040-52%2038C22%2096%204%2074%2018%2046z%22%20fill%3D%22%23F9E4D6%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.lede .wrap{position:relative;z-index:1}
.lede h1{max-width:var(--head-measure);margin-bottom:24px}
.lede .lead{max-width:var(--lead-measure)}
.lede .sub{max-width:46ch;color:var(--cocoa-soft);font-size:var(--t-sm)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0;
  padding:0;font-size:var(--t-xs);color:var(--cocoa-soft)}
.trust li{display:flex;align-items:center;gap:9px}
.trust li::before{content:"";width:11px;height:11px;flex:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20116%20116%22%3E%3Cpath%20d%3D%22M46%206c18-8%2044%200%2052%2020%206%2016-2%2030-4%2044-2%2016%202%2032-14%2034-18%202-30-10-46-16C12%2080%202%2062%206%2044%2010%2026%2028%2014%2046%206z%22%20fill%3D%22%23F2B48F%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
/* A row of the mark's own spots. Named spotrow, not dapple: brand.py
   already owns .dapple as the tiled pattern, and using it here put the
   pattern behind the row. */
.spotrow{display:flex;gap:7px;align-items:center;margin:0 0 30px}
.spotrow .spots{gap:7px}
/* Five spots, the five areas, in order. It is the first thing on the page and
   the whole system in one line, before a word of it is explained. */
.spotrow--areas svg:nth-child(1) path:not([fill="none"]){fill:var(--peach)}
.spotrow--areas svg:nth-child(2) path:not([fill="none"]){fill:var(--avo)}
.spotrow--areas svg:nth-child(3) path:not([fill="none"]){fill:#9B6C93}
.spotrow--areas svg:nth-child(4) path:not([fill="none"]){fill:#6E9CBF}
.spotrow--areas svg:nth-child(5) path:not([fill="none"]){fill:#E3A93C}

/* ── the five areas ───────────────────────────────────────────────── */
.areas{list-style:none;margin:34px 0 0;padding:0;
  border-top:1px solid var(--hair)}
.areas li{display:grid;grid-template-columns:auto 1fr;gap:18px;
  align-items:start;padding:24px 0;border-bottom:1px solid var(--hair)}
@media(min-width:720px){
  .areas li{grid-template-columns:38px 52px 1fr;gap:22px;align-items:center}}
/* Each row carries its own area's colour, taken from the .a-<KEY> class the
   row sets. The numeral, the swatch and the formal name all read from
   --area-ink, so the colour of an area is set in one place in brand.py and
   arrives here, on the card, and in the proportion figure without being
   written down three times. */
.areas li{position:relative;transition:background .2s}
.areas li::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;
  width:3px;background:var(--area);opacity:0;transition:opacity .2s}
.areas li:hover{background:var(--area-wash)}
.areas li:hover::before{opacity:1}
.areas .rn{font-family:var(--display);font-style:italic;font-size:var(--t-h5);
  color:var(--area-ink);display:none}
@media(min-width:720px){.areas .rn{display:block}}
.areas .icon{flex:none}
.areas h3{margin:0 0 3px;font-size:var(--t-h5)}
.areas p{margin:0;font-size:var(--t-sm);color:var(--cocoa-soft)}
/* The chip takes the *wash*, not the soft. Avocado-ink on avocado-soft is
   4.10:1 and sky-ink on sky-soft is 4.46:1 — both below AA, both invisible by
   eye, and both caught only because brand.py's TEXT_PAIRS now declares this
   pairing. The hairline in the bright colour puts the saturation back. */
.areas .formal{display:inline-block;font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--area-ink);margin-top:10px;
  background:var(--area-wash);border:1px solid var(--area);padding:4px 10px}
@media (prefers-reduced-motion:reduce){
  .areas li,.areas li::before{transition:none}}

/* ── the proportion figure ────────────────────────────────────────── */
/* A hundred of the mark's own spots, seventy-five of them filled. The only
   place on the site a number is drawn rather than written, because "75% or
   more" is the one fact the whole reassurance rests on. */
.prop{margin:30px 0 0;padding:clamp(24px,4vw,36px);background:var(--cream);
  border:1px solid var(--hair)}
/* The seventy-five are not one colour. They are a hundred different children
   and five of them are drawn in each area's colour in turn, which is both
   truer and the one place on the site the whole palette is visible at once.
   
   `:not([fill="none"])` is load-bearing. An outlined spot carries fill="none"
   and a stroke, and `path[fill]` matches it — so the first version of this
   rule filled all one hundred and the figure said every child can do it by
   that age, which is the exact opposite of the chapter it sits in. The
   twenty-five stay unfilled and cocoa-soft: "not yet" has to look different
   from "yes", not merely be a different shade of the same idea. */
.prop .spots svg:nth-child(5n+1) path:not([fill="none"]){fill:var(--peach)}
.prop .spots svg:nth-child(5n+2) path:not([fill="none"]){fill:var(--avo)}
.prop .spots svg:nth-child(5n+3) path:not([fill="none"]){fill:#9B6C93}
.prop .spots svg:nth-child(5n+4) path:not([fill="none"]){fill:#6E9CBF}
.prop .spots svg:nth-child(5n+5) path:not([fill="none"]){fill:#E3A93C}
.prop .spots{display:grid;grid-template-columns:repeat(20,1fr);gap:6px;
  max-width:540px}
@media(max-width:560px){.prop .spots{grid-template-columns:repeat(10,1fr)}}
.prop .spots svg{display:block;width:100%;height:auto}
.prop figcaption{margin:20px 0 0;font-size:var(--t-xs);line-height:var(--lh-flat);
  color:var(--cocoa-soft);max-width:44ch}

/* ── photographs ──────────────────────────────────────────────────── */
/* Three on the whole site, each earning its place: hands doing the thing the
   plan asks for, hands covered in the mess the guidance says to allow, and
   the grass the mark is named after. No type ever sits on top of one. */
.fig{margin:38px 0 0}
.fig img{display:block;width:100%;border:1px solid var(--hair)}
.fig figcaption{margin:12px 0 0;font-family:var(--display);font-style:italic;
  font-size:var(--t-xs);line-height:var(--lh-flat);color:var(--cocoa-soft);max-width:52ch}
.fig--empty{background:var(--peach-wash);aspect-ratio:16/9;border:1px solid var(--hair)}
/* The full-bleed band. Its credit used to sit on the photograph in milk with
   a text-shadow, which broke this sheet's own rule that no type ever sits on a
   picture — and the shadow was doing real work, because the top of that
   photograph is bright sunlit grass. Measured against the image it was 1:1.
   The credit now sits under the band, where it is a caption like any other. */
.band{margin:0}
.band img{display:block;width:100%;height:clamp(240px,38vw,460px);object-fit:cover}
.band figcaption{max-width:var(--wrap);margin:10px auto 0;padding:0 28px;
  font-family:var(--display);font-style:italic;font-size:var(--t-fine);
  color:var(--cocoa-soft);text-align:right}

/* ── forms ────────────────────────────────────────────────────────── */
.cap{margin-top:22px}
.cap label{display:block;font-family:var(--text);font-weight:500;font-size:var(--t-fine);
  letter-spacing:.13em;text-transform:uppercase;color:var(--cocoa-soft);
  margin-bottom:10px}
.cap .row{display:flex;flex-wrap:wrap;gap:10px}
.cap input[type=email]{flex:1 1 240px;min-width:0;font:400 16px/1.4 var(--text);
  color:var(--cocoa);background:var(--milk);border:1px solid var(--cocoa);
  padding:14px 16px;min-height:48px}
.cap input[type=email]::placeholder{color:var(--cocoa-soft)}
.cap button{font-family:var(--text);font-weight:500;font-size:var(--t-xs);
  letter-spacing:.02em;color:var(--milk);background:var(--cocoa);
  border:1px solid var(--cocoa);padding:14px 22px;min-height:48px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px}
.cap button::after{content:"\2192";font-family:var(--display);font-size:var(--t-body);line-height:0}
.cap button:hover{background:var(--peach-ink);border-color:var(--peach-ink)}
.cap button:disabled{opacity:.55;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{margin:12px 0 0;font-size:var(--t-fine);line-height:var(--lh-flat);color:var(--cocoa-soft)}
.msg{margin:14px 0 0;font-size:var(--t-sm);line-height:var(--lh-flat);padding:0}
.msg.ok{color:var(--avo-ink)}
.msg.err{color:var(--straw-ink)}
.msg .fix{background:none;border:0;padding:0;font:inherit;color:var(--straw-ink);
  text-decoration:underline;cursor:pointer}

/* ── lists ────────────────────────────────────────────────────────── */
.tick{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tick li{position:relative;padding-left:24px;font-size:var(--t-sm);line-height:var(--lh-body)}
.tick li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20116%20116%22%3E%3Cpath%20d%3D%22M46%206c18-8%2044%200%2052%2020%206%2016-2%2030-4%2044-2%2016%202%2032-14%2034-18%202-30-10-46-16C12%2080%202%2062%206%2044%2010%2026%2028%2014%2046%206z%22%20fill%3D%22%23F2B48F%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.badge{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--cocoa-soft);
  border:1px solid var(--hair);padding:6px 11px}
/* The numbered rows on the card chapter. The numeral is the display face in
   italic but never strawberry: strawberry means source. */
.rows{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--hair)}
.rows li{display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--hair)}
.rows .rn{font-family:var(--display);font-style:italic;font-size:var(--t-body);
  color:var(--cocoa-soft);line-height:var(--lh-flat)}
.rows h3{margin:0 0 5px;font-size:var(--t-h5)}
.rows p{margin:0;font-size:var(--t-sm);color:var(--cocoa-soft);max-width:56ch}
.toc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.toc li{display:grid;gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--hair)}
@media(min-width:620px){.toc li{grid-template-columns:130px 1fr}}
.toc .k{margin:0;padding-top:3px}
.toc .t{font-family:var(--display);font-size:var(--t-body);line-height:var(--lh-tight)}
.toc .d{font-size:var(--t-sm);color:var(--cocoa-soft);line-height:var(--lh-flat)}
.toc .d a{overflow-wrap:anywhere}

/* ── the faq ──────────────────────────────────────────────────────── */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;
  font-family:var(--display);font-weight:500;font-size:var(--t-h5);line-height:var(--lh-tight);
  display:flex;justify-content:space-between;gap:20px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:var(--t-h5);
  color:var(--cocoa-soft);flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 22px;max-width:var(--measure)}
.faq .a p{margin:0 0 12px;font-size:var(--t-sm)}
.faq .a p:last-child{margin:0}

/* ── the closing band ─────────────────────────────────────────────── */
.close{background:var(--cocoa);color:var(--milk);text-align:center;
  padding:clamp(64px,9vw,116px) 0}
.close h2{color:var(--milk);max-width:var(--head-measure);margin:0 auto 16px}
.close h2 em{font-style:italic;color:var(--peach)}
.close .spotrow--areas svg:nth-child(1) path:not([fill="none"]){fill:var(--peach)}
.close .spotrow--areas svg:nth-child(2) path:not([fill="none"]){fill:#E3A93C}
.close .spotrow--areas svg:nth-child(3) path:not([fill="none"]){fill:#9B6C93}
.close .spotrow--areas svg:nth-child(4) path:not([fill="none"]){fill:#6E9CBF}
.close .spotrow--areas svg:nth-child(5) path:not([fill="none"]){fill:var(--avo)}
.close p{color:#DCD3CB;max-width:46ch;margin:0 auto 30px;font-size:var(--t-body)}
.close .btn{border-color:var(--milk);color:var(--milk)}
.close .btn:hover{background:var(--milk);color:var(--cocoa)}
.close .spotrow{justify-content:center}

/* ── an activity card ─────────────────────────────────────────────── */
.acard{background:var(--cream);border:1px solid var(--hair);
  padding:clamp(24px,4vw,36px)}
.ahead{display:grid;gap:16px;padding-bottom:20px;margin-bottom:22px;
  border-bottom:1px solid var(--hair)}
@media(min-width:720px){.ahead{grid-template-columns:1fr auto;align-items:start}}
.asteps{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  margin:22px 0}
@media(min-width:720px){.asteps{grid-template-columns:repeat(3,1fr)}}
.astep{background:var(--cream);padding:20px 22px}
.an{font-family:var(--display);font-style:italic;font-size:var(--t-h4);color:var(--cocoa-soft);
  display:block;margin-bottom:8px}
.anote{background:var(--milk);border:1px solid var(--hair);padding:18px 20px}
.afoot{display:grid;gap:20px;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--hair)}
@media(min-width:720px){.afoot{grid-template-columns:repeat(3,1fr)}}

/* ── prose pages ──────────────────────────────────────────────────── */
.prose{max-width:var(--measure)}
.prose h2{margin-top:44px}
.prose h3{margin-top:30px}
.prose ul,.prose ol{padding-left:20px}
.prose li{margin-bottom:9px}
.pullq{font-family:var(--display);font-weight:500;font-size:var(--t-h3);line-height:var(--lh-tight);
  color:var(--cocoa);margin:30px 0;padding-left:20px;border-left:1px solid var(--peach)}
.evi{background:var(--cream);border-left:2px solid var(--straw);padding:20px 22px;
  margin:0 0 20px}
.marg{font-size:var(--t-fine);line-height:var(--lh-flat);color:var(--cocoa-soft);margin:0 0 14px}
.wash{background:var(--peach-wash)}
.press{border-top:1px solid var(--hair)}
.pillars{display:grid;gap:clamp(26px,4vw,44px)}
@media(min-width:760px){.pillars{grid-template-columns:1fr 1fr}}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--milk);padding:24px 22px}
.buybox{border-top:1px solid var(--cocoa);padding-top:22px;margin-top:22px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.buynote{margin:0;font-size:var(--t-fine);line-height:var(--lh-flat);color:var(--cocoa-soft)}
.price{font-family:var(--display);font-size:var(--t-h3)}
.stats{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.stat{border-top:1px solid var(--cocoa);padding-top:12px}
.num{font-family:var(--display);font-weight:500;font-size:var(--t-num);line-height:1}
.num-old{font-variant-numeric:oldstyle-nums}
.swatchgrid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.swatch{display:flex;flex-direction:column;gap:8px}
.chip{height:64px;border:1px solid var(--hair)}
.orn{display:flex;align-items:center;gap:14px;margin:26px 0 14px}
.tscroll{overflow-x:auto}
.foot{font-size:var(--t-fine);color:var(--cocoa-soft)}
.lede-xl{font-family:var(--display);font-weight:500;font-size:var(--t-display);
  line-height:1.15}
.grass{display:block;fill:none;stroke:var(--avo);stroke-width:1.1;
  stroke-linecap:round;margin:0 0 12px}

/* ── the readiness check ──────────────────────────────────────────── */
/* Lives in the main sheet because the check now appears in the middle of the
   homepage as well as on its own permalink. */
.rc{margin-top:34px}
.rc h2{font-size:var(--t-display)}
/* The age picker. `.rc-ages` is the fieldset ready.js emits — a legend, a
   heading, a line of copy and then one row of buttons — so the five-column
   grid belongs on the row, not on the fieldset. With it on the fieldset the
   heading and the copy became grid cells and the two empty columns showed the
   hairline color as a slab. */
.rc-ages{border:0;margin:0;padding:0;min-width:0}
.rc-agerow{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  margin-top:26px}
@media(min-width:620px){.rc-agerow{grid-template-columns:repeat(5,1fr)}}
.rc-agerow .btn{border:0;background:var(--milk);width:100%;
  justify-content:space-between;min-height:66px;font-size:var(--t-body)}
.rc-agerow .btn:hover{background:var(--cocoa);color:var(--milk)}
.rc-group{margin:0 0 34px}
.rc-q{border:0;margin:0 0 1px;padding:22px 24px;background:var(--cream)}
.rc-q--coming{background:var(--milk)}
/* A <legend> is laid out on the fieldset's border, not inside its padding box,
   so the question sat outside its own cream panel — obvious at 390px, where
   the panel starts below the text. Floating it puts it back in normal flow;
   the clearfix stops the options wrapping around it. */
.rc-q legend{float:left;width:100%;font-family:var(--display);font-size:var(--t-body);
  line-height:var(--lh-tight);padding:0 0 14px;max-width:56ch}
.rc-q::after{content:"";display:table;clear:both}
.rc-opts{display:flex;flex-wrap:wrap;gap:8px;clear:both}
.rc-opts input{position:absolute;opacity:0;width:1px;height:1px}
.rc-opts label{font-size:var(--t-xs);border:1px solid var(--hair);padding:10px 16px;
  min-height:42px;display:inline-flex;align-items:center;cursor:pointer;
  background:var(--milk)}
.rc-opts label:hover{border-color:var(--cocoa-soft)}
.rc-opts input:checked+label{background:var(--cocoa);color:var(--milk);
  border-color:var(--cocoa)}
.rc-opts input:focus-visible+label{outline:2px solid var(--straw-ink);outline-offset:2px}
.rc-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.rc-card{background:var(--cream);border:1px solid var(--hair);
  padding:clamp(26px,4vw,40px)}
.rc-card[tabindex="-1"]:focus{outline:none}
.rc-card h2{margin-bottom:6px}
.rc-lbl{font-family:var(--text);font-weight:500;font-size:var(--t-label);letter-spacing:.17em;
  text-transform:uppercase;color:var(--cocoa-soft);margin:30px 0 12px;display:block}
.rc-lbl:first-of-type{margin-top:20px}
.rc-count{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0 0 4px}
.rc-count svg{display:block}
.rc-plan{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
/* The two areas the card names, each in its own colour. ready.js sets --area
   per row from the same values brand.py gives the site, so the two a parent
   is handed here are the two colours they have just scrolled past. */
.rc-plan li{padding:16px 0 16px 18px;border-bottom:1px solid var(--hair);
  position:relative}
.rc-plan li::before{content:"";position:absolute;left:0;top:16px;bottom:16px;
  width:3px;background:var(--area,var(--peach))}
.rc-plan li:last-child{border-bottom:0}
.rc-plan b{display:block;font-size:var(--t-h5);margin-bottom:3px;
  color:var(--area-ink,var(--cocoa))}
.rc-strong{font-size:var(--t-sm);color:var(--cocoa-soft)}
.rc-call{background:var(--peach-wash);padding:22px 24px;margin:26px 0 0}
.rc-call ul{list-style:none;margin:12px 0 0;padding:0}
.rc-call li{position:relative;padding-left:22px;margin-bottom:9px;font-size:var(--t-sm)}
.rc-call li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%20-6%20116%20116%22%3E%3Cpath%20d%3D%22M30%2014C44%200%2068%204%2082%2016c14%2012%2018%2034%2014%2052-4%2016-20%2026-38%2030C38%20102%2016%2092%208%2076C0%2058%2014%2030%2030%2014z%22%20fill%3D%22none%22%20stroke%3D%22%237A6153%22%20stroke-width%3D%228%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.rc-foot{margin-top:28px;padding-top:18px;border-top:1px solid var(--hair)}

/* ── print ────────────────────────────────────────────────────────── */
@media print{
  .hd,.ft,.announce,.rail,.prog,.close,.cap,.skip{display:none}
  body{background:#fff}
  .ch{padding:20px 0;break-inside:avoid}
  .rc-card{border:1px solid #999}
}

/* month tints */
.m1{--tint:#F9E4D6;--tint-ink:#3B2418}
.m2{--tint:#F8E7DA;--tint-ink:#3B2418}
.m3{--tint:#F5E8DC;--tint-ink:#3B2418}
.m4{--tint:#EFE9DA;--tint-ink:#3B2418}
.m5{--tint:#E7EAD6;--tint-ink:#3B2418}
.m6{--tint:#DFE6CE;--tint-ink:#3B2418}
.m7{--tint:#D9E2C6;--tint-ink:#3B2418}
.m8{--tint:#DDE3CD;--tint-ink:#3B2418}
.m9{--tint:#E5E2D2;--tint-ink:#3B2418}
.m10{--tint:#EFE0D8;--tint-ink:#3B2418}
.m11{--tint:#F4DAD9;--tint-ink:#3B2418}
.m12{--tint:#F3C9CE;--tint-ink:#3B2418}
/* the five areas */
.a-P{--area:#F2B48F;--area-ink:#9E4F28;--area-soft:#F9E4D6;--area-wash:#F9E4D6}
.a-R{--area:#8C9A5A;--area-ink:#5F6B36;--area-soft:#D7DDB9;--area-wash:#EAEEDC}
.a-L{--area:#9B6C93;--area-ink:#734870;--area-soft:#DCC7DA;--area-wash:#F1E6F0}
.a-N{--area:#6E9CBF;--area-ink:#356887;--area-soft:#CFE0EC;--area-wash:#E4EEF5}
.a-S{--area:#E3A93C;--area-ink:#845C15;--area-soft:#F7E6C4;--area-wash:#F8EBCF}
/* the washes, as grounds */
.w-peach{background:#F9E4D6}
.w-avocado{background:#EAEEDC}
.w-plum{background:#F1E6F0}
.w-sky{background:#E4EEF5}
.w-honey{background:#F8EBCF}
.w-strawberry{background:#FBE3E6}
/* the drawn elements */
.spot{flex:none;vertical-align:baseline}
.spots{display:flex;flex-wrap:wrap;gap:7px}
.hollow{display:block;pointer-events:none}
.grass path{fill:none;stroke:var(--avo);stroke-width:1.1;stroke-linecap:round}
.grass{display:block;max-width:100%}
.trail{display:flex;align-items:center;gap:10px}
.seal text{font-weight:500}
.dapple{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20transform%3D%22translate%2814%2C26%29%20scale%280.42%29%22%20opacity%3D%220.06%22%3E%3Cpath%20d%3D%22M46%206c18-8%2044%200%2052%2020%206%2016-2%2030-4%2044-2%2016%202%2032-14%2034-18%202-30-10-46-16C12%2080%202%2062%206%2044%2010%2026%2028%2014%2046%206z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28126%2C6%29%20scale%280.32%29%22%20opacity%3D%220.06%22%3E%3Cpath%20d%3D%22M38%2010c14-12%2040-8%2054%204%2012%2010%208%2028%2012%2044%204%2018%200%2036-16%2042-16%206-34-4-50-10C18%2084%204%2070%204%2052%204%2034%2024%2022%2038%2010z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28158%2C116%29%20scale%280.46%29%22%20opacity%3D%220.06%22%3E%3Cpath%20d%3D%22M54%202c20%200%2034%2018%2042%2036%208%2018%206%2040-8%2052-14%2012-38%2010-56%202C12%2082%202%2062%206%2042C10%2020%2034%202%2054%202z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2846%2C148%29%20scale%280.3%29%22%20opacity%3D%220.06%22%3E%3Cpath%20d%3D%22M30%2014C44%200%2068%204%2082%2016c14%2012%2018%2034%2014%2052-4%2016-20%2026-38%2030C38%20102%2016%2092%208%2076C0%2058%2014%2030%2030%2014z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28206%2C196%29%20scale%280.24%29%22%20opacity%3D%220.06%22%3E%3Cpath%20d%3D%22M46%206c18-8%2044%200%2052%2020%206%2016-2%2030-4%2044-2%2016%202%2032-14%2034-18%202-30-10-46-16C12%2080%202%2062%206%2044%2010%2026%2028%2014%2046%206z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2896%2C86%29%20scale%280.22%29%22%20opacity%3D%220.06%22%3E%3Cpath%20d%3D%22M38%2010c14-12%2040-8%2054%204%2012%2010%208%2028%2012%2044%204%2018%200%2036-16%2042-16%206-34-4-50-10C18%2084%204%2070%204%2052%204%2034%2024%2022%2038%2010z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:120px 120px}
.dapple--print{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cg%20transform%3D%22translate%2814%2C26%29%20scale%280.42%29%22%20opacity%3D%220.08%22%3E%3Cpath%20d%3D%22M46%206c18-8%2044%200%2052%2020%206%2016-2%2030-4%2044-2%2016%202%2032-14%2034-18%202-30-10-46-16C12%2080%202%2062%206%2044%2010%2026%2028%2014%2046%206z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28126%2C6%29%20scale%280.32%29%22%20opacity%3D%220.08%22%3E%3Cpath%20d%3D%22M38%2010c14-12%2040-8%2054%204%2012%2010%208%2028%2012%2044%204%2018%200%2036-16%2042-16%206-34-4-50-10C18%2084%204%2070%204%2052%204%2034%2024%2022%2038%2010z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28158%2C116%29%20scale%280.46%29%22%20opacity%3D%220.08%22%3E%3Cpath%20d%3D%22M54%202c20%200%2034%2018%2042%2036%208%2018%206%2040-8%2052-14%2012-38%2010-56%202C12%2082%202%2062%206%2042C10%2020%2034%202%2054%202z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2846%2C148%29%20scale%280.3%29%22%20opacity%3D%220.08%22%3E%3Cpath%20d%3D%22M30%2014C44%200%2068%204%2082%2016c14%2012%2018%2034%2014%2052-4%2016-20%2026-38%2030C38%20102%2016%2092%208%2076C0%2058%2014%2030%2030%2014z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28206%2C196%29%20scale%280.24%29%22%20opacity%3D%220.08%22%3E%3Cpath%20d%3D%22M46%206c18-8%2044%200%2052%2020%206%2016-2%2030-4%2044-2%2016%202%2032-14%2034-18%202-30-10-46-16C12%2080%202%2062%206%2044%2010%2026%2028%2014%2046%206z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2896%2C86%29%20scale%280.22%29%22%20opacity%3D%220.08%22%3E%3Cpath%20d%3D%22M38%2010c14-12%2040-8%2054%204%2012%2010%208%2028%2012%2044%204%2018%200%2036-16%2042-16%206-34-4-50-10C18%2084%204%2070%204%2052%204%2034%2024%2022%2038%2010z%22%20fill%3D%22%233B2418%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:100px 100px}

/* the footnote numeral, and the block it resolves in */
.fnum{font-family:var(--proof);font-style:italic;font-size:.5em;color:var(--straw-ink);
  vertical-align:top;line-height:0;position:relative;top:.55em;margin-left:.04em}
.sources{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.src-note{display:flex;gap:10px;font-size:var(--t-fine);line-height:var(--lh-flat);color:var(--cocoa-soft)}
.src-note .n{font-family:var(--proof);font-style:italic;font-size:var(--t-xs);
  color:var(--straw-ink);min-width:10px;line-height:var(--lh-tight)}

/* the range bar */
.rb{margin:0 0 18px}
.rb__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:7px}
.rb__label{font-family:var(--display);font-weight:500;font-size:var(--t-h5)}
.rb__val{font-size:var(--t-xs);color:var(--cocoa-soft)}
.rb__track{position:relative;height:10px;background:var(--avo-soft)}
.rb__span{position:absolute;top:0;bottom:0;background:var(--peach)}
.rb__mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--cocoa)}
.rb__markv{position:absolute;top:14px;transform:translateX(-50%);font-size:var(--t-fine);
  color:var(--cocoa)}
.rb__note{margin:26px 0 0;font-size:var(--t-fine);line-height:var(--lh-flat);color:var(--cocoa-soft)}