/* ========================================================================== 
   FINAL SITE SYSTEM
   This file is intentionally the last stylesheet. It replaces the accumulated
   experiments with one coherent layout for the title screen and every chapter.
   ========================================================================== */

:root {
  /* One paper — see site-finish.css. This was a third literal of the same
     idea, at a fourth value. */
  --paper: var(--field);
  --paper-soft: var(--paper);
  --paper-warm: var(--paper);
  --brown: #5c3824;
  --brown-dark: #2e1a11;
  --sky: #9fc3e2;
  --footer: #050505;
  --section-pad-x: clamp(24px, 6vw, 96px);
  --section-pad-y: clamp(78px, 11vh, 132px);
  --reading-width: 56rem;
  --content-width: 78rem;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: none;
}

body {
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
}

.stage,
.scene--hero {
  min-height: 100svh;
}

.chrome.chrome__nav {
  left: auto;
  right: clamp(14px, 2vw, 32px);
  justify-content: flex-end;
  transform: none;
}

.scene--hero {
  position: relative;
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.hero__details,
.hero__discipline-carousel,
.hero__discipline-track {
  margin-inline: auto;
  text-align: center;
}

.scene--hero .hero__pills {
  justify-content: center;
  margin-inline: auto;
  translate: 0 -18px;
}

/* ---------------------------------------------------------------------------
 * THE THREE RECORD FACTS — SMALL LIQUID GLASS, BY DIRECT REQUEST.
 *
 * hero-type.css stripped these to plain text and documented why: three prior
 * treatments (a 999px capsule, a hairline plaque, a liquid-glass rounded
 * rectangle) all read as a CONTAINER on a page that had decided against them.
 * That decision is reversed for these three specifically — Patrick asked for
 * the buttons back, smaller than any earlier version — while everything else
 * (the nav strip, the mark, the discipline carousel, the ventures grid, the
 * contact form) stays exactly as container-free as it already was. This is
 * the one exception, not a reopening of the whole question.
 *
 * "Container" and "button" are different complaints. The row itself
 * (`.hero__pills`) still carries no background — there is no panel behind the
 * group. Each individual fact gets its own small pill, which is what makes it
 * read as three distinct, tappable things instead of one caption line.
 *
 * This has to beat TWO earlier files, not one. hero-type.css is same-
 * specificity and loses on source order alone. foreground.css is the real
 * fight: it scopes its reset to `.scene--hero .hero__pill`, TWO classes
 * against hero-type.css's one, so load order stops mattering — that rule
 * would win even from earlier in the cascade. First attempt at this used
 * hero-type.css's plain `.hero__pill` selector and foreground.css's higher
 * specificity kept it invisible; the `.scene--hero`-prefixed lines below are
 * the fix, matching that specificity exactly.
 * ------------------------------------------------------------------------ */
.hero__pill,
.hero__pill.glass,
html[data-world] .hero__pill,
html[data-world] .hero__pill.glass,
.scene--hero .hero__pill,
.scene--hero .hero__pill.glass,
html[data-world] .scene--hero .hero__pill,
html[data-world] .scene--hero .hero__pill.glass {
  /* DARK GLASS, NOT WHITE GLASS.
   *
   * A white translucent fill was the wrong way round for this background. The
   * scene is a bright pixel painting — pale sky, sunlit stone — so a white
   * pane over it barely separates from what it sits on, and the near-white
   * numerals inside then had to fight their own container. Tinting the glass
   * with the page's ink instead gives the figures something dark to sit on,
   * which is what makes them read at a glance instead of on inspection.
   *
   * The blur and the bright top edge stay: those are what make it glass rather
   * than a flat swatch, and they still pick up the scene's colour as it
   * changes underneath. */
  min-height: 30px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(20, 18, 15, 0.52),
    rgba(20, 18, 15, 0.68)
  );
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 6px 20px rgba(20, 18, 15, 0.34);
  transition:
    background 180ms linear,
    box-shadow 180ms linear,
    transform 180ms var(--ease-out);
}

/* ---------------------------------------------------------------------------
 * THE FIGURES INSIDE THEM
 *
 * The label was rendering at SEVEN PIXELS — "SOLD", "REVENUE", "VIEWS" were
 * below the size at which a letterform has enough pixels to resolve, so the
 * row read as three grey smudges under three numbers. The number itself was
 * 10px, which is caption size for the single most quotable fact on the page.
 *
 * Both go up, and the hierarchy between them widens rather than narrows: the
 * number is the thing being said and now clearly leads, the label is the unit
 * and stays secondary — but legibly so.
 * ------------------------------------------------------------------------- */
.scene--hero .hero__pill b,
html[data-world] .scene--hero .hero__pill b {
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fffaf0;
}

.scene--hero .hero__pill i,
html[data-world] .scene--hero .hero__pill i {
  font-size: clamp(9px, 0.72vw, 11px);
  font-weight: 500;
  letter-spacing: 0.16em;
  /* was a cool grey-blue that read as disabled; this is the same warm family
     as the numeral, simply stepped back. 0.72 measured 3.95:1 against the
     pill's own fill over a bright scene — under AA for text this size — so it
     is held at 0.88 and the hierarchy is carried by SIZE and weight instead of
     by fading it to the point of illegibility. */
  color: rgba(255, 250, 240, 0.88);
}

.hero__pill-wrap:hover .hero__pill,
.hero__pill:focus-visible,
html[data-world] .hero__pill-wrap:hover .hero__pill,
html[data-world] .hero__pill:focus-visible,
.scene--hero .hero__pill-wrap:hover .hero__pill,
.scene--hero .hero__pill:focus-visible,
html[data-world] .scene--hero .hero__pill-wrap:hover .hero__pill,
html[data-world] .scene--hero .hero__pill:focus-visible {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.1)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 6px 18px rgba(20, 18, 15, 0.2);
  transform: translateY(-1px);
}

@media (min-width: 721px) {
  .scene--hero .hero__lockup {
    left: clamp(18px, 3vw, 48px);
    right: auto;
    width: min(92vw, 73.75rem);
    max-width: calc(100vw - clamp(36px, 6vw, 96px));
    padding-inline: 0;
    /* A LENGTH, NEVER A PERCENTAGE. `--mark-w` is consumed inside the
       wordmark's `font-size: clamp(3px, min(calc(var(--mark-w) / 78), …))`,
       and a percentage in a font-size calc resolves against the parent's FONT
       SIZE — not its width. `100%` here meant "100% of ~16px", so the cell
       computed to about 0.2px, hit the 3px floor of the clamp, and the mark
       rendered 229px wide instead of filling its column. It has to restate the
       column's own width as a real length. */
    --mark-w: min(92vw, 73.75rem, calc(100vw - clamp(36px, 6vw, 96px)));
    align-content: center;
    justify-items: start;
    gap: 0;
    text-align: left;
    transform: none;
  }

  .scene--hero .hero__title {
    width: 100%;
    margin: 0 0 clamp(20px, 3vh, 34px);
    transform: none;
  }

  .scene--hero .hero__mark-stage {
    margin-inline: 0 auto;
    transform: none;
    transform-origin: center;
  }

  .scene--hero .hero__details {
    width: calc(100% - clamp(20px, 3.5vw, 46px));
    margin: 0 0 0 clamp(20px, 3.5vw, 46px);
    justify-items: start;
    text-align: left;
    transform: none;
  }

  .scene--hero .hero__discipline-carousel {
    width: 100%;
    margin-inline: 0 !important;
  }

  .scene--hero .hero__disciplines,
  .scene--hero .hero__discipline-track .hero__disciplines {
    font-size: clamp(11px, 1.03vw, 16px);
  }

  .scene--hero .hero__pills {
    justify-content: flex-start;
    margin-top: clamp(14px, 2vh, 22px);
    margin-right: 0;
    margin-left: clamp(20px, 3.5vw, 46px);
    translate: 0 0;
  }

  .scene--hero .hero__scroll-cue {
    left: 50%;
  }
}

