/* Portfolio styles, Option G.

   Inverted from the previous near-black / Cormorant / brass identity to the cream ground,
   Inter and oxblood of the "60 Second Read" board. Tokens are lifted straight from the
   .pen file's f-* variables so the site and the design file cannot drift.

   One deliberate deviation, documented at --mut below: the design's muted grey fails
   WCAG AA for body text on the band ground, so it is darkened by five units. */

:root {
  --base: #F3EFE4;   /* page ground */
  --deep: #E8E1D1;   /* band sections */
  --lite: #F9F6EE;   /* the closing block */
  --ink:  #151009;
  --red:  #8C2F26;
  /* Design value is #6F6656. On --deep that measures 4.34:1 against body text, under the
     4.5 AA floor; this measures 4.68 there and 5.31 on --base. The shift is invisible. */
  --mut:  #6A6151;
  --rule: #D6CCB7;
  /* A second rule weight: the design uses full-ink hairlines to open a list and the
     lighter rule between its rows. */
  --rule-strong: var(--ink);

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The board is 1280 wide with 80px sides, so the content column is 1120. */
  --max: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --prose: 68ch;
}

/* Full-bleed bands are laid out against the viewport, and 100vw includes the scrollbar.
   `clip` kills the overflow that would cause without creating a scroll container. */
html, body { overflow-x: clip; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: rgba(140, 47, 38, .18); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

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

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- shared atoms */
.eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 18px;
}

/* The mono evidence line under a claim. Ink rather than muted: it is the proof, so it
   should not be quieter than the sentence it is proving. */
.metric {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  line-height: 1.7; color: var(--ink); margin: 0;
}
.metric--red { color: var(--red); }

/* ---------------------------------------------------------- topbar */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 34px var(--gutter);
  font-size: 15px;
}
@media (max-width: 620px) {
  .top { flex-direction: column; align-items: flex-start; gap: 7px; font-size: 14px; }
}
.top .brand { text-decoration: none; color: var(--ink); letter-spacing: .01em; }
.top .where, .top .back { color: var(--mut); text-decoration: none; }
.top .back:hover, .top .back:focus-visible { color: var(--red); }

/* ---------------------------------------------------------- bands
   Sections alternate ground so a long page reads as movements. Full bleed via a negative
   viewport margin, with the inner padding put back so content stays on the column. */
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - (var(--max) / 2) + var(--gutter)));
}
.band--deep { background: var(--deep); }
.band--lite { background: var(--lite); }

/* ================================================================= home */

/* The claim. Two lines, the second in oxblood, then the subline at a short measure. */
.statement { padding: clamp(48px, 8vh, 92px) 0 0; }
.statement h1 {
  font-size: clamp(34px, 5.4vw, 66px);
  letter-spacing: -.04em;
  line-height: 1.1;
  hyphens: none; -webkit-hyphens: none;
}
.statement h1 .l1 { display: block; color: var(--ink); }
.statement h1 .l2 { display: block; color: var(--red); }
.statement .sub {
  margin: clamp(26px, 3.6vw, 40px) 0 0;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.5;
  color: var(--mut);
  max-width: 680px;
}
/* The board holds 96px of air between the statement and the first band. */
.statement + .band { margin-top: clamp(48px, 7vw, 96px); }

