/* leizlyance.ca · round 3 (1 Oct 2026): Condesa × Cedar.
   The user found round 2's six pastels "elementary" and lacking cohesion, liked the hover motion on the
   areas of focus, and asked for "fun but professional" motion across the site. Leizl likes two Squarespace
   palettes: Condesa's main one (yellow, orange, blue) and Cedar's last one (shades of green).

   One system, mapped onto the notebook from Direction A:
   - Paper and pencil come from Cedar: cream paper, sage fields and a dark-olive ink.
   - The three brights come from Condesa, and each has one job: tomato is the red pen (actions, corrections),
     mustard is the highlighter, cobalt is the ballpoint (handwriting, charts).
   - Each area of focus owns one bright: Fertility tomato, Hormonal health mustard, Pregnancy cobalt.
   Section boxes are sage or white; a page gets at most one mustard box and one cobalt box, then the tomato
   booking band. Still light only (manual D14).

   Contrast (WCAG 2.2): ink passes 6.7:1 or more on every field; ink-2 passes 4.5:1 on paper, card, sage-l and
   mustard; slate and tomato-d pass on paper, card and sage-l; white and card pass on cobalt (4.7) and tomato
   (4.6). Cobalt chart marks are 3.7:1 or more against paper, card and sage-l.

   Motion lives in the last part of this file and in site.js. Everything that moves is off when the visitor
   prefers reduced motion, and nothing is hidden unless site.js is running. */
:root{
  color-scheme:light;
  --paper:#FAF7E9; --surface:#FFFDF5; --card:#FFFDF5; --sunk:#F1EEDB;
  --ink:#2E3105; --text:#2E3105; --text-2:#4E5130; --ink-2:#4E5130; --slate:#62653F;
  --sage-l:#E3E6C8; --sage:#B8BC7F; --sage-d:#8E9356;
  --tomato:#D2401A; --tomato-d:#B5340F; --orange:#EB5027;
  --yellow:#F6CD45;
  --blue:#3077B5; --blue-d:#245E96;
  --pen:var(--blue-d); --focus:var(--blue-d);
  --cherry:var(--tomato); --cherry-hover:var(--tomato-d);   /* names the admin still uses */
  --hl:var(--yellow); --hl-ink:var(--ink);
  --line:#E2DFC6; --line-2:#CFCCAE; --grid:#ECE9D3;
  --btn:var(--tomato); --btn-fg:#FFFFFF; --btn-hover:var(--tomato-d);
  --ok:#0F6B49; --ok-soft:#DAF4E7;
  --tape:rgba(246,205,69,.82);
  --shadow:0 24px 40px -26px rgba(46,49,5,.5);
  --lift:0 1px 2px rgba(46,49,5,.06),0 14px 30px -24px rgba(46,49,5,.45);

  /* What a box's contents read from. Tones (below) change these. */
  --bg:var(--paper); --fg:var(--ink); --fg-2:var(--ink-2); --eyebrow-c:var(--tomato-d);
  --accent:var(--tomato); --accent-fg:#FFFFFF; --link-c:var(--tomato); --hl-c:var(--yellow);
  --area:var(--sage);

  --f-head:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Shantell Sans","Comic Neue","Segoe Print",cursive;
  --f-mono:"Atkinson Hyperlegible Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --t-display:clamp(2.6rem,6.6vw,5.4rem); --t-h1:clamp(2.3rem,5vw,4rem); --t-h2:clamp(1.85rem,3.4vw,2.7rem); --t-h3:1.4rem;
  --t-body:1.125rem; --t-small:.9375rem;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --header-h:68px;
  --radius:clamp(22px,3vw,34px);
}
@media (max-width:640px){:root{--header-h:58px;--t-body:1.0625rem}}

/* Box tones. Everything inside a box reads --fg, --fg-2, --accent and so on. */
.tone-sage{--bg:var(--sage-l);--fg:var(--ink);--fg-2:var(--ink-2);--eyebrow-c:var(--tomato-d);--accent:var(--tomato);--accent-fg:#fff;--link-c:var(--tomato);--hl-c:var(--yellow)}
.tone-card{--bg:var(--card);--fg:var(--ink);--fg-2:var(--ink-2);--eyebrow-c:var(--tomato-d);--accent:var(--tomato);--accent-fg:#fff;--link-c:var(--tomato);--hl-c:var(--yellow)}
.tone-yellow{--bg:var(--yellow);--fg:var(--ink);--fg-2:var(--ink-2);--eyebrow-c:var(--ink-2);--accent:var(--ink);--accent-fg:var(--yellow);--link-c:var(--ink);--hl-c:var(--card)}
.tone-blue{--bg:var(--blue);--fg:#fff;--fg-2:#fff;--eyebrow-c:#fff;--accent:var(--yellow);--accent-fg:var(--ink);--link-c:var(--yellow);--hl-c:var(--yellow)}
.tone-tomato{--bg:var(--tomato);--fg:var(--card);--fg-2:var(--card);--eyebrow-c:var(--card);--accent:var(--yellow);--accent-fg:var(--ink);--link-c:var(--yellow);--hl-c:var(--yellow)}
/* White cards inside any box go back to ink on white */
.card,.tip,.checks li,.viz,.labs li,.ev,.visit-card,.stat,.steps.cards li,.team li,.tbl,.gentle,.polaroid,.box{--fg:var(--ink);--fg-2:var(--ink-2);--eyebrow-c:var(--tomato-d);--accent:var(--tomato);--accent-fg:#fff;--link-c:var(--tomato);--hl-c:var(--yellow)}
/* Area colours: one bright per area of focus */
.area-fertility{--area:var(--orange)}
.area-hormonal{--area:var(--yellow)}
.area-pregnancy{--area:var(--blue)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--text);font:400 var(--t-body)/1.62 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding-left:1.25em}
li+li{margin-top:.4em}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--link-c);text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .2s,text-underline-offset .2s,color .2s}
a:hover{text-underline-offset:6px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.tone-blue :focus-visible,.tone-tomato :focus-visible{outline-color:var(--yellow)}
mark,.hl{color:var(--hl-ink);background:linear-gradient(transparent 54%,var(--hl-c) 54%,var(--hl-c) 93%,transparent 93%);background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em}
code{font:500 .88em var(--f-mono);background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:.05em .35em}
.nw{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:var(--t-small);line-height:1.5;color:var(--fg-2)}
.muted{color:var(--slate)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* Footnote numbers (Notes only; they link straight to the source) */
.sup{font:600 .62em var(--f-mono);color:var(--pen);vertical-align:super;line-height:0;margin-left:1px;text-decoration:none;padding:0 1px}
a.sup:hover{text-decoration:underline}
.sup.missing{color:var(--tomato)}

/* Skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}

/* Decorative shapes: Condesa's scalloped flower and clover, drawn as overlapping circles (components.js) */
.flower{display:block;color:var(--area);overflow:visible}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 10px 24px -22px rgba(46,49,5,.55)}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:var(--header-h)}
.wm{display:inline-flex;align-items:center;gap:10px;font:500 1.3rem/1 var(--f-head);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;color:var(--ink);padding:6px 0}
.wm:hover{color:var(--ink)}
.wm-mark{width:26px;height:26px;flex:none;--area:var(--tomato);transition:transform .7s var(--spring)}
.wm:hover .wm-mark{transform:rotate(90deg) scale(1.08)}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{position:relative;font-size:.97rem;color:var(--text-2);text-decoration:none;padding:10px 12px}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'%3E%3Cpath d='M0 3.5 Q 3.5 0 7 3.5 T 14 3.5' fill='none' stroke='%23D2401A' stroke-width='1.8'/%3E%3C/svg%3E") repeat-x 0 0/14px 7px;clip-path:inset(0 100% 0 0);transition:clip-path .35s var(--ease-out)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current=page]::after{clip-path:inset(0 0 0 0)}
.nav a[aria-current=page]{color:var(--ink);font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--btn);color:var(--btn-fg);border:0;border-radius:999px;padding:12px 24px;font:700 1rem/1.15 var(--f-body);text-decoration:none;cursor:pointer;text-align:center;transition:background-color .2s,transform .25s var(--spring),box-shadow .25s;box-shadow:0 12px 20px -16px rgba(181,52,15,.9)}
.btn:hover{background:var(--btn-hover);color:var(--btn-fg);transform:translateY(-2px);box-shadow:0 16px 24px -16px rgba(181,52,15,.9)}
.btn:active{transform:translateY(0) scale(.97)}
.btn .arr{display:inline-block;transition:transform .3s var(--spring)}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn-sm{min-height:38px;padding:8px 16px;font-size:.92rem;position:relative;box-shadow:none}
.btn-sm::after{content:"";position:absolute;inset:-4px -2px}   /* 44 px hit area */
.site-header .btn-sm{white-space:nowrap}
.btn-light{--btn:var(--card);--btn-fg:var(--ink);--btn-hover:var(--yellow);box-shadow:0 12px 20px -16px rgba(46,49,5,.7)}
.btn-light:hover{color:var(--ink)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font:600 .82rem/1 var(--f-mono);letter-spacing:.04em;color:var(--text-2);padding:12px 6px 12px 10px;border-radius:8px;min-height:44px;display:flex;align-items:center;gap:8px}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:16px;height:10px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/70% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;transition:transform .3s var(--spring)}
.menu[open] summary::after{transform:rotate(90deg)}
.menu summary:hover{background:var(--sage-l)}
.menu[open] summary{color:var(--ink)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow);padding:8px;display:grid;transform-origin:top right}
.menu-panel a{padding:12px 12px;border-radius:10px;text-decoration:none;font-size:1rem}
.menu-panel a:hover{background:var(--sage-l)}
.menu-panel a[aria-current=page]{font-weight:700;background:var(--sage-l)}
.menu-panel hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
@media (max-width:1020px){.nav{display:none}.menu{display:block}.site-header .btn-sm{margin-left:auto}}
@media (max-width:640px){.wm{font-size:1.08rem;gap:8px}.wm-mark{width:22px;height:22px}.site-header .wrap{gap:10px}.site-header .btn-sm{padding:8px 12px}}
@media (max-width:480px){.site-header .btn-sm .long{display:none}.menu .mt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.menu summary{padding-inline:12px}}
@media (max-width:359px){.wm{font-size:1rem}.wm-mark{display:none}}

