/* ============================================================================
 *  chapter-rhythm.css — THE PAGE BELOW THE TITLE SCREEN
 *  ---------------------------------------------------------------------------
 *  The title screen is its own world and this file never touches it. Everything
 *  after it is governed here, in one place, instead of by six stylesheets that
 *  had each been given a turn.
 *
 *  WHAT WAS WRONG
 *  A gilt picture frame held the About text, which forced nine paragraphs of
 *  real writing down to ~13px inside a wooden border — a costume, and one that
 *  spoke a different language from every other section. Four cream sections ran
 *  in sequence with no tonal break, so the whole page read as one undifferentia-
 *  ted scroll. "Let's Connect" was set at 92px while "Socials" was set at 11px,
 *  though both are the same kind of heading. Section padding, reading widths and
 *  heading sizes were each chosen four separate times.
 *
 *  THE SYSTEM
 *  Three numbered chapters, one measure, one type scale, one palette. Chapter 02
 *  inverts to dark — the page's spine, and the ground the tool marks were drawn
 *  for. Everything hangs on a single reading column.
 *
 *  Loads last, so it settles the earlier layers rather than joining the argument.
 * ========================================================================== */

:root {
  /* ---- ground -------------------------------------------------------------
     ONE off-white, everywhere below the title screen. The page previously ran
     three grounds — a cream, a darker cream for Socials, and a near-black for
     Building With — which chopped a short page into unrelated slabs. This is
     lighter than any of them, and it is the only ground there is. */
  --ch-paper: var(--field);
  --ch-paper-warm: var(--field);   /* kept as an alias; no longer a second colour */
  --ch-dark: #14120f;   /* the footer only */

  /* ---- ink -------------------------------------------------------------- */
  --ch-ink: #16130f;
  --ch-ink-soft: #3a352d;
  --ch-ink-muted: #6b6459;
  --ch-line: rgba(22, 19, 15, 0.13);

  /* ---- ink, inverted ---------------------------------------------------- */
  /* The page has no dark ground left. These names are kept because the
     footer rules below reference them, but they now resolve to the same
     ink the rest of the page uses — one substitution instead of renaming
     every rule and risking a missed one. */
  --ch-ink-on-dark: #16130f;
  --ch-muted-on-dark: #6b6459;
  --ch-line-on-dark: rgba(22, 19, 15, 0.13);

  /* ---- the one accent --------------------------------------------------- */
  --ch-signal: var(--steel);
  --ch-signal-on-dark: var(--tide);

  /* ---- measure ---------------------------------------------------------- */
  --ch-measure: 40rem;   /* prose. ~68 characters. */
  --ch-wide: 74rem;   /* grids and rails */
  --ch-pad-x: clamp(24px, 6vw, 88px);
  --ch-pad-y: clamp(88px, 13vh, 168px);
}


/* ============================================================================
 * 1 · THE CHAPTER SHELL
 * ========================================================================== */

/* THE GROUND, SET ONCE — BY TOKEN, NOT BY SELECTOR.
   title-screen.css and site-finish.css both paint these sections
   `!important` through ID selectors (`#about, … , #connect`), which outrank
   any class rule this file can write; the lighter ground reached Building
   With alone and the page kept its patchwork. Rather than escalate into an
   arms race, this redefines the variables those rules already read. They
   keep their !important and simply resolve to the new colour.

   Scoped to `.chapters` on purpose: the title screen sits outside it and
   must keep its own palette. */
.chapters {
  --paper: var(--field);
  --finish-paper: var(--field);
  --plate: var(--field);
}

.chapters,
.chapters > .chapter,
.chapters > section {
  background-color: var(--ch-paper) !important;
  background-image: none !important;
}

.chapters > .chapter {
  position: relative;

  display: block;

  width: 100%;
  max-width: none;
  min-height: auto;
  margin: 0;

  padding: var(--ch-pad-y) var(--ch-pad-x);

  color: var(--ch-ink);

  text-align: left;
}

.chapter__inner {
  width: min(100%, var(--ch-wide));
  margin-inline: auto;
}

/* ID-level, because title-screen.css centres these chapters by ID at some
   breakpoints — which was centring the record row under left-set prose. */
#about,
#about .chapter__inner,
#about .record,
#about .record__item,
#about .record dt,
#about .record dd {
  text-align: left;
}


/* ---- section labels ------------------------------------------------------
   The numbered "01 · ABOUT" rules are gone by decision. Their headings stay in
   the markup as accessible names, hidden visually — an unlabelled landmark is
   worse for a screen reader than no landmark at all, so the label is removed
   from the page rather than from the document. */

.chapters .sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;

  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ============================================================================
 * 2 · ABOUT
 * --------------------------------------------------------------------------
 * Set as writing, not as a picture. The lead carries the idea at display size;
 * the body runs at a real reading size on a real measure; the coda is the line
 * worth leaving someone with, so it is given its own air and its own rule.
 * ========================================================================== */

/* NOT `ch` here: this element inherits 16px, so a ch-based cap would resolve
   against 16px while the statement inside it sets 58px — which collapsed the
   lead to a 288px ribbon wrapping every three words. Absolute measure. */
.about__lead {
  max-width: 46rem;
  margin-bottom: clamp(44px, 7vh, 88px);
}

.about__statement {
  margin: 0;

  color: var(--ch-ink);

  font: 400 clamp(30px, 4.6vw, 58px) / 1.08 var(--prose);
  letter-spacing: -0.03em;
  text-wrap: balance;

  text-shadow: none;
}

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

.about__body p {
  margin: 0 0 clamp(20px, 2.8vh, 30px);

  color: var(--ch-ink-soft);

  font: 400 clamp(16px, 1.18vw, 18.5px) / 1.68 var(--prose);
  letter-spacing: 0.002em;

  text-shadow: none;
}

.about__body p:last-child {
  margin-bottom: 0;
}

/* the first paragraph carries a touch more weight, so the eye enters the
   column at the top rather than anywhere in it */
.about__body p:first-child {
  color: var(--ch-ink);
  font-size: clamp(17px, 1.3vw, 20.5px);
}

.about__coda {
  max-width: var(--ch-measure);

  margin: clamp(44px, 6.5vh, 80px) 0 0;
  padding-top: clamp(24px, 3.4vh, 36px);

  border-top: 1px solid var(--ch-line);

  color: var(--ch-ink);

  font: 400 clamp(19px, 1.9vw, 26px) / 1.42 var(--prose);
  letter-spacing: -0.012em;
  text-wrap: balance;

  text-shadow: none;
}


/* ---- the record ----------------------------------------------------------
   Three numbers, stated once, where a reader has the context to weigh them. */

.record {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: clamp(20px, 3vw, 48px);

  max-width: var(--ch-wide);
  margin: clamp(56px, 8vh, 104px) 0 0;
  padding: 0;
}

/* display:block — as a grid it inherited `justify-items: center` from an
   earlier layer, which centred the dt/dd BOXES inside the item even though
   their own text-align was already left. Same trap as the form labels. */
