/* Keep mobile text inflation consistent across paragraphs, lists and dialogs. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@font-face {
  font-family: Bootzy;
  src: url('/assets/fonts/bootzy-web-v1.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Michroma;
  src: url('/assets/fonts/michroma-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* The supplied Euro resembles zero; let Arial render the currency symbol. */
  unicode-range: U+0000-20AB, U+20AD-10FFFF;
}

:root {
  --action-red: #df2828;
  --prose-size: 15px;
  --prose-color: #000;
  --prose-font: Michroma, Arial, Helvetica, sans-serif;
}

/* Inverse surfaces need light copy; do not darken text over photography. */
body:has(> .approved-header),
body:has(> #members-main),
.hero,
.design-hero__scene,
.car-copy,
.package-out,
.panel-action,
.engine-status {
  --prose-color: #fff;
}

.agenda-panel .panel-action {
  --prose-color: #000;
}

/* Michroma is shared by reading text and controls; display headings stay Quedora. */
body { --control: Michroma, Arial, Helvetica, sans-serif; }
body :is(.outline-button, .primary-cta, .engine-button, .btn, .button,
  .text-button, .site-nav a, .site-nav button, .language-toggle button,
  .approved-nav a, .approved-nav button, .event-nav a, .event-nav button,
  .event-list__action, .paddock-link, .calendar-row a, .calendar-row button) {
  font-family: Michroma, Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: 0;
  word-spacing: normal;
}
body :is(.outline-button, .btn, .button, .primary-cta) {
  font-size: 11px !important;
  white-space: normal;
  line-height: 1.4;
}
body .btn:not(.secondary, .ghost, .line) { background: var(--action-red); border-color: var(--action-red); color: #fff; }
body .btn:not(.secondary, .ghost, .line):hover { background: #c72121; border-color: #c72121; }
body.compil-site .outline-button.primary-cta { --cta-background: var(--action-red); --cta-hover: #c72121; color: #fff; }
body.compil-site .panel-action .outline-button.primary-cta { --cta-background: #080808; --cta-hover: #262626; }
body.compil-site .outline-button {
  white-space: nowrap;
  min-width: 0;
}
body.compil-site .primary-cta[data-i18n='agendaCta'] { color: #fff; font-family: var(--control); font-weight: 400; font-kerning: none; line-height: 1.4; word-spacing: .16em; }
body .mbar .btn {padding-inline:10px}

body p:not(:where(
  .eyebrow, .kicker, .offer-eyebrow, .stay-kicker, .legal-date,
  .marketplace-card__meta, .operator-cta__eyebrow, .member-gate__eyebrow,
  .data-label, .countdown, .valid, .car-specs, .car-price, .car-price-note,
  .base-amount, .own-car-price, .car-deposit, .deposit-hold-note, .standards-copy, .action-copy,
  .founder-name, .founder-credentials, .about-team, .day-grid p
)),
body .info .body,
body .info li,
body .points li,
body .experience-base li,
body .confirmation li,
body .legal-content li,
body .legal-status {
  font-family: var(--prose-font) !important;
  font-weight: 400 !important;
  font-synthesis: none;
  font-size: var(--prose-size) !important;
  line-height: 1.8 !important;
  font-kerning: normal !important;
  font-variant-ligatures: normal !important;
  font-feature-settings: normal;
  letter-spacing: 0;
  word-spacing: normal;
  text-transform: none !important;
  text-align: start;
  overflow-wrap: break-word;
}

body p:not(:where(
  .eyebrow, .kicker, .offer-eyebrow, .stay-kicker, .legal-date,
  .marketplace-card__meta, .operator-cta__eyebrow, .member-gate__eyebrow,
  .data-label, .countdown, .valid, .car-specs, .car-price, .car-price-note,
  .base-amount, .own-car-price, .car-deposit, .deposit-hold-note, .standards-copy, .action-copy,
  .founder-name, .founder-credentials, .about-team, .day-grid p,
  .error, .draft, .form-hint, [role='alert']
)),
body .info .body,
body .info li,
body .points li,
body .experience-base li,
body .confirmation li,
body .legal-content li,
body .legal-status {
  color: var(--prose-color) !important;
}

body .package-checklist {
  font-family: var(--prose-font);
  font-size: var(--prose-size);
  color: var(--prose-color);
  word-spacing: normal;
  line-height: 1.7;
  text-transform: none;
}

body .experience-base li::before {
  color: inherit;
}

body .founder-quote p { max-width: 64ch; }
body .about-copy p:not(.about-team) { max-width: 70ch; }
body .about-copy p + p { margin-top: 20px; }
body :is(.faq-list, .faq, .info) summary {
  font-family: Michroma, Arial, Helvetica, sans-serif !important;
  font-size: var(--prose-size) !important;
  font-weight: 400 !important;
  font-synthesis: none;
  line-height: 1.6;
  text-transform: none;
}
body :is(.faq-list, .faq, .info) details :is(p, .body, li, a, strong, span) {
  font-family: Michroma, Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
}
body .invite-dialog :is(label,input,select,textarea) {
  font-family: var(--prose-font);
  font-weight: 400;
  line-height: 1.6;
}
body .invite-dialog :is(input,select,textarea) {font-size:16px}

/* Booking, confirmation and policy pages share the same reading typography. */
body:has(> .top) {
  --body: var(--prose-font);
  font-family: var(--prose-font);
  font-size:15px;
  line-height:1.7;
  font-synthesis:none;
  word-spacing:normal;
}
body:has(> .top) .btn {font-family:Michroma,Arial,sans-serif}
body:has(> .top) .choice .t {font-size:15px;line-height:1.6;overflow-wrap:break-word}
body:has(> .top) .choice .s {font-size:12px;line-height:1.7}
body:has(> .top) .choice .price {font-size:17px}
body:has(> .top) .row {font-size:13px;gap:14px}
body:has(> .top) .choice {min-width:0}
body:has(> .top) summary {font-size:14px;line-height:1.7}
body.compil-site .about-copy {
  color: #000;
  background: #e8e8e6 var(--paper-image) center / 1280px 720px repeat;
}

/* Status messages keep their semantic styling, separate from body copy. */
body p:is(.draft, .error, .form-hint, [role='alert']) {
  font-size: 14px !important;
}

@media (max-width: 820px) {
  :root { --prose-size: 14px; }
  body:has(> .top) {font-size:14px}
  body :is(.outline-button, .btn, .button, .primary-cta) {font-size:10px !important}
  body.compil-site .design-hero .primary-cta {font-size:9px !important}
  body.compil-site .design-hero .primary-cta[data-i18n='requestCta'] {padding-left:6px}
}

@media (max-width: 760px) {
  body:has(> .top) .paybar {
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    gap:12px;
  }
  body:has(> .top) .paybar > a {min-width:0;text-decoration:none}
  body:has(> .top) .paybar .amt {display:block;font-size:16px;white-space:nowrap}
  body:has(> .top) .paybar .sub {display:block;font-size:10px;line-height:1.6}
  body:has(> .top) .paybar .btn {min-width:0;padding-inline:8px}
}
