/* Ray Iwazumi — site styles.
   Tokens mirror the Figma file "Ray Iwazumi - website" (Primitives, Color, Spacing, Radius, Typography). */

/* ---------- Primitives ---------- */
:root {
  --color-premium-vellum: #FDF8F7;
  --color-vintage-print: #23252E;
  --color-chalk-orange: #F37A4C;
  --color-chalk-orange-deep: #D65F33;
  --color-chalk-orange-ink: #BF4C20;
  --color-regal-lilac: #9483D2;
  --color-regal-lilac-soft: #E4DEF5;
  --color-stone-100: #E7E2E0;
  --color-stone-200: #D7D1CF;
  --color-stone-400: #9F9E9B;
  --color-stone-700: #5F5E5B;
  --color-stone-800: #42434A;
  --color-stone-900: #313238;

  --space-4: 4px;  --space-8: 8px;  --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px;
  --space-80: 80px; --space-96: 96px; --space-128: 128px; --space-160: 160px;

  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;

  --font-serif-en: "Newsreader", Georgia, serif;
  --font-serif-ja: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans-en: "Work Sans", system-ui, sans-serif;
  --font-sans-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --page-gutter: var(--space-96);
  --page-max: 1440px;
}

/* ---------- Semantic color: light (default) ---------- */
:root {
  color-scheme: light;
  --color-bg-canvas: var(--color-premium-vellum);
  --color-bg-subtle: var(--color-stone-100);
  --color-bg-inverse: var(--color-vintage-print);
  --color-text-primary: var(--color-vintage-print);
  --color-text-secondary: var(--color-stone-700);
  --color-text-inverse: var(--color-premium-vellum);
  --color-text-on-accent: var(--color-vintage-print);
  --color-text-accent: var(--color-chalk-orange-ink);
  --color-border-default: var(--color-stone-200);
  --color-border-strong: var(--color-vintage-print);
  --color-accent-orange: var(--color-chalk-orange);
  --color-accent-orange-hover: var(--color-chalk-orange-deep);
  --color-accent-lilac: var(--color-regal-lilac);
  --color-band: var(--color-vintage-print);
}

/* Dark tokens: used by the dark theme and by always-dark surfaces (hero, contact, footer). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg-canvas: var(--color-vintage-print);
    --color-bg-subtle: var(--color-stone-900);
    --color-bg-inverse: var(--color-premium-vellum);
    --color-text-primary: var(--color-premium-vellum);
    --color-text-secondary: var(--color-stone-400);
    --color-text-inverse: var(--color-vintage-print);
    --color-text-accent: var(--color-chalk-orange);
    --color-border-default: var(--color-stone-800);
    --color-border-strong: var(--color-premium-vellum);
    --color-band: var(--color-stone-900);
  }
}
:root[data-theme="dark"],
.surface-dark {
  color-scheme: dark;
  --color-bg-canvas: var(--color-vintage-print);
  --color-bg-subtle: var(--color-stone-900);
  --color-bg-inverse: var(--color-premium-vellum);
  --color-text-primary: var(--color-premium-vellum);
  --color-text-secondary: var(--color-stone-400);
  --color-text-inverse: var(--color-vintage-print);
  --color-text-accent: var(--color-chalk-orange);
  --color-border-default: var(--color-stone-800);
  --color-border-strong: var(--color-premium-vellum);
}
:root[data-theme="dark"] { --color-band: var(--color-stone-900); }
/* `color` inherits as a computed value, so dark surfaces must re-apply it from their own tokens. */
.surface-dark { color: var(--color-text-primary); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font: 500 16px/24px var(--font-sans-en);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
p, h1, h2, h3, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--color-accent-lilac); outline-offset: 3px; border-radius: var(--radius-sm); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: var(--space-16); top: -100px; z-index: 10; padding: var(--space-8) var(--space-16);
  background: var(--color-bg-canvas); color: var(--color-text-primary); }
.skip-link:focus { top: var(--space-16); }

/* ---------- Type styles (EN default; :lang(ja) swaps to the paired JA style) ---------- */
.t-display-xl { font: 500 96px/104px var(--font-serif-en); letter-spacing: -0.02em; }
.t-display    { font: 600 72px/80px var(--font-serif-en); letter-spacing: -0.015em; }
.t-h1         { font: 600 48px/56px var(--font-serif-en); letter-spacing: -0.01em; }
.t-h2         { font: 600 32px/40px var(--font-serif-en); letter-spacing: -0.005em; }
.t-h3         { font: 700 24px/32px var(--font-serif-en); }
.t-body-lg    { font: 500 20px/32px var(--font-sans-en); }
.t-body       { font: 500 16px/24px var(--font-sans-en); }
.t-body-sm    { font: 500 14px/24px var(--font-sans-en); }
.t-label      { font: 600 14px/16px var(--font-sans-en); letter-spacing: 0.08em; text-transform: uppercase; }
.t-caption    { font: 500 12px/16px var(--font-sans-en); letter-spacing: 0.02em; }

