:root { color-scheme: light; --ink:#19342f; --muted:#667873; --cream:#fffaf0; --mint:#dff1e5; --coral:#ef8068; --line:#d9e5dc; --white:#fff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.watch-button { border:0; background:var(--coral); color:white; padding:10px 14px; border-radius:999px; font:inherit; font-weight:700; cursor:pointer; margin-top:10px; }
.watch-button:focus-visible,.watch-close:focus-visible { outline:3px solid #1d6f73; outline-offset:3px; }
.watch-dialog { width:min(900px,calc(100% - 32px)); padding:0; border:0; border-radius:22px; background:var(--white); color:var(--ink); box-shadow:0 24px 80px rgba(23,43,42,.28); }
.watch-dialog::backdrop { background:rgba(23,43,42,.72); }
.watch-dialog-inner { position:relative; padding:28px; }
.watch-dialog h2 { margin:8px 44px 20px 0; }
.watch-close { position:absolute; top:18px; right:20px; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:50%; width:38px; height:38px; font-size:1.5rem; line-height:1; cursor:pointer; }
.player-wrap { aspect-ratio:16/9; background:#102624; border-radius:14px; overflow:hidden; }
.player-wrap iframe { width:100%; height:100%; border:0; }
.watch-note { color:var(--muted); line-height:1.5; font-size:.9rem; margin-bottom:0; }
.card-art { position:relative; overflow:hidden; }
.card-art img { width:100%; height:100%; object-fit:cover; display:block; }
.card-art span { position:absolute; left:14px; bottom:12px; padding:5px 8px; border-radius:6px; background:rgba(255,250,240,.88); color:#355c4e; text-transform:uppercase; letter-spacing:.15em; font-size:.68rem; font-weight:800; }
.card-art.thumbnail-missing img { display:none; }
* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); } .topbar { max-width:1120px; margin:auto; padding:28px 24px; display:flex; justify-content:space-between; align-items:center; } h1,h2,h3,p { margin:0; } h1 { font-size:1.35rem; letter-spacing:-.04em; } h2 { font:700 clamp(2.4rem,6vw,5.2rem)/.98 Georgia, serif; letter-spacing:-.06em; max-width:700px; } h3 { font-size:1.25rem; margin-top:8px; } .eyebrow { color:#7a8f85; text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:800; margin-bottom:8px; } button { font:inherit; cursor:pointer; } .parent-button { border:1px solid var(--line); background:var(--white); color:var(--ink); padding:10px 16px; border-radius:999px; } main { max-width:1120px; margin:auto; padding:38px 24px 80px; } .hero { display:flex; justify-content:space-between; gap:40px; align-items:end; padding:50px 0 70px; } .lede { max-width:520px; color:var(--muted); font-size:1.1rem; line-height:1.6; margin-top:22px; } .age-picker { display:flex; gap:8px; background:var(--mint); padding:6px; border-radius:18px; flex-shrink:0; } .age { border:0; background:transparent; padding:12px 15px; border-radius:13px; color:var(--ink); font-weight:700; } .age span { display:block; color:var(--muted); font-size:.75rem; font-weight:500; margin-top:3px; } .age.active { background:var(--white); box-shadow:0 3px 12px #487b5818; } .safety-note { display:flex; gap:14px; align-items:center; background:#f4dfb3; padding:18px 22px; border-radius:18px; margin-bottom:70px; color:#5d4c2b; } .safety-note span { color:#796743; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; } .section-heading h2 { font-size:2.7rem; } .count { color:var(--muted); font-size:.9rem; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .card { background:var(--white); border:1px solid var(--line); border-radius:22px; overflow:hidden; } .card-art { height:150px; display:grid; place-items:center; background:linear-gradient(135deg,#c4e4d5,#f5c9a8); color:#355c4e; text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; font-weight:800; } .card-copy { padding:20px; } .tag { color:#c35d49; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; font-weight:800; } .card-copy p { color:var(--muted); line-height:1.5; margin-top:12px; font-size:.92rem; } .empty { border:1px dashed #b9ccc0; border-radius:22px; padding:42px 24px; display:flex; flex-direction:column; gap:8px; color:var(--muted); } .empty strong { color:var(--ink); } @media (max-width:760px) { .hero { display:block; padding-top:25px; } .age-picker { margin-top:30px; width:max-content; } .safety-note { align-items:flex-start; flex-direction:column; } .cards { grid-template-columns:1fr; } .section-heading h2 { font-size:2rem; } }