:root, :root[data-theme="dark"] {
  --bg: #0b0d11; --bg2: #101319; --card: #151921; --card2: #1b2029; --line: #242a35; --line2: #303744;
  --t1: #eef0f4; --t2: #c9ced6; --t3: #98a1af; --t4: #6b7482;
  --accent: #d9a04a; --accent-ink: #1a1206; --accent-soft: rgba(217,160,74,.14);
  --ok: #7fb89a; --warn: #d4a35a; --bad: #d07a6e;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 14px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e3e6eb; --bg2: #dadee4; --card: #eef0f3; --card2: #e6e9ee; --line: #c9ced6; --line2: #b9bfc9;
  --t1: #151921; --t2: #2b313b; --t3: #4f5867; --t4: #737c8a;
  --accent: #a8721f; --accent-ink: #fff8ec; --accent-soft: rgba(168,114,31,.12);
  --shadow: 0 14px 40px rgba(20,25,33,.14);
  color-scheme: light;
}
:root[data-show="ces-2027"] { --accent: #5fb6d4; --accent-ink: #061218; --accent-soft: rgba(95,182,212,.14); }
:root[data-theme="light"][data-show="ces-2027"] { --accent: #1f7896; --accent-ink: #f2fbff; --accent-soft: rgba(31,120,150,.12); }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--t3); }
body { font: 15px/1.55 "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, .display { font-family: "Bricolage Grotesque", "Inter", sans-serif; color: var(--t1); letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(38px, 6.4vw, 84px); line-height: .98; font-weight: 750; }
h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; font-weight: 700; color: var(--t2); }
h3 { font-size: 18px; line-height: 1.25; font-weight: 650; color: var(--t1); letter-spacing: -0.01em; }
.eyebrow { font: 600 11px/1 "Inter", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--t4); }
.accent { color: var(--accent); }
.muted { color: var(--t4); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

/* top bar */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 12px 20px;
  background: linear-gradient(var(--bg) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 70%, transparent); }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--t1); font: 700 17px "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; }
.logo svg { width: 26px; height: 26px; }
.top nav { display: flex; gap: 4px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 0 1 auto; }
.top nav a { text-decoration: none; color: var(--t3); padding: 7px 11px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; }
.top nav a:hover { color: var(--t1); }
.top nav a.on { color: var(--t1); background: var(--card2); }
.top .sp { flex: 1; }
.showpick { flex-shrink: 0; display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.showpick a { text-decoration: none; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; color: var(--t3); white-space: nowrap; }
.showpick a.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.iconbtn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; color: var(--t3); }
.iconbtn:hover { color: var(--t1); }
.iconbtn svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .top nav { display: none; } .top { padding: 10px 14px; } .showpick a { padding: 5px 8px; font-size: 12px; } }
.mnav { display: none; }
@media (max-width: 860px) {
  .mnav { display: flex; position: fixed; z-index: 50; inset: auto 10px 10px 10px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-radius: 16px; padding: 6px; justify-content: space-around; }
  .mnav a { text-decoration: none; font-size: 11.5px; color: var(--t3); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; border-radius: 10px; }
  .mnav a.on { color: var(--accent); }
  .mnav svg { width: 18px; height: 18px; }
  body { padding-bottom: 76px; }
}

/* buttons, chips */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); background: var(--card); color: var(--t1); padding: 11px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; }
.btn:hover { border-color: var(--t4); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: transparent; color: var(--t3); padding: 6px 11px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.chip:hover { color: var(--t1); border-color: var(--line2); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--t1); }
.chip .n { color: var(--t4); font-variant-numeric: tabular-nums; font-size: 12px; }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t3); background: var(--card2); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.tag.hot { color: var(--accent); background: var(--accent-soft); }
.tag.spons { color: var(--t2); border: 1px dashed var(--line2); background: transparent; }

/* hero */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; }
.hero .map { position: absolute; inset: 0; }
.hero .shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 20% 80%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 45%, transparent 75%),
              linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
