@layer layout {
  /* Full-bleed "atos" system: each section paints its own bg/fg.
     No global inline padding here — that lives inside each .act. */

  .act {
    padding-block: clamp(2.5rem, 6vw, 7rem);
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
  }
  .act__inner {
    max-inline-size: var(--content-wide);
    margin-inline: auto;
  }
  .act--text .act__inner { max-inline-size: var(--content-text); }
  .act--read .act__inner { max-inline-size: var(--content-read); }

  .act--ink   { background: var(--ink);   color: var(--paper); }
  .act--paper { background: var(--paper); color: var(--ink); }
  .act--green { background: var(--green); color: var(--ink); }
  .act--blue  { background: var(--blue);  color: var(--paper); }

  /* Sticky top nav — ink bg with backdrop blur */
  .site-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: clamp(1.25rem, 4vw, 3.5rem);
    block-size: var(--nav-h);
    background: rgba(12, 14, 10, 0.88);
    color: var(--paper);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--color-hairline-on-ink);
  }
  @supports not (backdrop-filter: blur(10px)) {
    .site-nav { background: var(--ink); }
  }

  .site-nav__brand {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--paper);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .site-nav__brand svg {
    inline-size: 32px;
    block-size: 22px;
    display: block;
    transform: translateY(-1px);
  }

  /* The <ul> carries popover="auto" for mobile drawer behaviour. On desktop we
     override the UA popover styles (position:fixed + inset:0 + margin:auto) so
     it renders as a normal flex row. */
  .site-nav__links {
    display: flex;
    gap: clamp(0.9rem, 2.2vw, 2rem);
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Reset popover UA styles */
    position: static;
    inset: auto;
    inline-size: auto;
    block-size: auto;
    max-inline-size: none;
    max-block-size: none;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
  }
  .site-nav__links a {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(244, 239, 227, 0.72);
    text-decoration: none;
    transition: color 120ms ease;
  }
  .site-nav__links a[aria-current="page"] { color: var(--gold); }
  .site-nav__links a:hover { color: var(--paper); }
  .site-nav__links a[aria-current="page"]:hover { color: var(--gold); }

  /* Toggle button — real SVG hamburger, hidden on desktop */
  .site-nav__toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--paper);
    padding: var(--space-2);
    cursor: pointer;
    inline-size: 44px;
    block-size: 44px;
    align-items: center;
    justify-content: center;
  }
  .site-nav__toggle svg {
    inline-size: 22px;
    block-size: 22px;
    display: block;
  }
  .site-nav__toggle .site-nav__toggle-close { display: none; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-open { display: none; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-close { display: block; }

  /* Mobile / narrow: turn <ul> into a full-width dropdown drawer via popover.
     Breakpoint sized so the 6 inline nav items don't wrap under the brand. */
  @media (max-width: 800px) {
    /* Push the toggle button flush to the right edge:
       - display:contents on <nav> takes it out of flex flow so the popover
         doesn't count as a middle sibling;
       - trim right padding on the sticky bar itself. */
    .site-nav { padding-inline-end: var(--space-2); }
    .site-nav > nav { display: contents; }

    .site-nav__toggle {
      display: inline-flex;
      margin-inline-start: auto;
    }

    .site-nav__links[popover]:not(:popover-open) { display: none; }
    .site-nav__links[popover]:popover-open {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: fixed;
      inset-block-start: var(--nav-h);
      inset-inline: 0;
      inset-block-end: auto;
      inline-size: 100%;
      max-block-size: calc(100dvh - var(--nav-h));
      padding: var(--space-2) 0 var(--space-4);
      gap: 0;
      background: var(--ink);
      border-block-end: 1px solid var(--color-hairline-on-ink);
      overflow-y: auto;
    }
    .site-nav__links[popover]:popover-open a {
      display: block;
      padding: 16px clamp(1.25rem, 4vw, 3.5rem);
      font-size: 0.85rem;
      letter-spacing: 0.14em;
      border-block-start: 1px solid rgba(244, 239, 227, 0.08);
    }
    .site-nav__links[popover]:popover-open li:first-child a {
      border-block-start: 0;
    }
    /* Backdrop dim */
    .site-nav__links[popover]:popover-open::backdrop {
      background: rgba(12, 14, 10, 0.45);
      backdrop-filter: blur(2px);
    }
  }

  /* Main defaults — no max-width; the atos handle their own containment. */
  main {
    display: block;
    min-inline-size: 0;
  }

  footer {
    background: var(--ink);
    color: rgba(244, 239, 227, 0.8);
    padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-block-start: 1px solid rgba(244, 239, 227, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  footer a {
    color: inherit;
    order: 2;
  }
  footer a:hover {
    color: var(--paper);
  }
  @media (max-width: 500px) {
    footer {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 0.75rem;
    }
  }

  /* Button — gold pill (primary CTA) */
  .btn {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 26px;
    display: inline-block;
    /* Strip user-agent chrome so this works uniformly on <a> and <button>. */
    border: 0;
    appearance: none;
    cursor: pointer;
    transition: transform 120ms ease, background-color 140ms ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn--gold { background: var(--gold); color: var(--ink); }
  .btn--outline-paper {
    background: transparent;
    color: var(--paper);
    border: 1px solid rgba(244, 239, 227, 0.4);
  }
  .btn--outline-ink {
    background: transparent;
    color: var(--ink);
    border: 1px solid rgba(12, 14, 10, 0.4);
  }
}