/* ============================================================================
   DESERT MODERN — page styles: /home, /gas, mode landings (/lake /night
   /family) and /today. Pairs with desert.css (tokens + chrome + .d-* kit);
   loaded via each page's head_extra. Mockup source of truth:
   mockups/redesign-D-desertmodern.html.
   ========================================================================= */

/* ------------------------------------------------------------ page head --- */
/* Shared sand page-head block (gas / today / mode hero variants override). */
.p-head{background:var(--sand);position:relative;overflow:hidden}
/* NOTE: .p-head-in shares its element with .d-wrap — top/bottom padding only,
   never the `padding:X 0 Y` shorthand (it would erase the side gutters). */
.p-head-in{padding-top:56px;padding-bottom:48px}
.p-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6vw,76px);line-height:.94;letter-spacing:-.02em;text-transform:uppercase}
.p-sub{margin-top:14px;font-size:clamp(14.5px,1.4vw,17px);font-weight:500;max-width:58ch}

/* ================================================================ HOME ==== */

/* ---- hero: sand block, giant display headline + ask bar ---- */
.home-hero{background:var(--sand);position:relative;overflow:hidden}
.hero{max-width:1280px;margin:0 auto;padding:64px 32px 56px;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);
  gap:48px;align-items:end}
.hero-copy .date-tag{
  display:inline-block;margin-bottom:22px;background:var(--black);color:var(--cream);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:8px 16px;
}
.hero-copy h1{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(52px,8.5vw,124px);
  line-height:.92;letter-spacing:-.025em;text-transform:uppercase;
}
.hero-copy h1 .l2{color:var(--orange);display:block}
.hero-copy h1 em{font-style:normal;color:var(--orange)}

/* sun-over-ridge art above the ask bar (decorative) */
.hero-art{position:relative;height:140px;margin-bottom:-6px}
.hero-art .sun{position:absolute;right:16%;bottom:4%;width:110px;height:110px;border-radius:50%;background:var(--orange)}
.hero-art .ridge{
  position:absolute;left:-6%;right:-6%;bottom:0;height:44px;background:var(--blue);
  clip-path:polygon(0 70%,12% 45%,26% 62%,40% 30%,55% 58%,70% 22%,84% 52%,100% 38%,100% 100%,0 100%);
}
.hero-art .lines i{position:absolute;left:0;right:0;height:3px;background:var(--black);opacity:.14;display:block}

