/* sparkerLX portfolio v1 — the one screen stylesheet.
   Tokens, type and spacing from 10-build-brief.md §5.1; header, footer and nav
   from §5.2; responsive thresholds from §5.5. Hand-written, no preprocessor,
   mobile-first: the base rules are the 390 px layout and the media queries
   widen. No !important.

   B1 covered the shell: tokens, type scale, spacing, header, footer, nav,
   fonts. B2 added the §5.3 components Home (T1) and the case pages (T3) use;
   B3 adds the section (T2), gallery (T4) and utility (T5) layouts. */

/* ---------- font ---------- */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens (§5.1) ---------- */

:root {
  --ink: #1f2933;
  --ink-2: #3e4c59;
  --brand-blue: #1b82f7;
  --link-blue: #0b5fd1;
  --brand-orange: #f9a700;
  --orange-text: #b86a00;
  --paper: #ffffff;
  --paper-2: #f5f7fa;
  --line: #d9dee4;
  --blue-50: #e8f1fe;

  --measure: 720px;
  --wide: 1040px;
  --gallery: 1200px;
  --gutter: 16px;

  --font-display: "Manrope", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* spacing scale: 4 8 12 16 24 32 48 64 96 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --radius-frame: 4px;
  --radius-card: 6px;
  --radius-pill: 20px;

  --header-h: 56px;
  --section-gap: var(--s7);

  color-scheme: light;
}

@media (min-width: 760px) {
  :root {
    --gutter: 24px;
    --header-h: 64px;
    --section-gap: var(--s8);
  }
}

/* ---------- reset and base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* a min-height column, so on a short page the footer sits at the viewport
     bottom instead of floating mid-screen (vh first for browsers without dvh) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  body { font-size: 17.5px; }
}

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

a { color: var(--link-blue); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-blue); }

:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- type scale (§5.1) ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 var(--s3);
}

h1 { font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; margin-top: 0; }
h2 { font-size: 26px; line-height: 1.25; letter-spacing: -0.015em; margin-top: var(--section-gap); }
h3 { font-size: 20px; line-height: 1.3; margin-top: var(--s5); }
h4 { font-size: 17px; line-height: 1.35; margin-top: var(--s5); }

@media (min-width: 600px) {
  h1 { font-size: 40px; line-height: 1.12; }
  h2 { font-size: 30px; }
  h3 { font-size: 22px; }
}

p { margin: 0 0 var(--s4); }

ul, ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
li { margin-bottom: var(--s2); }

figcaption, .caption { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.label, .meta-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--section-gap) 0; }

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

.skip-link {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--paper); color: var(--link-blue);
  padding: var(--s3) var(--s4); border: 1px solid var(--line);
  border-radius: var(--radius-card); font-family: var(--font-display); font-weight: 700;
}
.skip-link:focus { top: var(--s2); }

/* ---------- layout ---------- */

main { display: block; flex: 1 0 auto; }

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main > .wrap { padding-bottom: var(--s9); }

.measure { max-width: var(--measure); }

/* ---------- header (§5.2) ---------- */

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: var(--header-h);
}

@media (min-width: 1040px) {
  header.site .wrap { gap: var(--s5); }
}

/* The lockup and the footer wordmark are SVG logotypes (OI-43, option C): the
   brand colors are fills on the <text>, so nothing here colors them. */
.lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.lockup svg, svg.footer-wordmark { display: block; }

/* The list is in the DOM and stacked-visible without JS below 760; the menu
   button only appears when site.js runs (§4.4). */
.nav-toggle { display: none; }

/* Between the collapse point (760) and 1040 the row is at its tightest: six
   items beside the lockup inside a viewport-width wrap. It is held to one row
   there by a smaller step of the type scale and a tighter gap, and returns to
   the Main board's 15 px and 24 px at 1040 and up. */
header.site nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s2);
}

@media (min-width: 1040px) {
  header.site nav ul { gap: var(--s3) var(--s5); }
}

header.site nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
}
header.site nav a:hover { color: var(--link-blue); }
header.site nav a[aria-current="page"] { border-bottom-color: var(--brand-blue); }

/* Contact: the Main board's 44 px secondary button, full 1 px outline on all
   four sides (the nav links' transparent underline must not replace its
   bottom edge), vertically centered in the header bar. */
