/* ============================================================
   Sonar design system — one set of components, two skins.
   .skin-lux   ivory + gold + the couple's colour  (guests, clients)
   .skin-night black + teal                        (marketing, admin, DJ)
   ============================================================ */
/* The hidden attribute always wins over a class that sets display */
[hidden]{display:none!important}

:root{
  --gold:#b08d57; --gold-soft:#d9c49a;
  --p:#40807f;            /* couple / brand accent, overridden per event */
  --a:#0f0f12;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --shadow:0 10px 40px rgba(17,17,20,.08);
  --maxw:1080px;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --serif:'Cormorant Garamond','Playfair Display',Georgia,serif;
}
.skin-lux{
  --bg:#faf8f5; --bg-2:#ffffff; --ink:#1c1b19; --ink-2:#5d5a54; --ink-3:#8d8880;
  --line:#e8e3da; --card:#ffffff; --field:#ffffff; --field-line:#ded7cc;
}
.skin-night{
  --bg:#050505; --bg-2:#0d0d0f; --ink:#f4f4f5; --ink-2:#a1a1aa; --ink-3:#71717a;
  --line:#24242a; --card:#101014; --field:#15151b; --field-line:#2d2d36;
  --shadow:0 10px 40px rgba(0,0,0,.5);
}
.skin-lux, .skin-night{ background:var(--bg); color:var(--ink); }
body.skin-lux, body.skin-night{ margin:0; font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; }

/* ---------- type ---------- */
.skin-lux h1,.skin-lux h2,.skin-lux .display{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.12}
.skin-lux h1{font-size:clamp(2.4rem,6vw,4rem)}
.skin-lux h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.skin-night h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:600;line-height:1.15}
.skin-night h2{font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:600}
h3{font-size:1.15rem;margin:0 0 .4em;font-weight:600}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--ink-3);margin:0 0 1em}
.skin-lux .eyebrow{color:var(--gold)}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch;margin:0 auto 1em}
.muted{color:var(--ink-3)}
.rule{width:64px;height:1px;background:var(--gold);margin:22px auto;opacity:.8}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.section{padding:clamp(40px,7vw,84px) 0}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.center{text-align:center}

/* ---------- app bar ---------- */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:0 18px;height:62px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.skin-lux .bar{background:rgba(255,255,255,.88);backdrop-filter:blur(10px)}
.skin-night .bar{background:rgba(0,0,0,.88);backdrop-filter:blur(10px)}
.bar .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.bar .brand img{height:26px}
.skin-lux .bar .brand img{filter:invert(1)}
.bar .tag{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.bar nav{display:flex;align-items:center;gap:6px;font-size:.88rem}
.bar nav a{color:var(--ink-2);text-decoration:none;padding:7px 10px;border-radius:999px}
.bar nav a:hover{color:var(--ink)}

/* Narrow screens: the bar's links scroll on their own instead of
   stretching the page. min-width:0 is what stops a flex child forcing it wide. */
@media (max-width:760px){
  .bar{padding:0 12px;gap:10px}
  .bar .tag{display:none}
  .bar .brand{flex:0 0 auto}
  .bar .brand img{height:22px}
  /* scroll from the left: flex-end makes overflowing content unreachable */
  .bar nav{flex:1 1 auto;min-width:0;justify-content:flex-start;overflow-x:auto;
    overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent)}
  .bar nav::-webkit-scrollbar{display:none}
  .bar nav a{padding:7px 9px;white-space:nowrap}
  .bar nav .btn{white-space:nowrap}
}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.skin-lux .card{box-shadow:var(--shadow)}
.card .body{padding:22px}
a.card{text-decoration:none;color:inherit;transition:transform .18s,border-color .18s,box-shadow .18s}
a.card:hover{transform:translateY(-3px);border-color:var(--p)}
.tile{text-align:center}
.tile .big{font-size:2rem;font-weight:700;color:var(--p);line-height:1.1}
.skin-lux .tile .big{font-family:var(--serif);font-size:2.4rem;color:var(--ink)}
.tile .lbl{color:var(--ink-3);font-size:.88rem}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:13px 30px;border-radius:999px;border:1.5px solid var(--p);
  background:transparent;color:var(--p);text-decoration:none;font:600 .95rem/1 var(--sans);
  letter-spacing:.08em;cursor:pointer;transition:.18s}
.btn:hover{background:var(--p);color:#fff}
.btn.solid{background:var(--p);color:#fff}
.btn.solid:hover{filter:brightness(1.08)}
.btn.gold{border-color:var(--gold);color:var(--gold)}
.btn.gold:hover{background:var(--gold);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink-2)}
.btn.ghost:hover{background:var(--line);color:var(--ink)}
.btn.sm{padding:9px 18px;font-size:.84rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.block{display:block;width:100%;text-align:center}

/* ---------- forms ---------- */
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:.8rem;color:var(--ink-3);letter-spacing:.04em}
input,textarea,select{font:inherit;font-size:16px;color:var(--ink);background:var(--field);
  border:1px solid var(--field-line);border-radius:var(--r-sm);padding:12px 14px;width:100%;box-sizing:border-box}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--p)}
.filepick{display:block;padding:14px;border:1px dashed var(--field-line);border-radius:var(--r-sm);
  text-align:center;color:var(--ink-2);cursor:pointer}
.filepick input{display:none}

/* ---------- pills / tabs ---------- */
.pill{display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.pill.accent{border-color:var(--p);color:var(--p)}
.pill.gold{border-color:var(--gold);color:var(--gold)}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-3);
  padding:13px 14px;font:600 .92rem var(--sans);cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--ink);border-color:var(--p)}
.segmented{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.segmented[hidden]{display:none}
.segmented button{flex:1 1 130px;padding:13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font:700 .95rem var(--sans);cursor:pointer}
.segmented button.on{background:var(--p);border-color:var(--p);color:#fff}

/* ---------- misc ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 18px;border-radius:999px;font-size:.9rem;opacity:0;transition:.25s;pointer-events:none;z-index:90}
.toast.on{opacity:1}
.savechip{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px;font-size:.82rem;color:var(--ink-3);box-shadow:var(--shadow)}
.savechip.ok{color:#2f7d54;border-color:#bfe3cd}
.savechip.err{color:#b4312b;border-color:#f0c4c1}
.skin-night .savechip.ok{color:#86efac;border-color:#166534}
.skin-night .savechip.err{color:#fca5a5;border-color:#7f1d1d}
img{max-width:100%}