.hero__scroll-cue {
  position: absolute;
  z-index: 8;
  right: auto;
  left: 50%;
  bottom: clamp(16px, 2.8vh, 28px);
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 34px;
  color: #fffaf0;
  font: 500 clamp(8px, 0.62vw, 10px) / 1 var(--mono);
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 4px 12px rgba(0, 0, 0, 0.55);
  transform: translateX(-50%);
}

.hero__scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 28px;
  overflow: hidden;
  background: rgba(255, 250, 240, 0.38);
}

.hero__scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fffaf0;
  transform: translateY(-100%);
  animation: title-cue 1.9s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

@keyframes title-cue {
  0% { transform: translateY(-100%); }
  48%, 62% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- shared chapter foundation ---------------------------------- */

.chapters {
  position: relative;
  z-index: 7;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  /* No rule along the top edge. This drew a hairline directly under the title
     screen's scroll cue — the second half of the seam that the 64px shadow in
     site-finish.css was making, and the hard edge you could actually see.

     It separated two areas that are the same paper and are meant to read as
     one continuous page, so it was dividing the page against itself. The
     change from title screen to content is carried by the composition and the
     space, which is what makes the transition feel continuous. */
}

.chapters::before {
  content: none;
}

.chapters > .screen-panel {
  position: relative;
  isolation: isolate;
  grid-column: auto;
  justify-self: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  scroll-snap-align: start;
  /* `always`, not the default `normal`. Harmless on desktop — snap-stop only
     does anything inside a scroller that has snap-type turned on, and
     desktop's is `none` — but on mobile it's load-bearing: `normal` lets a
     fast/long swipe's momentum sail straight through an intermediate snap
     point without stopping there. Measured with a ~500px synthetic swipe from
     the hero: without this, it landed on Ventures, three sections past About.
     `always` forces every panel to catch the scroll on the way through,
     however hard the swipe, which is what "one swipe to About" actually
     requires. */
  scroll-snap-stop: always;
}

/* Neutralize the old chapter-width and full-bleed transforms. Those rules
   were written for the previous two-column composition and can otherwise
   shift a full-width section half a viewport to the left. */
#about,
#building,
#ventures,
.chapters > .selling-section,
.chapters > .socials-section,
#connect {
  width: 100%;
  max-width: none;
  margin: 0;
  transform: none;
}

.chapters > .screen-panel > :not(.panel-wipe) {
  position: relative;
  z-index: 2;
}

.panel-wipe {
  display: none !important;
}

#about > .panel-wipe {
  background: repeating-linear-gradient(0deg, #6f472d 0 8px, #e9dfcf 8px 16px);
}

#building > .panel-wipe {
  background: var(--paper);
}

.selling-section > .panel-wipe {
  background: repeating-linear-gradient(0deg, #75a6cf 0 10px, #b8d4ea 10px 20px);
}

#ventures > .panel-wipe {
  background: #d1b691;
}

.socials-section > .panel-wipe {
  background: repeating-linear-gradient(90deg, #f3ece1 0 18px, #d8c5aa 18px 20px);
}

#connect > .panel-wipe {
  background: #8e572e;
}

.screen-panel.is-swiping > .panel-wipe {
  animation: panel-swipe-down 920ms var(--ease-out) both;
}

#building.is-swiping > .panel-wipe { animation-name: leaf-scan-down; }
.selling-section.is-swiping > .panel-wipe { animation-name: sky-step-down; }
#ventures.is-swiping > .panel-wipe { animation-name: editorial-fold-down; }
.socials-section.is-swiping > .panel-wipe { animation-name: signal-rake-down; }
#connect.is-swiping > .panel-wipe { animation-name: contact-shutter-down; }

@keyframes panel-swipe-down {
  0% { transform: translateY(-102%); }
  46% { transform: translateY(0); }
  100% { transform: translateY(102%); }
}

@keyframes leaf-scan-down {
  0% { transform: translateY(-102%); clip-path: inset(0 0 72% 0); }
  44% { transform: translateY(0); clip-path: inset(0); }
  100% { transform: translateY(102%); clip-path: inset(72% 0 0 0); }
}

@keyframes sky-step-down {
  0% { transform: translateY(-102%) skewY(-2deg); }
  48% { transform: translateY(0) skewY(0); }
  100% { transform: translateY(102%) skewY(2deg); }
}

@keyframes editorial-fold-down {
  0% { transform: translateY(-102%) scaleY(0.72); transform-origin: top; }
  46% { transform: translateY(0) scaleY(1); }
  100% { transform: translateY(102%) scaleY(0.78); transform-origin: bottom; }
}

@keyframes signal-rake-down {
  0% { transform: translateY(-102%) translateX(-2%); }
  45% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(102%) translateX(2%); }
}

@keyframes contact-shutter-down {
  0% { transform: translateY(-102%); clip-path: inset(0 12% 58% 12%); }
  46% { transform: translateY(0); clip-path: inset(0); }
  100% { transform: translateY(102%); clip-path: inset(58% 12% 0 12%); }
}

.section-title {
  margin: 0;
}

/* ---------- about ------------------------------------------------------- */

#about {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: auto;
  padding: clamp(92px, 14vh, 158px) var(--section-pad-x) clamp(108px, 16vh, 184px);
  background: var(--paper) !important;
}

#about .chapter__hang {
  display: block;
  width: min(100%, var(--reading-width));
  margin: 0 auto;
  padding: 0;
}

#about .painting,
#about .painting--portrait {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(14px, 2.2vw, 24px);
  border: 4px solid var(--brown-dark);
  border-radius: 0;
  background-color: #765035;
  background-image:
    linear-gradient(45deg, rgba(255, 218, 165, 0.18) 25%, transparent 25%, transparent 75%, rgba(255, 218, 165, 0.18) 75%),
    linear-gradient(45deg, rgba(43, 23, 13, 0.3) 25%, transparent 25%, transparent 75%, rgba(43, 23, 13, 0.3) 75%);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px;
  box-shadow:
    0 0 0 4px #39548f,
    0 0 0 8px #482a1a,
    0 0 0 12px #bd8456,
    0 0 0 16px #2e1d14,
    0 28px 50px rgba(53, 31, 19, 0.2);
  image-rendering: pixelated;
}

#about .painting::before,
#about .painting::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  width: clamp(82px, 13vw, 132px);
  height: 6px;
  translate: -50% 0;
  background: repeating-linear-gradient(90deg, #c38b59 0 9px, #3b2216 9px 18px);
  box-shadow: 0 0 0 3px #54311f;
  pointer-events: none;
}

#about .painting::before { top: 7px; }
#about .painting::after { bottom: 7px; }

#about .painting__mat {
  padding: clamp(7px, 1vw, 11px);
  background: #40261a;
  box-shadow: inset 0 0 0 3px #c08a5b, inset 0 0 0 7px #5a351f;
}