/* ask bar — the black card with the orange offset shadow */
.askbar{
  position:relative;z-index:2;background:var(--black);color:var(--cream);
  border-radius:18px;padding:22px;box-shadow:10px 10px 0 var(--orange);
}
.askbar-eyebrow{color:var(--peach);display:block;margin-bottom:10px}
.searchbox{display:flex;background:var(--cream);border-radius:12px;overflow:hidden}
.searchbox input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:var(--text);font-size:15px;color:var(--black);padding:15px 16px;
}
.searchbox input::placeholder{color:#716552}
.searchbox .go{
  border:none;background:var(--orange-deep);color:var(--cream);cursor:pointer;padding:0 20px;
  font-family:var(--text);font-weight:700;font-size:14px;letter-spacing:.01em;
}
.searchbox .go:hover{background:var(--orange-deep)}
.quicklinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.quicklinks a{
  font-size:12px;font-weight:500;border:1.5px solid rgba(251,244,230,.35);
  border-radius:999px;padding:6px 13px;opacity:.9;
}
.quicklinks a:hover{border-color:var(--orange);color:var(--orange);opacity:1}

/* directory search under the ask bar — deliberately QUIET. The ask bar above
   is the hero moment; this is a single understated underline input so the two
   never compete. (Form action/name=q pinned by test_search_page.) */
.dirsearch{display:flex;align-items:baseline;gap:14px;margin-top:14px}
.header-search{display:flex;align-items:center;flex:1;min-width:0;background:transparent;border-bottom:1.5px solid rgba(23,19,16,.4)}
.header-search:focus-within{border-bottom-color:var(--black)}
.header-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--text);font-size:13px;color:var(--black);padding:7px 2px}
.header-search input::placeholder{color:#716552}
.header-search button{border:none;background:none;color:var(--black);cursor:pointer;padding:4px 6px;display:inline-flex;align-items:center;opacity:.7}
.header-search button:hover{opacity:1;color:var(--orange-deep)}
.header-ask-instead{font-size:12px;font-weight:600;white-space:nowrap;opacity:.65;padding-bottom:2px}
.header-ask-instead:hover{color:var(--orange-deep);opacity:1}

/* ---- home sections (share their element with .d-wrap: top/bottom only) ---- */
.home-week{padding-top:64px;padding-bottom:6px}
.home-featured{padding-top:58px;padding-bottom:6px}
.home-cal{padding-top:58px;padding-bottom:64px}

/* ---- week strip: 7 day cards. Non-today cards are light (1.5px border, no
   shadow); only TODAY gets the heavy black-fill + orange-shadow treatment. ---- */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.wday{
  background:var(--cream);border:1.5px solid var(--black);border-radius:var(--d-radius);
  padding:14px 12px 12px;display:flex;flex-direction:column;gap:7px;min-height:150px;
  transition:transform .14s ease,box-shadow .14s ease;
}
.wday:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--black)}
.wday.today{background:var(--black);color:var(--cream);box-shadow:6px 6px 0 var(--orange)}
.wday-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.wd{font-family:var(--disp);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.02em}
.wday.today .wd{color:var(--orange)}
.wdm{font-size:11px;font-weight:700;opacity:.55}
.wev{font-size:12px;font-weight:500;line-height:1.3;border-left:3px solid var(--black);padding-left:8px}
.wday.today .wev{border-left-color:var(--cream)}
.wev .wt{font-style:normal;font-weight:700;display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.wev.special{border-left-color:var(--orange)}
.wev.water{border-left-color:var(--sky)}
.wev.music{border-left-color:var(--blue)}
.wday.today .wev.music{border-left-color:var(--sky)}
.wev.community{border-left-color:var(--peach)}
.wev.class{border-left-color:#8c7f6b}
.wsum{margin-top:auto;font-size:11.5px;font-weight:600;letter-spacing:0;opacity:.7}
.wempty{margin:auto;opacity:.3;font-size:18px}

/* legend chips (shared with the month calendar) */
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:11.5px;font-weight:500;opacity:.85}
.cal-legend span{display:inline-flex;align-items:center}
.leg{display:inline-block;width:11px;height:11px;border-radius:3px;border:1.5px solid var(--black);margin-right:6px}
.leg.special,.leg.ev-special{background:var(--orange)}
.leg.water,.leg.ev-water{background:var(--sky)}
.leg.music{background:var(--blue)}
.leg.community{background:var(--peach)}
.leg.class,.leg.ev-class{background:var(--sand)}

/* ---- featured around town: labeled sponsor cards + honest claim slot ---- */
.spon-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.spon{
  position:relative;background:var(--cream);border:var(--d-border);border-radius:var(--d-radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .14s ease,box-shadow .14s ease;
}
.spon:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--black)}
.spon .img{height:132px;border-bottom:var(--d-border);background-color:var(--blue);background-size:cover;background-position:center}
.spon .img--art{background-image:radial-gradient(circle at 76% 34%, var(--orange) 0 25%, var(--blue) 26%)}
.spon-label{position:absolute;top:12px;left:12px}
.spon .body{padding:16px 18px 18px}
.spon .cat{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.spon h3{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.15;margin-top:4px}
.spon .deal{font-size:13px;opacity:.75;margin-top:6px}
.spon.empty{border-style:dashed;background:transparent;justify-content:center;min-height:180px}
.spon.empty .cat{color:inherit;opacity:.55}
.spon.empty:hover{box-shadow:6px 6px 0 var(--black)}

/* ---- month calendar (real Event rows; JS-free pager) ---- */
.cal-card{background:var(--cream);border:var(--d-border);border-radius:var(--d-radius-lg);padding:20px 20px 24px}
.cal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-top .m{font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase}
.cal-nav{display:flex;gap:8px}
.cal-nav a{
  width:34px;height:34px;border:2px solid var(--black);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
}
.cal-nav a:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:var(--cream)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:6px}
.cal-card .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cell{min-height:74px;border:1.5px solid rgba(23,19,16,.18);border-radius:10px;padding:6px 7px;position:relative;font-size:11px}
.cell.empty{border:none}
.cell .d{font-weight:700;font-size:12px}
a.cell.has{border-color:var(--black);background:var(--sand-light)}
a.cell.has:hover{background:var(--sand)}
.cell.today{outline:3px solid var(--orange);outline-offset:-1.5px}
.cell.special-day{background:var(--sand)}
/* per-day count: quiet muted text in the corner — 30 black badge-dots was
   pure noise. Today's cell keeps the orange ring as the only loud mark. */
