*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* 1rem ≒ 18px。本文・ラベル・カードなど rem 指定が一括で一段読みやすくなる */
  html {
    scroll-behavior: smooth;
    font-size: 112.5%;
  }

  body {
    background-color: var(--paper-2);
    background-image:
      radial-gradient(ellipse 100% 70% at 50% -15%, var(--paper-fiber), transparent 52%),
      radial-gradient(ellipse 55% 45% at 100% 30%, rgba(232, 218, 200, 0.22), transparent 55%),
      radial-gradient(ellipse 50% 40% at 0% 85%, rgba(218, 200, 180, 0.18), transparent 50%),
      linear-gradient(168deg, var(--paper-0) 0%, var(--paper-1) 42%, var(--paper-2) 100%);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.58;
    overflow-x: hidden;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  /* 紙の繊維っぽい粗いグレイン（スクロールでごく弱く視差） */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
    mix-blend-mode: multiply;
    transform: translate3d(0, calc(var(--paper-scroll, 0px) * -0.52), 0);
    will-change: transform;
  }

  /* 上から重ねる細かい粉ノイズ */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 4;
    opacity: 0.75;
    mix-blend-mode: multiply;
    transform: translate3d(0, calc(var(--paper-scroll, 0px) * -0.3), 0);
    will-change: transform;
  }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.72rem;
    text-decoration: none;
    border-radius: 0 0 10px 0;
  }

  .skip-link:focus {
    left: 0;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ── NAVIGATION ── */
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: max(var(--ds-nav-pad-y), env(safe-area-inset-top)) var(--ds-nav-pad-x) var(--ds-nav-pad-y);
    padding-left: max(var(--ds-nav-pad-x), env(safe-area-inset-left));
    padding-right: max(var(--ds-nav-pad-x), env(safe-area-inset-right));
    background: linear-gradient(180deg, rgba(252, 249, 243, 0.82) 0%, rgba(245, 239, 230, 0.76) 100%);
    backdrop-filter: blur(24px) saturate(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(1.08);
    border-bottom: 1px solid var(--glass-border-strong);
    box-shadow: var(--glass-highlight), 0 14px 44px -26px rgba(26, 23, 20, 0.1);
  }

  .nav-logo {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 0;
  }

  .nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-links li {
    list-style: none;
  }

  .nav-links a {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    transition:
      color var(--ds-duration-normal) var(--ds-ease-standard),
      background var(--ds-duration-normal) var(--ds-ease-standard),
      box-shadow var(--ds-duration-normal) var(--ds-ease-standard),
      transform var(--ds-duration-fast) var(--ds-ease-standard);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--ds-space-3);
    border-radius: 100px;
    border: 1px solid transparent;
  }

  .nav-links a:hover {
    color: var(--ink);
    background: var(--glass-surface-hover);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transform: translateY(-1px);
  }

  .nav-toggle {
    display: none;
    position: relative;
    z-index: 120;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    border-radius: 10px;
    transition: opacity 0.15s, background 0.2s;
  }

  .nav-toggle:hover { background: rgba(26,23,20,0.04); }

  a:focus-visible,
  button:focus-visible,
  .contact-link:focus-visible,
  .chapter-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .story a:focus-visible {
    outline-color: var(--paper);
  }