/* Shared type roles. Body copy stays readable; labels never fall below 12px
   at the default browser size. Rem units respect browser text preferences. */
:root {
  --type-label: .75rem;
  --type-small: .875rem;
  --type-body: 1rem;
  --type-body-large: 1.125rem;
  --type-title: 1.25rem;
  --type-heading: clamp(2rem, 3.4vw, 3rem);
  --type-display: clamp(3rem, 5.8vw, 5.5rem);
  --line-body: 1.75;
  --line-label: 1.5;
}

body { font-size: var(--type-body); line-height: var(--line-body); }
h1, h2, h3 { text-wrap: balance; }
.eyebrow, .section-kicker,
.landing-journey .section-kicker,
.hero .eyebrow, .about-top .eyebrow, .contact-content .eyebrow {
  font-size: var(--type-label);
  line-height: var(--line-label);
  letter-spacing: .12em;
  font-weight: 600;
}

/* Navigation and actions share one readable control size. */
.site-header nav { font-size: var(--type-body); line-height: 1.5; gap: 2rem; }
.site-header nav a { padding: .75rem 0; }
.wordmark { font-size: 1.5rem; line-height: 1.2; }
.wordmark small { font-size: var(--type-label); line-height: 1.35; letter-spacing: .08em; width: 5.5rem; }
.pill { font-size: var(--type-body); line-height: 1.5; padding: .625rem .625rem .625rem 1.5rem; }
.pill .circle { width: 2.5rem; height: 2.5rem; }
.text-link, .landing-journey .text-link,
.landing-journey .section-heading .text-link {
  font-size: var(--type-small);
  line-height: 1.5;
  min-height: 2.75rem;
}
.motion-control, .journey-guide .motion-control { font-size: var(--type-small); min-height: 2.75rem; }
.motion-control span, .journey-guide .motion-control span { font-size: var(--type-label); line-height: 1.5; letter-spacing: .07em; }
.journey-guide .motion-control { min-width: 7.5rem; }

/* Landing: display, section heading, lead, then body. */
.landing-journey .hero h1 { font-size: var(--type-display); line-height: 1.2; letter-spacing: -.06em; }
.hero-sub { font-size: var(--type-body-large); line-height: 1.8; }
.hero-note p { font-size: var(--type-label); line-height: 1.65; letter-spacing: .09em; }
.hero-bottom, .scroll-hint { font-size: var(--type-label); line-height: 1.5; }
.landing-journey .scroll-hint { letter-spacing: .09em; }
.journey-current { font-size: var(--type-label); line-height: 1.5; letter-spacing: .07em; width: auto; }
#journey-number { font-size: var(--type-small); line-height: 1.5; }
.journey-dots button { height: 2.75rem; }
.landing-journey .intro-grid { margin: 1.25rem 0 1.25rem; }
.landing-journey .intro-grid h2 {
  font-size: clamp(2.5rem, 4.2vw, 4rem);
  line-height: 1.25;
  margin-bottom: 1.25rem;
}
.landing-journey .intro-lead { font-size: clamp(1.25rem, 1.65vw, 1.5rem); line-height: 1.6; margin-bottom: .875rem; }
.body-copy, .landing-journey .body-copy { font-size: var(--type-body); line-height: var(--line-body); max-width: 32rem; }
.landing-journey .intro-grid .text-link { margin-top: .75rem; }
.landing-journey .expertise-line {
  font-size: var(--type-label);
  line-height: 1.5;
  letter-spacing: .05em;
  gap: .625rem;
  flex-wrap: wrap;
  padding: 1rem 0;
}
.landing-journey .expertise-line i { font-size: .875rem; }
.landing-journey .section-heading h2 { font-size: var(--type-heading); line-height: 1.3; margin-top: .875rem; }
.selected-invitation { font-size: var(--type-body); line-height: 1.65; margin-top: .75rem; }
.end-content h2 { font-size: clamp(2.5rem, 4.8vw, 4.75rem); line-height: 1.3; }
.end-content > p:not(.section-kicker) { font-size: var(--type-body-large); line-height: 1.75; }
.end-signature { font-size: var(--type-label); line-height: 1.5; letter-spacing: .13em; }