.cell-count{
  position:absolute;top:4px;right:7px;font-family:var(--disp);font-weight:700;font-size:11px;
  color:inherit;opacity:.55;
}
.cell .ev{display:block;font-size:10px;line-height:1.3;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:3px solid var(--black);padding-left:5px}
.cell .ev-special{border-left-color:var(--orange)}
.cell .ev-water{border-left-color:var(--sky)}
.cell .ev-class{border-left-color:#8c7f6b}
.cell .ev.more{border-left:none;font-weight:700;opacity:.6}
.cell .ev.classes{border-left:none;font-weight:700;color:var(--orange-deep)}
.cal-empty{padding:26px 6px;font-size:14.5px}
.cal-empty-link{font-weight:700;border-bottom:2px solid currentColor}
.cal-empty-link:hover{color:var(--orange-deep)}

/* ---- explore: color-blocked category tiles on the blue block.
   Compact: ~130px tall, modest numeral — six tiles should read as one
   scannable block, not six screens of scrolling. ---- */
.home-explore .cat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.catchip{
  border-radius:16px;padding:18px 18px 16px;min-height:130px;
  display:flex;flex-direction:column;transition:transform .14s ease;
}
.catchip:hover{transform:translate(-3px,-3px)}
.catchip .count{font-family:var(--disp);font-weight:800;font-size:clamp(32px,3vw,40px);line-height:.95;letter-spacing:-.02em}
.catchip .count.soon{font-family:var(--text);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.catchip .name{
  font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.3vw,16px);text-transform:uppercase;letter-spacing:.01em;
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.catchip.c-orange{background:var(--orange);color:var(--black)}
.catchip.c-sand{background:var(--sand);color:var(--black)}
.catchip.c-cream{background:var(--cream);color:var(--black)}
.catchip.c-black{background:var(--black);color:var(--cream)}
.catchip.c-black .count{color:var(--orange)}
.catchip.c-blue{background:var(--blue-deep);color:var(--cream);border:1.5px solid rgba(251,244,230,.25)}
.catchip.c-blue .count{color:var(--sky)}

/* secondary "need something done?" strip (still on the blue block) */
.svc-head{margin-top:48px;margin-bottom:18px}
.svc-head h2{font-size:clamp(20px,2.4vw,28px)}
.cat-strip.secondary{display:flex;flex-wrap:wrap;gap:10px}
.catchip-mini{
  display:inline-flex;align-items:center;gap:10px;
  border:2px solid rgba(251,244,230,.5);border-radius:999px;padding:10px 18px;
  font-weight:700;font-size:13px;letter-spacing:.05em;
  transition:background .15s,color .15s,border-color .15s;
}
.catchip-mini:hover{background:var(--orange);border-color:var(--orange);color:var(--black)}

/* ========================================================== MODE PAGES ==== */
.mode-hero{position:relative;overflow:hidden}
.mode-hero-in{padding-top:48px;padding-bottom:52px}
.mode-hero--lake{background:var(--blue);color:var(--cream)}
.mode-hero--night{background:var(--black);color:var(--cream)}
.mode-hero--family{background:var(--orange);color:var(--black)}

/* in-page mode switcher (the Desert chrome has no global mode toggle) */
.mode-switch{display:inline-flex;border:2px solid currentColor;border-radius:999px;overflow:hidden;margin-bottom:28px}
.mode-switch a{
  padding:9px 20px;font-size:13px;font-weight:700;letter-spacing:.02em;
  border-left:2px solid currentColor;opacity:.85;
}
.mode-switch a:first-child{border-left:none}
.mode-switch a:hover{opacity:1}
.mode-switch a.on{background:var(--cream);color:var(--black);opacity:1}
.mode-hero--family .mode-switch a.on{background:var(--black);color:var(--cream)}

.mode-eyebrow{opacity:.85;margin-bottom:12px;display:block}
.mode-hero h1{font-size:clamp(36px,6vw,72px)}
.mode-blurb{margin-top:16px;font-size:clamp(15px,1.5vw,17px);font-weight:500;max-width:54ch;opacity:.92}

/* live mini-conditions strip (Lake) — deep-links to /today */
.mini-cond{
  display:inline-flex;margin-top:28px;background:var(--cream);color:var(--black);
  border:var(--d-border);border-radius:var(--d-radius);overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease;
}
.mini-cond--link:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--black)}
.mini-cond .m{padding:12px 20px;border-left:2px solid var(--black);text-align:center}
.mini-cond .m:first-child{border-left:none}
.mini-cond .v{font-family:var(--disp);font-weight:800;font-size:20px;line-height:1.1}
.mini-cond .l{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:2px}

