/* ──────────────────────────────────────────────────────────────
   Next Version Partners · v8 review layer

   Loads after styles.css and only touches pages with body.v8.
   Same palette, same family. What changes is the furniture:

   THE RULED GRID. Every section opens on a folio, a hairline across
   the column with a number and a sentence-case label on the rail.
   The rail replaces .inset as the second left edge. Columns inside a
   section are divided by vertical hairlines, never boxed.

   QUIETER, MORE EXPENSIVE. More air, smaller meta, thinner buttons,
   a frame offset around the one photograph. Nothing is centred.
   ─────────────────────────────────────────────────────────── */

.v8 {
  --gut: clamp(1.25rem, 5vw, 3.5rem); /* generated pages don't load styles.css */
  --rule: #cdd4d3;
  --rule-soft: #dde2e1;
  --rail: 15rem;
  --air: clamp(5rem, 12vw, 10.5rem);
  --page: 1320px;
}
.v8 .sec--alt { --rule: color-mix(in srgb, var(--ink) 13%, var(--wash)); }

/* ── nav: the mark, the name, a hairline ───────────────────── */

.v8 .nav__in { align-items: center; padding-block: 1.35rem; }
.v8 .nav__brand {
  display: flex; align-items: center; gap: 0.8rem;
  text-transform: none; letter-spacing: -0.01em;
  font-size: 1.125rem; font-variation-settings: "wdth" 100, "wght" 500;
}
.v8 .nav__brand img { width: 38px; height: auto; }
.v8 .nav__links { font-size: 0.9375rem; gap: clamp(1.25rem, 3.4vw, 3rem); }
.v8 .nav__links li:last-child a {
  color: var(--ink); border: 1px solid var(--ink);
  padding: 0.55rem 1.1rem; transition: background-color 160ms, color 160ms;
}
.v8 .nav__links li:last-child a:hover { background: var(--ink); color: var(--ground); }

/* ── buttons: thinner, with the arrow ──────────────────────── */

.v8 .btn {
  display: inline-flex; align-items: baseline; gap: 0.9rem;
  padding: 1.05rem 1.6rem 1.05rem 1.75rem;
  font-size: 1rem; letter-spacing: 0.005em;
}
.v8 .btn .arrow { transition: transform 180ms; }
.v8 .btn:hover .arrow { transform: translateX(3px); }

/* ── the folio: the one device that divides the page ───────── */

.folio {
  display: grid; gap: 0.35rem 2rem;
  border-top: 1px solid var(--ink);
  padding-top: 0.95rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  font-size: 0.875rem; line-height: 1.4;
  font-variation-settings: "wdth" 108, "wght" 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.folio { grid-column: 1 / -1; }
.folio b { font-weight: inherit; color: var(--territory-ink); }
.folio span:last-child { color: var(--ink-3); }
@media (min-width: 900px) {
  .folio { grid-template-columns: var(--rail) minmax(0, 1fr) auto; }
}
.sec--field .folio { border-top-color: var(--field-ink-2); color: var(--field-ink-2); }
.sec--field .folio b { color: var(--field-link); }
.sec--field .folio span:last-child { color: var(--field-ink-2); opacity: 0.7; }

/* rail + body, the two left edges as a grid */
.split { display: grid; gap: 1.5rem 2rem; }
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .split > :only-child, .split > .split__body { grid-column: 2; }
}
.split__aside { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); max-width: 24ch; }

/* sections: the folio is the boundary, so the band edge carries no line */
.v8 .sec + .sec { border-top: 0; }
.v8 .sec { padding-block: clamp(3rem, 6vw, 4.5rem) var(--air); }

/* ── hero ───────────────────────────────────────────────────── */

