/* Patrick LeRoy — final lower-home composition.
   One paper, one measure, one rhythm. Loaded after the legacy chapter styles. */

:root {
  /* Both of these referenced nothing and drifted. See site-finish.css for the
     full reasoning: there is one paper, it is --field in tokens.css, and every
     surface on the site is that or a documented step off it.

     --home-surface was `rgba(255,255,255,0.24)`. A translucent white composites
     to a DIFFERENT value over every ground it crosses, so the contact panel was
     a fourth near-white that no palette contained and no contrast check could
     resolve. --field-raised is the real step up, and it is opaque. */
  --home-paper: var(--field);
  --home-surface: var(--field-raised);
  --home-ink: #14120f;
  --home-soft: #3c3a36;
  --home-muted: #6e6b66;
  --home-line: rgba(20, 18, 15, 0.12);
  --home-line-strong: rgba(20, 18, 15, 0.22);
  --home-signal: var(--steel);
  --home-measure: 80rem;
  --home-pad: clamp(22px, 6vw, 84px);
}

/* Top-right contact menu: one quiet surface, with channels presented as type. */
.chrome.chrome__nav .chrome__connect {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 0;
}

.chrome.chrome__nav .chrome__connect > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 4px 2px;
  color: inherit;
  font-family: var(--mono);
  font-size: clamp(8px, 0.7vw, 10px);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: inherit;
  cursor: pointer;
  list-style: none;
  transition: color 180ms linear, transform 240ms var(--finish-ease);
}

.chrome.chrome__nav .chrome__connect > summary::-webkit-details-marker {
  display: none;
}

.chrome.chrome__nav .chrome__connect > summary::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-fast) var(--ease-out);
}

.chrome.chrome__nav .chrome__connect > summary:hover,
.chrome.chrome__nav .chrome__connect > summary:focus-visible,
.chrome.chrome__nav .chrome__connect[open] > summary {
  color: var(--world-accent, var(--signal));
  transform: translateY(-1px);
}

.chrome.chrome__nav .chrome__connect > summary:hover::after,
.chrome.chrome__nav .chrome__connect > summary:focus-visible::after,
.chrome.chrome__nav .chrome__connect[open] > summary::after {
  transform: scaleX(1);
}

.chrome__connect-caret {
  display: inline-block;
  margin-top: -1px;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 220ms var(--finish-ease);
}

.chrome__connect[open] .chrome__connect-caret {
  transform: rotate(45deg);
}

.chrome.chrome__nav .chrome__connect-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: -4px;
  display: grid;
  width: max-content;
  min-width: 132px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 250, 240, 0.22);
  background: rgba(15, 17, 17, 0.84);
  box-shadow: 0 14px 38px rgba(5, 8, 8, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}

.chrome.chrome__nav .chrome__connect-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 32px;
  padding: 0 2px;
  border-bottom: 1px solid rgba(255, 250, 240, 0.12);
  color: #fffaf0 !important;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-shadow: none !important;
  text-transform: uppercase;
  transform: none;
  transition: color 150ms linear, padding 180ms var(--finish-ease);
}

.chrome.chrome__nav .chrome__connect-menu a:last-child {
  border-bottom: 0;
}

.chrome.chrome__nav .chrome__connect-menu a::before,
.chrome.chrome__nav .chrome__connect-menu a::after {
  content: none;
}

.chrome.chrome__nav .chrome__connect-menu a:hover,
.chrome.chrome__nav .chrome__connect-menu a:focus-visible {
  color: #f1a56f !important;
  padding-right: 0;
  padding-left: 4px;
  transform: none;
}

html[data-world]:not([data-world="blank"]):not(.past-title)
  .chrome.chrome__nav
  .chrome__connect > summary {
  color: #fffaf0;
  text-shadow: var(--edge-crisp);
}

html.past-title .chrome.chrome__nav .chrome__connect > summary {
  color: var(--ink);
  text-shadow: none;
}

html.past-title .chrome.chrome__nav .chrome__connect > summary:hover,
html.past-title .chrome.chrome__nav .chrome__connect > summary:focus-visible,
html.past-title .chrome.chrome__nav .chrome__connect[open] > summary {
  color: var(--signal);
}

@media (max-width: 720px) {
  .chrome.chrome__nav .chrome__connect {
    display: block;
    width: 150px;
    padding: 0;
  }

  .chrome.chrome__nav .chrome__connect > summary {
    justify-content: flex-end;
    width: 100%;
    min-height: 42px;
    padding: 0 4px;
    color: var(--ink) !important;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-shadow: none !important;
  }

  .chrome.chrome__nav .chrome__connect-menu {
    position: static;
    width: 150px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .chrome.chrome__nav .chrome__connect-menu a {
    justify-content: flex-end;
    min-height: 36px;
    border-bottom-color: rgba(38, 29, 22, 0.12);
    color: var(--ink) !important;
  }

  .chrome.chrome__nav[data-mobile-open="true"] .chrome__nav-links {
    max-height: 300px;
  }
}

/* Opening mark -----------------------------------------------------------
   Grow from the existing upper-left corner so the extra presence travels
   into the open space on the right and below. The inner layer is intentional:
   the outer stage remains free for the title's glitch treatment. */
@media (min-width: 721px) {
  .scene--hero .hero__mark-stage {
    overflow: visible !important;
  }

  .scene--hero .hero__mark-drift {
    transform: scale(1.24) !important;
    transform-origin: left top !important;
  }
}

/* The phone had a `scale(1.1)` growth here to match the desktop's. It is gone,
   not overridden: growing from the top-left corner is a composition device for
   a wide screen with space to the right, and on a phone it only pushed the mark
   off its own centre line. The phone mark is measured to the gutter instead —
   see styles/phone-title.css and the fitter in src/scenes/mark.js. */

.chapters {
  color: var(--home-ink);
  background: var(--home-paper) !important;
}

.profile-card[hidden],
.capabilities[hidden],
.socials-section[hidden],
.flow-art {
  display: none !important;
}

#about,
.chapters > .social-strip,
#connect {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-inline: var(--home-pad) !important;
  border: 0 !important;
  background: var(--home-paper) !important;
}

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

/* About ------------------------------------------------------------------- */

html.is-ascii-ready .title .ascii-logo-fit,
html.is-ascii-ready .title .title__meta {
  opacity: calc(1 - var(--title-exit, 0));
}

html.past-title .title,
html.past-title .ascii-logo-fit,
html.past-title .title__meta,
html.past-title .title__practices,
html.past-title .title__record {
  pointer-events: none !important;
}

#about {
  padding-top: clamp(4.5rem, 10vh, 7rem) !important;
  padding-bottom: 0 !important;
}

#about .chapter__inner {
  display: block !important;
}

#about .about__title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(1.75rem, 3.2vw, 2.5rem) !important;
  padding: 0 !important;
  color: var(--home-ink) !important;
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: clamp(3.4rem, 1.4rem + 7vw, 6.75rem) !important;
  font-weight: 620 !important;
  font-variation-settings: "wdth" 94, "wght" 620 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.042em !important;
  text-align: left !important;
}

#about .about__lead {
  display: none !important;
}

#about .about__statement .title__line--hero {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  flex: 0 0 auto !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  margin: 0 auto !important;
  letter-spacing: normal !important;
  text-align: center !important;
}

#about .about__statement .title__stem {
  display: block !important;
  width: 100% !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 2.2px #000 !important;
  paint-order: fill stroke !important;
  font-size: clamp(3.2rem, 1.95rem + 3vw, 4.6rem) !important;
  font-weight: 800 !important;
  font-variation-settings: "wdth" 96, "wght" 800 !important;
  letter-spacing: 0.09em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
}

#about .about__statement .title__line--tagline,
#about .about__statement .title__line--tagline .title__accent {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

#about .about__statement .title__line--tagline {
  position: absolute !important;
  right: max(0px, calc((100% - var(--roll-slot-w, 70%)) / 2)) !important;
  top: calc(var(--roll-word-h, 1em) + 0.28rem) !important;
  bottom: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: top 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: #8a8478 !important;
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 300 !important;
  font-style: normal !important;
  font-variation-settings: "wdth" 78, "wght" 300 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-align: right !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#about .title__accent {
  color: #8a8478 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: inherit !important;
}

#about .about__statement .title__roll {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--roll-slot-h, 1.05em) !important;
  height: var(--roll-slot-h, 1.05em) !important;
  margin-inline: auto !important;
  margin-bottom: 1.35rem !important;
  overflow: visible !important;
  font-size: clamp(5.5rem, 2.4rem + 10vw, 10.8rem) !important;
  line-height: 0.86 !important;
}

#about .about__statement .title__roll-sizer {
  display: none !important;
}

#about .about__statement .title__roll-list {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--roll-slot-h, 1.12em) !important;
  overflow: hidden !important;
}

#about .about__statement .title__roll-list > * {
  position: absolute !important;
  top: var(--roll-y, 0px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  transition: none !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  text-align: center !important;
}

#about .about__statement .title__roll-list > *.is-animating {
  opacity: unset !important;
  transform: unset !important;
  filter: none !important;
  pointer-events: none !important;
}

