/* The Dancefloor Guy — shared stylesheet (multi-page) */

@font-face{font-family:'Playfair';src:url('assets/fonts/PlayfairDisplayVF.ttf') format('truetype-variations');font-weight:400 900;font-display:swap}
@font-face{font-family:'Jost';src:url('assets/fonts/JostVF.ttf') format('truetype-variations');font-weight:300 800;font-display:swap}

:root{
  --bone:#F6F2EA; --bone-2:#EDE7DB; --paper:#FFFDF9;
  --ink:#16130F; --ink-2:#5E564A; --ink-3:#8B8274;
  --gold:#A8802F; --gold-lt:#D9A441; --espresso:#1B1610;
  --hair:rgba(22,19,15,.14);
  --measure:62ch;
  --pad:clamp(20px,5vw,72px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;font-weight:400;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
main{flex:1}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Playfair',Georgia,serif;font-weight:700;margin:0;line-height:1.06;text-wrap:balance}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);width:100%}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.lede{font-size:19px;line-height:1.62;color:var(--ink-2);max-width:52ch;margin:0}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Jost',sans-serif;font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--ink);background:var(--ink);color:var(--bone);
  text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s
}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.btn.gold{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--espresso)}
.btn.gold:hover{background:transparent;color:var(--gold-lt)}
:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}

/* ---------- header ---------- */
/* Sticky by default. On the homepage the header sits over the dark scroll hero,
   so it starts transparent with light type and flips solid once past it. */
.top{position:sticky;top:0;z-index:60;background:rgba(246,242,234,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);transition:background .3s ease,border-color .3s ease}
.top[data-overlay]{position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.top[data-overlay].solid{background:rgba(246,242,234,.93);border-bottom-color:var(--hair);backdrop-filter:blur(10px)}
.logo-light{display:none}
.top[data-overlay]:not(.solid) .logo-dark{display:none}
.top[data-overlay]:not(.solid) .logo-light{display:block}
.top[data-overlay]:not(.solid) .nav a{color:rgba(246,242,234,.86)}
.top[data-overlay]:not(.solid) .nav a:hover,
.top[data-overlay]:not(.solid) .nav a[aria-current="page"]{color:#fff}
.top[data-overlay]:not(.solid) .btn{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--espresso)}
.top[data-overlay]:not(.solid) .burger{border-color:rgba(246,242,234,.4)}
.top[data-overlay]:not(.solid) .burger span{background:var(--bone)}
.top-in{display:flex;align-items:center;gap:28px;height:70px}
.mark{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.mark img{height:30px;width:auto;display:block}
@media(max-width:520px){.mark img{height:24px}}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--gold-lt)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--gold-lt)}
.top .btn{padding:12px 20px;font-size:12px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--hair);width:42px;height:38px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center}
.burger span{width:18px;height:1.5px;background:var(--ink);display:block}
@media(max-width:960px){
  .nav{position:fixed;inset:70px 0 auto;background:var(--bone);flex-direction:column;gap:0;padding:8px var(--pad) 22px;border-bottom:1px solid var(--hair);display:none}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--hair)}
  .burger{display:flex}
  .top .btn{display:none}
}

/* ---------- home hero ---------- */
.hero{padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,70px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(46px,7.4vw,88px);letter-spacing:-.015em}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--ink-3);letter-spacing:.02em}
.hero-fig{position:relative}
.hero-fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero-fig::after{content:'';position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--gold-lt);z-index:-1}
.hero-tag{position:absolute;left:0;bottom:0;transform:translate(-8%,38%);background:var(--espresso);color:var(--bone);padding:16px 20px;max-width:230px}
.hero-tag b{display:block;font-family:'Playfair',serif;font-size:27px;line-height:1;color:var(--gold-lt)}
.hero-tag span{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-fig{order:-1}
  .hero-fig img{aspect-ratio:3/2}
  .hero-fig::after{display:none}
  .hero-tag{position:static;transform:none;max-width:none;margin-top:14px;display:flex;align-items:baseline;gap:12px}
  .hero-tag span{margin-top:0}
}

