/* l1ghthouse.com — site shell and the phone stack.
   styles.css is the design drop's own stylesheet, taken verbatim; nothing in
   this file changes a value it draws. What is here is either page chrome the
   drop does not cover (body ground, routing) or the narrow-viewport behaviour
   the drop omits — it ships no media queries at all. */

body { margin: 0; background: #f6f6f4; }
a { color: #2F55B5; }
a:hover { color: #1f3d8a; }

/* The router toggles these with the hidden attribute. The sections inside
   carry inline display values, so make the wrapper's hiding unconditional. */
.page[hidden], #lightbox[hidden] { display: none !important; }

/* Without JS there is no router, so show every page rather than a blank screen. */
.no-js .page[hidden] { display: block !important; }
.no-js #lightbox { display: none !important; }

/* ── the phone stack ──────────────────────────────────────────────────────
   The drop's two-column grids have a hard minimum on one track, so on a phone
   the prose track collapses to ~40px and the page overflows sideways. Stack
   them instead. Type, colour, rules and spacing are all left as drawn. */
@media (max-width: 860px) {
  .cols {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  /* The testimony and mission sidebars are sticky against a tall column; once
     stacked they are just a heading above the prose. */
  .cols > div[style*="sticky"] {
    position: static !important;
  }
  /* The archive plate is a 300px column beside the text; stacked, it should
     not take the full width of a phone. */
  .cols > figure { max-width: 340px; margin-inline: auto !important; }

  /* The home three-up collapses on its own, but its dividers and padding are
     drawn for side-by-side columns. */
  .trio > article {
    padding: 32px 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, #201f1d 16%, transparent) !important;
  }
  .trio > article:last-child { border-bottom: 0 !important; }
}

/* Justified text needs a measure to justify against. Below roughly 34 characters
   it opens rivers and strands single words, so let it set ragged-right. */
@media (max-width: 600px) {
  p[style*="justify"] { text-align: left !important; }
}

/* ── "Why do we ask for donations?" — the link and its pop-up ─────────────
   From the drop `why-donate-link-and-popup.html` (12 Sep 2026), applied as
   drawn: its own type scale, its own reds and blues, its own surface.

   Three things about the drop could NOT be taken verbatim, and each would
   have failed SILENTLY behind this site's CSP:

   1. It loads Cormorant + EB Garamond from fonts.googleapis.com. `style-src`
      does not allow that origin and `font-src` is 'self', so the link and the
      font files are both blocked — the dialog would have quietly rendered in
      Georgia. The faces are self-hosted below instead, the way this site
      already hosts Cormorant and Lora. It also keeps the "no third party"
      promise: a Google Fonts request hands Google every visitor's IP.
   2. Its behaviour ships as an inline <script>. `script-src` allows exactly
      ONE inline script, by sha256 hash. The handler lives in app.js instead.
   3. Its EB Garamond 400 and 600 are ONE variable file — Google's own CSS
      declares both weights against an identical URL, and the two downloads
      were byte-for-byte identical (md5 f12bc30c…). Declared as a 400–600
      range over one file per subset rather than shipped twice under names
      that would each claim a static weight. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-400-600.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/eb-garamond-latin-ext-400-600.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The site's self-hosted Cormorant is upright only; the drop sets the verse in
   italic, which would otherwise be a synthesised slant. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin-ext-400-italic.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.why-link{font-family:'EB Garamond',Georgia,serif;font-size:9.5px;line-height:1.5;color:#2f5aa8;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;}
.why-link:hover{color:#b3261e;}
.why-link:focus-visible{outline:2px solid #2f5aa8;outline-offset:2px;}

.why-backdrop{position:fixed;inset:0;background:rgba(29,29,31,.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:50;}
.why-backdrop.is-open{display:flex;}

.why-dialog{position:relative;background:#fbfaf8;border:1px solid #d5d9e2;border-top:3px solid #b3261e;border-bottom:2px solid #2f5aa8;max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:30px 28px 28px;font-family:'EB Garamond',Georgia,serif;color:#1d1d1f;box-sizing:border-box;}
.why-close{position:absolute;top:12px;right:12px;border:0;background:none;font-family:'EB Garamond',serif;font-size:18px;line-height:1;color:#6b7280;cursor:pointer;padding:4px 8px;}
.why-close:hover{color:#1d1d1f;}

.why-kicker{display:flex;align-items:center;gap:8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;}
.why-kicker .l{color:#b3261e;}
.why-kicker .rule{flex:1;height:1px;background:#e5b8b3;}
.why-kicker .r{color:#4f6a9e;}

.why-title{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:28px;line-height:1.15;margin:14px 0 16px;}

.why-dialog p.body{font-size:12.5px;line-height:1.6;margin:0 0 10px;text-wrap:pretty;}
.why-dialog p.body.last{margin-bottom:20px;color:#4a4a4c;}
.why-dialog p.body strong{color:#1d1d1f;}

.why-actions{display:flex;gap:10px;flex-wrap:wrap;}
.why-btn{display:inline-block;text-align:center;border:1px solid #b3261e;background:#fbfaf8;color:#b3261e;padding:9px 18px;font-family:'EB Garamond',serif;font-size:11px;text-decoration:none;cursor:pointer;}
.why-btn:hover{background:#b3261e;color:#fbfaf8;}
.why-btn-ghost{border:1px solid #c9cdd6;background:#fbfaf8;color:#4a4a4c;padding:9px 18px;font-family:'EB Garamond',serif;font-size:11px;cursor:pointer;}
.why-btn-ghost:hover{border-color:#4a4a4c;}
.why-btn:focus-visible,.why-btn-ghost:focus-visible,.why-close:focus-visible{outline:2px solid #b3261e;outline-offset:2px;}

/* ⚠️ ONE correction to the drop, and it is a collision, not a preference.
   The × is absolutely positioned 12px from the dialog's edge while the dialog
   pads its content by 28px, so the button's box reaches 10.8px INTO the
   content column — straight over the end of "READ THIS FIRST". Measured at
   1280, 390 and 360: the overlap is 10.8 x 8px at every width, so this is the
   drop's own geometry and not the phone stack. Left alone, the last letters of
   the kicker are a close button.
   The kicker's right label stops clear of it instead. Nothing the drop draws —
   type, colour, the rule, the × itself — changes. */
.why-kicker{padding-right:22px;}