/* ============================================================
   thomas hakman · personal site — production build stylesheet
   Self-contained: tokens + base + components. No JS framework.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
  font-family: "Departure Mono";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2409-1@1.0/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------- tokens ---------------- */
:root {
  --paper: #EFEEE8; --paper-2: #E7E6DF; --paper-3: #DDDCD4;
  --line: #C9C8BF; --line-strong: #94938B;
  --ash: #8E8D85; --smoke: #67665F; --ink-2: #45443E; --ink: #1D1C18;
  --term-bg: #1D1C18; --term-panel: #26251F; --term-line: #45443E;
  --term-muted: #94938B; --term-fg: #EFEEE8;
  --amber: #FFA133; --pumpkin: #E47B1A; --accent: #B85B08;
  --accent-wash: rgba(228, 123, 26, 0.13);
  --flux: #C8BE50; --foam: #BCCABB; --ok: #55704B;
  --kraft: #C8AE8E; --kraft-ink: #2A2418;
  --sheet: #FFFFFF; --sheet-line: #C2C1BA;
  --highlight: #C9CFB2; --blueprint: #8A8A6F;
  --bg: var(--paper); --fg: var(--ink); --body: var(--ink-2);
  --muted: var(--smoke); --faint: var(--ash); --surface: var(--paper-2);
  --link: var(--accent); --link-hover: var(--ink);

  --font-text: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-pixel: "Departure Mono", "Source Code Pro", ui-monospace, monospace;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13.5px; --text-base: 15.5px;
  --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 38px;
  --track-tight: -0.02em; --track-caps: 0.07em;
  --container: 1080px; --measure: 62ch;
}

/* ---------------- base ---------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; background: #EFEEE8; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.7;
  background: var(--bg);
  color: var(--body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
h1, h2, h3, h4 { font-family: var(--font-text); font-weight: 600; color: var(--fg); line-height: 1.15; letter-spacing: var(--track-tight); }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 120ms linear, background-color 120ms linear; }
a:hover { color: var(--link-hover); background: var(--accent-wash); }
pre, code { font-family: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.u-invert {
  --bg: var(--term-bg); --fg: var(--term-fg); --body: var(--term-fg);
  --muted: var(--term-muted); --faint: var(--term-muted);
  --surface: var(--term-panel); --line: var(--term-line);
  --line-strong: var(--term-muted); --link: var(--amber);
  --link-hover: var(--term-fg); --accent: var(--amber);
  --accent-wash: rgba(255, 161, 51, 0.14);
  background: var(--bg); color: var(--body);
}
.u-invert ::selection { background: var(--term-fg); color: var(--term-bg); }

.u-comment {
  font-family: var(--font-pixel);
  font-size: var(--text-2xs);
  line-height: 2;
  text-transform: uppercase;
  color: var(--faint);
  white-space: pre-line;
}
.u-highlight {
  background: var(--highlight);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 1px 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .u-blink { animation: u-blink 1.4s steps(1) infinite; }
  @keyframes u-blink { 50% { opacity: 0; } }
}
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------- layout ---------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.sec { padding: 64px 0; }
#research { padding-top: 12px; } /* banner's dither tail already provides the breathing room */
.two-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.measure { max-width: var(--measure); }
#ascii-header { width: 100%; overflow: hidden; color: #000000; background: var(--paper); }
#ascii-header pre { font-family: var(--font-text) !important; }