.record__item {
  display: block;

  padding-top: clamp(14px, 2vh, 20px);
  border-top: 1px solid var(--ch-line);

  text-align: left;
}

.record dt {
  display: block;
  width: 100%;
  margin-inline: 0;

  margin: 0 0 clamp(10px, 1.4vh, 14px);

  color: var(--ch-ink-muted);

  font: 500 clamp(9px, 0.72vw, 11px) / 1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.record dd {
  display: block;
  width: 100%;

  margin: 0;

  color: var(--ch-ink);

  font: 400 clamp(28px, 3.4vw, 46px) / 1 var(--prose);
  letter-spacing: -0.035em;

  text-align: left;
  white-space: nowrap;

  font-variant-numeric: tabular-nums;
}

/* inline, explicitly: an earlier layer blocks out `dd span`, which dropped the
   "+" onto its own line where it read as a stray gold dot under each number */
.record dd span {
  display: inline;

  margin: 0;
  padding: 0;

  color: var(--ch-signal);

  font: inherit;
  vertical-align: baseline;
}


/* ============================================================================
 * 3 · BUILDING WITH — THE CHECKERBOARD
 * --------------------------------------------------------------------------
 * Same paper as every other chapter. The dark inversion this panel briefly
 * carried is gone: the marks are large and in full colour, each in its own
 * square cell, and alternating cells carry a faint warm tint. The board is
 * what separates one mark from the next — no drawn rules, no knock-out ink.
 * ========================================================================== */

/* ID-level selector on purpose: site-finish.css sets `#building` with
   !important, and an ID beats any number of classes — a class-only rule
   here loses silently and the panel keeps whatever it was given.

   !important on the box properties for the same reason the image sizing
   below carries it: the panel was authored as a viewport-tall window with
   `overflow: hidden` for a travelling filmstrip. A board is as tall as its
   rows, so that window would crop it — nine rows on desktop, seventeen on
   a phone. */
#building.chapter--checker,
.chapters > .chapter--checker {
  display: block !important;

  height: auto !important;
  min-height: 0 !important;
  /* ventures-index.css pins `max-height: 100svh` on this panel under 720px.
     Resetting height alone left the board cropped at one screen with the
     remaining rows clipped away. */
  max-height: none !important;
  padding: var(--ch-pad-y) var(--ch-pad-x);

  overflow: visible !important;

  color: var(--ch-ink);

  background-color: var(--ch-paper) !important;
  background-image: none !important;
}

/* The carousel machinery stays in the markup but stops being a viewport-tall
   travelling filmstrip: it is a plain block that holds the board. */
#building .stack-carousel,
#building .stack-track {
  width: min(100%, var(--ch-wide));
  /* `aspect-ratio: 3 / 5` is set on the carousel for the filmstrip. With a
     definite width, that ratio — not the content — decides the height, so
     `height: auto` still resolved to one 625px window and the board's lower
     rows were clipped away. A board is as tall as its rows. */
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin-inline: auto;
  padding: 0;

  overflow: visible !important;

  -webkit-mask-image: none;
  mask-image: none;

  transform: none;
  animation: none;
}

/* `display: grid` is !important because ventures-index.css hides this exact
   element with `display: none !important` under 720px — a correct rule when
   the phone build swapped the grid out for travelling belts, and a fatal one
   now that the board is the single treatment at every width. */
#building .stack-grid {
  display: grid !important;

  /* the marquee's sideways flow is off — this is a board, not a rail */
  grid-auto-flow: row;
  grid-template-rows: none;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));

  align-content: start;
  gap: 0;

  width: 100%;
  margin: 0;
  padding: 0;

  /* One hairline around the whole board and one between every cell, drawn as
     the grid's own background showing through 1px gaps. Cheaper than a border
     per cell, and it cannot double up at the seams. */
  gap: 1px;
  background: var(--ch-line);
  border: 1px solid var(--ch-line);

  list-style: none;

  transform: none;
}

#building .stack-grid > li {
  display: grid;
  place-items: center;

  aspect-ratio: 1;

  margin: 0;
  padding: clamp(12px, 1.5vw, 20px);

  border: 0;
  border-radius: 0;

  /* the cell is the paper; the 1px gap between cells is the rule */
  background: var(--ch-paper);
}

/* No checkerboard tint. Alternating grey slabs behind fifty full-colour
   marks read as a spreadsheet, and the tint fought every logo that had a
   light ground of its own. The hairline grid separates the cells; the marks
   supply the colour. */
#building .stack-grid > li:nth-child(odd) {
  background: var(--ch-paper);
}

/* Full size, full colour. These were knocked out to flat ink before.
   !important, and deliberately: FOUR stylesheets set a size on this exact
   image — chapters.css 70% (as a max-*, which clamped the mark to ~50px no
   matter what width was set), title-screen.css 86%, site-finish.css 78%. They
   sit at (1,2,2) and the last one loaded simply won. Rather than escalate the
   selector and leave a fifth contender for the next person to find, this ends
   it: the cell's padding is what controls the mark's size now, in one place. */
#building li img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain;

  filter: none !important;
  opacity: 1 !important;

  transition: transform 220ms cubic-bezier(.22, .8, .2, 1);
}

#building .stack-grid > li:hover img {
  transform: scale(1.09);
}

/* the handful that ship as solid black paths need no help on paper */
#building li[data-ink="mono"] img {
  filter: none !important;
  opacity: 0.86 !important;
}


/* ============================================================================
 * 4 · CONNECT
 * ========================================================================== */

/* ID-level, because title-screen.css centres `#connect` by ID — which was
   pulling the chapter's own index away from its name and centring every
   form label and placeholder in the column. */
#connect,
#connect .chapter__inner,
#connect .chapter__head {
  text-align: left;
}

#connect .connect__block {
  width: 100%;
  max-width: var(--ch-measure);
  margin: 0;
  padding: 0;

  text-align: left;
}

#connect .connect__title,
.socials-section > .connect__title {
  display: block;

  width: 100%;
  max-width: none;
  margin: 0 0 clamp(16px, 2.2vh, 22px);

  color: var(--ch-ink);

  font: 400 clamp(30px, 3.9vw, 50px) / 1.04 var(--prose);
  font-family: var(--prose);
  letter-spacing: -0.032em;

  text-align: left;
  text-shadow: none;
}

.connect__note {
  max-width: 54ch;
  margin: 0 0 clamp(34px, 5vh, 52px);

  color: var(--ch-ink-muted);

  font: 400 clamp(15px, 1.05vw, 17px) / 1.6 var(--prose);

  text-shadow: none;
}

.connect__note a {
  color: var(--ch-ink);
  text-decoration: underline;
  text-decoration-color: var(--ch-line);
  text-underline-offset: 4px;

  transition: text-decoration-color 160ms linear;
}

.connect__note a:hover,
.connect__note a:focus-visible {
  text-decoration-color: var(--ch-signal);
}


/* ---- the form ------------------------------------------------------------ */

