/* ══ TOKENS ═══════════════════════════════════════════════ */
:root, [data-theme="light"]{
  --text-xs:clamp(.75rem,.72rem + .12vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .12vw,.9375rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --text-lg:clamp(1.125rem,1rem + .6vw,1.4375rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);
  --text-2xl:clamp(2rem,1.3rem + 2.4vw,3.25rem);
  --text-3xl:clamp(2.5rem,1.3rem + 3.8vw,4.5rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Palette lifted from the 2027 Senior Living Trends bundle:
     #0a0a0a ink · #333333 secondary · #efefef offset · #cacaca rule · #e23b3f red */
  --color-bg:#FFFFFF;
  --color-surface:#EFEFEF;
  --color-surface-2:#FFFFFF;
  --color-surface-offset:#EFEFEF;
  --color-divider:#CACACA;
  --color-border:#CACACA;
  --color-text:#0A0A0A;
  --color-text-muted:#333333;
  --color-text-faint:#8A8A8A;
  --color-text-inverse:#FFFFFF;
  --color-primary:#E23B3F;
  --color-primary-hover:#BE2A2E;
  --color-primary-tint:#FBECEC;
  --color-ink:#0A0A0A;

  /* The campaign page is square-cornered throughout. */
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-full:9999px;
  --transition-interactive:150ms ease;
  --shadow-sm:none;
  --shadow-md:0 6px 20px rgba(10,10,10,.08);
  --shadow-lg:0 18px 50px rgba(10,10,10,.14);
  --content-wide:1440px;
  --label-ls:.18em;

  /* Matches the 2027 Senior Living Trends campaign page token set. */
  --font-display:'Libre Caslon Display',Georgia,serif;
  --font-body:'Nunito','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* Micro-labels and counts: same family, held apart by weight + tracking. */
  --font-mono:'Nunito','Helvetica Neue',Helvetica,Arial,sans-serif;
  /* True monospace, kept only for the JSON payload readout. */
  --font-code:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
/* Dark theme reuses the campaign's own dark panels (#0a0a0a with white Caslon
   headings and the red accent) rather than inventing a second palette. */
[data-theme="dark"]{
  --color-bg:#0A0A0A;
  --color-surface:#141414;
  --color-surface-2:#1B1B1B;
  --color-surface-offset:#141414;
  --color-divider:#2E2E2E;
  --color-border:#3A3A3A;
  --color-text:#FFFFFF;
  --color-text-muted:#B4B4B4;
  --color-text-faint:#7A7A7A;
  --color-text-inverse:#0A0A0A;
  --color-primary:#EF5C60;
  --color-primary-hover:#F47B7E;
  --color-primary-tint:#2A1414;
  --color-ink:#FFFFFF;
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 18px 50px rgba(0,0,0,.62);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --color-bg:#0A0A0A; --color-surface:#141414; --color-surface-2:#1B1B1B;
    --color-surface-offset:#141414; --color-divider:#2E2E2E; --color-border:#3A3A3A;
    --color-text:#FFFFFF; --color-text-muted:#B4B4B4; --color-text-faint:#7A7A7A;
    --color-text-inverse:#0A0A0A; --color-primary:#EF5C60; --color-primary-hover:#F47B7E;
    --color-primary-tint:#2A1414; --color-ink:#FFFFFF;
  }
}

/* ══ BASE ═════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:64px}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text);background:var(--color-bg);overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15;font-family:var(--font-display);font-weight:500}
p,li,dd{text-wrap:pretty}
button{cursor:pointer;background:none;border:none}
a{color:inherit}
::selection{background:var(--color-primary);color:#fff}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,input,select,textarea{transition:color var(--transition-interactive),background var(--transition-interactive),
  border-color var(--transition-interactive),box-shadow var(--transition-interactive),opacity var(--transition-interactive)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important}}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-primary);color:#fff;padding:var(--space-3) var(--space-4)}
.skip:focus{left:var(--space-4);top:var(--space-4)}

.eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-3)}
.eyebrow .num{color:var(--color-primary);font-weight:700}

/* ══ BUTTONS ══════════════════════════════════════════════ */
/* Campaign buttons are square, uppercase and widely tracked at 12px. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:.75rem;font-weight:700;letter-spacing:var(--label-ls);text-transform:uppercase;
  padding:var(--space-3) var(--space-6);border:1px solid transparent;border-radius:0;
  text-decoration:none;white-space:nowrap;transition:background var(--transition-interactive),
  border-color var(--transition-interactive),color var(--transition-interactive)}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{border-color:var(--color-text);color:var(--color-text);background:transparent}
.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn.sm{padding:var(--space-2) var(--space-4);font-size:.6875rem}
.btn.lg{padding:var(--space-4) var(--space-8);font-size:.8125rem}
.btn.full{width:100%}

/* ══ HEADER ═══════════════════════════════════════════════
   Mirrors the 2027 campaign bar: fixed, 64px, translucent surface over an
   8px blur, single #cacaca hairline, real logo at 36px, tracked uppercase nav. */
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--color-bg) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.hdr-in{max-width:var(--content-wide);margin:0 auto;padding:0 clamp(var(--space-5),3vw,var(--space-12));
  height:64px;display:flex;align-items:center;gap:var(--space-6)}
.brand{display:flex;align-items:center;gap:var(--space-4);text-decoration:none;flex-shrink:0;min-width:0}
.brand-logo{height:36px;width:auto;object-fit:contain;display:block}
[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .brand-logo{filter:brightness(0) invert(1)}}
.brand-sub{font-size:.6875rem;color:var(--color-text-muted);letter-spacing:var(--label-ls);
  text-transform:uppercase;padding-left:var(--space-4);border-left:1px solid var(--color-border);
  white-space:nowrap}
.hdr-nav{display:flex;gap:var(--space-6);margin-left:auto;font-size:.75rem}
.hdr-nav a{text-decoration:none;color:var(--color-text-muted);text-transform:uppercase;
  letter-spacing:var(--label-ls);padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color var(--transition-interactive),border-color var(--transition-interactive)}
.hdr-nav a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}
.hdr-act{display:flex;align-items:center;gap:var(--space-3)}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--color-border);
  color:var(--color-text-muted);transition:color var(--transition-interactive),border-color var(--transition-interactive)}
