.site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9000; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: clamp(0.9rem, 2.2vw, 1.5rem) var(--page-inline);
  max-width: var(--shell-max); margin-inline: auto;
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); letter-spacing: -0.03em; line-height: 1; }
.nav--inline { display: flex; gap: clamp(1.1rem, 2.4vw, 2.4rem); }
.nav--inline a {
  position: relative; font-family: var(--font-display); font-weight: 500;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.4em 0;
}
.nav--inline a::after {
  content: ''; position: absolute; left: 0; bottom: 0.05em;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-1) var(--ease-out-quart);
}
.nav--inline a:hover::after, .nav--inline a:focus-visible::after, .nav--inline a.is-current::after { transform: scaleX(1); }

.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform var(--dur-1) var(--ease-out-quart), opacity var(--dur-1) var(--ease-out-quart); }
body.nav-open .nav-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 8999;
  background: var(--color-deep); color: var(--jihaku);
  display: none; flex-direction: column; justify-content: center; gap: var(--space-5);
  padding: var(--page-inline);
  clip-path: inset(0 0 100% 0); pointer-events: none;
  transition: clip-path 0.7s var(--ease-in-out-expo);
}
.nav-overlay.is-open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
.nav-overlay__nav { display: flex; flex-direction: column; gap: var(--space-3); }
.nav-overlay__nav a {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 11vw, 3.6rem);
  letter-spacing: -0.02em; text-transform: uppercase;
}
.nav-overlay__nav .index-tab { color: color-mix(in srgb, var(--color-surface) 80%, transparent); }
.nav-overlay__ja { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); letter-spacing: 0.04em; color: color-mix(in srgb, var(--jihaku) 60%, transparent); text-transform: none; }
.nav-overlay__nav a[aria-current] { color: var(--color-surface); }
.nav-overlay__contact { color: color-mix(in srgb, var(--jihaku) 70%, transparent); }

.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(7rem, 15vh, 11rem) var(--space-5);
}
.hero__grid { align-items: center; row-gap: var(--space-4); }
.hero__portrait {
  grid-column: 1 / 6; grid-row: 1;
  aspect-ratio: 3 / 4; border-radius: 2px;
  position: relative; margin-right: -6%; z-index: 1;
}
.portrait-svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.hero__portrait-cap { position: absolute; left: var(--space-2); bottom: var(--space-2); color: color-mix(in srgb, var(--color-fg) 55%, transparent); }
.hero__id { grid-column: 6 / 13; grid-row: 1; z-index: 2; }
.hero__eyebrow { margin-bottom: var(--space-2); }
.hero__name { display: flex; flex-direction: column; gap: var(--space-1); margin-block: var(--space-2) var(--space-3); }
.hero__name-latin { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 8vw, 6.6rem); line-height: 1; letter-spacing: -0.03em; }
.hero__name-ja { font-family: var(--font-body); font-weight: 900; font-size: clamp(3rem, 12vw, 8.2rem); line-height: 0.92; letter-spacing: -0.015em; font-feature-settings: 'palt' 1; }
.hero__lead { max-width: 48ch; color: color-mix(in srgb, var(--color-fg) 82%, transparent); word-break: keep-all; overflow-wrap: normal; line-break: strict; }

.hero__meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-hairline);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--gutter);
  max-width: 56ch;
}
.hero__meta div { display: flex; flex-direction: column; gap: 0.35em; }
.hero__meta dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: var(--step--2); color: var(--color-muted); }
.hero__meta dd { font-size: var(--step--1); color: color-mix(in srgb, var(--color-fg) 84%, transparent); line-height: 1.55; word-break: keep-all; }

.hero__vlabel { position: absolute; right: clamp(0.25rem, 1.5vw, 1rem); top: 50%; transform: translateY(-50%); }
.hero__scroll { position: absolute; left: var(--page-inline); bottom: var(--space-4); color: var(--color-muted); }

/* wide-hero right-margin index — holds the far-right third at wide widths so
   the 12-col asymmetry resolves against the viewport edge (hidden below). */
.hero__marginalia { display: none; }

