@layer layout {
  .shell {
    inline-size: 100%;
    max-inline-size: 1560px;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    position: relative;
    padding-block: clamp(4rem, 11vw, 10rem);
  }

  /* anchor targets must clear the fixed header */
  :target,
  section[id] {
    scroll-margin-block-start: calc(var(--nav-height, 74px) + 1rem);
  }

  /* Deliberately asymmetric: content sits left of centre on wide
     screens and the art hangs off the right edge. */
  .split {
    display: grid;
    gap: var(--space-2xl);
    align-items: center;
  }

  @media (min-width: 62rem) {
    .split {
      grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
      gap: clamp(3rem, 6vw, 8rem);
    }
    .split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  }

  .stack { display: grid; gap: var(--space-md); justify-items: start; }
  .stack--tight { gap: var(--space-sm); }
  .stack--loose { gap: var(--space-lg); }

  .rule { block-size: 1px; background: var(--c-basalt-hi); inline-size: 100%; }

  /* Section index numerals, set into the left margin. */
  .index {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.2em;
    color: var(--c-basalt-hi);
    position: absolute;
    inset-block-start: clamp(1.5rem, 4vw, 3rem);
    inset-inline-start: var(--gutter);
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Shared entrance. Jakub recipe: fade + 8px rise + 4px blur,
     0.45s, no bounce. Staggered via --i set in markup or script. */
  [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    filter: blur(4px);
    transition:
      opacity var(--d-slow) var(--e-out),
      transform var(--d-slow) var(--e-out),
      filter var(--d-slow) var(--e-out);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
  }

  [data-reveal].is-in {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal] {
      opacity: 1;
      transform: none;
      filter: none;
      transition: none;
    }
  }
}