/*
Theme Name:   SNN-BRX - Bricks Builder Child Theme
Theme URI:    https://github.com/sinanisler/snn-brx-child-theme
Description:  SNN-BRX Child Theme is a purpose-built essential building suite for agencies and professionals, streamlining your Bricks Builder projects with one powerful child theme.
Author:       sinanisler
Author URI:   https://github.com/sinanisler
Text Domain:  snn
Template:     bricks
Requires at least: 6.9
Version: 0.297
*/

/* QS-DESIGN-SYSTEM START */
/* =========================================================
   QUINN SLATER — SITE-WIDE DESIGN SYSTEM (child theme style.css)
   @font-face + shared c-* layer + nav/mega. Adapted to Bricks nav-nested DOM.
   Unlayered → beats Bricks' @layer bricks. Verified 2026-07-22.
   ============================================================ */

/* ---- Self-hosted fonts (shared, site-wide) ---- */
@font-face{font-family:'Cormorant Garamond';src:url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/quinn-assets/fonts/cormorant-garamond-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Garamond';src:url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/quinn-assets/fonts/cormorant-garamond-italic-var.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/quinn-assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

/* ---- Shared component layer (site-wide) ---- */
body { background:var(--color-base); color:var(--color-text-main); font-family:var(--font-body); font-size:var(--text-m); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; }
h1 { font-family:var(--font-heading); font-size:var(--text-5xl); font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); color:var(--color-text-bright); margin:0; text-wrap:balance; }
h1 em { font-style:italic; color:var(--color-primary); }
.c-persona--quinn { --accent:var(--color-quinn); --accent-soft:var(--color-quinn-soft); }
.c-persona--kane  { --accent:var(--color-kane);  --accent-soft:var(--color-kane-soft); }
.c-persona--max   { --accent:var(--color-max);   --accent-soft:var(--color-max-soft); }
/* data-pen twins of the persona classes for query-loop cards (attribute driven by {post_terms_pen_name}) */
[data-pen="Quinn"] { --accent:var(--color-quinn); --accent-soft:var(--color-quinn-soft); }
[data-pen="Kane"]  { --accent:var(--color-kane);  --accent-soft:var(--color-kane-soft); }
[data-pen="Max"]   { --accent:var(--color-max);   --accent-soft:var(--color-max-soft); }
.c-eyebrow { display:inline-flex; align-items:center; gap:var(--space-2xs); font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent, var(--color-tertiary)); margin:0; }
.c-lead { font-family:var(--font-body); font-size:var(--text-l); font-weight:var(--weight-normal); line-height:var(--leading-normal); color:var(--color-text-muted); margin:var(--space-m) 0 0; max-width:62ch; text-wrap:pretty; }
.c-btn { display:inline-flex; align-items:center; gap:var(--space-2xs); font-family:var(--font-body); font-size:var(--text-s); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:var(--space-xs) var(--space-m); border-radius:var(--radius-xl); border:1px solid transparent; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); }
.c-btn:hover { transform:translateY(-2px); }
.c-btn--primary { background:var(--color-primary); color:var(--color-text-bright); box-shadow:var(--shadow-crimson-glow); }
.c-btn--primary:hover { background:var(--color-secondary); box-shadow:var(--shadow-crimson-glow-hover); }
.c-btn--outline { background:transparent; border-color:rgba(240,237,232,0.35); color:var(--color-text-main); }
.c-btn--outline:hover { border-color:var(--color-primary); color:var(--color-text-bright); background:var(--color-primary-soft); }
.c-btn--lg { padding:var(--space-s) var(--space-l); font-size:var(--text-m); }
.c-btn--gold { background:var(--color-tertiary); color:var(--color-dark); }
.c-btn--gold:hover { background:#D8BC6B; }
.c-card__title { font-family:var(--font-heading); font-size:var(--text-xl); font-weight:var(--weight-semibold); line-height:var(--leading-tight); color:var(--color-text-bright); margin:0 0 var(--space-xs); }
@keyframes c-flicker { 0%,100%{opacity:1;filter:brightness(1);} 42%{opacity:0.92;filter:brightness(1.06);} 58%{opacity:0.96;filter:brightness(0.97);} 74%{opacity:0.90;filter:brightness(1.04);} }
.c-flicker { animation:c-flicker 4.5s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .c-flicker { animation:none; } }

/* ============================================================
   NAV BAR — nav-nested root carries .c-nav (full-bleed bg, content centered to 1280)
   ============================================================ */
.c-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
  padding-block: var(--space-2xs);
  padding-inline: max(var(--space-m), calc((100% - 1280px) / 2));
}

/* SNN light-layer FOUC reveal (bricks-lazy-hidden) does not reliably clear on sub-pages
   (e.g. /events/) — the header + mobile menu stay hidden/half-faded there. A site header
   must never depend on a reveal animation, so force it visible even if the class sticks. (2026-07-25) */
