/*
Theme Name: Dallas RV SuperSale
Theme URI: https://www.dallasrvsupersale.com/
Author: Wheeler Advertising
Description: Site theme for the Dallas RV SuperSale, built for the 2027 show at the Kay Bailey Hutchison Convention Center. Renders the Home, Dealers, Exhibitor List, Event Map, Information and Advertising pages from templates, so the existing pages and URLs are reused as-is.
Version: 1.2
Build: 2026-09-04 14:02
Requires at least: 6.0
Tested up to: 7.0
License: Proprietary
Text Domain: drvss
*/

/* ==========================================================================
   Dallas RV SuperSale 2027 - prototype stylesheet
   Wheeler Advertising
   ========================================================================== */

:root{
  --navy-900:#081123;
  --navy-800:#0d1b3e;
  --navy-700:#14275a;
  --blue-500:#1b4fa0;
  --blue-400:#2f6bcc;
  --red-600:#c8161d;
  --red-500:#e02127;
  --gold-500:#f5c518;
  --gold-400:#ffd648;
  --ink:#111827;
  --body:#3f4756;
  --muted:#6b7280;
  --line:#e3e7ee;
  --paper:#ffffff;
  --shell:#f5f7fb;

  --wrap:1180px;
  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(8,17,35,.06),0 2px 8px rgba(8,17,35,.05);
  --shadow-md:0 4px 12px rgba(8,17,35,.08),0 12px 32px rgba(8,17,35,.09);
  --shadow-lg:0 18px 50px rgba(8,17,35,.18);

  --display:"Barlow Condensed",Oswald,"Arial Narrow",Impact,sans-serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --header-h:82px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--blue-500);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--navy-800);
  line-height:1.06;
  letter-spacing:.005em;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem);text-transform:uppercase;font-weight:800}
h2{font-size:clamp(2rem,4vw,3rem);text-transform:uppercase;font-weight:800}
h3{font-size:clamp(1.35rem,2.2vw,1.75rem);text-transform:uppercase}
h4{font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:860px}

.section{padding:clamp(56px,7vw,96px) 0}
.section--shell{background:var(--shell)}
.section--navy{background:var(--navy-800);color:#c3cde2}
.section--navy h2,.section--navy h3{color:#fff}

.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red-500);
  margin:0 0 .75rem;
}
.section--navy .eyebrow{color:var(--gold-400)}

.section-head{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
.section-head.center{margin-inline:auto;text-align:center}
.lede{font-size:1.15rem;color:var(--muted)}

/* A single prominent line of copy that carries a section on its own. */
.statement{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.1vw,2.35rem);
  line-height:1.22;color:var(--navy-800);
  max-width:20ch;margin:0 auto 1.1em;
  text-wrap:balance;
}
.section--navy .lede{color:#a9b6d0}

/* --- Skip link ----------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold-500);color:var(--navy-900);padding:12px 20px;font-weight:700}
.skip:focus{left:12px;top:12px}

/* --- Announcement bar ---------------------------------------------------- */
.topbar{
  background:var(--red-600);
  color:#fff;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;justify-content:center;padding-block:9px;text-align:center}
.topbar strong{color:var(--gold-400)}
.topbar a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;gap:24px;
  height:var(--header-h);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{height:56px;width:auto}
.brand:hover{text-decoration:none}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  font-family:var(--sans);
  font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy-800);
  padding:10px 13px;border-radius:6px;
  position:relative;
}
.nav a:hover{background:var(--shell);text-decoration:none}
.nav a[aria-current="page"]{color:var(--red-600)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:3px;
  background:var(--red-600);border-radius:2px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  text-align:center;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--red-600);color:#fff;box-shadow:0 6px 18px rgba(200,22,29,.28)}
