/* =========================================================================
   MERIDIAN STUDIO — original premium automotive-venue design system
   Monochrome (ink / paper / warm grey) + single tweakable accent.
   High-contrast editorial display serif + refined grotesk.
   ========================================================================= */

/* Free fallbacks that approximate the Mercedes-Benz Corpo type system. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Saira+Condensed:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   Mercedes-Benz Corpo (licensed brand typeface).
   The .woff2 files are NOT bundled — they are provided by Mercedes-Benz to
   authorised dealers / agencies. Drop them into /public/fonts/ (see that
   folder's README) and these rules pick them up automatically. Until then the
   free fallbacks above (Inter / Saira Condensed) render.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"MB Corpo S Text Web"; font-style:normal; font-weight:400; font-display:swap;
  src:local("MB Corpo S Text Web"), url("/fonts/MBCorpoSTextWeb-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"MB Corpo S Text Web"; font-style:normal; font-weight:500; font-display:swap;
  src:local("MB Corpo S Text Web Light"), url("/fonts/MBCorpoSTextWeb-Light.woff2") format("woff2");
}
@font-face{
  font-family:"MB Corpo S Text Web"; font-style:normal; font-weight:700; font-display:swap;
  src:local("MB Corpo S Text Web Bold"), url("/fonts/MBCorpoSTextWeb-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"MB Corpo A Title Cond Web"; font-style:normal; font-weight:400 700; font-display:swap;
  src:local("MB Corpo A Title Cond Web"), url("/fonts/MBCorpoATitleCondWeb-Regular.woff2") format("woff2");
}

:root{
  /* monochrome base */
  --ink:#0a0a0b;
  --ink-2:#1b1b1d;
  --paper:#ffffff;
  --paper-2:#f4f3f1;          /* warm grey section */
  --paper-3:#ebe9e5;
  --grey:#6e6b66;             /* muted body */
  --grey-2:#a6a39d;           /* faint */
  --line:rgba(10,10,11,.12);
  --line-soft:rgba(10,10,11,.07);

  /* accent — tweakable */
  --accent:#0a66d6;
  --accent-deep:#0a4fa6;
  --on-accent:#ffffff;

  /* status */
  --ok:#2f7d52;
  --warn:#b8742a;
  --full:#9a9a9a;

  /* type — Mercedes-Benz Corpo with free fallbacks */
  --display:"MB Corpo A Title Cond Web","Saira Condensed","Arial Narrow",Inter,sans-serif;
  --sans:"MB Corpo S Text Web","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display-active:var(--display);   /* swapped by [data-type=sans] */

  /* layout */
  --maxw:1280px;
  --gut:clamp(20px,5vw,64px);
  --nav-h:70px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* type tweak: all-sans display */
[data-type="sans"]{ --display-active:var(--sans); }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; overflow-x:hidden;}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* ---- typographic primitives ---- */
.display{
  font-family:var(--display-active);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.005em;
}
[data-type="sans"] .display{ font-weight:600; letter-spacing:-.02em; }

.h-hero{ font-size:clamp(2.6rem,6.2vw,5.4rem); }
.h1{ font-size:clamp(2rem,4.4vw,3.4rem); }
.h2{ font-size:clamp(1.6rem,3vw,2.5rem); }
.h3{ font-size:clamp(1.25rem,2vw,1.7rem); }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--grey);
}
.lead{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--grey); line-height:1.62; }
.muted{ color:var(--grey); }
.faint{ color:var(--grey-2); }

/* ---- layout helpers ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1480px; margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(60px,9vw,130px); }
.section-tight{ padding-block:clamp(40px,6vw,80px); }
.bg-warm{ background:var(--paper-2); }
.bg-ink{ background:var(--ink); color:var(--paper); }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.5rem; }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* =========================================================================
   NAV
   ========================================================================= */
.topband{
  background:var(--ink); color:#cfcfcf;
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  text-align:center; padding:7px 0; font-weight:500;
}
.topband b{ color:#fff; font-weight:600; }

.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mark{ width:30px; height:30px; }
.brand .wordmark{
  font-family:var(--display-active); font-size:1.18rem; font-weight:600;
  letter-spacing:.04em; white-space:nowrap; line-height:1.05;
}
.brand .wordmark span{ font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.3em; display:block; color:var(--grey); margin-top:1px; white-space:nowrap; }
@media(max-width:560px){
  .brand{ gap:8px; }
  .brand .mark{ width:24px; height:24px; }
  .brand .wordmark{ font-size:.92rem; letter-spacing:.01em; }
  .brand .wordmark span{ font-size:.5rem; letter-spacing:.2em; }
  .nav-right{ gap:12px; }
  .nav-account span{ display:none; }   /* keep the icon/avatar, drop the label */
  .lang{ font-size:.78rem; }
}
@media(max-width:380px){
  .brand .wordmark span{ display:none; }   /* tightest screens: wordmark only */
}

.nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); padding:6px 0; position:relative; white-space:nowrap;
  transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav-links a:hover{ color:var(--accent); }