:lang(ja) body { font-family: var(--font-sans-ja); line-break: strict; }
:lang(ja) .t-display-xl { font: 600 80px/112px var(--font-serif-ja); letter-spacing: 0; }
:lang(ja) .t-display    { font: 600 56px/80px var(--font-serif-ja); letter-spacing: 0; }
:lang(ja) .t-h1         { font: 700 40px/64px var(--font-serif-ja); letter-spacing: 0; }
:lang(ja) .t-h2         { font: 700 28px/48px var(--font-serif-ja); letter-spacing: 0; }
:lang(ja) .t-h3         { font: 700 22px/40px var(--font-serif-ja); }
:lang(ja) .t-body-lg    { font: 500 18px/32px var(--font-sans-ja); letter-spacing: 0.02em; }
:lang(ja) .t-body       { font: 500 16px/28px var(--font-sans-ja); letter-spacing: 0.02em; }
:lang(ja) .t-body-sm    { font: 500 14px/24px var(--font-sans-ja); letter-spacing: 0.02em; }
:lang(ja) .t-label      { font: 700 13px/16px var(--font-sans-ja); letter-spacing: 0.04em; text-transform: none; }
:lang(ja) .t-caption    { font: 500 12px/20px var(--font-sans-ja); letter-spacing: 0.04em; }

.t-secondary { color: var(--color-text-secondary); }
.t-accent { color: var(--color-text-accent); }
cite, .t-italic { font-style: italic; }
:lang(ja) cite { font-style: normal; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.section { padding-block: var(--space-128); }
.section--tight { padding-block: var(--space-96); }
.section-title { display: flex; align-items: baseline; gap: var(--space-16); }
.stack-8 > * + * { margin-top: var(--space-8); }
.stack-16 > * + * { margin-top: var(--space-16); }
.stack-24 > * + * { margin-top: var(--space-24); }
.stack-40 > * + * { margin-top: var(--space-40); }

/* ---------- Components: Button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 48px; padding: var(--space-16) var(--space-24);
  border: 1px solid transparent; border-radius: var(--radius-md);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--color-accent-orange); color: var(--color-text-on-accent); }
.btn--primary:hover { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.btn--secondary { border-color: var(--color-border-strong); color: var(--color-text-primary); }
.btn--secondary:hover { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.btn--ghost { color: var(--color-text-primary); }
.btn--ghost:hover { background: var(--color-bg-subtle); }
.btn__arrow { font-family: var(--font-sans-en); }

/* ---------- Components: Tag ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.tag {
  display: inline-block; padding: var(--space-4) var(--space-8); border-radius: var(--radius-sm);
  font: 500 12px/16px var(--font-sans-en); letter-spacing: 0.06em; text-transform: uppercase;
}
:lang(ja) .tag { font: 500 12px/20px var(--font-sans-ja); letter-spacing: 0.04em; text-transform: none; }
.tag--lilac { background: var(--color-accent-lilac); color: var(--color-text-on-accent); }
.tag--outline { border: 1px solid var(--color-border-strong); }

/* ---------- Components: Theme toggle ---------- */
.theme-toggle {
  display: inline-flex; gap: var(--space-4); padding: var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
}
.theme-toggle button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-text-secondary); cursor: pointer;
}
.theme-toggle button[aria-pressed="true"] { background: var(--color-bg-inverse); color: var(--color-text-inverse); }
.theme-toggle svg { width: 16px; height: 16px; }

/* ---------- Logo ---------- */
.logo {
  display: block; width: 96px; aspect-ratio: 3316 / 1919;
  background: var(--color-accent-lilac);
  -webkit-mask: url("../logo/signature.svg") center / contain no-repeat;
  mask: url("../logo/signature.svg") center / contain no-repeat;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 5;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-24); padding-bottom: var(--space-8);
  transition: padding .3s ease;
}
/* Once the page scrolls, the bar gets its own background so it reads over light sections. */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--color-bg-canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--color-border-default);
}
.site-header.is-scrolled .container { padding-top: var(--space-8); padding-bottom: var(--space-8); }
@media (prefers-reduced-motion: reduce) { .site-header, .site-header .container { transition: none; } }
.nav { display: flex; align-items: center; gap: var(--space-32); }
.nav__links { display: flex; gap: var(--space-32); }
.nav__links a, .lang a { text-decoration: none; }
.nav__links a:hover, .lang a:hover { color: var(--color-text-accent); }
.lang { display: flex; align-items: center; gap: var(--space-8); }
.lang [aria-current="true"] { color: var(--color-text-primary); }
.lang a { color: var(--color-text-secondary); }
.lang__sep { color: var(--color-text-secondary); }
.icon-link { display: grid; place-items: center; width: 32px; height: 32px; color: var(--color-text-primary); }
.icon-link svg { width: 20px; height: 20px; }
.icon-link:hover { color: var(--color-text-accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: max(640px, min(100svh, 56.25vw));
  display: flex; align-items: flex-end;
  background: var(--color-bg-canvas); color: var(--color-text-primary);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(35 37 46 / .9) 0%, rgb(35 37 46 / .6) 40%, rgb(35 37 46 / 0) 70%),
    linear-gradient(180deg, rgb(35 37 46 / .45) 0%, rgb(35 37 46 / 0) 18%);
}
.hero .container { padding-bottom: var(--space-96); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-48); }
.hero__copy { max-width: 720px; }
.hero__copy .t-body-lg { max-width: 600px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.hero__meta { display: flex; align-items: center; gap: var(--space-16); color: var(--color-text-secondary); }
.video-toggle {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-primary); cursor: pointer;
}
.video-toggle svg { width: 14px; height: 14px; }