.hero .copy { position: absolute; left: 0; right: 0; bottom: 92px; pointer-events: none; }
.hero .copy .wrap > * { pointer-events: auto; }
.hero .copy p.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--t2); max-width: 560px; margin: 18px 0 26px; }
.hero .copy .row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .status { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 13px; color: var(--t2); background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dot.past { background: var(--t4); box-shadow: none; }
.ribbon { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ribbon .track { display: flex; gap: 10px; animation: slide 90s linear infinite; width: max-content; }
.ribbon img { height: 54px; width: 96px; object-fit: cover; border-radius: 8px; opacity: .55; filter: saturate(.75); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon .track { animation: none; } }
@media (max-width: 640px) { .hero { height: 92vh; } .hero .copy { bottom: 80px; } .ribbon { height: 46px; } .ribbon img { height: 40px; width: 70px; } }

/* sections */
section.blk { padding: 84px 0; border-top: 1px solid var(--line); }
section.blk .head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
section.blk .head p { max-width: 520px; margin: 10px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kpis > div { background: var(--bg2); padding: 22px 20px; }
.kpis b { display: block; font: 750 clamp(28px, 3.2vw, 40px)/1 "Bricolage Grotesque", sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.kpis span { font-size: 13px; color: var(--t4); }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.steps .num { font: 700 13px "Bricolage Grotesque"; color: var(--accent); }
.steps h3 { margin: 8px 0 6px; }
.steps p { margin: 0; font-size: 14px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* charts */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 14px; }
.chart h3 { font-size: 16px; }
.chart .sub { font-size: 13px; color: var(--t4); margin: 4px 0 12px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart svg text { font: 12px "Inter", sans-serif; fill: var(--t3); }
.chart svg .v { fill: var(--t4); font-variant-numeric: tabular-nums; }
.chart svg .bar { fill: var(--line2); }
.chart svg .bar.f { fill: var(--accent); }
.chart svg .lbl.f { fill: var(--t1); font-weight: 600; }
.chart svg .v.f { fill: var(--accent); font-weight: 600; }
.chart svg g.row:hover .bar { fill: var(--t4); }
.chart svg g.row:hover .bar.f { fill: var(--accent); filter: brightness(1.15); }
.chart .src { font-size: 11.5px; color: var(--t4); margin-top: 10px; }
@media (max-width: 860px) { .charts { grid-template-columns: 1fr; } }

/* quest */
.quest { min-height: 100vh; display: flex; flex-direction: column; padding-top: 70px; }
.quest .bar { height: 3px; background: var(--line); margin: 0 24px; border-radius: 3px; overflow: hidden; }
.quest .bar i { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.quest .stage { flex: 1; display: grid; place-items: center; padding: 30px 24px 60px; }
.quest .q { width: 100%; max-width: 980px; }
.quest .q h1 { font-size: clamp(32px, 5vw, 60px); margin: 10px 0 8px; }
.quest .q > p { color: var(--t3); margin: 0 0 28px; font-size: 16px; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .cards { grid-template-columns: 1fr; } }
.pick { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s ease, border-color .15s; position: relative; }
.pick:hover { transform: translateY(-2px); border-color: var(--line2); }
.pick.on { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
.pick .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--card2); display: grid; place-items: center; color: var(--accent); }
.pick .ico svg { width: 22px; height: 22px; }
.pick b { color: var(--t1); font: 650 17px "Bricolage Grotesque", sans-serif; }
.pick span { font-size: 13.5px; color: var(--t3); }
.pick kbd { position: absolute; top: 14px; right: 14px; font: 11px "Inter"; color: var(--t4); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset .chip { font-size: 14.5px; padding: 10px 15px; }
.qnav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
.toggles { display: grid; gap: 10px; margin-top: 22px; max-width: 560px; }
.tgl { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; text-align: left; }
.tgl i { width: 38px; height: 22px; border-radius: 999px; background: var(--line2); position: relative; flex: none; transition: background .2s; }
.tgl i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--t2); transition: transform .2s; }
.tgl.on i { background: var(--accent); }
.tgl.on i::after { transform: translateX(16px); background: var(--accent-ink); }
.tgl b { color: var(--t1); font-weight: 600; display: block; font-size: 14.5px; }
.tgl span { font-size: 13px; }
.loading { text-align: center; }
.loading .count { font: 750 clamp(48px, 9vw, 110px)/1 "Bricolage Grotesque"; color: var(--t1); font-variant-numeric: tabular-nums; }
.loading p { color: var(--t3); }

/* route */
.route { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.route .side { padding: 86px 28px 60px; }
.route .mapcol { position: sticky; top: 0; height: 100vh; }
.route .mapcol .map { position: absolute; inset: 0; }
@media (max-width: 980px) { .route { grid-template-columns: 1fr; } .route .mapcol { position: relative; height: 46vh; order: -1; margin-top: 58px; } .route .side { padding: 22px 16px 60px; } }
.rhead h1 { font-size: clamp(30px, 4vw, 50px); margin: 10px 0 10px; }
.rstats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; margin: 14px 0 18px; }
.rstats b { color: var(--t1); font-variant-numeric: tabular-nums; }
.daytabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 18px; }
.ractions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.timeline { position: relative; }
.stop { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; position: relative; padding: 4px 0; }
.stop .when { text-align: right; padding-top: 14px; }
.stop .when b { display: block; color: var(--t1); font: 650 16px "Bricolage Grotesque"; font-variant-numeric: tabular-nums; }
.stop .when span { font-size: 12px; color: var(--t4); }
.scard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, transform .2s; }
.scard.active { border-color: var(--accent); }
.scard .media { display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.scard .media img { width: 132px; height: 100%; min-height: 108px; object-fit: cover; background: var(--card2); }
.scard .body { padding: 13px 15px; min-width: 0; }
.scard .body h3 { font-size: 16.5px; margin: 0 0 3px; }
.scard .meta { font-size: 13px; color: var(--t4); }
.scard .why { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.scard .acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.scard .num { position: absolute; left: 76px; top: 12px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 12px "Inter"; }
@media (max-width: 520px) { .scard .media { grid-template-columns: 1fr; } .scard .media img { width: 100%; height: 130px; } .stop { grid-template-columns: 48px minmax(0,1fr); } .scard .num { left: 58px; } }
.scard.food { background: var(--bg2); border-style: dashed; }
.scard.food .body { padding: 13px 15px; }
.foodico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--card2); color: var(--accent); flex: none; }
.foodico svg { width: 19px; height: 19px; }
.leg { margin-left: 78px; padding: 8px 0 8px 16px; border-left: 2px dotted var(--line2); font-size: 12.5px; color: var(--t4); }
@media (max-width: 520px) { .leg { margin-left: 60px; } }
.empty { padding: 26px; border: 1px dashed var(--line2); border-radius: var(--radius); text-align: center; }
.alts { border-top: 1px solid var(--line); padding: 10px 15px; display: grid; gap: 6px; background: var(--bg2); }
.alts[hidden] { display: none; }
.alts button { text-align: left; background: none; border: 0; padding: 6px 0; color: var(--t2); font-size: 13.5px; display: flex; gap: 10px; justify-content: space-between; }
.alts button:hover { color: var(--accent); }

/* explore feed */
.explore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); min-height: 100vh; }
.explore .side { padding: 80px 24px 60px; }
.explore .mapcol { position: sticky; top: 0; height: 100vh; }
.explore .mapcol .map { position: absolute; inset: 0; }
@media (max-width: 980px) { .explore { grid-template-columns: 1fr; } .explore .mapcol { display: none; } .explore .side { padding: 76px 16px 60px; } }
.filters { position: sticky; top: 56px; z-index: 5; background: var(--bg); padding: 10px 0 12px; display: grid; gap: 9px; border-bottom: 1px solid var(--line); }
.filters .rowx { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.search { width: 100%; background: var(--card); border: 1px solid var(--line); color: var(--t1); border-radius: 12px; padding: 11px 14px; font: inherit; }
.search:focus { outline: none; border-color: var(--accent); }
select.sel { background: var(--card); border: 1px solid var(--line); color: var(--t2); border-radius: 999px; padding: 6px 10px; font: inherit; font-size: 13px; }
.feed { display: grid; }
.item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.item img { width: 112px; height: 72px; object-fit: cover; border-radius: 9px; background: var(--card2); }
.item h3 { font-size: 15.5px; margin: 1px 0 3px; }
.item .meta { font-size: 13px; color: var(--t4); }
.item .sum { font-size: 13.5px; color: var(--t3); margin-top: 4px; }
.item .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.item:hover h3 { color: var(--accent); }
.item.sel h3 { color: var(--accent); }
.more { margin: 18px 0; text-align: center; }

/* drawer */
.drawer { position: fixed; z-index: 80; inset: 0 0 0 auto; width: min(520px, 100%); background: var(--bg2); border-left: 1px solid var(--line); box-shadow: var(--shadow); transform: translateX(105%); transition: transform .3s ease; overflow-y: auto; }
.drawer.open { transform: none; }
.drawer img.cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--card2); }
.drawer .in { padding: 20px 22px 40px; }
.drawer h2 { font-size: 26px; color: var(--t1); margin: 8px 0; }
.drawer .close { position: absolute; top: 12px; right: 12px; }
.drawer dl { display: grid; grid-template-columns: 96px 1fr; gap: 6px 12px; font-size: 14px; margin: 16px 0; }
.drawer dt { color: var(--t4); }
.drawer dd { margin: 0; color: var(--t2); }
.drawer .desc { white-space: pre-line; font-size: 14px; color: var(--t3); border-top: 1px solid var(--line); padding-top: 14px; }
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.open { opacity: 1; pointer-events: auto; }

