/* Family Guides v2 base: reset, type, layout primitives, shared components. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--aqua-deep);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--coral-deep)}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0;color:var(--ink);font-variation-settings:"opsz" 96}
h1{font-size:clamp(38px,5.4vw,68px);line-height:1.02}
h2{font-size:clamp(28px,3.2vw,36px)}
h3{font-size:22px;font-weight:700;font-variation-settings:"opsz" 24}
p{margin:0 0 1em}
.em{font-style:italic;color:var(--coral)}
.wrap{width:min(var(--page),100% - 32px);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-sm);z-index:200}
.skip:focus{top:12px}

/* type helpers */
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--aqua-deep)}
.lead{font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.small{font-size:var(--fs-small);color:var(--ink-mute)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* buttons and pills */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r-pill);font-weight:700;font-size:16px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--coral);color:#fff!important}
.btn-primary:hover{background:var(--coral-deep)}
.btn-text{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--coral-deep)!important;text-decoration:none!important;white-space:nowrap}
.btn-text svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .16s}
.btn-text:hover svg{transform:translateX(2px)}
.btn-ink{background:transparent;color:var(--ink)!important;border-color:var(--ink)}
.btn-ink:hover{background:var(--ink);color:#fff!important}
.btn-text{padding:0;min-height:0;border-radius:0;color:var(--ink)!important;gap:6px}
.btn-text:hover{color:var(--coral-deep)!important;transform:none}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--rule);font-size:14.5px;font-weight:600;color:var(--ink)!important;text-decoration:none!important;white-space:nowrap}
.pill:hover,.pill.on{border-color:var(--aqua);color:var(--aqua-deep)!important}
.pill.on{background:var(--mint)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* sections and bands */
.sec{padding:56px 0}
.sec-tint{background:var(--paper-deep)}
.sec-paper{background:var(--paper-tint);background-image:url(../art/paper-texture.webp);background-size:512px;background-blend-mode:multiply}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.sec-h p{margin:6px 0 0;color:var(--ink-mute)}
@media (max-width:760px){.sec{padding:40px 0}}

/* heart */
.heart{all:unset;cursor:pointer;width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.9);color:var(--ink);box-shadow:var(--shadow-sm)}
.heart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.heart[aria-pressed=true]{color:var(--coral)}
.heart[aria-pressed=true] svg{fill:var(--coral)}

/* crumbs */
.crumbs{font-size:14px;color:var(--ink-mute)}
.crumbs a{color:var(--ink-mute)}
.crumbs span{color:var(--ink)}