/* ─────────────────────────────────────────────────────────────
   Lucian Cosinschi — "The Inversion".

   Serif headings (Source Serif 4), sans text (Libre Franklin).
   The reverse of what people expect, which is why it reads as
   designed rather than defaulted.

   Links are the text colour with a tuned underline — never blue.
   The ground is a warm off-white, never #fff. Furniture (dates,
   section labels, the Process rail) is small tracked sans, which
   is what keeps a research apparatus looking deliberate.

   Layout is unchanged: one reading column everywhere; the home
   page splits into identity + feed on wide screens; a long
   document grows a sticky Contents column, and a report grows a
   Process column on the right.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Ground and ink — warm neutrals, chosen not inherited. */
  --bg:          #FDFDFB;
  --bg-sunk:     #F4F3EE;
  --text:        #333330;
  --muted:       #73736C;
  --rule:        #E2E2DC;
  --rule-strong: #C7C6BE;

  /* Links take the text colour. The underline carries the signal. */
  --link:        var(--text);
  --underline:   #B9B8AE;
  --accent:      #7A2E2E;   /* hover + focus only, used sparingly */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs:      1.1875rem;  /* 19px */
  --lh:      1.6;
  --measure: 40rem;      /* the reading column — ~67 characters */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #1A1A18;
    --bg-sunk:     #232320;
    --text:        #E4E3DD;
    --muted:       #94938B;
    --rule:        #302F2B;
    --rule-strong: #48473F;
    --link:        var(--text);
    --underline:   #5E5D55;
    --accent:      #D89A8E;
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--bg-sunk); }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 24px;
}
.site-main { padding: 40px 0 80px; }

/* ── Links ────────────────────────────────────────────────────
   Craig Mod's numbers: text-coloured, 1.9px thick, 3.8px clear
   of the baseline. Heavy enough to see, light enough to read
   through. Colour is reserved for hover.                       */
a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-decoration-thickness: 1.9px;
  text-underline-offset: 3.8px;
}
a:hover { text-decoration-color: var(--accent); color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 12px; top: 12px;
  background: var(--bg); padding: 6px 10px; border: 1px solid var(--rule-strong);
}

.muted { color: var(--muted); }

/* ── Furniture ────────────────────────────────────────────────
   Small tracked sans for every label, date and section marker.  */
.feed-heading,
.rail-heading,
.doc-meta,
.toc-title,
.report-rail h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Header + footer ──────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { padding-top: 20px; padding-bottom: 20px; }
.wordmark {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}
.wordmark:hover { color: var(--accent); }

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* ── Home: identity block ─────────────────────────────────── */
.intro { max-width: 34rem; margin: 0 0 8px; }
.avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.intro-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 20px 0 0;
}
.descriptor {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 1rem;
  font-style: italic;
}
.intro .contacts { margin-bottom: 22px; }
.blurb { font-size: 1.0625rem; }
.blurb p { margin: 0 0 16px; }

.contacts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 0.9rem;
}

/* ── Home: the feed ───────────────────────────────────────── */
.feed { margin-top: 48px; max-width: var(--measure); }
.feed-heading {
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
}
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list > li { padding: 26px 0; border-bottom: 1px solid var(--rule); }
.feed-list > li:last-child { border-bottom: none; }

.feed-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
/* A title in a list is obviously a link. Show the rule on hover. */
.feed-title a { text-decoration-color: transparent; text-underline-offset: 5px; }
.feed-title a:hover { text-decoration-color: var(--accent); }

.feed-note { margin: 0; font-size: 0.95rem; color: var(--muted); }

/* Styled in case you uncomment the date in _layouts/home.html. */
.feed-date {
  margin: 0 0 6px;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}

/* ── Home: two columns (identity · feed) on wide screens ──── */
.home-grid > * { margin-bottom: 48px; }
.home-grid > *:last-child { margin-bottom: 0; }

@media (min-width: 60rem) {
  body.home .wrap { max-width: 64rem; }
  .home-grid {
    display: grid;
    grid-template-columns: 16rem minmax(0, 42rem);
    gap: 0 2.5rem;
    align-items: start;
  }
  .home-grid > * { margin-bottom: 0; }
  .home-grid .intro { max-width: none; position: sticky; top: 2.5rem; }
  .home-grid .feed  { margin-top: 0; }
}

/* ── A document ───────────────────────────────────────────── */
.doc, .doc-body, .doc-head { max-width: var(--measure); }