.icon-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}
/* The campaign's top-right action is a solid red square button. */
.tray-btn{display:flex;align-items:center;gap:var(--space-2);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--label-ls);padding:0 var(--space-4);height:34px;
  border:1px solid var(--color-primary);background:var(--color-primary);color:#fff;
  transition:background var(--transition-interactive),border-color var(--transition-interactive)}
.tray-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.tray-count{min-width:19px;height:19px;padding-inline:5px;display:grid;place-items:center;
  background:rgba(255,255,255,.22);color:#fff;border-radius:var(--radius-full);
  font-size:.6875rem;font-weight:700;font-variant-numeric:tabular-nums}
.tray-btn.has .tray-count{background:#fff;color:var(--color-primary)}
@media (max-width:960px){.hdr-nav{display:none}}
@media (max-width:600px){.brand-sub{display:none}}
@media (max-width:420px){.tray-btn span:first-of-type{display:none}}

/* ══ HERO ═════════════════════════════════════════════════
   Full-bleed dark photographic hero, matching the campaign: red tracked
   eyebrow, oversized white Caslon headline with a red italic accent,
   solid-red primary next to a white-outline secondary. */
.hero{position:relative;max-width:none;isolation:isolate;background:#0A0A0A;color:#fff;
  padding:clamp(var(--space-16),9vw,7.5rem) clamp(var(--space-5),3vw,var(--space-12)) clamp(var(--space-12),6vw,var(--space-20))}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("assets/hero-interior.jpg") center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.86) 42%,rgba(10,10,10,.52) 100%)}
