/* Alter Ego, Tampa.
   Ground and scarlet are sampled from their own png_pattern_scarlet-black.png:
   #000000 and #521716. The lifted scarlet is derived from theirs, brightened so
   a link on black clears contrast; the brand value itself is too dark to read
   as type. Cream is read off the lockup.
   Display is Instrument Serif, body is Jost, which is the geometric closest to
   the wide tracked lowercase of their wordmark. */

:root{
  --ink:#080709;
  --ink-0:#000000;
  --ink-1:#121013;
  --ink-2:#1A171B;
  --scarlet:#521716;        /* theirs, exact */
  --scarlet-lift:#C6473C;   /* derived for type on black */
  --cream:#EDE7DC;
  --cream-dim:#A49C90;
  --line:rgba(237,231,220,.14);

  --disp:'Instrument Serif',Georgia,serif;
  --body:'Jost',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --wrap:1240px;
  --gut:clamp(26px,6vw,64px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);
  font:400 1.0625rem/1.65 var(--body);letter-spacing:.005em;
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}

/* An inline svg with a viewBox and no size fills its container. This is the
   floor; every scoped rule below still wins. */
svg{width:1em;height:1em;flex:none}

h1,h2,h3{font-family:var(--disp);font-weight:400;line-height:1.05;margin:0;
  text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h1.as-h2{font-size:clamp(2rem,4.6vw,3.6rem)}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.measure{max-width:78ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--cream);
  color:var(--ink);padding:12px 18px}

.kicker{font:500 1rem/1 var(--body);letter-spacing:.24em;text-transform:lowercase;
  color:var(--scarlet-lift);margin:0 0 18px}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--cream-dim);
  max-width:56ch;margin-top:18px}
.fine{font-size:1rem;color:var(--cream-dim);margin-top:26px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(8,7,9,.88);
  border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.brand{flex:0 0 auto;line-height:0}
/* ⚠️ THE FILE IS CALLED "black" AND THE ARTWORK IS CREAM, mean ink RGB
   (232,232,228) on transparent. Inverting it turned the wordmark black on a
   black header, so it was there and invisible. Trust the pixels, not the
   filename. */
.brand img{height:clamp(24px,2.4vw,30px);width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.3vw,20px);
  flex-wrap:nowrap}
/* Two word labels were wrapping in the desktop bar. They are single line
   items, so they never break. */
.nav a{font:400 1rem/1 var(--body);letter-spacing:.08em;text-decoration:none;
  color:var(--cream-dim);padding:8px 0;transition:color .2s;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--cream)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;
  cursor:pointer;color:var(--cream)}
.burger svg{width:26px;height:26px}
.scrim{display:none}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  white-space:nowrap;
  font:500 1rem/1 var(--body);letter-spacing:.14em;text-transform:lowercase;
  padding:16px 34px;border-radius:var(--r);border:1px solid transparent;
  transition:background .22s,color .22s,border-color .22s}
.btn svg{width:17px;height:17px}
.btn-fill{background:var(--cream);color:var(--ink)}
.btn-fill:hover{background:var(--scarlet-lift);color:var(--cream)}
.btn-ghost{border-color:var(--line);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.lnk{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font:500 1rem/1 var(--body);letter-spacing:.14em;color:var(--scarlet-lift);
  margin-top:26px}
.lnk svg{width:17px;height:17px;transition:transform .2s}
.lnk:hover svg{transform:translateX(5px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,92vh,940px);display:flex;
  flex-direction:column;justify-content:flex-end;overflow:hidden;
  background:var(--ink-0);padding-bottom:clamp(40px,6vw,74px)}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 38%,
    rgba(5,4,6,.93) 88%,var(--ink) 100%)}
.hero-in{position:relative;z-index:2}
.hero-in h1{max-width:16ch}
.hero-hrs{position:relative;z-index:2;max-width:var(--wrap);margin:34px auto 0;
  padding:0 var(--gut);font:500 1rem/1 var(--body);letter-spacing:.2em;
  color:var(--cream-dim)}

/* ---------- sections ---------- */
.sec{padding:clamp(64px,9vw,128px) 0}
.sec-dark{background:var(--ink-0)}
.sec-end{background:var(--ink-1);text-align:center}
.sec-end .lede{margin-left:auto;margin-right:auto}
.sec-end .cta-row{justify-content:center}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;
  justify-content:space-between;margin-bottom:clamp(30px,4vw,48px)}
