/* ============================================================================
   Revival Runway — shared grid / filter / card styles  (rr-core)
   ----------------------------------------------------------------------------
   ONE source of truth for the locked RR brand. Every content type
   (designers, artisan makers, events, galleries…) renders inside
   .rr-grid-root and inherits these tokens. Change a token here once and
   every directory/listing on the site updates. No per-plugin colour copies.

   Locked brand (do not drift): Crete Round + Roboto Condensed,
   black/white + warm paper, cyan #0ca0c9 (Revival). Green is the Artisan
   Market sub-brand ONLY — applied via .rr-scope-artisan, never globally.
   ============================================================================ */

.rr-grid-root{
  /* type */
  --rr-font-display:'Crete Round',Georgia,serif;
  --rr-font-body:'Roboto Condensed',Helvetica,Arial,sans-serif;
  /* palette */
  --rr-ink:#000;
  --rr-paper:#fff;
  --rr-paper-warm:#fafaf7;
  --rr-text:#444;
  --rr-muted:#999;
  --rr-muted-2:#666;
  --rr-hairline:#e5e5e5;
  --rr-border:#d8d8d8;
  --rr-thumb-bg:#f5f5f5;
  --rr-accent:#0ca0c9;        /* Revival cyan */
  --rr-accent-ink:#fff;
  /* layout */
  --rr-cols:3;
  --rr-card-ratio:4/5;
  --rr-maxw:1080px;
  --rr-gutter:30px;

  font-family:var(--rr-font-body);font-size:14px;line-height:1.7;color:var(--rr-text);
  max-width:var(--rr-maxw);margin:0 auto;padding:0 var(--rr-gutter);
}
.rr-grid-root *,.rr-grid-root *::before,.rr-grid-root *::after{box-sizing:border-box}
.rr-grid-root img{max-width:100%;display:block}
.rr-grid-root h2,.rr-grid-root h3{font-family:var(--rr-font-display);font-weight:400;color:var(--rr-ink);line-height:1.3}
.rr-grid-root a{color:var(--rr-ink);text-decoration:none}
/* text/card links go cyan on hover; CTA *buttons* (any class ending -cta) keep
   their own hover styling — else this rule (0,2,1) out-ranked .rst-feature-cta:hover
   (0,2,0) and turned button hover text cyan on a black fill (Niki 8 Jul: "read
   more button broken"). :not([class*="-cta"]) excludes them cleanly. */
.rr-grid-root a:not([class*="-cta"]):hover{color:var(--rr-accent)}
.rr-grid-root a.rst-feature-cta:hover{background:#0a0a0a !important;color:#fff !important;border-color:#0a0a0a !important}
.rr-grid-root a.rr-hero-cta:hover{color:var(--rr-ink)}

/* Artisan Market sub-brand: green accent, everything else identical */
.rr-grid-root.rr-scope-artisan{ --rr-accent:#5a9a3d; }

/* controls -------------------------------------------------------------- */
/* v1.2.0 (Niki change #1): filters live behind the Filter button on EVERY
   viewport. Desktop = inline panel that opens below the controls; mobile =
   the bottom sheet (media query further down). */
.rr-controls{margin-bottom:28px;display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.rr-search{width:100%;max-width:360px;border:1px solid var(--rr-border);padding:11px 14px;font-family:inherit;font-size:14px;color:var(--rr-ink);flex:0 1 360px;margin:0;min-height:44px}
/* margin:0 beats Divi's global input{margin-bottom:16px}, which otherwise
   shoves the search box 7px above the Filter button (seen on staging 11 Jun);
   min-height matches the trigger so the pair reads as one row. */
.rr-search:focus{outline:none;border-color:var(--rr-accent)}
.rr-filters{display:none;flex-wrap:wrap;gap:8px;flex-basis:100%;padding-top:14px;border-top:1px solid var(--rr-hairline)}
.rr-grid-root.rr-sheet-open .rr-filters{display:flex}
.rr-filters-more{display:contents}
.rr-filters-more[hidden]{display:none}
.rr-filter-more-toggle{font-family:var(--rr-font-body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-ink);background:var(--rr-paper);border:1px dashed var(--rr-border);padding:7px 14px;cursor:pointer}
.rr-filter-more-toggle:hover{border-color:var(--rr-accent)}
.rr-sheet-done{display:none}
.rr-filter{font-family:var(--rr-font-body);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-muted-2);background:var(--rr-paper);border:1px solid var(--rr-border);padding:7px 14px;cursor:pointer;transition:all .15s}
.rr-filter:hover{border-color:var(--rr-accent);color:var(--rr-ink)}
.rr-filter.is-active{background:var(--rr-accent);border-color:var(--rr-accent);color:var(--rr-accent-ink)}
.rr-filter.rr-filter-all{border-color:var(--rr-ink);color:var(--rr-ink)}
.rr-filter.rr-filter-all.is-active{background:var(--rr-ink);border-color:var(--rr-ink);color:var(--rr-paper)}
.rr-count{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--rr-muted);margin:0;flex-basis:100%}

/* grid -- uniform cards, hairline borders ------------------------------- */
.rr-grid{display:grid;grid-template-columns:repeat(var(--rr-cols),1fr);gap:1px;background:var(--rr-hairline);border:1px solid var(--rr-hairline);margin-top:22px}
.rr-card{background:var(--rr-paper);cursor:pointer}
.rr-card-link{display:block;color:inherit;text-decoration:none} /* link_out mode: whole card navigates to the article page */
.rr-card[hidden]{display:none}
.rr-card-thumb{position:relative;width:100%;aspect-ratio:var(--rr-card-ratio);overflow:hidden;background:var(--rr-thumb-bg)}
.rr-card-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;transition:transform .4s}
.rr-card:hover .rr-card-thumb img{transform:scale(1.03)}
.rr-card-body{padding:16px 18px 20px}
.rr-card-body h3{font-size:19px;margin:0 0 3px}
.rr-card-tagline{font-family:var(--rr-font-display);font-style:italic;font-size:14px;color:var(--rr-muted-2);margin-bottom:6px;min-height:1.4em}
.rr-card-loc{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rr-muted)}
.rr-card-more{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rr-accent);margin-top:10px}