#about .about__statement .title__roll-list > .is-on:not(.is-animating) {
  opacity: 1 !important;
  z-index: 1 !important;
}

#about .title__amp {
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1em !important;
  font-variation-settings: normal !important;
  letter-spacing: inherit !important;
  padding-right: 0 !important;
  margin-right: 0.22em !important;
}

#about .title__lead {
  max-width: 36rem !important;
  margin: 0 auto !important;
  color: var(--home-soft) !important;
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: clamp(1.05rem, 0.94rem + 0.42vw, 1.22rem) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.014em !important;
  text-align: center !important;
  text-wrap: pretty !important;
}

#about .about__frame {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

#about .about__body {
  columns: 2 20rem !important;
  column-gap: clamp(38px, 5vw, 68px) !important;
  column-rule: 1px solid var(--home-line) !important;
}

#about .about__body p,
#about .about__body p:first-child {
  margin: 0 0 1.55em !important;
  color: var(--home-soft) !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.72 !important;
}

#about .about__body p:first-child::first-letter {
  color: var(--home-ink) !important;
}

/* Building With — part of About ------------------------------------------ */

#about .about__signals {
  box-sizing: border-box;
  width: 100%;
  margin: clamp(26px, 3.2vw, 38px) 0 0;
  padding: 0;
}

#about #building {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

#building .building__layout {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

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

#building .stack-carousel,
#building .stack-track {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 176px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
  /* No edge fade. The belt is cut clean at the slit — see "Print slit" below.
     Still !important: chapter-rhythm.css re-asserts a 4% fade with !important
     and would win if this were merely deleted. */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#building .stack-carousel {
  container-type: inline-size;
  /* Was 80%. Full measure now — the item width is 25cqw of this box, so a
     wider opening also means bigger logos and a longer run before one
     reaches an end. */
  width: 100% !important;
  margin-inline: 0 !important;
}

#building .stack-track {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

#building .stack-lanes,
#building .stack-lanes--compact {
  display: block !important;
  width: 100% !important;
  height: 176px !important;
}

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

#building .stack-row {
  display: block !important;
  width: 100% !important;
  margin: 0 0 5px !important;
  overflow: hidden !important;
}

#building .stack-row__belt {
  display: flex !important;
  width: max-content !important;
  margin: 0 !important;
  animation: building-lane-left var(--ticker-duration, 40s) linear infinite !important;
  animation-delay: 0s !important;
  animation-play-state: running !important;
  will-change: transform;
}

#building .stack-row:nth-child(2) .stack-row__belt {
  margin-left: 12.5cqw !important;
}

#building .stack-row__set {
  display: flex !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#building .stack-row__set > li {
  display: grid !important;
  flex: 0 0 20cqw !important;
  width: 20cqw !important;
  height: 56px !important;
  grid-template-rows: 100% !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 2px !important;
}

#building .stack-row__set img,
#building .stack-row__set li[data-ink="mono"] img {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  max-width: 122px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.86 !important;
}

@keyframes building-lane-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* THE ENDS ---------------------------------------------------------------- *
   Nothing. The logos scroll and the carousel's `overflow: hidden` cuts them
   at its edge — no mark, no fade, no depth.

   A long list of treatments was tried here and every one was rejected: a 12%
   mask fade, a recessed cavity with inset shading, gradient reveals, a raked
   3D jamb built on real perspective, and a per-logo turn driven from
   src/slit-depth.js. Each addition made the strip read as an object placed on
   the page instead of part of it. The script is deleted, not disabled.

   The horizontal motion is the same as it has been throughout — the belts
   own it, via the keyframes above and the 12.5cqw offset on row two.
   ------------------------------------------------------------------------- */

#building .stack-carousel {
  background: transparent !important;
  box-shadow: none !important;
}

/* SAME GROUND AS THE REST OF THE PAGE ------------------------------------- *
   #building carried two paint layers nothing else on the paper has, which is
   why this section read as a different colour from everything around it:

     · ventures-index.css:127 — a warm brown gradient falling 130px from the
       top, written to look like a shadow cast by the About frame above it
     · ventures-index.css:156 and chapters.css:3020 — two separate dotted
       "paper texture" grounds, 8px and 7px

   They resolved together into a tinted band with visible edges at the top
   and bottom of the section. Both pseudo-elements are switched off with
   `content: none`, which removes them rather than just hiding their paint,
   and the section's own background and borders are pinned to the paper so
   nothing else can reintroduce a panel here.
   ------------------------------------------------------------------------- */

#building::before,
#building::after {
  content: none !important;
}

#building {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Socials ---------------------------------------------------------------- */

.chapters > .social-strip {
  position: relative !important;
  padding-top: clamp(62px, 7vw, 88px) !important;
  padding-bottom: clamp(76px, 8vw, 104px) !important;
}

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

/* Two columns: the accounts on the left, the shops on the right. `auto` on
   the second track lets the shops size to their own content, so the accounts
   keep the full remaining measure rather than surrendering half of it to a
   two-line list. */
.social-strip__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: clamp(32px, 6vw, 88px) !important;
  align-items: start !important;
  padding: 0 !important;
  border: 0 !important;
}

.social-strip__inner > h2 {
  grid-column: 1 / -1 !important;
  margin-top: var(--strip-block-gap) !important;
}

/* THE GRID MUST NOT OWN ANY VERTICAL DISTANCE HERE.
   The h2 spans the full width, so it is its own grid row — which means a
   row-gap lands between SOCIALS and the accounts beneath it as well as
   between the two blocks. That is precisely why SOCIALS sat 68px above its
   list (22px margin + 46px row-gap) while SHOPS, which lives inside the
   <aside> and never sees the gap, sat at 22px. With the row-gap at zero
   both headings are spaced by their own margin alone, and the block gap is
   a margin on the shops block. */
/* ONE COLUMN AT EVERY WIDTH. The two-column split is what created the void:
   the accounts are always taller than the shops, so the second column could
   never be filled. Stacked full-width blocks have no such problem, and the
   rows below use the recovered width instead. */
.social-strip__inner {
  grid-template-columns: minmax(0, 1fr) !important;
  row-gap: 0 !important;
}

/* ONE SPACING SYSTEM FOR BOTH LISTS --------------------------------------- *
   Accounts and Shops were built differently and had therefore drifted:
   the headings sat 34px and 20px above their lists, and the gap between
   entries was `padding-bottom: 30px` INSIDE the item on one list but
   `margin-top: 26px` BETWEEN items on the other. Two mechanisms and four
   numbers for what is visually the same relationship, which is exactly how
   headings end up unequally spaced.

   Every one of those distances now comes from these three variables, and
   both lists are governed by the same selectors, so they cannot drift again
   without being changed together.
   ------------------------------------------------------------------------- */

.social-strip {
  --strip-head-gap: var(--sys-label-gap, 20px);
  --strip-entry-gap: 0;
  --strip-block-gap: clamp(36px, 5vw, 48px);
}

.social-strip h2,
.social-strip__shops h3 {
  margin: 0 0 var(--strip-head-gap) !important;
  padding: 0 !important;
}

