/* =========================================================
   Widescreen refinements to the page frame.

   Components carry their own breakpoints in styles.css, next
   to the rules they modify, so a card is read in one place.
   What is left here is the frame around them: the gutter, the
   type scale's one step, the header unfolding out from behind
   its button, and the section heading pinning.
   ========================================================= */

@media (min-width: 40em) {
  :root {
    --gutter: 2rem;
  }

  /* The standfirst takes its size bump here rather than on a phone, where the
     extra step costs more lines than the emphasis is worth. */
  .section__lead,
  .prose > p:first-child {
    font-size: var(--step-2);
    line-height: 1.35;
  }

  .prose > p:first-child {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
}

/* ---------- The header unfolds ----------
   The links come out from behind the menu button once the brand and all five of
   them fit on one line. The button goes away and the panel is unfolded
   permanently — it is the same <details> either way, so the markup does not
   have to carry two copies of the navigation. */
@media (min-width: 52em) {
  .site-header__inner {
    gap: 2rem;
  }

  /* The links are the wide part of the bar; the brand keeps its own width. */
  .menu {
    flex: 0 1 auto;
  }

  .menu__button {
    display: none;
  }

  /* Two ways of saying the same thing, for two generations of engine: older
     ones hide the closed panel by display, newer ones by content-visibility on
     ::details-content. Without both, the links vanish on whichever half of the
     browsers is not covered. */
  .menu__panel {
    position: static;
    display: flex;
    align-items: center;
    gap: 2rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }

  .menu::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  /* One row from here up, so anchors need less clearance. */
  html {
    scroll-padding-top: calc(5rem + env(safe-area-inset-top));
  }

  .nav__list {
    flex-direction: row;
    gap: 1.75rem;
  }

  .nav__list > li + li {
    border-top: 0;
  }

  .nav__link {
    position: relative;
    padding-block: 1.4rem;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
  }

  /* The rule grows in from the left on hover and sits permanently under the
     current page, which is the same gesture the parent site's bar uses. */
  .nav__link::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1rem;
    left: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
  }

  .nav__link:hover::before,
  .nav__link:focus-visible::before,
  .nav__link.is-current::before {
    transform: scaleX(1);
  }

  .nav__link.is-current {
    color: var(--ink);
  }

  .nav__link.is-current::after {
    content: none;
  }
}

@media (min-width: 64em) {
  /* The section heading pins while you are inside its section, so the context of
     what you are reading stays on screen through a long list. Only at this width:
     on a narrower screen a second pinned band would take too much of what is
     left. The offset clears the sticky header, and the head takes the section's
     own surface so content passes cleanly beneath it. */
  .section__head {
    position: sticky;
    top: 4.25rem;
    z-index: 1;
    padding-block: 0.75rem;
    margin-top: -0.75rem;
    background: var(--paper);
  }

  .section--porcelain .section__head {
    background: var(--porcelain);
  }

  /* The grid and wash bands paint a pattern the head cannot reproduce, and the
     night band is the one place the page is meant to feel like a single slab.
     They keep a heading that scrolls with the section. */
  .section--grid .section__head,
  .section--plum .section__head,
  .section--night .section__head,
  .section__intro .section__head {
    position: static;
    padding-block: 0;
    margin-top: 0;
    background: none;
  }
}

/* On very wide screens the hairline grid keeps its edges aligned with the
   container rather than stretching the cards further. */
@media (min-width: 90em) {
  :root {
    --container: 80rem;
  }
}