/* ---------- interior page header ---------- */
.page-head{border-bottom:1px solid var(--hair);background:var(--bone-2);padding-block:clamp(42px,6vw,76px)}
.page-head h1{font-size:clamp(38px,5.6vw,62px)}
.page-head p{margin:18px 0 0;color:var(--ink-2);font-size:18px;max-width:56ch}
.crumb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.crumb a{text-decoration:none;color:var(--ink-3)}
.crumb a:hover{color:var(--gold)}

/* ---------- trust strip ---------- */
.strip{border-block:1px solid var(--hair);background:var(--bone-2)}
.strip-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair)}
.strip-i{background:var(--bone-2);padding:26px 20px;text-align:center}
.strip-i b{display:block;font-family:'Playfair',serif;font-size:23px;font-weight:700}
.strip-i span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
@media(max-width:760px){.strip-in{grid-template-columns:repeat(2,1fr)}}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,110px) 0}
.sec.alt{background:var(--bone-2)}
.sec-head{max-width:var(--measure);margin-bottom:clamp(30px,4vw,52px)}
.sec-head h2{font-size:clamp(31px,4.4vw,50px)}
.sec-head p{margin:16px 0 0;color:var(--ink-2);font-size:17.5px}

/* ---------- home teaser cards ---------- */
.tease{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.tcard{position:relative;overflow:hidden;text-decoration:none;color:#fff;display:block;aspect-ratio:4/5;background:var(--espresso)}
.tcard img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease;opacity:.72}
.tcard:hover img{transform:scale(1.05)}
.tcard-body{position:absolute;inset:auto 0 0 0;padding:34px 24px 24px;background:linear-gradient(transparent,rgba(12,9,6,.86))}
.tcard h3{font-size:25px;margin-bottom:8px}
.tcard span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt)}

/* ---------- floors / pricing ---------- */
.floors{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.floor{background:var(--paper);border:1px solid var(--hair);padding:34px 30px 30px;display:flex;flex-direction:column}
.floor.feat{background:var(--espresso);color:var(--bone);border-color:var(--espresso)}
.floor-tag{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.floor.feat .floor-tag{color:var(--gold-lt)}
.floor h3{font-size:27px;margin-bottom:6px}
.floor .size{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.floor .price{font-family:'Playfair',serif;font-size:46px;font-weight:700;margin:20px 0 4px;line-height:1}
.floor.feat .price{color:var(--gold-lt)}
.floor .price small{font-family:'Jost',sans-serif;font-size:13px;font-weight:400;letter-spacing:.06em;color:var(--ink-3);display:block;margin-top:8px}
.floor ul{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:11px;font-size:15.5px;color:var(--ink-2)}
.floor.feat ul{color:#C9C0B2}
.floor li{padding-left:20px;position:relative}
.floor li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold-lt)}
.floor .btn{margin-top:auto;width:100%}
.floor.feat .btn{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--espresso)}
.floor.feat .btn:hover{background:transparent;color:var(--gold-lt)}

/* ---------- add-ons ---------- */
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.addon{background:var(--bone);padding:26px 24px}
.addon h4{margin:0 0 8px;font-family:'Playfair',serif;font-size:19px;font-weight:700}
.addon p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--bone-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 15px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(12,9,6,.82))}
.g-a{grid-column:span 5;aspect-ratio:1}
.g-b{grid-column:span 4;aspect-ratio:1}
.g-c{grid-column:span 3;aspect-ratio:1}
.g-d{grid-column:span 6;aspect-ratio:16/11}
.g-e{grid-column:span 6;aspect-ratio:16/11}
@media(max-width:800px){
  .gal{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal figure{grid-column:span 1 !important;aspect-ratio:1 !important}
}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px;counter-reset:s}
.step{counter-increment:s;padding-top:26px;border-top:2px solid var(--ink)}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-family:'Playfair',serif;font-size:15px;font-weight:700;color:var(--gold);margin-bottom:12px;letter-spacing:.08em}
.step h3{font-size:21px;margin-bottom:9px}
.step p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.6}