/* A section header: title left, small label right, sharing a baseline. */
.shead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 30px; flex-wrap: wrap;
  padding-bottom: clamp(22px, 2.6vw, 34px);
}
.shead h2 {
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -.026em;
  hyphens: none; -webkit-hyphens: none;
}
.shead .note { font-size: 15px; color: var(--mut); }
@media (max-width: 700px) {
  .shead { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.sblock { padding: clamp(52px, 6.5vw, 80px) 0; }
.sblock--tight { padding-bottom: clamp(44px, 5.5vw, 68px); }

/* Three things I'd own. Each column opens on a 2px oxblood rule. */
.vgrid { display: grid; gap: clamp(28px, 3.4vw, 44px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .vgrid { grid-template-columns: repeat(3, 1fr); } }
.vcol { border-top: 2px solid var(--red); padding-top: 18px; }
.vcol .n {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; color: var(--red);
}
.vcol h3 {
  margin: 12px 0 14px;
  font-size: clamp(20px, 1.9vw, 22px); letter-spacing: -.018em; line-height: 1.3;
}
.vcol p { font-size: 17px; line-height: 1.6; color: var(--mut); margin: 0 0 16px; }

/* Selected work. Two featured entries in a three-column row, opened and closed by an
   ink hairline with a lighter rule between them. */
.wlist { border-top: 1px solid var(--rule-strong); }
.wrow {
  display: grid; gap: 14px 44px; grid-template-columns: 1fr;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.wrow:last-child { border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 900px) {
  .wrow { grid-template-columns: 280px minmax(0, 1fr) 200px; }
}
.wrow h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.022em; line-height: 1.2; }
.wrow .kicker { margin: 7px 0 0; font-size: 14px; color: var(--red); }
.wrow .body { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--mut); margin: 0 0 14px; }
.wrow .more {
  font-size: 16px; font-weight: 600; color: var(--red);
  white-space: nowrap;
}

.alsok { margin: 44px 0 22px; font-size: 15px; font-weight: 600; color: var(--red); }
.also { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .also { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .also { grid-template-columns: repeat(4, 1fr); } }
.also > div { border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.also h4 { font-size: 16px; letter-spacing: -.012em; line-height: 1.3; }
.also p { margin: 9px 0 0; font-size: 15px; line-height: 1.55; color: var(--mut); }

/* Solo builds, two wide columns. */
.solo { display: grid; gap: clamp(30px, 4vw, 52px); grid-template-columns: 1fr; }
@media (min-width: 860px) { .solo { grid-template-columns: repeat(2, 1fr); } }
.solo > div { border-top: 2px solid var(--red); padding-top: 18px; }
.solo h3 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.022em; }
.solo .kicker { margin: 8px 0 0; font-size: 14px; color: var(--red); }
.solo p { margin: 14px 0 18px; font-size: 17px; line-height: 1.6; color: var(--mut); }
.solo .links2 { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.solo .links2 a { font-size: 16px; }
.solo .links2 .more { font-weight: 600; color: var(--red); }
.solo .links2 .out { color: var(--mut); }

/* The four ways into the case studies, underlined at rest, which the rest of the site is
   not. A bold red phrase with a trailing arrow was reading as a label, and these are the
   only links on the homepage that have to be found rather than noticed. Drawn with
   text-decoration rather than the border-bottom the inline prose links use, so it clears
   the descenders in "built". Hover has no underline left to add, so it thickens the one
   already there and takes it to full strength. */
.wrow .more, .solo .links2 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(140, 47, 38, .42);   /* --red at 42% */
}
.solo .links2 .out { text-decoration-color: rgba(106, 97, 81, .42); }  /* --mut at 42% */
.wrow .more:hover, .wrow .more:focus-visible,
.solo .links2 a:hover, .solo .links2 a:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* The close. The ask and the contact side by side, then education under a rule. */
.close { padding: clamp(56px, 6.5vw, 80px) 0; }

.cwrap { display: grid; gap: 40px 64px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .cwrap { grid-template-columns: minmax(0, 1fr) 360px; } }
.close .k { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--red); }
.cwrap .want {
  margin: 0;
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.3;
}
.cwrap .email {
  margin: 0 0 14px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600; letter-spacing: -.023em;
}
.cwrap .email a { text-decoration: none; }
.cwrap .email a:hover, .cwrap .email a:focus-visible { color: var(--red); }
.cwrap .row2 { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cwrap .row2 a { font-size: 16px; color: var(--mut); text-decoration: none; }
.cwrap .row2 a:hover, .cwrap .row2 a:focus-visible { color: var(--red); }
.cwrap .row2 .ph { font-family: var(--mono); font-size: 14px; letter-spacing: .03em; color: var(--mut); }

/* Education, promoted out of the credentials run-on line. The list itself is styled once,
   with the project pages, further down; all the close needs is the rule that separates it
   from the ask above. */
.close .edu {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: clamp(30px, 3.6vw, 40px);
  border-top: 1px solid var(--rule);
}

/* ================================================================= project pages */

.phead { padding: clamp(34px, 6vh, 68px) 0 clamp(26px, 4vh, 44px); }
.phead h1 {
  font-size: clamp(34px, 5.4vw, 62px);
  letter-spacing: -.035em; margin-bottom: 22px;
  hyphens: none; -webkit-hyphens: none;
}
.phead .standfirst {
  font-size: clamp(17px, 1.6vw, 20px); color: var(--mut);
  max-width: var(--prose); line-height: 1.6;
}
.phead .visit { margin-top: 18px; font-size: 16px; font-weight: 600; }
.phead .visit a { color: var(--red); text-decoration: none; }
.phead .visit a:hover { text-decoration: underline; text-underline-offset: 4px; }

.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; margin-top: clamp(30px, 4vw, 46px);
  background: var(--rule); border: 1px solid var(--rule);
}
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats > div { background: var(--base); padding: 20px 22px; }
.stats .v {
  display: block; font-size: clamp(24px, 3vw, 32px);
  font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}
.stats .l {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mut);
}

.phero { margin: clamp(30px, 5vh, 60px) 0; border: 1px solid var(--rule); overflow: hidden; }

.sec { padding: clamp(46px, 7vh, 84px) 0; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.sec__head { max-width: 860px; }
.sec__head > p { max-width: var(--prose); }

/* The section label. On Option G a section announces itself with a small mono line and a
   rule; the sticky side rail of the dark site is gone with it. */
.sec__rail {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.sec__rail .i {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  color: var(--red); font-variant-numeric: tabular-nums;
}
.sec__rail .eyebrow { margin: 0; }

.sec__head h2 {
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -.026em; margin-bottom: 20px;
  hyphens: none; -webkit-hyphens: none;
}
.sec__head p { color: var(--mut); }
.sec__after { max-width: var(--prose); margin-top: clamp(26px, 3.5vw, 40px); }
.sec__after p { color: var(--mut); }
.sec__head a, .sec__after a {
  color: var(--red); text-decoration: none;
  border-bottom: 1px solid rgba(140, 47, 38, .4);
}
.sec__head a:hover, .sec__after a:hover { border-bottom-color: var(--red); }
.sec__head strong, .sec__after strong { color: var(--ink); font-weight: 600; }

/* Bands on a project page use the same full-bleed technique as the homepage. */
.sec--band {
  background: var(--deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - (var(--max) / 2) + var(--gutter)));
  padding-block: clamp(46px, 7vh, 84px);
}
.sec--band + .sec { border-top: 0; }

/* the large moment */
.pull {
  margin: clamp(30px, 4vw, 46px) 0;
  padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 1px solid var(--rule);
  max-width: min(560px, 100%);
}
.pull p {
  font-size: clamp(23px, 2.6vw, 34px);
  font-weight: 600; line-height: 1.25; letter-spacing: -.03em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.pull p::before {
  content: ''; display: block; width: 26px; height: 2px;
  background: var(--red); margin-bottom: clamp(14px, 1.6vw, 20px);
}
.pull cite {
  display: block; margin-top: 16px; font-style: normal;
  font-family: var(--mono); font-size: 12px; line-height: 1.7;
  letter-spacing: .03em; color: var(--mut); max-width: 46ch;
}

/* use cases */
.cases {
  display: grid; gap: 1px; margin-top: clamp(30px, 4vw, 46px);
  background: var(--rule); border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .cases { grid-template-columns: repeat(4, 1fr); } }
.case { background: var(--base); padding: 22px; }
.case .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}
.case h3 { font-size: 19px; margin: 10px 0 8px; }
.case p { font-size: 15.5px; color: var(--mut); }

/* screenshots */
.shots {
  display: grid; gap: clamp(20px, 2.5vw, 34px);
  margin-top: clamp(30px, 4vw, 48px); grid-template-columns: 1fr;
}
@media (min-width: 860px) { .shots--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) {
  .shots--2 img { aspect-ratio: 16 / 11; object-fit: cover; object-position: center top; }
}
.shots--1 figure { max-width: 640px; }
.shots--narrow { max-width: var(--prose); }
.shots figure { margin: 0; }
.shots img { border: 1px solid var(--rule); background: var(--deep); }
.shots figcaption {
  margin-top: 12px; font-family: var(--mono); font-size: 11px;
  line-height: 1.6; color: var(--mut);
}
.shot__zoom { display: block; position: relative; cursor: zoom-in; }
.shot__zoom img { transition: opacity .3s ease; }
.shot__zoom:hover img, .shot__zoom:focus-visible img { opacity: .88; }
.shot__zoom::after {
  content: 'Full size';
  position: absolute; right: 10px; bottom: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--base);
  background: rgba(21, 16, 9, .84); padding: 5px 9px;
  opacity: 0; transition: opacity .25s ease;
}
.shot__zoom:hover::after, .shot__zoom:focus-visible::after { opacity: 1; }

/* pipeline */
.pipe {
  display: grid; gap: 1px; margin-top: clamp(30px, 4vw, 44px);
  background: var(--rule); border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .pipe { grid-template-columns: repeat(4, 1fr); } }
.pipe__step { background: var(--base); padding: 20px 22px; }
.pipe__step .n {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; color: var(--red);
}
.pipe__step h4 { font-size: 18px; margin: 9px 0 6px; }
.pipe__step p { font-size: 15.5px; color: var(--mut); }

.nextnav { border-top: 1px solid var(--rule); padding: 30px 0; }
.nextnav a { text-decoration: none; display: inline-block; }
/* Both are spans, so without this the label and the name sit on one line and the
   margin-bottom below is silently ignored. */
.nextnav .eyebrow, .nextnav .nextname { display: block; }
.nextnav .eyebrow { margin-bottom: 8px; }
.nextnav .nextname { font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.025em; }
.nextnav a:hover .nextname, .nextnav a:focus-visible .nextname { color: var(--red); }

/* verbatim user requests */
.quotes {
  display: grid; gap: 1px; margin-top: clamp(30px, 4vw, 46px);
  background: var(--rule); border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
/* Column count has to divide the item count, or the empty cell in the last row renders
   the container's rule colour as a solid slab. Same trap as .lessons and .parts. */
@media (min-width: 800px) {
  .quotes--2, .quotes--4 { grid-template-columns: 1fr 1fr; }
  .quotes--3 { grid-template-columns: repeat(3, 1fr); }
}
.quotes .q { background: var(--base); margin: 0; padding: 26px 26px 22px; }
/* A single verbatim quote gets the full column, which at 1120px is nearly twice a
   readable measure. The cap does nothing in a three or four up grid. */
.quotes .q p { font-size: 16.5px; line-height: 1.55; color: var(--mut); margin: 0 0 14px;
  max-width: 62ch; }
.quotes .q cite {
  font-style: normal; font-family: var(--mono);
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--mut);
}
/* On a band the cells must not stay base-coloured or the grid reads as a light box. */
.sec--band .quotes { background: var(--rule); border-color: var(--rule); }
.sec--band .quotes .q,
.sec--band .parts li,
.sec--band .cases .case,
.sec--band .pipe__step,
.sec--band .stats > div { background: var(--deep); }

/* the reasons */
.reasons {
  list-style: none; counter-reset: r; padding: 0;
  margin: clamp(30px, 4vw, 46px) 0 0;
  display: grid; gap: clamp(24px, 3vw, 34px); grid-template-columns: 1fr;
}
@media (min-width: 800px) { .reasons { grid-template-columns: 1fr 1fr; } }
.reasons li { counter-increment: r; position: relative; padding-top: 26px; }
.reasons li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; color: var(--red);
}
.reasons li::after {
  content: ''; position: absolute; top: 17px; left: 0; width: 22px;
  border-top: 1px solid var(--rule);
}
.reasons h3 { font-size: 21px; margin-bottom: 9px; letter-spacing: -.018em; }
.reasons p { font-size: 16.5px; color: var(--mut); max-width: 46ch; }

