:root {
  /* ============================================================
     v3 — Editorial color-block palette.
     Each section gets its own bold flat color. Black line art
     (the "walker") reads on every panel.
  ============================================================ */
  --ink:          #15161A;       /* near-black */
  --ink-muted:    rgba(21, 22, 26, 0.55);
  --ink-faint:    rgba(21, 22, 26, 0.22);
  --ink-line:     rgba(21, 22, 26, 0.16);
  --paper:        #F2EFE9;       /* warm off-white base */

  /* Section bg palette (all warm, mid-tone — black ink reads on all) */
  --sec-mustard:  #D8AA48;       /* Hero */
  --sec-sage:     #95A88A;       /* Identity */
  --sec-coral:    #DD7D63;       /* Business */
  --sec-cream:    #ECE3D2;       /* Company */
  --sec-stone:    #B5A78A;       /* News  */
  --sec-rose:     #C99089;       /* Contact */
  --sec-trailing: #F2EFE9;       /* Optional buffer plate */

  --accent:       #15161A;       /* black on color blocks */

  /* Typography */
  --font-display:    "Cormorant Garamond", "Times New Roman", serif;
  --font-display-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-en:         "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-jp:         "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --fs-xxs:   clamp(10px, 0.5vw + 7px, 11px);
  --fs-xs:    clamp(11px, 0.7vw + 8px, 13px);
  --fs-sm:    clamp(13px, 0.8vw + 10px, 15px);
  --fs-base:  clamp(15px, 0.9vw + 11px, 17px);
  --fs-lg:    clamp(17px, 1.1vw + 12px, 20px);
  --fs-xl:    clamp(22px, 2vw + 14px, 32px);
  --fs-2xl:   clamp(32px, 4vw + 16px, 56px);
  --fs-3xl:   clamp(48px, 6vw + 20px, 96px);
  --fs-hero:  clamp(56px, 10vw + 16px, 160px);

  --space-1:  clamp(4px, 0.4vw, 6px);
  --space-2:  clamp(8px, 0.8vw, 12px);
  --space-3:  clamp(16px, 1.6vw, 24px);
  --space-4:  clamp(24px, 2.4vw, 40px);
  --space-5:  clamp(40px, 4vw, 64px);
  --space-6:  clamp(64px, 6vw, 96px);
  --space-7:  clamp(96px, 9vw, 160px);
  --space-8:  clamp(128px, 12vw, 240px);

  --gutter:    clamp(24px, 5vw, 80px);
  --maxw:      1320px;
  --header-h:  72px;

  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-mid:    600ms;
  --dur-slow:   1200ms;
}

@media (max-width: 880px) {
  :root {
    --header-h: 60px;
  }
}

::selection {
  background: var(--ink);
  color: var(--paper);
}