/* ============ Fonts (self-hosted — no third-party requests) ============ */
/* Latin subset only; all four families are SIL OFL 1.1, licences in fonts/ */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ Tokens ============ */
/* Light only, on purpose (no dark theme), like the other dreizehnelf sites. */
:root {
  color-scheme: light;
  --font-head: 'Inter Tight', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --bg: #f6f5f1;
  --bg-soft: #ecebe5;
  --fg: #0c0c0d;
  --accent: #d81b60;
  --accent-ink: #ffffff;

  --line: rgba(12, 12, 13, 0.14);
  --dim: rgba(12, 12, 13, 0.62);
  --row-hover: rgba(12, 12, 13, 0.035);

  --space-3xs: clamp(0.25rem, 0.2vw + 0.2rem, 0.35rem);
  --space-2xs: clamp(0.4rem, 0.3vw + 0.3rem, 0.55rem);
  --space-xs:  clamp(0.6rem, 0.4vw + 0.5rem, 0.85rem);
  --space-s:   clamp(0.9rem, 0.5vw + 0.75rem, 1.2rem);
  --space-m:   clamp(1.3rem, 0.8vw + 1.05rem, 1.8rem);
  --space-l:   clamp(1.8rem, 1.4vw + 1.4rem, 2.6rem);
  --space-xl:  clamp(2.6rem, 2.2vw + 1.9rem, 3.8rem);
  --space-2xl: clamp(3.6rem, 3.4vw + 2.5rem, 5.6rem);
  --space-3xl: clamp(5rem, 5.5vw + 3.2rem, 8.5rem);

  --text-xs:  0.78rem;
  --text-s:   0.92rem;
  --text-m:   1.1rem;
  --text-l:   1.4rem;
  --text-xl:  clamp(1.7rem, 1.6vw + 1.3rem, 2.3rem);
  --text-2xl: clamp(2.4rem, 3vw + 1.7rem, 3.8rem);
  --text-3xl: clamp(3.2rem, 5vw + 2rem, 5.8rem);
  --text-4xl: clamp(4rem, 8vw + 1.6rem, 8.6rem);

  --measure: 62ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; margin: 0; line-height: 1; letter-spacing: -0.02em; }
p { margin: 0; }
svg { display: block; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--space-l); padding-right: var(--space-l); }

/* ============ Nav ============ */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
}
.wordmark {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--text-m);
  letter-spacing: -0.01em;
}
.wordmark em { font-style: normal; color: var(--accent); }
.nav-links {
  display: flex;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}
.nav-links .sep { color: var(--dim); }
.nav-links a:hover { color: var(--accent); }

/* ============ Shared bits ============ */
.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-xl);
  border-top: 1px solid var(--line);
}
.panel { background: var(--bg-soft); border-top: none; padding-bottom: var(--space-3xl); }
.dim { color: var(--dim); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: var(--space-m);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
}
.section-statement {
  font-size: var(--text-2xl);
  max-width: 18ch;
  margin-bottom: var(--space-m);
}
.section-sub { max-width: var(--measure); font-size: var(--text-m); }

.btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-s) var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
}
.btn-solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-solid:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn-line:hover { color: var(--accent); border-color: var(--accent); }
.link-row { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-l); }

