/* Supporting type only. Load after the existing component styles.
   Titles, wordmarks, artwork and decorative fragment labels keep their sizes. */
html[lang]{
  --read-body:16px;
  --read-control:14px;
  --read-caption:14px;
  --read-support:#c8b9d5;
  --read-focus:#c8b4ff;
}
html[lang="ta"]{
  --read-body:15px;
  --read-control:13px;
  --read-caption:13px;
}

/* Preserve the larger open mobile menu while lifting the compact desktop menu. */
html[lang] .site-header nav{font-size:12px;line-height:1.65}
html[lang] .site-header nav a{min-height:44px;color:#e2d7ec}
html[lang] .site-header .languages,
html[lang] .site-header .languages a{font-size:12px;line-height:1.6}
html[lang] .site-header .languages a{min-height:44px}
html[lang] .site-header .languages a:not([aria-current]){color:var(--read-support)}
html[lang] .site-header .languages a[aria-current]{color:#f6f0ed}

/* Actual descriptions retain a comfortable reading size in both languages. */
html[lang] .dream-intro>p,
html[lang] .dream-caption>p,
html[lang] .story-copy>p:not(.lead),
html[lang] .seq-intro-grid>p,
html[lang] .seq-scene-body,
html[lang] .seq-disclosure,
html[lang] .study-copy>p:last-of-type,
html[lang] .direction-title>p,
html[lang] .direction-list details>p,
html[lang] .direction-list .further ul,
html[lang] .release-note p,
html[lang] .founder-copy>p,
html[lang] .dream-contact .contact-details>p,
html[lang] .av-story>p,
html[lang] .intro-identity>p,
html[lang] .standalone-intro>p{
  font-size:var(--read-body);
  line-height:1.8;
  color:var(--read-support);
}
html[lang] .av-story>p.av-opening{color:#e2d8ea}
html[lang] .intro-identity>p,
html[lang] .standalone-intro>p{color:var(--read-focus)}
html[lang="ta"] .story-copy>p:not(.lead),
html[lang="ta"] .seq-intro-grid>p,
html[lang="ta"] .seq-scene-body,
html[lang="ta"] .seq-disclosure,
html[lang="ta"] .study-copy>p:last-of-type,
html[lang="ta"] .direction-title>p,
html[lang="ta"] .direction-list details>p,
html[lang="ta"] .direction-list .further ul,
html[lang="ta"] .release-note p,
html[lang="ta"] .av-story>p{line-height:2}

/* Eyebrows, art labels and metadata are information, not decorative microtype. */
html[lang] :is(.eyebrow,.section-index,.av-eyebrow,.seq-eyebrow,.seq-medium,.seq-scene-note,.seq-follow,.medium-strip,.world-toolbar-note,.art-disclosure,.dream-art-note,.dream-bottom-note,.contact-chapter,.detail-number,.founder-signature),
html[lang] .dream-topline .eyebrow,
html[lang] .dream-caption small,
html[lang] .story-meta span:last-child,
html[lang] .seq-nav-number,
html[lang] .seq-medium>span,
html[lang] .seq-mobile-art figcaption,
html[lang] .seq-stage-label,
html[lang] .seq-stage-count,
html[lang] .study-phases span,
html[lang] .study-phases small,
html[lang] .dream-contact .contact-top .eyebrow,
html[lang] .dream-contact .contact-location{
  font-size:12px;
  line-height:1.7;
}
html[lang] :is(.section-index,.seq-scene-note,.seq-follow,.world-toolbar-note,.art-disclosure,.dream-art-note,.dream-bottom-note,.contact-chapter,.founder-signature),
html[lang] .dream-caption small,
html[lang] .story-meta span:last-child,
html[lang] .seq-nav-number,
html[lang] .seq-stage-label,
html[lang] .seq-stage-count,
html[lang] .study-phases span,
html[lang] .dream-contact .contact-top,
html[lang] .dream-contact .contact-location{color:var(--read-support)}
html[lang] .seq-medium>span{opacity:1;color:var(--read-support)}
html[lang] .section-index>span:first-child,
html[lang] .study-phases .active{color:var(--read-focus)}
html[lang="ta"] :is(.eyebrow,.section-index,.av-eyebrow,.seq-eyebrow,.seq-medium,.seq-scene-note,.seq-follow,.medium-strip,.dream-bottom-note,.contact-chapter),
html[lang="ta"] .dream-topline .eyebrow,
html[lang="ta"] .dream-caption small,
html[lang="ta"] .dream-contact .contact-top .eyebrow{letter-spacing:0}

/* Links and controls stay readable without making the small headings larger. */
html[lang] .text-link,
html[lang] .dream-scroll,
html[lang] .dream-intro button,
html[lang] .seq-nav a,
html[lang] .seq-next,
html[lang] .study-play,
html[lang] .frame-range-label,
html[lang] .av-email,
html[lang] .av-intro,
html[lang] .dream-contact .copy-email,
html[lang] .intro-pause,
html[lang] .intro-skip{
  font-size:var(--read-control);
  line-height:1.65;
}
html[lang] .seq-nav a{color:var(--read-support)}
html[lang] .seq-nav a:hover,
html[lang] .seq-nav a[aria-current="step"]{color:var(--read-focus)}
html[lang] .text-link,
html[lang] .dream-scroll,
html[lang] .dream-intro button,
html[lang] .seq-nav a,
html[lang] .seq-next,
html[lang] .study-play,
html[lang] .av-email,
html[lang] .av-intro,
html[lang] .dream-contact .contact-email,
html[lang] .dream-contact .copy-email,
html[lang] .intro-pause,
html[lang] .intro-skip{min-height:44px}
html[lang] .frame-range-label input{min-height:44px}
html[lang] .frame-range-label,
html[lang] .frame-output{color:#d8cbe3}
html[lang] .frame-output{font-size:12px;line-height:1.65}
html[lang] .study-play:disabled{opacity:1;color:var(--read-support);cursor:default}

/* About Vivek: captions and the two actions remain legible beside the portrait. */
html[lang] .av-portrait figcaption,
html[lang] .av-details>div{
  font-size:var(--read-caption);
  line-height:1.8;
  color:var(--read-support);
}
html[lang] .av-portrait figcaption .av-location{font-size:12px;line-height:1.8;color:var(--read-support)}
html[lang] .av-details dd,
html[lang] .av-intro{color:var(--read-support)}
html[lang] .av-intro:hover{color:#f4eef8}
html[lang] .av-email,
html[lang] .av-details dt{color:var(--read-focus)}
html[lang] .release-note strong{font-size:var(--read-body);line-height:1.7}
html[lang] .dream-contact .copy-status{font-size:13px;line-height:1.7;color:var(--read-focus)}
html[lang] .dream-contact .copy-email{color:#e2d4ec}
html[lang] .dream-contact .copy-email:hover{color:#f6f0ed}

/* Footer copy and motion status stay distinct from the decorative wordmark. */
html[lang] .site-footer .footer-top{font-size:var(--read-body);line-height:1.8;color:var(--read-support)}
html[lang] .site-footer .footer-top .text-link{font-size:var(--read-control);color:#e2d7ec}
html[lang] .site-footer .footer-bottom,
html[lang] .site-footer .footer-bottom .motion-toggle{font-size:12px;line-height:1.7;color:var(--read-support)}
html[lang] .site-footer .footer-bottom .motion-toggle{min-height:44px;max-width:100%;text-align:left}
html[lang="ta"] .site-footer .footer-top{line-height:1.9}

/* The outline is visible on dark panels and on top of artwork. */
html[lang] :is(a,button,input,summary):focus-visible{
  outline:3px solid var(--read-focus);
  outline-offset:5px;
}

@media(max-width:700px){
  html[lang]{--read-body:15px}
  html[lang="ta"]{--read-body:14px}
  html[lang] .seq-nav a{font-size:12px}
  html[lang] .dream-bottom-note,
  html[lang] .dream-art-note,
  html[lang] .seq-nav a{letter-spacing:0}
}