/* =========================================================
   AUTHEN inc. — Stylesheet
   Tokens mirror DESIGN.md
   ========================================================= */

:root {
  /* color */
  --c-authen-red: #D91E18;
  --c-bg:         #F4F5F7;
  --c-surface:    #FFFFFF;
  --c-ink:        #0E0E10;
  --c-ink-muted:  #6B6B72;
  --c-hairline:   #E3E4E8;
  --c-deep:       #0A1A2F;
  --c-ice:        #C9D9E8;

  /* type */
  --ff-display:    "Archivo", "Zen Kaku Gothic New", system-ui, sans-serif;
  --ff-display-jp: "Zen Kaku Gothic New", "Archivo", system-ui, sans-serif;
  --ff-serif-jp:   "Shippori Mincho B1", "Zen Kaku Gothic New", serif;
  --ff-body:       "Inter", "Zen Kaku Gothic New", system-ui, sans-serif;
  --ff-mono:       "JetBrains Mono", ui-monospace, monospace;

  /* spacing */
  --s-1: 4px;  --s-2: 8px;   --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px;  --s-7: 64px; --s-8: 96px;
  --s-9: 128px; --s-10: 192px;

  /* layout */
  --container: 1440px;
  --pad: var(--s-5);
  --radius-pill: 999px;

  /* motion */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img, svg { display: block; max-width: 100%; }

/* ===== typography helpers ===== */
.display-xl {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(72px, 16vw, 280px);
  line-height: 0.88;
  letter-spacing: -0.045em;
}
.display-l {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}
.display-m {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-5);
}
.display-m em,
.display-l em,
.hero__lede em {
  font-family: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--c-authen-red);
  letter-spacing: -0.01em;
  font-size: 1.08em;         /* serif runs smaller optically, bump a touch */
  padding: 0 0.04em;
  line-height: 0.95;
}

/* ========= Japanese-specific typography ========= */
:lang(ja) body {
  font-family: "Inter", "Zen Kaku Gothic New", system-ui, sans-serif;
  letter-spacing: 0.01em;
}
:lang(ja) .display-xl,
:lang(ja) .display-l,
:lang(ja) .display-m,
:lang(ja) .hero__lede,
:lang(ja) .card__name,
:lang(ja) .about__lede {
  font-family: var(--ff-display-jp);
  letter-spacing: -0.005em;
  line-height: 1.25;
  font-feature-settings: "palt" 1;
}
:lang(ja) .display-m { line-height: 1.3; font-weight: 900; }
:lang(ja) .display-l { line-height: 1.2; font-weight: 900; }
:lang(ja) .display-m em,
:lang(ja) .display-l em,
:lang(ja) .hero__lede em,
:lang(ja) .contact .display-l em {
  font-style: normal;
  font-family: var(--ff-serif-jp);
  font-weight: 800;
  font-size: 1em;
  color: var(--c-authen-red);
  padding: 0 0.04em;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 0;  /* keep metrical kana spacing for mincho */
}
:lang(ja) .body-l,
:lang(ja) p {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  line-height: 1.8;
}
:lang(ja) .hero__lede {
  font-weight: 500;
  letter-spacing: 0;
}
:lang(ja) .kicker,
:lang(ja) .work__year,
:lang(ja) .idx,
:lang(ja) .about__facts dt,
:lang(ja) .contact__socials a,
:lang(ja) .foot__copy,
:lang(ja) .foot__region,
:lang(ja) .hero__top,
:lang(ja) .hero__scroll,
:lang(ja) .lang-toggle {
  font-family: var(--ff-mono);
  letter-spacing: 0.14em;
}
:lang(ja) .about__facts dd {
  font-family: "Inter", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.02em;
}
.body-l { font-size: 18px; line-height: 1.7; color: var(--c-ink-muted); max-width: 60ch; }
.kicker {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-authen-red);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-hairline);
  margin-bottom: var(--s-5);
}
.kicker--light { color: var(--c-ice); border-bottom-color: rgba(255,255,255,0.15); }

