/* Supporting text only. Preserve the original display typography and composition. */
:root { --muted: #514942; }
.site-header nav, .site-header nav a, .contact-link { font-size: 14px; }
nav sup { font-size: 10px; }
.hero-topline { font-size: 11px; letter-spacing: .7px; gap: 15px; flex-wrap: wrap; }
.hero-topline > span:last-child { font-size: 11px; }
.hero-description { font-size: 17px; line-height: 1.75; }
.button, .about-links .button { font-size: 14px; min-height: 46px; }
.micro, .section-topline > .micro { font-size: 12px; letter-spacing: .8px; line-height: 1.7; }
.hero-bottom > .micro, .scroll-cue, .hero-bottom .scroll-cue { font-size: 11px; }
.ticket-meta { font-size: 11px; letter-spacing: .5px; line-height: 1.6; }
.ticket-bottom { font-size: 10px; line-height: 1.6; gap: 10px; }
.idea-sticker small { font-size: 9px; line-height: 1.4; }
.research-note > span { font-size: 10px; letter-spacing: .2px; line-height: 1.6; }
.brand-strip p { font-size: 11px; line-height: 1.7; }
.work-intro p, .research-section > div > p, .experience-grid > div > p { font-size: 16px; line-height: 1.8; }
.text-link, .work-intro .text-link, .about-links .text-link { font-size: 14px; }
.filters button { font-size: 13px; padding: 9px 14px; min-height: 42px; }
.filters sup { font-size: 10px; }
.view-toggle { font-size: 13px; min-height: 42px; }
.work-toolbar { flex-wrap: wrap; }
.project-meta .micro, .index-view .project-meta .micro { font-size: 11px; letter-spacing: .4px; line-height: 1.7; }
.project-meta h3 { font-size: 18px; line-height: 1.4; }
.project-cover .cover-top, .project-cover .cover-cta { font-size: 11px; line-height: 1.5; letter-spacing: .4px; }
.cover-top > span:last-child { white-space: nowrap; }
.cover-top > span:first-child { max-width: 80%; }
.cover-cta > span { flex-shrink: 0; }
.cover-stamp { font-size: 10px; }
.work-footnote { font-size: 11px; line-height: 1.8; gap: 20px; letter-spacing: .5px; }
.impact-stats p { font-size: 14px; line-height: 1.6; }
.stat-note { font-size: 12px; line-height: 1.8; color: #d5c8ba; }
.about-copy > p { font-size: 16px; line-height: 1.85; }
.process-header > p { font-size: 14px; line-height: 1.75; }
.process-detail > .micro { font-size: 12px; }
.process-detail p { font-size: 15px; line-height: 1.8; }
.process-detail .text-link { font-size: 14px; }
.process-buttons > button { font-size: 13px; line-height: 1.4; }
.process-buttons > button > span { font-size: 11px; }
.process-buttons > button small { font-size: 18px; }
.research-label { font-size: 11px; line-height: 1.8; letter-spacing: .5px; }
.research-studies summary small { font-size: 11px; line-height: 1.7; }
.research-studies details > div p, details > div p, .timeline details > div p { font-size: 15px; line-height: 1.85; }
.research-studies details > div .micro { font-size: 11px; }
.timeline-date { font-size: 11px; line-height: 1.7; }
.timeline summary small { font-size: 14px; line-height: 1.6; }
.contact-top .micro { font-size: 11px; line-height: 1.8; }
.contact-bottom { flex-wrap: wrap; }
.contact-bottom > a:not(:first-child), #copy-email, .contact-bottom #copy-email { font-size: 13px; }
#copy-email { min-height: 42px; padding: 10px 12px; }
.copy-status { font-size: 14px; }
footer { font-size: 11px; line-height: 1.8; }
#motion-toggle, footer > a:last-child { font-size: 12px; min-height: 42px; }
.dialog-top > .micro, .dialog-top > button { font-size: 11px; }
.dialog-top > button { min-height: 38px; }
.dialog-body .project-category { font-size: 12px; line-height: 1.8; letter-spacing: .6px; }
.project-story h3 { font-size: 12px; }
.project-story p, .project-story li { font-size: 16px; line-height: 1.85; }
.project-outcome p { font-size: 15px; line-height: 1.8; }
.project-outcome small { font-size: 12px; line-height: 1.75; }
.media-tabs button { font-size: 13px; min-width: 42px; min-height: 38px; }
.media-caption { font-size: 15px; line-height: 1.8; }
.media-fallback, .project-reference { font-size: 13px; line-height: 1.8; flex-wrap: wrap; }
.media-fallback a { white-space: normal; }
.project-link-list a { font-size: 15px; line-height: 1.7; gap: 20px; }
.dialog-bottom > button { font-size: 14px; min-height: 42px; }
.dialog-bottom .micro { font-size: 11px; }
@media(max-width:1100px) {
  .timeline summary { flex-wrap: wrap; gap: 12px; }
  .timeline-date { flex-basis: 100%; }
  .timeline summary > span:nth-child(2) { flex-basis: 75%; }
  .timeline details > div { padding-left: 0; }
}
@media(max-width:800px) {
  .work-intro { max-width: 300px; }
  .about-grid { gap: 40px; }
  .process-detail { display: block; }
  .process-detail h3 { margin-block: 10px; max-width: none; }
  .process-detail .text-link { margin-top: 12px; }
  .contact-top { flex-wrap: wrap; }
  .contact-top .micro { max-width: none; }
}
@media(max-width:600px) {
  .work-toolbar { display: block; }
  .work-intro { display: block; max-width: none; }
  .work-intro p { max-width: none; margin-bottom: 15px; }
  .work-intro .text-link { font-size: 14px; }
  .filters { gap: 8px; }
  .view-toggle { margin: 12px 0 0 auto; }
  .research-section > div:first-child { display: block; }
  .process-buttons { gap: 10px; }
  .process-buttons > button { min-height: 108px; width: 100%; height: auto; border-radius: 22px; padding: 12px 8px; font-size: 12px; }
  .process-buttons > button small { font-size: 15px; max-width: 100%; }
  .process-lines { display: none; }
  .media-header { flex-wrap: wrap; }
  .dialog-bottom .micro { display: none; }
}
@media(max-width:540px) {
  /* Keep the original collage; reserve space for its enlarged introduction. */
  .creative-desk { top: calc(var(--copy-bottom, 560px) + 45px); }
  .hero-stage { min-height: calc(var(--copy-bottom, 560px) + 505px); }
  .site-header nav a, .contact-link { font-size: 13px; }
  .hero-description { font-size: 17px; }
  .hero-topline { font-size: 10px; }
  .hero-topline > span:last-child { font-size: 10px; }
  .section-topline { flex-wrap: wrap; gap: 12px; }
  .section-topline > .micro { font-size: 11px; }
  .project-meta h3 { font-size: 18px; }
  .impact-stats p { font-size: 13px; }
  .research-label { font-size: 11px; }
  .contact-bottom > a:first-child { font-size: 16px; overflow-wrap: anywhere; }
  .dialog-top .micro, .dialog-top > button { font-size: 11px; }
}
@media(max-width:360px) {
  .site-header { flex-wrap: wrap; height: auto; min-height: 86px; gap: 12px; padding-block: 16px; }
  .site-header nav { margin-left: 10px; }
  .site-header .contact-link { gap: 8px; padding: 6px 8px; }
  .site-header nav a, .site-header .contact-link { font-size: 12px; }
  .process-buttons { gap: 6px; }
  .process-buttons > button { font-size: 11px; }
  .index-view .project-card { grid-template-columns: 70px 1fr; gap: 12px; }
}