#connect .form {
  display: grid;
  gap: clamp(22px, 3vh, 30px);

  width: 100%;
  max-width: var(--ch-measure);

  text-align: left;
}

/* `justify-items: center` from an earlier layer was centring each label's BOX
   inside the field — the text was already left-aligned, which is why setting
   text-align on the label alone changed nothing. */
#connect .field {
  display: grid;
  justify-items: stretch;

  gap: 10px;
  margin: 0;
}

#connect .field__label {
  color: var(--ch-ink-muted);

  font: 500 clamp(9px, 0.72vw, 11px) / 1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;

  text-align: left;
  text-shadow: none;
}

#connect .field__label span {
  opacity: 0.6;
}

#connect .field__input {
  width: 100%;

  /* the centred `#connect` rule reaches the inputs too, so placeholder and
     typed text both sat in the middle of the rule */
  text-align: left;

  padding: 0 0 12px;

  border: 0;
  border-bottom: 1px solid var(--ch-line);
  border-radius: 0;

  background: transparent;

  color: var(--ch-ink);

  font: 400 clamp(16px, 1.25vw, 19px) / 1.5 var(--prose);

  transition: border-color 180ms linear;
}

#connect .field__input::placeholder {
  color: var(--ch-ink-muted);
  opacity: 0.55;
}

#connect .field__input:focus {
  outline: none;
  border-bottom-color: var(--ch-signal);
}

#connect .field__input--area {
  min-height: 8.5rem;
  resize: vertical;
}

/* A real button. It was a bordered ghost floating in the middle of the column,
   which read as decoration rather than as the thing you press. */
#connect .button {
  justify-self: start;

  min-width: 11rem;
  margin-top: clamp(6px, 1vh, 12px);
  padding: 15px 30px;

  border: 1px solid var(--ch-ink);
  border-radius: 0;

  background: var(--ch-ink);

  color: var(--ch-paper);

  font: 500 clamp(10px, 0.78vw, 12px) / 1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 180ms linear,
    color 180ms linear,
    border-color 180ms linear;
}

#connect .button:hover,
#connect .button:focus-visible {
  border-color: var(--ch-signal);
  background: var(--ch-signal);
  color: #fff;
}


/* ============================================================================
 * 5 · SOCIALS
 * --------------------------------------------------------------------------
 * These were 60px serif handles floating one per row down an empty page —
 * five screens of scrolling to read five usernames. They are a directory, so
 * they are set as one: a card grid, handle and purpose together, each with its
 * two destinations.
 * ========================================================================== */

.chapters > .socials-section[data-panel="socials"] {
  padding: clamp(30px, 5vh, 60px) var(--ch-pad-x) var(--ch-pad-y);

  color: var(--ch-ink);
  background: var(--ch-paper-warm);

  text-align: left;
}

.socials-section > .connect__title--sub {
  width: min(100%, var(--ch-wide));
  margin-inline: auto;
  margin-bottom: clamp(30px, 4.4vh, 46px);

  font-size: clamp(24px, 2.6vw, 34px);
}

/* The hairlines live on the CELLS, not in the gaps. Painting them as a
   coloured container behind 1px gaps is the usual trick, but with five
   accounts in a four-column grid the three unfilled cells rendered as solid
   grey blocks hanging off the end of the row. */
.socials-section .accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

  gap: 0;

  width: min(100%, var(--ch-wide));
  margin-inline: auto;
  padding: 0;

  background: transparent;
  border-top: 1px solid var(--ch-line);
  border-left: 1px solid var(--ch-line);

  list-style: none;
}

/* display:block, not grid. An earlier layer gives .account grid columns, and
   inheriting that here collapsed the handle to width:0 — which, combined with
   the `overflow-wrap: anywhere` it also inherits, broke "@treasuresvtg" into
   one letter per line down the page. */
.socials-section .account,
.socials-section .account:nth-child(even),
.socials-section .account:last-child:nth-child(odd) {
  display: block;

  margin: 0;
  padding: clamp(22px, 3vw, 30px);

  border-right: 1px solid var(--ch-line);
  border-bottom: 1px solid var(--ch-line);

  background: transparent;

  text-align: left;

  transition: background 180ms linear;
}

.socials-section .account:hover {
  background: #fbf8f1;
}

.socials-section .account::before,
.socials-section .account:nth-child(even)::before {
  content: none;
}

.socials-section .account__handle {
  display: block;

  margin: 0 0 6px;

  color: var(--ch-ink);

  font: 400 clamp(19px, 1.55vw, 23px) / 1.15 var(--prose);
  letter-spacing: -0.02em;

  /* the inherited `anywhere` is what let a handle break mid-word */
  overflow-wrap: normal;
  word-break: normal;

  text-align: left;
  text-shadow: none;
}

.socials-section .account__desc {
  margin: 0 0 clamp(18px, 2.4vh, 24px);

  color: var(--ch-ink-muted);

  font: 500 clamp(9px, 0.7vw, 10.5px) / 1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;

  text-align: left;
  text-shadow: none;
}

.socials-section .account__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;

  justify-content: flex-start;
}

.socials-section .account__links a {
  display: inline-flex;
  gap: 8px;
  align-items: center;

  color: var(--ch-ink-muted);

  font: 400 clamp(11px, 0.82vw, 12.5px) / 1 var(--mono);
  letter-spacing: 0.06em;

  text-decoration: none;
  text-shadow: none;

  transition: color 160ms linear;
}

.socials-section .account__links a::after {
  content: none;
}

.socials-section .account__links a:hover,
.socials-section .account__links a:focus-visible {
  color: var(--ch-signal);
}

.socials-section .account__links img {
  width: 15px;
  height: 15px;

  filter: brightness(0) saturate(100%);
  opacity: 0.42;

  transition: opacity 160ms linear;
}

.socials-section .account__links a:hover img {
  opacity: 0.8;
}


/* ============================================================================
 * 6 · FOOTER
 * --------------------------------------------------------------------------
 * On the same off-white as everything above it. It closed the page on a
 * near-black slab, which was the last remaining second ground.
 * ========================================================================== */

/* !important because an earlier layer paints the footer #050505. */
.site-footer {
  padding: clamp(64px, 9vh, 108px) var(--ch-pad-x) clamp(28px, 4vh, 40px);

  color: var(--ch-ink) !important;
  background: var(--ch-paper) !important;

  border-top: 1px solid var(--ch-line);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  justify-items: start;

  gap: clamp(36px, 5vw, 72px);

  width: min(100%, var(--ch-wide));
  margin-inline: auto;

  padding-bottom: clamp(44px, 6vh, 72px);
  border-bottom: 1px solid var(--ch-line-on-dark);

  text-align: left;
}

.site-footer__column {
  width: 100%;
  text-align: left;
}

.site-footer__heading {
  margin: 0 0 clamp(18px, 2.4vh, 24px);

  color: var(--ch-muted-on-dark);

  font: 500 clamp(9px, 0.72vw, 11px) / 1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;

  text-shadow: none;
}