/* food + sponsors */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.fcard { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fcard h3 { font-size: 15.5px; }
.fcard .meta { font-size: 13px; color: var(--t4); }
.fcard p { margin: 4px 0 0; font-size: 13.5px; }
.pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .pkgs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pkgs { grid-template-columns: 1fr; } }
.pkg { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.pkg.f { border-color: var(--accent); }
.pkg .price { font: 750 28px "Bricolage Grotesque"; color: var(--t1); }
.pkg .price small { font: 500 12px "Inter"; color: var(--t4); }
.pkg ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }
.pkg li { margin: 4px 0; }
.brandlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 9px 11px; }
.brand .mono { width: 32px; height: 32px; border-radius: 8px; background: var(--card2); display: grid; place-items: center; font: 700 13px "Bricolage Grotesque"; color: var(--t2); flex: none; }
.brand b { color: var(--t1); font-size: 14px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand span { font-size: 12px; color: var(--t4); }
form.lead { display: grid; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
form.lead label { display: grid; gap: 5px; font-size: 13px; color: var(--t3); }
form.lead input, form.lead select, form.lead textarea { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--t1); font: inherit; }
form.lead input:focus, form.lead select:focus, form.lead textarea:focus { outline: none; border-color: var(--accent); }
form.lead .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { form.lead .row2 { grid-template-columns: 1fr; } }
.note { font-size: 12.5px; color: var(--t4); }
.ok { color: var(--ok); }
.banner { display: flex; gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: var(--t2); margin-bottom: 18px; }

/* landing split */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.split a.panel { position: relative; overflow: hidden; text-decoration: none; display: flex; align-items: flex-end; padding: 40px; min-height: 50vh; border-right: 1px solid var(--line); }
.split .panel .bgimgs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25%; opacity: .32; filter: saturate(.6); transition: opacity .4s, transform 1.2s ease; }
.split .panel .bgimgs img { width: 100%; height: 100%; object-fit: cover; }
.split .panel:hover .bgimgs { opacity: .5; transform: scale(1.04); }
.split .panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 8%, color-mix(in srgb, var(--bg) 40%, transparent) 60%, color-mix(in srgb, var(--bg) 70%, transparent)); }
.split .panel .in { position: relative; z-index: 1; max-width: 460px; }
.split .panel h2 { font-size: clamp(34px, 4.4vw, 58px); color: var(--t1); margin: 12px 0 10px; line-height: 1; }
.split .panel p { color: var(--t2); margin: 0 0 18px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split a.panel { padding: 90px 18px 30px; } }

footer { border-top: 1px solid var(--line); padding: 36px 0 60px; font-size: 13px; color: var(--t4); }
footer a { color: var(--t3); }

/* maplibre tweaks */
.maplibregl-ctrl-attrib { font-size: 10px !important; background: color-mix(in srgb, var(--bg) 70%, transparent) !important; color: var(--t4) !important; }
.maplibregl-ctrl-attrib a { color: var(--t3) !important; }
.maplibregl-popup-content { background: var(--card) !important; color: var(--t2) !important; border: 1px solid var(--line); border-radius: 10px !important; padding: 9px 12px !important; font: 13px "Inter"; box-shadow: var(--shadow) !important; }
.maplibregl-popup-tip { border-top-color: var(--card) !important; border-bottom-color: var(--card) !important; }
.maplibregl-popup-content b { color: var(--t1); }
.pin { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 12px "Inter"; border: 2px solid var(--bg); box-shadow: 0 4px 14px rgba(0,0,0,.5); cursor: pointer; transition: transform .2s; }
.pin.food { background: var(--card); color: var(--accent); border-color: var(--accent); width: 24px; height: 24px; }
.pin.food svg { width: 13px; height: 13px; }
.pin.active { transform: scale(1.3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* flagship strip */
.flags { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.flag { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.flag:hover { border-color: var(--accent); transform: translateY(-2px); }
.flag img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--card2); display: block; }
.flag > div { padding: 12px 14px 14px; display: grid; gap: 4px; }
.flag h3 { font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flag .meta { font-size: 12.5px; color: var(--t4); }

/* event page */
.evhero { position: relative; overflow: hidden; padding: 104px 0 46px; border-bottom: 1px solid var(--line); }
.evbg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(42px) saturate(1.3); opacity: .42; transform: scale(1.1); }
.evhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, var(--bg) 100%); }
.evgrid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.evcopy { display: grid; gap: 14px; justify-items: start; }
.evcopy .row { display: flex; gap: 10px; flex-wrap: wrap; }
.back { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--t3); text-decoration: none; }
.back:hover { color: var(--t1); }
.back svg { width: 15px; height: 15px; }
.evtitle { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.02; font-weight: 750; }
.evhost { margin: 0; color: var(--t2); }
.evhost b { color: var(--t1); font-weight: 600; }
.evcover { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.asrow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; font-size: 13px; }
.asrow .muted { margin-right: 4px; }
@media (max-width: 860px) {
  .evgrid { grid-template-columns: 1fr; gap: 24px; }
  .evcover { order: -1; aspect-ratio: 16/10; max-height: 300px; }
  .evhero { padding-top: 84px; }
}
section.blk.tight { padding: 44px 0; }

