/* ==========================================================================
   Still Seeding — lxnaydesign.net
   One stylesheet for the whole site. Hand-written. No build step, no
   framework, no JavaScript, no third-party requests. Tokens per PLAN.md §2.

   The governing rule: colour encodes time, not taste.
     gold  = the record (a dated, fixed fact)
     moss  = still true / still shipping
     rust  = ended / actively wrong now
   Nothing else on this site is coloured, and colour is never the only
   signal: every block also carries its rule and its date stamp.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root{
  color-scheme: light dark;

  --paper:    #F4F0E4;  /* warm bone, like a printed manual   */
  --paper-2:  #EAE5D4;  /* record blocks, tables, sources box */
  --ink:      #17181A;  /* body text — never #000             */
  --ink-2:    #565A5E;  /* rail, metadata, captions           */
  --rule:     #DCD5C2;  /* hairlines; the only divider        */
  --gold:     #B0801F;  /* rules, marks, underlines ONLY      */
  --gold-ink: #7A5A12;  /* gold as text (rail, chips)         */
  --rust:     #8E3A22;  /* ended / EOL / actively wrong       */
  --moss:     #46603F;  /* shipping / still true              */

  /* Two knobs own the layout. Every vertical margin is a multiple of --lh. */
  --lh: 1.7rem;
  --measure: 64ch;   /* text column      */
  --wide: 84ch;      /* ladders, tables  */
  /* The rail is nominally 12ch, but it is expressed in rem on purpose: `ch`
     resolves against each element's own font, and the rail holds 11px mono
     inside a 19px serif column. In `ch` the stamps would land ~35px right of
     the column they are supposed to align with. */
  --rail: 6rem;      /* the chronology gutter, ~12ch of body serif */

  /* Newsreader and Departure Mono are the intended faces, both OFL, to be
     self-hosted and subset to Latin (see /colophon/). Until those files are
     served from our own origin the system stacks below carry the site. No
     font is ever loaded from a third party. */
  --serif: Newsreader, "Iowan Old Style", "Palatino Linotype", Palatino,
           Georgia, "Times New Roman", serif;
  --mono-ui: "Departure Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
             "DejaVu Sans Mono", monospace;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono",
          monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#121311; --paper-2:#1A1B18; --ink:#E7E3D7; --ink-2:#9A9A92;
    --rule:#2A2C27; --gold:#DCAE4F; --gold-ink:#E2BC6C;
    --rust:#D2765A; --moss:#93B183;
  }
}

/* --- 2. Base ------------------------------------------------------------ */

*, *::before, *::after{ box-sizing: border-box }

html{
  font-size: 19px;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 640px){ html{ font-size: 17px } }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: var(--lh);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* Links are ink with a gold underline. There is no blue link text anywhere
   on this site. Visited links drop to --ink-2 so a reader working through
   the archive can see where they have been. */
a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}
a:hover, a:focus{ text-decoration-thickness: 2px }
a:visited{ color: var(--ink-2) }
a:focus-visible{
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}

p, ul, ol, dl, table, figure, blockquote{ margin: 0 0 var(--lh) }
li{ margin-bottom: calc(var(--lh) / 4) }

h1, h2, h3{
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: calc(var(--lh) * 2) 0 var(--lh);
}
h1{ font-size: 1.9rem; margin-top: 0 }
h2{ font-size: 1.35rem }
h3{ font-size: 1.1rem }

strong{ font-weight: 600 }
em{ font-style: italic }

code, kbd, samp{ font-family: var(--mono); font-size: 0.85em }

hr{
  border: 0;
  border-top: 1px solid var(--rule);
  margin: calc(var(--lh) * 2) 0;
}

::selection{ background: var(--paper-2) }

.skip{
  position: absolute;
  left: -9999px;
}
.skip:focus{
  left: 0; top: 0; z-index: 10;
  display: block;
  padding: calc(var(--lh) / 3) calc(var(--lh) / 2);
  background: var(--paper-2);
}

/* --- 3. Layout: the chronology gutter ----------------------------------- */