.nav-links a:hover::after, .nav-links a[aria-current]::after{ right:0; }
.nav-links a[aria-current]{ color:var(--accent); }

.nav-right{ display:flex; align-items:center; gap:18px; }
.lang{ font-size:.68rem; font-weight:600; letter-spacing:.12em; color:var(--grey); display:flex; gap:6px; }
.lang b{ color:var(--ink); }
.nav-account{ display:flex; align-items:center; gap:9px; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.nav-account .avatar{
  width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:.7rem; letter-spacing:.04em;
}
.nav-burger{ display:none; background:none; border:0; padding:6px; }
.nav-burger span{ display:block; width:22px; height:1.6px; background:var(--ink); margin:4px 0; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  padding:15px 30px; border:1px solid transparent; background:var(--accent); color:var(--on-accent);
  cursor:pointer; transition:.3s var(--ease); border-radius:1px;
}
.btn:hover{ background:var(--accent-deep); transform:translateY(-1px); }
.btn--lg{ padding:18px 40px; }
.btn--ghost{ background:transparent; border-color:currentColor; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--on-dark{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn--on-dark:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--dark{ background:var(--ink); color:var(--paper); }
.btn--dark:hover{ background:var(--ink-2); }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:3px;
  transition:.25s var(--ease);
}
.link-arrow:hover{ color:var(--accent); border-color:var(--accent); gap:14px; }

/* =========================================================================
   BADGES & TAGS
   ========================================================================= */
.tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.6rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:6px 11px; background:rgba(255,255,255,.92); color:var(--ink); border-radius:1px;
  backdrop-filter:blur(4px);
}
.tag--ink{ background:rgba(10,10,11,.7); color:#fff; }

.rbadge{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:1px; border:1px solid var(--line);
}
.rbadge .dot{ flex:0 0 auto; }
.rbadge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.rbadge--walkin{ color:var(--grey); border-color:var(--line); }
.rbadge--reserve{ color:var(--accent); border-color:color-mix(in oklab,var(--accent),transparent 60%); }
.rbadge--paid{ color:var(--ink); border-color:var(--ink); }

.pill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:var(--paper-3); color:var(--grey);
}
.pill--ok{ background:color-mix(in oklab,var(--ok),white 80%); color:var(--ok); }
.pill--warn{ background:color-mix(in oklab,var(--warn),white 78%); color:var(--warn); }
.pill--full{ background:var(--paper-3); color:var(--full); }

/* =========================================================================
   CAPACITY METER
   ========================================================================= */
.cap{ display:flex; flex-direction:column; gap:7px; }
.cap-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:.72rem; letter-spacing:.04em; }
.cap-head b{ font-weight:600; }
.cap-track{ height:3px; background:var(--paper-3); border-radius:2px; overflow:hidden; }
.cap-fill{ height:100%; background:var(--accent); border-radius:2px; transition:width .5s var(--ease); }
.cap-fill.is-warn{ background:var(--warn); }
.cap-fill.is-full{ background:var(--full); }

/* =========================================================================
   EVENT CARD
   ========================================================================= */
.cards{ display:grid; gap:2px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.ecard{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line-soft);
  overflow:hidden; transition:.4s var(--ease);
}
.ecard:hover{ box-shadow:0 30px 60px -38px rgba(0,0,0,.45); transform:translateY(-3px); }
.ecard-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paper-3); }
.ecard-media image-slot{ width:100%; height:100%; display:block; }
.ecard-media .tag{ position:absolute; top:14px; left:14px; }
.ecard-media .cap-corner{ position:absolute; bottom:14px; left:14px; right:14px; }
.ecard:hover .ecard-media .zoomable{ transform:scale(1.05); }
.zoomable{ transition:transform 1.1s var(--ease); }

.ecard-body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:12px; flex:1; }
.ecard-meta{ display:flex; align-items:center; gap:10px; font-size:.7rem; letter-spacing:.1em; color:var(--grey); text-transform:uppercase; font-weight:600; }
.ecard-title{ font-family:var(--display-active); font-size:1.45rem; line-height:1.1; font-weight:500; }
[data-type="sans"] .ecard-title{ font-weight:600; letter-spacing:-.01em; }
.ecard-foot{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:6px; }

/* sold out overlay */
.ecard.is-full .ecard-media::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.62);
}
.soldout-stamp{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
}
.soldout-stamp span{
  font-size:.7rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  border:1px solid var(--ink); color:var(--ink); padding:9px 18px; background:rgba(255,255,255,.7);
}

/* =========================================================================
   FORMS
   ========================================================================= */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  border:0; border-bottom:1.5px solid var(--line); background:transparent;
  padding:11px 2px; transition:border-color .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field input::placeholder{ color:var(--grey-2); }
