/* ============================================================
   Studying Image Tokenizers as Visual Languages — project page

   Typography and layout follow zlab-princeton.github.io/i1:
   Inter throughout (no serif display face), a ~1080px content
   column, white cards on a warm off-white ground, and numbered
   sections, with an accent green sampled from Figure 1.
   ============================================================ */

:root {
  --bg:        #fbfbfa;
  --band:      #f2f5f1;
  --card:      #ffffff;
  --text:      #20252a;
  --muted:     #5d666d;
  --rule:      #d9ded9;

  /* Accent is taken from the green in Figure 1 (the vivid #00b050 of the
     tokenizer boxes), darkened just far enough to clear 4.5:1 on the page
     ground for body-size text. Lighter than a deep teal, still legible. */
  --accent:      #007e39;
  --accent-soft: #b4e5a2;                  /* the figure's light green fill */
  --accent-t:    rgba(0, 126, 57, 0.05);
  --accent-b:    rgba(0, 126, 57, 0.18);

  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;

  --column: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container { max-width: var(--column); margin: 0 auto; padding: 0 20px; }

a { color: inherit; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--sans); color: var(--text); }
h1 { font-size: 29px; font-weight: 700; line-height: 1.13; margin: 0; }
h2 { font-size: 25px; font-weight: 700; line-height: 1.13; margin: 0 0 14px; }
h3 { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 30px 0 10px; }

p { margin: 0 0 14px; }
strong { font-weight: 700; }

/* ---------- nav ---------- */

.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 251, 250, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-nav-inner {
  max-width: var(--column); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px;
}
.nav-brand { font-size: 21px; font-weight: 800; letter-spacing: -0.2px; text-decoration: none; }
.nav-brand:hover { text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }
.nav-links a {
  font-size: 13px; font-weight: 650; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a .n { color: var(--accent); font-weight: 850; margin-right: 4px; }

/* ---------- hero ---------- */

.hero { padding: 52px 0 8px; text-align: center; }
.hero h1 { font-size: clamp(26px, 3.4vw, 34px); max-width: 900px; margin: 0 auto 10px; }
.hero .subtitle { font-size: clamp(18px, 2.4vw, 22px); font-weight: 600; color: var(--muted); margin: 0 0 18px; }
.byline { font-size: 14px; color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
.byline sup { font-size: 0.72em; font-weight: 700; }
/* Affiliation and footnote rows sit a step down from the author names. */
.byline .affil { font-size: 13px; }
.lede {
  font-size: 17px; line-height: 1.6; color: var(--text);
  max-width: 880px; margin: 0 auto 22px;
  /* balance evens the line lengths so the block cannot end on an orphan;
     pretty is the fallback where balance is unsupported. */
  text-wrap: pretty;
  text-wrap: balance;
}

.button-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.button-row--left { justify-content: flex-start; margin-top: 18px; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 6px;
  padding: 8px 15px; font-size: 14px; font-weight: 750;
  text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.15); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- sections ---------- */

.section { padding: 26px 0; scroll-margin-top: 62px; }
.section.band {
  background: var(--band);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 42px 0;
}

/* Numeral paired with a short rule — deliberately not the bare numeral the
   reference pages use. */
.section-num {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 850; letter-spacing: 1.5px;
  color: var(--accent); margin-bottom: 8px;
}
.section-num::after {
  content: ""; flex: 0 0 34px; height: 2px;
  background: var(--accent); opacity: .55;
}

/* Body text runs the full content column so its right edge lines up with the
   figure cards and finding boxes. */
.prose { max-width: var(--column); }
.prose p, .prose ul { max-width: none; }
.prose ul { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 7px; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em; background: var(--band); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 4px;
}

/* ---------- spec table ---------- */

/* `separate` rather than `collapse`: under collapse the table's own outer
   border is dropped once overflow/radius clip it, leaving the frame invisible
   while the row dividers still show. */
.spec-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden;
  margin: 4px 0 18px; font-size: 15px;
}
/* In `separate` mode a border on <tr> does not paint — it has to go on the
   cells. */
.spec-table tr + tr th, .spec-table tr + tr td { border-top: 1px solid var(--rule); }
.spec-table th {
  text-align: left; vertical-align: top;
  width: 190px; padding: 10px 16px;
  font-weight: 700; color: var(--accent); white-space: nowrap;
}
.spec-table td { padding: 10px 16px 10px 0; vertical-align: top; }
.spec-table td b { font-weight: 700; }

@media (max-width: 620px) {
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table th { padding-bottom: 0; }
  .spec-table td { padding: 2px 16px 12px; }
}

/* ---------- data tables ---------- */

/* Tables lifted from the paper (tokenizer roster, recipe validation, the
   fidelity/learnability comparison). Rendered as real tables rather than
   screenshots so they stay selectable, linkable and readable on a phone. */
.table-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 12px;
  box-shadow: 0 8px 24px rgba(24, 34, 31, 0.07);
  margin: 24px 0 8px;
}
.table-card.medium { max-width: 820px; margin-left: auto; margin-right: auto; }