/* ---------- dark band ---------- */
.band{background:var(--espresso);color:var(--bone);position:relative;overflow:hidden}
.band::before{content:'';position:absolute;inset:0;background:url('assets/hero/ballroom-backdrop.jpg') center/cover no-repeat;opacity:.20}
.band .wrap{position:relative;z-index:1;padding-block:clamp(58px,8vw,104px)}
.band h2{font-size:clamp(30px,4.2vw,46px);max-width:19ch}
.band p{color:#C9C0B2;max-width:50ch;margin:18px 0 0;font-size:17.5px}
.band-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.band .btn.ghost{color:var(--bone);border-color:rgba(246,242,234,.55)}
.band .btn.ghost:hover{background:var(--bone);color:var(--espresso);border-color:var(--bone)}

/* ---------- faq ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;font-family:'Playfair',serif;font-size:20px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:translateY(-70%) rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0 0 24px;color:var(--ink-2);max-width:66ch;font-size:16px}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:start}
.contact-card{background:var(--paper);border:1px solid var(--hair);padding:32px 30px}
.contact-card h3{font-size:22px;margin-bottom:14px}
.contact-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.contact-list li{display:flex;flex-direction:column;gap:3px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.contact-list li:last-child{border-bottom:0;padding-bottom:0}
.contact-list b{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.contact-list a,.contact-list span{font-size:17px;color:var(--ink);text-decoration:none}
.contact-list a:hover{color:var(--gold)}
.need{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-direction:column;gap:11px;color:var(--ink-2);font-size:15.5px}
.need li{padding-left:20px;position:relative}
.need li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold-lt)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hair);background:var(--bone-2)}
.foot{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:center;padding-block:34px;font-size:14px;color:var(--ink-2)}
.foot-brand{display:flex;flex-direction:column;gap:14px}
.foot-brand img{height:26px;width:auto;display:block}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px}
.foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--ink);border-bottom-color:var(--gold-lt)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ================= scroll hero (homepage) ================= */
/* Local tokens: the hero was authored against a darker ground and a
   brighter gold than the page palette, so it carries its own values. */
.scrollport{--ink:#0C0A08;--bone:#F6F2EA;--gold:#D9A441;--muted:#A79C8C;color:var(--bone)}
/* The pin: a tall scrollport whose inner stage sticks for the whole duration.
   Scroll distance (600vh) is the "length of film" — longer = slower scrub. */
.scrollport{position:relative;height:600vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Masking the render into the page. Straight from the taste notes: a hard
   rectangular edge reads as "embedded video", a vignette reads as part of the page. */
.vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(78% 68% at 50% 52%, transparent 24%, rgba(12,10,8,.72) 78%),
    linear-gradient(rgba(12,10,8,.92), transparent 22%),
    linear-gradient(transparent 74%, rgba(12,10,8,.94));
}

/* ---- choreographed copy ---- */
.beats{position:absolute;inset:0;z-index:3;pointer-events:none}
.beat{
  position:absolute;left:0;right:0;bottom:15vh;
  padding-inline:clamp(22px,6vw,84px);
  opacity:0;transform:translateY(16px);
  transition:opacity .5s ease,transform .5s ease;
  will-change:opacity,transform;
}
.beat.on{opacity:1;transform:none}
.beat .k{
  font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px
}
.beat h2{
  font-family:'Playfair',Georgia,serif;font-weight:700;
  font-size:clamp(32px,5.6vw,68px);line-height:1.04;margin:0;
  max-width:16ch;text-wrap:balance
}
.beat p{
  margin:16px 0 0;max-width:44ch;color:#CFC6B7;
  font-size:clamp(15px,1.6vw,18.5px);line-height:1.6
}
.beat .cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;pointer-events:auto;
  font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;background:var(--gold);color:#20180A;text-decoration:none;
  transition:background .2s,color .2s
}
.beat .cta:hover{background:var(--bone);color:var(--ink)}

/* ---- progress rail ---- */
.rail{
  position:absolute;right:clamp(16px,3vw,38px);top:50%;transform:translateY(-50%);
  width:1px;height:22vh;background:rgba(246,242,234,.18);z-index:3
}
.rail i{display:block;width:100%;height:0;background:var(--gold);transform-origin:top}

.cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  transition:opacity .4s ease
}
.cue span.ln{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}