.c-nav.bricks-lazy-hidden { opacity: 1 !important; visibility: visible !important; }

/* When the mobile menu is OPEN, force the whole drawer + any still-lazy items visible so
   the menu never renders half-empty on sub-pages (the SNN reveal stalls there). Scoped to
   .brx-open, so the CLOSED menu still hides normally. (2026-07-25) */
.c-nav.brx-open .brx-nav-nested-items,
.c-nav.brx-open .brx-nav-nested-items .bricks-lazy-hidden { opacity: 1 !important; visibility: visible !important; }

/* ---- Logo lockup (fix: size the IMG, not the <a> wrapper) ---- */
.c-nav__logo { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.c-nav__crest { height: 46px; width: auto; display: inline-flex; align-items: center; flex-shrink: 0; }
.c-nav__crest img { height: 46px; width: auto; max-width: none; object-fit: contain; }
.c-nav__logotext { font-family: var(--font-heading); font-size: var(--text-l); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); color: var(--color-text-bright); text-decoration: none; white-space: nowrap; }

/* ---- Nav links + Books toggle (shared look) ---- */
.c-nav .c-nav__link {
  font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-muted); text-decoration: none; background: none;
  padding-block: var(--space-3xs); border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.c-nav .c-nav__link:hover,
.c-nav .c-nav__link[aria-current="page"] { color: var(--color-text-bright); border-bottom-color: var(--color-primary); }
.c-nav .c-nav__link--icon { font-size: var(--text-m); text-transform: none; letter-spacing: 0; }

.c-nav .p-home-mega .brx-submenu-toggle,
.c-nav .p-home-mega .brx-submenu-toggle > button {
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-3xs);
}
.c-nav .p-home-mega .brx-submenu-toggle > span {
  font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-out);
}
.c-nav .p-home-mega:hover .brx-submenu-toggle > span,
.c-nav .p-home-mega.brx-open .brx-submenu-toggle > span { color: var(--color-text-bright); }

/* ---- Mega panel shared visuals (grid/wings/start/foot) ---- */
.p-home-mega__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 240px; gap: var(--space-m); padding: var(--space-l); }
.p-home-mega__wing { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3xs); padding: var(--space-s); border-radius: var(--radius-sm); text-decoration: none; transition: background var(--duration-fast) var(--ease-out); }
.p-home-mega__wing:hover { background: rgba(240, 237, 232, 0.04); }
.p-home-mega__logo { height: 36px; width: auto; margin-bottom: var(--space-3xs); }
.p-home-mega__name { font-family: var(--font-heading); font-size: var(--text-l); font-weight: var(--weight-semibold); color: var(--accent, var(--color-text-bright)); text-shadow: 0 0 10px rgba(255,255,255,0.40), 0 0 26px rgba(255,255,255,0.22); margin: 0; }
.p-home-mega__genre { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-bright); margin: 0; }
.p-home-mega__count { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.p-home-mega__enter { font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-semibold); color: var(--accent, var(--color-primary)); margin-top: var(--space-2xs); transition: filter var(--duration-fast) var(--ease-out); }
.p-home-mega__wing:hover .p-home-mega__enter { filter: brightness(1.35); }
.p-home-mega__start { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); padding: var(--space-s); border-left: 1px solid var(--color-border); }
.p-home-mega__coverwrap { width: 84px; aspect-ratio: 2 / 3; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-card-dark); margin-bottom: var(--space-3xs); }
.p-home-mega__coverwrap .p-home-cover { width: 100%; height: 100%; background: url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/2026/07/fangirl.webp') center / cover no-repeat; }
.p-home-mega__starteyebrow { margin: 0; }
.p-home-mega__startline { font-family: var(--font-body); font-size: var(--text-s); color: var(--color-text-main); margin: 0 0 var(--space-2xs); }
.p-home-mega__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); padding: var(--space-s) var(--space-l); border-top: 1px solid var(--color-border); }
.p-home-mega__footlink { font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-semibold); color: var(--color-text-main); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.p-home-mega__footlink:hover { color: var(--color-text-bright); }
.p-home-mega__footlink--store { color: var(--color-tertiary); }
.p-home-mega__footlink--store:hover { color: var(--color-tertiary); filter: brightness(1.2); }

/* ============================================================
   DESKTOP (>=768px): horizontal nav; mega = floating card CENTERED under the bar
   ============================================================ */
