@layer layout {
  /* The design holds every page to 1,080 px, centred on the page's ground */
  .site {
    max-width: var(--page-width);
    margin-inline: auto;
  }

  /* Header */

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: var(--header-height);
    padding: 14px var(--gutter);
    border-bottom: 1px solid var(--color-header-edge);
    background: var(--color-header);
    /* The header's colour and its edge run across the screen's full width,
       though the header itself is the page's, so the vignette's darker
       corners don't show its ends: an image drawn outside its box, which
       doesn't make the page any wider */
    border-image: linear-gradient(to top, var(--color-header-edge) 1px, var(--color-header) 1px) 0 fill / 0 / 0 100vw;
  }

  /* The logo's letters take this colour (ApplicationHelper#logo). The logo
     takes the room the button and the menus leave, up to its full size: in a
     window a few pixels too narrow for the whole row, it gives way first,
     shrinking a little, so they don't wrap. It shrinks no further than the
     first design's 129 px; with less room, as with the text alone enlarged,
     the button and the menus wrap instead, as they always did */
  .site-logo {
    flex: 1 1 0;
    min-width: 129px;
    max-width: max-content;
    margin-right: auto;
    color: var(--color-text);
  }

  /* A page's button counts as one line of text, as the menus' links do, and
     is centred on it, so its extra height spreads into the header's padding
     rather than making the header taller. The header, the logo and the menus
     then sit exactly where they do on pages without one */
  .header-cta {
    display: flex;
    align-items: center;
    height: 1lh;
  }

  .nav-menus {
    display: flex;
    align-items: center;
    gap: 28px;
  }

  .site-nav summary {
    list-style: none;
    cursor: pointer;
  }

  .site-nav summary::-webkit-details-marker {
    display: none;
  }

  .nav-menu summary,
  .nav-link {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    text-decoration: none;
  }

  /* The arrow is decoration, so screen readers skip it. Browsers that can't
     read the "/ ''" form (Safari before 17.4) drop the whole declaration, so
     the plain one before it is their fallback; the same applies below */
  .nav-menu summary::after {
    content: " ▾";
    content: " ▾" / "";
  }

  .nav-menu summary:hover,
  .nav-menu[open] summary,
  .nav-link:hover,
  .nav-link[aria-current="page"] {
    color: var(--color-text);
  }

  .nav-menu {
    position: relative;
  }

  .nav-menu ul {
    position: absolute;
    top: calc(100% + 14px);
    left: -12px;
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-popover);
  }

  .nav-menu ul a,
  .nav-mobile-panel a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-small);
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .nav-menu ul a:hover,
  .nav-mobile-panel a:hover,
  .nav-menu ul a[aria-current="page"],
  .nav-mobile-panel a[aria-current="page"] {
    background: var(--color-wash);
    color: var(--color-text);
  }

  .nav-mobile {
    display: none;
  }

  .nav-mobile summary {
    padding: 6px 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--text-body);
  }

  .nav-mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 16px;
    padding: 16px var(--gutter) 24px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-menu-panel);
    /* The header stays put, so on a short screen (a phone on its side, or a
       zoomed-in laptop) the menu scrolls on its own to reach its last links.
       The 16 px allows for the header being taller than its minimum height:
       67 px on phones, where the "Menu" button sets it */
    max-height: calc(100vh - var(--header-height) - 16px);
    max-height: calc(100dvh - var(--header-height) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-mobile-panel a {
    padding-inline: 0;
  }

  .nav-group-label {
    display: block;
    margin-bottom: 4px;
    color: var(--color-text-muted);
    font-size: var(--text-label);
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  /* Narrower than a laptop's screen, the logo is 1.5 times the first
     design's size rather than twice, so it fits beside the button and the
     menus */
  @media (max-width: 1023px) {
    .site-logo svg {
      width: 193.5px;
      height: 22.5px;
    }
  }

  @media (max-width: 768px) {
    .site-header {
      gap: 16px;
    }

    .nav-menus {
      display: none;
    }

    .nav-mobile {
      display: block;
    }
  }

  /* The page's call to action shows in the hero too, so phones drop it here,
     as do screens too narrow for it beside the logo and the "Menu" button */
  @media (max-width: 540px) {
    .header-cta {
      display: none;
    }
  }

  /* Footer */

  .site-footer {
    padding: 40px var(--gutter) 28px;
    color: var(--color-text-muted);
    font-size: var(--text-label);
  }

  .site-footer a {
    color: var(--color-text-muted);
    text-decoration: none;
  }

  .site-footer a:hover,
  .site-footer a[aria-current="page"] {
    color: var(--color-text);
  }

  /* The design's 2fr 1fr 1fr 1fr: the nav spans the last three columns, and
     with the same gap its own three columns match them exactly */
  .footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 44px;
    margin-bottom: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border);
  }

  .footer-name {
    margin-bottom: 9px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 700;
  }

  .footer-tagline {
    max-width: 210px;
    margin-bottom: 18px;
    font-size: var(--text-lead);
    line-height: var(--line-height-paragraph);
  }

  .footer-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-small);
    font-size: var(--text-small);
  }

  .footer-nav {
    display: grid;
    grid-column: 2 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
  }

  .footer-heading {
    margin-bottom: 13px;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .footer-nav ul {
    display: grid;
    gap: 9px;
    font-size: var(--text-body);
  }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
  }

  .footer-legal {
    display: flex;
  }

  .footer-legal li + li::before {
    content: "·";
    content: "·" / "";
    margin-inline: 6px;
  }

  .footer-registration {
    margin-top: 8px;
  }

  @media (max-width: 768px) {
    .footer-columns {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .footer-nav {
      grid-column: auto;
      gap: 24px;
    }
  }

  @media (max-width: 480px) {
    .footer-nav {
      grid-template-columns: 1fr 1fr;
    }
  }
}