/* The artwork remains dominant; its glass strip accommodates a two-line title. */
.selected-carousel {
  --selected-card-footer: 4.5rem;
  --selected-card-height: calc(var(--selected-card-width) + 1.75rem);
}
.selected-section #selected-grid .project-meta h3 {
  font-size: var(--type-body);
  line-height: 1.4;
  padding-top: .625rem;
  padding-bottom: .625rem;
}
.selected-section #selected-grid .project-meta > span,
.selected-section #selected-grid .project-category {
  font-size: var(--type-label);
  line-height: 1.4;
  letter-spacing: .045em;
}
.selected-section #selected-grid .project-category { max-width: calc(100% - 5.5rem); }
.selected-carousel-count { font-size: var(--type-small); line-height: 1.5; letter-spacing: .14em; }
.selected-carousel-hint { font-size: var(--type-small); line-height: 1.6; padding: 0 1rem; }
.selected-carousel-controls > button { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }

/* Work: readable gallery labels, with room for actual project names. */
.work-page .page-intro h1 { font-size: clamp(2.75rem, 4.8vw, 4.5rem); line-height: 1.12; }
.work-page .page-intro > p:last-child { font-size: var(--type-body); line-height: 1.75; color: #526b88; }
.category-panel .panel-top { font-size: var(--type-label); line-height: 1.4; letter-spacing: .06em; }
.category-panel .panel-vertical { font-size: var(--type-small); line-height: 1.2; }
.panel-caption { min-width: 0; white-space: normal; overflow: visible; }
.category-panel:not(.is-expanded) .panel-caption { position: absolute; visibility: hidden; pointer-events: none; }
.category-panel:not(.is-expanded) .panel-bottom { width: auto; gap: 0; }
.panel-caption strong { font-size: 1.375rem; line-height: 1.35; }
.panel-caption > span { font-size: var(--type-label); line-height: 1.4; letter-spacing: .035em; }
.work-toolbar { flex-wrap: wrap; }
.work-toolbar h2 { font-size: var(--type-title); line-height: 1.4; }
.gallery-hint { font-size: var(--type-small); line-height: 1.6; color: #526d8d; }
.work-toolbar #work-count { font-size: var(--type-label); line-height: 1.5; letter-spacing: .07em; }
.gallery-year { font-size: var(--type-small); line-height: 1.4; }
.gallery-category { font-size: var(--type-label); line-height: 1.5; letter-spacing: .1em; color: #3d5d83; }
.gallery-caption { inset: 2.75rem 1.25rem 1.5rem; gap: .625rem; }
.gallery-caption strong { font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.45; }
.gallery-client { font-size: var(--type-small); line-height: 1.5; }
.gallery-open { font-size: var(--type-label); line-height: 1.5; }
.filter-tabs button { font-size: var(--type-small); line-height: 1.5; }
.data-error { font-size: var(--type-body); line-height: 1.75; }

/* Career content uses the same scale as project details. */
.about-top h1 { font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1.3; }
.about-top > p:last-child { font-size: var(--type-body); line-height: 1.75; padding: 0 1.25rem; }
.timeline-heading, .timeline-heading > span:last-child { font-size: var(--type-label); line-height: 1.5; letter-spacing: .07em; }
.timeline-card .card-top { right: 1rem; font-size: var(--type-label); line-height: 1.4; letter-spacing: .06em; }
.timeline-card .card-content small { font-size: var(--type-label); line-height: 1.5; letter-spacing: .08em; }
.timeline-card .card-content strong { font-size: var(--type-title); line-height: 1.45; }
.timeline-card .card-open { font-size: var(--type-label); line-height: 1.4; letter-spacing: .035em; margin-top: .75rem; }
.timeline-ruler button { font-size: var(--type-label); line-height: 1.4; }
.timeline-controller .round-button { min-width: 2.75rem; min-height: 2.75rem; }
.chapter-description { max-width: 52rem; padding-bottom: 3rem; }
.chapter-description .chapter-date { font-size: var(--type-small); line-height: 1.5; letter-spacing: .07em; }
.chapter-description h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.4; }
.chapter-description p { font-size: var(--type-body); line-height: 1.8; max-width: 42rem; }
.chapter-description .chapter-tags { flex-wrap: wrap; gap: .5rem; }
.chapter-tags span { font-size: var(--type-label); line-height: 1.5; padding: .375rem .75rem; }
.about-bottom h2 { font-size: clamp(2rem, 2.7vw, 2.625rem); line-height: 1.45; }
.approaches article > span { font-size: var(--type-small); line-height: 1.5; }
.approaches h3 { font-size: var(--type-title); line-height: 1.5; margin-bottom: .75rem; }
.approaches p { font-size: var(--type-body); line-height: 1.8; }

/* Contact, compact footer, and project detail surfaces. */
.contact-content h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); line-height: 1.35; }
.contact-content > p:not(.eyebrow) { font-size: var(--type-body-large); line-height: 1.8; }
.contact-details { font-size: var(--type-label); line-height: 1.6; letter-spacing: .08em; flex-wrap: wrap; gap: 1rem 2rem; }
.contact-email > a { font-size: clamp(1.5rem, 2.9vw, 2.5rem); line-height: 1.4; }
.contact-email .round-button { width: 2.75rem; height: 2.75rem; }
.site-footer { padding-top: .6875rem; padding-bottom: .6875rem; min-height: 2.75rem; gap: .75rem; }
.site-footer > a:first-child, .site-footer > p, .site-footer > span { font-size: var(--type-label); line-height: 1.5; }
.site-footer > p { letter-spacing: .055em; }
.site-footer > span { letter-spacing: .04em; }
.detail-body h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.4; }
.detail-tagline, .detail-facts p, .detail-section p { font-size: var(--type-body); line-height: 1.8; }
.detail-facts small { font-size: var(--type-label); line-height: 1.5; letter-spacing: .08em; }
.detail-section h3 { font-size: var(--type-title); line-height: 1.5; }
.detail-tools { font-size: var(--type-small); line-height: 1.7; }
.dialog-close { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.toast { font-size: var(--type-small); line-height: 1.6; max-width: calc(100vw - 2rem); width: max-content; text-align: center; }

@media (max-width: 1100px) {
  .work-page .page-intro > p:last-child { position: static; margin-top: 1.25rem; }
  .intro-content { left: 44%; right: 6%; }
  .landing-journey .expertise-line { gap: .5rem; letter-spacing: .025em; }
}

@media (max-width: 900px) {
  .site-header nav { gap: 1.5rem; }
  .site-header nav a:last-child { margin-left: 0; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: .25rem .75rem; padding: .5rem 6%; }
  .site-footer > a:first-child { grid-column: 1; grid-row: 1; }
  .site-footer > span { grid-column: 2; grid-row: 1; }
  .site-footer > p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 720px) {
  .category-panel.is-expanded,
  .category-panel.is-expanded:hover,
  .category-panel.is-expanded:focus-visible { min-width: 17rem; flex-basis: 17rem; }
  .category-panel .panel-bottom { max-width: calc(100% - 2rem); }
  .category-panel .panel-vertical { bottom: 4.5rem; }
  .panel-caption strong { font-size: 1.25rem; }
  .work-toolbar { gap: .625rem 1rem; }
  .work-toolbar #work-count { margin-left: auto; }
  .gallery-hint { flex-basis: 100%; }
  .gallery-caption { inset: 2.5rem 1rem 1.25rem; }
  .gallery-year { top: .75rem; right: .875rem; }
  .gallery-caption strong { font-size: var(--type-body); }
}

@media (max-width: 680px) {
  .site-header { height: 5rem; padding: 0 5%; }
  .wordmark { font-size: 1.25rem; }
  .wordmark .mark { font-size: 1.625rem; margin-right: .125rem; }
  .site-header nav { gap: .75rem; font-size: var(--type-small); }
  .landing-journey .hero-copy { top: 23%; padding: 0 7%; }
  .landing-journey .hero h1 { font-size: clamp(2.5rem, 11.3vw, 3.625rem); margin: 1.375rem 0; }
  .hero-sub { font-size: var(--type-body); line-height: 1.8; }
  .hero .eyebrow { letter-spacing: .09em; }
  .pill { margin-top: 1.5rem; gap: 1.25rem; }
  .landing-journey .hero-bottom { left: 7%; right: 7%; bottom: 6.25rem; }
  .intro-content { left: 7%; right: 7%; top: 50%; max-width: none; }
  .landing-journey .intro-grid h2 { font-size: 2.375rem; margin-bottom: 1.125rem; }
  .landing-journey .intro-grid { margin: 1.125rem 0 1rem; }
  .landing-journey .intro-lead { font-size: 1.25rem; line-height: 1.55; margin-bottom: .75rem; }
  .landing-journey .intro-grid .text-link { margin-top: .5rem; }
  .landing-journey .expertise-line { padding: .875rem 0; gap: .375rem .625rem; letter-spacing: .025em; }
  .landing-journey .selected-section .section-heading { padding: 7rem 7% 0; }
  .landing-journey .section-heading h2 { font-size: 2rem; margin-top: .75rem; }
  .selected-invitation { margin-top: .5rem; }
  .landing-journey .section-heading .text-link { margin-top: .375rem; padding: .375rem 0; }
  .selected-section #selected-grid { height: calc(var(--selected-card-height) + 2.25rem); }
  .selected-carousel-hint { margin-top: .625rem; line-height: 1.5; gap: .125rem; }
  .end-content { padding-top: 8rem; padding-bottom: 7.5rem; }
  .end-content h2 { font-size: clamp(2rem, 8.5vw, 2.875rem); margin: 1.5rem 0 1.125rem; }
  .end-content > p:not(.section-kicker) { font-size: var(--type-body); }
  .end-signature { margin-top: 1.125rem; letter-spacing: .08em; }
  .journey-guide { left: 7%; right: 7%; bottom: 1.125rem; }
  .journey-guide .motion-control { padding: .5rem .625rem; }
  .journey-dots { left: 46%; }
  .work-page .page-intro h1 { font-size: clamp(2.5rem, 9.5vw, 3rem); }
  .about-top h1 { font-size: clamp(2.25rem, 8vw, 3rem); }
  .timeline-heading { padding-left: 7%; padding-right: 7%; gap: 1rem; }
  .timeline-heading > span:last-child { text-align: right; }
  .timeline-card .card-content { left: 1rem; right: .875rem; }
  .timeline-controller { gap: .625rem; padding-left: 5%; padding-right: 5%; }
  .timeline-ruler { gap: .125rem; }
  .timeline-ruler button { padding-left: 0; padding-right: 0; letter-spacing: 0; }
  .chapter-description { padding-left: 7%; padding-right: 7%; }
  .about-bottom h2 { font-size: 2rem; }
  .approaches article { gap: 1rem; }
  .contact-page { padding: 10rem 7% 4rem; }
  .contact-content h1 { font-size: clamp(2.125rem, 8.3vw, 3rem); }
  .contact-content > p:not(.eyebrow) { font-size: var(--type-body); }
  .contact-email { gap: .75rem; margin: 2.5rem 0 3rem; }
  .contact-email > a { font-size: clamp(1.25rem, 6vw, 1.75rem); }
  .contact-email > a > span { margin-left: .5rem; }
  .contact-details { gap: .75rem; letter-spacing: .05em; }
}

@media (max-width: 480px) {
  /* One column keeps longer Korean titles readable without shrinking the type. */
  .work-grid { grid-template-columns: 1fr; gap: .75rem; }
  .gallery-caption strong { font-size: 1.25rem; }
  .gallery-caption { inset: 3rem 1.75rem 2rem; gap: .75rem; }
  .gallery-client { font-size: var(--type-body); }
  .site-footer { padding-left: 5%; padding-right: 5%; }
  .site-footer > a:first-child { letter-spacing: .04em; }
  .site-footer > p { letter-spacing: .02em; }
}

@media (max-width: 360px) {
  .site-header { padding-left: 4%; padding-right: 4%; }
  .site-header nav { gap: .625rem; }
  .wordmark { gap: .25rem; }
  .wordmark .mark { display: none; }
  .landing-journey .intro-grid h2 { font-size: 2.125rem; }
  .landing-journey .asterisk { font-size: 2.5rem; margin-left: .5rem; }
  .journey-guide { left: 5%; right: 5%; }
  .journey-dots { left: 43%; gap: .25rem; }
  .journey-dots button { width: 1rem; }
  .timeline-controller { display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; gap: .5rem; }
  .timeline-ruler { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; width: 100%; min-width: 0; max-width: 100%; }
  .timeline-ruler button { white-space: nowrap; min-height: 2.75rem; }
  .timeline-controller .round-button { grid-row: 2; }
  .timeline-controller .round-button:last-child { grid-column: 3; }
}

/* Short viewports use the existing static-flow mode instead of tiny body copy. */
.landing-journey.journey-static .journey-scene { min-height: 52rem; }
.landing-journey.journey-static .hero-copy { top: 22%; }
.landing-journey.journey-static .intro-content { top: 52%; }
.landing-journey.journey-static .selected-section .section-heading { padding-top: 7.5rem; }

@media (prefers-reduced-motion: reduce) {
  .landing-journey .journey-scene { min-height: 52rem; }
}