/* ========== BOTTOM SECTIONS ========== */
/* Always a single stacked column - sections never spread into
   separate horizontal columns, only their internal indent changes
   (see the desktop .sec grid below). */
.sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-top: 60px;
  border-top: none; /* separator disabled — was: 1px solid rgba(255,255,255,0.1); */
}

.sec {
  position: relative;
}

.sec-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Mirror marker at the far right of the viewport - "001 —" (digits then
   dash, reversed from the left "— 001"), sitting on the same line as its
   left .sec-num equivalent. Same type styling as .sec-num; positioning
   (grid placement + display) is desktop-only, set in the @media block
   below, since it only makes sense once .sec becomes the baseline-
   aligned grid row .sec-num sits in. */
.sec-num-right {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.sec-label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 2px;
  line-height: 17px;
}

.sec-count {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 12px;
  color: #fff;
}

.sec-list {
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  text-transform: uppercase;
}

.sec-list.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* Hover system - BRANDS & ORGANIZATIONS only. js/brands-hover.js adds
   the .brand-item class (alongside the existing reveal/col-a/col-b/
   col-c classes - not replacing them) plus the .brand-rect1/.brand-
   rect2/.brand-text children to each of that list's <li> at load, from
   each item's own plain text. AGENCIES & STUDIOS deliberately has none
   of this - plain text, no wrapper, no markup change. Values below are
   exact, dictated by spec - not tuned/adjusted here. */
.brand-item {
  position: relative;
  padding: 1px 4px;
  cursor: pointer;
  /* Tighter than the 1.75 this would otherwise inherit from .sec-list
     (css/sections.css line 65) - set directly on the <li> itself (this
     class), which always wins over an inherited value from its <ul>
     regardless of specificity, so it's scoped to Brands only. AGENCIES
     & STUDIOS' plain <li> (no .brand-item class) keeps inheriting
     .sec-list's own 1.75, untouched. Unitless, so it still scales
     correctly with .sec-list's own desktop font-size bump (line 315),
     no separate @media override needed. */
  line-height: 1.5;
}
.brand-rect1 {
  position: absolute;
  left: -2px;
  right: -15px;
  top: 0px;
  bottom: 3px;
  background: #000;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.brand-rect2 {
  position: absolute;
  left: -2px;
  right: -20px;
  top: 0px;
  bottom: 3px;
  background: #fff;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.brand-text {
  position: relative;
  z-index: 3;
  display: inline-block;
  color: #999;
}

.awards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(155, 153, 153, 0.68);
}