/* logo text */
.logo-mark {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--c-authen-red);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.logo-th {
  display: inline-block;
  margin: 0 -0.18em; /* TH ligature feel */
  position: relative;
}
.logo-sub {
  font-family: var(--ff-display);
  font-weight: 400;
  color: var(--c-authen-red);
  font-size: 14px;
  margin-left: 6px;
  letter-spacing: 0;
}

/* ===== NAV ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  z-index: 50;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: rgba(244, 245, 247, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease-out-expo);
}
.nav.is-scrolled { border-bottom-color: var(--c-hairline); }
.nav__brand { display: inline-flex; align-items: baseline; gap: 0; }
.nav__links { display: flex; gap: var(--s-5); }
.nav__links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  position: relative;
  padding: 4px 0;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--c-authen-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 350ms var(--ease-out-expo);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* language toggle */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px 12px;
  margin-left: var(--s-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: transparent;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-pill);
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out-expo), color 200ms var(--ease-out-expo);
}
.lang-toggle:hover { border-color: var(--c-authen-red); }
.lang-toggle__opt {
  padding: 0 4px;
  transition: color 200ms var(--ease-out-expo);
}
.lang-toggle__opt[data-active="true"] { color: var(--c-authen-red); font-weight: 600; }
.lang-toggle__sep { color: var(--c-hairline); }

@media (max-width: 640px) {
  .nav__links { gap: var(--s-3); }
  .nav__links a { font-size: 11px; }
  .lang-toggle { margin-left: var(--s-2); padding: 4px 8px; }
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  padding: 112px var(--pad) var(--s-6);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: var(--s-6);
  position: relative;
  isolation: isolate;
}

/* ambient background video — breaks out of container to full viewport width */
.hero__video,
.hero::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  pointer-events: none;
}
.hero__video {
  object-fit: cover;
  z-index: -2;
  opacity: 0.9;
  filter: contrast(1.08) saturate(1.05);
}
.hero::after {
  content: "";
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(244,245,247,0.05) 0%,
      rgba(244,245,247,0.12) 45%,
      rgba(244,245,247,0.55) 75%,
      var(--c-bg) 100%);
}

/* top meta row */
.hero__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  opacity: 0;
  animation: fadeUp 800ms var(--ease-out-expo) 100ms forwards;
}
.hero__top-col { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__top-col--right { justify-self: end; }
.hero__top-col--center { justify-self: center; color: var(--c-authen-red); }
.hero__iceberg { width: 28px; height: 28px; opacity: 0.9; }

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-authen-red);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* wordmark SVG — auto-fits viewport width */
.hero__wordmark {
  margin: 0;
  align-self: center;
  width: 100%;
  opacity: 0;
  animation: fadeUp 1100ms var(--ease-out-expo) 200ms forwards;
}
.hero__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.hero__svg text { paint-order: stroke fill; }

/* 3-column editorial grid */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-hairline);
  opacity: 0;
  animation: fadeUp 900ms var(--ease-out-expo) 700ms forwards;
}
.hero__grid-col .kicker { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.hero__grid-col p {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink);
  margin: 0;
}
.hero__grid-col--wide .hero__lede {
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  max-width: 44ch;
}
.hero__lede em { color: var(--c-authen-red); font-style: normal; font-weight: 700; }
.hero__count {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--c-ink-muted);
  letter-spacing: 0.12em;
}
.hero__roster {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
  font-family: var(--ff-body);
  color: var(--c-ink);
}
.hero__roster li { display: flex; gap: var(--s-2); }
.hero__roster li span {
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--c-authen-red);
  letter-spacing: 0.1em;
  align-self: center;
}

/* scroll cue */
.hero__scroll {
  position: absolute;
  right: var(--pad);
  bottom: var(--s-5);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  opacity: 0;
  animation: fadeUp 900ms var(--ease-out-expo) 1100ms forwards;
}
.hero__scroll svg { animation: scrollHint 2.4s ease-in-out infinite; }
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .hero { padding-top: 96px; }
  .hero__top { grid-template-columns: 1fr auto; font-size: 10px; }
  .hero__top-col--center { display: none; }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero__scroll { display: none; }
}