/* ---------------- nav ---------------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-wordmark {
  font-size: var(--text-base); font-weight: 600; letter-spacing: var(--track-tight);
  text-transform: lowercase; color: var(--fg); text-decoration: none; white-space: nowrap;
}
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.nav-links a {
  font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted); background: transparent;
  padding: 6px 10px; text-decoration: none;
  transition: background 120ms linear, color 120ms linear;
}
.nav-links a:hover { background: var(--surface); color: var(--muted); }
.nav-links a.is-active { background: var(--ink); color: var(--paper); }
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.burger span { display: block; width: 16px; height: 2px; background: var(--fg); transition: transform 160ms ease, opacity 160ms ease; }

/* ---------------- buttons + tags + badges ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.9em;
  font-family: var(--font-pixel); font-size: var(--text-2xs); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--track-caps);
  padding: 11px 18px; border: 1px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background 120ms linear, color 120ms linear, border-color 120ms linear;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--bg); color: var(--fg); }
.btn-solid:active { background: var(--paper-3); color: var(--fg); }
.btn-outline { background: transparent; color: var(--fg); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-outline:active { background: var(--ink-2); color: var(--paper); }
.btn-print {
  /* printed on the field report: same ink + monospace face as the table */
  font-family: var(--font-text); font-size: 13px;
  border: 1px solid var(--kraft-ink); background: transparent; color: var(--kraft-ink);
  padding: 8px 14px;
}
.btn-print:hover { background: var(--kraft-ink); color: var(--sheet); }
.btn-print:active { background: var(--kraft); color: var(--kraft-ink); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--link); }
.btn-ghost:hover { background: var(--accent-wash); color: var(--link); }
.btn-ghost:active { background: var(--paper-3); color: var(--fg); }

.tag {
  display: inline-block; font-family: var(--font-pixel); font-size: var(--text-2xs);
  line-height: 1; text-transform: uppercase; letter-spacing: var(--track-caps);
  padding: 5px 10px; border: 1px solid var(--line); background: transparent;
  color: var(--muted); text-decoration: none;
  transition: background 120ms linear, border-color 120ms linear;
}
button.tag { cursor: pointer; }
button.tag:hover { border-color: var(--line-strong); background: var(--surface); }
.tag.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-pixel); font-size: var(--text-2xs); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 8px 4px 6px;
  border: 1px solid var(--line-strong); color: var(--fg); background: transparent;
  text-decoration: none; transition: background 120ms linear, border-color 120ms linear;
}
a.badge:hover { border-color: var(--ink); background: var(--surface); color: var(--fg); }
.badge i { width: 7px; height: 7px; flex: none; font-style: normal; }
.badge-data i { background: var(--ok); }
.badge-code i { background: var(--accent); }
.badge-preprint i { background: var(--flux); }
.badge-access i { background: var(--foam); }

/* ---------------- section heading ---------------- */
.secheading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  border-bottom: 1px solid var(--line); padding-bottom: 16px;
}
.secheading .eyebrow {
  font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--muted); margin-bottom: 10px;
}
.secheading h2 {
  font-size: var(--text-3xl); font-weight: 600; letter-spacing: var(--track-tight);
  text-transform: lowercase; line-height: 1.05; color: var(--fg);
}
.secheading .anno {
  font-family: var(--font-pixel); font-size: var(--text-2xs); line-height: 2;
  text-transform: uppercase; color: var(--faint); white-space: pre-line;
  text-align: right; flex: none;
}

/* ---------------- research artifacts ---------------- */
.keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.printout { position: relative; background: var(--sheet); color: var(--kraft-ink); transform: rotate(-0.4deg); margin-top: 40px; }
.printout::before, .printout::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38px;
  background-image:
    radial-gradient(circle at 50% 50%, var(--bg) 5.5px, transparent 6px),
    radial-gradient(circle at 50% 100%, var(--bg) 5.5px, transparent 6px);
  background-size: 100% 58px, 100% 12px;
  background-position: center 29px, center bottom;
  background-repeat: repeat-y, no-repeat;
}
.printout::before { left: 0; border-right: 1px solid var(--sheet-line); }
.printout::after { right: 0; border-left: 1px solid var(--sheet-line); }
.printout-content { padding: 34px 64px 38px; font-family: var(--font-text); font-size: 13px; line-height: 1.75; }
.printout-head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 18px;
}
.printout-head .page { font-weight: 400; color: #6B6A63; }
.printout-content pre {
  font-family: var(--font-pixel); line-height: 1.6; color: var(--body);
  overflow-x: auto; scrollbar-width: none;
  font-size: min(11px, max(6px, calc((63.6vw - 240px) / 46.8)));
}
.printout-content pre::-webkit-scrollbar { display: none; }
.only-mobile { display: none; }

.spec { margin: 0; }
.spec > div {
  display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid var(--line); align-items: baseline;
}
.spec > div:last-child { border-bottom: none; }
.spec dt {
  font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); color: var(--faint);
}
.spec dd { margin: 0; font-size: var(--text-sm); color: var(--body); min-width: 0; overflow-wrap: anywhere; }

