/* 50 in Philly — site styles
   Palette comes from the Brand Bible: navy, cream, mustard gold. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-latin-full-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/fraunces-latin-full-italic.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2")}
:root{
  --navy:#183153;
  --night:#0e1f37;
  --cream:#f8f5ef;
  --gold:#d9a441;
  --gold-deep:#b9862a;
  --ink:#14233a;
  --soft:#5b6779;
  --line:rgba(24,49,83,.16);
  --line-light:rgba(248,245,239,.2);
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img,iframe{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:var(--ink);padding:10px 14px}

/* Type */
.display{font-family:var(--display);font-weight:600;font-variation-settings:"SOFT" 60,"WONK" 1;letter-spacing:-.025em;line-height:.98}
h1.display{font-size:clamp(3rem,13vw,8.4rem)}
h2.display{font-size:clamp(2.2rem,7.4vw,4.4rem)}
h3.display{font-size:clamp(1.45rem,4.2vw,2rem);line-height:1.08;letter-spacing:-.015em}
.italic{font-style:italic;font-weight:500}
.lede{font-size:clamp(1.1rem,2.6vw,1.32rem);line-height:1.55;max-width:38ch}
.small{font-size:.9rem}
.kicker{font-weight:600;font-size:.98rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.75rem 1.5rem;border-radius:999px;border:2px solid var(--gold);background:var(--gold);color:var(--night);font:600 1rem var(--body);text-decoration:none;cursor:pointer}
.btn:hover{background:var(--cream);border-color:var(--cream)}
.btn.line{background:transparent;color:inherit;border-color:currentColor}
.btn.line:hover{background:var(--gold);border-color:var(--gold);color:var(--night)}
.btn.dark{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.btn.dark:hover{background:var(--night);border-color:var(--night)}
.link{font-weight:600;text-underline-offset:5px;text-decoration-thickness:2px}

/* Header */
.top{position:sticky;top:0;z-index:50;background:var(--night);color:var(--cream);border-bottom:1px solid var(--line-light)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.logo{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;font-variation-settings:"SOFT" 60,"WONK" 1}
.logo b{color:var(--gold);font-style:italic;font-weight:600}
.nav{display:none}
.menu-btn{min-height:44px;padding:0 1rem;border-radius:999px;border:1.5px solid var(--line-light);background:transparent;color:inherit;font:600 .95rem var(--body);cursor:pointer}
.nav.open{display:flex;flex-direction:column;position:fixed;inset:68px 0 0 0;background:var(--night);padding:1.2rem 20px 2rem;overflow:auto}
.nav.open a{font-family:var(--display);font-size:2rem;font-weight:600;text-decoration:none;padding:.55rem 0;border-bottom:1px solid var(--line-light);letter-spacing:-.02em}
.nav.open a.btn{font:600 1rem var(--body);margin-top:1.4rem;border-bottom:2px solid var(--gold);padding:.75rem 1.5rem}
.nav a[aria-current="page"]{color:var(--gold)}
@media(min-width:1000px){
  .menu-btn{display:none}
  .nav{display:flex;align-items:center;gap:1.35rem}
  .nav a{font-size:.94rem;font-weight:500;text-decoration:none;white-space:nowrap}
  .nav a:hover{color:var(--gold)}
  .nav a.btn{min-height:42px;padding:.45rem 1.1rem;font-weight:600}
  .nav a.btn:hover{color:var(--night)}
}

/* Bands */
.band{padding:clamp(3.2rem,9vw,6.5rem) 0}
.band.night{background:var(--night);color:var(--cream)}
.band.navy{background:var(--navy);color:var(--cream)}
.band.gold{background:var(--gold);color:var(--night)}
.band.tight{padding:clamp(2.2rem,6vw,3.6rem) 0}
.head{display:grid;gap:.9rem;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.head p{max-width:52ch}
@media(min-width:860px){.head.split{grid-template-columns:1.1fr .9fr;align-items:end;gap:3rem}}

/* Hero */
.hero{background:var(--night);color:var(--cream);position:relative;overflow:hidden}
.hero-in{position:relative;z-index:2;padding:clamp(2.6rem,9vw,6rem) 0 clamp(2.6rem,7vw,5rem)}
.hero h1{max-width:9.5ch}
.hero h1 .still{display:block;color:var(--gold);font-style:italic;font-weight:500}
.hero .lede{margin-top:1.5rem;color:rgba(248,245,239,.86)}
.hero-photo{position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,var(--night) 0%,rgba(14,31,55,.92) 38%,rgba(14,31,55,.35) 100%),
  var(--hero-img, none) center/cover no-repeat}
.glow{position:absolute;z-index:1;right:-18vw;top:-22vw;width:70vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.42),rgba(217,164,65,0) 62%)}
.weekend{display:inline-block;margin-bottom:1.3rem;padding:.4rem .9rem;border-radius:999px;border:1.5px solid var(--gold);color:var(--gold);font-weight:600;font-size:.95rem}

