/*
Theme Name: Vincenzo GNFP
Theme URI: https://davidgagne.net/tags/wordpress/
Author: David Vincent Gagne
Author URI: https://davidgagne.net/
Description: The Gator Nation Football Podcast — a clean white site in the official University of Florida pair (#0021A5 / #FA4616, sampled out of the show's own logo files), with blue and orange gradient bands for the calls to action. Reads the Simplecast feed and the Sellfy storefront directly, so episodes and merch are never retyped into WordPress. No Bootstrap, no icon font, no CDN but the type.
Version: 0.0.16
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vincenzo-gnfp
Tags: one-column, custom-menu, landing-page, podcast
*/

/*--------------------------------------------------
     NOTE: "Theme Name" and "Version" in the header above are
     auto-synced from vincenzo-core.php (THEME_NAME / THEME_VERSION)
     by the vincenzo-git-hooks pre-commit hook on every commit.
     Edits made directly to those header lines WILL BE OVERWRITTEN.
     To rename or re-version this theme, edit vincenzo-core.php.
--------------------------------------------------*/

/*---------------------------------------------------------------
-    Title:    Vincenzo-GNFP Stylesheet
-    File:     /style.css
-    Author:   dvg@davidgagne.net
-              (c) 2026 David V. Gagne
-    Version:  0.0.1
-    Created:  TUE SEP 08 2026 @ 04:55:00 UTC
-    Modified: MON SEP 14 2026 @ 02:30:00 UTC
-
-    WHITE, BY THE CLIENT'S REQUEST (James Di Virgilio, 2026-09-11): white page, header and
-    footer; blue and orange gradient bands for the calls to action; no gridlines; nothing
-    but orange, white and blue.
-
-    Every color below is the UF pair, white, or a shade/tint of the pair. The shades are not
-    new colors -- each one exists to satisfy a contrast requirement or to form a gradient.
-
-    THE ONE CONSTRAINT THAT SHAPES EVERYTHING: UF orange (#FA4616) is 3.53:1 against white.
-    WCAG AA needs 4.5:1 for normal text and 3:1 for large text (>= 24px, or >= 18.66px bold)
-    and for UI graphics. So:
-
-      --orange       exact brand orange. Large display type, the play button, the scrubber
-                     fill, accent bars, the orange band. Never small text.
-      --orange-deep  #C4340F, 5.46:1. Anything orange that is small text, and the fill of
-                     every orange button carrying a white label. The approved dark design
-                     already used this exact value as the orange band's dark gradient stop.
-
-    The live dark design's orange buttons (white on #FA4616) were already failing at 3.53:1.
-    Every pairing in this file was checked numerically; the ratios are noted beside the tokens.
---------------------------------------------------------------*/


/*==========================================================================================
     1. TOKENS
==========================================================================================*/
:root{
     color-scheme:light;

     /* the brand pair, exactly as sampled from the GNFP logo files */
     --blue:             #0021A5;   /* 11.93:1 on white */
     --orange:           #FA4616;   /*  3.53:1 on white -- large type and graphics only */

     /* shades of the pair */
     --blue-deep:        #001A7E;   /* blue hover, band gradient */
     --navy:             #000C2B;   /* dark end of the blue band */
     --orange-deep:      #C4340F;   /*  5.46:1 -- small orange text; white button labels */
     --orange-deeper:    #A82C0C;   /*  6.93:1 -- hover for the above */

     /* ink: deep shades in UF blue's hue family, for text on white */
     --ink:              #0B1B4D;   /* 16.43:1 body */
     --ink-soft:         #3A4A80;   /*  8.50:1 secondary */
     --ink-faint:        #5A6899;   /*  5.42:1 captions and placeholders -- the floor */

     /* surfaces */
     --white:            #FFFFFF;
     --tint-blue:        #F3F5FC;   /* UF blue at ~5% on white */
     --tint-orange:      #FFF0EB;   /* UF orange at ~8% on white */

     /* lines */
     --line:             rgba(0,33,165,.12);   /* decorative dividers and card edges */
     --line-mid:         rgba(0,33,165,.24);   /* chip, pager and icon-button edges */
     --line-strong:      #7F8BC0;              /* form-field borders: 3.30:1, the non-text minimum */

     --display:          'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
     --body:             'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

     --wrap:             1180px;
     --r:                14px;
     --r-sm:             9px;
     --masthead-h:       74px;

     --shadow-sm:        0 1px 2px rgba(0,33,165,.05), 0 6px 18px -10px rgba(0,33,165,.18);
     --shadow:           0 2px 4px rgba(0,33,165,.05), 0 18px 40px -18px rgba(0,33,165,.30);
     --shadow-lift:      0 4px 10px rgba(0,33,165,.06), 0 30px 64px -24px rgba(0,33,165,.38);

     --t:                .22s cubic-bezier(.4,0,.2,1);
}

/*==========================================================================================
     2. RESET / BASE
==========================================================================================*/
*,*::before,*::after{ box-sizing:border-box; }

html{
     -webkit-text-size-adjust:100%;
     scroll-behavior:smooth;
     /* WCAG 2.2 (2.4.11): the sticky masthead must never cover the element that has focus */
     scroll-padding-top:calc(var(--masthead-h) + 16px);
}

