/* Readable type scale across the portfolio, without changing the cinematic titles. */
:root {
  --copy-size: 17px;
  --detail-size: 15px;
  --meta-size: 13px;
  --muted: #b2b9ab;
  --meta-color: #a1ad94;
}

body { font-size: var(--copy-size); line-height: 1.8; }
.hero { height: auto; min-height: clamp(880px, 100svh, 1120px); max-height: none; }
.brand { font-size: 17px; }
.site-header nav a { font-size: 16px; }
.hero-role { font-size: 19px; }
.hero-description { font-size: 18px; line-height: 1.85; color: #c2cabb; }
.hero-topline { font-size: 13px; letter-spacing: 1px; }
.hero .eyebrow { font-size: 14px; }
.hero-foot { font-size: 12px; letter-spacing: 1px; color: var(--meta-color); }
.button, .contact-main .button { font-size: 16px; min-height: 52px; }
.button > .specular-label { font-size: inherit; }
.stats p { font-size: 15px; line-height: 1.7; }
.stats-note { font-size: var(--meta-size); line-height: 1.8; color: var(--meta-color); }

.section-heading { gap: 36px; }
.section-intro { font-size: var(--copy-size); line-height: 1.85; max-width: 450px; }
.section-heading > div, .featured-copy, .process-copy, .contact-main { min-width: 0; }
.body-copy,
.featured-copy .body-copy,
.process-copy .body-copy,
.about-intro .body-copy,
.experience-item .body-copy,
.workflow-card .body-copy,
.card-copy > p {
  font-size: var(--copy-size);
  line-height: 1.9;
}
.featured-copy .eyebrow, .contact-main .eyebrow { font-size: var(--meta-size); }
.featured-copy { padding: 36px; }
.featured-copy h3 { font-size: 40px; line-height: 1.3; }
.project-facts > div {
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: 16px;
  font-size: var(--detail-size);
  line-height: 1.85;
  padding-block: 18px;
}
.project-facts dt { color: var(--meta-color); }
.project-facts dd { margin: 0; }
.project-tags { gap: 8px; }
.project-tags span, .tool-list span { font-size: var(--meta-size); line-height: 1.6; padding: 6px 10px; color: #bdc7b1; }
.small-note { font-size: var(--meta-size); line-height: 1.8; color: var(--meta-color); }
.film-selector button { font-size: 16px; padding: 20px 24px; }
.film-selector button span { font-size: var(--meta-size); }
.film-selector button > .specular-label { font-size: inherit; }
.placeholder-top, .placeholder-bottom,
.animation-media .placeholder-top, .animation-media .placeholder-bottom,
.media-badge { font-size: 12px; letter-spacing: .6px; }
.card-heading { align-items: baseline; }
.card-heading h3 { font-size: 25px; line-height: 1.4; }
.card-heading > span { font-size: 14px; color: var(--meta-color); flex-shrink: 0; }
.card-copy > p { margin-block: 16px 22px; }
.performance-label, .performance-note p { font-size: 15px; line-height: 1.8; }
.performance-note small { font-size: 13px; color: var(--meta-color); }

.process-film-top, .process-film-caption,
.process-film-caption > span:last-child { font-size: 13px; line-height: 1.7; letter-spacing: .4px; }
.process-film-top > span:last-child,
.process-film-caption > span:last-child { color: var(--meta-color); }
.process-copy .eyebrow { font-size: 15px; }
.process-points li { padding-block: 20px; }
.process-points li > span { font-size: 14px; }
.process-points h4 { font-size: 18px; font-weight: 600; line-height: 1.5; }
.process-points p { font-size: 16px; line-height: 1.8; }

.workflow-card { display: flex; flex-direction: column; }
.step-top { font-size: 14px; margin-bottom: 28px; }
.workflow-card h3 { font-size: 26px; line-height: 1.35; }
.step-english { font-size: 12px; color: var(--meta-color); letter-spacing: .8px; }
.workflow-card .body-copy { min-height: 0; flex: 1; }
.step-output { font-size: 14px; line-height: 1.8; margin-top: 24px; }
.workflow-foot { font-size: 13px; color: var(--meta-color); }
.location-tag { font-size: 14px; }
.about-lead { font-size: 30px; line-height: 1.65; }
.column-label, .experience-date { font-size: 14px; color: var(--meta-color); }
.experience-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; }
.experience-heading h3 { font-size: 19px; line-height: 1.6; }
.experience-heading span { font-size: 14px; }
.experience-item { padding-block: 26px; }
.contact-main > p:not(.eyebrow) { font-size: 16px; line-height: 1.8; }
.contact-main small { font-size: 13px; color: var(--meta-color); }
.contact-details dt { font-size: 13px; color: var(--meta-color); }
.contact-details dd { font-size: 18px; }
.resume-preview > span { font-size: 13px; }
.site-footer p, .back-top { font-size: 14px; color: var(--meta-color); }
.dialog-heading h2 { font-size: 18px; }
.media-slot .play-button-label { font-size: 15px; }

@media (min-width: 761px) and (max-width: 1100px) {
  .section-heading { display: block; }
  .section-intro { margin-top: 24px; max-width: 640px; }
  .featured-work { grid-template-columns: 1.15fr 1fr; }
  .animation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .featured-copy { padding: 28px; }
  .project-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .process-layout { gap: 36px; }
  .workflow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-card:nth-child(3) { border-left: 0; }
  .workflow-card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about-layout { gap: 48px; }
  .contact-card { grid-template-columns: 130px minmax(0, 1fr); gap: 32px; }
  .contact-details { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --copy-size: 16px; --detail-size: 15px; }
  .brand { font-size: 15px; }
  .site-header nav { gap: clamp(10px, 3vw, 20px); }
  .site-header nav a { font-size: 14px; }
  .hero { height: auto; min-height: max(100svh, 820px); max-height: none; }
  .hero-topline { font-size: 11px; letter-spacing: .3px; flex-wrap: wrap; gap: 8px 14px; }
  .hero-topline > span:first-child, .hero-media-status { font-size: 11px; }
  .hero-content { padding-top: 90px; padding-bottom: 32px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .7px; }
  .hero-role { font-size: 16px; line-height: 1.7; }
  .hero-description { font-size: 16px; line-height: 1.85; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .button { font-size: 15px; min-height: 50px; gap: 22px; padding: 12px 18px; }
  .hero-foot { font-size: 11px; letter-spacing: .4px; }
  .stats > div { padding-left: 20px; }
  .stats p { font-size: 14px; }
  .stats-note { font-size: 12px; }
  .section-heading h2 { font-size: clamp(30px, 7.8vw, 38px); line-height: 1.35; }
  .section-intro { font-size: 16px; line-height: 1.85; }
  .featured-copy { padding: 30px 24px; }
  .featured-copy h3 { font-size: 34px; }
  .project-facts > div { grid-template-columns: 5em minmax(0, 1fr); gap: 12px; }
  .project-tags span, .tool-list span { font-size: 13px; }
  .film-selector button { font-size: 16px; padding: 18px 20px; }
  .card-heading h3 { font-size: 24px; }
  .card-copy > p { margin-top: 16px; }
  .performance-label, .performance-note p { font-size: 14px; }
  .performance-note small { font-size: 12px; }
  .process-film { padding: 16px; }
  .process-film-top, .process-film-caption { align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
  .process-film-top, .process-film-caption,
  .process-film-caption > span:last-child { font-size: 12px; }
  .process-copy h3 { font-size: 34px; }
  .process-points p { font-size: 16px; }
  .workflow-card { padding: 28px 22px; }
  .workflow-card h3 { font-size: 25px; }
  .step-english { font-size: 12px; }
  .step-output { font-size: 14px; }
  .workflow-foot { font-size: 11px; gap: 10px; }
  .about-lead { font-size: 27px; }
  .experience-heading h3 { font-size: 19px; }
  .experience-heading span { font-size: 14px; }
  .contact-card { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
  .resume-preview { width: 120px; }
  .contact-main .eyebrow { font-size: 13px; }
  .contact-main h3 { font-size: 32px; }
  .contact-main > p:not(.eyebrow) { font-size: 16px; }
  .contact-main .button { font-size: 15px; min-height: 48px; gap: 24px; }
  .contact-main small { font-size: 13px; }
  .contact-details { grid-column: auto; }
  .contact-details dt { font-size: 13px; }
  .contact-details dd { font-size: 18px; }
  .site-footer p { font-size: 12px; flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 560px) {
  .workflow-grid { grid-template-columns: 1fr; }
  .workflow-card + .workflow-card { border-left: 0; border-top: 1px solid var(--line); }
  .workflow-card .body-copy { margin-top: 18px; }
  .step-top { margin-bottom: 20px; }
}

/* A stable headline stage keeps the copy and buttons still between phrases. */
.hero h1.rotating-headline { font-size: clamp(42px, 6.3vw, 112px); line-height: 1.22; letter-spacing: -.045em; min-height: 1.3em; margin-bottom: 30px; }
.rotating-headline .hero-title-line { overflow: visible; }
.hero-rotating-text { display: inline; }
.headline-cursor { display: inline-block; width: .055em; height: .95em; margin-left: .13em; background: #baff32; vertical-align: -.08em; animation: headline-blink 1.05s steps(1) infinite; }
@keyframes headline-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: .12; } }
@media (max-width: 700px) {
 .hero h1.rotating-headline { font-size: clamp(34px, 8.2vw, 56px); min-height: 2.5em; }
}
@media (prefers-reduced-motion: reduce) { .headline-cursor { animation: none; } }