/* ==========================================================================
   chapters.css
   Shared styling for About / Ventures / Projects / Connect
   ========================================================================== */

   * {
    box-sizing: border-box;
  }

  html {
    min-height: 100%;
    background: var(--field);
    scroll-behavior: smooth;
  }

  html,
  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;

    touch-action: pan-y;
    overscroll-behavior-y: auto;
  }

  body {
    position: relative;

    background: var(--field);
    color: var(--ink);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
  }

  .sr-only,
  .chapter__label {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip-path: inset(50%);

    white-space: nowrap;

    border: 0;
  }

  :focus-visible {
    outline: 2px solid var(--on-art);
    outline-offset: 4px;
  }


  /* ==========================================================================
     SKIP LINK
     ========================================================================== */

  .skip {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 100;

    padding: 10px 12px;

    background: var(--ink);
    color: var(--field);

    font: 500 var(--label-size) / 1 var(--mono);

    letter-spacing: var(--label-track);

    text-decoration: none;
    text-transform: uppercase;

    transform: translateY(-220%);
  }

  .skip:focus {
    transform: none;
  }


  /* ==========================================================================
     BACKGROUND WORLD
     ========================================================================== */

  .chapter-scenery.scenery,
  #scenery.scenery {
    position: fixed;

    inset: 0;

    z-index: 0;

    width: 25%;
    height: 25%;

    pointer-events: none;

    transform: scale(4);
    transform-origin: 0 0;

    image-rendering: pixelated;
  }

  .chapter-scenery .pixel-world,
  .chapter-scenery .pixel-world > i {
    image-rendering: pixelated;
  }

  .chapter-scenery .pixel-world.is-on,
  .chapter-scenery .pixel-world.is-on .sky {
    animation: none !important;
  }

  .chapter-scenery .pixel-world.is-on::after {
    display: none !important;
    animation: none !important;
  }

  .chapter-glass {
    position: fixed;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: none;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }


  /* ==========================================================================
     PAGE SHELL
     ========================================================================== */

  .chapter {
    position: relative;

    z-index: 2;

    width: min(
      calc(100% - clamp(24px, 5vw, 72px)),
      1080px
    );

    min-height: 100svh;

    margin-inline: auto;

    padding-top:
      calc(
        clamp(20px, 3vh, 32px)
        + 56px
      );

    overflow: visible;
  }

  main {
    width: 100%;
    overflow: visible;
  }

  .chapter__body {
    display: grid;

    justify-items: center;
    align-content: center;

    gap: clamp(22px, 4.4vh, 46px);

    padding-block:
      clamp(28px, 6vh, 76px);
  }

  .chapter__body--exhibit {
    width: 100%;
    min-height: calc(100svh - 150px);
  }

  .chapter__hang {
    display: grid;

    justify-items: center;
    align-content: center;

    gap: clamp(20px, 4vh, 42px);

    padding-block:
      clamp(28px, 6vh, 76px);
  }


  /* ==========================================================================
     NAVIGATION
     ========================================================================== */

  .chapter-nav {
    position: fixed;

    top: clamp(20px, 3vh, 32px);
    left: clamp(14px, 2vw, 32px);
    right: clamp(14px, 2vw, 32px);

    z-index: 40;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    height: 28px;
  }

  .chapter-nav a {
    position: relative;

    padding-block: 4px;

    font:
      550
      clamp(12px, 0.9vw, 14px)
      / 1
      var(--mono);

    letter-spacing: 0.16em;

    text-transform: uppercase;
    text-decoration: none;

    color: var(--on-art);

    text-shadow: var(--edge-crisp);

    transition:
      color 180ms linear,
      transform 300ms var(--ease-out);
  }

  .chapter-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: var(--hair);

    background: currentColor;

    transform: scaleX(0);

    transform-origin: center;

    transition:
      transform
      var(--t-fast)
      var(--ease-out);
  }

  .chapter-nav a:hover,
  .chapter-nav a:focus-visible {
    color: #fff;
  }

  .chapter-nav a:hover::after,
  .chapter-nav a:focus-visible::after {
    transform: scaleX(1);
  }

  .chapter-nav [aria-current="page"] {
    text-decoration: underline;

    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }

  .chapter-nav__home {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-inline-start: -10px;

    padding: 10px;
  }

  .chapter-nav__home span[aria-hidden] {
    display: inline-block;

    font-size: 28px;
    font-weight: 800;

    line-height: 1;

    transition:
      transform
      var(--t-fast)
      linear;
  }

  .chapter-nav__links {
    display: flex;

    gap:
      clamp(
        14px,
        2.2vw,
        34px
      );
  }

  @media (hover: hover) {

    .chapter-nav__home:hover span[aria-hidden] {
      transform: translateX(-3px);
    }

  }


  /* ==========================================================================
     SECTION HEADINGS
     ========================================================================== */

  .section-title {
    display: block;

    width: 100%;

    margin:
      0
      0
      clamp(22px, 3.4vh, 36px);

    padding:
      0
      0
      clamp(12px, 1.8vh, 16px);

    border-bottom:
      var(--hair)
      solid
      var(--on-art-line);

    font-family: var(--prose);

    font-size:
      clamp(
        30px,
        4.6vw,
        46px
      );

    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -0.028em;

    text-align: center;

    color: var(--on-art);

    text-shadow: var(--edge-strong);
  }

  .section-title--chapter {
    margin-bottom:
      clamp(30px, 5vh, 56px);

    font-size:
      clamp(
        48px,
        9vw,
        92px
      );

    letter-spacing:
      -0.038em;
  }


  /* ==========================================================================
     ABOUT BIOGRAPHY
     ========================================================================== */

  .painting,
  .painting--portrait,
  .painting--small {
    position: relative;

    width: min(100%, 34rem);

    margin: 0;
    padding: 0;

    background: none;

    box-shadow: none;
  }

  .painting::before,
  .painting::after {
    content: none;
  }

  .painting__mat {
    padding: 0;

    background: none;
  }

  .painting__canvas {
    display: grid;

    gap: 1.05em;

    padding:
      clamp(22px, 3.4vw, 36px)
      clamp(20px, 2.8vw, 32px);

    border:
      var(--hair)
      solid
      var(--plate-edge);

    border-radius:
      var(--panel-radius);

    background:
      var(--plate);

    -webkit-backdrop-filter:
      blur(var(--plate-blur));

    backdrop-filter:
      blur(var(--plate-blur));
  }

  .painting__canvas p {
    margin: 0;

    font-family:
      var(--prose);

    font-size:
      clamp(
        16px,
        1.05vw,
        18px
      );

    line-height:
      1.65;

    color:
      var(--on-art);

    text-shadow:
      var(--edge-crisp);
  }

  .painting__canvas p:first-child {
    font-size:
      clamp(
        19px,
        1.35vw,
        23px
      );

    line-height:
      1.5;
  }

  .painting__plate {
    margin: 0;

    font:
      var(--label-weight)
      var(--label-size)
      / 1
      var(--prose);

    letter-spacing:
      var(--label-track);

    text-transform:
      uppercase;

    color:
      var(--on-art-dim);

    text-shadow:
      var(--edge-crisp);
  }

  .painting-pair {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      clamp(
        16px,
        3vw,
        40px
      );

    width:
      min(100%, 620px);
  }


  /* ==========================================================================
     GENERIC STRATA
     ========================================================================== */

  .strata {
    width:
      min(
        100%,
        46rem
      );

    margin-inline:
      auto;

    margin-top:
      clamp(
        90px,
        13vh,
        150px
      );
  }


  /* ==========================================================================
     STUDYING
     ========================================================================== */

  .studying-section {
    display: grid;

    justify-items: center;

    width:
      min(
        100%,
        52rem
      );

    margin:
      clamp(
        100px,
        14vh,
        160px
      )
      auto
      0;

    padding: 0;

    border: 0;

    background: none;
  }

  .studying-section .section-title {
    width:
      min(
        100%,
        46rem
      );

    margin:
      0
      auto
      clamp(
        42px,
        6vh,
        66px
      );
  }

  .areas {
    display: grid;

    grid-template-columns:
      1fr;

    justify-items:
      center;

    gap:
      clamp(
        26px,
        4vh,
        44px
      );

    width:
      100%;

    margin: 0;
    padding: 0;

    list-style: none;

    text-align: center;
  }

  .areas > li {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: center;
  }

  .area {
    appearance: none;

    display: inline-block;

    width: auto;

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 0;

    background: none;

    font-family:
      var(--prose);

    font-size:
      clamp(
        52px,
        7.2vw,
        104px
      );

    font-weight:
      400;

    line-height:
      0.95;

    letter-spacing:
      -0.04em;

    text-align:
      center;

    color:
      #ffffff;

    text-shadow:
      var(--edge-strong);

    cursor:
      pointer;

    transition:
      transform
      280ms
      var(--ease-out);
  }

  .area::after {
    content: none;
  }

  .area:hover,
  .area:focus-visible,
  .area[aria-pressed="true"] {
    transform:
      scale(1.045);
  }


  /* ==========================================================================
     BUILDING WITH
     4 logos tall
     6 columns visible
     horizontal infinite carousel
     ========================================================================== */

  .stack-section,
  .strata.stack-section {
    width:
      calc(100vw - 14px);

    max-width:
      none;

    margin-left:
      50%;

    margin-right:
      0;

    padding-inline:
      0;

    transform:
      translateX(-50%);

    overflow:
      visible;
  }

  .stack-section {
    margin-top:
      clamp(
        110px,
        16vh,
        180px
      );
  }

  .stack-section .section-title {
    width:
      min(
        calc(100% - 28px),
        72rem
      );

    margin-inline:
      auto;
  }

  .stack-count {
    display: block;

    margin:
      -18px
      0
      20px;

    font:
      400
      clamp(10px, 0.78vw, 12px)
      / 1
      var(--mono);

    letter-spacing:
      0.18em;

    text-transform:
      uppercase;

    text-align:
      center;

    color:
      var(--on-art-dim);

    text-shadow:
      var(--edge-strong);
  }

  .stack-note {
    text-align:
      center;
  }

  .stack-carousel {
    --stack-gap-x:
      clamp(
        8px,
        1.2vw,
        16px
      );

    --stack-gap-y:
      clamp(
        10px,
        1.8vh,
        18px
      );

    --stack-cell:
      100px;

    position:
      relative;

    width:
      100%;

    height:
      calc(
        (4 * var(--stack-cell))
        +
        (3 * var(--stack-gap-y))
      );

    margin-top:
      clamp(
        24px,
        4vh,
        38px
      );

    overflow:
      hidden;

    -webkit-mask-image:
      none;

    mask-image:
      none;
  }

  .stack-track {
    display:
      block;

    width:
      100%;

    height:
      100%;

    margin:
      0;

    padding:
      0;

    animation:
      none;

    transform:
      none;

    overflow:
      visible;
  }

  .stack-carousel .stack-grid {
    display:
      grid;

    grid-template-rows:
      repeat(
        4,
        var(--stack-cell)
      );

    grid-auto-flow:
      column;

    grid-auto-columns:
      var(--stack-cell);

    column-gap:
      var(--stack-gap-x);

    row-gap:
      var(--stack-gap-y);

    justify-content:
      start;

    justify-items:
      center;

    align-items:
      center;

    width:
      max-content;

    max-width:
      none;

    margin:
      0;

    padding:
      0;

    list-style:
      none;

    will-change:
      transform;
  }

  .stack-carousel .stack-grid > li {
    display:
      grid;

    place-items:
      center;

    width:
      var(--stack-cell);

    height:
      var(--stack-cell);

    min-width:
      var(--stack-cell);

    min-height:
      var(--stack-cell);

    max-width:
      var(--stack-cell);

    max-height:
      var(--stack-cell);

    margin:
      0;

    padding:
      clamp(
        2px,
        0.35vw,
        5px
      );

    border:
      0;

    background:
      none;

    opacity:
      1;

    transform:
      none;

    overflow:
      visible;
  }

  .stack-carousel .stack-grid > li img {
    display:
      block;

    width:
      70%;

    height:
      70%;

    max-width:
      70%;

    max-height:
      70%;

    object-fit:
      contain;

    transition:
      transform
      260ms
      var(--ease-out);
  }

  .stack-carousel
  .stack-grid
  > li:not([data-ink="mono"])
  img {
    filter:
      drop-shadow(
        0
        1px
        1px
        rgba(4, 3, 2, 0.85)
      )
      drop-shadow(
        0
        2px
        5px
        rgba(4, 3, 2, 0.45)
      );
  }

  .stack-carousel
  .stack-grid
  > li[data-ink="mono"]
  img {
    filter:
      brightness(0)
      invert(1)
      drop-shadow(
        0
        1px
        1px
        rgba(4, 3, 2, 0.85)
      )
      drop-shadow(
        0
        2px
        5px
        rgba(4, 3, 2, 0.45)
      );
  }

  .stack-carousel
  [data-carousel-spacer] {
    visibility:
      hidden;

    pointer-events:
      none;
  }

  .stack-carousel
  [data-carousel-clone] {
    pointer-events:
      none;
  }

  /* Hide old vertical-carousel clones if studio.js creates them. */

  .stack-grid--clone {
    display:
      none !important;
  }

  /* Prevent reveal animation from fighting the carousel. */

  .stack-carousel [data-reveal],
  .stack-carousel [data-reveal].is-in {
    opacity:
      1;

    transform:
      none;
  }

  @media (hover: hover) {

    .stack-carousel
    .stack-grid
    > li:hover
    img {
      transform:
        scale(1.1);
    }

  }


  /* ==========================================================================
     REMOVE OLD TIMELINE COMPLETELY
     ========================================================================== */

  .timeline,
  .timeline-section,
  .decade,
  .timeline__year,
  .timeline__content,
  .timeline__sentence,
  .decade__row,
  .decade__year,
  .decade__body,
  .decade__what,
  .decade__note {
    display:
      none !important;
  }


  /* ==========================================================================
     VENTURES
     ========================================================================== */

  .venture-project-page {
    width:
      100%;

    padding:
      clamp(40px, 7vh, 80px)
      0
      clamp(100px, 14vh, 180px);
  }

  .venture-section {
    display:
      grid;

    justify-items:
      center;

    width:
      100%;
  }

  .venture-index {
    display:
      grid;

    gap:
      clamp(
        14px,
        2vh,
        24px
      );

    width:
      min(
        100%,
        64rem
      );

    margin-inline:
      auto;

    padding:
      clamp(
        34px,
        5vh,
        58px
      )
      0;

    border:
      0;

    background:
      none;
  }

  .venture {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      100%;

    min-height:
      clamp(
        82px,
        10vh,
        116px
      );

    padding:
      clamp(
        10px,
        1.4vh,
        16px
      )
      12px;

    border:
      0;

    background:
      none;

    text-align:
      center;

    text-decoration:
      none;

    transition:
      transform
      320ms
      var(--ease-out);
  }

  .venture__name {
    display:
      block;

    width:
      100%;

    font-family:
      var(--prose);

    font-size:
      clamp(
        46px,
        6.2vw,
        82px
      );

    font-weight:
      400;

    line-height:
      0.94;

    letter-spacing:
      -0.018em;

    word-spacing:
      0.08em;

    text-align:
      center;

    color:
      #fff8ef;

    text-shadow:
      0
      2px
      2px
      rgba(0, 0, 0, 0.92),
      0
      6px
      18px
      rgba(0, 0, 0, 0.42);
  }

  .venture__mark {
    display:
      none;
  }

  a.venture:hover,
  a.venture:focus-visible {
    transform:
      scale(1.03);
  }

  a.venture:hover .venture__name,
  a.venture:focus-visible .venture__name {
    color:
      #ffffff;
  }


  /* ==========================================================================
     PROJECTS
     ========================================================================== */

  .projects-section {
    width:
      min(
        100%,
        46rem
      );

    margin:
      clamp(140px, 18vh, 220px)
      auto
      clamp(80px, 10vh, 120px);

    padding:
      clamp(24px, 3.4vh, 34px)
      clamp(22px, 3vw, 30px);

    border:
      var(--hair)
      solid
      var(--plate-edge);

    border-radius:
      var(--panel-radius);

    background:
      var(--plate);

    -webkit-backdrop-filter:
      blur(var(--plate-blur));

    backdrop-filter:
      blur(var(--plate-blur));
  }

  .projects-section__title {
    width:
      100%;

    margin:
      0
      0
      clamp(18px, 2.6vh, 24px);

    padding-bottom:
      clamp(
        12px,
        1.8vh,
        16px
      );

    border-bottom:
      var(--hair)
      solid
      var(--on-art-line);

    font-family:
      var(--prose);

    font-size:
      clamp(
        26px,
        3.6vw,
        38px
      );

    font-weight:
      400;

    line-height:
      1.05;

    letter-spacing:
      -0.02em;

    color:
      var(--on-art);

    text-shadow:
      var(--edge-strong);
  }

  .project-list {
    display:
      grid;

    width:
      100%;

    margin:
      0;

    padding:
      0;
  }

  .project-item {
    display:
      flex;

    align-items:
      center;

    width:
      100%;

    min-height:
      clamp(
        64px,
        8vh,
        82px
      );

    padding:
      clamp(
        12px,
        1.8vh,
        17px
      )
      0;

    border:
      0;

    border-top:
      var(--hair)
      solid
      var(--plate-edge);

    background:
      none;

    font-family:
      var(--prose);

    font-size:
      clamp(
        28px,
        3.2vw,
        42px
      );

    font-weight:
      400;

    line-height:
      1;

    letter-spacing:
      -0.025em;

    color:
      rgba(
        255,
        255,
        255,
        0.88
      );

    text-decoration:
      none;

    text-shadow:
      var(--edge-crisp);

    transition:
      color
      180ms
      linear,
      transform
      260ms
      var(--ease-out);
  }

  .project-item:first-child {
    border-top:
      0;
  }

  @media (hover: hover) {

    .project-item:hover,
    .project-item:focus-visible {
      color:
        #ffffff;

      transform:
        translateX(8px);
    }

  }


  /* ==========================================================================
     CONNECT
     ========================================================================== */

  .connect {
    display:
      block;

    width:
      100%;

    max-width:
      46rem;

    margin-inline:
      auto;

    padding:
      clamp(8px, 2vh, 24px)
      0
      clamp(56px, 10vh, 96px);
  }

  .connect__block {
    width:
      100%;

    margin-block:
      clamp(
        26px,
        4.6vh,
        46px
      );

    padding:
      clamp(20px, 3.2vh, 32px)
      clamp(18px, 2.6vw, 28px);

    border:
      var(--hair)
      solid
      var(--plate-edge);

    border-radius:
      var(--panel-radius);

    background:
      var(--plate);

    -webkit-backdrop-filter:
      blur(var(--plate-blur));

    backdrop-filter:
      blur(var(--plate-blur));
  }

  .connect__block--open {
    margin-top:
      0;

    padding:
      0;

    border:
      0;

    background:
      none;

    -webkit-backdrop-filter:
      none;

    backdrop-filter:
      none;

    text-align:
      center;
  }

  .connect__block--last {
    margin-bottom:
      0;
  }

  .connect__kicker,
  .connect__kicker--outside {
    width:
      100%;

    margin:
      0
      0
      clamp(14px, 2.2vh, 20px);

    padding-bottom:
      clamp(
        12px,
        1.8vh,
        16px
      );

    border-bottom:
      var(--hair)
      solid
      var(--on-art-line);

    font-family:
      var(--prose);

    font-size:
      clamp(
        26px,
        3.6vw,
        38px
      );

    font-weight:
      400;

    line-height:
      1.05;

    letter-spacing:
      -0.02em;

    text-align:
      center;

    color:
      var(--on-art);

    text-shadow:
      var(--edge-strong);
  }

  .connect__title {
    margin:
      0
      0
      12px;

    font-family:
      var(--prose);

    font-size:
      clamp(
        28px,
        5vw,
        44px
      );

    font-weight:
      400;

    line-height:
      1.05;

    letter-spacing:
      -0.025em;

    color:
      var(--on-art);
  }

  .connect__address {
    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    gap:
      8px;

    width:
      auto;

    margin-inline:
      auto;

    padding-block:
      10px;

    border-bottom:
      var(--hair)
      solid
      var(--on-art-line);

    font:
      400
      clamp(14px, 1.4vw, 17px)
      / 1.2
      var(--mono);

    color:
      var(--on-art-soft);

    text-align:
      center;

    text-decoration:
      none;
  }

  .connect__address i {
    font-style:
      normal;
  }


  /* ==========================================================================
     FORM
     ========================================================================== */

  .form {
    display:
      grid;

    gap:
      clamp(
        16px,
        2.6vh,
        22px
      );

    width:
      100%;

    margin-top:
      clamp(
        26px,
        4vh,
        38px
      );

    text-align:
      left;
  }

  .field {
    display:
      grid;

    gap:
      8px;

    margin:
      0;
  }

  .field__label {
    font:
      500
      clamp(11px, 0.82vw, 13px)
      / 1
      var(--mono);

    letter-spacing:
      0.16em;

    text-transform:
      uppercase;

    color:
      var(--on-art-soft);

    text-shadow:
      var(--edge-strong);
  }

  .field__input {
    width:
      100%;

    padding:
      13px
      14px;

    border:
      var(--hair)
      solid
      var(--on-art-line);

    border-radius:
      3px;

    background:
      var(--surface-subtle);

    font:
      400
      16px
      / 1.45
      var(--mono);

    color:
      var(--on-art);

    -webkit-backdrop-filter:
      blur(3px);

    backdrop-filter:
      blur(3px);
  }

  .field__input--area {
    min-height:
      8.5em;

    resize:
      vertical;
  }

  .field__input::placeholder {
    color:
      var(--on-art-dim);
  }

  .field__input:focus {
    outline:
      none;

    background:
      var(--surface-medium);

    border-color:
      var(--on-art);
  }

  .button {
    justify-self:
      center;

    min-height:
      46px;

    padding:
      13px
      30px;

    border:
      var(--hair)
      solid
      var(--on-art-line);

    border-radius:
      4px;

    background:
      var(--surface-medium);

    color:
      var(--on-art);

    font:
      500
      clamp(11px, 0.9vw, 13px)
      / 1
      var(--mono);

    letter-spacing:
      0.16em;

    text-transform:
      uppercase;

    cursor:
      pointer;
  }


  /* ==========================================================================
     SOCIALS
     ========================================================================== */

  .connect-socials-section {
    display:
      grid;

    justify-items:
      center;

    width:
      100%;

    margin-block:
      clamp(
        42px,
        7vh,
        72px
      );
  }

  .connect-socials-box {
    width:
      100%;
  }

  .accounts {
    display:
      grid;

    gap:
      clamp(
        12px,
        2vh,
        18px
      );

    width:
      100%;

    margin:
      0;

    padding:
      0;

    list-style:
      none;
  }

  /* NO BOX. This was a boxed panel — background, border, border-radius, a 5px
     blur — sitting inside a page whose whole point is that "Send a message"
     has none of those. A hairline divider between accounts is the only
     structure left; the text itself sits straight on the photo, same as the
     address above it. */
  .account {
    display:
      grid;

    justify-items:
      center;

    gap:
      5px;

    width:
      100%;

    padding-block:
      clamp(
        18px,
        2.8vh,
        24px
      );

    border-top:
      0;

    text-align:
      center;
  }

  .account:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .account__handle {
    font-family:
      var(--prose);

    font-size:
      clamp(
        58px,
        7.4vw,
        96px
      );

    font-weight:
      400;

    line-height:
      1;

    letter-spacing:
      -0.03em;

    color:
      #ffffff;
  }

  .account__desc {
    font:
      500
      clamp(11px, 0.85vw, 13px)
      / 1.2
      var(--mono);

    letter-spacing:
      0.12em;

    text-transform:
      uppercase;

    color:
      rgba(
        255,
        255,
        255,
        0.58
      );
  }

  .account__links {
    display:
      flex;

    flex-wrap:
      wrap;

    justify-content:
      center;

    gap:
      8px
      20px;

    margin-top:
      8px;
  }

  .account__links a {
    display:
      inline-flex;

    align-items:
      center;

    gap:
      8px;

    min-height:
      40px;

    font:
      500
      clamp(14px, 1.12vw, 18px)
      / 1
      var(--mono);

    color:
      rgba(
        255,
        255,
        255,
        0.82
      );

    text-decoration:
      none;
  }

  .account__links img {
    width:
      26px;

    height:
      26px;

    filter:
      brightness(0)
      invert(1);

    opacity:
      0.85;
  }


  /* ==========================================================================
     MARKETPLACES
     ========================================================================== */

  .markets {
    display:
      grid;

    gap:
      clamp(
        10px,
        1.8vh,
        16px
      );

    width:
      100%;

    margin:
      0;

    padding:
      0;

    list-style:
      none;
  }

  /* SAME PANEL AS .account, ON PURPOSE. This carried a different background
     (rgba(253,250,243,0.05) — a near-white wash) and no backdrop-filter at
     all, while Socials' .account used a dark blurred glass panel — three
     containers on the same page, two different materials. NO BOX ON EITHER
     ONE NOW: matching "Send a message" meant losing the panel entirely, not
     giving Marketplaces/Elsewhere .account's box — a hairline divider is the
     only structure, same treatment as .account right above. */
  .markets a,
  .markets__soon {
    position:
      relative;

    display:
      grid;

    grid-auto-flow:
      column;

    justify-content:
      center;

    align-items:
      center;

    gap:
      12px;

    padding-block:
      clamp(18px, 2.8vh, 24px);

    border-top:
      var(--hair)
      solid
      var(--on-art-line-faint);

    font:
      400
      clamp(15px, 1.5vw, 18px)
      / 1.2
      var(--prose);

    color:
      var(--on-art);

    text-decoration:
      none;
  }

  .markets li:first-child a,
  .markets li:first-child .markets__soon {
    border-top: 0;
    padding-top: 0;
  }

  .markets__logo {
    display:
      grid;

    place-items:
      center;

    width:
      40px;

    height:
      40px;
  }

  .markets__logo img {
    width:
      100%;

    height:
      100%;

    object-fit:
      contain;

    filter:
      drop-shadow(
        0
        1px
        1px
        rgba(4, 3, 2, 0.85)
      )
      drop-shadow(
        0
        2px
        5px
        rgba(4, 3, 2, 0.5)
      );
  }

  .markets__logo[data-ink="mono"] img {
    filter:
      brightness(0)
      invert(1)
      drop-shadow(
        0
        1px
        1px
        rgba(4, 3, 2, 0.85)
      );
  }

  .markets__name {
    flex:
      0
      0
      auto;
  }

  /* IN THE GRID FLOW, NOT PINNED TO THE EDGE. This used to sit at
     position:absolute/right — which took the arrow (or "Soon") out of the
     centered logo+name group entirely, so that pair centered against the
     full row width instead of against the row's actual visible content.
     Against a row that already spans nearly the full column width, that
     read as the logo+name sitting left of center with dead space on the
     right. Letting it flow as a third grid-auto-flow column keeps the
     whole visible cluster — logo, name, arrow/soon — centered as one unit. */
  .markets a > i,
  .markets__soon > i {
    font-style:
      normal;

    font-size:
      0.8em;

    color:
      var(--on-art-dim);
  }

  .markets__soon {
    color:
      var(--on-art-dim);
  }


  /* ==========================================================================
     HOMEPAGE SHARED COMPONENTS
     Keep these — index.html uses them.
     ========================================================================== */

  .stage > *,
  .chapters {
    position:
      relative;

    z-index:
      2;
  }

  .chapters {
    display:
      grid;

    width:
      100%;
  }

  .chrome {
    position:
      fixed;
  }

  .chapter-block {
    width:
      min(
        calc(100% - clamp(24px, 6vw, 72px)),
        46rem
      );

    margin-inline:
      auto;

    padding-block:
      clamp(
        64px,
        12vh,
        140px
      );

    scroll-margin-top:
      clamp(
        70px,
        10vh,
        96px
      );
  }

  .chapter-block__title {
    margin:
      0
      0
      clamp(
        26px,
        4.5vh,
        48px
      );

    font-family:
      var(--prose);

    font-size:
      clamp(
        46px,
        9vw,
        92px
      );

    font-weight:
      400;

    line-height:
      0.98;

    letter-spacing:
      -0.035em;

    text-align:
      center;

    color:
      var(--on-art);

    text-shadow:
      var(--edge-strong);
  }

  .chapter-block .chapter__body,
  .chapter-block .chapter__body--exhibit {
    display:
      block;

    width:
      100%;

    min-height:
      0;

    padding-block:
      0;
  }

  .chapter-block .strata,
  .chapter-block .venture-index,
  .chapter-block .connect,
  .chapter-block .painting,
  .chapter-block .painting--portrait {
    width:
      100%;

    max-width:
      none;
  }


  /* ==========================================================================
     HOMEPAGE METRICS
     5,000+ / $250K+ / 25M+
     ========================================================================== */

  .record,
  .figures__list {
    display:
      flex;

    flex-wrap:
      wrap;

    justify-content:
      center;

    align-items:
      flex-start;

    gap:
      clamp(
        24px,
        6vw,
        64px
      );

    width:
      100%;

    margin:
      clamp(
        28px,
        4.5vh,
        48px
      )
      auto
      0;

    padding:
      0;

    list-style:
      none;
  }

  .record__item,
  .figure {
    appearance:
      none;

    display:
      grid;

    justify-items:
      center;

    gap:
      7px;

    min-width:
      clamp(
        86px,
        10vw,
        130px
      );

    margin:
      0;

    padding:
      0;

    border:
      0;

    border-radius:
      0;

    background:
      none;

    color:
      #ffffff;

    text-align:
      center;

    -webkit-backdrop-filter:
      none;

    backdrop-filter:
      none;
  }

  .record__item b,
  .figure__n {
    display:
      block;

    margin:
      0;

    font-family:
      var(--prose);

    font-size:
      clamp(
        30px,
        4.2vw,
        48px
      );

    font-weight:
      500;

    line-height:
      0.95;

    letter-spacing:
      -0.04em;

    color:
      #ffffff;

    text-shadow:
      0
      1px
      1px
      rgba(0, 0, 0, 0.75),
      0
      4px
      12px
      rgba(0, 0, 0, 0.22);
  }

  .record__item span,
  .figure__label {
    display:
      block;

    margin:
      0;

    font:
      500
      clamp(9px, 0.74vw, 11px)
      / 1.2
      var(--mono);

    letter-spacing:
      0.18em;

    text-transform:
      uppercase;

    color:
      rgba(
        255,
        255,
        255,
        0.72
      );

    text-shadow:
      var(--edge-crisp);
  }

  .figure__note {
    display:
      none;
  }


  /* ==========================================================================
     REVEALS
     ========================================================================== */

  [data-reveal] {
    opacity:
      0;

    transform:
      translate3d(
        0,
        18px,
        0
      );

    transition:
      opacity
      620ms
      var(--ease-out),
      transform
      620ms
      var(--ease-out);

    transition-delay:
      calc(
        var(--i, 0)
        *
        45ms
      );
  }

  [data-reveal].is-in {
    opacity:
      1;

    transform:
      none;
  }


  /* ==========================================================================
     MOBILE
     ========================================================================== */

  @media (max-width: 720px) {

    :root {
      --gutter:
        22px;
    }

    .chapter {
      width:
        100%;

      padding-inline:
        max(
          var(--gutter),
          env(safe-area-inset-left)
        )
        max(
          var(--gutter),
          env(safe-area-inset-right)
        );

      padding-top:
        calc(
          max(
            14px,
            env(safe-area-inset-top)
          )
          +
          44px
          +
          20px
        );
    }

    .chapter-nav {
      top:
        max(
          14px,
          env(safe-area-inset-top)
        );

      left:
        max(
          var(--gutter),
          env(safe-area-inset-left)
        );

      right:
        max(
          var(--gutter),
          env(safe-area-inset-right)
        );

      height:
        44px;

      gap:
        12px;
    }

    .chapter-nav a {
      display:
        inline-flex;

      align-items:
        center;

      min-height:
        44px;

      padding-block:
        0;

      font-size:
        12px;

      letter-spacing:
        0.12em;
    }

    .chapter-nav__home {
      margin-inline-start:
        0;

      padding:
        0
        8px
        0
        0;
    }

    .chapter-nav__home span[aria-hidden] {
      font-size:
        22px;
    }

    .chapter-nav__links {
      gap:
        16px;
    }

    .chapter__body {
      justify-items:
        stretch;

      gap:
        clamp(
          20px,
          3.4vh,
          32px
        );

      padding:
        clamp(
          16px,
          3vh,
          28px
        )
        0
        clamp(
          44px,
          8vh,
          72px
        );
    }

    .chapter__body--exhibit {
      min-height:
        0;
    }

    .chapter__hang {
      display:
        block;
    }

    .painting-pair {
      grid-template-columns:
        1fr;
    }


    /* STUDYING */

    .studying-section {
      width:
        100%;

      margin-top:
        80px;
    }

    .studying-section .section-title {
      width:
        100%;

      margin-bottom:
        38px;
    }

    .areas {
      gap:
        24px;
    }

    .area {
      font-size:
        clamp(
          38px,
          11vw,
          54px
        );
    }


    /* BUILDING WITH */

    .stack-section,
    .strata.stack-section {
      width:
        calc(100vw - 8px);
    }

    .stack-section {
      margin-top:
        100px;
    }

    .stack-carousel {
      --stack-gap-x:
        5px;

      --stack-gap-y:
        8px;
    }

    .stack-carousel
    .stack-grid
    > li {
      padding:
        1px;
    }

    .stack-carousel
    .stack-grid
    > li
    img {
      width:
        72%;

      height:
        72%;

      max-width:
        72%;

      max-height:
        72%;
    }


    /* VENTURES */

    .venture-project-page {
      padding-top:
        28px;
    }

    .venture-index {
      gap:
        10px;

      padding:
        22px
        0;
    }

    .venture {
      min-height:
        72px;

      padding:
        8px
        4px;
    }

    .venture__name {
      font-size:
        clamp(
          34px,
          10vw,
          50px
        );
    }


    /* PROJECTS */

    .projects-section {
      width:
        100%;

      margin-top:
        100px;

      padding:
        22px
        18px;
    }

    .projects-section__title {
      font-size:
        clamp(
          26px,
          8vw,
          34px
        );
    }

    .project-item {
      min-height:
        60px;

      font-size:
        clamp(
          27px,
          8vw,
          36px
        );
    }


    /* CONNECT */

    .connect-socials-section {
      margin-block:
        34px
        54px;
    }

    .account {
      padding:
        18px
        14px;
    }

    .account__handle {
      font-size:
        clamp(
          48px,
          13vw,
          68px
        );
    }


    /* HOMEPAGE */

    .chapter-block {
      width:
        calc(100% - 32px);

      padding-block:
        clamp(
          52px,
          9vh,
          96px
        );
    }

    .chapter-block__title {
      font-size:
        clamp(
          42px,
          13vw,
          68px
        );
    }

    .record,
    .figures__list {
      gap:
        22px
        30px;
    }

    .record__item,
    .figure {
      min-width:
        82px;
    }

    .record__item b,
    .figure__n {
      font-size:
        clamp(
          27px,
          8vw,
          38px
        );
    }

    .record__item span,
    .figure__label {
      font-size:
        9px;
    }

  }


