/* ============================================================
   DBM — shared site foundation

   Loaded before nav.css on every page. Owns the typefaces, the colour
   system, base typography and the shared footer. Page-level <style>
   blocks come after it, so a page rule still wins without !important.
   ============================================================ */

/* ------------------------------------------------------------
   TYPEFACES — all self-hosted
   Manrope carries structure, Lora carries running text.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------
   COLOUR
   One system, derived from the navbar. The legacy names further down are
   aliases onto it.
   ------------------------------------------------------------ */
:root {
  /* core ramp */
  --ink:        #0E1C29;   /* body copy — 15.9:1 on porcelain */
  --deep:       #1B3A5C;   /* headings, footer ground */
  --slate:      #2C5C8A;   /* links, dates, accents — 6.3:1 */
  --seal:       #96BFE0;   /* the navbar */
  --porcelain:  #F2F5F9;   /* page ground */
  --mist:       #B9DEF9;   /* decorative only — 1.3:1, never text */

  /* --amber is the 35deg hue walked down until it clears 4.5:1 on both
     grounds, so it is safe at any size. --amber-fill keeps the original
     for backgrounds and rules. */
  --amber:      #946219;
  --amber-fill: #d4a373;

  /* The logo's own yellow. Reserved for primary calls to action — the
     brightest thing in the palette, and only ever the one action that
     matters most on a page. */
  --sun:        #FCE490;
  --sun-deep:   #F2D264;

  /* The logo's two greens. --sage-deep is the mountain green walked down
     until it clears 4.5:1, so it is safe for text; the other two are fills
     and decoration only. */
  --sage:       #54927D;
  --sage-deep:  #3D6E5C;
  --sage-pale:  #A4DFCB;

  --line:       #DDE4EC;
  --success:    #15734F;
  --danger:     #A93A31;

  /* glass — notice board and cards */
  --glass:      rgba(255,255,255,0.46);
  --glass-edge: rgba(255,255,255,0.72);
  --hairline:   rgba(22,32,43,0.10);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- legacy aliases: existing page CSS reads these ---- */
  --primary:   var(--deep);
  --accent:    var(--amber);        /* text-safe */
  --dark:      var(--ink);
  --light:     var(--porcelain);
  --gray:      #4C6379;             /* 5.9:1, was #6c757d at 4.69:1 */
  --muted:     #4C6379;
  --text:      var(--ink);
  --bg:        var(--porcelain);
  --body-bg:   var(--porcelain);
  --header-bg: var(--porcelain);    /* was cream #f7f5e9 */
  --nav-bg:    var(--seal);
  --border:    var(--line);
  --card:      rgba(255,255,255,0.7);
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Lora', Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--porcelain);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Manrope carries every structural voice — its geometric caps hold at
   display size. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  text-wrap: balance;
}

/* UI is structure, not prose — controls stay in Manrope */
.btn, button, input, select, textarea, .notice-btn {
  font-family: 'Manrope', system-ui, sans-serif;
}

a { color: var(--slate); }

img { max-width: 100%; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

section { padding: 8rem 0; }

/* ------------------------------------------------------------
   PAGE HEADER — the band beneath the navbar on interior pages
   160px / 140px preserves the clearance the shaped bar needs.
   ------------------------------------------------------------ */
.page-header {
  /* a consistent ~54px gap beneath the swell at both sizes */
  padding-top: 174px;
  padding-bottom: 4rem;
  text-align: center;
  background: var(--header-bg);
  position: relative;
  overflow: hidden;
}
.page-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--primary);
}
.page-header p {
  max-width: 66ch;
  margin: 1rem auto 0;
  color: var(--gray);
}
.page-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20%;
  background: linear-gradient(to bottom,
    rgba(242,245,249,0) 0%, var(--body-bg) 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   SKIP LINK
   First in the tab order on every page with a navbar, and invisible until
   focused. Moved off the top rather than hidden: display:none and
   visibility:hidden both drop it from the tab order, so it could never
   appear. Fixed rather than absolute, and above the mobile drawer.
   ------------------------------------------------------------ */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  transform: translateY(-150%);
  padding: 0.85rem 1.4rem;
  background: var(--porcelain);
  color: var(--deep);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid var(--slate);
  border-top: none;
  border-radius: 0 0 10px 0;
}

.skip-link:focus {
  transform: translateY(0);
}

/* The skip target. tabindex is what moves the keyboard on; without it
   some browsers scroll the page and leave focus in the navbar. No
   outline, since it is only ever focused programmatically.
   ------------------------------------------------------------ */
[tabindex="-1"]:focus {
  outline: none;
}

