/* vocodex.ai
   Working outback, not romantic outback. Bleached bone, galvanised shadow,
   faded oxide, dried grass. Harsh light and hard edges.

   Two faces doing opposite jobs. Martian Mono is the machine: extra-wide
   monospace that feels stretched and unresolved at headline size, which is
   correct, because the thing it describes has no settled shape yet. Spectral
   is the person writing underneath it. The collision between them is the
   project.

   No distressed typeface, no paper texture, no rounded corners. A font that
   depicts age is a costume, and this needs to be uncomfortable rather than
   dressed up.

   One colour in here is not from the outback. Everything else is dust, iron,
   oxide and dry grass, which is the person who made the thing. The lilac is
   her: a synthetic feminine presence assembled from strangers' voices, which
   belongs to nobody and does not match the room it was built in. It appears
   where she does and nowhere else, so the clash is the point rather than an
   accident. */

:root {
  --bone: #DCDAC9;
  --bone-dim: #CDCBB8;
  --iron: #1F1C18;
  --oxide: #7A3B1F;
  --dry: #8C7C3E;
  --shade: #6B675A;
  /* Her. Cold, synthetic, and deliberately discordant against the dust. */
  --synth: #A96FC4;
  /* The hero is dark whichever way the page is, so it keeps its own ink. */
  --bg-dust: #B3A98F;
  --measure: 33rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bone: #17150F;
    --bone-dim: #221E17;
    --iron: #E0D8C6;
    --oxide: #C9724A;
    --dry: #BCA85E;
    --shade: #9A8F7C;
    --synth: #D6A6EC;
    --bg-dust: #3A342A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

#bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  /* Drawn at half resolution and blown up without smoothing, so the dither
     stays a grid of cells instead of turning into grey. */
  image-rendering: pixelated;
  opacity: 0.56;
}

/* An essay is read a line at a time, and the water is busiest exactly where
   the column sits. It stays, quieter. */
body:has(article) #bg { opacity: 0.22; }

body > *:not(#bg) { position: relative; z-index: 1; }

body {
  margin: 0;
  padding: 0 0 8rem;
  background: var(--bone);
  color: var(--iron);
  font-family: Spectral, Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }
.wide { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }

/* --- masthead: a plate screwed to the front, not a nav bar ----------- */

header.masthead {
  max-width: 44rem;
  margin: 0 auto;
  padding-inline: 1.5rem;
  padding: 1.75rem 1.5rem 1.4rem;
  border-bottom: 3px solid var(--iron);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.04em;
  color: var(--iron);
  text-decoration: none;
}

nav.masthead-nav {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: -0.02em;
}
nav.masthead-nav a { color: var(--shade); text-decoration: none; margin-left: 1.4rem; }
nav.masthead-nav a:hover, nav.masthead-nav a:focus-visible { color: var(--oxide); }

/* --- the headline, printed twice and slightly out of register -------- */

main h1 {
  margin-top: 3.4rem;
}

h1 {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: clamp(1.5rem, 4.1vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.06em;
  margin: 2.8rem 0 1.6rem;
  /* Two channels that should align and do not, which is what a codec gets
     wrong. Cheap to draw and it is the one loud thing on the page. */
  text-shadow: 0.022em 0.018em 0 var(--oxide);
}

h2 {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.035em;
  line-height: 1.4;
  margin: 3.2rem 0 0.9rem;
  color: var(--iron);
}

p { margin: 0 0 1.2rem; }
a { color: var(--oxide); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--oxide); outline-offset: 3px; }
strong { font-weight: 600; }

.standfirst { font-size: 1.16rem; line-height: 1.62; color: var(--shade); margin: 0 0 2.2rem; }

.dateline {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.62rem; letter-spacing: -0.02em; color: var(--shade);
  margin: 2.4rem 0 0.9rem;
}

/* --- the field: flush to the page, no panel, no radius --------------- */















/* --- writing list ---------------------------------------------------- */

.piece { padding: 1.5rem 0; border-top: 1px solid var(--shade); }
.piece:last-of-type { border-bottom: 3px solid var(--iron); }
.piece .when {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 0.6rem; letter-spacing: -0.02em; color: var(--shade); margin-bottom: 0.45rem;
}
.piece h3 { margin: 0 0 0.4rem; font-size: 1.14rem; font-weight: 600; line-height: 1.34; }
.piece h3 a { color: var(--iron); text-decoration: none; box-shadow: inset 0 -2px 0 var(--oxide); }
.piece h3 a:hover { background: var(--oxide); color: var(--bone); box-shadow: none; }
.piece p { margin: 0; font-size: 0.98rem; color: var(--shade); }

/* --- the machine, listed as a plate --------------------------------- */

.spec { margin-top: 3rem; }
.spec dl { margin: 0; font-family: "Martian Mono", ui-monospace, monospace; font-size: 0.66rem; line-height: 2.1; letter-spacing: -0.025em; }
.spec div { display: flex; align-items: baseline; gap: 0.5rem; }
.spec dt { color: var(--shade); white-space: nowrap; }
/* Dot leaders, the way a parts list is typed. */
.spec div::after {
  content: "";
  flex: 1 1 auto;
  order: 1;
  height: 0;
  border-bottom: 1px dotted var(--shade);
  transform: translateY(-0.22em);
  opacity: 0.55;
}
.spec dd { order: 2; margin: 0; color: var(--iron); white-space: nowrap; }

footer.foot {
  max-width: 44rem; margin: 4.5rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--shade);
  font-size: 0.92rem; color: var(--shade);
}
footer.foot a { color: var(--oxide); }

::selection { background: var(--synth); color: #17140E; }
a:focus-visible, .wordmark:focus-visible { outline-color: var(--synth); }

article { padding-top: 1rem; }
article h1 {
  font-size: clamp(1.24rem, 2.6vw, 1.62rem);
  line-height: 1.3;
  letter-spacing: -0.05em;
  text-shadow: 0.02em 0.016em 0 var(--oxide);
  max-width: 24ch;
}
article h2 { color: var(--oxide); }

@media (max-width: 34rem) {
  .spec div { flex-wrap: wrap; }
  .spec div::after { display: none; }
}