/* ==========================================================================
   PEACEMAKER COALITION
   Black design system.

   The ground is true black. Everything the eye lands on is a photograph, a
   film, or a colour taken from one: sky blue, sunrise orange, forest green.
   Black is not a mood here, it is a decision to get out of the way of the
   footage. Nothing competes with the imagery.

   Every ratio below was measured against the page background before the colour
   was chosen. Because the ground is black, every accent clears AA at normal
   text size with room to spare, which is not true on a coloured ground.

   Every colour and the page margin are variables in :root below. Change one
   value there and it updates everywhere.
   ========================================================================== */

:root {
  /* ---- Ground ------------------------------------------------------------ */
  --void:       #000000;   /* the page background                            */
  --surface:    #0E1116;   /* raised bands and cards                         */
  --surface-2:  #191E25;   /* hover, the next step up                        */
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.07);

  /* Old names kept so nothing that still says --abyss or --deep breaks.     */
  --abyss:      var(--void);
  --deep:       #05070A;
  --ocean:      #080B0F;

  /* ---- Sky and water ----------------------------------------------------- */
  --sky:        #7FC4F0;   /* links and interactive text, 11.06 on black     */
  --sky-pale:   #CFE8FA;   /* quiet text on raised bands                     */
  --water:      #1B5E96;   /* fills and gradients only, never text           */

  /* ---- Sun --------------------------------------------------------------- */
  --sun:        #F2861B;   /* buttons and the main accent, 8.20 on black     */
  --sun-bright: #FFA23D;   /* hover and bright accent text, 10.49            */
  --ember:      #E9622B;   /* sunset end of the gradient, 6.25               */

  /* ---- Forest ------------------------------------------------------------ */
  --forest:     #2E6B4F;   /* fills only                                     */
  --moss:       #6FCB97;   /* small accents, 10.67                           */

  /* ---- Type colours ------------------------------------------------------ */
  --text:       #F2F5F8;   /* 19.19 on black                                 */
  --text-dim:   #A8B3BF;   /* 9.87 on black                                  */
  --on-accent:  #0A0C0F;   /* dark text that sits on orange, moss, or sky    */

  /* Components of the scrim, so every overlay tracks the ground colour.     */
  --deep-rgb:   0, 0, 0;

  /* ---- The signature gradient: water and sky rising into sun ------------- */
  --sunrise: linear-gradient(90deg, var(--water) 0%, #2E86C7 20%, var(--sky) 38%, var(--sun) 74%, var(--ember) 100%);
  --sunrise-soft: linear-gradient(90deg, rgba(27,94,150,.9), rgba(242,134,27,.9));

  /* ---- Type ------------------------------------------------------------- */
  --font-display: "Oswald", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Layout ----------------------------------------------------------- */
  /* --gutter is the breathing room on the left and right of every page.
     This is the setting that stops text touching the edge of the screen.    */
  --gutter:       clamp(1.5rem, 5vw, 5rem);
  --measure:      min(1280px, 100%);
  --measure-text: 68ch;
  --header-h:    104px;

  --radius: 3px;
  --shadow: 0 2px 4px rgba(0,0,0,.6), 0 18px 44px rgba(0,0,0,.7);
  --ease:   cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--void); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Very nearly flat. A trace of lift at the top keeps the header from looking
   welded to the hero, then it settles to true black and stays there.        */
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.68;
  color: var(--text-dim);
  background: linear-gradient(180deg, #0A0D11 0%, var(--void) 40%, var(--void) 100%) no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--sun); color: var(--on-accent); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

/* .wrap is the workhorse. Everything sits inside one, which is why nothing
   can ever end up flush against the browser edge. */
.wrap {
  width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { width: min(880px, 100%); }

.section        { padding-block: clamp(4rem, 9vw, 8.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Raised band. Kept the old class name so page markup did not have to change.
   The lift off black is deliberately small. The hairline borders are what make
   the edge read, not the fill. */
.section--sand {
  background: linear-gradient(180deg, var(--surface) 0%, #090C10 100%);
  border-block: 1px solid var(--line-soft);
}

/* Feature band. Sky light entering from the top left, sun setting bottom
   right, both bleeding into black, with the sunrise edge across the top.
   On black these have to be stronger than they were on a coloured ground or
   they disappear entirely. */
.section--ink {
  background:
    radial-gradient(1200px 460px at 12% 0%, rgba(127,196,240,.16), transparent 66%),
    radial-gradient(1000px 420px at 92% 100%, rgba(242,134,27,.20), transparent 68%),
    #05070A;
  border-block: 1px solid var(--line-soft);
  position: relative;
}
.section--ink::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--sunrise);
}

.stack > * + * { margin-top: 1.25rem; }

/* ==========================================================================
   Type
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.005em;
  color: var(--text);
  text-wrap: balance;
  /* A very long single word, RECONCILIATION for one, must never run past the
     edge of a phone screen. This breaks it instead.                         */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.95rem, 1rem + 4.2vw, 5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 1.25rem + 2.1vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 1.08rem + .7vw, 1.55rem); }
h4 { font-size: 1.05rem; }

/* Put class="sun" on a word or line inside a heading to paint it with the
   sunrise gradient. Use it once per page at most. */
.sun {
  background: var(--sunrise);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

p { max-width: var(--measure-text); text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sun-bright);
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.32rem);
  line-height: 1.55;
  color: var(--text);
}