/* the layers: each steps further in, because each goes deeper */
.layers {
  list-style: none; padding: 0; margin: clamp(30px, 4vw, 46px) 0 0;
  border-left: 1px solid var(--rule);
}
.layers li {
  position: relative;
  padding: 20px 0 20px calc(26px + var(--i) * clamp(10px, 2.2vw, 30px));
  border-bottom: 1px solid var(--rule);
}
.layers li:last-child { border-bottom: none; }
.layers li::before {
  content: ''; position: absolute; left: 0; top: 34px;
  width: calc(16px + var(--i) * clamp(10px, 2.2vw, 30px));
  border-top: 1px solid var(--rule);
}
.layers .step {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}
.layers h3 { font-size: 20px; margin: 8px 0 7px; letter-spacing: -.015em; }
.layers p { font-size: 16.5px; color: var(--mut); max-width: 54ch; }

/* parallel parts of one product */
.parts {
  list-style: none; padding: 0; margin: clamp(30px, 4vw, 46px) 0 0;
  display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .parts--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .parts--3 { grid-template-columns: repeat(3, 1fr); }
  .parts--4 { grid-template-columns: repeat(4, 1fr); }
}
.parts li { background: var(--base); padding: 22px 24px 26px; }
.parts .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--red);
}
.parts h3 { font-size: 19px; margin: 11px 0 8px; letter-spacing: -.015em; }
.parts p { font-size: 15.5px; color: var(--mut); max-width: 46ch; }