/* shorthand */
.sh { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 14px; }
.sh > div { background: var(--card); padding: 16px 18px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.sh .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--t4); }
.sh b { color: var(--t1); font: 650 16px/1.25 "Bricolage Grotesque", sans-serif; overflow-wrap: anywhere; }
.sh span { font-size: 13px; color: var(--t3); }
.sh .shscore { grid-row: span 2; display: flex; gap: 16px; align-items: center; background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
.sh .shscore b { font-size: 19px; }
.sh .shscore > div { display: grid; gap: 4px; }
.sh .shfit { grid-column: span 4; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; column-gap: 14px; }
.sh .shfit .k { grid-column: 1 / -1; }
.sh .shfit > div { display: grid; gap: 6px; font-size: 12.5px; color: var(--t3); }
.sh .shfit > div.me { color: var(--accent); font-weight: 600; }
@media (max-width: 980px) {
  .sh { grid-template-columns: 1fr 1fr; }
  .sh .shscore { grid-row: auto; grid-column: 1 / -1; }
  .sh .shfit { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
}
.ring .rbg { fill: none; stroke: var(--line2); stroke-width: 7; }
.ring .rfg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring text { fill: var(--t1); font: 750 26px "Bricolage Grotesque", sans-serif; }
.ring[width="64"] text { font-size: 19px; }
.fitbar { display: inline-flex; gap: 3px; }
.fitbar i { width: 16px; height: 6px; border-radius: 3px; background: var(--line2); }
.fitbar i.on { background: var(--accent); }
.bullets { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-width: 820px; }
.bullets li { position: relative; padding-left: 22px; color: var(--t2); font-size: 15.5px; }
.bullets li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.better { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.better .linkish { flex: 1 1 260px; text-align: left; color: var(--t2); }
.better .linkish b { color: var(--t1); }
.linkish { background: none; border: 0; padding: 0; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.linkish:hover { color: var(--accent); }
.iconbtn.sm { width: 28px; height: 28px; }
.iconbtn.sm svg { width: 13px; height: 13px; }

/* comparison tables */
.cmpt { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.cmpt table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cmpt th, .cmpt td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cmpt thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--t4); font-weight: 600; white-space: nowrap; }
.cmpt td { color: var(--t3); font-variant-numeric: tabular-nums; }
.cmpt td:first-child { min-width: 240px; }
.cmpt td .sub, .cmpgrid .sub { display: block; font-size: 12px; color: var(--t4); margin-top: 2px; }
.cmpt tr.me td { background: var(--accent-soft); }
.cmpt tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cmpt td.lit { color: var(--accent); font-weight: 650; }
.cmpt tbody tr:last-child td, .cmpt tbody tr:last-child th { border-bottom: 0; }
.cmpgrid table { table-layout: fixed; min-width: 640px; }
.cmpgrid thead th { vertical-align: top; text-transform: none; letter-spacing: 0; font-size: 14.5px; color: var(--t1); position: relative; }
.cmpgrid thead th:first-child { width: 150px; }
.cmpgrid thead img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 9px; display: block; margin-bottom: 8px; background: var(--card2); }
.cmpgrid thead .iconbtn { position: absolute; top: 16px; right: 16px; }
.cmpgrid tbody th { color: var(--t4); font-weight: 500; font-size: 13px; }
.cmpgrid td.lit { background: var(--accent-soft); }
.dots .axis { stroke: var(--line2); }
.dots circle.o { fill: var(--t4); opacity: .7; }
.dots circle.o:hover { fill: var(--t1); opacity: 1; }
.dots circle.me { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.facts { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: 14px; margin: 0 0 16px; }
.facts dt { color: var(--t4); }
.facts dd { margin: 0; color: var(--t2); overflow-wrap: anywhere; }
.facts a { color: var(--accent); }
.desc { white-space: pre-line; font-size: 14.5px; line-height: 1.6; color: var(--t3); border-top: 1px solid var(--line); padding-top: 14px; }
.evmap { height: 300px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 12px 0 6px; background: var(--card); }
.pin.alt { background: var(--card2); color: var(--t1); border-color: var(--t4); width: 22px; height: 22px; font-size: 11px; }
.pin.alt:hover { border-color: var(--accent); color: var(--accent); }

/* explore shorthand line */
.shline { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--t3); margin-top: 5px; flex-wrap: wrap; }
.shline .score { min-width: 30px; text-align: center; padding: 1px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

/* compare tray */
.cmptray { position: fixed; z-index: 60; right: 18px; bottom: 18px; display: inline-flex; gap: 8px; align-items: center; padding: 11px 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; font-size: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.cmptray[hidden] { display: none; }
.cmptray svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .cmptray { bottom: 84px; right: 12px; } }
.byrole { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--t3); margin: 4px 0 14px; }
.byrole b { color: var(--t4); font-weight: 500; margin-right: 4px; }
.cmpgrid table { min-width: 560px; }
.cmpgrid thead th:first-child { width: 120px; }

/* route: food photos, swaps, busy blocks */
.scard.food .media { grid-template-columns: 132px minmax(0, 1fr); }
.scard.food .media img, .scard .noimg { width: 132px; height: 100%; min-height: 120px; object-fit: cover; background: var(--card2); }
.scard .noimg { display: grid; place-items: center; color: var(--accent); }
.scard .noimg svg { width: 26px; height: 26px; }
@media (max-width: 520px) { .scard.food .media { grid-template-columns: 1fr; } .scard.food .media img, .scard .noimg { width: 100%; height: 140px; } }
.scard .credit { display: block; font-size: 11px; color: var(--t4); margin-top: 6px; }
.scard .warn { font-size: 12.5px; color: var(--accent); margin: 6px 0 0; }
.scard .tag svg { width: 12px; height: 12px; }
.falts { display: grid; gap: 6px; margin-top: 8px; }
.falts[hidden] { display: none; }
.falts button { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; color: var(--t2); }
.falts button:hover { border-color: var(--accent); }
.falts .th { width: 56px; height: 44px; border-radius: 8px; object-fit: cover; }
.falts b { display: block; color: var(--t1); font-size: 14px; }
.falts .muted { font-size: 12.5px; }
.stop.busy .busycard { border-style: dashed; background: repeating-linear-gradient(135deg, var(--bg2) 0 10px, var(--card) 10px 20px); }
.stop.busy .body { display: flex; gap: 12px; align-items: center; padding: 14px; }
.stop.busy .body > div { flex: 1; }
.busybox { margin: 4px 0 18px; padding: 14px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--card); display: grid; gap: 10px; }
.busybox[hidden] { display: none; }
.busybox .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ractions { flex-wrap: wrap; }
.cards.diet { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* trip */
.triphero { position: relative; overflow: hidden; padding: 110px 0 40px; border-bottom: 1px solid var(--line); }
.triphero .mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 50%; opacity: .5; }
.triphero .mosaic img { width: 100%; height: 100%; object-fit: cover; }
.triphero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 50%, color-mix(in srgb, var(--bg) 40%, transparent) 100%), linear-gradient(0deg, var(--bg), transparent 40%); }
.triphero .wrap { position: relative; z-index: 1; }
.triphero h1 { font-size: clamp(36px, 5.4vw, 72px); line-height: 1; margin: 10px 0 12px; }
.triphero p { max-width: 600px; }
.tripform { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 22px; padding: 16px; background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid var(--line2); border-radius: var(--radius); backdrop-filter: blur(10px); max-width: 980px; }
.tripform label { display: grid; gap: 6px; font-size: 12px; color: var(--t4); text-transform: uppercase; letter-spacing: .06em; }
.tripform input, .tripform select { background: var(--bg2); border: 1px solid var(--line); color: var(--t1); border-radius: 10px; padding: 9px 11px; font: 14px Inter, sans-serif; min-width: 120px; color-scheme: dark; }
:root[data-theme="light"] .tripform input { color-scheme: light; }
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { background: none; border: 0; color: var(--t3); padding: 6px 11px; border-radius: 7px; font: 600 13px Inter, sans-serif; text-transform: none; letter-spacing: 0; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.tripgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .tripgrid { grid-template-columns: 1fr; } }
.costcard { position: sticky; top: 84px; display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--card); }
.costcard .cl { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--t3); }
.costcard .cl span { display: inline-flex; gap: 7px; align-items: center; }
.costcard .cl svg, .btn svg { width: 15px; height: 15px; }
.costcard .cl b { color: var(--t1); font-variant-numeric: tabular-nums; }
.costcard .total { border-top: 1px solid var(--line); padding-top: 10px; font-size: 16px; }
.costcard .total b { color: var(--accent); font-size: 20px; }
.costcard .btn { justify-content: center; }
.daycard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 16px 18px; margin-top: 14px; scroll-margin-top: 90px; }
.dchead { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.dchead h3 { font-size: 20px; margin-top: 4px; }
.dcpics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0; }
.dcpics img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 9px; background: var(--card2); }
.dclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dclist li { display: grid; grid-template-columns: 50px 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.dclist .t { color: var(--t4); font-variant-numeric: tabular-nums; padding-top: 2px; }
.dclist .i { color: var(--accent); }
.dclist .i svg { width: 16px; height: 16px; }
.dclist .n a { color: var(--t1); text-decoration: none; font-weight: 600; }
.dclist .n a:hover { color: var(--accent); }
.dclist .n .muted { display: block; font-size: 12.5px; }
.dclist .k-food .i { color: var(--t3); }
.fcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .fcols { grid-template-columns: 1fr; } }
.fcol { display: grid; gap: 10px; align-content: start; }
.fcol h3 { font-size: 15px; color: var(--t3); text-transform: uppercase; letter-spacing: .07em; }
.fare, .hotel { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 12px; display: grid; gap: 8px; }
.fare.on, .hotel.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.fp { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fp b { font: 750 22px "Bricolage Grotesque", sans-serif; color: var(--t1); font-variant-numeric: tabular-nums; }
.fp span { font-size: 13px; color: var(--t3); }
.fl { display: grid; gap: 2px; font-size: 13px; color: var(--t3); }
.fare .row, .hotel .row { display: flex; gap: 6px; flex-wrap: wrap; }
.hotel { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
.hotel img { width: 96px; height: 96px; object-fit: cover; border-radius: 9px; background: var(--card2); }
.hotel h4 { margin: 0 0 3px; font: 650 15px/1.25 "Bricolage Grotesque", sans-serif; color: var(--t1); }
.hotel .meta { display: block; font-size: 12.5px; color: var(--t4); }
.hotel .fp b { font-size: 18px; }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 18px; }
.area { text-align: left; display: grid; gap: 4px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--t3); font-size: 13px; }
.area b { color: var(--t1); font-size: 15px; }
.area.on { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); }
.area .pc i { font-style: normal; color: var(--accent); font-weight: 700; margin-right: 3px; }
.stays { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.stay { display: grid; text-decoration: none; color: var(--t3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.stay img, .stay .noimg, .thing img, .thing .noimg { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--card2); display: grid; place-items: center; color: var(--accent); }
.stay > div { padding: 12px 14px 14px; display: grid; gap: 4px; }
.stay p, .thing p { margin: 2px 0; font-size: 13.5px; }
.stay .meta, .thing .meta { font-size: 12.5px; color: var(--t4); }
.stay:hover { border-color: var(--accent); }
.things { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.thing { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.thing.on { border-color: var(--accent); }
.thing .tb { padding: 12px 14px 14px; display: grid; gap: 4px; justify-items: start; }
.thing .addt { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--t1); display: grid; place-items: center; backdrop-filter: blur(6px); }
.thing.on .addt { background: var(--accent); color: var(--accent-ink); }
.thing .addt svg { width: 16px; height: 16px; }
.credit { font-size: 11px; color: var(--t4); }
.loadbar { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.loadbar i { display: block; height: 100%; width: 30%; background: var(--accent); animation: lb 1.2s ease-in-out infinite; }
@keyframes lb { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.warn { color: var(--accent); font-size: 13.5px; }

/* X photos + past years */
.xwall { columns: 4 240px; column-gap: 12px; margin-top: 24px; }
.xstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.xt { display: block; break-inside: avoid; margin-bottom: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--t3); }
.xt img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; display: block; background: var(--card2); }
.xstrip .xt img { aspect-ratio: 4/3; }
.xt .xmeta, .quote .xmeta { display: block; padding: 8px 10px 0; font-size: 12px; color: var(--t4); }
.xt .xmeta b { color: var(--t2); }
.xt .xtext { display: block; padding: 4px 10px 10px; font-size: 13px; line-height: 1.4; }
.xt .xev { display: block; margin: 0 10px 10px; font-size: 12px; color: var(--accent); }
.xt:hover { border-color: var(--accent); }
.chart svg .pos { fill: var(--accent); }
.chart svg .neu { fill: var(--line2); }
.chart svg .neg { fill: #c4564a; }
.chart svg .in { fill: var(--accent-ink); font-weight: 700; font-size: 11px; }
.heat { display: grid; gap: 3px; font-size: 12.5px; margin-top: 10px; }
.heat b { text-align: center; color: var(--t3); font-weight: 600; }
.heat .hl { color: var(--t3); align-self: center; }
.heat i { font-style: normal; text-align: center; padding: 7px 0; border-radius: 5px; background: color-mix(in srgb, var(--accent) calc(var(--v) * 85%), var(--card2)); color: var(--t1); font-variant-numeric: tabular-nums; }
.quotes { display: grid; gap: 10px; margin-top: 10px; }
.quotes.cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.quote { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-decoration: none; color: var(--t2); padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 10px; background: var(--card); font-size: 13.5px; line-height: 1.45; }
.quote img { grid-row: span 2; width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.quote .xmeta { padding: 0; }
.quote.pos { border-left-color: var(--accent); }
.quote.neg { border-left-color: #c4564a; }
.quote:hover { border-color: var(--line2); }
.evx { margin-top: 22px; }
.evx .eyebrow svg { width: 13px; height: 13px; vertical-align: -2px; }
.evx .xstrip { margin-top: 10px; }
.sh .shfit small.js { font-size: 11.5px; color: var(--t4); font-variant-numeric: tabular-nums; }
.sh .shfit > div.me small.js { color: var(--accent); }
.evcell { display: flex; gap: 10px; align-items: center; }
.evcell img, .evcell > span { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; background: var(--card2); }
.dots g .ring2 { fill: var(--line2); }
.dots g.me .ring2 { fill: var(--accent); }
.dots g .fill { fill: var(--t4); }
.dots g.o:hover .ring2 { fill: var(--t1); }
.fcard .fph { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; flex: none; background: var(--card2); }
.teasers .teaser { display: grid; gap: 10px; justify-items: start; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 60%), var(--card); text-decoration: none; color: var(--t3); }
.teasers .teaser:hover { border-color: var(--accent); }
.teasers .eyebrow svg { width: 13px; height: 13px; vertical-align: -2px; }
.seg button { white-space: nowrap; }
@media (max-width: 520px) { .seg { flex-wrap: wrap; } .seg button { padding: 6px 9px; } .tripform label { width: 100%; } .tripform input, .tripform select { width: 100%; } .dcpics { grid-template-columns: repeat(2, 1fr); } }

/* status pills */
.spill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap; border: 1px solid var(--line2); color: var(--t3); background: transparent; }
.spill.s-live { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.spill.s-today, .spill.s-open { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.spill.s-up { color: var(--t2); }
.spill.s-end { color: var(--t4); border-color: var(--line); }
.spill.s-sold { color: #f0a59b; border-color: #c4564a; background: rgba(196, 86, 74, .14); }
:root[data-theme="light"] .spill.s-sold { color: #9d3b30; }
.spill.s-wait { color: var(--t1); border-color: var(--t4); background: var(--card2); }
.spill.s-pend { border-style: dashed; color: var(--t2); }
.spill.s-inv { color: var(--t2); background: var(--card2); border-color: var(--card2); }
.spill.s-tba { color: var(--t4); border-style: dotted; }
.spill.s-busy { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 75%, #e8643c); border-color: transparent; }
.spill .pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pls 1.4s ease-in-out infinite; }
@keyframes pls { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .spill .pulse { animation: none; } }
.evcopy .row .spill { font-size: 12.5px; padding: 4px 11px; }
/* busyness meter */
.sh .busy { gap: 6px; }
.bmeter { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--line2), color-mix(in srgb, var(--accent) 70%, #e8643c)); opacity: .9; }
.bmeter i { position: absolute; left: 0; top: -3px; bottom: -3px; border-right: 3px solid var(--t1); }
.bmeter em { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--bg); }
.sh:has(.busy) .shfit { grid-column: span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 10px; }
@media (max-width: 980px) { .sh:has(.busy) .shfit { grid-column: 1 / -1; } }
/* explore clock */
.clockrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--t3); }
.clockrow > svg { width: 15px; height: 15px; color: var(--accent); }
.clockrow b { color: var(--t1); }
.clockrow input[type=range] { flex: 1 1 140px; accent-color: var(--accent); }
/* week heat map */
.wheat { display: grid; gap: 3px; align-items: center; }
.wheat b { font-size: 11px; color: var(--t4); font-weight: 500; text-align: left; }
.wheat .dl { font-size: 12.5px; color: var(--t3); }
.wheat .wc { height: 26px; border: 0; border-radius: 4px; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), var(--card2)); transition: transform .12s; }
.wheat .wc:hover { transform: scale(1.15); outline: 1px solid var(--t1); }
.wheat .wc.hot { box-shadow: 0 0 0 2px color-mix(in srgb, #e8643c 80%, transparent) inset; }
@media (max-width: 640px) { .wheat { grid-template-columns: 52px repeat(17, minmax(0, 1fr)) !important; gap: 2px; } .wheat .wc { height: 20px; } }

/* Real Jev marks + arrival advice */
.jdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.sh small.js.jr { color: var(--accent); font-weight: 700; }
.sh small.js.jr::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin-right: 4px; vertical-align: 2px; }
.sh .arrive { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--t2); font-weight: 600; }
.sh .arrive svg { width: 14px; height: 14px; }
.sh .arrive small { flex-basis: 100%; font-weight: 400; font-size: 11.5px; color: var(--t4); }
.sh .arrive.a-arrive_early { color: #d98a4a; }

/* ---------- Season landing ---------- */
.shero { position: relative; overflow: hidden; min-height: 82vh; display: flex; align-items: flex-end; padding: 120px 0 56px; border-bottom: 1px solid var(--line); }
.shero .bgimgs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 33.4%; opacity: .34; filter: saturate(.7); }
.shero .bgimgs img { width: 100%; height: 100%; object-fit: cover; }
.shero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 45%, transparent) 55%, color-mix(in srgb, var(--bg) 75%, transparent)); }
.shero .in { position: relative; z-index: 1; }
.shero h1 { font-size: clamp(44px, 7.4vw, 104px); line-height: .95; margin: 14px 0 14px; color: var(--t1); max-width: 900px; }
.shero p { max-width: 620px; font-size: 18px; color: var(--t2); margin: 0 0 22px; }
.shero .acts { display: flex; flex-wrap: wrap; gap: 10px; }
.shero .btn.primary { background: var(--accent); border-color: var(--accent); color: #0b0b10; }
.season { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.scard2 { position: relative; display: grid; grid-template-rows: 130px auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--t2); transition: transform .2s, border-color .2s; }
.scard2:hover { transform: translateY(-3px); border-color: var(--accent); }
.scard2 .mos { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg2); }
.scard2 .mos img { width: 100%; height: 130px; object-fit: cover; filter: saturate(.8); }
.scard2 .in { display: grid; gap: 4px; padding: 14px 16px 16px; border-top: 3px solid var(--accent); }
.scard2 b { font: 700 19px/1.15 "Bricolage Grotesque", sans-serif; color: var(--t1); }
.scard2 .n { font-size: 13px; color: var(--t3); }
.scard2 .st { justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.scard2 .st.past { background: var(--card2); color: var(--t4); }
.scard2 .st.live { background: rgba(127,184,154,.18); color: var(--ok); }
.spcta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.spcta h2 { margin: 6px 0; }

/* ---------- Sponsored slots (always labelled) ---------- */
.sptag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 8px; }
.splogo { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--bg2); border: 1px solid var(--line); flex: none; }
.splogo.t { display: inline-grid; place-items: center; font-weight: 700; color: var(--t2); }
.spbanner { display: flex; align-items: center; gap: 14px; background: var(--card2); border: 1px solid var(--line2); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.spbanner > div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.spbanner b { color: var(--t1); font-size: 14.5px; }
.spbanner span:not(.sptag) { font-size: 13px; color: var(--t3); }
.spcard { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 0; background: var(--card); border: 1px dashed var(--line2); border-radius: var(--radius); overflow: hidden; margin: 14px 0; }
.spcard > .sptag { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--bg); }
.spcard > img { width: 120px; height: 100%; min-height: 120px; object-fit: cover; }
.spcard:not(:has(> img)) { grid-template-columns: 1fr; }
.spcard .body { padding: 36px 16px 14px; display: grid; gap: 6px; }
.spcard .body h3 { margin: 0; font-size: 16.5px; color: var(--t1); }
.spcard .body p { margin: 0; font-size: 13.5px; }
.spcard .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.spcard.wide { margin: 18px 0; }
.spnear { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line2); border-radius: 10px; font-size: 13px; }
.spnear b { color: var(--t1); }
.sptagpill { background: var(--card2) !important; color: var(--t2) !important; border: 1px solid var(--line2); }

