/* Single stylesheet, no build step. The site is a reference table and some prose; a
   framework would be more bytes than the content.

   Implements design_handoff_lensmount_homepage. Its prototype used inline styles purely
   because of its authoring format; every value below is taken from the handoff's token
   list, and nothing here is invented where the handoff was silent. */

:root {
  --paper: #FBF9F5;        /* page background */
  --paper-sunk: #F5F2EB;   /* footer */
  --surface: #FFFFFF;      /* table */
  --ink: #1E1C19;          /* headings, primary text, heavy rule */
  --ink-body: #34302B;     /* explainer body copy */
  --ink-soft: #4A453F;     /* hero standfirst */
  --ink-muted: #6E6862;    /* labels, nav, legend, clearance figures, footer */
  --ink-faint: #A39B92;    /* copyright line only */
  --mark: #C4BDB2;         /* the · and — status glyphs */
  --accent: #A0492B;       /* links and ticks */
  --accent-underline: rgba(160, 73, 43, 0.35);
  --rule: #E4DFD6;         /* section and panel borders */
  --rule-light: #F0EBE2;   /* table row borders */

  --font-display: Newsreader, Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --measure: 1180px;
  --gutter: 28px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-color: var(--accent-underline); text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; }

/* Radius and shadow are absent throughout, deliberately. Depth comes from the 1px rules
   and from the white table sitting on the paper background. */

.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;
}

/* ---------- shell ---------- */

header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 249, 245, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
header.site .bar {
  max-width: var(--measure); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
.wordmark {
  font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.wordmark strong { font-weight: 600; }
header.site nav { display: flex; gap: 22px; }
header.site nav a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); text-decoration: none;
  transition: color 120ms ease;
}
header.site nav a:hover { color: var(--ink); }

main { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 96px; }

footer.site { border-top: 1px solid var(--rule); background: var(--paper-sunk); }
footer.site .cols {
  max-width: var(--measure); margin: 0 auto; padding: 40px var(--gutter) 56px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 48px;
  font-size: 13.5px; color: var(--ink-muted);
}
footer.site p { margin: 0; max-width: 44ch; }
footer.site .copyright {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-faint);
}

/* ---------- home: hero ---------- */

.hero {
  padding: 72px 0 56px; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px; align-items: end;
}
.hero h1 {
  margin: 0; font-size: clamp(38px, 6vw, 68px); line-height: 1.02;
  letter-spacing: -0.025em; text-wrap: balance;
}
.hero .lede {
  margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: 16.5px; text-wrap: pretty;
}

/* ---------- home: matrix ---------- */

.matrix-wrap { padding-top: 56px; }
.section-head {
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  align-items: baseline; justify-content: space-between;
}
.section-head h2 { margin: 0; font-size: 30px; letter-spacing: -0.015em; }
.section-head .note { margin: 0; max-width: 54ch; color: var(--ink-muted); font-size: 14.5px; }

/* The wrapper is the scroll container, not the page: the matrix is nine columns and there
   is no honest way to fit that on a phone. Scrolling beats illegible. */