.site-footer .footer-links {
  display: grid;
  justify-items: start;

  gap: 14px;

  margin: 0;
  padding: 0;

  list-style: none;
  text-align: left;
}

.site-footer .footer-links li {
  width: auto;
  margin: 0;
  text-align: left;
}

.site-footer .footer-links a {
  display: inline-flex;
  gap: 10px;
  align-items: center;

  color: var(--ch-ink-on-dark);

  font: 400 clamp(13px, 1vw, 15px) / 1.4 var(--mono);
  letter-spacing: 0.02em;

  text-decoration: none;
  text-shadow: none;

  transition: color 160ms linear;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible {
  color: var(--ch-signal-on-dark);
}

.site-footer .markets__logo {
  display: inline-grid;
  place-items: center;

  width: 18px;
  height: 18px;
}

.site-footer .markets__logo img {
  width: 100%;
  height: 100%;

  /* white on the dark ground */
  filter: brightness(0) invert(1);
  opacity: 0.62;

  transition: opacity 160ms linear;
}

.site-footer .footer-links a:hover .markets__logo img {
  opacity: 1;
}

.site-footer .markets__logo--none {
  width: 18px;
}

.site-footer .markets__name {
  text-shadow: none;
}

.site-footer .footer-links i {
  font-style: normal;
  opacity: 0.5;
}

/* the inner block already draws the closing rule; an earlier layer drew a
   second one here, so the footer ended on a doubled hairline */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;

  width: min(100%, var(--ch-wide));
  margin-inline: auto;
  padding-top: clamp(20px, 3vh, 28px);

  border-top: 0;
  text-align: left;
}

.site-footer__bottom p {
  width: auto;
  margin: 0;
  padding: 0;

  color: var(--ch-muted-on-dark);

  font: 400 clamp(10px, 0.76vw, 12px) / 1 var(--mono);
  letter-spacing: 0.14em;

  text-align: left;
  text-shadow: none;
}

.site-footer__bottom p:last-child {
  text-align: right;
}


/* ============================================================================
 * 7 · NARROW
 * ========================================================================== */

@media (max-width: 720px) {
  :root {
    --ch-pad-y: clamp(64px, 9vh, 92px);
  }

  /* Four across on a phone. `auto-fit` at the desktop track size gives three,
     which still runs seventeen rows deep. */
  #building .stack-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #building .stack-grid > li {
    padding: 10px;
  }

  .socials-section .accounts {
    grid-template-columns: 1fr;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 8px;
  }
}


/* ============================================================================
 * MOVING BUILDING WITH FIELD
 * --------------------------------------------------------------------------
 * Three large, continuously travelling lanes. The section stays borderless so
 * the marks feel like part of the page instead of a separate widget.
 * ========================================================================== */

#about #building {
  width: min(100%, 56rem) !important;
  max-width: 56rem !important;
  margin: clamp(28px, 3.4vw, 42px) 0 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

#building .building__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(18px, 2.2vw, 26px) !important;
  align-items: start !important;
}

#building .building__intro {
  padding: 3px 0 0 !important;
}

#building .building__title {
  margin: 0 !important;
  color: var(--ch-ink) !important;
  font: 500 10px / 1 var(--mono) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

#building .stack-carousel,
#building .stack-track {
  --stack-checker-offset: 60px;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 56rem !important;
  height: 258px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
}

#building .stack-lanes,
#building .stack-lanes--compact {
  display: grid !important;
  width: 100% !important;
  gap: 6px !important;
  overflow: hidden !important;
}

#building .stack-row {
  display: block !important;
  width: 100% !important;
  height: 82px !important;
  overflow: hidden !important;
  transform: none !important;
}

#building .stack-row__belt {
  display: flex !important;
  width: max-content !important;
  height: 82px !important;
  gap: 0 !important;
  animation: building-lane-left 44s linear infinite !important;
  will-change: transform;
}

#building .stack-row--reverse .stack-row__belt {
  animation-name: building-lane-left !important;
  animation-duration: 44s !important;
  margin-left: var(--stack-checker-offset) !important;
}

#building .stack-row__set {
  display: flex !important;
  flex: none !important;
  width: max-content !important;
  height: 82px !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 8px 0 0 !important;
  list-style: none !important;
}

#building .stack-row__set > li {
  display: grid !important;
  flex: 0 0 112px !important;
  place-items: center !important;
  width: 112px !important;
  height: 82px !important;
  margin: 0 !important;
  padding: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(23, 20, 15, 0.025) !important;
  box-shadow: none !important;
  transform: none !important;
}

#building .stack-row:nth-child(2) .stack-row__set > li:nth-child(even),
#building .stack-row:not(:nth-child(2)) .stack-row__set > li:nth-child(odd) {
  background: transparent !important;
}

#building .stack-row__set img,
#building .stack-row__set li[data-ink="mono"] img {
  display: block !important;
  width: 82% !important;
  height: 82% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: grayscale(1) saturate(0) contrast(0.88) !important;
  opacity: 0.55 !important;
  transform: none !important;
  transition: opacity 180ms ease, filter 180ms ease !important;
}

@media (hover: hover) {
  #building .stack-row__set > li:hover img {
    filter: grayscale(0.25) saturate(0.65) contrast(1) !important;
    opacity: 0.9 !important;
  }
}

@keyframes building-lane-left {
  to { transform: translateX(-50%); }
}

@keyframes building-lane-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 720px) {
  #about #building {
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px 0 0 !important;
  }

  #building .building__layout {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #building .building__summary {
    max-width: 20rem !important;
  }

  #building .stack-carousel,
  #building .stack-track {
    --stack-checker-offset: 48px;
    max-width: 100% !important;
    height: 210px !important;
  }

  #building .stack-row,
  #building .stack-row__belt,
  #building .stack-row__set {
    height: 66px !important;
  }

  #building .stack-row__set > li {
    flex-basis: 88px !important;
    width: 88px !important;
    height: 66px !important;
    padding: 7px !important;
  }
}


/* Socials now act as a quiet bridge between the profile and contact form. */
.chapters > .social-strip {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(92px, 12vw, 164px) var(--ch-pad-x) !important;
  color: var(--ch-ink) !important;
  background: var(--ch-paper) !important;
}

.social-strip__inner {
  width: min(100%, var(--ch-wide));
  margin-inline: auto;
}

.social-strip h2 {
  margin: 0 0 clamp(30px, 4vw, 48px);
  color: var(--ch-ink);
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.social-strip__list {
  display: block;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ch-line-strong);
  list-style: none;
}

.social-strip__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: clamp(96px, 9vw, 124px);
  padding: 20px 0;
  border-bottom: 1px solid var(--ch-line);
}

.social-strip__list li:nth-child(odd) {
  border-right: 0;
}

.social-strip__list li > span {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.social-strip__list li > span:last-child {
  flex-direction: row;
  gap: 14px;
}

.social-strip strong {
  color: var(--ch-ink);
  font: 400 clamp(20px, 2.1vw, 29px) / 1 var(--prose);
  letter-spacing: -0.025em;
}

.social-strip small {
  color: var(--ch-ink-muted);
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.social-strip a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ch-ink-muted);
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
}

