/* Global Youth Guardians — Standing Guard.
Ejected from the design prototypes; this file is now hand-edited. */
:root{
--paper:#EFF3EF; --ink:#0B1512; --slate:#4A5B54; --deep:#0E211C;
--teal:#14584A; --citron:#5F6E10; --sand:#8C620E; --line:#CBD6CE; --white:#FFF;
--disp:"Bricolage Grotesque",system-ui,sans-serif; --sans:"Public Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--citron);outline-offset:2px}
.bar{background:var(--deep);color:#DCE7E1;position:sticky;top:0;z-index:10}
.bar .in{max-width:1180px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;gap:2rem}
.logo{font-family:var(--disp);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;
text-decoration:none;color:#fff;text-transform:uppercase}
.bar nav{margin-left:auto;display:flex;gap:1.5rem;font-weight:600;font-size:.85rem}
.bar nav a{color:#A9C0B7;text-decoration:none}
.bar nav a[aria-current]{color:var(--citron);color:#C6D84B}
.bar nav a:hover{color:#fff}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem}
.narrow{max-width:60ch}
.band{padding:4.5rem 0}
.band-deep{background:var(--deep);color:#E4EEE8}
.band-deep h2,.band-deep h1{color:#fff}
.band-deep p{color:#B9CCC4}
.band-teal{background:var(--teal);color:#E9F3EF}
.band-teal h2{color:#fff}
.band-teal p{color:#CFE2DB}
/* Cards and other white panels sit INSIDE the coloured bands, so the band's
light-on-dark text colours must not cascade into them. Before this the card
body text was #CFE2DB on white (1.35:1) and the card heading #E9F3EF on white
(1.13:1) -- both effectively invisible. The band rules are descendant
selectors, which is why they reached in. */
.band-teal .card,.band-deep .card,
.band-teal .stance,.band-deep .stance,
.band-teal .signup,.band-deep .signup{color:var(--ink)}
.band-teal .card h3,.band-deep .card h3,
.band-teal .stance h2,.band-deep .stance h2{color:var(--ink)}
.band-teal .card p,.band-deep .card p,
.band-teal .stance p,.band-deep .stance p,
.band-teal .signup p,.band-deep .signup p{color:var(--slate)}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,7vw,5rem);line-height:.98;
letter-spacing:-.035em;margin:0 0 1.2rem;text-wrap:balance}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1.04;
letter-spacing:-.028em;margin:0 0 1rem;text-wrap:balance}
h3{font-family:var(--disp);font-weight:700;font-size:1.22rem;letter-spacing:-.015em;margin:0 0 .45rem}
p{margin:0 0 1.05rem}
.lede{font-size:1.22rem;line-height:1.5}
.kicker{font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;
color:var(--sand);margin:0 0 1.1rem}
.band-deep .kicker,.band-teal .kicker{color:#C6D84B}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.btn{display:inline-block;font-weight:600;font-size:.95rem;text-decoration:none;
padding:.78rem 1.4rem;border:2px solid var(--teal);color:var(--teal);background:transparent}
.btn:hover{background:rgba(20,88,74,.08)}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:#0F4438}
.band-deep .btn,.band-teal .btn,.hero .btn{border-color:#C6D84B;color:#C6D84B}
.band-deep .btn-primary,.band-teal .btn-primary,.hero .btn-primary{background:#C6D84B;color:var(--deep);border-color:#C6D84B}
.band-deep .btn:hover,.band-teal .btn:hover,.hero .btn:hover{background:rgba(198,216,75,.14)}
.band-deep .btn-primary:hover,.band-teal .btn-primary:hover,.hero .btn-primary:hover{background:#D5E663}
.hero{background:var(--deep);color:#fff;padding:4.5rem 0 3.5rem}
.hero .grid{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:900px){.hero .grid{grid-template-columns:1.05fr .95fr;align-items:end}}
.hero .ph{margin:0}
.ph{margin:2rem 0;border:2px solid var(--line);background:var(--white)}
.band-deep .ph,.hero .ph{border-color:rgba(255,255,255,.22)}
.ph img{width:100%}
.cards{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2rem}
.card{background:var(--white);border:2px solid var(--ink);padding:1.5rem}
.card .ph{margin:0 0 1rem;border:none;max-width:96px}
.card .ph figcaption{display:none}
.stance{border:2px solid var(--citron);border-left-width:10px;padding:2rem;background:var(--white)}
.pull{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,4.2vw,2.9rem);line-height:1.1;
letter-spacing:-.028em;margin:0;max-width:22ch}
.steps{display:grid;gap:2rem;margin-top:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.step .n{font-family:var(--disp);font-weight:800;font-size:2.6rem;line-height:1;color:var(--sand);
display:block;margin-bottom:.4rem}
/* The step numerals need the light accent on ANY dark band. A .band-deep-only
override left them sand-on-teal at 1.53:1 in "Other ways to help" — the same
shape of bug as the cards: a band-specific rule written for one band and not
the other. */
.band-deep .step .n,.band-teal .step .n{color:#C6D84B}
.split{display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:840px){.split{grid-template-columns:1fr 300px;align-items:center}}
.split .ph{margin:0}
.two{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.two .ph{margin:0}
.signup{background:var(--white);border:2px solid var(--ink);padding:2rem;max-width:54ch}
.field{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.field input{flex:1 1 15rem;font-family:var(--sans);font-size:1rem;padding:.75rem .9rem;
border:2px solid var(--ink);background:var(--paper);color:var(--ink)}
.note{font-size:.8rem;color:var(--slate);margin:.9rem 0 0}
ul.allocation{columns:2;column-gap:2.5rem;padding-left:1.15rem;margin:1.2rem 0 0}
ul.allocation li{margin-bottom:.45rem;break-inside:avoid}
@media(max-width:640px){ul.allocation{columns:1}}
.prose p{max-width:60ch}
.tk{background:#FFF6DF;border:2px solid var(--sand);padding:.9rem 1.1rem;margin:1.3rem 0;max-width:60ch}
.tk-l{font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
color:var(--sand);display:block;margin-bottom:.3rem}
.tk p{margin:0;font-size:.9rem;color:#5A4310}
.helpband{background:var(--citron);color:#fff;padding:1.15rem 0;font-size:.95rem}
.helpband .wrap{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.helpband .tkmini{font-size:.72rem;opacity:.85}
footer.site{background:var(--deep);color:#95AAA2;padding:3rem 0 4rem;font-size:.88rem}
footer.site .status{max-width:62ch;margin:0 0 1rem}
footer.site .meta{font-size:.78rem;opacity:.8}
/* Skip link: hidden until focused, so keyboard users can bypass the nav that
repeats on every page (WCAG 2.4.1). */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
background:var(--deep);color:#fff;padding:.7rem 1.1rem;
font-weight:600;text-decoration:none;border-radius:0 0 4px 0}
.skip:focus{left:0}
/* .kicker is used on both (page eyebrow) and
(section heading). Pin the
type here so an h2 kicker renders identically to a p kicker rather than
inheriting the h2 display face and size. */
h2.kicker{font-family:var(--sans);font-size:.74rem;line-height:1.4;
letter-spacing:.18em;font-weight:600;margin:0 0 1.1rem}
/* Label the signup field for screen readers without showing it: a placeholder
is not a label, and disappears as soon as the field has content. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The conviction line is a quotation, so it is a , not a styled
paragraph (WCAG 1.3.1: the markup should carry the meaning). Reset the
element default margin and let the inner paragraph inherit the display type
rather than falling back to body text. */
blockquote.pull{margin:0}
blockquote.pull p{font:inherit;color:inherit;margin:0;max-width:none}
/* Signup form. Visible labels rather than placeholder-only fields: a
placeholder disappears the moment someone types, which strands anyone who
loses their place, and it is not a label for assistive tech. */
.signup-form{display:flex;flex-direction:column;gap:1rem;margin-top:1.2rem}
.signup-form label{display:block;font-size:.85rem;font-weight:600;
margin-bottom:.3rem;color:var(--ink)}
.signup-form input{width:100%;height:48px;font-family:var(--sans);font-size:1rem;
padding:0 .9rem;border:2px solid var(--ink);border-radius:6px;
background:var(--white);color:var(--ink)}
.signup-form .pair{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:520px){.signup-form .pair{grid-template-columns:1fr}}
.signup-form .btn{align-self:start}
/* The help band sets white text on citron, but links inherited the global teal
(#14584A on #5F6E10 = 1.48:1 — unreadable, and this is the hotline link, the
most safety-critical element on the site). White matches the band text at
5.64:1; because the link is then the same colour as its surroundings, it
carries a permanent underline so colour is not the only thing marking it
(WCAG 1.4.1). */
.helpband a{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px}
.helpband a:hover{text-decoration-thickness:3px}
.helpband a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.signup-form .opt{font-weight:400;color:var(--slate)}
/* The submit button sat at 46px in Chrome and 51px in Firefox against 48px
inputs: .btn is padding-sized with no height, so its box depends on font
metrics and each engine rounds differently. Pin it to the field height so the
control row lines up in every browser. */
.signup-form .btn{height:48px;padding:0 1.4rem;line-height:1}
/* The nav is sticky and 61px tall, so an in-page jump (#mailing-list) parked
the target under it and hid the section heading. scroll-margin-top offsets
the scroll position for anchors and for the skip link. */
#mailing-list,#main,[id]{scroll-margin-top:5rem}
/* Social links. Icon plus visible label rather than an icon alone: an unlabelled
glyph has no accessible name and is guesswork for anyone who does not
recognise it. The svg is aria-hidden because the adjacent text already names
the destination, and currentColor keeps icon and label in step. */
.social{display:flex;flex-wrap:wrap;gap:1.4rem;margin:0 0 1.4rem}
.social a{display:inline-flex;align-items:center;gap:.5rem;
color:#DCE7E1;text-decoration:none;font-weight:600;font-size:.92rem;
/* Padding lifts the hit area clear of the 24px WCAG 2.5.8 minimum, which the
text height alone met only exactly. */
padding:.45rem 0;min-height:44px;box-sizing:border-box}
.social a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.social a:focus-visible{outline:3px solid #C6D84B;outline-offset:4px}
.social-icon{width:22px;height:22px;flex:none}
/* Footer links sit on the muted meta line, so they take the brighter body
colour plus an underline — the meta grey alone would not distinguish them
from surrounding text (WCAG 1.4.1). */
footer.site a{color:#DCE7E1;text-decoration:underline;text-underline-offset:3px}
footer.site a:hover{color:#fff}
footer.site a:focus-visible{outline:3px solid #C6D84B;outline-offset:3px}