/* A gallery voice, with a small set of repeatable reading and display roles. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --sans: 'Manrope', Arial, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --type-meta: .75rem;
  --type-control: .875rem;
  --type-body: 1rem;
  --type-lead: 1.25rem;
  --type-title: 1.5rem;
  --type-section: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --type-display: clamp(2.625rem, 2rem + 2.5vw, 4rem);
}

body {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis: none;
}
button, input, select { font-family: var(--sans); }
input, select { font-size: var(--type-body); caret-color: var(--blue); }
::selection { background: var(--blue); color: white; }
h1, h2, h3, h4 { text-wrap: balance; }

/* Display lettering: one family throughout the brand and page headings. */
.wordmark {
  font-family: var(--serif);
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  gap: .2em;
}
.wordmark > span:first-child, .wordmark > span:nth-child(2) {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.wordmark small {
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: .2em;
}
.hero-panel h1, .hero-panel h1 span,
.catalogue-intro h1, .story-page h1, .empty-state h1 {
  font-family: var(--serif);
  font-size: var(--type-display);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: none;
}
.hero-panel h1 span { font-size: inherit; }
.hero-panel p {
  font-size: var(--type-body);
  line-height: 1.6;
  max-width: 38ch;
}
.section-title, .editorial-title, .manifesto h2, .advice-copy h2,
.detail-info h1, .detail-story h2, .story-body h2,
.dialog-title, .empty-state h2 {
  font-family: var(--serif);
  font-size: var(--type-section);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;
}
.editorial-card h3, .collection-card h3, .notes-grid h3,
.journal-grid h3, .footer-signup h2, .selection-item h2,
.selection-summary h2, .loading-state {
  font-family: var(--serif);
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.reason-grid h3, .footer-column h3 {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.4;
}

/* Reading and artwork information. */
.art-card h3, .catalogue-grid .art-card h3 {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.5;
}
.art-card .artist, .catalogue-grid .art-card .artist, .detail-info .artist {
  font-family: var(--serif);
  font-size: var(--type-lead);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  text-decoration: none;
}
.artist:hover { text-decoration: underline; text-underline-offset: .2em; }
.art-price, .catalogue-grid .art-price, .summary-line {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.5;
}
.detail-price {
  font-family: var(--sans);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: lining-nums tabular-nums;
}
.price-tile {
  font-family: var(--serif);
  font-size: var(--type-title);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
}
.manifesto p, .story-page .lead, .reasons > p {
  font-family: var(--serif);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.4;
  max-width: 60ch;
}
.reasons > p { margin-inline: auto; }
.story-body, .info-body, .detail-story { max-width: 68ch; }
.story-body p, .info-body p, .detail-story p, .notes-grid p,
.advice-copy p, .detail-info > p, .dialog-copy, .reason-grid p,
.catalogue-intro > p, .empty-state p, .footer-signup p {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.65;
}
.catalogue-intro > p { max-width: 68ch; }
.reason-grid p { line-height: 1.5; }
.art-meta, .catalogue-grid .art-meta, .detail-accordions p,
.selection-item p, .selection-summary p, .footer-column,
.footer-bottom, .breadcrumb, .result-count, .catalogue-search,
.announcement, .preview-note, .toast {
  font-family: var(--sans);
  font-size: var(--type-control);
  font-weight: 400;
  line-height: 1.55;
}
.art-meta { color: var(--muted); }
.editorial-title { margin-bottom: 12px; }
.section-note {
  font-family: var(--sans);
  font-size: var(--type-control);
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
  max-width: 68ch;
  margin: 0 auto 32px;
  text-align: center;
}
.fine-print, .demo-label, .detail-image span, .social-links,
.bag-count, .locale-button {
  font-family: var(--sans);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.5;
}
.footer-signup .fine-print { font-size: var(--type-meta); }
.bag-count { line-height: 1; }

/* Every action and navigation label follows the same control role. */
.button, .detail-buttons .button, .catalogue-toolbar .button,
.text-link, .hero-panel .text-link, .editorial-card .text-link,
.journal-grid .text-link, .browse-chips a, .mobile-browse a,
.announcement a, .category-nav, .category-nav.open,
.top-categories, .top-categories span, .view-buttons button,
.detail-actions button, .filters summary, .sort-select,
.filter-option, .filter-chip, .signup-button,
.footer-bottom button, .selection-item button, .pagination {
  font-family: var(--sans);
  font-size: var(--type-control);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}
.button, .text-link, .announcement a, .filters summary,
.view-buttons button, .detail-actions button { letter-spacing: .06em; }
.header-search input, .dialog-search input, .sort-select,
.match-fields select { font-size: var(--type-body); }
.match-fields {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.5;
}
.match-fields select { color: var(--muted); line-height: 1.5; min-height: 44px; }
.filter-top { font-size: var(--type-title); font-family: var(--serif); }
.category-tile strong { font-size: var(--type-body); font-weight: 500; line-height: 1.4; }
.text-link span, .round-button, .dialog-close { font-size: var(--type-title); line-height: 1; }
.button, .browse-chips a, .mobile-browse a, .text-link,
.round-button, .locale-button, .filter-chip, .selection-item button {
  min-height: 44px;
}
.round-button, .locale-button, .icon-button { min-width: 44px; }
.card-icons .icon-button, .catalogue-grid .card-icons .icon-button {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 760px) {
  .hero-panel h1 { line-height: 1; }
  .hero-panel p { max-width: 38ch; }
  .section-head .section-title { flex: 1; }
  .rail-controls { flex-shrink: 0; }
  .category-nav.open { font-size: var(--type-body); }
  .wordmark { font-size: var(--type-section); }
  .footer-wordmark { font-size: var(--type-section); }
  .editorial-card .text-link { letter-spacing: .02em; }
}

@media (max-width: 380px) {
  .header-main .wordmark { font-size: var(--type-title); padding-bottom: 10px; }
  .header-actions [data-action="account"] { display: none; }
}