#about .painting__canvas {
  display: grid;
  gap: 1.12em;
  padding: clamp(34px, 5vw, 60px) clamp(26px, 5.4vw, 66px);
  border: 3px solid #2f1d14;
  border-radius: 0;
  color: #30281f;
  background: var(--paper) !important;
  box-shadow: inset 0 0 0 3px rgba(158, 103, 63, 0.32), inset 0 0 0 7px #eee5d6;
  backdrop-filter: none;
  text-align: center;
}

#about .painting__canvas p {
  max-width: 66ch;
  margin: 0 auto;
  color: #30281f;
  text-shadow: none;
}

#about .painting__canvas p:first-child {
  color: #1c1712;
}

/* ---------- building with ---------------------------------------------- */

#building {
  position: relative;
  display: block;
  width: 100vw;
  max-width: none;
  height: 100svh;
  min-height: 100svh;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgba(68, 44, 27, 0.042) 0.65px, transparent 0.75px);
  background-position: 0 0;
  background-size: 5px 5px;
  overflow: hidden;
  transform: none;
  translate: none;
}

#building > .building-leaf-wall {
  display: none;
}

#building > .building-leaf-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
  transform: scale(1.015);
  image-rendering: pixelated;
  animation: leaf-wall-breathe 14s ease-in-out infinite alternate;
}

#building > .building-leaf-wall::after {
  content: none;
}

@keyframes leaf-wall-breathe {
  from { transform: scale(1.015) translate3d(-0.25%, 0, 0); }
  to { transform: scale(1.035) translate3d(0.35%, -0.3%, 0); }
}

#building > .section-title,
.selling-section > .section-title,
.socials-section > .section-title {
  align-self: center;
  width: auto;
  color: #fffaf0;
  font: 600 clamp(10px, 0.78vw, 13px) / 1 var(--mono);
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

#building > .section-title {
  position: absolute;
  z-index: 4;
  top: clamp(20px, 3vh, 32px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  color: var(--ink);
  text-shadow: none;
}

#building .stack-carousel {
  --stack-gap-x: 0px;
  --stack-gap-y: 0px;
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  -webkit-mask-image: none;
  mask-image: none;
}

#building .stack-carousel::-webkit-scrollbar { display: none; }
#building .stack-carousel.is-dragging { cursor: grabbing; }

#building .stack-track {
  width: max-content;
  min-width: 100%;
  height: 100%;
}

#building .stack-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--stack-rows, 3), var(--stack-cell-y));
  grid-auto-columns: var(--stack-cell-x);
  gap: var(--stack-gap-y) var(--stack-gap-x);
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: building-grid-drift var(--stack-duration, 50s) linear infinite;
}

@keyframes building-grid-drift {
  from { transform: translateX(0); }
  to { transform: translateX(var(--stack-loop, -1000px)); }
}

#building .stack-grid > li {
  display: grid;
  place-items: center;
  width: var(--stack-cell-x);
  height: var(--stack-cell-y);
  min-width: var(--stack-cell-x);
  min-height: var(--stack-cell-y);
  max-width: var(--stack-cell-x);
  max-height: var(--stack-cell-y);
  padding: 0;
  translate: 0 0;
}

#building .stack-carousel .stack-grid > li,
#building .stack-carousel .stack-grid > li:nth-child(4n + 2),
#building .stack-carousel .stack-grid > li:nth-child(4n + 4) {
  translate: 0 0 !important;
  transform: none;
}

/* Three items form each column. Offsetting only the middle item of every
   column creates one consistent brick/checkerboard row across the loop. */
#building .stack-carousel .stack-grid > li:nth-child(3n + 2) {
  translate: var(--stack-stagger, 0px) 0 !important;
}

#building .stack-grid > li img {
  display: block;
  width: 86%;
  height: 86%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: 1;
  filter: saturate(1.08) brightness(1.05) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
  transition: transform 300ms var(--ease-out), filter 300ms var(--ease-out);
}

#building .stack-grid > li[data-ink="mono"] img {
  filter: saturate(1.08) brightness(1.05) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.42));
}

@media (hover: hover) {
  #building .stack-grid > li:hover img {
    transform: translateY(-6px) scale(1.08);
    filter: saturate(1.18) brightness(1.1) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  }

  #building .stack-grid > li[data-ink="mono"]:hover img {
    filter: saturate(1.18) brightness(1.1) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55));
  }
}

/* ---------- selling on -------------------------------------------------- */

.chapters > .selling-section[data-panel="selling"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(34px, 5vh, 54px);
  min-height: clamp(540px, 68svh, 700px);
  padding: clamp(66px, 9vh, 90px) var(--section-pad-x);
  color: #172538;
  background-color: var(--sky);
  background-image: url("../public/backgrounds/selling-pixel-sky.png");
  background-position: center;
  background-size: cover;
  image-rendering: pixelated;
}

.selling-section > .section-title {
  color: #172538;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

.marketplace-float-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(24px, 4vh, 42px) clamp(34px, 8vw, 116px);
  width: min(100%, 62rem);
  min-height: clamp(310px, 39vh, 410px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.marketplace-float-grid > li {
  --float-delay: 0s;
  --float-time: 6.8s;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: marketplace-float var(--float-time) ease-in-out var(--float-delay) infinite;
}

.marketplace-float-grid > li:nth-child(2) { --float-delay: -2.1s; --float-time: 7.3s; }
.marketplace-float-grid > li:nth-child(3) { --float-delay: -4.2s; --float-time: 6.4s; }
.marketplace-float-grid > li:nth-child(4) { --float-delay: -1.3s; --float-time: 7.7s; }
.marketplace-float-grid > li:nth-child(5) { --float-delay: -3.6s; --float-time: 6.1s; }
.marketplace-float-grid > li:nth-child(6) { --float-delay: -5.2s; --float-time: 7.1s; }
.marketplace-float-grid > li:nth-child(7) { --float-delay: -2.7s; --float-time: 6.6s; }
.marketplace-float-grid > li:nth-child(8) { --float-delay: -4.7s; --float-time: 7.9s; }
.marketplace-float-grid > li:nth-child(9) { --float-delay: -0.8s; --float-time: 6.9s; }

.marketplace-float-grid > li > a {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.marketplace-float-grid img {
  display: block;
  width: clamp(62px, 7.5vw, 104px);
  height: clamp(50px, 6.4vw, 88px);
  object-fit: contain;
  opacity: 1;
  filter: saturate(1.08) drop-shadow(0 7px 8px rgba(29, 55, 78, 0.2));
  transition: transform 240ms var(--ease-out), filter 240ms var(--ease-out);
}

.marketplace-float-grid img[src$="/amazon.svg"],
.marketplace-float-grid img[src$="/whatnot.svg"] {
  width: clamp(92px, 11vw, 148px);
}

@keyframes marketplace-float {
  0%, 100% { transform: translate3d(-3px, 6px, 0) rotate(-0.8deg); }
  50% { transform: translate3d(5px, -8px, 0) rotate(0.9deg); }
}

@media (hover: hover) {
  .marketplace-float-grid > li:hover img,
  .marketplace-float-grid > li:focus-within img {
    transform: translateY(-5px) scale(1.1);
    filter: saturate(1.18) drop-shadow(0 13px 12px rgba(29, 55, 78, 0.28));
  }
}

/* ---------- ventures ---------------------------------------------------- */

#ventures {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  margin-left: calc(50% - 50vw);
  padding: clamp(50px, 7vh, 76px) 0;
  background: var(--paper);
  text-align: center;
}

#ventures .venture-section {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
}

#ventures .venture-index {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  counter-reset: venture;
}

