/* Original project logo and a more readable type scale, across all viewports. */
body { font-size: 16px; }
.wordmark { gap: 11px; flex-shrink: 0; }
.brand-logo { width: 58px; height: 56px; object-fit: contain; border-radius: 11px; background: #fff; }
.brand-studio { font-size: 12px; }
.brand-studio > span { font-size: 10px; }
.about-mark img { width: 124px; height: auto; mix-blend-mode: multiply; }
.about-mark span { font-size: 12px; }
.footer-logo { width: clamp(74px, 12vw, 180px); height: auto; flex-shrink: 0; mix-blend-mode: multiply; }
.footer-brand > span { font-size: clamp(62px, 12.8vw, 210px); }
.desktop-nav { gap: 30px; margin-left: 24px; }
.desktop-nav a { font-size: 15px; padding: 13px 0; }
.desktop-nav a span { font-size: 11px; }
.header-contact { font-size: 15px; min-height: 48px; gap: 24px; padding: 13px 22px; white-space: nowrap; }
.button, .hero-actions .button, .dialog-content .button { font-size: 16px; min-height: 56px; padding: 18px 25px; }
.quiet-link { font-size: 16px; min-height: 48px; }
.text-link, .text-link.light, .capability-copy .text-link, .world-under > .text-link { font-size: 16px; min-height: 48px; }
.hero-description { font-size: 17px; line-height: 1.9; letter-spacing: .035em; }
.hero-eyebrow { font-size: 12px; }
.eyebrow, .section-kicker .eyebrow { font-size: 12px; }
.section-kicker { font-size: 14px; }
.hero-bottom, .scroll-link, .hero-caption { font-size: 12px; }
.hero-caption small, .portal-note small { font-size: 11px; letter-spacing: .08em; }
.scroll-icon, .motion-toggle { width: 44px; height: 44px; flex-shrink: 0; }
.motion-toggle { font-size: 14px; }
.portal-note { font-size: 14px; }
.manifesto-strip { font-size: 12px; }
.about-body p, .work-heading-side > p, .studio-heading p, .capability-copy > p,
.world-heading > p, .services-intro > p, .service-content > p, .contact-details > p,
.dialog-description { font-size: 16px; line-height: 1.95; }
.about-tagline { font-size: 20px; }
.heritage-stats > div p { font-size: 14px; line-height: 1.75; }
.stats-note { font-size: 12px; }
.filter { font-size: 15px; min-height: 46px; padding: 11px 19px; }
.filter sup { font-size: 11px; }
.project-summary { font-size: 15px; }
.project-type { font-size: 13px; }
.project-year, .project-index { font-size: 12px; }
.image-note, .anniversary-caption { font-size: 11px; }
.anniversary-copy .eyebrow { font-size: 12px; }
.anniversary-copy > p:last-child { font-size: 15px; }
.work-footnote, .work-footnote > span + span { font-size: 12px; }
.studio .section-kicker > span:last-child { font-size: 12px; }
.studio-position { font-size: 13px; color: #b4c2ad; }
.studio-tab { font-size: 18px; gap: 14px; }
.studio-tab > span, .studio-tab > small { font-size: 12px; }
.capability-eyebrow { font-size: 12px; }
.capability-copy > p { max-width: 390px; color: #bbc8b5; }
.capability-note { font-size: 13px; }
.workbench-top { font-size: 13px; padding: 17px 22px; gap: 12px; }
.demo-label { font-size: 11px; }
.workbench-project .eyebrow { font-size: 11px; }
.workbench-project h4 { font-size: 20px; }
.workbench-project > span:last-child { font-size: 13px; }
.role { font-size: 15px; min-height: 46px; }
.role > span { font-size: 17px; }
.scene-tag { font-size: 11px; }
.scene-output .eyebrow { font-size: 12px; line-height: 1.7; }
.scene-output p { font-size: 16px; line-height: 1.9; }
.scene-output > span:last-child { font-size: 12px; color: #b4c4a9; }
.workbench-bottom { font-size: 11px; line-height: 1.8; flex-wrap: wrap; gap: 6px 20px; }
.memory-core > span { font-size: 17px; }
.memory-core small, .world-mini > span { font-size: 11px; }
.memory-chips span { font-size: 13px; }
.memory-scene > p, .world-scene > p { font-size: 14px; line-height: 1.8; }
.studio-principles p { font-size: 14px; }
.studio-principles span { font-size: 12px; }
.research-tag { font-size: 12px !important; }
.world-picture-label { font-size: 13px; }
.world-visual-caption { font-size: 12px; }
.world-under > p { font-size: 14px; }
.service h3 { font-size: 21px; }
.service-number, .service-en { font-size: 12px; }
.service-content > span { font-size: 13px; }
.contact .section-kicker, .contact .section-kicker .eyebrow { font-size: 12px; }
.copy-email, .back-to-top { font-size: 15px; min-height: 44px; }
.copy-status { font-size: 13px; }
.footer-organizations > div > span { font-size: 13px; }
.footer-organizations p { font-size: 16px; }
.footer-bottom { font-size: 12px; }
.footer-0514 { font-size: 15px; }
.footer-0514 > b { font-size: 23px; }
.dialog-content > .eyebrow, .dialog-image > .dialog-art-note, .dialog-note { font-size: 12px; }
.dialog-detail h3, .dialog-detail small { font-size: 13px; }
.dialog-detail.text-detail p { font-size: 15px; }
.dialog-close { width: 44px; height: 44px; }

@media (min-width: 801px) and (max-width: 1100px) {
  .desktop-nav { gap: 18px; margin-left: 0; }
  .desktop-nav a { font-size: 14px; }
  .header-contact { gap: 12px; padding: 12px 16px; }
  .brand-logo { width: 50px; height: 48px; }
  .brand-aly { font-size: 35px; }
  .brand-studio { font-size: 10px; }
  .brand-studio > span { font-size: 9px; }
  .work-heading-side { width: 48%; }
  .studio-tab > small { display: none; }
  .demo-scene { grid-template-columns: 1fr; }
  .scene-image { aspect-ratio: 2.3; }
  .service-en { display: none; }
}

@media (max-width: 800px) {
  .site-header { height: 96px; padding-top: 18px; padding-bottom: 18px; }
  .site-header.scrolled { height: 82px; }
  .brand-logo { width: 54px; height: 52px; }
  .menu-toggle { width: 44px; height: 44px; flex-shrink: 0; margin-left: auto; }
  .menu-toggle > span { left: 10px; top: 16px; }
  .menu-toggle > span:last-child { left: 17px; top: 25px; }
  .menu-toggle[aria-expanded=true] > span { left: 10px; top: 21px; }
  .mobile-nav { overflow-y: auto; padding-top: 110px; padding-bottom: 24px; }
  .mobile-nav > a { font-size: 28px; padding: 17px 0; }
  .mobile-nav > a > span { font-size: 14px; }
  .mobile-nav > .mobile-studio-link { color: #eac59b; }
  .mobile-nav > p { font-size: 14px; padding-top: 26px; }
  .manifesto-strip { font-size: 11px; gap: 16px; }
  .about-tagline { font-size: 18px; }
  .heritage-stats { padding-bottom: 48px; }
  .studio-tab { font-size: 17px; }
  .capability-copy > p { max-width: 100%; }
  .workbench-project h4 { font-size: 20px; }
  .role { font-size: 15px; }
  .scene-output p { font-size: 16px; }
  .services-intro > .eyebrow { font-size: 12px; }
  .footer-brand { gap: 20px; }
}

@media (max-width: 540px) {
  html { scroll-padding-top: 88px; }
  .hero { min-height: 800px; }
  .hero-copy { padding-top: 183px; width: calc(100% - 44px); }
  .hero-eyebrow { font-size: 11px; }
  .hero h1 { margin-top: 26px; margin-bottom: 25px; }
  .hero-description { font-size: 16px; line-height: 1.95; letter-spacing: 0; }
  .hero-actions { gap: 20px; flex-wrap: wrap; margin-top: 28px; }
  .hero-actions .button { font-size: 16px; padding: 17px 20px; gap: 20px; }
  .quiet-link { font-size: 15px; gap: 8px; }
  .portal-note { top: auto; bottom: 118px; right: 24px; font-size: 13px; }
  .portal-note small { font-size: 10px; }
  .hero-bottom { bottom: 24px; gap: 10px; letter-spacing: 0; }
  .scroll-link { font-size: 12px; gap: 8px; }
  .scroll-icon { width: 36px; height: 44px; border: 0; }
  .motion-toggle { width: 44px; height: 44px; margin-right: 0; }
  .hero-caption { font-size: 11px; }
  .hero-caption small { font-size: 10px; letter-spacing: 0; }
  .manifesto-strip { font-size: 10px; letter-spacing: 0; gap: 12px; }
  .section-kicker { flex-wrap: wrap; row-gap: 12px; font-size: 12px; }
  .section-kicker .eyebrow { font-size: 11px; letter-spacing: .07em; }
  .about-body p, .work-heading-side > p, .studio-heading p, .capability-copy > p,
  .world-heading > p, .services-intro > p, .service-content > p, .contact-details > p { font-size: 16px; }
  .about-tagline { font-size: 18px; }
  .heritage-stats { gap: 12px; padding-bottom: 52px; }
  .heritage-stats > div p { font-size: 12px; max-width: 100px; }
  .stats-note { font-size: 11px; }
  .filters { gap: 5px; }
  .filter { font-size: 14px; min-height: 46px; padding: 11px 16px; }
  .project-type { font-size: 12px; }
  .project-year { font-size: 11px; }
  .project-index { font-size: 11px; }
  .project-summary { font-size: 15px; }
  .anniversary-art { min-height: 375px; padding-top: 51px; }
  .anniversary-caption { font-size: 10px; top: 20px; }
  .anniversary-copy .eyebrow { font-size: 11px; }
  .anniversary-copy > p:last-child { font-size: 14px; max-width: 230px; }
  .anniversary-art .project-go { width: 44px; height: 44px; bottom: 22px; }
  .studio-position { font-size: 13px; }
  .studio-tab { font-size: 16px; gap: 8px; }
  .studio-tab > span { font-size: 11px; }
  .capability-eyebrow, .capability-note { font-size: 13px; }
  .workbench-top { font-size: 12px; padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .demo-label { font-size: 11px; }
  .workbench-project h4 { font-size: 18px; }
  .workbench-project > span:last-child { font-size: 12px; line-height: 1.8; }
  .role-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .role { flex-direction: column; font-size: 14px; gap: 7px; min-height: 64px; padding: 10px 3px; }
  .demo-scene { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; }
  .scene-image { aspect-ratio: 1.85; }
  .scene-output .eyebrow { font-size: 12px; }
  .scene-output p { font-size: 16px; }
  .scene-output > span:last-child { font-size: 12px; }
  .workbench-bottom { font-size: 11px; padding: 13px 16px; }
  .memory-chips span { font-size: 12px; }
  .studio-principles p { font-size: 14px; }
  .world-picture-label { font-size: 12px; }
  .world-visual-caption { font-size: 11px; }
  .world-under > p { font-size: 13px; }
  .service h3 { font-size: 20px; }
  .service-number { font-size: 12px; }
  .service-en { display: none; }
  .service-content > span { font-size: 13px; }
  .contact-email { font-size: clamp(17px, 4.7vw, 25px); }
  .contact-email > span { margin-left: 8px; }
  .footer-brand > span { font-size: 12.5vw; }
  .footer-logo { width: 64px; }
  .footer-organizations > div > span { font-size: 13px; }
  .footer-organizations p { font-size: 16px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; font-size: 12px; gap: 16px; }
  .footer-0514 { font-size: 15px; }
  .footer-0514 > b { font-size: 23px; }
  .dialog-content h2 { font-size: 28px; }
  .dialog-description { font-size: 16px; }
  .dialog-details { grid-template-columns: 1fr; gap: 20px; }
  .dialog-detail h3 { font-size: 13px; margin-bottom: 6px; }
  .dialog-detail p { font-size: 26px; }
  .dialog-detail.text-detail p { font-size: 15px; }
  .dialog-detail small, .dialog-note { font-size: 12px; }
}

@media (max-width: 359px) {
  .hero { min-height: 840px; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding: 16px 18px; gap: 16px; }
  .quiet-link { font-size: 14px; }
  .hero-bottom { flex-wrap: wrap; }
  .hero-caption { font-size: 10px; }
  .motion-toggle { width: 40px; height: 44px; }
  .scroll-link { font-size: 11px; gap: 4px; }
  .scroll-icon { width: 24px; }
  .manifesto-strip { font-size: 9px; gap: 8px; }
  .filter { padding-left: 12px; padding-right: 12px; }
  .studio-tab { font-size: 15px; gap: 5px; }
  .footer-logo { width: 54px; }
}

@media (min-width: 801px) and (max-height: 800px) {
  .hero-copy { padding-top: 150px; }
  .hero h1 { font-size: clamp(66px, 6.2vw, 90px); margin-top: 22px; margin-bottom: 18px; }
  .hero-description { font-size: 17px; }
  .hero-actions { margin-top: 24px; }
}

/* Project actions: start creating now, open published films when available. */
.dialog-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.dialog-actions .button { margin-top: 0; height: 58px; min-height: 58px; padding: 16px 24px; }
.button-outline { border: 1px solid var(--ink); color: var(--ink); }
.button-outline:hover { background: #e3e5d9; }
.dialog-watch-group { display: flex; flex-direction: column; align-items: stretch; }
.dialog-watch-status { margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center; }
.button[aria-disabled="true"] { color: #73786b; border-color: #b8bbae; cursor: not-allowed; }
.button[aria-disabled="true"]:hover { background: transparent; transform: none; }
.dialog-watch-icon { fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 540px) {
  .dialog-actions { gap: 14px; }
  .dialog-actions > .button, .dialog-watch-group { width: 100%; }
  .dialog-watch-status { text-align: left; }
}