/* Type */
.eyebrow{font:600 .78rem/1.45 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow-c);text-wrap:balance}
.eyebrow a{text-decoration:none;color:inherit}
.eyebrow a:hover{text-decoration:underline}
.display{font:400 var(--t-display)/1.0 var(--f-head);font-optical-sizing:auto;letter-spacing:-.03em;text-wrap:balance}
.display em,.h1 em,.h2 em,.band-t em{font-style:italic;font-weight:400}
.h1{font:420 var(--t-h1)/1.04 var(--f-head);font-optical-sizing:auto;letter-spacing:-.025em;text-wrap:balance}
.h2{font:430 var(--t-h2)/1.08 var(--f-head);letter-spacing:-.02em;text-wrap:balance;color:var(--fg)}
.h3{font:500 var(--t-h3)/1.2 var(--f-head);letter-spacing:-.01em;text-wrap:balance}
.lede{font-size:clamp(1.08rem,1.7vw,1.25rem);line-height:1.62;max-width:56ch;color:var(--fg-2)}
.lbl{font:600 .75rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--eyebrow-c)}
.tlink{font-weight:700;text-decoration:underline;text-decoration-color:var(--link-c);text-decoration-thickness:2px;text-underline-offset:5px}
.tlink:hover{text-underline-offset:8px}
.more{font-weight:700;font-size:.95rem}

/* Highlighter: draws left to right */
.swipe mark{background-size:100% 100%}
@media (prefers-reduced-motion:no-preference){.swipe mark{animation:swipe .7s var(--ease-out) .9s both}}
@keyframes swipe{from{background-size:0% 100%}to{background-size:100% 100%}}

/* Handwritten note: decorative (aria-hidden) unless it says something important */
.note{display:flex;align-items:flex-start;gap:8px;font:500 1.12rem/1.3 var(--f-hand);color:var(--pen);transform:rotate(-1.6deg);transform-origin:left center}
.tone-blue .note,.tone-tomato .note{color:var(--yellow)}
.tone-yellow .note{color:var(--ink)}
.note svg{width:40px;height:26px;flex:none;margin-top:-6px;overflow:visible}

/* Photos. Photo rules in CLAUDE.md: the dog's whole face or none of it; the pointer label sits on the paper
   beside the photo and its arrow ends on the dog; img keeps height:auto. */