.social-strip a:hover,
.social-strip a:focus-visible {
  color: var(--ch-signal);
}

/* A little more room, not more decoration. */
#about {
  padding-top: clamp(116px, 14vw, 184px);
  padding-bottom: clamp(88px, 10vw, 132px);
}

#about .about__frame,
#about .about__lead {
  max-width: 60rem;
}

#about #building {
  margin-top: clamp(38px, 5vw, 62px) !important;
}

#connect {
  padding-top: clamp(96px, 12vw, 156px);
  padding-bottom: clamp(96px, 12vw, 156px);
}

@media (max-width: 720px) {
  .chapters > .social-strip {
    padding-block: clamp(76px, 22vw, 108px) !important;
  }

  .social-strip__list li,
  .social-strip__list li:nth-child(odd),
  .social-strip__list li:nth-child(even) {
    min-height: 88px;
    padding: 18px 0;
    border-right: 0;
  }

  .social-strip__list li > span:last-child {
    gap: 10px;
  }

  #about,
  #connect {
    padding-top: clamp(76px, 22vw, 104px);
    padding-bottom: clamp(76px, 22vw, 104px);
  }
}

/* The homepage is intentionally sparse. These former side panels remain in
   the source for easy restoration, but no longer occupy the composition. */
.profile-card[hidden],
.capabilities[hidden],
.socials-section[hidden] {
  display: none !important;
}

/* Preserve the logos' own colors; the surrounding treatment stays quiet. */
#building .stack-row__set > li,
#building .stack-row:nth-child(2) .stack-row__set > li:nth-child(even),
#building .stack-row:not(:nth-child(2)) .stack-row__set > li:nth-child(odd) {
  background: transparent !important;
}

#building .stack-row__set img,
#building .stack-row__set li[data-ink="mono"] img {
  filter: none !important;
  opacity: 0.88 !important;
}

@media (hover: hover) {
  #building .stack-row__set > li:hover img {
    filter: none !important;
    opacity: 1 !important;
    transform: scale(1.06) !important;
  }
}

/* Gone by direct instruction. It halved the belt speed to 84s on any machine
   reporting the preference — which is most Windows installs. The site does
   not check prefers-reduced-motion anywhere; do not re-add it. */


/* ============================================================================
 * 8 · EDITORIAL REFINEMENT
 * --------------------------------------------------------------------------
 * A final, compact system for everything below the title screen. The title is
 * cinematic; the chapters are calm, precise, and useful. One paper, one rule,
 * one accent, and a consistent left edge carry the page from Profile to footer.
 * ========================================================================== */

:root {
  --ch-paper: var(--field);
  --ch-paper-warm: var(--field);
  --ch-surface: var(--field-raised);
  --ch-surface-alt: var(--field-deep);
  --ch-ink: #17140f;
  --ch-ink-soft: #3f3a32;
  --ch-ink-muted: #756e63;
  --ch-line: rgba(23, 20, 15, 0.14);
  --ch-line-strong: rgba(23, 20, 15, 0.24);
  --ch-signal: var(--steel);
  --ch-wide: 72rem;
  --ch-measure: 41rem;
  --ch-pad-x: clamp(22px, 6vw, 84px);
  --ch-pad-y: clamp(78px, 10vw, 132px);
}

.chapters {
  --paper: var(--ch-paper);
  --finish-paper: var(--ch-paper);
  --plate: var(--ch-paper);

  background: var(--ch-paper) !important;
  border-top: 0;
}

/* Once the title has handed off, its fixed colophon, progress rail, and
   artwork controls leave with it. The real footer now owns the colophon and
   the editorial page should have no stray screen furniture over the copy. */
html.past-title .site-credit,
html.past-title .scroll-meter,
html.past-title .scene--hero .hero__field,
html.past-title .scene--hero .hero__lockup,
html.past-title .scene--hero .hero__scroll-cue {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.chapters > .chapter,
.chapters > section {
  padding: var(--ch-pad-y) var(--ch-pad-x);
  border-top: 0;
  background: var(--ch-paper) !important;
}

.chapters > .chapter:first-child {
  border-top: 0;
}

.chapter__inner,
.building__layout,
.socials-section > .chapter__eyebrow,
.socials-section > .connect__title,
.socials-section > .accounts {
  width: min(100%, var(--ch-wide));
  margin-inline: auto;
}

.chapter__eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;

  margin: 0 0 clamp(24px, 3.2vw, 38px);

  color: var(--ch-ink-muted);

  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-shadow: none;
}

.chapter__eyebrow span {
  color: var(--ch-signal);
  font-variant-numeric: tabular-nums;
}

.chapter__title {
  margin: 0;
  color: var(--ch-ink);
  font: 400 clamp(30px, 4vw, 50px) / 1.02 var(--prose);
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: none;
}

.chapter__summary {
  max-width: 30rem;
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  color: var(--ch-ink-muted);
  font: 400 clamp(14px, 1.05vw, 16px) / 1.6 var(--prose);
  text-shadow: none;
}


/* PROFILE ------------------------------------------------------------------ */

#about {
  padding-top: clamp(92px, 12vw, 158px);
  padding-bottom: clamp(48px, 6vw, 76px);
}

#about .chapter__inner {
  display: grid;
  grid-template-columns: minmax(0, 56rem);
  justify-content: start;
  column-gap: 0;
  align-items: start;
}

#about .chapter__eyebrow {
  grid-column: 1;
  position: sticky;
  top: clamp(74px, 10vh, 110px);
}

#about .about__lead,
#about .about__frame,
#about #building {
  grid-column: 1;
}

#about .about__lead {
  max-width: 56rem;
  margin: 0 0 clamp(50px, 6vw, 78px);
}

#about .about__statement {
  max-width: none;
  color: var(--ch-ink);
  font: 400 clamp(34px, 4.6vw, 58px) / 1.04 var(--prose);
  letter-spacing: -0.038em;
}

#about .about__frame {
  max-width: 56rem;
  padding: clamp(26px, 3.6vw, 44px);
  border: 1px solid var(--ch-line);
  background: rgba(255, 255, 255, 0.22);
}

#about .about__body {
  columns: 2 18rem;
  column-gap: clamp(34px, 4.5vw, 64px);
  column-rule: 1px solid var(--ch-line);
}

#about .about__body p,
#about .about__body p:first-child {
  break-inside: avoid;
  margin: 0 0 1.55em;
  color: var(--ch-ink-soft);
  font: 400 clamp(15px, 1.05vw, 17px) / 1.7 var(--prose);
  letter-spacing: 0;
}

#about .about__body p:first-child::first-letter {
  color: var(--ch-signal);
  font-size: 3.3em;
  line-height: 0.82;
  float: left;
  margin: 0.08em 0.12em 0 0;
}


/* BUILDING WITH ------------------------------------------------------------ */