.sec-head .lnk{margin-top:0}
.split{display:grid;gap:clamp(30px,5vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}

/* their half circle pattern as the section break */
.rule{height:clamp(54px,6.5vw,92px);background-image:var(--pat);
  background-size:auto 100%;background-repeat:repeat-x;opacity:.3;
  background-position:center}

.shot{margin:0;overflow:hidden;border-radius:var(--r)}
.shot img{width:100%;height:auto}
.shot.wide img{max-height:70vh;object-fit:cover}
.shot figcaption,.poster figcaption{font-size:1rem;color:var(--cream-dim);
  margin-top:14px;max-width:52ch}

/* ---------- the week ---------- */
.nights{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.nights li{background:var(--ink);display:grid;
  grid-template-columns:clamp(96px,12vw,150px) 1fr;gap:clamp(14px,2.4vw,36px);
  padding:clamp(22px,2.8vw,34px) 0}
.sec-dark .nights li{background:var(--ink-0)}
.n-d{font:500 1rem/1.3 var(--body);letter-spacing:.2em;color:var(--scarlet-lift);
  text-transform:lowercase}
.nights h3{margin:0 0 8px}
.nights p{margin:0;color:var(--cream-dim);max-width:62ch}
.nights-full li{padding:clamp(26px,3.2vw,40px) 0}
.poster{margin:clamp(40px,6vw,72px) 0 0;max-width:520px}
.poster img{width:100%;height:auto;border-radius:var(--r)}

/* ---------- tracklist ---------- */
.trks{list-style:none;margin:0;padding:0;counter-reset:t}
.trk{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2.2vw,28px);
  align-items:baseline;padding:clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--line)}
.trk-n{font:500 1rem/1 var(--body);letter-spacing:.1em;color:var(--scarlet-lift);
  font-variant-numeric:tabular-nums}