/* marquee */
.marquee {
  border-top: 1px solid var(--c-hairline);
  border-bottom: 1px solid var(--c-hairline);
  padding: var(--s-4) 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  background: var(--c-bg);
}
.marquee__track {
  display: inline-flex;
  gap: var(--s-6);
  align-items: center;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  animation: marquee 45s linear infinite;
}
.marquee__track .sep { color: var(--c-authen-red); font-size: 0.5em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== STATEMENT ===== */
.statement {
  background: var(--c-deep);
  color: var(--c-ice);
  padding: var(--s-10) var(--pad);
  position: relative;
  overflow: hidden;
}
.statement__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 140px 1fr 280px;
  gap: var(--s-7);
  align-items: center;
}
.statement__kicker .kicker { color: var(--c-ice); border-bottom-color: rgba(201,217,232,0.2); }
.statement__body .display-m { color: #fff; }
.statement__body .display-m em { color: var(--c-authen-red); }
.statement__body .body-l { color: var(--c-ice); opacity: 0.8; }
.iceberg { color: var(--c-ice); margin: 0; opacity: 0.85; }
.iceberg svg { animation: float 8s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (max-width: 900px) {
  .statement__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .iceberg { max-width: 220px; }
}

/* ===== SECTION HEAD ===== */
.section__head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  margin-bottom: var(--s-8);
}

/* ===== ROSTER ===== */
.roster {
  padding: var(--s-10) 0;
  background: var(--c-bg);
}
.roster__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
@media (max-width: 1100px) {
  .roster__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .roster__grid { grid-template-columns: 1fr; }
}

.card { position: relative; }
.card__media {
  aspect-ratio: 3 / 4;
  background: var(--c-ink);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: grid; place-items: center;
  color: #fff;
  transition: transform 600ms var(--ease-out-expo);
}
.card__media::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 30% 20%, rgba(217,30,24,0.35), transparent 60%),
              linear-gradient(180deg, rgba(14,14,16,0.1), rgba(14,14,16,0.9));
  mix-blend-mode: normal;
}
/* label pill on artist card media (e.g. Ultra Records) */
.card__label {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  display: inline-block;
  padding: 5px 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #fff;
  background: var(--c-authen-red);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.card__media[data-artist="cartoon"] { background: linear-gradient(135deg, #1a1f3d 0%, #0a1a2f 100%); }
.card__media[data-artist="yjn"]     { background: linear-gradient(135deg, #2d0a0a 0%, #0e0e10 100%); }
.card__media[data-artist="sasaki"]  { background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%); }
.card__media[data-artist="yp"]      { background: linear-gradient(135deg, #2b1f0a 0%, #0e0e10 100%); }
.card__placeholder {
  position: relative; z-index: 1;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 42px);
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  line-height: 1;
  padding: 0 var(--s-3);
}
.card:hover .card__media { transform: scale(1.015); }
.card__meta {
  padding: var(--s-4) 0 var(--s-2);
  display: flex; flex-direction: column; gap: 6px;
}
.card__name {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  margin: 0;
}
.card__role {
  font-size: 13px;
  color: var(--c-ink-muted);
}
.card__bio {
  margin: var(--s-3) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-ink);
  max-width: 40ch;
}
.card__bio strong {
  font-weight: 700;
  color: var(--c-authen-red);
  letter-spacing: 0.01em;
}
.card__links {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--s-3);
}
.card__links li {
  font-size: 11px;
  font-family: var(--ff-mono);
  letter-spacing: 0.02em;
}
.card__links a {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-pill);
  color: var(--c-ink-muted);
  transition: all 200ms var(--ease-out-expo);
}
.card__links a:hover {
  border-color: var(--c-authen-red);
  color: var(--c-authen-red);
}
.card__cta {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-ink);
  transition: color 200ms var(--ease-out-expo), border-color 200ms var(--ease-out-expo);
}
.card__cta:hover { color: var(--c-authen-red); border-bottom-color: var(--c-authen-red); }

/* ===== WORKS ===== */
.works {
  padding: var(--s-10) 0;
  background: var(--c-bg);
  border-top: 1px solid var(--c-hairline);
}
.works__list {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.work {
  display: grid;
  grid-template-columns: 80px 1fr 280px 80px;
  gap: var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-hairline);
  font-family: var(--ff-display);
  transition: background 200ms var(--ease-out-expo);
  position: relative;
}
.work:last-child { border-bottom: 1px solid var(--c-hairline); }
.work:hover { background: rgba(217,30,24,0.03); }
.work__year {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-ink-muted);
  letter-spacing: 0.1em;
}
.work__title {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.work__role {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--c-ink-muted);
  font-weight: 400;
}
.work__link {
  font-family: var(--ff-mono);
  font-size: 12px;
  text-align: right;
  color: var(--c-authen-red);
  letter-spacing: 0.08em;
}
.work__link:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .work { grid-template-columns: 60px 1fr; grid-template-rows: auto auto auto; }
  .work__role, .work__link { grid-column: 2; }
  .work__link { text-align: left; }
}