@media (min-width: 768px) {
  .c-nav .brx-nav-nested-items {
    display: flex; align-items: center; gap: var(--space-m);
    list-style: none; margin: 0; padding: 0;
    flex-grow: 1; justify-content: flex-end;   /* pack menu + CTA to the right edge — no dead gap */
  }
  /* li made static so the panel positions against .c-nav (sticky = containing block), not the narrow <li> */
  .c-nav .p-home-mega { position: static; }
  .c-nav .p-home-mega .p-home-mega__panel {
    position: absolute; top: 100%;
    left: 50%; right: auto; transform: translateX(-50%);   /* centered under the bar — clears the CTA */
    width: min(900px, calc(100vw - 2 * var(--space-l)));
    max-width: none;
    background:
      linear-gradient(180deg, rgba(13, 13, 18, 0.94) 0%, rgba(8, 8, 12, 0.97) 100%),
      url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/2026/07/hero-L1-sky.webp') center top / cover no-repeat var(--color-surface);
    border: 1px solid var(--color-border); border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-card-dark);
    padding: 0;
  }
  .c-nav .p-home-mega .p-home-mega__panel::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-flame);
  }
}
/* Tablet band (768–991): mega collapses to 2 columns, narrower centered card */
@media (min-width: 768px) and (max-width: 991px) {
  .c-nav .p-home-mega__grid { grid-template-columns: 1fr 1fr; }
  .c-nav .p-home-mega__start { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--color-border); }
  .c-nav .p-home-mega .p-home-mega__panel { width: min(600px, calc(100vw - 2 * var(--space-m))); }
}

/* ============================================================
   MOBILE (<=767px): Bricks native drawer — dark, full-height, vertical
   (do NOT apply the desktop row styling here; it broke the drawer)
   ============================================================ */
@media (max-width: 767px) {
  .c-nav .brx-nav-nested-items {
    background: var(--color-base);
    min-height: 100dvh; height: auto;
    align-items: stretch; justify-content: flex-start;
    gap: var(--space-2xs);
    padding: 92px var(--space-l) var(--space-2xl);   /* top clears the fixed ~68px header bar (logo + ✕) so the first item doesn't tuck under it */
    overflow-y: auto;
    overscroll-behavior: contain;   /* stop touch scroll-chaining to the page behind the fixed drawer */
  }
  /* Lock the page behind the open drawer so a finger-drag inside the Books mega
     can't scroll the homepage underneath (real-device fix: menu jumped back to the
     homepage + hamburger died on scroll — 2026-07-25). */
  html:has(.c-nav.brx-open) { overflow: hidden; }
  .c-nav .c-nav__link,
  .c-nav .p-home-mega .brx-submenu-toggle > span { font-size: var(--text-l); padding-block: var(--space-2xs); }
  .c-nav .p-home-mega { position: static; width: 100%; }
  .c-nav .p-home-mega .p-home-mega__panel {
    position: static; transform: none; width: 100%; max-width: none;
    box-shadow: none; border: none; border-radius: 0;
    background: rgba(0, 0, 0, 0.25); margin-top: var(--space-2xs);
  }
  .c-nav .p-home-mega .p-home-mega__panel::before { display: none; }
  .c-nav .p-home-mega__grid { grid-template-columns: 1fr; padding: var(--space-m); gap: var(--space-s); }
  .c-nav .p-home-mega__start { border-left: none; border-top: 1px solid var(--color-border); padding-left: 0; }
  .c-nav .p-home-mega__foot { padding-inline: var(--space-m); gap: var(--space-m); }
  .c-nav__cta { align-self: flex-start; margin-top: var(--space-s); }
}

/* ============================================================
   MOBILE TOGGLE — hide the redundant close toggle + animate hamburger→✕
   Bricks nav-nested seeded TWO toggles. The top-bar hamburger opens AND
   closes the drawer; the second (close) toggle was rendering as a stray
   hamburger at the bottom of the open drawer (Hayward review 2026-07-22).
   ============================================================ */
.c-nav .brxe-toggle.brx-toggle-div { display: none; }

/* Keep the header (logo + close button) ABOVE the open drawer. The drawer is a
   fixed opaque overlay (z-index 1001); the logo/toggle are static (z-auto), so on
   WebKit/iOS the drawer paints OVER them — the header vanishes and the ✕ is
   unreachable. Lift both above the drawer while the menu is open. (2026-07-25) */
.c-nav.brx-open .c-nav__logo,
.c-nav.brx-open .brxe-toggle { position: relative; z-index: 1010; }

/* Hamburger → ✕ while the drawer is open (.is-active).
   Bars: .brxa-inner (mid, top:12px h:4px), ::before (top, −10px), ::after (bottom, +10px);
   Bricks already sets `transition: transform .15s` on the bars, so this animates. */