/* The scroll container, not the card, so the rounded frame never clips the
   scrollbar and the caption stays put while the table pans. */
.table-scroll { overflow-x: auto; }

.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td { padding: 7px 10px; text-align: center; white-space: nowrap; }
.data-table thead th { font-weight: 750; font-size: 13px; }
.data-table thead .group th { color: var(--muted); font-weight: 700; }
.data-table thead .group th span {
  display: block; border-bottom: 1px solid var(--rule); padding-bottom: 4px;
}
.data-table thead tr:last-child th { border-bottom: 1.5px solid var(--text); }
/* A cell spanning both header rows sits in the FIRST row, so the rule above
   misses it and the header line would break under that column. */
.data-table thead th[rowspan] { border-bottom: 1.5px solid var(--text); vertical-align: bottom; }
.data-table th.left, .data-table td.left { text-align: left; }
/* Tabular figures line the numeric columns up, but they make a name like
   "GigaTok-DINO" read as monospace. Restore proportional figures on the label
   column. */
.data-table th.left, .data-table td.left { font-variant-numeric: normal; }
.data-table tbody tr + tr td { border-top: 1px solid var(--rule); }
/* Dashed rule between tokenizer families, matching \hdashline in the paper. */
.data-table tbody + tbody tr:first-child td { border-top: 1px dashed #9aa4a0; }
.data-table .best { font-weight: 800; }
.data-table .yes { color: var(--accent); font-weight: 800; }
.data-table .no  { color: var(--muted); }

/* Paper/code links that sit under a table, one line per tokenizer family.
   Qualified with `ul` so it outweighs the `.prose ul` list padding. */
ul.table-links {
  font-size: 13px; line-height: 1.5; color: var(--muted);
  margin: 10px 2px 0; padding: 0; list-style: none;
}
.table-links li { margin-bottom: 3px; }
.table-links b { color: var(--text); font-weight: 700; }

/* ---------- collapsible recipe ---------- */

/* The recipe rows are reference material: nothing in the findings depends on
   them, so they collapse behind a control and stop separating the reader from
   the results. */
.spec-details { margin: 22px 0 4px; }
.spec-details > summary {
  cursor: pointer;
  list-style: none;                      /* drops the default disclosure triangle */
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  font-size: 14px; font-weight: 700; color: var(--accent);
}
.spec-details > summary::-webkit-details-marker { display: none; }
.spec-details > summary::before { content: "+"; font-weight: 850; line-height: 1; }
.spec-details[open] > summary::before { content: "\2212"; }   /* minus */
.spec-details > summary:hover { border-color: var(--accent-b); }
.spec-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.spec-details .spec-table { margin-top: 12px; }

/* ---------- panels ---------- */

.panel {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 18px 20px;
}
.panel p:last-child { margin-bottom: 0; }

/* Findings span the full content column so their right edge lines up with the
   figure cards above them. Tinted rather than plain white, to read as a
   distinct element rather than another card. */
.finding {
  background: var(--accent-t);
  border: 1px solid var(--accent-b);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 14px 18px; margin: 18px 0 6px;
  max-width: none;
}
.finding b { color: var(--accent); font-weight: 800; }
/* Locator back to the paper, trailing the finding text. Set in the running
   size and weight so it reads as part of the sentence; only the muted color
   separates it. Appears after findings and nowhere else on the page. */
.finding .fref { color: var(--muted); white-space: nowrap; }
.finding p { margin: 0; max-width: none; }

/* ---------- limitations ---------- */

/* A numbered list whose markers are drawn as accent chips, so the section
   reads as a checklist of open directions rather than as body prose. */
.limits { counter-reset: lim; list-style: none; padding-left: 0; margin: 4px 0 0; }
.limits li { position: relative; padding-left: 36px; margin-bottom: 13px; }
.limits li::before {
  counter-increment: lim; content: counter(lim);
  position: absolute; left: 0; top: 2px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--accent-t); border: 1px solid var(--accent-b); color: var(--accent);
  font-size: 11px; font-weight: 850;
  display: flex; align-items: center; justify-content: center;
}
.limits b { font-weight: 700; }

