/* A consistent Korean type system for the site, including forms and dialogs. */
@font-face {
  font-family: 'Noto Sans KR';
  src: url('assets/noto-sans-kr.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-ui: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
body {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.015em;
}
button, input, select, textarea { font-family: var(--font-ui); }
/* Keep the established wordmark proportions. */
.wordmark, .footer-logo { font-family: Pretendard, sans-serif; }
.brand-sub { letter-spacing: .04em; }
.brand-sub:first-line { letter-spacing: .08em; }
h1, h2, h3 { font-weight: 600; }
.hero h1 {
  font-size: clamp(40px, 4.1vw, 66px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.035em;
  white-space: normal;
}
.section-head h2, .intro-lead h2, .material-section h2,
.contact-band h2, .page-heading h1, .about-overview h2,
.workshop-copy h3, .size-guide h2, .real-work-callout h2,
.showcase-heading h2, .modal-title {
  letter-spacing: -.025em;
  line-height: 1.4;
}
.business-row h3, .detail-card h3, .form-group h2,
.project-photo-card .project-caption h3, .product-info h3 {
  letter-spacing: -.02em;
  line-height: 1.5;
}
.serif, .hero-english, .page-heading .big-en, .business-row .number,
.process-card>span, .form-group h2 span, .mobile-nav span, .empty-symbol {
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.hero-english { font-size: clamp(20px, 1.9vw, 28px); line-height: 1.5; }
.page-heading .big-en { font-size: 26px; }
.process-card>span { font-size: 25px; font-weight: 500; }
.eyebrow, .label, .hero-top .edition, .business-row .small-english,
.product-info .en, .table-card .product-info .en, .archive-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
}
.hero-bottom { font-size: 11px; letter-spacing: .025em; }
.hero-art-caption { font-size: 10px; letter-spacing: .04em; }
.desktop-nav a, .header-cta, .button, .text-link, .filter,
.project-shortcuts a, .subnav, .site-footer .footer-links {
  font-weight: 500;
  letter-spacing: -.015em;
}
.desktop-nav .nav-projects { font-weight: 600; }
.button, .header-cta, .text-link { font-size: 14px; }
.hero-copy>p, .intro-body p, .showcase-intro>p, .page-heading p,
.about-overview>div>p, .workshop-copy>p, .real-work-callout p,
.material-section p, .section-head p, .contact-band p {
  font-size: 15px;
  line-height: 1.85;
}
.business-row p, .detail-card p, .process-card p, .contact-sidebar p,
.planning-note p, .catalog-empty p, .modal-text, .faq-list details p,
.gallery-copy .modal-text { font-size: 14px; line-height: 1.8; }
.project-photo-card .project-caption p, .gallery-photo-caption p,
.table-use, .collection-note, .inline-note, .table-facts,
.form-notice, .field, .file-input-wrap { font-size: 13px; line-height: 1.75; }
.field input, .field textarea, .field select { font-size: 16px; }
.field input::placeholder, .field textarea::placeholder { font-size: 14px; }
.field-hint, .form-footer p, .gallery-note { font-size: 12px; }
.site-footer .copyright span { letter-spacing: .04em; }
@media (max-width: 800px) {
  .hero h1 { font-size: clamp(36px, 6.2vw, 50px); }
  .hero-copy>p, .intro-body p, .showcase-intro>p, .page-heading p,
  .about-overview>div>p, .workshop-copy>p, .real-work-callout p,
  .material-section p, .section-head p, .contact-band p { font-size: 14px; }
  .hero-actions .text-link, .hero-actions .button,
  .showcase-intro .button, .contact-band .button { font-size: 13px; }
}
@media (max-width: 500px) {
  .hero h1 { font-size: clamp(30px, 8.5vw, 40px); }
  .hero-english { font-size: 20px; }
  .page-heading h1 { font-size: 36px; }
  .showcase-heading h2 { font-size: 31px; }
  .hero-actions { gap: 18px; }
  .hero-actions .text-link { gap: 12px; font-size: 12px; }
  .hero-bottom .categories, .hero-bottom .scroll { font-size: 10px; letter-spacing: 0; }
  .hero-bottom .categories { gap: 10px; }
  .project-stage, .project-photo-label, .detail-image span,
  .gallery-photo-caption>span { font-size: 11px; }
  .section-head .text-link { font-size: 12px; }
  .filter, .choice { font-size: 12px; }
}
@media (max-width: 360px) {
  .site-header { gap: 12px; }
  .header-cta { font-size: 11px; gap: 8px; padding: 8px 10px; white-space: nowrap; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .text-link { justify-content: space-between; }
}