.arch{position:relative;margin:0;width:100%;max-width:380px;aspect-ratio:4/5;border-radius:50% 50% 26px 26px / 40% 40% 26px 26px;overflow:hidden;background:var(--sage-l);box-shadow:var(--shadow)}
.arch picture,.arch img{display:block;width:100%;height:100%}
.arch img{object-fit:cover}
.polaroid{background:#fff;padding:12px 12px 0;box-shadow:0 1px 2px rgba(46,49,5,.16),var(--shadow);transform:rotate(2deg);position:relative;width:100%;max-width:340px;transition:transform .5s var(--spring)}
.polaroid picture,.polaroid img{display:block;width:100%;height:auto}
.polaroid img{aspect-ratio:4/5;object-fit:cover}
.polaroid::before,.polaroid::after{content:"";position:absolute;top:-11px;width:min(86px,26%);aspect-ratio:86/24;background:var(--tape);z-index:1}
.polaroid::before{left:14px;transform:rotate(-7deg)}
.polaroid::after{right:14px;transform:rotate(6deg);background:rgba(184,188,127,.85)}
.polaroid .cap{display:block;padding:12px 4px 14px;font:500 1rem/1.2 var(--f-hand);color:var(--ink)}
.polaroid:hover{transform:rotate(-1deg) scale(1.03)}
.ph{position:relative}
.pointer{position:absolute;z-index:3;left:var(--x);top:var(--y);width:0;height:0;font:500 var(--pt,1.05rem)/1.2 var(--f-hand);color:var(--pen)}
.pointer svg{position:absolute;left:-.25em;top:0;width:3.9em;height:2.6em;translate:0 -50%;overflow:visible}
.pointer .halo{stroke:#fff;stroke-width:5}
.pointer .lab{position:absolute;left:4em;top:-1.6em;white-space:nowrap;transform:rotate(-3deg);transform-origin:left top}

/* Stickers: a spinning ring of words on a scalloped badge (decorative; the page says the same thing) */
.sticker{position:absolute;width:var(--s,132px);aspect-ratio:1;display:grid;place-items:center;z-index:2;pointer-events:none}
.sticker > svg{position:absolute;inset:0;width:100%;height:100%}
.sticker .flower{--area:var(--yellow);filter:drop-shadow(0 10px 14px rgba(46,49,5,.22))}
.sticker .ring{font:700 9.6px/1 var(--f-mono);letter-spacing:.02em;text-transform:uppercase;fill:var(--ink)}
.sticker-c{position:relative;width:34%;aspect-ratio:1;display:grid;place-items:center;color:var(--tomato)}
.sticker-c svg{width:100%;height:100%}
.sticker.blue .flower{--area:var(--blue)}
.sticker.blue .ring{fill:#fff}
.sticker.blue .sticker-c{color:var(--yellow)}

/* Home hero */
.hero{position:relative;overflow-x:clip}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,96px)}
.hero h1:not(.display){display:grid;gap:22px}
.hero-copy > .eyebrow{margin-bottom:20px}
.hero .eyebrow{display:block;color:var(--tomato-d)}
.hero .lede{margin-top:26px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
.hero .note{margin-top:30px}
.hero-art{position:relative;display:flex;justify-content:center;padding:36px 0 36px}
.hero-art .bloom{position:absolute;width:min(470px,108%);aspect-ratio:1;left:50%;top:50%;translate:-44% -52%;--area:var(--yellow);z-index:-1}
.hero-art .arch{z-index:1}
.hero-art .sticker{left:max(0px,calc(50% - 250px));bottom:4px;--s:clamp(108px,12vw,140px)}
.hero-art .ph{width:100%;max-width:380px}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .hero-art{justify-content:flex-start;padding:24px 0 24px 8px}
  .hero-art .arch,.hero-art .ph{max-width:320px}
  .hero-art .bloom{width:400px;left:170px}
  .hero-art .sticker{left:auto;right:max(0px,calc(100% - 420px));bottom:0}
}
@media (max-width:520px){.hero-art .arch,.hero-art .ph{max-width:250px}.hero-art .bloom{width:310px;left:130px}.hero-art .sticker{right:0;--s:104px}}
/* About hero: room for the pointer label beside the photo */
.hero-art.with-pointer{padding-right:120px}
.hero-art.with-pointer .bloom{translate:-72% -60%;width:min(420px,100%)}
@media (max-width:420px){.hero-art.with-pointer{padding-right:96px}.hero-art .pointer{--pt:.92rem}}

/* Marquee: the areas of focus, rolling past (decorative; the cards below are the real links) */
.marquee{background:var(--yellow);color:var(--ink);overflow:hidden;transform:rotate(-1.2deg);margin:0 -12px;padding:14px 0;border-block:2px solid var(--ink)}
.marquee-track{display:flex;width:max-content}
.marquee-group{display:flex;align-items:center;gap:28px;padding-right:28px;font:italic 400 clamp(1.4rem,2.6vw,2.1rem)/1 var(--f-head);white-space:nowrap}
.marquee-group .flower{width:.8em;height:.8em;--area:var(--tomato);flex:none}
.marquee-wrap{overflow-x:clip;padding-block:18px}

/* Inner page header */
.page-head{position:relative}
.page-head .wrap{padding-block:clamp(36px,6vw,80px) clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(24px,5vw,72px);align-items:center}
.page-head .ph-copy{display:grid;gap:18px;min-width:0}
.page-head .lede{margin-top:2px}
.page-head .eyebrow{color:var(--tomato-d)}
.page-head .actions{margin-top:8px}
.ph-art{position:relative;width:clamp(150px,20vw,250px);aspect-ratio:1;display:grid;place-items:center}
.ph-art .flower{position:absolute;inset:0;width:100%;height:100%}
.ph-art .ph-ico{position:relative;width:34%;aspect-ratio:1;color:var(--ink)}
.ph-art .ph-ico svg{width:100%;height:100%}
.area-pregnancy .ph-art .ph-ico,.area-fertility .ph-art .ph-ico{color:#fff}
@media (max-width:760px){.page-head .wrap{grid-template-columns:minmax(0,1fr)}.ph-art{display:none}}
.crumbs{font:600 .78rem/1.45 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--tomato-d)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin-inline:6px;color:var(--slate)}

/* Sections */
.section{padding-block:clamp(40px,6vw,80px);border-top:1px solid var(--line)}
.section.flush{border-top:0;padding-top:0}
.section-head{display:grid;gap:10px;margin-bottom:clamp(20px,3vw,32px);max-width:64ch}
.section-head p{color:var(--text-2)}
.grid2,.grid3,.grid4{display:grid;gap:18px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid3,.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0;box-shadow:var(--lift)}
.card h3,.card .h3{font:500 1.3rem/1.2 var(--f-head);letter-spacing:-.01em}
.card p,.card li{font-size:.98rem;line-height:1.55;color:var(--ink-2)}
a.card{text-decoration:none;color:var(--ink);transition:transform .45s var(--spring),box-shadow .45s var(--ease-out),border-color .3s}
a.card:hover{color:var(--ink);transform:translateY(-6px) rotate(-.6deg);border-color:var(--line-2);box-shadow:0 2px 3px rgba(46,49,5,.06),0 28px 40px -28px rgba(46,49,5,.6)}
a.card:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
a.card:hover h3,a.card:hover h2,a.card:hover h4{text-decoration:underline;text-decoration-color:var(--tomato);text-decoration-thickness:2px;text-underline-offset:4px}
.card .go{font-weight:700;font-size:.92rem;color:var(--ink);margin-top:2px;display:inline-flex;align-items:center;gap:6px}
.card .go::after{content:"→";content:"→" / "";display:inline-block;color:var(--tomato);transition:transform .35s var(--spring)}
a.card:hover .go::after{transform:translateX(5px)}
.card .meta{font:600 .76rem/1.45 var(--f-mono);color:var(--slate);display:flex;align-items:center;gap:8px}
.card-ico{width:48px;height:48px;border-radius:50%;background:var(--sage-l);display:grid;place-items:center;color:var(--ink)}
.card-ico svg{width:26px;height:26px}

/* Areas of focus: the three brights, big. The user liked this hover; it sets the tone for the rest. */
.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:900px){.focus-grid{grid-template-columns:minmax(0,1fr)}}
.focus-card{--fc:var(--card);position:relative;overflow:hidden;isolation:isolate;display:grid;gap:12px;align-content:start;min-height:340px;padding:28px 26px 84px;border-radius:var(--radius);background:var(--fc);color:var(--fg);text-decoration:none;transition:transform .5s var(--spring),box-shadow .5s var(--ease-out)}
.focus-card.tone-tomato{--fc:var(--tomato)}
.focus-card.tone-yellow{--fc:var(--yellow)}
.focus-card.tone-blue{--fc:var(--blue)}
.focus-card .lbl{color:var(--eyebrow-c)}
.focus-card h3{font:430 clamp(1.7rem,2.6vw,2.2rem)/1.05 var(--f-head);letter-spacing:-.02em;color:var(--fg)}
.focus-card p{font-size:1rem;line-height:1.55;color:var(--fg-2);max-width:34ch}
.focus-card .badge{position:relative;width:64px;height:64px;display:grid;place-items:center;margin-bottom:6px}
.focus-card .badge .flower{position:absolute;inset:0;width:100%;height:100%;--area:var(--card);transition:transform .9s var(--spring)}
.focus-card.tone-yellow .badge .flower{--area:var(--card)}
.focus-card .badge svg.ico{position:relative;width:30px;height:30px;color:var(--ink);transition:transform .6s var(--spring)}
.focus-card .go-btn{position:absolute;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);font-size:1.3rem;transition:transform .5s var(--spring),background-color .3s}
.focus-card .go-btn span{display:block;transition:transform .5s var(--spring)}
.focus-card .ghost{position:absolute;right:-60px;bottom:-70px;width:220px;height:220px;z-index:-1;opacity:.16;--area:var(--card);transition:transform 1.2s var(--ease-out)}
.focus-card.tone-yellow .ghost{--area:#fff;opacity:.45}
.focus-card:hover{color:var(--fg);transform:translateY(-10px) rotate(-1.2deg);box-shadow:0 36px 50px -34px rgba(46,49,5,.75)}
.focus-card:nth-child(2):hover{transform:translateY(-10px) rotate(1deg)}
.focus-card:hover .badge .flower{transform:rotate(100deg) scale(1.08)}
.focus-card:hover .badge svg.ico{transform:scale(1.12) rotate(-8deg)}
.focus-card:hover .go-btn{transform:scale(1.1);background:var(--ink);color:var(--card)}
.focus-card:hover .go-btn span{transform:rotate(-45deg)}
.focus-card:hover .ghost{transform:rotate(-40deg) scale(1.15)}

/* Numbered steps */
.steps{list-style:none;padding:0;counter-reset:s;display:grid;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 16px;padding:18px 0;border-bottom:1px solid var(--line);margin:0}
.steps li::before{content:counter(s);grid-row:span 2;font:italic 500 2rem/1 var(--f-head);color:var(--tomato)}
.steps b{font:500 1.25rem/1.25 var(--f-head)}
.steps span{color:var(--ink-2);font-size:1rem}
.steps.cards{border:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.steps.cards,.steps.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps.cards,.steps.cards.three{grid-template-columns:minmax(0,1fr)}}
.steps.cards li{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;background:var(--surface);color:var(--ink);border:0;border-radius:22px;padding:24px 22px;box-shadow:var(--lift);position:relative;transition:transform .45s var(--spring)}
.steps.cards li:hover{transform:translateY(-4px)}
.steps.cards li::before{grid-row:auto;font:italic 400 3.4rem/.9 var(--f-head);color:var(--tomato);margin-bottom:6px;letter-spacing:-.04em}

/* Reading layout: a text column and a margin column on wide screens */
.reading{display:grid;grid-template-columns:minmax(0,68ch) minmax(0,1fr);gap:0 56px}
.reading > *{grid-column:1}
.reading > .side{grid-column:2;grid-row:1 / span 20;align-self:start;position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:1060px){.reading{grid-template-columns:minmax(0,1fr)}.reading > .side{grid-column:1;grid-row:auto;position:static;max-width:68ch}}
.side{display:grid;gap:14px;font-size:.95rem;line-height:1.5;color:var(--text-2);border-left:2px solid var(--pen);padding-left:14px;min-width:0}
.side .lbl{color:var(--pen)}

/* Prose (pages and Notes) */
.prose{display:grid;gap:16px;max-width:68ch;min-width:0}
.prose > h2{font:430 var(--t-h2)/1.12 var(--f-head);letter-spacing:-.02em;margin-top:28px;text-wrap:balance}
.prose > h3{font:500 var(--t-h3)/1.2 var(--f-head);margin-top:16px;text-wrap:balance}
.prose > h4{font:700 1.05rem/1.3 var(--f-body);margin-top:8px}
.prose > :first-child{margin-top:0}
.prose blockquote{border-left:4px solid var(--sage);padding-left:16px;color:var(--text-2)}
.prose hr{border:0;border-top:2px dotted var(--line-2);margin:12px 0;width:100%}
.prose .fig{display:grid;gap:8px}
.prose .fig img{border-radius:18px;background:var(--sunk)}
.prose figcaption{font-size:var(--t-small);color:var(--slate)}
.prose .ext{font-size:.85em}
.margin-note{font:500 1.12rem/1.3 var(--f-hand);color:var(--pen);transform:rotate(-1.5deg);margin:4px 0}
.margin-note p{margin:0}
@media (min-width:1180px){
  .notebook .prose{display:block}
  .notebook .prose > * + *{margin-top:16px}
  .notebook .prose > h2{margin-top:52px}
  .notebook .prose > h3{margin-top:28px}
  .notebook .prose .margin-note{float:right;clear:right;width:220px;margin:-8px -280px 12px 0;position:relative}
}
.gentle-text{gap:22px}
.gentle-text p{line-height:1.7}

/* Notes: each ## section gets a numbered tomato stamp, so a long read is a run of short ones */
.notebook .prose{counter-reset:sec}
.notebook .prose > h2{counter-increment:sec;display:flex;align-items:flex-start;gap:14px;padding-top:24px;border-top:1px solid var(--line-2)}
.notebook .prose > h2::before{content:counter(sec);flex:none;width:42px;height:42px;margin-top:-2px;border-radius:50%;display:grid;place-items:center;font:italic 500 1.35rem/1 var(--f-head);color:#fff;background:var(--tomato)}
.notebook .prose.gentle-text > h2{border-top:1px solid var(--line)}
.notebook .prose.gentle-text > h2::before{background:var(--slate)}

/* Notes: pull quote. A guideline's or study's words (with a footnote), or a line from the note itself;
   never a patient, a review or another practitioner (CONO). */
.prose blockquote.pull{border:0;padding:30px 28px 24px 32px;background:var(--sage-l);border-radius:26px;color:var(--ink);position:relative;display:grid;gap:10px}
.prose blockquote.pull::before{content:"“";content:"“" / "";position:absolute;left:16px;top:-22px;font:italic 500 5rem/1 var(--f-head);color:var(--tomato)}
.prose blockquote.pull p{font:italic 400 clamp(1.3rem,2.3vw,1.6rem)/1.36 var(--f-head);letter-spacing:-.005em}
.prose blockquote.pull footer{font:600 .8rem/1.45 var(--f-mono);letter-spacing:.04em;color:var(--slate)}
.gentle-text blockquote.pull{background:var(--sunk)}
.gentle-text blockquote.pull::before{color:var(--slate)}

/* Notes: tip, key points and big-number boxes */
.box{border-radius:22px;padding:22px 24px;display:grid;gap:10px;min-width:0;background:var(--sage-l);color:var(--ink)}
.box > .lbl{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.box > .lbl::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tomato)}
.box p,.box li{font-size:1rem;line-height:1.58}
.box ul,.box ol{display:grid;gap:4px}
.box.points{background:var(--surface);border:1px solid var(--line-2)}
.box.points ul{list-style:none;padding:0}
.box.points li{position:relative;padding-left:26px;margin:0}
.box.points li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:12px;border-radius:4px;background:var(--blue);transform:rotate(12deg)}
.box.stat-box{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 22px;background:var(--yellow)}
.box.stat-box .big{font:430 clamp(2.4rem,5vw,3.4rem)/1 var(--f-head);letter-spacing:-.03em;color:var(--ink);grid-row:span 2}
@media (max-width:520px){.box.stat-box{grid-template-columns:minmax(0,1fr)}.box.stat-box .big{grid-row:auto}}
.gentle-text .box{background:var(--sunk)}
.gentle-text .box > .lbl::before,.gentle-text .box.points li::before{background:var(--slate)}