/* ------------------------------------------------------------
   FOCUS
   One visible state for everything a keyboard can reach. --gray at 5.6:1,
   past the 3:1 asked of a focus indicator and distinct from every button
   colour here; navy would read as part of the navy buttons.

   outline, never box-shadow — the tactile buttons above build their
   states out of a box-shadow list this would replace. :where() so the
   navbar and the notice gallery keep their own treatments.
   ------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--gray);
  outline-offset: 2px;
}

/* --mist on the footer's dark ground, where --gray is nearly invisible. */
footer :where(a, button):focus-visible {
  outline-color: var(--mist);
}

/* The navbar sets its own focus state and asks for no ring. */
nav :where(a, button):focus-visible {
  outline: none;
}

/* ------------------------------------------------------------
   FOOTER — shared across every page
   ------------------------------------------------------------ */
footer {
  background: var(--deep);
  color: #fff;
  padding: 4rem 0 2rem;
  text-align: center;
}
/* Stated here, not merely inherited: impact.html and programs.html each
   declare a page-wide p colour, and an inherited value loses to a rule
   that matches the element directly. */
footer p { margin-bottom: 1.5rem; color: #fff; }
footer .footer-meta {
  font-size: 0.9rem;
  opacity: 0.82;
  margin-bottom: 1rem;
}
footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.4rem;
}
footer .footer-links a,
footer a {
  color: #D6E4F0;
  text-decoration: none;
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.94rem;
}
footer a:hover,
footer a:focus-visible { color: var(--mist); }
footer .footer-copy {
  margin: 2rem 0 0;
  font-size: 0.9rem;
  opacity: 0.78;
}

/* ------------------------------------------------------------
   TACTILE BUTTONS
   One overhead light, three states: convex at rest, flat on hover,
   concave on press.

   Built from box-shadow alone, not gradients — background-image is not
   interpolable, and a shadow list leaves background untouched, so each
   page keeps owning its button colour. The alphas are capped by the
   lightest button, where a deeper shade would eat into dark type.

   Pages must not set box-shadow on these: page CSS loads after this file
   and would replace the whole list.
   ------------------------------------------------------------ */
.btn,
.contact-form button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0.32),
    0 3px 7px rgba(14, 28, 41, 0.22);
  transition:
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease);
}

.btn:hover,
.contact-form button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0),
    inset 0 -10px 14px -10px rgba(0, 0, 0, 0),
    0 1px 2px rgba(14, 28, 41, 0.10);
  transform: none;
}

/* No lift on hover: it raised the surface at the moment the shading says
   it is settling flat. */

/* :active covers the mouse. Enter on a focused button fires a click
   without ever setting it. */
/* No negative spread: left to spill, the shadow wraps the top and both
   sides and the surface looks genuinely pushed in. The top stops at 0.38,
   which is where the yellow button's label reaches 4.5:1. */
.btn:active,
.contact-form button:active {
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 rgba(14, 28, 41, 0);
  transform: translateY(1px);
}

/* ------------------------------------------------------------
   CAROUSEL SLIDE CAPTIONS
   Shown over the picture: on hover with a mouse, on a first tap without
   one. Here rather than in impact.html or programs.html, which each carry
   their own copy of the carousel CSS.
   ------------------------------------------------------------ */

/* A figure with no width collapses the track. */
.carousel-track > * {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  position: relative;
}

.slide {
  overflow: hidden;
}

.slide-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;

  /* The top padding is deep because the gradient has to fade out somewhere:
     text any higher sits in the translucent part of the scrim. */
  padding: 2.2rem 1rem 0.9rem;

  background: linear-gradient(
    to top,
    rgba(14, 28, 41, 0.94) 10%,
    rgba(14, 28, 41, 0.78) 52%,
    rgba(14, 28, 41, 0) 100%
  );

  /* Manrope — a label on a control rather than running text. */
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: left;

  opacity: 0;
  transform: translateY(0.55rem);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);

  /* The caption must never be what a tap lands on; the slide underneath
     decides between revealing and following the link. */
  pointer-events: none;
}

/* Crops a long description typed later instead of burying the photo. */
.slide-caption-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --mist is white-adjacent on this scrim, and carries the link cue
   without pulling rank on the description above it. */
.slide-caption-cue {
  display: block;
  margin-top: 0.35rem;
  font-weight: 700;
  color: var(--mist);
}

/* Hover where there is a pointer, focus where there is a keyboard. */
@media (hover: hover) {
  .slide:hover .slide-caption {
    opacity: 1;
    transform: none;
  }
}

.slide:focus-within .slide-caption,
.slide.is-revealed .slide-caption {
  opacity: 1;
  transform: none;
}

@media (max-width: 768px) {
  section { padding: 5rem 0; }
  .container { padding: 0 1.25rem; }
  .page-header { padding-top: 154px; }
}

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