/* ---------- figures ---------- */

.figure-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 12px;
  box-shadow: 0 8px 24px rgba(24, 34, 31, 0.07);
  margin: 24px 0 8px;
}
.figure-card img { display: block; width: 100%; height: auto; border-radius: 4px; }
.figure-card.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.figure-card.medium { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Left-aligned, not centred: these captions run to two or three lines, and a
   ragged-right block is easier to scan than a centred one. */
figcaption {
  font-size: 13px; line-height: 1.4; color: var(--muted);
  text-align: left; margin-top: 10px; padding: 0 2px;
}
figcaption b { color: var(--text); font-weight: 700; }

/* Side-by-side figures sized by --ar (image width/height) so panels of
   different aspect ratios still render at the same height. */
/* `stretch` makes both cards take the height of the taller one, so their
   bottoms line up even when one caption wraps to an extra line. The shorter
   caption simply leaves whitespace inside its card, which reflows correctly at
   any width — unlike a hard-coded spacer. */
.fig-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch; margin: 24px 0 8px; }
.fig-row .figure-card { flex: var(--ar, 1) 1 0; min-width: 300px; margin: 0; }

/* ---------- citation ---------- */

.bibtex {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 14px 16px; overflow-x: auto; max-width: none;
}
.bibtex pre {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.55;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--rule); margin-top: 30px; padding: 24px 0 46px;
  font-size: 13px; color: var(--muted); text-align: center;
}
footer p { margin: 0 0 6px; }
footer a { text-decoration: underline; }

/* ---------- responsive ---------- */

/* Between the phone breakpoint and the width where the full nav fits on one
   line, trim the brand and the link row rather than let the links wrap onto a
   second row underneath the brand. */
@media (max-width: 1100px) {
  .site-nav-inner { gap: 6px 12px; }
  .nav-brand { font-size: 19px; }
  .nav-links { gap: 4px 12px; }
  .nav-links a { font-size: 12px; }
}

@media (max-width: 760px) {
  .hero { padding: 34px 0 4px; }
  .nav-links { margin-left: 0; gap: 4px 12px; }
  .nav-links a { font-size: 12px; }
  .nav-brand { font-size: 18px; }
  .fig-row .figure-card { flex: 1 1 100%; }
  .section { padding: 20px 0; }
  .section.band { padding: 30px 0; }
}

/* ---------- print ---------- */

@media print {
  .site-nav { display: none; }
  body { background: #fff; }
  .figure-card { box-shadow: none; break-inside: avoid; }
  .section { padding: 16px 0; break-inside: avoid; }
  /* A collapsed recipe would print as a bare "+" button, so force it open. */
  .spec-details > summary { display: none; }
  .spec-details > *:not(summary) { display: block; }
}

/* This page is intentionally light-only: every figure is a white-background
   PNG exported from matplotlib / LaTeX, which would float on a dark ground. */