.social-strip__list,
.social-strip__shops ul {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  /* The left indent existed only to clear the vertical rule that is now
     gone, so the list starts on the section's own margin. */
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

.social-strip__list {
  width: 100% !important;
}

/* The rule down the left of the accounts is gone — same call as the divider
   that used to sit between the accounts and the shops. Nothing is being
   bracketed here; the list is legible on its own. */
.social-strip__list::before {
  content: none !important;
}

/* Nothing inside the item. The space lives strictly between items, so the
   first entry sits exactly --strip-head-gap under its heading in both
   lists and the last adds no trailing space.

   NO `:nth-child()` HERE. It was carried over to out-muscle the legacy
   alternating rules in chapter-rhythm.css, and it silently broke the gap
   below: `li:nth-child(odd)` scores (0,2,1) against `li + li` at (0,1,2),
   so this reset beat the 30px margin and the accounts sat flush while the
   shops — which have no nth-child rule — spaced correctly. `!important`
   already beats a non-important legacy rule at any specificity, so the
   pseudo-classes bought nothing and cost the whole spacing system. */
.social-strip__list > li,
.social-strip__shops li {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.social-strip__list > li + li,
.social-strip__shops li + li {
  margin-top: var(--strip-entry-gap) !important;
}

/* THE INDEX ---------------------------------------------------------------- *
   The accounts were a stack of blocks in a half-width column, with the shops
   stranded in the other half. Four entries deep against three small marks
   left most of that second column empty, and every entry repeated
   "Instagram TikTok" down a narrow gutter.

   Both blocks now run the full measure, stacked, and each account is a ROW:
   handle, what it is, where it goes. Three columns, one shared vertical for
   each — so the four notes line up with each other and the eight links line
   up with each other, and the section reads as an index instead of four
   loose paragraphs. It is also half the height it was.
   ------------------------------------------------------------------------- */

.social-strip__list > li {
  display: grid !important;
  grid-template-columns:
    minmax(0, 14rem)
    minmax(0, 1fr)
    auto !important;
  align-items: baseline !important;
  column-gap: clamp(20px, 3.4vw, 56px) !important;
}

.social-strip__list > li > strong {
  grid-column: 1 !important;
}

.social-strip__list > li > small {
  grid-column: 2 !important;
  /* The note sat under the handle when it was stacked; on a row it is a
     column of its own and needs no lead-in. */
  margin-top: 0 !important;
}

.social-strip__list .social-links {
  grid-column: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  margin-top: 0 !important;
}

.social-strip strong {
  display: block !important;
  color: var(--home-ink) !important;
  /* Was clamp(29px, 3.5vw, 44px). A 44px handle beside a 12px descriptor is a
     poster, not a list — this sits close enough to the supporting type to
     read as one quiet entry. */
  font-size: clamp(20px, 1.9vw, 26px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.03em !important;
}

/* OUT OF 9px TRACKED CAPS ------------------------------------------------- *
   The descriptor and the two links under each handle were 9px uppercase mono
   with 0.1em tracking. Against a 38px serif handle that is a jump of four
   steps with nothing in between, so the block read as a headline with legal
   text beneath it rather than as one entry. Both come down to plain sentence
   case at reading size, which is also what the markup already says — the
   uppercase was CSS shouting over "Vintage fashion" and "Instagram".

   The descriptor and the links are then told apart by what they are, not by
   size: the descriptor stays muted and unmarked, the links take the ink and
   an underline. Before, both were the same muted 9px caps and only their
   position said which was which.
   ------------------------------------------------------------------------- */

.social-strip small {
  display: block !important;
  margin-top: 6px !important;
}

.social-strip small,
.social-strip a {
  font: 400 12px / 1.45 var(--mono) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.social-strip small {
  color: var(--home-muted) !important;
}

.social-strip a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  color: var(--home-ink) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--home-line-strong) !important;
}

.social-strip a:hover,
.social-strip a:focus-visible {
  color: var(--home-signal) !important;
  text-decoration-color: currentColor !important;
}

/* Shops ------------------------------------------------------------------- *
   Where Selling On ended up. A belt of ten marketplace logos said less than
   the two shops that are actually his, and none of it was clickable.
   ------------------------------------------------------------------------- */

/* Full width and stacked under the accounts, not a second column. As a column
   it was three small marks beside four full entries, which is what left the
   right-hand half of this section empty. */
.social-strip__shops {
  display: block;
  min-width: 0;
  padding-left: 0;
  margin-top: var(--strip-block-gap);
}

/* The heading, list and entry spacing for this block are set with the
   accounts block in the shared system above. Nothing here may restate them. */

/* Overrides the 9px mono the strip gives every other link — these are the
   destination, not a footnote under a handle. Longhands, not the `font`
   shorthand: `inherit` is not a valid family inside it, so the shorthand
   parses as invalid and the whole declaration is dropped.

   --prose, not `inherit`: body is Plex Mono here, so inheriting gives a
   monospace shop name. The serif is what the account handles beside them are
   set in, and these two should read as the same kind of thing. */
/* THE MARKS ---------------------------------------------------------------- *
   Three shop names set as large serif text was not a design — it was the
   default rendering of a list with a font applied. These are brands people
   recognise by their logo before they read a word, so the logo is the
   content.

   The row is built on ONE optical height rather than a shared box. The three
   marks have wildly different aspect ratios — Depop is a circle, eBay a
   short wordmark, Grailed a long one — so matching their heights makes the
   circle tower over the wordmarks. Each is capped by height AND width and
   then centred in a fixed-height cell, which lines up their visual mass
   instead of their bounding boxes.
   ------------------------------------------------------------------------- */

/* `.social-strip__shops .shop-marks`, not `.shop-marks`. The shared list rule
   above is `.social-strip__shops ul` — one class plus an element — which
   outranks a lone class, so a bare `.shop-marks { display: flex }` lost to
   `display: block` and the three marks stacked in a column. Two classes wins
   it back. The same collision zeroes the shared entry margin below. */
/* All three on one line. The forced two-row wrap this used to describe was a
   workaround for the block being a narrow second column beside four full
   accounts; it runs the full measure now, so there is nothing to fill by
   stacking and the row reads as one gesture. `flex-wrap` is kept only as the
   escape hatch for a phone too narrow to fit three marks. */
.social-strip__shops .shop-marks {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  /* Room to breathe now that the block has the full measure rather than a
     cramped second column. */
  gap: 16px 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  /* Was capped at 260px to force a wrap when the marks were 112px. At this
     size all three sit on one line, which is the quieter reading. */
  max-width: none !important;
}

.social-strip__shops .shop-marks li,
.social-strip__shops .shop-marks li + li {
  margin: 0 !important;
  padding: 0 !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  /* Clears the 44px touch-target minimum with the mark sitting inside it. */
  height: 52px !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* All three marks are supplied square (48², 150², 105²), so one square cell
   sizes them honestly — no aspect-ratio juggling needed. Sized up again —
   three marks at any single-row size still left the column mostly empty
   beside four full accounts, so this size is paired with max-width above to
   force a wrap and fill the space in both directions. */
/* OPTICAL SIZING, MEASURED — NOT ONE SHARED BOX.
   All three files are square, so a single width/height looked like the fair
   way to set them. It is not: what the eye sees is the ink, and the ink fills
   a different fraction of each frame. Measured off the actual pixels:

     depop.png    ink fills 100% of its frame   (a circle, edge to edge)
     grailed.png  ink fills  71%                (a G with its own padding)
     ebay.svg     ink fills  40% of the height  (a wordmark, aspect 2.5)

   So at a shared 52px box the marks actually read as 52px, 37px and 21px —
   which is exactly why the G towered over the eBay wordmark.

   Each frame is now sized so the INK lands where it should: the two symbols
   at ~30px of ink, and the wordmark at ~20px of ink, which is the convention
   for mixing a symbol with a wordmark — the wordmark carries its mass
   sideways (50px wide) so it needs less height to balance. Frame = target
   ink ÷ measured fill. */

/* SIZED BY HEIGHT, NOT BY FRAME — the assets carry no margin any more.
   scripts/trim-shop-marks.cjs crops each source to its actual ink and knocks
   out white, so what ships IS the logo: Depop and Grailed are true squares
   and eBay is its real 2.5:1 wordmark rather than a wordmark padded into a
   square. That kills the whole per-mark frame arithmetic this used to need —
   one height now lands all three on the same cap height. */

.social-strip__shops .shop-marks img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

.social-strip__shops .shop-marks img.shop-mark--ebay {
  width: 40px !important;
  height: 16px !important;
  max-width: 40px !important;
  max-height: 16px !important;
}

/* THE GRAILED MARK HAS AN OPAQUE WHITE BACKGROUND.
   Depop and eBay ship with transparency; grailed.png does not, so it drew a
   white rectangle on the warm paper — the one thing in this block that
   looked like a mistake. It is the only Grailed asset in the repo, so this
   is fixed in CSS rather than by swapping the file.

   `multiply` is the right operator, not a filter or a knocked-out
   background: white multiplied against the paper resolves to exactly the
   paper, so the rectangle disappears, while the black wordmark multiplies to
   itself and is untouched. It stays scoped to this one mark — applying it to
   all three would tint the Depop red and the eBay colours against the
   ground. */
/* NO PER-MARK OVERRIDE FOR GRAILED ANY MORE. It used to need a bespoke frame
   size AND `mix-blend-mode: multiply` to hide the opaque white plate it
   shipped with. The trim script knocks that white out at build time, so the
   asset is transparent like the other two and the blend hack is gone. */

/* NO EBAY OVERRIDE ANY MORE. It was held at 50px because the mark shipped as
   the 2.5:1 wordmark, and a wordmark at a symbol's cap height reads oversized
   — it carries its mass sideways. eBay is now the square colour tile, so it is
   a symbol like the other two and the correction it was compensating for no
   longer exists; leaving it in would have rendered eBay two thirds the size of
   Depop and Grailed for no reason. All three now share the one 74px height. */

.social-strip .social-links a:hover::after,
.social-strip .social-links a:focus-visible::after,
.social-strip .dir-go:hover::after,
.chapters .social-strip__shops .shop-marks a:hover .dir-go::after,
.chapters .social-strip__shops .shop-marks a:focus-visible .dir-go::after {
  opacity: 0.85 !important;
}

/* The name-slide from the motion block applies to text links, not to a
   logo — the mark itself carries the hover. */
.social-strip__shops .shop-marks :is(a, .dir-row):hover,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible {
  transform: none !important;
}

/* Contact ---------------------------------------------------------------- */

#connect {
  padding-top: var(--sys-section-pad, 5rem) !important;
  padding-bottom: var(--sys-section-pad, 5rem) !important;
}

#connect .connect__block {
  display: block !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  justify-items: start !important;
}

#connect .connect__title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem) !important;
  padding: 0 !important;
  color: var(--home-ink) !important;
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: clamp(3.4rem, 1.4rem + 7vw, 6.75rem) !important;
  font-weight: 620 !important;
  font-variation-settings: "wdth" 94, "wght" 620 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.042em !important;
  text-transform: none !important;
  text-align: center !important;
}

