@charset "utf-8";

/* ==========================================================================
   BITS EVENTS by Rony Bitar
   Elegant base, colourful experiences.
   Palette and typography come straight from the client's branding board.
   ========================================================================== */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/montserrat-normal-latin.woff2') format('woff2');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:'Montserrat';font-style:normal;font-weight:300 700;font-display:swap;src:url('../fonts/montserrat-normal-latin-ext.woff2') format('woff2');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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-normal-latin.woff2') format('woff2');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:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('../fonts/playfair-normal-latin-ext.woff2') format('woff2');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:'Playfair Display';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/playfair-italic-latin.woff2') format('woff2');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:'Parisienne';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/parisienne-normal-latin.woff2') format('woff2');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;}

:root{
  /* Branding board palette */
  --ivory:#F8F3ED;
  --cream:#F4EDE3;
  --beige:#EBDECD;
  --sand:#DFCDB4;
  --ink:#1A1710;
  --ink-2:#3B342A;
  --ink-3:#6C6153;
  --gold:#B58D48;
  --gold-lt:#E3BE65;

  /* Experience accents, drawn from the client's own photographs */
  --terracotta:#B2572F;
  --olive:#3E5C48;
  --wine:#8C2233;
  --amber:#E9A13B;
  --champagne:#D9C39A;

  --wa:#25843D;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Parisienne','Snell Roundhand',cursive;

  --gutter:clamp(1.25rem,5vw,5.5rem);
  --stack:clamp(4.5rem,10vw,9rem);
  --measure:38rem;

  --tilt-a:-2.4deg;
  --tilt-b:2deg;
  --tilt-c:-1.3deg;

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem;overflow-x:clip}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.95rem,.9rem + .2vw,1.0625rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:var(--ivory);padding:.7rem 1.2rem;transition:top .2s}
.skip:focus{top:1rem}

/* --------------------------------------------------------------- type ---- */

.eyebrow{
  font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--gold);margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.sec__head--center .eyebrow,.contact .eyebrow{justify-content:center}
.eyebrow__dot{width:4px;height:4px;border-radius:50%;background:currentColor;flex:none}

.script{font-family:var(--script);font-weight:400;color:var(--gold);letter-spacing:.01em;line-height:1.2}

/* -------------------------------------------------------------- buttons -- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.9rem;border:1px solid var(--ink);
  font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  text-decoration:none;line-height:1;position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease);
  background:transparent;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:-1;
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--ivory)}
.btn>*{position:relative}
.btn__ico{width:1.05em;height:1.05em;fill:currentColor;flex:none}

.btn--wa{border-color:var(--ink);background:var(--ink);color:var(--ivory)}
.btn--wa::before{background:var(--wa);transform:scaleX(0)}
.btn--wa:hover,.btn--wa:focus-visible{color:#fff;border-color:var(--wa)}
.sec--drama .btn--wa,.contact .btn--wa,.menu .btn--wa{background:var(--wa);border-color:var(--wa);color:#fff}
.sec--drama .btn--wa::before,.contact .btn--wa::before{background:var(--ivory)}
.sec--drama .btn--wa:hover,.contact .btn--wa:hover,
.sec--drama .btn--wa:focus-visible,.contact .btn--wa:focus-visible{color:var(--ink);border-color:var(--ivory)}
.btn--lg{padding:1.15rem 2.4rem;font-size:.76rem}
.btn--sm{padding:.7rem 1.15rem;font-size:.63rem;letter-spacing:.16em}
.btn--ghost{border-color:rgba(26,23,16,.28);color:var(--ink-2);align-self:flex-start}
.btn--light{border-color:rgba(248,243,237,.45);color:var(--ivory)}
.btn--light::before{background:var(--ivory)}
.btn--light:hover,.btn--light:focus-visible{color:var(--ink);border-color:var(--ivory)}

/* ------------------------------------------------------------ photographs -- */

