/* ═══════════════════════════════════════════════════════════════════════════
   02 - BASE
   Document ground, selection, focus, scrollbars, the grain overlay, and the
   handful of element defaults that every page relies on.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {

  html {
    background: var(--ink-950);
  }

  body {
    background: var(--surface);
    color: var(--ivory-300);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    font-optical-sizing: auto;
    font-feature-settings: 'cv11', 'ss01';
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Never a horizontal scrollbar. Where one appears, the culprit is fixed
       at source - this is the last line of defence, not the first (§14). */
    overflow-x: clip;
  }

  /* Scroll is locked from JS while the menu or lightbox is open. The padding
     compensates for the scrollbar so the page does not jump (§7.3). */
  html.is-locked {
    overflow: hidden;
    padding-right: var(--scrollbar-w);
  }

  /* ── Selection ──────────────────────────────────────────────────────── */

  ::selection {
    background: var(--action);
    color: var(--on-action);
    text-shadow: none;
  }

  /* ── Focus (§14) ────────────────────────────────────────────────────── */

  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
  }

  /* Elements that carry their own rounded shape keep it while focused. */
  a:focus-visible,
  button:focus-visible,
  .btn:focus-visible,
  .pill:focus-visible {
    border-radius: inherit;
  }

  /* ── Scrollbars ─────────────────────────────────────────────────────── */

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-600) transparent;
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--ink-950);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--ink-600);
    border: 3px solid var(--ink-950);
    border-radius: var(--r-pill);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--teak-600);
  }

  /* ── Links ──────────────────────────────────────────────────────────── */

  a {
    color: inherit;
    text-decoration: none;
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
  }

  /* Inside running copy, links are underlined - nowhere else. */
  .prose a,
  .rich a {
    color: var(--gold-300);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--gold-500) 45%, transparent);
    transition: text-decoration-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
  }

  .prose a:hover,
  .rich a:hover {
    color: var(--gold-400);
    text-decoration-color: var(--gold-400);
  }

  /* ── Media defaults ─────────────────────────────────────────────────── */

  img,
  .picture > img {
    object-fit: cover;
    background-color: var(--ink-800);
  }

  .picture {
    display: block;
    position: relative;
    overflow: hidden;
  }

  .picture > img {
    width: 100%;
    height: 100%;
  }

  /* The stand-in used when a media row is missing entirely (§6). */
  .img-missing {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
      radial-gradient(120% 100% at 50% 0%, var(--ink-700), var(--ink-850) 70%);
    border: 1px solid var(--hairline);
    border-radius: inherit;
  }

  .img-missing__mark {
    width: 28px;
    height: 28px;
    border: 1px solid var(--hairline-hot);
    transform: rotate(45deg);
    opacity: .5;
  }

  /* ── The grain overlay (§4.1) ───────────────────────────────────────── */

  .grain {
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url('/assets/img/texture/grain.png');
    background-size: 140px 140px;
    background-repeat: repeat;
    /* The tile is generated by tools/make-placeholders.php; if it is missing
       the overlay simply renders nothing. */
  }

  @media print {
    .grain { display: none; }
  }

  /* ── Skip link (§7.7) ───────────────────────────────────────────────── */

  .skip-link {
    position: fixed;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: calc(var(--z-grain) + 1);
    padding: var(--sp-3) var(--sp-5);
    background: var(--action);
    color: var(--on-action);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--r-pill);
    transform: translateY(calc(-100% - var(--sp-5)));
    transition: transform var(--dur) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: 4px;
  }

  /* ── Screen-reader-only ─────────────────────────────────────────────── */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ── Icons (§5.4) ───────────────────────────────────────────────────── */

  .icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.125em;
    fill: currentColor;
    stroke: none;
    flex: none;
  }

  /* The inlined sprite must never occupy space. */
  .sprite-host {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  /* ── ?slots=1 - the content-audit mode (§6) ─────────────────────────── */

  .slots-mode [data-slot] {
    outline: 2px dashed var(--gold-500);
    outline-offset: -4px;
    position: relative;
  }

  .slots-mode [data-slot]::after {
    content: attr(data-slot);
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 6px;
    z-index: 3;
    padding: 3px 8px;
    background: var(--action);
    color: var(--on-action);
    font-family: var(--ff-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    pointer-events: none;
  }

  /* ── Noscript ───────────────────────────────────────────────────────── */

  .noscript-note {
    padding: var(--sp-4) var(--gutter);
    background: var(--ink-800);
    border-bottom: 1px solid var(--hairline);
    color: var(--ivory-300);
    font-size: var(--fs-meta);
    text-align: center;
  }
}