body{
     margin:0;
     font-family:var(--body);
     font-size:17px;
     line-height:1.65;
     color:var(--ink);
     background:var(--white);
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
     overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
     font-family:var(--display);
     font-weight:900;
     line-height:1.04;
     letter-spacing:-.022em;
     margin:0 0 .5em;
     text-wrap:balance;
}
h1,h2{ color:var(--blue); }
h3,h4{ color:var(--ink); }
h1{ font-size:clamp(2.6rem,6.4vw,4.9rem); }
h2{ font-size:clamp(1.95rem,3.9vw,3rem); }
h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
.band :focus-visible{ outline-color:var(--white); }

.skip{
     position:absolute; left:-9999px; top:0; z-index:200;
     background:var(--orange-deep); color:var(--white); padding:.8rem 1.3rem;
     font-weight:700; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.ico{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }

/* keep a company name or a short phrase from breaking across two lines */
.nobreak{ white-space:nowrap; }

/*==========================================================================================
     3. BRAND RULE
     The gridiron yard lines are gone at the client's request. This three-part stripe is the
     one ornament left: it is the logo's own GN / F / P color order, not a gridline.
==========================================================================================*/
.chevron-rule{
     height:5px; border:0; margin:0;
     background:linear-gradient(90deg,
          var(--blue) 0 33.33%, var(--orange) 33.33% 66.66%, var(--blue) 66.66% 100%);
}

/*==========================================================================================
     4. MASTHEAD
     Opaque white on purpose. The logo files the client delivered have no alpha channel, so
     over a translucent header they would show as a faint white box whenever the page
     scrolls a colored band underneath.
==========================================================================================*/
.masthead{
     position:sticky; top:0; z-index:100;
     background:var(--white);
     border-bottom:1px solid transparent;
     transition:border-color var(--t), box-shadow var(--t);
}
.masthead.stuck{ border-bottom-color:var(--line); box-shadow:0 8px 24px -16px rgba(0,33,165,.4); }

.masthead-in{ display:flex; align-items:center; gap:28px; min-height:var(--masthead-h); }

.brand{ flex:none; display:block; }
.brand img{ width:auto; height:34px; }

/*   The nav list is styled through .gnfp-nav__* in section 20. There is deliberately no
     ".nav a" rule here: that selector (0,1,1) outranks .btn-sm and .btn-orange (0,1,0), so it
     used to reach the "Listen" button and strip its padding and its white label.            */
.nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }

.navtoggle{
     display:none; margin-left:auto; background:none; border:0; cursor:pointer;
     width:44px; height:44px; padding:10px; flex-direction:column; justify-content:space-between;
}
.navtoggle span{ display:block; height:2px; background:var(--blue); border-radius:2px; transition:transform var(--t), opacity var(--t); }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

/*==========================================================================================
     5. BUTTONS
==========================================================================================*/
.btn{
     display:inline-flex; align-items:center; justify-content:center; gap:.55em;
     font-family:var(--display); font-weight:800; font-size:.9rem;
     letter-spacing:.045em; text-transform:uppercase; text-decoration:none;
     padding:.95rem 1.7rem; border-radius:var(--r-sm); border:2px solid transparent;
     cursor:pointer; white-space:nowrap;
     transition:transform var(--t), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* --orange-deep, not --orange: a white label on brand orange is 3.53:1 */
.btn-orange{ background:var(--orange-deep); color:var(--white); box-shadow:0 10px 22px -12px rgba(196,52,15,.75); }
.btn-orange:hover{ background:var(--orange-deeper); box-shadow:0 14px 28px -12px rgba(168,44,12,.8); }

.btn-blue{ background:var(--blue); color:var(--white); box-shadow:0 10px 22px -12px rgba(0,33,165,.7); }
.btn-blue:hover{ background:var(--blue-deep); }

.btn-ghost{ background:transparent; color:var(--blue); border-color:var(--blue); }
.btn-ghost:hover{ background:var(--blue); color:var(--white); }

/* on a band, a ghost becomes a solid white button -- white-on-orange would be 3.53:1 */
.band .btn-ghost{ background:var(--white); color:var(--blue); border-color:var(--white); }
.band .btn-ghost:hover{ background:var(--tint-blue); border-color:var(--tint-blue); color:var(--blue-deep); }

.btn-sm{ padding:.6rem 1.1rem; font-size:.78rem; }
.btn-lg{ padding:1.1rem 2.1rem; font-size:1rem; }

/*==========================================================================================
     6. SECTIONS
==========================================================================================*/
.section{ padding:clamp(64px,9vw,116px) 0; background:var(--white); }
.section-alt{ background:var(--white); border-top:1px solid var(--line); }
.section-deep{ background:var(--white); }

.eyebrow{
     display:inline-flex; align-items:center; gap:.6em;
     font-family:var(--display); font-weight:800; font-size:.76rem;
     letter-spacing:.19em; text-transform:uppercase; color:var(--orange-deep);
     margin:0 0 1rem;
}
.eyebrow::before{ content:''; width:26px; height:3px; background:var(--orange); border-radius:2px; }

.section-head{ max-width:640px; margin-bottom:clamp(36px,4.5vw,56px); }
.section-head p{ color:var(--ink-soft); font-size:1.08rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }

.head-row{
     display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
     margin-bottom:clamp(30px,4vw,48px); flex-wrap:wrap;
}
.head-row .section-head{ margin-bottom:0; }

/*==========================================================================================
     7. HERO
==========================================================================================*/
.hero{
     position:relative;
     background:var(--white);
     padding:clamp(56px,9vw,108px) 0 clamp(56px,7vw,88px);
}

.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(38px,5vw,70px); align-items:center; }

