/* reality-404.com
   ---------------------------------------------------------------------------
   Two materials of equal standing, and the gap that opens between them.

   Prose is set on paper. Every machine-readable record — the seed block, the
   handles — is set on a second, cooler plate. Neither outranks the other and
   neither is given a border: a border separates, and separation is not the
   subject. What is between them is left unfilled, so the layer underneath both
   shows through. That channel runs the height of the page without a break
   while the plates on either side start and stop at every section, which is
   the only way anyone notices it — afterwards.

   The handle plate is not one surface. It is four, with two pixels of the
   under-layer between them: smooth from across the room, fissured up close.

   Where a claim has stopped holding, the gap itself is marked. Nothing is
   marked today. That is the point — the site has to age into it.

   No webfonts: zero external requests, so the page renders identically
   whether or not anything beyond the HTML arrives.
   --------------------------------------------------------------------------- */

:root {
  --col: 27rem;          /* both columns, exactly equal */
  --gap: 3.5rem;
  --pad: 1.5rem;

  /* The under-layer is the darkest of the three. It is never a surface you
     read on — only the depth you glimpse where the two materials fail to meet.
     Paper and plate sit at almost the same lightness and differ in temperature
     instead, so the seam between them is a change of material rather than a
     change of brightness: felt before it is seen. */
  --base:  #e2ddd0;
  --paper: #fbf9f4;      /* material one — prose, warm */
  --plate: #eaefec;      /* material two — record, cool */

  --ink: #17150f;
  --ink-soft: #57534a;
  --ink-faint: #7d7768;
  --plate-ink: #2f3532;
  --plate-faint: #6d7671;
  --accent: #7a2e12;
  --rift: #a8331a;

  --serif: ui-serif, "Iowan Old Style", "Charter", Charter, "Source Serif 4",
           Georgia, "Noto Serif KR", "Apple SD Gothic Neo", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --base:  #0a0a0b;
    --paper: #191710;
    --plate: #1b201f;

    --ink: #e8e4da;
    --ink-soft: #a9a396;
    --ink-faint: #7a7466;
    --plate-ink: #bcc3bd;
    --plate-faint: #737c76;
    --accent: #d9865f;
    --rift: #e0674a;
  }
}

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

body {
  margin: 0;
  padding: 0 1.5rem 6rem;
  background: var(--base);
  color: var(--ink);
  font: 400 1.0625rem/1.62 var(--serif);
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------- skip + nav */

.skip { position: absolute; left: -9999px; }
.skip:focus {
  position: static; display: inline-block; margin: 1rem 0;
  font: 400 0.75rem/1 var(--mono);
}

nav, footer, main, article {
  max-width: calc(var(--col) * 2 + var(--gap));
  margin-inline: auto;
}

nav {
  padding: 2rem 0 3rem;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  display: flex; gap: 1.5rem;
}
nav a { color: var(--ink-faint); text-decoration: none; }
nav a:hover { color: var(--accent); }

/* ------------------------------------------------------------ the grid */

article > header,
article > section {
  display: grid;
  grid-template-columns: var(--col) var(--gap) var(--col);
}
/* The lead has no claim to answer for, so it holds only its own column. */
article > .prose.lead { width: var(--col); }

article > section { margin: 0.75rem 0 0; }

article > section > h2      { grid-column: 1 / -1; grid-row: 1; }
article > section > .prose  { grid-column: 1;      grid-row: 2; }
article > section > .handle { grid-column: 3;      grid-row: 2; }

article > .prose > * { grid-column: 1; }
article > header > .title { grid-column: 1; grid-row: 1; }

/* The gap is a real grid track, so it can be marked when it has to be. */
article > section::before {
  content: ""; grid-column: 2; grid-row: 2;
  justify-self: center; width: 1px;
}
article > section[data-rift="open"]::before {
  background: repeating-linear-gradient(
    to bottom, var(--rift) 0 6px, transparent 6px 13px);
}

/* --------------------------------------------------------- the surfaces */

.prose {
  background: var(--paper);
  padding: var(--pad) var(--pad) calc(var(--pad) - 1.25rem);
}
.prose.lead { padding-top: 2.5rem; }

/* The record plate runs the full height of the section it answers for: equal
   width, equal standing, neither material subordinate. Its contents stay level
   with whatever paragraph is being read, so a claim can be checked against any
   part of its section rather than only the first. */
.handle {
  align-self: stretch; background: var(--plate);
  font-family: var(--mono); font-size: 0.6875rem; line-height: 1.6;
  color: var(--plate-ink);
}
.handle dl { position: sticky; top: 1.5rem; }

/* --------------------------------------------------------------- prose */

h1 {
  font-size: 2rem; line-height: 1.18; font-weight: 600;
  letter-spacing: -0.012em; margin: 0 0 0.6rem; text-wrap: balance;
}
h2 {
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  margin: 0 0 0.75rem; padding: 3.25rem 0 0 var(--pad); text-wrap: balance;
}
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.35rem; }

