/* One type scale for the whole site. Loaded last, so it replaces the many one-off sizes in the other stylesheets.
   Two typefaces, as before: Cormorant Garamond (serif, for headings and accents) and Manrope (sans, for everything you read
   and click). Sizes flow smoothly with the screen width, and the creative touches stay: italic accents, tight display
   lettering and spaced-out small capitals. */
:root{
  --fs-hero:clamp(46px,5.2vw,72px);      /* the big headline on the front page and the venue page */
  --fs-title:clamp(42px,4.6vw,62px);     /* the title at the top of every other page */
  --fs-section:clamp(32px,3.2vw,44px);   /* section headings */
  --fs-sub:clamp(24px,2.3vw,30px);       /* card, panel and form headings */
  --fs-small-head:clamp(21px,1.9vw,24px);/* questions, options and other small serif headings */
  --fs-accent:21px;                      /* serif accents: numbers, menu lines, contact numbers */
  --fs-label:14px;                       /* sans headings for lists, dashboard cards and small panels */
  --fs-eyebrow:11px;                     /* spaced-out small capitals above headings */
  --fs-lead:15px;                        /* the sentence under a title */
  --fs-body:14px;
  --fs-note:12px;                        /* hints, notes and error messages */
}

/* Page titles */
h1,.page-intro h1{font-size:var(--fs-title);line-height:1.05;letter-spacing:-.03em;font-weight:500}
.hero h1,.venue-hero h1{font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.03em}
.mahogany-title{font-size:var(--fs-sub)}

/* Section headings */
h2,.cta-band h2,.service-row h2,.split-copy h2,.contact-grid h2,.story-band h2,.section-head h2,.menu-dialog h2,.form-section h2,.dashboard-head h2,.vacancy-head h2,.login-card h2{
  font-size:var(--fs-section);line-height:1.08;letter-spacing:-.025em;font-weight:500}

/* Card, panel and form headings */
h3,.menu-card h2,.card-title h3,.detail-panel h3,.contact-card h3,.form-aside h3,.privacy-content h2,.draft-card h3,.guest-band h3,.form-subtitle,.support-list-head h2,.full-menu h3,.leave-dialog h2,.ep-dialog h2,.ep-header h2,.ep-loading h2{
  font-size:var(--fs-sub);line-height:1.12;letter-spacing:-.015em;font-weight:500}
.privacy-content h2{margin-top:30px}

/* Small serif headings inside the quotation form */
.simple-menu .simple-question-title,.meal-food h4,.mode-card strong,.meal-request>legend,.menu-mode>legend{
  font-family:var(--serif);font-size:var(--fs-small-head);line-height:1.15;letter-spacing:-.01em;font-weight:500}

/* Serif accents */
.trust-strip>span,.trust-strip div,.menu-line,.teaser-photo .image-tag,.vacancy-closing strong,.aside-contact a{font-family:var(--serif);font-size:var(--fs-accent)}
.stat strong,.draft-facts strong{font-family:var(--serif);font-size:30px;font-weight:500}

/* Sans headings for lists and dashboard cards, all the same */
.enquiry h3,.address-card h3,.thread-head h3,.team-head h4,.review-group h3,.contact-item h3,.vacancy-apply h3,.ep-dialog h3,.ep-meal-heading h3{
  font-family:var(--sans);font-size:var(--fs-label);line-height:1.4;letter-spacing:0;font-weight:600}

/* Spaced-out small capitals */
.eyebrow,.hero .eyebrow,.ep-eyebrow,.footer-top h2{font-family:var(--sans);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:2.2px;text-transform:uppercase;line-height:1.5}
.footer-top h2{letter-spacing:1.8px;margin-bottom:18px}

/* Reading text: the sentence under a title, the body, and the small print */
.page-intro p,.hero-copy>p,.section-head p{font-size:var(--fs-lead);line-height:1.8}
.split-copy p,.service-row p,.story-band p,.venue-grid p,.privacy-content p,.privacy-content ul,.menu-card p,.occasion-card p,.contact-card>p{font-size:var(--fs-body)}
.help-text,.field-error,.small-note{font-size:var(--fs-note)!important;line-height:1.55}
.field label,.field-label,.check-options legend{font-size:12px}
.status-badge{font-size:10px}
.photo-note,.quote-section cite{font-size:11px}