/* ============================================================
   Typography: the one place the site's type is decided.

   Hand-written, like rsvp.css. Two families, each with a job:

     Dancing Script  display: section titles and the couple's signature
     Vesper Libre    everything read or used: body, labels, nav, buttons,
                     fields, times

   Every piece of text takes one of the roles below. A role fixes the family,
   size, weight, slant, line height and tracking together, so the same kind
   of text looks the same in every section. Colour, spacing and layout stay
   where they were (inline, site.css, rsvp.css).

   The design export writes type inline; tools/typography_roles.py moves it
   onto these roles, and ground.py runs it on every regeneration. Change a
   value here, not on an element.
============================================================ */

/* ------------------------------------------------------------- faces */
/* Self-hosted. Dancing Script's files are variable (a wght axis of 400-700)
   despite the "400" in their names, so one face per subset covers every
   weight. Vesper Libre ships static 400, 500 and 700 faces only, and no
   italics, so roles ask for exactly those and never for italic. */

/* vietnamese */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dancing-script-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dancing-script-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/dancing-script-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vesper-libre-400-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vesper-libre-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/vesper-libre-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/vesper-libre-500-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/vesper-libre-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/vesper-libre-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/vesper-libre-700-devanagari.woff2") format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/vesper-libre-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Vesper Libre';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/vesper-libre-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------ tokens */
:root {
  --font-display: 'Dancing Script', cursive;
  --font-body: 'Vesper Libre', Georgia, serif;

  --fs-section-title: clamp(36px, 5vw, 48px);
  --fs-intro: 19px;
  --fs-body: 17px;
  --fs-title: 20px;
  --fs-helper: 14px;
  --fs-label: 12px;
  --fs-button: 13px;
  --fs-input: 16px;          /* iOS zooms the page on focus below 16px */
  --fs-nav: 12px;
  --fs-nav-menu: 15px;

  --lh-display: 1.15;
  --lh-read: 1.65;
  --lh-title: 1.4;
  --lh-helper: 1.5;
  --lh-ui: 1.4;

  --track-label: 0.12em;     /* labels, eyebrows, navigation, codes */
  --track-button: 0.16em;
  --track-meta: 0.2em;       /* dates and invitation metadata */
}

/* The page's default is the reading face, upright. Nothing asks for an
   italic, and Vesper Libre has none to give, so the browser is told not to
   fake one (or a bold) should a stray <em> ever turn up. */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-synthesis: none;
}

/* ----------------------------------------------------------- display */
/* Section titles: one size for all ten, however long. Long ones wrap. */
.t-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-section-title);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-display);
  letter-spacing: normal;
  text-transform: none;
}

/* "Justin & Nina": the gate, the hero and the closing each keep their own
   scale, but it is the same signature. */
.t-signature {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: normal;
  text-transform: none;
}
.t-signature--gate { font-size: 52px; }
.t-signature--hero { font-size: clamp(56px, 14vw, 96px); }
.t-signature--footer { font-size: clamp(30px, 5vw, 40px); line-height: var(--lh-display); }
.t-signature-amp { font-size: 0.6em; }

/* The RSVP thank-you. rsvp.js may step the size down, or split it after
   "Thank you,", to keep a long household greeting from breaking badly. */
.rsvp-thanks {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 42px);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-display);
  letter-spacing: normal;
}

/* ----------------------------------------------------------- reading */
/* An opening lead: the first paragraph under a section title. */
.t-intro {
  font-family: var(--font-body);
  font-size: var(--fs-intro);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-read);
  letter-spacing: normal;
}

/* Body copy, practical information, entourage names, confirmations. */
.t-body,
.rsvp-found,
.rsvp-panel p,
.rsvp-link {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-read);
  letter-spacing: normal;
  text-transform: none;
}

/* Card, route and event titles; venue names. */
.t-title {
  font-family: var(--font-body);
  font-size: var(--fs-title);
  font-weight: 500;
  font-style: normal;
  line-height: var(--lh-title);
  letter-spacing: normal;
}
/* The place that follows a venue name, a step quieter than the name. */
.t-title-sub { font-weight: 400; }

/* Helper text, captions, notes, errors. */
.t-helper,
.rsvp-hint,
.rsvp-error,
.rsvp-panel .rsvp-aside {
  font-family: var(--font-body);
  font-size: var(--fs-helper);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-helper);
  letter-spacing: normal;
  text-transform: none;
}

/* ---------------------------------------------------------- interface */
/* Labels and eyebrows: form labels, card eyebrows, entourage groups, the
   Yes/No choice, the countdown units. */
.t-label,
.rsvp-form label,
.rsvp-form legend,
.rsvp-label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  font-style: normal;
  line-height: var(--lh-ui);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Dates and invitation metadata ("Together with their families", the date,
   the place). Quieter than a label, with one shared tracking. */
.t-meta {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-ui);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
}
.t-meta--md { font-size: 14px; }
.t-meta--lg { font-size: clamp(15px, 4vw, 20px); }

.t-button,
.rsvp-submit {
  font-family: var(--font-body);
  font-size: var(--fs-button);
  font-weight: 700;
  font-style: normal;
  line-height: var(--lh-ui);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
}

.t-nav {
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 500;
  font-style: normal;
  line-height: var(--lh-ui);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.t-nav--menu { font-size: var(--fs-nav-menu); }
.t-nav--primary { font-weight: 700; }

.t-input,
.rsvp-form input[type="text"],
.rsvp-form input[type="email"],
.rsvp-form input[type="tel"],
.rsvp-form select,
.rsvp-form textarea {
  font-family: var(--font-body);
  font-size: var(--fs-input);
  font-weight: 400;
  font-style: normal;
  line-height: var(--lh-ui);
  letter-spacing: normal;
  text-transform: none;
}

::placeholder { font-style: normal; }

/* A printed code is read character by character, so it gets the spacing
   and capitals to match. rsvp.js still normalises whatever is typed. */
.rsvp-form input[type="text"].rsvp-code {
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.rsvp-form input[type="text"].rsvp-code::placeholder {
  letter-spacing: normal;
  text-transform: none;
}

/* ----------------------------------------------------------- numbers */
/* Times and the countdown: bold, untracked, each at its own scale. */
.t-num {
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  letter-spacing: normal;
}
.t-num--venue { font-size: clamp(48px, 5.4vw, 64px); line-height: 0.95; }
.t-num--venue-suffix { font-size: clamp(24px, 2.7vw, 32px); text-transform: uppercase; }
.t-num--timeline { font-size: clamp(26px, 2.5vw, 32px); line-height: 1; }
.t-num--timeline-suffix { font-size: clamp(14px, 1.3vw, 16px); }
.t-num--countdown { font-size: 26px; line-height: 1; }
.t-num--step { font-size: 15px; }

/* ------------------------------------------------------------ mobile */
/* The display and number scales that step down on phones. These are part
   of the roles, not overrides of them. */
@media (max-width: 640px) {
  .t-signature--hero { font-size: clamp(40px, 14vw, 64px); }
  .t-num--countdown { font-size: 22px; }
  /* the countdown tiles narrow to 62px here; "HOURS" at 12px would touch
     their dashed edge */
  .t-label--unit { font-size: 11px; }
  .t-num--timeline { font-size: 24px; }
  .t-num--timeline-suffix { font-size: 13px; }
}