/* Wins + Josh trip options. Visual system follows trips/la-nye-2027/index.html. */
:root {
  --black: #060814;
  --panel: #0f1530;
  --panel-2: #171f43;
  --cream: #f5ecd9;
  --text: #cfd3e8;
  --muted: #a3a9c7;
  --gold: #e8c46a;
  --gold-hi: #f6dc92;
  --indigo: #1a2366;
  --coral: #ff8a78;
  --green: #8ee6b8;
  --steel: #8b92b6;
  --line: rgba(245, 236, 217, .16);
  --accent: var(--gold);
  --max: 1120px;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --serif: "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Noto Serif Display", Georgia, "Times New Roman", serif;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.chicago { --accent: #7cc4ff; }
body.utah { --accent: #b7d3ff; }
body.palm-springs { --accent: #ff9cc0; }
body.fort-lauderdale { --accent: #56dccb; }
body.puerto-vallarta { --accent: #ffb454; }
body.new-orleans { --accent: #c3a1ff; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  color: var(--cream);
  background-color: var(--black);
  background-image:
    radial-gradient(circle at 90% 4%, rgba(232, 196, 106, .13), transparent 28rem),
    radial-gradient(1px 1px at 30px 40px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 124px 92px, rgba(232,196,106,.55), transparent),
    radial-gradient(1.5px 1.5px at 78px 150px, rgba(255,255,255,.3), transparent);
  background-size: auto, 190px 190px, 190px 190px, 190px 190px;
  font-family: var(--body);
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
h1, h2, h3, h4, p { margin-top: 0; }
.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 1rem; z-index: 100; background: var(--gold); color: var(--black); padding: .75rem 1rem; }
.skip:focus { left: 1rem; }

/* top nav */
nav.top { position: sticky; top: 0; z-index: 30; background: rgba(6, 8, 20, .93); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; }
.mark { text-decoration: none; font: 900 1.05rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.mark b { color: var(--gold); }
.nav-links { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { padding: .5rem .7rem; color: var(--muted); text-decoration: none; white-space: nowrap; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1px solid transparent; }
.nav-links a:hover { color: var(--cream); }
.nav-links a[aria-current="page"] { color: var(--gold-hi); border-color: var(--gold); background: rgba(232,196,106,.1); }
.menu-btn { display: none; }

/* poster masthead */
.poster { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.poster::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,8,20,.97) 0%, rgba(6,8,20,.7) 48%, rgba(6,8,20,.05) 100%),
    repeating-conic-gradient(from -50deg at 84% 112%, color-mix(in srgb, var(--accent) 22%, transparent) 0 1.2deg, transparent 1.2deg 6deg),
    radial-gradient(circle at 84% 112%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 22rem);
}
.poster-art { position: absolute; right: 0; bottom: 0; width: min(46%, 600px); height: auto; color: var(--accent); opacity: .9; pointer-events: none; }
.poster .shell { position: relative; z-index: 2; padding: 2.6rem 0 2.4rem; }
.over { display: flex; align-items: center; gap: .8rem; color: var(--accent); font-weight: 900; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; }
.over::before { content: ""; width: 42px; height: 2px; background: currentColor; }
h1 { margin: .9rem 0 1.2rem; font: 700 clamp(3rem, 10vw, 5.6rem)/.92 var(--serif); letter-spacing: -.025em; max-width: 11ch; }
.lede { max-width: 34rem; margin: 0; color: #e3e5f3; font-size: 1.05rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.tag { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--line); background: rgba(10,14,31,.8); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.tag::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--accent); }

/* hearts */
.heart { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; margin-top: 1.4rem; padding: .6rem 1rem; border: 1px solid var(--accent); background: transparent; color: var(--cream); font: 800 .74rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.heart svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; transition: transform .25s ease; }
.heart[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.heart[aria-pressed="true"] svg { fill: var(--accent); transform: scale(1.15); }
.heart-who { display: block; margin-top: .5rem; color: var(--muted); font-size: .8rem; min-height: 1.2em; }

/* sections */
.section { padding: 3rem 0 1rem; }
.section:last-of-type { padding-bottom: 4rem; }
.kicker { margin-bottom: .6rem; color: var(--accent); font: 900 .7rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; }
h2 { margin-bottom: .5rem; font: 700 clamp(2rem, 4.6vw, 3.2rem)/1 var(--serif); letter-spacing: -.02em; }
.intro { max-width: 40rem; color: var(--muted); font-size: .95rem; }

/* date windows */
.windows { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-top: 1.4rem; background: var(--line); border: 1px solid var(--line); }
.win { padding: 1.1rem 1rem 1.2rem; background: var(--panel); border-top: 3px solid var(--steel); }
.win.best { border-top-color: var(--accent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--panel) 70%); }
.win small { display: block; color: var(--muted); font: 900 .64rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.win.best small { color: var(--accent); }
.win b { display: block; margin: .35rem 0 .5rem; font: 700 1.55rem/1.05 var(--serif); }
.win p { margin: 0; color: var(--text); font-size: .85rem; line-height: 1.45; }

/* flights */
.legs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.4rem; }
.leg { padding: clamp(1.2rem, 3vw, 1.7rem); background: linear-gradient(150deg, var(--panel), #080b1c); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.who { color: var(--accent); font: 900 .7rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.route { margin: .6rem 0 .2rem; font: 700 clamp(2rem, 4.4vw, 2.8rem)/1 var(--serif); letter-spacing: -.02em; }
.route span { color: var(--steel); font-weight: 400; }
.leg .note { margin: .35rem 0 0; color: var(--muted); font-size: .85rem; }
.fares { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fares li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid rgba(245,236,217,.08); font-size: .88rem; color: var(--text); }
.fares li:last-child { border-bottom: 0; }
.fares li small { display: block; color: var(--muted); font-size: .74rem; }
.fares .n { color: var(--cream); font: 700 1.15rem/1.1 var(--serif); white-space: nowrap; }
.fares li.pick .n { color: var(--gold-hi); }
.easy { margin-top: 1rem; padding: clamp(1.2rem, 3vw, 1.6rem); border: 1px solid rgba(232,196,106,.55); border-left: 6px solid var(--gold); background: linear-gradient(150deg, rgba(232,196,106,.12), var(--panel) 55%); }
.easy h3 { margin: 0 0 .5rem; font: 700 1.5rem/1.1 var(--serif); }
.easy ol { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--text); font-size: .92rem; }
.easy li { margin-top: .35rem; }
.easy li b, .easy p b { color: var(--cream); }
.easy p { margin: .6rem 0 0; color: var(--text); font-size: .9rem; }
.total { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(232,196,106,.3); }
.total span { color: var(--muted); font-size: .8rem; }
.total b { display: block; color: var(--gold-hi); font: 700 1.35rem/1.1 var(--serif); }

/* stay */
.hotels { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1.4rem; }
.hotel { padding: 1.2rem 1.3rem 1.3rem; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--steel); }
.hotel.pick { border-top-color: var(--accent); background: linear-gradient(170deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--panel) 50%); }
.hotel-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; }
.hotel h3 { margin: 0 0 .15rem; font: 700 1.4rem/1.1 var(--serif); }
.hotel .where { color: var(--muted); font-size: .8rem; }
.hotel .rate { text-align: right; white-space: nowrap; font: 700 1.3rem/1 var(--serif); color: var(--cream); }
.hotel .rate small { display: block; margin-top: .25rem; font: 400 .7rem/1.2 var(--body); color: var(--muted); }
.hotel p { margin: .7rem 0 0; color: var(--text); font-size: .88rem; }
.chip { display: inline-block; margin-top: .7rem; margin-right: .3rem; padding: .28rem .5rem; border: 1px solid var(--line); color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.chip.gold { border-color: var(--gold); color: var(--gold-hi); }
.chip.ok { border-color: rgba(142,230,184,.5); color: var(--green); }
.home-stay { margin-top: 1.4rem; padding: clamp(1.3rem, 3vw, 1.8rem); border: 1px solid var(--line); border-left: 6px solid var(--accent); background: var(--panel); }
.home-stay h3 { margin: 0 0 .4rem; font: 700 1.6rem/1.1 var(--serif); }
.home-stay p { margin: 0; color: var(--text); }

/* scene */
.events { margin-top: 1.4rem; border: 1px solid var(--line); }
.ev { display: grid; grid-template-columns: 8.5rem minmax(0,1fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.15rem; background: var(--panel); border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev .when { color: var(--accent); font: 900 .72rem/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.ev b { display: block; font: 900 1.12rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.ev p { margin: .25rem 0 0; color: var(--text); font-size: .86rem; }
.ev a.go { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; text-decoration-color: var(--line); }
.ev a.go:hover { color: var(--cream); }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-top: 1rem; }
.list { padding: 1.2rem 1.3rem; background: var(--panel); border: 1px solid var(--line); }
.list h3 { margin: 0 0 .5rem; font: 900 1.05rem/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.list ul { margin: 0; padding: 0; list-style: none; }
.list li { padding: .5rem 0; border-bottom: 1px solid rgba(245,236,217,.07); color: var(--text); font-size: .88rem; }
.list li:last-child { border-bottom: 0; }
.list li b { color: var(--cream); }

/* weather + footer */
.wx { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 1rem; background: var(--line); border: 1px solid var(--line); }
.wx div { flex: 1 1 140px; padding: .9rem 1rem; background: var(--panel); }
.wx b { display: block; font: 700 1.3rem/1.1 var(--serif); }
.wx span { color: var(--muted); font-size: .76rem; }
.next-dest { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.next-dest a { text-decoration: none; color: var(--muted); font-size: .8rem; }
.next-dest a b { display: block; color: var(--cream); font: 700 1.4rem/1.1 var(--serif); }
.next-dest a:last-child { text-align: right; }
footer { padding: 2rem 0 3rem; color: var(--muted); font-size: .76rem; }
footer .shell { border-top: 1px solid var(--line); padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer a { color: var(--muted); }

/* overview: postcards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-top: 1.6rem; }
.card { position: relative; display: flex; flex-direction: column; min-height: 100%; background: var(--panel); border: 1px solid var(--line); text-decoration: none; overflow: hidden; }
.card:hover { border-color: var(--accent); }
.card-art { position: relative; height: 128px; color: var(--accent); background: radial-gradient(circle at 80% 120%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), linear-gradient(180deg, #0b1130, var(--panel)); border-bottom: 1px solid var(--line); }
.card-art svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1.2rem; }
.card .who { font-size: .64rem; }
.card h3 { margin: .45rem 0 .35rem; font: 700 1.75rem/1.02 var(--serif); letter-spacing: -.01em; }
.card p { margin: 0; color: var(--text); font-size: .88rem; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; color: var(--cream); }
.card .liked { margin-top: auto; padding-top: .8rem; color: var(--accent); font-size: .76rem; font-weight: 800; min-height: 1.6em; }
.card.chicago { --accent: #7cc4ff; } .card.utah { --accent: #b7d3ff; } .card.palm-springs { --accent: #ff9cc0; }
.card.fort-lauderdale { --accent: #56dccb; } .card.puerto-vallarta { --accent: #ffb454; } .card.new-orleans { --accent: #c3a1ff; }

.cmp { margin-top: 1.4rem; border: 1px solid var(--line); overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .86rem; }
.cmp th, .cmp td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); background: var(--panel); vertical-align: top; }
.cmp th { background: var(--panel-2); color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.cmp td:first-child { font: 900 .95rem/1.2 var(--display); text-transform: uppercase; }
.cmp td:first-child a { text-decoration: none; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .n { font: 700 1.05rem/1.1 var(--serif); white-space: nowrap; }

.bank { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-top: 1.4rem; background: var(--line); border: 1px solid var(--line); }
.bank div { padding: 1.1rem 1.1rem 1.2rem; background: var(--panel); }
.bank b { display: block; font: 700 1.7rem/1.05 var(--serif); color: var(--gold-hi); }
.bank span { display: block; margin-top: .35rem; color: var(--text); font-size: .82rem; }
.bank small { display: block; margin-top: .3rem; color: var(--muted); font-size: .74rem; }

.letter { max-width: 40rem; margin-top: 1.2rem; color: #e3e5f3; font: 400 1.25rem/1.55 var(--serif); }
.letter p { margin: 0 0 .9rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.3rem; background: var(--gold); color: #0a0d1e; text-decoration: none; font: 900 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; border: 0; cursor: pointer; }
.btn:hover { background: var(--gold-hi); }

/* mobile section bar */
.tabbar { display: none; }
@media (max-width: 760px) {
  body.has-tabbar { padding-bottom: calc(52px + min(env(safe-area-inset-bottom), 8px)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(23,31,67,.97); border-top: 2px solid var(--accent); box-shadow: 0 -10px 30px rgba(0,0,0,.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-bottom: min(env(safe-area-inset-bottom), 8px); }
  .tabbar a { display: grid; place-items: center; gap: .1rem; padding: .4rem .2rem .35rem; color: var(--cream); text-decoration: none; font-size: .56rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .tabbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar svg { color: var(--accent); }
  .tabbar a:hover, .tabbar a:focus-visible { color: var(--accent); }
  .tabbar a[aria-current="true"] { color: var(--black); background: var(--accent); }
  .tabbar a[aria-current="true"] svg { color: var(--black); }
}
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .windows { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bank { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .shell { width: min(calc(100% - 32px), var(--max)); }
  .legs, .hotels, .lists { grid-template-columns: 1fr; }
  .poster-art { width: 100%; }
  .ev { grid-template-columns: minmax(0,1fr) auto; }
  .ev .when { grid-column: 1 / -1; }
  .nav-inner { min-height: 54px; position: relative; }
  .menu-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .45rem .75rem; background: transparent; border: 1px solid var(--line); color: var(--cream); font: 800 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .menu-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menu-btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold-hi); }
  .nav-links { display: none; position: absolute; top: 100%; right: -16px; left: -16px; flex-direction: column; gap: 0; padding: .4rem 16px .8rem; background: #060814; border-bottom: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .9rem .2rem; font-size: .82rem; border: 0; border-bottom: 1px solid rgba(245,236,217,.07); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a[aria-current="page"] { border: 0; border-left: 3px solid var(--gold); padding-left: .7rem; background: rgba(232,196,106,.08); }
  .poster-art { opacity: .3; }
}
@media (max-width: 560px) {
  .cmp { overflow: visible; border: 0; }
  .cmp table { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tr { display: block; margin-bottom: .8rem; border: 1px solid var(--line); }
  .cmp td { display: grid; grid-template-columns: 6.5rem minmax(0,1fr); gap: .6rem; padding: .55rem .9rem; }
  .cmp td::before { content: attr(data-label); color: var(--muted); font: 800 .62rem/1.6 var(--body); letter-spacing: .1em; text-transform: uppercase; }
  .cmp td:first-child { display: block; background: var(--panel-2); }
  .cmp td:first-child::before { content: none; }
  .cards, .windows { grid-template-columns: 1fr; }
  .bank { grid-template-columns: 1fr 1fr; }
  .bank b { font-size: 1.4rem; }
  .next-dest a b { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .heart svg { transition: none; } }