/* ==========================================================================
   Central Florida Queer Arts — site.css
   Direction: HOUSE LIGHTS DOWN.

   The organization lives in a theatre, so the room is dark and the gels are
   lighting instruments rather than trim. Roscolux numbers are kept because
   they are the real vocabulary of the work. Dark is the designed primary;
   the light theme is the program note you read with the houselights up, and
   it is reachable from the header on every page.

   Colour rule, enforced throughout: a gel at full strength is for display
   sizes and fills. Small text uses the -txt variant, which is the same gel
   pulled to AA contrast against its own ground.
   ========================================================================== */

/* ---- Tokens: dark, the default ------------------------------------------ */
:root {
  --paper:        #08070D;
  --paper-raised: #131120;
  --paper-sunk:   #050409;
  --ink:          #F7F4EC;
  --ink-soft:     #CFC9D8;
  --muted:        #8B8598;
  --rule:         #221D2E;
  --rule-strong:  #3A3348;

  /* Gels, lit */
  --gel-blue:     #6E86FF;   /* R80  Primary Blue   */
  --gel-lavender: #B98BFF;   /* R357 Royal Lavender */
  --gel-red:      #FF5A4A;   /* R26  Light Red      */
  --gel-amber:    #FFA83C;   /* R21  Golden Amber   */
  --gel-moss:     #6FD56A;   /* R89  Moss Green     */
  --gel-canary:   #FFD84D;   /* R312 Canary         */

  /* Gels at text sizes. On this ground the lit values already pass. */
  --gel-blue-txt:     var(--gel-blue);
  --gel-lavender-txt: var(--gel-lavender);
  --gel-red-txt:      var(--gel-red);
  --gel-moss-txt:     var(--gel-moss);

  --accent:       var(--gel-canary);
  --accent-ink:   #1A1400;
  --accent-wash:  #1E1A33;
  --flag:         var(--gel-red);
  --flag-ink:     #2A0B06;
  --flag-wash:    #2A1410;
  --focus:        var(--gel-canary);

  --wash-opacity: 0.55;
  --wash-blur:    90px;

  /* Type */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.7rem, 6.6vw, 5.75rem);
  --fs-h1:      clamp(2.1rem, 5vw, 3.75rem);
  --fs-h2:      clamp(1.6rem, 3vw, 2.4rem);
  --fs-h3:      1.1875rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-label:   0.7rem;

  /* Layout */
  --wrap:    1180px;
  --measure: 66ch;
  --gutter:  clamp(1rem, 4vw, 2.75rem);

  --step-1: 0.5rem;
  --step-2: 1rem;
  --step-3: 1.75rem;
  --step-4: 3rem;
  --step-5: 4.5rem;

  --spectrum: linear-gradient(90deg,
    var(--gel-red)      0%,
    var(--gel-amber)   22%,
    var(--gel-canary)  38%,
    var(--gel-moss)    56%,
    var(--gel-blue)    78%,
    var(--gel-lavender)100%);

  color-scheme: dark;
}

/* ---- Tokens: light, the program note ------------------------------------ */
:root[data-theme="light"] {
  --paper:        #F4F3EF;
  --paper-raised: #FFFFFF;
  --paper-sunk:   #EBE9E3;
  --ink:          #131218;
  --ink-soft:     #3D3947;
  --muted:        #5F5C6B;
  --rule:         #DEDAD2;
  --rule-strong:  #C4BFB4;

  --gel-blue:     #1C3FD1;
  --gel-lavender: #6E3FD6;
  --gel-red:      #D6342C;
  --gel-amber:    #E08A1E;
  --gel-moss:     #3F7F3A;
  --gel-canary:   #F2C230;

  /* Amber and canary cannot carry small text on paper. These can. */
  --gel-blue-txt:     #1C3FD1;
  --gel-lavender-txt: #5C32B8;
  --gel-red-txt:      #B3241D;
  --gel-moss-txt:     #33692F;

  --accent:       #1C3FD1;
  --accent-ink:   #FFFFFF;
  --accent-wash:  #E8ECFB;
  --flag:         #D6342C;
  --flag-ink:     #FFFFFF;
  --flag-wash:    #FBEAE9;
  --focus:        #1C3FD1;

  --wash-opacity: 0.30;
  --wash-blur:    110px;

  color-scheme: light;
}

/* ---- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: clip;
}

/* The wash. Two instruments crossing above the fold, nothing below it. */
body::before {
  content: "";
  position: absolute;
  top: 0; left: -12%; right: -12%;
  height: min(880px, 118vh);
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(var(--wash-blur));
  opacity: var(--wash-opacity);
  background:
    radial-gradient(46% 58% at 16% 26%, var(--gel-lavender) 0%, transparent 70%),
    radial-gradient(40% 54% at 80% 12%, var(--gel-blue) 0%, transparent 72%),
    radial-gradient(42% 56% at 62% 74%, var(--gel-red) 0%, transparent 70%),
    radial-gradient(36% 48% at 4% 84%, var(--gel-amber) 0%, transparent 72%);
}
:root[data-theme="light"] body::before { mix-blend-mode: multiply; }