.btn-primary:hover{background:var(--red-500);box-shadow:0 10px 24px rgba(200,22,29,.34)}
.btn-gold{background:var(--gold-500);color:var(--navy-900);box-shadow:0 6px 18px rgba(245,197,24,.3)}
.btn-gold:hover{background:var(--gold-400)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{border-color:var(--navy-800);color:var(--navy-800)}
.btn-outline:hover{background:var(--navy-800);color:#fff}
.btn-sm{padding:11px 20px;font-size:.8rem}
.nav-cta{margin-left:10px}

.nav-toggle{
  display:none;margin-left:auto;
  width:46px;height:46px;border:1px solid var(--line);border-radius:8px;
  background:#fff;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy-800);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--navy-800);
}
.nav-toggle span::before{top:-7px}
.nav-toggle span::after{top:7px}

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--navy-900);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center 62%;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(8,17,35,.93) 0%,rgba(8,17,35,.82) 45%,rgba(8,17,35,.55) 100%);
}
.hero .wrap{padding-block:clamp(64px,9vw,120px)}
.hero__inner{max-width:760px}
.hero h1{color:#fff;margin-bottom:.15em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero__year{
  display:block;
  font-size:clamp(1.05rem,2.2vw,1.5rem);
  font-family:var(--sans);font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:.9rem;
}
.hero__tag{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem);color:var(--gold-400);
  margin:0 0 1.4rem;line-height:1.15;
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:14px 34px;
  padding:22px 0 26px;margin-bottom:8px;
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.hero__meta div{min-width:150px}
.hero__meta dt{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:5px;
}
.hero__meta dd{
  margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.42rem;color:#fff;line-height:1.2;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.hero__note{margin-top:20px;font-size:.9rem;color:rgba(255,255,255,.72)}

/* Compact hero for interior pages */
.pagehead{
  position:relative;background:var(--navy-800);color:#fff;overflow:hidden;isolation:isolate;
}
.pagehead__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.34}
.pagehead::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(8,17,35,.95),rgba(13,27,62,.7))}
.pagehead .wrap{padding-block:clamp(44px,6vw,76px)}
.pagehead h1{color:#fff;font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:.25em}
.pagehead p{max-width:660px;color:#c3cde2;font-size:1.08rem;margin:0}
.crumb{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-400);margin:0 0 .9rem;
}
.crumb a{color:rgba(255,255,255,.7)}

/* --- Fact strip ---------------------------------------------------------- */
.facts{background:var(--navy-700);color:#fff}
.facts .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.14);padding:0;
}
.facts__item{background:var(--navy-700);padding:26px 22px;text-align:center}
.facts__label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin:0 0 6px;
}
.facts__value{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:1.3rem;color:#fff;margin:0;line-height:1.2;
}
.facts__value small{display:block;font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.05em;color:var(--gold-400);margin-top:4px;text-transform:none}

