/* ==========================================================================
   Category pages — additive layer.

   Loads AFTER app.css and spooky.css and only adds what those did not
   already have: the header artwork slot, the run-status pills, the stats
   row, region sub-copy and the featured card scene. Everything else on the
   page (nav emblems, card frames, region signs, footer) is the site's own
   design system, untouched.
   ========================================================================== */

/* ------------------------------------------------- home link in the nav -- */
/* The site had no way back to the homepage from any inner page. Originally
   the same boxed emblem tile as its neighbours; pulled out to its own
   unframed logo mark, left of the tile row, at 2x the old tile art size. */

.topbar .nav{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  max-width:none;
  margin:0;
  padding:14px 20px 18px;
  box-sizing:border-box;
}
.topbar .nav-logo{
  flex:0 0 auto;
  display:block;
  line-height:0;
  padding:0;
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  transition:filter .18s ease;
}
.topbar .nav-logo::before{content:none}
.topbar .nav-logo img{
  display:block;
  width:auto;
  height:110px;
  object-fit:contain;
}
.topbar .nav-logo:hover{filter:brightness(1.12)}
.topbar .nav-logo:focus-visible{outline:3px solid var(--sign-cream,#fff0d2);outline-offset:4px}

.topbar .navlinks.nav-emblem-group{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:none;
  margin:0;
  padding:14px 4px 18px 0;
  justify-content:flex-start;
  overflow-x:auto;
  overflow-y:hidden;
}

@media(max-width:760px){
  .topbar .nav{gap:14px;padding:10px 14px 14px}
  .topbar .nav-logo img{height:81px}
}
@media(max-width:460px){
  .topbar .nav-logo img{height:66px}
}

/* -------------------------------------------------------- breadcrumb ----- */

.page .crumbs{
  margin:18px 0 6px;
  font-size:13px;
  color:#b7a3c3;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.page .crumbs a{color:#e7d6c0}
.page .crumbs a:hover{color:var(--link-hover,#39ff14)}
.page .crumbs span[aria-current]{color:var(--sign-cream,#fff0d2)}

/* ----------------------------------------------------- page title slot --- */
/* Live lettering by default. Drop assets/brand/header-<slug>.webp in and the
   artwork takes over, with the text kept for screen readers and search. */

.page .page-title-slot{position:relative;margin:10px 0 6px;text-align:center}
.page .page-title-art{display:block;width:min(860px,100%);height:auto;margin:0 auto}

.page .page-title-text{
  margin:6px 0 18px;
  font-family:var(--sign-font,'Spooky Sign',Georgia,serif);
  font-weight:400;
  font-size:clamp(40px,7vw,84px);
  line-height:1;
  text-transform:uppercase;
  text-align:center;
  color:var(--sign-gold,#ff952f);
  text-shadow:
    0 2px 0 #7a3a10,
    0 4px 0 #4a2109,
    0 7px 16px rgba(0,0,0,.62),
    0 0 46px rgba(255,149,47,.3);
  max-width:none;
}
.page .page-title-slot.has-art .page-title-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;margin:0;
}

.page .season-lede{
  margin:0 auto 22px;
  max-width:66ch;
  text-align:center;
  font-size:17px;
  color:#eee7dc;
}

/* -------------------------------------------------------- stats strip ---- */

.page .page-stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 30px;
  margin:0 0 26px;padding:16px 0;
  border-top:1px solid #5e367999;
  border-bottom:1px solid #5e367999;
  list-style:none;
}
.page .page-stats li{
  display:flex;align-items:baseline;gap:8px;
  font-size:13px;color:#b7a3c3;
}
.page .page-stats b{
  font-family:var(--tile-font,'Spooky Emblem',Georgia,serif);
  font-weight:800;font-size:21px;line-height:1;
  color:var(--sign-gold,#ff952f);
}

/* ------------------------------------------------ region jump / signs ---- */
/* Reuses the homepage .city-deck > .city-banner > .city-sign component so the
   region row here is the same object as the one under the hero. */

/* The markup now also carries hero-banner-base (same as the homepage), which
   is what actually supplies the exact banner size: the purple band + gold
   top/bottom border (spooky.css .hero-banner-base.city-deck) and, at
   min-width:1000px below, the "seven signs, 101px tall" sizing that the
   homepage's own row uses (.hero-banner-base .city-scroll/.city-sign,
   !important, further down this file). Nothing page-specific needed here
   for size/border any more -- this file only adds what the homepage's row
   doesn't have to handle: the count caption, and its own anchor tags aren't
   buttons, so they pick up .hero-banner-base a's hover underline unless we
   cancel it. */
.jump-deck{margin:8px 0 38px}
.jump-deck .city-sign:hover{text-decoration:none}

/* Count sits under the name as a small caption rather than fighting the
   sign lettering. */
.jump-deck .city-sign{flex-direction:column;gap:3px;line-height:1.08}
.jump-deck .city-sign b{
  font-family:var(--body,'DM Sans',Arial,sans-serif)!important;
  font-variation-settings:normal!important;
  font-weight:700!important;
  font-size:11.5px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:#f0c893!important;
  text-shadow:0 1px 2px #0009!important;
  opacity:1;
}

/* ------------------------------------------------- nav + region capsules -- */
/* Region signs: seven across, one line, about 15% bigger than before. Width
   is whatever keeps them on a single row; the size increase comes from
   height and lettering, which is what actually reads as bigger.

   Nav tiles: V54, 2-line labels back on a single row — see the matching
   block (same values) in spooky.css for the full rationale. Duplicated
   here rather than left to spooky.css alone because this file loads after
   it on these pages and used to carry its own !important override; kept
   in sync so there's no gap if one file is edited without the other. */

@media(min-width:1000px){
  /* The logo now lives outside this group as its own flex sibling, so the
     group only ever has to fill whatever width is left over. grid's
     minmax(floor,1fr) fills that width exactly across 11 equal columns at
     typical desktop widths, and only floors out -- triggering the
     horizontal scrollbar below instead of wrapping to a second row -- on
     unusually narrow desktop windows. */
  .topbar .navlinks.nav-emblem-group{
    display:grid!important;
    grid-template-columns:repeat(11,minmax(70px,1fr))!important;
    align-content:flex-start;
    width:100%;
    max-width:none;
    padding-inline:8px;
    padding-block:10px 16px;
    gap:clamp(4px,0.45vw,9px);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    scrollbar-color:#9f718c #210d2d;
  }
  .topbar .nav-emblem{
    width:auto;
    min-width:0;
    height:101px;min-height:101px;
    /* Fixed padding, not a small clamp() sliver -- reserves the ornate
       frame's footprint so the label never paints under it. The frame is a
       ::before overlay (border-image, see the shared card-frame rule near
       the top of spooky.css) painted 18px in from the tile's edge, pulled
       out 3px by its own negative inset. Its opaque scrollwork reaches
       ~15px in AT THE CORNERS but thins to only ~9-12px along the mid-edges
       (measured from the source webp's alpha) -- and the centered 2-line
       label sits in that vertical mid-band, well clear of the corners, so
       even the 10%-larger V57 text (which slightly overflows this padding
       box) still stays off the visible frame. */
    padding:16px;
    /* Lets the label size below be set relative to THIS tile's own
       resolved width (cqw) instead of the viewport (vw) -- container-
       relative, same philosophy as the width formula above, and the only
       way one shared rule can satisfy every label. Longest one sitewide
       ("Spooky Movie Screenings", 3 words) needs the label noticeably
       smaller than the rest to stay at 2 lines; sizing every tile off
       cqw keeps all 11 the same size while satisfying that worst case. */
    container-type:inline-size;
  }
  /* Higher specificity than the sitewide .topbar .nav-emblem{font-size...}
     rule further down this file, so it wins regardless of source order.
     V55.1: "as large as possible without touching the frame" -- the 16px
     padding above already reserves the frame's own footprint, so this only
     has to solve for the widest safe font within what's left. cqw is
     relative to the tile's full width (not its padded content box), so the
     formula nets out that fixed 32px (16px each side) before scaling: found
     by measuring, in a headless browser, the largest font that still keeps
     the longest of these 10 labels' two lines ("Trunk-or-" / "Treats" is
     the tightest) inside the padding box at 9 tile widths from the 70px
     floor up to a very wide monitor, then fitting a line through those
     points with a small safety margin so no tested width comes out over.
     min() caps it at the tile-height-driven ceiling (2 lines at
     line-height 1.1 fits under 101px - 32px of padding up to ~31px) so an
     extremely wide browser window can't blow past that either.
     V57: 10% bigger text, boxes unchanged -- coefficient x1.10 (0.15 ->
     0.165, Movie Screenings 0.11 -> 0.121, cap 30 -> 33px). V58: a further
     5% on top, boxes unchanged, and Jimmy explicitly OK with text touching
     the inner frame this time -- coefficient x1.05 (0.165 -> 0.17325,
     Movie Screenings 0.121 -> 0.12705, cap 33 -> 34.65px). V59: another 5%
     on the 10 standard tiles (0.17325 -> 0.1819125, cap -> 36.3825px), and
     10% on Movie Screenings alone (it read too small vs its neighbours):
     0.12705 -> 0.139755, cap -> 38.115px. Same content-box cqw base and
     -32px offset; 16px padding unchanged. Frame-touching still allowed;
     hard limits still enforced are 2-line + single-row + no spill past the
     tile box (Movie Screenings' "Spooky Movie" line is the width-limited
     one, re-checked at this larger size). */
  /* V60: one font-size rule for ALL 11 tiles -- Jimmy asked for every tile
     to match the size of the standard tiles (e.g. "Cemetery Walks"). The
     v57-v59 Movie-Screenings-only smaller rule is gone; Movie Screenings
     now uses this exact same size as the rest. Consequence, accepted per
     "don't worry about inner frames touching text": on the 244 pages whose
     label is 3 words ("Spooky Movie Screenings"), the "Spooky Movie" line
     is wider than any 2-word label, so at very wide windows (>=1800px) that
     one tile wraps to 3 lines instead of 2 -- it still stays inside its own
     box (no spill onto neighbours), it just stacks taller. Below ~1700px
     (the common desktop range) it stays 2 lines like the others. */
  .topbar .navlinks.nav-emblem-group .nav-emblem span{
    font-size:min(calc((100cqw - 32px) * 0.1819125), 36.3825px);
    line-height:1.1;
  }

  /* Seven region signs across, one row. This is the default for the jump
     decks on category + region pages (7 or more signs, wrapping handled by
     those pages' own counts). */
  .hero-banner-base .city-scroll{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:clamp(6px,0.8vw,16px);
    width:97%;
    max-width:1680px;
  }
  .hero-banner-base .city-sign{
    grid-column:auto!important;
    width:100%;
    height:101px;min-height:101px;
    padding:10px clamp(5px,0.6vw,12px);
  }
  /* V61: the HOMEPAGE hero region banner has 8 capsules (ALL SOCAL + the 7
     regions) and was wrapping 7-on-row-one / 1-on-row-two under the repeat(7)
     default above. Give it its own 8-column track so all 8 sit on one row.
     Scoped to the homepage only: its deck is `.hero-banner-base.city-deck`
     WITHOUT `.jump-deck` (buttons), whereas the category/region jump decks
     add `.jump-deck` (anchors) and keep the 7-track default. The extra
     :not() also lifts specificity above the rule above, so no !important
     race. Each capsule shrinks ~1/8 vs 1/7 (Jimmy OK'd a slight shrink);
     the two longest names ("Orange County", "Ventura County") wrap to 2
     lines inside their capsule, which they already did at repeat(7). */
  .hero-banner-base:not(.jump-deck) .city-scroll{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
  }
  /* Jump decks default to 7 tracks (rule above). A handful of pages carry more
     region signs than 7 and were wrapping the extras onto a 2nd row. Give those
     pages a track count that matches their sign count so the row stays single,
     opted in per page via a cols-N class on the banner. */
  .hero-banner-base.jump-deck.cols-8 .city-scroll{
    grid-template-columns:repeat(8,minmax(0,1fr))!important;
  }
  .hero-banner-base.jump-deck.cols-9 .city-scroll{
    grid-template-columns:repeat(9,minmax(0,1fr))!important;
  }
}

/* Tablet: same flex-wrap/centered treatment as desktop, just smaller tiles.
   3-4 rows here instead of 2, which is fine -- there's room for it and it
   still reads as a centered block rather than the old single-row scroll. */
@media(min-width:760px) and (max-width:999px){
  /* The tile block is now taller than the logo -- align-items:center (the
     base .topbar .nav rule, above) would float the logo in the middle of
     that stack, so pin it to the top here instead. */
  .topbar .nav{align-items:flex-start}
  .topbar .navlinks.nav-emblem-group{
    display:flex!important;
    flex-flow:row wrap!important;
    grid-auto-flow:unset!important;
    grid-template-columns:none!important;
    justify-content:center!important;
    align-content:flex-start;
    gap:8px 10px;
    width:94%;
    max-width:640px;
    margin:0 auto;
    padding:10px 4px 14px;
    overflow:visible;
    scrollbar-width:thin;
    scrollbar-color:#9f718c #210d2d;
  }
  .topbar .nav-emblem{
    flex:0 0 clamp(104px,28vw,150px);
    width:auto;min-width:0;
    scroll-snap-align:unset;
    padding:12px 9px;
  }
}
/* Phone: a wrapped multi-row stack gets very tall at this width with not
   much payoff, so this keeps the pre-V52 single-row sideways scroll instead
   -- same tiles, same artwork, just scrolled rather than stacked. */
@media(max-width:759px){
  .topbar .navlinks.nav-emblem-group{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-template-columns:none!important;
    grid-auto-columns:clamp(116px,21vw,196px);
    gap:12px;
    width:94%;
    margin:0 auto;
    padding:12px 4px 14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#9f718c #210d2d;
  }
  .topbar .nav-emblem{width:100%;min-width:0;scroll-snap-align:start;padding:14px 9px}
}

/* Label sizing scales with the tile at every width, so "MOVIE SCREENINGS" and
   "VENTURA COUNTY" stay whole instead of clipping on a narrow tile. */
.topbar .nav-emblem{font-size:clamp(12.5px,1.2vw,19px);line-height:1.14}
.hero-banner-base .city-sign{font-size:clamp(12px,1.12vw,18px);line-height:1.02}

/* Long two-word labels need room to wrap rather than being clipped by the
   fixed tile height. */
.topbar .nav-emblem span,
.hero-banner-base .city-sign{
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  overflow-wrap:break-word;
  hyphens:none;
}
.topbar .nav-emblem span{width:100%;height:100%}

/* ------------------------------------------------------ region blocks ---- */

.page .season-region{margin:0 0 46px;scroll-margin-top:18px}

.page .region-sub{
  margin:14px 0 22px;
  max-width:72ch;
  font-size:14.5px;
  color:#c6b4d0;
}

/* Haunted Houses only: each region section is headed by the same enamel
   "sign" graphic used in the city banner above (purple-bat-frame.png, plus
   the site's shared gold engraved-lettering treatment, .tile-label, from
   spooky.css) instead of plain text -- at roughly 2x the on-page size of a
   single tile in that banner. The frame's own background rule is copied
   here rather than reused via .city-deck .city-sign so this doesn't ride on
   -- or get disturbed by -- every other place that selector is used
   sitewide. .tile-label itself is untouched and shared as-is, so the
   lettering always matches the rest of the site exactly. */
.page .results-toolbar.region-header{
  display:block;
  border-bottom:0;
  padding-bottom:0;
  text-shadow:none;
  /* h2.region-header-sign is display:inline-flex (an inline-level box), so
     its own margin:0 auto never centers it -- text-align on this block
     parent is what actually centers an inline-level child. */
  text-align:center;
}
.page h2.region-header-sign{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  margin:0 auto;
  min-height:clamp(148px,15vw,202px);
  min-width:clamp(220px,30vw,380px);
  max-width:100%;
  padding:clamp(14px,1.8vw,20px) clamp(22px,3vw,36px);
  background:transparent url('./brand/purple-bat-frame.png') center/100% 100% no-repeat;
  text-align:center;
  color:#ffe4b0;
  text-shadow:none;
}
.page .region-header-sign .tile-label{
  font-family:var(--tile-font,'Spooky Emblem',Georgia,serif);
  font-weight:850;
  font-stretch:90%;
  font-variation-settings:'wdth' 90,'opsz' 48,'wght' 850,'GRAD' 50;
  font-size:clamp(25px,2.7vw,42px);
  line-height:1.2;
  letter-spacing:.5px;
  text-transform:uppercase;
  /* .results-toolbar (spooky.css) sets an inherited text-shadow for its
     plain-text headings; it bleeds into this gradient-clipped label and
     muddies the fill, so cancel it here. The engraved-edge look instead
     comes entirely from .tile-label's own filter (drop-shadow chain). */
  text-shadow:none;
}
.page .region-header-count{
  font-family:var(--body,'DM Sans',Arial,sans-serif);
  font-weight:700;
  font-size:clamp(12.5px,1.1vw,15px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f0c893;
  text-shadow:0 1px 2px #0009;
}
@media(max-width:620px){
  .page h2.region-header-sign{min-width:100%}
}

/* ------------------------------------------------------ status pills ----- */

.run-status{
  display:inline-flex;align-items:center;gap:6px;
  margin:0 0 8px;
  padding:4px 11px;
  font-family:var(--body,'DM Sans',Arial,sans-serif);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.run-status::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:0 0 auto;
}
.run-status.is-open{
  color:#8ff0a5;background:rgba(23,64,35,.55);border-color:rgba(143,240,165,.45);
}
.run-status.is-open::before{box-shadow:0 0 0 3px rgba(143,240,165,.2)}
.run-status.is-soon{
  color:#ffc37a;background:rgba(255,149,47,.14);border-color:rgba(255,195,122,.45);
}
.run-status.is-later{
  color:#cbb8d6;background:rgba(94,54,121,.3);border-color:rgba(94,54,121,.7);
}
.run-status.is-done{
  color:#9a89a6;background:rgba(20,10,28,.55);border-color:rgba(94,54,121,.5);
}

/* ----------------------------------------------------------- tidy-ups ---- */

.page .results-toolbar{margin-bottom:0}
.page .season-region .curated-cards{margin-top:22px}

@media(max-width:700px){
  .page .page-stats{gap:10px 20px;padding:14px 0}
  .page .season-lede{font-size:16px}
  .page .season-region{margin-bottom:36px}
}

@media(prefers-reduced-motion:reduce){
  .run-status.is-open::before{box-shadow:none}
}

/* Section heads are h2 for a valid outline (h1 › h2 section › h3 card title);
   the site styles .results-toolbar h3, so mirror it onto h2. */
.page .results-toolbar h2{
  margin:0;
  font-family:var(--display,'Barlow Condensed',sans-serif);
  font-size:28px;
  font-weight:800;
  line-height:1.1;
  text-transform:uppercase;
  color:#ffdda1;
}
@media(max-width:620px){.page .results-toolbar h2{font-size:23px}}

/* ==========================================================================
   Homepage answer blocks and card cap.
   Same additive approach — app.css and spooky.css are untouched.
   ========================================================================== */

/* -------------------------------------------------------- answer strip --- */

.answer-strip{margin:34px auto 10px}
.answer-strip h2{
  margin:0 0 14px;
  font-family:var(--display,'Barlow Condensed',sans-serif);
  font-size:clamp(24px,3vw,32px);font-weight:800;
  text-transform:uppercase;letter-spacing:.01em;
  color:#ffdda1;
}
.answer-lede{
  margin:0;max-width:78ch;
  font-size:16.5px;line-height:1.6;color:#eee7dc;
}
.answer-lede strong{color:var(--sign-cream,#fff0d2)}

.answer-stats{
  display:flex;flex-wrap:wrap;gap:10px 30px;
  margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid rgba(94,54,121,.6);
  list-style:none;
}
.answer-stats li{display:flex;align-items:baseline;gap:8px;font-size:13px;color:#b7a3c3}
.answer-stats b{
  font-family:var(--tile-font,'Spooky Emblem',Georgia,serif);
  font-weight:800;font-size:21px;line-height:1;color:var(--sign-gold,#ff952f);
}

/* ---------------------------------------------------------------- FAQ ---- */
/* Boxed in its own iron-frame card — the same ::before ironwork overlay
   used by .info-card/.featured-preview/.card elsewhere (spooky.css), so it
   reads as one more framed component rather than bare text on the brick
   background. Header art replaces the live "Questions we get asked"
   lettering (kept for screen readers/SEO), sized down from the 850px page
   h1 art since this is a mid-page section, not the page's own title. The
   eight items run two-up on a grid instead of one long column so the card
   holds its content without sprawling down the page. */

.directory-answers{margin:44px auto 10px;width:96%;max-width:none}
.faq-card{
  /* No box-shadow/filter on this box: at this size (the whole FAQ card,
     much bigger than the small tile/card frames elsewhere using the same
     border-image ::before) either one triggers a headless-Chromium
     compositing glitch that blanks the header art and grid underneath it.
     The ironwork art already carries its own shading, so skipping the
     extra shadow costs nothing visually. */
  position:relative;isolation:isolate;
  background:#2a1637;
  border:2px solid #ac744d;
  border-radius:14px;
  padding:30px 34px 24px;
}
.faq-card::before{
  /* No filter:drop-shadow here — on a box this large (the full FAQ card,
     much bigger than the small tile/card frames elsewhere that use the same
     border-image) it triggers a headless-Chromium compositing glitch that
     paints the whole layer opaque, blanking out the header art and grid
     underneath. The ironwork art's own baked-in shading carries the depth
     instead, so no shadow/filter is added anywhere on this component. */
  content:'';position:absolute;inset:-3px;z-index:2;pointer-events:none;
  border:19px solid transparent;
  border-image:url('./brand/spooky-frame.webp') 250 180 160 180 / 19px / 0 stretch;
}
.faq-art-title{width:100%;max-width:560px;margin:0 auto 14px;padding:0;line-height:0}
.faq-art-title .section-header-art{display:block;width:100%;height:auto;object-fit:contain;margin:0 auto}
.faq-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:44px;
}
.faq-item{
  margin:0;padding:12px 0;
  border-top:1px solid rgba(94,54,121,.55);
}
.faq-item:nth-child(-n+2){border-top:0;padding-top:0}
.faq-item h3{
  margin:0 0 5px;
  font-family:var(--tile-font,'Spooky Emblem',Georgia,serif);
  font-weight:800;font-stretch:80%;
  font-size:16.5px;line-height:1.25;
  color:var(--sign-cream,#fff0d2);
  text-transform:none;
}
.faq-item p{margin:0;font-size:14px;line-height:1.48;color:#ddd0e0}
.faq-more{margin:16px 0 0;font-size:14px;text-align:center}
.faq-more a{color:#ffdda1}
@media(max-width:700px){
  .faq-card{padding:24px 20px 20px}
  .faq-grid{grid-template-columns:1fr}
  .faq-item:nth-child(-n+2){border-top:1px solid rgba(94,54,121,.55);padding-top:12px}
  .faq-item:first-child{border-top:0;padding-top:0}
}

/* ----------------------------------------------------------- card cap ---- */

#cards.cards-capped .card:nth-child(n+25),
.cards.cards-capped .card:nth-child(n+25){display:none!important}

.cards-more{
  display:block;width:100%;
  margin:26px auto 0;padding:16px 22px;
  border:1px solid #b17b58;border-radius:12px;
  background:url('./brand/haunted-ironwork-tile.svg') center/100% 100% no-repeat,
             linear-gradient(145deg,#40204f,#20102c);
  box-shadow:0 3px 0 #120719;
  color:#ffe4b0;
  font-size:17px;
  cursor:pointer;
}
.cards-more:hover{filter:brightness(1.15)}
.cards-more:active{transform:translateY(2px);box-shadow:0 1px 0 #120719}

@media(max-width:700px){
  .answer-strip{margin-top:26px}
  .answer-stats{gap:10px 20px}
}