/* THE VALLEY SHELL — what every hub page inherits (index, resident,
   transmissions). Depends on tokens.css. Page-specific rules stay in the page.

   Nothing here renames an existing class or id: the three pages carry live
   JavaScript (the interview's chat loop, the transmissions gate) and a look
   pass that breaks a working machine is not a look pass. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font-land);
  line-height: var(--lh-body);
  overflow-x: hidden;
  /* The ground is not flat black: a slow warmth gathers at the bottom, the way
     the horizon holds light long after the sky has let go. Fixed, so it reads
     as a place rather than a gradient sliding past. */
  background-image: radial-gradient(120% 70% at 50% 118%, rgba(200, 116, 58, 0.13), transparent 62%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ── the land's voice ──────────────────────────────────────────────── */
/* DELIBERATELY RESTRAINED. The first version of this file set h1/h2/p sizing
   globally and broke both pages that already had layouts of their own — the
   Resident's header overflowed its line and the interview's chat ballooned. A
   shared shell earns its place by giving pages a GROUND, two VOICES and common
   FURNITURE; it does not get to re-typeset a page that already works. Pages opt
   into the display treatment with .valley-display. */

h1, h2, h3 { font-weight: normal; line-height: var(--lh-tight); }

.valley-display {
  font-size: var(--t-display);
  letter-spacing: var(--track-wide);
  text-indent: var(--track-wide);   /* letterspacing pushes the last letter out */
}

.lead { font-size: var(--t-lead); }
p.dim, .sub { color: var(--dim); }

a { color: var(--ember); text-decoration: none; border-bottom: 1px solid rgba(200, 116, 58, 0.35); }
a:hover { color: var(--ember-lift); border-bottom-color: var(--ember-lift); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

/* ── the machine's voice ───────────────────────────────────────────── */
/* Coordinates, transmission numbers, gate labels, anything the registry itself
   says. The seam between the land and the machine, made legible. */

.coords, .tno, .eyebrow, .machine, .stamp {
  font-family: var(--font-machine);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--dim);
}

/* ── the horizon: the valley's one recurring mark ──────────────────── */

.horizon {
  height: 1px;
  border: 0;
  background: var(--horizon);
  margin: var(--s5) auto;
  max-width: var(--measure);
}

/* A header that carries its own horizon needs no separate element. */
header.valley {
  padding: var(--s5) var(--gutter) var(--s4);
  text-align: center;
  position: relative;
}
header.valley::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--horizon);
}

/* ── shared furniture ──────────────────────────────────────────────── */

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.btn {
  font-family: var(--font-machine);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  background: none;
  color: var(--ember);
  border: 1px solid var(--ember);
  padding: 0.75rem 1.7rem;
  cursor: pointer;
  min-height: 44px;              /* a thumb, not a mouse */
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--ember); color: var(--sky); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn:hover[disabled] { background: none; color: var(--ember); }

input, textarea {
  font-family: var(--font-land);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--sky-lift);
  border: var(--hairline);
  padding: 0.7rem 0.9rem;
  width: 100%;
  min-height: 44px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }

/* NAMED .valley-card, not .card, and the reason matters: resident.html already
   defines .card as a small italic footer note, and the shell's version was
   quietly wrapping it in a bordered panel. A shared stylesheet does not get to
   redefine a class the pages already own — it prefixes its own. */
.valley-card {
  background: var(--sky-lift);
  border: var(--hairline);
  border-left: 2px solid var(--ember);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
}

footer {
  border-top: var(--hairline);
  margin-top: var(--s6);
  padding: var(--s4) var(--gutter);
  text-align: center;
  color: var(--faint);
  font-family: var(--font-machine);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
}
footer a { color: var(--dim); border-bottom-color: rgba(154, 148, 138, 0.3); }

/* ── the phone, which is where most of this will be read ───────────── */

@media (max-width: 34rem) {
  .valley-display { letter-spacing: 0.22em; text-indent: 0.22em; }
  .valley-card { padding: var(--s3); }
}


/* ── narrow screens: letterspacing is the thing that overflows ─────── */
/* Caught on a 328px pane: "TRANSMISSIONS" at 0.4em tracking ran off the right
   edge. Wide tracking is the valley's signature and it is also the first thing
   to break on a small phone, so it tightens as the screen narrows. `body h1`
   outranks the pages' own bare `h1` rules without resorting to !important. */
@media (max-width: 26rem) {
  body h1 {
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    overflow-wrap: break-word;
  }
  body .coords, body .tno { letter-spacing: 0.12em; }
}
@media (max-width: 20rem) {
  body h1 { letter-spacing: 0.06em; text-indent: 0.06em; }
}

/* ── paper ─────────────────────────────────────────────────────────── */
/* Someone will print the valley eventually. It should not cost them a cartridge
   of black ink, and it should still be readable. */

@media print {
  body { background: #fff; color: #000; background-image: none; }
  a { color: #000; }
  .horizon, header.valley::after { background: #000; }
  .valley-card { background: #fff; border: 1px solid #000; }
  footer { border-top: 1px solid #000; color: #000; }
}