.v8 .hero--panel:has(.hero__meta) { padding-block: clamp(4rem, 9vw, 7.5rem) 0; }
.v8 .hero .statement { font-size: clamp(2.8rem, 7.6vw, 6.6rem); letter-spacing: -0.036em; max-width: 14ch; }
.v8 .hero__grid { align-items: start; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 900px) { .v8 .hero__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.v8 .hero .lede { max-width: 40ch; }
.v8 .hero .lede + .lede { margin-top: 1.1rem; color: rgba(255, 255, 255, 0.72); }

/* the photograph stands on its own: no frame, the lines are for text */
.v8 .portrait figcaption { margin-top: 0.85rem; font-size: 0.875rem; }

/* the hero closes on a ruled strip of facts, divided by vertical hairlines */
.hero__meta {
  display: grid;
  margin-top: clamp(4rem, 8vw, 6.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}
.hero__meta > div { padding: 1.35rem 0 1.6rem; }
.hero__meta dt { font-size: 0.875rem; color: rgba(255, 255, 255, 0.66); font-variation-settings: "wdth" 108, "wght" 500; }
.hero__meta dd { margin-top: 0.35rem; font-size: 1.0625rem; line-height: 1.4; color: #fff; }
@media (min-width: 760px) {
  .hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__meta > div { padding-inline: 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.22); }
  .hero__meta > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 759px) {
  .hero__meta > div + div { border-top: 1px solid rgba(255, 255, 255, 0.18); }
}

/* ── thesis ─────────────────────────────────────────────────── */

.v8 .thesis { max-width: 20ch; }
.v8 .tblock .t-body { max-width: 54ch; }

/* ── thinking: the archive, on the rail ─────────────────────── */

.v8 .archive { border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .v8 .archive a { grid-template-columns: calc(var(--rail) - 0.5rem) minmax(0, 1fr) 5rem; }
}
.v8 .archive a { padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.v8 .archive .display-sm { font-size: clamp(1.35rem, 2.5vw, 1.9rem); font-variation-settings: "wdth" 100, "wght" 450; }

/* ── proof one: the ledger, on the deep field ───────────────── */

.ledger { display: grid; border-top: 1px solid var(--field-rule); }
.ledger > div { padding-block: 1.5rem 1.75rem; border-bottom: 1px solid var(--field-rule); }
.ledger dt { font-size: 0.9375rem; color: var(--field-ink-2); }
.ledger dd {
  margin-top: 0.55rem; color: var(--amber-lit); white-space: nowrap;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1; letter-spacing: -0.025em;
  font-variation-settings: "wdth" 122, "wght" 500; font-variant-numeric: tabular-nums;
}
.ledger dd.is-reported { color: var(--field-ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }

.duo { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.duo > * { min-width: 0; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .duo > :first-child { padding-right: clamp(2.5rem, 5vw, 4.5rem); }
  .duo > :last-child { padding-left: clamp(2.5rem, 5vw, 4.5rem); border-left: 1px solid var(--rule); }
  .sec--field .duo > :last-child { border-left-color: var(--field-rule); }
}

/* ── proof two ──────────────────────────────────────────────── */

.v8 .readout { padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); }
.v8 .readout .figure { font-variation-settings: "wdth" 122, "wght" 500; }
.v8 .proof .t-head { margin-bottom: 2rem; }

/* ── experience: a ruled table ──────────────────────────────── */

.v8 .rows { border-top: 1px solid var(--rule); }
@media (min-width: 900px) { .v8 .rows li { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 2rem; } }
.v8 .rows b { font-size: 1.0625rem; }
.v8 .rows span { font-size: 1.0625rem; }

/* ── the work: four columns between vertical hairlines ──────── */

.steps { display: grid; margin-top: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--ink); counter-reset: st; }
.steps li { padding: 1.4rem 0 1.9rem; display: grid; gap: 0.6rem; align-content: start; }
.steps li::before {
  counter-increment: st; content: counter(st, decimal-leading-zero);
  font-size: 0.875rem; color: var(--territory-ink); font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 108, "wght" 500; margin-bottom: 1.75rem;
}
.steps b { font-size: 1.1875rem; line-height: 1.25; font-variation-settings: "wdth" 100, "wght" 500; }
.steps span { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps li { padding-inline: 1.5rem; border-left: 1px solid var(--rule); }
  .steps li:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 899px) { .steps li + li { border-top: 1px solid var(--rule); } }

/* ── the close ──────────────────────────────────────────────── */

.close { padding-block: clamp(2.5rem, 5vw, 3.5rem) 0; }
.close .statement { max-width: 16ch; }
.close__foot {
  display: grid; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
@media (min-width: 900px) { .close__foot { grid-template-columns: var(--rail) minmax(0, 1fr) auto; align-items: center; gap: 2rem; } }
.close__foot .note { margin: 0; }

/* ── footer: ruled columns ──────────────────────────────────── */

.v8 .foot { padding-block: clamp(4rem, 7vw, 5.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 900px) {
  .foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 0; }
  .foot__grid > div + div { padding-left: 1.75rem; border-left: 1px solid var(--field-rule); }
}
.foot__grid h4 { margin: 0 0 1rem; font-size: 0.875rem; font-weight: inherit; color: var(--field-ink); font-variation-settings: "wdth" 108, "wght" 500; }
.foot__grid a, .foot__grid p { display: block; font-size: 0.9375rem; line-height: 1.9; color: var(--field-ink-2); }
.foot__grid a:hover { color: var(--field-ink); }
.foot__brand { display: flex; align-items: center; gap: 0.9rem; color: var(--field-ink); font-size: 1.125rem; font-variation-settings: "wdth" 100, "wght" 500; }
.foot__brand img { width: 40px; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--field-rule); font-size: 0.8125rem; color: var(--field-ink-2); }

@media (max-width: 640px) {
  .v8 .nav__links li:last-child a { padding: 0.4rem 0.8rem; }
  .ledger dd { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}

@media (max-width: 899px) { .split__aside { order: 1; } }

/* ──────────────────────────────────────────────────────────────
   BOXED · body.v8.boxed, every page
   Two vertical rails run the length of the page; each section is a
   bay between them, and lists become cells that share borders and
   run to the rails. Lines touch, so it reads as one ruled sheet.
   Still no radius, no shadow, no fill on a cell.
   ─────────────────────────────────────────────────────────── */

.boxed {
  --pad: clamp(1.25rem, 3vw, 2.5rem);
  /* where the rails sit: the old content edge. 100% resolves per band. */
  --rail-x: max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)));
}

/* content moves in off the rails by --pad, on every wrap on the page */
.boxed .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: calc(var(--gut) + var(--pad)); }