#connect .connect__dek {
  max-width: 36rem !important;
  margin: 0 auto clamp(1.5rem, 2.4vw, 2.1rem) !important;
  color: var(--home-soft) !important;
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.72 !important;
  letter-spacing: 0.002em !important;
  text-align: center !important;
}

#connect .form {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 36rem !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#connect .field__input,
#connect .field__input--area {
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
  font-style: normal !important;
  color: var(--home-ink) !important;
}

#connect .field__input::placeholder,
#connect .field__input--area::placeholder {
  font-family: inherit !important;
  font-style: normal !important;
  color: var(--home-muted) !important;
}

#connect .field__input:focus,
#connect .field__input--area:focus {
  border-bottom-color: var(--home-ink) !important;
}

#connect .button {
  min-height: 44px !important;
  border-radius: 0 !important;
  background: var(--home-ink) !important;
  border-color: var(--home-ink) !important;
  color: var(--home-paper) !important;
}

#connect .button:hover,
#connect .button:focus-visible {
  background: var(--home-ink) !important;
  border-color: var(--home-ink) !important;
  color: var(--home-paper) !important;
}

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

.site-footer {
  --f-ink: rgba(246, 243, 237, 0.9);
  --f-mute: rgba(246, 243, 237, 0.42);
  --f-rule: rgba(246, 243, 237, 0.14);
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(40px, 5vw, 56px) var(--home-pad) 28px !important;
  border: 0 !important;
  color: var(--f-ink) !important;
  background: #17140f !important;
  background-image: none !important;
  box-shadow: none !important;
}

.site-footer__inner {
  box-sizing: border-box !important;
  display: block !important;
  width: min(100%, var(--home-measure)) !important;
  max-width: var(--home-measure) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
}

.site-footer a,
.site-footer p,
.site-footer nav,
.site-footer h3,
.site-footer time,
.site-footer span {
  min-height: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: none !important;
  text-transform: none !important;
}

.site-footer__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: start !important;
  gap: 0 !important;
  padding: 0 0 28px !important;
  border: 0 !important;
}

.site-footer__column {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45em !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer__column:last-child {
  align-items: flex-end !important;
  text-align: right !important;
}

.site-footer__heading {
  margin: 0 0 10px !important;
  color: var(--f-mute) !important;
  font: 500 10px / 1 var(--mono) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.site-footer__column a,
.site-footer__column p {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--f-ink) !important;
  font: 400 14px / 1.5 var(--mono) !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
}

.site-footer__column a:hover,
.site-footer__column a:focus-visible {
  color: #fff !important;
}

.site-footer__bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px 16px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--f-mute) !important;
  font: 400 11px / 1.4 var(--mono) !important;
  letter-spacing: 0.08em !important;
}

.site-footer__bottom p,
.site-footer__bottom time,
.site-footer__top {
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
  color: #fff !important;
}

@media (max-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .site-footer__column:last-child {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* The section headings carried a small symbol language here — "</>" on
   Building With, "@" on Socials, "↗" on Connect, all in the signal colour.
   Removed by decision. The headings are already 10px mono caps; the glyphs
   were decoration on top of a label that did not need it. */

@media (max-width: 720px) {
  #about {
    padding-top: max(3.25rem, env(safe-area-inset-top, 0px) + 2.25rem) !important;
    padding-inline: 0.4rem !important;
  }

  #about .chapter__inner {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  #about .about__title,
  #connect .connect__title {
    font-size: clamp(2.6rem, 12vw, 3.6rem) !important;
    margin-bottom: 1.35rem !important;
  }

  #about .about__statement .title__line--hero {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.12rem !important;
    width: 100% !important;
    max-width: 100% !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  #about .about__statement .title__stem {
    display: block !important;
    width: 100% !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke: 1.85px #000 !important;
    paint-order: fill stroke !important;
    font-size: clamp(2.4rem, 10.5vw, 3.15rem) !important;
    font-weight: 800 !important;
    font-variation-settings: "wdth" 96, "wght" 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-align: center !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
  }

  #about .about__statement .title__roll {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--roll-slot-h, 1.05em) !important;
    height: var(--roll-slot-h, 1.05em) !important;
    font-size: clamp(9.6rem, 52vw, 16rem) !important;
    line-height: 0.82 !important;
    margin-top: 0 !important;
    margin-inline: auto !important;
    margin-bottom: 1.15rem !important;
    overflow: visible !important;
  }

  #about .about__statement .title__roll-sizer {
    display: none !important;
  }

  #about .about__statement .title__roll-list {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: var(--roll-slot-h, 1.12em) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #about .about__statement .title__roll-list > *:not(.title__roll-probe) {
    position: absolute !important;
    top: var(--roll-y, 0px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    pointer-events: none !important;
    text-align: center !important;
  }

  #about .about__statement .title__roll-list > *.is-animating {
    opacity: unset !important;
    transform: unset !important;
    filter: none !important;
  }

  #about .about__statement .title__roll-list > .is-on:not(.is-animating) {
    opacity: 1 !important;
    z-index: 1 !important;
  }

  #about .about__statement .title__line--tagline,
  #about .about__statement .title__line--tagline .title__accent {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: baseline !important;
    width: auto !important;
    height: auto !important;
  }

  #about .about__statement .title__line--tagline {
    position: absolute !important;
    right: max(0px, calc((100% - var(--roll-slot-w, 70%)) / 2)) !important;
    top: calc(var(--roll-word-h, 1em) + 0.26rem) !important;
    bottom: auto !important;
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    transition: top 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: #8a8478 !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-variation-settings: "wdth" 78, "wght" 300 !important;
  }

  #about .title__accent {
    color: #8a8478 !important;
    font-weight: 300 !important;
  }

  #about .about__frame {
    padding: 0 !important;
    margin-top: 0 !important;
  }

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

  #about .about__signals {
    margin-top: 20px;
  }

  #about #building {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #building .building__layout {
    display: block !important;
  }

  #building .building__intro {
    margin: 0 !important;
  }

  /* These were left at the pre-shrink sizes when the desktop strip came down
     to 176/56/44, so the phone was still carrying the bigger version. */
  #building .stack-carousel,
  #building .stack-track {
    height: 132px !important;
  }

  #building .stack-carousel {
    width: 100% !important;
  }

  #building .stack-lanes,
  #building .stack-lanes--compact {
    height: 132px !important;
  }

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

  /* 33cqw, not 25 — a phone is narrow enough that four logos across makes
     each one too small to recognise. Three, larger, reads better. */
  #building .stack-row__set > li {
    flex-basis: 33cqw !important;
    width: 33cqw !important;
    height: 42px !important;
    padding: 2px !important;
  }

  #building .stack-row__set img,
  #building .stack-row__set li[data-ink="mono"] img {
    height: 34px !important;
    max-width: 96px !important;
    max-height: 34px !important;
  }

  .chapters > .social-strip {
    padding-top: 52px !important;
    padding-bottom: 66px !important;
  }

  /* The per-item padding-bottom that used to be restated here is gone — it
     was the second of the two spacing mechanisms, and on a phone it stacked
     with the shared margin to make the accounts sit further apart than the
     shops. Entry spacing comes only from --strip-entry-gap now. */

  /* One column on a phone — the shops fall under the accounts, and the gap
     is a margin on the block itself rather than a grid row-gap. See the
     row-gap: 0 note above for why the grid must not own this distance. */
  .social-strip__inner {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .social-strip__shops {
    min-width: 0;
    padding-left: 0;
    padding-top: 0;
    margin-top: var(--strip-block-gap) !important;
  }

  /* THE PHONE ROW ---------------------------------------------------------- *
     This block used to say `display: block` and stop — which reverted the
     entry to the three stacked lines it had before the desktop index was
     built, so on a phone nothing had changed at all. Reverting is not a
     mobile layout.

     A phone cannot hold three columns, but it can hold two. The handle and
     its links share the first line, pushed to opposite edges; the note sits
     under the handle on the second. Two lines per account instead of three,
     the links land on a shared right edge exactly as they do on desktop, and
     the structure is recognisably the same object at both sizes rather than
     a row on one and a pile on the other.
     ---------------------------------------------------------------------- */

  /* IDENTITY ON ONE LINE, ACTIONS ON THE NEXT.
     The links were right-aligned opposite the handle with the note dropped
     below-left, which on a narrow screen put a wide empty channel through the
     middle of every entry and left the links reading as a detached island
     rather than as part of the account above them.

     Grouped by kind instead: who it is (handle + what it posts) on line one,
     where it goes on line two. Everything is flush left, so the entries share
     one edge down the whole list and there is no ragged channel. */

  .social-strip__list > li {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: baseline !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
  }

  .social-strip__list > li > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .social-strip__list > li > small {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-top: 0 !important;
  }

  .social-strip__list .social-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
    gap: 18px !important;
  }

  /* The handle has to share its line now, so it comes down a step. At 20px
     "@treasuresphx" plus two links did not clear 360px. */
  .social-strip strong {
    font-size: 17px !important;
  }

  .social-strip small,
  .social-strip a {
    font-size: 11px !important;
  }

  /* Was an 18px indent to clear the vertical rule. The rule is gone, so the
     indent is just a phone-only misalignment against everything above it. */
  .social-strip__list {
    padding-left: 0 !important;
  }

  /* REMOVED: `.social-strip strong, .social-strip__shops a { font-size:
     clamp(28px, 9vw, 38px) }`.

     Two things had gone stale. It set the phone handle to 37.8px, which is
     what was silently beating the 17px above and blowing each account row out
     to 66px — the handle alone was 39px tall, so it could never share a line
     with its links. And `.social-strip__shops a` holds a logo now, not a
     word, so sizing it by font-size did nothing at all.

     The handle size for this breakpoint is set once, in the phone row block
     above, next to the layout that depends on it. */

  #connect,
  .chapters > #connect {
    padding-bottom: 0 !important;
  }

  #connect .connect__block {
    display: block !important;
    padding-top: 0 !important;
  }

  #connect .form {
    margin-top: 1.5rem !important;
    padding: 0 !important;
  }

  .site-footer {
    padding: 24px var(--home-pad) 18px !important;
  }

}