/* ==========================================================================
   CONNECT — MORE SECTION SPACING
   ========================================================================== */

/* More breathing room between each social account */
.connect .accounts {
  gap: clamp(24px, 4vh, 38px);
}


/* More space after the entire Socials section */
.connect .connect-socials-section {
  margin-top: clamp(50px, 8vh, 80px);
  margin-bottom: clamp(100px, 14vh, 150px);
}


/* More room between major Connect panels */
.connect .connect__block {
  margin-top: clamp(70px, 10vh, 110px);
  margin-bottom: clamp(70px, 10vh, 110px);
}


/* Specifically separates Marketplaces from Elsewhere */
.connect .connect__block + .connect__block {
  margin-top: clamp(110px, 15vh, 160px);
}


/* More breathing room inside Marketplace / Elsewhere lists */
.connect .markets {
  gap: clamp(16px, 2.5vh, 24px);
}


/* MOBILE */
@media (max-width: 720px) {

  .connect .accounts {
    gap: 26px;
  }

  .connect .connect-socials-section {
    margin-top: 50px;
    margin-bottom: 100px;
  }

  .connect .connect__block {
    margin-top: 70px;
    margin-bottom: 70px;
  }

  .connect .connect__block + .connect__block {
    margin-top: 110px;
  }

  .connect .markets {
    gap: 16px;
  }

}
/* ==========================================================================
   BUILDING WITH — MOBILE REBUILD
   Bigger checkerboard logos + better section styling under About frame
   Paste this at the VERY BOTTOM of styles/chapters.css
   ========================================================================== */

   #building {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.02) 100%
      ),
      radial-gradient(
        circle at 20% 20%,
        rgba(139, 113, 84, 0.05) 0,
        rgba(139, 113, 84, 0) 35%
      ),
      radial-gradient(
        circle at 80% 70%,
        rgba(139, 113, 84, 0.04) 0,
        rgba(139, 113, 84, 0) 36%
      ),
      #f3eee4;
    border-top: 1px solid rgba(70, 48, 29, 0.06);
    border-bottom: 1px solid rgba(70, 48, 29, 0.06);
  }

  #building::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      radial-gradient(rgba(89, 62, 38, 0.055) 0.7px, transparent 0.8px);
    background-size: 7px 7px;
    opacity: 0.35;
  }

  #building .section-title {
    position: relative;
    z-index: 2;
    margin: 0;
    text-align: center;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(60, 52, 45, 0.72);
  }

  #building .stack-carousel {
    position: relative;
    z-index: 2;
  }

  #building .stack-track {
    width: 100%;
  }

  #building .stack-grid {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #building .stack-grid li {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #building .stack-grid li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
    transition: transform 180ms ease;
  }

  #building .stack-grid li:hover img {
    transform: translateY(-2px);
  }

  /* ==========================================================================
     MOBILE
     ========================================================================== */
  @media (max-width: 720px) {
    #building {
      min-height: 100svh;
      padding:
        max(24px, env(safe-area-inset-top))
        16px
        max(28px, env(safe-area-inset-bottom))
        16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 26px;
    }

    #building .section-title {
      padding-top: 4px;
      font-size: 13px;
      line-height: 1;
    }

    #building .stack-carousel {
      width: 100%;
      overflow: visible;
    }

    #building .stack-track {
      width: 100%;
    }

    /* BIGGER CHECKERBOARD GRID */
    #building .stack-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 120px;
      gap: 18px 18px;
      width: 100%;
      max-width: 720px;
      margin: 0 auto;
      padding: 8px 4px 0;
    }

    /* checkerboard / stagger effect */
    #building .stack-grid li:nth-child(3n + 2) {
      transform: translateY(18px);
    }

    #building .stack-grid li {
      width: 100%;
      height: 120px;
      padding: 8px;
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.22);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 10px 24px rgba(90, 67, 45, 0.05);
      backdrop-filter: blur(2px);
    }

    /* make logos MUCH bigger */
    #building .stack-grid li img {
      width: 84%;
      height: 84%;
      margin: auto;
    }

    /* tighten extra whitespace under the frame */
    #about + #building,
    .chapter-block + #building,
    .chapter__hang + #building {
      margin-top: 0;
    }
  }

  /* ==========================================================================
     SMALLER PHONES
     ========================================================================== */
  @media (max-width: 520px) {
    #building {
      padding-left: 14px;
      padding-right: 14px;
      gap: 24px;
    }

    #building .stack-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-rows: 106px;
      gap: 14px 14px;
    }

    #building .stack-grid li {
      height: 106px;
      border-radius: 18px;
      padding: 7px;
    }

    #building .stack-grid li:nth-child(3n + 2) {
      transform: translateY(14px);
    }

    #building .stack-grid li img {
      width: 86%;
      height: 86%;
    }
  }

  /* ==========================================================================
     VERY SMALL PHONES
     ========================================================================== */
  @media (max-width: 390px) {
    #building {
      padding-left: 12px;
      padding-right: 12px;
      gap: 20px;
    }

    #building .section-title {
      font-size: 12px;
      letter-spacing: 0.24em;
    }

    #building .stack-grid {
      grid-auto-rows: 94px;
      gap: 12px 12px;
    }

    #building .stack-grid li {
      height: 94px;
      border-radius: 16px;
      padding: 6px;
    }

    #building .stack-grid li:nth-child(3n + 2) {
      transform: translateY(10px);
    }

    #building .stack-grid li img {
      width: 88%;
      height: 88%;
    }
  }