/* ============================================================
   Site 2.0, design system
   Bright, hopeful, forward-looking. The world is lit, not dim.

   Inherited from Site 1.1: the client's official brand palette
   and the fluid type scale. Everything about the ground, the
   chrome and the interaction model is new.

   Contrast rules, measured against real composited pixels:
     brand amber #F2A72D on paper = 1.92:1  -> fills and graphics only, never text
     gold        #FFD37A on paper = 1.33:1  -> decoration only
     --accent    #9A5B00 on paper = 5.12:1  -> the text-safe amber
     navy ink    #0A1A2F on paper = 16.50:1
     navy on amber fill           = 8.61:1  -> button text is navy
     white on amber fill          = 2.03:1  -> never do this
   ============================================================ */

:root{
  /* Brand (official sheet, unchanged) */
  --navy:      #0A1A2F;
  --slate:     #4A5568;
  --amber:     #F2A72D;
  --gold:      #FFD37A;

  /* This build's ground: warm paper, so film reads as daylight */
  --paper:     #FBF8F3;
  --paper-2:   #F2EDE4;
  --paper-3:   #E7DFD2;

  /* Text-safe accent. The brand amber cannot carry text on paper. */
  --accent:    #9A5B00;
  --accent-hi: #7A4700;

  --ink:       #0A1A2F;
  --ink-soft:  rgba(10,26,47,.72);
  /* .45 composited to 2.88:1 on paper and failed AA everywhere it was used:
     the scroll hint, the footer, the testimonial note and the cite labels.
     .62 composites to 4.87:1 and still reads as quiet secondary text. */
  --ink-faint: rgba(10,26,47,.62);
  --hair:      rgba(10,26,47,.13);

  /* Glass, for chrome and buttons. Light-ground glass needs a warm tint,
     a real blur and a top highlight or it reads as grey plastic. */
  --glass:      rgba(255,253,250,.62);
  --glass-edge: rgba(255,255,255,.85);
  --glass-line: rgba(10,26,47,.10);
  --glass-cast: 0 2px 10px rgba(10,26,47,.05), 0 12px 40px rgba(10,26,47,.09);

  /* Type */
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale */
  --t-xs:  clamp(.64rem, .6rem + .16vw,   .72rem);
  --t-sm:  clamp(.8rem,  .76rem + .18vw,  .9rem);
  --t-md:  clamp(1rem,   .96rem + .2vw,   1.125rem);
  --t-lg:  clamp(1.4rem, 1.32rem + .35vw, 1.575rem);
  --t-xl:  clamp(2.2rem, 1.5rem + 2.8vw,  3.6rem);
  --t-2xl: clamp(3.3rem, 2.25rem + 4.2vw, 5.4rem);

  --gut:  clamp(1.25rem, 4.5vw, 3.75rem);
  --rail: min(46ch, 40vw);

  /* Reserved by the fixed masthead. Nothing may sit under it. */
  --chrome-h: clamp(64px, 8vh, 88px);

  --ease:    cubic-bezier(.25,.8,.28,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* `hidden` must actually hide.
   The browser's own rule is only `display:none`, so ANY author rule that sets a
   display beats it. `.docs{ display:grid }` did exactly that, and both the
   volunteering and the job document sets rendered at once: seven upload boxes,
   two of them duplicates. Nothing in the DOM looked wrong, which is why this
   only showed up in a screenshot. */
[hidden]{ display:none !important; }

*,*::before,*::after{ box-sizing:border-box; }

/* Anchor targets stop clear of the fixed masthead. Without this, jumping to
   #services parks the heading underneath the chrome. */
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--chrome-h) + 1.25rem); }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-md);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.028em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--t-2xl); }
h2{ font-size:var(--t-xl); }
h3{ font-size:var(--t-lg); letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }

/* ---------- shared atoms ---------- */

/* Monospace micro-label. Text-safe accent, never the raw brand amber. */
.tag{
  font:500 var(--t-xs)/1 var(--mono);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em;
}
.tag::before{
  content:''; width:1.6em; height:1px; background:currentColor; flex:none;
}

.lede{ font-size:var(--t-lg); font-weight:300; color:var(--ink-soft); max-width:34ch; }
.muted{ color:var(--ink-soft); }
.hair{ height:1px; background:var(--hair); border:0; margin:0; }

/* ---------- accessibility ---------- */

/* !important is deliberate. This is a utility whose whole job is to take an
   element out of the layout, and any component rule that names an element type
   outranks a single class: `.frm input{ width:100%; padding:1rem 1.1rem }` beat
   it, so the honeypot fields laid out full width plus padding, absolutely
   positioned, and pushed the document to 2152px against a 1280px viewport. The
   page could be dragged 872px sideways into empty space. Invisible, because the
   clip still applied, which is exactly why it survived every visual review. */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; border:0 !important;
  min-width:0 !important; flex:none !important;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:fixed; top:-100px; left:1rem; z-index:10000;
  background:var(--amber); color:var(--navy);
  padding:.8rem 1.3rem; border-radius:3px; font-weight:600;
  /* Exempt from the 400ms floor: a skip link that arrives slowly is a worse
     skip link. Accessibility affordances appear at once. */
  transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }

:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}