/* Labs — the landing page for labs.arjunkhera.io.
 *
 * This page is a second room of arjunkhera.com. It wears the main
 * site's paper, type and header bar. The token values below are a
 * hand copy from Arjunkhera/website:
 *   service/public/theme-quiet-editorial.css  (tokens, light + dark)
 *   service/public/navbar.css                  (the bar, locked 2026-08-31)
 *   service/public/articles.css                (the bar's inset and its
 *                                               narrow-screen reflow)
 *   service/public/archive.css                 (the list entry)
 * Copied 2026-09-07. If the main site's tokens change, copy them again.
 *
 * Fonts are the same two families the main site loads from Google
 * Fonts, served here from this origin so they arrive with the page and
 * the text does not swap after first paint.
 *
 * No hex value appears below the token block. Every colour is a token.
 */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-roman.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plexmono-500.woff2') format('woff2');
}

:root {
  --wc-paper: #faf6ec;
  --wc-ink: #211d16;
  --wc-body: #332b20;
  --wc-muted: #6b6150;
  --wc-faint: #9a8f77;
  --wc-line: #e3dbc8;
  --wc-line-strong: #d8cdb4;
  --wc-accent: #9a5b2d;
  --wc-panel: #f3ecd9;
  --wc-serif: 'Newsreader', Georgia, serif;
  --wc-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --wc-dur-fast: 150ms;
  --wc-dur-base: 220ms;
  --qe-accent-deep: #7c4620;
  --qe-nav: #5d5443;
  --qe-ease: cubic-bezier(.23, 1, .32, 1);
  color-scheme: light dark;
}

/* The main site switches theme from its control rail. Labs has no rail,
   so it follows the reader's system setting instead. */
@media (prefers-color-scheme: dark) {
  :root {
    --wc-paper: #191612;
    --wc-ink: #ece5d8;
    --wc-body: #cfc6b4;
    --wc-muted: #9a8f77;
    --wc-faint: #6e6552;
    --wc-line: #3d362b;
    --wc-line-strong: #4a4234;
    --wc-accent: #d99a4e;
    --wc-panel: #2e2921;
    --qe-accent-deep: #b87f3a;
    --qe-nav: #a89c85;
  }
}

* { box-sizing: border-box; }

html { background: var(--wc-paper); }

body {
  margin: 0;
  background: var(--wc-paper);
  color: var(--wc-ink);
  font-family: var(--wc-serif);
  font-size: 18px;
  transition: background var(--wc-dur-base) var(--qe-ease),
              color var(--wc-dur-base) var(--qe-ease);
}

/* ── the header bar (navbar.css for the type; articles.css for the
      inset) ─────────────────────────────────────────────────────── */

/* The bar's inset resolves to the same edge as the frame below it, as
   on every list page of the main site. A fixed inset would give the two
   sites two different left edges at any wide screen. */
.topbar {
  --frame: 934px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 21px max(32px, calc((100% - var(--frame)) / 2));
  border-bottom: 1px solid var(--wc-line);
}

.wordmark {
  font-family: var(--wc-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--wc-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}
.wordmark:hover { color: var(--wc-accent); }
.wordmark:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 4px; }

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--qe-nav);
}
.nav a {
  position: relative;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}
.nav a:hover { color: var(--wc-accent); }
.nav a.here { color: var(--wc-ink); }
.nav a:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 4px; }

.runner {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wc-accent);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--wc-dur-base) var(--qe-ease),
              width var(--wc-dur-base) var(--qe-ease),
              opacity var(--wc-dur-fast) var(--qe-ease);
}
.runner.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .runner { transition: none; } }

/* ── the frame: the main site's 934px frame, the text in its 600px
      measure at the frame's left edge, under the wordmark ─────── */

.frame.labs {
  width: 934px;
  max-width: 100%;
  margin: 0 auto;
  padding: 56px 0 120px;
}

.frame.labs .col { max-width: 600px; }

.head h1 {
  font-family: var(--wc-serif);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--wc-ink);
  margin: 0;
}

.head .lede {
  font-style: italic;
  font-size: 19px;
  line-height: 1.68;
  color: var(--wc-muted);
  margin: 14px 0 0;
}

.list { margin-top: 44px; border-top: 1px solid var(--wc-line-strong); }

/* One entry, top to bottom: the kind as a mono label, the title at
   section-heading size, the line italic, then a faint meta line. The
   same shape as an entry in the site's archive. */
.row {
  display: block;
  padding: 17px 0 18px;
  border-bottom: 1px solid var(--wc-line);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.row:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 4px; }
.rp {
  font-family: var(--wc-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wc-faint);
}
.rt {
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--wc-ink);
  margin-top: 3px;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}
.row:hover .rt { color: var(--wc-accent); }
.rs {
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--wc-muted);
  margin-top: 4px;
}
.rm { font-family: var(--wc-mono); font-size: 11px; color: var(--wc-faint); margin-top: 8px; }
.rm .v { color: var(--wc-accent); }

.foot {
  font-family: var(--wc-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--wc-faint);
  margin: 48px 0 0;
}

/* Narrow: the same breakpoints as the main site's list pages. */
@media (max-width: 998px) {
  .topbar { --frame: 100%; }
  .frame.labs { width: 100%; padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 12px 0; }
  .wordmark,
  .nav { flex: 0 0 100%; }
  .nav { gap: 18px; flex-wrap: wrap; }
  .frame.labs { padding: 40px 24px 80px; }
  .head h1 { font-size: 38px; }
}