/* ============ Hero ============ */
.hero { overflow: hidden; padding-bottom: var(--space-l); }
.hero-top { position: relative; }
.hero-copy { position: relative; z-index: 1; max-width: 62%; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.hero-name { font-size: var(--text-4xl); text-transform: uppercase; margin: var(--space-s) 0 var(--space-s); }
.hero-name { margin-bottom: var(--space-l); }
.hero-lede { max-width: 64ch; font-size: var(--text-l); color: var(--dim); }
.hero-lede b { color: var(--fg); font-weight: 500; }

.portrait {
  margin: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(40vw, 560px);
  color: var(--fg);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.portrait svg { width: 100%; height: 100%; }
.portrait .accent-part { color: var(--accent); }
@media (max-width: 860px) {
  .hero-copy { max-width: none; }
  .portrait { position: relative; width: 100%; height: 260px; margin-top: var(--space-l); }
}

/* ============ Flight log (career timeline) ============ */
.flightlog-scroll { overflow-x: auto; margin-top: var(--space-l); }
.flightlog { position: relative; min-width: 780px; padding-top: var(--space-xs); padding-bottom: var(--space-s); }
.fl-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; margin-top: 6px; }
.fl-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); }
.fl-axis { position: relative; height: 18px; border-bottom: 1px solid var(--line); }
.fl-axis span {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: 0;
  height: 18px;
  padding-left: 4px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
}
.fl-track {
  position: relative;
  height: 30px;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 13.793% 100%;
}
.fl-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: calc(var(--l) * 1%);
  width: calc(var(--w) * 1%);
  display: flex;
  align-items: center;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--fg);
  color: var(--bg);
}
.fl-bar.is-now { background: linear-gradient(to right, var(--accent) 55%, transparent); color: var(--accent-ink); }
.fl-nowline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(110px + (100% - 110px) * 0.991);
  width: 1px;
  background: var(--accent);
}
.fl-nowline span {
  position: absolute;
  top: -2px;
  right: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--accent);
}

.hud-ruler { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-s) 0; }
.hud-readout {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}
.hud-readout b { color: var(--fg); font-weight: 500; }

/* ============ Logo strip ============ */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  margin-top: var(--space-l);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-m);
  color: var(--dim);
  letter-spacing: -0.01em;
}
.logo-strip span { white-space: nowrap; }
.logo-note { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-top: var(--space-m); }

/* ============ Archive rows ============ */
.archive-list { margin-top: var(--space-xl); }
.archive-row {
  display: grid;
  grid-template-columns: 3.5rem 10rem minmax(0, 1fr) auto;
  gap: var(--space-l);
  align-items: start;
  padding: var(--space-l) 0;
  border-top: 1px solid var(--line);
  transition: background-color 0.15s ease;
}
.archive-row:last-child { border-bottom: 1px solid var(--line); }
.archive-row:hover { background: var(--row-hover); }
.row-index { font-family: var(--font-mono); font-size: var(--text-s); color: var(--dim); }
.row-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  padding-top: 0.2rem;
}
.row-tag.is-live { color: var(--accent); }.row-body h3 { font-size: var(--text-xl); margin-bottom: var(--space-2xs); }
.row-role { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: var(--space-2xs); }
.row-body p { max-width: var(--measure); color: var(--dim); font-size: var(--text-s); }
.row-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid currentColor;
  height: fit-content;
  white-space: nowrap;
}
.row-link.is-off { border-bottom: none; color: var(--dim); }
.archive-row:hover .row-link:not(.is-off) { color: var(--accent); }
@media (max-width: 720px) {
  .archive-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .row-link { justify-self: start; }
}

/* ============ Beyond code columns ============ */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.col h3 { font-size: var(--text-l); margin-bottom: var(--space-s); }
.col li {
  font-size: var(--text-s);
  color: var(--dim);
  padding: var(--space-2xs) 0;
  border-top: 1px solid var(--line);
}
.col li b { color: var(--fg); font-weight: 500; }
.col li a { border-bottom: 1px solid currentColor; }

/* ============ Case study page ============ */
.case-hero { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.case-hero h1 { font-size: var(--text-3xl); text-transform: uppercase; margin-bottom: var(--space-m); }
.shot {
  aspect-ratio: 16 / 9;
  margin-top: var(--space-xl);
  border: 1px dashed var(--line);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  text-align: center;
  padding: var(--space-m);
}

/* ============ Editorial ============ */
.serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.volume {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-xl);
}

.hero-name.md { font-size: var(--text-4xl); line-height: 0.96; text-transform: none; }

/* ============ Footer ============ */
.footer { padding-top: var(--space-xl); padding-bottom: var(--space-xl); border-top: 1px solid var(--line); }
.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.footer-row a:hover { color: var(--accent); }

/* ===== dreizehnelf.media: minimal build ===== */
.hero-copy.wide { max-width: none; }
.page-head { padding-top: var(--space-m); }

