/* affendiariffin.com — implements SPEC.md §(a) design tokens and §(b) type.
   Adapted from the Phase 1 typeface/accent test (scratch/typetest/site.css):
   accent settled on C rust, prose settled on Source Sans 3, so the Source Serif 4
   face and the swatch-picker classes from that test are dropped here. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/source-sans-3-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-700-normal.woff2") format("woff2");
}

:root {
  --desk: #ececec;
  --bg: #ffffff;
  --ink: #111111;
  --light: #f4f4f4;
  --muted: #555555;
  --accent: #a0461f;
  --font-prose: "Source Sans 3", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--desk);
  color: var(--ink);
  display: flex;
  justify-content: center;
  font-family: var(--font-prose);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* skip link: hidden until focus, first element in body */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  z-index: 10;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ---- sheet + ruler + body columns ---- */

.sheet {
  background: var(--bg);
  max-width: 1000px;
  min-height: 100vh;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.10);
  border-radius: 0;
  display: flex;
}

.ruler {
  width: 60px;
  flex-shrink: 0;
  border-right: 2px solid var(--ink);
  background-image:
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, var(--accent) 0 2px, transparent 2px 40px);
  background-size: 8px 8px, 16px 40px;
  background-position: right top, right top;
  background-repeat: repeat-y, repeat-y;
}

.body {
  flex: 1;
  min-width: 0;
  padding: 32px 48px 48px 40px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  body { display: block; }
  .sheet { max-width: none; min-height: 0; box-shadow: none; border-radius: 0; }
  .ruler {
    width: 28px;
    background-size: 5px 8px, 10px 40px;
  }
  .body { padding: 20px 16px 32px 12px; }
}

/* ---- the column system (2026-09-17) ----
   ONE left edge for everything. TWO widths only:
   - the measure (text, headings, quotes, code, captions, band contents, ordinary tables)
   - the full column (charts, iframes, tables too wide for the measure).
   The measure is in rem, never ch: ch depends on each element's own font, so a mono
   heading and a sans paragraph at '68ch' came out different widths. */
:root { --measure: 38rem; }

.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > pre,
.prose > h2,
.prose > h3,
figcaption,
.band > * {
  max-width: var(--measure);
}

/* wide elements: same left edge as the text, free to use the full column width */
article > figure.wide,
article > .wide,
article > iframe.wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* a table is as wide as the text unless its columns need more; then it grows, then scrolls */
article > .wide.table { overflow-x: auto; }
article > .wide.table > table { width: auto; min-width: min(100%, var(--measure)); }

/* charts are drawn flush-left (charts/demo.py EDGE), so they take exactly the column width
   at every screen size and never bleed onto the ruler */

/* ---- structural rules ---- */

hr, .rule {
  border: none;
  border-top: 2px solid var(--ink);
  margin: 0;
}
.rule-accent { border-top: 2px solid var(--accent); }

/* ---- links, strong, lists ---- */

a {
  color: inherit;
  border-bottom: 1px dotted var(--ink);
  text-decoration: none;
}
a:hover { border-bottom-style: solid; }
a:visited { color: var(--muted); }
a[aria-current="page"] { border-bottom-style: solid; }

strong {
  background: var(--ink);
  color: var(--bg);
  padding: 1px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: 700;
}

ul { list-style: square; padding-left: 1.4em; }
li::marker { font-weight: 700; }

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