.c-nav .brxe-toggle.is-active .brxa-inner,
.c-nav .brxe-toggle.is-active .brxa-inner::before,
.c-nav .brxe-toggle.is-active .brxa-inner::after { background-color: transparent !important; }
.c-nav .brxe-toggle.is-active .brxa-wrap {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f0ede8'%20stroke-width='2.5'%20stroke-linecap='round'%3E%3Cpath%20d='M5%205%20L19%2019%20M19%205%20L5%2019'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}

/* ---- Shared: section heading + book card (used on homepage shelf; reused by shop/wings/series later) ---- */
.c-h2 { font-family:var(--font-heading); font-size:var(--text-3xl); font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); color:var(--color-text-bright); margin:var(--space-s) 0 0; text-wrap:balance; }
.c-h2 em { font-style:italic; color:var(--accent, var(--color-primary)); }
.c-book-card { display:flex; flex-direction:column; gap:var(--space-xs); text-decoration:none; max-width:240px; }
.c-book-card__cover { aspect-ratio:2 / 3; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-card-dark); transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.c-book-card__cover img { width:100%; height:100%; object-fit:cover; display:block; }
.c-book-card:hover .c-book-card__cover { transform:translateY(-8px) rotate(-2deg); box-shadow:var(--shadow-crimson-glow-hover); }
.c-book-card__series { font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent, var(--color-tertiary)); margin:var(--space-2xs) 0 0; }
.c-book-card__title { font-family:var(--font-heading); font-size:var(--text-l); font-weight:var(--weight-semibold); line-height:var(--leading-tight); color:var(--color-text-bright); margin:0; }
.c-card { background:rgba(26,26,46,0.60); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-l); backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); box-shadow:var(--shadow-card-dark); transition:border-color var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
.c-card:hover { border-color:var(--accent, var(--color-primary)); transform:translateY(-4px); }

/* ---- Shared: body copy + c-showcase center-focus carousel (homepage series; reusable) ---- */
.c-body { font-family:var(--font-body); font-size:var(--text-m); font-weight:var(--weight-normal); line-height:var(--leading-relaxed); color:var(--color-text-main); margin:0; }
.c-showcase { position:relative; width:100%; overflow-x:clip; overflow-y:visible; }
.c-showcase .splide__track { padding-block:var(--space-s); overflow:visible; }
.c-showcase .splide__slide { opacity:0.45; transform:scale(0.9); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--color-border); transition:transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) ease, border-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease; }
.c-showcase .splide__slide.is-active { opacity:1; transform:scale(1.04); border-color:rgba(200,169,81,0.35); box-shadow:var(--shadow-card-dark), var(--shadow-gold-glow); z-index:2; }
.c-showcase .splide__slide.is-visible:not(.is-active) { opacity:0.7; transform:scale(0.96); }
.c-showcase .splide__arrows { position:absolute; inset:0; height:100%; pointer-events:none; z-index:var(--z-sticky); }
.c-showcase .splide__arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; background:rgba(240,237,232,0.04); border:1px solid var(--color-border); border-radius:var(--radius-full); opacity:1; backdrop-filter:var(--blur-md); -webkit-backdrop-filter:var(--blur-md); pointer-events:all; cursor:pointer; transition:border-color var(--duration-normal) ease, background-color var(--duration-normal) ease; }
.c-showcase .splide__arrow--prev { left:var(--space-m); }
.c-showcase .splide__arrow--next { right:var(--space-m); }
.c-showcase .splide__arrow svg { fill:var(--color-text-main); width:18px; height:18px; }
/* Bricks' splide skin does NOT flip the prev arrow (learned on the shelf 2026-07-25) */
.c-showcase .splide__arrow--prev svg { transform:scaleX(-1); }
.c-showcase .splide__arrow:hover { border-color:var(--color-tertiary); background:var(--color-tertiary-soft); }
.c-showcase .splide__arrow:hover svg { fill:var(--color-tertiary); }
.c-showcase .splide__pagination { bottom:calc(var(--space-xl) * -1); gap:var(--space-3xs); }
.c-showcase .splide__pagination__page { width:8px; height:8px; background:rgba(240,237,232,0.2); border:none; border-radius:var(--radius-full); opacity:1; transition:background-color var(--duration-normal) ease, width var(--duration-normal) ease; }
.c-showcase .splide__pagination__page:hover { background:rgba(240,237,232,0.4); }
.c-showcase .splide__pagination__page.is-active { background:var(--color-tertiary); width:24px; border-radius:var(--radius-full); box-shadow:var(--shadow-gold-glow); }
@media (max-width: 960px) { .c-showcase .splide__slide.is-active { transform:scale(1.02); } .c-showcase .splide__arrow { width:40px; height:40px; } }

