/* Fashion: Bodoni Moda display; DM Sans interface and artwork titles. */
:root { --serif: 'Bodoni Moda', Georgia, serif; --sans: 'DM Sans', Arial, sans-serif; }
body { font-size: clamp(18px, 1.1vw, 21px); }
.wordmark { font: 400 36px/1 var(--serif); letter-spacing: -1.1px; }
.header nav button, .info-link, .theme-toggle { font-size: 20px; }
.info-link { display: inline-flex; align-items: center; gap: 12px; }
.project-meta h2 { font: 400 22px/1.3 var(--sans); }
.project-meta p, .signature { font-size: 15px; line-height: 1.55; }
.gallery-controls span { font-size: 14px; }
.gallery-controls button { font-size: 30px; }
.gallery-controls .scroll-hint { font-size: 13px; width: 175px; }
.loading { font-size: 26px; }
.panel-header { min-height: 104px; }
.panel-header h2 { font: 400 34px/1.2 var(--serif); }
.panel-header button { font-size: 18px; }
.panel-header button span:not(.theme-label) { font-size: 27px; }
.index-item .index-label { font: 400 18px/1.5 var(--sans); }
.index-item .index-label span:last-child { font-size: 16px; }
/* Restore the compact Info type scale, with tighter rhythm to fit desktop. */
#info-dialog .panel-header { min-height: 84px; padding-top: 18px; padding-bottom: 18px; }
#info-dialog .wordmark { font-size: 27px; }
.info-content { padding: 22px 48px 28px; }
.eyebrow { font-size: 11px; line-height: 1.5; margin-bottom: 18px; }
.info-content h2 { font-size: clamp(42px, 5vw, 64px); line-height: 1.07; margin-bottom: 22px; }
.info-copy { font-size: 15px; line-height: 1.65; max-width: 480px; margin: 0 0 22px; }
.email { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; font-size: clamp(20px, 2.2vw, 28px); }
.email-address { min-width: 0; overflow-wrap: anywhere; }
.info-links { gap: 8px 24px; margin-top: 8px; }
.info-links a { font-size: 12px; gap: 8px; }
.learn { margin-top: 24px; padding-top: 18px; }
.learn h3 { font-size: 20px; margin-bottom: 8px; }
.learn p { font-size: 12px; }
.diagonal-arrow { display: inline-block; width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; vertical-align: middle; }
.email .diagonal-arrow { width: 28px; height: 28px; }
.info-links .diagonal-arrow { width: 23px; height: 23px; }
@media (max-width: 560px) {
  :root { --space: 20px; }
  body { font-size: 17px; }
  .header { height: 118px; }
  .wordmark { font-size: 30px; }
  .header nav button, .info-link { font-size: 17px; }
  .info-link { gap: 7px; }
  .diagonal-arrow { width: 26px; height: 26px; }
  .stage { height: calc(100svh - 270px); min-height: 260px; }
  .gallery-footer { min-height: 152px; }
  .project-meta h2 { font-size: 18px; }
  .project-meta p { font-size: 14px; }
  .signature { font-size: 13px; gap: 14px; }
  .gallery-controls span { font-size: 13px; }
  .gallery-controls button { font-size: 28px; }
  .panel-header { min-height: 92px; gap: 12px; }
  .panel-header h2 { font-size: 28px; }
  .panel-header button { font-size: 17px; }
  .index-item .index-label { font-size: 17px; }
  .index-item .index-label span:last-child { font-size: 14px; }
  .index-grid { gap: 32px 16px; }
  .info-content { padding: 18px 26px 28px; }
  .info-content h2 { font-size: 46px; letter-spacing: -1.4px; }
  .info-copy { font-size: 14px; }
  .email { font-size: 22px; gap: 9px; }
  .email .diagonal-arrow { width: 25px; height: 25px; }
}
@media (max-width: 360px) {
  .panel-header h2 { font-size: 24px; }
}