/* ============================================================
   Parents Night Out — design tokens
   Generated from Figma node 1:2 (artboard 1920px).
   Fluid scale interpolates between 390px and 1920px viewports.
   ============================================================ */

:root{
  /* --- palette --- */
  --pno-ink: #030828;
  --pno-ink-90: rgba(3,8,40,.9);
  --pno-accent: #b30a4b;
  --pno-cream: #f8eede;
  --pno-gold: #f4c36a;
  --pno-ground: #fffdf9;
  --pno-slate: #68728a;
  --pno-peach: #f0d8b5;
  --pno-sky: #7bb4ff;
  --pno-white: #ffffff;
  --pno-hairline: rgba(3,8,40,.14);
  --pno-on-dark-70: rgba(255,255,255,.75);
  --pno-on-dark-55: rgba(255,255,255,.55);
  --pno-glow: 0 12px 15px rgba(179,10,75,.28);
  --pno-card-shadow: 0 12px 32px 0 rgba(3,8,40,.07);
  --pno-lift: 0 24px 70px 0 rgba(3,8,40,.13);

  /* --- type --- */
  --pno-display: "Oswald", "Arial Narrow", sans-serif;
  --pno-text: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(40px, 15.020px + 6.4052vw, 138px);
  --fs-h2: clamp(32px, 19.255px + 3.2680vw, 82px);
  --fs-h2-alt: clamp(30px, 21.333px + 2.2222vw, 64px);
  --fs-display-80: clamp(32px, 19.765px + 3.1373vw, 80px);
  --fs-quote: clamp(26px, 16.824px + 2.3529vw, 62px);
  --fs-num-step: clamp(32px, 28.431px + 0.9150vw, 46px);
  --fs-h3-partner: clamp(26px, 22.431px + 0.9150vw, 40px);
  --fs-h3-card: clamp(22px, 19.706px + 0.5882vw, 31px);
  --fs-h3-step: clamp(22px, 20.216px + 0.4575vw, 29px);
  --fs-date: clamp(22px, 20.725px + 0.3268vw, 27px);
  --fs-price: clamp(20px, 18.725px + 0.3268vw, 25px);
  --fs-feature: clamp(18px, 16.725px + 0.3268vw, 23px);
  --fs-nav: clamp(17px, 16.235px + 0.1961vw, 20px);
  --fs-footer-h: clamp(17px, 16.490px + 0.1307vw, 19px);
  --fs-lead: clamp(16px, 15.490px + 0.1307vw, 18px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-kicker: 12px;
  --fs-micro: 11px;
  --fs-chip: 10px;
  --fs-nano: 9px;
  --fs-watermark: clamp(84px, 59.529px + 6.2745vw, 180px);
  --fs-points: clamp(34px, 27.882px + 1.5686vw, 58px);
  --fs-quote-glyph: clamp(96px, 66.941px + 7.4510vw, 210px);

  /* --- rhythm --- */
  --sp-section-y: clamp(64px, 52.275px + 3.0065vw, 110px);
  --sp-gutter: clamp(20px, -5.490px + 6.5359vw, 120px);
  --sp-col-gap: clamp(32px, 19.765px + 3.1373vw, 80px);
  --sp-footer-gap: clamp(40px, 32.353px + 1.9608vw, 70px);
  --sp-card-gap: clamp(20px, 14.902px + 1.3072vw, 40px);
  --sp-grid-gap: clamp(16px, 14.471px + 0.3922vw, 22px);
  --pno-container: 1180px;
  --lh-body: 1.65;
  --lh-display: .94;

  /* --- radius --- */
  --r-pill: 999px;
  --r-card: 24px;
  --r-form: 22px;
  --r-rewards: 28px;
  --r-band: 30px;
  --r-badge: 13px;
}

/* ============================================================
   Self-hosted variable fonts
   ============================================================ */
@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald-latin.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
  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;
}
@font-face{
  font-family:"Oswald";
  src:url("fonts/oswald-latin-ext.woff2") format("woff2");
  font-weight:200 700; font-style:normal; font-display:swap;
  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;
}
@font-face{
  font-family:"DM Sans";
  src:url("fonts/dmsans-latin.woff2") format("woff2");
  font-weight:100 1000; font-style:normal; font-display:swap;
  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;
}
@font-face{
  font-family:"DM Sans";
  src:url("fonts/dmsans-latin-ext.woff2") format("woff2");
  font-weight:100 1000; font-style:normal; font-display:swap;
  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;
}

/* ============================================================
   Base
   ============================================================ */
body{
  font-family:var(--pno-text);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--pno-ink);
  background:var(--pno-ground);
  font-variation-settings:"opsz" 14;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.pno-display{
  font-family:var(--pno-display);
  font-weight:700;
  line-height:var(--lh-display);
  text-transform:uppercase;
  margin:0;
}
p{margin:0}
img{max-width:100%;height:auto}