#ventures .venture,
#ventures a.venture:hover,
#ventures a.venture:focus-visible {
  position: relative;
  display: grid;
  grid-template-columns: clamp(38px, 5vw, 80px) minmax(0, 1fr) clamp(38px, 5vw, 80px);
  align-items: center;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 clamp(24px, 5vw, 84px);
  border: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  counter-increment: venture;
  transition: color 260ms linear, background-color 360ms var(--ease-out);
}

#ventures .venture::before {
  content: "0" counter(venture);
  justify-self: start;
  color: var(--ink-dim);
  font: 600 clamp(9px, 0.7vw, 11px) / 1 var(--mono);
  letter-spacing: 0.14em;
}

#ventures .venture::after {
  content: "\2197";
  justify-self: end;
  color: var(--ink-dim);
  font: 400 clamp(18px, 2vw, 30px) / 1 var(--prose);
  transition: color 220ms linear, transform 300ms var(--ease-out);
}

#ventures .venture + .venture {
  border: 0;
}

#ventures .venture__name {
  position: relative;
  z-index: 2;
  justify-self: center;
  color: var(--ink);
  font: 400 clamp(58px, 8vw, 126px) / 0.84 var(--prose);
  letter-spacing: -0.035em;
  text-shadow: none;
  transition: color 220ms linear, transform 320ms var(--ease-out), opacity 220ms linear;
}

/* Each venture has its own typographic voice while the shared scale and
   centered baseline keep the full-screen composition coherent. */
#ventures .venture:nth-child(1) .venture__name {
  font-family: var(--prose);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.055em;
}

#ventures .venture:nth-child(2) .venture__name {
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 72%;
  font-weight: 800;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}

#ventures .venture:nth-child(3) .venture__name {
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.025em;
}

#ventures .venture__mark {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: clamp(84px, 10vw, 150px);
  height: clamp(54px, 7vw, 100px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.84) rotate(-3deg);
  transition: opacity 220ms linear, transform 380ms var(--ease-out);
  pointer-events: none;
}

#ventures .venture__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (hover: hover) {
  #ventures .venture-index:has(.venture:hover) .venture:not(:hover) .venture__name {
    opacity: 0.3;
  }

  #ventures .venture:hover .venture__name,
  #ventures .venture:focus-visible .venture__name {
    color: var(--paper);
    transform: scale(1.025);
  }

  #ventures .venture:hover,
  #ventures .venture:focus-visible {
    color: var(--paper);
    background-color: var(--ink);
  }

  #ventures .venture:hover::before,
  #ventures .venture:hover::after,
  #ventures .venture:focus-visible::before,
  #ventures .venture:focus-visible::after {
    color: var(--paper);
  }

  #ventures .venture:hover::after,
  #ventures .venture:focus-visible::after {
    transform: translate(4px, -4px);
  }

  #ventures .venture:hover .venture__mark,
  #ventures .venture:focus-visible .venture__mark {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

/* The project chapter is artwork-first: no title, list, cards or dividers. */
#ventures.venture-logos {
  display: block;
  height: 100svh;
  min-height: 100svh;
  padding: clamp(46px, 7vh, 78px) 0;
  overflow: hidden;
  background: var(--paper);
}

.venture-logos__stage {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  height: 100%;
}

.venture-logo {
  display: block;
  width: max-content;
  max-width: 94vw;
  color: inherit;
  text-decoration: none;
  transition: transform 420ms var(--ease-out), filter 320ms linear;
}

.venture-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.venture-logo--made {
  justify-self: start;
  width: min(88vw, 78rem);
  margin-left: 2vw;
  transform: rotate(-0.8deg);
}

.venture-logo--thrift {
  justify-self: end;
  width: min(76vw, 66rem);
  margin-right: 3vw;
  transform: rotate(0.6deg);
}

@media (hover: hover) {
  .venture-logo--made:hover,
  .venture-logo--made:focus-visible {
    transform: translateX(1.5vw) rotate(0deg) scale(1.025);
    filter: saturate(1.08);
  }

  .venture-logo--thrift:hover,
  .venture-logo--thrift:focus-visible {
    transform: translateX(-1.5vw) rotate(0deg) scale(1.025);
  }
}

.venture-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 0 clamp(24px, 5vw, 80px);
  width: min(100%, 88rem);
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(22px, 4vw, 64px);
}

.venture-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--ink);
  font: 400 clamp(26px, 3.25vw, 54px) / 0.9 var(--prose);
  letter-spacing: -0.045em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: color 220ms linear, transform 320ms var(--ease-out);
}

.venture-list__item:nth-child(3n + 2) {
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 750;
  letter-spacing: -0.06em;
}

.venture-list__item:nth-child(3n) {
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  font-variant: small-caps;
  letter-spacing: 0.01em;
}

@media (hover: hover) {
  a.venture-list__item:hover,
  a.venture-list__item:focus-visible {
    color: var(--signal);
    transform: translateY(-4px);
  }
}

/* ---------- socials ----------------------------------------------------- */

.chapters > .socials-section[data-panel="socials"] {
  display: grid;
  align-content: center;
  min-height: 100svh;
  padding: clamp(74px, 10vh, 112px) var(--section-pad-x);
  color: var(--ink);
  background: var(--paper);
  text-align: center;
}

.socials-section > .section-title {
  display: block;
  width: 100%;
  margin: 0 0 clamp(42px, 6vh, 64px);
  color: var(--ink-dim);
  text-shadow: none;
}

.socials-section .accounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.8vh, 42px);
  width: min(100%, 76rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.socials-section .account,
.socials-section .account:nth-child(even) {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(130px, 0.65fr) minmax(190px, auto);
  grid-template-areas: "handle description links";
  justify-items: stretch;
  align-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
  transition: transform 320ms var(--ease-out);
}

.socials-section .account:last-child:nth-child(odd) {
  grid-column: auto;
  width: 100%;
  justify-self: center;
}

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

.socials-section .account__handle {
  grid-area: handle;
  max-width: 100%;
  color: var(--ink);
  font: 400 clamp(32px, 3.6vw, 56px) / 0.92 var(--prose);
  letter-spacing: -0.05em;
  text-align: left;
  text-shadow: none;
  overflow-wrap: anywhere;
  transition: color 220ms linear, transform 320ms var(--ease-out);
}

.socials-section .account__desc {
  grid-area: description;
  color: var(--ink-dim);
  font: 600 clamp(9px, 0.7vw, 11px) / 1.2 var(--mono);
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

.socials-section .account__links {
  grid-area: links;
  display: flex;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 24px);
  margin-top: 3px;
}

.socials-section .account__links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  color: var(--ink-soft);
  font: 500 clamp(11px, 0.8vw, 13px) / 1 var(--mono);
  letter-spacing: 0.06em;
  text-decoration: none;
}

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

.socials-section .account__links img {
  width: 17px;
  height: 17px;
  filter: none;
}

.marketplaces-directory {
  width: min(100%, 70rem);
  margin: clamp(110px, 15vh, 168px) auto 0;
  padding: 0;
  text-align: center;
}