.trk-b h3{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.trk-by{font:400 1rem/1.3 var(--body);letter-spacing:.08em;color:var(--cream-dim)}
.trk-by::before{content:"by ";color:var(--scarlet-lift)}
.trk-f{margin:8px 0 0;font:500 1rem/1.4 var(--body);letter-spacing:.06em;
  color:var(--cream)}
.trk-b p{margin:6px 0 0;color:var(--cream-dim);font-size:1rem;max-width:60ch}
.trk-p{font:500 1.0625rem/1 var(--body);font-variant-numeric:tabular-nums;
  color:var(--cream)}

.msec{margin:0 0 clamp(46px,6vw,78px)}
.msec h2{margin:0 0 clamp(18px,2.4vw,30px);font-size:clamp(1.6rem,3vw,2.4rem)}
.mlist{list-style:none;margin:0;padding:0}
.mlist li{display:flex;gap:20px;justify-content:space-between;align-items:baseline;
  padding:clamp(16px,2vw,22px) 0;border-bottom:1px solid var(--line)}
.mlist h3{margin:0;font-size:clamp(1.1rem,1.7vw,1.3rem)}
.mlist p{margin:6px 0 0;color:var(--cream-dim);font-size:1rem;max-width:58ch}
.mlist span{font:500 1.0625rem/1 var(--body);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.veg{font:500 1rem/1 var(--body);letter-spacing:.14em;color:var(--scarlet-lift)}

.picks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.picks li{border-left:2px solid var(--scarlet-lift);padding-left:16px}
.picks h3{margin:0;font-size:clamp(1.1rem,1.6vw,1.28rem)}
.picks p{margin:4px 0 0;color:var(--cream-dim);font-size:1rem}

.f411{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.f411 li{padding-left:24px;position:relative;color:var(--cream-dim);
  max-width:60ch;font-size:1rem}
.f411 li::before{content:"";position:absolute;left:0;top:.62em;width:10px;
  height:10px;border-radius:0 10px 10px 0;background:var(--scarlet-lift)}

.evs{list-style:none;margin:0;padding:0}
.evs li{display:grid;grid-template-columns:clamp(140px,16vw,210px) 1fr;
  gap:clamp(14px,2.4vw,30px);align-items:baseline;
  padding:clamp(15px,1.9vw,21px) 0;border-bottom:1px solid var(--line)}
.e-d{font:500 1rem/1.3 var(--body);letter-spacing:.14em;color:var(--cream-dim);
  font-variant-numeric:tabular-nums}
.evs h3{margin:0;font-size:clamp(1.1rem,1.7vw,1.35rem)}

.pull{margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.pull p{font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.3;margin:0}
.pull cite{display:block;margin-top:16px;font:500 1rem/1.4 var(--body);
  font-style:normal;letter-spacing:.1em;color:var(--scarlet-lift)}

.hrs{margin:18px 0 0;display:grid;gap:10px}
.hrs div{display:flex;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--line);padding-bottom:9px}
.hrs dt{margin:0;color:var(--cream-dim);font-size:1rem;letter-spacing:.06em}
.hrs dd{margin:0;font-size:1rem;font-variant-numeric:tabular-nums}
.hrs.big dt,.hrs.big dd{font-size:1.0625rem}
.big-link{font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0 0 10px}
.big-link a{text-decoration:none}
.big-link a:hover{color:var(--scarlet-lift)}

.faq-i{border-bottom:1px solid var(--line)}
.faq-i summary{list-style:none;cursor:pointer;padding:22px 52px 22px 0;
  position:relative;font-family:var(--disp);font-size:clamp(1.15rem,2vw,1.45rem)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;
  height:2px;background:var(--scarlet-lift)}
.faq-i summary::before{content:"";position:absolute;right:12px;top:50%;width:2px;
  height:14px;margin-top:-6px;background:var(--scarlet-lift);
  transition:opacity .2s}
.faq-i[open] summary::before{opacity:0}
.faq-i summary:focus-visible{outline:2px solid var(--scarlet-lift);outline-offset:3px}
.faq-a{padding:0 0 22px}
.faq-a p{margin:0;color:var(--cream-dim);max-width:68ch;font-size:1rem}

.form{display:grid;gap:16px;align-content:start}
.form h2{margin-bottom:6px}
.form label{display:grid;gap:8px;font:500 1rem/1.3 var(--body);
  letter-spacing:.1em;color:var(--cream-dim)}
.form input,.form textarea,.form select{font:400 1.0625rem/1.5 var(--body);
  color:var(--cream);background:var(--ink-1);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 15px;width:100%;appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--cream) 50%),
  linear-gradient(135deg,var(--cream) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:2px solid var(--scarlet-lift);outline-offset:1px;border-color:transparent}
.form .btn{justify-self:start;margin-top:6px;border:0;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;font-size:1rem;color:var(--scarlet-lift);min-height:1.4em}

.phero{padding:clamp(70px,10vw,140px) 0 clamp(36px,5vw,64px);
  background:var(--ink-0);border-bottom:1px solid var(--line)}

/* ---------- footer ---------- */
.foot{background:var(--ink-0);border-top:1px solid var(--line);
  padding:clamp(52px,7vw,84px) 0 clamp(26px,3vw,38px)}
.foot-top{display:grid;gap:clamp(30px,4vw,60px);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
.foot-mark{height:clamp(34px,3.4vw,46px);width:auto}
.foot-addr{margin:20px 0 0;color:var(--cream-dim);font-size:1rem;line-height:1.8}
.foot-addr a{color:var(--cream);text-decoration:none}
.foot h3{font:500 1rem/1 var(--body);letter-spacing:.2em;color:var(--scarlet-lift);
  text-transform:lowercase;margin:0 0 6px}
.foot-nav{display:grid;gap:9px;margin-top:16px}
.foot-nav a{text-decoration:none;color:var(--cream-dim);font-size:1rem;
  letter-spacing:.08em}
.foot-nav a:hover{color:var(--cream)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  margin-top:clamp(36px,5vw,60px);padding-top:22px;border-top:1px solid var(--line);
  color:var(--cream-dim);font-size:1rem}
.foot-bottom p{margin:0}
.foot-bottom a{color:var(--cream)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hero-v{display:none}
}

@media(max-width:1060px){
  /* The drawer is position:fixed inside .hdr. Any backdrop-filter, filter or
     transform on an ancestor would make it lay out against the header instead
     of the viewport and open as a sliver, so the header carries none. */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:var(--ink-1);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:96px 28px 28px;transform:translateX(100%);margin-left:0;
    transition:transform .34s cubic-bezier(.4,0,.2,1);overflow-y:auto;z-index:70}
  .nav[data-open=true]{transform:translateX(0)}
  .nav a{font-size:1.15rem;padding:16px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:20px;justify-content:center}
  .burger{display:block}
  .scrim{display:block;position:fixed;inset:0;background:#000;opacity:0;
    visibility:hidden;transition:opacity .3s,visibility .3s;z-index:55}
  .scrim[data-open=true]{opacity:.6;visibility:visible}
  .split{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .trk{grid-template-columns:auto 1fr;row-gap:6px}
  .trk-p{grid-column:2}
  .nights li{grid-template-columns:1fr;gap:10px}
  .evs li{grid-template-columns:1fr;gap:4px}
  .foot-top{grid-template-columns:1fr}
  .mlist li{flex-direction:column;gap:6px}
}

/* Section modifiers used by the home page. Defined rather than left to the
   base .sec, because the build asserts every class has a rule behind it. */
.sec-week{background:var(--ink)}
.sec-split{background:var(--ink)}
/* body class on the home page, so the hero can sit under a transparent header */
.home .hdr{background:rgba(8,7,9,.55)}

/* Instagram, from their own live site. 44px tap target, mark plus handle so
   the link says where it goes. */
.ig{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  text-decoration:none;color:var(--cream-dim);font:500 1rem/1 var(--body);
  letter-spacing:.06em;min-height:44px}
.ig svg{width:22px;height:22px}
.ig:hover{color:var(--scarlet-lift)}
.ig:focus-visible{outline:2px solid var(--scarlet-lift);outline-offset:3px}