/* Matt Robertson — Swiss-minimalist site
   3 palettes (bone / ink / slate) + 2 type pairings, switchable via Tweaks.
   Geist + Geist Mono. Strict 12-col grid. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,200;9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Inter+Tight:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');

/* ---------- tokens ---------- */
:root {
  /* Bone (default) */
  --bg:       #f1ede5;
  --bg-soft:  #e8e3d8;
  --ink:      #131210;
  --muted:    #6a665a;
  --line:     rgba(19, 18, 16, 0.14);
  --line-soft:rgba(19, 18, 16, 0.06);
  --accent:   #b85a16;

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;

  --col-gap: 24px;
  --pad-x: clamp(24px, 4vw, 56px);
  --max-w: 1480px;

  --t-fast: 180ms cubic-bezier(.2,.7,.2,1);
  --t-med:  360ms cubic-bezier(.2,.7,.2,1);
}

html[data-palette="ink"] {
  --bg:       #100f0d;
  --bg-soft:  #1a1916;
  --ink:      #f1ede5;
  --muted:    #8a8678;
  --line:     rgba(241, 237, 229, 0.16);
  --line-soft:rgba(241, 237, 229, 0.07);
  --accent:   #e87a2a;
}

html[data-palette="slate"] {
  --bg:       #d4d8db;
  --bg-soft:  #c5cbd0;
  --ink:      #18222b;
  --muted:    #5b6770;
  --line:     rgba(24, 34, 43, 0.16);
  --line-soft:rgba(24, 34, 43, 0.06);
  --accent:   #28465a;
}

/* ---------- type pairings (5 directions) ---------- */
/* "modern" — default — Geist + Geist Mono. Clean Swiss neutral. */

html[data-type="editorial"] {
  --font-sans: 'Fraunces', ui-serif, Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-type="editorial"] .display,
html[data-type="editorial"] .hero-title,
html[data-type="editorial"] .section-head-title,
html[data-type="editorial"] .page-head-title,
html[data-type="editorial"] .record-title,
html[data-type="editorial"] .blog-title,
html[data-type="editorial"] .blog-pin-title,
html[data-type="editorial"] .link-name,
html[data-type="editorial"] .project-title {
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.02em;
}

html[data-type="bricolage"] {
  --font-sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}
html[data-type="bricolage"] .display,
html[data-type="bricolage"] .hero-title,
html[data-type="bricolage"] .page-head-title,
html[data-type="bricolage"] .section-head-title {
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.04em;
}

html[data-type="display-serif"] {
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-type="display-serif"] .display,
html[data-type="display-serif"] .hero-title,
html[data-type="display-serif"] .page-head-title,
html[data-type="display-serif"] .section-head-title,
html[data-type="display-serif"] .record-title,
html[data-type="display-serif"] .blog-title,
html[data-type="display-serif"] .blog-pin-title {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}
html[data-type="display-serif"] .hero-title,
html[data-type="display-serif"] .page-head-title {
  font-style: italic;
}

html[data-type="mono"] {
  --font-sans: 'IBM Plex Mono', ui-monospace, monospace;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
html[data-type="mono"] body { font-size: 15px; }
html[data-type="mono"] .display,
html[data-type="mono"] .hero-title,
html[data-type="mono"] .page-head-title,
html[data-type="mono"] .section-head-title {
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
html[data-type="mono"] .hero-title { font-size: clamp(44px, 8vw, 120px); }
html[data-type="mono"] .page-head-title { font-size: clamp(32px, 4.5vw, 64px); }
html[data-type="mono"] .link-name,
html[data-type="mono"] .record-title,
html[data-type="mono"] .blog-title,
html[data-type="mono"] .blog-pin-title,
html[data-type="mono"] .project-title {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
html[data-type="mono"] .brand strong { text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-med), color var(--t-med);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- layout ---------- */
.shell {
  padding-inline: var(--pad-x);
  max-width: var(--max-w);
  margin-inline: auto;
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-block: 18px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand strong {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.brand .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  transform: translateY(-2px);
}
nav.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
nav.nav a {
  position: relative;
  padding-block: 4px;
  transition: color var(--t-fast);
}
nav.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transition: right var(--t-fast);
}
nav.nav a:hover { color: var(--ink); }
nav.nav a:hover::after { right: 0; }
nav.nav a.is-current { color: var(--ink); }
nav.nav a.is-current::after { right: 0; background: var(--accent); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
html[data-type="editorial"] .display { font-weight: 400; letter-spacing: -0.015em; }
.subtle { color: var(--muted); }
.lead {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ---------- footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  margin-top: 120px;
  padding-block: 32px 40px;
}
.foot-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-inner a:hover { color: var(--ink); }
.foot-list { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- tweaks panel ---------- */
.tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  width: 280px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 18px 18px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  box-shadow: 0 8px 40px -10px rgba(0,0,0,0.18);
  display: none;
}
.tweaks.is-open { display: block; }
.tweaks h4 {
  font-size: 11px; font-weight: 500;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.tweaks .close {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); cursor: pointer;
}
.tweaks .close:hover { color: var(--ink); }
.tweaks .row { margin-bottom: 14px; }
.tweaks .row:last-child { margin-bottom: 0; }
.tweaks label.group-label { color: var(--muted); display: block; margin-bottom: 8px; }
.swatches { display: flex; gap: 8px; }
.swatch {
  flex: 1;
  border: 1px solid var(--line);
  padding: 8px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.swatch:hover { color: var(--ink); }
.swatch.is-active { border-color: var(--ink); color: var(--ink); }
.swatch .chip {
  height: 22px;
  display: flex;
}
.swatch .chip span { flex: 1; }
.seg {
  display: flex;
  border: 1px solid var(--line);
}
.seg button {
  flex: 1;
  padding: 8px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.is-active { background: var(--ink); color: var(--bg); }

/* type pairing list */
.type-list {
  display: grid;
  gap: 4px;
}
.type-list button {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
  font-family: var(--font-mono);
  color: var(--ink);
}
.type-list button:hover { border-color: color-mix(in oklab, var(--ink) 30%, var(--line)); }
.type-list button.is-active { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, var(--bg)); }
.type-list .tl-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.type-list .tl-name {
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 500;
  color: var(--ink);
}
.type-list .tl-spec {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* widen panel slightly to fit type list */
.tweaks { width: 320px; }

/* ---------- utility ---------- */
.divider { height: 1px; background: var(--line); }
.spacer-l { height: 120px; }
.spacer-m { height: 64px; }
.spacer-s { height: 32px; }

@media (max-width: 720px) {
  .grid12 { grid-template-columns: repeat(6, 1fr); }
  nav.nav { gap: 16px; }
  .foot-inner { grid-template-columns: 1fr; }
}