/* ==========================================================================
   Youth's Corner — Base
   Reset, typography, layout primitives, accessibility, performance helpers.
   Depends on tokens.css.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:var(--track-display);
}
h1{font-size:var(--t-h1);}
h2{font-size:var(--t-h2);}
h3{font-size:var(--t-h3);}
h4{font-size:.98rem;}

p{text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img,svg,video{display:block;max-width:100%;}
img{height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
ul,ol{list-style:none;}

/* ---- Layout primitives ------------------------------------------------- */
/* width:100% matters: where .wrap is a flex child (the hero, for one) it
   would otherwise shrink to fit its content, and any margin:auto inside it
   would have no room left to work with. */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);position:relative;}
.wrap-narrow{width:100%;max-width:820px;margin:0 auto;padding:0 var(--gutter);position:relative;}
section{position:relative;}
.center{text-align:center;}
.mono{font-family:var(--f-mono);}
.lede{color:var(--muted);font-size:var(--t-lede);max-width:56ch;}
.lede-dark{color:var(--on-dark);font-size:var(--t-lede);max-width:56ch;}
.meta{font-family:var(--f-mono);font-size:var(--t-meta);color:var(--muted);}
.h2{font-size:var(--t-h2);}

/* Section grounds. Blobs are only ever placed inside .ground-light /
   .ground-tint sections, never behind an opaque dark one where they cannot
   be seen and would still cost paint. */
.ground-light{background:transparent;}
.ground-tint{background:var(--cream-2);}
.ground-dark{background:var(--forest);color:#fff;}
.ground-dark h1,.ground-dark h2,.ground-dark h3{color:#fff;}
.ground-dark p{color:var(--on-dark);}
.ground-ink{background:var(--ink);color:#fff;}

/* ---- Paper grain overlay ----------------------------------------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:998;pointer-events:none;
  opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Accessibility ------------------------------------------------------ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:var(--z-modal);
  background:var(--hivis);color:var(--forest);padding:12px 20px;
  font-weight:700;border-radius:0 0 var(--r-xs) 0;
}
.skip-link:focus{left:0;}

/* Two-tone, because this site has both cream and forest grounds and no single
   colour clears 3:1 on both. Coral alone measured 2.63:1 on cream — a focus
   ring a keyboard user could not see on most of the site.

   The dark outline carries it on light grounds (17.8:1) and the hivis halo on
   dark ones (12:1). Both are always drawn, so the indicator never depends on
   knowing which ground it landed on. The outline is the outer guarantee:
   unlike box-shadow it is never clipped by an ancestor's overflow. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--hivis);
  border-radius:4px;
}

.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;
}

/* ---- Motion preferences -------------------------------------------------
   Honoured globally. The custom cursor, blob drift and reveal transitions
   all collapse to static under this query.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---- Scroll reveal ------------------------------------------------------
   Driven by IntersectionObserver, never by scroll position polling.
   Transform + opacity only, so it stays off the main thread.
   ------------------------------------------------------------------------ */
/* Scoped to .js. The document ships as .no-js and a nonced script in <head>
   flips it before first paint, so nothing here applies unless scripting is
   actually running to undo it — see partials/head.php. Without that scope, a
   site.js that fails to load leaves every one of these permanently invisible. */
.js [data-rv]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease);
}
.js [data-rv].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1;transform:none;}
}

/* ---- Deferred paint -----------------------------------------------------
   Applied to below-the-fold sections. The browser skips layout and paint
   for off-screen content; contain-intrinsic-size stops the scrollbar from
   jumping as sections are realised.
   ------------------------------------------------------------------------ */
.defer-paint{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* ---- Print --------------------------------------------------------------
   Used by the CMS's branded PDF/lead exports as well as page printing.
   ------------------------------------------------------------------------ */
@media print{
  body::after,.page-blobs,#cdot,#cring,#bar,#up,header,.cookie-bar{display:none!important;}
  body{background:#fff;color:#000;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;}
  .defer-paint{content-visibility:visible;}
  /* Printing renders the whole document, including sections the reader never
     scrolled to — whose reveal observer therefore never fired. Without this
     they print as blank space. Same reasoning as forcing content-visibility
     above: nothing that hides content for the screen may reach the paper. */
  .js [data-rv],[data-rv]{opacity:1!important;transform:none!important;}
}