/* ============================================================
   COOL GOOL MUSIC — "WHITE + AZURE" SKIN (LIVE DEFAULT)
   ------------------------------------------------------------
   Loaded by mu-plugins/cgm-skin-preview.php for every ordinary
   visitor — cgm_skin_mode() hardcodes $mode = 'azure' as of v2.0.0
   (2026-07-23), when the old/new gate was inverted. ?skin=dark in
   the URL or the cgm_skin=dark cookie is now the escape-hatch that
   PREVIEWS the old dark "School of Rock" skin (style.css) instead.
   Enqueued AFTER coolgool-style so plain source order wins nearly
   everywhere — !important is used only where the theme/DB ships an
   inline style="" attribute that cannot otherwise be beaten.

   This is a full light-mode inversion, not a var swap. The dark
   theme hardcodes rgba(255,90,30,…) (ember) 33× and
   rgba(255,178,62,…) (amber) 31× inside gradients, glows and
   scrims; every one of those is patched below.

   PALETTE
     page bg     #ffffff
     surface     #f4f7fa   (was --coal)
     surface2    #e8eef4   (was --char)
     ink         #222528   15.6:1 on white
     ink-dim     #4a545e    7.7:1 on white · 7.2:1 on surface
     muted       #545d66    6.7:1 on white · 6.2:1 on surface
     accent      #0f6fb8    5.3:1 on white · white-on-accent 5.3:1
     accent-deep #0b5183    8.3:1 on white   (the --amber slot)
     accent2     #c4e5f4   TINT ONLY — fills/borders, never text
     spark       #cf1f22    5.4:1 on white   (his old site's red)
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   The theme's own custom properties are redefined wholesale, so
   every var()-driven rule (and every inline style="color:var(--bone)"
   in the page content) follows automatically.
   ------------------------------------------------------------ */
