/* Russet — russet-linux.neocities.org
   ------------------------------------------------------------------
   New growth. Scratch the bark off a machine everyone has written off
   and find it not merely alive but green underneath. Hildegard's
   viriditas, rendered in phosphor.

   Grey is the bark. Teal is what is under it. Amber is what still needs
   doing. Nothing on this page is brown, and that is the joke.

   Type, and the grammar of it: GARAMOND NAMES THINGS, VT323 SAYS THINGS.
   Every label, heading and wordmark is EB Garamond — the face Apple ran
   from 1984 to 2002 — in letterspaced small caps. Everything actually
   read is VT323. A 16th-century book face labelling a terminal is a
   strange object; a terminal labelling a terminal is a template.

   Cost of that, accepted deliberately: VT323 has ONE weight and NO
   italic. So emphasis is done the way a VT does it — <strong> is
   brightness, <em> is an underline. Synthesised bold/oblique is
   forbidden anywhere the body face is in use.
   ------------------------------------------------------------------ */

/* Glass TTY VT220 — Viacheslav Slavinsky's trace of the actual DEC VT220 ROM
   bitmaps (github.com/svofski/glasstty). Public domain (Unlicense), so it
   ships with the site rather than being linked. 88KB TTF -> 6.5KB WOFF2.

   It carries 329 glyphs and NONE of the typographic punctuation: no em dash,
   no curly quotes, no ellipsis, no arrow. That is correct — a VT220 had none
   of them either — so the body copy is ASCII punctuation throughout and this
   font never has to fall through mid-sentence. VT323 remains in the stack for
   anything that slips past.

   Do not add a `format("truetype")` fallback: the TTF is 13x larger and every
   browser that reaches this page supports WOFF2. */
@font-face {
  font-family: "Glass TTY VT220";
  src: url("glasstty.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bark:      #0b0f0e;   /* ground: a CRT that is off, but warm */
  --bark-lift: #131917;   /* panels */
  --grey:      #5b5b5b;   /* the dead-looking outside. rules, dormancy */
  --ink:       #c4d1cc;   /* body text — the fourth colour, and necessary:
                             #5b5b5b on this ground is 3.3:1 and cannot
                             carry running text. Deliberately dimmed from the
                             first pass so that --ink-bright below has somewhere
                             to be brighter THAN; a VT gets its emphasis from a
                             real two-level split, not a nudge. */
  --ink-bright:#ffffff;
  --ink-soft:  #9daba6;
  --green:     #00ffcc;   /* viriditas */
  --amber:     #ffbf00;   /* the other signal */

  --glow:      0 0 9px rgba(0, 255, 204, 0.16);
  --glow-soft: 0 0 7px rgba(0, 255, 204, 0.10);

  /* --display names, --body says */
  --display: "EB Garamond", "Iowan Old Style", Garamond, Georgia, serif;
  --body:    "Glass TTY VT220", "VT323", ui-monospace, Menlo, monospace;

  --measure: 40rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bark);
  color: var(--ink);
  font: 400 1.375rem/1.6 var(--body);
  /* phosphor bloom, not a scanline gimmick */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 255, 204, 0.07), transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 105%, rgba(255, 191, 0, 0.04), transparent 70%);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}

.nb { white-space: nowrap; }

::selection { background: var(--green); color: var(--bark); text-shadow: none; }

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

/* ---------- masthead ---------- */

header.masthead {
  padding: 5.5rem 0 3.5rem;
  border-bottom: 1px solid var(--grey);
}

.mark {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.mark svg { display: block; flex: none; filter: drop-shadow(var(--glow-soft)); }

.wordmark {
  font: 400 1.75rem/1 var(--display);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--green);
  text-shadow: var(--glow);
}

h1 {
  font: 400 clamp(2rem, 6vw, 3.2rem)/1.14 var(--display);
  margin: 0 0 1.35rem;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--ink);
}