/* ---------- Sponsor form, status, admin ---------- */
.spflow, .spsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px; }
.spsteps { grid-template-columns: repeat(3, 1fr); }
.spflow > div, .spsteps > div { background: var(--bg2); padding: 16px; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--t2); }
.spflow b, .spsteps b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.spsteps .done b { background: var(--accent); color: var(--accent-ink); }
.spsteps .now { background: var(--card); color: var(--t1); font-weight: 600; }
.spgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.sppreview { position: sticky; top: 90px; }
.spform { display: grid; gap: 16px; }
.spform fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; background: var(--card); margin: 0; min-width: 0; }
.spform legend { font: 700 15px "Bricolage Grotesque", sans-serif; color: var(--t1); padding: 0 6px; }
.spform label { display: grid; gap: 5px; font-size: 13px; color: var(--t3); }
.spform .lab { font-size: 13px; color: var(--t3); display: block; margin-bottom: 6px; }
.spform input:not([type=checkbox]):not([type=radio]), .spform textarea, .admrow input { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--t1); font: inherit; min-width: 0; }
.spform input:focus, .spform textarea:focus, .admrow input:focus { outline: none; border-color: var(--accent); }
.spform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spform .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spform .chip { cursor: pointer; }
.spform .chip input { position: absolute; opacity: 0; pointer-events: none; }
.spform .chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--t1); }
.pkgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pkgpick .pk { position: relative; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; background: var(--bg2); }
.pkgpick .pk input { position: absolute; opacity: 0; }
.pkgpick .pk:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pkgpick .pk b { color: var(--t1); }
.pkgpick .price { font-weight: 700; color: var(--t1); }
.pkgpick .muted { font-size: 12.5px; }
.spform .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.spsubmit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.banner.ok { border-color: var(--ok); color: var(--t1); }
.adm { display: grid; gap: 12px; margin-top: 20px; }
.admrow { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; }
.admrow .h { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.admrow .h b { color: var(--t1); font-size: 16px; }
.admrow p { margin: 0; }
.admrow .row4 { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 8px; }
.admrow label { display: grid; gap: 4px; font-size: 12px; color: var(--t4); }
.admrow .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 900px) { .spgrid { grid-template-columns: 1fr; } .sppreview { position: static; } .spflow { grid-template-columns: 1fr 1fr; } .admrow .row4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .spform .row2 { grid-template-columns: 1fr; } .spsteps { grid-template-columns: 1fr; } .spcard { grid-template-columns: 1fr; } .spcard > img { width: 100%; height: 140px; } }