/* QS-SHARED-COMPONENTS START (fonts + base component layer, promoted 2026-07-28) */
@font-face{font-family:'Cormorant Garamond';src:url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/quinn-assets/fonts/cormorant-garamond-var.woff2') format('woff2');font-weight:300 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cormorant Garamond';src:url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/quinn-assets/fonts/cormorant-garamond-italic-var.woff2') format('woff2');font-weight:300 700;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/quinn-assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}

/* Promoted from post-24 customCss 2026-07-28 (Brian) - shared component layer, now site-wide. Post-24 retains its copy (identical rules, harmless) until pruned. */
body { margin:0; background:var(--color-base); color:var(--color-text-main); font-family:var(--font-body); font-size:var(--text-m); line-height:var(--leading-normal); -webkit-font-smoothing:antialiased; }
h1 { font-family:var(--font-heading); font-size:var(--text-5xl); font-weight:var(--weight-semibold); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); color:var(--color-text-bright); margin:0; text-wrap:balance; }
h1 em { font-style:italic; color:var(--color-primary); }
.c-persona--quinn { --accent:var(--color-quinn); --accent-soft:var(--color-quinn-soft); }
.c-persona--kane  { --accent:var(--color-kane);  --accent-soft:var(--color-kane-soft); }
.c-persona--max   { --accent:var(--color-max);   --accent-soft:var(--color-max-soft); }
.c-eyebrow { display:inline-flex; align-items:center; gap:var(--space-2xs); font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent, var(--color-tertiary)); margin:0; }
.c-lead { font-family:var(--font-body); font-size:var(--text-l); font-weight:var(--weight-normal); line-height:var(--leading-normal); color:var(--color-text-muted); margin:var(--space-m) 0 0; max-width:62ch; text-wrap:pretty; }
.c-btn { display:inline-flex; align-items:center; gap:var(--space-2xs); font-family:var(--font-body); font-size:var(--text-s); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; padding:var(--space-xs) var(--space-m); border-radius:var(--radius-xl); border:1px solid transparent; text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out); }
.c-btn:hover { transform:translateY(-2px); }
.c-btn--primary { background:var(--color-primary); color:var(--color-text-bright); box-shadow:var(--shadow-crimson-glow); }
.c-btn--primary:hover { background:var(--color-secondary); box-shadow:var(--shadow-crimson-glow-hover); }
.c-btn--outline { background:transparent; border-color:rgba(240,237,232,0.35); color:var(--color-text-main); }
.c-btn--outline:hover { border-color:var(--color-primary); color:var(--color-text-bright); background:var(--color-primary-soft); }
.c-btn--lg { padding:var(--space-s) var(--space-l); font-size:var(--text-m); }
@keyframes c-flicker { 0%,100%{opacity:1;filter:brightness(1);} 42%{opacity:0.92;filter:brightness(1.06);} 58%{opacity:0.96;filter:brightness(0.97);} 74%{opacity:0.90;filter:brightness(1.04);} }
.c-flicker { animation:c-flicker 4.5s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .c-flicker { animation:none; } }
/* QS-SHARED-COMPONENTS END */

/* QS-PRODUCT-TEMPLATE START (single-product template 206 + site-wide Woo control styling, 2026-07-28) */
.p-product { padding-block: calc(var(--space-section-m) + var(--space-l)) var(--space-section-m); }
.p-product__inner { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: var(--space-m); }
.p-product__back { display: inline-block; font-family: var(--font-body); font-size: var(--text-s); color: var(--color-text-muted); text-decoration: none; margin-bottom: var(--space-l); transition: color var(--duration-fast) var(--ease-out); }
.p-product__back:hover { color: var(--color-text-bright); }
.p-product__grid { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: var(--space-xl); align-items: start; }
.p-product__cover img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.p-product__kicker { margin-bottom: var(--space-xs); }
.p-product__title { margin: 0 0 var(--space-xs); }
.p-product__price { font-family: var(--font-body); font-size: var(--text-l); font-weight: var(--weight-semibold); color: var(--color-tertiary); margin: 0 0 var(--space-m); }
@media (max-width: 768px) { .p-product__grid { grid-template-columns: 1fr; } .p-product__cover { max-width: 260px; } }

/* Woo controls, site-wide: crimson buttons + dark qty input (product / cart / checkout) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce button.button.alt, .woocommerce a.checkout-button, .woocommerce #respond input#submit, .wc-block-components-button, button.single_add_to_cart_button {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: var(--space-xs) var(--space-m); border-radius: var(--radius-xl); border: 1px solid transparent;
  background: var(--color-primary); color: var(--color-text-bright);
  box-shadow: var(--shadow-crimson-glow); text-decoration: none; cursor: pointer;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out);
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce button.button.alt:hover, .woocommerce a.checkout-button:hover, .wc-block-components-button:hover, button.single_add_to_cart_button:hover {
  background: var(--color-secondary); color: var(--color-text-bright); box-shadow: var(--shadow-crimson-glow-hover); transform: translateY(-2px);
}
.woocommerce .quantity .qty { background: rgba(240, 237, 232, 0.06); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-main); font-family: var(--font-body); padding: var(--space-2xs) var(--space-2xs); min-height: 42px; }

/* Woo notice banners, site-wide: house-style dark cards (success=gold, error=crimson, info=neutral) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: rgba(26, 26, 46, 0.60);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-main);
  font-family: var(--font-body); font-size: var(--text-s); line-height: var(--leading-normal);
}
.woocommerce-message { border-left: 3px solid var(--color-tertiary); }
.woocommerce-message::before { color: var(--color-tertiary); }
.woocommerce-error { border-left: 3px solid var(--color-primary); }
.woocommerce-error::before { color: var(--color-primary); }
.woocommerce-info { border-left: 3px solid var(--color-border); }
.woocommerce-info::before { color: var(--color-text-muted); }
.wc-block-components-notice-banner { background: rgba(26, 26, 46, 0.60); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-main); }
.wc-block-components-notice-banner.is-success { border-left: 3px solid var(--color-tertiary); }
.wc-block-components-notice-banner.is-success svg { fill: var(--color-tertiary); }
.wc-block-components-notice-banner.is-error { border-left: 3px solid var(--color-primary); }
.wc-block-components-notice-banner.is-error svg { fill: var(--color-primary); }

/* QS-PRODUCT-TEMPLATE END */