header.site nav .btn {
  min-height: 44px;
  height: 44px;
  font-size: 14px;
  line-height: 1;
  padding: 0 var(--s3);
  border: 1px solid var(--link-blue);
}

@media (min-width: 760px) {
  /* flex items, so no line-box strut makes the row taller than 44 px */
  header.site nav li { display: flex; align-items: center; margin: 0; }
}

@media (min-width: 1040px) {
  header.site nav a { font-size: 15px; }
  header.site nav .btn { font-size: 15px; padding: 0 var(--s4); }
}

/* below 760: stacked column on paper-2, under the header bar */
@media (max-width: 759px) {
  header.site .wrap { flex-wrap: wrap; }
  header.site nav {
    order: 3;
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(var(--gutter) * -1);
    background: var(--paper-2);
    border-top: 1px solid var(--line);
  }
  header.site nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) var(--gutter);
  }
  header.site nav li + li { border-top: 1px solid var(--line); }
  header.site nav a {
    width: 100%;
    border-bottom: none;
    border-left: 2px solid transparent;
    padding-left: var(--s3);
  }
  header.site nav a[aria-current="page"] {
    border-left-color: var(--brand-blue);
    color: var(--link-blue);
  }
  header.site nav .btn { margin: var(--s3) 0; width: auto; align-self: flex-start; }

  /* with JS: the button appears and the list collapses until it is opened */
  header.site.has-js .nav-toggle { display: inline-flex; }
  header.site.has-js nav[hidden] { display: none; }
}

/* Where the browser reports scripting, collapse from the first paint rather
   than when the deferred site.js runs, so the page does not shift up under
   the reader (Lighthouse CLS). Without scripting, nothing here applies and the
   list stays stacked-visible (§4.4). */
@media (max-width: 759px) and (scripting: enabled) {
  header.site .nav-toggle { display: inline-flex; }
  header.site nav:not(.is-open) { display: none; }
}

/* ---------- buttons (§5.3) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary { background: var(--link-blue); color: var(--paper); border-color: var(--link-blue); }
.btn-primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--paper); }

.btn-secondary { background: var(--paper); color: var(--link-blue); border-color: var(--link-blue); }
.btn-secondary:hover { background: var(--blue-50); color: var(--link-blue); }

.nav-toggle {
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { display: block; }

/* ---------- footer (§5.2) ---------- */

footer.site {
  border-top: 1px solid var(--line);
  margin-top: var(--s8);
  padding: var(--s6) 0 var(--s7);
  font-size: 15px;
}

footer.site .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

@media (min-width: 760px) {
  footer.site .wrap {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-brand { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.footer-brand .mark { display: block; flex: none; }

.footer-who { color: var(--ink-2); }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- labels (§5.1: 13 px, 700, 0.02em; never all-caps) ---------- */

.kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--ink-2);
  margin-bottom: var(--s2);
}

/* ---------- T1 Home (§5.3, §5.4) ---------- */

.t1 section { padding: var(--section-gap) 0; }
.t1 section + section:not(.band):not(.print-only) > .wrap > :first-child { margin-top: 0; }
.t1 section h2 { margin-top: 0; }
.t1 .featured, .t1 .earlier, .t1 .what-i-do { border-top: 1px solid var(--line); }
.t1 .band + .what-i-do { border-top: 0; }

.hero { padding: var(--s7) 0; }
.hero h1 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: var(--s5);
}
.hero-sub { font-size: 17px; color: var(--ink-2); margin-bottom: var(--s6); }

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
}

@media (min-width: 600px) {
  .hero h1 { font-size: 48px; }
  .hero-sub { font-size: 19px; }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
}

/* the visual ships at every width (the ≈7 KB SVG is accepted) but shows from 760 */
.hero-visual { display: none; margin: 0; }

@media (min-width: 760px) {
  .hero { padding: var(--s8) 0; }
  .hero-visual { display: block; margin-top: var(--s7); }
}

@media (min-width: 1040px) {
  .hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s7);
    align-items: center;
  }
  .hero-visual { margin-top: 0; }
}