:root{
  /* neutrals — inverted */
  --black:#ffffff;          /* page background            */
  --coal:#f4f7fa;           /* surface  (panel base)      */
  --char:#e8eef4;           /* surface2 (panel gradient)  */
  --smoke:#dbe4ec;
  --ash:#67727e;            /* 2026-08-03: placeholders, index digits —
                               #78838f measured 3.86:1 on white, an AA fail;
                               darkened to 4.9:1 on white · 4.56:1 on
                               #f4f7fa (both AA) */
  --bone:#222528;           /* ink        */
  --bone-dim:#4a545e;       /* ink-dim    */
  --muted:#545d66;          /* 2026-08-03: was declared twice (here and a
                               later :root block) with drifted values —
                               deduped to this one declaration, keeping the
                               correct live value. micro-labels — #6b7580
                               from the brief measures
                               4.36:1 on the #f4f7fa panels, just under AA, so
                               it was first darkened to #626c77 (5.3:1 on
                               white). But .72–.92rem micro-copy that floats
                               DIRECTLY on the transparent photo bands
                               (.pricing-note, .foot-brand p, .foot-bottom,
                               hero meta) sits over the veiled backdrop,
                               which measured #626c77 down to ~4.3:1 — under
                               AA again. Darkened one more notch to #545d66,
                               restoring AA (5.3:1) over the darkest band
                               block and lifting every muted label on the
                               panels too, while staying lighter than
                               --bone-dim so the label hierarchy is
                               unchanged. */

  /* accents */
  --ember:#0f6fb8;          /* azure — links, buttons, the ember slot */
  --amber:#0b5183;          /* deep azure — the "highlight" slot      */
  --crimson:#cf1f22;        /* his old site's real red; also keeps the
                               form error states red rather than blue  */
  --spark:#cf1f22;          /* named alias for .hot / group-lesson italics */
  --accent2:#c4e5f4;        /* pale sky TINT — fills and borders only */

  --stage-1:#e9f3fa;
  --stage-2:#f3f8fc;

  --edge:rgba(20,30,40,.12);
  --edge-soft:rgba(20,30,40,.07);

  /* Must track --black (#ffffff here), not the default skin's near-black.
     A bare `transparent` would be rgba(0,0,0,0) and the pricing-table
     swipe fade would ramp through translucent BLACK over a white table —
     a visible grey smudge. See --fade-clear in style.css. */
  --fade-clear:rgba(255,255,255,0);

  --shadow-lg:0 26px 54px -28px rgba(18,42,66,.30);
  --glow:0 0 0 1px rgba(15,111,184,.22), 0 14px 34px -14px rgba(15,111,184,.38);

  /* keep the block editor's preset vars in step (theme.json colours,
     .has-*-color utility classes, core button element styles) */
  --wp--preset--color--black:#ffffff;
  --wp--preset--color--coal:#f4f7fa;
  --wp--preset--color--char:#e8eef4;
  --wp--preset--color--smoke:#dbe4ec;
  --wp--preset--color--ash:#67727e;
  --wp--preset--color--bone:#222528;
  --wp--preset--color--bone-dim:#4a545e;
  --wp--preset--color--muted:#545d66;
  --wp--preset--color--ember:#0f6fb8;
  --wp--preset--color--amber:#0b5183;
  --wp--preset--color--crimson:#cf1f22;
  --wp--preset--gradient--ember:linear-gradient(135deg,#0f6fb8,#1a8ad0);
  --wp--preset--gradient--stagelight:linear-gradient(120deg,#0b5183,#0f6fb8 55%,#1f9ad8);
}

/* ------------------------------------------------------------
   2. PAGE SHELL — stage vignette, film grain, selection
   ------------------------------------------------------------ */
body{background:#fff;color:var(--bone)}

/* The fixed "stage vignette" was three warm glows over near-black.
   Inverted: a cool sky wash that lifts the top-right and the fold. */
body::before{
  background:
    radial-gradient(90vw 60vh at 78% -8%, rgba(196,229,244,.62), transparent 62%),
    radial-gradient(70vw 55vh at 10% 8%, rgba(15,111,184,.06), transparent 58%),
    radial-gradient(120vw 90vh at 50% 120%, rgba(196,229,244,.42), transparent 62%),
    linear-gradient(180deg,#ffffff,#fbfdfe 55%,#ffffff);
}

/* Film grain: `overlay` is a no-op on a white base (white stays white),
   so the texture would simply vanish. Switched to a very light
   `multiply` so the paper keeps a little tooth without going grey. */
body::after{opacity:.028;mix-blend-mode:multiply}

::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--ember)}

/* ------------------------------------------------------------
   3. NAV / HEADER
   ------------------------------------------------------------ */
header.nav{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.68));
  border-bottom:1px solid var(--edge);
}
header.nav.scrolled{
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px -22px rgba(18,42,66,.55);
}
.brand .mark{
  background:linear-gradient(150deg,var(--ember),#1f8fd4);
  color:#fff;
}
.brand .name span{color:var(--ember)}
nav.links a{color:var(--bone-dim)}
nav.links a:hover{color:var(--ember)}

.btn-primary{
  background:linear-gradient(135deg,#0f6fb8,#1487d3);
  color:#fff;
}
.btn-primary:hover{
  box-shadow:0 0 0 1px rgba(15,111,184,.45),0 20px 46px -16px rgba(15,111,184,.55);
}
.btn-ghost{
  background:rgba(255,255,255,.72);
  color:var(--bone);
  border-color:var(--edge);
}
.btn-ghost:hover{border-color:var(--ember);color:var(--ember);background:#fff}
.burger{border-color:var(--edge);background:rgba(255,255,255,.7)}
.burger span{background:var(--bone)}

/* ------------------------------------------------------------
   4. PHOTOGRAPHIC HEROES
   triptych.jpg / bright.jpg / recording.jpg / guitarbass.jpg are
   dark, moody, deliberately underexposed stage shots. Dropped
   straight onto a white page they read as holes punched in it —
   and worse, every one of them ships an INLINE background-image
   whose first layer is a near-black scrim (rgba(8,6,5,.94)) that
   exists purely to float pale text. On a light skin the text is
   dark ink, so that scrim has to go the other way.

   Three-stage treatment, because inline styles cannot be edited from
   a stylesheet and there are ~20 of them across the site:

     a) DISSOLVE the baked-in scrims with background-blend-mode:screen.
        Screening a near-black layer over the photo is very close to a
        no-op, so the rgba(8,6,5,.94) wall simply stops existing and the
        photograph underneath comes back. background-color must be #000
        for this: screen blends the LAST layer against the background
        colour, and screening against anything lighter than black would
        blow the photo out to white. (Trying to beat the scrim with a
        filter alone does not work — 94% black carries no detail to
        recover, and the result is a flat grey slab.)
     b) FILTER the recovered photo down to a pale, cool, low-contrast
        version so dark ink can sit on it.
     c) VEIL it from the PARENT — a white/sky wash painted OUTSIDE the
        filter (a ::before on .hero / .page-hero, not on the bg div) so
        it lands at full strength instead of being pulled back toward
        grey by the filter.

   [style] / :not([style]) splits photo heroes from the 12
   gradient-only ones, which need the opposite treatment.
   ------------------------------------------------------------ */
/* .hero-bg is always photo-mode now (a real <img>, never an inline
   style="" attribute), so it no longer needs the [style] gate that
   .page-hero-bg still needs (that one is genuinely conditional, set
   per-page). The old rule screened all 5 of the element's own background
   layers (4 gradients + the url() photo) together in one pass via
   background-blend-mode. Reproducing that with the photo now a sibling
   <img> takes two folds, both screen, both required: (1)
   background-blend-mode:screen here folds .hero-bg::before's 4 gradient
   layers together exactly as before, then (2) mix-blend-mode:screen folds
   that result against the <img> behind it. Compositing is a strict
   bottom-to-top fold, so pausing it after 4 layers (fold 1) and resuming
   with the photo as the next layer (fold 2) is identical to folding all 5
   in one pass — but fold 1 must use screen too, or the 4 gradients would
   merge with each other via plain alpha-over first and only the *result*
   would screen against the photo, which is not the same computation. */
.hero-bg{
  background-color:#000;
  filter:brightness(1.12) contrast(.68) saturate(.42);
}
.hero-bg::before{background-blend-mode:screen;mix-blend-mode:screen}
/* the ember "screen" flare baked onto both bg elements */
.hero-bg::after,
.page-hero-bg::after{background:none}
.page-hero-bg[style]{
  background-color:#000;
  background-blend-mode:screen;
  filter:brightness(1.12) contrast(.68) saturate(.42);
}

/* Gradient-only interior hero (no inline style — page-hero-bg is set
   per-page, unlike .hero-bg which is always photo-mode; see above).
   This gets the opposite treatment to the photo ones: nothing to subdue,
   so the sky tint is pushed UP, otherwise a white-on-white banner reads
   as an empty gap where the dark theme had a lit stage. --accent2 does
   the work here — it is a tint, so it is safe as a large field but never
   as text. */
.page-hero-bg:not([style]){
  background-color:var(--stage-2);
  background-image:
    linear-gradient(90deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,.05) 100%),
    radial-gradient(62vw 78vh at 86% 0%, rgba(150,205,238,.70), transparent 64%),
    radial-gradient(50vw 55vh at 8% 104%, rgba(15,111,184,.16), transparent 62%),
    linear-gradient(0deg,#ffffff 2%,transparent 48%),
    linear-gradient(160deg,#dceefa,#f4fafd);
}

/* The veil — painted above the filtered photo, below the copy.
   It is deliberately near-opaque across the left 42%, which is exactly
   the band the headline, standfirst, buttons and meta labels occupy.
   That is not timidity: measured against the recovered photograph, a
   .70 veil left the .72rem meta labels at 4.24:1 and the kicker at
   3.89:1 — both below AA. At .94 the same labels measure 8.9:1.
   The photo is given up on the text side and kept on the right, which
   is the same composition the dark theme uses, just mirrored. */
.hero::before,
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.965) 0%,
      rgba(255,255,255,.94) 42%,
      rgba(255,255,255,.66) 66%,
      rgba(226,242,251,.34) 100%),
    linear-gradient(0deg,#ffffff 0%,rgba(255,255,255,.55) 14%,rgba(255,255,255,0) 40%);
}
/* the theme leaves these wrappers unpositioned, so lift the copy
   above the veil explicitly */
.hero .hero-grid{position:relative;z-index:1}
.page-hero .page-hero-inner{position:relative;z-index:1}

/* mobile: copy runs the full width, so the 90deg veil must not
   thin out on the right-hand side */
@media (max-width:900px){
  .hero::before,
  .page-hero::before{
    background:
      linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 65%,rgba(255,255,255,.86) 100%),
      linear-gradient(0deg,#ffffff 0%,rgba(255,255,255,.5) 18%,rgba(255,255,255,0) 46%);
  }
}

/* The dark theme floats the headline off the photo with
   `text-shadow:0 2px 40px rgba(0,0,0,.6)`. The obvious inversion — a
   white halo — is actively harmful here: on an element using
   background-clip:text the shadow is painted through the glyph alpha,
   so a 22px white blur floods the letters from the inside. Measured on
   "FEES", it lifted the darkest glyph pixel from rgb(13,97,156) to
   rgb(71,141,187) and was the real reason the accent word looked
   bleached. The veil above already puts the copy on near-white, so the
   halo has no job left to do. */
.hero h1,
.page-hero-title{text-shadow:none}
/* The dark theme's headline gradient runs amber → ember → crimson, i.e.
   it gets BRIGHTER as it travels, because it is glowing off a black
   stage. Inverted, that direction reads as the word fading out.
   The range is also kept deliberately TIGHT (4.8:1 → 8.3:1, so every
   point on it clears AA even at body size). A wider gradient is not
   safe here: at 120deg on a near-square em box — "FEES" measures
   142×130 — the far stop lands in the empty descender space below the
   caps, so the glyphs only ever sample the first third of the ramp and
   a light start bleaches the word out. */
.hero h1 em,
.hero-strap em,
.page-hero-title em{
  background:linear-gradient(120deg,#1076bd,#0b5183);
  -webkit-background-clip:text;background-clip:text;
}
.hero-meta span::before,
.page-hero-meta span::before{
  background:var(--ember);
  box-shadow:0 0 0 3px rgba(15,111,184,.16);
}

/* ------------------------------------------------------------
   5. HERO GIG CARD
   ------------------------------------------------------------ */
.gigcard{
  background:linear-gradient(180deg,#ffffff,var(--coal));
  border-color:var(--edge);
  box-shadow:var(--shadow-lg);
}
/* photo card-head: lifted, then re-tinted through the theme's own
   ::after (which is inside the element, so it lands after the filter
   only because the filter is not applied to a parent of it) */
.gc-media[style]{filter:contrast(.72) brightness(1.24) saturate(.85)}
.gc-media:not([style]){
  background:
    repeating-linear-gradient(90deg,rgba(20,30,40,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(20,30,40,.03) 0 1px,transparent 1px 20px),
    radial-gradient(120% 90% at 82% 8%, rgba(196,229,244,.9), transparent 58%),
    linear-gradient(160deg,#eef5fb,#dfeaf3);
}
.gc-media::after{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.34))}
.gigcard .gc-tag{color:var(--amber)}
.gc-row b{color:var(--ember)}

/* ------------------------------------------------------------
   6. TRUST BAR / SECTION FRAME
   ------------------------------------------------------------ */
.trust{
  border-color:var(--edge);
  background:linear-gradient(180deg,var(--coal),rgba(255,255,255,0));
}
.stat + .stat::before{background:var(--edge)}
/* NB: the `background` shorthand resets background-clip, so the theme's
   `background-clip:text` has to be restated or the gradient paints as a
   solid block over the digits. Same for .prow .p-amt below. */
.stat .num{
  background:linear-gradient(120deg,#0b5183,#0f6fb8);
  -webkit-background-clip:text;background-clip:text;
}
.stat .lbl b{color:var(--ember)}

/* ------------------------------------------------------------
   7. CARDS · FORMATS · FEATURE CARDS
   On white, a panel needs an edge + a whisper of shadow or it
   disappears; the dark theme got its separation for free.
   ------------------------------------------------------------ */
.card,
.fcard,
.quote,
.price,
.reg-form,
.step-block .cgm-form{
  background:linear-gradient(180deg,#ffffff,var(--coal));
  border-color:var(--edge);
  box-shadow:0 2px 3px -2px rgba(18,42,66,.10),0 14px 34px -26px rgba(18,42,66,.40);
}
.fmt,
.cline,
.faq .wp-block-details{
  background:linear-gradient(180deg,#ffffff,var(--coal));
  border-color:var(--edge);
}
.card::before{background:radial-gradient(70% 60% at 50% 0%,rgba(15,111,184,.09),transparent 70%)}
.card:hover{border-color:rgba(15,111,184,.45);box-shadow:0 20px 44px -26px rgba(18,42,66,.45)}
.fcard:hover{border-color:rgba(15,111,184,.40);box-shadow:0 18px 40px -26px rgba(18,42,66,.45)}
.quote:hover{border-color:rgba(15,111,184,.35)}
.fmt:hover{border-color:rgba(15,111,184,.40)}
.cline:hover{border-color:rgba(15,111,184,.40)}

/* icon chips — were an ember/crimson wash on black */
.card .ico,
.fcard .ico,
.cline .ci,
.step-block .sec-head::before{
  background:linear-gradient(150deg,rgba(15,111,184,.12),rgba(196,229,244,.55));
  border:1px solid rgba(15,111,184,.28);
  color:var(--ember);
}
.card .idx{color:var(--ash)}
.fmt .step{color:var(--ember)}
.fmt .pin{color:var(--amber)}

/* ------------------------------------------------------------
   8. PRICING
   ------------------------------------------------------------ */
.price.feature{
  border-color:rgba(15,111,184,.55);
  background:linear-gradient(180deg,#e9f4fc,#f8fbfe);
  box-shadow:0 24px 52px -32px rgba(15,111,184,.60);
}
.price.feature::before{background:var(--ember);color:#fff}
.price .plan{color:var(--amber)}
.prow{border-bottom-color:var(--edge)}
.prow .p-amt{
  background:linear-gradient(120deg,#0b5183,#0f6fb8);
  -webkit-background-clip:text;background-clip:text;
}
/* 2026-08-03: under Windows High Contrast (forced-colors:active), the
   clipped-gradient headings/metrics above can render invisible — force
   them back to solid system text there */
@media (forced-colors:active){
  .hero h1 em,.hero-strap em,.stat .num,.prow .p-amt,.page-hero-title em{
    background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;
  }
}
.voucher{
  border:1px dashed rgba(15,111,184,.45);
  background:
    repeating-linear-gradient(45deg,rgba(196,229,244,.42) 0 12px,transparent 12px 24px),
    linear-gradient(180deg,#ffffff,var(--coal));
}
.pricing-table thead th{background:#e6f1fa;color:var(--amber)}
.pricing-table th,.pricing-table td{border-bottom-color:var(--edge)}
.pricing-table tbody tr:hover{background:rgba(15,111,184,.055)}
.pricing-table td.amt{color:var(--ember)}
.pricing-wrap{border-color:var(--edge);background:#fff}
.pricing-note a{color:var(--ember)}

/* ------------------------------------------------------------
   9. TESTIMONIALS
   ------------------------------------------------------------ */
.quotes{background:linear-gradient(180deg,transparent,rgba(244,247,250,.95),transparent)}
.quote::before{color:rgba(15,111,184,.20)}
/* NOTE: there is deliberately no `.quote .stars` rule here. The theme
   declares `.quote .stars{color:var(--amber)}` (0,2,0) but then
   `.quote .who span{…color:var(--muted)}` (0,2,1) outranks it, so the
   ★★★★★ rows render in --muted in BOTH skins — they have never been
   the accent colour. An override here would be a design change rather
   than a recolour, and would stop this being a like-for-like palette
   comparison. Flagged for the style.css owner instead. */

/* ------------------------------------------------------------
   10. ABOUT
   The about photo keeps more of its weight than the heroes do —
   it is a framed portrait panel rather than a text bed, so it is
   allowed to stay rich. Only the badge sits on it, and that
   becomes a white pill. No filter here: a filter on .about-media
   would wash the badge too (it is a child, not a sibling).
   ------------------------------------------------------------ */
.about-media{border-color:var(--edge);box-shadow:var(--shadow-lg)}
/* .about-media is always photo-mode now (real <img>, never inline
   style=""), so the old [style] gate is dropped — this rule (and its
   z-index:1 patch further down) always applies. The former :not([style])
   gradient-only fallback is removed: it can never match any more. */
.about-media::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10) 45%,rgba(255,255,255,.30));
}
/* was a hard fade to black across the bottom 60% */
.about-media::after{background:linear-gradient(180deg,transparent 45%,rgba(255,255,255,.42))}
.about-media .badge{
  background:rgba(255,255,255,.90);
  border:1px solid var(--edge);
  color:var(--bone);
  box-shadow:0 4px 14px -8px rgba(18,42,66,.5);
}
.creds li{background:#fff;border-color:var(--edge);color:var(--bone-dim)}
.creds li b{color:var(--ember)}
.langs b{color:var(--bone)}

/* ------------------------------------------------------------
   11. REGISTER / FORMS
   ------------------------------------------------------------ */
.register::before{
  opacity:1;
  background:
    radial-gradient(60vw 55vh at 14% 18%, rgba(196,229,244,.50), transparent 62%),
    radial-gradient(52vw 55vh at 90% 82%, rgba(15,111,184,.07), transparent 62%),
    linear-gradient(0deg,#ffffff,transparent);
}
.avail{color:var(--ember)}
.avail::before{background:var(--ember);box-shadow:0 0 0 3px rgba(15,111,184,.18)}
.cline .ct .v{color:var(--bone)}

.field input,.field select,.field textarea{
  background:#fff;border-color:var(--edge);color:var(--bone);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ash)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ember);box-shadow:0 0 0 3px rgba(15,111,184,.16);
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f6fb8' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   12. CTA BAND
   The band stays a solid colour block — it is the one place the
   page goes full-bleed accent, which is what stops a white skin
   reading as a blank Word document.
   ------------------------------------------------------------ */
.cta-inner{
  background:linear-gradient(135deg,#0f6fb8,#1a8ad0);
  box-shadow:0 34px 74px -44px rgba(15,111,184,.75);
}
.cta-inner::before{
  background:
    radial-gradient(50% 120% at 12% 0%, rgba(196,229,244,.55), transparent 55%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 40px);
}
/* was black-on-ember */
.cta-band .btn-solid{background:#ffffff;color:#0b5183;border-color:transparent}
.cta-band .btn-solid:hover{
  background:#eaf4fb;color:#094a79;
  box-shadow:0 18px 44px -20px rgba(6,40,70,.45);
}

/* ------------------------------------------------------------
   13. FAQ · PROSE · INTERIOR
   ------------------------------------------------------------ */
.faq .wp-block-details[open]{border-color:rgba(15,111,184,.42)}
.faq .wp-block-details summary{color:var(--bone)}
.faq .wp-block-details summary:hover{color:var(--ember)}
.faq .wp-block-details summary::after{color:var(--ember)}
.faq .wp-block-details[open] summary::after{color:var(--amber)}
.faq .wp-block-details a,.faq .wp-block-details li::marker{color:var(--ember)}
.faq .wp-block-details a:hover{color:var(--amber)}
.faq .wp-block-details .note-hot{color:var(--amber)}
.faq-group-head{color:var(--amber)}

.page-shell a{color:var(--ember)}
.page-shell a:hover{color:var(--amber)}
.prose a{color:var(--ember);text-decoration-color:rgba(15,111,184,.45)}
.prose a:hover{color:var(--amber);text-decoration-color:var(--amber)}
.prose li::marker{color:var(--ember)}
.prose ol li::marker{color:var(--amber)}
.prose blockquote{border-left-color:var(--ember);color:var(--bone)}
.prose code{background:#eef4f9;border-color:var(--edge);color:var(--amber)}
.prose img,.prose img.mod-thumb{border-color:var(--edge);background:var(--coal)}
.prose hr{border-top-color:var(--edge)}

/* ------------------------------------------------------------
   14. FOOTER + GALLERIES
   ------------------------------------------------------------ */
footer{
  border-top:1px solid var(--edge);
  background:linear-gradient(180deg,transparent,var(--coal));
}
.foot-brand .name span{color:var(--ember)}
.foot-col h4{color:var(--amber)}
.foot-col a:hover{color:var(--ember)}
.foot-bottom{border-top-color:var(--edge)}

.media-grid figure{background:var(--coal);border-color:var(--edge);box-shadow:var(--shadow-lg)}
/* captions sit ON the photograph, so they keep pale text on a dark
   scrim — inverting these would make them unreadable */
.media-grid figcaption{color:#fff;background:linear-gradient(0deg,rgba(12,24,36,.82),transparent)}
.photo-frame{border-color:var(--edge);box-shadow:var(--shadow-lg)}

/* ------------------------------------------------------------
   15. MOBILE NAV DRAWER
   ------------------------------------------------------------ */
/* UX-2026-08-05 C-7 (paired edit): style.css moved the nav/burger breakpoint
   from 760px to 1200px. These two drawer rules are the azure skin's ONLY
   nav-breakpoint-dependent declarations and have been split out to match.

   This is not cosmetic. style.css paints the open drawer rgba(9,7,5,1) — the
   dark theme's near-black — and azure repaints it white here. Left at 760px,
   every viewport from 761px to 1200px (i.e. every iPad, the exact range the
   C-7 fix exists to rescue) would have opened a near-black drawer with
   near-black link text on the white live skin: an unreadable menu, and a
   worse bug than the one being fixed.

   The two .stat rules below are unrelated trust-bar borders and deliberately
   stay at 760px, matching the .trust-grid rule they belong to in style.css. */
@media (max-width:1200px){
  nav.links.mobile{background:rgba(255,255,255,1);border-bottom:1px solid var(--edge)}
  nav.links.mobile a{border-bottom:1px solid var(--edge-soft)}
}
@media (max-width:760px){
  .stat:nth-child(odd){border-right-color:var(--edge)}
  .stat:nth-child(-n+2){border-bottom-color:var(--edge)}
}

/* ------------------------------------------------------------
   16. THE RED — deliberately preserved
   #cf1f22 is the accent of Malcolm's ACTUAL old site. It is kept
   for the two places the 2026-07-21 review pass introduced it,
   and for form error states, so "wrong" never reads as "azure".
   ------------------------------------------------------------ */
.hot{color:var(--spark)}
body.page-id-26 .band em{color:var(--spark)}

/* ------------------------------------------------------------
   17. mu-plugin form kit (cgm-forms)
   It consumes var(--ember)/(--bone)/(--coal)… so most of it comes
   over for free; these are the literals it hardcodes.
   ------------------------------------------------------------ */
.cgm-note{background:rgba(15,111,184,.06);border-left-color:var(--ember)}
.cgm-input:focus,.cgm-select:focus,.cgm-textarea:focus,.cgm-file:focus{
  background:#fff;
  box-shadow:0 0 0 1px rgba(15,111,184,.45),0 10px 28px -18px rgba(15,111,184,.5);
}
.cgm-input,.cgm-select,.cgm-textarea,.cgm-file{background:#fff}
.cgm-select:not([multiple]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%230f6fb8%27 d=%27M6 8.5 1.5 4h9z%27/%3E%3C/svg%3E");
}
.cgm-submit:hover{
  box-shadow:0 0 0 1px rgba(15,111,184,.45),0 18px 44px -18px rgba(15,111,184,.55);
}
.cgm-success{
  border-color:var(--ember);
  background:linear-gradient(180deg,rgba(196,229,244,.42),#ffffff);
  box-shadow:0 0 0 1px rgba(15,111,184,.18),0 24px 56px -34px rgba(15,111,184,.5);
}
/* The hatch is kept light on purpose: .cgm-hint is --muted at .72rem,
   and a .30 tint measured 4.52:1 against it — passing only by a hair,
   and worse than that on the stripe itself. At .20 it clears 4.9:1. */
.paypal-box .cgm-form{
  border-color:rgba(15,111,184,.35);
  background:
    repeating-linear-gradient(45deg,rgba(196,229,244,.20) 0 12px,transparent 12px 24px),
    linear-gradient(180deg,#ffffff,var(--coal));
}
.step-block + .step-block{border-top-color:var(--edge)}

/* ============================================================
   --- 2026-07-21 corrections ---
   ============================================================ */

/* The dark theme buys 210px of headroom on the /profile/ hero at
   <=760px so Malcolm's face clears the headline (style.css, B3).
   Azure does not need it and is actively hurt by it: this skin
   already solves hero legibility a different way — the near-opaque
   white veil on .page-hero::before (.96/.93/.86 across the full
   width below 900px) — so the photo is washed back on mobile
   whatever its position, and his face was never sitting on the
   copy here. The extra padding therefore bought nothing and left a
   ~210px band of empty near-white above the kicker. Restore the
   theme's normal page-hero padding.

   The dark scrim gradients the same rule injects need no undoing:
   .page-hero-bg[style] carries background-blend-mode:screen above,
   and screening a dark layer is close to a no-op, so they are
   already neutralised before the veil is painted. */
@media (max-width:760px){
  body.page-id-70 .page-hero{padding-top:clamp(48px,7vw,92px)}
}

/* ============================================================
   --- 2026-07-23 azure permanent: guitars backdrop + photo tidy ---
   ============================================================ */

/* [1] GUITARS BACKDROP  (Malcolm: "that beautiful image of my 2 guitars
   in background as per /old" — it is actually THREE guitars against a
   red-brick wall, already faded for legibility; the /old fixed backdrop.)

   CHOICE OF METHOD: the theme's own body::before is ALREADY a
   position:fixed, inset:0, z-index:-2 layer (it carried the azure sky
   vignette). We re-declare it here to seat the guitars in that same
   fixed layer. Because it is a fixed *element* — not
   background-attachment:fixed — it is immune to the iOS jank the brief
   warns about and stays put on every device, so this IS the
   "fixed pseudo-element" route the brief allows. body keeps overflow-x
   :hidden, so nothing bleeds sideways.

   The transparent section bands (which carry the section headings and
   standfirsts) let the guitars show for free in every gap and margin —
   the /old feel — while the frosted white veil below keeps the already
   -pale photo a soft backdrop, not busy. Layer order top -> bottom:
     1  faint azure sky wash  (keeps the skin's cool character)
     2  ~0.5 white "frosted glass" veil (protects band-level text)
     3  the guitars, center top / cover, no-repeat
     4  a white base
   Measured: body ink #222528 stays >9:1 even over the darkest brick,
   and ~15:1 on the translucent panels below.                         */
body::before{
  background:
    radial-gradient(90vw 55vh at 80% -6%, rgba(196,229,244,.34), transparent 60%),
    radial-gradient(120vw 90vh at 50% 122%, rgba(196,229,244,.20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.56)),
    url('/wp-content/uploads/2026/07/guitars-bg-1280.webp') center top / cover no-repeat,
    #ffffff;
}

/* Let the guitars whisper THROUGH the big content panels — the /old
   "content floating on a translucent near-white panel" idea. Alpha kept
   high (.90/.92) so the frosted photo is only sensed, never busy, and
   dark ink on these surfaces stays ~15:1. Inputs, small chips, the hero
   gig card and the solid CTA band are deliberately left opaque.
   2026-08-03: added .prose-band — long-form article text was the one
   content type still sitting bare on the transparent bands; it now gets
   the same reading-comfort panel as every sibling here, reusing this
   already-verified gradient rather than a new value. */
.card,
.fcard,
.quote,
.price,
.reg-form,
.fmt,
.cline,
.faq .wp-block-details,
.step-block .cgm-form,
.prose-band{
  background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(244,247,250,.90));
}
.pricing-wrap{background:rgba(255,255,255,.93)}
.price.feature{background:linear-gradient(180deg,rgba(233,244,252,.93),rgba(248,251,254,.93))}

/* Mobile: keep the fixed guitars, but lift the veil a touch so the
   narrow centre-crop does not crowd the full-width copy. Still a fixed
   element (no background-attachment:fixed) => no iOS scroll jank. */
@media (max-width:760px){
  body::before{
    background:
      radial-gradient(120vw 46vh at 80% -4%, rgba(196,229,244,.26), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.62)),
      url('/wp-content/uploads/2026/07/guitars-bg-1280.webp') center top / cover no-repeat,
      #ffffff;
  }
}

/* [2] ABOUT / PROFILE PHOTO TIDY  (Malcolm: "on a phone the About photo
   looks washed-out in the azure version — tidy so all images show yet
   all text is readable.")

   The about-media div ships an INLINE dark scrim baked for the dark
   theme — linear-gradient(rgba(10,8,6,.12) -> .58), url(bright.jpg) —
   which muddied the picture on the light skin, and the azure white
   veils on top then washed it toward grey. Fix = dissolve that inline
   dark scrim with background-blend-mode:screen over #000 (the exact
   recovery the heroes use), then pull the white veils back to a
   whisper. Only the badge sits on this photo and it carries its own
   white pill, so the picture is now shown at full, honest richness. */
/* background-color/background-blend-mode dropped: .about-media no longer
   carries the wash+photo as its own background layers to blend together
   (the photo is a real <img> now). The equivalent recovery happens via
   mix-blend-mode on .about-wash below, screening the wash against the
   <img> behind it — same math as the old single-element blend, since
   screen is commutative. filter still applies to the whole subtree. */
.about-media{
  filter:contrast(1.03) saturate(1);
}
.about-wash{mix-blend-mode:screen}
.about-media::before{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 45%,rgba(255,255,255,.12));
}
.about-media::after{
  background:linear-gradient(180deg,transparent 58%,rgba(255,255,255,.24));
}

/* Interior page-heroes (profile/fees/group/online) on phones: the hero
   photo (a guitar texture, NOT Malcolm's portrait) is deliberately left
   under the theme's vetted strong veil (.96/.93/.86, set in the
   max-width:900px block above). Measured proof it must stay strong: the
   .page-hero-meta labels are muted #626c77 at .72rem, which needs a
   near-white backing to clear AA; lifting the veil dropped them to
   ~2.9:1 over the paled photo. Malcolm's washed-out complaint is about
   the ABOUT portrait (fixed in [2]), so no reveal is attempted here. */

/* ============================================================
   2026-08-05  CSS-UX PASS — azure side
   ------------------------------------------------------------
   This file's other change from this pass is the nav-drawer media-query
   split (C-7), edited in place above and tagged "UX-2026-08-05".
   Everything else from the pass lives in style.css.
   ============================================================ */

/* ------------------------------------------------------------
   L-47 — text sitting directly on guitars-bg.jpg.

   The backdrop is a fixed body::before (a photo of three guitars against a
   red brick wall) veiled by a ~.50 white wash. Contrast passes AA when
   averaged, but the wash is uniform while the photo is not: a guitar neck
   runs vertically through the register step copy, and local contrast dips
   wherever a dark string or the neck crosses a glyph.

   Averaging is the wrong test for this — the fix is to stop the copy relying
   on the backdrop's own transparency and give it its own panel, exactly as
   .card/.fcard/.prose-band already do in the guitars block above. Reusing
   that same near-solid white treatment rather than inventing a value keeps
   the surfaces consistent; ink on it measures the ~15:1 quoted there.

   NB the audit suggests rgba(0,0,0,.55) — that is the DARK theme's answer.
   The live skin is azure (cgm_skin_mode() hardcodes 'azure'), so the panel
   has to go the other way. The dark skin needs no equivalent: its own
   body::before is a near-black vignette with no photograph in it.
   ------------------------------------------------------------ */
.step-block .sec-head{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(244,247,250,.92));
  border:1px solid var(--edge);
  border-radius:16px;
  padding:72px 24px 26px;   /* padding-top keeps the counter badge seated */
}

/* Mobile footer. The desktop footer deliberately fades from transparent so
   the guitars show through the gap above it — that stays. On a phone the
   backdrop is a narrow centre-crop of the same photo, so it is busiest
   exactly where the full-width footer copy sits; make the panel near-solid
   there only. */
@media (max-width:760px){
  footer{background:linear-gradient(180deg,rgba(255,255,255,.90),var(--coal))}
}