/* matthewmage.com — v1
   Light, technical-archival. Source Serif 4 body, Cabinet Grotesk meta.
   Single accent (terracotta), tinted neutrals warmed toward 80° hue. */

:root {
  --hue: 80;

  --bg:        oklch(98%  0.005 var(--hue));
  --bg-soft:   oklch(96%  0.008 var(--hue));
  --ink:       oklch(22%  0.008 var(--hue));
  --ink-soft:  oklch(38%  0.010 var(--hue));
  --ink-quiet: oklch(55%  0.012 var(--hue));
  --rule:      oklch(88%  0.010 var(--hue));
  --rule-soft: oklch(93%  0.008 var(--hue));

  --accent:        oklch(48%  0.13  35);
  --accent-strong: oklch(40%  0.15  35);
  --accent-bg:     oklch(96%  0.025 35);

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Iowan Old Style", serif;
  --sans:  "Cabinet Grotesk", "Inter Tight", ui-sans-serif, system-ui, sans-serif;

  --rail-w: 11rem;
  --gap:    clamp(1.5rem, 3vw, 3rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 64ch;

  --t-meta:   0.78rem;
  --t-body:   1.0625rem;
  --t-lede:   clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  --t-h1:     clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
  --t-h2:     0.78rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        oklch(15%  0.008 var(--hue));
    --bg-soft:   oklch(18%  0.010 var(--hue));
    --ink:       oklch(94%  0.010 var(--hue));
    --ink-soft:  oklch(78%  0.012 var(--hue));
    --ink-quiet: oklch(60%  0.012 var(--hue));
    --rule:      oklch(28%  0.012 var(--hue));
    --rule-soft: oklch(22%  0.010 var(--hue));

    --accent:        oklch(72%  0.14  40);
    --accent-strong: oklch(80%  0.14  40);
    --accent-bg:     oklch(25%  0.04  35);
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: "kern", "liga", "onum", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-bg); color: var(--accent-strong); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg);
  padding: 0.5rem 0.75rem; border-radius: 2px;
  font-family: var(--sans); font-size: var(--t-meta);
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklch, var(--accent) 35%, transparent);
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover { color: var(--accent-strong); text-decoration-color: var(--accent-strong); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
  text-decoration-color: var(--accent);
}

strong { font-weight: 600; }
em { font-style: italic; font-feature-settings: "kern", "liga", "onum"; }

.page {
  display: block;
  padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(3rem, 6vw, 6rem);
  max-width: 72rem;
  margin: 0 auto;
}

/* --- Two-column rail layout ---------------------------------------- */

.head, .row, .foot {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: baseline;
}

.row, .foot {
  border-top: 1px solid var(--rule);
  padding-top: clamp(2rem, 3.5vw, 3.5rem);
  padding-bottom: clamp(2rem, 3.5vw, 3.5rem);
  position: relative;
}

.foot {
  padding-bottom: 0.5rem;
  color: var(--ink-quiet);
  font-size: 0.95rem;
}

.head {
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}

.rail { padding-top: 0.4rem; }

.rail-label {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-h2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin: 0;
}

/* Rail divider tick that aligns with section top rule */
.row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: calc(var(--rail-w) - 0.75rem);
  height: 2px;
  background: var(--ink);
  transition: background 600ms cubic-bezier(0.22, 1, 0.36, 1),
              width    600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.row:target::before {
  background: var(--accent);
  width: var(--rail-w);
}

/* --- Header --------------------------------------------------------- */

.head h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.lede {
  margin: 0 0 1.75rem;
  max-width: 52ch;
  font-size: var(--t-lede);
  line-height: 1.4;
  color: var(--ink-soft);
  font-style: italic;
  font-weight: 400;
}

.head-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
}
.head-links a {
  text-decoration-color: color-mix(in oklch, var(--accent) 25%, transparent);
}

.quiet { color: var(--ink-quiet); font-weight: 400; font-size: 0.85em; margin-left: 0.15rem; }

/* --- Prose ---------------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.1em; }
.prose p:last-child { margin-bottom: 0; }
.prose .aside {
  margin-top: 1.6em;
  font-size: 0.96em;
  color: var(--ink-soft);
  font-style: italic;
}

/* --- Entry list (Work / Projects) ----------------------------------- */

.entries {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.4rem;
  counter-reset: entry;
}

.entry {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.15rem;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.5;
}

.entry-when {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-quiet);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.entry-when .dash { padding: 0 0.18em; color: var(--rule); }

.entry-what { color: var(--ink); }
.entry-what strong { font-weight: 600; }
.entry-what .dot { color: var(--ink-quiet); padding: 0 0.15em; }

.entry-where {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-left: 0.6rem;
}

.entry-detail {
  grid-column: 2;
  color: var(--ink-soft);
  font-size: 0.96em;
}

.entries-flat { gap: 0.5rem; }
.entry-flat { display: block; }

/* --- Footer --------------------------------------------------------- */

.foot p { margin: 0; max-width: var(--measure); }

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 720px) {
  :root { --rail-w: 100%; }

  .head, .row, .foot {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .rail { padding-top: 0; }
  .rail-label { font-size: 0.72rem; }

  .row::before {
    width: 2.5rem;
    height: 2px;
  }
  .row:target::before { width: 4rem; }

  .head { align-items: start; padding-bottom: 2.5rem; }
  .head h1 { margin-top: 0.5rem; }

  .entry {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
  }
  .entry-detail { grid-column: 1; }

  .entry-where { margin-left: 0; display: block; margin-top: 0.1rem; }
}

/* --- Motion suppression -------------------------------------------- */

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