.awards span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.awards a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.awards a:hover {
  color: #fff;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Mobile-only: .sections' own padding-top (60px, base rule above) - not
   .desc's margin-bottom in css/hero.css - is the actual bulk of the gap
   between the hero's 3rd paragraph and "— 001 AGENCIES & STUDIOS":
   .desc's margin-bottom (already tightened twice, 40px -> 16px -> 10px)
   is only a small fraction of the total, this padding-top was the
   untouched majority of it all along. Desktop never overrides
   padding-top either (its own @media (min-width: 768px) block below
   only touches gap/margin-top), so it keeps the base 60px, unchanged. */
@media (max-width: 767px) {
  .sections {
    padding-top: 38px; /* was 60px (~37% down) */
  }
}

/* ========== DESKTOP / TABLET ========== */
@media (min-width: 768px) {
  .sections {
    /* No flat repeated gap: each .sec sets its own margin-top below,
       so the interval between blocks can be asymmetric (Swiss-grid
       rhythm) instead of a uniform, plate-feeling spacing. Reduced
       from 60px to close the remaining gap left over after fixing
       .hero's height (see .hero comment above) - measured against
       reference/hero-target-spacing.png at the same 1919x1079 size. */
    gap: 0;
    margin-top: 36px;
  }

  /* Each section is its own 4-column row sharing the header's grid:
     the number sits in column 1 (aligned under the logo), the
     label/count/list stack in columns 2-4. Section 004 (last-child)
     is shifted one column further right - matches the reference. */
  .sec {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    align-items: baseline;
    /* Reusable grid math, derived from the exact same repeat(4, 1fr) +
       24px column-gap declared above - not separate one-off numbers.
       Uses 100vw rather than 100% on purpose: a %-based value inside a
       custom property only resolves once it's consumed, against
       whichever element's own containing block uses it - so the same
       --col-shift would compute a different pixel value on .sec-label
       (a 3-track-wide grid area) than on .sec-list (2-track-wide),
       silently breaking the "one reusable value" goal. 100vw is
       viewport-relative, not containing-block-relative, so it resolves
       identically no matter which descendant applies it.
       --col: the width of one of the 4 grid columns.
       --col-shift: how far left to pull column-2-positioned content so
       it lands one full column earlier (the "guide-left" column used by
       Studios and by the Awards label/count/first list column), backed
       off by --marker-clearance (from .page) so it clears the
       "— 00X" marker instead of landing on top of it. */
    --col: calc((100vw - 96px - 72px) / 4);
    --col-shift: calc(-1 * (var(--col) + 24px) + var(--marker-clearance));
    /* Studios (first-child) and Awards (last-child) label/count/list
       are pulled further right by this same amount everywhere they use
       it below, landing their left edge flush with the hero text
       block's left edge. The "— 00X" markers themselves are NOT
       shifted (see .sec-num) - only this associated content moves, as
       its own independent column. 48px, not --marker-clearance+48px:
       the content already sits at the "guide-left" column (page
       padding + --marker-clearance) via --col-shift, and the hero's
       left edge is exactly 48px further right than that same guide-left
       column (see .desc's own margin-left), so 48px alone closes the
       gap - not the marker's own additional clearance, which has no
       part in this alignment now that the marker isn't moving. */
    --sec-align-shift: 48px;
  }

  /* Vertical rhythm between blocks: Studios->Brands and Brands->Awards
     share the same 32px base interval (one rule, not two duplicated
     numbers), with only a small +12px step for Awards - replaces the
     previous 120px, which read as a much bigger gap than the one
     above it instead of a consistent rhythm. */
  .sections .sec:nth-child(2),
  .sections .sec:nth-child(3) {
    margin-top: 32px;
  }
  .sections .sec:nth-child(3) {
    margin-top: 44px;
  }

  /* Every "— 00X" marker (001/002/003) stays at this same flush-left
     position, untouched - only the content beside it (label/count/list)
     shifts right below. */
  .sec-num {
    grid-column: 1;
    margin-bottom: 0;
  }

  /* Placed in the grid's last column/row-1 (same row .sec-num and
     .sec-label share) purely so grid's own align-items:baseline lines
     its text up with them exactly - not a guessed pixel offset.
     justify-self:end then pins it flush to that column's right edge,
     which is .sec's own right edge (no padding on .sec), matching the
     header/footer's right-aligned content at the same page padding. */
  .sec-num-right {
    display: block;
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    /* 16px further right than the flush grid-cell edge above - negative
       margin, since justify-self:end already pins it there with no
       right/margin-right of its own to adjust. */
    margin-right: -16px;
  }

  /* Explicit rows (1/2/3), not left to auto-placement: .sec-num-right's
     own explicit column-4/row-1 cell (above) would otherwise make the
     grid's auto-placement search skip row 1 for these too (their column
     span includes column 4), silently pushing all three down a row -
     label to 2, count to 3, list/awards to 4. Pinning them back to their
     original rows keeps this content flush with .sec-num regardless of
     what else occupies column 4. */
  .sec-label {
    grid-column: 2 / -1;
    grid-row: 1;
  }
  .sec-count {
    grid-column: 2 / -1;
    grid-row: 2;
  }
  .sec-list,
  .awards {
    grid-column: 2 / -1;
    grid-row: 3;
  }

  /* Label-to-count gap: Studios keeps its own tighter value, but
     Brands and Awards deliberately share the same gap via one rule,
     so the two blocks read as consistent instead of two hand-picked
     numbers that happen to differ. */
  .sections .sec:nth-child(1) .sec-label { margin-bottom: 4px; }
  .sections .sec:nth-child(2) .sec-label,
  .sections .sec:nth-child(3) .sec-label {
    margin-bottom: 12px;
  }

  /* Studios list is a single short column of names - it doesn't
     need the same column span as the two-column Brands list, so
     narrowing it breaks the "two cloned columns" look. Left edge
     (grid-column start) is untouched, only the span narrows. */
  .sections .sec:first-child .sec-list {
    grid-column: 2 / 4;
  }

  /* Zigzag rhythm: Studios (label + count + list) and the Awards
     label/count/first list column all pull left by the same reusable
     --col-shift, landing on the "guide-left" column instead of the
     column Brands sits on (which Brands keeps, unchanged). Awards'
     second list column is handled separately below, inside .awards -
     it stays right where it already lines up with Brands' DUNHILL
     column, so only the odd (first-group) items get the shift. */
  .sections .sec:first-child .sec-label,
  .sections .sec:first-child .sec-count,
  .sections .sec:first-child .sec-list,
  .sections .sec:last-child .sec-label,
  .sections .sec:last-child .sec-count {
    margin-left: calc(var(--col-shift) + var(--sec-align-shift));
  }

  .sec-count { font-size: 42px; }
  .sec-list { font-size: 12.5px; }

  /* Brands & Organizations: 3 content columns (6 rows each) with a
     dedicated empty grid track between columns 2 and 3, acting as a
     structural break - wider than the normal 20px inter-column gap,
     not just a bigger margin on one side. List order in the HTML is
     already column-major (items 1-6 = col 1, 7-12 = col 2, 13-18 = col 3). */
  .sec-list.cols {
    display: grid;
    grid-template-columns: 1fr 1fr 0.6fr 1fr;
    align-items: start;
    gap: 0 20px;
  }
  /* Column assignment (which of the 3 visual columns) */
  .sec-list.cols li:nth-child(-n+6) { grid-column: 1; }
  .sec-list.cols li:nth-child(n+7):nth-child(-n+12) { grid-column: 2; }
  .sec-list.cols li:nth-child(n+13) { grid-column: 4; }
  /* Row assignment (position within its column) - explicit on every
     item so nothing is left to grid auto-placement. Without this the
     placement cursor only moves forward: after filling column 1 down
     to row 6, it would start column 2 at row 6 too instead of row 1,
     producing a staircase instead of 3 columns starting flush at the
     same top line. */
  .sec-list.cols li:nth-child(6n+1) { grid-row: 1; }
  .sec-list.cols li:nth-child(6n+2) { grid-row: 2; }
  .sec-list.cols li:nth-child(6n+3) { grid-row: 3; }
  .sec-list.cols li:nth-child(6n+4) { grid-row: 4; }
  .sec-list.cols li:nth-child(6n+5) { grid-row: 5; }
  .sec-list.cols li:nth-child(6n)   { grid-row: 6; }

  /* Awards & Recognition: reuses Brands' exact nested grid - same 4
     tracks (1fr 1fr 0.6fr 1fr) and same 20px gap as .sec-list.cols,
     not new one-off numbers - and the .awards container itself is
     still grid-column: 2/-1 (inherited, same as Brands, untouched).
     Because both containers are therefore identical in width and
     internal proportions, track 2 (the second award column) lands on
     exactly the same x as DUNHILL with no extra math. Track 3 (the
     gutter) and track 4 are left unused - only tracks 1-2 hold
     content. The first group (odd items) then gets the same
     --col-shift as Studios/the Awards label, pulling only itself
     left onto the guide-left column; the second group (even items,
     track 2) is untouched, so it stays locked to DUNHILL's position. */
  .awards {
    grid-template-columns: 1fr 1fr 0.6fr 1fr;
    gap: 3px 20px;
  }
  .awards span:nth-child(odd)  { grid-column: 1; margin-left: calc(var(--col-shift) + var(--sec-align-shift)); }
  .awards span:nth-child(even) { grid-column: 2; }
  .awards span:nth-child(1),  .awards span:nth-child(2)  { grid-row: 1; }
  .awards span:nth-child(3),  .awards span:nth-child(4)  { grid-row: 2; }
  .awards span:nth-child(5),  .awards span:nth-child(6)  { grid-row: 3; }
  .awards span:nth-child(7),  .awards span:nth-child(8)  { grid-row: 4; }
  .awards span:nth-child(9),  .awards span:nth-child(10) { grid-row: 5; }
  .awards span:nth-child(11), .awards span:nth-child(12) { grid-row: 6; }
}

@media (min-width: 1100px) {
  /* Page padding grows to 56px a side at this breakpoint (112px total,
     up from 96px) - --col must be redefined to match, since it's
     derived from that same padding value, not a separate number. */
  .sec {
    --col: calc((100vw - 112px - 72px) / 4);
  }
}