.mode-tiles{padding-top:54px;padding-bottom:80px}
.mode-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mode-tile{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--cream);border:var(--d-border);border-radius:var(--d-radius);padding:18px;
  transition:transform .14s ease,box-shadow .14s ease;
}
.mode-tile:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--orange)}
.mode-tile .e{font-size:22px;flex:none}
.mode-tile .t{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;line-height:1.15}
.mode-tile .n{font-size:12.5px;opacity:.7;margin-top:3px}

/* ================================================================= GAS ==== */
.gas-sec{padding-top:42px}
.gas-sec .d-sec-head{margin-bottom:20px}
.gas-sec .d-sec-head h2{font-size:clamp(22px,3vw,34px)}

.gas-freshness{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:var(--cream);border:2px solid var(--black);border-radius:999px;
  padding:8px 16px;font-size:13px;font-weight:500;
}
.gas-freshness .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none}
.gas-freshness.is-stale{background:var(--orange)}
.gas-freshness.is-stale .dot{background:var(--black)}

.gas-avg{
  display:flex;flex-wrap:wrap;gap:28px;align-items:center;
  background:var(--blue);color:var(--cream);
  border:var(--d-border-thick);border-radius:var(--d-radius-lg);padding:30px 32px;
}
.gas-avg .d-eyebrow,.gas-avg .eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--peach)}
.gas-avg-price{font-family:var(--disp);font-weight:800;font-size:clamp(44px,6vw,72px);line-height:1;margin-top:6px}
.gas-avg-sub{font-size:13px;opacity:.75;margin-top:6px}
.gas-avg-grades{display:flex;flex-wrap:wrap;gap:14px;margin-left:auto}
.gas-avg-grade{text-align:center;border:1.5px solid rgba(251,244,230,.35);border-radius:12px;padding:10px 16px}
.gas-avg-grade .l{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.7;display:block}
.gas-avg-grade .v{font-family:var(--disp);font-weight:800;font-size:19px}