/* ---------- Photos ---------- */
.photo img { width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--color-bg-subtle); }
.photo figcaption { margin-top: var(--space-16); color: var(--color-text-secondary); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-96); align-items: center; }

/* ---------- Bio ---------- */
.bio { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: var(--space-96); align-items: start; }
.bio__text { max-width: 760px; }

/* ---------- Concentrations ---------- */
.conc { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--space-64); align-items: start; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-48); }
.card { border-top: 1.5px solid var(--color-border-strong); padding-top: var(--space-24); }
.card .t-body-sm { color: var(--color-text-secondary); }

/* ---------- Contact / footer (always dark) ---------- */
.contact { background: var(--color-band); text-align: center; padding-block: var(--space-160); }
.contact .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-32); }
/* Japanese lines here break only at <wbr> and punctuation, never mid-word. */
.contact :is(h2, p):lang(ja) { word-break: keep-all; }
.contact__handle { display: inline-flex; align-items: center; gap: var(--space-16); text-decoration: none; }
.contact__handle svg { width: 32px; height: 32px; }
.contact__handle:hover { color: var(--color-text-accent); }
.site-footer { background: var(--color-band); border-top: 1px solid var(--color-border-default); color: var(--color-text-secondary); }
.site-footer .container { display: flex; justify-content: space-between; gap: var(--space-16); padding-block: var(--space-32); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--color-text-primary); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  :root { --page-gutter: var(--space-48); }
  .about, .bio { gap: var(--space-64); grid-template-columns: minmax(0, 1fr) 340px; }
  .bio { grid-template-columns: 340px minmax(0, 1fr); }
  .conc { grid-template-columns: 1fr; }
  .conc .photo { max-width: 560px; }
}

@media (max-width: 899px) {
  :root { --page-gutter: var(--space-24); }
  .section { padding-block: var(--space-80); }
  .section--tight { padding-block: var(--space-64); }

  .t-display-xl, .t-display { font-size: 48px; line-height: 56px; }
  .t-h1 { font-size: 40px; line-height: 48px; }
  .t-h2 { font-size: 32px; line-height: 40px; }
  .t-body-lg { font-size: 16px; line-height: 24px; }
  :lang(ja) .t-display-xl, :lang(ja) .t-display { font-size: 40px; line-height: 64px; }
  :lang(ja) .t-h1 { font-size: 32px; line-height: 48px; }
  :lang(ja) .t-h2 { font-size: 28px; line-height: 48px; }
  :lang(ja) .t-body-lg { font-size: 16px; line-height: 28px; }

  html { scroll-padding-top: 72px; }
  .site-header .container { padding-top: var(--space-16); }
  .nav { gap: var(--space-16); }
  .nav__links { display: none; }
  .logo { width: 80px; }

  .hero { min-height: 100svh; }
  .hero__media video, .hero__media img { object-position: 62% 50%; }
  .hero::before { background: linear-gradient(180deg, rgb(35 37 46 / 0) 35%, rgb(35 37 46 / .9) 75%); }
  .hero .container { padding-bottom: var(--space-40); flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__actions .btn--ghost { display: none; }
  .hero__meta .t-caption { display: none; }
  .hero__meta { position: absolute; right: var(--page-gutter); top: 88px; }

  .about, .bio { grid-template-columns: 1fr; gap: var(--space-40); }
  .bio .photo { order: -1; }
  .cards { grid-template-columns: 1fr; gap: var(--space-32); }
  .contact { padding-block: var(--space-96); }
  .contact .btn { width: 100%; }
  .site-footer .container { flex-direction: column; }
}

/* Portrait screens get a 9:16 cut already framed shot by shot (hero-portrait.mp4), so center it. */
@media (max-width: 899px) and (max-aspect-ratio: 1/1) {
  .hero__media video, .hero__media img { object-position: 50% 50%; }
}