a { color: var(--sky); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sun-bright); }

.rule { height: 1px; border: 0; background: var(--line); margin-block: clamp(2rem,5vw,3.5rem); }
.rule--sun { height: 2px; background: var(--sunrise); opacity: .85; }

strong { color: var(--text); }
em { color: var(--text); }

/* ==========================================================================
   Buttons
   Orange with dark text. White on orange does not pass contrast, dark does,
   and it reads sharper anyway.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  padding: 1rem 1.9rem;
  border: 1px solid var(--sun);
  background: var(--sun); color: var(--on-accent);
  text-decoration: none; border-radius: var(--radius);
  transition: background .25s var(--ease), border-color .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover {
  background: var(--sun-bright); border-color: var(--sun-bright); color: var(--on-accent);
  transform: translateY(-1px); box-shadow: 0 8px 22px rgba(242,134,27,.34);
}
.btn--ghost, .btn--on-dark {
  background: transparent; color: var(--text); border-color: rgba(255,255,255,.34);
}
.btn--ghost:hover, .btn--on-dark:hover {
  background: rgba(255,255,255,.06); border-color: var(--text); color: var(--text);
  box-shadow: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text); }
/* One image, the whole logo. Sized by HEIGHT so the mountain always matches the
   header bar, with width following the 5.4:1 aspect. Do not set both.        */
.brand img { height: clamp(40px, 4.4vw, 62px); width: auto; display: block; }
.brand b {
  font-family: var(--font-display); font-weight: 600; font-size: 1.16rem;
  letter-spacing: .07em; text-transform: uppercase; line-height: 1.02; color: var(--text);
}
/* The second line of the lockup, uppercase to match PEACEMAKER above it.
   Done in CSS rather than in the markup so it stays right no matter how the
   word is typed in site.js.                                                */
.brand span {
  display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--sun-bright);
}

.nav { display: flex; align-items: center; gap: clamp(.75rem, 1.7vw, 1.8rem); }
.nav a {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; color: var(--text-dim);
  padding-block: .4rem; border-bottom: 1px solid transparent;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--sun); }
/* The Donate button is an <a> inside .nav, so the nav link colour above was
   winning and painting grey text onto the orange fill. That measured 2.0 to 1,
   a real failure. These two lines put the dark text back at 7.65 to 1.        */