.hero-visual .frame {
  width: 100%;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--paper-2);
  padding: var(--s4);
}
.hero-visual svg { display: block; width: 100%; height: auto; }
.hero-visual figcaption {
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: var(--s3) var(--s4);
  margin: 0;
}

/* heading left, paragraph at the measure right, from 1040 (How I work, Earlier) */
.split > h2 { margin-bottom: var(--s3); }
.split > p { max-width: var(--measure); margin: 0; font-size: 18px; }

@media (min-width: 1040px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure));
    gap: var(--s6);
    align-items: baseline;
  }
  .split > h2 { margin: 0; }
  .split > p { font-size: 19px; }
}

.band { background: var(--paper-2); }

.print-only { display: none; }

/* ---------- cards (§5.3) ---------- */

.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  margin: var(--s5) 0 0;
}

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

a.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
}
a.card:hover, a.card:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--brand-blue);
  box-shadow: inset 0 -2px 0 var(--brand-blue);
}

.card-visual {
  aspect-ratio: 16 / 10;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.card-visual img { display: block; width: 100%; height: 100%; }
.card-visual.cover img { object-fit: cover; }
.card-visual.contain img { object-fit: contain; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s5) var(--s5) var(--s5);
}

.card .card-title { font-size: 20px; line-height: 1.3; margin: 0 0 var(--s1); }
.card-sub { font-style: italic; color: var(--ink-2); font-size: 15px; margin-bottom: var(--s3); }
.card-desc { font-size: 16px; }
.card .meta { margin-bottom: var(--s4); }

.card-more {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--link-blue);
}
a.card:hover .card-more { color: var(--brand-blue); }

/* ---------- tiles (§5.3) ---------- */

.tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

@media (min-width: 600px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

a.tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s4);
  align-content: start;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  color: var(--ink);
  text-decoration: none;
}
a.tile:hover, a.tile:focus-visible { border-color: var(--brand-blue); color: var(--ink); }
.tile h3 { margin: 0 0 var(--s1); font-size: 20px; }
.tile .arrow { color: var(--link-blue); margin-top: 3px; }
.tile p { grid-column: 1; margin: 0; font-size: 15px; color: var(--ink-2); }

/* ---------- T3 Case: masthead, body, next case (§5.3) ---------- */

.masthead { padding-top: var(--s6); margin-bottom: var(--s7); }
.breadcrumb {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 var(--s3);
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.masthead h1 { margin-bottom: var(--s3); }
.masthead .subtitle {
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-2);
  max-width: var(--measure);
  margin-bottom: var(--s5);
}

@media (min-width: 600px) {
  .masthead { padding-top: var(--s7); }
  .masthead .subtitle { font-size: 20px; }
}

ul.meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
}
ul.meta li {
  margin: 0;
  padding: var(--s1) var(--s3);
  background: var(--paper-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-2);
}

.lead figure { margin-top: 0; }

/* text at the measure; figures, tables and panels at --wide */
.case-body > :where(p, ul, ol, h2, h3, h4) { max-width: var(--measure); }
.case-body > h2:first-child { margin-top: var(--s7); }