body > * { position: relative; z-index: 1; }

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

[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gel-canary); color: #131218; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1rem;
  z-index: 100;
  font-size: var(--fs-small);
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  text-wrap: balance;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.014em;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.028em;
}
.display em { font-style: italic; color: var(--gel-canary); }

h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.02; }
h2 { font-family: var(--font-display); font-size: var(--fs-h2); }
h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--step-2); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.1rem, 1.85vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 54ch;
}

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--step-4); }
.prose h3 { margin-top: var(--step-3); margin-bottom: var(--step-1); }
.prose ul, .prose ol { margin: 0 0 var(--step-2); padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a:not(.btn) { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gel-canary);
  margin: 0;
}
:root[data-theme="light"] .eyebrow { color: var(--gel-lavender-txt); }

.num { font-variant-numeric: tabular-nums; }

/* ---- Light cue ---------------------------------------------------------- */
.spectrum-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: var(--spectrum);
}
.hairline { height: 1px; border: 0; margin: 0; background: var(--rule); }

/* ---- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--step-5); }
.section--tight { padding-block: var(--step-4); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-1);
  margin-bottom: var(--step-3);
}
@media (min-width: 860px) {
  .section-head {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--step-3);
    align-items: baseline;
  }
  .section-head .eyebrow { padding-top: 0.5rem; }
}

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--step-2);
  min-height: 4.5rem;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.wordmark__sub {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.header-tools { display: flex; align-items: center; gap: 0.6rem; }

.nav { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
}
.nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gel-canary); }

.nav-toggle, .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}
.nav-toggle:hover, .theme-toggle:hover { border-color: var(--ink); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.theme-toggle { padding: 0.45rem 0.7rem; min-width: 2.6rem; }
.theme-toggle .theme-toggle__on { display: none; }
:root[data-theme="light"] .theme-toggle .theme-toggle__on { display: inline; }
:root[data-theme="light"] .theme-toggle .theme-toggle__off { display: none; }

.mobile-nav {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding-block: var(--step-2) var(--step-3);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.mobile-nav a {
  display: block;
  padding: 0.7rem 0;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.mobile-nav a[aria-current="page"] { color: var(--gel-canary); }
:root[data-theme="light"] .mobile-nav a[aria-current="page"] { color: var(--gel-red-txt); }
@media (min-width: 900px) { .mobile-nav { display: none !important; } }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn--flag { background: var(--flag); color: var(--flag-ink); }
.btn--flag:hover { filter: brightness(1.08); }
.btn--ghost { border-color: var(--rule-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6.5rem) var(--step-4); }
.hero__grid { display: grid; gap: var(--step-3); }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr); gap: var(--step-4); align-items: end; }
}
.hero__meta { display: grid; gap: var(--step-2); align-content: end; }
@media (min-width: 620px) and (max-width: 959px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--step-3) var(--step-2);
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--step-2);
}
.stat__value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 0.4rem;
}

/* ---- Event list --------------------------------------------------------- */
.event-list { display: grid; }
.event {
  display: grid;
  gap: 0.3rem var(--step-3);
  padding-block: var(--step-3);
  border-top: 1px solid var(--rule);
  text-decoration: none;
  position: relative;
}
.event:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) {
  .event { grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: start; }
}
.event:hover .event__title { color: var(--gel-canary); }
:root[data-theme="light"] .event:hover .event__title { color: var(--accent); }
.event__date {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gel-red-txt);
  white-space: nowrap;
}
.event__body { display: grid; gap: 0.35rem; }
.event__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  line-height: 1.08;
  transition: color 0.15s ease;
}
.event__detail { font-size: var(--fs-small); color: var(--muted); }
.event__aside { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.62rem;
  border-radius: 3px;
  border: 1px solid var(--rule-strong);
  color: var(--muted);
  white-space: nowrap;
}
.tag--free { border-color: var(--gel-moss-txt); color: var(--gel-moss-txt); }
.tag--ticketed { border-color: var(--gel-blue-txt); color: var(--gel-blue-txt); }
.tag--sold-out { border-color: var(--rule-strong); color: var(--muted); text-decoration: line-through; }
.tag--past { opacity: 0.6; }

