/* Dad Said… — shared global styles for the whole site. */
:root{--bg:#f3ebdd;--bg2:#eadfca;--surface:#fffaf0;--ink:#16130e;--muted:#675e4f;--line:#d9ccb5;--accent:#ff5a36;--sun:#ffc533;--r:24px;
--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light}
html[data-theme=night]{--bg:#12100d;--bg2:#1a1713;--surface:#1f1b16;--ink:#f5eddc;--muted:#aaa08c;--line:#352f26;--accent:#ff7a59;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;transition:background .4s,color .4s;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme=night] body:before{opacity:.09;mix-blend-mode:screen}
body>*{position:relative;z-index:1}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:12px;background:var(--surface);padding:8px 14px;border-radius:99px;z-index:100}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.02;margin:0}
.mono,.eyebrow,.tag,.tagline{font-family:var(--mono)}

/* header: floating pill */
header{position:sticky;top:12px;z-index:40;padding:0 12px}
.nav{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 8px 7px 14px;border-radius:99px;background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid var(--line);box-shadow:0 8px 30px #00000014}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.mark{width:38px;height:38px;border-radius:12px;background:var(--sun);color:#16130e;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:28px;line-height:1;transform:rotate(-6deg);box-shadow:0 3px 0 #b88a00}
.brand strong{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1;letter-spacing:-.01em;display:block}
.brand small{display:none}
nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
nav a{font-size:14.5px;font-weight:600;text-decoration:none;padding:7px 11px;white-space:nowrap;border-radius:99px;transition:background .15s,color .15s}
nav a:hover,nav a.on{background:var(--ink);color:var(--bg)}
.tools{display:flex;align-items:center;gap:6px;flex:none}

/* buttons */
.btn,.copy{border:0;border-radius:99px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1.2;transition:transform .15s,box-shadow .15s,background .15s}
.btn{padding:12px 22px;font-size:16px}
.btn:hover,.copy:hover{transform:translateY(-2px)}.btn:active,.copy:active{transform:translateY(1px)}
.green{background:var(--accent);color:#16130e;box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,#000)}
.white{background:var(--ink);color:var(--bg);box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 40%,var(--bg))}
.soft,.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.soft:hover,.outline:hover{background:var(--ink);color:var(--bg)}
.copy{padding:7px 14px;font-size:14px;background:transparent;box-shadow:inset 0 0 0 2px var(--line);color:var(--ink)}
.copy:hover{background:var(--sun);color:#16130e;box-shadow:inset 0 0 0 2px var(--sun)}
.copy[data-rev]{background:var(--sun);color:#16130e;box-shadow:none}
.groan[aria-pressed="true"],.daycard .groan[aria-pressed="true"]{background:var(--accent);color:#16130e;box-shadow:none}
.copy:disabled,.btn:disabled{opacity:.6;cursor:default}

/* inner pages */
main{max-width:1180px;margin:0 auto;padding:0 20px 80px}
section{margin-top:48px}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.finder{background:var(--surface);border:1px solid var(--line);border-radius:32px;padding:clamp(22px,4vw,44px);margin-top:20px}
.findtop{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px}
.finder h1{font-size:clamp(46px,7vw,92px);line-height:.95;margin:14px 0 12px;letter-spacing:-.025em}
.finder h2,main h2[id]{font-size:clamp(32px,4vw,52px);margin:42px 0 12px}
.sub,.finder .sub,.lead{color:var(--muted);font-size:19px;margin:0;max-width:760px}
.lead{margin:0 0 16px;line-height:1.65}
.crumbs{font-family:var(--mono);font-size:12px;margin-bottom:6px;color:var(--muted)}.crumbs a{text-underline-offset:3px}
.catlinks{margin:18px 0 0;line-height:1.9;color:var(--muted)}.catlinks a{text-underline-offset:3px;color:var(--ink);font-weight:600}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;min-height:200px;transition:transform .2s,border-color .2s}
.quote:hover{transform:translateY(-4px);border-color:var(--ink)}
.tag{align-self:flex-start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--sun);color:#16130e;margin-bottom:14px}
.quote blockquote{margin:0 0 12px;font-family:var(--serif);font-size:30px;line-height:1.08}
.meaning{font-size:16px;color:var(--muted);margin:0 0 14px}
.punch{background:var(--accent);color:#16130e;border-radius:14px;padding:8px 14px;font-family:var(--serif);font-size:26px;line-height:1.1;margin:2px 0 12px;animation:pop .35s ease-out}
.punch[hidden]{display:none}
.reveal summary{cursor:pointer;font-weight:700;padding:6px 0;font-size:16px}.reveal .punch{margin:8px 0 0}
.qfoot{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.origin{font-family:var(--mono);font-size:12px;color:var(--muted)}
.gcount{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}
.feature{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.msg{font-family:var(--serif);font-size:26px;line-height:1.15;margin:0 0 12px}
.tagline{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.seotext{max-width:820px;margin:44px auto 10px;padding:0 4px}
.seotext h2{font-size:clamp(28px,3vw,40px);margin:34px 0 10px}
.seotext p,.seotext li{font-size:17px;line-height:1.7;color:var(--muted)}.seotext p{margin:0 0 12px}.seotext ul{padding-left:22px}.seotext strong{color:var(--ink)}.seotext a{text-underline-offset:3px}
.nextlinks{list-style:none;padding:0!important;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.nextlinks li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:0}
.nextlinks a{font-weight:700;text-decoration:none;display:block}.nextlinks a:hover{text-decoration:underline}.nextlinks span{display:block;font-size:15px;color:var(--muted)}
main.policy{max-width:780px;margin:44px auto 0;padding:0 20px 80px}.policy h1{font-size:clamp(44px,6vw,76px);margin:14px 0 8px}.policy .updated{color:var(--muted);margin:0 0 26px}
.policy .summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin-bottom:34px}.policy .summary h2{font-size:30px;margin:0 0 10px}.policy .summary ul{margin:0}
.policy h2{font-size:clamp(28px,3vw,38px);margin:40px 0 10px}.policy p,.policy li{font-size:18px;line-height:1.7}.policy ul{padding-left:22px}.policy a{font-weight:700;text-underline-offset:3px}

/* footer */
footer{background:#12100d;color:#f5eddc;padding:40px 20px 34px;margin-top:40px;border-radius:36px 36px 0 0}
.foot{max-width:1180px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot strong{font-family:var(--serif);font-weight:400;font-size:34px}
.foot p{margin:3px 0;color:#b9af9b;font-size:16px}
.footlinks{display:flex;gap:6px 16px;flex-wrap:wrap}.foot a{text-decoration:none;color:#d9cfba;font-size:15px}.foot a:hover{color:var(--sun)}
.foot-note{max-width:1180px;margin:20px auto 0;font-size:14px;line-height:1.6;color:#9b9280}.foot-note a{color:#fff}

/* shared bits */
.adslot{margin:40px auto 0;text-align:center;min-height:90px}.adslot:empty{display:none}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,15px);opacity:0;transition:.2s;background:var(--ink);color:var(--bg);border-radius:99px;padding:11px 20px;font-size:15px;font-weight:600;pointer-events:none;z-index:90}.toast.show{opacity:1;transform:translate(-50%,0)}
.consent{position:fixed;z-index:80;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:640px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--ink);border-radius:22px;box-shadow:0 14px 40px #0000003a;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.consent p{margin:0;flex:1 1 260px;font-size:15px;line-height:1.5}.consent div{display:flex;gap:8px;flex-wrap:wrap}.consent a{text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.swap{animation:fade .45s ease-out}

@media(max-width:1020px){.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}nav a{padding:7px 10px;font-size:14px}}
@media(max-width:760px){.nav{border-radius:26px;flex-wrap:wrap}nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}nav a{white-space:nowrap}.quotes,.features{grid-template-columns:1fr}body{font-size:17px}main{padding:0 14px 60px}.findtop{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
nav.crumbs{display:block}nav.crumbs a{padding:0;font-size:inherit;font-weight:400;border-radius:0;background:none;color:inherit;white-space:normal}nav.crumbs a:hover{background:none;color:var(--accent)}

/* ===== stories ===== */
.story{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;break-inside:avoid;margin:0 0 16px;transition:transform .2s,border-color .2s;position:relative}
.story:hover{transform:translateY(-3px);border-color:var(--ink)}
.story-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.story .tag{margin:0}
.story .ribbon{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid var(--ink);background:var(--bg)}
.story h3{font-size:clamp(28px,3vw,36px);line-height:1}
.story-text p{margin:0 0 .7em;font-size:18px;line-height:1.6}.story-text p:last-child{margin:0}
.story-by{font-size:14px;color:var(--muted);margin-top:auto}.story-by b{color:var(--ink)}
.story-act{display:flex;gap:8px;flex-wrap:wrap}
.story.flash{animation:flash 1.8s}
@keyframes flash{0%,60%{box-shadow:0 0 0 4px var(--sun)}100%{box-shadow:0 0 0 0 transparent}}
.story-grid{columns:3 290px;column-gap:16px;margin-top:20px}
.story-invite{background:var(--sun);color:#16130e;border-color:#16130e}
.story-invite h3{font-size:clamp(30px,3.2vw,40px)}
.story-invite p{margin:0;font-size:17px}
.story-invite ul{margin:0;padding-left:20px;font-size:16px;line-height:1.5}
.story-invite .btn{align-self:flex-start;background:#16130e;color:var(--sun);box-shadow:none}
.story-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.story-filters button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:8px 15px;font-size:15px;font-weight:600;cursor:pointer}
.story-filters button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.story-empty{margin-top:22px}
.guidelines{margin:46px 0 0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px}
.guidelines h2{margin:0 0 10px!important;font-size:clamp(30px,3.4vw,44px)!important}
.guidelines ul{margin:0;padding-left:22px}.guidelines li{margin:0 0 8px;font-size:17px;line-height:1.55}

/* accordion (how dads can help) */
.acc{margin-top:14px}
.acc details{border-top:1px solid var(--ink)}.acc details:last-child{border-bottom:1px solid var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-family:var(--serif);font-size:clamp(26px,3vw,38px);line-height:1}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{font-style:normal;font-family:var(--mono);font-size:22px;transition:transform .3s;flex:none}
.acc details[open] summary i{transform:rotate(45deg)}
.acc summary:hover{color:var(--accent)}
.acc details p{margin:0;padding:0 4px 20px;font-size:18px;color:var(--muted);max-width:40em}