h1 em {
  font-style: italic;
  color: var(--green);
  text-shadow: var(--glow);
}

.standfirst {
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 36rem;
}

/* ---------- sections ---------- */

main section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--grey);
}

main section:last-child { border-bottom: 0; }

/* The `>` prompt glyph was the single most costume-y element on the page.
   Green + mono + dark ground + glow + a prompt is a template, not a choice. */
h2 {
  font: 400 1.125rem/1 var(--display);
  font-variant: small-caps;
  letter-spacing: 0.2em;
  color: var(--green);
  margin: 0 0 1.75rem;
}

h3 {
  font: 400 1.5rem/1.3 var(--display);
  font-variant: small-caps;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin: 2.5rem 0 0.7rem;
}

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

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-shadow: var(--glow); }

/* VT323 has no bold and no italic. Do not ask the browser to fake either. */
strong {
  font-weight: 400;
  color: var(--ink-bright);   /* bold-as-brighter, the actual VT convention */
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.28);
}

em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* h1 is Garamond and has a genuine italic — let it use it. */
h1 em { font-style: italic; text-decoration: none; }

code {
  font: 400 1em/1 var(--body);
  color: var(--amber);
  letter-spacing: 0.02em;
}

/* ---------- the thesis ---------- */

blockquote.thesis {
  margin: 0;
  padding: 1.75rem 0 1.75rem 1.75rem;
  border-left: 2px solid var(--grey);
  font: 400 clamp(1.5rem, 4vw, 2rem)/1.45 var(--body);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* the scratch: grey above, green underneath */
blockquote.thesis .turn {
  color: var(--green);
  text-shadow: var(--glow);
}

/* ---------- the stanza ---------- */

ul.stanza {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--bark-lift);
  border-left: 2px solid var(--green);
  font: 400 1.5rem/1.8 var(--body);
  color: var(--green);
  text-shadow: var(--glow-soft);
  letter-spacing: 0.03em;
}

ul.stanza li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- status ---------- */

/* A grid, not a flex row: four uneven-width values wrapped into a ragged
   second line and read as breakage rather than as a status bar. */
.status-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
  margin: 0 0 2rem;
  padding: 0;
}

@media (max-width: 34rem) {
  .status-line { grid-template-columns: repeat(2, 1fr); }
}
.status-line dd { margin: 0; }

.status-line dt {
  font: 400 1.0625rem/1 var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--grey);
  margin-bottom: 0.4rem;
}

.status-line .v {
  /* VT323 is a wide face: "31 Aug 2026" at 1.75rem overran a quarter of the
     40rem measure and wrapped. Sized to the longest value, not to taste. */
  font: 400 1.5rem/1.1 var(--body);
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-line .v.pass  { color: var(--green); text-shadow: var(--glow); }
.status-line .v.todo  { color: var(--amber); }

/* bark, and the green coming through it */
.meter {
  height: 8px;
  background: var(--grey);
  overflow: hidden;
  margin: 0 0 0.9rem;
}

.meter i {
  display: block;
  height: 100%;
  background: var(--green);
  box-shadow: var(--glow);
}

.caption {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- hardware table ---------- */

.table-scroll { overflow-x: auto; margin: 0 -1.5rem; padding: 0 1.5rem; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 1.1875rem;
}

th, td {
  text-align: left;
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid #222a28;
  vertical-align: top;
}

thead th { border-bottom-color: var(--grey); }

th {
  font: 400 1.0625rem/1 var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--grey);
}

td:last-child { color: var(--ink-soft); }

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

footer {
  padding: 3.25rem 0 5.5rem;
  border-top: 1px solid var(--grey);
  color: var(--ink-soft);
}

footer p { margin-bottom: 0.7rem; }

footer .colophon {
  margin-top: 2.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--grey);
}

.nowhere {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--amber);
  color: var(--amber);
  font: 400 1.0625rem/1.3 var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
}