/* inline detail panel --------------------------------------------------- */
.rr-detail{grid-column:1/-1;background:var(--rr-paper);border-top:2px solid var(--rr-accent);padding:0;display:none}
.rr-detail.is-open{display:block}
.rr-detail-inner{display:flex;gap:32px;padding:32px 30px}
.rr-detail-gallery{flex:0 0 42%;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}
.rr-detail-gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}
.rr-detail-gallery img:first-child{grid-column:1/-1;aspect-ratio:4/3}
.rr-detail-text{flex:1;min-width:0}
.rr-detail-text h3{font-size:26px;margin:0 0 4px}
.rr-detail-tagline{font-family:var(--rr-font-display);font-style:italic;font-size:16px;color:var(--rr-muted-2);margin-bottom:16px}
.rr-detail-bio{color:var(--rr-text);margin-bottom:18px}
.rr-detail-bio p{margin:0 0 12px}
.rr-facts{list-style:none;margin:0 0 18px;padding:16px 0;border-top:1px solid var(--rr-hairline);border-bottom:1px solid var(--rr-hairline)}
.rr-facts li{display:flex;gap:14px;padding:5px 0;font-size:13px}
.rr-facts .rr-fact-label{flex:0 0 150px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px;color:var(--rr-muted);padding-top:1px}
/* v1.7.14 FIX E (client screenshot of the upcoming-event facts block, phones): at
   375px the fixed 150px label column starved the value column, wrapping "SUNDAY 20 /
   SEPTEMBER / 2026" and "123 / Queen / Street," one word per line. ≤560px stack each
   row — label on its own line (small-caps kept), value block full-width below, with
   comfortable row padding. flex-basis MUST reset 150px→auto: once the <li> is a column
   the 150px flex-basis would otherwise be read on the (now vertical) main axis and make
   the LABEL 150px tall. Row spacing uses li PADDING not margin, so it composes with
   revival-events' re_single_enqueue_css override .re-single ul.rr-facts>li{...margin:0}
   (which never touches display/flex-direction/padding — display:flex survives from the
   base rule above). Works for BOTH the .rr-next-* featured block and .re-single
   ul.rr-facts (and artisan). Desktop (≥561px) unchanged. */
@media (max-width:560px){
  .rr-facts li{flex-direction:column;gap:3px;padding:9px 0}
  .rr-facts .rr-fact-label{flex-basis:auto}
}
.rr-links a{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--rr-ink);padding:9px 18px;margin:0 8px 8px 0}
.rr-links a:hover{background:var(--rr-ink);color:var(--rr-paper);opacity:1}
.rr-close{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rr-muted);cursor:pointer}
.rr-empty{grid-column:1/-1;display:none;padding:40px 0;color:var(--rr-muted);text-align:center;font-style:italic;font-family:var(--rr-font-display)}

@media (max-width:900px){.rr-grid{--rr-cols:2}.rr-detail-inner{flex-direction:column}.rr-detail-gallery{flex-basis:auto}}
@media (max-width:560px){.rr-grid{--rr-cols:1}.rr-grid-root{padding:0 18px}}

/* ============================================================================
   rr-core v1.1.0 — accessibility + mobile wow-factor
   ----------------------------------------------------------------------------
   Added without touching the tokens above: every grid on the site inherits
   these. All content-agnostic — the wow lives here, the content stays in the
   meta boxes Niki controls. Brief §6 (mobile wow) + §9 (accessibility).
   ============================================================================ */

/* --- focus + keyboard a11y (brief §9) --------------------------------------
   Cards are keyboard-operable buttons; show a crisp focus ring that survives
   the B&W system. :focus-visible so mouse users don't see rings. */
.rr-grid-root :focus-visible{outline:2px solid var(--rr-accent);outline-offset:2px}
.rr-card{outline:none}
.rr-card:focus-visible{outline:2px solid var(--rr-accent);outline-offset:-2px}
.rr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- tap targets ≥44px on touch (brief §6) --------------------------------- */
@media (max-width:700px){
  .rr-filter{padding:11px 16px;font-size:12px}
  .rr-search{padding:13px 14px;font-size:16px} /* 16px = no iOS zoom-on-focus */
  .rr-card-more{padding:4px 0;display:inline-block}
}

/* --- mobile performance pass (v1.2.0, Niki change #3) ----------------------
   Long card grids: let the browser skip rendering off-screen cards entirely.
   Touch devices: kill the hover zoom — it's a sticky-tap repaint cost with no
   hover to serve. Scroll reveals are speed-gated in rr-filter.js (instant on
   small screens / save-data, animated on desktop only). */
@media (max-width:700px){
  .rr-card{content-visibility:auto;contain-intrinsic-size:auto 340px}
}
@media (hover:none){
  .rr-card:hover .rr-card-thumb img{transform:none}
  .rr-card-thumb img{transition:none}
}

/* --- v1.7.12 FIX 1 (Niki 21 Jul): directory cards overlapped + read as
   "oversized / too long a scroll" on phones. MEASURED at 390px (single column)
   on /past-events/, /brands/, /creatives/, /stories/: the ≤700px perf rule above
   sets content-visibility:auto + contain-intrinsic-size:auto 340px, but the real
   card is 578–671px tall (.rr-card-thumb 4/5 ≈ 425px + body 152–246px) — the
   under-sized 340px box let each card's body paint under the next card's image.
   Fix at the single-column breakpoint only (≤560px = the grid's actual collapse,
   line 113), EXCLUDING the gallery masonry (.rr-scope-gallery re-styles these same
   .rr-card/.rg-card-thumb classes in revival-gallery/includes/lightbox.php):
   (1) let the card be its true height (kill the 340px intrinsic under-size that
       clipped the body); (2) crop .rr-card-thumb to a compact landscape band so
   each card scans as a list item, not one ~1.5-screen portrait (Niki). Desktop
   card geometry (≥561px) is untouched. */
@media (max-width:560px){
  .rr-grid-root:not(.rr-scope-gallery) .rr-card{
    height:auto;
    content-visibility:visible;      /* was 'auto' (≤700px rule) with a 340px placeholder that under-sized the card and clipped its body under the next thumb */
    contain-intrinsic-size:none;
  }
  .rr-grid-root:not(.rr-scope-gallery) .rr-card-thumb{
    aspect-ratio:4/3;                /* compact landscape crop — was 4/5 portrait ≈ 425px at full single-column width = the "too long a scroll" */
    height:auto;
  }
  .rr-grid-root:not(.rr-scope-gallery) .rr-card-thumb img{
    object-fit:cover;object-position:50% 16%;   /* keep the face-favouring crop from the base rule (line ~84) after the reshape */
  }
}