.shot{margin:0}
.shot__frame{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:var(--ratio,3 / 4);
  background-size:cover;background-position:center;background-color:var(--beige);
}
.shot__frame img,.shot__frame video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
}
.shot__frame img.is-loaded,.shot__frame video.is-loaded{opacity:1}
.shot__cap{
  margin-top:.75rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.tilt-a{transform:rotate(var(--tilt-a))}
.tilt-b{transform:rotate(var(--tilt-b))}
.tilt-c{transform:rotate(var(--tilt-c))}

/* A few photographs are framed like a print, never all of them. */
.shot--print .shot__frame{
  border:.55rem solid var(--ivory);border-bottom-width:1.6rem;
  box-shadow:0 18px 40px -22px rgba(26,23,16,.5);
}

/* -------------------------------------------------------------- reveals -- */

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal.tilt-a.is-in{transform:rotate(var(--tilt-a))}
.reveal.tilt-b.is-in{transform:rotate(var(--tilt-b))}
.reveal.tilt-c.is-in{transform:rotate(var(--tilt-c))}

/* ----------------------------------------------------------------- deco -- */

.deco-ring{position:absolute;fill:none;stroke:var(--gold);stroke-width:.35;opacity:.5;pointer-events:none}
.deco-target{fill:none;stroke:var(--gold);stroke-width:1.6;width:2rem;height:2rem;opacity:.85}

/* ------------------------------------------------------------------ nav -- */

.nav{
  position:fixed;inset:0 0 auto;z-index:90;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:.85rem var(--gutter);
  background:rgba(248,243,237,0);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav.is-stuck{
  background:rgba(248,243,237,.94);
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 rgba(181,141,72,.28);
  padding-top:.55rem;padding-bottom:.55rem;
}
.nav__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.nav__logo{width:auto;height:2.9rem;transition:height .5s var(--ease)}
.nav.is-stuck .nav__logo{height:2.4rem}
.nav__word{
  font-family:var(--serif);font-size:1rem;letter-spacing:.2em;
  display:none;
}
.nav__links{display:none;gap:clamp(1.1rem,2.4vw,2.2rem)}
.nav__links a{
  text-decoration:none;font-size:.68rem;font-weight:500;letter-spacing:.2em;
  position:relative;padding-bottom:.3rem;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:none}

.nav__toggle{
  width:2.6rem;height:2.6rem;display:grid;place-content:center;gap:.42rem;flex:none;
}
.nav__toggle span:not(.sr-only){display:block;width:1.55rem;height:1px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(.215rem) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){transform:translateY(-.215rem) rotate(-45deg)}

/* The panel wipes down like a curtain and the links rise into place one after
   another, rather than the whole thing fading in at once. */
.menu{
  position:fixed;inset:0;z-index:85;background:var(--ivory);
  display:flex;flex-direction:column;justify-content:center;gap:2.5rem;
  padding:6rem var(--gutter) 3rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .62s cubic-bezier(.76,0,.24,1);
}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}

.menu__links{display:flex;flex-direction:column;gap:.4rem}
.menu__links a,.menu__foot{
  opacity:0;transform:translateY(1.6rem);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
  transition-delay:0ms;
}
.menu.is-open .menu__links a,.menu.is-open .menu__foot{
  opacity:1;transform:none;
  transition-delay:calc(200ms + var(--stagger,0) * 65ms);
}
.menu__links a{
  display:flex;align-items:baseline;gap:1rem;text-decoration:none;
  font-family:var(--serif);font-size:clamp(2rem,10vw,3rem);line-height:1.25;
  border-bottom:1px solid rgba(181,141,72,.24);padding:.5rem 0;
}
.menu__num{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;color:var(--gold)}
.menu__foot{display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start}
.menu__foot .script{font-size:2rem}
body.menu-open{overflow:hidden}

/* ----------------------------------------------------------------- hero -- */

.hero{
  position:relative;
  display:grid;
  gap:clamp(2rem,5vw,3rem);
  padding:8rem var(--gutter) clamp(4rem,9vw,7rem);
  min-height:100svh;
  align-content:center;
  background:
    radial-gradient(120% 90% at 85% 10%,rgba(227,190,101,.16),transparent 60%),
    var(--ivory);
}
.hero__text{max-width:34rem;position:relative;z-index:2}
.hero__title{
  font-size:clamp(3rem,13vw,7.2rem);
  line-height:.92;letter-spacing:-.025em;margin-bottom:1.6rem;
}
.hero__title em{
  font-style:italic;font-weight:400;color:var(--gold);
  display:inline-block;
}
.hero__lead{max-width:28rem;color:var(--ink-2);margin-bottom:2rem}
.hero__cta{margin-bottom:2.5rem}

/* A quiet circular chevron, echoing the wreath in the logo. No label. */
.hero__cue{display:inline-block;width:2.75rem;height:2.75rem}
.hero__cue svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1;overflow:visible}
.hero__cue path{stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.hero__cue circle{transition:opacity .45s var(--ease),transform .45s var(--ease);transform-origin:center}
.hero__cue path{transition:transform .45s var(--ease)}
.hero__cue:hover circle{opacity:.55;transform:scale(1.08)}
.hero__cue:hover path{transform:translateY(2px)}

.hero__media{position:relative;z-index:1}
.hero__photo .shot__frame{box-shadow:0 40px 80px -50px rgba(26,23,16,.75)}
.hero__snap{
  position:absolute;width:36%;left:-4%;bottom:-8%;
  z-index:3;
}
.hero__snap .shot__frame{
  border:.5rem solid var(--ivory);border-bottom-width:1.4rem;
  box-shadow:0 22px 46px -24px rgba(26,23,16,.65);
}
.hero__ring{width:min(52vw,26rem);height:min(52vw,26rem);right:-14%;top:-10%;opacity:.4}

/* ---------------------------------------------------------------- intro -- */

.intro{
  display:grid;gap:clamp(2.5rem,6vw,5rem);
  padding:var(--stack) var(--gutter);
  background:var(--cream);
}
.intro__heading{font-size:clamp(1.9rem,4.6vw,3.1rem);margin-bottom:1.6rem;max-width:16ch}
.intro__copy p{max-width:var(--measure);color:var(--ink-2)}
.intro__script{font-size:clamp(2.2rem,6vw,3.4rem);margin-top:1.8rem}
.intro__snaps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,2vw,1.4rem);align-items:center;
}
.intro__snap:nth-child(2){margin-top:clamp(1.5rem,5vw,3.5rem)}
.intro__snap:nth-child(3){margin-top:clamp(-1rem,-2vw,0rem)}
.intro__snap .shot__frame{aspect-ratio:3 / 4;box-shadow:0 20px 40px -30px rgba(26,23,16,.7)}