/* QS-ARCHIVE-TEMPLATE START (term-archive template 207: pen_name wings + series shelves, 2026-07-27) */
.p-archive { padding-block: calc(var(--space-section-m) + var(--space-l)) var(--space-section-m); }
.p-archive__inner { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-m); }
.p-archive__title { margin: var(--space-2xs) 0 0; }
.p-archive__meta { margin-top: var(--space-2xs); }
.p-archive__grid { margin-top: var(--space-l); }
/* Card-support rules mirrored from post-16 page CSS, scoped to archives (shop keeps its own copy) */
.p-archive .c-book-card { position: relative; }
.p-archive .p-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-m); }
.p-archive .p-shop-price { font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-semibold); color: var(--color-text-main); margin: var(--space-4xs) 0 0; }
.p-archive .p-shop-badge { position: absolute; top: var(--space-2xs); left: var(--space-2xs); z-index: var(--z-base); font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 2px var(--space-2xs); border-radius: var(--radius-sm); background: rgba(10, 10, 10, 0.75); color: var(--color-text-main); border: 1px solid var(--color-border); }
.p-archive .p-shop-badge:empty { display: none; }
.p-archive .c-book-card[data-badge=set] .p-shop-badge { color: var(--color-tertiary); }
/* QS-ARCHIVE-TEMPLATE END */

/* QS-DESIGN-SYSTEM END */


/* QS-GLOBAL-GUARD (Brian 2026-07-28): the header mega panel is visibility-hidden but
   still occupies layout, letting sub-pages scroll sideways ~250px. Clip stray
   horizontal overflow at the root; does not create a scroll container. */
html { overflow-x: clip; }


/* QS-FOOTER (Brian 2026-07-29 s13): canonical footer, design-system §11 1:1,
   + .c-caption (§type — used by footer tagline + Keyholders blurb).
   .p-footer-social rules live in template 103 customCss per the c-star / p-star law. */
.c-caption {
  font-family: var(--font-body);
  font-size: var(--text-s);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  margin: 0;
}
.c-footer {
  position: relative;
  background: var(--color-dark);
  padding: var(--space-2xl) 0 var(--space-l);
}
.c-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-flame);
}
.c-footer__inner {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-m);
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .c-footer__inner { grid-template-columns: 2fr 1fr 1fr 2fr; }
}
.c-footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-tertiary);
  margin: 0 0 var(--space-s);
}
.c-footer__link {
  display: block;
  font-size: var(--text-s);
  color: var(--color-text-muted);
  text-decoration: none;
  padding-block: var(--space-4xs);
  transition: color var(--duration-fast) var(--ease-out);
}
.c-footer__link:hover { color: var(--color-text-bright); }
.c-footer__wing { font-weight: var(--weight-semibold); color: var(--accent, var(--color-text-muted)); }
.c-footer__wing:hover { color: var(--accent, var(--color-text-bright)); filter: brightness(1.3); }
.c-footer__legal {
  max-width: 1280px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-s) var(--space-m) 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.c-footer__legal a { color: inherit; text-decoration: none; }
.c-footer__legal a:hover { color: var(--color-text-main); }
/* QS-FOOTER END */

/* QS-FOOTER FIX (s13b, Brian): counters Bricks base css inside footer template 103.
   a) .brxe-section{align-items:center} shrank the text-basic legal bar to fit-content,
      killing its space-between spread (looked centered).
   b) Bricks frontend.min.css body a{font-weight:700} bolded plain footer links;
      prototype weight is normal. Wings stay semibold by design. */
.c-footer__inner, .c-footer__legal { width: 100%; }
.c-footer__link { font-weight: var(--weight-normal); }
.c-footer__wing { font-weight: var(--weight-semibold); }
.c-footer__legal a { font-weight: var(--weight-normal); }
/* QS-FOOTER FIX END */