/* legal pages and footer promise (same as the other dreizehnelf sites) */
.legal { max-width: 74ch; margin-left: 0; padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }
@media (min-width: 1300px) { .legal { margin-left: max(0px, calc((100vw - 1240px) / 2)); } }
.legal h1 { font-size: var(--text-2xl); margin-bottom: var(--space-l); }
.legal h2 { font-size: var(--text-l); margin: var(--space-xl) 0 var(--space-xs); }
.legal p, .legal li, .legal address { font-size: 1rem; line-height: 1.65; margin-bottom: var(--space-xs); }
.legal address { font-style: normal; }
.legal ul { list-style: disc; padding-left: 1.2em; margin: 0 0 var(--space-xs); }
.legal a { border-bottom: 1px solid currentColor; }
.legal a:hover { color: var(--accent); }
.legal-lede { font-size: var(--text-m); line-height: 1.55; max-width: 62ch; }
.legal-lang { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-m); }
.legal-note-top { font-size: var(--text-s); color: var(--dim); max-width: 62ch; margin-bottom: var(--space-m); }
.legal-note { margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--dim); }
.footer-promise {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}
.footer-promise::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--accent); }

/* big headline on large screens, a notch smaller on phones */
@media (max-width: 560px) { .hero-name.md { font-size: var(--text-3xl); } }

/* ===== dreizehnelf.media: articles ===== */
.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; }
.ext { margin-left: 0.4em; font-size: 0.9em; }

.article-list { margin-top: var(--space-l); }
.article { border-top: 1px solid var(--line); padding: var(--space-l) 0; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-l); }
.article:last-child { border-bottom: 1px solid var(--line); }
.article-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.8; }
.article h3 { font-size: var(--text-xl); line-height: 1.1; margin: 0 0 var(--space-xs); }
.article h3 a:hover { color: var(--accent); }
.article p { max-width: 64ch; margin: 0 0 var(--space-xs); }
.article-links { margin-top: var(--space-s); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.article-links a { border-bottom: 1px solid currentColor; }
.article-links a:hover { color: var(--accent); }
@media (max-width: 720px) { .article { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); } }

/* drafts: a pill in the meta column, lighter text (still 4.5:1 on the page colour), a notice on the full page */
.article.is-draft { --faint: rgba(12, 12, 13, 0.58); }
.article.is-draft h3, .article.is-draft h3 a, .article.is-draft p { color: var(--faint); }
.pill { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg); border: 1px dashed currentColor; padding: 0 0.6em; margin-bottom: var(--space-2xs); }

.prose { max-width: 70ch; padding-top: var(--space-xl); padding-bottom: var(--space-3xl); }
.prose .eyebrow { margin-bottom: var(--space-xs); }
.prose h1 { font-size: var(--text-2xl); line-height: 1.02; margin: 0 0 var(--space-s); overflow-wrap: anywhere; }
.prose .subtitle { font-size: var(--text-l); line-height: 1.3; color: var(--dim); margin: 0 0 var(--space-s); }
.prose .byline { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 var(--space-l); }
.prose .draft-notice { border: 1px dashed var(--fg); padding: var(--space-s) var(--space-m); margin: 0 0 var(--space-l); }
.prose .draft-notice p { font-size: var(--text-s); line-height: 1.55; margin: 0; }
.prose .draft-notice .pill { margin: 0 var(--space-2xs) 0 0; }
.prose .summary { border-left: 3px solid var(--accent); padding-left: var(--space-s); margin: 0 0 var(--space-l); font-size: var(--text-m); line-height: 1.55; }
.prose h2 { font-size: var(--text-l); line-height: 1.15; margin: var(--space-xl) 0 var(--space-xs); }
.prose p, .prose li { font-size: 1.06rem; line-height: 1.7; margin: 0 0 var(--space-s); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--space-s); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-xs); }
.prose a { border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--accent); }
.prose .sources li { font-size: var(--text-s); line-height: 1.55; }
.prose .back { margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }