/*
  r4n.family landing page styles.

  Identity: Atlantic Seaboard — see IDENTITY.md and brand/tokens.css in the
  r4n-family repo. Every visual decision is a custom property in :root so this
  block alone can retheme the page.

  LIGHT-ONLY BY DESIGN. IDENTITY.md §3.4: a surface goes dark only when its
  primary job is viewing photographs or video. A landing page is a reading
  surface. Reinstating dark here is an amendment to §3.4, not a local decision.

  SIZING NOTE — do not reintroduce fixed px on the mark or portrait. Both are
  sized in `em` so they scale with root font-size. A fixed-px element beside an
  unbreakable string (`r4n.family`) inside a flex row caused a WCAG 2.2 SC 1.4.4
  failure at 200% text zoom: horizontal scrolling at a 320px viewport. The
  `overflow-wrap: anywhere` rules below are the other half of that fix.

  Verified contrast: fg/bg 13.34:1 · muted/bg 4.54:1 · accent/bg 6.72:1 ·
  accent-fg/accent 6.72:1 · focus ring (slate) on bg 13.34:1. All WCAG 2.2 AA.
*/

:root {
  --bg: #efeee9; /* limestone  */
  --fg: #1e252b; /* slate      */
  --muted: #636d77; /* sea grey   */
  --accent: #1f5c4b; /* atlantic   */
  --accent-hover: #17453a; /* atlantic, darkened — hover must not REDUCE contrast */
  --accent-fg: #efeee9; /* limestone on atlantic — 6.72:1 */
  --rule: rgb(30 37 43 / 0.28); /* raised from .16: the old value composited to 1.36:1 */

  --font-stack: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica,
    Arial, sans-serif;
  --font-display: "Iowan Old Style", Baskerville, Georgia, serif;
  --measure: 34rem;
  --step: 1.5rem;
  --radius: 4px;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  /* NOT var(--step): a rem padding grows with root font-size and ate 96px of a
     320px viewport at 200% zoom. Capped against the viewport instead. */
  padding: clamp(0.75rem, 4vw, 1.5rem);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-stack);
  line-height: 1.5;
}

.shell {
  width: 100%;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--step);
}

/* ---- lockup: mark + wordmark. The only element offset from the spine. ---- */
.masthead {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

.mark {
  flex: none;
  /* em so it scales with text, vw-capped so it cannot dominate a narrow
     viewport at high zoom. Never a bare px value — see SIZING NOTE. */
  width: min(3.4em, 18vw);
  height: auto;
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere; /* `r4n.family` has no break opportunity */
}

/* ---- the families ---- */
.lede {
  margin: 0;
  font-size: 1.0625rem;
  overflow-wrap: anywhere;
}

/* ---- dedication ---- */
.dedication {
  display: flex;
  align-items: center;
  gap: 0.9em;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}

.portrait {
  flex: none;
  width: min(4em, 20vw); /* em + vw cap, NOT px */
  height: min(4em, 20vw);
  border-radius: 50%; /* avatars may be circular — DESIGN.md §4 */
  object-fit: cover;
}

.dedication p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
  /* min-width:0 is load-bearing. A flex child defaults to min-width:auto, which
     refuses to shrink below its content and forced 384px into a 305px viewport
     at 200% zoom. Do not reintroduce a rem min-width or flex-basis here. */
  min-width: 0;
  flex: 1 1 auto;
}

.dedication a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

.dedication a:hover {
  text-decoration-thickness: 2px;
}

/* ---- action ---- */
.actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.action {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* DESIGN.md §8 minimum target */
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-fg);
  text-decoration: none;
  font-weight: 600;
}

.action:hover {
  background: var(--accent-hover); /* darken, never fade — fading lowers contrast */
}

/* Ring in SLATE, not the button's own colour: an atlantic ring on an atlantic
   fill is 1:1 where they meet, rescued only by the offset. DESIGN.md §8. */
.action:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 2px;
}

/* ---- footer ---- */
.footer {
  border-top: 1px solid var(--rule);
  padding-top: var(--step);
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.footer p {
  margin: 0;
}

.footer p + p {
  margin-top: 0.5rem;
}

/* The footer holds this page's only inline link, and there is no global `a` rule
   here — unstyled it renders default browser blue, which passes contrast by luck
   (8.09:1 on limestone) but belongs to no palette we own.

   The underline is load-bearing, not decoration: the link sits in --muted body
   text, and atlantic against sea grey is 1.48:1, so colour alone cannot
   distinguish it. WCAG 1.4.1 needs the non-colour cue. Left as the browser
   default underline rather than restyled.

   Atlantic is 6.72:1 on limestone, and the hover DARKENS to 9.28:1 — same rule
   as .action:hover, where hover must never reduce contrast. */
.footer a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.footer a:hover {
  color: var(--accent-hover);
}

/* Ring in slate for the same reason as .action:focus-visible — an atlantic ring
   on atlantic text is invisible where the two meet. */
.footer a:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Genuinely useful for the stated audience — readers at 200–400% zoom. */
@media (prefers-contrast: more) {
  :root {
    --muted: #1e252b;
    --rule: rgb(30 37 43 / 0.5);
  }
}