.scroller {
  margin-top: 28px; border: 1px solid var(--rule); background: var(--surface);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
table.matrix {
  border-collapse: collapse; min-width: 940px; width: 100%; font-family: var(--font-mono);
}
/* Two-line column headers ("Micro Four Thirds", "Fujifilm G (GFX)") are intended. */
table.matrix thead th {
  vertical-align: bottom; padding: 16px 12px 12px; text-align: center; width: 96px;
  border-bottom: 1px solid var(--ink);
  font-weight: 500; font-size: 12.5px; line-height: 1.25; color: var(--ink);
}
table.matrix thead th.corner {
  position: sticky; left: 0; z-index: 3; background: var(--surface);
  text-align: left; padding: 16px 18px 12px; min-width: 210px; width: auto;
  border-right: 1px solid var(--rule);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
}
table.matrix tbody th {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  text-align: left; padding: 13px 18px; white-space: nowrap;
  border-bottom: 1px solid var(--rule-light); border-right: 1px solid var(--rule);
  font-weight: 400; font-size: 14px; color: var(--ink);
}
table.matrix .ffd { margin-left: 8px; font-size: 12.5px; color: var(--ink-muted); }
table.matrix td {
  padding: 10px 12px; text-align: center; font-size: 14px;
  border-bottom: 1px solid var(--rule-light);
}
/* The row header is sticky, so it paints over its own row: it has to be given the hover
   tint explicitly rather than inheriting one set on the <tr>. */
table.matrix tbody tr:hover th,
table.matrix tbody tr:hover td { background: var(--paper); }

table.matrix td a {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--accent); transition: color 120ms ease;
}
table.matrix td a:hover { color: var(--ink); }
table.matrix .tick { font-size: 15px; line-height: 1; }
/* The clearance shows under the tick as well as in the title tooltip: a figure that only
   a hover reveals is invisible on a touch screen. */
table.matrix .clearance { font-size: 11px; letter-spacing: 0.02em; color: var(--ink-muted); }
table.matrix .mark { color: var(--mark); }

ul.key {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: 13.5px; color: var(--ink-muted);
}
ul.key li { display: flex; gap: 8px; align-items: baseline; }
ul.key .mark { font-family: var(--font-mono); color: var(--mark); }
ul.key .tick { font-family: var(--font-mono); color: var(--accent); }

/* ---------- home: explainer ---------- */

.explainer {
  margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 40px;
}
.explainer h2 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.explainer .prose {
  max-width: 62ch; display: flex; flex-direction: column; gap: 20px;
  font-size: 17px; color: var(--ink-body);
}
.explainer .prose p { margin: 0; text-wrap: pretty; }

/* ---------- interior pages ---------- */

/* The matrix needs the full 1180px; a paragraph does not. Interior sections set their own
   measure rather than capping `main`, which would also cap the table. */
.page { max-width: 46rem; padding-bottom: 2rem; }
.page h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.08; letter-spacing: -0.02em; margin: 56px 0 12px; }
.page h2 { font-size: 24px; letter-spacing: -0.015em; margin: 40px 0 10px; }
.page h3 { font-size: 18px; margin: 28px 0 8px; }
.page p { color: var(--ink-body); text-wrap: pretty; }

.lede { color: var(--ink-soft); font-size: 16.5px; }
.note, .meta { font-size: 14.5px; color: var(--ink-muted); }
.unknown { color: var(--ink-muted); font-style: italic; }

/* Key facts pulled out of the page body so the answer is visible without reading. */
.factbar {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  padding: 12px 18px; margin: 20px 0 28px;
  background: var(--surface); border: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-muted);
}
.factbar strong { color: var(--ink); font-weight: 500; }

blockquote {
  margin: 20px 0; padding: 12px 18px;
  border-left: 2px solid var(--accent); background: var(--paper-sunk);
  font-size: 15.5px;
}
blockquote p { margin: 0; }

table.spec {
  border-collapse: collapse; width: 100%; margin: 20px 0;
  background: var(--surface); border: 1px solid var(--rule);
  font-size: 14.5px;
}
table.spec th, table.spec td {
  text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--rule-light);
  vertical-align: baseline;
}
table.spec tr:last-child th, table.spec tr:last-child td { border-bottom: 0; }
table.spec th {
  width: 42%; font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}

ul.cards { list-style: none; padding: 0; margin: 16px 0; }
ul.cards li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.tag {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
}
.tag-full, .tag-full_with_caveats { color: var(--accent); }

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

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding: 48px 0 40px; gap: 24px; }
  .explainer { grid-template-columns: 1fr; gap: 20px; }
  .page h1 { margin-top: 40px; }
}

@media (max-width: 480px) {
  :root { --gutter: 20px; }
}