/* address-v1 · editorial · dark: operator decision, 2026-09-12 · ui/30_candidates/editorial.md */
@font-face { font-family: Literata; src: url(/fonts/literata-normal.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: Literata; src: url(/fonts/literata-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #141618;
  --ink: #E7E2D8;
  --muted: #B8B2A6;
  --accent: #D8B36A;
  --serif: Literata, Charter, "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { background: var(--bg); color: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font: 400 19px/1.55 var(--serif);
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}
.head {
  width: 100%; /* body is a flex column: without an explicit width a flex item with auto side margins shrinks to its content and centres */
  box-sizing: border-box;
  max-width: calc(76em + 40px); /* 60em of the 19px body + the 20px side padding, so the head aligns with the text column */
  margin: 0 auto;
  padding: 28px 20px 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  column-gap: 2.5em;
  row-gap: 0.25em;
}
.head a { color: var(--muted); text-decoration-color: var(--accent); }
.head [aria-current] { color: var(--ink); }
main { padding: clamp(40px, 9vh, 96px) 20px 0; }
.statement {
  display: grid;
  grid-template-columns: minmax(0, 34em) 13em;
  column-gap: 3.5em;
  max-width: 60em;
  margin: 0 auto;
}
.statement > p { grid-column: 1; margin: 0 0 1.25em; text-wrap: pretty; }
.statement > p.lede { font-size: 1.32em; line-height: 1.4; margin-bottom: 1.5em; }
.statement > p:last-of-type { margin-bottom: 0; }
.note {
  grid-column: 2;
  align-self: start;
  padding-top: 0.3em;
  font: 400 15px/1.5 var(--sans);
  color: var(--muted);
}
.note { grid-row: 4; }
.note a { color: var(--accent); }
/* /projects — same grid, each project is a row pair */
.statement > h1 { grid-column: 1; font: 400 1.32em/1.4 var(--serif); margin: 0 0 1.2em; }
.project { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin-bottom: 1.5em; }
.project > h2 { grid-column: 1; font: 400 1em/1.55 var(--serif); margin: 0; }
.project > p { grid-column: 1; margin: 0.15em 0 0; text-wrap: pretty; }
.project > p.why { margin-top: 0.9em; }
.project > p.why i { font-style: italic; color: var(--muted); }
.project > .note { grid-column: 2; grid-row: 1 / span 3; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
footer {
  /* pinned to the bottom of the viewport when the page is short; below the content when it is long */
  width: 100%;
  max-width: calc(60em + 40px); /* 60em content + the 20px side padding, so it aligns with the text column */
  box-sizing: border-box;
  margin: auto auto 0;
  padding: clamp(72px, 12vh, 128px) 20px 56px;
}
footer address {
  font: 400 14px/1.6 var(--sans);
  font-style: normal;
  color: var(--muted);
  max-width: 52em;
}
@media (max-width: 760px) {
  body { font-size: 18px; }
  main { padding-top: 44px; }
  .statement { display: block; }
  .statement > p.lede { font-size: 1.2em; }
  .statement > .note { display: none; } /* the same link is inline in the sentence above; nothing is lost — ui/30_candidates/editorial.md */
  .head { padding-top: 20px; }
  main { padding-top: 32px; }
  .project { display: block; }
  .project > .note { margin: 0.4em 0 0; }
  footer { padding-top: 64px; padding-bottom: 40px; }
}