/* =============================================
   BASE — shared variables, reset, fonts, reveal
   ============================================= */

:root {
  /* shared display fonts */
  --font-display-jp: 'Shippori Mincho B1', 'Noto Serif JP', serif;
  --font-body-jp: 'Noto Serif JP', serif;
  --font-display-en: 'Cormorant Garamond', serif;
  --font-display-en-alt: 'EB Garamond', serif;

  --maxw: 1200px;
}

/* ---- Light theme (index) ---- */
body.theme-light {
  --navy: #1E3A5F;
  --navy-deep: #1A324E;
  --navy-darker: #142844;
  --navy-soft: #23374F;
  --navy-tint: #2A4469;

  --gold: #D9A34B;
  --gold-soft: #CFAA42;
  --gold-bright: #E8B968;
  --gold-dim: #A88862;

  --bg: #F8F9FB;
  --bg-subtle: #F4F4F4;
  --bg-card: #FFFFFF;

  --ink: #1A1A1A;
  --ink-soft: #3D3D3D;
  --ink-muted: #6B6B6B;
  --ink-dim: #9A9A9A;

  --line: #E2E5EC;
  --line-dark: #2A3A52;
  --line-on-navy: rgba(217, 163, 75, 0.25);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body-jp);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

/* ---- Dark theme (dignity-matrix) — itotetsu Navy × Gold ---- */
body.theme-dark {
  --bg:      #142844;   /* navy-darker — itotetsu.com contact section */
  --bg2:     #1A324E;   /* navy-deep   — hero section */
  --bg3:     #1E3A5F;   /* navy        — origin section */
  --surface: #23374F;   /* navy-soft */
  --border:  #2A3A52;   /* line-dark */
  --border2: #1F3148;   /* subtle on navy */
  --text:    #F4EEDE;   /* cream (warm against navy) */
  --text2:   #A8B0BD;
  --text3:   #6A7888;
  --text4:   #3E4C5E;
  --accent:  #D9A34B;   /* gold — itotetsu.com main accent */
  --accent2: #A88862;   /* gold-dim */
  --red:     #C04040;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body-jp);
  font-weight: 300;
  line-height: 1.8;
}

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clip BOTH html and body so no element can create a horizontal scrollbar.
   `width: 100%` on body prevents fixed/absolute children from widening it. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
body {
  width: 100%;
  position: relative;
}

/* Mobile safety net: keep long Latin words / URLs from pushing layout wider
   than the viewport. `overflow-wrap` only kicks in when a line can't break
   normally, so this won't affect normal typography. */
@media (max-width: 720px) {
  p, li, h1, h2, h3, h4, h5, blockquote, td, th, .lead {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* Light theme: English font swap */
body.theme-light[lang], html[lang] body.theme-light {}
html[lang="en"] body.theme-light {
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  letter-spacing: 0.01em;
}

body.theme-light ::selection { background: var(--gold); color: var(--navy-deep); }

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

/* i18n: hide opposite language */
html[lang="ja"] [data-en],
html[lang="en"] [data-ja] { display: none; }

/* =============================================
   SCROLL REVEAL — shared animation
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* dark theme uses a slightly tighter reveal */
body.theme-dark .reveal {
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
body.theme-dark .reveal.visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}