/* Evidence note ("Good question") and myth, corrected */
.ev{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0;box-shadow:var(--lift);transition:transform .45s var(--spring),box-shadow .45s}
.ev:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 2px 3px rgba(46,49,5,.06),0 24px 36px -26px rgba(46,49,5,.55)}
.ev p{font-size:1rem;line-height:1.58}
.ev-tag{font:600 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tomato-d);display:flex;align-items:center;gap:8px}
.ev-tag::before{content:"?";content:"?" / "";width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tomato);color:#fff;font:700 .82rem/1 var(--f-body);letter-spacing:0}
.ev-title{font:500 1.4rem/1.15 var(--f-head)!important;letter-spacing:-.01em}
.ev .mini{margin-top:4px}
.myth-label{font:600 1.15rem/1 var(--f-hand);color:var(--tomato-d)}
.myth s{text-decoration:line-through;text-decoration-color:var(--tomato);text-decoration-thickness:2.5px;color:var(--slate)}
.ev.myth{border:2px dashed var(--line-2)}

/* Sources, linked where they're named: a quieter underline than other links, and ↗ for "leaves the site" */
a.src{text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--link-c) 60%,transparent)}
a.src::after{content:"↗";content:"↗" / "";font-size:.72em;margin-left:2px;color:var(--link-c);vertical-align:.12em}
.tone-yellow a.src::after{color:var(--ink)}