.marketplaces-directory__title {
  margin: 0 0 clamp(48px, 7vh, 72px);
  color: var(--ink-dim);
  font: 600 clamp(10px, 0.78vw, 13px) / 1 var(--mono);
  letter-spacing: 0.25em;
  text-align: center;
  text-transform: uppercase;
}

.marketplaces-directory__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(46px, 7vh, 72px) clamp(30px, 7vw, 92px);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marketplaces-directory__grid > li,
.marketplaces-directory__grid > li > a {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  min-width: 0;
  min-height: 126px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  background: transparent;
  text-decoration: none;
}

.marketplaces-directory__grid img {
  display: block;
  width: clamp(72px, 7.5vw, 108px);
  height: clamp(58px, 6.5vw, 92px);
  object-fit: contain;
  opacity: 1;
  filter: none;
  transition: transform 280ms var(--ease-out);
}

.marketplaces-directory__grid img[src$="/amazon.svg"],
.marketplaces-directory__grid img[src$="/whatnot.svg"] {
  width: clamp(104px, 11vw, 156px);
}

.marketplaces-directory__grid span {
  color: var(--ink-soft);
  font: 600 10px / 1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (hover: hover) {
  .socials-section .accounts:has(.account:hover) .account:not(:hover) {
    opacity: 1;
    filter: none;
  }

  .socials-section .account:hover .account__handle {
    color: var(--signal);
    transform: none;
  }

  .socials-section .account:hover {
    transform: translateX(10px);
  }

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

  .marketplaces-directory__grid > li:hover img,
  .marketplaces-directory__grid > li:focus-within img {
    transform: translateY(-5px) scale(1.08);
  }
}

/* ---------- contact ----------------------------------------------------- */

#connect {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--paper);
  text-align: center;
}

#connect > .connect__block {
  width: min(100%, 48rem);
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

#connect .connect__title {
  margin: 0 0 clamp(24px, 4vh, 42px);
  color: var(--ink);
  font: 400 clamp(48px, 7vw, 92px) / 0.92 var(--prose);
  letter-spacing: -0.055em;
  text-shadow: none;
}

#connect .connect__address {
  display: inline-flex;
  gap: 0.45em;
  margin-bottom: clamp(42px, 7vh, 72px);
  color: var(--ink-soft);
  font: 500 clamp(13px, 1.2vw, 17px) / 1.3 var(--mono);
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none;
}

#connect .form {
  display: grid;
  gap: 28px;
  width: 100%;
  justify-items: center;
}

#connect .field {
  display: grid;
  gap: 10px;
  margin: 0;
  width: 100%;
  justify-items: center;
}

#connect .field__label {
  color: var(--ink-soft);
  font: 600 10px / 1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none;
}

#connect .field__input {
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(20, 18, 15, 0.32);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  text-align: center;
}

#connect .field__input--area {
  min-height: 132px;
  resize: vertical;
}

#connect .field__input::placeholder { color: rgba(52, 48, 42, 0.52); }

#connect .field__input:focus {
  border-color: var(--ink);
  outline: 0;
  background: transparent;
  box-shadow: 0 1px 0 var(--ink);
}

#connect .button {
  justify-self: center;
  min-width: 126px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font: 600 10px / 1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none;
}

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

/* ---------- footer ------------------------------------------------------ */

.chapters > .site-footer {
  position: relative;
  z-index: 8;
  width: 100%;
  margin: 0;
  padding: 0 0 22px;
  color: #f5efe5;
  background: var(--footer) !important;
  background-image: none !important;
  box-shadow: none;
}

.selling-banner {
  display: grid;
  grid-template-columns: clamp(92px, 10vw, 138px) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  width: 100%;
  height: 58px;
  margin: 0 0 clamp(34px, 5vh, 52px);
  padding: 0 clamp(18px, 4vw, 58px);
  overflow: hidden;
  color: #f5efe5;
  background: transparent;
  border-bottom: 1px solid rgba(245, 239, 229, 0.14);
  box-shadow: none;
}

.selling-banner__title {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(245, 239, 229, 0.5);
  font: 600 8px / 1 var(--mono);
  letter-spacing: 0.2em;
  white-space: nowrap;
  text-transform: uppercase;
}

.selling-banner__viewport {
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}

.selling-banner__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: footer-selling-ticker 38s linear infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}

.selling-banner__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(26px, 3vw, 46px);
  margin: 0;
  padding: 0 clamp(26px, 3vw, 46px) 0 0;
  list-style: none;
}

.selling-banner__group > li,
.selling-banner__group > li > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-width: max-content;
  margin: 0;
  padding: 0;
  color: rgba(245, 239, 229, 0.76);
  text-decoration: none;
}

.selling-banner__group img {
  display: block;
  width: 26px;
  height: 24px;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

.selling-banner__group img[src$="/amazon.svg"],
.selling-banner__group img[src$="/whatnot.svg"] {
  width: 44px;
}

.selling-banner__group span {
  color: rgba(245, 239, 229, 0.72);
  font: 500 8px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@keyframes footer-selling-ticker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.site-footer::before,
.site-footer::after {
  content: none !important;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 58px);
  width: min(100%, 86rem);
  margin: 0 auto;
  padding-inline: var(--section-pad-x);
  justify-items: center;
  text-align: center;
}

.site-footer__brand,
.site-footer__column {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.site-footer__name {
  margin: 0 0 12px;
  color: #fffaf0;
  font: 400 clamp(30px, 3.3vw, 48px) / 0.95 var(--prose);
  letter-spacing: -0.04em;
}

.site-footer__tagline {
  max-width: 30ch;
  margin: 0 auto;
  color: rgba(245, 239, 229, 0.62);
  font: 400 13px / 1.6 var(--mono);
}

.site-footer__heading {
  margin: 0 0 18px;
  color: rgba(245, 239, 229, 0.48);
  font: 600 9px / 1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-footer .footer-links,
.site-footer .markets {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-items: center;
}

.site-footer .footer-links li,
.site-footer .markets li {
  margin: 0;
  padding: 0;
  border: 0;
}

.site-footer .footer-links a,
.site-footer .markets a {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  color: rgba(245, 239, 229, 0.78);
  background: transparent;
  font: 400 12px / 1.5 var(--mono);
  text-decoration: none;
}

.site-footer .markets__logo,
.site-footer .markets a > i {
  display: none;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible,
.site-footer .markets a:hover,
.site-footer .markets a:focus-visible {
  color: #fffaf0;
}

.site-footer__bottom {
  display: flex;
  justify-content: center;
  gap: 24px;
  width: min(100%, 86rem);
  margin: 36px auto 0;
  padding: 18px var(--section-pad-x) 0;
  border-top: 1px solid rgba(245, 239, 229, 0.14);
  color: rgba(245, 239, 229, 0.4);
  font: 500 9px / 1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.site-footer__bottom p { margin: 0; }

/* ---------- fixed interface contrast ----------------------------------- */

.chrome__nav a,
.site-credit,
.scroll-meter,
.scroll-meter i {
  transition: color 240ms linear, background-color 240ms linear, box-shadow 240ms linear, text-shadow 240ms linear;
}

html.past-title[data-active-panel="building"] .chrome__nav a:not(:hover):not(:focus-visible),
html.past-title[data-active-panel="building"] .chrome__nav a[aria-current],
html.past-title[data-active-panel="building"] .site-credit {
  color: var(--ink);
  text-shadow: none;
}

html.past-title[data-active-panel="building"] .scroll-meter {
  background: rgba(20, 18, 15, 0.18);
}

html.past-title[data-active-panel="building"] .scroll-meter i {
  background: var(--ink);
  box-shadow: none;
}

html.past-title:not([data-active-panel="building"]) .chrome__nav a:not(:hover):not(:focus-visible),
html.past-title:not([data-active-panel="building"]) .chrome__nav a[aria-current] {
  color: var(--ink);
  text-shadow: none;
}

html.past-title:not([data-active-panel="building"]) .site-credit { color: var(--ink-soft); }
html.past-title:not([data-active-panel="building"]) .scroll-meter { background: rgba(20, 18, 15, 0.18); }
html.past-title:not([data-active-panel="building"]) .scroll-meter i { background: var(--ink); box-shadow: none; }

html.past-title .chrome__nav a:hover,
html.past-title .chrome__nav a:focus-visible {
  color: var(--signal);
  text-shadow: none;
}

/* ---------- final polish ------------------------------------------------
   One quiet paper texture, sharper type hierarchy and consistent interaction
   feedback tie the finished chapters together without adding UI containers. */

#about,
#ventures,
.chapters > .socials-section[data-panel="socials"],
#connect {
  background-color: var(--paper) !important;
  background-image: radial-gradient(circle, rgba(68, 44, 27, 0.042) 0.65px, transparent 0.75px) !important;
  background-position: 0 0;
  background-size: 5px 5px;
}

#about .painting__canvas {
  background-color: var(--paper) !important;
  background-image: radial-gradient(circle, rgba(68, 44, 27, 0.032) 0.6px, transparent 0.7px) !important;
  background-size: 5px 5px;
}

#about .painting__canvas p {
  max-width: 60ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.72;
  text-align: left;
}

#about .painting__canvas p:first-child {
  max-width: 27ch;
  margin-bottom: clamp(10px, 1.5vh, 18px);
  font-size: clamp(25px, 3vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-align: center;
}

#building > .section-title,
.socials-section > .section-title {
  opacity: 0.86;
}

#building .stack-grid > li img {
  filter:
    saturate(1.06)
    drop-shadow(0 7px 12px rgba(42, 31, 21, 0.16));
}

#building .stack-grid > li[data-ink="mono"] img {
  filter:
    saturate(1.02)
    drop-shadow(0 7px 12px rgba(42, 31, 21, 0.16));
}