.masthead { font-family: var(--font-mono); }
.masthead .home { display: block; border-bottom: none; color: var(--ink); }
.masthead .home:visited { color: var(--ink); }
.masthead .site-name {
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.masthead .owner {
  font-family: var(--font-prose);
  font-size: 15px;
  margin: 2px 0 8px;
}
.masthead nav {
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.masthead nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1em; }
.masthead nav .nav-main a { margin-right: 1em; }
.masthead nav .nav-main a:last-child { margin-right: 0; }
.masthead nav .nav-feed { margin-left: auto; white-space: nowrap; }
.masthead nav .rss { vertical-align: -2px; margin-right: 0.45em; fill: var(--accent); }
.masthead nav .rss .g { fill: #fff; }

/* ---- title bar ---- */

.title-bar {
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 10px 0;
  margin: 24px 0;
}
/* every page has exactly one h1 — piece/page title bar, or the index featured title */
h1 {
  font-family: var(--font-prose);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 6px;
}
.dateline {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.version {
  font-family: var(--font-mono);
  font-weight: 700;
}
.version-notice {
  background: var(--light);
  border-left: 2px solid var(--accent);
  padding: 0.6em 1em;
  font-family: var(--font-mono);
  font-size: 14px;
  max-width: var(--measure);
  margin: 1em 0;
}

/* ---- index page ---- */

.featured { margin: 1.8em 0 2em; }
.featured .dateline { margin: 0 0 0.8em; }
.featured > p { max-width: var(--measure); }
.featured figure { margin: 1em 0 0; }
a.figure-link { display: block; border-bottom: none; }
.piece-list { list-style: none; padding-left: 0; margin: 0; }
.piece-list li { margin: 0 0 0.8em; }

/* archive: year rule, then month label beside (desktop) or above (phone) its pieces */
.archive-year {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  margin: 2em 0 1em;
}
.archive-month {
  display: grid;
  grid-template-columns: 8.5em minmax(0, var(--measure));
  column-gap: 1.5em;
  margin-bottom: 0.4em;
}
.archive-month-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 3px 0 0;
}
@media (max-width: 768px) {
  .archive-month { display: block; margin-bottom: 1.2em; }
  .archive-month-label { margin: 0 0 0.3em; }
}

/* ---- type roles ---- */

body { font-size: 17px; line-height: 1.55; }
.prose { font-size: 17px; line-height: 1.55; }
/* p inherits: a global p size used to override the colophon (14) and the notes (15) */

article { counter-reset: h2count fig tbl; }
article h2 {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  margin: 2em 0 0.8em;
}
article h2::before {
  counter-increment: h2count;
  content: counter(h2count) ". ";
}

h3 {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.6em 0 0.6em;
}

table {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  border-collapse: collapse;
  width: 100%;
}
table caption { text-align: left; caption-side: top; }
table caption,
figcaption {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 6px;
}
th, td {
  border: 2px solid var(--ink);
  padding: 6px 10px;
  text-align: left;
}
tr:nth-child(even) td { background: var(--light); }
td.num, th.num { text-align: right; }

.colophon {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
}

.footnotes {
  font-family: var(--font-prose);
  font-size: 15px;
  line-height: 1.5;
}
.footnotes ol { margin: 0; padding-left: 2.4em; }
.footnotes li { margin: 0.5em 0; }
.footnotes .footnote-backref {
  font-family: var(--font-mono);
  border-bottom: none;
  margin-left: 4px;
}
/* footnote markers: bold rust so they are easy to spot, and no extra leading on their line */
sup.fn { line-height: 0; font-size: 0.72em; vertical-align: super; }
sup.fn a,
sup.fn a:visited,
sup a[id^="fnref"] {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  border-bottom: none;
  padding: 0 1px;
}
sup.fn a:hover { border-bottom: 1px solid var(--accent); }
/* the matching numbers in the NOTES band carry the same colour */
.footnotes li::marker { color: var(--accent); font-family: var(--font-mono); font-weight: 700; }

code, pre {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  background: var(--light);
  border: 2px solid var(--ink);
  border-radius: 0;
}
pre { padding: 12px 16px; overflow-x: auto; }
code { padding: 1px 4px; }
pre code { padding: 0; border: none; background: none; }

blockquote {
  border-left: 2px solid var(--ink);
  background: var(--light);
  margin: 1.4em 0;
  padding: 0.7em 1.2em;
  font-style: italic;
}
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child { margin-bottom: 0; }

/* ONE caption system for every infographic (2026-09-17): the caption sits ABOVE its table, chart or
   interactive, same type, with an automatic label. Authors write a plain <figcaption> or <caption>;
   position and numbering are done here, so a piece cannot get it wrong. */
figure { margin: 1.6em 0; display: flex; flex-direction: column; }
figure > figcaption { order: -1; margin: 0 0 8px; }
table caption { padding-bottom: 8px; margin-top: 0; }
article figure > figcaption::before { counter-increment: fig; content: "Figure " counter(fig) " " "·" " "; }
article table > caption::before { counter-increment: tbl; content: "Table " counter(tbl) " " "·" " "; }
article figure > figcaption::before,
article table > caption::before { color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; }
figure img, figure svg, figure object { max-width: 100%; width: 100%; height: auto; display: block; }

/* ---- foot bands (NOTES / THANKS / ERRATA / COLOPHON) ---- */

.band {
  font-size: 15px;
  line-height: 1.5;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 16px 0;
  margin: 2em 0 0;
}
.band.accent-rules {
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
.band-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.band .empty-state {
  background: var(--light);
  padding: 8px 12px;
}
.cite-box {
  background: var(--light);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ---- interactive pages (no masthead/footer chrome) ---- */

body.interactive-body { background: var(--bg); display: block; }
.interactive-body #app {
  padding: 24px;
}
.interactive-body label {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.interactive-body select {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 4px 8px;
}
.interactive-body #out {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--light);
  border: 2px solid var(--ink);
}

/* iframe embeds of an interactive page inside a piece */
figure iframe {
  width: 100%;
  border: 2px solid var(--ink);
  display: block;
}

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

footer {
  margin-top: auto;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* the abstract band carries body prose, not foot matter */
.band .prose { font-size: 17px; line-height: 1.55; }

/* the dateline is uppercase; the version keeps its lowercase v everywhere */
.dateline .version { text-transform: none; }

/* errata changelog: no bullets, versions sit on the column edge, sized to match the prose */
.errata-list { list-style: none; padding-left: 0; margin: 0; }
.errata-list li { margin: 0 0 0.4em; }
.errata-list .version { font-size: 13px; color: var(--accent); }