/* Section boxes: each section is its own box, numbered like a chapter */
.sec{padding-block:clamp(8px,1.4vw,14px)}
.sec.plain{padding-block:clamp(44px,7vw,88px)}
.sec > .wrap{display:grid}
.box-in{background:var(--bg);color:var(--fg);border-radius:var(--radius);padding:clamp(24px,5vw,64px);display:grid;gap:20px;min-width:0;position:relative;overflow:hidden;isolation:isolate}
.tone-card .box-in{border:1px solid var(--line-2)}
.box-in.split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.box-in.split{grid-template-columns:minmax(0,1fr)}}
.box-in > .deco{position:absolute;z-index:-1;width:300px;height:300px;right:-110px;top:-120px;opacity:.5;pointer-events:none}
.tone-sage .box-in > .deco{--area:var(--card)}
.tone-card .box-in > .deco{--area:var(--sage-l)}
.tone-yellow .box-in > .deco{--area:#fff;opacity:.4}
.tone-blue .box-in > .deco{--area:#fff;opacity:.1}
.plain > .wrap.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px clamp(28px,5vw,64px);align-items:start}
@media (max-width:900px){.plain > .wrap.split{grid-template-columns:minmax(0,1fr)}}
.plain > .wrap{gap:22px}
.sec-main{display:grid;gap:14px;min-width:0}
.sec-main > p:not(.eyebrow):not(.kicker){color:var(--fg-2);max-width:62ch}
.kicker{display:flex;align-items:center;gap:12px}
.sec-num{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font:italic 500 1.4rem/1 var(--f-head);letter-spacing:0;text-transform:none}
.sec-body{display:grid;gap:16px;margin-top:4px;min-width:0;color:var(--fg)}
.sec-body > p,.sec-body > ul:not([role]){max-width:62ch}
.sec-body > ul:not([role]) li{margin-top:.35em}
.sec-aside{display:grid;gap:16px;min-width:0}
@media (min-width:901px){.sec-aside{padding-top:56px}}
.sec-gentle .box-in{background:var(--sunk);color:var(--ink)}
.sec-gentle .sec-body{max-width:68ch}
.sec-gentle .eyebrow{color:var(--slate)}
.sec + .band{padding-top:clamp(28px,5vw,56px)}

/* Key numbers under a page header */
.glance{padding-block:0 clamp(20px,3vw,28px)}
.stats{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.stat{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px 24px 22px;display:grid;gap:12px;align-content:start;box-shadow:var(--lift)}
.stat-fig{font:430 clamp(2.1rem,3.8vw,2.9rem)/1 var(--f-head);letter-spacing:-.03em;color:var(--ink);justify-self:start}
.stat-fig > span{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 92%,transparent 92%) no-repeat 0 0/100% 100%;padding:0 .04em}
.stat-txt{font-size:1rem;line-height:1.5;color:var(--ink-2)}
.stat-src{font-size:.84rem;line-height:1.4;color:var(--slate);padding-top:2px}
.stat .mini{margin-block:2px}

/* Ticked cards: "what a first visit looks at" */
.checks{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.checks li{margin:0;display:flex;gap:12px;align-items:flex-start;background:var(--surface);color:var(--ink);border-radius:16px;padding:15px 16px;font-size:1rem;line-height:1.48;box-shadow:var(--lift)}
.checks .tick{flex:none;width:24px;height:24px;color:var(--tomato);margin-top:0;overflow:visible}

/* Tip card */
.tip{background:var(--surface);color:var(--ink);border-radius:22px;padding:20px 22px;display:grid;gap:10px;align-content:start;min-width:0;box-shadow:var(--lift);position:relative}
.tip::before{content:"";position:absolute;left:22px;top:-9px;width:64px;height:18px;background:var(--tape);transform:rotate(-4deg)}
.tip .lbl{color:var(--tomato-d)}
.tip > p:not(.lbl):not(.note){font-size:1rem;line-height:1.55;color:var(--ink-2)}
.tip .note{margin-top:2px;color:var(--pen)}

/* Care team: you, the people you already see, and Dr. Leizl Yance, ND */
.team{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px}
.team li{margin:0;position:relative;background:var(--surface);color:var(--ink);border:2px solid var(--line-2);border-radius:999px;padding:9px 18px;font-weight:700;font-size:.97rem;line-height:1.3}
.team li + li::before{content:"+";content:"+" / "";position:absolute;left:-22px;top:50%;translate:0 -52%;font:700 1.15rem/1 var(--f-mono);color:var(--accent)}
.team .you{background:var(--ink);border-color:var(--ink);color:var(--card)}
.team .me{background:var(--tomato);border-color:var(--tomato);color:#fff}
.tone-blue .team .you{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

/* Lab cards: what each test looks at */
.labs{list-style:none;padding:0;display:grid;gap:10px;max-width:62ch}
.labs li{margin:0;background:var(--surface);color:var(--ink);border-radius:18px;padding:16px 18px;display:grid;gap:6px;align-content:start;box-shadow:var(--lift)}
.labs b{display:flex;align-items:center;gap:10px;font:500 1.2rem/1.2 var(--f-head)}
.labs b::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--blue);background:radial-gradient(var(--blue) 0 3px,transparent 3.5px)}
.labs span{font-size:.97rem;line-height:1.5;color:var(--ink-2)}

/* Two visits, side by side: you, and your partner */
.two-visits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.visit-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;min-width:0}
.visit-card .top{background:var(--vt,var(--tomato));color:#fff;font:600 .74rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 14px}
.visit-card .in{padding:12px 14px 14px;display:grid;gap:4px}
.visit-card b{font:500 1.25rem/1.2 var(--f-head)}
.visit-card span{font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.visit-card.partner{--vt:var(--blue)}
@media (max-width:420px){.two-visits{grid-template-columns:minmax(0,1fr)}}

/* A vertical timeline: "when to reach out" */
.tline{list-style:none;padding:0;display:grid;gap:0;position:relative}
.tline li{margin:0;display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;position:relative;padding-bottom:18px}
.tline li:last-child{padding-bottom:0}
.tline li::before{content:"";grid-row:span 2;width:18px;height:18px;margin:4px 0 0 5px;border-radius:50%;background:var(--surface);border:3px solid var(--sage);position:relative;z-index:1}
.tline li::after{content:"";position:absolute;left:13px;top:22px;bottom:-4px;width:3px;background:var(--sage);border-radius:2px;transform-origin:top}
.tline li:last-child::after{display:none}
.tline li.now::before{width:26px;height:26px;margin:0 0 0 1px;background:var(--blue);border-color:var(--blue)}
.tline b{font:500 1.2rem/1.25 var(--f-head)}
.tline .now b{font-size:1.4rem;color:var(--blue-d)}
.tline span{font-size:.95rem;line-height:1.5;color:var(--ink-2)}

/* The quiet intro-call line */
.intro-note{font-size:.97rem;line-height:1.55;color:var(--fg-2);max-width:62ch}
.intro-note a{font-weight:700}

/* Story photo beside a section */
.story-photo{display:flex;justify-content:center;padding:16px 0}
@media (max-width:900px){.story-photo{justify-content:flex-start;padding-left:8px}}

/* Booking band: ends every page in tomato, Condesa's last block */
.band{padding-block:clamp(28px,5vw,56px) clamp(48px,7vw,88px)}
.band-in{background:var(--bg);color:var(--fg);border-radius:var(--radius);padding:clamp(30px,6vw,72px);display:grid;gap:14px;position:relative;overflow:hidden;isolation:isolate}
.band-in > *{max-width:60ch}
.band-in > .bloom{position:absolute;z-index:-1;max-width:none;width:clamp(260px,34vw,440px);right:-90px;bottom:-130px;--area:var(--orange);opacity:.9}
.band-in .sticker{position:absolute;right:clamp(20px,6vw,90px);top:clamp(20px,4vw,48px);--s:clamp(104px,11vw,136px)}
.band-t{font:400 clamp(2.6rem,7vw,5.2rem)/.98 var(--f-head);letter-spacing:-.035em;text-wrap:balance}
.band p{color:var(--fg-2)}
.band .actions{margin-top:10px}
.band .note{margin-top:6px}
.band.gentle-band .band-in{background:var(--sunk);color:var(--ink);--fg-2:var(--ink-2);--link-c:var(--tomato)}
@media (max-width:760px){.band-in{padding-top:118px}.band-in .sticker{right:18px;top:16px;--s:96px}}

/* FAQ */
.faq{border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);max-width:76ch}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:500 1.25rem/1 var(--f-body);color:var(--accent-fg);background:var(--accent);transition:transform .4s var(--spring)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .a{padding:0 0 20px;color:var(--fg-2);display:grid;gap:10px;max-width:68ch}

/* Tables */
.tbl{overflow-x:auto;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:var(--lift)}
table{border-collapse:collapse;width:100%;font-size:.97rem;line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{font:600 .74rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);background:var(--sage-l);white-space:nowrap}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
td small{display:block;color:var(--slate);font-size:.86rem;margin-top:2px}

/* Gentle block: no highlighter, handwriting, red pen or dog */
.gentle{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:12px;max-width:68ch}
.gentle .t{font:500 1.45rem/1.15 var(--f-head)}
.gentle p{color:var(--ink-2);line-height:1.7}
.gentle a{text-decoration-color:var(--slate)}

/* Notes */
.notes-list{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.notes-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.notes-list{grid-template-columns:minmax(0,1fr)}}
.note-card .meta::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--dot,var(--sage-d));flex:none}
.note-card[data-topic=fertility]{--dot:var(--orange)}
.note-card[data-topic=hormonal-health]{--dot:var(--yellow)}
.note-card[data-topic=pregnancy-postpartum]{--dot:var(--blue)}
.note-card h2,.note-card h3,.note-card h4{font:500 1.35rem/1.18 var(--f-head)}
.note-short{font-size:clamp(1.1rem,1.8vw,1.28rem);line-height:1.6;max-width:62ch;display:grid;gap:12px;background:var(--yellow);border-radius:24px;padding:24px 26px}
.note-short.gentle-text{background:var(--sunk)}
.page-head .wrap.note-head{grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.note-head .h1{max-width:22ch}
.byline{font:500 .82rem/1.5 var(--f-mono);color:var(--slate)}
.note-part{display:grid;gap:14px;margin-top:12px}
.note-part h2{font:430 var(--t-h2)/1.12 var(--f-head);letter-spacing:-.02em}
.updated{font:500 .82rem/1.5 var(--f-mono);color:var(--slate);border-left:3px solid var(--pen);padding-left:12px}
.article{display:grid;gap:28px}
.article .fig.cover img{width:100%}
.disclaimer{font-size:.88rem;color:var(--slate);max-width:72ch}
.topic-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.topic-filter a{font:600 .78rem/1 var(--f-mono);letter-spacing:.04em;text-decoration:none;border:2px solid var(--line-2);border-radius:999px;padding:10px 15px;color:var(--text-2);background:var(--surface);transition:border-color .2s,transform .3s var(--spring)}
.topic-filter a:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.topic-filter a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.preview-bar{background:var(--hl);border-bottom:1px solid #E0B530;font-size:.95rem}
.preview-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding-block:10px}
.read-progress{position:fixed;left:0;top:0;height:4px;width:100%;background:var(--tomato);transform-origin:0 50%;transform:scaleX(0);z-index:40;pointer-events:none;display:none}

/* About */
.dog-photo{max-width:300px;transform:rotate(-2deg)}
.dog-photo:hover{transform:rotate(1.5deg) scale(1.03)}
.dog-photo img{aspect-ratio:540/428}   /* the whole face, never cropped to 4:5 */
.facts{display:grid;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.facts > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.facts dt{font:600 .74rem/1.6 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--eyebrow-c)}
@media (max-width:520px){.facts > div{grid-template-columns:minmax(0,1fr);gap:4px}}
.hours{display:grid;gap:2px}
.hours span{display:flex;flex-wrap:wrap;gap:0 8px}
.hours b{min-width:6.6em}

/* Footer: sage, with Cedar's giant wordmark along the bottom */
.site-footer{background:var(--sage-l);margin-top:0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:28px 40px;padding-block:56px 28px}
@media (max-width:980px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-grid h2{font:600 .74rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tomato-d);margin-bottom:12px}
.foot-grid p,.foot-grid li{font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.foot-grid ul{list-style:none;padding:0}
.foot-grid li+li{margin-top:6px}
.foot-grid a{text-decoration-thickness:1.5px}
.logo-full{display:grid;gap:8px}
.logo-full .name{font:500 1.55rem/1 var(--f-head);letter-spacing:-.012em;color:var(--ink)}
.logo-full .fn{font:600 .74rem/1.4 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--tomato-d)}
.foot-base{border-top:1px solid var(--line-2);padding-block:18px 22px;font:500 .78rem/1.6 var(--f-mono);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between}
.foot-base a{text-decoration-thickness:1px}
.giant{display:flex;align-items:flex-end;gap:.08em;font:400 clamp(3.4rem,14.6vw,13.5rem)/.8 var(--f-head);letter-spacing:-.045em;color:var(--ink);white-space:nowrap;padding-bottom:.06em;margin-bottom:-.1em}
.giant .flower{width:.62em;height:.62em;flex:none;--area:var(--tomato);margin-bottom:.12em;margin-left:.04em}

/* 404 */
.lost{padding-block:clamp(48px,8vw,110px)}

/* ---------- Charts (src/charts.js) ----------
   Small, plainly labelled pictures of the numbers on each page. Every value is also written out in text
   (labels, or a table under the bars), so colour is never the only way to read one. One series per chart,
   in cobalt (the ballpoint), with sage for "off". Thin bars with a 4 px rounded end; recessive axes. */
.viz{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:22px;padding:20px 20px 18px;display:grid;gap:14px;min-width:0;box-shadow:var(--lift);container-type:inline-size}
.viz-t{font:700 1rem/1.35 var(--f-body);color:var(--ink)}
.viz-t small{display:block;font-weight:400;font-size:.88rem;color:var(--ink-2);margin-top:2px}
.viz-src{font-size:.82rem;line-height:1.45;color:var(--slate)}
.viz-note{font:500 1.05rem/1.25 var(--f-hand);color:var(--pen);transform:rotate(-1.2deg)}

/* Horizontal bars, as a table: the label, then the bar with its value at the tip */
.bars{width:100%;border-collapse:collapse;font-size:.92rem}
.bars caption{text-align:left}
.bars tr{display:grid;grid-template-columns:minmax(6.5em,max-content) minmax(0,1fr);align-items:center;gap:10px;padding:4px 0}
.bars th,.bars td{padding:0;border:0;background:none;text-transform:none;letter-spacing:0;font:inherit;color:var(--ink-2);white-space:normal}
.bars th{font-weight:600;color:var(--ink);line-height:1.25}
.bars td{display:flex;align-items:center;gap:8px;min-width:0}
.bars .bar{flex:none;height:20px;width:calc((100% - 4.2em) * var(--f));min-width:3px;background:var(--blue);border-radius:0 5px 5px 0;transform-origin:left center;transition:filter .12s}
.bars tr:hover .bar{filter:brightness(.9)}
.bars .val{flex:none;font-weight:700;color:var(--ink);font-variant-numeric:normal}
.bars .bar.soft{background:var(--sage)}
@container (max-width:340px){
  .bars tr{grid-template-columns:minmax(0,1fr);gap:4px;padding:5px 0}
}

/* A segmented bar on a number line: ranges (cycle length, weeks of pregnancy, blood sugar cut-offs) */
.seg{display:grid;gap:6px}
.seg-row{display:grid;gap:6px}
.seg-name{font-weight:700;font-size:.92rem;color:var(--ink)}
.seg-bar{position:relative;height:22px;display:flex;gap:2px}
.seg-bar > span{height:100%;background:var(--sage-l);flex:0 1 0;min-width:2px}   /* flex-grow is set inline: the range's width */
.seg-bar > span:first-child{border-radius:6px 0 0 6px}
.seg-bar > span:last-child{border-radius:0 6px 6px 0}
.seg-bar > span.on{background:var(--blue)}
.seg-bar > span.hi{background:var(--tomato)}
.seg-bar > span.mid{background:var(--yellow)}
.seg-bar > span.lo{background:var(--sage)}
.seg-axis{position:relative;height:1.3em;font:600 .78rem/1.3 var(--f-mono);color:var(--slate)}
.seg-axis > span{position:absolute;left:var(--at);translate:-50% 0;white-space:nowrap}
.seg-axis > span.first{translate:0 0}
.seg-axis > span.last{translate:-100% 0}
.seg-pin{position:absolute;top:-7px;bottom:-7px;left:var(--at);width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
.seg-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.86rem;color:var(--ink-2);list-style:none;padding:0}
.seg-legend li{margin:0;display:flex;align-items:center;gap:6px}
.seg-legend i{flex:none;width:14px;height:10px;border-radius:3px;background:var(--blue);display:inline-block}
.seg-legend i.soft{background:var(--sage-l);box-shadow:inset 0 0 0 1px var(--sage)}
.seg-legend i.hi{background:var(--tomato)}
.seg-legend i.mid{background:var(--yellow)}
.seg-legend i.lo{background:var(--sage)}
.seg-legend i.pin{width:3px;height:14px;background:var(--ink)}

/* Dots and people: "1 in 6", "23 in 100" */
.dots{display:grid;grid-template-columns:repeat(var(--cols),var(--d,14px));gap:var(--g,4px);width:max-content;max-width:100%}
.dots i{width:var(--d,14px);height:var(--d,14px);border-radius:50%;background:var(--sage-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sage) 70%,transparent);display:block}
.dots i.on{background:var(--blue);box-shadow:none}
.dots i.maybe{background:repeating-linear-gradient(45deg,var(--blue) 0 2px,var(--sage-l) 2px 4.5px);box-shadow:none}
.dots.people{--d:22px;--g:6px}
.dots.people i{background:none;box-shadow:none;border-radius:0;height:30px;color:var(--sage)}
.dots.people i.on{color:var(--blue)}
.dots.people svg{display:block;width:100%;height:100%}
.dots.small{--d:10px;--g:3px}
.dots-key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.86rem;color:var(--ink-2);list-style:none;padding:0}
.dots-key li{margin:0;display:flex;align-items:center;gap:6px}
.dots-key i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--blue);display:inline-block}
.dots-key i.maybe{background:repeating-linear-gradient(45deg,var(--blue) 0 2px,var(--sage-l) 2px 4.5px)}
.dots-key i.off{background:var(--sage-l);box-shadow:inset 0 0 0 1px var(--sage)}