/* QS-HEAT (Brian s13): heat flames, promoted from page-208-local per QG rule.
   Flame drawn via CSS mask because Bricks strips inline SVG from dynamic output. */
.c-heat { display: inline-flex; align-items: center; gap: var(--space-4xs); }
.c-heat__flame { width: 16px; height: 16px; display: inline-block; background: rgba(240, 237, 232, 0.16); -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c1 4-3 5.5-3 9a3 3 0 0 0 6 0c0-1.5-.8-2.6-1.4-3.6C15.8 8.6 19 10.8 19 15a7 7 0 0 1-14 0c0-6 5.5-8 7-13z'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2c1 4-3 5.5-3 9a3 3 0 0 0 6 0c0-1.5-.8-2.6-1.4-3.6C15.8 8.6 19 10.8 19 15a7 7 0 0 1-14 0c0-6 5.5-8 7-13z'/></svg>") center / contain no-repeat; transition: background var(--duration-fast) var(--ease-out); }
.c-heat__flame.is-lit { background: var(--heat, var(--color-primary)); }
.c-heat--1 { --heat: #6B4E9B; }
.c-heat--2 { --heat: #A23A6B; }
.c-heat--3 { --heat: #C41E3A; }
.c-heat--4 { --heat: #A50F2D; }
.c-heat--5 { --heat: #8B0000; }
/* QS-HEAT END */

/* QS-MIA-CREDIT (Brian s13): MIA-standard footer attribution, all author sites. */
.c-made-with__heart { color: #E91E63; }
.c-footer__legal .c-made-with__link { color: var(--color-text-main); font-weight: var(--weight-semibold); }
.c-footer__legal .c-made-with__link:hover { color: var(--color-text-bright); }
/* QS-MIA-CREDIT END */

/* QS-SURFACE (Brian s13): obsidian-charcoal gold-ruled band treatment.
   Replaces Smoke #1A1A2E per Hayward GO 2026-07-29 (test: color-test-surface).
   Single source of truth - all page band rules reference these properties.
   Parallax only on fine pointers; iOS/Android fixed-attachment is broken. */
:root {
  --surface-band-bg:
    linear-gradient(180deg, rgba(26,26,26,0.84) 0%, rgba(18,18,18,0.90) 100%),
    url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/2026/07/texture-obsidian.webp') center / cover no-repeat #161616;
  --surface-band-line: rgba(200,169,81,0.22);
  --surface-band-attach: scroll;
}
@media (hover: hover) and (pointer: fine) {
  :root { --surface-band-attach: scroll, fixed; }
}
/* QS-SURFACE END */

/* QS-CTA-BAND (Brian s13): Keyholders band shell promoted to child theme - was
   duplicated per page (12 copies); events page 112 shipped without it, which
   unstyled its band (Hayward catch). Pages with local copies override harmlessly. */
.c-cta-band { position: relative; background: var(--color-dark); padding-block: var(--space-section-l); overflow: hidden; text-align: center; }
.c-cta-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gradient-flame); }
.c-cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(55% 80% at 85% 12%, var(--color-primary-soft), transparent 70%), radial-gradient(45% 70% at 8% 92%, var(--color-tertiary-soft), transparent 70%); }
.c-cta-band__inner { position: relative; z-index: var(--z-base); width: 100%; max-width: 720px; margin-inline: auto; padding-inline: var(--space-m); display: flex; flex-direction: column; align-items: center; }
/* QS-CTA-BAND END */

/* QS-CART-BADGE (Brian s13): item-count pill on the header cart icon.
   Hidden when empty; refreshed by Woo cart fragments. */
.c-nav__link--icon { position: relative; }
.c-nav__cart-count { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; font-weight: var(--weight-bold); line-height: 1; color: #fff; background: var(--color-primary); border-radius: var(--radius-full); pointer-events: none; }
.c-nav__cart-count:empty { display: none; }
/* QS-CART-BADGE END */

/* QS-BS-BANNER (Brian s13): box-set state banner on cart and checkout,
   plus struck-through line prices while the 3-plus rule is active. */
.c-bs-banner { display: block; margin-top: var(--space-s); padding: var(--space-2xs) var(--space-s); border: 1px solid var(--color-tertiary); border-radius: var(--radius-sm); background: rgba(200, 169, 81, 0.08); font-family: var(--font-body); font-size: var(--text-s); color: var(--color-text-main); }
.c-bs-banner strong { color: var(--color-tertiary); }
.c-bs-banner--unlocked { border-color: var(--color-primary); background: rgba(196, 30, 58, 0.10); }
.c-bs-banner--unlocked strong { color: var(--color-primary); }
.qs-bs-tag { display: inline-block; margin-left: 4px; padding: 1px 6px; font-size: var(--text-xs); color: var(--color-tertiary); border: 1px solid var(--color-tertiary); border-radius: var(--radius-full); }
table.shop_table del { color: var(--color-text-muted); opacity: 0.7; margin-right: 4px; }
/* QS-BS-BANNER END */

/* QS-LIBRARY (Brian s14, 2026-07-31; v2 same-day - compact hero, brighter art,
   sticky filter panel, instant-filter support. Hayward adjustment: books above
   the fold, no jump-to-top. Sticky engages >768px only (stacked mobile rows
   too tall to pin); top offsets = live header heights 132/128/64.
   Markup from qs_library_filters / qs_library_stacks (novamira-sandbox).
   Cards reuse .c-book-card above. Browse-only page. */
.c-lib-hero { position: relative; background: linear-gradient(180deg, rgba(16,16,16,0.68) 0%, rgba(10,10,10,0.80) 100%), url('https://quinnslaterauthor.myindieauthor.site/wp-content/uploads/2026/07/section-library-v2.png') center 30% / cover no-repeat, #0A0A0A; border-bottom: 1px solid var(--surface-band-line); padding-block: var(--space-l); text-align: center; }
.c-lib-hero__inner { max-width: 820px; margin-inline: auto; padding-inline: var(--space-m); display: flex; flex-direction: column; align-items: center; }
.c-lib-hero__inner h1, .c-lib-hero__inner .c-lead { text-shadow: 0 2px 22px rgba(5,5,7,0.85), 0 0 6px rgba(5,5,7,0.6); }
.c-lib-hero__lead { text-align: center; margin-top: var(--space-2xs); }
.c-lib-filters { position: sticky; top: 0; z-index: 400; background: rgba(10,10,10,0.92); backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg); border-bottom: 1px solid var(--color-border); padding-block: var(--space-s); }
.c-lib-filters__inner { max-width: 1280px; margin-inline: auto; padding-inline: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
.c-lib-frow { display: flex; align-items: baseline; gap: var(--space-xs); }
.c-lib-frow__wing { flex: 0 0 110px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent, var(--color-tertiary)); padding-block: var(--space-4xs); }
.c-lib-frow__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.c-lib-chip { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-4xs) var(--space-xs); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.c-lib-chip:hover { color: var(--color-text-bright); border-color: var(--accent, var(--color-primary)); }
.c-lib-chip.is-active { color: var(--color-text-bright); border-color: var(--accent, var(--color-primary)); background: var(--accent-soft, var(--color-primary-soft)); }
.c-lib-chip--all { --accent: var(--color-primary); --accent-soft: var(--color-primary-soft); }
.c-lib-stacks { max-width: 1280px; margin-inline: auto; padding: var(--space-s) var(--space-m) var(--space-2xl); }
.c-lib-group { padding-block: var(--space-l); border-bottom: 1px solid var(--color-border); }
.c-lib-group:last-child { border-bottom: none; }
.c-lib-group__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-m); }
.c-lib-group__title { margin-top: var(--space-3xs); }
.c-lib-group__title a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); }
.c-lib-group__title a:hover { color: var(--accent, var(--color-tertiary)); }
.c-lib-group__view { font-family: var(--font-body); font-size: var(--text-s); font-weight: var(--weight-medium); color: var(--color-text-muted); text-decoration: none; white-space: nowrap; padding-block: var(--space-3xs); transition: color var(--duration-fast) var(--ease-out); }
.c-lib-group__view:hover { color: var(--accent, var(--color-tertiary)); }
.c-lib-group__note { margin-top: var(--space-s); font-style: italic; }
.c-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-m); }
.c-lib-grid .c-book-card { max-width: none; }
.c-lib-cover--pending { background: var(--color-surface); }
@media (max-width: 960px) { .c-lib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
@media (max-width: 768px) { .c-lib-filters { position: static; } .c-lib-frow { flex-direction: column; gap: var(--space-3xs); } .c-lib-frow__wing { flex-basis: auto; } .c-lib-group__head { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); } }
@media (max-width: 560px) { .c-lib-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-s); } }
/* QS-LIBRARY END */

/* QS-FORM-MSG (Brian s14, 2026-07-31): Bricks form response messages were
   unreadable on the dark theme (default pale info/success backgrounds with
   light text - Hayward catch on the Library Keyholders form). Site-wide
   override for all Keyholders forms + any future Bricks form. */
.brxe-form .message { background: rgba(22,22,22,0.96); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-main); font-family: var(--font-body); font-size: var(--text-s); line-height: var(--leading-snug); box-shadow: var(--shadow-card-dark); margin-top: var(--space-xs); }
.brxe-form .message.success { border-color: rgba(200,169,81,0.45); color: var(--color-text-main); }
.brxe-form .message.error { background: rgba(196,30,58,0.14); border-color: var(--color-primary); color: var(--color-text-main); }
.brxe-form .message .close { color: var(--color-text-muted); }
/* QS-FORM-MSG END */