.nav .btn {
  padding: .7rem 1.25rem; font-size: .74rem;
  color: var(--on-accent); border-color: var(--sun);
}
.nav .btn:hover { color: var(--on-accent); border-color: var(--sun-bright); }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; }
.nav-toggle svg { width: 26px; height: 26px; stroke: var(--text); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--abyss); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    transform: translateY(-120%); transition: transform .35s var(--ease);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding-block: .95rem; border-bottom: 1px solid var(--line-soft); font-size: .95rem; }
  .nav .btn { margin-top: 1.25rem; justify-content: center; border-bottom: 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* The hero stacks the film and the headline in a single grid cell. The cell
   takes whichever is taller, so on a narrow phone the copy sets the height and
   the film simply grows to fill behind it. Nothing gets clipped.            */
.hero {
  position: relative; background: var(--deep); overflow: hidden;
  display: grid; grid-template-columns: 100%;
}
.hero__media {
  grid-area: 1 / 1; position: relative; width: 100%; aspect-ratio: 16 / 9;
  min-height: 100%;
}
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The home page hero is a photograph that drifts very slowly instead of a
   background video. Forty seconds to travel 6 percent, so it reads as depth
   rather than as movement. It costs nothing to serve and it never fails to
   start. Raise the scale figure for a stronger push, lower the duration to
   speed it up, or delete this block to hold the picture still.              */
.hero__still { transform-origin: 50% 55%; animation: hero-drift 40s ease-in-out infinite alternate; }
@keyframes hero-drift {
  from { transform: scale(1.00); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__still { animation: none; }
}

/* Heroes are 21:8, far wider than most source photographs, so cover discards
   the top and bottom equally. When the subject sits low in the frame that
   leaves them stranded under the centre line. These move the surviving slice.
   Higher percentage keeps more of the BOTTOM, which lifts the subject up.    */
.hero__media--lower  video, .hero__media--lower  img { object-position: 50% 74%; }
.hero__media--bottom video, .hero__media--bottom img { object-position: 50% 90%; }
.hero__media--upper  video, .hero__media--upper  img { object-position: 50% 26%; }
/* The scrim is black. Raise the last number on each line to make headline
   text easier to read over a busy shot, lower it to show more of the picture. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--deep-rgb),.62) 0%, rgba(var(--deep-rgb),.22) 36%, rgba(var(--deep-rgb),.95) 100%),
    linear-gradient(90deg,  rgba(var(--deep-rgb),.72) 0%, rgba(var(--deep-rgb),.12) 58%, transparent 100%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--sunrise);
}
.hero__body {
  grid-area: 1 / 1; align-self: end; position: relative; z-index: 1;
  padding-block: clamp(2rem, 5vw, 4.5rem);
}
.hero__body h1 { color: var(--text); max-width: 19ch; }
.hero__body .lead { color: var(--text); opacity: .92; margin-top: 1.25rem; max-width: 50ch; }
.hero__body .btn-row { margin-top: 2rem; }

/* Interior page heroes. Shorter than the home page but still full-bleed, so a
   photograph carries the top of every page.                                 */
.hero--page .hero__media { aspect-ratio: 21 / 8; min-height: min(52vh, 480px); }
@media (max-width: 760px) { .hero--page .hero__media { aspect-ratio: 4 / 3; min-height: 0; } }
.hero--page .hero__body .lead { max-width: 56ch; }

/* ==========================================================================
   Film band
   A section with footage running silently behind the words. Used for the
   running-water clip. Markup:

     <section class="section band">
       <video class="band__media" autoplay muted loop playsinline
              poster="..." src="assets/video/water-loop.mp4"></video>
       <div class="band__scrim"></div>
       <div class="wrap"> ...content... </div>
     </section>

   The clip is decoration. Anyone who has reduced motion turned on, or who is
   on a phone where autoplay video costs data, sees the poster frame instead.
   ========================================================================== */
.band { position: relative; overflow: hidden; isolation: isolate; background: var(--deep); }
.band__media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* Bands are much wider than they are tall, so object-fit: cover throws away
   the top and bottom of the source equally. When the subject sits high in the
   frame, that decapitates them. These shift which slice survives the crop.
   Lower percentage keeps more of the TOP of the picture.                     */
.band__media--top    { object-position: 50% 12%; }
.band__media--upper  { object-position: 50% 28%; }
.band__media--bottom { object-position: 50% 82%; }

/* The scrim is four layers stacked, which is what gives the band its depth
   instead of looking like a photo with a flat grey sheet over it:
     1  sky light entering from the top left
     2  sun warming the bottom right
     3  a vignette that darkens the corners and holds the eye in the middle
     4  the black wash that sinks the footage into the page
   Raise any alpha to push the text forward. Drop them to show more footage.

   These numbers are set for the brightest clip in the set, the golden sunrise.
   If you swap in darker footage you can afford to lower the wash in layer 4.  */
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1100px 460px at 10% 0%,   rgba(127,196,240,.14), transparent 64%),
    radial-gradient(1000px 440px at 92% 100%, rgba(242,134,27,.18),  transparent 66%),
    radial-gradient(120% 100% at 50% 50%,     transparent 30%,       rgba(0,0,0,.86) 100%),
    linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.74) 45%, rgba(0,0,0,.92) 100%);
}

