/* ============================================================
   VINORA EVENTS — type.css
   The whole site's typography lives here.

   Display is Bodoni Moda, a didone: very high stroke contrast and
   a small x-height. Didones only look expensive when they are set
   LARGE and LIGHT — at 40px in semibold they read as an ordinary
   serif, which is what made the old scale feel generic. The scale
   below is deliberately dramatic, and the weights drop as the size
   goes up.

   Marcellus handles small caps: classical roman proportions that
   sit with Bodoni without competing the way Cinzel did.

   To change every font on the site, edit the four variables below
   and update the Google Fonts <link> in functions.php and
   _build/head.tpl.
   ============================================================ */
:root{
  /* Display — headings, section titles, numbers, the wordmark */
  --font-display:'Bodoni Moda','Prata',Georgia,'Times New Roman',serif;

  /* Body — paragraphs, buttons, nav, forms, everything else */
  --font-body:'Jost','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Small caps — eyebrows, kickers, chips, the EVENTS lockup */
  --font-caps:'Marcellus','Cinzel',Georgia,serif;

  /* Script — decorative accents, watermarks, the signature */
  --font-script:'Great Vibes','Parisienne',cursive;
}

body{font-size:16px;line-height:1.78;letter-spacing:.001em}

/* Weight falls as size rises — a didone's thin strokes need mass at
   small sizes and would look clumsy with it at large ones. */
h1,h2,h3,h4{font-weight:500;letter-spacing:-.014em}
h1{line-height:1.04;font-weight:400}
h2{line-height:1.1;font-weight:400}
h3{line-height:1.25;font-weight:500;letter-spacing:-.008em}
h4{line-height:1.3;font-weight:600;letter-spacing:-.004em}

.sec-title{font-size:clamp(34px,4.7vw,62px);font-weight:400;line-height:1.08;letter-spacing:-.02em}
.sec-title em,h1 em,h2 em{font-style:italic;font-weight:400}
.sec-head p{font-size:16.5px;line-height:1.78;max-width:62ch;margin-inline:auto}

.hero h1{font-size:clamp(44px,6.8vw,104px);font-weight:400;letter-spacing:-.028em;line-height:1.02}
.hero p{font-size:17px;line-height:1.75;max-width:54ch}
.phero h1{font-size:clamp(34px,5.2vw,68px);font-weight:400;letter-spacing:-.022em;line-height:1.06}

/* Eyebrows carry the "editorial" signal — wide tracking, small size */
.eyebrow{font-family:var(--font-caps);letter-spacing:.3em;font-size:10.5px}

/* ------------------------------------------------------------
   Cinzel for the small-caps voice — it is the detail that makes
   the whole site read "luxury" rather than "template".
   ------------------------------------------------------------ */
.eyebrow,
.crumb,
.svc2-card .kicker,
.step2 .chip,
.pack-meta span,
.press em,
.g-cap,
.ven-head,
.post .cat,
.post .meta,
.tag,
.mega h6,
.seo-links h5,
.filters button,
.pre-sub,
.pre-tag,
.logo-txt small,
.logo-tag{font-family:var(--font-caps);font-weight:600}

.eyebrow{font-size:10.5px;letter-spacing:.28em}
.crumb{letter-spacing:.14em}
.svc2-card .kicker{font-size:9.5px;letter-spacing:.2em}
.mega h6{font-size:9.5px;letter-spacing:.2em}
.step2 .chip{font-size:9.5px;letter-spacing:.13em}
.pack-meta span{font-size:10px;letter-spacing:.09em}
.tag{font-size:9.5px;letter-spacing:.14em}
.post .cat{font-size:9.5px;letter-spacing:.12em}
.post .meta{font-size:10.5px;letter-spacing:.09em}
.press em{font-size:9.5px;letter-spacing:.17em}
.filters button{font-size:11.5px;letter-spacing:.09em}
.g-cap{letter-spacing:.18em}
.ven-head{letter-spacing:.24em}
.seo-links h5{letter-spacing:.17em}

/* buttons and nav stay in the body face — Cinzel is too heavy at
   small sizes for interactive text */
.btn{font-family:var(--font-body);font-weight:600;font-size:12.5px;letter-spacing:.11em}
.nav > a,.drop > a{font-family:var(--font-body);font-weight:500;font-size:14.5px}
.field label{font-family:var(--font-caps);font-weight:600;letter-spacing:.13em;font-size:10.5px}

/* ------------------------------------------------------------
   Body copy
   ------------------------------------------------------------ */
p,li,blockquote,td,th,input,select,textarea{font-family:var(--font-body)}
.seo-body p,.seo-body li{font-size:15.5px;line-height:1.78}
.svc2-card p{font-size:13.5px;line-height:1.62}
.step2 p{font-size:13.8px;line-height:1.7}
.feat p{font-size:13.5px}
.t-card blockquote{font-size:15.5px;line-height:1.8;font-style:italic;font-weight:300}
.faq button{font-family:var(--font-display);font-size:18.5px;font-weight:600;letter-spacing:-.008em}
.faq .ans p{font-size:14.5px}
.footer{font-size:14px}
.topbar{font-family:var(--font-body);font-weight:500}

/* ------------------------------------------------------------
   Script accents
   ------------------------------------------------------------ */
.script,.sec-script,.hero-side .script,.t-script .script,.ab-sign .script{font-family:var(--font-script)}
.hero-side .script{font-size:34px;letter-spacing:.01em}
.sec-script{font-size:clamp(60px,9.5vw,140px);opacity:.1}
.ab-sign .script{font-size:30px}
.t-script .script{font-size:34px}
.quote-card .serif{font-size:22px;font-style:italic}