.story { position: relative; overflow: hidden; padding-block: var(--space-5); }
.story__bg {
  position: absolute; right: -2%; top: 8%; z-index: 0;
  font-size: clamp(4rem, 22vw, 20rem); opacity: 0.5; pointer-events: none; white-space: nowrap;
}
.story__grid { position: relative; z-index: 1; row-gap: var(--space-4); align-items: start; }
.story__vquote { position: absolute; left: calc(-1 * clamp(0.5rem, 2vw, 1.5rem)); top: 0; }
.story__head { grid-column: 1 / 8; }
.story__title { font-size: var(--step-3); margin-top: var(--space-2); }
.story__body { grid-column: 6 / 13; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.story__gear { color: var(--color-muted); }

.process { padding-block: var(--space-5); }
.process__head { max-width: 60ch; margin-bottom: var(--space-4); }
.process__title { font-size: var(--step-3); margin-block: var(--space-2); }
.process__intro { color: color-mix(in srgb, var(--color-fg) 80%, transparent); }
.process__list { display: flex; flex-direction: column; }
.process__step {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-4); align-items: start;
  padding-block: var(--space-4); border-bottom: 1px solid var(--color-hairline);
}
.process__num { align-self: start; }
.process__step-title { position: relative; display: inline-block; font-size: var(--step-1); margin-bottom: var(--space-1); }
.process__step-title::after {
  content: ''; position: absolute; left: 0; bottom: -0.12em; width: 100%; height: 1px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out-quart);
}
.process__step:hover .process__step-title::after { transform: scaleX(1); }
.process__text p { color: color-mix(in srgb, var(--color-fg) 84%, transparent); max-width: 52ch; }
.process__meta { align-self: start; text-align: right; color: var(--color-muted); white-space: nowrap; }

.cv { padding-block: var(--space-5); }
.cv__head { align-items: end; row-gap: var(--space-3); margin-bottom: var(--space-4); }
.cv__head-title { grid-column: 1 / 7; }
.cv__title { font-size: var(--step-3); margin-top: var(--space-2); }
.cv__lead { grid-column: 8 / 13; color: color-mix(in srgb, var(--color-fg) 80%, transparent); align-self: end; }
.cv__list { border-top: 1px solid var(--color-hairline-strong); }
.cv__row {
  display: grid; grid-template-columns: 3rem 6rem minmax(0, 1fr) auto;
  gap: var(--gutter); align-items: baseline;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-hairline);
  transition: background-color var(--dur-1) var(--ease-out-quart), padding-left var(--dur-1) var(--ease-out-quart);
}
.cv__row:hover { background: color-mix(in srgb, var(--color-surface) 24%, transparent); padding-left: calc(var(--space-2) + 0.6rem); }
.cv__idx { color: var(--color-muted); }
.cv__year { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: 0.02em; }
.cv__event { font-weight: 500; }
.cv__place { color: var(--color-muted); text-align: right; }

.contact { padding-block: var(--space-5) var(--space-6); }
.contact__grid { row-gap: var(--space-5); align-items: start; }
.contact__intro { grid-column: 1 / 6; }
.contact__title { font-size: var(--step-3); margin-block: var(--space-2) var(--space-3); }
.contact__lead { color: color-mix(in srgb, var(--color-fg) 82%, transparent); margin-bottom: var(--space-3); }
.contact__direct { line-height: 2; }
.contact__form { grid-column: 7 / 13; }
.field { display: flex; flex-direction: column; gap: 0.5em; margin-bottom: var(--space-3); }
.field label { font-family: var(--font-body); font-weight: 500; font-size: var(--step--1); letter-spacing: 0.04em; color: var(--color-fg); display: flex; align-items: baseline; gap: 0.6em; }
.field__en { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8em; color: var(--color-muted); }
.field input, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--color-hairline-strong);
  padding: 0.7em 0; font-size: var(--step-0); color: var(--color-fg); line-height: 1.6;
  border-radius: 0; transition: border-color var(--dur-1) var(--ease-out-quart);
}
.field textarea { resize: vertical; min-height: 5.5em; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--color-muted) 75%, transparent); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
.contact__submit { margin-top: var(--space-2); }
.contact__submit:disabled { opacity: 0.55; cursor: default; }
.contact__status { margin-top: var(--space-3); color: var(--color-accent); font-size: var(--step-0); max-width: 46ch; }

