/* Shared type hierarchy and spacing for the portfolio and player. */
:root {
  --text-title: clamp(36px, 5vw, 64px);
  --text-section: clamp(28px, 3.4vw, 44px);
  --text-subtitle: clamp(20px, 2vw, 24px);
  --text-entry: clamp(17px, 1.5vw, 18px);
  --text-body: 16px;
  --text-control: 14px;
  --text-caption: 12px;
  --panel-inset: 32px;
  --space-unit: 8px;
}
body { font-size: var(--text-body); line-height: 1.75; }
:is(h1, h2, h3, h4) { text-wrap: balance; overflow-wrap: anywhere; }
:is(p, dd) { overflow-wrap: anywhere; }
:is(.hero h1, .profile-panel h1, .project-copy h2, .drama-player .player-heading h1) {
  margin: 0; font: 600 var(--text-title)/1.2 var(--display); letter-spacing: -.035em;
}
:is(.section-heading h2, .contact h2) {
  margin: 0; font: 500 var(--text-section)/1.3 var(--display); letter-spacing: -.025em;
}
:is(h3, .card-body h3, .steps h3) {
  font: 600 var(--text-subtitle)/1.4 var(--body); letter-spacing: 0;
}
h4, .skill-grid dt { font: 600 var(--text-entry)/1.5 var(--body); }
.eyebrow { font: 600 var(--text-caption)/1.5 var(--mono); letter-spacing: .12em; }
:is(.intro-role, .profile-panel .intro-role) {
  margin-top: 16px; font-size: var(--text-entry); line-height: 1.6; font-weight: 600;
  text-wrap: pretty;
}
:is(.lead, .profile-panel .lead, .identity, .profile-panel .identity,
  .resume-entry p, .skill-grid dd, .card-body p, .project-copy > p:not(.eyebrow),
  .lab-result p, .steps p, .player-note, .player-description, .player-heading > p:last-child) {
  font-size: var(--text-body); line-height: 1.75; letter-spacing: 0;
}
.hero-copy > .eyebrow, .project-copy > .eyebrow { margin-bottom: 12px; }
.profile-panel .lead { max-width: none; margin-top: 8px; }
.profile-panel .identity { margin-top: 16px; padding-top: 16px; }
.info-line { display: flex; flex-wrap: wrap; gap: 0 8px; }
.info-line > span { white-space: nowrap; }
.identity-links { gap: 0 16px; margin-top: 8px; }
.profile-panel .identity-links a { min-height: 36px; }
.profile-panel .hero-actions { margin-top: 16px; }
.showcase .profile-panel { padding: var(--panel-inset); gap: 32px; }
.project-panel { padding: var(--panel-inset); }
.project-copy > p:not(.eyebrow) { margin-block: 16px 24px; }
.section { padding-block: 56px; }
.section-heading { display: grid; gap: 8px; margin-bottom: 24px; }
.resume-grid { gap: 16px; align-items: start; }
.resume-block { padding: var(--panel-inset); }
.resume-block h3 { padding-bottom: 16px; }
.resume-entry { padding-top: 16px; }
.resume-entry + .resume-entry { margin-top: 24px; }
.resume-entry time { margin-bottom: 8px; font: 600 var(--text-caption)/1.5 var(--mono); }
.resume-entry p { margin-top: 8px; }
.resume-entry .role { font-weight: 600; }
.resume-entry details { margin-top: 16px; }
.skill-grid { gap: 24px; }
.skill-grid div { padding-top: 16px; }
.skill-grid dt { margin-bottom: 8px; }
.skill-grid dd + dd { margin-top: 8px; }
.card-body { gap: 24px; padding: var(--panel-inset); }
.card-body p { margin-top: 8px; }
.lab-card { padding: var(--panel-inset); gap: 32px; align-items: start; }
.lab-controls label { align-items: baseline; font-size: var(--text-entry); line-height: 1.5; }
.lab-ends { font-size: var(--text-caption); line-height: 1.5; }
.lab-result p, .steps p { margin-top: 8px; }
.steps { gap: 24px; margin-top: 24px; }
.steps article { padding-top: 16px; }
:is(.button, .text-link, summary, .back-link, .header-contact, .contact-links a, .back-top) {
  font-size: var(--text-control); line-height: 1.5;
}
.button { min-height: 44px; padding: 12px 20px; align-items: center; }
.text-link, .back-link { min-height: 44px; }
.contact { padding-block: 48px; }
.contact h2 { margin-top: 8px; }
.contact-inner { align-items: center; }
.contact-links { gap: 16px; }
.stage-title { top: 16px; left: 16px; right: 64px; font-size: var(--text-caption); line-height: 1.5; }
.replay { top: 8px; right: 8px; }
.visual-foot { inset: auto 12px 12px; align-items: center; gap: 8px; }
#visual-caption { max-width: 12em; font-size: 11px; line-height: 1.5; }
.mode button { font-size: var(--text-control); line-height: 1; }
/* Rail label line-height stays paired with its existing movement geometry. */
.showcase-tile { font-size: var(--text-control); font-weight: 500; }
.showcase-tile:is([aria-pressed="true"], [data-selected]) { font-size: var(--text-control); font-weight: 600; }
.drama-player .player-page { padding-block: 24px 56px; }
.drama-player .player-heading { margin-block: 24px; }
.player-heading .eyebrow { margin-bottom: 12px; }
.player-heading > p:last-child { margin-top: 12px; }
.drama-player .player-note { margin-top: 12px; }
.drama-player .player-description { margin-top: 24px; max-width: 52ch; }
.player-original { margin-top: 24px; font-size: var(--text-caption); line-height: 1.5; letter-spacing: 0; }
.drama-player .episode-heading { align-items: baseline; margin: 6px 6px 12px; }
.drama-player .episode-heading h2 { font: 600 var(--text-control)/1.5 var(--body); }
.drama-player .episode-heading > span { font-size: 11px; line-height: 1.5; }
.drama-player .episode-list button { font-size: var(--text-body); line-height: 1.5; align-items: center; }
.drama-player .episode-list button[aria-pressed="true"] { font-weight: 600; }
.episode-state, [aria-pressed="true"] > .episode-state { font-size: 11px; line-height: 1.5; }
@media (max-width: 870px) {
  :root { --panel-inset: 24px; }
}
@media (max-width: 670px) {
  :root { --text-body: 15px; --panel-inset: 20px; }
  .shell { width: calc(100% - 32px); }
  .header-inner { min-height: 64px; }
  .header-inner nav a, .header-contact { font-size: 13px; }
  .showcase { padding-block: 24px 32px; }
  .showcase .profile-panel { padding: var(--panel-inset); gap: 24px; }
  .profile-panel h1 { white-space: normal; }
  .info-line { display: block; }
  .info-line > span { display: block; }
  .info-line > .info-divider { display: none; }
  .profile-panel .hero-visual { margin-top: 0; }
  .profile-panel .identity-links a { min-height: 32px; font-size: var(--text-control); }
  .section { padding-block: 40px; }
  .section-heading { margin-bottom: 24px; }
  .resume-grid, .steps { gap: 16px; }
  .skill-grid { grid-template-columns: 1fr; gap: 16px; }
  .card-body { flex-wrap: wrap; gap: 16px; padding: var(--panel-inset); }
  .card-body .button { font-size: var(--text-control); gap: 12px; padding-inline: 16px; }
  .lab-card { padding: var(--panel-inset); gap: 24px; }
  .lab-controls label { font-size: var(--text-body); }
  .contact { padding-block: 40px; }
  .contact-links { margin-top: 16px; }
  .back-top { margin-top: 8px; }
  .showcase-tile, .showcase-tile:is([aria-pressed="true"], [data-selected]) { font-size: 13px; }
  .drama-player .player-page { padding-top: 16px; }
  .drama-player .player-heading { margin-block: 16px 24px; }
}