.field-row{ display:flex; gap:18px; }
.field-row .field{ flex:1; }
.checkrow{ display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:var(--grey); }
.checkrow input{ margin-top:3px; accent-color:var(--accent); width:16px; height:16px; }
.field textarea{ resize:vertical; min-height:54px; line-height:1.5; }
.err{ color:var(--full); font-size:.78rem; min-height:1.1em; margin:-4px 0 4px; }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-veil{
  position:fixed; inset:0; z-index:200; background:rgba(10,10,11,.55);
  backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
}
.modal-veil.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--paper); width:min(620px,100%); max-height:94vh; overflow:auto;
  transform:translateY(40px); transition:transform .4s var(--ease);
  border-radius:2px 2px 0 0;
}
@media(min-width:720px){ .modal-veil{ align-items:center; } .modal{ border-radius:2px; } }
.modal-veil.is-open .modal{ transform:none; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:24px 32px; border-bottom:1px solid var(--line-soft); position:sticky; top:0; background:var(--paper); z-index:2; }
.modal-body{ padding:30px 32px 36px; }
.modal-close{ background:none; border:0; font-size:1.4rem; line-height:1; color:var(--grey); padding:4px; }
.modal-close:hover{ color:var(--ink); }

/* steps */
.steps{ display:flex; gap:0; margin-bottom:28px; }
.step{ flex:1; display:flex; flex-direction:column; gap:8px; }
.step .bar{ height:2px; background:var(--paper-3); }
.step.is-active .bar, .step.is-done .bar{ background:var(--accent); }
.step .lbl{ font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-2); }
.step.is-active .lbl, .step.is-done .lbl{ color:var(--ink); }

/* guest list */
.guest-row{ display:flex; gap:14px; align-items:flex-end; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.guest-row .field{ margin:0; }
.guest-remove{ background:none; border:1px solid var(--line); width:42px; height:42px; flex:0 0 auto; color:var(--grey); border-radius:1px; }
.guest-remove:hover{ border-color:var(--ink); color:var(--ink); }
.attendee-counter{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:var(--paper-2); margin-top:18px; }
.attendee-counter b{ font-family:var(--display-active); font-size:1.6rem; font-weight:600; }

/* =========================================================================
   QR
   ========================================================================= */
.qr{ width:180px; height:180px; background:#fff; padding:12px; border:1px solid var(--line); }
.qr canvas{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.qr--lg{ width:230px; height:230px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer{ background:var(--ink); color:#bdbdbd; padding-block:clamp(50px,7vw,90px); }
.footer .mark-lg{ width:46px; height:46px; margin-inline:auto; }
.footer-name{ font-family:var(--display-active); color:#fff; font-size:1.5rem; text-align:center; margin:18px 0 30px; letter-spacing:.02em; }
.footer-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:38px; list-style:none; padding:0; margin:0 0 40px; }
.footer-links a{ font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#cfcfcf; transition:color .25s; }
.footer-links a:hover{ color:#fff; }
.footer-base{ border-top:1px solid rgba(255,255,255,.12); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:.7rem; letter-spacing:.06em; color:#7c7c7c; }
.footer-base .socials{ display:flex; gap:14px; }
.footer-base .socials a{ width:34px; height:34px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:grid; place-items:center; color:#cfcfcf; transition:.25s; }
.footer-base .socials a:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* =========================================================================
   TWEAKS PANEL (host-toggled)
   ========================================================================= */
#tweaks{
  position:fixed; right:20px; bottom:20px; z-index:500; width:288px;
  background:#15151a; color:#eee; border:1px solid rgba(255,255,255,.1);
  border-radius:8px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  font-family:var(--sans); display:none; overflow:hidden;
}
#tweaks.is-open{ display:block; }
.tw-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08); cursor:move; }
.tw-head h4{ margin:0; font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
.tw-head button{ background:none; border:0; color:#999; font-size:1.1rem; line-height:1; }
.tw-body{ padding:16px; display:flex; flex-direction:column; gap:18px; max-height:70vh; overflow:auto; }
.tw-sec > span{ font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#888; display:block; margin-bottom:9px; }
.tw-swatches{ display:flex; gap:9px; }
.tw-sw{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:.2s; }
.tw-sw.is-on{ border-color:#fff; transform:scale(1.08); }
.tw-seg{ display:flex; background:#0c0c10; border:1px solid rgba(255,255,255,.1); border-radius:5px; overflow:hidden; }
.tw-seg button{ flex:1; background:none; border:0; color:#999; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:9px 4px; }
.tw-seg button.is-on{ background:#2a2a32; color:#fff; }

/* =========================================================================
   UTIL / REVEAL
   ========================================================================= */
/* Reveal: visible by default. Only below-fold elements get .pending (hidden),
   then .inview on scroll. Above-fold content is never hidden, so it shows in
   any context (capture/print/throttled iframe). A JS failsafe clears anything stuck. */
.reveal.pending{ opacity:0; transform:translateY(22px); }
.reveal.inview{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }
@media (prefers-reduced-motion: reduce){ .reveal.pending{ opacity:1; transform:none; } }
.empty{ text-align:center; padding:70px 20px; border:1px dashed var(--line); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:980px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
}
@media(max-width:620px){
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .field-row{ flex-direction:column; gap:0; }
  .footer-base{ justify-content:center; text-align:center; }
}