@font-face {
      font-family: "Metropolis";
      src: url("/assets/fonts/metropolis-regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      unicode-range: U+0000-024F, U+2000-206F;
    }


    @font-face {
      font-family: "Metropolis";
      src: url("/assets/fonts/metropolis-medium.woff2") format("woff2");
      font-weight: 500;
      font-style: normal;
      font-display: swap;
      unicode-range: U+0000-024F, U+2000-206F;
    }

    @font-face {
      font-family: "Metropolis";
      src: url("/assets/fonts/metropolis-bold.woff2") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      unicode-range: U+0000-024F, U+2000-206F;
    }

    /* ============================================================
       0. DESIGN TOKENS
       ============================================================ */
    :root {
      /* Colours */
      --color-bg:           #FFFDFA;
      --color-hero-bg:      #F1EEE0;
      --color-green-dark:   #002E29;
      --color-green-muted:  #3F4946;
      --color-accent:       #FEBC83;
      --color-accent-text:  #79491A;
      --color-border:       #BFC9C4;
      --color-border-light: rgba(191, 201, 196, 0.3);
      --color-placeholder:  #757575;
      --color-footer-bg:    #E5E3D5;
      --color-text-light:   #FFFDFA;
      --color-text-muted:   #EBE8DB;
      --color-overlay:      rgba(0, 46, 41, 0.9);
      --color-nav-bg:       rgba(253, 250, 235, 0.8);

      /* Times New Roman is the temporary serif fallback; Metropolis is registered above for Latin sans text. */
      /* Add further self-hosted font faces only after final licensing and asset review. */
      --font-serif: "Times New Roman", Times, serif;
      --font-sans: "Metropolis", var(--font-japanese);
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --font-japanese: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", sans-serif;
      --font-japanese-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;

      /* Spacing */
      --gutter: 80px;
      --section-pad-y: 64px;
      --max-width: 1120px;
      --max-width-full: 1536px;

      /* Transitions (attachment points, not active) */
      --transition-default: 300ms ease;
    }

    /* Japanese headings use an explicit Japanese serif fallback; Latin body text stays on Metropolis. */
    html[lang="ja"] {
      --font-serif: "Times New Roman", Times, var(--font-japanese-serif);
    }

    /* ============================================================
       1. RESET & BASE
       ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.5;
      color: var(--color-green-dark);
      background: var(--color-bg);
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    ul {
      list-style: none;
    }

    /* ============================================================
       2. TYPOGRAPHY
       ============================================================ */
    .heading-1 {
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: clamp(2.5rem, 5vw, 4rem);   /* 40px – 64px */
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--color-green-dark);
    }

    .heading-2 {
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: clamp(1.75rem, 3vw, 2.5rem); /* 28px – 40px */
      line-height: 1.2;
      color: var(--color-green-dark);
    }

    .heading-3 {
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: clamp(1.5rem, 2.5vw, 2rem);  /* 24px – 32px */
      line-height: 1.3;
    }

    .label-mono {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.75rem;   /* 12px */
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .label-mono-sm {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.625rem;  /* 10px */
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ============================================================
       3. COMPONENTS
       ============================================================ */

    /* --- Buttons --- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1.2;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: var(--transition-default);
    }

    .btn-accent {
      background: var(--color-accent);
      color: var(--color-accent-text);
      padding: 15.5px 24px;
    }

    .btn-accent:hover {
      opacity: 0.9;
    }

    .btn-dark {
      background: var(--color-green-dark);
      color: #fff;
      padding: 7.5px 24px;
    }

    .btn-dark:hover {
      opacity: 0.9;
    }

    .btn-outline {
      background: transparent;
      border: 1px solid var(--color-border);
      padding: 7.5px 24px;
      color: var(--color-green-dark);
    }

    .btn-outline:hover {
      border-color: var(--color-green-dark);
    }

    .btn-full {
      width: 100%;
    }

    /* --- Placeholder image --- */
    .placeholder-img {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--color-border);
      color: var(--color-green-muted);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .placeholder-img::after {
      content: attr(data-label);
      position: relative;
      z-index: 1;
      opacity: 0.5;
    }

    /* --- Section label bar --- */
    .section-label {
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.75rem;
      line-height: 1.2;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-green-muted);
      text-align: center;
    }

    /* --- Section wrapper (animation attachment) --- */
    .section-wrapper {
      position: relative;
    }

    /* ============================================================
       4. LAYOUT
       ============================================================ */
    .page {
      max-width: var(--max-width-full);
      margin: 0 auto;
      background: var(--color-bg);
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding-left: var(--gutter);
      padding-right: var(--gutter);
    }

    /* ============================================================
       5. TOP NAV
       ============================================================ */
    .top-nav {
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(16px, 2vw, 32px);
      padding: 22px var(--gutter);
      background: var(--color-nav-bg);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--color-border-light);
    }

    .nav-brand {
      font-family: var(--font-serif);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1.2rem, 1.8vw, 1.45rem);
      line-height: 1.2;
      color: var(--color-green-dark);
      min-width: 0;
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 0 0 auto;
      margin-right: clamp(24px, 3vw, 48px);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: clamp(28px, 4vw, 56px);
      justify-content: flex-start;
      flex: 0 1 auto;
    }

    .nav-link {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;
      color: var(--color-green-muted);
      white-space: nowrap;
      max-width: none;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 10px 8px;
      transition: var(--transition-default);
    }

    .nav-link:hover {
      color: var(--color-green-dark);
    }

    .nav-link.active {
      font-weight: 700;
      color: var(--color-green-dark);
      border-bottom: 1px solid var(--color-green-dark);
    }

    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }

    .nav-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--color-green-dark);
      border-radius: 1px;
    }

    .nav-cta {
      flex-shrink: 0;
      margin-left: auto;
    }

    .nav-cta .btn-dark {
      padding-left: 18px;
      padding-right: 18px;
    }

    .language-switcher {
      display: flex;
      align-items: center;
      margin-left: 8px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      flex-shrink: 0;
    }

    .language-switcher select {
      width: 80px;
      min-width: 0;
      padding: 6px 26px 6px 8px;
      border: 1px solid var(--color-border-light);
      border-radius: 0;
      background: var(--color-nav-bg);
      color: var(--color-green-dark);
      font: inherit;
      text-overflow: ellipsis;
      cursor: pointer;
    }

    /* Quiet account action shared by every localized page header. */
    .nav-auth {
      margin-left: 4px;
      flex-shrink: 0;
    }

    .nav-sign-in {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      color: var(--color-green-dark);
      transition: var(--transition-default);
    }

    .nav-sign-in:hover,
    .nav-sign-in:focus-visible {
      color: var(--color-green-muted);
    }

    .nav-sign-in-icon {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.55;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

    /* Japanese TODO labels are intentionally long placeholders. Keep the
       desktop header balanced until approved Japanese content is supplied. */
    @media (min-width: 1025px) {
      html[lang="ja"] .top-nav {
        gap: 16px;
        min-width: 0;
      }

      html[lang="ja"] .nav-brand {
        max-width: 120px;
        flex: 0 1 120px;
        margin-right: 24px;
      }

      html[lang="ja"] .nav-links {
        min-width: 0;
        gap: clamp(28px, 4vw, 56px);
      }

      html[lang="ja"] .nav-link {
        max-width: none;
        font-size: 0.875rem;
        padding: 10px 8px;
      }

      html[lang="ja"] .nav-cta .btn-dark {
        max-width: none;
        padding-left: 14px;
        padding-right: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      html[lang="ja"] .language-switcher {
        margin-left: 4px;
      }

      html[lang="ja"] .language-switcher select {
        width: 80px;
      }
    }