/* ---------- People ---------- */
.face { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--card2); border: 1px solid var(--line); flex: none; }
.face.t { display: inline-grid; place-items: center; font-weight: 700; color: var(--t2); font-size: 18px; }
.face.big { width: 132px; height: 132px; font-size: 40px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pcard { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-decoration: none; color: var(--t2); transition: border-color .2s, transform .2s; min-width: 0; }
.pcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.pcard > div { display: grid; gap: 2px; min-width: 0; }
.pcard b { color: var(--t1); }
.pcard .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .nx { font-size: 12px; color: var(--t4); }
.pcard .nx.on { color: var(--accent); font-weight: 600; }
.pfilters { display: grid; gap: 10px; margin-top: 22px; }
.pfilters .chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.pfilters #pq { max-width: 420px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.fcard { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--t2); }
.fcard img, .fcard .face { width: 40px; height: 40px; grid-row: span 2; border-radius: 10px; object-fit: contain; background: var(--bg2); }
.fcard b { color: var(--t1); font-size: 14px; }
.fcard .muted { font-size: 12px; }
.phero { display: flex; gap: 28px; align-items: center; }
.phero .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.apps { list-style: none; padding: 0; margin: 12px 0 18px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.apps li { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: baseline; background: var(--card); padding: 11px 14px; font-size: 14px; }
.apps.up li { background: var(--card2); }
.apps .yr { color: var(--t4); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.src { font-size: 12px; color: var(--t4); }
.hosted { display: grid; gap: 8px; margin-top: 10px; }
.hcard { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-decoration: none; color: var(--t2); }
.hcard img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; }
.hcard > div { display: grid; gap: 2px; min-width: 0; }
.hcard b { color: var(--t1); font-size: 14px; }
.hcard .muted { font-size: 12.5px; }
@media (max-width: 640px) { .phero { flex-direction: column; align-items: flex-start; } .apps li { grid-template-columns: 1fr auto; } .apps .yr { grid-column: 1 / -1; } .shero .bgimgs { grid-template-columns: repeat(3, 1fr); } }

/* Smooth updates (paint() in app.js): new pages fade in, same-page changes morph in place, keyed blocks ease in. */
.pagein { animation: pagein .22s ease-out both; }
@keyframes pagein { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.swapin { animation: swapin .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes swapin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.chip, .pick, .tgl, .btn, .showpick a, .top nav a { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
.chip:active, .pick:active, .btn:active { transform: scale(.97); }
.eyebrow svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .pagein, .swapin { animation: none; } }
@media (max-width: 1100px) { .top nav a { padding: 7px 8px; font-size: 13px; } }

/* Event page: alerts + one-click registration panel */
.go { margin: 18px 0 6px; padding: 16px 18px; border: 1px solid var(--line2); border-radius: var(--radius); background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(8px); display: grid; gap: 12px; max-width: 620px; }
.gohead { display: flex; gap: 12px; align-items: flex-start; }
.gohead b { display: block; color: var(--t1); font-size: 15px; }
.gohead span { font-size: 13.5px; color: var(--t3); }
.goico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.goico svg { width: 17px; height: 17px; }
.goform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.goform label { display: grid; gap: 5px; font-size: 12px; color: var(--t4); letter-spacing: .02em; min-width: 0; }
.goform .wide { grid-column: 1 / -1; }
.goform input:not([type="checkbox"]) { width: 100%; background: var(--bg2); border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; color: var(--t1); font: 14px "Inter", sans-serif; transition: border-color .18s ease; }
.goform input:focus-visible { outline: none; border-color: var(--accent); }
.goform .ck { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--t3); letter-spacing: 0; }
.goform .ck input { margin-top: 3px; accent-color: var(--accent); }
.goacts { display: flex; flex-wrap: wrap; gap: 8px; }
.goacts .btn svg { width: 15px; height: 15px; }
.btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--t1); }
.btn.ghost { background: transparent; }
.btn[disabled] { opacity: .85; cursor: default; }
.goerr:empty { display: none; }
.goerr { grid-column: 1 / -1; color: var(--bad); font-size: 13px; }
.gonote { margin: 0; font-size: 12.5px; color: var(--t4); }
.go .linkish { color: var(--accent); }
@media (max-width: 560px) { .goform { grid-template-columns: 1fr; } }

/* ---------- journey: save my week, start, My week ---------- */
.saveweek:empty { display: none; }
.saveweek { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 4px 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line2)); border-radius: var(--radius); background: var(--accent-soft); }
.saveweek b { display: block; font-size: 14px; }
.saveweek span:not(.swico) { font-size: 12.5px; color: var(--t3); }
.saveweek .swico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.saveweek .swico svg { width: 16px; height: 16px; }
.saveweek .goerr { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) { .saveweek { grid-template-columns: auto 1fr; } .saveweek .btn { grid-column: 1 / -1; justify-content: center; } }
.cards.wk .pick { text-align: left; border-top: 3px solid var(--accent); }
.startform { max-width: 640px; margin: 0 0 18px; }
.quest .qnav .ghost { margin-left: auto; }
.journey { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; counter-reset: j; }
.journey li > a, .journey li > div { display: grid; gap: 4px; padding: 12px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--t3); text-decoration: none; height: 100%; transition: border-color .2s ease, transform .2s ease; }
.journey li > a:hover { border-color: var(--line2); transform: translateY(-1px); }
.journey b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--card2); color: var(--t3); }
.journey b svg { width: 13px; height: 13px; }
.journey span { font-weight: 600; color: var(--t1); font-size: 13.5px; }
.journey small { font-size: 12px; color: var(--t4); }
.journey .done b { background: var(--accent); color: var(--accent-ink); }
.journey .now > a, .journey .now > div { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 900px) { .journey { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .journey { grid-template-columns: 1fr 1fr; } }
.myday { margin-top: 18px; }
.myday h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--t4); margin: 0 0 8px; }
.mystop { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 6px; color: inherit; text-decoration: none; transition: border-color .2s ease; }
.mystop:hover { border-color: var(--line2); }
.mystop .tm { display: grid; font-size: 12px; color: var(--t4); }
.mystop .tm b { font-size: 15px; color: var(--t1); }
.mystop .nm { display: grid; min-width: 0; }
.mystop .nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mystop .nm .muted { font-size: 12.5px; }
.mystop .pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) { .mystop { grid-template-columns: 56px 1fr; } .mystop .pills { grid-column: 2; justify-content: flex-start; } }
.stpill { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--card2); color: var(--t3); white-space: nowrap; }
.stpill.ok { background: rgba(127,184,154,.16); color: var(--ok); }
.stpill.wait { background: var(--accent-soft); color: var(--accent); }
.stpill.bad { background: rgba(220,110,110,.14); color: var(--bad); }
.dayof { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.dayof .doc { display: grid; gap: 8px; align-content: start; }
.dayof .doc .btn { justify-self: start; }
.recap { display: grid; gap: 6px; }
.recap .rc { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.stars button { background: none; border: 0; font-size: 20px; color: var(--t4); cursor: pointer; padding: 0 2px; transition: color .15s ease, transform .15s ease; }
.stars button.on { color: var(--accent); }
.stars button:active { transform: scale(.9); }
/* sponsor buyers + audience estimate */
.buyers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .buyers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .buyers { grid-template-columns: 1fr; } }
.buyer { text-align: left; display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--t2); font: inherit; cursor: pointer; transition: border-color .2s ease, transform .2s ease, background .2s ease; }
.buyer:hover { border-color: var(--line2); transform: translateY(-1px); }
.buyer.on { border-color: var(--accent); background: var(--accent-soft); }
.buyer b { color: var(--t1); font-size: 15px; }
.buyer span { font-size: 13px; }
.buyer small { font-size: 12px; color: var(--accent); }
.buyer em { font-style: normal; font-size: 12px; color: var(--t4); }
.spaud { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 14px; margin-bottom: 12px; }
.spaud b { color: var(--accent); }
.spaud .muted { font-size: 12px; }
.admf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.prosp { display: grid; gap: 6px; }
.prosp .pr { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); align-items: start; }
.prosp .rk { font-size: 13px; color: var(--t4); padding-top: 2px; }
.prosp .pm { display: grid; gap: 4px; min-width: 0; }
.prosp .pm p { margin: 2px 0; font-size: 13.5px; color: var(--t2); }
.prosp .pm .muted { font-size: 12.5px; }
.prosp .pk { display: grid; gap: 4px; justify-items: end; text-align: right; }
@media (max-width: 640px) { .prosp .pr { grid-template-columns: 26px 1fr; } .prosp .pk { grid-column: 2; justify-items: start; text-align: left; } }