/* Signup */
.signup{display:grid;gap:.6rem;margin-top:1.8rem;max-width:520px}
.signup label{font-weight:600}
.field{display:flex;flex-direction:column;gap:.6rem}
.signup input[type=email],.signup input[type=text]{width:100%;min-height:54px;padding:0 1.1rem;border-radius:999px;border:2px solid var(--line-light);background:rgba(248,245,239,.08);color:inherit;font:500 1rem var(--body)}
.signup input::placeholder{color:rgba(248,245,239,.6)}
.band.gold .signup input,.on-light .signup input{border-color:rgba(14,31,55,.45);background:rgba(255,255,255,.55);color:var(--night)}
.band.gold .signup input::placeholder,.on-light .signup input::placeholder{color:rgba(14,31,55,.6)}
.signup .fine{font-size:.86rem;opacity:.8}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.status{font-weight:600;min-height:1.5em}
.status.bad{color:#ffb4a8}
.band.gold .status.bad,.on-light .status.bad{color:#8a1c0f}
@media(min-width:560px){.field{flex-direction:row}.field .btn{flex:none}}

/* Mood tiles */
.moods{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.mood{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:168px;padding:1.1rem;border-radius:22px;background:var(--navy);color:var(--cream);text-decoration:none;overflow:hidden}
.mood h3{position:relative;z-index:2}
.mood p{position:relative;z-index:2;font-size:.92rem;opacity:.86;margin-top:.3rem;max-width:26ch}
.mood:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 0%,rgba(217,164,65,.5),rgba(217,164,65,0) 55%)}
.mood:hover{background:var(--night)}
.mood.gold{background:var(--gold);color:var(--night)}
.mood.gold:after{background:radial-gradient(circle at 85% 0%,rgba(248,245,239,.65),rgba(248,245,239,0) 55%)}
.mood.gold:hover{background:var(--gold-deep)}
.mood.wide{grid-column:1/-1;min-height:200px}
@media(min-width:860px){.moods{grid-template-columns:repeat(4,1fr);gap:16px}.mood{min-height:230px;padding:1.4rem}.mood.wide{grid-column:span 2}}

/* Cards */
.rail{display:grid;gap:18px}
@media(min-width:640px){.rail{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.rail{grid-template-columns:repeat(3,1fr);gap:22px}}
.card{display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.card-media{position:relative;aspect-ratio:4/3;background:linear-gradient(140deg,var(--navy),var(--night));display:grid;place-items:center;overflow:hidden}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media span{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.8rem,6vw,2.5rem);color:var(--gold);padding:0 1rem;text-align:center;line-height:1}
.card-body{padding:1.15rem 1.2rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card-body p{font-size:.98rem;color:#3a4759}
.where{font-weight:600;font-size:.92rem;color:var(--navy)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.8rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;background:rgba(217,164,65,.28);color:var(--night)}
.card .link{margin-top:auto;padding-top:.4rem}

/* Filters */
.filters{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 14px;margin:0 -20px 1.2rem;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:44px;padding:0 1.05rem;border-radius:999px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);font:600 .94rem var(--body);cursor:pointer;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
@media(min-width:860px){.filters{flex-wrap:wrap;overflow:visible;margin:0 0 1.6rem;padding:0}}

/* Empty state */
.empty{border-radius:26px;padding:clamp(1.6rem,5vw,3rem);background:var(--navy);color:var(--cream);display:grid;gap:1rem;position:relative;overflow:hidden}
.empty:after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.5),rgba(217,164,65,0) 65%)}
.empty>*{position:relative;z-index:2}
.empty p{max-width:46ch;color:rgba(248,245,239,.88)}
.empty .btn{justify-self:start}

/* Events */
.events{display:grid;gap:12px}
.event{display:grid;grid-template-columns:86px 1fr;gap:1rem;align-items:start;padding:1.1rem;border-radius:20px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.when{display:grid;place-items:center;text-align:center;border-radius:14px;background:var(--navy);color:var(--cream);padding:.7rem .3rem;line-height:1.05}
.when b{font-family:var(--display);font-size:2rem;font-weight:600;display:block}
.when span{font-size:.82rem;font-weight:600;color:var(--gold)}
.event p{font-size:.97rem;color:#3a4759;margin-top:.3rem}
.event .link{display:inline-block;margin-top:.6rem}
@media(min-width:860px){.events{grid-template-columns:1fr 1fr;gap:16px}}

/* Date night plan: three real stops in order */
.plan{border-radius:26px;background:#fff;border:1px solid var(--line);color:var(--ink);padding:clamp(1.3rem,4vw,2.2rem);display:grid;gap:1.2rem}
.plans{display:grid;gap:18px}
.stops{display:grid;gap:0;counter-reset:stop}
.stops li{counter-increment:stop;position:relative;padding:0 0 1.2rem 3.2rem}
.stops li:last-child{padding-bottom:0}
.stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--night);font-weight:700}
.stops li:not(:last-child):after{content:"";position:absolute;left:1.05rem;top:2.4rem;bottom:.2rem;width:2px;background:var(--line)}
.stops b{display:block;font-size:.88rem;color:var(--gold-deep)}
.stops strong{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.stops p{font-size:.96rem;color:#3a4759}
.formula{display:grid;gap:14px}
.formula li{padding:1.2rem 1.3rem;border-radius:20px;border:1.5px solid var(--line-light)}
.formula b{color:var(--gold);font-size:.92rem}
.formula h3{margin:.2rem 0 .35rem}
.formula p{font-size:.97rem;color:rgba(248,245,239,.85)}
@media(min-width:860px){.formula{grid-template-columns:repeat(3,1fr)}.plans{grid-template-columns:1fr 1fr}}

/* Watch */
.videos{display:grid;gap:18px}
@media(min-width:760px){.videos{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.videos{grid-template-columns:repeat(3,1fr)}}
.video{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);color:var(--ink)}
.video iframe{width:100%;aspect-ratio:16/9;border:0}
.video-thumb{position:relative;display:grid;place-items:center;aspect-ratio:4/5;background:linear-gradient(160deg,var(--navy),var(--night));text-decoration:none;color:var(--cream);overflow:hidden}
.video-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.play{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.play:before{content:"";border-left:22px solid var(--night);border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.video-body{padding:1rem 1.2rem 1.2rem}
.video-body span{font-size:.86rem;font-weight:600;color:var(--gold-deep)}
.follow{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}

/* Prose + two-column */
.two{display:grid;gap:2rem}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.two.lean{grid-template-columns:.85fr 1.15fr}}
.prose{display:grid;gap:1.1rem;max-width:60ch}
.prose p{font-size:1.08rem}
.pull{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.7rem,5vw,2.7rem);line-height:1.12;letter-spacing:-.02em}
.portrait{aspect-ratio:4/5;border-radius:26px;background:linear-gradient(160deg,var(--navy),var(--night));overflow:hidden;position:relative;display:grid;place-items:end start}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait span{position:relative;z-index:2;font-family:var(--display);font-style:italic;font-size:2.4rem;color:var(--gold);padding:1.4rem;line-height:1}
.offers{display:grid;gap:12px}
@media(min-width:700px){.offers{grid-template-columns:1fr 1fr}}
.offer{padding:1.25rem 1.3rem;border-radius:20px;background:#fff;border:1px solid var(--line)}
.offer p{font-size:.97rem;color:#3a4759;margin-top:.35rem}
.list-check{display:grid;gap:.6rem}
.list-check li{padding-left:1.6rem;position:relative}
.list-check li:before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;border-radius:50%;background:var(--gold)}

/* Forms */
.form{display:grid;gap:1rem;padding:clamp(1.3rem,4vw,2rem);border-radius:26px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.form label{display:grid;gap:.35rem;font-weight:600;font-size:.96rem}
.form input,.form select,.form textarea{width:100%;min-height:50px;padding:.7rem .9rem;border-radius:12px;border:1.5px solid rgba(24,49,83,.35);background:#fff;font:500 1rem var(--body);color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.form .status.bad{color:#8a1c0f}

/* Footer */
.foot{background:var(--night);color:var(--cream);padding:3rem 0 2rem}
.foot-grid{display:grid;gap:2rem}
.foot h2{font-size:1rem;font-family:var(--body);font-weight:600;color:var(--gold);margin-bottom:.7rem}
.foot li{margin:.4rem 0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot .logo{font-size:2.2rem}
.foot-tag{max-width:30ch;margin-top:.6rem;color:rgba(248,245,239,.8)}
.legal{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line-light);font-size:.88rem;color:rgba(248,245,239,.7);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between}
@media(min-width:800px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

.demo-bar{background:#8a1c0f;color:#fff;text-align:center;font-weight:600;font-size:.9rem;padding:.5rem 1rem}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.band.gold .btn{background:var(--night);border-color:var(--night);color:var(--cream)}
.band.gold .btn:hover{background:var(--navy);border-color:var(--navy)}