/* On screens >= 1000px the text column is not centred: it sits to the right
   of a 12ch left rail, and datable paragraphs put a real <time> element in
   that rail. Below 1000px the rail collapses and the date renders inline. */

.shell{
  max-width: calc(var(--rail) + var(--wide));
  margin: 0 auto;
  padding: 0 calc(var(--lh) / 1.5);
}

.col{
  max-width: var(--measure);
  margin-left: 0;
}
.wide{
  max-width: var(--wide);
  margin-left: 0;
}

@media (min-width: 1000px){
  .col, .wide{ margin-left: var(--rail) }
}

.beat{ position: relative }
.beat > time{
  display: block;
  font: 400 11px/var(--lh) var(--mono-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
@media (min-width: 1000px){
  .beat > time{
    position: absolute;
    left: calc(var(--rail) * -1);
    width: calc(var(--rail) - 1.5rem);
    text-align: right;
  }
}

/* --- 4. Masthead and nav ------------------------------------------------ */

.masthead{
  border-bottom: 1px solid var(--rule);
  padding: calc(var(--lh) * 1.5) 0 var(--lh);
  margin-bottom: calc(var(--lh) * 1.5);
}

.wordmark{
  margin: 0;
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.wordmark a{
  text-decoration: none;
  color: var(--ink);
}
.wordmark a:visited{ color: var(--ink) }

/* The domain is never hidden: a reader arriving from a 2006 forum link must
   see in one glance that they are at the address they clicked. */
.domain{
  display: block;
  margin-top: calc(var(--lh) / 4);
  font: 400 11px/1.4 var(--mono-ui);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
}

/* The wordmark never appears without the tagline adjacent to it. */
.tagline{
  max-width: 58ch;
  margin: calc(var(--lh) / 2) 0 var(--lh);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--lh) / 1.5);
}
.nav li{ margin: 0 }
.nav a{
  font: 400 12px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.nav a[aria-current="page"]{
  text-decoration-thickness: 2px;
  color: var(--gold-ink);
}

/* --- 5. Article furniture ----------------------------------------------- */

/* 5.1 Record header — what this page is, dated, sourced. */
.record-header{
  border: 1px solid var(--rule);
  padding: calc(var(--lh) / 2) calc(var(--lh) / 1.5);
  margin: 0 0 calc(var(--lh) * 1.5);
  font: 400 12px/1.5 var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.record-header dl{
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9ch, max-content) 1fr;
  gap: calc(var(--lh) / 4) calc(var(--lh) / 2);
}
.record-header dt{ color: var(--gold-ink) }
.record-header dd{ margin: 0 }

/* 5.2 Record block — anything taken from the archive AS A FACT is mono on
   paper-2 with a gold left rule. Our own prose is always serif. The rule is
   absolute, and it is design doing compliance work: a reader can see that we
   are citing a record, not reproducing one. */
.record{
  margin: var(--lh) 0;
  padding: calc(var(--lh) / 2) calc(var(--lh) / 1.5);
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  font: 400 13px/1.5 var(--mono);
  overflow-wrap: anywhere;
}
.record p{ margin: 0 0 calc(var(--lh) / 3) }
.record p:last-child{ margin-bottom: 0 }

/* 5.3 Provenance — the line we never let a reader miss. */
.provenance{
  border-top: 1px solid var(--gold);
  padding-top: calc(var(--lh) / 2);
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* 5.4 Status chip. Colour is never the only signal: the word is in the chip. */
.chip{
  display: inline-block;
  white-space: nowrap;
  font: 400 11px/1.6 var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 0 .5ch;
}
.chip::before{
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: .6ch;
  vertical-align: 0.05em;
  background: var(--ink-2);
}
.chip.is-shipping::before{ background: var(--moss) }
.chip.is-ended::before{ background: var(--rust) }
.chip.is-shipping{ color: var(--moss) }
.chip.is-ended{ color: var(--rust) }

/* 5.5 The ladder — version and timeline tables, hairline-ruled, breaking out
   wider than the text measure. Comparison tables are a primary content type
   here, so they get designed rather than defaulted. */
.ladder{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ladder caption{
  text-align: left;
  font: 400 11px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
  padding-bottom: calc(var(--lh) / 4);
}
.ladder th, .ladder td{
  text-align: left;
  vertical-align: top;
  padding: calc(var(--lh) / 3) calc(var(--lh) / 3) calc(var(--lh) / 3) 0;
  border-bottom: 1px solid var(--rule);
}
.ladder thead th{
  font: 400 11px/1.4 var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold);
}
.ladder tbody th{ font-weight: 600 }
.ladder .num{ font-family: var(--mono); font-size: 0.85em; white-space: nowrap }
.table-scroll{ overflow-x: auto }

/* 5.6 Standing — the condition report that closes every article. */
.standing{
  border-top: 2px solid var(--rust);
  padding-top: calc(var(--lh) / 2);
  margin: calc(var(--lh) * 2) 0;
}
.standing h2{
  font: 400 12px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
  margin: 0 0 calc(var(--lh) / 2);
}
.standing dl{
  margin: 0;
  display: grid;
  grid-template-columns: minmax(14ch, max-content) 1fr;
  gap: calc(var(--lh) / 3) calc(var(--lh) / 2);
  font-size: 0.9rem;
}
.standing dt{
  font: 400 11px/1.6 var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.standing dd{ margin: 0 }

/* 5.7 Sources & method. */
.sources{
  border-top: 1px solid var(--rule);
  padding-top: calc(var(--lh) / 2);
  margin: calc(var(--lh) * 2) 0;
  font-size: 0.9rem;
}
.sources h2{
  font: 400 12px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
  margin: 0 0 calc(var(--lh) / 2);
}

/* --- 6. Front-page archive list ----------------------------------------- */

/* blogcraft §2(a): the complete archive, one line per article, date in the
   same rail the articles use. No excerpts, no thumbnails, no pagination. */
.archive{
  margin: 0;
  padding: 0;
  list-style: none;
}
.archive > li{
  position: relative;
  margin: 0;
  padding: calc(var(--lh) / 2) 0;
  border-bottom: 1px solid var(--rule);
}
.archive .stamp{
  display: block;
  font: 400 11px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold-ink);
}
.archive .title{
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
}
.archive .promise{
  display: block;
  margin-top: calc(var(--lh) / 6);
  font-size: 0.9rem;
  color: var(--ink-2);
}
@media (min-width: 1000px){
  .archive .stamp{
    position: absolute;
    left: calc(var(--rail) * -1);
    width: calc(var(--rail) - 1.5rem);
    text-align: right;
  }
}

/* 5.8 Plain definition list, for reference pages that are not articles. */
.deflist{
  margin: 0 0 var(--lh);
  padding-top: calc(var(--lh) / 2);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(16ch, max-content) 1fr;
  gap: calc(var(--lh) / 3) calc(var(--lh) / 2);
  font-size: 0.9rem;
}
.deflist dt{
  font: 400 11px/1.6 var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.deflist dd{ margin: 0 }

/* Every two-column definition grid collapses on a narrow screen. */
@media (max-width: 640px){
  .record-header dl, .standing dl, .deflist{ grid-template-columns: 1fr; gap: 0 }
  .record-header dd, .standing dd, .deflist dd{ margin-bottom: calc(var(--lh) / 3) }
}

/* --- 7. Small print ----------------------------------------------------- */

.label{
  font: 400 11px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
}

.lede{ font-size: 1.1rem }

.note{
  font-size: 0.9rem;
  color: var(--ink-2);
}

.site-foot{
  border-top: 1px solid var(--rule);
  margin-top: calc(var(--lh) * 3);
  padding: calc(var(--lh) * 1.5) 0 calc(var(--lh) * 2);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.site-foot a{ color: var(--ink-2) }
.site-foot .foot-nav ul{
  margin: 0 0 var(--lh);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 calc(var(--lh) / 1.5);
}
.site-foot .foot-nav li{ margin: 0 }
.site-foot .foot-nav a{
  font: 400 11px/var(--lh) var(--mono-ui);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.site-foot .provenance{ max-width: var(--measure) }

@media print{
  .nav, .skip{ display: none }
  body{ background: #fff; color: #000 }
  a{ text-decoration-color: #999 }
}