.next-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
@media (min-width: 600px) {
  .next-case { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.next-case a {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-decoration: none;
}
.next-case a:hover, .next-case a:focus-visible { border-color: var(--brand-blue); }
.next-case .next { text-align: right; }
.next-case .label { color: var(--ink-2); font-size: 13px; }
.next-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; }

/* ---------- figures (§5.3, §5.7) ---------- */

figure { margin: var(--s6) 0; }
figure .frame {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  background: var(--paper);
  overflow: hidden;
}
figure .frame img { display: block; max-width: 100%; height: auto; }
figcaption { margin-top: var(--s2); max-width: var(--measure); }

figure.photo .frame { border: 0; }

figure.tall { max-width: 480px; }

figure.excerpt { max-width: 480px; }
figure.excerpt .frame {
  width: 100%;
  border: 0;
  background: var(--paper-2);
  padding: var(--s4);
}
figure.excerpt img {
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(31, 41, 51, 0.08);
}

figure.diagram .frame { width: 100%; padding: var(--s3); }
figure.diagram svg { display: block; width: 100%; height: auto; }
@media (min-width: 760px) {
  figure.diagram .frame { padding: var(--s5); }
}

/* rows: columns = count (--n, up to five) from 1040, two from 600, one below */
.figrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--s4);
  margin: var(--s6) 0;
}
@media (min-width: 600px) {
  .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .figrow { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
}

.figrow > figure { margin: 0; display: flex; flex-direction: column; }
.figrow > figure > .frame { width: 100%; }
.figrow > figure:is(.screen, .portrait, .page) > .frame { display: flex; align-items: center; justify-content: center; }
.figrow > figure.screen > .frame { aspect-ratio: 16 / 10; }
.figrow > figure.portrait > .frame { aspect-ratio: 9 / 16; background: var(--paper-2); }
/* letter-size documents: a 3:4 frame, rows as for portrait (10-4) */
.figrow > figure.page > .frame { aspect-ratio: 3 / 4; background: var(--paper-2); }
.figrow > figure:is(.screen, .portrait, .page) img { width: 100%; height: 100%; object-fit: contain; }
.figrow > figure.photo img { width: 100%; }
.figrow > figure.excerpt > .frame { flex: 1; }

/* a wide or tall item breaks the row and takes its own */
.figrow > figure.wide, .figrow > figure.tall { grid-column: 1 / -1; }
.figrow > figure.wide img { width: 100%; }

.sixup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
  margin: var(--s6) 0;
}
@media (min-width: 760px) {
  .sixup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sixup > figure { margin: 0; max-width: 300px; display: flex; flex-direction: column; }
.sixup > figure > .frame { flex: 1; }

/* ordered story sequences (10-3): a wrapping row of numbered frames, one
   caption; portrait and tall frames 300 wide, landscape panels 480; on phones
   each frame takes the full width, in order */
.steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s4);
  margin: 0;
  padding: 0;
}
.steps > li { position: relative; margin: 0; width: 100%; }
.steps .frame { width: 100%; }
.steps img { width: 100%; }
.steps > li.portrait .frame { aspect-ratio: 9 / 16; background: var(--paper-2); display: flex; align-items: center; }
.steps > li.screen .frame { aspect-ratio: 16 / 10; display: flex; align-items: center; }
.steps > li:is(.portrait, .screen) img { height: 100%; object-fit: contain; }
.step {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 1;
  min-width: 28px;
  padding: 2px var(--s2);
  background: var(--paper-2);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}
@media (min-width: 600px) {
  .steps > li:is(.portrait, .tall) { width: 300px; }
  .steps > li:is(.wide, .screen) { width: 480px; }
}

/* Sequence layout modifiers (10-8 items 3 and 4). Layout only: DOM order, the
   numbering and the group caption are the same as any other sequence. */

/* Connect with Clyde at 1040 and up: the two story pages side by side, then the
   three conversation panels stacked in a third column that fills the rest of
   the row, all three tops level with the story pages (10-8 item 3). Frames 1
   and 2 span the three rows so the panels stack without gaps between them, and
   align-self keeps them at the top rather than stretching. Below 1040 nothing
   here applies and the sequence wraps as it did before (mid-batch ruling 1). */
@media (min-width: 1040px) {
  .sequence.three-col .steps {
    display: grid;
    grid-template-columns: 300px 300px minmax(0, 1fr);
    align-items: start;
  }
  .sequence.three-col .steps > li { width: auto; }
  .sequence.three-col .steps > li:nth-child(-n+2) { grid-row: 1 / span 3; align-self: start; }
  .sequence.three-col .steps > li:nth-child(n+3) { grid-column: 3; }
}

/* The comic panels: one per row at the full content width, as the figrow
   rendered them before B7; the 480 px sequence frame width does not apply
   (mid-batch ruling 3). The badge sits above the image rather than over it,
   left-aligned with the frame, on all three frames: the comic files have no
   margin for it and panel 3's caption box starts at the top-left corner
   (mid-batch ruling 5). */
.sequence.full-width .steps > li { width: 100%; }
.sequence.full-width .steps > li .step { position: static; display: inline-block; margin-bottom: var(--s2); }

/* ---------- stats (§5.3; the copy marks none yet, OI-38) ---------- */

.stat {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--link-blue);
  text-decoration: underline 2px var(--brand-orange);
  text-underline-offset: 3px;
}