#ventures .venture-index {
  gap: 0;
}

#ventures .venture__name {
  text-wrap: balance;
}

.socials-section .account__handle {
  text-wrap: balance;
}

.socials-section .account__links a,
#connect .connect__address,
.site-footer a {
  transition: color 200ms linear, opacity 200ms linear, transform 260ms var(--ease-out);
}

#connect .connect__address:hover,
#connect .connect__address:focus-visible {
  color: var(--signal);
  transform: translateY(-2px);
}

#connect .field__input {
  font-size: clamp(15px, 1.1vw, 17px);
}

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.selling-banner {
  box-shadow: none;
}

.selling-banner__group > li,
.selling-banner__group > li > a {
  transition: opacity 180ms linear;
}

@media (hover: hover) {
  .selling-banner__group > li:hover,
  .selling-banner__group > li:focus-within {
    opacity: 0.62;
  }
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 980px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  :root {
    --section-pad-x: 22px;
    --section-pad-y: 72px;
  }

  /* ONE SWIPE, ONE SECTION — MOBILE ONLY.
     Desktop keeps free scrolling (`scroll-snap-type: none` at the top of this
     file, untouched). On a touch screen, "mandatory" is what actually
     delivers "swipe down and it immediately swipes to About": every scroll
     gesture that starts snaps forward and finishes at the top of the next
     panel rather than leaving the visitor stranded partway down a full-bleed
     photograph. `.scene--hero` picks up its own `scroll-snap-align` here
     because it sits in `<main>`, outside `.chapters` — every chapter panel
     (`#about`, `#building`, …) already carries `scroll-snap-align: start`
     unconditionally, and always has; the hero was the one panel opted out of
     the system those rules were clearly built for. */
  html { scroll-snap-type: y mandatory; }

  #about {
    padding: 82px 28px 108px;
  }

  #about .painting,
  #about .painting--portrait {
    padding: 11px;
    border-width: 3px;
    box-shadow:
      0 0 0 3px #39548f,
      0 0 0 6px #482a1a,
      0 0 0 9px #bd8456,
      0 0 0 12px #2e1d14,
      0 18px 30px rgba(53, 31, 19, 0.2);
  }

  #about .painting__canvas {
    padding: 32px 23px;
    box-shadow: inset 0 0 0 3px rgba(158, 103, 63, 0.28);
  }

  #building {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    height: auto;
    min-height: 0;
    gap: 28px;
    padding: 64px 0 72px;
  }

  #building > .section-title {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  #building .stack-carousel {
    --stack-gap-x: 0px;
    --stack-gap-y: 0px;
    width: min(100vw, 480px);
    height: auto;
    aspect-ratio: 3 / 5;
  }

  #building .stack-grid > li img {
    width: 78%;
    height: 78%;
    max-width: none;
    max-height: none;
  }

  #building .stack-carousel[data-stack-layout="mobile"] .stack-grid > li:nth-child(3n + 2) {
    translate: 0 0 !important;
  }

  #building .stack-carousel[data-stack-layout="mobile"] .stack-grid > li:nth-child(5n + 2),
  #building .stack-carousel[data-stack-layout="mobile"] .stack-grid > li:nth-child(5n + 4) {
    translate: var(--stack-stagger, 0px) 0 !important;
  }

  .chapters > .selling-section[data-panel="selling"] {
    min-height: 570px;
    gap: 28px;
    padding-block: 58px;
  }

  .marketplace-float-grid {
    gap: 26px 24px;
    min-height: 380px;
  }

  .marketplace-float-grid img {
    width: clamp(54px, 18vw, 76px);
    height: clamp(46px, 15vw, 66px);
  }

  .marketplace-float-grid img[src$="/amazon.svg"],
  .marketplace-float-grid img[src$="/whatnot.svg"] {
    width: clamp(74px, 23vw, 102px);
  }

  #ventures {
    height: 100svh;
    min-height: 100svh;
    padding: 42px 0;
  }

  #ventures .venture-section {
    min-height: calc(100svh - 84px);
  }

  #ventures .venture-index {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0;
    min-height: calc(100svh - 84px);
  }

  #ventures .venture,
  #ventures a.venture:hover,
  #ventures a.venture:focus-visible {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    padding-inline: 18px;
  }

  #ventures .venture:nth-child(n) .venture__name {
    font-size: clamp(32px, 10vw, 52px);
  }

  #ventures.venture-logos {
    height: 100svh;
    min-height: 100svh;
    padding: 56px 0;
  }

  .venture-logo--made,
  .venture-logo--thrift {
    justify-self: center;
    width: 94vw;
    margin: 0;
  }

  .chapters > .socials-section[data-panel="socials"] {
    min-height: auto;
    padding-block: 86px 108px;
  }

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

  .socials-section .account,
  .socials-section .account:nth-child(even),
  .socials-section .account:last-child:nth-child(odd) {
    grid-template-columns: 1fr;
    grid-template-areas: "handle" "description" "links";
    justify-items: start;
    gap: 10px;
    grid-column: auto;
    width: 100%;
    min-height: 0;
    text-align: left;
  }

  .socials-section .account__links {
    justify-content: flex-start;
  }

  .socials-section .account__handle {
    font-size: clamp(34px, 11.5vw, 56px);
  }

  .marketplaces-directory {
    margin-top: 96px;
  }

  .marketplaces-directory__grid {
    gap: 34px 18px;
  }

  .marketplaces-directory__grid > li,
  .marketplaces-directory__grid > li > a {
    min-height: 104px;
    gap: 10px;
  }

  .marketplaces-directory__grid img {
    width: clamp(54px, 17vw, 74px);
    height: clamp(46px, 14vw, 64px);
  }

  .marketplaces-directory__grid img[src$="/amazon.svg"],
  .marketplaces-directory__grid img[src$="/whatnot.svg"] {
    width: clamp(72px, 22vw, 98px);
  }

  #connect {
    min-height: auto;
    padding-block: 92px;
  }

  #connect .connect__address {
    overflow-wrap: anywhere;
  }

  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
  }

  .selling-banner {
    grid-template-columns: 78px minmax(0, 1fr);
    height: 54px;
    gap: 0;
    margin-bottom: 32px;
    padding: 0 14px;
  }

  .selling-banner__title {
    text-align: left;
  }

  .selling-banner__group {
    gap: 30px;
    padding-right: 30px;
  }

  .site-footer__brand { grid-column: auto; }

  .site-footer__bottom {
    align-items: center;
    flex-direction: row;
    margin-top: 30px;
  }
}