/* ---- Program blocks ----------------------------------------------------- */
.program-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
@media (min-width: 780px) { .program-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .program-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.program {
  background: var(--paper);
  padding: var(--step-3) var(--step-2) var(--step-3) 0;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}
@media (min-width: 780px) { .program { padding-inline: var(--step-2); } }
.program__rule { height: 3px; width: 2.5rem; border-radius: 2px; }
.program h3 { font-size: 1.0625rem; }
.program p { font-size: var(--fs-small); color: var(--muted); }

/* ---- Artist directory --------------------------------------------------- */
.artist-grid {
  display: grid;
  gap: var(--step-3) var(--step-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.artist { display: grid; gap: 0.6rem; text-decoration: none; align-content: start; }
.artist__portrait {
  aspect-ratio: 4 / 5;
  max-width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.artist__portrait img { width: 100%; height: 100%; object-fit: cover; }
.artist__initials { font-family: var(--font-display); font-size: 2.25rem; color: var(--rule-strong); }
.artist__name { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.artist:hover .artist__name { color: var(--accent); }
.artist__disc { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* ---- Filters ------------------------------------------------------------ */
.filters:empty { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--step-3); }
.filter {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.empty-state {
  padding: var(--step-4) 0;
  color: var(--muted);
  font-size: var(--fs-small);
  border-top: 1px solid var(--rule);
}

/* ---- Callout / donate --------------------------------------------------- */
.callout {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 5px;
  padding: var(--step-3);
  display: grid;
  gap: var(--step-2);
}
.callout--lift {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gel-lavender) 12%, transparent), transparent 62%),
    var(--paper-raised);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9);
}
:root[data-theme="light"] .callout--lift { box-shadow: 0 18px 40px -28px rgba(19,18,24,0.5); }

.tier-grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; }
@media (min-width: 720px) { .tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tier { background: var(--paper-raised); padding: var(--step-3) var(--step-2); display: grid; gap: 0.5rem; align-content: start; }
.tier__amount { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--gel-canary); }
:root[data-theme="light"] .tier__amount { color: var(--ink); }
.tier__what { font-size: var(--fs-small); color: var(--muted); }

.embed-slot {
  border: 1px dashed var(--rule-strong);
  border-radius: 4px;
  padding: var(--step-3);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-small);
  background: var(--paper-raised);
}

/* Live third-party embed: no placeholder chrome, and a reserved height so the
   page does not jump while the widget loads. Givebutter renders its own light
   surface, so it gets a plate to sit on rather than floating on the dark. */
.embed-slot--live {
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: none;
  text-align: left;
  color: inherit;
  font-size: inherit;
  min-height: 420px;
  overflow: hidden;
}

/* ---- Placeholder flag --------------------------------------------------- */
.todo {
  background: var(--flag-wash);
  color: var(--flag);
  border-radius: 2px;
  padding: 0 0.3em;
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
}

.draft-banner {
  background: var(--gel-canary);
  color: #1A1400;
  font-size: var(--fs-small);
  padding: 0.6rem 0;
  font-weight: 500;
}
.draft-banner strong { color: #1A1400; }

/* ---- Definition rows ---------------------------------------------------- */
.deflist { display: grid; gap: 0; margin: 0; }
.deflist > div {
  display: grid;
  gap: 0.2rem var(--step-3);
  padding-block: var(--step-2);
  border-top: 1px solid var(--rule);
}
.deflist > div:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 680px) { .deflist > div { grid-template-columns: 11rem minmax(0, 1fr); } }
.deflist dt { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 0.2rem; }
.deflist dd { margin: 0; overflow-wrap: anywhere; }

/* In a narrow sidebar there is no room for a label column: stack the pairs. */
.detail-aside .deflist > div,
.callout .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.detail-aside .deflist dt,
.callout .deflist dt { padding-top: 0; }

/* ---- Forms -------------------------------------------------------------- */
.field { display: grid; gap: 0.35rem; margin-bottom: var(--step-2); }
.field label { font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.7rem 0.8rem;
  width: 100%;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
  padding-block: var(--step-4) var(--step-3);
  margin-top: var(--step-5);
}
.footer-grid { display: grid; gap: var(--step-3); }
@media (min-width: 820px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--step-4); }
}
.footer-col h4 {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.footer-col a { font-size: var(--fs-small); text-decoration: none; color: var(--ink-soft); }
.footer-col a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.colophon {
  margin-top: var(--step-3);
  padding-top: var(--step-2);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--step-2);
  justify-content: space-between;
  font-size: var(--fs-label);
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* ---- Detail pages ------------------------------------------------------- */
.detail-head { padding-block: var(--step-4) var(--step-3); border-bottom: 1px solid var(--rule); }
.back-link {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--step-2);
}
.back-link:hover { color: var(--accent); }

.detail-grid { display: grid; gap: var(--step-4); padding-block: var(--step-4); }
@media (min-width: 900px) {
  .detail-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr); gap: var(--step-5); align-items: start; }
}
.detail-aside { display: grid; gap: var(--step-3); position: sticky; top: calc(5.75rem + env(safe-area-inset-top, 0px)); }
@media (max-width: 899px) { .detail-aside { position: static; } }

/* ---- Florida solicitation disclosure ------------------------------------
   s. 496.411(3) requires this wherever a solicitation shows a mailing address
   or phone number. The footer does, on every page, so it renders site-wide.
   s. 496.411(6) requires the registration number to be conspicuous, so this is
   held at readable size and full opacity rather than treated as fine print. */
.fdacs-disclosure {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 88ch;
  margin-top: var(--step-3);
  padding-top: var(--step-2);
  border-top: 1px solid var(--rule);
}
.fdacs-disclosure a { color: var(--accent); text-underline-offset: 3px; }
.fdacs-disclosure .num { font-weight: 700; color: var(--ink); }
.fdacs-disclosure--page { margin-top: var(--step-2); }