ul.stat-strip {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: var(--s5) 0;
  padding: 0;
  max-width: var(--measure);
}
ul.stat-strip li { margin: 0; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.stat-figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  color: var(--link-blue);
}
.stat-label { display: block; font-size: 14px; color: var(--ink-2); }

@media (min-width: 600px) {
  ul.stat-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  ul.stat-strip li { border-top: 0; padding: 0 var(--s5); border-left: 1px solid var(--line); }
  ul.stat-strip li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- details, tables, quote block (§5.3) ---------- */

details.how {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin: var(--s6) 0;
}
details.how summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding: var(--s5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
details.how summary::-webkit-details-marker { display: none; }
details.how summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s ease;
}
details.how[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.details-body { padding: 0 var(--s5) var(--s5); }
.details-body > :last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: var(--s5) 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table-wrap th, .table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: var(--s3) var(--s3);
  border-bottom: 1px solid var(--line);
}
.table-wrap thead th {
  background: var(--paper-2);
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom-color: var(--line);
}
@media (max-width: 599px) {
  .table-wrap table { min-width: 560px; }
}

figure.quote-block { max-width: var(--measure); }
figure.quote-block .label { margin: 0 0 var(--s2); display: block; }
figure.quote-block blockquote {
  margin: 0;
  padding: var(--s5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-frame);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
}
figure.quote-block blockquote p:last-child { margin-bottom: 0; }

/* ---------- T2 Section, T4 Gallery, T5 Utility (§5.3, §5.4) ---------- */

.page-head { padding-top: var(--s6); }
.page-head h1 { max-width: var(--measure); margin-bottom: var(--s4); }
.deck { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); margin: 0; }

@media (min-width: 600px) {
  .page-head { padding-top: var(--s7); }
  .deck { font-size: 20px; }
}

.t2 .cards { margin-top: var(--s7); }
/* two cards share the row; a single card takes half, not a third */
@media (min-width: 1040px) {
  .cards.n2, .cards.n1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a block reads as content, not as something to click: hairline above, no frame */
.block {
  margin-top: var(--section-gap);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.block > h2 { margin-top: 0; margin-bottom: var(--s2); max-width: var(--measure); }
.block-meta { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: var(--measure); margin-bottom: var(--s5); }
.block > :where(p, ul, ol) { max-width: var(--measure); }

/* ---------- T4 gallery ---------- */

.t4 main > .wrap { max-width: calc(var(--gallery) + var(--gutter) * 2); }

.jump-nav { margin: var(--s6) 0 0; }
/* phones: a closed <details> (10-4); the summary reads like the links */
.jump > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--link-blue);
  cursor: pointer;
  list-style: none;
}
.jump > summary::-webkit-details-marker { display: none; }
.jump > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.jump[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* from 600 the summary goes and the list is always shown, where the browser
   can style ::details-content; elsewhere the phone treatment holds at every width */
@supports selector(::details-content) {
  @media (min-width: 600px) {
    .jump > summary { display: none; }
    .jump::details-content { content-visibility: visible; display: contents; }
  }
}
.jump ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
  margin: 0;
  padding: 0;
}
.jump li { margin: 0; }
.jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.jump a:hover { text-decoration: underline; }

@media (max-width: 599px) {
  /* phones: a plain list, one entry per line */
  .jump ul { flex-direction: column; gap: 0; }
  .jump li + li { border-top: 1px solid var(--line); }
}

.group > h2 { margin-top: var(--section-gap); margin-bottom: 0; }

.entry {
  padding: var(--s6) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: var(--s4);
}
.group > h2 + .entry { margin-top: var(--s5); }
.entry h3 { margin: 0 0 var(--s1); }
.entry-meta { font-style: italic; font-size: 14px; color: var(--ink-2); margin-bottom: var(--s3); }
.entry-text > p:last-child { margin-bottom: 0; }
.entry-text { max-width: var(--measure); }
.entry-figs .figrow { margin: var(--s5) 0 0; }
.entry-figs > figure { margin: var(--s5) 0 0; }

/* gallery rows: never more than three across, two below 1040 and on phones
   (Scott's B3 ruling; case and section pages keep the §5.7 count rule) */