/* ============================================================
   Fluid type utilities — applied to Elementor widgets by class.
   Elementor still owns colour, spacing and layout in the UI;
   these own the fluid size so there are no breakpoint jumps.
   ============================================================ */
.pno-h1 .elementor-heading-title,.pno-h1{font-size:var(--fs-h1);letter-spacing:-.02em;line-height:.94}
.pno-h2 .elementor-heading-title,.pno-h2{font-size:var(--fs-h2);letter-spacing:-.02em;line-height:.94}
.pno-h2-alt .elementor-heading-title,.pno-h2-alt{font-size:var(--fs-h2-alt);letter-spacing:-.015em;line-height:1}
.pno-d80 .elementor-heading-title,.pno-d80{font-size:var(--fs-display-80);letter-spacing:.01em;line-height:.94}
.pno-h3-partner .elementor-heading-title,.pno-h3-partner{font-size:var(--fs-h3-partner);letter-spacing:-.02em;line-height:.94}
.pno-h3-card .elementor-heading-title,.pno-h3-card{font-size:var(--fs-h3-card);letter-spacing:-.02em;line-height:1.02}
.pno-h3-step .elementor-heading-title,.pno-h3-step{font-size:var(--fs-h3-step);letter-spacing:-.02em;line-height:.94}
.pno-quote .elementor-heading-title,.pno-quote{font-size:var(--fs-quote);line-height:1.04;font-weight:500}
.pno-feature .elementor-heading-title,.pno-feature{font-size:var(--fs-feature);letter-spacing:-.01em}
.pno-footer-h .elementor-heading-title,.pno-footer-h{font-size:var(--fs-footer-h);letter-spacing:.02em}
.pno-lead,.pno-lead p{font-size:var(--fs-lead);line-height:var(--lh-body)}
.pno-body,.pno-body p{font-size:var(--fs-body);line-height:var(--lh-body)}
.pno-sm,.pno-sm p{font-size:var(--fs-sm);line-height:var(--lh-body)}
.pno-xs,.pno-xs p{font-size:var(--fs-xs);line-height:var(--lh-body)}

/* Eyebrow / kicker — 12px uppercase with a 1.92px track and a rule */
.pno-kicker{
  font-family:var(--pno-text);font-size:var(--fs-kicker);font-weight:800;
  text-transform:uppercase;letter-spacing:1.92px;line-height:1;
}
.pno-kicker--rule{display:inline-flex;align-items:center;gap:10px}
.pno-kicker--rule::before{content:"";width:34px;height:2px;background:currentColor;flex:0 0 34px}

/* Chips — 10px uppercase, 1px track */
.pno-chip{
  font-family:var(--pno-text);font-size:var(--fs-chip);font-weight:800;
  text-transform:uppercase;letter-spacing:1px;line-height:1;
  padding:7px 9px;border-radius:var(--r-pill);display:inline-block;
}

/* ============================================================
   Buttons — one system. The Figma grey "sticker" button is
   normalised onto the pill scale as a secondary variant.
   ============================================================ */
.pno-btn .elementor-button{
  font-family:var(--pno-text);font-size:var(--fs-body);font-weight:700;
  padding:15px 22px;border-radius:var(--r-pill);
  background:var(--pno-accent);color:#fff;border:0;
  box-shadow:var(--pno-glow);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.pno-btn .elementor-button:hover,.pno-btn .elementor-button:focus-visible{
  background:#960840;transform:translateY(-2px);
  box-shadow:0 16px 22px rgba(179,10,75,.34);color:#fff;
}
.pno-btn--ghost .elementor-button{
  background:transparent;color:var(--pno-ink);
  border:2px solid var(--pno-ink);box-shadow:none;
}
.pno-btn--ghost .elementor-button:hover{background:var(--pno-ink);color:#fff;transform:translateY(-2px)}
.pno-btn--light .elementor-button{background:#fff;color:var(--pno-ink);box-shadow:0 12px 24px rgba(3,8,40,.14)}
.pno-btn--light .elementor-button:hover{background:var(--pno-cream);color:var(--pno-ink)}

/* ============================================================
   Layout
   ============================================================ */
.pno-section{padding-block:var(--sp-section-y)}
.pno-section--dark{background:var(--pno-ink);color:#fff}
.pno-section--cream{background:var(--pno-cream)}
.pno-section--ground{background:var(--pno-ground)}
.pno-section--gold{background:var(--pno-gold)}
.pno-section--dark h1,.pno-section--dark h2,.pno-section--dark h3{color:#fff}

/* ============================================================
   Accessibility & motion
   ============================================================ */
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--pno-accent);outline-offset:3px;border-radius:4px;
}
.pno-section--dark :where(a,button):focus-visible{outline-color:var(--pno-gold)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.pno-skip-link{position:absolute;left:-9999px}
.pno-skip-link:focus{left:16px;top:16px;z-index:9999;background:var(--pno-ink);color:#fff;padding:12px 18px;border-radius:var(--r-pill)}