/* ==========================================================================
   MOTION

   One easing curve and three durations for the entire page. Every hover,
   focus and press below reads from these, so the site moves like one object
   rather than like a dozen components that each picked their own timing.

   The curve leaves fast and settles slow, which is what makes a 220ms move
   feel responsive rather than floaty. Nothing here animates layout — only
   `transform`, `opacity` and colour, all of which the compositor can handle
   without reflowing the page on every frame.

   Distances are deliberately small. A 3px lift and a 4px slide are felt more
   than seen, and at this scale they read as the page being solid and
   responsive; anything larger on a page this quiet reads as a gimmick.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 0.68, 0.28, 1);
  --t-fast: 130ms;
  --t-base: 220ms;
  --t-slow: 420ms;
}

/* Links ------------------------------------------------------------------- */

.social-strip a,
.site-footer a,
.social-strip__shops a {
  transition:
    color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    text-decoration-color var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out) !important;
}

/* The shop and social names slide toward the reader on hover. `translateX`
   on an inline-flex link moves nothing around it, so the list holds still
   while the item under the cursor steps forward. */
.social-strip__shops a:hover,
.social-strip__shops a:focus-visible {
  transform: translateX(6px) !important;
}

.social-strip__list a:hover,
.social-strip__list a:focus-visible {
  transform: translateX(3px) !important;
}

.site-footer__bar a:hover,
.site-footer__bar a:focus-visible {
  transform: none !important;
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
  transform: translateY(-2px) !important;
}

/* Buttons and fields ------------------------------------------------------ */

#connect .button {
  transition:
    transform var(--t-fast) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out) !important;
}

#connect .button:hover,
#connect .button:focus-visible {
  transform: none !important;
  box-shadow: none !important;
}

/* Pressed state returns to rest, so the button feels like it takes the
   click rather than ignoring it. */
#connect .button:active {
  transform: translateY(0) !important;
  transition-duration: var(--t-fast) !important;
}

#connect .form input,
#connect .form textarea {
  transition:
    border-color var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease-out) !important;
}

/* Focus ------------------------------------------------------------------- */

/* Focus rings do not fade in. A keyboard user needs to know instantly where
   they are, and a 220ms ring is a 220ms delay in answering that. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--home-signal);
  outline-offset: 3px;
  transition: none !important;
}

/* ==========================================================================
   NO REDUCED-MOTION GATING. ANYWHERE. EVER.

   Motion on this site is unconditional, by direct and repeated instruction.
   Do not add `@media (prefers-reduced-motion: ...)` to this file or any
   other, in either direction — a `reduce` block silences motion and a
   `no-preference` block is the same switch worn backwards, since anything
   inside it never runs for someone whose OS reports the preference.

   The reason this keeps happening: the preference is ON by default on a
   great many Windows installs, including this one. So the gate reads as
   harmless while writing it and then removes the feature for the person who
   asked for it. Five separate blocks across four stylesheets had quietly
   accumulated that way — killing the scroll reveals, halving the logo belt
   to 84s, stopping the belt outright, dropping smooth scroll and the nav
   transitions, and holding the handoff pulse behind `no-preference` so it
   never played. All are removed.
   ========================================================================== */


/* ==========================================================================
   THE GRID

   Everything below this line answers one criticism: the content was placed
   on the page rather than positioned by a system. Each block had invented
   its own margins, its own label size and its own idea of alignment, so the
   eye had no repeating structure to lock onto and read the whole screen as
   scattered — even though every individual piece was tidy.

   There is now one set of distances, declared once, and all three blocks
   read from it. Changing the rhythm of the page means changing a number
   here, not hunting through six rules.
   ========================================================================== */

.chapters {
  /* The measure was 62rem, so on a 1266px screen the content stopped at
     x=1122 and the last ~130px sat empty on both sides. The prose keeps its
     own narrower cap (chapter-rhythm pins .about__lead and .about__frame to
     62rem), so widening here widens the STRUCTURED blocks — the logo wall,
     the directory, the shops — without turning body text into a 1200px
     line, which would be unreadable. */
  --sys-max: 80rem;
  /* Opened up from 26px. The label is meant to name a block and then recede,
     and the space beneath it is what sells the separation once the colour has
     gone as light as AA allows. */
  --sys-label-gap: 20px;
  --sys-mark: 32px;
  --sys-row-gap: 24px;
  --sys-rule: rgba(23, 20, 15, 0.13);
  --sys-rule-strong: rgba(23, 20, 15, 0.2);
}

/* EVERY SECTION'S CONTENT ON ONE MEASURE. Connect was the odd one out: its
   inner was capped at 992px while About and Socials ran to 80rem, so on a
   desktop its heading began 60px inboard of every other heading on the page
   and the whole block looked indented for no reason. Same cap, same centring,
   one left edge down the page. */
#about .about__inner,
#about .chapter__inner,
#connect .chapter__inner,
#connect .connect__block,
.social-strip__inner,
#building .building__layout {
  width: min(100%, var(--sys-max)) !important;
  max-width: var(--sys-max) !important;
  margin-inline: auto !important;
}

/* THE SECTION LABEL — one mark, every block.
   Same type, same colour, same gap to the content it names. Mixed into the
   paper so they read as part of the ground rather than as titles. */

#building .building__title,
.social-strip h2,
.social-strip__shops h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 0 var(--sys-label-gap) !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  color: color-mix(in srgb, var(--home-ink) 34%, var(--home-paper)) !important;
  font: 400 11px / 1 var(--mono) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}


/* ==========================================================================
   THE LOGO WALL

   Was three belts scrolling at unrelated phases. That is the source of the
   "scattered" reading: at any instant every logo sat at a different offset,
   nothing shared a baseline, and the marks that happened to be wide or dark
   dominated whatever was beside them. Motion cannot fix that, because the
   arrangement is different in every frame.

   It is a fixed wall now — see the note in index.html for how the marquee
   was switched off. Ten identical cells across, five rows, every mark
   optically normalised into the same box.

   The monochrome default is what makes fifty logos read as one field
   instead of fifty competing brands. Colour returns on hover, one mark at a
   time, which is also the only place colour carries information.
   ========================================================================== */

/* ==========================================================================
   ONE VERTICAL RHYTHM FOR EVERY SECTION

   Each block had arrived at its own spacing over time, and none of them
   agreed. Measured on a phone before this rule:

     About        94.6px top,   0px bottom
     Socials        52px top,  66px bottom
     Building With  83.9px top, 46.6px bottom
     Connect           0px top, 103.2px bottom

   Which meant the gap between one section's content and the next ran 72px,
   then 150px, then 47px — the reason the page reads as a stack of unrelated
   panels rather than one document. Nothing was wrong with any single number;
   the problem was that four blocks each decided independently.

   One token, applied to all four. The gap between any two sections is now
   exactly twice it, everywhere, by construction rather than by matching
   numbers up by hand.
   ========================================================================== */

.chapters {
  --sys-section-pad: clamp(58px, 9svh, 104px);
}

/* `.chapters >` on every one of them, not a bare class. The phone block sets
   `.chapters > .social-strip` padding with !important, and against a lone
   `.social-strip` that wins on specificity — so Socials alone kept its old
   52/66 and the rhythm was still broken in one place. Matching the shape of
   the rule it has to beat is what makes this hold. */
.chapters > #about,
.chapters > .social-strip,
.chapters > #building,
.chapters > #connect,
#about,
#building {
  padding-top: var(--sys-section-pad) !important;
  padding-bottom: var(--sys-section-pad) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.chapters > #connect,
#connect {
  padding-bottom: 0 !important;
}

@media (max-width: 720px) {
  .chapters > #connect,
  #connect {
    padding-bottom: 0 !important;
  }
}

/* Socials, Shops and Building With are one directory. The shared section pad
   stacked under Shops AND over Building With, so that header floated twice
   as far from its neighbours as Shops sits from Socials. */
.chapters > .social-strip {
  padding-bottom: clamp(28px, 4vw, 40px) !important;
}