.entry-figs .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* from 760 entries alternate: text and figures side by side, sides swapping */
@media (min-width: 760px) {
  .entry:not(.no-figs) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s7);
    align-items: start;
  }
  .entry:not(.no-figs):nth-of-type(even) .entry-text { order: 2; }
  .entry-figs .figrow, .entry-figs > figure { margin-top: 0; }
}

@media (min-width: 1040px) {
  .entry-figs .figrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entry-figs .figrow[style="--n:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- T5 utility: a single column at the measure ---------- */

.t5 main > .wrap > * { max-width: var(--measure); }
.t5 main > .wrap > h1 { margin-top: var(--s6); }
.t5 h2 { margin-top: var(--s7); }
.t5 figure.diagram .frame { padding: var(--s3); }

@media (min-width: 600px) {
  .t5 main > .wrap > h1 { margin-top: var(--s7); }
}

/* How I work: the principles are h2 for the outline, set at the h3 step */
h2.principle { font-size: 20px; line-height: 1.3; margin: var(--s6) 0 var(--s2); }
@media (min-width: 600px) {
  h2.principle { font-size: 22px; }
}
h1 + h2.principle { margin-top: var(--s5); }

/* About */
.about-open > h2:first-of-type { margin-top: var(--s5); }
.headshot-slot {
  width: 160px;
  height: 160px;
  margin: 0 0 var(--s5);
  background: var(--paper-2);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.headshot-slot img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .headshot-slot { float: right; margin: var(--s5) 0 var(--s5) var(--s6); }
}
/* two short columns wrap fine at 390; only wide tables need to scroll */
.about .table-wrap table { min-width: 0; }
.about .table-wrap td:first-child { white-space: nowrap; color: var(--ink-2); padding-left: 0; }
.about .table-wrap tr:first-child td { border-top: 0; }
.resume { margin-top: var(--s6); }

/* Archive: a shade quieter (§5.4): smaller images, captions in ink-2. At
   220 px the five fit 3 + 2 in the 720 measure rather than 2 + 2 + 1. */
.archive .figrow { grid-template-columns: repeat(auto-fill, minmax(150px, 220px)); }
.archive .figrow > figure { max-width: 220px; }
.archive figcaption { font-size: 13px; }

/* Contact */
.contact-mailto { margin-top: var(--s6); }
.contact-form { margin-top: var(--s6); }
.contact-form label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: var(--s1);
}
.contact-form input, .contact-form textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--ink-2);
  border-radius: var(--radius-card);
  font: inherit;
  color: var(--ink);
  background: var(--paper);
}
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- review-build only (§5.3); --strict guarantees these never ship --- */

.build-note {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: var(--s2) 0;
}

.placeholder {
  border: 1px dashed var(--brand-orange);
  background: #fffaf0;
  color: var(--ink);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-frame);
  font-size: 14px;
  margin: 0 0 var(--s4);
}
span.placeholder { display: inline; padding: 1px var(--s1); margin: 0; }

/* ---------- lightbox (§4.4, §5.3 .lightbox); site.js marks the triggers ---------- */

[data-lb] { cursor: zoom-in; }
figure svg[data-lb]:focus-visible { outline-offset: -2px; }

dialog.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(31, 41, 51, 0.92);
  color: var(--paper);
  overflow: hidden;
}
dialog.lightbox[open] { display: grid; place-items: center; animation: lb-fade 0.18s ease-out; }
dialog.lightbox::backdrop { background: transparent; }
html:has(dialog.lightbox[open]) { overflow: hidden; }
.lightbox-media { display: grid; place-items: center; }
.lightbox-media > img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; }
.lightbox-media > svg { display: block; width: 96vw; height: auto; max-height: 92vh; background: var(--paper); border-radius: var(--radius-frame); }
/* taller than 2:1 opens at full width and scrolls (Scott's B4 ruling, §5.7 tall) */
dialog.lightbox.is-tall { overflow-y: auto; }
dialog.lightbox.is-tall[open] { place-items: start center; }
dialog.lightbox.is-tall .lightbox-media { padding: 4vh 0; }
dialog.lightbox.is-tall .lightbox-media > img { max-height: none; }
.lightbox-close {
  position: fixed;
  top: var(--s2);
  right: var(--s2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 41, 51, 0.6);
  color: var(--paper);
  cursor: pointer;
}
.lightbox-close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  dialog.lightbox[open] { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}