/* the rails: drawn by each band, so they work on any band markup,
   hand-authored or generated, whatever its own padding */
.boxed .nav, .boxed .hero--panel, .boxed main > section, .boxed main > nav, .boxed main > header {
  position: relative;
}
.boxed .nav::before, .boxed .hero--panel::before, .boxed main > section::before,
.boxed main > nav::before, .boxed main > header::before {
  content: ""; position: absolute; inset-block: 0; left: var(--rail-x); right: var(--rail-x);
  border-inline: 1px solid var(--rule); pointer-events: none;
}
.boxed .hero--panel::before { border-color: rgba(255, 255, 255, 0.22); }
.boxed main > .sec--field::before { border-color: var(--field-rule); }

/* every band closes on a line, except the deep field, where the colour turns */
.boxed .nav { border-bottom: 1px solid var(--rule); }
.boxed main > section, .boxed main > nav { border-bottom: 1px solid var(--rule); }
.boxed main > .sec--field, .boxed main > section:last-child { border-bottom: 0; }

/* hand-authored bands: the air moves inside so the folio sits on the top line */
.boxed .hero.hero--panel { padding-block: 0; }
.boxed .hero > .wrap { padding-block: clamp(4rem, 9vw, 7.5rem); }
.boxed .hero > .wrap:has(> .hero__meta) { padding-bottom: 0; }
.boxed .sec { padding-block: 0; }
.boxed .sec > .wrap { padding-block: 0 var(--air); }
.boxed .sec > .wrap:not(:has(> .folio)) { padding-top: clamp(3rem, 6vw, 4.5rem); }

/* anything that bleeds runs rail to rail */
.boxed .folio, .boxed .hero__meta, .boxed .archive, .boxed .rows, .boxed .steps {
  margin-inline: calc(-1 * var(--pad));
}

/* the folio becomes the bay's header strip */
.boxed .folio {
  border-top: 0; border-bottom: 1px solid var(--rule);
  padding: 1.1rem var(--pad) 1rem;
}
.boxed .sec--field .folio { border-bottom-color: var(--field-rule); }

/* hero facts: cells to the rails */
.boxed .hero__meta { border-top-color: rgba(255, 255, 255, 0.22); }
.boxed .hero__meta > div,
.boxed .hero__meta > div:first-child { padding: 1.4rem var(--pad) 1.7rem; }
.boxed .hero__meta > div { border-color: rgba(255, 255, 255, 0.22); }
.boxed .hero__meta > div:first-child { border-left: 0; }

/* thinking: a 2 by 2 sheet of cells */
.boxed .archive { display: grid; border-top: 1px solid var(--rule); border-bottom: 0; }
.boxed .archive li { border-bottom: 1px solid var(--rule); }
.boxed .archive a,
.boxed .archive a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; padding: var(--pad); height: 100%; transition: background-color 160ms; }
.boxed .archive .entry { grid-column: 1 / -1; grid-row: 2; }
.boxed .archive .time { display: block; text-align: right; }
.boxed .archive a:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (min-width: 900px) {
  .boxed .archive { grid-template-columns: 1fr 1fr; }
  .boxed .archive li:nth-child(odd) { border-right: 1px solid var(--rule); }
}

/* the ledger: a closed table */
.boxed .ledger { border: 1px solid var(--field-rule); }
.boxed .ledger > div { padding-inline: 1.5rem; }
.boxed .ledger > div:last-child { border-bottom: 0; }

/* proof two: the figure gets its own cell */
.boxed .readout { border: 1px solid var(--rule); padding: var(--pad); }

/* experience: a table with a ruled column */
.boxed .rows li { padding: 1.5rem var(--pad); }
@media (min-width: 900px) {
  .boxed .rows li { grid-template-columns: var(--rail) minmax(0, 1fr); gap: 0; padding-block: 0; }
  .boxed .rows li > * { padding-block: 1.5rem; }
  .boxed .rows span { padding-left: 2rem; border-left: 1px solid var(--rule); max-width: none; }
}
.boxed .rows li:last-child { border-bottom: 1px solid var(--rule); }

/* the four steps: cells to the rails */
.boxed .steps { border-top-color: var(--rule); border-bottom: 1px solid var(--rule); }
.boxed .steps li, .boxed .steps li:first-child { padding: 1.4rem var(--pad) 2rem; }
.boxed .sec:has(.steps) > .wrap { padding-bottom: 0; }

/* the close: the fine print and the button in one ruled strip */
.boxed .close__foot { border: 1px solid var(--rule); padding: var(--pad); }