/* Patrick Elementary Dads on Duty */
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: blue burst hero carrying the logo (as on the poster), purpose row, day-on-duty timeline, how to join, always/never rules, ten goals, grouped resource lists, then Volunteer + Contacts. */
:root{
  --bg:#f3f7fb;
  --surface:#ffffff;
  --ink:#0d1b2a;
  --muted:#4e6075;
  --line:#d8e2ec;
  --cyan:#1aa0d8;
  --cyan-ink:#0a6f9e;
  --navy:#05284d;
  --blue:#018ce8;
  --yellow:#ffe414;
  --chip-bg:#e9f0f6;
  --live:#0a6f9e;
  --live-bg:#dcf1fb;
  --varsity:"Graduate", "Rockwell Extra Bold", Georgia, serif;
  --punch:"Kanit", "Arial Black", Impact, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#06111e; --surface:#0e1d30; --ink:#e8f0f8; --muted:#9fb2c6; --line:#1f3550;
    --cyan:#3bb8ec; --cyan-ink:#6fcdf3; --chip-bg:#16283f; --live:#6fcdf3; --live-bg:#0f3149; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#06111e; --surface:#0e1d30; --ink:#e8f0f8; --muted:#9fb2c6; --line:#1f3550;
  --cyan:#3bb8ec; --cyan-ink:#6fcdf3; --chip-bg:#16283f; --live:#6fcdf3; --live-bg:#0f3149; color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.55;margin:0}
.wrap{max-width:1040px;margin-inline:auto;padding-inline:16px}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}

