@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-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;

      /* 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 system fallback; Latin body text stays on Metropolis. */
    html[lang="ja"] {
      --font-serif: var(--font-japanese);
    }

    /* ============================================================
       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: center;
      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-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);
    }

    /* ============================================================
       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.5rem, 2vw, 2.5rem);
      line-height: 1.2;
      color: var(--color-green-dark);
      min-width: 0;
      max-width: min(30vw, 300px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 0 1 min(30vw, 300px);
      margin-right: clamp(24px, 3vw, 48px);
      transition: var(--transition-default);
    }

    .nav-brand:hover {
      opacity: 0.8;
    }

    .nav-spacer {
      flex: 1 1 auto;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      flex: 1 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: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 2px 0;
      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: clamp(24px, 3vw, 48px);
    }

    .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: 104px;
      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;
    }

    .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;
    }

    @media (min-width: 1025px) {
      html[lang="ja"] .top-nav {
        gap: 16px;
        min-width: 0;
      }

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

      html[lang="ja"] .nav-links {
        min-width: 0;
        gap: 10px;
      }

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

      html[lang="ja"] .nav-cta .btn-dark {
        max-width: 160px;
        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;
      }
    }

    /* ============================================================
       6. PRIVACY CONTENT
       ============================================================ */
    .privacy-page {
      max-width: 720px;
      margin: 0 auto;
      padding: 80px var(--gutter) 100px;
    }

    .privacy-page h1 {
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: clamp(2rem, 4vw, 3rem);
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--color-green-dark);
      margin-bottom: 8px;
    }

    .privacy-meta {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      line-height: 1.2;
      letter-spacing: 0.08em;
      color: var(--color-green-muted);
      margin-bottom: 40px;
      text-transform: uppercase;
    }

    .privacy-page section {
      margin-bottom: 40px;
    }

    .privacy-page section:last-child {
      margin-bottom: 0;
    }

    .privacy-page h2 {
      font-family: var(--font-serif);
      font-weight: 500;
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      line-height: 1.3;
      color: var(--color-green-dark);
      margin-bottom: 12px;
    }

    .privacy-page p {
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.625;
      color: var(--color-green-muted);
      max-width: 640px;
    }

    .privacy-page p + p {
      margin-top: 16px;
    }

    .privacy-intro {
      margin-bottom: 48px;
    }

    .privacy-provisional {
      padding: 24px 28px;
      background: rgba(254, 188, 131, 0.08);
    }

    .privacy-provisional h2 {
      margin-bottom: 8px;
    }

    .privacy-back {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 48px;
      font-family: var(--font-mono);
      font-weight: 500;
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-green-muted);
      transition: var(--transition-default);
    }

    .privacy-back:hover {
      color: var(--color-green-dark);
    }

    .privacy-back::before {
      content: "\2190";
      font-size: 1rem;
    }