/* ==========================================================================
   BUILDING WITH + VENTURES INDEX
   FINAL MOBILE LAYOUT

   BUILDING WITH:
   - exactly one full mobile viewport
   - large logos
   - 3 full-height rows
   - checkerboard/staggered layout
   - infinite horizontal movement
   - NO overlapping logos
   - slightly different warm-paper environment beneath About

   VENTURES:
   - exactly one full viewport
   - neighboring sections cannot show when aligned
   ========================================================================== */


/* ==========================================================================
   BUILDING WITH — BASE
   ========================================================================== */

   #building {
    position: relative;
    isolation: isolate;

    box-sizing: border-box;

    width: 100%;

    margin: 0;

    overflow: hidden;
  }


  /* ==========================================================================
     MOBILE BUILDING WITH
     ========================================================================== */

  @media (max-width: 720px) {

    #building {
      /* --------------------------------------------------------------
         LOGO SYSTEM
         -------------------------------------------------------------- */

      --building-cell-width:
        clamp(108px, 28vw, 126px);

      --building-cell-height:
        clamp(130px, 18svh, 162px);

      --building-logo-size:
        clamp(82px, 23vw, 104px);

      --building-gap-x:
        clamp(24px, 6vw, 34px);


      /* --------------------------------------------------------------
         FULL SCREEN SECTION
         -------------------------------------------------------------- */

      position: relative !important;

      display: grid !important;

      grid-template-rows:
        auto
        minmax(0, 1fr) !important;

      box-sizing: border-box !important;

      width: 100% !important;

      height: 100svh !important;

      min-height: 100svh !important;

      max-height: 100svh !important;

      margin: 0 !important;

      padding:
        clamp(70px, 9svh, 94px)
        0
        clamp(42px, 5svh, 62px) !important;

      overflow: hidden !important;


      /* --------------------------------------------------------------
         BACKGROUND

         Slightly different from About so the section feels intentional,
         but still belongs to the same site.
         -------------------------------------------------------------- */

      background:
        radial-gradient(
          ellipse at 50% 10%,
          rgba(109, 72, 40, 0.075),
          transparent 42%
        ),
        radial-gradient(
          ellipse at 25% 70%,
          rgba(173, 133, 89, 0.035),
          transparent 40%
        ),
        linear-gradient(
          180deg,
          #f1e8da 0%,
          #f4ecdf 35%,
          #f3ebdf 100%
        ) !important;
    }


    /* ==========================================================================
       SUBTLE TOP SHADOW FROM THE ABOUT FRAME

       Makes Building With feel like it begins underneath the framed About piece.
       ========================================================================== */

    #building::before {
      content: "";

      position: absolute;

      z-index: 0;

      top: 0;
      right: 0;
      left: 0;

      height: 130px;

      pointer-events: none;

      background:
        linear-gradient(
          180deg,
          rgba(58, 37, 21, 0.09) 0%,
          rgba(58, 37, 21, 0.035) 25%,
          transparent 100%
        );
    }


    /* ==========================================================================
       VERY LIGHT PAPER TEXTURE
       ========================================================================== */

    #building::after {
      content: "";

      position: absolute;

      z-index: 0;

      inset: 0;

      pointer-events: none;

      opacity: 0.19;

      background-image:
        radial-gradient(
          rgba(59, 44, 31, 0.14) 0.55px,
          transparent 0.7px
        );

      background-size:
        8px
        8px;

      -webkit-mask-image:
        linear-gradient(
          180deg,
          transparent,
          black 15%,
          black 90%,
          transparent
        );

      mask-image:
        linear-gradient(
          180deg,
          transparent,
          black 15%,
          black 90%,
          transparent
        );
    }


    /* ==========================================================================
       TITLE
       ========================================================================== */

    #building .section-title {
      position: relative !important;

      z-index: 4;

      width: 100% !important;

      margin: 0 !important;

      padding:
        0
        16px
        clamp(24px, 3.2svh, 34px) !important;

      color:
        rgba(49, 43, 37, 0.62) !important;

      font-size:
        clamp(10px, 2.7vw, 12px) !important;

      font-weight:
        600 !important;

      line-height:
        1 !important;

      letter-spacing:
        0.30em !important;

      text-align:
        center !important;

      text-transform:
        uppercase;
    }


    /* ==========================================================================
       CAROUSEL

       This now takes ALL remaining vertical room after the title.
       ========================================================================== */

    #building .stack-carousel {
      position: relative !important;

      z-index: 3;

      align-self: stretch !important;

      box-sizing: border-box !important;

      width: 100vw !important;

      height: 100% !important;

      min-height: 0 !important;

      max-height: none !important;

      margin: 0 !important;

      padding: 0 !important;

      overflow: hidden !important;

      touch-action: pan-y;

      /* Soft clipping rather than hard-cut logos at the sides. */

      -webkit-mask-image:
        linear-gradient(
          90deg,
          transparent 0%,
          black 4%,
          black 96%,
          transparent 100%
        );

      mask-image:
        linear-gradient(
          90deg,
          transparent 0%,
          black 4%,
          black 96%,
          transparent 100%
        );
    }


    #building .stack-track {
      position: relative !important;

      box-sizing: border-box !important;

      width: 100% !important;

      height: 100% !important;

      min-height: 0 !important;

      margin: 0 !important;

      padding: 0 !important;

      overflow: hidden !important;
    }


    /* ==========================================================================
       THREE FULL ROWS

       JavaScript creates:

         .stack-lanes
             .stack-row
             .stack-row
             .stack-row

       Each row gets exactly 1/3 of the available carousel height.
       ========================================================================== */

    #building .stack-lanes {
      position: absolute;

      inset: 0;

      display: grid;

      grid-template-rows:
        repeat(
          3,
          minmax(0, 1fr)
        );

      width: 100%;

      height: 100%;

      overflow: hidden;
    }


    /* ==========================================================================
       SINGLE ROW
       ========================================================================== */

    #building .stack-row {
      position: relative;

      display: flex;

      align-items: center;

      width: 100%;

      min-width: 0;
      min-height: 0;

      overflow: hidden;
    }


    /* ==========================================================================
       CHECKERBOARD OFFSET

       IMPORTANT:

       We move the WHOLE middle row.

       We do NOT move individual logos anymore.

       That is the change that prevents the overlap you were seeing.
       ========================================================================== */

    #building .stack-row__offset {
      position: relative;

      width: max-content;

      height: 100%;
    }


    #building
    .stack-row--staggered
    .stack-row__offset {

      transform:
        translateX(
          calc(
            (
              var(--building-cell-width)
              +
              var(--building-gap-x)
            )
            /
            2
          )
        );
    }


    /* ==========================================================================
       MOVING BELT
       ========================================================================== */

    #building .stack-row__belt {
      display: flex;

      align-items: center;

      width: max-content;

      height: 100%;

      will-change: transform;

      animation:
        building-row-scroll
        var(--building-duration, 52s)
        linear
        infinite;
    }


    /* Different initial phases make the checkerboard feel less mechanically
       aligned while every row still travels at effectively the same speed. */

    #building
    .stack-row:nth-child(1)
    .stack-row__belt {

      animation-delay:
        -7s;
    }


    #building
    .stack-row:nth-child(2)
    .stack-row__belt {

      animation-delay:
        -19s;
    }


    #building
    .stack-row:nth-child(3)
    .stack-row__belt {

      animation-delay:
        -31s;
    }


    /* ==========================================================================
       EACH REPEATING SET
       ========================================================================== */

    #building .stack-row__set {
      display: flex !important;

      flex:
        0 0 auto;

      align-items: center;

      gap:
        var(--building-gap-x);

      height: 100%;

      margin: 0 !important;

      padding:
        0
        var(--building-gap-x)
        0
        0 !important;

      list-style: none !important;
    }


    /* ==========================================================================
       CELLS

       Fixed footprint.

       Every logo owns its own space.
       No transforms.
       No overlap.
       ========================================================================== */

    #building
    .stack-row__set
    >
    li {

      position: relative;

      display: flex !important;

      flex:
        0 0 var(--building-cell-width);

      align-items: center !important;

      justify-content: center !important;

      box-sizing: border-box !important;

      width:
        var(--building-cell-width) !important;

      height:
        min(
          var(--building-cell-height),
          100%
        ) !important;

      min-width:
        var(--building-cell-width) !important;

      max-width:
        var(--building-cell-width) !important;

      min-height:
        0 !important;

      margin:
        0 !important;

      padding:
        6px !important;

      overflow:
        visible !important;

      border:
        0 !important;

      border-radius:
        0 !important;

      background:
        transparent !important;

      box-shadow:
        none !important;

      transform:
        none !important;

      translate:
        none !important;
    }


    /* ==========================================================================
       BIG LOGOS
       ========================================================================== */

    #building
    .stack-row__set
    >
    li
    >
    img {

      display: block !important;

      width:
        var(--building-logo-size) !important;

      height:
        var(--building-logo-size) !important;

      max-width:
        calc(
          var(--building-cell-width)
          -
          12px
        ) !important;

      max-height:
        calc(
          min(
            var(--building-cell-height),
            100%
          )
          -
          12px
        ) !important;

      margin:
        auto !important;

      object-fit:
        contain !important;

      object-position:
        center !important;

      transform:
        none !important;

      translate:
        none !important;

      filter:
        drop-shadow(
          0
          10px
          16px
          rgba(55, 39, 24, 0.10)
        ) !important;
    }


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

    @keyframes building-row-scroll {

      from {
        transform:
          translate3d(
            0,
            0,
            0
          );
      }

      to {
        transform:
          translate3d(
            -50%,
            0,
            0
          );
      }

    }


    /* ==========================================================================
       REMOVE OLD GRID BEHAVIOR COMPLETELY

       This catches any older chapters.css / site-finish.css rules.
       ========================================================================== */

    #building
    .stack-grid {

      display:
        none !important;
    }


    #building
    li:nth-child(3n + 2) {

      transform:
        none !important;

      translate:
        none !important;
    }


    /* ==========================================================================
       VENTURES — ONE COMPLETE SCREEN
       ========================================================================== */

    #ventures {
      position: relative !important;

      isolation: isolate !important;

      display: grid !important;

      place-items: center !important;

      box-sizing: border-box !important;

      width: 100% !important;

      height: 100svh !important;

      min-height: 100svh !important;

      max-height: 100svh !important;

      margin: 0 !important;

      padding:
        max(
          52px,
          calc(
            env(safe-area-inset-top)
            +
            34px
          )
        )
        12px
        max(
          20px,
          env(safe-area-inset-bottom)
        ) !important;

      overflow: hidden !important;

      transform: none !important;

      translate: none !important;

      color:
        var(--ink) !important;

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

      background-image:
        radial-gradient(
          circle,
          rgba(68, 44, 27, 0.042) 0.65px,
          transparent 0.75px
        ) !important;

      background-size:
        5px
        5px !important;
    }


    /* ==========================================================================
       VENTURE INDEX
       ========================================================================== */

    #ventures .venture-list {
      display: grid !important;

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

      grid-template-rows:
        repeat(
          6,
          minmax(0, 1fr)
        ) !important;

      grid-auto-flow:
        row !important;

      align-items:
        stretch !important;

      justify-items:
        stretch !important;

      gap:
        0
        10px !important;

      box-sizing:
        border-box !important;

      width:
        100% !important;

      height:
        100% !important;

      min-height:
        0 !important;

      margin:
        0 !important;

      padding:
        0 !important;

      overflow:
        hidden !important;
    }


    #ventures
    .venture-list
    >
    .venture-list__item {

      display:
        flex !important;

      align-items:
        center !important;

      justify-content:
        center !important;

      box-sizing:
        border-box !important;

      width:
        100% !important;

      height:
        100% !important;

      min-width:
        0 !important;

      min-height:
        0 !important;

      margin:
        0 !important;

      padding:
        3px
        5px !important;

      overflow:
        hidden !important;

      color:
        var(--ink) !important;

      font-size:
        clamp(
          17px,
          5vw,
          23px
        ) !important;

      line-height:
        0.94 !important;

      letter-spacing:
        -0.035em !important;

      text-align:
        center !important;

      text-decoration:
        none !important;

      text-wrap:
        balance;
    }


    /* ==========================================================================
       VENTURE WORDMARKS
       ========================================================================== */

    #ventures
    .venture-list__wordmark {

      display:
        block !important;

      width:
        auto !important;

      max-width:
        94% !important;

      height:
        auto !important;

      max-height:
        48% !important;

      margin:
        auto !important;

      object-fit:
        contain !important;
    }


    #ventures
    .venture-list__wordmark--treasures {

      max-width:
        90% !important;
    }


    /* ==========================================================================
       NEW WORLD SYSTEMS
       ========================================================================== */

    #ventures
    .venture-list__group {

      position:
        relative !important;

      box-sizing:
        border-box !important;

      width:
        100% !important;

      height:
        100% !important;

      min-width:
        0 !important;

      min-height:
        0 !important;

      margin:
        0 !important;

      padding:
        0 !important;

      overflow:
        hidden !important;
    }


    #ventures
    .venture-list__group
    >
    summary {

      list-style:
        none !important;
    }


    #ventures
    .venture-list__group
    >
    summary::-webkit-details-marker {

      display:
        none !important;
    }


    #ventures
    .venture-list__group
    >
    .venture-list__item {

      display:
        flex !important;

      align-items:
        center !important;

      justify-content:
        center !important;

      width:
        100% !important;

      height:
        100% !important;

      min-width:
        0 !important;

      min-height:
        0 !important;

      margin:
        0 !important;

      padding:
        3px
        5px !important;

      overflow:
        hidden !important;

      color:
        var(--ink) !important;

      font-size:
        clamp(
          15px,
          4.4vw,
          20px
        ) !important;

      line-height:
        0.94 !important;

      letter-spacing:
        -0.035em !important;

      text-align:
        center !important;

      cursor:
        pointer;
    }


    #ventures
    .venture-list__item--gryphon {

      font-size:
        clamp(
          14px,
          4.1vw,
          19px
        ) !important;
    }


    #ventures
    .venture-list__group
    .venture-list__item--nested {

      position:
        absolute !important;

      z-index:
        5;

      right:
        5px !important;

      bottom:
        3px !important;

      left:
        5px !important;

      display:
        flex !important;

      align-items:
        center !important;

      justify-content:
        center !important;

      width:
        auto !important;

      height:
        auto !important;

      min-height:
        16px !important;

      margin:
        0 !important;

      padding:
        2px
        3px !important;

      font-size:
        8px !important;

      line-height:
        1 !important;

      opacity:
        0;

      pointer-events:
        none;

      transform:
        translateY(4px);

      transition:
        opacity
        160ms
        linear,
        transform
        200ms
        ease;
    }


    #ventures
    .venture-list__group[open]
    .venture-list__item--nested {

      opacity:
        0.7;

      pointer-events:
        auto;

      transform:
        none;
    }

  }


  /* ==========================================================================
     NARROW PHONES
     ========================================================================== */

  @media (max-width: 390px) {

    #building {
      --building-cell-width:
        102px;

      --building-cell-height:
        136px;

      --building-logo-size:
        84px;

      --building-gap-x:
        22px;

      padding-top:
        62px !important;

      padding-bottom:
        38px !important;
    }


    #building .section-title {

      padding-bottom:
        20px !important;

      font-size:
        9px !important;
    }


    #ventures {

      padding-right:
        8px !important;

      padding-left:
        8px !important;
    }


    #ventures .venture-list {

      gap:
        0
        6px !important;
    }


    #ventures
    .venture-list
    >
    .venture-list__item,

    #ventures
    .venture-list__group
    >
    .venture-list__item {

      font-size:
        clamp(
          15px,
          4.6vw,
          19px
        ) !important;
    }

  }


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

  /* Gone by direct instruction. This stopped the Building With belt dead —
     `animation: none !important` — on any machine reporting the preference.
     home-flow.css happens to re-assert the animation later, which is the only
     reason the strip moved at all. The site does not check
     prefers-reduced-motion anywhere; do not re-add it. */