/* Hero: fixed brand colors in both themes, like the poster */
.hero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(60% 70% at 72% 45%, rgba(120,210,255,.55), rgba(1,140,232,0) 70%),
    repeating-conic-gradient(from 0deg at 72% 45%, rgba(255,255,255,.07) 0deg 6deg, rgba(255,255,255,0) 6deg 18deg),
    linear-gradient(160deg,#0170c4 0%,#018ce8 45%,#05284d 100%);}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:center;padding-block:48px 56px}
.kicker{font-family:var(--punch);font-style:italic;font-weight:800;text-transform:uppercase;line-height:.95;margin:0 0 18px;letter-spacing:-.005em}
.kicker .new{display:block;color:var(--yellow);font-size:clamp(2.4rem,5.6vw,3.8rem);text-shadow:0 3px 0 #05284d}
.kicker .when{display:block;font-size:clamp(1.4rem,3.2vw,2.15rem);text-shadow:0 3px 0 #05284d}
.hero p.lede{font-size:1.2rem;max-width:30em;margin:0;color:#e6f4ff}
.hero p.lede strong{color:#fff}
.tagline{font-family:var(--punch);font-style:italic;font-weight:800;font-size:1.15rem;margin:0;color:#fff;display:inline-block;border-bottom:3px solid var(--yellow);padding-bottom:4px}
.logo-col{position:relative;display:flex;justify-content:center}
.logo-col img{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 18px 28px rgba(0,20,50,.45))}
.callout{position:absolute;top:2%;right:-2%;background:var(--yellow);color:#05284d;font-family:var(--punch);font-style:italic;font-weight:800;font-size:1.15rem;line-height:1.05;text-align:center;padding:14px 16px;border-radius:10px;transform:rotate(8deg);box-shadow:0 8px 18px rgba(0,20,50,.35)}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;margin:-28px 0 40px;position:relative;box-shadow:0 10px 30px -18px rgba(5,40,77,.45)}
.pillar{padding:22px 22px 24px;border-left:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;min-width:0}
.pillar:first-of-type{border-left:0}
.pillar .ic{flex:none;width:46px;height:46px;border-radius:50%;background:var(--blue);display:grid;place-items:center}
.pillar .ic svg{width:26px;height:26px}
.pillar h3{font-family:var(--varsity);font-size:1rem;margin:2px 0 4px;letter-spacing:.02em;text-transform:uppercase}
.pillar p{margin:0;color:var(--muted);font-size:.93rem}

/* Facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 40px;padding:0;list-style:none;border-top:3px solid var(--ink);border-bottom:1px solid var(--line)}
.facts li{padding:16px 18px;border-left:1px solid var(--line);min-width:0}
.facts li:first-child{border-left:0;padding-left:0}
.facts .k{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.facts .v{display:block;font-family:var(--varsity);font-size:1.15rem;margin-top:4px}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.goals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:28px;margin:0 0 40px;padding-block:28px;border-top:3px solid var(--ink);border-bottom:1px solid var(--line)}
.goals-head h2{font-family:var(--punch);font-style:italic;font-weight:800;text-transform:uppercase;font-size:2rem;line-height:1;margin:0 0 8px;color:var(--cyan-ink)}
.goals-head p{margin:0;color:var(--muted)}
.goals ol{margin:0;padding:0;list-style:none;counter-reset:g;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.goals li{counter-increment:g;display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline}
.goals li::before{content:counter(g,decimal-leading-zero);font-family:var(--varsity);color:var(--cyan-ink);font-size:.95rem;font-variant-numeric:tabular-nums}
@media (max-width:860px){.goals{grid-template-columns:1fr;gap:14px}.goals ol{grid-template-columns:1fr}}

.notice{display:flex;gap:12px;align-items:flex-start;background:var(--chip-bg);border-radius:10px;padding:12px 16px;margin:0 0 28px;color:var(--muted);font-size:.95rem}
.notice b{color:var(--ink)}
.paw{flex:none;width:18px;height:18px;margin-top:2px;fill:var(--cyan)}

/* Resource groups */
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-bottom:44px}
.group h2{font-family:var(--varsity);font-size:1rem;letter-spacing:.03em;text-transform:uppercase;margin:0 0 6px;padding-bottom:10px;border-bottom:3px solid var(--cyan)}
.group ul{list-style:none;margin:0;padding:0}
.item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.item .txt{min-width:0}
.item .t{display:block;font-weight:700}
.item .d{display:block;color:var(--muted);font-size:.9rem;margin-top:2px}
a.item:hover .t{text-decoration:underline;text-decoration-color:var(--cyan);text-decoration-thickness:2px;text-underline-offset:3px}
.chip{flex:none;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--chip-bg);color:var(--muted);white-space:nowrap;margin-top:2px}
.chip.live{background:var(--live-bg);color:var(--live)}

/* CTA */
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:44px}
.panel{border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel h2{font-family:var(--punch);font-style:italic;font-weight:800;text-transform:uppercase;font-size:2rem;margin:0;line-height:1}
.panel p{margin:0}
.volunteer{background:#05284d;color:#fff;position:relative;overflow:hidden}
.volunteer h2{color:var(--yellow)}
.volunteer p{color:#d6e9fa}
.volunteer .chip{background:var(--yellow);color:#05284d;align-self:flex-start}
.contact{background:var(--surface);border:1px solid var(--line)}
.contact h2{color:var(--cyan-ink)}
.contact p{color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.email{font-family:var(--varsity);font-size:1.15rem;user-select:all;word-break:break-all}
.btn{font:inherit;font-weight:700;font-size:.9rem;border-radius:999px;padding:8px 16px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn-solid{background:var(--blue);color:#fff;border:2px solid var(--blue)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}

footer{border-top:1px solid var(--line);padding-block:22px 18px;color:var(--muted);font-size:.9rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
footer b{font-family:var(--varsity);font-weight:400;color:var(--ink);letter-spacing:.03em}

/* Paw prints */
.pw{display:inline-block;width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.12em}
.trail{position:absolute;inset:0;pointer-events:none;z-index:0}
.trail svg{position:absolute;width:34px;height:34px;fill:#fff;opacity:.18}
.hero-inner{position:relative;z-index:1}
.hero h1{font-family:var(--punch);font-style:italic;font-weight:800;font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.04;margin:0 0 18px;letter-spacing:-.01em;text-shadow:0 3px 0 #05284d;text-wrap:balance}
.hero h1 em{font-style:inherit;color:var(--yellow)}
.motto{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--varsity);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:#fff}
.motto .pw{color:var(--yellow);font-size:.9rem}
.paw-rule{display:flex;justify-content:center;gap:18px;margin:0 0 36px;color:var(--cyan)}
.paw-rule .pw{font-size:1.05rem;opacity:.55}
.paw-rule .pw:nth-child(odd){transform:translateY(-5px) rotate(-12deg)}
.paw-rule .pw:nth-child(even){transform:translateY(5px) rotate(12deg)}
.group h2{display:flex;align-items:center;gap:8px}
.group h2 .pw{color:var(--cyan);font-size:1.05rem}
.item .go{color:var(--cyan);font-size:.85rem;margin-left:4px}
.goals li::before{content:none}
.goals li .n{display:inline-flex;align-items:center;gap:4px;font-family:var(--varsity);color:var(--cyan-ink);font-size:.95rem;font-variant-numeric:tabular-nums}
.goals li .n .pw{font-size:.7rem;color:var(--cyan)}
.goals li{grid-template-columns:3.2em minmax(0,1fr)}
.launch{position:relative;overflow:hidden;border-radius:18px;margin:0 0 20px;padding:30px 28px;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  background:repeating-conic-gradient(from 0deg at 85% 50%, rgba(255,255,255,.06) 0deg 6deg, rgba(255,255,255,0) 6deg 18deg),linear-gradient(120deg,#05284d 0%,#0170c4 70%,#018ce8 100%)}
.launch .k{font-family:var(--punch);font-style:italic;font-weight:800;text-transform:uppercase;line-height:.95;margin:0}
.launch .k .new{display:block;color:var(--yellow);font-size:clamp(2rem,4.6vw,3.2rem);text-shadow:0 3px 0 #05284d}
.launch .k .when{display:block;font-size:clamp(1.2rem,2.8vw,1.8rem)}
.launch .big-paw{position:absolute;right:-30px;bottom:-40px;width:200px;height:200px;fill:#fff;opacity:.12;transform:rotate(-18deg)}
.launch .callout2{position:relative;background:var(--yellow);color:#05284d;font-family:var(--punch);font-style:italic;font-weight:800;font-size:1.15rem;line-height:1.05;text-align:center;padding:14px 16px;border-radius:10px;transform:rotate(6deg);box-shadow:0 8px 18px rgba(0,20,50,.35)}
.volunteer .big-paw{position:absolute;right:-24px;bottom:-30px;width:150px;height:150px;fill:var(--yellow);opacity:.12;transform:rotate(20deg)}
.volunteer > *{position:relative}
.volunteer > .big-paw{position:absolute}
footer .motto{color:var(--ink);margin:0;font-size:.85rem}
footer .motto .pw{color:var(--cyan)}
@media (max-width:860px){.launch{grid-template-columns:1fr}.launch .callout2{justify-self:start}.trail svg{width:24px;height:24px}}

.legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;padding-block:14px 28px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);list-style:none;margin:0;padding-inline:0}
.legal a{color:var(--muted);text-underline-offset:3px}
.legal a:hover{color:var(--ink)}
.legal .soon{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin-left:4px;opacity:.75}

/* Hero actions */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.btn-yellow{background:var(--yellow);color:#05284d;border:2px solid var(--yellow);font-size:1rem;padding:10px 20px}
.btn-yellow:hover{background:#fff;border-color:#fff}
.btn-line{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);font-size:1rem;padding:10px 20px}
.btn-line:hover{border-color:#fff}
.hero-mail{font-size:.9rem;color:#d6ecff;margin:10px 0 0}
.hero-mail b{color:#fff;user-select:all}

/* Section heads */
.sec{margin:0 0 44px;scroll-margin-top:16px}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin:0 0 18px;padding-bottom:12px;border-bottom:3px solid var(--ink)}
.sec-head h2{font-family:var(--punch);font-style:italic;font-weight:800;text-transform:uppercase;font-size:2rem;line-height:1;margin:0;color:var(--cyan-ink)}
.sec-head p{margin:0;color:var(--muted);max-width:40em}

/* Day timeline */
.day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stop{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 18px 20px;min-width:0;display:flex;flex-direction:column;gap:6px}
.stop .when{display:flex;align-items:center;gap:8px;font-family:var(--varsity);font-size:.92rem;letter-spacing:.03em;text-transform:uppercase;color:var(--cyan-ink)}
.stop .when .pw{color:var(--cyan)}
.stop p{margin:0;color:var(--muted);font-size:.95rem}
.stop .with{align-self:flex-start;margin-top:4px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--yellow);color:#05284d}
.special{margin-top:18px;background:var(--chip-bg);border-radius:14px;padding:20px 22px}
.special h3{font-family:var(--varsity);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.special ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.special li,.rules li,.who li{display:grid;grid-template-columns:1.3em minmax(0,1fr);gap:6px;align-items:baseline}
.special li .pw,.who li .pw{color:var(--cyan);font-size:.8rem}

/* Join */
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px}
.who,.steps{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;min-width:0}
.who h3,.steps h3{font-family:var(--varsity);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px}
.who ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
.who .req{margin:0 0 12px;font-weight:700}
.who .fine{margin:0;color:var(--muted);font-size:.88rem}
.steps ol{list-style:none;margin:0;padding:0;counter-reset:st;display:grid;gap:14px}
.steps li{counter-increment:st;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:12px;align-items:start}
.steps li::before{content:counter(st);width:2.2rem;height:2.2rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--varsity);font-size:1rem}
.steps li b{display:block}
.steps li span{color:var(--muted);font-size:.93rem}
.steps .email-inline{font-weight:700;color:var(--ink);user-select:all}

/* Always / Never */
.rules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.rules > div{border-radius:14px;padding:22px;min-width:0}
.rules .always{background:var(--live-bg)}
.rules .never{background:var(--surface);border:1px solid var(--line)}
.rules h3{font-family:var(--varsity);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.rules ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rules .always li::before{content:"✓";color:var(--live);font-weight:700}
.rules .never li::before{content:"✕";color:#c8372d;font-weight:700}
.rules-note{margin:14px 0 0;color:var(--muted);font-size:.9rem}

@media (max-width:860px){
  .day{grid-template-columns:repeat(2,minmax(0,1fr))}
  .join,.rules{grid-template-columns:1fr}
  .special ul{grid-template-columns:1fr}
}
@media (max-width:520px){.day{grid-template-columns:1fr}}

/* Legal pages */
.legal-bar{background:linear-gradient(120deg,#05284d 0%,#0170c4 70%,#018ce8 100%);color:#fff}
.legal-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--varsity);letter-spacing:.03em;text-transform:uppercase;font-size:.95rem}
.brand img{width:52px;height:52px}
.back{color:#fff;font-weight:700;font-size:.92rem;text-underline-offset:3px;white-space:nowrap}
.doc{max-width:720px;margin-inline:auto;padding-block:40px 48px}
.doc h1{font-family:var(--punch);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(2rem,5vw,2.8rem);line-height:1;margin:0 0 8px;color:var(--cyan-ink)}
.doc .eff{margin:0 0 28px;color:var(--muted);font-size:.92rem;display:flex;align-items:center;gap:8px}
.doc .eff .pw{color:var(--cyan)}
.doc h2{font-family:var(--varsity);font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;margin:32px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--line)}
.doc p,.doc li{max-width:68ch}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:1.2em}
.doc li{margin-bottom:6px}
.doc li::marker{color:var(--cyan)}
.doc .mail{font-weight:700;user-select:all}
.doc .contact-box{background:var(--chip-bg);border-radius:12px;padding:16px 18px;margin-top:8px}
.doc .contact-box p{margin:0}
.legal a{color:var(--muted)}
.poster-img{display:block;width:100%;max-width:640px;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 14px 34px -18px rgba(5,40,77,.5);margin:0 0 20px}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;padding-block:32px 52px;gap:20px}
  .logo-col{order:-1}
  .logo-col img{max-width:280px}
  .callout{right:0;top:0;font-size:1rem;padding:10px 12px}
  .pillars{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid var(--line)}
  .pillar:first-of-type{border-top:0}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts li:nth-child(3){border-left:0;padding-left:0}
  .facts li:nth-child(n+3){border-top:1px solid var(--line)}
  .groups,.cta{grid-template-columns:1fr}
}