.passfoto {
  background: #FFFFFF; border: 1px solid var(--line-strong); padding: 6px 6px 8px;
  transform: rotate(-5deg); width: 112px; align-self: flex-start;
  margin-left: -34px; margin-bottom: -6px; position: relative; z-index: 1;
}
.passfoto img { width: 100%; aspect-ratio: 7 / 9; object-fit: cover; filter: saturate(0.8); }

.clipping { position: relative; width: 340px; max-width: 100%; transform: rotate(1.6deg); }
.clipping .paperclip { position: absolute; top: -18px; left: 56%; z-index: 1; }
.clipping-inner {
  background: var(--kraft); color: var(--kraft-ink); padding: 24px 22px 20px;
  clip-path: polygon(0 0, 100% 0, 100% 97.5%, 62% 100%, 0 98.8%);
}
.clipping-head { display: grid; grid-template-columns: 1fr 92px; gap: 16px; align-items: start; }
.clipping-head h3 {
  font-family: var(--font-pixel); font-weight: 400; font-size: 22px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0; color: var(--kraft-ink);
}
.clipping-dither {
  height: 110px;
  background-image:
    conic-gradient(var(--kraft-ink) 25%, transparent 25% 50%, var(--kraft-ink) 50% 75%, transparent 75%),
    conic-gradient(var(--kraft-ink) 25%, transparent 25% 50%, var(--kraft-ink) 50% 75%, transparent 75%);
  background-size: 4px 4px, 10px 10px;
  background-position: 0 0, 1px 3px;
}
.clipping-rule { border-top: 1px solid var(--kraft-ink); margin: 16px 0 12px; }
.clipping-body { font-family: var(--font-text); font-size: 11.5px; line-height: 1.6; }
.clipping-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.side-col { display: flex; flex-direction: column; gap: 40px; }

/* ---------------- publications ---------------- */
.pub-filters { display: flex; gap: 8px; margin: 28px 0 8px; flex-wrap: wrap; }
.pub {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px;
  padding: 18px 12px; margin: 0 -12px; border-bottom: 1px solid var(--line);
  background: transparent; transition: background 120ms linear;
}
.pub:hover { background: var(--surface); }
.pub-year { font-family: var(--font-pixel); font-size: var(--text-2xs); color: var(--faint); padding-top: 4px; font-variant-numeric: tabular-nums; }
.pub-authors { font-size: var(--text-sm); color: var(--muted); line-height: 1.55; }
.pub-authors b { font-weight: 700; color: var(--fg); }
.pub h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--track-tight); margin: 5px 0 7px; }
.pub-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pub-venue { font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pub-doi { font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
.pub-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ---------------- tools ---------------- */
#tools { padding: 72px 0 80px; margin-top: 32px; position: relative; overflow: hidden; }
.tools-blueprint { position: absolute; right: -30px; top: 24px; color: var(--blueprint); opacity: 0.9; }
.tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.toolcard {
  border: 1px solid var(--line); background: transparent; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background 120ms linear, border-color 120ms linear;
}
.toolcard:hover { border-color: var(--line-strong); background: var(--surface); }
.toolcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.toolcard h3 { font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--track-tight); text-transform: lowercase; }
.toolcard-kind { font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--faint); flex: none; }
.toolcard p { font-size: var(--text-sm); color: var(--body); line-height: 1.6; }
.toolcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.toolcard-foot a { font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; }
.toolcard-meta { font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase; color: var(--faint); }