/* ------------------------------------------------------- experience index -- */

.idx{padding:var(--stack) var(--gutter);background:var(--ivory)}
.sec__head{max-width:52rem;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__index{
  font-family:var(--serif);font-size:.9rem;letter-spacing:.2em;color:var(--gold);margin:0 0 .6rem;
}
.sec__title{font-size:clamp(2.2rem,7vw,4.6rem);letter-spacing:.005em}
.sec__tagline{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2.4vw,1.4rem);
  color:var(--gold);margin:.9rem 0 1.2rem;
}
.sec__intro{max-width:var(--measure);color:var(--ink-2)}
.sec__head--center .sec__intro{margin-inline:auto}

.idx__list{border-top:1px solid rgba(181,141,72,.35)}
.idx__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(.9rem,3vw,2rem);
  padding:clamp(1.3rem,3.4vw,2.2rem) 0;
  border-bottom:1px solid rgba(181,141,72,.35);
  text-decoration:none;position:relative;
  transition:padding-left .5s var(--ease),color .4s var(--ease);
}
.idx__row:hover,.idx__row:focus-visible{padding-left:clamp(.5rem,2vw,1.5rem);color:var(--gold)}
.idx__num{font-family:var(--serif);font-size:.85rem;color:var(--gold);letter-spacing:.15em;align-self:start;padding-top:.7em}
.idx__body{display:grid;gap:.15rem}
.idx__name{font-family:var(--serif);font-size:clamp(1.5rem,5.2vw,2.9rem);line-height:1.1}
.idx__tag{
  font-family:var(--serif);font-style:italic;color:var(--ink-3);
  font-size:clamp(.85rem,1.9vw,1.05rem);
}
.idx__row:hover .idx__tag{color:var(--gold)}
/* The preview photograph only appears where there is room to float it. */
.idx__peek{display:none}
.idx__arrow{font-size:1.7rem;color:var(--gold);line-height:1;transition:transform .45s var(--ease)}
.idx__row:hover .idx__arrow{transform:translateX(.4rem)}

/* -------------------------------------------------------- welcome drink -- */