/*   The headline is the show's name (James, 2026-09-15), set as a two-line lockup:
     "The Gator Nation" / "Football Podcast". Measured in Montserrat Black with this tracking
     they are 8.87em and 8.80em wide. At the global h1 size the widest line overflows the
     hero column by 15-21% at every desktop width, stranding "Nation" alone on a line. This
     clamp keeps both lines whole from 320px up, with >= 4.7% slack on desktop -- checked
     numerically across 15 viewport widths, before kerning, which only adds room.         */
.hero h1{ margin-bottom:.36em; font-size:clamp(1.95rem,5.2vw,3.85rem); }
/* h1 never renders below 41.6px, so brand orange clears the 3:1 large-text threshold */
.hero h1 .or{ color:var(--orange); }
.hero-lede{ font-size:clamp(1.06rem,1.5vw,1.24rem); color:var(--ink-soft); max-width:44ch; margin-bottom:1.9rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:2.1rem; }


/*==========================================================================================
     8. LATEST EPISODE CARD
==========================================================================================*/
.latest{
     background:var(--white);
     border:1px solid var(--line); border-radius:var(--r);
     padding:26px; box-shadow:var(--shadow-lift);
}
.latest-top{ display:flex; gap:20px; align-items:flex-start; margin-bottom:20px; }
.latest-art{
     width:118px; height:118px; flex:none; border-radius:10px; overflow:hidden;
     border:1px solid var(--line); background:var(--tint-blue);
}
.latest-art img{ width:100%; height:100%; object-fit:cover; }
.latest-meta{ min-width:0; }
.latest-flag{
     display:inline-flex; align-items:center; gap:.5em;
     font-family:var(--display); font-size:.7rem; font-weight:800;
     letter-spacing:.16em; text-transform:uppercase;
     background:var(--orange-deep); color:var(--white); padding:.32em .7em; border-radius:4px; margin-bottom:.7rem;
}
.latest-flag .pulse{ width:6px; height:6px; border-radius:50%; background:var(--white); animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }
.latest h2{ font-size:clamp(1.25rem,2vw,1.6rem); margin-bottom:.45rem; }
.latest-sub{ font-size:.86rem; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:.5em 1.1em; }
.latest-sub span{ display:inline-flex; align-items:center; gap:.4em; }


/*==========================================================================================
     9. EPISODE CARDS
==========================================================================================*/
.ep-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:18px; }

.ep{
     position:relative; display:flex; flex-direction:column;
     background:var(--white); border:1px solid var(--line); border-radius:var(--r);
     padding:22px; box-shadow:var(--shadow-sm);
     transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.ep:hover{ border-color:var(--line-mid); box-shadow:var(--shadow); transform:translateY(-3px); }

.ep-num{
     font-family:var(--display); font-weight:900; font-size:.74rem; letter-spacing:.13em;
     color:var(--orange-deep); text-transform:uppercase; margin-bottom:.6rem;
     display:flex; align-items:center; gap:.6em;
}
.ep-num .season{ color:var(--ink-faint); }

.ep h3{ font-size:1.12rem; margin-bottom:1rem; color:var(--ink); transition:color var(--t); }
.ep h3 a{ text-decoration:none; }
.ep h3 a::after{ content:''; position:absolute; inset:0; }
.ep:hover h3{ color:var(--blue); }

.ep-excerpt{ font-size:.9rem; color:var(--ink-soft); margin-bottom:1.1rem; }

.ep-foot{
     display:flex; align-items:center; gap:.75em; font-size:.8rem; color:var(--ink-faint);
     padding-top:14px; margin-top:auto; border-top:1px solid var(--line);
}
.ep-play{
     position:relative; z-index:2; margin-left:auto;
     display:inline-flex; align-items:center; gap:.4em;
     background:var(--tint-orange); color:var(--orange-deep); border:1px solid rgba(196,52,15,.3);
     border-radius:100px; padding:.35em .85em; font-size:.76rem; font-weight:700;
     font-family:var(--display); letter-spacing:.05em; text-transform:uppercase;
     cursor:pointer; transition:background var(--t), color var(--t), border-color var(--t);
}
.ep-play:hover{ background:var(--orange-deep); color:var(--white); border-color:var(--orange-deep); }

.ep-player{ display:none; margin-top:16px; position:relative; z-index:2; }
.ep.open .ep-player{ display:block; }

/*==========================================================================================
     9b. NATIVE AUDIO PLAYER
     Plays the feed's enclosure URL verbatim so the network's ad prefixes still fire.
==========================================================================================*/
.aplayer{ --pct:0%; }
.aplayer audio{ display:none; }

.aplayer-main{ display:flex; align-items:center; gap:16px; }

/* a graphic, not text: brand orange vs white and the white glyph on it both clear 3:1 */
.aplayer-toggle{
     flex:none; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
     display:grid; place-items:center; background:var(--orange); color:var(--white);
     box-shadow:0 10px 22px -12px rgba(250,70,22,.85);
     transition:transform var(--t), background var(--t);
}
.aplayer-toggle:hover{ background:var(--orange-deep); transform:scale(1.06); }
.aplayer-toggle:active{ transform:scale(.97); }
.aplayer-toggle .ico{ width:22px; height:22px; }
.aplayer-toggle .i-play{ margin-left:3px; }
.aplayer-toggle .i-pause{ display:none; }
.aplayer.playing .aplayer-toggle .i-play{ display:none; }
.aplayer.playing .aplayer-toggle .i-pause{ display:block; }
.aplayer.loading .aplayer-toggle{ animation:apulse 1s ease-in-out infinite; }
@keyframes apulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

.aplayer-body{ flex:1; min-width:0; }

/* scrubber -- a real range input, so keyboard and screen readers work */
.aplayer-seek{
     -webkit-appearance:none; appearance:none; width:100%; height:6px; margin:0 0 9px;
     border-radius:100px; cursor:pointer; background:transparent;
}
.aplayer-seek::-webkit-slider-runnable-track{
     height:6px; border-radius:100px;
     background:linear-gradient(90deg, var(--orange) var(--pct), rgba(0,33,165,.16) var(--pct));
}
.aplayer-seek::-moz-range-track{ height:6px; border-radius:100px; background:rgba(0,33,165,.16); }
.aplayer-seek::-moz-range-progress{ height:6px; border-radius:100px; background:var(--orange); }
.aplayer-seek::-webkit-slider-thumb{
     -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%;
     background:var(--blue); border:0; margin-top:-4px; box-shadow:0 1px 4px rgba(0,33,165,.45);
     transition:transform var(--t);
}
.aplayer-seek::-moz-range-thumb{
     width:14px; height:14px; border-radius:50%; background:var(--blue); border:0;
     box-shadow:0 1px 4px rgba(0,33,165,.45);
}
.aplayer-seek:hover::-webkit-slider-thumb{ transform:scale(1.2); }
.aplayer-seek:focus-visible{ outline:none; }
.aplayer-seek:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--white), 0 0 0 6px var(--blue); }
/* Firefox had no focus style on the scrubber at all */
.aplayer-seek:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 3px var(--white), 0 0 0 6px var(--blue); }