.chapters > #building,
#building {
  padding-top: clamp(28px, 4vw, 40px) !important;
}

/* Same shell as Socials and Connect: full-bleed section, gutter on the
   section, measure on the inner. Capping #building itself AND padding it
   indented the header (and the wall) by one extra --home-pad. */
#building {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: var(--home-pad) !important;
}

#building .stack-carousel,
#building .stack-track {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  container-type: normal !important;
}

#building .stack-grid {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;

  /* ROW SIZING HAS TO BE STATED, BOTH PROPERTIES.
     This grid predates the wall, and the old rules are still live: chapters.css
     sets `grid-auto-rows` to 120px/106px/94px at three phone breakpoints and
     chapter-rhythm.css pins `grid-template-rows: repeat(3, minmax(0,1fr))`.
     Declaring only the columns left both in force, so the computed rows came
     out `46px 46px 46px 94px 94px …` — the first three from the old template,
     everything after from the old auto-rows — and the wall stood 805px tall on
     a phone with each 46px cell floating in a 94px band. That is the same
     "logos at random heights" complaint, arriving through the row axis.

     `grid-template-rows: none` drops the inherited template; `grid-auto-rows`
     then sets every row, and the cell fills it. */
  grid-template-rows: none !important;
  grid-auto-rows: 70px !important;
  grid-auto-flow: row !important;
  animation: none !important;
  transform: none !important;

  /* THE GRID ITSELF HAS NO GROUND. A legacy sheet paints it
     `rgba(23,20,15,0.24)` with a drop shadow; with a 2px gap that dark field
     showed between every cell, which is what turned fifty transparent logos
     into fifty grey tiles. The gap opens up too — the cells were only
     distinguishable because of the ground behind them. */
  background: none !important;
  box-shadow: none !important;
  gap: clamp(6px, 1.4vw, 14px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* NO CONTAINERS. The cell is an invisible measuring box and nothing else —
   no ground, no border, no radius. It exists only so every mark is normalised
   into the same space regardless of its own proportions, which is what stops
   a wide wordmark or a heavy glyph bullying its neighbours. */
#building .stack-grid > li {
  display: grid !important;
  place-items: center !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#building .stack-grid > li img,
#building .stack-grid > li[data-ink="mono"] img {
  display: block !important;
  width: var(--sys-mark, 32px) !important;
  height: var(--sys-mark, 32px) !important;
  max-width: var(--sys-mark, 32px) !important;
  max-height: var(--sys-mark, 32px) !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 0.88 !important;
  transition: transform var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out) !important;
}

#building .stack-grid > li:hover img,
#building .stack-grid > li:focus-within img {
  transform: scale(1.08) !important;
  opacity: 1 !important;
}


/* ==========================================================================
   THE DIRECTORY

   Four accounts that were technically in columns but read as disconnected,
   because the only thing joining a handle to its links was empty space — and
   at this measure that is a very long way to travel with nothing to follow.

   A rule under each row is what turns three cells into one object. The row
   also lights on hover, so the whole line reads as a single target rather
   than as two text links floating at the far end of it.
   ========================================================================== */

.social-strip__list > li,
.social-strip__list > li + li {
  display: grid !important;
  grid-template-columns:
    minmax(0, 15rem)
    minmax(0, 1fr)
    auto !important;
  align-items: center !important;
  column-gap: clamp(20px, 2.6vw, 40px) !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border: 0 !important;
}

.social-strip__list > li:hover,
.social-strip__shops .shop-marks li:hover {
  background: transparent !important;
}

/* TYPOGRAPHY, PULLED BACK INTO A HIERARCHY.
   The handle was the loudest thing on the page at 24px+ while the line that
   says what the account actually IS was a faint 12px grey — the volume was
   inverted against the meaning. The handle comes down, the description comes
   up in weight and colour, and the links join the description's size and
   family so the row carries two type personalities instead of four. */

.social-strip__list > li > strong {
  grid-column: 1 !important;
  font-size: clamp(20px, 1.6vw, 23px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.social-strip__list > li > small {
  grid-column: 2 !important;
  margin: 0 !important;
  /* Was --home-muted, which at 12px on paper was close to disappearing and
     made the page look unfinished rather than restrained. */
  color: var(--home-soft) !important;
  font-size: 13px !important;
}

.social-strip__list .social-links {
  grid-column: 3 !important;
  gap: 22px !important;
  margin: 0 !important;
}

/* Designed, not browser-default. A standing underline on eight links was
   most of the visual noise in this block; the affordance is carried by the
   row lighting up and the underline arriving under the cursor. */
.social-strip a {
  min-height: 0 !important;
  padding: 3px 0 !important;
  color: var(--home-ink) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition:
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out) !important;
}

/* THE WORDS ARE MARKS NOW. "Instagram" and "TikTok" were set eight times down
   this column in the same grey as everything else; the brand marks say the
   same thing in a glance and give the block its only colour.

   No underline, and no border to animate: the hover affordance is the mark
   coming up to full opacity, which is what an icon can do and a word cannot.
   The <a> keeps a 32px box so the tap target stays legal at a 22px mark. */
.social-strip .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  transition: opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out) !important;
}

.social-strip .social-links img {
  display: block !important;
  width: var(--sys-mark) !important;
  height: var(--sys-mark) !important;
  opacity: 0.88 !important;
}

.social-strip .social-links a:hover img,
.social-strip .social-links a:focus-visible img {
  opacity: 1 !important;
}

.social-strip .social-links a:hover,
.social-strip .social-links a:focus-visible {
  transform: translateY(-2px) !important;
}

.social-strip a:hover,
.social-strip a:focus-visible {
  color: var(--home-signal) !important;
  border-bottom-color: var(--home-signal) !important;
}


/* ==========================================================================
   THE SHOPS

   Three small logos in the bottom-left corner with the rest of the row empty
   read as missing content. They are destinations, so they are set as
   destinations: an even third of the measure each, the mark, the name, and
   what is actually there when you arrive.
   ========================================================================== */

.social-strip__shops .shop-marks {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0 clamp(20px, 2.6vw, 40px) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.social-strip__shops .shop-marks li,
.social-strip__shops .shop-marks li + li {
  margin: 0 !important;
  padding: 0 !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row) {
  display: grid !important;
  grid-template-columns: var(--sys-mark) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  align-items: center !important;
  justify-items: start !important;
  height: auto !important;
  padding: 14px 0 !important;
  border-top: 0 !important;
  text-decoration: none !important;
  transition: background-color var(--t-base) var(--ease-out) !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row) > img {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  justify-self: end !important;
  align-self: center !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row):hover,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible {
  border-top-color: transparent !important;
}

.social-strip__shops .shop-marks b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: var(--home-ink) !important;
  font-family: var(--prose) !important;
  font-size: clamp(20px, 1.6vw, 23px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.social-strip__shops .shop-marks span:not(.dir-go) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 7px !important;
  color: var(--home-soft) !important;
  font: 400 13px / 1.3 var(--mono) !important;
}

.social-strip__shops .shop-marks i {
  font-style: normal !important;
  transition: transform var(--t-base) var(--ease-out) !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row):hover i,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible i {
  transform: translateX(5px) !important;
}


/* The About panel above this screen is a 900px box with a 1px border and a
   tinted ground. Scrolled to, only its lower edge is on screen, which reads
   as a container clipping out of the viewport rather than as a frame. The
   prose does not need a box; the measure already holds it. */

#about .about__frame {
  border: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
}


/* --- Tablet ------------------------------------------------------------- */

@media (max-width: 1100px) {
  #building .stack-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {
  #building .stack-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }

  .social-strip__list > li,
  .social-strip__list > li + li {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto !important;
  }
}


/* --- Phone -------------------------------------------------------------- */

@media (max-width: 720px) {
  /* Five across still normalises the marks; the cell simply gets smaller. */
  /* SIX ACROSS, NOT FIVE. Inside the section's proper 378px measure, five
     columns gave each mark a 72px cell to sit in — the marks were not spread
     out by the gap, they were adrift in oversized cells. Six tighter columns
     with a bigger logo in each is what closes that up. */
  #building .stack-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    /* Restated for the same reason as the desktop rule above — chapters.css
       overrides auto-rows again at 720/520/390px. */
    grid-template-rows: none !important;
    grid-auto-rows: 52px !important;
    gap: 5px !important;
    row-gap: 5px !important;
  }

  #building .stack-grid > li {
    height: 100% !important;
    padding: 3px !important;
  }

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

  /* The directory keeps its rules and its rhythm; only the columns fold.
     Handle and note share line one, links sit beneath — the row is still one
     bordered object, which is what stops it reverting to a loose stack. */
  .social-strip__list > li,
  .social-strip__list > li + li {
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
    padding: 14px 0 !important;
  }

  .social-strip__list > li > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
    /* Restated here or the desktop bump never reaches a phone — this block
       set 17px with !important and was silently winning. */
    font-size: 20px !important;
  }

  .social-strip__list > li > small {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 12px !important;
  }

  .social-strip__list .social-links {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-start !important;
    gap: 20px !important;
  }

  .social-strip a {
    font-size: 12px !important;
    padding: 5px 0 !important;
  }

  /* One shop per line. The rule that used to sit on top of each card is gone
     with the rest of the hairlines; the mark and the spacing hold the set
     together on their own. */
  .social-strip__list,
  .social-strip__shops .shop-marks {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* A FIXED MARK COLUMN, NOT `auto`. The three logos are deliberately
     different widths — they are normalised by measured ink, so Depop is 42px,
     Grailed 59px and the eBay wordmark 70px. With an `auto` column each card
     sized that track to its own logo, so the three names began at three
     different x positions. One fixed column wide enough for the widest mark
     puts every name and caption on a shared vertical. */
  .social-strip__shops .shop-marks :is(a, .dir-row) {
    /* Name + note on the left, mark pinned to the far right. */
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-items: start !important;
    column-gap: 18px !important;
    row-gap: 3px !important;
    padding: 14px 0 16px !important;
    border-top: 0 !important;
  }

  .social-strip__shops .shop-marks img {
    justify-self: end !important;
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }

  .social-strip__shops .shop-marks b {
    align-self: end !important;
  }
}