.gas-cheap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gas-card{
  background:var(--cream);border:var(--d-border);border-radius:var(--d-radius);
  padding:18px;display:flex;flex-direction:column;gap:4px;
  transition:transform .14s ease,box-shadow .14s ease;
}
a.gas-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--black)}
.gas-card .rank{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep)}
.gas-card .price{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1}
.gas-card .name{font-weight:700;font-size:14.5px}
.gas-card .addr{font-size:12px;opacity:.65}

.gas-table-wrap{overflow-x:auto;border:var(--d-border);border-radius:var(--d-radius);background:var(--cream)}
.gas-table{width:100%;border-collapse:collapse;font-size:14px}
.gas-table th{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;padding:12px 16px;background:var(--black);color:var(--cream);
}
.gas-table th.num,.gas-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.gas-table td{padding:11px 16px;border-top:1.5px solid rgba(23,19,16,.12);vertical-align:top}
.gas-table td a{font-weight:700;border-bottom:2px solid var(--orange)}
.gas-table td a:hover{color:var(--orange-deep)}
.gas-table .addr{font-size:12px;opacity:.6;font-weight:400}

.gas-empty{background:var(--cream);border:var(--d-border);border-radius:var(--d-radius-lg);padding:42px 28px;text-align:center}
.gas-empty h2{font-family:var(--disp);font-weight:800;font-size:26px;text-transform:uppercase}
.gas-empty p{margin-top:10px;opacity:.8}
.gas-note{font-size:12.5px;opacity:.65;padding-top:28px;padding-bottom:64px}

/* =============================================================== TODAY ==== */
.today-sec{padding-top:40px}
.today-warning{
  background:var(--orange);color:var(--black);border:var(--d-border);
  border-radius:var(--d-radius);padding:16px 20px;font-weight:500;margin-bottom:22px;
}
.today-asof{margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.today-card .t-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:8px}
.t-val{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1.05}
.t-val.unavail{font-size:20px;opacity:.55}
.t-sub{font-size:13px;opacity:.7;margin-top:4px}
.t-attr{font-size:11.5px;opacity:.55;margin-top:8px}
.today-note{font-size:13px;opacity:.7;padding-top:28px;padding-bottom:64px;max-width:72ch}

