/* Local, licensed typefaces. Each pairing has its own display proportions. */
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/CormorantGaramond-normal.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('assets/fonts/CormorantGaramond-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('assets/fonts/BodoniModa-normal.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('assets/fonts/BodoniModa-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('assets/fonts/LibreCaslonText-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Caslon Text'; src: url('assets/fonts/LibreCaslonText-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Lato; src: url('assets/fonts/Lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Lato; src: url('assets/fonts/Lato-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url('assets/fonts/WorkSans-normal.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

[data-typeface-option='editorial'] { --serif: Newsreader, Georgia, serif; --sans: Manrope, Arial, sans-serif; }
:root[data-typeface='atelier'], [data-typeface-option='atelier'] { --serif: 'Cormorant Garamond', Georgia, serif; --sans: Lato, Arial, sans-serif; }
:root[data-typeface='fashion'], [data-typeface-option='fashion'] { --serif: 'Bodoni Moda', Georgia, serif; --sans: 'Work Sans', Arial, sans-serif; }
:root[data-typeface='heritage'], [data-typeface-option='heritage'] { --serif: 'Libre Caslon Text', Georgia, serif; --sans: Lato, Arial, sans-serif; }
:root[data-typeface='atelier'] .hero h1 { font-size: clamp(56px, min(7.2vw, 10.6svh), 100px); letter-spacing: -.035em; }
:root[data-typeface='atelier'] :is(h1, h2, h3, .story-text) { font-weight: 500; }
:root[data-typeface='fashion'] .hero h1 { font-size: clamp(48px, min(5.9vw, 9.4svh), 86px); letter-spacing: -.04em; }
:root[data-typeface='heritage'] .hero h1 { font-size: clamp(46px, min(5.55vw, 9svh), 80px); letter-spacing: -.045em; }
:root[data-typeface='heritage'] .wordmark { letter-spacing: -.065em; }
:root[data-typeface='heritage'] .hero-card .glass-label > span { font-size: clamp(20px, calc(var(--ring-card-width, 260px) * .087), 28px); }

.font-picker { position: fixed; left: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 50; font-family: Manrope, Arial, sans-serif; line-height: 1.4; color: var(--plum); }
.font-picker[hidden], .font-picker-panel[hidden] { display: none; }
.font-picker-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 16px 7px 10px; border: 1px solid #dec6cd; border-radius: 999px; background: var(--paper); box-shadow: 0 4px 20px -10px #38142644; font-family: inherit; font-size: 12px; font-weight: 600; }
.font-picker-monogram { font-family: Georgia, serif; font-size: 22px; letter-spacing: -.07em; color: var(--berry); }
.font-picker-current { margin-left: 5px; font-weight: 400; color: var(--muted); }
.font-picker-toggle:hover, .font-picker-toggle[aria-expanded='true'] { border-color: #b67c91; }
.font-picker-panel { position: absolute; bottom: 58px; left: 0; width: 330px; max-width: calc(100vw - 40px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 18px; border: 1px solid #e4cfd5; border-radius: 23px; background: var(--paper); box-shadow: 0 14px 50px -18px #38142644; }
.font-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.font-picker-heading h2 { font-family: Manrope, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -.025em; }
.font-picker-heading p { margin-top: 5px; font-size: 11px; line-height: 1.5; }
.font-picker-close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; margin: -5px -5px 0 0; padding: 0; border-radius: 50%; background: #f2e6e8; color: var(--berry); }
.font-picker-close svg { width: 17px; height: 17px; }
.font-picker-options { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.font-picker-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #e9d9de; border-radius: 13px; cursor: pointer; background: #fffaf6; }
.font-picker-option:hover { border-color: #c89eae; }
.font-picker-option:has(input:checked) { border-color: var(--berry); background: #f6ecee; }
.font-picker-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.font-picker-option:has(input:focus-visible) { outline: 2px solid var(--berry); outline-offset: 3px; }
.font-picker-sample { display: grid; gap: 3px; }
.font-picker-option-name { font-family: Manrope, Arial, sans-serif; font-size: 10px; font-weight: 600; color: var(--muted); }
.font-picker-preview { font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.2; letter-spacing: -.035em; color: var(--plum); }
[data-typeface-option='atelier'] .font-picker-preview { font-weight: 500; }
[data-typeface-option='heritage'] .font-picker-preview { font-size: 24px; }
.font-picker-sample small { font-family: var(--sans); font-size: 10px; font-weight: 400; color: var(--muted); }
.font-picker-check { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; border: 1px solid #c5a8b4; border-radius: 50%; }
input:checked ~ .font-picker-check { border-color: var(--berry); }
input:checked ~ .font-picker-check::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--berry); }
.font-picker-status { margin-top: 13px; font-size: 10px; line-height: 1.5; }

@media (max-width: 600px) {
  .font-picker { left: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .font-picker-panel { width: 330px; max-width: calc(100vw - 28px); padding: 16px; max-height: calc(100dvh - 95px); }
  .font-picker-option { padding: 9px 12px; }
  .font-picker-preview { font-size: 25px; }
  [data-typeface-option='heritage'] .font-picker-preview { font-size: 22px; }
  :root[data-typeface='atelier'] .hero h1 { font-size: clamp(39px, 10.6vw, 60px); }
  :root[data-typeface='fashion'] .hero h1 { font-size: clamp(33px, 8.4vw, 48px); }
  :root[data-typeface='heritage'] .hero h1 { font-size: clamp(31px, 7.9vw, 45px); }
  :root[data-typeface='heritage'] .wordmark { font-size: 25px; }
}
@media (max-width: 360px) {
  :root[data-typeface='atelier'] .hero h1 { font-size: 35px; }
  :root[data-typeface='fashion'] .hero h1 { font-size: 30px; }
  :root[data-typeface='heritage'] .hero h1 { font-size: 28px; }
}
@media (max-height: 650px) and (min-width: 601px) {
  :root[data-typeface='atelier'] .hero h1 { font-size: clamp(46px, min(7.2vw, 10svh), 65px); }
  :root[data-typeface='fashion'] .hero h1 { font-size: clamp(40px, min(5.9vw, 9svh), 58px); }
  :root[data-typeface='heritage'] .hero h1 { font-size: clamp(38px, min(5.55vw, 8.5svh), 55px); }
}
@media (prefers-contrast: more) {
  .font-picker-toggle, .font-picker-panel, .font-picker-option { border-color: var(--berry); }
}