/* A faint woven grain over the whole band. This is the texture. It is a single
   inline SVG, so it costs nothing to load and never pixelates.              */
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
.band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sunrise); z-index: 1;
}
.band .wrap { position: relative; z-index: 1; }

/* Body copy inside a band goes up to full brightness. The dimmer secondary
   colour is fine on flat black but loses the fight against moving footage.
   Eyebrows are excluded so they keep their orange. Without the :not() they
   were being repainted white, because this selector outranks .eyebrow.      */
.band p:not(.eyebrow), .band li, .band label { color: var(--text); }

/* Anyone who has reduced motion turned on sees the poster frame instead of a
   moving picture. The band still looks right, it just holds still.          */
@media (prefers-reduced-motion: reduce) { .band__media { display: none; } }

/* ==========================================================================
   Grids and cards
   ========================================================================== */
.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
/* One column on phones. Two on anything wider. Never three, so a set of four
   blocks reads as a clean 2 x 2 instead of an orphaned 3 + 1.               */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: .9rem;
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sunrise); opacity: 0; transition: opacity .3s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: var(--surface-2); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.section--sand .card { background: #05070A; }
.card__num { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; color: var(--sun); }
.card p { max-width: none; }

/* ==========================================================================
   Photo strip
   A full-bleed row of stills. Add or remove <figure> children freely, the row
   divides itself evenly. Captions appear on hover and are always readable to a
   screen reader.
   ========================================================================== */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2px; }
.strip figure { position: relative; margin: 0; overflow: hidden; background: var(--deep); }
.strip img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.82) contrast(1.05);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
/* A veil over every still so photographs from different sources read as one
   set. It is mostly black with a trace of blue at the top, and it lifts on
   hover, which is what makes the row feel alive. Raise the .42 to sink the
   photos further into the page, drop it to show them closer to original.     */
.strip figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,32,52,.55), rgba(0,0,0,.75));
  mix-blend-mode: multiply;
  opacity: .42; transition: opacity .6s var(--ease);
}
.strip figure:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.05); }
.strip figure:hover::after { opacity: .14; }
.strip figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.25rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.94));
  color: var(--text); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
}

/* ==========================================================================
   YouTube cards
   A thumbnail with a play button. The real player only loads on click, which
   is why the page stays fast and YouTube cannot track anyone who does not
   choose to watch.
   ========================================================================== */
.film__frame.yt { cursor: pointer; }
.film__frame.yt img { width: 100%; height: 100%; object-fit: cover; }
.yt__play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sun); color: var(--on-accent);
  border: 0; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.yt__play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.film__frame.yt:hover .yt__play { transform: scale(1.08); background: var(--sun-bright); }
.film__frame.yt iframe { width: 100%; height: 100%; border: 0; }

/* Film cards */
.film { display: flex; flex-direction: column; gap: 1rem; }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #000; border: 1px solid var(--line); border-radius: var(--radius);
}
.film__frame video, .film__frame img, .film__frame iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0;
}
.film__meta {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sun-bright);
}
.film h3 { margin-top: -.25rem; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px), 1fr)); gap: 2rem; }
.stat__n { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.6rem); line-height: 1; }
.stat__n.sun { background: var(--sunrise); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__l { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; margin-top: .5rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }

/* Consent checkbox. Sits beside its label rather than above it, and the
   label carries the full disclosure the carriers require, so it runs long
   on purpose. Do not shorten it to make the layout tidier. */
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: .18rem; flex: none; }
/* Overrides the uppercase mono treatment .field label applies. That style is
   for two-word field names. This label is a legal disclosure and has to be
   readable as a sentence. Declared after .field label so it wins. */
.field label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--text-dim);
}
.field--check label {
  font-family: var(--font-body, inherit); font-size: .8rem; letter-spacing: normal;
  text-transform: none; line-height: 1.55; color: var(--text-dim); font-weight: 400;
}
.field--check input[type="checkbox"] { accent-color: var(--sun); }
.field input, .field textarea, .field select {
  padding: .9rem 1rem;
  background: var(--abyss); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.section--sand .field input, .section--sand .field textarea, .section--sand .field select,
.card .field input, .card .field textarea, .card .field select { background: rgba(255,255,255,.04); }
.field input::placeholder, .field textarea::placeholder { color: #7E8994; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 0; border-color: var(--sun); box-shadow: 0 0 0 3px rgba(242,134,27,.28);
}
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: .85rem; color: var(--text-dim); }

