/* tyler-and-izabella.com — ivory · black · gold · Italian-villa black-tie */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap');

:root{
  --ivory:#f7f2e8;
  --ivory-2:#efe7d6;
  --ink:#1b1a17;
  --ink-soft:#36332c;
  --gold:#b7943f;
  --gold-lt:#cdaf6a;
  --gold-pale:#e6d5a7;
  --line:rgba(183,148,63,.4);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;line-height:1.7}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.serif{font-family:var(--serif)}
.label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.42em;font-size:.66rem;
  font-weight:400;color:var(--gold)}
.center{text-align:center}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}

/* gold hairline divider with a center diamond */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto;max-width:340px}
.rule::before,.rule::after{content:'';height:1px;background:var(--line);flex:1}
.rule span{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:0 0 auto}

/* ---------- top nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:center;gap:34px;
  padding:26px 20px}
.nav a{font-family:var(--sans);text-transform:uppercase;letter-spacing:.28em;font-size:.64rem;
  color:rgba(247,242,232,.82);font-weight:400;transition:color .25s}
.nav a:hover{color:#fff}
@media(max-width:640px){.nav{gap:18px;flex-wrap:wrap}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--ivory);overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 32%;
  transform:scale(1.04)}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,11,9,.55) 0%,rgba(12,11,9,.28) 38%,rgba(12,11,9,.62) 100%)}
.hero .inner{position:relative;z-index:5;padding:40px 24px}
.hero .pre{color:var(--gold-pale)}
.hero h1{font-family:var(--serif);font-weight:500;line-height:.92;letter-spacing:.01em;
  font-size:clamp(3.6rem,13vw,9rem);margin:.18em 0 .12em;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 .amp{font-style:italic;font-weight:400;color:var(--gold-pale);display:block;
  font-size:.42em;margin:.04em 0}
.hero .meta{font-family:var(--sans);text-transform:uppercase;letter-spacing:.34em;
  font-size:clamp(.7rem,2.4vw,.92rem);color:rgba(247,242,232,.92);margin-top:.4em}
.hero .place{font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,3.4vw,1.5rem);
  color:var(--gold-pale);margin-top:.5em;letter-spacing:.02em}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  color:rgba(247,242,232,.7);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase}
.scroll-cue::after{content:'';display:block;width:1px;height:34px;background:rgba(247,242,232,.5);
  margin:10px auto 0}

/* countdown bar */
.countdown{display:flex;justify-content:center;gap:clamp(18px,6vw,56px);margin-top:2.2em}
.countdown .u{text-align:center}
.countdown .n{font-family:var(--serif);font-size:clamp(1.8rem,7vw,3rem);font-weight:500;line-height:1;
  color:#fff}
.countdown .l{font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;font-size:.56rem;
  color:var(--gold-pale);margin-top:.7em}

/* ---------- generic section ---------- */
section.band{padding:clamp(64px,11vw,128px) 0}
.band.dark{background:var(--ink);color:var(--ivory)}
.band.dark .label{color:var(--gold-lt)}
.eyebrow{margin-bottom:18px}
.band h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;
  margin:.1em 0 .5em}
.band p.lede{font-family:var(--serif);font-size:clamp(1.15rem,3vw,1.5rem);font-style:italic;
  color:var(--ink-soft);max-width:640px;margin:0 auto}
.band.dark p.lede{color:var(--ivory)}

/* venues */
.venues{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:54px}
@media(max-width:720px){.venues{grid-template-columns:1fr}}
.venue{background:rgba(247,242,232,.03);border:1px solid var(--line);padding:40px 34px;text-align:center}
.band:not(.dark) .venue{background:#fff;box-shadow:0 24px 60px -40px rgba(27,26,23,.4)}
.venue .k{margin-bottom:14px}
.venue h3{font-family:var(--serif);font-size:1.9rem;font-weight:500;line-height:1.15}
.venue .city{font-family:var(--serif);font-style:italic;color:var(--gold);margin-top:6px;font-size:1.15rem}
.venue .time{font-family:var(--sans);text-transform:uppercase;letter-spacing:.24em;font-size:.66rem;
  margin-top:18px;color:inherit;opacity:.75}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:54px}
.gallery figure{overflow:hidden;position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery .tall{grid-row:span 2}
.g1{grid-column:span 2;grid-row:span 2}
.g2{grid-column:span 2}.g3{grid-column:span 2}
.g4{grid-column:span 2}.g5{grid-column:span 2}.g6{grid-column:span 2}
@media(max-width:720px){.gallery{grid-template-columns:1fr 1fr}
  .g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1;grid-row:auto}}

/* CTA buttons */
.btn{display:inline-block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.26em;
  font-size:.72rem;font-weight:400;padding:16px 34px;border:1px solid var(--gold);color:var(--gold);
  background:transparent;cursor:pointer;transition:all .3s}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn.light{border-color:var(--ivory);color:var(--ivory)}
.btn.light:hover{background:var(--ivory);color:var(--ink)}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}

/* footer */
footer{background:var(--ink);color:rgba(247,242,232,.7);text-align:center;padding:56px 20px}
footer .names{font-family:var(--serif);font-style:italic;font-size:1.8rem;color:var(--gold-pale)}
footer .tag{font-family:var(--sans);letter-spacing:.3em;text-transform:uppercase;font-size:.6rem;
  margin-top:14px}

/* ---------- forms / cards (invite, chat, camera, admin) ---------- */
.card{background:#fff;border:1px solid var(--line);padding:36px;max-width:620px;margin:0 auto;
  box-shadow:0 30px 70px -50px rgba(27,26,23,.5)}
.field{margin:18px 0}
.field label{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:var(--gold);margin-bottom:8px}
input[type=text],input[type=email],input[type=number],input[type=password],textarea,select{
  width:100%;padding:13px 15px;border:1px solid var(--line);background:var(--ivory);
  font-family:var(--sans);font-size:1rem;color:var(--ink);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
textarea{min-height:96px;resize:vertical}
.toggle{display:flex;gap:12px}
.toggle button{flex:1;padding:15px;border:1px solid var(--line);background:var(--ivory);
  font-family:var(--sans);letter-spacing:.18em;text-transform:uppercase;font-size:.7rem;cursor:pointer}
.toggle button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.flash-msg{padding:14px;border:1px solid var(--gold);color:var(--gold);text-align:center;
  font-family:var(--serif);font-style:italic;font-size:1.1rem;margin-top:18px}

.page-pad{padding:clamp(48px,9vw,96px) 0}