.aplayer-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

.aplayer-time{
     font-family:var(--display); font-size:.78rem; font-weight:700;
     color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.aplayer-time .cur{ color:var(--ink); }

.aplayer-tools{ display:flex; align-items:center; gap:4px; }

.aplayer-skip{
     position:relative; width:34px; height:34px; border:0; border-radius:9px; cursor:pointer;
     background:transparent; color:var(--ink-soft); display:grid; place-items:center;
     transition:background var(--t), color var(--t);
}
.aplayer-skip:hover{ background:rgba(0,33,165,.08); color:var(--blue); }
.aplayer-skip .ico{ width:20px; height:20px; }
.aplayer-skip b{
     position:absolute; inset:0; display:grid; place-items:center;
     font-family:var(--display); font-size:8px; font-weight:800;
     padding-top:2px; letter-spacing:-.02em; pointer-events:none;
}

.aplayer-rate{
     min-width:38px; height:34px; padding:0 .5em; border:0; border-radius:9px; cursor:pointer;
     background:transparent; color:var(--ink-soft);
     font-family:var(--display); font-size:.76rem; font-weight:800;
     transition:background var(--t), color var(--t);
}
.aplayer-rate:hover{ background:rgba(0,33,165,.08); color:var(--blue); }
.aplayer-rate.on{ background:var(--tint-orange); color:var(--orange-deep); }

/* compact variant, used inside episode cards */
.aplayer-compact .aplayer-main{ gap:13px; }
.aplayer-compact .aplayer-toggle{ width:42px; height:42px; box-shadow:none; }
.aplayer-compact .aplayer-toggle .ico{ width:17px; height:17px; }
.aplayer-compact .aplayer-seek{ margin-bottom:6px; }
.aplayer-compact .aplayer-time{ font-size:.72rem; }
.aplayer-compact .aplayer-skip{ width:29px; height:29px; }
.aplayer-compact .aplayer-skip .ico{ width:17px; height:17px; }
.aplayer-compact .aplayer-skip b{ font-size:7px; }
.aplayer-compact .aplayer-rate{ height:29px; min-width:33px; font-size:.7rem; }

/* hero variant sits inside the latest-episode card */
.aplayer-hero{
     background:var(--tint-blue); border:1px solid var(--line);
     border-radius:12px; padding:18px 20px;
}

/*==========================================================================================
     10. PLATFORM CARDS  (subscribe)
==========================================================================================*/
.platforms{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }

.plat{
     display:flex; flex-direction:column; gap:.8rem; text-decoration:none; color:var(--ink);
     background:var(--white); border:1px solid var(--line); border-radius:var(--r);
     padding:26px; box-shadow:var(--shadow-sm);
     transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.plat:hover{ border-color:var(--orange); box-shadow:var(--shadow); transform:translateY(-3px); }
.plat-ico{
     width:46px; height:46px; border-radius:11px; display:grid; place-items:center;
     background:var(--tint-blue); color:var(--blue);
     transition:background var(--t), color var(--t);
}
.plat-ico .ico{ width:24px; height:24px; }
.plat:hover .plat-ico{ background:var(--orange); color:var(--white); }
.plat h3{ font-size:1.12rem; margin:0; color:var(--ink); }
.plat p{ font-size:.88rem; color:var(--ink-soft); margin:0; }
.plat .note{ font-size:.78rem; color:var(--orange-deep); font-weight:600; margin-top:auto; padding-top:.5rem; }

/*==========================================================================================
     11. STEPS  (the "never used this before" walkthroughs)
==========================================================================================*/
.steps{ counter-reset:step; display:grid; gap:18px; }
.step{
     position:relative; display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start;
     background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px;
}
/* steps inside a panel would be a white card inside a white card; tint them instead */
.panel .step{ background:var(--tint-blue); border-color:transparent; }
.step::before{
     counter-increment:step; content:counter(step);
     width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
     font-family:var(--display); font-weight:900; font-size:1.35rem;
     background:var(--blue); color:var(--white);
}
.step h3{ font-size:1.05rem; margin-bottom:.3rem; color:var(--ink); }
.step p{ font-size:.93rem; color:var(--ink-soft); margin:0; }
.step p + p{ margin-top:.5rem; }
.step a{ color:var(--orange-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:clamp(24px,3.5vw,44px); align-items:start; }

.panel{
     background:var(--white); border:1px solid var(--line); border-radius:var(--r);
     padding:clamp(26px,3vw,36px); box-shadow:var(--shadow-sm);
}
/* Discord blurple and WhatsApp green were off-palette; blue and orange keep the two apart */
.panel-discord{ border-top:4px solid var(--blue); }
.panel-whatsapp{ border-top:4px solid var(--orange); }
.panel-head{ display:flex; align-items:center; gap:14px; margin-bottom:1.2rem; color:var(--blue); }
.panel-head .ico{ width:34px; height:34px; }
.panel-head h2{ font-size:1.5rem; margin:0; }
.panel .what{ color:var(--ink-soft); font-size:.97rem; }

/*==========================================================================================
     12. MERCH
==========================================================================================*/
.merch-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.merch-nav a{
     text-decoration:none; font-family:var(--display); font-weight:700; font-size:.78rem;
     letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
     border:1px solid var(--line-mid); border-radius:100px; padding:.5em 1.1em;
     transition:color var(--t), border-color var(--t), background var(--t);
}
.merch-nav a:hover{ color:var(--orange-deep); border-color:var(--orange); background:var(--tint-orange); }

.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:20px; }

.product{
     position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
     background:var(--white); border:1px solid var(--line); border-radius:var(--r);
     overflow:hidden; box-shadow:var(--shadow-sm);
     transition:transform var(--t), border-color var(--t), box-shadow var(--t);
}
.product:hover{ transform:translateY(-4px); border-color:var(--line-mid); box-shadow:var(--shadow); }
.product-img{ aspect-ratio:1; background:var(--white); overflow:hidden; border-bottom:1px solid var(--line); }
.product-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.product:hover .product-img img{ transform:scale(1.05); }
.product-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.product-name{ font-size:.93rem; font-weight:600; line-height:1.35; color:var(--ink); }
.product-price{
     font-family:var(--display); font-weight:900; font-size:1.15rem; color:var(--orange-deep);
     margin-top:auto;
}
.product-oos{
     position:absolute; top:12px; right:12px; z-index:2;
     background:var(--blue); color:var(--white); font-size:.68rem; font-weight:700;
     letter-spacing:.1em; text-transform:uppercase; padding:.3em .7em; border-radius:4px;
}

/*==========================================================================================
     13. CTA BANDS
     The two colored segments the client asked to keep, gradients and all. The orange band
     is what sets the typography for both: nothing small can be written in white on brand
     orange (3.53:1), so band copy is set as WCAG large text -- 3:1 threshold -- in solid
     white. Both bands share the treatment so they read as one component in two colors.
==========================================================================================*/
.band{
     position:relative; overflow:hidden; color:var(--white);
     background:linear-gradient(120deg, var(--blue) 0%, var(--blue-deep) 55%, var(--navy) 100%);
     padding:clamp(52px,7vw,84px) 0;
}
.band-orange{ background:linear-gradient(120deg, var(--orange-deep) 0%, var(--orange) 55%, var(--orange) 100%); }

.band-in{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.band h2{ color:var(--white); margin-bottom:.35em; }
/*   :not(.eyebrow) matters. The eyebrow is also a <p>, and a bare ".band p" (0,1,1) outranks
     .eyebrow (0,1,0) -- it would knock the eyebrow down to weight 700 and zero its margin.   */
/* 1.2rem / 700 = 19.2px bold: over the 18.66px bold large-text line */
.band p:not(.eyebrow){ color:var(--white); max-width:48ch; margin:0; font-size:1.2rem; font-weight:700; line-height:1.5; }
/* 1.17rem / 800 = 18.72px bold: likewise */
.band .eyebrow{ font-size:1.17rem; letter-spacing:.1em; margin-bottom:.6rem; }

/*   The Venmo/PayPal alternative to Patreon, added 2026-09-29. It inherits the 1.2rem/700
     of .band p:not(.eyebrow) on purpose -- see the note in front-page.php. Separation comes
     from the rule and the spacing, never from smaller or lighter type.
     .band p.band-alt is (0,2,1) so it outranks the margin:0 in .band p:not(.eyebrow) (0,1,1)
     without !important.                                                                     */
.band p.band-alt{ margin-top:20px; padding-top:18px; border-top:2px solid rgba(255,255,255,.4); }
/*   Underlined, not colour-only: WCAG 1.4.1, and there is no colour left to use on orange.   */
.band-alt a{ color:var(--white); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; white-space:nowrap; }
.band-alt a:hover{ text-decoration-thickness:3px; }

/*==========================================================================================
     14. SUPPORT TIERS
==========================================================================================*/
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.tier{
     background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:28px;
     display:flex; flex-direction:column; gap:.8rem; box-shadow:var(--shadow-sm);
}
.tier.feature{ border-color:var(--orange); background:linear-gradient(165deg, var(--tint-orange), var(--white)); }
.tier-amt{ font-family:var(--display); font-weight:900; font-size:2.6rem; line-height:1; color:var(--blue); }
.tier-amt small{ font-size:.9rem; font-weight:600; color:var(--ink-faint); letter-spacing:0; }
.tier h3{ font-size:1.05rem; margin:0; }
.tier p{ font-size:.9rem; color:var(--ink-soft); margin:0; flex:1; }

/*==========================================================================================
     16. SEARCH / FILTER BAR
==========================================================================================*/
.filterbar{
     display:flex; gap:14px; align-items:center; flex-wrap:wrap;
     background:var(--white); border:1px solid var(--line); border-radius:var(--r);
     padding:16px 18px; margin-bottom:28px; box-shadow:var(--shadow-sm);
}
.searchwrap{ position:relative; flex:1; min-width:230px; }
.searchwrap .ico{
     position:absolute; left:14px; top:50%; transform:translateY(-50%);
     width:18px; height:18px; color:var(--ink-faint); pointer-events:none;
}
.searchwrap input{
     width:100%; font:inherit; font-size:.95rem; color:var(--ink);
     background:var(--white); border:1px solid var(--line-strong);
     border-radius:var(--r-sm); padding:.72rem 1rem .72rem 2.7rem;
}
.searchwrap input::placeholder{ color:var(--ink-faint); opacity:1; }
.searchwrap input:focus{ outline:2px solid var(--blue); outline-offset:2px; border-color:var(--blue); }
.filter-count{ font-size:.85rem; color:var(--ink-faint); margin-left:auto; }

.pager{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.pager a, .pager span{
     min-width:42px; height:42px; display:grid; place-items:center; padding:0 .7em;
     border:1px solid var(--line-mid); border-radius:var(--r-sm); color:var(--ink);
     text-decoration:none; font-size:.9rem; font-weight:600;
     transition:color var(--t), border-color var(--t), background var(--t);
}
.pager a:hover{ color:var(--orange-deep); border-color:var(--orange); background:var(--tint-orange); }
.pager .cur{ background:var(--orange-deep); border-color:var(--orange-deep); color:var(--white); }
.pager .gap{ border:0; color:var(--ink-faint); }

.empty{ text-align:center; padding:70px 20px; color:var(--ink-faint); }

/*==========================================================================================
     17. NOTES (episode show-notes rendering)
==========================================================================================*/
.notes{ font-size:.95rem; color:var(--ink-soft); }
.notes a{ color:var(--orange-deep); }
.notes p{ margin-bottom:.9em; }

/*==========================================================================================
     18. FOOTER
==========================================================================================*/
.foot{ background:var(--white); border-top:1px solid var(--line); padding:clamp(52px,6vw,76px) 0 34px; color:var(--ink); }
.foot-top{ display:grid; grid-template-columns:1.2fr 2fr; gap:clamp(34px,5vw,64px); padding-bottom:44px; }
.foot-brand img{ width:auto; height:60px; margin-bottom:1.1rem; }
.foot-brand p{ font-size:.9rem; color:var(--ink-soft); max-width:34ch; }

.social{ display:flex; gap:10px; list-style:none; margin:1.4rem 0 0; padding:0; }
.social a{
     width:40px; height:40px; border-radius:10px; display:grid; place-items:center;
     border:1px solid var(--line-mid); color:var(--blue);
     transition:color var(--t), border-color var(--t), background var(--t);
}
.social a:hover{ color:var(--orange-deep); border-color:var(--orange); background:var(--tint-orange); }

.foot-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:30px; }
.foot-cols h3{
     font-size:.76rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
     color:var(--ink); margin-bottom:1rem;
}
.foot-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot-cols a{ font-size:.9rem; color:var(--ink-soft); text-decoration:none; transition:color var(--t); }
.foot-cols a:hover{ color:var(--orange-deep); }

.foot-bot{ border-top:1px solid var(--line); padding-top:26px; }
.foot-bot p{ font-size:.84rem; color:var(--ink-faint); margin:0 0 .4rem; }
/*   Bold, not underlined -- David, 2026-09-30.
     This is the one place in the theme where a link carries no underline, so the weight is
     doing real work rather than decorating. --ink-soft against the --ink-faint text around it
     is only 1.57:1, well under the 3:1 WCAG wants when COLOUR is the sole cue -- so colour is
     explicitly not the cue here, the weight is (WCAG 1.4.1 is satisfied by any non-colour
     distinction). Drop the font-weight and these links become invisible as links.            */
.foot-bot a{ color:var(--ink-soft); font-weight:700; text-decoration:none; }
/*   Removing the underline removed the only hover affordance too. Same orange the footer
     columns already use, so the footer behaves consistently.                                 */
.foot-bot a:hover{ color:var(--orange-deep); }
/* no opacity trick here: faded --ink-faint on white would fall under 4.5:1 */
.foot-bot .fine{ font-size:.76rem; margin:0; }

/*==========================================================================================
     18b. FILM REVIEWS
     The latest YouTube film review as a click-to-load facade: a thumbnail and a play button
     until somebody actually presses play. An eager YouTube iframe would put the player's
     JavaScript -- several hundred KB -- and YouTube's cookies on the home page for every
     visitor, including the ones who never watch. The player that does load is
     youtube-nocookie.com. Same instinct as preload="none" on the podcast players.
==========================================================================================*/
.film-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(24px,3.5vw,44px); align-items:start; }
.film-grid-solo{ grid-template-columns:1fr; max-width:640px; }

.yt-facade{
     position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
     border-radius:var(--r); background:var(--navy); box-shadow:var(--shadow-lift);
}
.yt-facade img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.yt-facade:hover img{ transform:scale(1.03); }
/* a graphic, not text: brand orange against its white ring, and the ring against any thumbnail, both clear 3:1 */
.yt-play{
     position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px;
     border-radius:50%; display:grid; place-items:center;
     background:var(--orange); color:var(--white);
     box-shadow:0 0 0 4px rgba(255,255,255,.92), 0 14px 32px -10px rgba(0,0,0,.55);
     transition:transform var(--t), background var(--t);
}
.yt-play .ico{ width:30px; height:30px; margin-left:4px; }
.yt-facade:hover .yt-play{ background:var(--orange-deep); transform:scale(1.07); }
.yt-facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.film-meta{ margin-top:18px; }
.film-label{
     font-family:var(--display); font-weight:900; font-size:.74rem; letter-spacing:.13em;
     text-transform:uppercase; color:var(--orange-deep); margin:0 0 .45rem;
}
.film-date{ color:var(--ink-faint); }
.film-meta h3{ font-size:clamp(1.15rem,1.7vw,1.35rem); margin:0 0 .7rem; }
.film-more{
     display:inline-flex; align-items:center; gap:.4em;
     color:var(--blue); font-weight:600; font-size:.92rem;
     text-decoration:underline; text-underline-offset:3px;
}
.film-more:hover{ color:var(--blue-deep); }

.film-patreon .panel-head{ color:var(--orange-deep); }
.film-patreon .panel-head h3{ font-size:1.3rem; margin:0; color:var(--blue); }

@media (max-width:980px){
     .film-grid{ grid-template-columns:1fr; }
}

/*==========================================================================================
     19. RESPONSIVE
==========================================================================================*/
@media (max-width:980px){
     .hero-grid{ grid-template-columns:1fr; }
     .foot-top{ grid-template-columns:1fr; }
}

@media (max-width:820px){
     .navtoggle{ display:flex; }
     .nav{
          position:fixed; inset:var(--masthead-h) 0 auto; margin:0;
          flex-direction:column; align-items:stretch; gap:0;
          background:var(--white); border-bottom:1px solid var(--line);
          padding:12px 24px 26px; transform:translateY(-120%);
          transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow);
     }
     .nav.open{ transform:translateY(0); }
     .nav-cta{ margin-top:18px; justify-content:center; }
     .band-in{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:640px){
     body{ font-size:16px; }
     .wrap{ padding-inline:18px; }
     .latest-top{ flex-direction:column; }
     .latest-art{ width:92px; height:92px; }
     .field-row{ grid-template-columns:1fr; }
     .step{ grid-template-columns:42px 1fr; gap:14px; padding:18px; }
     .step::before{ width:42px; height:42px; font-size:1.1rem; }
     .products{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
     .foot-brand img{ height:52px; }
}

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


/*==========================================================================================
     20. WORDPRESS INTEGRATION
     Everything below exists only because this is a theme rather than a static site:
     menu markup from wp_nav_menu(), core's alignment and caption classes, the admin bar,
     and the utility classes the templates use in place of inline styles.
==========================================================================================*/

/* --- wp_nav_menu() output (and gnfp_nav_fallback(), which emits the same classes) --- */
.gnfp-nav__list{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.gnfp-nav__link{
     position:relative; display:inline-block; text-decoration:none;
     font-size:.83rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
     color:var(--ink-soft); padding:6px 0; transition:color var(--t);
}
/* brand orange is legal here: an underline is a state graphic, 3:1 against white */
.gnfp-nav__link::after{
     content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
     background:var(--orange); transform:scaleX(0); transform-origin:left;
     transition:transform var(--t);
}
.gnfp-nav__link:hover{ color:var(--blue); }
.gnfp-nav__link:hover::after{ transform:scaleX(1); }
.gnfp-nav__item.current-menu-item > .gnfp-nav__link,
.gnfp-nav__item.current_page_item > .gnfp-nav__link{ color:var(--blue); }
.gnfp-nav__item.current-menu-item > .gnfp-nav__link::after,
.gnfp-nav__item.current_page_item > .gnfp-nav__link::after{ transform:scaleX(1); }

.gnfp-footer__nav{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.gnfp-footer__nav .gnfp-nav__link{
     font-size:.9rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--ink-soft);
}
.gnfp-footer__nav .gnfp-nav__link::after{ display:none; }
.gnfp-footer__nav .gnfp-nav__link:hover{ color:var(--orange-deep); }

/* --- utility classes the templates use instead of inline style attributes --- */
.center-cta{ text-align:center; margin-top:34px; }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.eyebrow-light{ color:var(--white); }
.eyebrow-light::before{ background:var(--white); }
.eyebrow-center{ justify-content:center; }
.latest-solo{ max-width:760px; margin-inline:auto; }
.panel-stack{ margin-top:20px; }
.panel-cta{ margin-top:1.4rem; }
.panel-cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

/*   The contact address shown as text. See the note in page-contact.php for why it is not just
     a button label. overflow-wrap is load-bearing: 36 unbroken characters would otherwise push
     the panel wider than a phone screen and scroll the whole page sideways.                   */
.emailaddr{ margin-top:1.3rem; margin-bottom:0; font-size:1.06rem; font-weight:700; overflow-wrap:anywhere; }
.emailaddr a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.emailaddr a:hover{ color:var(--orange-deep); }
/*   .field .hint is the form's version and is scoped, so this does not collide with it.       */
.panel .hint{ display:block; margin-top:1rem; margin-bottom:0; font-size:.86rem; color:var(--ink-faint); }
.btn.is-copied{ background:var(--blue); border-color:var(--blue); color:var(--white); }
.panel .steps + .panel-cta{ margin-top:1.8rem; }
.social-flush{ margin-top:.4rem; }
.merch-group{ scroll-margin-top:100px; margin-bottom:58px; }
/* was opacity:.5 on the chip color -- about 2.5:1 on white */
.merch-nav__n{ color:var(--ink-faint); }
.head-row-tight{ margin-bottom:22px; }
.section-head-flush{ margin-bottom:0; }
.h-group{ font-size:clamp(1.4rem,2.4vw,2rem); }

/* --- long-form content: page.php, single.php, the block editor --- */
.wrap-prose{ max-width:780px; }
.prose{ font-size:1.04rem; color:var(--ink); }
.prose h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:2em; }
.prose h3{ margin-top:1.7em; }
.prose a{ color:var(--orange-deep); text-decoration:underline; text-underline-offset:2px; }
.prose ul, .prose ol{ padding-left:1.3em; margin-bottom:1.2em; }
.prose li{ margin-bottom:.4em; }
.prose blockquote{
     margin:1.6em 0; padding:.2em 0 .2em 1.4em;
     border-left:3px solid var(--orange); color:var(--ink-soft); font-style:italic;
}
.prose code{
     background:var(--tint-blue); color:var(--ink); border-radius:4px; padding:.15em .4em;
     font-size:.9em; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose pre{
     background:var(--tint-blue); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-sm);
     padding:1.1rem 1.3rem; overflow-x:auto;
}
.prose pre code{ background:none; padding:0; }
.prose img{ border-radius:var(--r-sm); }
.prose table{ width:100%; border-collapse:collapse; margin-bottom:1.4em; }
.prose th, .prose td{ padding:.6em .8em; border-bottom:1px solid var(--line); text-align:left; }
.prose th{ font-family:var(--display); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }

/* --- core block / media classes --- */
.alignleft{ float:left; margin:0 1.5em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.5em; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide{ max-width:1100px; margin-inline:auto; }
.alignfull{ max-width:none; }
.wp-caption{ max-width:100%; }
.wp-caption-text, .wp-element-caption{
     font-size:.84rem; color:var(--ink-faint); text-align:center; margin-top:.5em;
}
.sticky, .gallery-caption, .bypostauthor{ /* required by the theme check */ }

/* --- comments --- */
.comments{ margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--line); }
.comments-title{ font-size:1.4rem; }
.comment-list{ list-style:none; margin:0 0 2.5rem; padding:0; }
.comment-list ol.children{ list-style:none; padding-left:1.5rem; }
.comment-body{
     background:var(--white); border:1px solid var(--line); border-radius:var(--r);
     padding:20px 22px; margin-bottom:16px;
}
.comment-meta{ font-size:.84rem; color:var(--ink-faint); margin-bottom:.6rem; }
.comment-author img{ border-radius:50%; margin-right:.6em; vertical-align:middle; }
.comment-form label{
     display:block; font-family:var(--display); font-size:.76rem; font-weight:800;
     letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
     width:100%; font:inherit; font-size:.97rem; color:var(--ink); margin-bottom:1rem;
     background:var(--white); border:1px solid var(--line-strong);
     border-radius:var(--r-sm); padding:.85rem 1rem;
}
.comment-form input:focus, .comment-form textarea:focus{ outline:2px solid var(--blue); outline-offset:2px; border-color:var(--blue); }
.comment-form .submit{
     display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
     font-family:var(--display); font-weight:800; font-size:.9rem;
     letter-spacing:.045em; text-transform:uppercase;
     padding:.95rem 1.7rem; border-radius:var(--r-sm); border:2px solid transparent;
     background:var(--orange-deep); color:var(--white);
}

/* --- accessibility helper WordPress expects by name --- */
.screen-reader-text{
     border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
     padding:0; position:absolute; width:1px; word-wrap:normal !important;
}
.screen-reader-text:focus{
     background:var(--orange-deep); color:var(--white); clip-path:none; height:auto; width:auto;
     padding:.8rem 1.3rem; left:1rem; top:1rem; z-index:200; font-weight:700;
}

/* --- admin bar: the masthead is sticky, so it has to sit below it --- */
.admin-bar .masthead{ top:32px; }
@media screen and (max-width:782px){
     .admin-bar .masthead{ top:46px; }
}
@media screen and (max-width:600px){
     .admin-bar .masthead{ top:0; }
}
@media (max-width:820px){
     .admin-bar .nav{ top:calc(var(--masthead-h) + 46px); }
}

/* --- mobile nav has to move the wp_nav_menu list too --- */
@media (max-width:820px){
     .nav .gnfp-nav__list{ flex-direction:column; gap:0; }
     .nav .gnfp-nav__link{
          display:block; padding:14px 0; font-size:.95rem;
          border-bottom:1px solid var(--line);
     }
     .nav .gnfp-nav__link::after{ display:none; }
}