.hero-in{max-width:var(--content-wide);margin:0 auto}
.hero .eyebrow{color:var(--color-primary)}
.hero h1{font-size:var(--text-3xl);margin:var(--space-5) 0 var(--space-6);letter-spacing:-.01em;
  font-weight:400;color:#fff;max-width:20ch}
.hero h1 em{font-style:italic;color:var(--color-primary)}
.lede{font-size:var(--text-base);color:rgba(255,255,255,.78);max-width:52ch;line-height:1.65}
.lede strong{color:#fff;font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
/* On the dark hero the secondary button reverses to a white hairline. */
.hero-cta .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.hero-cta .btn-ghost:hover{border-color:#fff;background:#fff;color:#0A0A0A}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-6);
  max-width:var(--content-wide);margin:var(--space-16) auto 0;padding-top:var(--space-8);
  border-top:1px solid rgba(255,255,255,.22)}
.stats dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:var(--label-ls);
  font-weight:600;text-transform:uppercase;color:rgba(255,255,255,.6)}
.stats dd{font-family:var(--font-display);font-size:var(--text-xl);margin-top:var(--space-1);color:#fff}
.hero-note{max-width:78ch;margin:var(--space-12) auto 0;padding-left:var(--space-5);
  border-left:2px solid var(--color-primary);font-size:var(--text-sm);color:rgba(255,255,255,.72)}
.hero-note span{color:#fff;font-style:italic}
.hero-note a{color:#fff;font-style:italic;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);
  transition:color var(--transition-interactive),border-color var(--transition-interactive)}
.hero-note a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}
@media (max-width:600px){
  .hero::after{background:linear-gradient(180deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.82) 60%,rgba(10,10,10,.92) 100%)}
}

/* ══ SECTIONS ═════════════════════════════════════════════ */
/* 112px vertical rhythm and the white / #efefef alternation of the campaign. */
.sec{max-width:var(--content-wide);margin:0 auto;
  padding:clamp(var(--space-16),7vw,7rem) clamp(var(--space-5),3vw,var(--space-12))}
.sec-alt{background:var(--color-surface);max-width:none;border-block:1px solid var(--color-border)}
.sec-alt > *{max-width:var(--content-wide);margin-inline:auto}
.sec-hd{margin-bottom:var(--space-10)}
.sec-hd h2{font-size:var(--text-xl);margin:var(--space-4) 0 var(--space-4);max-width:22ch;
  font-weight:500;letter-spacing:normal}
.sec-lede{color:var(--color-text-muted);max-width:60ch;font-size:var(--text-sm)}

/* ══ CATEGORY TABS ════════════════════════════════════════ */
.cat-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}
.cat-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface);min-width:0}
.cat-tab b{font-size:var(--text-sm);font-weight:700;line-height:1.25}
.cat-tab i{font-style:normal;font-family:var(--font-mono);font-size:.625rem;font-weight:600;
  color:var(--color-text-muted);letter-spacing:.12em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}
.cat-tab:hover{border-color:var(--color-text)}
.cat-tab[aria-selected="true"]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-text-inverse)}
.cat-tab[aria-selected="true"] i{color:rgba(255,255,255,.72)}
[data-theme="dark"] .cat-tab[aria-selected="true"] i{color:rgba(10,10,10,.7)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .cat-tab[aria-selected="true"] i{color:rgba(10,10,10,.7)}
}
.cat-note{font-size:var(--text-sm);color:var(--color-text-muted);max-width:70ch;margin-bottom:var(--space-8);
  min-height:2.9em}
.cat-note .spec{color:var(--color-text-faint)}

/* ══ SWATCH GRID ══════════════════════════════════════════
   Card language borrowed from the 2027 campaign's finish cards: square
   hairline frame, flush swatch image, Caslon name, red tracked sub-line,
   hairline-separated spec rows. */