.site-footer { padding-top: var(--space-5); padding-bottom: var(--space-4); position: relative; z-index: 1; }
.footer__rule { margin-bottom: var(--space-4); }
.footer__top { align-items: baseline; row-gap: var(--space-3); margin-bottom: var(--space-4); }
.footer__tag { grid-column: 1 / 7; font-family: var(--font-display); font-weight: 300; font-size: var(--step-1); letter-spacing: -0.01em; }
.footer__nav { grid-column: 9 / 13; display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.footer__nav a { display: inline-flex; align-items: baseline; gap: 0.6em; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--step-0); }
.footer__nav a[aria-current] { color: var(--color-accent); }
.footer__mark { display: flex; align-items: baseline; gap: clamp(0.75rem, 3vw, 2.5rem); line-height: 0.82; padding-block: var(--space-3); }
.footer__mark-ja { font-family: var(--font-body); font-weight: 900; font-size: clamp(4rem, 13vw, 13rem); font-feature-settings: 'palt' 1; letter-spacing: -0.02em; }
.footer__mark-en { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 10vw, 10rem); letter-spacing: -0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-fg) 30%, transparent); }
.footer__marquee { border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); padding-block: var(--space-2); margin-block: var(--space-3); }
.footer__marquee .marquee-item { font-size: clamp(1.4rem, 4.5vw, 3rem); color: color-mix(in srgb, var(--color-fg) 60%, transparent); }
.footer__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--color-muted); }

@media (max-width: 1024px) {
  .hero__portrait { grid-column: 1 / 6; margin-right: 0; }
  .hero__id { grid-column: 6 / 13; }
  .story__head { grid-column: 1 / 9; }
  .story__body { grid-column: 4 / 13; margin-top: var(--space-4); }
  .cv__head-title { grid-column: 1 / 8; }
  .cv__lead { grid-column: 1 / 11; align-self: start; }
  .contact__intro { grid-column: 1 / 7; }
  .contact__form { grid-column: 7 / 13; }
}

@media (max-width: 720px) {
  .nav--inline { display: none; }
  .nav-toggle { display: flex; }
  .nav-overlay { display: flex; }

  .hero { padding-top: clamp(6rem, 18vh, 9rem); }
  .hero__grid { display: block; }
  .hero__portrait { width: 68%; max-width: 320px; aspect-ratio: 3 / 4; margin: 0 0 var(--space-4) auto; }
  .hero__meta { grid-template-columns: 1fr; max-width: none; }
  .hero__vlabel { display: none; }
  .hero__scroll { display: none; }

  .story__bg { font-size: clamp(3rem, 30vw, 8rem); top: 2%; opacity: 0.4; }
  .story__vquote { position: static; writing-mode: horizontal-tb; margin-bottom: var(--space-2); display: block; }
  .story__head, .story__body { grid-column: 1 / -1; }
  .story__body { margin-top: var(--space-3); }

  .process__step { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
  .process__meta { grid-column: 1 / -1; text-align: left; }

  .cv__head-title, .cv__lead { grid-column: 1 / -1; }
  .cv__row { grid-template-columns: 2.4rem 1fr; row-gap: 0.2em; padding-inline: 0; }
  .cv__row:hover { padding-left: 0.4rem; }
  .cv__year { grid-column: 2; font-size: var(--step--1); color: var(--color-muted); }
  .cv__event { grid-column: 1 / -1; }
  .cv__place { grid-column: 1 / -1; text-align: left; }

  .contact__grid { display: block; }
  .contact__form { margin-top: var(--space-4); }

  .footer__tag { grid-column: 1 / -1; }
  .footer__nav { grid-column: 1 / -1; margin-top: var(--space-3); }
  .footer__mark { flex-direction: column; gap: 0; }
}

@media (max-width: 480px) {
  .hero__portrait { width: 82%; }
  .footer__foot { flex-direction: column; }
}

/* wide screens — hold the far-right margin so the hero resolves against the
   viewport edge instead of stopping mid-shell. */
@media (min-width: 1600px) {
  .hero__marginalia {
    display: grid;
    gap: 0.5rem;
    position: absolute;
    right: clamp(2.25rem, 5vw, 5rem);
    bottom: clamp(3rem, 10vh, 6rem);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    text-align: right;
  }
  .hero__marginalia li {
    list-style: none;
    padding-right: 1.1em;
    border-right: 1px solid var(--color-hairline-strong);
    line-height: 1.5;
  }
}

@media (min-width: 1900px) {
  .site-header__inner { max-width: var(--shell-max); }
  .hero__lead { max-width: 54ch; }
  .hero__meta { max-width: 64ch; }
}