.family-guide { --guide-navy: oklch(24% .088 260); --guide-red: oklch(54% .21 22); --guide-paper: oklch(98.5% .007 260); background: var(--guide-paper); color: var(--guide-navy); }
.guide-breadcrumb { display:flex; gap:12px; padding-block:24px; font-size:.85rem; flex-wrap:wrap; }
.guide-breadcrumb a, .guide-index > a { text-decoration:underline; text-underline-offset:4px; }
.guide-hero { background:oklch(95.5% .02 260); overflow:hidden; }
.guide-hero__grid { display:grid; grid-template-columns:1.25fr .75fr; align-items:center; gap:32px; }
.guide-hero__copy { padding-block:48px 56px; }
.guide-logo { width:220px; height:auto; margin-bottom:28px; }
.guide-kicker { display:block; font-size:.76rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; margin:0 0 12px; }
.family-guide h1 { font-size:clamp(2.8rem,5.7vw,5rem); line-height:1.02; margin:0 0 20px; }
.guide-intro { font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.5; max-width:44ch; }
.guide-hero__copy > p:not(.guide-kicker) { max-width:45ch; }
.guide-hero__image { margin:0; align-self:end; }
.guide-hero__image img { width:100%; height:auto; max-height:570px; object-fit:contain; object-position:bottom; mix-blend-mode:multiply; display:block; }
.guide-button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 22px; border-radius:12px; background:var(--guide-red); color:var(--guide-paper); font-weight:800; margin-top:16px; text-decoration:none; }
.guide-button:hover { background:var(--guide-navy); }
.guide-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(30px,6vw,90px); padding-block:64px 88px; }
.guide-nav nav { position:sticky; top:110px; }
.guide-nav a { display:block; padding:11px 0; font-size:.9rem; text-decoration:none; border-bottom:1px solid oklch(86% .025 260); }
.guide-nav a:hover { color:var(--guide-red); }
.guide-body { max-width:740px; }
.guide-body section { margin-bottom:52px; scroll-margin-top:110px; }
.guide-body section + section { border-top:1px solid oklch(84% .025 260); padding-top:40px; }
.family-guide h2 { font-size:clamp(1.9rem,3vw,2.65rem); line-height:1.12; margin:0 0 20px; }
.family-guide h3 { font-size:1.35rem; line-height:1.3; margin:25px 0 8px; }
.guide-body p, .guide-body li, .guide-body dd { line-height:1.75; }
.guide-body p { margin:0 0 16px; }
.guide-body .guide-kicker { margin-bottom:12px; }
.guide-dates { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 0 14px; margin:0 0 20px; border-block:2px solid var(--guide-navy); }
.guide-dates span { font-size:.85rem; font-weight:800; }
.guide-dates strong { display:block; font-family:'Baloo 2',sans-serif; font-size:2.2rem; line-height:1.35; }
.guide-dates p { font-size:.85rem; }
.guide-film { display:flex; gap:22px; align-items:center; padding:26px; background:var(--guide-navy); color:var(--guide-paper); border-radius:16px; margin-top:28px; text-decoration:none; }
.guide-film__play { display:grid; place-items:center; width:54px; height:54px; flex-shrink:0; border:1px solid; border-radius:50%; }
.guide-film strong { display:block; font-family:'Baloo 2',sans-serif; font-size:1.5rem; line-height:1.2; margin-bottom:10px; }
.guide-film .guide-kicker { color:oklch(86% .13 85); }
.guide-film:hover { background:oklch(32% .1 260); }
.guide-callout { background:oklch(95% .025 260); padding:24px 28px; border-radius:14px; margin:24px 0; }
.guide-callout h3 { margin-top:0; }
.guide-callout p:last-child { margin-bottom:0; }
.guide-checklist { margin:24px 0 0; }
.guide-checklist > div { padding:20px 0; border-bottom:1px solid oklch(86% .025 260); }
.guide-checklist dt { font-size:1.05rem; font-weight:800; margin-bottom:8px; }
.guide-checklist dd { margin:0; }
.guide-code { color:oklch(46% .19 22); overflow-wrap:anywhere; }
.guide-contact { background:oklch(94% .025 260); padding:32px!important; border:0!important; border-radius:18px; }
.guide-contact img { margin-bottom:25px; }
.guide-contact a { display:block; width:fit-content; min-height:44px; font-weight:800; overflow-wrap:anywhere; text-underline-offset:4px; }
.family-guide a:focus-visible { outline:3px solid oklch(50% .18 260); outline-offset:5px; }
.guide-index { padding-block:40px 100px; min-height:65vh; }
.guide-index > .guide-kicker { margin-top:44px; }
.guide-index__link { display:flex; gap:40px; align-items:center; padding:32px 0; border-block:1px solid oklch(84% .025 260); margin-top:44px; text-decoration:none; max-width:860px; }
.guide-index__link img { width:180px; }
.guide-index__link h2 { margin-bottom:10px; }
@media(max-width:760px) { .guide-hero__grid { grid-template-columns:1fr; gap:0; position:relative; } .guide-hero__copy { padding-block:30px; } .guide-hero__image { width:55%; margin-left:auto; margin-top:-12px; } .guide-hero__image img { max-height:260px; } .guide-logo { width:175px; margin-bottom:24px; } .guide-layout { grid-template-columns:1fr; gap:34px; padding-block:32px 48px; } .guide-nav nav { position:static; display:grid; grid-template-columns:1fr 1fr; column-gap:20px; } .guide-nav .guide-kicker { grid-column:1/-1; } .guide-nav a { font-size:.8rem; } .guide-body section { scroll-margin-top:95px; margin-bottom:36px; } .guide-dates { gap:14px; } .guide-dates strong { font-size:1.8rem; } .guide-film { padding:22px 18px; gap:16px; } .guide-callout { padding:22px; } .guide-contact { padding:24px!important; } .guide-index__link { flex-direction:column; align-items:start; gap:25px; } }
@media print { .site-header,.site-footer,.guide-nav,.guide-breadcrumb,.guide-hero__image { display:none; } .guide-layout,.guide-hero__grid { display:block; } .guide-body { max-width:none; } .guide-body section { break-inside:avoid; } }