/* Donation amounts */
.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,150px), 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.amount {
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  border-radius: var(--radius); padding: 1.1rem 1rem; text-align: left;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.amount:hover { border-color: var(--sun); }
.amount[aria-pressed="true"] { border-color: var(--sun); background: rgba(242,134,27,.16); }

/* The donate tiers are explanation, not inputs. Kill the hover so they do not
   invite a click that goes nowhere. The amount is chosen on Zeffy. */
.amounts--info .amount { cursor: default; }
.amounts--info .amount:hover { border-color: var(--line); }

/* Full-width primary action. Used for the single Give now button, which
   should be impossible to miss on the page whose only job is that click. */
.btn--wide { display: flex; width: 100%; justify-content: center; text-align: center; }
.amount b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.amount small { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.35; color: var(--text-dim); }

/* ==========================================================================
   Products
   ========================================================================== */
.product { display: flex; flex-direction: column; gap: 1rem; }
.product__img {
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.product__img img { width: 100%; height: 100%; object-fit: cover; }

/* A book cover must not be cropped. object-fit: cover would slice the title off
   a portrait cover sitting in a 4:5 box, so show it whole against a light mat
   the way a shop would photograph it. */
.product__img--book { background: #f2efe9; }
.product__img--book img { object-fit: contain; padding: 6%; }
.product__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .35rem .75rem; border: 1px solid var(--sun); color: var(--sun-bright);
  border-radius: 100px;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--line); margin-bottom: 2.5rem; }
.tab {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .95rem 1.15rem; color: var(--text-dim);
  transition: color .2s var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-image: var(--sunrise) 1; border-bottom: 2px solid var(--sun); }
.tabpanel[hidden] { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* The footer sits on a photograph, the same full-bleed treatment the heroes
   use. Two gradients sit on top of the picture so the type stays readable no
   matter what image you put behind it. To change the picture, change the one
   url() below. To go back to flat colour, delete the url() line.           */
.site-footer {
  background:
    linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.96) 55%, #000 100%),
    url("../img/photos/road-dawn.jpg") center 30% / cover no-repeat,
    #000;
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--sunrise);
}
.site-footer h4 {
  color: var(--text); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.site-footer a { color: var(--text-dim); text-decoration: none; }
.site-footer a:hover { color: var(--sun-bright); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%,230px), 1fr)); }
.footer-links { display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; }
.socials { display: flex; gap: .75rem; margin-top: 1.25rem; }
.socials a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-dim);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.socials a:hover { background: var(--sun); border-color: var(--sun); color: var(--on-accent); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }
.legal {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; line-height: 1.7;
}
.legal p { max-width: 80ch; }
.legal .fine { color: #7E8994; margin-top: .9rem; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: .5rem; top: -3.5rem; z-index: 200;
  background: var(--sun); color: var(--on-accent); padding: .75rem 1.1rem;
  border-radius: var(--radius); text-decoration: none; transition: top .2s var(--ease);
}
.skip-link:focus { top: .5rem; }

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .site-footer, .hero__media, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
}


/* Pull quote inside body copy. Used on the Who We Are history section.
   The orange rule on the left is the only decoration; the size does the rest. */
.pull {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
  padding: .2rem 0 .2rem 1.25rem;
  border-left: 3px solid var(--sun);
  font-family: var(--font-display, inherit);
  font-size: clamp(1.15rem, .9rem + .9vw, 1.65rem);
  line-height: 1.25;
  color: var(--text);
  font-style: normal;
}

/* ==========================================================================
   PRESS LIST
   Deliberately plain. No logos, no cards, no pull quotes. A press page that
   looks like a trophy shelf reads as marketing. A dated list reads as record.
   ========================================================================== */
.press { list-style: none; margin: 0; padding: 0; }
.press__item {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.press__item:last-child { border-bottom: 1px solid var(--line); }
.press__meta {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: .6rem;
}
.press__title { font-size: clamp(1.05rem, 2.1vw, 1.4rem); line-height: 1.25; margin: 0 0 .6rem; }
.press__title a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.press__title a:hover { color: var(--sky); border-bottom-color: currentColor; }
.press__note { color: var(--text-dim); max-width: 62ch; margin: 0; }