@layer base {
  /* ==========================================================================
     FONTS — all self-hosted, all free to use on the web.

     Satoshi (Fontshare, Indian Type Foundry). Licence in
     assets/fonts/SATOSHI-LICENSE.txt. Three weights are used by the design:
       Light 300   -> "aaron イーライ" at 36px
       Regular 400 -> body and labels, 12 / 15 / 18px
       Black 900   -> nav, headings and numerals, 18 / 30 / 34 / 46 / 57px
     Bold and Medium are also in assets/fonts/ but the PSD does not use them,
     so they are deliberately not declared and never downloaded by a visitor.

     Noto Sans JP replaces Kozuka Gothic Pr6N, which is a Creative Cloud
     desktop font and cannot be served on the web. Subset to the three glyphs
     that actually appear (イ ー ラ), which takes it from 5.3 MB to 1.4 KB.
     ========================================================================== */

  @font-face {
    font-family: "Satoshi";
    src: url("../assets/fonts/Satoshi-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("../assets/fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("../assets/fonts/Satoshi-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  /* Japanese glyphs only — unicode-range keeps this out of the way of Latin. */
  @font-face {
    font-family: "Noto Sans JP";
    src: url("../assets/fonts/NotoSansJP-Light-subset.woff2") format("woff2");
    font-weight: 300 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+30A0-30FF, U+3000-303F, U+4E00-9FFF;
  }

  /* Metric-matched fallback: prevents the layout shift when Satoshi swaps in. */
  @font-face {
    font-family: "Satoshi-fallback";
    src: local("Arial"), local("Helvetica"), local("Segoe UI");
    ascent-override: 96%;
    descent-override: 24%;
    line-gap-override: 0%;
    size-adjust: 103%;
  }

  /* ========================================================================== */

  html {
    scroll-behavior: smooth;
    background: var(--c-bg);
  }

  body {
    font-family: var(--font-sans);
    font-weight: var(--fw-regular);
    font-size: var(--fs-18);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--c-fg);
    background: var(--c-bg);
    /* No overflow-x:hidden here — it would break sticky. Panels clip internally
       via .panel__inner instead. */
  }

  :where(:focus-visible) {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--inset-x);
    inset-block-start: 0;
    transform: translateY(-120%);
    z-index: calc(var(--z-nav) + 1);
    padding: 0.6em 1em;
    background: var(--c-ink);
    color: var(--c-paper);
    font-size: var(--fs-15);
    font-weight: var(--fw-black);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

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

  /* Japanese runs use proportional alternate widths. Photoshop applies these
     by default with Kozuka Gothic; without "palt" Noto sets the katakana
     full-width and the line runs 12.8px long against the PSD. With it, the
     run measures 122.8 against Kozuka's 124. */
  .jp {
    font-family: var(--font-jp);
    font-feature-settings: "palt" 1;
  }
}