/* ==========================================================================
   ONE SHELL — About, Socials, Building with, Connect
   ---------------------------------------------------------------------------
   These four blocks had drifted onto three different measures (62rem, 80rem,
   and a padded card inside About) and two different gutters. One cap, one
   pad, one left edge.
   ========================================================================== */

#about,
.chapters > .social-strip,
#building,
#connect {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--home-pad) !important;
}

#about .chapter__inner,
.social-strip__inner,
#building .building__layout,
#connect .chapter__inner,
#connect .connect__block {
  box-sizing: border-box !important;
  width: min(100%, var(--home-measure)) !important;
  max-width: var(--home-measure) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

#about .about__lead,
#about .about__frame,
#about .about__body,
#building .stack-carousel,
#building .stack-track,
#building .stack-grid {
  width: 100% !important;
  max-width: none !important;
}

/* CONTENT FILLS THE SHELL. The inners were the same cap, but Socials was
   still locked to 48rem, Shops sized to its three logos, and Building With
   ran the full 80rem — three different right edges. Every row now spans the
   measure, so the labels, the lists and the wall share one rectangle. */

.social-strip__list,
.social-strip__shops,
.social-strip__shops .shop-marks,
#building .building__intro,
#building .building__title {
  width: 100% !important;
  max-width: none !important;
}

.social-strip__list > li,
.social-strip__list > li + li {
  width: 100% !important;
  grid-template-columns:
    minmax(10rem, 0.28fr)
    minmax(0, 1fr)
    auto !important;
}

/* ONE GRID FOR ALL FOUR DIRECTORIES.
   Ventures, Projects and Shops sat on this three-column grid while Socials
   rendered as a single full-measure column — four sibling directories, three
   behaving one way. Adding the list to this selector rather than giving it a
   matching rule of its own is deliberate: a copy is a second set of numbers
   to keep in sync, and this is exactly the kind of near-duplicate that drifts.
   Change the columns here and every directory moves together. */
.social-strip__list,
.social-strip__shops .shop-marks {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
}

.social-strip__shops .shop-marks li,
.social-strip__shops .shop-marks :is(a, .dir-row) {
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 720px) {
  .social-strip__list > li,
  .social-strip__list > li + li {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  /* The list belongs here too. There is a second, identical-looking phone
     override further up this file, but it sits BEFORE the unconditional
     three-column rule and therefore loses on source order — adding Socials
     to that one left it three-up on a phone. This is the copy that wins. */
  .social-strip__list,
  .social-strip__shops .shop-marks {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   DIRECTORY — Socials, Shops, Ventures, Projects
   ---------------------------------------------------------------------------
   Same three columns, no ruled ledger. Space and type do the grouping.
   ========================================================================== */

.chapters {
  --dir-name: 16.5rem;
  --dir-note: 28rem;
  --dir-gap: 1.35rem;
  --dir-mark: 22px;
}

.social-strip__inner > .social-strip__shops:first-child {
  margin-top: 0 !important;
}

.social-strip h2,
.social-strip__shops h3,
#building .building__title {
  display: block !important;
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  color: color-mix(in srgb, var(--home-ink) 30%, var(--home-paper)) !important;
  font: 500 11px / 1 var(--mono) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

.social-strip__inner > h2 {
  margin-top: clamp(36px, 4.5vw, 52px) !important;
}

.social-strip__shops {
  margin-top: clamp(36px, 4.5vw, 52px) !important;
}

/* SHARED RESETS ONLY — NOT `display`.
   This rule used to set `display: block !important` for both selectors. It
   was written for the Socials list, but `.shop-marks` rode along in the
   same selector and lost the three-column grid three earlier rules had
   given it: the directory still carried
   `grid-template-columns: repeat(3, minmax(0, 1fr))`, inert, because a
   block box ignores it. That is why Ventures and Projects rendered as one
   ~260px column with every description wrapping to three lines while most
   of the page width sat empty.

   The box resets below are right for both, so they stay shared; only
   `display` is split out to the list that actually wants it. */
.social-strip__list,
.social-strip__shops .shop-marks {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The .social-strip__list display:block rule was removed — it is a grid now, with
   the other three directories, via the shared rule further down. */

.social-strip__list > li,
.social-strip__list > li + li,
.social-strip__shops .shop-marks li,
.social-strip__shops .shop-marks li + li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.social-strip__list > li,
.social-strip__list > li + li,
.social-strip__shops .shop-marks :is(a, .dir-row) {
  display: grid !important;
  grid-template-columns: var(--dir-name) var(--dir-note) auto !important;
  justify-content: start !important;
  align-items: baseline !important;
  column-gap: var(--dir-gap) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 7px 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
}

.social-strip__list > li:hover,
.social-strip__shops .shop-marks li:hover,
.social-strip__shops .shop-marks :is(a, .dir-row):hover,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible {
  background: transparent !important;
}

.social-strip__list > li > strong,
.social-strip__shops .shop-marks :is(a, .dir-row) > strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
  min-width: 0 !important;
  color: var(--home-ink) !important;
  font-family: var(--t-sans, var(--display)) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

.social-strip__list > li > small {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 !important;
  color: var(--home-soft) !important;
  font: 400 13px / 1.35 var(--mono) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.chapters .social-strip__shops .shop-marks a > small:not(.dir-status) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 !important;
  color: var(--home-soft) !important;
  font: 400 13px / 1.35 var(--mono) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding-left: 0 !important;
  text-align: left !important;
  justify-self: start !important;
  white-space: nowrap !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row) > .dir-status,
#work-ventures .dir-row > .dir-status,
#projects .dir-row > .dir-status,
.social-strip .dir-status {
  box-sizing: border-box !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: #c9a227 !important;
}

#work-ventures .dir-row > .dir-status[data-status="active"],
#projects .dir-row > .dir-status[data-status="active"] {
  background: #2d8a4e !important;
}

#work-ventures .dir-row > .dir-status[data-status="archived"],
#projects .dir-row > .dir-status[data-status="archived"] {
  background: #c0392b !important;
}

#work-ventures .dir-row > .dir-status[data-status="wip"],
#projects .dir-row > .dir-status[data-status="wip"] {
  background: #c9a227 !important;
}

.social-strip__list .social-links,
.social-strip__shops .shop-marks :is(a, .dir-row) > i {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.social-strip__list .social-links {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  margin: 0 !important;
}

.social-strip .social-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  color: var(--home-ink) !important;
  text-decoration: none !important;
}

.social-strip .social-links img {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  flex: none !important;
}

.social-strip .social-links a::after,
.social-strip .dir-go::after {
  content: "↗" !important;
  display: inline-block !important;
  margin-left: 0.18em !important;
  color: #14120f !important;
  font-family: "Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  opacity: 0.42 !important;
  transform: translateY(-0.12em) !important;
}

.social-strip .dir-go {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.chapters .social-strip__shops .shop-marks .dir-go img,
.chapters .social-strip__shops .shop-marks a > .dir-go img {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  flex: none !important;
}

.chapters .social-strip__shops .shop-marks .dir-go img.shop-mark--ebay,
.chapters .social-strip__shops .shop-marks a > .dir-go img.shop-mark--ebay {
  width: 40px !important;
  height: 16px !important;
  max-width: 40px !important;
  max-height: 16px !important;
}

.chapters .social-strip__shops .shop-marks a {
  grid-template-columns: var(--dir-name) var(--dir-note) auto !important;
  grid-template-rows: auto !important;
  align-items: baseline !important;
}

.chapters .social-strip__shops .shop-marks a > strong {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.chapters .social-strip__shops .shop-marks a > .dir-go {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
}

.social-strip__shops .shop-marks .dir-row {
  cursor: default !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row) > i {
  color: var(--home-muted) !important;
  font: 400 15px / 1 var(--mono) !important;
  font-style: normal !important;
  transition: transform 180ms var(--ease-out), color 180ms linear !important;
}

.social-strip__list > li:hover > strong,
.social-strip__shops .shop-marks :is(a, .dir-row):hover > strong,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible > strong {
  color: var(--home-signal) !important;
}

.social-strip .social-links a:hover,
.social-strip .social-links a:focus-visible {
  transform: none !important;
}

.social-strip .social-links a:hover img,
.social-strip .social-links a:focus-visible img,
.social-strip__shops .shop-marks :is(a, .dir-row):hover img,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible img {
  opacity: 1 !important;
  transform: none !important;
}

.social-strip__shops .shop-marks :is(a, .dir-row):hover > i,
.social-strip__shops .shop-marks :is(a, .dir-row):focus-visible > i {
  color: var(--home-signal) !important;
  transform: translateX(3px) !important;
}

.social-strip a:hover,
.social-strip a:focus-visible {
  color: inherit !important;
  border-bottom-color: transparent !important;
  text-decoration: none !important;
}

#building .building__intro {
  width: 100% !important;
  margin: 0 0 0 !important;
}

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

@media (max-width: 720px) {
  .chapters {
    --dir-name: minmax(0, 1fr);
  }

  .social-strip__list > li,
  .social-strip__list > li + li,
  .social-strip__shops .shop-marks :is(a, .dir-row) {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    padding: 8px 0 !important;
    min-height: 0 !important;
    border: 0 !important;
  }

  .social-strip__list > li > strong,
  .social-strip__shops .shop-marks :is(a, .dir-row) > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .social-strip__list > li > small,
  .social-strip__shops .shop-marks :is(a, .dir-row) > small {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .social-strip__list .social-links,
  .social-strip__shops .shop-marks :is(a, .dir-row) > i,
  .chapters .social-strip__shops .shop-marks a > .dir-go {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
  }
}

/* ==========================================================================
   COHESION — lower page
   ---------------------------------------------------------------------------
   Same paper, same measure, same distances. Connect was sitting in a
   300px hole; Building With's label had no gap; an empty About slot was
   still paying margin. These rules only even that out.
   ========================================================================== */

#about .about__signals {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#about .about__body p:last-child {
  margin-bottom: 0 !important;
}

.social-strip h2,
.social-strip__shops h3,
#building .building__title {
  margin: 0 0 16px !important;
}

.social-strip__inner > h2,
.social-strip__shops {
  margin-top: clamp(40px, 5vw, 56px) !important;
}

.social-strip__inner > .social-strip__shops:first-child {
  margin-top: 0 !important;
}

.social-strip__list > li,
.social-strip__list > li + li,
.social-strip__shops .shop-marks :is(a, .dir-row) {
  padding: 9px 0 !important;
}

.social-strip .dir-status {
  margin-left: 0 !important;
  white-space: nowrap !important;
}

#work-ventures .dir-row,
#projects .dir-row {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: var(--dir-name) var(--dir-note) auto !important;
  column-gap: var(--dir-gap) !important;
  justify-content: start !important;
}