/* ------------------------------------------------------------
   Numerals — tabular so counters do not jitter while animating
   ------------------------------------------------------------ */
.cnt,.stat b,.keyfacts b,.ab-pills b,.pack .price,.dots b,.g-cap b,
.svc2-card .num,.step2 .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ------------------------------------------------------------
   Responsive type
   ------------------------------------------------------------ */
@media(max-width:880px){
  body{font-size:15px}
  .sec-title{font-size:clamp(25px,4.4vw,34px)}
  .faq button{font-size:17px}
}
@media(max-width:620px){
  body{font-size:14.8px;line-height:1.7}
  .sec-title{font-size:25px;letter-spacing:-.01em}
  .hero h1{font-size:32px;letter-spacing:-.015em}
  .hero p{font-size:15px}
  .phero h1{font-size:27px}
  .eyebrow{font-size:9.5px;letter-spacing:.22em}
  .t-card blockquote{font-size:14.5px}
  .faq button{font-size:16px}
  .seo-body p,.seo-body li{font-size:15px}
  .hero-side .script,.t-script .script{font-size:27px}
  .ab-sign .script{font-size:26px}
}
@media(max-width:400px){
  .sec-title{font-size:23px}
  .hero h1{font-size:29px}
}

/* ============================================================
   BODONI MODA TUNING
   A didone has hairline thin strokes. It needs the optical-size
   axis, a little more weight, and open tracking — tight negative
   tracking makes the hairlines collide and look broken.
   ============================================================ */
h1,h2,h3,h4,.sec-title,.faq button,.svc2-card .num,.step2 .n,
.stat b,.keyfacts b,.ab-pills b,.pack .price,.logo-txt b{
  font-optical-sizing:auto;
}

h1,h2,h3,h4{font-weight:600;letter-spacing:.004em}
h1{line-height:1.12}
h2,h3{line-height:1.2}

/* large display sizes can carry the high contrast, so let them breathe */
.hero h1{font-size:clamp(34px,5.2vw,62px);font-weight:600;letter-spacing:.002em;
  font-variation-settings:"opsz" 72}
.phero h1{font-size:clamp(29px,4.3vw,48px);font-weight:600;letter-spacing:.004em;
  font-variation-settings:"opsz" 60}
.sec-title{font-size:clamp(27px,3.6vw,42px);font-weight:600;letter-spacing:.004em;
  font-variation-settings:"opsz" 48}

/* the italic is the most expressive part of this face — use it for the accents */
.sec-title em,h1 em,h2 em{font-style:italic;font-weight:500;letter-spacing:.008em}

/* smaller headings need more weight so the hairlines survive */
.svc2-card h3,.step2 h3,.feat h3,.post h3,.pack h3,.t-card h3,
.info-card h4,.addon h4,.face.back h4,.press b,.footer h4,
.seo-body h2,.seo-body h3{font-weight:700;letter-spacing:.006em;font-variation-settings:"opsz" 28}

.faq button{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.006em;
  font-variation-settings:"opsz" 24}

/* numerals: heavier so the thin strokes do not disappear at small sizes */
.stat b,.keyfacts b,.ab-pills b,.pack .price,.svc2-card .num,.step2 .n,.exp b{
  font-weight:700;letter-spacing:.01em}

.quote-card .serif{font-weight:500;letter-spacing:.01em}
.logo-txt b{font-weight:700;letter-spacing:.14em}

@media(max-width:620px){
  h1,h2,h3,h4{letter-spacing:.008em}
  .sec-title{font-size:26px;letter-spacing:.008em;font-variation-settings:"opsz" 30}
  .hero h1{font-size:33px;letter-spacing:.006em;font-variation-settings:"opsz" 40}
  .phero h1{font-size:28px;font-variation-settings:"opsz" 32}
  .faq button{font-size:16.5px}
}

/* ------------------------------------------------------------
   Whitespace and mobile scale.
   A didone at 104px needs room around it; at phone width it needs
   the padding pulled back or the page becomes all air and no copy.
   ------------------------------------------------------------ */
.sec-head{margin-bottom:62px}
.sec-head .eyebrow{margin-bottom:20px;display:inline-block}
.sec-head .sec-title{margin-bottom:22px}

@media(max-width:1100px){
  .sec{padding:112px 0}
  .sec-head{margin-bottom:52px}
}
@media(max-width:780px){
  .sec{padding:84px 0}
  .sec-head{margin-bottom:40px}
  body{font-size:15.5px;line-height:1.74}
  .sec-head p{font-size:15.5px}
  .hero p{font-size:16px}
  .eyebrow{letter-spacing:.24em;font-size:10px}
}
@media(max-width:480px){
  .sec{padding:68px 0}
  .hero h1{letter-spacing:-.02em}
}

/* Bodoni's hairlines disappear under a light-on-dark setting, so the
   display face gets a touch more weight wherever it sits on plum. */
.hero h1,.phero h1,.tw-vinora h3,.quote-sec .sec-title,
html[data-dark] .sec-title,html[data-dark] h1,html[data-dark] h2{
  font-weight:500
}
html[data-dark] .sec-title em,.hero h1 em{font-weight:400}

/* Optical sizing: Bodoni Moda ships an opsz axis — use it, so the
   large sizes get the high-contrast cut and small text stays legible. */
h1,.hero h1,.phero h1,.sec-title{font-variation-settings:'opsz' 96}
h3,h4,.faq button,.sf-q h3,.sm-step h3,.pr-card h3{font-variation-settings:'opsz' 16}