/* A strip of days: the fertile window */
.strip,.colchart{display:grid;gap:6px}
.days{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
.days > span{height:30px;border-radius:7px;background:var(--sage-l);display:grid;place-items:center;font:700 .74rem/1 var(--f-mono);color:var(--ink-2)}
.days > span.on{background:var(--blue);color:#fff}
.days > span.ov{background:var(--tomato);color:#fff;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--tomato)}
.days-axis{display:flex;justify-content:space-between;gap:8px;font:600 .74rem/1.3 var(--f-mono);color:var(--slate)}

/* Columns: chance of conception by day */
.cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;align-items:end;height:160px;border-bottom:1px solid var(--line-2);padding-top:22px}
.cols > span{position:relative;height:calc(100% * var(--f));min-height:2px;background:var(--blue);border-radius:5px 5px 0 0;max-width:36px;justify-self:center;width:100%;transform-origin:bottom center}
.cols > span:last-child{background:var(--tomato)}
.cols > span b{position:absolute;bottom:100%;left:50%;translate:-50% -4px;font:700 .78rem/1 var(--f-body);color:var(--ink);white-space:nowrap}
.cols > span.zero{background:none}
.cols > span.zero b{color:var(--slate);font-weight:600}
.cols-axis{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px;font:600 .72rem/1.25 var(--f-mono);color:var(--slate);text-align:center}

/* "Any two of three" */
.crit{list-style:none;padding:0;display:grid;gap:8px;counter-reset:c}
.crit li{margin:0;counter-increment:c;display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;font-size:.95rem;line-height:1.45;color:var(--ink-2)}
.crit li::before{content:counter(c);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font:700 .9rem/1 var(--f-body)}
.crit-rule{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.crit-rule .dots{--d:16px}

/* Mini pictures in cards (decorative: the card's words say the same thing) */
.mini{display:block}
.mini .seg-bar{height:14px}
.mini .days > span{height:22px;font-size:.66rem}

/* ---------- Motion ----------
   Quirky, but calm: things arrive, they don't bounce around. Three kinds:
   1. Arrivals. site.js gives below-the-fold blocks .rv and adds .in when they scroll into view (staggered with
      --rv-delay). Charts then draw themselves: bars grow, dots fill in, ranges sweep, the fertile window lights up
      day by day, and the highlighter swipes.
   2. Ambient. Stickers turn slowly, the marquee rolls, the hero's flower drifts.
   3. Response. Cards lift and tilt, badges spin, arrows nudge, the nav squiggle draws itself.
   None of it runs when the visitor prefers reduced motion. */
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:scale(0) rotate(-120deg)}100%{transform:none}}
@keyframes bloom{from{transform:scale(.6) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
@keyframes unveil{from{clip-path:inset(100% 0 0 0 round 200px 200px 26px 26px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes wave{to{background-position:14px 0}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg)}}
@keyframes progress{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:no-preference){
  /* Page load: the hero arrives in order, then the highlighter swipes */
  .hero-copy > :not(h1),.hero h1:not(.display) > *,.hero h1.display{animation:rise .9s var(--ease-out) both}
  .hero h1.display{animation-delay:.1s}
  .hero h1:not(.display) > :nth-child(1){animation-delay:.05s}
  .hero h1:not(.display) > :nth-child(2){animation-delay:.15s}
  .hero-copy > .lede{animation-delay:.3s}
  .hero-copy > .actions{animation-delay:.42s}
  .hero-copy > .note{animation-delay:.6s}
  .hero-art .arch{animation:unveil 1.2s var(--ease-out) .2s both}
  .hero-art .bloom{animation:bloom 1.4s var(--ease-out) .1s both}
  .hero-art .bloom svg{animation:spin 80s linear infinite}
  .hero-art .sticker{animation:pop .9s var(--spring) .8s both}
  .page-head .ph-copy > *{animation:rise .8s var(--ease-out) both}
  .page-head .ph-copy > :nth-child(2){animation-delay:.08s}
  .page-head .ph-copy > :nth-child(3){animation-delay:.16s}
  .page-head .ph-copy > :nth-child(4){animation-delay:.24s}
  .ph-art{animation:bloom 1.2s var(--ease-out) .15s both}
  .ph-art .flower{animation:spin 70s linear infinite}

  /* Ambient */
  .sticker .ring{animation:spin 22s linear infinite}
  .marquee-track{animation:marquee 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-group .flower{animation:spin 8s linear infinite}
  .nav a:hover::after{animation:wave .6s linear infinite}
  .band-in > .bloom svg{animation:spin 90s linear infinite reverse}
  .polaroid:hover + .pointer .lab,.ph:hover .pointer .lab{animation:wiggle .6s ease-in-out 2}

  /* Arrivals: only what site.js marked, so nothing is hidden without it */
  /* :where() keeps these weak, so a card's own :hover lift still wins. site.js removes .rv once the
     arrival is over, and every arrival ends on the element's normal look. */
  .rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-out) var(--rv-delay,0ms),transform .9s var(--ease-out) var(--rv-delay,0ms)}
  .rv:where(.in){opacity:1;transform:none}

  .rv .sec-num{transform:scale(0) rotate(-120deg);transition:transform .8s var(--spring) calc(var(--rv-delay,0ms) + .25s)}
  .rv.in .sec-num{transform:none}
  .rv mark,mark.rv-m{background-size:0 100%;transition:background-size .8s var(--ease-out) calc(var(--rv-delay,0ms) + .45s)}
  .rv.in mark,mark.rv-m.in{background-size:100% 100%}
  .rv .stat-fig > span{background-size:0 100%;transition:background-size .8s var(--ease-out) calc(var(--rv-delay,0ms) + .35s)}
  .rv.in .stat-fig > span{background-size:100% 100%}
  .rv .note path,.rv .pointer path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease-out) calc(var(--rv-delay,0ms) + .5s)}
  .rv.in .note path,.rv.in .pointer path{stroke-dashoffset:0}
  .rv .tick path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease-out) calc(var(--rv-delay,0ms) + .3s)}
  .rv.in .tick path{stroke-dashoffset:0}
  .rv .dog-photo{transform:rotate(-10deg) translateY(30px);transition:transform 1s var(--spring) calc(var(--rv-delay,0ms) + .2s)}
  .rv.in .dog-photo{transform:rotate(-2deg)}

  /* Charts draw themselves */
  .rv .bars .bar{transform:scaleX(0);transition:transform 1s var(--ease-out) calc(var(--rv-delay,0ms) + .3s + var(--i,0) * 120ms),filter .12s}
  .rv.in .bars .bar{transform:none}
  .rv .bars .val{opacity:0;transition:opacity .4s calc(var(--rv-delay,0ms) + .9s + var(--i,0) * 120ms)}
  .rv.in .bars .val{opacity:1}
  .rv .cols > span{transform:scaleY(0);transition:transform .9s var(--ease-out) calc(var(--rv-delay,0ms) + .25s + var(--i,0) * 90ms)}
  .rv.in .cols > span{transform:none}
  .rv .cols > span b{opacity:0;transition:opacity .3s calc(var(--rv-delay,0ms) + .9s + var(--i,0) * 90ms)}
  .rv.in .cols > span b{opacity:1}
  .rv .dots i.on,.rv .dots i.maybe{transform:scale(0);transition:transform .5s var(--spring) calc(var(--rv-delay,0ms) + .3s + var(--i,0) * 22ms)}
  .rv.in .dots i.on,.rv.in .dots i.maybe{transform:none}
  .rv .seg-bar{clip-path:inset(0 100% 0 0 round 6px);transition:clip-path 1.1s var(--ease-out) calc(var(--rv-delay,0ms) + .3s)}
  .rv.in .seg-bar{clip-path:inset(-10px -4px -10px 0)}
  .rv .days > span.on,.rv .days > span.ov{background:var(--sage-l);color:var(--ink-2);box-shadow:none;transition:background-color .35s calc(var(--rv-delay,0ms) + .3s + var(--i,0) * 110ms),color .35s calc(var(--rv-delay,0ms) + .3s + var(--i,0) * 110ms),box-shadow .35s calc(var(--rv-delay,0ms) + .3s + var(--i,0) * 110ms)}
  .rv.in .days > span.on{background:var(--blue);color:#fff}
  .rv.in .days > span.ov{background:var(--tomato);color:#fff;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--tomato)}
  .rv .tline li::after{transform:scaleY(0);transition:transform .8s var(--ease-out) calc(var(--rv-delay,0ms) + .4s + var(--i,0) * 250ms)}
  .rv.in .tline li::after{transform:none}
  .rv .tline li::before{transform:scale(0);transition:transform .6s var(--spring) calc(var(--rv-delay,0ms) + .3s + var(--i,0) * 250ms)}
  .rv.in .tline li::before{transform:none}
  .rv .giant{transform:translateY(40%);transition:transform 1.2s var(--ease-out) .1s}
  .rv.in .giant{transform:none}

  /* FAQ answers open smoothly where the browser can animate to auto height */
  @supports (interpolate-size:allow-keywords){
    .faq{interpolate-size:allow-keywords}
    .faq details::details-content{height:0;overflow:clip;transition:height .45s var(--ease-out),content-visibility .45s allow-discrete}
    .faq details[open]::details-content{height:auto}
  }
  /* Notes: a red-pen reading line across the top, where scroll-driven animation is supported */
  @supports (animation-timeline:scroll()){
    .read-progress{display:block;animation:progress linear both;animation-timeline:scroll(root)}
  }
  /* Between pages: a soft cross-fade, header held still */
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(root){animation:.22s ease-in both fadeout}
  ::view-transition-new(root){animation:.4s var(--ease-out) both fadein}
}
@keyframes fadeout{to{opacity:0}}
@keyframes fadein{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-group[aria-hidden]{display:none}
  .marquee-group{flex-wrap:wrap;justify-content:center;white-space:normal;row-gap:10px;padding-inline:16px}
}

/* Windows contrast themes and other forced colours */
@media (forced-colors:active){
  mark,.hl{background:Mark;color:MarkText;forced-color-adjust:none}
  .btn{border:2px solid ButtonText}
  .polaroid::before,.polaroid::after,.hero-art .bloom,.band-in > .bloom,.box-in > .deco,.focus-card .ghost,.sticker,.tip::before{display:none}
  .team li,.stat,.checks li,.tip,.box-in,.card,.viz,.box,.focus-card,.band-in{border:1px solid CanvasText}
  .bars .bar,.seg-bar > span.on,.dots i.on,.cols > span,.days > span.on{forced-color-adjust:none;background:CanvasText}
}

@media print{
  .site-header,.band,.site-footer .foot-grid,.skip,.marquee-wrap,.giant,.read-progress{display:none!important}
  body{background:#fff}
  .reading{display:block}
  .box-in,.stat,.focus-card{background:#fff!important;color:#000!important;border:1px solid #ccc}
  .rv{opacity:1!important;transform:none!important}
}