@layer tokens {
  :root {
    --page-bg: var(--sage);
    --page-fg: white;
    --copy: var(--on-sage);
    --heading: white;
    --heading-bar: var(--gold);
    --focus: white;

    --radius: 0.625rem;
    --space-section: clamp(3.6rem, 3.1543rem + 1.8286vw, 4.8rem);     /* 57.6 → 76.8, the one gap between every block on the sage ground, and above and below it */

    /* 34.2 → 66.5 (390 → 1920), shrinking faster below 390 so "THAT WORKS FOR" stays on one line */
    --text-hero: max(1.6625rem, min(9.88vw - 0.2565rem, clamp(2.1375rem, 1.6229rem + 2.1111vw, 4.1562rem)));
    --text-h3: clamp(1.425rem, 1.3342rem + 0.3726vw, 1.7812rem);         /* 22.8 → 28.5 */

    --chamfer: clamp(1.125rem, 0.9857rem + 0.5714vw, 1.5rem);         /* 18 → 24 */
    --badge-gap: clamp(0.5rem, 0.4536rem + 0.1905vw, 0.625rem);       /* 8 → 10 */
    --badge-line: var(--line-thick);
    --partner-bg: var(--brick);
    --partner-bg-hover: color-mix(in oklab, var(--brick) 85%, white);
  }
}

@layer components {

  .btn--md { min-block-size: var(--control-h-m); padding-inline: 1.45em; font-size: var(--text-s); }
  /* a partner's name as the link: a button at heading size that may wrap */
  .btn--title {
    min-block-size: auto;
    padding: 0.4em 0.8em;
    font-size: var(--text-h3);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-align: center;
    white-space: normal;
  }
  .btn--title::before, .btn--title::after { --c: 0rem; }

  /* hero, rows and bands are one stack: the ground spaces them, the sections carry no padding of their own */
  .ground {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
    padding-block: var(--space-section);
  }

  .hero__statement {
    max-inline-size: 70rem;
    font-size: var(--text-hero);
    line-height: 1.08;
    text-wrap: balance;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  /* wider tracking from the breakpoint up; at 0.04em on a phone "THAT WORKS FOR" no longer fits a line */
  @media (min-width: 56.25em) {
    .hero__statement { letter-spacing: 0.04em; }
  }
  /* the negative margin keeps the text in line with the statement while the brick reaches past it */
  .hero__statement .accent {
    display: inline-block;
    position: relative;
    isolation: isolate;
    margin-inline-start: -0.18em;
    padding: 0.1em 0.18em 0.04em;
  }
  /* white over brick: the brick wipes in once behind the accent */
  .hero__statement .accent::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--brick);
    transform-origin: left;
    animation: accent-rule 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
  }
  /* where the accent wraps, its box would fill the line; min-content shrinks it, and the brick, to its longest word */
  .hero__statement { container-type: inline-size; }
  @container (width < 13.5em) {
    .hero__statement .accent { inline-size: min-content; }
  }
  @keyframes accent-rule { from { transform: scaleX(0); } }
  @media (prefers-reduced-motion: reduce) {
    .hero__statement .accent::after { animation: none; }
  }

  /* the two bands side by side from about 1000 wide, stacked below; equal heights from the grid */
  .partners__grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  }

  /* the whole band is the link: one flat brick shape with the badge's cut corners; the name is a square white button */
  .partner-box {
    position: relative;
    isolation: isolate;
    padding: calc(var(--space-m) + var(--badge-gap) + var(--badge-line));
    color: white;
  }
  .partner-box::before {
    --c: var(--chamfer);
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--partner-bg);
    transition: background-color 0.15s ease;
    pointer-events: none;
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
  }
  .partner-box:hover::before { background: var(--partner-bg-hover); }
  .partner-box__title { text-align: center; }
  .partner-box p { max-inline-size: 40rem; font-size: var(--text-m); line-height: 1.5; }
  .partner-box .btn { --btn-bg: white; --btn-line: white; --btn-fg: var(--brick); }
}