@media (max-width: 720px) {
  #ventures {
    height: auto;
    min-height: 100svh;
    padding: 72px 18px;
  }

  .venture-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 30px;
    height: auto;
    padding: 0;
  }

  .venture-list__item {
    min-height: 54px;
    font-size: clamp(30px, 9vw, 46px);
  }

}

/* ---------- desktop composition audit ----------------------------------
   One shared scale keeps the chapters related without turning them into
   repeated cards. Mobile retains its own layout above. */
@media (min-width: 900px) {
  :root {
    --section-pad-x: clamp(42px, 5vw, 80px);
    --section-pad-y: clamp(82px, 9vh, 112px);
    --reading-width: 64rem;
    --content-width: 84rem;
  }

  .chrome.chrome__nav {
    top: clamp(22px, 2.8vh, 30px);
    right: clamp(28px, 3.5vw, 56px);
  }

  .scene--hero .hero__lockup {
    left: clamp(38px, 5vw, 80px);
    top: clamp(62px, 8vh, 84px);
    bottom: clamp(58px, 7vh, 76px);
    width: min(76vw, 68rem);
    max-width: calc(100vw - clamp(76px, 10vw, 160px));
    /* a real length, for the reason spelled out at the 721px breakpoint above */
    --mark-w: min(76vw, 68rem, calc(100vw - clamp(76px, 10vw, 160px)));
    align-content: center;
    transform: translateY(-1.5vh);
  }

  .scene--hero .hero__title {
    margin-bottom: clamp(18px, 2.5vh, 28px);
    /* Placed by eye over a run of nudges. The mark bleeds off the left edge
       and off the top on purpose — at a 1266x900 viewport the ink starts 54px
       outside the left and 17px above the top. */
    translate: -89px -118px;
  }

  .scene--hero .hero__details {
    width: min(66vw, 56rem);
    margin-left: clamp(124px, calc(3vw + 100px), 144px);
    transform: translateX(48px);
  }

  .scene--hero .hero__discipline-carousel {
    width: 100% !important;
  }

  .scene--hero .hero__pills {
    gap: clamp(9px, 1vw, 14px);
    margin-top: clamp(12px, 1.7vh, 18px);
    margin-left: clamp(100px, calc(5vw + 50px), 122px);
    translate: 148px 0;
  }

  #about {
    padding: clamp(96px, 11vh, 124px) var(--section-pad-x) clamp(104px, 12vh, 136px);
  }

  #about .chapter__hang {
    width: min(84vw, var(--reading-width));
  }

  #about .painting,
  #about .painting--portrait {
    padding: clamp(16px, 1.5vw, 22px);
  }

  #about .painting__canvas {
    gap: 1.04em;
    padding: clamp(42px, 4vw, 56px) clamp(48px, 5vw, 72px);
  }

  #about .painting__canvas p {
    max-width: 64ch;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.68;
  }

  #about .painting__canvas p:first-child {
    max-width: 31ch;
    font-size: clamp(28px, 2.5vw, 38px);
  }

  #building > .section-title {
    top: clamp(24px, 3vh, 32px);
  }

  #ventures {
    padding: clamp(62px, 7vh, 82px) clamp(32px, 4vw, 64px);
  }

  .venture-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.8vh, 20px) clamp(28px, 3.5vw, 54px);
    width: min(100%, 82rem);
    padding: 0;
  }

  .venture-list__item {
    min-height: 0;
    font-size: clamp(27px, 2.55vw, 44px);
    line-height: 0.94;
  }

  .chapters > .socials-section[data-panel="socials"] {
    padding: clamp(82px, 9vh, 104px) clamp(52px, 7vw, 112px);
  }

  .socials-section > .section-title {
    margin-bottom: clamp(34px, 4.5vh, 46px);
  }

  .socials-section .accounts {
    gap: clamp(22px, 3vh, 32px);
    width: min(100%, 82rem);
  }

  .socials-section .account,
  .socials-section .account:nth-child(even) {
    grid-template-columns: minmax(0, 1.25fr) minmax(150px, 0.6fr) minmax(210px, auto);
    gap: clamp(28px, 4vw, 64px);
  }

  .socials-section .account__handle {
    font-size: clamp(34px, 3.15vw, 49px);
  }

  .socials-section .account__links {
    gap: clamp(14px, 1.5vw, 22px);
  }

  #connect > .connect__block {
    width: min(100%, 52rem);
  }

  #connect .connect__title {
    margin-bottom: clamp(20px, 3vh, 32px);
    font-size: clamp(58px, 6vw, 82px);
  }

  #connect .connect__address {
    margin-bottom: clamp(34px, 5vh, 50px);
  }

  #connect .form {
    gap: 22px;
    width: min(100%, 46rem);
    margin-inline: auto;
  }

  #connect .field__input--area {
    min-height: 112px;
  }

  .selling-banner {
    margin-bottom: clamp(30px, 4vh, 40px);
  }

  .site-footer__inner,
  .site-footer__bottom {
    width: min(100%, 76rem);
  }

  .site-footer__inner {
    gap: clamp(30px, 4vw, 52px);
  }

  .site-footer__bottom {
    margin-top: 28px;
  }
}

/* Social typography follows the same condensed display language as the rest
   of the site. Supporting copy stays quiet so the handles remain the focus. */
.socials-section .account__handle {
  font-family: var(--display);
  font-size: clamp(38px, 4vw, 60px);
  font-stretch: 76%;
  font-style: normal;
  font-weight: 800;
  font-variation-settings: "wdth" 76, "wght" 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: none;
}

.chapters > .socials-section[data-panel="socials"],
.socials-section .accounts {
  margin-inline: auto;
}

.socials-section .account__desc {
  letter-spacing: 0.14em;
}

/* Contact is centered as a complete chapter, not only as centered text inside
   a narrow left-aligned section. Its type reuses the display/utility pairing
   already established by the social directory and the rest of the site. */
