/* 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; }
}