/* lessons: the rhythm of .reasons without the counter */
.lessons {
  margin: clamp(30px, 4vw, 46px) 0 0;
  display: grid; gap: clamp(26px, 3vw, 38px); grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .lessons { grid-template-columns: 1fr 1fr; }
  .lessons > .lesson:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.lesson { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.lesson h3 { font-size: 20px; margin-bottom: 10px; max-width: 28ch; letter-spacing: -.015em; }
.lesson p { font-size: 16.5px; color: var(--mut); max-width: 50ch; }

/* diagrams */
.dia {
  margin: clamp(30px, 4vw, 48px) 0 0;
  max-width: 660px;
  border: 1px solid var(--rule); background: var(--lite);
  padding: clamp(12px, 1.4vw, 18px);
  overflow-x: auto;                     /* never let a diagram scroll the page sideways */
}
/* On a band the diagram already has a lifted ground under it, so its own frame would be a
   box inside a box. This is the rule the old stylesheet meant to write: a stray comment
   had been spliced into the middle of the selector, so it applied to every diagram and
   silently duplicated 30 lines of video CSS along with it. */
.sec--band .dia { border: 0; background: none; padding-inline: 0; }
.dia svg { width: 100%; height: auto; min-width: 480px; display: block; }

/* video and the live embed. Both are dark artefacts on a cream page, so each gets a
   deliberate dark surround rather than being left to float as an unexplained black box.
   Unlike the plain-image .phero, these are <figure>s with a caption inside them, so they
   must not take .phero's frame: it would draw a box around the caption as well. The
   border belongs on the media element itself, two rules down. */
.phero--video, .phero--embed { border: 0; overflow: visible; }
.phero--video video,
.phero--embed iframe {
  width: 100%; display: block;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.phero--video video { height: auto; }
.phero--embed iframe { aspect-ratio: 16 / 10; }
.phero--embed figcaption,
.phero--video figcaption {
  margin-top: 14px; font-size: 15.5px; color: var(--mut); max-width: var(--prose);
}
.phero--embed figcaption a {
  color: var(--red); text-decoration: none;
  border-bottom: 1px solid rgba(140, 47, 38, .35);
  margin-left: 6px; white-space: nowrap;
}
.phero--embed figcaption a:hover { border-bottom-color: var(--red); }

/* contents strip */
.toc { margin-top: clamp(28px, 3.5vw, 42px); border-top: 1px solid var(--rule); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .toc ol { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .toc ol { grid-template-columns: repeat(3, 1fr); } }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 16px 11px 0; text-decoration: none; transition: color .2s ease;
}
.toc .i { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; color: var(--mut); flex: none; }
.toc .t { font-size: 16px; color: var(--mut); }
.toc a:hover .t, .toc a:focus-visible .t,
.toc a:hover .i, .toc a:focus-visible .i { color: var(--red); }

/* ---------------------------------------------------------- project footer */
.contact { border-top: 1px solid var(--rule); padding: clamp(44px, 7vh, 80px) 0 clamp(48px, 8vh, 92px); }
.closing { max-width: var(--prose); }
.closing p { color: var(--mut); font-size: 17px; }
.closing__want {
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--rule);
  font-size: clamp(21px, 2.2vw, 28px) !important;
  font-weight: 600; letter-spacing: -.027em; line-height: 1.3;
  color: var(--ink) !important;
  max-width: 32ch;
}
.edu { margin-top: clamp(32px, 5vh, 54px); }
.edu > .eyebrow { margin-bottom: 18px; }
.edu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 720px) { .edu ul { grid-template-columns: 1fr 1fr; gap: 24px 44px; } }
.edu h3 { font-size: 19px; letter-spacing: -.015em; }
.edu .where {
  margin: 7px 0 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
}
.edu .dates::before { content: ' · '; }
.edu .note { margin: 9px 0 0; font-size: 15.5px; color: var(--mut); }

.links {
  list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 30px;
  font-size: 16px;
}
.links a { color: var(--red); text-decoration: none; }
.links a:hover, .links a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.links span { color: var(--mut); font-family: var(--mono); font-size: 14px; }

/* A section immediately followed by a band hands most of the separation over to the
   band's own top padding. Not all of it: at zero the last line of text sits directly on
   the colour change, which reads as a crop rather than a section ending. */
.sblock--flush { padding-bottom: clamp(26px, 3vw, 38px); }