.swatch-grid{display:grid;gap:var(--space-5);
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hard-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sw{position:relative;border:1px solid var(--color-border);border-radius:0;
  background:var(--color-surface-2);overflow:hidden;text-align:left;display:flex;flex-direction:column;
  transition:border-color var(--transition-interactive)}
.sw:hover{border-color:var(--color-text)}
.sw.in{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.sw-img{width:100%;aspect-ratio:1;background:var(--color-surface-offset);cursor:pointer;
  border:none;padding:0;display:block;position:relative}
.sw-img img{width:100%;height:100%;object-fit:cover}
.sw-ext{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:center;justify-content:center;
  gap:5px;padding:8px;font-family:var(--font-mono);font-size:.625rem;letter-spacing:var(--label-ls);
  font-weight:600;text-transform:uppercase;background:color-mix(in srgb,#0A0A0A 88%,transparent);
  color:#fff;opacity:0;transition:opacity var(--transition-interactive)}
.sw-ext svg{width:10px;height:10px;flex:none}
.sw-img:hover .sw-ext,.sw-img:focus-visible .sw-ext{opacity:1}
.sw-meta{padding:var(--space-4);display:flex;flex-direction:column;flex:1;min-width:0}
/* Campaign order: name first in Caslon, then the tracked red attribution line. */
.sw-n{order:1;font-family:var(--font-display);font-size:1.0625rem;font-weight:400;line-height:1.25;
  overflow-wrap:break-word;hyphens:auto;color:var(--color-text)}
.sw-v{order:2;font-family:var(--font-mono);font-size:.625rem;letter-spacing:var(--label-ls);
  font-weight:600;text-transform:uppercase;color:var(--color-primary);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-c{order:3;font-size:.75rem;color:var(--color-text-muted);line-height:1.35;margin-top:var(--space-2);
  padding-top:var(--space-2);border-top:1px solid var(--color-divider);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-f{order:4;display:flex;flex-wrap:wrap;gap:4px;margin-top:var(--space-3)}
.sw-act{order:5;display:flex;gap:5px;margin-top:var(--space-4);align-items:stretch}
.pill{font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.08em;
  padding:3px 7px;border-radius:0;background:transparent;border:1px solid var(--color-border);
  color:var(--color-text-muted);white-space:nowrap;text-transform:uppercase}
.pill.g{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-text-inverse)}
.pill.bc{background:transparent;border-color:var(--color-primary);color:var(--color-primary)}
[data-theme="dark"] .pill.bc{color:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.sw-add{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 8px;border-radius:0;border:1px solid var(--color-text);
  background:transparent;color:var(--color-text);font-family:var(--font-mono);font-weight:700;
  font-size:.625rem;letter-spacing:var(--label-ls);text-transform:uppercase;line-height:1;white-space:nowrap;
  overflow:hidden;transition:background var(--transition-interactive),color var(--transition-interactive),
  border-color var(--transition-interactive)}
.sw-add-i{font-size:.8rem;font-weight:700;line-height:1}
.sw-add-t{overflow:hidden;text-overflow:ellipsis}
.sw-add:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.sw-add.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.sw-add.on:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}
.sw-info{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2;width:28px;height:28px;
  display:grid;place-items:center;border-radius:var(--radius-full);
  background:color-mix(in srgb,var(--color-surface-2) 92%,transparent);
  border:1px solid var(--color-border);backdrop-filter:blur(6px);color:var(--color-text);
  font-family:var(--font-display);font-style:italic;font-size:.95rem;line-height:1;
  transition:background var(--transition-interactive),color var(--transition-interactive)}
.sw-info:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
@media (max-width:600px){.sw-add-t .x{display:none}}

/* ══ FILTERS ══════════════════════════════════════════════ */
.filters{position:sticky;top:64px;z-index:40;background:var(--color-surface);
  backdrop-filter:blur(14px);border:1px solid var(--color-divider);border-radius:var(--radius-md);
  padding:var(--space-4);margin-bottom:var(--space-8)}
.filter-row{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.search-wrap{flex:1;min-width:220px;display:flex;align-items:center;gap:var(--space-2);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);
  background:var(--color-surface-2);color:var(--color-text-faint)}
.search-wrap:focus-within{border-color:var(--color-text)}
.search-wrap input{flex:1;border:none;background:none;outline:none;font-size:var(--text-sm);min-width:0;color:var(--color-text)}
.sel-wrap{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  color:var(--color-text-muted);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.sel-wrap select,.f-grid select{border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);
  font-family:var(--font-body);letter-spacing:normal;text-transform:none;color:var(--color-text);max-width:100%}
.facets{display:none;columns:184px 5;column-gap:var(--space-6);
  margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-divider)}
.facets.open{display:block}
.facet{break-inside:avoid;margin-bottom:var(--space-5)}
.facet h4{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-muted);margin-bottom:var(--space-3);font-weight:700}
.facet-opts{display:flex;flex-direction:column;gap:var(--space-1);max-height:186px;overflow-y:auto;padding-right:2px}
.opt{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer;line-height:1.35}
.opt input{width:14px;height:14px;flex-shrink:0;accent-color:var(--color-primary);cursor:pointer}
.opt span{flex:1;min-width:0}
.opt em{font-style:normal;font-family:var(--font-mono);font-size:.625rem;color:var(--color-text-faint)}
.opt:hover span{color:var(--color-primary)}
.facet-opts.grid{flex-direction:row;flex-wrap:wrap;gap:var(--space-2);max-height:none}
.facet-opts.grid .opt{border:1px solid var(--color-border);border-radius:var(--radius-sm);
  padding:3px var(--space-2);font-family:var(--font-mono);font-size:.6875rem}
.facet-opts.grid .opt input{display:none}
.facet-opts.grid .opt.on{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-text-inverse)}
.filter-foot{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);flex:1}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);
  padding:3px var(--space-2) 3px var(--space-3);border-radius:var(--radius-full);
  background:var(--color-surface-offset);border:1px solid var(--color-border)}