.welcome{
  position:relative;display:grid;gap:clamp(2.5rem,6vw,4.5rem);
  padding:var(--stack) var(--gutter);
  background:linear-gradient(180deg,var(--cream),#EFE6D8);
}
.welcome__media{position:relative}
.welcome__photo .shot__frame{box-shadow:0 40px 70px -46px rgba(26,23,16,.7)}
.welcome__snap{position:absolute;width:42%;right:0;bottom:-8%}
.welcome__snap .shot__frame{
  border:.5rem solid var(--ivory);border-bottom-width:1.3rem;
  box-shadow:0 20px 40px -22px rgba(26,23,16,.55);
}
.welcome__target{position:absolute;left:-1rem;top:-1.4rem;width:3.2rem;height:3.2rem;stroke:var(--gold)}
.welcome__title{font-size:clamp(2rem,6vw,3.6rem);line-height:1.05}
.welcome__script{font-size:clamp(2rem,5.5vw,3rem);margin:1.2rem 0 1.8rem}
.welcome__copy p{max-width:var(--measure);color:var(--ink-2)}
.welcome__points{
  margin:1.8rem 0 2.2rem;display:grid;gap:.75rem;
}
.welcome__points li{
  position:relative;padding-left:1.7rem;
  font-size:.85rem;letter-spacing:.03em;color:var(--ink-2);
}
.welcome__points li::before{
  content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  border:1px solid var(--gold);border-radius:50%;
}

/* ------------------------------------------------------------- sections -- */

.sec{padding:var(--stack) var(--gutter);position:relative;overflow:hidden}
.sec--editorial{background:var(--ink);color:var(--ivory)}
.sec--editorial .sec__intro,.sec--editorial .card__text{color:rgba(248,243,237,.72)}
.sec--editorial .sec__tagline,.sec--editorial .sec__index,.sec--editorial .eyebrow{color:var(--gold-lt)}
.sec--editorial .btn--ghost{border-color:rgba(248,243,237,.32);color:rgba(248,243,237,.85)}
.sec--editorial .btn--ghost::before{background:var(--ivory)}
.sec--editorial .btn--ghost:hover{color:var(--ink)}

.sec--warm{background:var(--cream)}
.sec--warm .sec__title{color:#54301C}
.sec--warm .sec__tagline,.sec--warm .sec__index{color:var(--terracotta)}
.sec--warm .card__line{color:var(--terracotta)}

.sec--play{background:var(--ivory)}
.sec--play .sec__tagline,.sec--play .sec__index{color:var(--olive)}
.sec--play .card__line{color:var(--olive)}

.sec--drama{background:#141109;color:var(--ivory)}
.sec--drama .sec__intro{color:rgba(248,243,237,.72)}
.sec--drama .sec__tagline,.sec--drama .sec__index{color:var(--wine)}
.sec--drama .sec__tagline{color:#E4808F}

.sec--neon{background:var(--cream)}
.sec--neon .sec__tagline,.sec--neon .sec__index{color:#B77A1B}
.sec--neon .card__line{color:#B77A1B}

/* -------------------------------------------------------------- cards ---- */

.cards{display:grid;gap:clamp(2rem,4.5vw,3.2rem)}
.card{display:flex;flex-direction:column;gap:1.1rem}
.card__shot .shot__frame{aspect-ratio:3 / 4;box-shadow:0 26px 50px -34px rgba(26,23,16,.7)}
.card--wide .card__shot .shot__frame{aspect-ratio:4 / 3}
.card__body{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.card__name{font-size:clamp(1.15rem,2.6vw,1.5rem);letter-spacing:.04em}
.card__line{
  font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:1.02rem;margin:0;
}
.card__text{color:var(--ink-2);margin:0 0 .5rem;font-size:.93rem}
/* An experience with no photograph yet becomes a typographic plate, framed and
   marked with the target from the logo, so a row of cards stays balanced. */
.card--type{
  position:relative;justify-content:center;
  border:1px solid rgba(181,141,72,.34);
  padding:clamp(1.8rem,3.4vw,2.6rem);
}
.card--type::before,.card--type::after{
  content:"";position:absolute;border:1px solid rgba(181,141,72,.45);border-radius:50%;
}
.card--type::before{right:1.5rem;top:1.5rem;width:2.1rem;height:2.1rem}
.card--type::after{right:2.15rem;top:2.15rem;width:.8rem;height:.8rem}
.sec--editorial .card--type{border-color:rgba(227,190,101,.3);background:rgba(248,243,237,.035)}
.sec--editorial .card--type::before,.sec--editorial .card--type::after{border-color:rgba(227,190,101,.4)}

/* Flags an experience whose setup scales with the number of guests. */
.badge{
  display:inline-block;align-self:flex-start;
  border:1px solid rgba(181,141,72,.5);border-radius:999px;
  padding:.32rem .8rem;margin-bottom:.35rem;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;
}
.sec--editorial .badge{border-color:rgba(227,190,101,.5);color:var(--gold-lt)}
.strip__item .badge{margin-top:.6rem}

/* ---------------------------------------------------------------- vogue -- */

.vogue{
  margin-top:clamp(3.5rem,8vw,6rem);
  padding:clamp(2rem,5vw,3.5rem) 0 0;
  border-top:1px solid rgba(248,243,237,.18);
  display:grid;gap:2rem;align-items:end;
}
.vogue__word{
  font-size:clamp(4rem,20vw,13rem);line-height:.8;letter-spacing:.02em;
  font-weight:700;margin:.4rem 0 1.2rem;
}
.vogue__line{font-family:var(--serif);font-style:italic;color:var(--gold-lt);font-size:1.2rem;margin-bottom:.8rem}
.vogue__text{color:rgba(248,243,237,.72);max-width:32rem;margin-bottom:1.8rem}
.vogue__shot{max-width:20rem}
.vogue__shot .shot__frame{
  aspect-ratio:3 / 4;box-shadow:0 34px 64px -34px rgba(0,0,0,.95);
}
.vogue__stamp{
  font-size:.62rem;letter-spacing:.3em;color:rgba(248,243,237,.5);text-align:right;line-height:2;margin:0;
}

/* ------------------------------------------------------------- stations -- */

.stations__feature{
  display:grid;gap:1.8rem;align-items:center;
  margin-bottom:clamp(3rem,7vw,5rem);
}
.stations__clip{max-width:22rem}
.stations__note{max-width:26rem}
.stations__note .script{font-size:2.4rem;margin-bottom:.6rem}
.stations__note p{color:var(--ink-2)}
.stations__scale{
  margin-top:1.1rem;padding-top:1.1rem;
  border-top:1px solid rgba(178,87,47,.3);
  font-size:.85rem;color:var(--terracotta);
}

.strip{
  margin-top:clamp(3rem,7vw,5rem);
  display:grid;gap:0;
  border-top:1px solid rgba(178,87,47,.3);
}
.strip__item{
  padding:1.6rem 0;border-bottom:1px solid rgba(178,87,47,.3);
  display:grid;gap:.3rem;
}
.strip__item h3{font-size:1.1rem;letter-spacing:.06em}
.strip__line{font-family:var(--serif);font-style:italic;color:var(--terracotta);margin:0}
.strip__item p{color:var(--ink-2);font-size:.9rem;margin:0}

/* ---------------------------------------------------------------- games -- */

.chips{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.chips li{
  border:1px solid rgba(26,23,16,.16);border-radius:999px;
  padding:.5rem 1rem;font-size:.63rem;letter-spacing:.16em;font-weight:500;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.chips li:nth-child(4n+1){border-color:rgba(62,92,72,.5);color:var(--olive)}
.chips li:nth-child(4n+2){border-color:rgba(178,87,47,.5);color:var(--terracotta)}
.chips li:nth-child(4n+3){border-color:rgba(181,141,72,.6);color:var(--gold)}
.chips li:nth-child(4n+4){border-color:rgba(140,34,51,.45);color:var(--wine)}
.chips li:hover{background:currentColor}
.chips li:hover{color:var(--ivory)}

.games__clips{
  display:grid;gap:1.5rem;align-items:center;
  margin-bottom:clamp(3rem,7vw,5rem);
}
.games__clip{max-width:20rem}
.games__clip .shot__frame{box-shadow:0 30px 60px -40px rgba(26,23,16,.8)}
.games__shout{
  font-family:var(--serif);font-size:clamp(2rem,7vw,3.6rem);line-height:1.02;margin:0;
}
.games__shout em{font-style:italic;color:var(--olive)}

/* -------------------------------------------------------- entertainment -- */

.marquee{display:grid;gap:clamp(2.5rem,6vw,4rem)}
.marquee__list{display:grid;gap:0;border-top:1px solid rgba(248,243,237,.16)}
.marquee__item{padding:1.7rem 0;border-bottom:1px solid rgba(248,243,237,.16)}
.marquee__name{font-size:clamp(1.4rem,4.5vw,2.1rem);letter-spacing:.03em}
.marquee__line{font-family:var(--serif);font-style:italic;color:#E4808F;margin:.35rem 0 .5rem}
.marquee__text{color:rgba(248,243,237,.68);margin:0;font-size:.93rem;max-width:34rem}
.marquee__media{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.marquee__shot .shot__frame{aspect-ratio:3 / 4;box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.marquee__shot--low{margin-top:2.5rem}

.cta-band{
  margin-top:clamp(3rem,7vw,5rem);padding-top:clamp(2rem,5vw,3rem);
  border-top:1px solid rgba(248,243,237,.16);
  display:grid;gap:1.5rem;align-items:center;
}
.cta-band p{font-family:var(--serif);font-size:clamp(1.2rem,3.2vw,1.8rem);color:var(--ivory);margin:0;max-width:30ch}

/* -------------------------------------------------------------- details -- */

.details__clip{
  display:grid;gap:1.2rem;align-items:center;justify-items:start;
  margin:clamp(3rem,7vw,4.5rem) 0;
}
.details__video{max-width:20rem}
.details__video .shot__frame{box-shadow:0 30px 60px -40px rgba(26,23,16,.8)}
.details__script{font-size:clamp(2.4rem,8vw,4.5rem);color:var(--amber)}

.tiles{display:grid;gap:0;border-top:1px solid rgba(233,161,59,.45)}
.tile{padding:1.5rem 0;border-bottom:1px solid rgba(233,161,59,.45)}
.tile h3{font-size:1.05rem;letter-spacing:.06em}
.tile__line{font-family:var(--serif);font-style:italic;color:#B77A1B;margin:.25rem 0 .4rem}
.tile p{color:var(--ink-2);font-size:.9rem;margin:0}

/* -------------------------------------------------------------- gallery -- */

.gal{padding:var(--stack) var(--gutter);background:var(--ivory)}
.gal__grid{
  columns:2;column-gap:clamp(.7rem,2.4vw,1.8rem);
}
.gal__item{
  display:block;width:100%;padding:0;margin:0 0 clamp(.9rem,2.6vw,2rem);
  break-inside:avoid;cursor:zoom-in;
  transition:transform .6s var(--ease),filter .6s var(--ease);
}
.gal__item .shot__frame{box-shadow:0 22px 44px -34px rgba(26,23,16,.65)}
.gal__item:hover{filter:brightness(1.04)}
.gal__item:hover .shot{transform:scale(1.012) rotate(0deg)}
.gal__item .shot{transition:transform .6s var(--ease)}
.gal__item--wide{column-span:all;margin-block:clamp(1.4rem,4vw,3rem)}
.gal__item:nth-child(6n+2){margin-top:clamp(1rem,3vw,2.5rem)}
.gal__item:nth-child(9n+7){padding-inline:clamp(.5rem,3vw,2.5rem)}

/* ------------------------------------------------------------- lightbox -- */

.lb{
  position:fixed;inset:0;z-index:120;
  background:rgba(14,12,8,.96);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.5rem;padding:clamp(1rem,4vw,3rem);
  opacity:0;transition:opacity .35s var(--ease);
}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb__stage{margin:0;display:grid;place-items:center;height:100%}
.lb__stage img{max-height:88svh;max-width:100%;width:auto;object-fit:contain;box-shadow:0 30px 80px -40px #000}
.lb__close{
  position:absolute;top:1rem;right:1.2rem;font-size:2.2rem;line-height:1;color:var(--ivory);
  width:2.8rem;height:2.8rem;
}
.lb__nav{font-size:2.6rem;line-height:1;color:var(--ivory);opacity:.6;width:2.6rem;height:4rem;transition:opacity .3s}
.lb__nav:hover{opacity:1}
.lb__count{
  position:absolute;bottom:1.1rem;left:50%;transform:translateX(-50%);margin:0;
  font-size:.65rem;letter-spacing:.24em;color:rgba(248,243,237,.65);
}

/* ---------------------------------------------------------------- about -- */

.about{
  padding:var(--stack) var(--gutter);
  background:linear-gradient(180deg,var(--cream),var(--ivory));
  display:grid;gap:clamp(2.5rem,6vw,4rem);
}
.about__title{font-size:clamp(2.2rem,7vw,4rem);letter-spacing:.02em}
.about__byline{
  font-family:var(--script);font-size:clamp(1.8rem,5vw,2.6rem);color:var(--gold);margin:.2rem 0 1.6rem;
}
.about__copy p{max-width:var(--measure);color:var(--ink-2)}
.about__cards{position:relative;display:grid;place-items:center;min-height:clamp(13rem,36vw,20rem)}
.about__card{
  width:min(78%,26rem);border-radius:.7rem;position:absolute;
  box-shadow:0 30px 60px -34px rgba(26,23,16,.6);
}
.about__card--front{transform:rotate(-4deg) translate(-6%,-8%)}
.about__card--back{transform:rotate(3.5deg) translate(7%,9%)}
.pillars{display:grid;gap:clamp(1.6rem,4vw,2.6rem)}
.pillar{display:grid;gap:.5rem;justify-items:start;border-top:1px solid rgba(181,141,72,.4);padding-top:1.3rem}
.pillar h3{font-size:1.15rem;letter-spacing:.03em}
.pillar p{color:var(--ink-2);font-size:.9rem;margin:0}

/* ------------------------------------------------------------- planning -- */

.plan{
  padding:var(--stack) var(--gutter);
  background:var(--cream);
  display:grid;gap:clamp(2.5rem,6vw,4rem);
}
.plan__head{max-width:44rem}
.plan__heading{font-size:clamp(2rem,6.4vw,3.6rem)}
.plan__script{font-size:clamp(1.9rem,5vw,2.7rem);margin:.8rem 0 1.4rem}
.plan__lead{color:var(--ink-2);max-width:var(--measure)}
.plan__list{display:grid;gap:0;border-top:1px solid rgba(181,141,72,.4)}
.plan__item{
  display:grid;gap:.4rem;padding:1.6rem 0;
  border-bottom:1px solid rgba(181,141,72,.4);
}
.plan__num{font-family:var(--serif);font-size:.8rem;letter-spacing:.2em;color:var(--gold)}
.plan__title{font-size:clamp(1.1rem,2.6vw,1.4rem);letter-spacing:.02em}
.plan__text{color:var(--ink-2);font-size:.92rem;margin:0;max-width:34rem}
.plan__cta{justify-self:start}

/* -------------------------------------------------------------- contact -- */

.contact{
  position:relative;overflow:hidden;
  padding:clamp(5rem,12vw,9rem) var(--gutter);
  background:var(--ink);color:var(--ivory);text-align:center;
}
.contact__ring{
  width:min(90vw,44rem);height:min(90vw,44rem);
  left:50%;top:50%;transform:translate(-50%,-50%);opacity:.22;stroke-width:.18;
}
.contact__inner{position:relative;max-width:44rem;margin-inline:auto}
.contact .eyebrow{color:var(--gold-lt)}
.contact__title{font-size:clamp(2rem,6.4vw,3.9rem);line-height:1.06;margin-bottom:1.4rem}
.contact__body{color:rgba(248,243,237,.72);max-width:34rem;margin-inline:auto;margin-bottom:2.4rem}
.contact__list{
  margin-top:3.2rem;display:grid;gap:1.4rem;text-align:left;
  border-top:1px solid rgba(248,243,237,.18);padding-top:2.2rem;
}
.contact__list li{display:grid;gap:.25rem}
.contact__list span{font-size:.6rem;letter-spacing:.28em;color:var(--gold-lt)}
.contact__list a{
  text-decoration:none;font-family:var(--serif);font-size:clamp(1.05rem,3vw,1.4rem);
  word-break:break-word;transition:color .35s var(--ease);
}
.contact__list a:hover{color:var(--gold-lt)}
.contact__list li:nth-child(2) a{font-size:clamp(.9rem,2.2vw,1.1rem)}

/* --------------------------------------------------------------- footer -- */

.foot{
  background:#12100A;color:rgba(248,243,237,.75);
  padding:clamp(3rem,7vw,4.5rem) var(--gutter);
  display:grid;gap:2.2rem;justify-items:center;text-align:center;
}
.foot__disc{
  display:grid;place-items:center;width:5.4rem;height:5.4rem;border-radius:50%;
  background:var(--ivory);margin-bottom:1.1rem;
}
.foot__disc img{width:74%;height:auto}
.foot__name{font-family:var(--serif);font-size:1.3rem;letter-spacing:.24em;color:var(--ivory);margin:0}
.foot__by{font-size:.62rem;letter-spacing:.28em;margin:.4rem 0 0}
.foot__script{font-size:1.9rem;margin-top:.6rem}
.foot__links{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:center}
.foot__links a{
  text-decoration:none;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .35s var(--ease);
}
.foot__links a:hover{color:var(--gold-lt)}
.foot__legal{font-size:.6rem;letter-spacing:.14em;color:rgba(248,243,237,.4);margin:0}

/* ---------------------------------------------------- floating whatsapp -- */

.float-wa{
  position:fixed;right:clamp(.9rem,3vw,1.7rem);bottom:clamp(.9rem,3vw,1.7rem);z-index:95;
  width:3.1rem;height:3.1rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--ivory);
  box-shadow:0 12px 26px -12px rgba(26,23,16,.85);
  opacity:0;transform:translateY(1rem) scale(.85);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .35s var(--ease);
}
.float-wa.is-shown{opacity:1;transform:none;pointer-events:auto}
.float-wa:hover{background:var(--wa)}
.float-wa svg{width:1.5rem;height:1.5rem;fill:currentColor}

/* ==========================================================================
   Larger screens
   ========================================================================== */

@media (min-width:600px){
  .cards--2{grid-template-columns:repeat(2,1fr)}
  .intro__snaps{max-width:34rem}
}

@media (min-width:820px){
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .nav__cta{display:inline-flex}
  .menu{display:none !important}

  .hero{
    grid-template-columns:1fr minmax(0,.95fr);
    align-items:center;gap:clamp(2rem,5vw,4.5rem);
    padding-top:7rem;
  }
  .hero__snap{width:34%;left:-13%;bottom:6%}
  .hero__ring{right:-8%;top:-6%}

  .intro{grid-template-columns:1.05fr .95fr;align-items:center}

  .welcome{grid-template-columns:.95fr 1.05fr;align-items:center}
  .welcome__snap{width:34%;right:-8%;bottom:-6%}

  .cards--3{grid-template-columns:repeat(3,1fr)}
  .cards--3 .card:nth-child(2){margin-top:clamp(1.5rem,4vw,3rem)}
  .cards--2 .card--wide{gap:1.6rem}

  .vogue{grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:clamp(2rem,5vw,3.5rem)}
  .vogue__shot{margin-bottom:1rem}

  .stations__feature{grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4rem)}
  .strip{grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,5vw,4rem)}

  .games__clips{grid-template-columns:auto auto 1fr;gap:clamp(1.5rem,4vw,3rem)}
  .games__clip:nth-of-type(2){margin-top:3.5rem}

  .marquee{grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:start}
  .cta-band{grid-template-columns:1fr auto;gap:2.5rem}

  .details__clip{grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
  .tiles{grid-template-columns:repeat(2,1fr);column-gap:clamp(2rem,5vw,4rem)}

  .plan{grid-template-columns:.9fr 1.1fr;align-items:start;column-gap:clamp(2.5rem,6vw,5rem)}
  .plan__head{grid-column:1;grid-row:1}
  .plan__list{grid-column:2;grid-row:1}
  .plan__cta{grid-column:1 / -1;grid-row:2;justify-self:center}

  .gal__grid{columns:3}

  .about{grid-template-columns:1.05fr .95fr;align-items:center}
  .pillars{grid-column:1 / -1;grid-template-columns:repeat(3,1fr)}

  .contact__list{grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center}
  .contact__list li{justify-items:center}

  .foot{grid-template-columns:1fr auto;justify-items:start;text-align:left;align-items:center}
  .foot__disc{margin-inline:0}
  .foot__links{justify-content:flex-end}
  .foot__legal{grid-column:1 / -1;justify-self:center;padding-top:1.5rem;border-top:1px solid rgba(248,243,237,.12);width:100%;text-align:center}
}

@media (min-width:1100px){
  .nav__word{display:block}

  /* A photograph floats in beside the row being pointed at, so browsing the
     catalogue still feels like looking at pictures rather than a list. */
  .idx__peek{
    display:block;position:absolute;right:5.5rem;top:50%;width:13rem;z-index:2;
    opacity:0;pointer-events:none;
    transform:translateY(-50%) rotate(-3deg) scale(.92);
    transition:opacity .45s var(--ease),transform .45s var(--ease);
  }
  .idx__peek .shot__frame{box-shadow:0 24px 44px -26px rgba(26,23,16,.7)}
  .idx__row:hover .idx__peek,.idx__row:focus-visible .idx__peek{
    opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1);
  }
  .hero__title{font-size:clamp(4.5rem,7.4vw,7.4rem)}
  .gal__grid{columns:4}
  .gal__item--wide{column-span:all;max-width:64rem;margin-inline:auto}
}

/* ==========================================================================
   Motion and print preferences
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none}
  .reveal.tilt-a{transform:rotate(var(--tilt-a))}
  .reveal.tilt-b{transform:rotate(var(--tilt-b))}
  .reveal.tilt-c{transform:rotate(var(--tilt-c))}
  /* The menu still has to open, it just does so without the wipe or stagger. */
  .menu{clip-path:none}
  .menu__links a,.menu__foot{opacity:1;transform:none}
}

@media print{
  .nav,.menu,.float-wa,.lb{display:none !important}
  body{background:#fff;color:#000}
}