#connect {
  width: 100%;
  margin-inline: auto;
  padding-top: clamp(104px, 13vh, 156px);
  padding-right: var(--section-pad-x);
  padding-bottom: clamp(300px, 38vh, 440px);
  padding-left: var(--section-pad-x);
}

#connect > .connect__block {
  width: min(100%, 52rem);
  margin-inline: auto;
  text-align: center;
}

#connect .connect__title {
  max-width: 100%;
  margin-bottom: 10px;
  margin-right: auto;
  margin-left: auto;
  font-family: var(--display);
  font-size: clamp(54px, 7vw, 96px);
  font-stretch: 76%;
  font-style: normal;
  font-weight: 800;
  font-variation-settings: "wdth" 76, "wght" 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-align: center;
}

#connect .form,
#connect .field {
  margin-right: auto;
  margin-left: auto;
  justify-items: center;
}

#connect .form {
  gap: 18px;
}

#connect .field {
  gap: 7px;
}

#connect .field__label,
#connect .field__input,
#connect .button {
  font-family: var(--mono);
}

#connect .field__label,
#connect .field__input {
  text-align: center;
}

@media (max-width: 900px) {
  .socials-section .accounts {
    gap: 56px;
  }

  .socials-section .account,
  .socials-section .account:nth-child(even) {
    gap: 7px;
  }

  .socials-section .account__handle {
    font-size: clamp(34px, 11.5vw, 46px);
    line-height: 0.9;
    letter-spacing: -0.04em;
  }

  .socials-section .account__links {
    margin-top: 8px;
  }

  #connect {
    padding-top: 104px;
    padding-right: clamp(22px, 7vw, 36px);
    padding-bottom: clamp(250px, 36vh, 340px);
    padding-left: clamp(22px, 7vw, 36px);
  }

  #connect .connect__title {
    font-size: clamp(48px, 15vw, 68px);
  }

}

/* The footer remains a conventional, quiet ending. */
.chapters > .site-footer,
.site-footer {
  padding: clamp(76px, 10vh, 116px) 0 28px;
}

@media (max-width: 900px) {
  .chapters > .site-footer,
  .site-footer {
    padding-top: 72px;
  }
}

/* Final directory rhythm: ventures carry more presence, while Socials is one
   centered, open list rather than alternating between competing alignments. */
.venture-list__item {
  font-size: clamp(30px, 2.85vw, 50px);
}

.chapters > .socials-section[data-panel="socials"] {
  width: 100%;
  margin-inline: auto;
}

.socials-section > .section-title {
  width: 100%;
  text-align: center;
}

.socials-section .accounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(42px, 6vh, 64px);
  width: min(100%, 58rem);
  margin-inline: auto;
}

.socials-section .account,
.socials-section .account:nth-child(even),
.socials-section .account:last-child:nth-child(odd) {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.socials-section .account__handle {
  font-size: clamp(34px, 3.6vw, 54px);
  line-height: 0.9;
  text-align: center;
}

.socials-section .account__desc {
  text-align: center;
}

.socials-section .account__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2vw, 26px);
  width: 100%;
  margin: 7px auto 0;
}

@media (hover: hover) {
  .socials-section .account:hover .account__handle,
  .socials-section .account:nth-child(even):hover .account__handle {
    transform: none;
  }
}

/* Let's Connect is a compact invitation followed immediately by the form. */
#connect .connect__title {
  margin-bottom: clamp(24px, 3.5vh, 34px);
}

#connect .form {
  gap: 13px;
  width: min(100%, 46rem);
}

#connect .field {
  gap: 5px;
}

#connect .field__input {
  padding-block: 12px;
}

#connect .field__input--area {
  min-height: 98px;
}

#connect .button {
  margin-top: 3px;
}

@media (max-width: 900px) {
  .venture-list__item {
    font-size: clamp(32px, 9.6vw, 50px);
  }

  .socials-section .accounts {
    gap: 48px;
  }

  .socials-section .account__handle {
    font-size: clamp(30px, 10.4vw, 42px);
  }

  .socials-section .account__links {
    margin-top: 6px;
  }

  #connect .connect__title {
    margin-bottom: 24px;
  }

  #connect .form {
    gap: 12px;
  }

  #connect .field__input--area {
    min-height: 94px;
  }
}

/* ============================================================================
 *  THE MARK'S SCRIM — legibility for light type over a busy scene
 *  ---------------------------------------------------------------------------
 *  The wordmark is set near-white and the background is a detailed pixel
 *  painting whose upper half is pale sky and whose left is sunlit villas and
 *  foliage. Light type on light, textured ground is the one arrangement that
 *  cannot be solved by choosing a better colour: wherever the mark is legible
 *  over the water it is lost over the terraces, and the scene changes every
 *  thirty seconds, so no single ink works against all of them.
 *
 *  So the SCENE is darkened locally instead of the type being restyled. This is
 *  the ordinary way type is set over photography — a soft elliptical scrim,
 *  strongest under the mark and gone well before the frame edge, carrying no
 *  edge of its own. It reads as depth in the picture, not as a panel on top of
 *  it, which is why it does not become the "box" a plate would be.
 *
 *  WARM, NOT BLACK. Pure black over a sunset turns the scene grey and dead. The
 *  scrim is mixed from the page's own ink, which is a warm near-black, so the
 *  picture keeps its colour while losing its brightness.
 *
 *  `isolation: isolate` is load-bearing. The scrim sits at `z-index: -1` so it
 *  paints behind the mark and the details; without an explicit stacking context
 *  on the lockup that -1 escapes the lockup entirely and lands behind the
 *  scenery, where it does nothing at all.
 * ========================================================================== */
.scene--hero .hero__lockup {
  isolation: isolate;
}

.scene--hero .hero__lockup::before {
  content: "";
  position: absolute;
  /* generous bleed so the falloff finishes off-frame rather than at an edge */
  inset: -14% -22% -16% -18%;
  z-index: -1;
  pointer-events: none;
  /* A WHISPER, AND THE GLYPHS DO THE REST.
   *
   * This went the wrong way twice. First it was a narrow spotlight that left
   * the mark's outer thirds at 2.26:1 against the scene's brightest pixels.
   * Then it was widened and driven to 0.76 alpha to fix that by force — which
   * did fix the contrast, and flattened the pixel painting into a grey slab in
   * the process. The scrim was solving a LOCAL problem — a thin glyph against
   * a bright pixel — with a GLOBAL one, darkening thousands of pixels that
   * never had a legibility issue.
   *
   * Contrast belongs at the letterform. `.hero__wordmark`'s own text-shadow
   * (hero-type.css) puts a near-opaque core right against each character, so a
   * glyph carries its own ground wherever it lands and the scene survives
   * everywhere it does not. This is now only what a scrim should be: enough
   * tonal separation that the mark reads as sitting IN FRONT of the picture,
   * not a plate it is printed on. */
  background:
    radial-gradient(
      72% 62% at 40% 44%,
      color-mix(in srgb, var(--ink) 30%, transparent),
      color-mix(in srgb, var(--ink) 18%, transparent) 55%,
      transparent 88%
    );
  filter: blur(18px);
}

/* On a phone the lockup is centred and the scene is cropped much tighter, so
   the scrim is centred with it and pulled in — the wide left-weighted wash
   above would darken most of a 375px frame. */