.chip b{font-weight:700}
.chip button{color:var(--color-text-muted);font-size:.95rem;line-height:1;padding:0 2px}
.chip button:hover{color:var(--color-primary)}
.chip.clear{background:none;border-style:dashed}
.count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);
  letter-spacing:.06em;white-space:nowrap}
.count b{color:var(--color-text)}
.sentinel{height:1px}
.loading-more,.empty{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-8) 0}
.empty{padding:var(--space-16) var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-md)}
.empty-h{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text);margin-bottom:var(--space-2)}
.empty .btn{margin-top:var(--space-5)}
.empty p{margin-inline:auto}

/* ══ LEGEND ═══════════════════════════════════════════════ */
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--space-5)}
.lg-card{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-6);
  background:var(--color-surface)}
.lg-card h3{font-size:var(--text-lg);margin-bottom:var(--space-4)}
.lg-card p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:none}
.lg-card p + p{margin-top:var(--space-3)}
.lg-card dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-4);font-size:var(--text-sm)}
.lg-card dt{font-family:var(--font-mono);font-weight:700;color:var(--color-primary);font-size:var(--text-xs);padding-top:2px}
.lg-card dd{color:var(--color-text-muted);max-width:none}
.lg-stat strong{color:var(--color-text);font-family:var(--font-display);font-size:var(--text-base)}
.verify-note{margin-top:var(--space-8);font-size:var(--text-xs);color:var(--color-text-faint);max-width:80ch}

/* ══ CLOSER ═══════════════════════════════════════════════ */
.closer{background:var(--color-ink);color:var(--color-text-inverse);
  padding:clamp(var(--space-16),7vw,var(--space-24)) var(--space-5)}
.closer-in{max-width:760px;margin:0 auto;text-align:center}
.closer h2{font-size:var(--text-xl);margin-bottom:var(--space-5)}
.closer p{color:color-mix(in srgb,var(--color-text-inverse) 68%,transparent);font-size:var(--text-sm);
  margin:0 auto var(--space-8);max-width:56ch}
.closer .btn-primary{background:var(--color-primary)}
[data-theme="dark"] .closer{background:var(--color-surface-2);border-block:1px solid var(--color-border);
  color:var(--color-text)}