#work-ventures .dir-row > small:not(.dir-status),
#projects .dir-row > small:not(.dir-status) {
  grid-column: 2 !important;
}

#work-ventures .dir-row > .dir-status,
#projects .dir-row > .dir-status {
  grid-column: 3 !important;
  justify-self: start !important;
  align-self: center !important;
  margin-left: 0 !important;
}

@media (max-width: 720px) {
  #work-ventures .dir-row,
  #projects .dir-row {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    row-gap: 0 !important;
  }

  #work-ventures .dir-row > strong,
  #projects .dir-row > strong {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    line-height: 1.15 !important;
  }

  #work-ventures .dir-row > small:not(.dir-status),
  #projects .dir-row > small:not(.dir-status) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-left: 0 !important;
    margin-top: -2px !important;
    line-height: 1.2 !important;
    text-align: left !important;
    justify-self: start !important;
  }

  #work-ventures .dir-row > .dir-status,
  #projects .dir-row > .dir-status {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: end !important;
  }
}

#building .building__intro {
  margin: 0 0 16px !important;
}

.chapters > #connect,
#connect {
  padding-top: var(--sys-section-pad) !important;
  padding-bottom: var(--sys-section-pad) !important;
}

#connect .connect__block {
  padding-top: 0 !important;
  row-gap: clamp(0.7rem, 1.4vh, 1.1rem) !important;
}

#connect .connect__dek {
  color: var(--home-soft) !important;
  font-size: clamp(15px, 1.05vw, 17px) !important;
}

#connect .form {
  margin-top: 0 !important;
}

.site-footer {
  padding: clamp(40px, 5vw, 56px) var(--home-pad) 28px !important;
}

@media (max-width: 720px) {
  .chapters > #connect,
  #connect {
    padding-top: clamp(2.1rem, 4.5vw, 3.25rem) !important;
    padding-bottom: 0 !important;
  }

  .chapters > #building,
  #building {
    padding-bottom: 3.25rem !important;
  }

  #connect .connect__block {
    padding-top: 0 !important;
  }

  #about .about__frame {
    padding: 0 !important;
  }
}

.social-strip__shops .shop-marks :is(a, .dir-row) > i {
  display: none !important;
}

@media (min-width: 721px) {
  .social-strip__list > li,
  .social-strip__list > li + li,
  .social-strip__shops .shop-marks :is(a, .dir-row) {
    width: 100% !important;
    grid-template-columns: var(--dir-name) var(--dir-note) auto !important;
    column-gap: var(--dir-gap) !important;
    justify-content: start !important;
  }

  .social-strip__shops .shop-marks a {
    grid-template-columns: var(--dir-name) var(--dir-note) auto !important;
  }

  .social-strip__list > li > strong {
    grid-column: 1 !important;
  }

  .social-strip__list > li > small {
    grid-column: 2 !important;
  }

  .social-strip__list .social-links {
    grid-column: 3 !important;
    justify-self: start !important;
    margin-left: 0 !important;
  }

  .chapters .social-strip__shops .shop-marks a {
    grid-template-columns: var(--dir-name) var(--dir-note) auto !important;
    grid-template-rows: auto !important;
  }

  .chapters .social-strip__shops .shop-marks a > small:not(.dir-status) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    text-align: left !important;
    justify-self: start !important;
    white-space: nowrap !important;
  }

  .chapters .social-strip__shops .shop-marks a > .dir-go {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 720px) {
  .social-strip__list,
  .social-strip__shops,
  .social-strip__shops .shop-marks {
    width: 100% !important;
    max-width: none !important;
  }

  .social-strip__list > li,
  .social-strip__list > li + li {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    justify-content: stretch !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
  }

  .social-strip__list > li > small {
    margin-top: -2px !important;
    line-height: 1.2 !important;
  }

  .social-strip__shops .shop-marks :is(a, .dir-row) {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    justify-content: stretch !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    height: auto !important;
    padding: 10px 0 !important;
  }

  .social-strip__list > li > strong {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  .social-strip__list > li > small {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .social-strip__list .social-links {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .chapters .social-strip__shops .shop-marks a {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
  }

  .chapters .social-strip__shops .shop-marks a > strong {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .chapters .social-strip__shops .shop-marks a > small:not(.dir-status) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding-left: 0 !important;
    margin-top: -2px !important;
    line-height: 1.2 !important;
  }

  .chapters .social-strip__shops .shop-marks a > .dir-go {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .social-strip__shops .shop-marks .dir-row > small:not(.dir-status) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-top: -2px !important;
    line-height: 1.2 !important;
    padding-left: 0 !important;
  }
}

html {
  scroll-padding-top: 0 !important;
}

.chapters > [data-panel],
#about,
#connect,
.chapters > .social-strip {
  scroll-margin-top: 0 !important;
}


/* ==========================================================================
   ONE RHYTHM FOR THE FOUR DIRECTORIES + BUILDING WITH

   Ventures, Projects, Shops and Socials sat on a 38px rhythm. Building With —
   which belongs to the same group, and whose own comment further up this file
   says so — sat on 80px: 40px of padding under the strip plus 40px of its own
   padding-top. More than double its siblings, and the gap everyone could see.

   The 38px was not written anywhere as 38px. Several rules claim this spacing
   (--strip-block-gap resolves to 48, two later rules claim 52 and 56) and the
   one that actually won produced 38 — which is exactly the problem with
   matching numbers by hand across a file this long.

   So the value is declared ONCE here and every block reads it. The four
   directories and Building With are now equal by construction: change this
   token and all five move together. Anything that needs to differ from its
   siblings should say so explicitly rather than by out-living another rule.
   ========================================================================== */

.chapters {
  --dir-rhythm: clamp(30px, 3vw, 44px);
}

.social-strip__inner > h2,
.social-strip__inner > aside.social-strip__shops {
  margin-top: var(--dir-rhythm) !important;
}

/* The first block opens the section; the section's own padding spaces it. */
.social-strip__inner > *:first-child {
  margin-top: 0 !important;
}

/* Building With closes the group, so the distance to it is the same one that
   separates the blocks inside it — carried entirely by its own padding-top so
   there is a single source for the gap rather than two halves to keep in sync. */
.chapters > .social-strip {
  padding-bottom: 0 !important;
}

.chapters > #building,
#building {
  padding-top: var(--dir-rhythm) !important;
}