#building {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 56rem;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: clamp(24px, 3.2vw, 38px);
  padding: 0;
  border: 0;
  overflow: visible !important;
  background: transparent !important;
}

#building .building__layout {
  display: grid;
  grid-template-columns: minmax(10rem, 0.56fr) minmax(18rem, 1.44fr);
  gap: clamp(24px, 3.5vw, 46px);
  align-items: start;
  width: 100%;
  margin: 0;
}

#building .building__intro {
  padding-top: 2px;
}

#building .building__title {
  margin: 0;
  color: var(--ch-ink);
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: none;
}

#building .building__summary {
  max-width: 19rem;
  margin: 15px 0 0;
  color: var(--ch-ink-muted);
  font: 400 13px / 1.55 var(--prose);
  letter-spacing: 0;
  text-shadow: none;
}

#building .stack-carousel,
#building .stack-track {
  width: 100%;
  max-width: 34rem;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0;
  position: static !important;
  inset: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#building .stack-grid,
#building .stack-grid--rotating {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  gap: 1px;

  width: 100%;
  margin: 0;
  padding: 1px;

  border: 0;
  background: var(--ch-line-strong);
  position: static !important;
  transform: none !important;
  box-shadow: 0 10px 30px rgba(23, 20, 15, 0.045);
}

#building .stack-carousel .stack-grid {
  place-items: stretch !important;
  place-content: start stretch !important;
}

#building .stack-grid > li {
  position: relative;
  display: grid;
  place-items: center;

  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: 1.72 !important;
  min-width: 0;
  align-self: stretch !important;
  justify-self: stretch !important;
  padding: clamp(8px, 1vw, 14px) !important;
  overflow: hidden;

  background: var(--ch-paper);
  transition: background-color 220ms ease;
}

/* True checkerboard for an even four-column grid. */
#building .stack-grid > li:nth-child(8n + 2),
#building .stack-grid > li:nth-child(8n + 4),
#building .stack-grid > li:nth-child(8n + 5),
#building .stack-grid > li:nth-child(8n + 7) {
  background: var(--ch-surface-alt);
}

#building .stack-grid > li::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

#building .stack-grid > li img,
#building li[data-ink="mono"] img {
  width: 56% !important;
  height: 56% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain;
  filter: grayscale(1) saturate(0) contrast(0.9) !important;
  opacity: 0.78 !important;

  transform: translateY(0) scale(1);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    filter 220ms ease;
}

#building .stack-grid > li.is-changing img {
  opacity: 0 !important;
  transform: translateY(6px) scale(0.96);
}

#building .stack-grid > li:hover img {
  filter: grayscale(0) saturate(0.78) contrast(1) !important;
  opacity: 1 !important;
  transform: scale(1.04);
}

/* The complete source list stays in the markup. Without JavaScript, keep the
   section compact by showing the first twelve tools instead of fifty rows. */
html.no-js #building .stack-grid > li:nth-child(n + 13) {
  display: none;
}


/* CONTACT ------------------------------------------------------------------ */

#connect {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(48px, 6vw, 76px);
}

#connect .chapter__inner,
#connect .connect__block {
  width: min(100%, var(--ch-wide));
  max-width: var(--ch-wide);
}

#connect .connect__block {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
  column-gap: clamp(54px, 8vw, 118px);
  align-items: start;
}

#connect .chapter__eyebrow,
#connect .connect__title,
#connect .connect__note {
  grid-column: 1;
}

#connect .chapter__eyebrow {
  margin-bottom: clamp(24px, 3vw, 34px);
}

#connect .connect__title {
  margin-bottom: clamp(18px, 2.5vw, 26px);
  font-size: clamp(32px, 4vw, 50px);
}

#connect .connect__note {
  max-width: 31rem;
  margin-bottom: 0;
}

#connect .form {
  grid-column: 2;
  grid-row: 1 / span 4;

  gap: clamp(24px, 3vw, 32px);
  max-width: none;
  padding: clamp(28px, 4vw, 48px);

  border: 1px solid var(--ch-line);
  background: var(--ch-surface);
}

#connect .field__input {
  padding: 0 0 13px;
  border-bottom-color: var(--ch-line-strong);
  font-size: clamp(15px, 1.15vw, 18px);
}

#connect .field__input--area {
  min-height: 7.2rem;
}

#connect .button {
  min-width: 9rem;
  padding: 14px 24px;
  border-radius: 999px;
}


/* SOCIAL DIRECTORY --------------------------------------------------------- */

.chapters > .socials-section[data-panel="socials"] {
  padding: clamp(42px, 5vw, 68px) var(--ch-pad-x) clamp(72px, 9vw, 112px);
  border-top: 0;
  background: var(--ch-paper) !important;
}

.socials-section > .chapter__eyebrow {
  margin-bottom: clamp(20px, 2.6vw, 30px);
}

.socials-section > .connect__title--sub {
  margin: 0 auto clamp(36px, 4.5vw, 54px);
  font-size: clamp(28px, 3.4vw, 42px);
}

.socials-section .accounts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 68px) clamp(54px, 8vw, 108px);
  border: 0;
}

.socials-section .account,
.socials-section .account:nth-child(even),
.socials-section .account:last-child:nth-child(odd) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "handle handle"
    "description links";
  gap: 8px 24px;
  align-items: end;
  align-content: center;
  justify-content: stretch;

  min-height: 0;
  padding: 0;

  border: 0;
  background: transparent;
}

.socials-section .account:hover {
  background: transparent;
}

.socials-section .account__handle {
  grid-area: handle;
  margin: 0;
  font-size: clamp(20px, 1.8vw, 26px);
}

.socials-section .account__desc {
  grid-area: description;
  margin: 0;
}

.socials-section .account__links {
  grid-area: links;
  gap: 12px;
  margin: 0;
}

.socials-section .account__links a {
  width: 30px;
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
}

.socials-section .account__links img {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 7px;
}


/* FOOTER ------------------------------------------------------------------- */

.site-footer {
  padding: clamp(58px, 7vw, 84px) var(--ch-pad-x) clamp(24px, 3vw, 34px);
  border-top-color: var(--ch-line-strong);
}

.site-footer__inner {
  grid-template-columns: minmax(16rem, 1.4fr) minmax(15rem, 0.6fr);
  gap: clamp(36px, 6vw, 80px);
  padding-bottom: clamp(38px, 5vw, 56px);
}

.site-footer .footer-links {
  gap: 11px;
}

.site-footer .markets.footer-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer .markets__logo img {
  filter: grayscale(1) brightness(0) !important;
  opacity: 0.5;
}


/* RESPONSIVE --------------------------------------------------------------- */

@media (max-width: 900px) {
  #about .chapter__inner,
  #connect .connect__block {
    grid-template-columns: 1fr;
  }

  #about .chapter__eyebrow {
    position: static;
  }

  #about .chapter__eyebrow,
  #about .about__lead,
  #about .about__frame,
  #about .about__body,
  #about #building,
  #connect .chapter__eyebrow,
  #connect .connect__title,
  #connect .connect__note,
  #connect .form {
    grid-column: 1;
  }

  #connect .form {
    grid-row: auto;
    margin-top: clamp(38px, 6vw, 60px);
  }

  #building .building__layout {
    grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 1.5fr);
  }
}