/* ===== ABOUT ===== */
.about {
  padding: var(--s-10) 0;
  background: var(--c-bg);
  border-top: 1px solid var(--c-hairline);
}
.about__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--s-7);
}
.about__lede {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.5;
  color: var(--c-ink);
  font-weight: 400;
}
.about__facts {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-left: var(--s-5);
  border-left: 1px solid var(--c-hairline);
}
.about__facts div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-3); }
.about__facts dt {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-authen-red);
  margin: 0;
}
.about__facts dd { margin: 0; font-size: 14px; color: var(--c-ink); }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__facts { border-left: none; padding-left: 0; border-top: 1px solid var(--c-hairline); padding-top: var(--s-5); }
}

/* ===== CONTACT ===== */
.contact {
  background: var(--c-deep);
  color: #fff;
  padding: var(--s-10) var(--pad);
}
.contact__inner {
  max-width: var(--container);
  margin: 0 auto;
}
.contact .display-l { color: #fff; margin-top: var(--s-4); }
.contact .body-l { color: var(--c-ice); max-width: 540px; margin: var(--s-4) 0 var(--s-6); }
.contact__email {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: -0.02em;
  color: var(--c-authen-red);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--c-authen-red);
  transition: letter-spacing 300ms var(--ease-out-expo);
}
.contact__email:hover { letter-spacing: 0; }
.contact__socials {
  display: flex; gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.contact__socials a {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ice);
  transition: color 200ms var(--ease-out-expo);
}
.contact__socials a:hover { color: var(--c-authen-red); }

/* ===== FOOTER ===== */
.foot {
  background: var(--c-ink);
  color: var(--c-ice);
  padding: var(--s-5) var(--pad);
}
.foot__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.foot__brand { color: var(--c-authen-red); }
.foot__copy, .foot__region {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(201,217,232,0.6);
}

/* =========================================================
   ARTIST PROFILE PAGES (artists/*.html)
   ========================================================= */

.profile { background: var(--c-bg); }

/* breadcrumb */
.crumb {
  display: flex; gap: var(--s-2);
  align-items: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: var(--s-5);
}
.crumb a { color: var(--c-ink-muted); transition: color 200ms var(--ease-out-expo); }
.crumb a:hover { color: var(--c-authen-red); }
.crumb > span:not(.crumb__here) { opacity: 0.3; }

