/* Youth Count interim home | Approved current palette.
   Type: Google Fonts (Quicksand) for live copy; vector-traced artwork for
   the distinctive handmade wordmark/headline with accessible semantic text. */
:root {
  color-scheme: light;
  --soft-orange: #f7a95a;
  --orange: #ff8500;
  --yellow: #f8d237;
  --royal: #3b37ed;
  --blue-dark: #0f29aa;
  --lavender: #a4a6fd;
  --font: "Quicksand", "Trebuchet MS", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #fff; font-family: var(--font); background: var(--lavender); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.visually-hidden {
  position: absolute!important; width: 1px!important; height: 1px!important;
  padding: 0!important; margin: -1px!important; overflow: hidden!important;
  clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important;
}
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; background:#fff; color:var(--blue-dark); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--lavender);
  background-image: url('/assets/lavender-texture.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.announcement {
  position: relative;
  display:flex; align-items:center; justify-content:center;
  padding: 13px 56px;
  background: var(--soft-orange); color:#fff;
  text-align:center;
}
.announcement[hidden] { display:none !important; }
.announcement-link { font-size: clamp(14px, 1.05vw, 20px); font-weight: 500; line-height:1.35; text-decoration:none; }
.announcement-link:hover, .announcement-link:focus-visible { text-decoration:underline; text-underline-offset:4px; }
.announcement-close { position:absolute; right: 17px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:24px; height:28px; padding:0; cursor:pointer; color:#fff; background:transparent; border:0; }
.site-header {
  width:100%; padding: clamp(14px, 2.4svh, 26px) 57px 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:block; flex:0 1 280px; width:min(280px,30vw); min-width:0; }
.brand img { display:block; width:100%; height:auto; }
.site-nav { display:flex; align-items:center; gap:51px; white-space:nowrap; }
.site-nav a { text-decoration:none; color:var(--royal); font-size:clamp(17px,1.25vw,24px); font-weight:700; letter-spacing:-0.035em; line-height:1.3; }
.site-nav a:hover { text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }
/* The whole hero (headline and all copy) is sized to fit one screen without scrolling. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.hero {
  flex: 1 0 auto;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: clamp(16px, 3svh, 40px) 22px clamp(24px, 10svh, 130px);
}
.hero-content { width:100%; max-width:1600px; margin:0 auto; }
.hero-lettering { display:block; width:clamp(260px, min(86vw, (100svh - 440px) * 2.5), 880px); height:auto; margin:0 auto; }
.hero-description {
  margin: clamp(16px, 4svh, 48px) auto 0;
  font-weight:500;
  font-size: clamp(17px, min(1.75vw, 3.2svh), 34px);
  line-height:1.5;
  letter-spacing: -0.024em;
  max-width: 34em;
  text-wrap: balance;
}
.hero-description .highlight { color:var(--yellow); font-weight:700; position:relative; white-space:nowrap; }
.hero-description .highlight::after {
  content:""; position:absolute; display:block; height:4px; width:100%; left:0; bottom:-3px;
  background:var(--yellow); transform:rotate(-1deg); border-radius:55% 45% 60% 50%; }
.hero-description a { text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.hero-support {
  max-width: 50em;
  margin: clamp(12px, 2.6svh, 30px) auto 0;
  font-size: clamp(14px, min(1.15vw, 2.2svh), 21px);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.013em;
  text-wrap: balance;
}
.hero-support p { margin: 0 auto 0.6em; }
.hero-support p:last-child { margin-bottom: 0; }
.hero-support a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; font-weight: 700; }
.site-footer { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center; padding:clamp(12px, 2svh, 22px) max(6vw,24px); border-top:1px solid rgba(255,255,255,.3); font-size:13px; font-weight:700; letter-spacing:.035em; }
.site-footer a { font-weight:600; }
@media (min-width: 681px) and (max-width: 1100px) {
  .hero-description { font-size: clamp(19px, min(2.7vw, 3svh), 30px); }
  .hero-support { font-size: clamp(15px, min(1.95vw, 2.15svh), 20px); }
}
@media (max-width: 680px) {
  .announcement { padding:9px 39px 9px 17px; }
  .announcement-link { font-size: 13px; line-height:1.4; }
  .announcement-close { right:10px; }
  .site-header { padding: 14px 20px 0; gap:14px; }
  .brand { flex:0 1 200px; width:min(200px,56vw); }
  .site-nav a { font-size: 16px; }
  .hero { padding: clamp(12px, 2.5svh, 32px) 19px clamp(18px, 9svh, 96px); }
  .hero-lettering { width:min(100%, (100svh - 420px) * 2.2); }
  .hero-description { font-size:clamp(17px, min(5vw, 2.9svh), 26px); line-height:1.45; letter-spacing:-.03em; }
  .hero-support { font-size: clamp(13px, min(4vw, 2.05svh), 17px); line-height: 1.5; }
  .site-footer { justify-content:center; text-align:center; font-size:12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }