:root {
  --bg: #0e0e0e;
  --text: #d6d6d6;
  --bright: #f2f2f2;
  --muted: #7a7a7a;
  --rule: #262626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;

  /* Centers the column in the viewport. `safe center` keeps the top of the
     content reachable when a long page overflows; the plain `center` above
     it is the fallback for browsers that don't parse the safe keyword. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
}

.page {
  /* ch, not rem: the measure is tied to the character width, so it stays
     ~68 characters if the font size changes. */
  max-width: 68ch;
  width: 100%;
  margin: 0 auto;
  padding: 4rem 1.75rem;
}

header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin: 0 0 2.5rem;
}

header h1 { margin: 0; }

header a {
  font-size: 0.9em;
  color: var(--muted);
  text-decoration-color: transparent;
}

header a:hover {
  color: var(--bright);
  text-decoration-style: solid;
  text-decoration-color: var(--rule);
}

header a.home {
  font-size: 1.05em;
  color: var(--bright);
}

h1 {
  font-size: 1.05em;
  font-weight: normal;
  color: var(--bright);
  margin: 0 0 2.5rem;
}

h2 {
  font-size: 0.85em;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3rem 0 1rem;
}

p { margin: 0 0 1.4rem; }

/* Links wear a perforated underline — a tear line, like the dotted rule on a
   receipt. Engaging with one makes the perforation solid, as though the stub
   has been torn off. The colour is swapped rather than the decoration added,
   so the underline always occupies its space and nothing shifts on hover. */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

a:hover {
  color: var(--bright);
  text-decoration-style: solid;
  text-decoration-color: var(--muted);
}

ul.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.list li {
  display: flex;
  gap: 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

ul.list li:last-child { border-bottom: none; }

.date {
  flex: 0 0 8ch;
  color: var(--muted);
  font-size: 0.9em;
  padding-top: 0.15rem;
}

.note {
  display: block;
  color: var(--muted);
  font-size: 0.95em;
}

@media (max-width: 480px) {
  .page { padding: 3rem 1.25rem; }
  ul.list li { flex-direction: column; gap: 0.2rem; }
  .date { flex: none; }
}

.postdate {
  margin-top: -2rem;
  margin-bottom: 2.5rem;
  font-size: 0.9em;
  color: var(--muted);
}

/* --- in-place view switching (home page) --- */

[hidden] { display: none !important; }

/* the name doubles as the "back to home" trigger, but keeps heading styling */
header h1 a {
  color: inherit;
  font-size: inherit;
  text-decoration-color: transparent;
}

header h1 a:hover {
  color: var(--bright);
  text-decoration-style: solid;
  text-decoration-color: var(--rule);
}

/* current view marker — scoped to header's direct links so the h1 is exempt */
header > a.is-active {
  color: var(--text);
  text-decoration-style: solid;
  text-decoration-color: var(--rule);
}

/* a view's first heading sits directly under the header, so drop its top gap */
[data-view] > :first-child { margin-top: 0; }

/* Hides the finished text for the instant before scramble.js writes its first
   frame, so the real copy never flashes. visibility (not display) keeps the
   layout, and the inline head script self-clears after 1.5s if JS fails. */
.pre-scramble main { visibility: hidden; }