@media (max-width: 720px) {
  :root {
    --ch-pad-y: clamp(64px, 18vw, 86px);
  }

  .chapters > .chapter,
  .chapters > section,
  #about,
  #connect {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: var(--ch-pad-x) !important;
  }

  .chapter__eyebrow {
    margin-bottom: 24px;
  }

  #about {
    padding-top: clamp(72px, 20vw, 98px);
    padding-bottom: 36px;
  }

  #about .about__lead {
    margin-bottom: 42px;
  }

  #about .about__statement {
    max-width: none;
    font-size: clamp(32px, 9.8vw, 44px);
  }

  #about .about__body {
    columns: 1;
    column-rule: 0;
  }

  #about .about__frame {
    padding: 24px 20px;
  }

  #about #building {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 24px !important;
    padding: 0 !important;
  }

  #building .building__layout {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 100% !important;
    min-width: 0 !important;
  }

  #building .stack-carousel,
  #building .stack-track,
  #building .stack-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #building .stack-grid > li {
    aspect-ratio: 1.55 !important;
    padding: 8px !important;
  }

  #connect {
    padding-top: 36px;
    padding-bottom: 44px;
  }

  #building .stack-grid > li img,
  #building li[data-ink="mono"] img {
    width: 60% !important;
    height: 60% !important;
  }

  #connect .form {
    padding: 24px 20px;
  }

  .socials-section .accounts {
    grid-template-columns: 1fr;
  }

  .socials-section .account,
  .socials-section .account:nth-child(even),
  .socials-section .account:last-child:nth-child(odd) {
    min-height: 0;
  }

  .site-footer__inner,
  .site-footer .markets.footer-links {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 0px) {
  #building .stack-grid > li img {
    transition: unset;
  }
}


/* ============================================================================
 * 9 · PROFESSIONAL SIGNALS + SITE FOOTER
 * ========================================================================== */

.profile-card {
  grid-column: 1;
  position: sticky;
  top: clamp(72px, 10vh, 106px);

  width: 100%;
  margin: 0;
  padding: 0;

  color: var(--ch-ink);
  text-align: left;
}

.profile-card h3,
.capabilities h3 {
  margin: 0 0 20px;
  color: var(--ch-ink);
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: none;
}

.profile-card dl {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ch-line-strong);
}

.profile-card dl > div {
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--ch-line);
}

.profile-card dt {
  margin: 0 0 5px;
  color: var(--ch-ink-muted);
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.profile-card dd {
  margin: 0;
  color: var(--ch-ink-soft);
  font: 400 14px / 1.42 var(--prose);
}

.profile-card__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 46px;
  margin-top: 14px;

  color: var(--ch-ink);
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.profile-card__resume span {
  color: var(--ch-ink-muted);
  font-size: 9px;
  letter-spacing: 0.12em;
}

.profile-card__resume:hover,
.profile-card__resume:focus-visible {
  color: var(--ch-signal);
}

#about .capabilities {
  grid-column: 2;
  max-width: 56rem;
  margin-top: clamp(48px, 6vw, 76px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--ch-line-strong);
}

.capabilities ul {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.capabilities li {
  padding: 9px 13px;
  border: 1px solid var(--ch-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--ch-ink-soft);
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.05em;
}

.chapters a:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid var(--ch-signal);
  outline-offset: 4px;
}


/* A real closing landmark: identity, recovery navigation, contact, and status. */
.site-footer {
  padding: 0 var(--ch-pad-x) clamp(24px, 3vw, 36px);
  border-top: 0;
  color: #f6f3ed !important;
  background: #17140f !important;
}

.site-footer__topline,
.site-footer__lead,
.site-footer__inner,
.site-footer__bottom {
  width: min(100%, var(--ch-wide));
  margin-inline: auto;
}

.site-footer__topline {
  display: flex;
  justify-content: flex-end;
  padding: 22px 0;
  border-bottom: 1px solid rgba(246, 243, 237, 0.18);
}

.site-footer__topline a {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  color: rgba(246, 243, 237, 0.74);
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-footer__topline a:hover {
  color: #fff;
}

.site-footer__lead {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: end;

  padding: clamp(72px, 9vw, 118px) 0 clamp(66px, 8vw, 104px);
}

.site-footer__name {
  grid-column: 1 / -1;
  margin: 0 0 clamp(-14px, -1vw, -8px);
  color: #b9783f;
  font: 500 10px / 1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-footer__lead h2 {
  margin: 0;
  max-width: 18ch;
  color: #f6f3ed;
  font: 400 clamp(34px, 5vw, 62px) / 1.02 var(--prose);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.site-footer__lead > p:not(.site-footer__name) {
  margin: 0 0 28px;
  max-width: 35rem;
  color: rgba(246, 243, 237, 0.62);
  font: 400 clamp(14px, 1.05vw, 16px) / 1.62 var(--prose);
}

.site-footer__cta {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;

  min-height: 48px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(246, 243, 237, 0.34);

  color: #f6f3ed;
  font: 500 11px / 1 var(--mono);
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;

  grid-column: 2;
  width: 100%;
}

.site-footer__cta:hover {
  border-bottom-color: #b9783f;
  color: #d99a63;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 6vw, 88px);
  justify-items: stretch;

  padding: clamp(42px, 5vw, 64px) 0;
  border-top: 1px solid rgba(246, 243, 237, 0.18);
  border-bottom: 1px solid rgba(246, 243, 237, 0.18);
}

.site-footer__column {
  width: 100%;
}

.site-footer__heading {
  margin: 0 0 18px;
  color: rgba(246, 243, 237, 0.46);
  font: 500 9px / 1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer .footer-links {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer .footer-links li {
  width: 100%;
  border-top: 1px solid rgba(246, 243, 237, 0.1);
}

.site-footer .footer-links li:last-child {
  border-bottom: 1px solid rgba(246, 243, 237, 0.1);
}

.site-footer .footer-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 46px;
  color: rgba(246, 243, 237, 0.82);
  font: 400 13px / 1.3 var(--mono);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.site-footer .footer-links a:hover {
  color: #d99a63;
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding-top: 24px;
}

.site-footer__bottom p {
  margin: 0;
  color: rgba(246, 243, 237, 0.46);
  font: 400 9px / 1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer__bottom p:nth-child(2) {
  text-align: center;
}

.site-footer__bottom p:last-child {
  text-align: right;
}

.site-footer a:focus-visible {
  outline-color: #d99a63;
}

@media (max-width: 900px) {
  .profile-card {
    position: static;
    grid-column: 1;
    margin-bottom: clamp(42px, 7vw, 64px);
  }

  .profile-card dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid var(--ch-line);
  }

  .profile-card dl > div {
    padding-inline: 16px;
    border-right: 1px solid var(--ch-line);
  }

  #about .capabilities {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .profile-card dl {
    grid-template-columns: 1fr;
  }

  .site-footer__lead,
  .site-footer__inner,
  .site-footer__bottom {
    grid-template-columns: 1fr;
  }

  .site-footer__lead {
    gap: 34px;
  }

  .site-footer__cta {
    grid-column: 1;
  }

  .site-footer__name {
    margin-bottom: -10px;
  }

  .site-footer__lead > p:not(.site-footer__name) {
    margin-bottom: 0;
  }

  .site-footer__bottom {
    gap: 8px;
  }

  .site-footer__bottom p,
  .site-footer__bottom p:nth-child(2),
  .site-footer__bottom p:last-child {
    text-align: left;
  }
}

/* Final placement overrides: keep the moving field large after all legacy
   Building With rules have resolved. */
#building .stack-carousel,
#building .stack-track {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 56rem !important;
  height: 258px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  transform: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
}

@media (max-width: 720px) {
  #about #building {
    width: 100% !important;
    max-width: 100% !important;
    margin: 26px 0 0 !important;
  }

  #building .stack-carousel,
  #building .stack-track {
    max-width: 100% !important;
    height: 210px !important;
  }
}

/* Final rhythm: broader measures and more breathing room, without new panels. */
#about {
  padding-top: clamp(116px, 14vw, 184px) !important;
  padding-bottom: clamp(88px, 10vw, 132px) !important;
}

