/* Legacy Lens, public page.
   The tokens are the ones in web/src/styles.scss: greys, one green accent,
   no red, Montserrat, DejaVu Sans Mono, 2 px radius at most.
   The wall is one tile of board-formed concrete, wall-light.webp or
   wall-dark.webp: large panels, each poured a shade apart, faint joints, six
   tie holes per panel, pores. The noise was filtered in frequency space, so the
   tile is periodic and meets itself with no seam. Text never sits on the
   texture itself, only on flat slabs laid over it. */

:root {
  --ink: #161616;
  --muted: #4a4a48;
  --faint: #6b6a67;
  --line: #161616;
  --rule: #b9b7b2;
  --slab: #f1f0ec;
  --slab-2: #e4e2dd;
  --wall: #bdbbb6;

  --accent: #2d7548;
  --accent-ink: #1d5030;
  --on-accent: #ffffff;
  /* The heavy blocks: labels, the lead, the contact. Ink in the light theme,
     a darker pour than the slabs in the dark one, never a light slab. */
  --block: #161616;
  --on-block: #f1f0ec;
  --inv-accent: #7cc79a;

  --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "DejaVu Sans Mono", "SF Mono", Menlo, Consolas, monospace;
  --radius: 2px;

  --wall-texture: url("wall-light.webp");
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ecebe8;
    --muted: #b4b1ac;
    --faint: #8f8b86;
    --line: #ecebe8;
    --rule: #3d3b38;
    --slab: #1b1a19;
    --slab-2: #242321;
    --wall: #2e2d2b;

    --accent: #5fa87b;
    --accent-ink: #7cc79a;
    --on-accent: #0f1a13;
    --block: #0c0c0b;
    --on-block: #ecebe8;
    --inv-accent: #5fa87b;

    --wall-texture: url("wall-dark.webp");
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--wall);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The wall, fixed, so it stays put and the slabs slide over it. The tile is
   1440 px square: one panel joint and two rows of tie holes per screen. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--wall) var(--wall-texture) repeat 0 0;
}

a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

code, pre, .mono { font-family: var(--mono); }
code { font-size: 0.88em; overflow-wrap: anywhere; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 720px) {
  .wrap { padding: 0 32px; }
}

/* ---------- Masthead ---------- */

.masthead {
  padding: 20px 0 0;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
}

.brand {
  display: inline-block;
  background: var(--block);
  color: var(--on-block);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 0;
}

.lang {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 2px solid var(--line);
  background: var(--slab);
}

.lang a,
.lang span {
  display: block;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink);
}

.lang li + li { border-left: 2px solid var(--line); }

.lang [aria-current] {
  background: var(--block);
  color: var(--on-block);
  box-shadow: inset 0 -4px 0 var(--accent);
}

/* ---------- Hero ---------- */