/* --- Generic grids ------------------------------------------------------- */
.grid{display:grid;gap:clamp(20px,2.6vw,32px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.split--wide-left{grid-template-columns:1.25fr .75fr}

.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.4em}
.card--flush{padding:0;overflow:hidden}
.card__body{padding:26px 30px 30px}

.media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.media img{width:100%}
.media figcaption{
  background:var(--navy-800);color:#c3cde2;font-size:.85rem;padding:12px 18px;
}

/* --- Dealer logos -------------------------------------------------------- */
.logos{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center;
}
.logos a,.logos div{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 16px;min-height:104px;
  transition:box-shadow .18s ease,transform .18s ease;
}
.logos a:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.logos img{max-height:58px;width:auto;object-fit:contain}
/* A circular badge reads much smaller than a wide wordmark at the same
   height, so give round marks their own cap. */
.logos .logo-round{padding-block:10px}
.logos .logo-round img{max-height:88px}

/* --- Dealer detail cards ------------------------------------------------- */
.dealer{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
}
.dealer__logo{
  display:flex;align-items:center;justify-content:center;
  background:var(--shell);border-bottom:1px solid var(--line);
  padding:26px;min-height:128px;
}
.dealer__logo img{max-height:66px;width:auto;object-fit:contain}
.dealer__logo--round{padding-block:14px}
.dealer__logo--round img{max-height:98px}
.dealer__body{padding:24px 26px 28px;flex:1}
.dealer__body h3{font-size:1.3rem;margin-bottom:.5em}
.dealer__types{
  font-size:.9rem;color:var(--muted);margin:0 0 16px;padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}
.tags li{
  font-size:.76rem;font-weight:600;letter-spacing:.04em;
  background:var(--shell);border:1px solid var(--line);color:var(--navy-700);
  padding:5px 11px;border-radius:999px;
}

/* --- Info / hours lists -------------------------------------------------- */
.deflist{margin:0;padding:0}
.deflist div{
  display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.deflist div:last-child{border-bottom:0}
.deflist dt{font-weight:600;color:var(--ink);margin:0}
.deflist dd{
  margin:0;font-family:var(--display);font-weight:700;font-size:1.2rem;
  text-transform:uppercase;color:var(--navy-800);white-space:nowrap;
}
.deflist dd.free{color:#1a7f4b}
.section--navy .deflist div{border-color:rgba(255,255,255,.16)}
.section--navy .deflist dt{color:#dbe3f2}
.section--navy .deflist dd{color:var(--gold-400)}

.note{
  font-size:.9rem;color:var(--muted);margin-top:18px;padding-top:16px;
  border-top:1px dashed var(--line);
}

/* --- Callout ------------------------------------------------------------- */
.callout{
  background:var(--gold-500);color:var(--navy-900);
  border-radius:var(--radius);padding:28px 32px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.callout h3{margin:0 0 .25em;color:var(--navy-900)}
.callout p{margin:0;font-weight:600;font-size:.98rem}

/* --- Gallery ------------------------------------------------------------- */
.gallery{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.gallery a{
  display:block;border-radius:var(--radius-sm);overflow:hidden;
  aspect-ratio:4/3;background:var(--shell);
}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.gallery a:hover img{transform:scale(1.06)}

/* --- RV lineup ----------------------------------------------------------- */
.section--lineup{background:linear-gradient(180deg,#fff 0%,var(--shell) 100%)}

.lineup-scroll{
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:8px 0 4px;
}
.lineup{
  --unit-h:clamp(78px,8vw,122px);
  display:flex;align-items:flex-end;justify-content:center;
  min-width:min-content;
  padding:0 clamp(16px,3vw,32px);
}
.lineup__unit{
  --cap-h:42px;
  margin:0;flex:0 0 auto;position:relative;
  display:flex;flex-direction:column;align-items:center;
}
/* Each unit tucks behind the one before it by a share of its own width, so the
   overlap stays proportional as --unit-h scales with the viewport. Left units
   paint on top, hence the descending z-index set inline. */
.lineup__unit + .lineup__unit{margin-left:calc(-1 * var(--ml,0.18) * var(--unit-h))}
.lineup__unit img{
  position:relative;z-index:1;
  height:calc(var(--h) * var(--unit-h));
  width:auto;max-width:none;
  object-fit:contain;
}
/* Sources carry wildly different drop shadows, so each cutout is trimmed to its
   wheel-contact line and grounded with one consistent shadow instead. */
.lineup__unit::after{
  content:"";position:absolute;left:6%;right:6%;
  bottom:calc(var(--cap-h) + 10px);height:12px;
  background:radial-gradient(ellipse at center,rgba(8,17,35,.30) 0%,rgba(8,17,35,.13) 45%,transparent 72%);
  z-index:0;pointer-events:none;
}
/* Sources face different directions; mirror these so the row reads as one row. */
.lineup__unit.is-flipped img{transform:scaleX(-1)}
.lineup__unit figcaption{
  --cap-h:42px;
  margin-top:16px;height:var(--cap-h);
  font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.3;color:var(--navy-800);
  /* Units overlap, so labels must wrap rather than run into their neighbours. */
  max-width:9ch;text-align:center;white-space:normal;
}

/* --- Tables -------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;box-shadow:var(--shadow-sm);
}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.97rem}
thead th{
  background:var(--navy-800);color:#fff;text-align:left;
  font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:15px 22px;
}
tbody td{padding:14px 22px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fafbfd}
tbody tr:hover{background:#f2f6fd}
td.company{font-weight:600;color:var(--ink)}

.filter-bar{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  margin-bottom:22px;
}
.filter-bar input{
  font-family:var(--sans);font-size:1rem;
  padding:13px 18px;border:1px solid var(--line);border-radius:999px;
  min-width:280px;flex:1;max-width:420px;background:#fff;color:var(--ink);
}
.filter-bar input:focus{outline:2px solid var(--blue-400);outline-offset:1px;border-color:transparent}
.count{font-size:.88rem;color:var(--muted);font-weight:600}

/* --- Advertising --------------------------------------------------------- */
.spot{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.spot__frame{
  aspect-ratio:16/9;background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);
  font-size:.9rem;text-align:center;padding:20px;
}
.spot__frame iframe,.spot__frame video{width:100%;height:100%;border:0;display:block}
.spot__body{padding:20px 24px 24px}
.spot__body h3{font-size:1.15rem;margin-bottom:.25em}
.spot__body p{font-size:.9rem;color:var(--muted);margin:0}

.audio-row{
  display:flex;align-items:center;gap:18px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px;box-shadow:var(--shadow-sm);
}
.audio-row h3{margin:0 0 2px;font-size:1.1rem}
.audio-row p{margin:0;font-size:.85rem;color:var(--muted)}
.audio-row audio{width:100%;max-width:320px;margin-left:auto}

/* --- Footer -------------------------------------------------------------- */
.site-footer{background:var(--navy-900);color:#98a6c2;font-size:.95rem}
.site-footer .wrap{padding-block:clamp(48px,6vw,72px)}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;
  gap:clamp(28px,4vw,48px);
}
.site-footer h4{color:#fff;font-size:.85rem;letter-spacing:.15em;margin-bottom:1.1em}
.site-footer a{color:#c3cde2}
.site-footer a:hover{color:var(--gold-400)}
.site-footer img.footer-logo{height:74px;width:auto;margin-bottom:18px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:10px}
.footer-hours{list-style:none;margin:0;padding:0}
.footer-hours li{display:flex;justify-content:space-between;gap:16px;margin-bottom:9px}
.footer-hours span:last-child{color:#fff;font-weight:600;white-space:nowrap}
.footer-sponsors{
  display:flex;flex-wrap:wrap;gap:26px;align-items:center;
  margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);
}
.footer-sponsors figure{margin:0}
.footer-sponsors figcaption{
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:#7b8aa8;margin-bottom:9px;
}
.footer-sponsors img{height:44px;width:auto;background:#fff;padding:7px 12px;border-radius:6px}
.colophon{
  margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:.85rem;color:#7b8aa8;
}

/* --- Utility ------------------------------------------------------------- */
.center{text-align:center}
.mt-lg{margin-top:clamp(32px,4vw,52px)}
.stack>*+*{margin-top:20px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1040px){
  .logos{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  :root{--header-h:70px}
  .nav-toggle{display:flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    padding:10px 16px 20px;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 10px;border-radius:0;border-bottom:1px solid var(--line);font-size:.92rem}
  .nav a[aria-current="page"]::after{display:none}
  .nav-cta{margin:14px 0 0}
  .brand img{height:46px}
  .facts .wrap{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split,.split--wide-left{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:620px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .lineup{justify-content:flex-start}
  .lineup__unit figcaption{font-size:.6rem;letter-spacing:.06em;max-width:8ch}
  .logos{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero__meta{gap:18px}
  .hero__meta div{min-width:130px}
  .hero__actions .btn{width:100%}
  .footer-grid{grid-template-columns:1fr}
  .audio-row{flex-direction:column;align-items:flex-start}
  .audio-row audio{margin-left:0;max-width:100%}
  .callout{flex-direction:column;align-items:flex-start}
  .filter-bar input{min-width:0;max-width:none;width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .gallery a:hover img{transform:none}
}