.doc-head { margin-bottom: 40px; }
.doc-head h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.5vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.doc-meta { margin: 0; }

.doc-body h2, .doc-body h3, .doc-body h4 {
  font-family: var(--serif);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.doc-body h2 { margin: 48px 0 12px; font-size: 1.55rem; font-weight: 600; }
.doc-body h3 { margin: 34px 0 8px;  font-size: 1.2rem;  font-weight: 600; }
.doc-body h4 { margin: 26px 0 6px;  font-size: 1.05rem; font-weight: 600; }
.doc-body p  { margin: 0 0 1.1em; }
.doc-body ul, .doc-body ol { padding-left: 24px; }
.doc-body li { margin-bottom: 0.4em; }

/* Pull the serif back for quotes — the contrast is the point. */
.doc-body blockquote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 2px solid var(--rule-strong);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--muted);
}
.doc-body blockquote p:last-child { margin-bottom: 0; }

.doc-body hr { border: none; border-top: 1px solid var(--rule); margin: 44px 0; }

/* Overflow guards: code, tables, long links. */
.doc-body pre {
  overflow-x: auto; padding: 14px 16px;
  background: var(--bg-sunk); border: 1px solid var(--rule);
  border-radius: 3px; font-size: 0.85rem; line-height: 1.6;
}
.doc-body code { font-family: var(--mono); font-size: 0.86em; }
.doc-body :not(pre) > code {
  background: var(--bg-sunk); border: 1px solid var(--rule);
  padding: 0.08em 0.32em; border-radius: 3px;
}
.doc-body table {
  display: block; overflow-x: auto; width: 100%;
  border-collapse: collapse; font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.doc-body th, .doc-body td {
  border-bottom: 1px solid var(--rule); padding: 9px 14px 9px 0; text-align: left;
  vertical-align: top;
}
.doc-body th {
  border-bottom: 1px solid var(--rule-strong);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.doc-body a { overflow-wrap: anywhere; }

/* ── Table of contents (added by toc.js when there are >4 h2s) ── */
.toc { margin: 28px 0 36px; }
.toc[hidden] { display: none; }
.toc-title { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 6px 0; }
.doc-toc { align-self: start; font-size: 0.85rem; line-height: 1.35; }
.doc-toc a { text-decoration-color: transparent; }
.doc-toc a:hover { text-decoration-color: var(--accent); }

.back-to-contents { margin: 8px 0 0; text-align: right; font-size: 0.75rem; }
.back-to-contents a { color: var(--muted); text-decoration: none; }
.back-to-contents a:hover { color: var(--accent); }

/* ── A report's Process column (its process/ files) ───────── */
/* Stacked below the report by default; a right column on wide screens. */
.report-rail { margin-top: 56px; padding-top: 10px; border-top: 1px solid var(--rule-strong); }
.rail-heading { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.rail-intro { margin: 12px 0 18px; color: var(--muted); font-size: 0.85rem; }
.report-rail h3 { margin: 26px 0 8px; }
.process-list { list-style: none; margin: 0; padding: 0; }
.process-list > li { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.process-list > li:last-child { border-bottom: none; }
.process-list > li a {
  font-size: 0.875rem; line-height: 1.35;
  text-decoration-color: transparent;
}
.process-list > li a:hover { text-decoration-color: var(--accent); }

/* Plain docs: promote Contents to a sticky left column. */
@media (min-width: 56rem) {
  body.reading:not(.has-process) .wrap { max-width: 60rem; }
  body.reading:not(.has-process) .doc-grid.has-toc {
    display: grid;
    grid-template-columns: 13rem minmax(0, 42rem);
    gap: 0 2.5rem;
    align-items: start;
  }
  body.reading:not(.has-process) .doc-grid.has-toc .doc-toc {
    position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow: auto;
  }
}

/* Reports: Contents (left) + report (centre) + Process (right). */
@media (min-width: 70rem) {
  body.has-process .wrap { max-width: 74rem; }
  body.has-process .doc-grid.has-toc {
    display: grid;
    grid-template-columns: 11rem minmax(0, 42rem) 14rem;
    gap: 0 2rem;
    align-items: start;
  }
  body.has-process .doc-grid.has-toc .doc-toc {
    position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow: auto;
  }
  body.has-process .report-rail {
    margin-top: 0; padding-top: 0; border-top: none;
    position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow: auto;
  }
}

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