/* ─────────────────────────────────────────────────────────────────────────
   base.css — tokens, reset, typography.

   Palette is sampled from the portrait: a farm path between rows of greens,
   overcast sky, and a handful of zinnias in the corner. The pink accent is
   those zinnias, softened for interface use.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* paper & ink */
  --paper:      #FAF7F3;
  --paper-warm: #F3EEE7;
  --ink:        #2A2724;
  --ink-soft:   #6E6862;
  --ink-faint:  #9A938B;
  --rule:       #E4DDD4;

  /* pink — rationed. orb, prompt, cursor, hover hairlines, send, flowers. */
  --pink:       #D98F9E;
  --pink-deep:  #B96C7C;
  --pink-soft:  #F2D8DD;
  --zinnia:     #E0619A;
  --pink-glow:  rgba(217, 143, 158, .38);

  /* the field, straight from the photograph */
  --sky-high:   #C9C8C4;
  --sky-low:    #E9E4DC;
  --treeline:   #333A2C;
  --brassica:   #7C8F72;
  --brassica-d: #5C6E56;
  --soil:       #A89078;
  --soil-light: #BFA98F;
  --marigold:   #E8B93F;

  /* the shared measure: portrait and poem are locked to this exact width */
  --frame: clamp(272px, 31vw, 440px);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, "Segoe UI", Inter, Helvetica, Arial,
           sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

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

/* `hidden` must never lose an argument. Any rule setting `display` on the same
   element at equal specificity would otherwise win on source order and leave
   the element on screen — which is how the garden ended up stacked under the
   bio, both panels visible at once. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;              /* the ritual owns the viewport */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* once the visitor is inside, let the page scroll again */
body[data-stage="site"] { overflow: auto; }

img { max-width: 100%; height: auto; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--pink-soft); color: var(--ink); }

/* small caps label — the Kinfolk workhorse */
.label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--ink-soft);
}

/* visible only to assistive tech */
.poem-a11y,
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 1.5px solid var(--pink-deep);
  outline-offset: 3px;
  border-radius: 2px;
}