/* ---------------- talks ---------------- */
.talk {
  display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; align-items: baseline;
  padding: 12px; margin: 0 -12px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; background: transparent;
  transition: background 120ms linear;
}
a.talk:hover { background: var(--surface); color: inherit; }
.talk-date { font-family: var(--font-pixel); font-size: var(--text-2xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.talk-title { font-size: var(--text-base); font-weight: 500; color: var(--fg); }
.talk-venue {
  display: block; font-family: var(--font-pixel); font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 4px;
}
.talk-arrow { color: var(--faint); }
a.talk:hover .talk-arrow { color: var(--accent); }

/* ---------------- breakout ---------------- */
#play { border-top: 1px solid var(--term-line); }
.breakout { position: relative; max-width: var(--container); margin: 0 auto; }
.breakout-comment { padding: 28px 24px 18px; text-align: right; }
.breakout canvas { display: block; width: 100%; touch-action: none; }
.breakout-over {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: rgba(29, 28, 24, 0.82);
}
.breakout-over[hidden] { display: none; }
.breakout-over .go { font-family: var(--font-pixel); font-size: 33px; text-transform: uppercase; color: var(--amber); }
.breakout-over .score { font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--term-muted); }
.breakout-over button {
  font-family: var(--font-pixel); font-size: 22px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--amber); background: transparent;
  border: 1px solid var(--amber); padding: 14px 28px; cursor: pointer; margin-top: 8px;
}

/* ---------------- footer ---------------- */
.site-footer .inner { max-width: var(--container); margin: 0 auto; padding: 56px 32px 40px; }
.site-footer { border-top: 1px solid var(--term-line); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; }
.footer-wordmark { font-size: var(--text-xl); font-weight: 600; text-transform: lowercase; color: var(--fg); }
.footer-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.footer-links a {
  font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: var(--track-caps); text-decoration: none; color: var(--muted);
}
.footer-note {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--font-pixel); font-size: var(--text-2xs); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--muted);
}

/* ---------------- responsive ---------------- */
@media (max-width: 920px) {
  .two-col { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-blueprint { display: none; }
  .passfoto { margin-left: 0; }
  .printout-content pre { font-size: min(11px, max(6px, calc((100vw - 140px) / 46.8))); }
}

@media (max-width: 700px) {
  :root {
    --text-sm: 12.5px; --text-base: 14px; --text-lg: 16px;
    --text-xl: 19px; --text-2xl: 23px; --text-3xl: 27px;
  }
  p { overflow-wrap: break-word; }
  .container { padding: 0 20px; }

  .only-desktop { display: none; }
  .only-mobile { display: block; }
  .printout-content { padding: 26px 46px 30px; }
  .printout-content pre { font-size: min(11px, max(7px, calc((100vw - 130px) / 28.2))); }

  .nav-inner { padding: 12px 20px; gap: 14px; }
  .burger { display: inline-flex; }
  .nav-links { display: none; }
  .site-nav.is-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 10px 12px 16px;
  }
  .site-nav.is-open .nav-links a { padding: 12px 10px; }
  .site-nav.is-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-nav.is-open .burger span:nth-child(2) { opacity: 0; }
  .site-nav.is-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .pub { grid-template-columns: 1fr; gap: 4px; }
  .talk { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .spec > div { grid-template-columns: 112px 1fr; }
  .secheading { flex-direction: column; align-items: flex-start; gap: 14px; }
  .secheading .anno { text-align: left; }
  .breakout-comment { position: static; padding: 18px 20px 0; }
  .footer-links { width: 100%; }
}