.loading{
  position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  background:var(--ink);transition:opacity .7s ease
}
.loading.done{opacity:0;pointer-events:none}
.loading span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

/* graceful degradation — no WebGL, or user prefers reduced motion */
.fallback{position:absolute;inset:0;z-index:1;display:none;background:center/cover no-repeat url('assets/hero/ballroom-fallback.jpg')}
.no-webgl .fallback{display:block}
.no-webgl canvas{display:none}

@media (prefers-reduced-motion:reduce){
  .cue span.ln{animation:none}
}
/* ── Phone number: added 2026-08-06 ──────────────────────────────────────────
   A dance floor is a high-ticket, time-pressured purchase and people call to
   make it. The site previously had no phone number on any page and no tel:
   link anywhere — the only contact path was an outbound Google Form link.
   On mobile the number outranks the "Check your date" button, so below 560px
   the button gives up its space rather than the number wrapping. */
.tel{
  font-family:'Jost',sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;
  text-decoration:none;color:var(--ink);white-space:nowrap;flex-shrink:0;
  padding:3px 0;border-bottom:1px solid var(--gold-lt);transition:color .18s
}
.tel:hover{color:var(--gold)}
/* The overlay header sits on the dark hero and inverts the logo, nav, burger and
   button. Without a matching rule the number renders near-black on near-black and
   is invisible — which is how it first shipped. */
.top[data-overlay]:not(.solid) .tel{color:rgba(246,242,234,.92)}
.top[data-overlay]:not(.solid) .tel:hover{color:#fff}
@media(max-width:960px){
  .burger{margin-left:0;order:2}
  .tel{margin-left:auto;order:1}
}
/* Below 720px the wordmark is a 12.3:1 image and simply will not share a 70px bar
   with a phone number and a burger — measured at 375px the number overflowed the
   viewport by 88px and pushed the burger to x=491, off screen. So on phones the
   number leaves the header entirely and becomes a fixed tap-to-call bar pinned to
   the bottom of the viewport: thumb-reachable, visible on every scroll position,
   and it costs the header layout nothing. Same single element, no duplicate markup. */
@media(max-width:720px){
  .top .btn{display:none}
  .mark img,
  .top[data-overlay]:not(.solid) .logo-light{height:20px}
  .tel,
  .top[data-overlay]:not(.solid) .tel{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;
    display:flex;align-items:center;justify-content:center;gap:9px;
    height:calc(52px + env(safe-area-inset-bottom,0px));
    padding:0 0 env(safe-area-inset-bottom,0px);margin:0;order:0;
    background:var(--espresso);color:var(--bone);
    border:0;border-top:1px solid rgba(217,164,65,.5);
    font-size:16px;letter-spacing:.09em;text-transform:uppercase
  }
  .tel::before{content:"Call";font-weight:500;opacity:.72}
  .top[data-overlay]:not(.solid) .tel:hover,.tel:hover{color:var(--gold-lt)}
  /* keep the bar off the footer's last line */
  body{padding-bottom:52px}
}
.foot-tel{
  font-family:'Jost',sans-serif;font-size:19px;font-weight:600;letter-spacing:.03em;
  text-decoration:none;white-space:nowrap;align-self:flex-start;
  color:var(--ink)!important;border-bottom-color:var(--gold-lt)!important
}