p { margin: 0 0 1.25rem; }
section p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--ink-faint); text-underline-offset: 0.18em; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }

em { font-style: italic; }
strong { font-weight: 600; }
code { font: 400 0.875em/1 var(--mono); }

blockquote {
  margin: 1.75rem 0; padding-left: 1.25rem;
  border-left: 2px solid var(--base);
  color: var(--ink-soft); font-style: italic;
}
hr { border: 0; height: 1px; background: var(--base); margin: 2.5rem 0; }

.sub { color: var(--ink-soft); font-size: 1.0625rem; margin: 0 0 1.5rem; }
.lede { color: var(--ink-soft); font-style: italic; margin: 0; }
.dates {
  font: 400 0.6875rem/1.5 var(--mono);
  color: var(--ink-faint); letter-spacing: 0.03em; margin: 0 0 2rem;
}

/* --------------------------------------------------- header + seed plate */

article > header { padding-bottom: 0.75rem; }
.title { padding-top: 2.5rem; }
.title h1 { text-wrap: pretty; }
.title .dates { margin-bottom: 1.75rem; }

.artifact {
  grid-column: 3; grid-row: 1; align-self: start;
  background: var(--plate); padding: 1.5rem var(--pad);
  font-family: var(--mono); color: var(--plate-ink);
}
.artifact h2 {
  font: 400 0.5625rem/1 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--plate-faint); margin: 0 0 1.25rem; padding: 0;
}
.artifact dt {
  font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--plate-faint); margin-bottom: 0.1rem;
}
.artifact dd {
  font-size: 0.6875rem; line-height: 1.6; margin: 0 0 0.9rem;
  overflow-wrap: anywhere;
}
.artifact dd:last-child { margin-bottom: 0; }
.artifact a { text-decoration-color: var(--plate-faint); }

dl { margin: 0; }
dt, dd { margin: 0; }

/* --------------------------------------------------------- handle plate */

/* Four plates, not one. From a distance the record is a single surface; the
   two-pixel seams between its fields show the layer underneath. */
.handle dt, .handle dd { padding-inline: var(--pad); }
.handle dt {
  padding-top: 0.85rem;
  font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--plate-faint);
}
.handle dd {
  padding-bottom: 0.85rem; border-bottom: 2px solid var(--base);
  font-size: 0.6875rem; line-height: 1.65; overflow-wrap: anywhere;
}
.handle dd:last-of-type { border-bottom: 0; }
.handle a { text-decoration-color: var(--plate-faint); }

/* ---------------------------------------------------------- hub listing */

/* The hub is one column of prose over one ledger of records: the same two
   materials, stacked rather than faced. */
main > .prose, main > section > .prose, main > header > .prose { width: var(--col); }
main > header { padding-bottom: 0.75rem; }
main > section { margin-top: 0.75rem; }
main > section#nodes > h2 { padding-left: 0; }

ol.nodes, ul.claims { list-style: none; margin: 0; padding: 0; }
.node { margin: 0 0 3.5rem; }
.node h3 { font-size: 1.25rem; letter-spacing: -0.008em; }
.node .dates { margin: 0.35rem 0 1rem; }

/* Each claim is clipped to one line on screen. The full sentence stays in the
   markup — an extractor gets all of it, a person gets an index they can scan.
   Nothing is hidden from one reader that the other is shown. */
ul.claims li {
  font: 400 0.6875rem/1.9 var(--mono);
  color: var(--plate-ink); background: var(--plate);
  padding: 0 var(--pad) 0 calc(var(--pad) + 1.1rem);
  margin-bottom: 2px; position: relative;
}
ul.claims li::before {
  content: "\2192"; position: absolute; left: var(--pad); color: var(--plate-faint);
}
ul.claims a {
  display: block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none;
}
ul.claims a:hover { color: var(--accent); }

.terminal .prose, .terminal { color: var(--ink-soft); font-size: 0.9375rem; }

/* -------------------------------------------------------------- footer */

footer {
  margin-top: 5rem; padding-top: 1.25rem;
  font: 400 0.6875rem/1.6 var(--mono);
  color: var(--ink-faint);
}

/* ------------------------------------------------------------- narrow */

@media (max-width: 60rem) {
  nav, footer, main, article { max-width: var(--col); }
  article > header, article > section { display: block; }
  article > .prose.lead,
  main > .prose, main > section > .prose, main > header > .prose { width: auto; }

  h2 { padding-left: var(--pad); }
  .artifact { margin-top: 2px; }
  .handle { position: static; margin-bottom: 2px; }
  article > section { margin-top: 0; }
  /* Stacked, the channel runs across instead of down. */
  article > section[data-rift="open"] > .handle {
    border-bottom: 1px dashed var(--rift);
  }
  main > .prose > p { max-width: none; }
}

@media (max-width: 34rem) {
  :root { --pad: 1.15rem; }
  body { font-size: 1rem; padding: 0 0.75rem 4rem; }
  h1 { font-size: 1.625rem; }
}