.hero {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.hero h1 {
  margin: 0;
  background: var(--slab);
  padding: 24px 20px 20px;
  font-weight: 900;
  font-size: clamp(34px, 7.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lead {
  margin: 0;
  background: var(--block);
  color: var(--on-block);
  padding: 20px;
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--slab-2);
  padding: 16px 20px;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 7fr 5fr;
  }
  .hero h1 { grid-column: 1 / -1; padding: 40px 40px 32px; }
  .hero .lead { grid-column: 2; padding: 28px 32px; }
  .actions { grid-column: 2; padding: 20px 32px; }
  .hero .spacer { grid-column: 1; grid-row: 2 / span 2; }
}

.button {
  display: inline-block;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  background: var(--slab);
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.button:hover { text-decoration: underline; }

.actions.bare {
  background: transparent;
  padding: 20px 0 0;
}

/* ---------- Sections ---------- */

.section {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
}

.label {
  background: var(--block);
  color: var(--on-block);
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.label .no {
  font-weight: 900;
  font-size: 15px;
  color: var(--inv-accent);
  font-variant-numeric: tabular-nums;
}

.label h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.body {
  background: var(--slab);
  padding: 24px 20px 28px;
}

.body > :first-child { margin-top: 0; }
.body > :last-child { margin-bottom: 0; }

.body h3 {
  margin: 0 0 16px;
  font-weight: 900;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.body p { max-width: 68ch; }

@media (min-width: 900px) {
  .section { grid-template-columns: 3fr 9fr; }
  .section.flip { grid-template-columns: 9fr 3fr; }
  .section.flip .label { order: 2; }
  .label {
    flex-direction: column;
    gap: 6px;
    padding: 24px;
  }
  .label .no { font-size: 56px; line-height: 1; }
  .body { padding: 36px 40px 40px; }
}

/* Lists of things delivered or promised: a grid of slabs with hard edges. */
.tiles {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--line);
  border: 2px solid var(--line);
}

.tiles li {
  background: var(--slab);
  padding: 18px 18px 20px;
}

.tiles b {
  display: block;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.tiles span { color: var(--muted); }

@media (min-width: 640px) {
  .tiles { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1100px) {
  .tiles.three { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Proof ---------- */

.figures {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--line);
  border: 2px solid var(--line);
}

.figures li {
  background: var(--slab);
  padding: 20px 18px 22px;
}

.figures .n {
  display: block;
  font-weight: 900;
  font-size: clamp(48px, 9vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.figures .n small {
  font-size: 0.38em;
  letter-spacing: -0.01em;
  font-weight: 800;
}

.figures .what {
  display: block;
  margin-top: 10px;
  max-width: 40ch;
}

.figures li:first-child .n { color: var(--accent); }

@media (min-width: 720px) {
  .figures { grid-template-columns: 1fr 1fr; }
  .figures li:first-child,
  .figures li:nth-child(4) { grid-column: 1 / -1; }
  .figures li:not(:first-child) .n { font-size: clamp(48px, 6.4vw, 84px); }
}

.caveat {
  margin: 24px 0 0;
  padding: 16px 18px;
  border-left: 8px solid var(--line);
  background: var(--slab-2);
  font-weight: 600;
  max-width: none;
}

figure {
  margin: 28px 0 0;
  border: 2px solid var(--line);
  background: var(--slab-2);
}

figure img { width: 100%; }

figcaption {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--muted);
  border-top: 2px solid var(--line);
}

blockquote {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: var(--slab-2);
  border-left: 8px solid var(--accent);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* ---------- Contact ---------- */

.contact .body {
  background: var(--block);
  color: var(--on-block);
}

.contact .body a:not(.button) { color: var(--on-block); }

.contact .button {
  border-color: var(--on-block);
  background: transparent;
  color: var(--on-block);
}

.contact .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.contact .actions {
  background: transparent;
  padding: 8px 0 0;
}

.mail {
  font-family: var(--mono);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.note { font-size: 15px; color: inherit; opacity: 0.85; }

/* ---------- Footer ---------- */

.foot {
  margin: 56px 0 0;
  padding: 18px 0 32px;
}

.foot p {
  margin: 0;
  display: inline-block;
  background: var(--slab);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- The sample report ---------- */

.report {
  background: var(--slab);
  padding: 24px 20px 32px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .report { padding: 40px 48px 48px; }
}

.report h1 {
  font-weight: 900;
  font-size: clamp(34px, 6vw, 64px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 12px;
}

.report h2 {
  font-weight: 900;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 48px 0 12px;
  padding-top: 16px;
  border-top: 4px solid var(--line);
}

.report h3 {
  font-weight: 800;
  font-size: 19px;
  margin: 28px 0 8px;
}

.report p,
.report li { max-width: 80ch; }

.report p,
.report li,
.report h2,
.report h3 { overflow-wrap: break-word; }

.report hr {
  border: 0;
  border-top: 2px solid var(--rule);
  margin: 32px 0;
}

.report .table {
  overflow-x: auto;
  margin: 16px 0;
  border: 2px solid var(--line);
}

.report table {
  border-collapse: collapse;
  font-size: 14px;
  width: 100%;
}

.report th,
.report td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.report th { background: var(--slab-2); font-weight: 800; }
.report td.r, .report th.r { text-align: right; font-variant-numeric: tabular-nums; }

.report pre {
  overflow-x: auto;
  background: var(--slab-2);
  border: 2px solid var(--line);
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.frame {
  margin-top: 40px;
  background: var(--block);
  color: var(--on-block);
  padding: 20px;
}

.frame a { color: var(--on-block); }
.frame p { margin: 0 0 8px; max-width: 80ch; }
.frame p:last-child { margin-bottom: 0; }

.frame .kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inv-accent);
}

@media (min-width: 900px) {
  .frame { padding: 28px 48px; }
}

.report .small { font-size: 14px; color: var(--muted); }