/* --- retina hairlines: keep borders crisp, not chunky, on 2x screens ------- */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .rr-grid{gap:.5px}
}

/* --- swipeable horizontal card rails: layout="rail" (brief §6) -------------
   Opt-in via rr_grid_render(['layout'=>'rail']). On narrow viewports the grid
   becomes a scroll-snap rail (native-feeling, beats vertical stacking on a
   phone). On desktop it falls back to the normal multi-column grid. */
.rr-grid-root.rr-rail .rr-grid{
  display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
}
.rr-grid-root.rr-rail .rr-grid::-webkit-scrollbar{display:none}
.rr-grid-root.rr-rail .rr-card{
  flex:0 0 78%;max-width:320px;scroll-snap-align:start;
}
.rr-grid-root.rr-rail .rr-detail{display:none} /* rails are previews; no inline detail */
@media (min-width:701px){
  .rr-grid-root.rr-rail .rr-grid{display:grid;grid-template-columns:repeat(var(--rr-cols),1fr);overflow:visible}
  .rr-grid-root.rr-rail .rr-card{flex:none;max-width:none}
}
.rr-rail-hint{display:none}
@media (max-width:700px){
  .rr-grid-root.rr-rail .rr-rail-hint{
    display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--rr-muted);margin:4px 0 0;text-align:right;
  }
}

/* --- the Filter trigger (all viewports) + bottom-sheet on mobile ------------
   v1.2.0 (Niki change #1): the trigger shows everywhere. Desktop: clicking it
   opens the inline .rr-filters panel (styles in the controls block above).
   Mobile (≤700px): the same click slides the filters up as a bottom sheet
   with a Done button — unchanged from v1.1. */
.rr-filter-trigger{
  display:inline-flex;align-items:center;gap:8px;
  font:700 12px/1 var(--rr-font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--rr-ink);background:var(--rr-paper);border:1px solid var(--rr-ink);
  padding:12px 18px;cursor:pointer;justify-content:center;min-height:44px;
}
.rr-filter-trigger:hover{background:var(--rr-ink);color:var(--rr-paper)}
.rr-filter-trigger .rr-filter-count{color:var(--rr-accent)}
.rr-filter-trigger:hover .rr-filter-count{color:var(--rr-paper)}
.rr-sheet-backdrop{display:none}
@media (max-width:700px){
  .rr-filters{
    display:flex; /* off-screen via transform when closed, so the slide animates */
    position:fixed;left:0;right:0;bottom:0;z-index:10001;
    background:var(--rr-paper);border-top:2px solid var(--rr-ink);
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .28s ease;
    max-height:70vh;overflow-y:auto;gap:10px;
    box-shadow:0 -16px 40px rgba(0,0,0,.18);
  }
  .rr-grid-root.rr-sheet-open .rr-filters{transform:translateY(0)}
  .rr-filters::before{
    content:"Filter";display:block;width:100%;
    font-family:var(--rr-font-display);font-size:18px;color:var(--rr-ink);
    margin-bottom:6px;
  }
  .rr-filter{flex:1 1 auto;text-align:center}
  .rr-filter-more-toggle{flex:1 1 100%;text-align:center}
  .rr-sheet-done{
    display:block;
    flex:1 1 100%;margin-top:10px;background:var(--rr-ink);color:var(--rr-paper);
    border:1px solid var(--rr-ink);padding:14px;font:700 12px/1 var(--rr-font-body);
    letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  }
  .rr-filter-trigger{width:100%}
  .rr-grid-root.rr-sheet-open .rr-sheet-backdrop{
    display:block;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.45);
  }
}

/* --- sticky bottom action bar: [rr_action_bar], mobile only (brief §6) ------
   Persistent thumb-reach actions (Apply / Events / Search). Lives at page
   level, fixed to the bottom on phones, hidden on desktop. */
.rr-action-bar{display:none;
  /* self-contained tokens: the bar lives at page level, OUTSIDE .rr-grid-root,
     so the grid-scoped vars don't reach it — without these it rendered with a
     transparent background (caught on mobile sim 12 Jun) */
  --rr-paper:#fff;--rr-ink:#000;--rr-hairline:#e5e5e5;--rr-paper-warm:#fafaf7;
  --rr-font-body:'Roboto Condensed',Helvetica,Arial,sans-serif;--rr-accent:#0ca0c9}
@media (max-width:700px){
  .rr-action-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9000;
    background:var(--rr-paper);border-top:1px solid var(--rr-ink);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .rr-action-bar a{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 4px;min-height:48px;justify-content:center;
    font:700 10px/1.1 var(--rr-font-body);letter-spacing:.06em;text-transform:uppercase;
    color:var(--rr-ink);text-align:center;border-right:1px solid var(--rr-hairline);
  }
  .rr-action-bar a:last-child{border-right:0}
  .rr-action-bar a:hover{opacity:1;background:var(--rr-paper-warm)}
  .rr-action-bar .rr-ab-ico{font-size:18px;line-height:1;font-weight:400}
  /* lift fixed sheets/lightboxes clear of the bar */
  body.rr-has-action-bar{padding-bottom:56px}
}
.rr-action-bar.rr-scope-artisan{--rr-accent:#5a9a3d}

/* --- full-bleed hero + scroll reveal primitives (brief §6) -----------------
   Consumed by revival-hero's [rr_hero]. Full-bleed escapes the content column;
   .rr-reveal fades/translates in on scroll (JS adds .rr-reveal-in). */
.rr-hero{
  position:relative;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  min-height:62vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--rr-thumb-bg);
}
.rr-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;animation:rrHeroSettle 1.6s ease-out both} /* favour faces over torsos; one-off settle on load (GPU transform, runs once — not scroll-linked, so no mobile cost) */
@keyframes rrHeroSettle{from{transform:scale(1.045)}to{transform:scale(1)}}
.rr-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.rr-hero-inner{position:relative;z-index:1;max-width:var(--rr-maxw);margin:0 auto;width:100%;padding:0 var(--rr-gutter) 8vh;color:var(--rr-paper)}
.rr-hero-kicker{font:700 12px/1 var(--rr-font-body);letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;opacity:.92}
.rr-hero-title{font-family:var(--rr-font-display);font-size:clamp(30px,6vw,58px);line-height:1.05;color:var(--rr-paper);margin:0 0 18px;max-width:16ch}
.rr-hero-cta{display:inline-block;font:700 12px/1 var(--rr-font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--rr-paper);border:1px solid var(--rr-paper);padding:14px 26px}
.rr-hero-cta:hover{background:var(--rr-paper);color:var(--rr-ink);opacity:1}
@media (max-width:560px){.rr-hero{min-height:72vh}.rr-hero-inner{padding-bottom:12vh}}