[data-theme="dark"] .closer p{color:var(--color-text-muted)}
[data-theme="dark"] .closer .btn-primary{color:#fff}

/* ══ FOOTER ═══════════════════════════════════════════════ */
/* Solid #e23b3f band with the logo knocked out to white — the campaign's
   own footer treatment (brightness-0 invert on the same PNG). */
.ftr{background:#E23B3F;color:#fff}
.ftr-top{max-width:var(--content-wide);margin:0 auto;
  padding:var(--space-12) clamp(var(--space-5),3vw,var(--space-12));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-8)}
.ftr-logo{height:40px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.ftr-tag{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:rgba(255,255,255,.9)}
.ftr-rule{border-top:1px solid rgba(255,255,255,.2)}
.ftr-note{max-width:var(--content-wide);margin:0 auto;
  padding:var(--space-4) clamp(var(--space-5),3vw,var(--space-12));
  font-size:.6875rem;line-height:1.7;color:rgba(255,255,255,.78)}

/* ══ SCRIM / DRAWERS ══════════════════════════════════════ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(10,10,10,.55);backdrop-filter:blur(3px)}
.drawer,.tray{position:fixed;z-index:90;background:var(--color-surface);display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg)}
.drawer{top:0;right:0;height:100dvh;width:min(420px,100vw);overflow-y:auto;
  border-left:1px solid var(--color-border)}
.drawer-x{position:absolute;top:var(--space-3);right:var(--space-3);z-index:5;width:32px;height:32px;
  display:grid;place-items:center;border-radius:var(--radius-full);font-size:1.4rem;line-height:1;
  background:color-mix(in srgb,var(--color-surface) 88%,transparent);border:1px solid var(--color-border);
  color:var(--color-text);backdrop-filter:blur(6px)}
.drawer-x:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.d-img{aspect-ratio:4/3;background:var(--color-surface-offset)}
.d-img img{width:100%;height:100%;object-fit:cover}
.d-body{padding:var(--space-6)}
.d-vendor{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-primary)}
.d-body h3{font-size:var(--text-lg);margin:var(--space-2) 0 var(--space-4);overflow-wrap:break-word}
.d-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-6)}
.d-specs{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3) var(--space-5);
  font-size:var(--text-sm);padding-top:var(--space-5);border-top:1px solid var(--color-divider)}
.d-specs dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--color-text-muted);padding-top:3px}
.d-specs dd{max-width:none;overflow-wrap:break-word}
.d-act{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-8)}

/* ══ TRAY ═════════════════════════════════════════════════ */
.tray{top:0;right:0;height:100dvh;width:min(468px,100vw);border-left:1px solid var(--color-border)}
.tray-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-6) var(--space-6) var(--space-5);border-bottom:1px solid var(--color-divider);position:relative}
.tray-hd h2{font-size:var(--text-lg);margin-top:var(--space-2)}
.tray-hd .drawer-x{position:static;flex-shrink:0}
.tray-scroll{flex:1;overflow-y:auto;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.pname{display:flex;flex-direction:column;gap:var(--space-2)}
.pname > span{font-size:var(--text-xs);font-weight:700}
.pname em{font-style:normal;font-weight:400;color:var(--color-text-muted)}
.pname input,.f-grid input,.f-grid textarea{border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);padding:var(--space-3);font-size:var(--text-sm);width:100%;outline:none}
.pname input:focus,.f-grid input:focus,.f-grid textarea:focus,.f-grid select:focus{border-color:var(--color-text)}
.tray-empty{text-align:center;padding:var(--space-12) var(--space-4);color:var(--color-text-muted);
  border:1px dashed var(--color-border);border-radius:var(--radius-md)}
.tray-empty svg{margin:0 auto var(--space-4);color:var(--color-text-faint)}
.te-h{font-family:var(--font-display);font-size:var(--text-base);color:var(--color-text);margin-bottom:var(--space-2)}
.tray-empty p{font-size:var(--text-sm);max-width:34ch;margin-inline:auto}
.tray-empty strong{color:var(--color-primary)}
.tgroup + .tgroup{margin-top:var(--space-6)}
.tgroup h4{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-text-muted);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-divider);
  margin-bottom:var(--space-3);display:flex;justify-content:space-between;gap:var(--space-3)}
.trow{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-2) 0}
.trow img{width:46px;height:46px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0;
  background:var(--color-surface-offset)}
.trow-t{flex:1;min-width:0}
.trow-n{font-size:var(--text-sm);font-weight:700;line-height:1.3;overflow-wrap:break-word}
.trow-m{font-size:var(--text-xs);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow-x{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--radius-full);
  color:var(--color-text-muted);font-size:1.1rem;line-height:1;border:1px solid transparent}
.trow-x:hover{color:var(--color-primary);border-color:var(--color-primary)}
.tray-tools{display:flex;gap:var(--space-2);flex-wrap:wrap;padding-top:var(--space-4);
  border-top:1px solid var(--color-divider)}