#about .about__lead,
#about .about__frame {
  max-width: 62rem !important;
}

#about #building {
  margin-top: clamp(42px, 5vw, 68px) !important;
}

#connect {
  padding-top: clamp(100px, 12vw, 164px) !important;
  padding-bottom: clamp(100px, 12vw, 164px) !important;
}

@media (max-width: 720px) {
  #about,
  #connect {
    padding-top: clamp(78px, 22vw, 108px) !important;
    padding-bottom: clamp(78px, 22vw, 108px) !important;
  }
}


/* CONTINUOUS LOWER-PAGE FLOW ----------------------------------------------
   About, Socials, and Contact now share one measure and one vertical rhythm. */
#about,
.chapters > .social-strip,
#connect {
  min-height: 0 !important;
  background: var(--ch-paper) !important;
}

#about .chapter__inner,
.social-strip__inner,
#connect .chapter__inner,
#connect .connect__block {
  box-sizing: border-box;
  width: min(100%, 62rem) !important;
  max-width: 62rem !important;
  margin-inline: auto !important;
}

#about {
  padding: clamp(112px, 13vw, 176px) var(--ch-pad-x) clamp(64px, 7vw, 92px) !important;
}

#about .chapter__inner {
  grid-template-columns: minmax(0, 1fr) !important;
}

#about .about__lead,
#about .about__frame,
#about #building {
  width: 100% !important;
  max-width: none !important;
}

.chapters > .social-strip {
  padding: 0 var(--ch-pad-x) clamp(64px, 7vw, 92px) !important;
}

.social-strip__inner {
  padding-top: clamp(42px, 5vw, 60px);
  border-top: 1px solid var(--ch-line-strong);
}

.social-strip h2 {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.social-strip__list {
  border-top-color: var(--ch-line);
}

.social-strip__list li {
  min-height: clamp(76px, 7vw, 94px);
}

#connect {
  padding: 0 var(--ch-pad-x) clamp(112px, 13vw, 176px) !important;
}

#connect .connect__block {
  grid-template-columns: minmax(12rem, 0.58fr) minmax(0, 1.42fr);
  column-gap: clamp(48px, 7vw, 88px);
  padding-top: clamp(48px, 5vw, 64px);
  border-top: 1px solid var(--ch-line-strong);
}

#connect .connect__title {
  margin: 0 !important;
  font-size: clamp(34px, 4.2vw, 52px);
}

@media (max-width: 720px) {
  #about {
    padding: clamp(78px, 22vw, 106px) var(--ch-pad-x) 58px !important;
  }

  .chapters > .social-strip {
    padding: 0 var(--ch-pad-x) 58px !important;
  }

  #connect {
    padding: 0 var(--ch-pad-x) clamp(84px, 24vw, 120px) !important;
  }

  #connect .connect__block {
    display: block;
    padding-top: 42px;
  }

  #connect .form {
    margin-top: 34px;
  }
}


/* A restrained handoff between the moving tools and the social directory. */
.chapters > .social-strip {
  --handoff-top: clamp(32px, 4vw, 48px);
  --handoff-height: clamp(46px, 5vw, 64px);
  position: relative;
  padding-top: clamp(118px, 14vw, 174px) !important;
}

.chapters > .social-strip::before {
  content: "";
  position: absolute;
  top: var(--handoff-top);
  left: 50%;
  width: 1px;
  height: var(--handoff-height);
  background: linear-gradient(to bottom, transparent, var(--ch-line-strong));
}

.chapters > .social-strip::after {
  content: "";
  position: absolute;
  top: calc(var(--handoff-top) + var(--handoff-height) - 2px);
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ch-signal);
  transform: translateX(-2px);
}

@media (max-width: 720px) {
  .chapters > .social-strip {
    --handoff-top: 28px;
    --handoff-height: 42px;
    padding-top: 102px !important;
  }
}

/* Un-gated by direct instruction. Behind `no-preference` this pulse never ran
   on any machine reporting reduced motion, which is most Windows installs —
   the mark just sat there. It runs unconditionally now. */
.chapters > .social-strip::after {
  animation: handoff-pulse 3.8s ease-in-out infinite;
}

@keyframes handoff-pulse {
  0%, 100% { opacity: 0.48; transform: translateX(-2px) scale(0.82); }
  50% { opacity: 1; transform: translateX(-2px) scale(1); }
}


/* Visual interlude: artwork, not another section or container. */
.flow-art {
  position: relative;
  width: min(calc(100% - (2 * var(--ch-pad-x))), 52rem);
  height: clamp(220px, 28vw, 310px);
  margin: clamp(72px, 9vw, 120px) auto clamp(86px, 10vw, 138px);
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 50%, #000 52%, transparent 100%);
}

.flow-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  filter: saturate(0.76) sepia(0.08) contrast(0.94);
  opacity: 0.86;
  transform: scale(1.025);
}

/* The artwork now owns the transition; remove the previous divider marker. */
.chapters > .social-strip {
  padding-top: 0 !important;
}

.chapters > .social-strip::before,
.chapters > .social-strip::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

@media (max-width: 720px) {
  .flow-art {
    width: min(calc(100% - 44px), 30rem);
    height: clamp(168px, 52vw, 220px);
    margin-block: 62px 78px;
  }
}

/* Image interlude removed; leave a clean, undecorated pause instead. */
.chapters > .social-strip {
  padding-top: clamp(92px, 11vw, 138px) !important;
}

@media (max-width: 720px) {
  .chapters > .social-strip {
    padding-top: 76px !important;
  }
}