/* v1.4.1 — scroll-reveal NEUTRALISED (15 Jun 2026, Josh: mobile-first; traffic
   is mostly mobile and the fade-in caused text to "appear" on scroll). The JS
   in rr-filter.js still adds .rr-reveal-in but the start state is now visible,
   so nothing animates and nothing pops. Clip-path image reveal also off. */
.rr-reveal{opacity:1;transform:none;transition:none}
.rr-reveal.rr-reveal-in{opacity:1;transform:none}
.rr-reveal-img{clip-path:none}

/* v1.3.0 — editorial section furniture (from architecture-1-magazine.html).
   CMS-usable: Niki/Josh add these classes to Divi text modules.
     .rr-kicker      tracked-caps section eyebrow ("OUR BRANDS")
     .rr-folio-num   giant italic serif folio numeral ("/01")
     .rr-stamp       italic serif date/credit stamp
     .rr-rule        2px black rule above a section */
.rr-kicker{font-family:var(--rr-font-body,'Roboto Condensed',sans-serif);font-weight:700;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#6f6f6f}
.rr-folio-num{font-family:var(--rr-font-display,'Crete Round',serif);font-style:italic;font-size:clamp(56px,9vw,128px);line-height:.8;letter-spacing:-.02em;color:#0a0a0a}
.rr-stamp{font-family:var(--rr-font-display,'Crete Round',serif);font-style:italic;font-size:14px;color:#6f6f6f}
.rr-rule{border-top:2px solid #0a0a0a}

/* v1.3.0 — [rr_marquee] scrolling name strip (pause on hover; static under
   reduced-motion). Hairline-bound, tracked caps — magazine ticker, not Vegas. */
.rr-marquee{overflow:hidden;border-top:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a;padding:14px 0;background:#fff}
.rr-mq-track{display:flex;width:max-content;animation:rrMarquee 45s linear infinite}
.rr-marquee:hover .rr-mq-track{animation-play-state:paused}
.rr-mq-seq{display:flex;align-items:baseline;white-space:nowrap}
.rr-mq-item{font-family:'Roboto Condensed',Helvetica,Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#0a0a0a;padding:0 18px}
.rr-mq-dot{color:#b4b4b4}
.rr-marquee.rr-scope-artisan .rr-mq-item{color:#5a9a3d}
@keyframes rrMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.rr-mq-track{animation:none}}

/* --- reduced motion: honour the user's OS setting (brief §6) ---------------- */
@media (prefers-reduced-motion:reduce){
  .rr-grid-root *,.rr-hero *,.rr-reveal{transition:none!important;animation:none!important}
  .rr-card:hover .rr-card-thumb img{transform:none}
  .rr-reveal{opacity:1;transform:none}
  .rr-filters{transition:none}
}

/* --- event series landing: [event_series_landing] (Niki change #5) ---------
   Series heading + description, the lead event rendered open (reusing the
   shared .rr-detail-inner markup), then the rest of the series as a normal
   grid, then a related-media strip. Content-agnostic; revival-events emits it. */
.rr-series-head{margin:0 0 26px}
.rr-series-title{font-size:clamp(26px,4vw,40px);margin:0 0 10px}
.rr-series-desc{max-width:62ch;color:var(--rr-text)}
.rr-series-desc p{margin:0 0 12px}
.rr-series-lead{border:1px solid var(--rr-hairline);border-top:2px solid var(--rr-accent);margin-bottom:36px;background:var(--rr-paper)}
.rr-series-lead .rr-close{display:none} /* nothing to close — it's the page lead */
.rr-series-subhead{font-size:20px;margin:36px 0 14px}
.rr-series-media{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rr-hairline);border:1px solid var(--rr-hairline)}
.rr-series-media img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;background:var(--rr-thumb-bg)}
@media (max-width:900px){.rr-series-media{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.rr-series-media{grid-template-columns:repeat(2,1fr)}.rr-series-lead .rr-detail-inner{flex-direction:column}}

/* --- v1.4.0 visual picks (12 Jun: Josh chose 1+2+3 from the gallery scan) ---
   #2 split-word headline reveal — NEUTRALISED v1.4.1 (mobile compatibility).
   JS still wraps words; CSS just shows them in place with no slide-up. */
.rr-split .rr-w{display:inline-block;vertical-align:bottom}
.rr-split .rr-wi{display:inline-block;transform:none;transition:none}
.rr-split.rr-split-in .rr-wi{transform:none}

/* #1 cursor image trail — [rr_image_trail] zone */
.rr-trail{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:280px;background:#fff;border-top:1px solid #0a0a0a;border-bottom:1px solid #0a0a0a;cursor:crosshair}
@media (prefers-reduced-motion:reduce){.rr-trail{min-height:170px;cursor:default}} /* no trail = no point being tall */
.rr-trail-label{position:relative;z-index:2;pointer-events:none;font-family:'Crete Round',Georgia,serif;font-size:clamp(28px,4.5vw,64px);line-height:1.05;color:#0a0a0a;text-align:center;padding:0 20px}
.rr-trail-img{position:absolute;z-index:1;width:200px;aspect-ratio:3/4;object-fit:cover;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.6,.2,1)}
.rr-trail-img.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rr-trail-img.off{opacity:0;transform:translate(-50%,-50%) scale(.92)}
@media (max-width:700px),(hover:none){.rr-trail{min-height:180px;cursor:default}}

/* #3 focus-dim: hover one card, siblings recede (desktop pointer only) */
@media (hover:hover) and (min-width:701px){
  .rr-grid .rr-card{transition:opacity .35s ease}
  .rr-grid:has(.rr-card:hover) .rr-card:not(:hover){opacity:.4}
}

/* --- impact stat strip: [rr_stats] (brief §1 — homepage + About) -----------
   Five hairline-separated cells, big Crete Round numbers over uppercase labels.
   Empty figures render .rr-stat-todo ([SOFIE: number]) so a gap is obvious. */
.rr-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rr-hairline);border:1px solid var(--rr-hairline);margin:0 auto}
.rr-stat{background:var(--rr-paper);padding:26px 16px;text-align:center}
.rr-stat-num{font-family:var(--rr-font-display);font-size:clamp(28px,4vw,44px);line-height:1;color:var(--rr-ink)}
.rr-stat-todo{font-family:var(--rr-font-body);font-style:normal;font-size:13px;letter-spacing:.02em;color:#b32d2e}
.rr-stat-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rr-muted-2);margin-top:10px}
@media (max-width:700px){.rr-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:360px){.rr-stats{grid-template-columns:1fr}}

/* --- v1.5.0 — half-page portrait hero: [rr_hero] split layout -------------
   Niki's brief: "a 'half page' portrait image on the homepage". Editorial
   split — portrait image beside the headline, pure B&W, stacks on phones.
   Opt-in via the Homepage admin "Hero layout" select; banner stays default. */
.rr-hero.rr-hero--split{
  width:100%;left:auto;right:auto;margin:0 auto;
  min-height:clamp(440px,62vh,680px);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:stretch;background:var(--rr-paper-warm);overflow:hidden;
}
.rr-hero--split .rr-hero-img{
  position:static;inset:auto;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;animation:none;
}
.rr-hero--split .rr-hero-shade{display:none}
.rr-hero--split .rr-hero-inner{
  max-width:none;margin:0;align-self:center;color:var(--rr-ink);
  padding:clamp(24px,5vw,64px);
}
.rr-hero--split .rr-hero-kicker{color:var(--rr-muted-2)}
.rr-hero--split .rr-hero-title{color:var(--rr-ink)}
.rr-hero--split .rr-hero-cta{color:var(--rr-ink);border-color:var(--rr-ink)}
.rr-hero--split .rr-hero-cta:hover{background:var(--rr-ink);color:var(--rr-paper)}
@media (max-width:700px){
  .rr-hero.rr-hero--split{grid-template-columns:1fr;min-height:0}
  .rr-hero--split .rr-hero-img{aspect-ratio:4/5;height:auto}
}

/* --- v1.6.2 — compact hero: contained, stacked, full 8:5 image ------------
   Niki 8 Jul (live review): the compact banner was "too compact / too narrow" —
   make it "vertically longer" so the whole 8:5 hero image shows. On this Divi
   homepage the over-image overlay flattens anyway (Divi forces the image
   in-flow), so compact is now an explicit STACKED editorial block: full-width
   contained 8:5 image on top, kicker + (smaller) headline + CTA below in ink.
   No shade (text isn't over the image). Reads well on mobile (single column,
   image shown whole, not cropped). Opt-in via the Homepage "Hero layout". */
.rr-hero.rr-hero--compact{
  width:100%;left:auto;right:auto;margin:0 auto;max-width:var(--rr-maxw); /* contained, NOT full-bleed */
  display:block;min-height:0;overflow:visible;
}
.rr-hero.rr-hero--compact .rr-hero-img{
  position:relative;inset:auto;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover; /* full 8:5 image, taller (Niki) */
  animation:none;
}
.rr-hero--compact .rr-hero-shade{display:none} /* text sits below the image, not over it */
.rr-hero--compact .rr-hero-inner{
  position:relative;max-width:none;margin:0;width:100%;color:var(--rr-ink);
  padding:clamp(16px,2.4vw,26px) 0 0; /* heading block below the image */
}
.rr-hero--compact .rr-hero-kicker{color:var(--rr-muted-2)}
.rr-hero--compact .rr-hero-title{color:var(--rr-ink);font-size:clamp(22px,3vw,34px);max-width:22ch} /* smaller headline (Niki: reduce) */
.rr-hero--compact .rr-hero-cta{color:var(--rr-ink);border-color:var(--rr-ink)}
.rr-hero--compact .rr-hero-cta:hover{background:var(--rr-ink);color:var(--rr-paper)}
@media (max-width:560px){.rr-hero.rr-hero--compact .rr-hero-title{font-size:clamp(20px,6vw,26px)}}

/* --- Homepage "Volunteer signup" circle: hover text was invisible ---------
   Niki 8 Jul + Josh's own earlier attempt ("I fixed it, don't know why it
   didn't apply"): .rr-vol-circle lives entirely in Divi's page/theme Custom
   CSS (not this codebase — grepped, confirmed absent from every RR plugin).
   Its :hover rule sets color:#fff but has NO background-color, so on hover
   the text turns white with nothing behind it — invisible. Root-caused via
   network inspection: Divi's Theme Options "Save Changes" DOES round-trip
   successfully (server returns its legacy "1" success marker) but the saved
   value doesn't come back on reload — looks like a GoDaddy-side cache not
   invalidating on that specific admin-ajax save path, not a Divi/CSS syntax
   issue. Shipping the fix here instead, since rr-core's stylesheet reliably
   deploys via plugin upload (proven — the compact hero above took effect
   immediately). !important because Divi's inline <style> may load after
   this stylesheet in <head>. */
a.rr-vol-circle:hover{background-color:#0a0a0a !important;color:#fff !important}

/* --- Niki 8 Jul live-tuned polish (verified in-browser on staging) ----------
   Headers too big, tiles cramped, content jammed against the footer. These
   target homepage-custom classes (.rr-home-tiles/.rr-home-applies, authored in
   a homepage Divi Code module) + Divi's footer, from here because the Divi
   Custom-CSS box won't persist on this host (GoDaddy cache) and rr-core deploys
   reliably. Values dialled in against the real pages, not guessed. */

/* Hero headline: the homepage module ships `.home .rr-hero-title{…66px !important}`
   which out-ranked BOTH rr-core's compact rule and Niki's earlier reduction —
   why the headline stayed huge. body.home (0,2,1)+!important finally wins. */
/* Niki 17 Jul homepage "LAYOUT CHANGES": headline + Sofie quote smaller, and the
   quote pushed further from the hero image. Headline is .rr-hero-title (over the
   compact hero); the quote is the .rr-quote-row block below it (a homepage block
   with no prior rr-core rule — confirmed on staging). Numbers are a measured first
   pass — eyeball against her HOMEPAGE LAYOUT CHANGES.jpg and nudge if needed. */
body.home .rr-hero-title{font-size:clamp(22px,3vw,32px) !important;max-width:none !important;white-space:nowrap} /* Josh 20 Jul: keep "Support Independent Australian Fashion" on ONE line */
@media (max-width:640px){body.home .rr-hero-title{white-space:normal}} /* wrap on small phones so it can't overflow */
/* Josh 20 Jul: the volunteer circle is tall and the quote is short + flush under
   the headline, so pulling the whole row up dragged the circle into the hero
   (its thin outline vanished over the image = "cut off"). Decouple: the ROW (and
   circle) sits clear of the hero; the QUOTE COLUMN alone is pulled up flush. */
body.home .rr-quote-row{margin-top:-50px !important;align-items:flex-start !important;position:relative;z-index:2} /* z-index:2 lifts the quote ABOVE .rr-hero-inner (z-index:1) — else the first line renders behind the hero's white bg where it's pulled up (Josh 20 Jul "overlayed the quote") */
/* Niki 20 Jul screenshots: on phones the row wraps and .rr-vol-circle (inside
   an unclassed <p>, the row's second flex child — confirmed by fetching the
   live homepage markup: `<div class="rr-quote-row"><div class="rr-quote-col">
   …</div><p><a class="rr-vol-circle" href="/contact/">Volunteer signup</a>
   </p></div>`) ends up orphaned at the LEFT edge. Root cause: the unscoped
   rule above sets align-items:flex-start !important for the desktop row
   layout, and that same cross-axis property left-aligns items once
   flex-direction flips to column here — no width/position rule targets the
   circle directly. Stack the row and re-center the cross-axis so both the
   quote block and the circle sit centered instead of pinned left. */
@media (max-width:640px){body.home .rr-quote-row{margin-top:0 !important;flex-direction:column !important;align-items:center !important;gap:24px !important}} /* no negative pull on phones (title wraps there); stacked + centred so the circle isn't left-orphaned. v1.7.14 FIX C-2: gap 48px→24px between the stacked quote and the volunteer circle (the 48px is the homepage inline .rr-quote-row gap; halved here for phones) */
body.home .rr-quote-col{padding-left:30px;margin-top:-34px}              /* left edge under the "S" (30px = hero gutter) + pulled up close under the headline (a hair of gap so the full first line always shows) */
/* v1.7.14 FIX C-2 (Niki homepage screenshots; measured 375px): the quote→circle gap was
   338px. The homepage inline <style> sets .rr-quote-row .rr-quote-col{flex:1 1 560px};
   once .rr-quote-row flips to flex-direction:column here, that 560px flex-basis is read
   on the vertical (main) axis and reserves 560px of HEIGHT — the blockquote + citation
   only fill ~270px, leaving ~290px of phantom empty space above the circle (content ends
   y882, col box ends y1172). Reset the basis to auto so the column height follows content
   (grow/shrink stay from the inline shorthand; in an auto-height column there's no free
   space to grow into). (0,2,1) beats the inline (0,2,0). */
@media (max-width:640px){body.home .rr-quote-col{margin-top:0;flex-basis:auto}}

/* Josh 20 Jul: line the lower homepage sections up to the hero/quote edge (x157,
   the 30px branded gutter) and tighten the space between the quote and "Latest
   story" (was ~107px). */
body.home h2.rr-split{margin-left:30px !important;margin-top:-56px !important}  /* "Latest story" heading → 157 + smaller gap above it */
body.home .rr-home-tiles{margin-left:30px !important}                           /* nav-tile row left edge → 157. v1.7.12 FIX 2 (Josh 21 Jul): was padding-left:30px — that exposed the tiles' BLACK container bg as a 31px bar (30px pad + 1px border) left of the first tile on desktop (measured 1280px). margin-left shifts the whole box (bg included), no exposed strip; .rr-home-tiles is an auto-width grid (no width:100%) so the shift can't overflow right. */
@media (max-width:640px){
  body.home h2.rr-split{margin-left:0 !important;margin-top:0 !important} /* Josh 20 Jul: the desktop rule above only reset margin-left here — the -56px pull was still yanking "Latest story" up on phones */
  body.home .rr-home-tiles{margin-left:0 !important}                            /* v1.7.12 FIX 2: reset the margin-left shift on phones (was padding-left:0) */
  /* Niki 20 Jul screenshots: .rr-home-tiles a{padding:44px 34px 34px !important}
     (below) forces each tile's min-content to ~168px, so the 2 mobile grid
     tracks total ~336px inside a ~300px container — the grid spills past the
     right viewport edge (worse with larger iOS text). minmax(0,1fr) kills the
     min-content blowout; smaller padding keeps the labels comfortable at 375px. */
  body.home .rr-home-tiles{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.home .rr-home-tiles a{padding:28px 16px 24px !important;min-width:0}
}
body.home .rr-quote-row blockquote{font-size:19px !important;line-height:1.5 !important;margin-top:0 !important} /* was 22px; margin-top 40→0 so it sits right under the headline */

/* v1.7.14 FIX C-1 (Niki homepage screenshots; measured 375px): header→hero-image gap
   was 87px (header bottom 115, hero image top 202); target ~30px. The [rr_hero] sits in
   the first Divi section — the WHOLE homepage is one section → one row → one text module,
   so .et_pb_section_0 / .et_pb_row are positional (fragile) classes; re-verify if Niki
   re-orders homepage sections. At ≤980px Divi applies its default .et_pb_section{padding:
   50px 0} + .et_pb_row{padding:~30px 0}, which stack (~87px with the wpautop <p>) above
   the image. Trim both ≤640px; ~20+8 ≈ ~30px total. Only the FIRST section's top padding
   is pulled up, so content below simply follows — no desktop change. */
@media (max-width:640px){
  body.home .et_pb_section_0{padding-top:20px !important}          /* was Divi mobile default 50px */
  body.home .et_pb_section_0 > .et_pb_row{padding-top:8px !important} /* was Divi mobile default ~30px */
}

/* v1.7.14 FIX C-3 (Niki homepage screenshots; measured 375px): the circle→"Latest story"
   gap was 136px; the biggest reclaimable piece is the heading's own top margin. On phones
   rr-filter.js does NOT wrap headline words (split-word reveal is desktop-only, ≤700px early
   return), so <h2>Latest story</h2> never gets .rr-split — the mobile reset
   body.home h2.rr-split{margin-top:0} (above) doesn't match it, and the theme's
   .entry-content h2{margin-top:48px} applies in full (measured ~54px). Trim to 8px on the
   BARE heading only: :not([class]) hits the unwrapped "Latest story" while leaving the
   classed .rst-feature-title h2 and the desktop .rr-split heading untouched. (The heading
   lives inside .entry-content — confirmed in the live markup — so this composes with the
   theme rule; (0,2,2) wins.) */
@media (max-width:640px){
  body.home .entry-content h2:not([class]){margin-top:8px !important}
}

/* Latest-story feature headline — bring down with the rest. */
.rst-feature-title{font-size:clamp(22px,2.6vw,28px) !important}

/* Bottom nav tiles: were 26/22/16 — cramped. */
.rr-home-tiles a{padding:44px 34px 34px !important}

/* Breathing room before the footer (content was hard up against it). */
.rr-home-applies{margin-bottom:72px !important}
#main-footer{padding-top:56px !important}

/* Niki 17 Jul: content sat jammed against the black footer on Past Events, About,
   Brands and every Contact form. Global breathing room on Divi's content wrapper,
   plus space under any RR form so the SEND button isn't flush. NOTE: verify each
   page logged-out — a Divi listing section that hard-sets its own zero bottom
   padding may still need a scoped `.page-id-… { padding-bottom }` on top of this. */
#main-content{padding-bottom:64px !important}
.rr-form{margin-bottom:48px !important}
@media (max-width:780px){#main-content{padding-bottom:40px !important}}

/* Niki 8 Jul: halve the oversized headers site-wide. Page titles were up to
   52px (.entry-content h1, clamp max 52), section headers 40px (.entry-content
   h2). The homepage hero keeps its own tuned size (body.home .rr-hero-title,
   above, wins on specificity). Verified in-browser on Stories/Gallery/Contact. */
.entry-content h1{font-size:clamp(24px,3vw,32px) !important}
.entry-content h2{font-size:clamp(22px,2.4vw,30px) !important}

/* Contact page (Niki B6): the theme page-title "Contact" renders chopped/overlapping
   above the form; the contact form's own "Get in touch" title is the header we keep.
   The details line then needs top spacing to clear Divi's fixed nav — kept HERE, not
   as an inline style in the page content Niki edits. */
.page-id-8801 h1.entry-title{display:none !important}
/* Niki 17 Jul: "MAKE THIS TEXT MUCH BIGGER AND CENTRE ON THE PAGE." The
   Email · Instagram · Facebook line is enlarged and centred as a block (text +
   the block itself, via margin-inline:auto). Verify it reads centred on the page,
   not just centred within a left column. */
.page-id-8801 .rr-contact-details{
  padding-top:60px;
  font-size:1.25rem !important;
  line-height:1.7 !important;
  text-align:center !important;
  margin-inline:auto !important;
  max-width:none !important;
}
.page-id-8801 .rr-contact-details a{font-size:inherit !important}
/* v1.7.12 FIX 4 (Niki 21 Jul, mobile): the 19-Jul enlargement (1.25rem/20px,
   centred) overflows at 390px — the details is ONE <p> (Email · Instagram ·
   Facebook, &middot;-separated, no per-line elements, confirmed from live
   markup), and at 20px the 44-char "Facebook: facebook.com/revivalrunwayfashion"
   segment wraps its URL onto a 2nd line; the block also sits flush (0px measured)
   against the "Get in touch" heading. ≤640px only: ~15px so the 44-char segment
   ≈ 310px fits inside a ~92vw block on one line, each URL kept unbroken, and
   ~40px clearance before the heading. Desktop (≥641px) keeps the 1.25rem centred
   look above. Per-line white-space:nowrap isn't possible (single <p>, no line
   elements) — the font shrink is the lever, and nowrap on the <a> stops the URL
   itself ever breaking mid-address. */
@media (max-width:640px){
  .page-id-8801 .rr-contact-details{
    font-size:0.95rem !important;   /* ~15px (from 1.25rem) — 44-char Facebook line ≈ 310px, fits 390px */
    line-height:1.85 !important;
    max-width:92vw !important;
    margin-bottom:40px !important;  /* was ~0 to "Get in touch" (measured) — Niki: clear gap before the heading */
  }
  .page-id-8801 .rr-contact-details a{white-space:nowrap !important}   /* keep each URL on one line, never split mid-address */
}
/* v1.7.13 (Niki 21 Jul follow-up, caught in live verify): the font shrink kept
   the URL whole but the flow could still break BETWEEN the label and its value
   ("Facebook:" ending one line, the URL starting the next — measured label top
   266 vs link top 296 at 390px). CSS can't glue sibling text nodes, so the page
   content now wraps each "Label: value" pair in <span class="rr-nb"> (surgical
   wp-cli edit, 21 Jul) and this rule makes each pair an unbreakable unit. Widths
   checked: the longest pair ≈ 310px at 15.2px, inside the 358px mobile block. */
.rr-contact-details .rr-nb{white-space:nowrap;display:inline-block}

/* v1.7.12 FIX 5 (Niki 21 Jul, mobile): ~163px dead gap between the article's
   featured image and its first paragraph (MEASURED 390px: image bottom 727,
   first <p> top 890). ROOT CAUSE (from the live page's dynamic Divi CSS): the
   Post-Title Theme-Builder module carries min-height:697px
   (.et_pb_post_title_0_tb_body{min-height:697px}); on phones the title + capped
   featured image are far shorter than 697px, so the module reserves the
   difference as empty space BELOW the image, before the Post-Content module.
   Collapse that min-height at ≤780px on the split row and keep a tidy image→text
   gap. Scoped to .rr-article-split (the Theme-Builder "STORIES" body-template row
   set by revival-stories) — NOT a global image-margin change. Loads here because
   the article page's [our_stories] rail enqueues rr-grid. Targets the stable
   .et_pb_post_title module class (not the _0_tb_body suffix) so it survives Divi
   re-ordering; (0,2,0) beats Divi's (0,1,0) even without !important, but !important
   is kept to out-rank the module's own inline design CSS. */
@media (max-width:780px){
  .rr-article-split .et_pb_post_title{min-height:0 !important}
  .rr-article-split .et_pb_post_title.et_pb_post_title{padding-bottom:24px !important}  /* was 19px module pad — ~24px reads as one clean image→text gap */
}

/* --- v1.6.9 — Niki 13 Jul email: "make the HOMEPAGE IMAGE 8 x 5" -----------
   Root-caused live on staging: Divi's Theme-Options custom CSS (the same
   un-editable-on-this-host block the .rr-vol-circle fix routes around) ships
     .home .rr-hero-img{aspect-ratio:16/6 !important;
                        min-height:300px !important;max-height:520px !important}
   which out-ranks the compact hero's 8/5 rule above — her new upload
   (RR-metro-mood-HOMEPAGE-image-text.jpg) rendered squashed at 16:6.
   Both rules are !important → higher specificity wins: this selector is
   (0,4,2) vs the offender's (0,2,1). ≥781px only — the same Divi block's
   ≤780px portrait crop (aspect-ratio:4/5) is deliberate and stays in charge
   on phones. */
@media (min-width:781px){
  body.home .rr-hero.rr-hero--compact .rr-hero-img{
    aspect-ratio:8/5 !important;
    min-height:0 !important;
    max-height:none !important;
    /* Her current upload is 16:9 with the event title baked into the LEFT of
       the artwork — a centred 8:5 crop chops the first letter of every line
       (verified in-browser). Left-anchor the crop so the title survives; the
       spare width is city-skyline on the right. Harmless no-op once a true
       8:5 image is uploaded (nothing to crop). */
    object-position:left 22% !important;
  }
}

/* --- v1.7.11 — phone counterpart to the v1.6.9 block above ------------------
   Niki 20 Jul screenshots: on phones the Divi Theme-Options block's ≤780px
   portrait crop (aspect-ratio:4/5) plus the base .rr-hero-img
   object-position:50% 25% (line ~262) chop the baked-in event title off the
   LEFT of RR-metro-mood-HOMEPAGE-image-text.jpg — it's a 16:9 poster with
   text, not a photo, so portrait-cropping it amputates the headline (client
   screenshotted it). Show the whole poster instead: full 16:9, no crop.
   Harmless no-op if a text-free image is ever uploaded — nothing stops the
   4/5 portrait crop from coming back for that case; just delete this block. */
@media (max-width:780px){
  body.home .rr-hero.rr-hero--compact .rr-hero-img{
    aspect-ratio:16/9 !important;   /* show the whole poster — portrait-cropping a text poster amputates the baked-in title */
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    object-position:center !important;
  }
}

/* v1.7.1 — Niki 17 Jul: "CAN WE MAKE THIS BUTTON WHITE." The Artisan page CTA
   button (.cta-btn "GET IN TOUCH", in the black "Interested in a Stall?" bar) was
   a white-outline button with near-black text on black — barely legible. White
   background makes the existing dark text read. Scoped to the Artisan page only. */
body.page-id-8451 .cta-section .cta-btn{
  background:#fff !important;
  color:#0a0a0a !important;
  border-color:#fff !important;
}
body.page-id-8451 .cta-section .cta-btn:hover{
  background:#e9e9e9 !important;
  color:#0a0a0a !important;
  border-color:#e9e9e9 !important;
}
/* --- Search results (v1.7.3) --------------------------------------------------
   The child theme's search.php drops each result into #content-area as a Divi
   float-column, but every one is tagged .et_pb_column_1 (position 1), so they
   never clear into rows — the result was a broken, gappy two-ish-column mess.
   Override #content-area into a clean responsive grid on search pages only. */
body.search #content-area{
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  width:100% !important;
  max-width:1100px;
  margin:0 auto;
  float:none !important;
}
body.search #content-area > .et_pb_post{
  width:auto !important;max-width:none !important;float:none !important;margin:0 !important;
}
body.search #content-area > *:not(.et_pb_post){ grid-column:1 / -1; }  /* title/pagination/no-results span full width */
@media (max-width:980px){ body.search #content-area{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ body.search #content-area{ grid-template-columns:1fr; } }
/* v1.7.14 FIX B: a 1px vertical line sliced through the results grid at desktop
   (client screenshot, /?s=frankie — between cols 2–3). ROOT CAUSE (confirmed in the
   live CSS): Divi's content/sidebar divider pseudo-element
   #main-content .container:before {content:"";position:absolute;height:100%;width:1px;
   background:#e2e2e2}, positioned right:20.875% (22.75% with .et_pb_gutters2) because
   body.search carries et_right_sidebar — yet the child theme's search.php renders NO
   sidebar (no #sidebar in the DOM, #left-area is commented out; each result goes
   straight into #content-area, which the v1.7.3 block above reshapes into a full-width
   grid), so the rule draws a floating divider over the cards. Divi shows it >980px and
   hides it ≤980px (@media(max-width:980px){#main-content .container:before{display:none
   !important}}), which is why the client only saw it at desktop. Hide it on search pages.
   (1,2,2)+!important out-ranks Divi's desktop show rule (1,1,1, no !important). */
body.search #main-content .container:before{display:none !important}

/* --- Footer: align the signup column with the other three (Josh 20 Jul) -------
   WordPress (wpautop) wraps the signup form in a <p>; that <p>'s leading
   whitespace rendered a ~21px line box, pushing the form ~9px below the other
   columns' <h3> headings. Collapse that whitespace line, then give the form title
   the same 12px top offset the wp-block headings use, so all four line up. */
#footer-widgets .footer-widget .fwidget > p{margin:0 !important;font-size:0 !important;line-height:0 !important}
#footer-widgets .footer-widget .fwidget > p > .rr-form{font-size:14px}
#footer-widgets .footer-widget .rr-form-title{margin-top:12px !important}