/* ========================================================= responsive ===== */
@media(max-width:1080px){
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-art{display:none}
  .week-strip{grid-template-columns:repeat(4,1fr)}
  .spon-row{grid-template-columns:1fr 1fr}
  .home-explore .cat-strip{grid-template-columns:1fr 1fr}
  .gas-cheap-grid{grid-template-columns:1fr 1fr}
  .mode-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .hero{padding:44px 20px 44px}
  .home-week,.home-featured{padding-top:48px}
  .home-cal{padding-top:48px;padding-bottom:52px}
  .week-strip{grid-template-columns:1fr 1fr;gap:10px}
  .wday{min-height:120px}
  .spon-row{grid-template-columns:1fr}
  .home-explore .cat-strip{grid-template-columns:1fr 1fr;gap:12px}
  .catchip{min-height:120px;padding:16px 14px 14px}
  .catchip .count{font-size:32px}
  .catchip .name{font-size:14px}
  /* month grid: tighter cells so all 7 columns always fit the viewport */
  .cal-card{padding:14px 10px 18px}
  .cal-top .m{font-size:18px}
  .dow{gap:4px}
  .cal-card .grid{gap:4px}
  .cell{min-height:48px;min-width:0;padding:4px 5px}
  .cell .d{font-size:11px}
  .cell-count{font-size:10px;top:3px;right:5px}
  .cell .ev{display:none}             /* date-picker behavior on small screens */
  .gas-cheap-grid{grid-template-columns:1fr}
  .gas-avg{padding:22px 20px}
  .gas-avg-grades{margin-left:0}
  .mode-strip{grid-template-columns:1fr}
  .mode-switch{width:100%;justify-content:stretch}
  .mode-switch a{flex:1;text-align:center;padding:9px 0}
  .mini-cond{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .wday,.spon,.catchip,.gas-card,.mode-tile,.mini-cond{transition:none}
  .wday:hover,.spon:hover,.catchip:hover,a.gas-card:hover,.mode-tile:hover,.mini-cond--link:hover{transform:none}
}

/* ===== Workstream G — home reorder: category strip, Tier-1 marquee, Tier-3 promoted ===== */

/* Compact category strip directly under the hero — breadth + counts above the fold. */
.home-catstrip{padding-top:14px;padding-bottom:2px}
.catstrip-row{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.catstrip-row::-webkit-scrollbar{display:none}
.catpill{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:7px;
  padding:8px 14px;background:var(--cream);border:var(--d-border);border-radius:999px;
  text-decoration:none;color:var(--black);white-space:nowrap;transition:.12s}
.catpill:hover{background:var(--sand);transform:translateY(-1px)}
.catpill .n{font-weight:700;color:var(--orange-deep)}
.catpill .l{font-size:.9rem}

/* Tier-1 marquee — the flagship above-the-fold unit. */
.home-marquee{padding-top:14px}
.marquee-card{display:flex;align-items:stretch;background:var(--black);
  border-radius:var(--d-radius-lg);overflow:hidden;text-decoration:none;
  box-shadow:var(--d-shadow);transition:.15s}
.marquee-card:hover{transform:translateY(-2px)}
.marquee-card .mq-img{flex:0 0 38%;min-height:150px;background:var(--sand) center/cover no-repeat}
.marquee-card .mq-img--art{background:linear-gradient(135deg,var(--orange),var(--orange-deep))}
.marquee-card .mq-body{padding:20px 24px;color:var(--cream);display:flex;flex-direction:column;gap:6px;justify-content:center}
.marquee-card .mq-body .cat{font-size:.8rem;color:var(--peach);text-transform:uppercase;letter-spacing:.04em}
.marquee-card .mq-body h2{font-family:var(--disp);font-size:1.7rem;line-height:1.05;margin:2px 0;color:var(--cream)}
.marquee-card .mq-body p{font-size:.95rem;opacity:.9;margin:0}
.marquee-card .mq-body .cta{margin-top:6px;font-weight:700;color:var(--orange)}
/* Unsold marquee — slim claim line, never a big empty box. */
.marquee-claim{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 18px;background:var(--cream);border:1px dashed var(--black);
  border-radius:var(--d-radius);text-decoration:none;color:var(--text)}
.marquee-claim .cat{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--orange-deep);font-weight:700}
.marquee-claim .claim em{color:var(--orange-deep);font-style:normal;font-weight:700}

/* Tier-3 promoted — native in-feed card after the Explore grid. */
.home-promoted{padding-top:8px}
.promoted-card{display:flex;gap:16px;align-items:center;background:var(--cream);
  border:var(--d-border);border-radius:var(--d-radius);overflow:hidden;
  padding:14px 16px;text-decoration:none;color:var(--black);transition:.12s}
.promoted-card:hover{transform:translateY(-1px);box-shadow:var(--d-shadow)}
.promoted-card .pr-img{flex:0 0 96px;align-self:stretch;min-height:80px;border-radius:var(--d-radius);background:var(--sand) center/cover no-repeat}
.promoted-card .pr-body{display:flex;flex-direction:column;gap:3px}
.promoted-card .pr-body .cat{font-size:.78rem;color:var(--blue);text-transform:uppercase;letter-spacing:.03em}
.promoted-card .pr-body h3{font-size:1.15rem;margin:1px 0}
.promoted-card .pr-body p{font-size:.9rem;color:var(--text);margin:0}
.promoted-card .pr-body .cta{margin-top:3px;font-weight:700;color:var(--orange-deep)}

@media(max-width:640px){
  .marquee-card{flex-direction:column}
  .marquee-card .mq-img{flex-basis:auto;min-height:120px}
}
@media(prefers-reduced-motion:reduce){
  .catpill,.marquee-card,.promoted-card{transition:none}
  .catpill:hover,.marquee-card:hover,.promoted-card:hover{transform:none}
}