/* hero */
.profile-hero {
  padding: 140px var(--pad) var(--s-8);
  max-width: var(--container);
  margin: 0 auto;
}
.profile-hero__kicker {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.chip {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  color: var(--c-ink);
  background: var(--c-hairline);
}
.chip--red { background: var(--c-authen-red); color: #fff; }
.chip--dark { background: var(--c-deep); color: #fff; }

.profile-hero__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(64px, 12vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  margin: 0 0 var(--s-4);
  color: var(--c-ink);
}
.profile-hero__role {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--c-authen-red);
  margin: 0 0 var(--s-5);
  letter-spacing: -0.01em;
}
.profile-hero__lede {
  max-width: 60ch;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0;
}
.profile-hero__lede strong { color: var(--c-authen-red); font-weight: 700; }

/* pull quote */
.profile-quote {
  padding: var(--s-9) var(--pad);
  background: var(--c-deep);
  color: #fff;
  text-align: center;
}
.profile-quote blockquote {
  max-width: 880px; margin: 0 auto;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  position: relative;
  padding: 0 var(--s-5);
}
.profile-quote blockquote::before,
.profile-quote blockquote::after {
  content: "";
  display: block;
  width: 40px; height: 1px;
  background: var(--c-authen-red);
  margin: var(--s-5) auto;
}
.profile-quote cite {
  display: block;
  font-family: var(--ff-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--c-ice);
  text-transform: uppercase;
}
:lang(ja) .profile-quote blockquote {
  font-family: var(--ff-serif-jp);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

/* bio */
.profile-bio {
  padding: var(--s-10) var(--pad);
  max-width: var(--container);
  margin: 0 auto;
}
.profile-bio__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-7);
}
@media (max-width: 900px) { .profile-bio__grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.profile-bio__body p {
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.8;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
  max-width: 72ch;
}
.profile-bio__body p:last-child { margin-bottom: 0; }

/* timeline / works */
.profile-works {
  padding: var(--s-10) var(--pad);
  background: var(--c-bg);
  border-top: 1px solid var(--c-hairline);
  max-width: var(--container);
  margin: 0 auto;
}
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-hairline);
  transition: background 200ms var(--ease-out-expo);
}
.timeline__item:last-child { border-bottom: 1px solid var(--c-hairline); }
.timeline__item:hover { background: rgba(217,30,24,0.03); padding-left: var(--s-3); padding-right: var(--s-3); }
.timeline__year {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--c-authen-red);
  padding-top: 6px;
}
.timeline__body h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--c-ink);
}
.timeline__body p {
  margin: 0;
  font-size: 14px;
  color: var(--c-ink-muted);
  line-height: 1.6;
}
.timeline__body .tag {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-right: var(--s-2);
  padding: 2px 8px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-pill);
}
.timeline__link {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--c-authen-red);
  padding-top: 6px;
  white-space: nowrap;
}
.timeline__link:hover { text-decoration: underline; }
@media (max-width: 800px) {
  .timeline__item { grid-template-columns: 80px 1fr; }
  .timeline__link { grid-column: 2; padding-top: var(--s-2); }
}

/* press / external links */
.profile-press {
  padding: var(--s-9) var(--pad);
  background: var(--c-bg);
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--c-hairline);
}
.press__list { display: flex; flex-wrap: wrap; gap: 8px; }
.press__list li { list-style: none; }
.press__list a {
  display: inline-block;
  padding: 8px 14px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-pill);
  transition: all 200ms var(--ease-out-expo);
}
.press__list a:hover {
  border-color: var(--c-authen-red);
  color: var(--c-authen-red);
}

/* profile CTA */
.profile-cta {
  background: var(--c-deep);
  color: #fff;
  padding: var(--s-9) var(--pad);
}
.profile-cta__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: end;
}
@media (max-width: 900px) { .profile-cta__inner { grid-template-columns: 1fr; gap: var(--s-4); } }
.profile-cta h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(36px, 4.5vw, 72px);
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-4);
  color: #fff;
  line-height: 1;
}
.profile-cta p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ice);
  max-width: 50ch;
  margin: 0;
}
.profile-cta__email {
  display: inline-block;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 36px);
  color: var(--c-authen-red);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--c-authen-red);
  letter-spacing: -0.015em;
  transition: letter-spacing 300ms var(--ease-out-expo);
  margin-top: var(--s-5);
}
.profile-cta__email:hover { letter-spacing: 0; }
.profile-cta__contact { display: flex; flex-direction: column; gap: var(--s-3); }
.profile-cta__contact dt {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ice);
  margin-bottom: 4px;
}
.profile-cta__contact dd {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0;
  color: #fff;
}
.profile-cta__contact a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.2); }
.profile-cta__contact a:hover { color: var(--c-authen-red); border-color: var(--c-authen-red); }

/* nav between artists */
.profile-back {
  padding: var(--s-6) var(--pad);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--c-hairline);
}
.profile-back a {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-ink-muted);
  transition: color 200ms var(--ease-out-expo);
}
.profile-back a:hover { color: var(--c-authen-red); }
.profile-back__next { font-weight: 600; color: var(--c-ink) !important; }

/* ===== reveal on scroll (JS) ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); }
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}