.tray-ft{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-divider);background:var(--color-surface-2)}
.tray-ft p{font-size:var(--text-sm);color:var(--color-text-muted)}
.tray-ft strong{color:var(--color-text);font-family:var(--font-display);font-size:var(--text-base)}

/* ══ REQUEST FORM ═════════════════════════════════════════ */
.req{padding-top:var(--space-5);border-top:1px solid var(--color-divider)}
.req h3{font-size:var(--text-lg)}
.req-sub{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-2) 0 var(--space-6)}
.f-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}
.f-grid label{grid-column:span 6;display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.f-grid label.f2{grid-column:span 3}
.f-grid label.f3{grid-column:span 2}
.f-grid label > span{font-size:var(--text-xs);font-weight:700}
.f-grid i{font-style:normal;color:var(--color-primary)}
.f-grid textarea{resize:vertical;font-family:var(--font-body)}
.req-err{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--color-primary);font-weight:700}
.req .btn{margin-top:var(--space-6)}
.req-fine{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;margin-top:var(--space-3)}
.req-done{text-align:center}
.rd-tick{width:46px;height:46px;margin:0 auto var(--space-5);display:grid;place-items:center;
  border-radius:var(--radius-full);background:var(--color-primary);color:#fff}
.req-done h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}
.req-done > p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0 auto var(--space-5);max-width:44ch}
.req-done code{font-family:var(--font-code);font-size:.75rem;background:var(--color-surface-offset);
  padding:1px 4px;border-radius:2px;color:var(--color-text)}
.req-done pre{text-align:left;font-family:var(--font-code);font-size:.6875rem;line-height:1.55;
  background:var(--color-ink);color:#DDD6CE;padding:var(--space-4);border-radius:var(--radius-md);
  overflow-x:auto;max-height:340px;overflow-y:auto;white-space:pre-wrap;overflow-wrap:break-word}
[data-theme="dark"] .req-done pre{background:#0C0A09;border:1px solid var(--color-border)}
.req-done .btn{margin-top:var(--space-5)}

/* ══ FAB ══════════════════════════════════════════════════ */
.fab{position:fixed;bottom:var(--space-5);left:50%;transform:translateX(-50%);z-index:70;
  display:none;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);
  background:var(--color-primary);color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);
  font-size:var(--text-sm);font-weight:700;white-space:nowrap}
.fab-n{min-width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-full);
  background:rgba(255,255,255,.24);font-family:var(--font-mono);font-size:.6875rem}
@media (max-width:860px){.fab.on{display:flex}}

@media (max-width:600px){
  .filters{position:static}
  .f-grid label.f2,.f-grid label.f3{grid-column:span 6}
  .swatch-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}
  .tray-scroll,.d-body,.tray-hd{padding:var(--space-5)}
  .tray-ft{padding:var(--space-4) var(--space-5)}
}

.trow-n a{color:inherit;text-decoration:none;border-bottom:1px solid var(--color-border)}
.trow-n a:hover{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* ---- Label treatment ----------------------------------------------------
   These micro-labels were monospace before the switch to the campaign's
   Nunito. Monospace reads optically heavier at small sizes, so the tracked
   uppercase labels need weight 600 to hold, and the numeric counts need
   tabular figures to stay column-aligned without a fixed-width face. */
.eyebrow,.stats dt,.sw-v,.pill,.facet h4,.tgroup h4,.d-specs dt,.lg-card dt,
.d-vendor,.count{font-weight:600}
.cat-tab i,.opt em,.count,.tray-count,.stats dd{font-variant-numeric:tabular-nums}

/* ══ DARK: keep brand-red buttons at brand strength ═══════ */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .tray-btn{background:#E23B3F;border-color:#E23B3F;color:#fff}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .tray-btn:hover{background:#C93034;border-color:#C93034}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .btn-primary,
  :root:not([data-theme]) .tray-btn{background:#E23B3F;border-color:#E23B3F;color:#fff}
  :root:not([data-theme]) .btn-primary:hover,
  :root:not([data-theme]) .tray-btn:hover{background:#C93034;border-color:#C93034}
}