/*
Theme Name: The Green Line
Description: Custom theme matching The Green Line editorial design
Version: 1.0.0
Author: TGL Engineering
*/

/* === Reset & Base === */
:root {
    --tgl-green-dark:   #122806;  /* brand: dark green */
    --tgl-green-light:  #cfd877;  /* brand: light green (yellow-green accent) */
    /* Brand-strict palette allows only dark + light green. Accent was
       #3d7a1c (off-brand mid-green) — mapped to dark. Hover feedback
       on light surfaces is now typographic (underline on `a:hover`)
       instead of a colour shift. */
    --tgl-green-accent: #122806;
    --tgl-cream:        #f5f1eb;
    --tgl-format-pink:  #f7d6dc;  /* brand: shared band background for Tools + Guides archives */
    --tgl-meta:         #122806;  /* WCAG AA on white — meta text, bylines, timestamps (4.6:1) */
    --tgl-muted:        #122806;  /* WCAG AA on white — secondary hints, empty states (4.6:1) */
    --tgl-focus-ring:   rgba(61, 122, 28, 0.45);  /* green focus ring for keyboard nav */

    /* Typography per TGL brand guidelines (July 2021):
       • H1 / Display headlines  → Libre Franklin Bold, ALL CAPS
       • H2 / Sub-headlines      → Crimson Pro Light, regular case
       • Body                    → Open Sans Regular
       • Pull quotes / accents   → Libre Franklin Bold, ALL CAPS */
    --tgl-font-display: 'Libre Franklin', system-ui, -apple-system, sans-serif;
    --tgl-font-serif:   'Crimson Pro', Georgia, serif;
    --tgl-font-body:    'Open Sans', system-ui, -apple-system, sans-serif;

    /* Legacy aliases — kept while older rules still reference them. New code
       should use --tgl-font-display / --tgl-font-serif / --tgl-font-body. */
    --tgl-font-heading: var(--tgl-font-display);

    /* Spacing scale — sitewide vertical rhythm tokens. Every block
       that opens a new visual beat should own its top spacing via
       one of these so page-to-page rhythm stays consistent.
        xs = tight inline gaps (button rows, tags)
        sm = paragraph / small-copy spacing
        md = between sibling blocks inside the same section
        lg = between major sections (header → cards, cards → CTA)
        xl = between a page's main content and a bottom decoration
             (HR + CTA banner + footer stripes)
    */
    --tgl-space-xs: 0.5rem;
    --tgl-space-sm: 1rem;
    --tgl-space-md: 2rem;
    --tgl-space-lg: 3rem;
    --tgl-space-xl: 5rem;

    /* Content grid — the ONE max-width every capped block should use.
       Full-bleed elements (hero images, gradient wallpapers, sitewide
       stripe divider, filter band, dark-green CTA banner) are the
       intentional exception: they use `width: 100vw` + negative-margin
       escape and never touch this token. */
    --tgl-content-max: 1040px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Sitewide safe-area gutter — <main> keeps a consistent 1.5rem
   padding on the left and right so no child section can touch the
   browser edge on narrow viewports. Individual blocks stop adding
   their own ad-hoc `padding: 0 1.5rem`. Full-bleed elements that
   want to escape (hero images, gradient bands, stripe dividers)
   continue to use the `width: 100vw; margin-left: calc(50% - 50vw)`
   trick which measures from the viewport, not the parent. */
main { padding-left: 1.5rem; padding-right: 1.5rem; }

body {
    font-family: var(--tgl-font-body);
    /* Brand 3-colour gradient as the page wallpaper. Scrolls with the page. */
    background: url("/wp-content/themes/tgl-theme/assets/img/gradients/3-colour.png") top center / cover no-repeat;
    /* Brand text — TGL uses dark green (#122806) not black anywhere text
       lives on the site. This is the fallback for elements without an
       explicit color rule; scoped meta / muted tokens still apply. */
    color: #122806;
    line-height: 1.6;
}

a { color: var(--tgl-green-dark); text-decoration: none; }
/* No underline on hover globally. Underline is only shown inside
   body copy (`.tgl-article__content a:hover`) where inline links need
   discoverability, and on the desktop nav (its own rule). */
a:hover { color: var(--tgl-green-accent, #122806); }

/* Body-copy inline links keep the classic underline-on-hover so
   readers still get the link cue mid-paragraph. */
.tgl-article__content a:hover,
.tgl-article__content a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

img { max-width: 100%; height: auto; }

/* === Accessibility: Skip Link === */
.tgl-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    font-family: var(--tgl-font-display);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 24px;
    text-transform: uppercase;
}
.tgl-skip-link:focus {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    clip: auto;
}

/* === Accessibility: Screen Reader Only (WP standard) === */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none;
    display: block;
    height: auto;
    width: auto;
    position: static;
    overflow: visible;
}

/* === Accessibility: Global Focus Ring ===
   All interactive elements get a visible green ring on keyboard focus.
   Mouse clicks don't show the ring thanks to :focus-visible. */
:focus-visible {
    outline: 3px solid var(--tgl-focus-ring, rgba(61,122,28,0.45));
    outline-offset: 2px;
}
/* Inputs — no glow. Just a solid dark-green border-color shift on
   focus (a11y still met via the shared `:focus-visible` outline that
   already applies from the rule above; the outline sits outside the
   input so it doesn't clash with the pill-wrapper shapes used by
   the CTA / newsletter forms). */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: none;
}

/* === Header (mobile-first, also used on desktop) ===
   Two-row layout on desktop:
     row 1: .tgl-header__bar   — logo + hamburger + actions (STICKY)
     row 2: .tgl-header__nav   — primary nav strip (scrolls away with content)
   Only row 1 is sticky, so the reader gains vertical space once they start
   scrolling. Nav is always reachable via the hamburger in row 1. */
.tgl-header {
    /* Muted warm off-white with pink undertone — softer than brand
       Pink (#FDD7D8) which read too hot as a full-width header bg.
       Documented as a brand exception in CLAUDE.md. */
    background: #EAE0DE;
    border-bottom: 1px solid rgba(18, 40, 6, 0.08);
}
.tgl-header__bar {
    /* Sticky = row-1-only: the bar stays pinned to viewport top while the
       row-2 nav strip below scrolls away with content. */
    position: sticky;
    top: 0;
    z-index: 100;
    background: #EAE0DE;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 46px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0; /* mobile: bar flush to viewport edges */
    gap: 0.5rem;
}
@media (min-width: 720px) {
    .tgl-header__bar { padding: 0 1.5rem; }
}
/* Center the logo against the whole bar, not just its grid cell, so an
   asymmetric left (hamburger) vs right (3 icons) doesn't push it off-axis. */
.tgl-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

/* Hamburger */
.tgl-header__menu-toggle {
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--tgl-green-dark, #122806);
}
.tgl-header__menu-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    background: currentColor;
    border-radius: 24px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.tgl-menu-open .tgl-header__menu-bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.tgl-menu-open .tgl-header__menu-bar:nth-child(2) { opacity: 0; }
.tgl-menu-open .tgl-header__menu-bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Logo */
.tgl-header__logo {
    display: inline-flex;
    /* Stack: logo image on top, tagline underneath, both centered. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    line-height: 1;
}
.tgl-header__logo-img {
    display: block;
    width: auto;
    height: 22px;
    max-width: 50vw;
    object-fit: contain;
}
.tgl-header__tagline {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-style: normal;
    /* Keep the tagline on one line at every viewport — the wrap to
       two lines under 480px read as a layout bug ("...through the
       way we" / "live"). Downsizing + nowrap + Crimson Pro's tight
       serif keeps it legible even at 0.6rem on ~360px screens. */
    font-size: 0.6rem;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.2;
    display: block;
    white-space: nowrap;
}
@media (min-width: 480px) {
    .tgl-header__tagline  { font-size: 0.74rem; }
}
@media (min-width: 720px) {
    .tgl-header__logo-img { height: 34px; max-width: none; }
    .tgl-header__tagline  { font-size: 0.78rem; }
}

/* Right-side icon buttons */
.tgl-header__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    /* The 28px icon sits centered in a 36px hit area, leaving 4px of dead
       space on the right. Pull the whole group out so the icon edge lands
       on the bar edge. */
    margin-right: -4px;
}

/* Saved-articles shortcut — bookmark icon with optional count badge */
.tgl-header__saved { position: relative; }
.tgl-header__saved--has-items svg path { fill: currentColor; }
.tgl-header__saved-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 24px;
    background: var(--tgl-green-accent, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
    text-transform: uppercase;
}
.tgl-header__icon-btn {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
.tgl-header__icon-btn:hover { color: var(--tgl-green-accent, #122806); }
/* Wrappers around the saves + user icons must not stretch the hit area */
.tgl-header__saves-wrap,
.tgl-header__user-wrap { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; }
/* Saves icon is duplicated in the user dropdown — hide on phones to free
   space for logo + search + account in the navbar. */
@media (max-width: 719px) {
    .tgl-header__saves-wrap { display: none; }
}

/* Page-name bar (solid dark green strip below the navbar) */
.tgl-page-bar {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 1rem 1.5rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.tgl-page-bar > span {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Full-screen overlay nav — visual twin of .tgl-search-overlay:
   semi-transparent dark green + blur, white type, close button top-right
   in the exact same place as search. */
.tgl-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(18, 40, 6, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    /* Three-row layout: top padding · scrollable panel · pinned social bar.
       The panel grows to fill, scrolls if menu is too tall on small screens;
       social icons stay at the viewport bottom regardless of menu length. */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem 1.5rem;
    overflow: hidden;
}
.tgl-mobile-nav__panel {
    flex: 1 1 auto;
    min-height: 0; /* lets the flex child shrink so overflow can scroll */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) {
    .tgl-mobile-nav {
        justify-content: flex-start;
        padding: 4rem 1.5rem 1.5rem;
    }
    /* Keep the panel scrollable at every breakpoint — when the menu (with
       expanded submenus) is taller than the available column, the panel
       scrolls instead of running over the pinned social bar below. */
    .tgl-mobile-nav__panel {
        flex: 1 1 auto;
        overflow-y: auto;
    }
}
/* Pin the social row to the bottom of the panel area. flex-shrink:0 keeps
   it at its natural height regardless of how tall the nav list gets, and
   margin-top:auto pushes it against the bottom edge in case the menu is
   shorter than the viewport. */
.tgl-mobile-nav__social {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 1rem;
}
.tgl-mobile-nav.is-open { pointer-events: auto; opacity: 1; }

/* Slight scale + opacity entry on the panel, plus a staggered slide-fade
   on each <li> so the menu reads as it builds itself when opened. */
.tgl-mobile-nav__panel {
    transform: translateY(-12px) scale(0.98);
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s;
}
.tgl-mobile-nav.is-open .tgl-mobile-nav__panel {
    transform: translateY(0) scale(1);
}
.tgl-mobile-nav__list li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li { opacity: 1; transform: translateY(0); }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(1)  { transition-delay: 0.08s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(2)  { transition-delay: 0.13s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(3)  { transition-delay: 0.18s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(4)  { transition-delay: 0.23s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(5)  { transition-delay: 0.28s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(6)  { transition-delay: 0.33s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(7)  { transition-delay: 0.38s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(8)  { transition-delay: 0.43s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(9)  { transition-delay: 0.48s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(10) { transition-delay: 0.53s; }
.tgl-mobile-nav.is-open .tgl-mobile-nav__list li:nth-child(11) { transition-delay: 0.58s; }

/* Reduced motion: respect user preference and skip stagger entirely. */
@media (prefers-reduced-motion: reduce) {
    .tgl-mobile-nav__panel,
    .tgl-mobile-nav__list li { transition: opacity 0.15s ease; transform: none !important; }
    .tgl-mobile-nav.is-open .tgl-mobile-nav__list li { transition-delay: 0s !important; }
}

/* Backdrop element kept for click-to-close, but visually inert so the
   mobile-nav root supplies the green wash. */
.tgl-mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.tgl-mobile-nav__panel {
    position: relative;
    width: 100%;
    max-width: 600px;
    text-align: center;
}

/* Social icons pinned to the bottom of the mobile overlay. In-flow flex
   child (not absolute) so a long menu can scroll above them without
   colliding. The padding-top + border keep them visually separated from
   the last menu item when the panel is full-height. */
.tgl-mobile-nav__social {
    display: none;
    justify-content: center;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 2rem;
    flex: 0 0 auto;
    width: 100%;
}
body.tgl-menu-open .tgl-mobile-nav__social {
    display: flex;
}
/* Subtle divider above the social row when the menu has scrolled. */
.tgl-mobile-nav__social {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 1rem;
}
.tgl-mobile-nav__social li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.tgl-mobile-nav__social a {
    color: #fff;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.tgl-mobile-nav__social a:hover {
    opacity: 1;
}

/* Close buttons (hamburger menu + search overlay) — bottom-center on mobile
   so they're easy thumb reach, top-right on desktop where the cursor goes.
   The hamburger close lives OUTSIDE .tgl-mobile-nav (which has backdrop-filter
   creating a containing-block trap for fixed-positioning) so it pins to the
   real viewport, not the panel. */
/* Close button — pinned TOP-RIGHT on every breakpoint. Previously the
   mobile version lived bottom-center for thumb reach; unified on
   top-right for a single, streamlined pattern that matches every other
   overlay (search, RSVP modal, dialogs). Sits OUTSIDE the panel so
   backdrop-filter's containing-block trap doesn't hijack `position:fixed`. */
.tgl-mobile-nav__close,
.tgl-search-overlay__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(13, 59, 30, 0.3);
    color: var(--tgl-green-dark, #122806);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10002;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, transform 0.1s ease;
}
@media (min-width: 720px) {
    .tgl-mobile-nav__close,
    .tgl-search-overlay__close { right: 1.5rem; }
}
/* Visibility — only show the right close button for the right state. */
.tgl-mobile-nav__close      { display: none; }
.tgl-search-overlay__close  { display: none; }
body.tgl-menu-open  .tgl-mobile-nav__close      { display: inline-flex; }
.tgl-search-overlay.is-open ~ .tgl-search-overlay__close,
.tgl-search-overlay.is-open  .tgl-search-overlay__close { display: inline-flex; }
.tgl-mobile-nav__close:hover,
.tgl-search-overlay__close:hover { background: var(--tgl-cream, #f5f1eb); }
.tgl-mobile-nav__close:active,
.tgl-search-overlay__close:active { transform: translateY(1px); }

.tgl-mobile-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Was 0.5rem — tightened so top-level items sit closer together. */
    gap: 0.15rem;
    width: 100%;
}
.tgl-mobile-nav__list a {
    display: inline-block;
    padding: 0.35rem 1rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    line-height: 1.15;
    transition: opacity 0.15s ease, transform 0.05s ease;
}
.tgl-mobile-nav__list a:hover,
.tgl-mobile-nav__list a:focus-visible {
    /* Mobile-nav lives on the dark-green overlay panel — dark-green
       text hover is invisible. Flip to brand Light Green for hover
       feedback. */
    color: var(--tgl-green-light, #CFD877);
}
.tgl-mobile-nav__list a:active { transform: translateY(1px); }

.tgl-mobile-nav__cta {
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.tgl-mobile-nav__cta a {
    background: #fff;
    color: var(--tgl-green-dark, #122806) !important;
    border-radius: 24px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    width: 100%;
}
.tgl-mobile-nav__cta a:hover { background: var(--tgl-cream, #f5f1eb); }

@media (min-width: 720px) {
    .tgl-mobile-nav__list a { font-size: 1.65rem; }
}

/* Lock body scroll while menu is open */
body.tgl-menu-open { overflow: hidden; }

/* Header grows a bit on bigger screens */
@media (min-width: 720px) {
    .tgl-header__bar { height: 72px; }
}

/* === 404 page === */
.tgl-404 { text-align: center; padding-top: 9rem; }
.tgl-404__eyebrow {
    font-family: var(--tgl-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent);
    margin: 0 0 0.85rem;
}
.tgl-404__title {
    font-family: var(--tgl-font-display);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    line-height: 1.05;
    margin: 0 auto 1rem;
    max-width: 720px;
}
.tgl-404__text {
    font-family: var(--tgl-font-serif);
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--tgl-green-dark, #122806);
    max-width: 560px;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
}
.tgl-404__text code {
    background: rgba(13, 59, 30, 0.08);
    padding: 0.15em 0.45em;
    border-radius: 24px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85em;
    color: var(--tgl-green-dark);
}
.tgl-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin: 0 0 2rem;
}
.tgl-hero__cta--ghost {
    background: transparent;
    color: var(--tgl-green-dark);
}
.tgl-404__hints {
    background: var(--tgl-cream, #f5f1eb);
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}
.tgl-404__hints-title {
    font-family: var(--tgl-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent);
    margin: 0 0 0.6rem;
}
.tgl-404__hints ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.tgl-404__hints a {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    color: var(--tgl-green-dark);
    text-transform: uppercase;
}
.tgl-404__hints a:hover { color: var(--tgl-green-accent); }

/* === Newsletter signup block ===
   Dark green card with thin white outline, big bold headline, body with
   inline highlights, white pill input + dark CTA. Used as a free-standing
   widget AND as the trigger 1 (newsletter wall). */
/* Shared dark-green CTA card shell — the one-source-of-truth box for
   every promo/conversion widget (newsletter signup, role CTA, AJ
   Solutions prompt, …). New CTAs get `class="tgl-cta-card"` on the
   outermost element and inherit the shell for free — background,
   border, radius, padding, shadow, max-width, centered text. Add
   widget-specific content styles (title/copy/button variants) inside
   the widget's own class, not here. */
.tgl-cta-card,
.tgl-newsletter {
    background: var(--tgl-green-dark, #122806);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    color: #fff;
    padding: 2.25rem 1.5rem;
    margin: 2.5rem auto;
    max-width: 720px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(13, 59, 30, 0.18);
}
@media (min-width: 720px) {
    .tgl-cta-card,
    .tgl-newsletter { padding: 3rem 3rem 2.5rem; }
}
.tgl-newsletter__inner { max-width: 560px; margin: 0 auto; }
/* ==================================================================
   Section title (H2 / H3) — shared component across every landing,
   archive, and marketing surface. Brand rule: Libre Franklin 800
   uppercase, dark green, no letter-spacing, clamped size. Add new
   selectors to this list rather than styling a per-page class.
   ================================================================== */
.tgl-newsletter__title,
.tgl-issues__eyebrow,
.tgl-format-archive__title,
.tgl-video-archive__title,
.tgl-events-page__section-title,
.tgl-guides-highlight__title,
.tgl-page-intro__title,
.tgl-team-page__title,
.tgl-team-page__section-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    line-height: 1.2;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
    margin: 0 0 1rem;
}
/* Dark-bg parent overrides — section titles inside dark-green blocks
   flip to white. Reserved for the specific parent classes that
   supply a dark background so we don't accidentally flip unrelated
   titles inside neutral wrappers. */
/* Dark-bg parents — titles flip to white so they stay legible on
   the dark-green surface. */
.tgl-guides-highlight .tgl-guides-highlight__title,
.tgl-newsletter .tgl-newsletter__title {
    color: #fff;
}
.tgl-newsletter__text {
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 1.75rem;
}
/* Higher specificity so the wall newsletter (injected inside .tgl-article__content)
   isn't overridden by .tgl-article__content h3 / strong rules later in the file. */
.tgl-newsletter .tgl-newsletter__title { color: #fff; }
.tgl-newsletter .tgl-newsletter__text  { color: rgba(255, 255, 255, 0.92); }
.tgl-newsletter .tgl-newsletter__text strong { font-weight: 700; color: #fff; }
.tgl-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0 0 0.75rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.tgl-newsletter__pill {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 24px;
    padding: 3px;
    align-items: stretch;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.tgl-newsletter__input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: 0.75rem 1rem;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: #122806;
    min-width: 0;
}
.tgl-newsletter__input::placeholder { color: var(--tgl-green-dark, #122806); }
.tgl-newsletter__button {
    flex: 0 0 auto;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    /* Left corners flush (square) so the button reads as a
       continuation of the input pill it sits next to; right
       corners keep the brand 24px radius. */
    border-radius: 0 24px 24px 0;
    padding: 0.75rem 1.4rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
    text-transform: uppercase;
}
.tgl-newsletter__button:hover {
    color: var(--tgl-green-light, #CFD877);
}
/* Wide standalone Subscribe button — rendered to logged-in
   non-subscribers (see template-parts/newsletter.php). Sits alone
   without an email pill next to it, so BOTH sides need the brand
   24px radius, and it needs a white 1.5px border so the dark-green
   fill doesn't blend into the dark-green newsletter band behind it. */
.tgl-newsletter__button--wide {
    display: inline-block;
    border-radius: 24px;
    border: 1.5px solid #fff;
    padding: 0.85rem 2rem;
    min-width: 260px;
}
.tgl-newsletter__cta {
    text-align: center;
    margin: 0 0 1rem;
}
.tgl-newsletter__result {
    color: #fff;
    /* Open Sans (body sans) for the confirmation copy so it reads as
       a message, not a heading — Franklin was too display-y for a
       single-line status. */
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.95rem;
    margin: 0.75rem 0 0;
}
/* Consent label sits on the dark-green newsletter band — override the
   default meta-gray so it's readable, and center it under the pill. */
.tgl-newsletter .tgl-newsletter-consent {
    color: rgba(255, 255, 255, 0.85);
    justify-content: flex-start;
    margin: 0;
    font-size: 0.85rem;
}
.tgl-newsletter .tgl-newsletter-consent a { color: #fff; }
.tgl-newsletter .tgl-newsletter-consent a:hover { color: var(--tgl-light-green, #cfd877); }
.tgl-newsletter .tgl-newsletter-consent input[type="checkbox"] {
    accent-color: var(--tgl-light-green, #cfd877);
}

.tgl-newsletter__dismiss {
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: 0.6rem;
}
.tgl-newsletter__dismiss:hover { color: #fff; }

/* === Brand gradient backgrounds ===
   Used as fallback placeholders when a story has no featured image, and as
   accent fills on hero blocks. Assets live in /assets/img/gradients/ and are
   pulled from the July 2021 brand package. */
.tgl-gradient {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tgl-gradient--3colour       { background-image: url("assets/img/gradients/3-colour.png"); }
.tgl-gradient--blue-violet   { background-image: url("assets/img/gradients/blue-violet.png"); }
.tgl-gradient--green-blue    { background-image: url("assets/img/gradients/green-blue.png"); }
.tgl-gradient--orange-pink   { background-image: url("assets/img/gradients/orange-pink.png"); }
.tgl-gradient--pink-green    { background-image: url("assets/img/gradients/pink-green.png"); }
.tgl-gradient--violet-orange { background-image: url("assets/img/gradients/violet-orange.png"); }

/* === Homepage === */
/* Homepage ends with `.tgl-guides-highlight` (dark green) followed
   by the dark-green footer — a 4rem main-padding-bottom would let
   the light body-gradient peek through as a bar between them. Zero
   the padding so the two dark blocks butt together seamlessly. */
.tgl-home { padding-bottom: 0; }
/* /stories/ opens with an archive-page-header block (title + intro)
   instead of the hero — add matching top padding so the heading
   doesn't sit flush against the site nav. Homepage keeps padding
   0 because its hero image handles that spacing itself. */
body.page-template-page-stories .tgl-home { padding-top: 2.5rem; }

/* Hero (lead story) */
.tgl-hero {
    max-width: 1040px;
    margin: 1.5rem auto 3.5rem;
    padding: 0 1.5rem;
}
.tgl-hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
}
@media (min-width: 900px) {
    .tgl-hero__inner { grid-template-columns: 1.15fr 1fr; gap: 3rem; }
}
.tgl-hero__media {
    display: block;
    overflow: hidden;
    border-radius: 24px;
    position: relative;
}
.tgl-hero__image-link {
    display: block;
    overflow: hidden;
    border-radius: 24px;
}
/* Hero badge now inherits from `.tgl-content-card__badge` for
   consistent typography with every other card in the site. This rule
   only overrides positioning + a hair more presence (hero is bigger
   than a normal card). */
.tgl-hero__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    font-size: 0.78rem;
    padding: 6px 14px;
}
.tgl-hero__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.tgl-hero__image-link:hover .tgl-hero__image,
.tgl-hero__image-link:focus-visible .tgl-hero__image { transform: scale(1.02); }
.tgl-hero__image--placeholder {
    aspect-ratio: 16 / 10;
    background-image: url("/wp-content/themes/tgl-theme/assets/img/gradients/3-colour.png");
    background-size: cover;
    background-position: center;
}
.tgl-hero__body { display: flex; flex-direction: column; gap: 0.9rem; }
.tgl-hero__eyebrow {
    font-family: var(--tgl-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    margin: 0;
}
.tgl-hero__title {
    font-family: var(--tgl-font-display);
    /* Toned down upper bound on desktop — the byline card + dek make the
       full stack visually heavier, so we knock ~15% off the max size. */
    font-size: clamp(1.75rem, 2.8vw, 2.35rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    line-height: 1.05;
    margin: 0;
}
.tgl-hero__title a { color: inherit; }
.tgl-hero__title a:hover { color: var(--tgl-green-accent); }
.tgl-hero__excerpt {
    font-family: var(--tgl-font-serif);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.45;
    color: #122806;
    margin: 0;
}
/* Legacy .tgl-hero__meta + .tgl-hero__cta no longer emitted from hero.php.
   The byline card + .tgl-article__byline-meta (reused for centering + type)
   fully replaced them — see hero.php. */

@media (max-width: 760px) {
    .tgl-hero { margin-top: 0; padding: 0; }
    .tgl-hero__media {
        border-radius: 0;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
    }
    .tgl-hero__body { padding: 0 1.25rem; }
}

/* Section wrapper */
.tgl-section {
    max-width: 1040px;
    margin: 0 auto 3.5rem;
    padding: 0 1.5rem;
}
.tgl-section__head {
    max-width: 1040px;
    margin: 0 auto 1.75rem;
    /* Vertical gutter only — parents that host `.tgl-section__head`
       already provide their own horizontal padding. Adding one here
       makes the eyebrow read visually indented from sibling grids on
       archive pages (see /stories/, /impact-report/, event single).
       If a new page renders this component with NO padded parent, add
       side padding on that page's own wrapper, not here. */
    padding: 1rem 0 0;
    box-sizing: border-box;
    position: relative;
}
/* Brand HR — matches `.tgl-hr` (5px dark-green rule). Spans the
   section's full container width via ::before instead of adding a
   separate `<hr>` in every template. */
.tgl-section__head::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--tgl-green-dark, #122806);
    margin-bottom: 1rem;
}
.tgl-section__eyebrow {
    /* Matches `.tgl-aj-archive__section-eyebrow` — one uniform
       section-eyebrow scale across the site. */
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
}
/* On-dark modifier — flips the 5px rule + eyebrow text to white for
   use inside dark-green bands (e.g. Meet-the-Team green band). */
.tgl-section__head--on-dark::before { background: #ffffff; }
.tgl-section__head--on-dark .tgl-section__eyebrow { color: #ffffff; }
.tgl-section__title {
    font-family: var(--tgl-font-serif);
    font-size: 1.85rem;
    font-weight: 300;
    color: var(--tgl-green-dark);
    line-height: 1.2;
    margin: 0;
}
.tgl-section__empty { color: var(--tgl-green-dark, #122806); font-style: italic; padding: 1rem 0; }
.tgl-section__sub {
    color: var(--tgl-green-dark, #122806);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* Journey banner (homepage) */
/* ================================================================
   Homepage Issues / Action Journey hero widget
   ================================================================ */
.tgl-issues {
    /* Full-bleed but transparent — the body-level gradient shows
       through so this section reads as a "break" between the two
       dark-green magazine + guides bands above/below it. */
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 3rem 0 3.5rem;
    overflow: hidden;
}
.tgl-issues__inner {
    /* Match the other homepage sections (.tgl-hero, .tgl-section) so vertical edges line up */
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.tgl-issues__head { margin-bottom: 1.25rem; }.tgl-issues__subtitle {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    max-width: 30rem;
    margin: 0;
}
.tgl-issues__tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Dark hairline instead of white — matches the light bg. */
    border-bottom: 1px solid rgba(18, 40, 6, 0.25);
    margin: 1.75rem 0 1.5rem;
    padding-bottom: 0.5rem;
}
.tgl-issues__tab {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    transition: color 0.15s;
}
/* Both tabs default to dark-green. Hover only fires on the non-active
   tab (a real <a>) — shifts to Light Green as feedback. The active
   tab renders as a <span> without an href, so it stays put. */
.tgl-issues__tab { color: var(--tgl-green-dark, #122806); }
.tgl-issues__tab:not(.is-active):hover,
.tgl-issues__tab:not(.is-active):focus-visible { color: var(--tgl-green-light, #CFD877); }

.tgl-issues__hero {
    position: relative;
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    aspect-ratio: 16 / 7;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}
.tgl-issues__hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-issues__hero-img--placeholder {
    background: linear-gradient(135deg, #122806 0%, #122806 100%);
}
.tgl-issues__hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 40, 6, 0.55);
    pointer-events: none;
}
.tgl-issues__hero-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem 2rem;
    text-align: center;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    font-size: clamp(1.6rem, 4.2vw, 3.4rem);
    line-height: 1.05;
    text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

.tgl-issues__parts {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
    /* Dark hairline — was rgba white, invisible on the light body-gradient bg. */
    border-top: 3px solid rgba(18, 40, 6, 0.15);
}
.tgl-issues__part {
    flex: 1 1 0%;
    background: transparent;
    border: 0;
    border-top: 3px solid transparent;
    margin-top: -3px;
    padding: 1.1rem 0.5rem 0.5rem;
    text-align: left;
    cursor: pointer;
    /* Dim dark-green — replaces the old dim-white, readable on light. */
    color: var(--tgl-green-dark, #122806);
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.tgl-issues__part:hover {
    color: var(--tgl-green-dark, #122806);
}
.tgl-issues__part.is-active {
    color: var(--tgl-green-dark, #122806);
    border-top-color: var(--tgl-green-dark, #122806);
}
.tgl-issues__part-num {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.tgl-issues__part-label {
    /* Serif here on purpose — Crimson Pro at editorial size gives the
       stage names ("Explainer", "Feature", ...) the weight of a headline
       instead of a nav label. */
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.1;
    text-transform: none;
}

.tgl-issues__body { margin-top: 1.75rem; }
.tgl-issues__panel { display: none; }
.tgl-issues__panel.is-active { display: block; }
.tgl-issues__blurb {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 300;
    /* Dark green — the widget now sits on the light body-gradient. */
    color: var(--tgl-green-dark, #122806);
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 60rem;
    margin: 0 0 1.75rem;
}
/* Inline anchors inside the blurb — the sitewide `a:hover { underline }`
   rule handles hover, but the default rest state has no signal that
   the text is clickable. Add a persistent underline in the same dark
   green so the link reads as a link without a colour shift (no non-
   brand link colours allowed). Hover: flip to Light Green text so
   there's a clear feedback state. */
.tgl-issues__blurb a {
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
}
.tgl-issues__blurb a:hover,
.tgl-issues__blurb a:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
    outline: none;
}
.tgl-issues__cta {
    display: inline-block;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    /* Solid dark-green pill for contrast on the light body-gradient. */
    color: #ffffff;
    background: var(--tgl-green-dark, #122806);
    border: 2px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.tgl-issues__cta:hover {
    color: var(--tgl-green-light, #CFD877);
    /* Inverted hover — same shape, flipped colors. */
}

/* Desktop: hide the mobile accordion header (rendered in DOM for a11y
   + progressive enhancement, but only visible below 760px). */
.tgl-issues__acc-header { display: none; }

@media (max-width: 760px) {
    .tgl-issues { padding: 2rem 0 2.25rem; }
    .tgl-issues__inner { padding: 0 1.25rem; }
    .tgl-issues__hero { aspect-ratio: 4 / 3; }
    .tgl-issues__blurb { font-size: 1.05rem; }

    /* Mobile tab row (only kicks in when we are NOT in accordion mode —
       accordion mode hides the row entirely; other surfaces like the
       homepage Action Journey block keep the compact tab pattern). */
    .tgl-issues:not(.tgl-issues--accordion-mobile) .tgl-issues__parts {
        justify-content: space-between;
        gap: 0.5rem;
    }
    .tgl-issues:not(.tgl-issues--accordion-mobile) .tgl-issues__part {
        flex: 0 0 auto;
        padding: 0.9rem 0.25rem 0.4rem;
    }
    .tgl-issues:not(.tgl-issues--accordion-mobile) .tgl-issues__part-num { font-size: 0.65rem; }
    .tgl-issues:not(.tgl-issues--accordion-mobile) .tgl-issues__part-label { font-size: 1.35rem; }

    /* Hide the desktop tab row on mobile — accordion takes over.
       Scoped to `.tgl-issues--accordion-mobile` so widgets on other
       pages (like the homepage Action Journey block) keep their
       existing tab-only behaviour on mobile. */
    .tgl-issues--accordion-mobile .tgl-issues__parts { display: none; }

    /* Every panel becomes an accordion row; the header sits at the top
       and the panel-body toggles below it. */
    .tgl-issues--accordion-mobile .tgl-issues__body { margin-top: 1rem; }
    .tgl-issues--accordion-mobile .tgl-issues__panel,
    .tgl-issues--accordion-mobile .tgl-issues__panel.is-active {
        display: block;
        border-top: 2px solid var(--tgl-green-dark, #122806);
    }
    .tgl-issues--accordion-mobile .tgl-issues__panel:last-child { border-bottom: 2px solid var(--tgl-green-dark, #122806); }
    .tgl-issues--accordion-mobile .tgl-issues__panel[hidden] { display: block !important; } /* keep row visible even when tab-JS would hide it */

    .tgl-issues--accordion-mobile .tgl-issues__acc-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 1.1rem 0.25rem;
        background: transparent;
        border: 0;
        text-align: left;
        cursor: pointer;
        color: var(--tgl-green-dark, #122806);
        font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    }
    .tgl-issues__acc-num {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0;
        white-space: nowrap;
        opacity: 0.7;
    }
    .tgl-issues__acc-label {
        font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
        font-weight: 400;
        font-size: 1.4rem;
        line-height: 1.15;
        flex: 1 1 auto;
        text-transform: none;
    }
    .tgl-issues__acc-icon {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        position: relative;
        transition: transform 0.2s ease;
    }
    .tgl-issues__acc-icon::before,
    .tgl-issues__acc-icon::after {
        content: '';
        position: absolute;
        background: var(--tgl-green-dark, #122806);
        left: 50%;
        top: 50%;
    }
    .tgl-issues__acc-icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
    .tgl-issues__acc-icon::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); transition: transform 0.2s ease; }
    .tgl-issues__acc-header[aria-expanded="true"] .tgl-issues__acc-icon::after {
        transform: translate(-50%, -50%) scaleY(0);
    }

    .tgl-issues__panel-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .tgl-issues__acc-header[aria-expanded="true"] + .tgl-issues__panel-body {
        max-height: 1000px;
        padding-bottom: 0.75rem;
    }
}

/* ── Find a Story ─────────────────────────────────────────── */
.tgl-find-story {
    background: #EDC196;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 2.5rem 1.5rem 2rem;
    border-top: 2px solid var(--tgl-green-dark, #122806);
    border-bottom: 2px solid var(--tgl-green-dark, #122806);
}
.tgl-find-story__inner {
    max-width: 1040px;
    margin: 0 auto;
}
.tgl-find-story__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
}
.tgl-find-story__filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    align-items: center;
}
.tgl-find-story__select-wrap {
    position: relative;
    flex: 0 0 auto;
}
.tgl-find-story__select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--tgl-green-dark, #122806);
    background: transparent;
    border: 2px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    padding: 0.5rem 2rem 0.5rem 0.9rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-transform: uppercase;
}
.tgl-find-story__select:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}
.tgl-find-story__arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
}
.tgl-find-story__select:hover + .tgl-find-story__arrow {
    color: var(--tgl-green-light, #CFD877);
}

/* ── Recommended For You ──────────────────────────────────── */
.tgl-recommended {
    margin: 0 0 2rem;
}
/* Constrain the eyebrow header to the site grid so its 5px rule
   matches the width of the Latest Stories header exactly. Zero
   horizontal padding so `::before`'s underline hits the same left
   and right edges as the Latest Stories rule. */
.tgl-recommended > .tgl-section__head {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    /* Inherit the sitewide side gutter from base `.tgl-section__head`
       (1.5rem) — override only the top padding for this specific band. */
    padding-top: 1rem;
}
.tgl-recommended__band {
    background: var(--tgl-green-dark, #122806);
    padding: 1rem 1.5rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.tgl-recommended__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.tgl-recommended__slider-wrap {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.tgl-recommended__slider-wrap::-webkit-scrollbar { display: none; }
.tgl-recommended__slider {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tgl-recommended__card {
    flex: 0 0 300px;
    min-width: 0;
}
.tgl-recommended__card-link {
    display: block;
    text-decoration: none;
    color: var(--tgl-green-dark, #122806);
}
.tgl-recommended__card-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 24px;
    margin-bottom: 0.75rem;
}
.tgl-recommended__card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-recommended__card-placeholder {
    width: 100%;
    height: 100%;
    background: #e0e0e0;
}
.tgl-recommended__card-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}
/* Match .tgl-content-card__title responsive bumps so Recommended and
   Latest cards read identical on wider screens. */
@media (min-width: 720px) {
    .tgl-recommended__card-title { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
    .tgl-recommended__card-title { font-size: 1.2rem; line-height: 1.3; }
}
.tgl-recommended__card-link:hover .tgl-recommended__card-title {
    color: var(--tgl-green-dark, #122806);
    opacity: 0.7;
}
.tgl-recommended__card-excerpt {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.5rem;
}
.tgl-recommended__card-meta {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .tgl-find-story { padding: 2rem 1.25rem 1.75rem; }
    .tgl-find-story__filters { gap: 0.5rem; }
    .tgl-find-story__select { padding: 0.5rem 2rem 0.5rem 0.8rem; font-size: 0.8rem; }
    .tgl-recommended__card { flex: 0 0 260px; }
}

/* Archive / search pagination */
.tgl-archive-pagination {
    margin-top: 2.5rem;
    margin-bottom: 3.5rem;
    /* Center the inline `<a class="page-numbers">` links produced by
       paginate_links(type: plain) — they have no `.nav-links` wrapper
       so the flex rule below doesn't kick in. Text-align works on the
       inline anchors. */
    text-align: center;
}
.tgl-archive-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    font-family: var(--tgl-font-body);
    font-size: 0.9rem;
}
.tgl-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.65rem;
    border: 1px solid #d0d7de;
    border-radius: 24px;
    color: var(--tgl-green-dark);
    background: #fff;
    /* Force Franklin lining-nums so numbers render as clean glyphs.
       Crimson Pro's default old-style figures have ascenders/descenders
       and read as decorative script in a pill button. */
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.tgl-archive-pagination .page-numbers:hover {
    border-color: var(--tgl-green-accent);
    color: var(--tgl-green-accent);
    opacity: 1;
}
.tgl-archive-pagination .page-numbers.current {
    background: var(--tgl-green-dark);
    border-color: var(--tgl-green-dark);
    color: #fff;
}
.tgl-archive-pagination .page-numbers.dots { border: none; background: transparent; }

/* Stories grid (rows of 3) */
.tgl-stories-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem 1.5rem;
}
@media (min-width: 720px)  { .tgl-stories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tgl-stories-grid { grid-template-columns: repeat(3, 1fr); gap: 2.25rem 1.75rem; } }

/* 2x2 variant — used in the related-stories block on single articles. */
@media (min-width: 1000px) {
    .tgl-stories-grid--2x2 { grid-template-columns: repeat(2, 1fr); }
}

/* Related-stories section sits between the article body and comments.
   The section itself carries the divider — drop the duplicate one on the
   nested header so we don't render two horizontal rules in a row. */
.tgl-section--related {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
}
.tgl-section--related .tgl-section__head {
    border-top: 0;
    padding-top: 0;
}

.tgl-story-card { display: flex; }
.tgl-story-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease;
}
.tgl-story-card__link:hover { transform: translateY(-2px); }
.tgl-story-card__link:hover .tgl-story-card__title { color: var(--tgl-green-accent); }
.tgl-story-card__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 24px;
    background-color: #e8f5e9;
    background-size: cover;
    background-position: center;
    margin-bottom: 0.85rem;
}
/* Story cards without a featured image: cycle through the 6 brand gradients
   by post ID, so each placeholder feels intentional and varied. */
.tgl-story-card[data-grad="0"] .tgl-story-card__thumb { background-image: url("assets/img/gradients/3-colour.png"); }
.tgl-story-card[data-grad="1"] .tgl-story-card__thumb { background-image: url("assets/img/gradients/blue-violet.png"); }
.tgl-story-card[data-grad="2"] .tgl-story-card__thumb { background-image: url("assets/img/gradients/green-blue.png"); }
.tgl-story-card[data-grad="3"] .tgl-story-card__thumb { background-image: url("assets/img/gradients/orange-pink.png"); }
.tgl-story-card[data-grad="4"] .tgl-story-card__thumb { background-image: url("assets/img/gradients/pink-green.png"); }
.tgl-story-card[data-grad="5"] .tgl-story-card__thumb { background-image: url("assets/img/gradients/violet-orange.png"); }
.tgl-story-card__thumb img,
.tgl-story-card__thumb--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-story-card__body { display: flex; flex-direction: column; gap: 0.4rem; }
.tgl-story-card__cat {
    font-family: var(--tgl-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--tgl-green-accent, #122806);
    text-transform: uppercase;
}
/* Card titles use Libre Franklin Bold (not Crimson Pro Light) — louder, more
   immediate, designed for thumb-scrolling readers on mobile. */
.tgl-story-card__title {
    font-family: var(--tgl-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tgl-green-dark);
    line-height: 1.15;
    margin: 0;
    transition: color 0.15s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: uppercase;
}
@media (min-width: 720px) {
    .tgl-story-card__title { font-size: 1.35rem; }
}
.tgl-story-card__meta {
    font-family: var(--tgl-font-body);
    font-size: 0.78rem;
    color: var(--tgl-green-dark, #122806);
}

/* === Single Article ===
   Same outer container as the homepage (1200px / 1.5rem padding). All inner
   elements run the full container width — no centered prose column — so the
   article body lines up edge-to-edge with the homepage and other pages. */
.tgl-article {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}
.tgl-article__featured {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border-radius: 24px;
}

/* Article header: kicker → H1 → standfirst → byline+date+reading time. */
.tgl-article__head {
    max-width: 760px;
    margin: 0 auto 1.75rem;
    text-align: center;
}
.tgl-article__kicker {
    display: inline-block;
    font-family: var(--tgl-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent);
    text-decoration: none;
    margin-bottom: 0.85rem;
}
.tgl-article__kicker:hover { color: var(--tgl-green-dark); }

/* Fact-Check Yourself sources block — TGL's transparency feature.
   Injected door de migration `FactCheckWrapper` transformer én
   herbruikbaar als Gutenberg block-pattern voor nieuwe posts.
   Layout (mirroring the legacy design): big display H2 als section
   title, korte intro paragraph, dan een 3-kolommen grid van source
   cards. Elke card = source-name (Open Sans uppercase eyebrow, met
   1px dark-green horizontale rule eronder) + linked title (Libre
   Franklin bold uppercase, groot). */
.tgl-article__sources {
    color: var(--tgl-green-dark, #122806);
    margin: 4rem 0 3rem;
    padding: 4rem 0 0;
    border-top: 5px solid var(--tgl-green-dark, #122806);
    background: transparent;
    border-radius: 0;
}
/* Big centered display heading — mirrors legacy V1 which showed
   "FACT-CHECK YOURSELF" as the giant centered title above the
   sources grid. */
.tgl-article__sources h2 {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-size: 43px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    color: var(--tgl-green-dark, #122806) !important;
    text-align: center !important;
    margin: 0 0 2.5rem !important;
}
/* Sub-heading — kleiner, links-uitgelijnd, boven de grid.
   Mirrors legacy V1's "SOURCES AND FURTHER READING" label. */
.tgl-article__sources-subheading,
.tgl-article__sources h3.tgl-article__sources-subheading {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-size: 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    color: var(--tgl-green-dark, #122806) !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 22ch;
}
.tgl-article__sources-subheading + p,
.tgl-article__sources-subheading + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.tgl-article__sources > p {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 24px;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 2rem;
    max-width: 28ch;
}
/* Winnen van de latere `.tgl-article__content p { Open Sans }` regel
   die op specificiteit gelijk staat maar in cascade later komt. Twee
   klassen op de p verhogen de specificiteit boven die basis-p. */
.tgl-article__content .tgl-article__sources p.tgl-article__sources-tagline,
.tgl-article__sources > p.tgl-article__sources-tagline {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 24px;
    line-height: 1.15;
    color: var(--tgl-green-dark, #122806);
}
/* Beat the .tgl-article__sources-subheading + * { margin-top: 0 !important }
   rule above so the tagline sits a comfortable distance under the heading
   instead of hugging it. */
.tgl-article__sources-subheading + p.tgl-article__sources-tagline {
    margin-top: 0.6rem !important;
}
.tgl-article__sources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 2.5rem;
}
@media (max-width: 900px) {
    .tgl-article__sources-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .tgl-article__sources-grid { grid-template-columns: 1fr; }
}
.tgl-article__source {
    /* Individuele source card. Bevat één H4 (source name eyebrow) +
       één H3 (linked title). Horizontale 1px dark-green rule onder
       de eyebrow, mirroring de legacy design. */
}
.tgl-article__source h4 {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--tgl-green-dark, #122806);
}
.tgl-article__source h3 {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
}
/* Kill the stray <br> tags migrated inside <h3><a><br>…</a><br></h3> —
   they added a full line of blank height above every source title. */
.tgl-article__source h3 br { display: none; }
.tgl-article__source h3 a {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-weight: 700 !important;
    text-decoration: none;
}
.tgl-article__source h3 a:hover,
.tgl-article__source h3 a:focus-visible {
    color: #CFD877;
    text-decoration: none;
    outline: none;
}

.tgl-article__title {
    font-family: var(--tgl-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    line-height: 1.05;
    margin: 0 0 1rem;
}
/* Standfirst — big serif intro above the byline. Powers meta desc,
   OG tags, JSON-LD, cards + archives, and app API responses too. */
.tgl-article__standfirst {
    display: none;
}

/* First-paragraph-as-standfirst rule removed — de dek staat nu weer
   los boven de author byline via `.tgl-article__standfirst` (zie
   single-post-layout.php). De eerste body-paragraaf rendert als
   gewone paragraaf. TGL_First_Para_Excerpt vult post_excerpt nog
   steeds op voor posts zonder recovered dek — die value verschijnt
   in de standfirst-render en op cards/hero/OG. */
.tgl-article__byline {
    font-family: var(--tgl-font-serif);
    font-size: 1.15rem;
    font-weight: 300;
    color: #122806;
    margin: 0.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.4;
}
@media (min-width: 720px) {
    .tgl-article__byline { font-size: 1.3rem; gap: 0.6rem; }
}
.tgl-article__byline-author { font-weight: 700; color: var(--tgl-green-dark); }
.tgl-article__byline-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tgl-article__byline-link:hover {
    color: var(--tgl-green-accent);
    border-bottom-color: currentColor;
    opacity: 1;
}
.tgl-article__byline-date,
.tgl-article__byline-reading { color: var(--tgl-green-dark, #122806); }
.tgl-article__byline-avatar {
    display: inline-flex;
    align-items: center;
    margin-right: 0.1rem;
    line-height: 0;
}
.tgl-article__byline-avatar img,
.tgl-article__byline-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1;
}
/* Defensive: nothing should be able to hide the byline. */
.tgl-article__byline,
.tgl-article__byline > span {
    visibility: visible !important;
    opacity: 1 !important;
}
/* Article-header meta line (date · reading-time) sits beneath the byline strip */
/* Shared meta-text component — byline / card / video small print.
   Layout (margin, flex) stays on the individual per-page classes;
   only typography lives here so we have one place to tune it. */
.tgl-article__byline-meta,
.tgl-content-card__meta,
.tgl-video-card__meta {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
}

.tgl-article__byline-meta {
    margin: .55rem 0 1rem;
    text-align: center;
}

/* Format modifiers — all formats (story / tool / guide / video) share
   the centered header layout. Tools kept their breadcrumb, but the
   header alignment is centered so the title matches the rest of the
   site. Breadcrumb keeps its own left-align rule below. */

/* Breadcrumb — "← Back to Tools" (tools, guides, videos) */
.tgl-article__breadcrumb {
    margin-bottom: 1rem;
    text-align: left;
}
.tgl-article__breadcrumb a {
    color: var(--tgl-green-accent);
    text-decoration: none;
    font-family: var(--tgl-font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: color 0.15s;
}
.tgl-article__breadcrumb a:hover { color: var(--tgl-green-dark); }

/* Media badge — category label on featured image / video embed (like hero badge) */
.tgl-article__figure,
.tgl-article__embed {
    position: relative;
}
.tgl-article__media-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    border-radius: 24px;
    z-index: 1;
}

/* YouTube Short — full-width hero at top of video pages */
.tgl-article__short {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 0;
    margin-bottom: 0;
    background: #000;
    display: flex;
    justify-content: center;
}
.tgl-article__short iframe {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 9 / 16;
    border: 0;
    display: block;
}
@media (max-width: 760px) {
    .tgl-article__short iframe {
        max-width: 100%;
    }
}

/* Video embed (replaces featured image for video format) */
.tgl-article__embed {
    margin: 1.5rem 0 2rem;
}
.tgl-article__embed iframe {
    width: 100%;
    height: auto;      /* Release WP's oEmbed height attribute so
                          aspect-ratio can compute the real shape. */
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    border: 0;
    display: block;
}
.tgl-article__embed-fallback {
    margin: 1.5rem 0 2rem;
}

/* Byline extras: category pill + duration (videos) */
.tgl-article__byline-pill {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 2px 8px;
    border-radius: 24px;
}
.tgl-article__byline-duration {
    color: var(--tgl-green-dark, #122806);
}

.tgl-article__figure {
    margin: 1.5rem 0 1.75rem;
}
.tgl-article__featured {
    width: 100%;
    margin: 0;
    display: block;
}
/* Mobile: featured image breaks out to true edge-to-edge. Both <main>
   and .tgl-article carry 1.5rem side padding, so a fixed counter-margin
   never fully escapes. `width: 100vw; margin-left: calc(50% - 50vw)`
   pulls the figure to the viewport edges regardless of nesting depth. */
@media (max-width: 760px) {
    .tgl-article__figure {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0;
    }
    .tgl-article__figure .tgl-article__featured {
        border-radius: 0;
        display: block;
        width: 100vw;
        max-width: none;
    }
    .tgl-article__caption {
        padding: 0 1.5rem;
    }
}
.tgl-article__caption {
    font-family: var(--tgl-font-body);
    font-size: 0.85rem;
    font-style: normal;
    color: var(--tgl-green-dark, #122806);
    text-align: left;
    margin-top: 0.5rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tgl-article__caption-text,
.tgl-article__caption-credit {
    display: block;
    letter-spacing: 0;
}
.tgl-article__caption-credit { opacity: 0.85; }
@media (min-width: 720px) {
    .tgl-article__caption { font-size: 0.9rem; }
}

.tgl-article__actions {
    max-width: 700px;
    margin: 1rem auto 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Bottom variant — Save + Share aligned to the right at the end of the
   article prose (below `.tgl-article__content`). Same reading-column
   width as the body so it never breaks out visually. */
.tgl-article__actions--bottom {
    justify-content: flex-end;
    margin: 2rem auto 1.5rem;
    padding-top: 1.25rem;
}

/* Topic chips — one row of follow-toggle pills right after the body
   prose, before the Save/Gift/Share bar. Same JS contract as the
   content-card badges (data-tgl-follow-topic="tax:id"), so
   tgl-follow-topic.js handles state without extra wiring here. */
.tgl-article__topics {
    max-width: 700px;
    margin: 2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding-top: 1.25rem;
}
.tgl-article__topics-label {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin-right: 0.35rem;
}
.tgl-topic-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-transform: uppercase;
    text-decoration: none;
}
.tgl-topic-chip:hover,
.tgl-topic-chip:focus-visible {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    outline: none;
    text-decoration: none;
}
.tgl-topic-chip:focus-visible {
    box-shadow: 0 0 0 3px rgba(207, 216, 119, 0.55);
}
.tgl-topic-chip[data-tgl-follow-state="following"] {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
.tgl-topic-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.9em;
    line-height: 1;
}
.tgl-topic-chip__plus,
.tgl-topic-chip__check { display: none; }
.tgl-topic-chip[data-tgl-follow-state="not"] .tgl-topic-chip__plus { display: inline; }
.tgl-topic-chip[data-tgl-follow-state="following"] .tgl-topic-chip__check { display: inline; }
/* When the row lives inside .tgl-article__actions--bottom cascade, its
   own top border would double up with the actions bar's. That row
   already sits BELOW us, so we own the divider. No double border. */
.tgl-article__topics + .tgl-article__actions--bottom {
    border-top: 0;
    padding-top: 0.5rem;
    margin-top: 1.5rem;
}
/* Top variant kept for members-only Gift button — same left-align as
   before, no border. */
.tgl-article__actions--top { margin-bottom: 1.5rem; }
/* On mobile the sticky FAB carries the same actions, so hide this row to
   avoid duplication. Desktop (≥900px) keeps it because the FAB is hidden.
   Exception: `.tgl-issue__actions` (Action Journey bottom bar) has no FAB
   counterpart — keep it visible at every viewport width. */
@media (max-width: 899px) {
    .tgl-article__actions:not(.tgl-issue__actions) { display: none; }
}

/* === Reading progress bar (sticky top hairline on article pages) === */
.tgl-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 999;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.35);
}
.tgl-reading-progress__bar {
    height: 100%;
    width: 100%;
    background: var(--tgl-green-light, #CFD877);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.05s linear;
    will-change: transform;
}

/* === Mobile sticky share/save FAB === */
.tgl-article__fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}
.tgl-article__fab.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.tgl-article__fab[hidden] { display: none !important; }
.tgl-article__fab-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(13, 59, 30, 0.18);
    color: var(--tgl-green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(13, 59, 30, 0.18);
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
}
.tgl-article__fab-btn:hover { background: var(--tgl-cream, #f5f1eb); }
.tgl-article__fab-btn:active { transform: translateY(1px); }
.tgl-article__fab-btn.tgl-bookmark--saved {
    background: var(--tgl-green-dark);
    color: #fff;
    border-color: var(--tgl-green-dark);
}
/* Hide the FAB on desktop — actions row above the article body is enough. */
@media (min-width: 900px) {
    .tgl-article__fab { display: none !important; }
}

/* === Author card (after first paragraph) ===
   Compact one-row layout: round avatar on the left, name + role + bio on
   the right. Hairlines top + bottom set it apart from prose without making
   it a heavy card. No chevron toggle — bio is always visible. */
.tgl-author-card {
    margin: 1.5em auto;
    max-width: 700px;
    padding: 1rem 0;
    background: transparent;
    border-top: 1px solid rgba(13, 59, 30, 0.18);
    border-bottom: 1px solid rgba(13, 59, 30, 0.18);
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* Bio is a <p> — kill the inherited prose margins so the card stays compact. */
.tgl-article__content .tgl-author-card .tgl-author-card__bio,
.tgl-author-card .tgl-author-card__bio { margin: 0.25rem 0 0 !important; }
.tgl-author-card__avatar {
    flex: 0 0 auto;
    line-height: 0;
}
/* Higher specificity than the .tgl-article__content img rule above so the
   avatar stays a perfect circle, not a rounded full-width image. */
.tgl-article__content .tgl-author-card__img,
.tgl-article__content .tgl-author-card__avatar img,
.tgl-author-card__img,
.tgl-author-card__avatar img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
    margin: 0;
    aspect-ratio: 1 / 1;
    filter: grayscale(0.15);
}
.tgl-author-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.tgl-author-card__name,
.tgl-article__content .tgl-author-card__name {
    font-family: var(--tgl-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #122806;
    text-decoration: none !important;
    line-height: 1.2;
    background: transparent;
}
.tgl-author-card__name:hover,
.tgl-article__content .tgl-author-card__name:hover {
    color: var(--tgl-green-dark);
    opacity: 1;
    text-decoration: none !important;
}
.tgl-author-card__role {
    font-family: var(--tgl-font-display);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tgl-green-accent);
}
.tgl-author-card__bio {
    font-family: var(--tgl-font-body);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    margin: 0.25rem 0 0;
}

/* === Article body prose ===
   Brand-aligned typography for the long-form reader. Crimson Pro Light for
   sub-headings, Open Sans body, generous line-height, comfortable spacing.
   Prose is capped at ~700px for readable line-length; images, embeds and
   blocks tagged .alignwide / .alignfull are allowed to break out wider. */
.tgl-article__content {
    font-family: var(--tgl-font-body);
    font-size: 1.125rem;
    line-height: 1.75;
    color: #122806;
}
/* Cap prose elements at 700px and center inside the wider .tgl-article. */
.tgl-article__content > p,
.tgl-article__content > h2,
.tgl-article__content > h3,
.tgl-article__content > h4,
.tgl-article__content > h5,
.tgl-article__content > h6,
.tgl-article__content > ul,
.tgl-article__content > ol,
.tgl-article__content > blockquote,
.tgl-article__content > pre,
.tgl-article__content > table,
.tgl-article__content > .wp-block-buttons,
.tgl-article__content > .wp-block-quote,
.tgl-article__content > .wp-block-list,
.tgl-article__content > .tgl-poll,
.tgl-article__content > .tgl-author-card,
.tgl-article__content > .wp-block-group.tgl-accordion,
.tgl-article__content > .wp-block-details,
.tgl-article__content .tgl-accordion {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Native wp:details block inside article content — brand it with the
   same +/- toggle + hairline treatment as `.tgl-accordion` items, so
   editors can drop a raw Details block without needing to know about
   wrapper classes. */
.tgl-article__content > .wp-block-details {
    border-top: 1px solid var(--tgl-green-dark, #122806);
    border-bottom: 1px solid var(--tgl-green-dark, #122806);
    padding: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.tgl-article__content > .wp-block-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    user-select: none;
}
.tgl-article__content > .wp-block-details > summary::-webkit-details-marker { display: none; }
.tgl-article__content > .wp-block-details > summary::marker { content: ''; }
.tgl-article__content > .wp-block-details > summary::after {
    content: "+";
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    margin-left: auto;
    color: inherit;
    opacity: 0.9;
    transition: transform 0.15s ease;
}
.tgl-article__content > .wp-block-details[open] > summary::after { content: "−"; }
.tgl-article__content > .wp-block-details > :not(summary) {
    padding-left: 0;
    padding-right: 0;
}
.tgl-article__content > .wp-block-details[open] {
    padding-bottom: 1rem;
}
/* Pullquote krijgt EIGEN breedte — visueel breder dan de 700px prose-
   column zodat 't uit de body-fluin komt (Franklin uppercase reads
   groter dan body-Crimson). ~900px op desktop, full-width op mobile. */
.tgl-article__content > .wp-block-pullquote {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Media and explicitly wide blocks span the full container width. */
.tgl-article__content > img,
.tgl-article__content > video,
.tgl-article__content > iframe,
.tgl-article__content > figure,
.tgl-article__content > .wp-block-image,
.tgl-article__content > .wp-block-embed,
.tgl-article__content > .wp-block-video,
.tgl-article__content > .wp-block-gallery,
.tgl-article__content > .alignwide,
.tgl-article__content > .alignfull {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Author card already has its own max-width inside the 700px column. */
.tgl-article__content > .tgl-author-card { max-width: 700px; }

/* Paragraph and inline.
   Bottom margin only — using shorthand `margin: 0 0 1.4em` would clobber
   the `margin-left/right: auto` that centers the 700px prose column. */
/* Editorial paragraph — shared spec for every regular content wrapper
   on the site (article bodies, event descriptions, custom pages).
   Open Sans body copy at 18px / 1.675 line-height, generous bottom
   margin so text blocks breathe. Only targets `<p>` so headings,
   lists, quotes, and other block types keep their own spec. */
/* --- Image → paragraph spacing rule -----------------------------------
   A caption-less `.wp-block-image` sits flush against its own edge, so the
   next paragraph glues to the bottom of the image. When a caption is
   present, the caption provides visual separation. This rule adds a
   consistent gap after ANY image (with or without caption), and neutralises
   the top margin of the immediately-following paragraph so we don't double
   the gap when the caption already added its own.
*/
.tgl-article__content .wp-block-image,
.tgl-event-single__description .wp-block-image,
.tgl-page__content .wp-block-image,
.tgl-article__content figure.wp-block-image,
.tgl-event-single__description figure.wp-block-image,
.tgl-page__content figure.wp-block-image {
    /* Shrink the figure to the image's actual rendered width so the
       figcaption sits directly under the image edges instead of stretching
       across the whole reading column. Portrait images capped by
       max-height end up narrower than the column — with fit-content the
       figcaption follows their width automatically. Landscape images that
       already fill the column render unchanged.
       margin-inline: auto keeps the figure centered in the column; the
       caption inside stays left-aligned so multi-line captions start at
       the image's left edge. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 2rem;
}
.tgl-article__content figure.wp-block-image figcaption,
.tgl-event-single__description figure.wp-block-image figcaption,
.tgl-page__content figure.wp-block-image figcaption {
    text-align: left;
}
.tgl-article__content .wp-block-image figcaption,
.tgl-event-single__description .wp-block-image figcaption,
.tgl-page__content .wp-block-image figcaption {
    margin: 0.5rem 0 0;
    font-style: normal;
}

.tgl-article__content p,
.tgl-event-single__description p,
.tgl-page__content p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.675em;
    margin-top: 0;
    margin-bottom: 2.5rem;
}
.tgl-article__content strong { font-weight: 700; color: #122806; }
.tgl-article__content em     { font-style: italic; }
.tgl-article__content small  { font-size: 0.85em; color: var(--tgl-green-dark, #122806); }

/* Sub-headings — per the July 2021 brand guideline:
   H1 → Libre Franklin Bold (ALL CAPS), set on the article H1 itself.
   H2 → Crimson Pro Light (sub-headlines), regular case.
   H3/H4 → Crimson Pro lighter weights for visual hierarchy below H2. */
.tgl-article__content h2,
.tgl-article__content h3,
.tgl-article__content h4 {
    font-family: var(--tgl-font-serif);
    color: var(--tgl-green-dark, #122806);
    line-height: 1.25;
}
/* Direct-child selector so this article-body h2 treatment doesn't
   cascade into nested components that ship their own h2 (fact-check
   block, callout cards, etc.). Accordion (wp:details) IS body content
   so its h2s opt in explicitly — otherwise they fall back to serif and
   look visually detached from the rest of the article. */
.tgl-article__content > h2,
.tgl-article__content > .wp-block-details > h2 {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.2;
    color: var(--tgl-green-dark, #122806);
    padding-bottom: 5px;
    border-bottom: 1px solid #122806;
    margin-top: 1em;
    margin-bottom: 0.4em;
}
.tgl-article__content h3 {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 18px;
    font-weight: 700;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}
.tgl-article__content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.4em;
    margin-bottom: 0.4em;
}
/* Body-content H1 — same display treatment as the AJ part-title so an
   editor's Gutenberg H1 in a story/guide/tool renders as a big centered
   Libre Franklin uppercase label instead of a generic browser default.
   Matches `.tgl-issue__part-title` (Libre Franklin 700, uppercase,
   clamped 1.5–2.2rem, dark-green, centered). */
.tgl-article__content h1.wp-block-heading {
    margin: 1.4em auto 0.6em;
    padding: 0;
    max-width: 700px;
    color: var(--tgl-green-dark, #122806);
    text-align: center;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    line-height: 1.2;
    box-shadow: none;
    background: none;
}
.tgl-article__content h2 + p,
.tgl-article__content h3 + p,
.tgl-article__content h4 + p { margin-top: 0; }

/* Lists — indented properly so bullets sit inside the content column */
.tgl-article__content ul,
.tgl-article__content ol {
    margin-top: 0;
    margin-bottom: 1.4em;
    padding-left: 1.6rem;
}
.tgl-article__content ul { list-style: disc outside; }
.tgl-article__content ol { list-style: decimal outside; }
.tgl-article__content li {
    margin: 0 0 0.15em;
    padding-left: 0.25rem;
}
.tgl-article__content li::marker {
    color: var(--tgl-green-accent, #122806);
}
.tgl-article__content ul ul,
.tgl-article__content ul ol,
.tgl-article__content ol ul,
.tgl-article__content ol ol { margin: 0.4em 0 0.4em; }

/* Links — green underline that grows on hover */
.tgl-article__content a {
    color: var(--tgl-green-dark, #122806);
    text-decoration: underline;
    text-decoration-color: var(--tgl-green-dark, #122806);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.tgl-article__content a:hover {
    color: #CFD877;
    text-decoration-color: #CFD877;
    opacity: 1;
}

/* Blockquote — left rule + serif italic */
.tgl-article__content blockquote {
    margin: 2em 0;
    padding: 0.4em 0 0.4em 1.5rem;
    border-left: 3px solid var(--tgl-green-accent, #122806);
    font-family: var(--tgl-font-serif);
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: #122806;
}
.tgl-article__content blockquote p { margin: 0 0 0.6em; }
.tgl-article__content blockquote cite,
.tgl-article__content blockquote footer {
    display: block;
    font-style: normal;
    font-size: 0.85rem;
    font-family: var(--tgl-font-body);
    color: var(--tgl-green-dark, #122806);
    margin-top: 0.4em;
}
.tgl-article__content blockquote cite::before,
.tgl-article__content blockquote footer::before { content: "— "; }

/* Pull-quote (blockquote.tgl-pullquote in Block editor). Core's
   block-library stylesheet forces `text-align:center` on
   `.wp-block-pullquote` — override to inherit article's left align. */
.tgl-article__content blockquote.tgl-pullquote,
.tgl-article__content .wp-block-pullquote {
    border-left: 0;
    border-top: 2px solid var(--tgl-green-dark, #122806);
    border-bottom: 2px solid var(--tgl-green-dark, #122806);
    padding: 1.25rem 0;
    font-size: 1.55rem;
    margin: 2.5em 0;
    text-align: left;
}

/* Inline code + pre */
.tgl-article__content code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: #f3f4f3;
    padding: 0.15em 0.4em;
    border-radius: 24px;
    color: #122806;
}
.tgl-article__content pre {
    background: #122806;
    color: #e8efe1;
    padding: 1.1rem 1.25rem;
    border-radius: 24px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 1.6em 0;
}
.tgl-article__content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Horizontal rule — small green dot row, brand-aligned */
.tgl-article__content hr {
    border: 0;
    height: 1px;
    background: #ececec;
    margin: 2.5em auto;
    width: 100%;
    max-width: 320px;
    position: relative;
}

/* Media */
.tgl-article__content img,
.tgl-article__content video,
.tgl-article__content figure {
    max-width: 100%;
    height: auto;
}
/* iframes + wp:embed wrappers cap width, but never force height:auto —
   third-party embeds (Instagram, TikTok, Ad Auris, Facebook, Flourish)
   resize their own iframes at runtime via postMessage; forcing
   height:auto here collapses the iframe as soon as the embed script
   sets a pixel height. */
.tgl-article__content iframe,
.tgl-article__content .wp-block-embed {
    max-width: 100%;
}
/* Slideshow — a wp:gallery marked with `.tgl-slideshow` renders as
   a one-slide-at-a-time carousel: only the active figure shows, prev/
   next arrows overlay the left/right edges, and dot pips sit under
   the frame. `tgl-slideshow.js` handles the state (active class, auto-
   advance, keyboard, swipe). No-JS fallback: without the `is-ready`
   flag every slide is visible — reader sees a vertical grid. */
.tgl-slideshow.wp-block-gallery {
    position: relative;
    display: block;
    margin: 2rem 0;
    border-radius: 24px;
    overflow: hidden;
}
.tgl-slideshow.wp-block-gallery.is-ready .wp-block-image {
    display: none;
    margin: 0;
    width: 100%;
}
.tgl-slideshow.wp-block-gallery.is-ready .wp-block-image.is-active {
    display: block;
}
.tgl-slideshow.wp-block-gallery.is-ready .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}
.tgl-slideshow__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 40, 6, 0.75);
    color: #ffffff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: background-color 0.15s ease;
}
.tgl-slideshow__nav:hover { background: rgba(18, 40, 6, 0.95); }
.tgl-slideshow__nav--prev { left: 12px; }
.tgl-slideshow__nav--next { right: 12px; }
.tgl-slideshow__dots {
    position: absolute;
    left: 0; right: 0; bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}
.tgl-slideshow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.tgl-slideshow__dot.is-active { background: #ffffff; }

/* Center every social/script-hydrated embed inside the prose column.
   Instagram/TikTok/Facebook cap their own width via inline styles
   (~540px) — without this rule they hug the left edge. */
.tgl-article__content .instagram-media,
.tgl-article__content .tiktok-embed,
.tgl-article__content .twitter-tweet,
.tgl-article__content .fb-post {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}
.tgl-article__content img,
.tgl-article__content video {
    display: block;
    width: 100%;
    border-radius: 24px;
    margin: 1.5em 0;
}
/* Cap portrait / tall images inside the prose column so they don't
   dwarf surrounding text. Scoped to `wp:image` block figures so it
   doesn't leak into embedded cards (event cards, video thumbnails,
   author avatars) that live inside .tgl-article__content but need
   their own aspect handling. */
.tgl-article__content .wp-block-image img {
    max-height: 800px;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
.tgl-article__content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 24px;
    margin: 1.5em 0;
}
/* Social embeds (Instagram, TikTok, Facebook) ship their own iframe
   with a fixed portrait size (~540px). Opt them out of the 16:9 rule
   above so they don't stretch to full-viewport-width. */
.tgl-article__content iframe.instagram-media,
.tgl-article__content iframe[src*="instagram.com"],
.tgl-article__content iframe[src*="tiktok.com"],
.tgl-article__content iframe[src*="facebook.com/plugins"],
.tgl-issue__body iframe.instagram-media,
.tgl-issue__body iframe[src*="instagram.com"],
.tgl-issue__body iframe[src*="tiktok.com"],
.tgl-issue__body iframe[src*="facebook.com/plugins"] {
    width: 100% !important;
    max-width: 540px;
    aspect-ratio: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: 0;
}
/* YouTube Shorts / vertical embeds: 9:16 portrait, gecentreerd en
   afgetopt zodat ze niet horizontaal uitgerekt in een 16:9-box zitten.
   Detectie via `/shorts/` in de iframe URL — YouTube's eigen conventie. */
.tgl-article__content iframe[src*="/shorts/"],
.tgl-issue__body iframe[src*="/shorts/"] {
    aspect-ratio: 9 / 16;
    max-width: 380px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Universal wp:embed wrapper — the .wp-block-embed__wrapper has no
   intrinsic dimensions, so its iframe collapses to 0×0 unless the
   caller styles it. Force full-width + 16:9 so YouTube / Vimeo /
   Twitter embeds render properly in every content surface (stories,
   guides, tools, events, action journeys, the letter-from-editor
   card, custom pages) without each template repeating the same fix. */
.wp-block-embed .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 24px;
    overflow: hidden;
    margin: 1.5em 0;
}
.wp-block-embed .wp-block-embed__wrapper > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Vertical / Shorts variant — 9:16 portrait, capped so it doesn't
   dominate a column. WordPress adds `wp-embed-aspect-9-16` when the
   block's aspect metadata says vertical. */
.wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper {
    aspect-ratio: 9 / 16;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons inside article prose center-align by default. Editors can
   still override per-block via the alignment control (left/right),
   which sets `is-content-justification-left/right` and outranks this
   default because the class lives on the block itself. Also covers
   Action Journey bodies + the reveal-strip prose column. */
.tgl-article__content .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right):not(.is-content-justification-space-between),
.tgl-issue__body .wp-block-buttons:not(.is-content-justification-left):not(.is-content-justification-right):not(.is-content-justification-space-between) {
    justify-content: center;
}

/* Action Journey body — dezelfde media-styling als single-post artikelen
   zodat foto's + embeds er hetzelfde uitzien (afgeronde hoeken 24px, geen
   width-blowout). Zonder dit rendert de long-form AJ body de raw <img>
   tags zonder radius, wat visueel afwijkt van reguliere stories. */
.tgl-issue__body img,
.tgl-issue__body video {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 24px;
    margin: 1.5em auto;
}
.tgl-issue__body figure { margin: 1.5em 0; }
.tgl-issue__body figure img { margin: 0; }
.tgl-issue__body iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 24px;
    margin: 1.5em 0;
    display: block;
}
.tgl-article__content figure { margin: 1.5em 0; }
.tgl-article__content figure img { margin: 0; }
.tgl-article__content figcaption {
    margin-top: 0.6em;
    font-family: var(--tgl-font-body);
    font-size: 0.85rem;
    line-height: 1.3;
    /* Brand dark-green — no grey per palette rule. */
    color: var(--tgl-green-dark, #122806);
    text-align: left;
}
/* Portrait-orientation image cap — legacy body bevat vaak headshots
   (bv. 788×1400). Op article-full-width worden die 1800px hoog en
   dominant de viewport. Cap portret-foto's op een leesbare breedte
   (max 480px), gecentreerd binnen de content-column. Landscape en
   square images blijven ongewijzigd (full width). */
.tgl-article__content img.tgl-article__img--portrait,
.tgl-article__content figure img.tgl-article__img--portrait {
    display: block;
    max-width: 480px;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Consent-gated 3rd-party embeds (Instagram etc.). The migration
   transformer replaces legacy tracking-blockquote embeds with a
   placeholder that only loads the platform's script AFTER the user
   grants `marketing` consent — see tgl-embeds.js + tgl-consent flow. */
.tgl-article__content .tgl-embed {
    margin: 1.5em 0;
    padding: 1.25rem 1.5rem;
    background: var(--tgl-green-light, #CFD877);
    border-radius: 24px;
    text-align: center;
}
.tgl-article__content .tgl-embed .tgl-embed__consent {
    max-width: 460px;
    /* margin-bottom 0 zodat er geen extra ruimte tussen de laatste
       inner-child en de container-padding-bottom komt. */
    margin: 0 auto;
}
/* Alle laatste inner-elements van .tgl-embed__consent hebben
   margin-bottom: 0, zodat de container-padding-bottom de enige
   afstand naar beneden bepaalt. */
.tgl-article__content .tgl-embed .tgl-embed__consent > :last-child {
    margin-bottom: 0 !important;
}
.tgl-article__content .tgl-embed .tgl-embed__notice {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.9rem;
    line-height: 1.45;
    /* Overrule de article-content `<p>` default margin die voor
       leesbare kolommen bedoeld is — binnen deze compacte card is
       een strakke 0.75rem gap onder de tekst genoeg. `!important`
       omdat `.tgl-article__content p` de baseline zet die per
       selector-specificiteit anders wint. */
    margin: 0 0 0.75rem !important;
}
.tgl-article__content .tgl-embed .tgl-btn {
    margin: 0;
}
.tgl-article__content .tgl-embed .tgl-embed__external {
    display: block;
    margin: 0.5rem 0 0;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
/* Once the user clicks + consent is granted, the placeholder chrome
   disappears (script rewrites innerHTML to a real blockquote /
   iframe). Drop the padding + card background so the platform's own
   styling can be showcased. Center the iframe explicitly — the loaded
   blockquote uses `margin: 0 auto` inline, but flex-centering is
   more robust wanneer Instagram het iframe later injecteert. */
.tgl-article__content .tgl-embed--loaded {
    background: transparent;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.tgl-article__content .tgl-embed--loaded blockquote,
.tgl-article__content .tgl-embed--loaded iframe {
    /* Laat Instagram z'n eigen breedte + hoogte kiezen — de embed
       script gebruikt postMessage om het iframe met de natuurlijke
       content-hoogte te resize'n. Wij zetten alleen max-width als
       cap; geen min-height, geen !important op width (dat vecht
       met Instagram's eigen sizing).
    */
    max-width: 540px;
    margin: 0 auto;
}

.tgl-article__content figcaption .tgl-article__credit {
    display: block;
    margin-top: 0.15em;
    /* Volledige dark-green, geen opacity dim (opacity op dark = grey,
       en grey is verboden per brand). Onderscheiding met de caption
       tekst gaat via lettergrootte, niet via kleur of gewicht. */
    color: var(--tgl-green-dark, #122806);
    font-style: normal;
    font-size: 0.78rem;
}

/* Tables */
.tgl-article__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95rem;
}
.tgl-article__content th,
.tgl-article__content td {
    border-bottom: 1px solid #ececec;
    padding: 0.7em 0.85em;
    text-align: left;
    vertical-align: top;
}
.tgl-article__content th {
    background: #f6f8fa;
    font-family: var(--tgl-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    border-bottom: 2px solid var(--tgl-green-dark, #122806);
}

/* Legacy lede-paragraph rule removed — the .tgl-article__standfirst
   element ABOVE the content is the proper intro. Styling the first body
   paragraph as a second oversized intro produced double-emphasis and
   broke the reading rhythm. Body paragraphs now use the base
   .tgl-article__content size everywhere. */
/* Legacy "lead paragraph" drop-cap style removed — the .tgl-article__standfirst
   element now sits ABOVE the content and is the proper intro, so styling the
   first body paragraph as a second oversized intro produced double-emphasis
   and broke the reading rhythm. Body paragraphs use the base .tgl-article__content
   size across all viewports. */

/* === Footer (per brand layout) === */
.tgl-footer {
    background: var(--tgl-green-dark);
    color: #fff;
    padding: 4rem 1.5rem 3rem;
    position: relative;
}
/* Small breathing room after the article so the prose doesn't kiss the footer.
   Background stays transparent so the body's brand wallpaper shows through. */
.tgl-article { padding-bottom: 3rem; }
.tgl-issue   { padding-bottom: 3rem; }
/* Brand-gradient strip removed per design feedback — kept rule shell so older
   pages don't paint a stray top border. */
.tgl-footer__inner {
    max-width: 1040px;
    margin: 0 auto;
}

/* Top: brand block + 3 nav columns. Stacks vertically on mobile, four
   columns on desktop with the brand on the left taking the most weight.
   Left-aligned on every breakpoint — centered footer copy reads messy
   when stacked on mobile. */
.tgl-footer__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin: 0 0 3rem;
    text-align: left;
}
@media (min-width: 720px) {
    .tgl-footer__top {
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: 3rem;
    }
}

.tgl-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.tgl-footer__logo {
    display: inline-flex;
    line-height: 0;
    opacity: 0.95;
    transition: opacity 0.15s ease;
}
.tgl-footer__logo:hover { color: var(--tgl-green-light, #cfd877); }
.tgl-footer__logo img {
    width: auto;
    height: 32px;
    max-width: 60vw;
}
@media (min-width: 720px) {
    .tgl-footer__logo img { height: 40px; max-width: none; }
}
.tgl-footer__tagline {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    font-weight: 300;
    /* Explicit — some parent selectors italicize serif text by
       default, override it here so the footer line stays upright. */
    font-style: normal;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 320px;
}

.tgl-footer__social {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    gap: 1.25rem;
    justify-content: flex-start;
}
.tgl-footer__social a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: opacity 0.15s ease, transform 0.05s ease;
}
.tgl-footer__social a:hover { color: var(--tgl-green-light, #cfd877); }
.tgl-footer__social a:active { transform: translateY(1px); }

/* Three nav columns. On mobile we cap at 2 per row, left-aligned so the
   chevron + label rhythm reads naturally instead of fighting a centered axis. */
.tgl-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.25rem;
    grid-column: 1 / -1;
    text-align: left;
}
@media (min-width: 720px) {
    .tgl-footer__nav {
        display: contents; /* let each col sit in its own grid track */
    }
}
.tgl-footer__nav-col { display: flex; flex-direction: column; gap: 0.85rem; }
.tgl-footer__nav-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.tgl-footer__col-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-light, #cfd877);
    margin: 0 0 0.3rem;
}
.tgl-footer__nav-col a {
    position: relative;
    display: inline-block;
    color: #fff;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding-left: 1rem;
    transition: transform 0.2s ease, color 0.15s ease;
}
.tgl-footer__nav-col a::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tgl-green-light, #cfd877);
    opacity: 0.75; /* WCAG: ensure readable contrast on dark green bg */
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.tgl-footer__nav-col a:hover {
    color: #fff;
    transform: translateX(0.4rem);
    opacity: 1;
}
.tgl-footer__nav-col a:hover::before {
    opacity: 1;
    transform: translate(2px, -50%);
}

/* Land acknowledgment — set in the brand serif (Crimson Pro), the
   nation names emphasized via <em>. */
.tgl-footer__acknowledgment {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 100%;
    margin: 0 0 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.tgl-footer__acknowledgment p { max-width: 1100px; margin: 0 auto 1rem; }
@media (min-width: 720px) {
    .tgl-footer__acknowledgment {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 3rem;
        text-align: left;
    }
    .tgl-footer__acknowledgment p { margin: 0; max-width: none; }
}
.tgl-footer__acknowledgment p { margin: 0 0 1rem; }
.tgl-footer__acknowledgment p:last-child { margin-bottom: 0; }
.tgl-footer__acknowledgment em {
    font-style: italic;
    font-weight: 700;
}

.tgl-footer__legal {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.82rem;
}
@media (min-width: 720px) {
    .tgl-footer__legal { justify-content: center; }
}
.tgl-footer__legal a,
.tgl-footer__legal-link {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}
.tgl-footer__legal a:hover,
.tgl-footer__legal-link:hover { text-decoration: underline; color: #fff; }
.tgl-footer__legal li[aria-hidden="true"] { opacity: 0.4; }

.tgl-footer__copyright {
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.78rem;
    opacity: 0.65;
    margin: 1rem 0 0;
    text-align: left;
}
@media (min-width: 720px) {
    .tgl-footer__copyright { text-align: center; }
}

/* === Responsive === */
@media (max-width: 768px) {
    .tgl-logo { font-size: 2.5rem; }
    .tgl-header { padding: 15px 20px; }
    .tgl-article { padding: 1.5rem 1.5rem 2.5rem; }
}

/* === Meter Badge === */
.tgl-meter-inline {
    font-size: 0.75rem;
    color: var(--tgl-green-accent);
    font-weight: 600;
}

/* === Search Overlay === */
.tgl-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(18, 40, 6, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    /* Animation: hidden by default, revealed via .is-open */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.tgl-search-overlay.is-open { opacity: 1; pointer-events: auto; }
.tgl-search-overlay__inner {
    transform: translateY(-18px) scale(0.97);
    transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tgl-search-overlay.is-open .tgl-search-overlay__inner {
    transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .tgl-search-overlay,
    .tgl-search-overlay__inner { transition: opacity 0.15s ease; transform: none !important; }
}

.tgl-search-overlay__inner {
    width: 100%;
    max-width: 36rem;
    padding: 0 20px;
    position: relative;
}

.tgl-search-overlay__form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.tgl-search-overlay__input {
    flex: 1;
    border: none;
    padding: 18px 24px;
    font-family: var(--tgl-font-body);
    font-size: 1.15rem;
    color: var(--tgl-green-dark);
    background: transparent;
}

.tgl-search-overlay__input::placeholder {
    color: #999;
}

.tgl-search-overlay__submit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 20px;
    color: var(--tgl-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.tgl-search-overlay__submit:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

/* === Search Preview / Autocomplete === */
.tgl-search-preview {
    max-height: 24rem;
    overflow-y: auto;
    margin-top: 1rem;
}

.tgl-search-preview__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 24px;
    text-decoration: none;
    color: white;
    transition: background 0.15s;
}

.tgl-search-preview__item:hover,
.tgl-search-preview__item.is-active {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

.tgl-search-preview__thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 24px;
    object-fit: cover;
    flex-shrink: 0;
}

.tgl-search-preview__thumb--placeholder {
    background: rgba(255, 255, 255, 0.15);
}

.tgl-search-preview__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.tgl-search-preview__title {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tgl-search-preview__date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.tgl-search-preview__excerpt {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tgl-search-preview__all {
    display: block;
    text-align: center;
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.15s;
}

.tgl-search-preview__all:hover {
    color: white;
    opacity: 1;
}

.tgl-search-preview__empty {
    text-align: center;
    padding: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}


/* ------------------------------------------------------------------
   Page content container — used by /events/, /membership/, /about/, etc.
   Keeps user-added prose readable and nested shortcodes (.tgl-events,
   .tgl-pricing) flush with the page constraint instead of double-padded.
   ------------------------------------------------------------------ */
.tgl-page__content {
    max-width: 1040px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
    font-family: var(--tgl-font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: #122806;
}
/* TGL brand typography:
   H1 → Libre Franklin Bold, ALL CAPS
   H2 → Crimson Pro Light (300), regular case
   H3 → Crimson Pro 400, regular case
   Direct-child selectors so component-level headings inside cards / shortcodes
   keep their own margins; only editor-typed prose hits these rules. */
.tgl-page__content > h1,
.tgl-page__title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    text-transform: uppercase;
    color: #122806;
    line-height: 1.05;
    font-size: 2.5rem;
    margin: 0 0 1.5rem;
}
.tgl-page__content > h2 {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    color: #122806;
    font-size: 1.85rem;
    line-height: 1.25;
    margin: 2rem 0 0.75rem;
}
.tgl-page__content > h3 {
    font-family: var(--tgl-font-serif);
    font-weight: 400;
    color: #122806;
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 1.5rem 0 0.6rem;
}
/* Prose elements run to the page container's full width (1200px) so /about/,
   /contact/, etc. line up edge-to-edge with the homepage and the embedded
   shortcodes (.tgl-events, .tgl-pricing, .tgl-account). */
.tgl-page__content > p  { margin: 0 0 1rem; }
.tgl-page__content > ul,
.tgl-page__content > ol { margin: 0 0 1rem; padding-left: 1.5rem; }
/* Limit the prose-link color to actual prose elements so embedded components
   (like .tgl-event-card__rsvp-btn anchors) keep their own button styling. */
.tgl-page__content :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) a {
    color: #122806;
}

/* Drop the embedded shortcode container's own width/padding so it sits
   flush inside the page wrapper (no double max-width or double horizontal
   padding). */
.tgl-page__content .tgl-events,
.tgl-page__content .tgl-pricing {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.tgl-page__content .tgl-events { padding-top: 1rem; }

/* ========================================
   COMMENTS — 2026 styling
   Substack/Bluesky-flavour: clean cards on a light surface, generous
   spacing, large rounded avatars, subtle threading, soft motion.
   ======================================== */
.tgl-comments {
    max-width: 1040px; /* matches the article + homepage outer width */
    /* 3rem top used to feel tight next to the theme's default article
       padding; combined with the save/share bar's bottom-margin it now
       stacked to ~4.5rem. 1.5rem reads as one breathing space between
       sections without a canyon of whitespace. */
    margin: 1.5rem auto 4rem;
    padding: 0 1.5rem;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
}
.tgl-comments__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
    border-bottom: 0;
}
.tgl-comments__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}

/* List + threading — tightened spacing (per user request: keep
   font-size, reduce the *chrome* around each comment so the section
   as a whole reads as a comment thread, not a list of mini-articles). */
.tgl-comments__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tgl-comments__list .children {
    list-style: none;
    padding: 0 0 0 1.25rem;
    margin: 0.35rem 0 0;
    border-left: 2px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Comment card */
.tgl-comment { margin: 0; }
.tgl-comment__body {
    padding: 0.65rem 0.9rem 0.75rem;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 24px;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tgl-comment__body:hover { border-color: #dcdcdc; background: #fff; }
.tgl-comment.bypostauthor > .tgl-comment__body {
    /* Editor / author comments get a quiet brand accent — Blue
       alt-surface tint from the palette so the row visibly stands out
       from regular comments without introducing an off-brand tone. */
    background: #D3E5E4; /* brand Blue */
    border-color: var(--tgl-green-dark, #122806);
}

.tgl-comment__head {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.35rem;
}
.tgl-comment__avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff;
}
.tgl-comment__meta { flex: 1; min-width: 0; }
.tgl-comment__author {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    line-height: 1.2;
}
.tgl-comment__name {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.9rem;
}
.tgl-comment__name a { color: inherit; text-decoration: none; }
.tgl-comment__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tgl-comment__tier-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 24px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
.tgl-comment__time {
    display: inline-block;
    font-size: 0.82rem;
    color: var(--tgl-green-dark, #122806);
    margin-top: 2px;
}

.tgl-comment__content {
    color: #122806;
    line-height: 1.6;
    font-size: 0.98rem;
    /* No left padding — content runs full width of the card now that the card
       has its own padding. */
}
.tgl-comment__content p { margin: 0 0 0.65rem; }
.tgl-comment__content p:last-child { margin-bottom: 0; }

.tgl-comment__pending {
    margin: 0.4rem 0 0;
    color: #b45309;
    font-style: italic;
    font-size: 0.88rem;
}

/* Reply as a small ghost button */
.tgl-comment__reply { margin: 0.75rem 0 0; padding: 0; }
.tgl-comment__reply a {
    display: inline-flex; align-items: center; gap: 0.3rem;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border-radius: 24px;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-comment__reply a::before { content: "↩"; opacity: 0.7; }
.tgl-comment__reply a:hover {
    background: #ececec;
    color: var(--tgl-green-dark, #122806);
}

/* Form (logged-in) */
.tgl-comments__form {
    margin-top: 1.5rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    padding: 1.25rem;
}
.tgl-comments__form #reply-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}
.tgl-comments__logged-in {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-comments__logged-in strong { color: var(--tgl-green-dark, #122806); font-weight: 600; }
.tgl-comments__logged-in a { color: var(--tgl-green-dark, #122806); text-decoration: underline; text-underline-offset: 2px; }
.tgl-comments__logged-in a:hover { color: var(--tgl-green-dark, #122806); }
.tgl-comments__tier-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 24px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
.tgl-comments__field { margin: 0; }
.tgl-comments__field textarea {
    width: 100%;
    min-height: 110px;
    padding: 0.95rem 1.1rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.55;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    background: #fafafa;
    color: #122806;
    resize: vertical;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tgl-comments__field textarea::placeholder { color: var(--tgl-green-dark, #122806); }
.tgl-comments__field textarea:focus {
    background: #fff;
    border-color: var(--tgl-green-accent, #122806);
    box-shadow: 0 0 0 3px var(--tgl-focus-ring, rgba(61,122,28,0.45));
}
.tgl-comments__notes {
    font-size: 0.82rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0.75rem 0;
    line-height: 1.5;
}
/* Matches the site-wide button reference (.tgl-issues__cta):
   display font, 700, 0.78rem, uppercase, 4px radius, 2px border. */
.tgl-comments__submit {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 2px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    padding: 0.7rem 1.5rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.05s ease;
}
.tgl-comments__submit:hover {
    color: var(--tgl-green-light, #CFD877);
}
.tgl-comments__submit:active { transform: translateY(1px); }

/* Gated variant — same visual as the real form so anon readers get the
   "yes you can post" affordance. The textarea + submit still route
   through the auth-modal because each carries data-tgl-auth-trigger.
   Local heading class matches the wp-comment-form's #reply-title style. */
/* Gated form sits ABOVE the thread — keeps the plain white/border look
   of the real comment form (inherited from `.tgl-comments__form`). Only
   the intro paragraph below gets the highlighted-green treatment. */
.tgl-comments__form--gated { margin: 1rem 0 2rem; }
.tgl-comments__form-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.85rem;
    text-transform: uppercase;
}
/* "{N} comments" sub-header above the thread — separate from the
   section h2, sits directly on the list so the reader sees the count
   right where they scroll into replies. */
.tgl-comments__count {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.75rem;
}
/* Editorial intro — highlighted green→blue callout inside the plain
   white gated form. Same gradient + border as the old signin CTA card,
   just scoped to this one paragraph so the textarea below still reads
   as a real comment box. */
.tgl-comments__gated-intro {
    margin: 0 0 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
}
.tgl-comments__gated-textarea {
    /* Inherit .tgl-comments__field textarea styling — no separate rules.
       Keep pointer cursor so the "click to open modal" affordance is
       obvious even before the user starts typing. */
    cursor: pointer;
}
.tgl-comments__gated-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.85rem;
}
.tgl-comments__gated-hint {
    margin: 0;
    flex: 1 1 260px;
    min-width: 200px;
}
.tgl-comments__gated-hint a {
    color: var(--tgl-green-dark, #122806);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Sign-in CTA (anonymous) — modern soft card */
.tgl-comments__signin {
    background: linear-gradient(135deg, #f3f8ed 0%, #ecfdf5 100%);
    border: 1px solid #CFD877;
    border-radius: 24px;
    padding: 2rem 1.75rem;
    /* Signin now sits ABOVE the thread — bottom margin too so there's
       clear air between this CTA card and the first comment underneath. */
    margin: 1rem 0 2rem;
    text-align: center;
}
.tgl-comments__signin-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: none;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.5rem;
}
.tgl-comments__signin-body {
    color: #122806;
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 42ch;
    margin-left: auto;
    margin-right: auto;
}
.tgl-comments__signin-actions {
    display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin: 0;
}
.tgl-comments__signin-btn {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    border-radius: 24px;       /* pill */
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    color: var(--tgl-green-dark, #122806);
    background: #fff;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-comments__signin-btn:hover { color: var(--tgl-green-light, #CFD877); text-decoration: none; }
.tgl-comments__signin-btn--primary,
.tgl-comments__signin-btn--primary:visited {
    background: var(--tgl-green-dark, #122806);
    /* `!important` because the theme's global `a { color }` and one of the
       plugin CSS files kept clawing the label back to dark green (same as
       the button bg → text invisible). */
    color: #fff !important;
    border-color: var(--tgl-green-dark, #122806);
}
.tgl-comments__signin-btn--primary:hover,
.tgl-comments__signin-btn--primary:focus-visible {
    color: var(--tgl-green-light, #CFD877) !important;
    text-decoration: none;
}

.tgl-comments__closed { color: var(--tgl-green-dark, #122806); font-style: italic; }

/* User-icon login states
   • Anon  → outline person icon (default styling from .tgl-header__icon-btn)
   • Kennedy → filled green circle with first initial in white
   • Bloor   → same idea, slightly brighter accent green
   • Kipling → dark green                                                  */
.tgl-header__user--anon { color: var(--tgl-green-dark, #122806); }

.tgl-header__login-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 1px;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 0.55rem;
    text-transform: uppercase;
    padding: 0.25rem 0.45rem;
    border-radius: 24px;
    transition: background 0.15s;
}
.tgl-header__login-link svg {
    flex-shrink: 0;
    vertical-align: middle;
}
.tgl-header__login-link span {
    line-height: 1;
}
@media (max-width: 720px) {
    .tgl-header__login-link {
        padding: 0;
    }
}
.tgl-header__login-link:hover {
    opacity: 0.7;
}

.tgl-header__user-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}
.tgl-header__user--kennedy .tgl-header__user-initial { background: #122806; }
.tgl-header__user--bloor   .tgl-header__user-initial { background: #122806; }
.tgl-header__user--kipling .tgl-header__user-initial { background: #122806; }

/* Subtle ring on hover */
.tgl-header__user:not(.tgl-header__user--anon):hover .tgl-header__user-initial {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

/* ========================================
   USER ACCOUNT DROPDOWN (header)
   ======================================== */
.tgl-header__user-wrap {
    position: relative;
}
.tgl-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 110;
    overflow: hidden;
    animation: tgl-user-menu-pop 0.12s ease;
}
@keyframes tgl-user-menu-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tgl-user-menu__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.tgl-user-menu__name {
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.92rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tgl-user-menu__tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 24px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    flex-shrink: 0;
}
.tgl-user-menu__list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
}
.tgl-user-menu__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: #122806;
    text-decoration: none;
    transition: background 0.1s ease, color 0.1s ease;
}
.tgl-user-menu__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 24px;
    background: var(--tgl-green-accent, #122806);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.tgl-user-menu__list a:hover {
    background: #f3f8ed;
    color: var(--tgl-green-dark, #122806);
    opacity: 1;
}

.tgl-user-menu__list--secondary {
    border-top: 1px solid #f0f0f0;
    padding: 0.4rem 0;
}
.tgl-user-menu__list--secondary a {
    color: #b32d2e;
}
.tgl-user-menu__list--secondary a:hover {
    background: #fef2f2;
    color: #b32d2e;
}

/* Upgrade nudge for Kennedy users */
.tgl-user-menu__upgrade { padding: 0.4rem 1rem 0.6rem; }
.tgl-user-menu__upgrade a {
    background: var(--tgl-green-dark, #122806);
    color: #fff !important;
    text-align: center;
    border-radius: 24px;
    font-weight: 600;
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
}
.tgl-user-menu__upgrade a:hover {
    background: var(--tgl-green-accent, #122806);
    color: #fff !important;
}

/* ========================================
   SAVED-ARTICLES DROPDOWN (header)
   ======================================== */
.tgl-header__saves-wrap { position: relative; }
.tgl-saves-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: calc(100vw - 1rem);
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    z-index: 110;
    overflow: hidden;
    animation: tgl-user-menu-pop 0.12s ease;
}
.tgl-saves-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #122806;
}
.tgl-saves-menu__count {
    background: var(--tgl-green-accent, #122806);
    color: #fff;
    padding: 1px 8px;
    border-radius: 24px;
    font-size: 0.7rem;
}
.tgl-saves-menu__list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    max-height: 60vh;
    overflow-y: auto;
}
.tgl-saves-menu__item {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s ease;
}
.tgl-saves-menu__item:hover { background: #f3f8ed; }
.tgl-saves-menu__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f5e9, #CFD877);
}
.tgl-saves-menu__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-saves-menu__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}
.tgl-saves-menu__cat {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--tgl-green-accent, #122806);
    text-transform: uppercase;
}
.tgl-saves-menu__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tgl-saves-menu__when {
    font-size: 0.72rem;
    color: var(--tgl-green-dark, #122806);
}

.tgl-saves-menu__empty { padding: 1.5rem 1rem; text-align: center; color: var(--tgl-green-dark, #122806); font-size: 0.9rem; }
.tgl-saves-menu__empty p { margin: 0; }
.tgl-saves-menu__empty-hint { color: var(--tgl-green-dark, #122806); font-size: 0.82rem; margin-top: 0.4rem !important; }

.tgl-saves-menu__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}
.tgl-saves-menu__footer:hover { background: #f3f8ed; }

/* ====================================================================
   Tools / Guides / Videos — shared archive + single layouts.
   Per-format colour and spacing variations driven by body class.
   ==================================================================== */

body.tgl-format-tool,
body.tgl-format-guide {
    --tgl-format-band-bg: var(--tgl-format-pink);
    --tgl-format-band-fg: var(--tgl-green-dark);
}
body.tgl-format-video {
    --tgl-format-band-bg: var(--tgl-green-dark);
    --tgl-format-band-fg: #fff;
}
/* Archive-level gradients live on <body> (single source of truth)
   so the sitewide 6-bar stripe divider outside <main> stays visually
   continuous with the page above it. */
body.tgl-format-tool {
    background: url("assets/img/gradients/violet-orange.png") center center / cover no-repeat fixed;
}
body.tgl-format-guide {
    background: url("assets/img/gradients/pink-green.png") center center / cover no-repeat fixed;
}
body.tgl-format-video,
body.post-type-archive-tgl_video {
    background: url("assets/img/gradients/blue-violet.png") top center / cover no-repeat;
}

.tgl-format-archive {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    font-family: var(--tgl-font-body);
}

.tgl-format-archive__band {
    background: var(--tgl-format-band-bg);
    color: var(--tgl-format-band-fg);
    padding: 3rem 1.5rem;
    text-align: center;
    margin: 0 auto 1.75rem;
    max-width: 1040px;
    border-radius: 24px;
}.tgl-format-archive__subtitle {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    font-size: 1.1rem;
    line-height: 1.5;
    max-width: 38rem;
    margin: 0 auto;
}

.tgl-format-archive__filters {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    background: rgba(247, 214, 220, 0.4);
    padding: 1rem 1.25rem;
    border-radius: 24px;
    margin: 0 0 0.75rem;
}
body.tgl-format-video .tgl-format-archive__filters {
    background: rgba(207, 216, 119, 0.18);
}
.tgl-format-archive__filter,
.tgl-format-archive__sort {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: var(--tgl-font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tgl-format-archive__filter select,
.tgl-format-archive__sort select {
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(18,40,6,0.2);
    border-radius: 24px;
    background: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    text-transform: none;
    font-weight: 600;
}

.tgl-format-archive__count {
    text-align: right;
    font-family: var(--tgl-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

.tgl-format-archive__tabs {
    display: flex;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid rgba(18,40,6,0.12);
    padding-bottom: 0.5rem;
}
.tgl-format-archive__tabs a {
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    font-family: var(--tgl-font-display);
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
}
.tgl-format-archive__tabs a.is-active {
    color: var(--tgl-green-dark);
    border-bottom: 2px solid var(--tgl-green-accent);
    padding-bottom: 0.5rem;
}
/* Video archive sits on the dark green band — flip tab colours to white. */
body.tgl-format-video .tgl-format-archive__tabs {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.tgl-format-video .tgl-format-archive__tabs a {
    color: rgba(255,255,255,0.55);
}
body.tgl-format-video .tgl-format-archive__tabs a.is-active {
    color: #fff;
    border-bottom: 2px solid var(--tgl-green-light);
}

.tgl-format-archive__grid {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.tgl-format-archive__card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(18,40,6,0.08);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.tgl-format-archive__card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.tgl-format-archive__card-link,
.tgl-format-archive__card a {
    color: inherit;
    text-decoration: none;
    display: block;
    padding: 1.25rem;
}
.tgl-format-archive__card-thumb img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.tgl-format-archive__badge {
    display: inline-block;
    background: var(--tgl-green-accent);
    color: #fff;
    font-family: var(--tgl-font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 24px;
    margin-bottom: 0.75rem;
}
.tgl-format-archive__card-title {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: var(--tgl-green-dark);
    text-transform: uppercase;
}
.tgl-format-archive__card-excerpt {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tgl-format-archive__list-heading {
    font-family: var(--tgl-font-display);
    text-transform: uppercase;
    font-size: 1rem;
    margin: 2rem 0 1rem;
}
.tgl-format-archive__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tgl-format-archive__list-row a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border-radius: 24px;
    text-decoration: none;
    color: inherit;
}
.tgl-format-archive__list-row img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.tgl-format-archive__list-eyebrow {
    display: block;
    font-family: var(--tgl-font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--tgl-green-accent);
}
.tgl-format-archive__list-title {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    color: var(--tgl-green-dark);
    text-transform: uppercase;
}
.tgl-format-archive__list-arrow {
    margin-left: auto;
}

/* DEPRECATED: .tgl-format-single__* classes — replaced by unified .tgl-article__* system.
   Kept temporarily for backward compatibility. Remove after verifying all templates migrated. */

@media (max-width: 720px) {
    .tgl-format-archive__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VIDEO ARCHIVE — dedicated layout matching mobile-first design
   ========================================================================== */

.tgl-video-archive {
    font-family: var(--tgl-font-body);
    /* Gradient moved to `body.tgl-format-video` — main scope is
       background-free so the sitewide 6-bar stripe outside <main>
       stays continuous with the page above it.
       NOTE: only top/bottom padding here — the sitewide
       `main { padding-inline: 1.5rem }` handles the side gutter.
       Using `padding: 2.5rem 0 3rem` would zero the inline padding
       and let mobile content flush against the browser edge. */
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.tgl-video-archive__format-band {
    background: var(--tgl-green-dark);
    color: var(--tgl-green-light);
    text-align: center;
    padding: 0.6rem 1rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Legacy .tgl-video-archive__hero — the template now uses the shared
   `.tgl-page-header` component. Rule kept as a no-op in case older
   cached markup still references it. */
.tgl-video-archive__hero {
    padding: 0;
    margin: 0;
    background: transparent;
}.tgl-video-archive__subtitle {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}

/* Pill tabs */
.tgl-video-archive__tabs {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1.5rem 2rem;
    max-width: 1040px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
}
.tgl-video-archive__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Larger pills per the Figma — reads as primary section navigation
       rather than a chip row. Scales down slightly on mobile below. */
    padding: 1rem 2.5rem;
    min-width: 140px;
    /* Brand-strict: match the 4px button radius used everywhere else. */
    border-radius: 24px;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.05s ease;
    border: 0;
}
.tgl-video-archive__tab:active { transform: translateY(1px); }
@media (max-width: 640px) {
    .tgl-video-archive__tab {
        padding: 0.75rem 1.5rem;
        min-width: 0;
        font-size: 0.9rem;
        flex: 1 1 calc(50% - 0.5rem);
    }
    .tgl-video-archive__tabs { gap: 0.75rem; }
}
/* Text-only hover: bg stays dark-green, text flips to brand Light
   Green. Compound selector needed to out-specificity the
   `.tgl-video-archive__tab.tab--foryou {color:#fff}` unified rule
   below (both would otherwise sit at (0,2,0) specificity + the
   later rule wins on source order). */
.tgl-video-archive__tab.tab--foryou:hover,
.tgl-video-archive__tab.tab--foryou:focus-visible,
.tgl-video-archive__tab.tab--docs:hover,
.tgl-video-archive__tab.tab--docs:focus-visible,
.tgl-video-archive__tab.tab--shorts:hover,
.tgl-video-archive__tab.tab--shorts:focus-visible,
.tgl-video-archive__tab.tab--explainers:hover,
.tgl-video-archive__tab.tab--explainers:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}

/* Unified pill colour — all tabs render as dark-green with white text.
   Editorial request: multi-colour drift felt off-brand against the
   blue-violet gradient bg; monochrome reads cleaner + more consistent. */
.tgl-video-archive__tab.tab--foryou,
.tgl-video-archive__tab.tab--docs,
.tgl-video-archive__tab.tab--shorts,
.tgl-video-archive__tab.tab--explainers {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}

/* Video grid */
.tgl-video-archive__grid {
    list-style: none;
    padding: 0;
    margin: 0 auto 2rem;
    max-width: var(--tgl-content-max);
    display: grid;
    /* Single column on mobile; two columns once viewport can fit them
       comfortably (~640px+). */
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 640px) {
    .tgl-video-archive__grid { grid-template-columns: repeat(2, 1fr); }
}

.tgl-video-archive__section-heading {
    font-family: var(--tgl-font-display);
    text-transform: uppercase;
    font-size: 1rem;
    padding: 0 1.5rem;
    max-width: 1040px;
    margin: 1rem auto 1rem;
}

.tgl-video-archive__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-serif);
}

/* Video card */
.tgl-video-card {
    list-style: none;
    /* Fill the grid cell — grid items stretch by default, but the card
       itself needs display:flex so its <a> child can inherit height.
       `position: relative` so the absolutely-positioned play button
       (sibling of the card link) anchors to the card, not the viewport. */
    position: relative;
    display: flex;
    height: 100%;
}
.tgl-video-card__link {
    /* Flex column so the body can push the meta strip to the bottom
       and every card in a row shares the same total height. */
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(18,40,6,0.08);
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.tgl-video-card__link:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.tgl-video-card__thumb-wrap {
    position: relative;
    overflow: hidden;
}
.tgl-video-card__thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #c5cda0 0%, #d4dbb0 100%);
}
.tgl-video-card__thumb--placeholder {
    background: linear-gradient(135deg, #c5cda0 0%, #d4dbb0 100%);
}

.tgl-video-card__badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    display: inline-block;
    font-family: var(--tgl-font-display);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 24px;
    line-height: 1.4;
}
/* Every video-card badge now uses the same dark-green pill with white
   text so the /videos/ grid reads as one system instead of a mix of
   pink / cream / green tokens. */
.tgl-video-card__badge.badge--doc,
.tgl-video-card__badge.badge--foryou,
.tgl-video-card__badge.badge--short,
.tgl-video-card__badge.badge--explainer {
    background: var(--tgl-green-dark);
    color: #fff;
}

/* Body + title match the shared content-card sizing so guides / tools /
   videos read as one card family. Meta strip becomes a quiet footer with
   the same 1px border-top the content-card uses. Per-category badge
   colours stay — they're the deliberate signal for scanning "docs vs
   shorts vs explainers" at a glance. */
.tgl-video-card__body {
    padding: 1rem 1.1rem 1.1rem;
    /* Fill the remaining space below the thumb + push the meta strip
       to the bottom via `margin-top: auto` on `.tgl-video-card__meta`
       so short-title cards align their meta with tall-title cards. */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tgl-video-card__title {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--tgl-green-dark);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
@media (min-width: 720px) {
    .tgl-video-card__title { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
    .tgl-video-card__title { font-size: 1.2rem; line-height: 1.3; }
}
.tgl-video-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* auto pushes the meta to the bottom of the flex-column body,
       giving every card in a row the same footer alignment. */
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(18, 40, 6, 0.08);
    /* Brand rule: Libre Franklin bold → uppercase. Applies to the
       author name and date that render inside this row. */
    text-transform: uppercase;
    font-weight: 700;
}
.tgl-video-card__views {
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
}
/* Duration — quiet Franklin meta line, same typographic treatment as
   .tgl-story-card__date. No pill, no border, sits inline with the
   other card-meta items. */
.tgl-video-card__duration {
    background: transparent;
    padding: 0;
    border-radius: 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
}

/* Save for Later CTA */
.tgl-video-archive__save-cta {
    position: relative;
    max-width: 720px;
    margin: 2.5rem 1.5rem;
    padding: 2.25rem 1.5rem;
    text-align: center;
    background: var(--tgl-green-dark);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(13, 59, 30, 0.18);
}
@media (min-width: 640px) {
    .tgl-video-archive__save-cta {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (min-width: 720px) {
    .tgl-video-archive__save-cta {
        padding: 3rem 3rem 2.5rem;
    }
}
.tgl-video-archive__save-cta-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(255,255,255,0.15);
    border: 0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tgl-video-archive__save-cta-label {
    display: inline-block;
    background: #FDD7D8; /* brand: Pink */
    color: var(--tgl-green-dark);
    font-family: var(--tgl-font-display);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 24px;
    margin-bottom: 1rem;
}
.tgl-video-archive__save-cta-title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 4vw, 1.6rem);
    color: #fff;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.tgl-video-archive__save-cta-text {
    font-family: var(--tgl-font-body);
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.tgl-video-archive__save-cta-btn {
    display: inline-block;
    background: var(--tgl-green-light);
    color: var(--tgl-green-dark);
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    text-decoration: none;
    transition: background 0.15s;
    margin-bottom: 0.75rem;
}
.tgl-video-archive__save-cta-btn:hover,
.tgl-video-archive__save-cta-btn:focus-visible {
    /* Light-Green bg base — text→LGreen would be invisible, keep dark
       green + add a 2px inset dark-green ring as typographic hover
       feedback (bg-swap forbidden per brand rule). */
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
    text-decoration: none;
}
.tgl-video-archive__save-cta-signin {
    font-family: var(--tgl-font-body);
    font-size: 0.85rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.tgl-video-archive__save-cta-signin a {
    color: #fff;
    text-decoration: underline;
}

/* Newsletter inside video archive */
.tgl-video-archive .tgl-newsletter {
    margin: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
    .tgl-video-archive .tgl-newsletter {
        margin: 2.5rem auto;
    }
}

/* Video archive grid — capped at 2 columns on every viewport per the
   Figma. Larger cards = the thumbnail + title + view/duration meta reads
   at a comfortable "watch preview" scale rather than a tight 3-4 up wall. */
@media (min-width: 720px) {
    .tgl-video-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

/* ========================================
   SUPPORT PAGE
   ======================================== */

.tgl-support {
    overflow-x: hidden;
}
.tgl-support__hero {
    padding: 3.5rem 1.5rem 4rem;
    box-sizing: border-box;
    max-width: 100%;
}
.tgl-support__hero-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    box-sizing: border-box;
}
/* Column 2 stack — banner + form card + payment card all live in a single
   grid cell so they behave like a natural vertical flow (no oversized grid
   gap between the demo banner and the amount picker). */
.tgl-support__hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.tgl-support__eyebrow {
    font-family: var(--tgl-font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    margin-bottom: 1rem;
}
.tgl-support__headline {
    font-family: var(--tgl-font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--tgl-green-dark, #122806);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}
/* Mobile: hide the eyebrow ("Funded by you, by design") — too many
   competing lines above the H1 in a narrow viewport. And center-align
   the headline so it reads as a poster on small screens. Desktop
   keeps the left-aligned two-column hero. */
@media (max-width: 720px) {
    .tgl-support__eyebrow { display: none; }
    .tgl-support__headline { text-align: center; }
}
.tgl-support__subhead {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    max-width: 440px;
}

/* Donation card — step 1 (amount picker) AND step 2 (payment form) share the
   same width + grid placement so swapping between them doesn't reshape the
   layout. Both ride in column 2 of the hero grid on desktop, 100% on mobile.
   Tab swaps within step 2 also can't widen the card because max-width is
   pinned here. */
.tgl-support__card,
.tgl-donate-payment {
    grid-column: 2;
    width: 100%;
    max-width: 480px;
    margin: 0;
    box-sizing: border-box;
    /* Dark-green card per editorial ask — original colors backed up in
       `docs/archived/membership-card-colors-20260730.md` for revert. */
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border-radius: 24px;
    padding: 1.75rem;
    box-shadow: 0 8px 32px rgba(18, 40, 6, 0.18);
}

/* Match the hero grid's single-column breakpoint (.tgl-support__hero-inner
   below). Card stretches to the full hero width minus its padding. The
   min-width:0 + overflow + descendant max-width rules stop wide inner content
   (Stripe iframe, mock input min-widths, the Pay-now button) from pushing
   the card past the viewport edge. */
@media (max-width: 768px) {
    .tgl-support__card,
    .tgl-donate-payment {
        grid-column: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 1.25rem;
        overflow-x: hidden;
    }
    .tgl-support__card *,
    .tgl-donate-payment * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Promo code — sits inside .tgl-donate-payment__fields and inherits its
   label/input styling. Only the Apply button + feedback line need
   their own rules. Input width comes from the shared field styles. */
.tgl-donate-payment__promo-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.tgl-donate-payment__promo-row input {
    flex: 1 1 auto;
    min-width: 0;
    text-transform: uppercase;
}
.tgl-donate-payment__promo-btn {
    padding: 0 1.2rem;
    border-radius: 24px;
    border: 1px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0;
    white-space: nowrap;
}
.tgl-donate-payment__promo-btn:hover:not(:disabled) {
    background: #cfd877;
    color: #122806;
    border-color: #cfd877;
}
.tgl-donate-payment__promo-btn:disabled {
    opacity: 0.65;
    cursor: default;
}
.tgl-donate-payment__promo-feedback {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    line-height: 1.4;
}
.tgl-donate-payment__promo-feedback--success { color: #cfd877; }
.tgl-donate-payment__promo-feedback--error   { color: #ff8a8a; }
.tgl-donate-payment__promo-feedback--info    { color: #ffffff; opacity: 0.8; }

/* Frequency toggle */
.tgl-support__freq {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}
.tgl-support__freq-btn {
    flex: 1;
    padding: 0.65rem 0.75rem;
    font-family: var(--tgl-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    /* White border + dark-green fill so the buttons read on the new
       dark-green card. Active state fills with brand Light Green
       (dark-green text stays readable). */
    border: 2px solid #fff;
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-transform: uppercase;
}
.tgl-support__freq-btn--active {
    background: var(--tgl-green-light, #cfd877);
    color: var(--tgl-green-dark, #122806);
    /* Keep the white border visible in active state so the button
       shape reads consistently whether selected or not. */
    border-color: #fff;
}

/* Preset amounts */
.tgl-support__amounts {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}
.tgl-support__amount {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-family: var(--tgl-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    /* White border + dark-green fill to match freq-btn treatment
       inside the dark-green card. */
    border: 2px solid #fff;
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
    text-transform: uppercase;
}
.tgl-support__amount--active {
    background: var(--tgl-green-light, #cfd877);
    color: var(--tgl-green-dark, #122806);
    /* Keep the white border visible in active state so the button
       shape reads consistently whether selected or not. */
    border-color: #fff;
}

/* Custom amount */
.tgl-support__custom-label {
    /* Match `.tgl-support__tier-hint` typography — Open Sans body,
       full-white, natural case. */
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    text-transform: none;
    margin-bottom: 0.5rem;
}
.tgl-support__custom {
    display: flex;
    align-items: center;
    border: 2px solid #fff;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
    /* White wrapper so the input + $ / cents labels inside read
       against the surrounding dark-green card. */
    background: #fff;
}
.tgl-support__custom:focus-within {
    border-color: var(--tgl-green-accent, #122806);
}
.tgl-support__custom-dollar,
.tgl-support__custom-cents {
    padding: 0.7rem 0.75rem;
    font-family: var(--tgl-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    background: transparent;
    text-transform: uppercase;
}
.tgl-support__custom-input {
    flex: 1;
    border: none;
    padding: 0.7rem 0.5rem;
    font-family: var(--tgl-font-body);
    font-size: 0.95rem;
    color: var(--tgl-green-dark, #122806);
    background: transparent;
    min-width: 0;
}
.tgl-support__custom-input::placeholder { color: var(--tgl-green-dark, #122806); }
.tgl-support__custom-input::-webkit-outer-spin-button,
.tgl-support__custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tgl-support__custom-input[type=number] { -moz-appearance: textfield; }

/* Tier hint — plain white editorial serif, no pill, natural case.
   Sits on the dark-green card so background/padding/radius all
   cleared. */
.tgl-support__tier-hint {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1rem;
    color: #fff;
    text-transform: none;
}
.tgl-support__tier-hint--kennedy,
.tgl-support__tier-hint--bloor,
.tgl-support__tier-hint--kipling {
    background: transparent;
    color: #fff;
}

/* CTA */
.tgl-support__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 1rem 1.5rem;
    background: var(--tgl-green-light, #cfd877);
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display);
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.tgl-support__cta:hover,
.tgl-support__cta:focus-visible {
    /* Light-Green bg base — text→LGreen would be invisible, keep dark
       green + add a 2px inset dark-green ring as typographic hover
       feedback (visually thickens the existing 2px border). */
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
    text-decoration: none;
}

/* Extra section */
.tgl-support__extra {
    padding: 4rem 1.5rem;
    background: var(--tgl-cream, #f5f1eb);
}
.tgl-support__extra-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.tgl-support__extra-title {
    font-family: var(--tgl-font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    text-align: center;
    margin-bottom: 2rem;
}
.tgl-support__extra-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.tgl-support__extra-card {
    background: #fff;
    border-radius: 24px;
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.tgl-support__extra-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    background: rgba(61, 122, 28, 0.08);
    color: var(--tgl-green-accent, #122806);
    margin-bottom: 1rem;
}
.tgl-support__extra-card h3 {
    font-family: var(--tgl-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.tgl-support__extra-card p {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
}
.tgl-support__extra-card a {
    color: var(--tgl-green-accent, #122806);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Responsive */
@media (max-width: 900px) {
    .tgl-support__extra-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    /* Match article mobile padding (1.5rem) and zero out hero-inner's
       horizontal padding so they don't stack. */
    .tgl-support__hero { padding: 2.5rem 1.5rem 3rem; }
    .tgl-support__hero-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0;
    }
    .tgl-support__subhead { max-width: none; }
}
@media (max-width: 480px) {
    .tgl-support__extra-grid { grid-template-columns: 1fr; }
    .tgl-support__freq { flex-wrap: wrap; }
}

/* ==========================================================================
   SHARED CONTENT ARCHIVE — Guides + Tools (mirrors video archive structure)
   ========================================================================== */

.tgl-content-archive {
    font-family: var(--tgl-font-body);
    /* Top padding so the shared `.tgl-page-header` breathes below the
       site header. */
    padding-top: 2.5rem;
}

.tgl-content-archive__format-band {
    background: var(--tgl-green-dark);
    color: var(--tgl-green-light);
    text-align: center;
    padding: 0.6rem 1rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.tgl-content-archive__hero {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    margin-bottom: 1.5rem;
}
.tgl-content-archive__hero--guide {
    background: #FDD7D8; /* brand: Pink */
}
/* .tgl-content-archive__hero--tool background removed — the tools archive
   now uses a violet→orange gradient wallpaper on the container itself, so
   the hero band letting that image show through reads cleaner than
   painting a flat lavender rectangle over it. */
/* Event hero now uses .tgl-events-page__hero (see end of file) */
.tgl-content-archive__title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 2rem);
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    margin: 0 0 0.75rem;
}
.tgl-content-archive__subtitle {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0 auto;
    max-width: 38rem;
}

.tgl-content-archive__grid {
    list-style: none;
    padding: 0;
    margin: 0 auto 2rem;
    max-width: var(--tgl-content-max);
    display: grid;
    /* Mobile: 1 card per row so titles + excerpt breathe on small
       viewports. Grid widens to 2-up at ≥720px (media query below). */
    grid-template-columns: 1fr;
    gap: 1rem;
}

.tgl-content-archive__section-heading {
    font-family: var(--tgl-font-display);
    text-transform: uppercase;
    font-size: 1rem;
    padding: 0 1.5rem;
    max-width: 1040px;
    margin: 1rem auto 1rem;
}

.tgl-content-archive__empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-serif);
}

/* Filter section — capped at the shared content grid, matching
   every other 1040-wide block on the page. Main's 1.5rem
   padding-inline gives the narrow-screen edge safety. */
.tgl-content-archive__filter-section {
    max-width: var(--tgl-content-max);
    margin: 0 auto 2rem;
    padding: 1.5rem;
    border-radius: 24px;
    box-sizing: border-box;
}
/* Unified filter-section — every archive that uses this filter block
   (Tools, Guides, Stories, and any future format) shares the dark-
   green surface + white heading so the pattern reads as one system. */
.tgl-content-archive__filter-section {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
/* Event filters now use .tgl-events-page__filters (see end of file) */
.tgl-content-archive__filter-heading {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1.25rem;
}
.tgl-content-archive__filters {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.tgl-content-archive__filter {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--tgl-font-display);
    font-size: 0;
}
.tgl-content-archive__filter select {
    appearance: none;
    -webkit-appearance: none;
    /* Padding + font-size + line-height synced with
       `.tgl-content-archive__search` so filter pills and the search
       field render at exactly the same row height. Dark-green fill
       with white text + white border to hold contrast against the
       dark-green filter-section wrapper behind it. Min-width so the
       label + longest option ("All Locations" / "All topics") sit
       comfortably instead of hugging the caret. */
    min-width: 14rem;
    padding: 0.65rem 2.2rem 0.65rem 1.2rem;
    border: 1px solid #fff;
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
    font-family: var(--tgl-font-display);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.15s;
}
.tgl-content-archive__filter select:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}
/* Both /guides/ and /tools/ inherit the unified dark-green dropdown
   look. Per-format accents removed — the filter-section container
   now supplies the single brand-consistent surface for both. */
.tgl-content-archive__sort select {
    appearance: none;
    -webkit-appearance: none;
    /* Padding/font-size matched to `.tgl-content-archive__search` so the
       Sort pill sits at the same height as the search input beside it. */
    padding: 0.65rem 2rem 0.65rem 0.85rem;
    font-size: 0.9rem;
    line-height: 1.2;
    /* Same dark-green + white-border treatment as the filter selects
       above, so all four controls inside the filter-section read as
       one visual family. */
    border: 1px solid #fff;
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.4rem center;
    font-family: var(--tgl-font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.15s ease;
}
.tgl-content-archive__sort select:hover,
.tgl-content-archive__sort select:focus-visible {
    /* Brand hover rule: text → Light Green on the dark-green pill. */
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}
.tgl-content-archive__filter-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 0;
}
.tgl-content-archive__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--tgl-font-display);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    /* White — the wrapper sits on the dark-green filter-section, so the
       "Sort by" label needs to invert too. */
    color: #fff;
}
.tgl-content-archive__count {
    font-family: var(--tgl-font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

/* "All Tools" list */
.tgl-content-archive__list {
    list-style: none;
    padding: 0 1.5rem;
    margin: 0 auto 2rem;
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tgl-content-archive__list-row a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border-radius: 24px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(18,40,6,0.08);
    transition: box-shadow 0.2s;
}
.tgl-content-archive__list-row a:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.tgl-content-archive__list-row img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.tgl-content-archive__list-eyebrow {
    display: block;
    font-family: var(--tgl-font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--tgl-green-accent);
}
.tgl-content-archive__list-title {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    color: var(--tgl-green-dark);
    text-transform: uppercase;
}
.tgl-content-archive__list-arrow {
    margin-left: auto;
}

/* Newsletter inside content archive */
.tgl-content-archive .tgl-newsletter {
    margin: 2.5rem 1.5rem;
}
@media (min-width: 640px) {
    .tgl-content-archive .tgl-newsletter {
        margin: 2.5rem auto;
    }
}

/* Content card (shared between guides + tools) */
.tgl-content-card {
    list-style: none;
    /* Badge is now a sibling of `.__link` (was nested inside — invalid
       when the badge became a <button>). It's absolutely positioned
       over the thumb, so this element needs to establish the
       positioning context. */
    position: relative;
    /* Fill the grid cell so every card in a row shares the same total
       height regardless of title / excerpt length. Grid stretches the
       item vertically by default; `display: flex` here lets `.__link`
       inherit that stretched height. */
    display: flex;
    height: 100%;
}
.tgl-content-card__link {
    /* Flex column so the body can push the meta footer to the bottom
       with `margin-top: auto` (see .tgl-content-card__meta rule). */
    display: flex;
    flex-direction: column;
    width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.tgl-content-card__link:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.tgl-content-card__thumb-wrap {
    position: relative;
    overflow: hidden;
}
.tgl-content-card__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.tgl-content-card__thumb--placeholder {
    background: linear-gradient(135deg, #e8d0d4 0%, #f0dde0 100%);
}
.tgl-content-card__thumb--placeholder.tgl-content-card__thumb--guide {
    background: linear-gradient(135deg, #f5c9cc 0%, #fde4e5 100%);
}
.tgl-content-card__thumb--placeholder.tgl-content-card__thumb--tool {
    background: linear-gradient(135deg, #e8cfa0 0%, #f5e0c0 100%);
}

.tgl-content-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--tgl-font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 24px;
    line-height: 1.3;
    /* One brand-green badge for every format — consistent visual anchor
       across stories, guides, tools, and video cards. */
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    /* Reset default <button> styling — the followable variant renders as
       a `<button>` element. Non-follow variant stays a `<span>` and
       inherits these same visuals. */
    border: 0;
    cursor: default;
    text-decoration: none;
    z-index: 2;
}
/* Interactive follow-topic variant */
button.tgl-content-card__badge { cursor: pointer; }
button.tgl-content-card__badge:hover,
button.tgl-content-card__badge:focus-visible {
    background: var(--tgl-green-accent, #122806);
    outline: none;
}
button.tgl-content-card__badge:focus-visible {
    box-shadow: 0 0 0 3px rgba(207, 216, 119, 0.55);
}
/* Plus / check icon — CSS shows one based on data-tgl-follow-state. */
.tgl-content-card__badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 0.85em;
    line-height: 1;
}
.tgl-content-card__badge-plus,
.tgl-content-card__badge-check { display: none; }
.tgl-content-card__badge[data-tgl-follow-state="not"] .tgl-content-card__badge-plus { display: inline; }
.tgl-content-card__badge[data-tgl-follow-state="following"] .tgl-content-card__badge-check { display: inline; }
.tgl-content-card__badge[data-tgl-follow-state="following"] {
    background: var(--tgl-green-accent, #122806);
}
/* Legacy per-format modifiers kept as no-ops to preserve markup — the
   base rule above wins. Delete when confidence is high that nothing
   downstream depends on the pink/orange variants. */
.tgl-content-card__badge.badge--guide,
.tgl-content-card__badge.badge--tool,
.tgl-content-card__badge.badge--story {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}

.tgl-content-card__body {
    padding: 1rem 1.1rem 1.1rem;
    /* Fill the space below the thumb and expose a flex column so the
       meta footer can pin to the bottom via `margin-top: auto` — every
       card in a row lines its "By … · date" strip at the same y-pos
       regardless of title / excerpt length above it. */
    flex: 1;
    display: flex;
    flex-direction: column;
}
.tgl-content-card__title {
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--tgl-green-dark);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
/* Desktop bump — cards read too small at 0.85rem on wider screens. */
@media (min-width: 720px) {
    .tgl-content-card__title { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
    .tgl-content-card__title { font-size: 1.2rem; line-height: 1.3; }
}
.tgl-content-card__excerpt {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.65rem;
}
/* Meta footer — quiet single-line "By Author · Jun 26, 2026" strip.
   Uses flex + wrap so long names on narrow cards break cleanly instead
   of getting squished against the separator. */
.tgl-content-card__meta {
    display: flex;
    flex-wrap: wrap;
    /* `center` (was `baseline`) so the small circular avatar sits vertically
       centered against the "By {name} · date" text. Baseline-alignment
       anchored the avatar to its own bottom edge and sank the author
       group ~5–8px below the date. */
    align-items: center;
    gap: 0 0.35rem;
    font-family: var(--tgl-font-display);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
    /* `auto` (was `0.5rem`) pushes the meta to the bottom of the
       flex-column body — every card in a row lines its footer at the
       same y-position regardless of title / excerpt length above. */
    margin: auto 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(18, 40, 6, 0.08);
}
.tgl-content-card__meta > * { margin: 0; }
.tgl-content-card__author {
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
/* Small circular avatar in front of "By {name}". WP's get_avatar() outputs
   an <img> — clip to a circle, hold its size, and stop it inheriting the
   card's baseline quirks so it lines up with the name's cap-height. */
.tgl-content-card__avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
.tgl-content-card__meta-sep {
    color: var(--tgl-green-dark, #122806);
}
.tgl-content-card__date {
    color: var(--tgl-green-dark, #122806);
    font-variant-numeric: tabular-nums;
}

/* Responsive: content archive grids — capped at 2 columns even on wide
   screens. Larger cards make the excerpt + meta strip easy to scan, which
   fits the editorial browsing use case better than a tighter 3-4 up grid. */
@media (min-width: 720px) {
    .tgl-content-archive__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.tgl-about {
    font-family: var(--tgl-font-body);
}

/* Format band */
.tgl-about__format-band {
    background: var(--tgl-green-dark);
    color: var(--tgl-green-light);
    text-align: center;
    padding: 0.6rem 1rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
}

/* Hero */
.tgl-about__hero {
    background: linear-gradient(180deg, #CFD877 0%, #D3E5E4 100%);
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
}
.tgl-about__hero-title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    color: var(--tgl-green-dark);
    margin: 0 0 1rem;
    line-height: 1.15;
    text-transform: uppercase;
}
.tgl-about__hero-text {
    font-family: var(--tgl-font-serif);
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tgl-green-dark, #122806);
    max-width: 36rem;
    margin: 0 auto;
}

/* Section titles */
.tgl-about__section-title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 1.2rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    margin: 2rem 0 1.25rem;
}

/* History + Accordion */
.tgl-about__history {
    padding: 0 1.5rem 2rem;
    max-width: 720px;
    margin: 0 auto;
}

.tgl-about__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tgl-about__accordion-item {
    border-radius: 24px;
    overflow: hidden;
}
.tgl-about__accordion-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.25rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    color: var(--tgl-green-dark);
    text-transform: uppercase;
}
.tgl-about__accordion-item summary::-webkit-details-marker { display: none; }
.tgl-about__accordion-item summary::after {
    content: '∨';
    font-size: 1.2rem;
    font-weight: 700;
    transition: transform 0.2s;
}
.tgl-about__accordion-item[open] summary::after {
    content: '∧';
}

.tgl-about__accordion-body {
    padding: 0 1.25rem 1.25rem;
}
.tgl-about__accordion-body p {
    font-family: var(--tgl-font-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tgl-green-dark);
    margin: 0;
}

/* Accordion colour variants */
.tgl-about__accordion-item--green {
    background: #122806;
    color: var(--tgl-green-dark);
}
.tgl-about__accordion-item--green summary,
.tgl-about__accordion-item--green .tgl-about__accordion-body p {
    color: var(--tgl-green-dark);
}
.tgl-about__accordion-item--pink {
    background: #FDD7D8;
}
.tgl-about__accordion-item--orange {
    background: #EDC196;
}
.tgl-about__accordion-item--darkgreen {
    background: var(--tgl-green-dark);
}
.tgl-about__accordion-item--darkgreen summary {
    color: #fff;
}
.tgl-about__accordion-item--darkgreen summary::after {
    color: #fff;
}
/* Dark-green tab body — inherited p rule sets color to dark green
   which is invisible against the dark background. Force white for
   contrast. */
.tgl-about__accordion-item--darkgreen .tgl-about__accordion-body p {
    color: #fff;
}
.tgl-about__accordion-item--lime {
    background: #CFD877;
}
.tgl-about__accordion-item--violet {
    background: #C8CFE8;
}
.tgl-about__accordion-item--blue {
    background: #D3E5E4;
}

/* Team section */
.tgl-about__team {
    background: var(--tgl-green-dark);
    padding: 2rem 1.5rem 2.5rem;
    color: #fff;
}
.tgl-about__team-toggle {
    margin-bottom: 1.5rem;
}
.tgl-about__team-heading {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Center the header + chevron so the Our Team section matches
       the other blocks above/below it (which are all centered). */
    justify-content: center;
}
.tgl-about__team-heading::-webkit-details-marker { display: none; }
.tgl-about__team-heading::after {
    content: '▾';
    font-size: 0.9rem;
}
.tgl-about__team-toggle[open] .tgl-about__team-heading::after {
    content: '▴';
}

.tgl-about__team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
    max-width: 720px;
    /* Auto margins so the grid sits centered in the wide dark-green
       team section rather than pinned to the left. */
    margin: 0 auto 2rem;
    /* Align each card to the TOP of its row rather than stretching to
       the tallest sibling — otherwise cards with short bios look
       floaty because the photo drifts to the row's vertical middle. */
    align-items: start;
}

.tgl-about__member-photo-wrap {
    margin-bottom: 0.75rem;
}
.tgl-about__member-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 24px;
    display: block;
}
.tgl-about__member-photo--placeholder {
    background: rgba(255,255,255,0.1);
}
.tgl-about__member-role {
    display: block;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.25rem;
}
.tgl-about__member-name {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 0.15rem;
    text-transform: uppercase;
}
.tgl-about__member-pronouns {
    display: block;
    font-family: var(--tgl-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0.6rem;
}
.tgl-about__member-bio {
    font-family: var(--tgl-font-serif);
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    margin: 0 0 0.75rem;
}
.tgl-about__member-social {
    display: flex;
    gap: 0.4rem;
}
.tgl-about__social-dot {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}

/* Team sub-sections (Freelance, Advisory) */
.tgl-about__team-section {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 0.75rem 0;
}
.tgl-about__team-section summary {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tgl-about__team-section summary::-webkit-details-marker { display: none; }
.tgl-about__team-section summary::after {
    content: '▾';
    font-size: 0.9rem;
}
.tgl-about__team-section[open] summary::after {
    content: '▴';
}

/* CTA */
.tgl-about__cta {
    background: var(--tgl-green-dark);
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.tgl-about__cta-text {
    font-family: var(--tgl-font-serif);
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    max-width: 28rem;
    margin: 0 auto 1.5rem;
}
.tgl-about__cta-btn {
    display: inline-block;
    background: rgba(143,160,80,0.7);
    color: #fff;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    text-decoration: none;
    transition: background 0.15s;
}
.tgl-about__cta-btn:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

/* Who We Are */
.tgl-about__who {
    padding: 2.5rem 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}
.tgl-about__who-title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    text-transform: uppercase;
    text-align: center;
    color: var(--tgl-green-dark);
    margin: 0 0 1.5rem;
}

/* Letter from Our Team */
.tgl-about__letter {
    padding: 0 1.5rem 3rem;
    max-width: 720px;
    margin: 0 auto;
}
.tgl-about__letter-rule {
    border: 0;
    border-top: 3px solid var(--tgl-green-dark);
    margin: 0 0 2rem;
}
.tgl-about__letter-title {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 4vw, 1.6rem);
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    margin: 0 0 1.5rem;
}
.tgl-about__letter-body p {
    font-family: var(--tgl-font-serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--tgl-green-dark);
    margin: 0 0 1.25rem;
}
.tgl-about__letter-signature {
    text-align: center;
    margin-top: 3rem;
}
.tgl-about__letter-name {
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--tgl-green-dark);
    margin: 0 0 1rem;
}
.tgl-about__letter-role {
    font-family: var(--tgl-font-display);
    font-size: 0.9rem;
    color: var(--tgl-green-dark);
    margin: 0;
}
.tgl-about__letter-role em {
    font-family: var(--tgl-font-serif);
    font-style: italic;
}

/* Responsive */
@media (min-width: 720px) {
    .tgl-about__team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   EVENTS PAGE (page-events.php)
   ======================================== */

.tgl-events-page {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    /* Official brand `orange-pink.png` gradient — warm event-listing
       tone. Applied via body-level rule below so the gradient covers
       the full viewport (not just the max-width main container). */
    /* Same top padding as other archives so the shared page-header
       breathes below whatever strip/nav sits above it. */
    padding-top: 2.5rem;
}

/* Tools + Guides archive gradients moved to <body> — see the
   `body.tgl-format-tool` / `body.tgl-format-guide` rules near the
   top of this file. `<main>` intentionally has no background so
   the sitewide 6-bar stripe divider outside <main> shares the
   same canvas. */
/* Push the breathing room BELOW the newsletter into the container's own
   padding instead of the newsletter's margin. Padding is part of the
   container's box, so the gradient background fills the full space right
   up to the footer edge — no seam, no double-tint strip. */
.tgl-content-archive--tool .tgl-newsletter,
.tgl-content-archive--guide .tgl-newsletter {
    margin-bottom: 0;
}
.tgl-content-archive--tool,
.tgl-content-archive--guide {
    padding-bottom: 3rem;
}

/* Hero — dark green gradient */
.tgl-events-page__hero {
    background: linear-gradient(135deg, var(--tgl-green-dark, #122806) 0%, #122806 60%, #122806 100%);
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
}
.tgl-events-page__hero-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

/* Intro section */
.tgl-events-page__intro {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}
.tgl-events-page__intro-heading {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
}
.tgl-events-page__intro-text {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.65;
    color: #374151;
    margin: 0;
}

/* Search bar — capsule with visible border, matching design */
.tgl-events-page__search {
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 1.5rem auto 1.5rem;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(18,40,6,0.2);
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(18, 40, 6, 0.04);
    overflow: hidden;
}
.tgl-events-page__search-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-right: 1px solid #e5e7eb;
    padding: 0.9rem 0.85rem 0.9rem 1.1rem;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
}
.tgl-events-page__search-menu:hover { color: var(--tgl-green-dark, #122806); }
.tgl-events-page__search-menu:focus-visible,
.tgl-events-page__search-submit:focus-visible {
    outline: none;
    background: #f3f4f6;
}
.tgl-events-page__search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.9rem 0.75rem;
    color: #374151;
    min-width: 0;
}
.tgl-events-page__search-input:focus,
.tgl-events-page__search-input:focus-visible {
    outline: none;
    box-shadow: none;
}
.tgl-events-page__search:focus-within {
    border-color: var(--tgl-green-accent, #122806);
    box-shadow: 0 0 0 3px var(--tgl-focus-ring, rgba(61,122,28,0.45));
}
.tgl-events-page__search-input::placeholder { color: var(--tgl-green-dark, #122806); }
.tgl-events-page__search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-left: 1px solid #e5e7eb;
    padding: 0.9rem 1.1rem 0.9rem 0.85rem;
    color: #374151;
    cursor: pointer;
    flex-shrink: 0;
}
.tgl-events-page__search-submit:hover { color: var(--tgl-green-dark, #122806); }

/* Collapsible filters */
.tgl-events-page__filters {
    max-width: 600px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
    display: none;
}
.tgl-events-page__filters.is-open {
    display: block;
}
.tgl-events-page__filter-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.tgl-events-page__filter select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.85rem;
    color: #374151;
    background: #fff;
    cursor: pointer;
}
@media (min-width: 760px) {
    .tgl-events-page__filters {
        display: block;
    }
}

/* Section intro heading */
.tgl-events-page__section-intro {
    text-align: center;
    padding: 0 1.5rem 2rem;
    max-width: 640px;
    margin: 0 auto;
}
/* Left-align modifier — used on the "Past Events" header where the
   editorial ask is a page-hierarchy heading, not a centered marketing
   intro. Kept as a modifier so the shared class still supports both.
   `padding-left: 0` because the parent `.tgl-events-page__listing`
   already supplies the 1.5rem edge padding that lines up with the
   event card grid below. */
.tgl-events-page__section-intro--left {
    text-align: left;
    max-width: 1040px;
    margin-left: 0;
    margin-right: auto;
    padding-left: 0;
}.tgl-events-page__section-subtitle {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    font-weight: 400;
}

/* Events grid */
.tgl-events-page__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .tgl-events-page__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 960px) {
    .tgl-events-page__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Listing section spacing */
.tgl-events-page__listing {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-events-page__listing--past {
    margin-top: 3rem;
}

/* Past events heading */
.tgl-events-page__past-header {
    margin-bottom: 1.5rem;
}
.tgl-events-page__past-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}

/* ===================================================================
   Homepage layout demos — Style A (horizontal list) + Style B (tile grid)
   Both share the brand tokens; differ in figure orientation + density.
   =================================================================== */

.tgl-demo-section { margin-bottom: 3rem; }

/* ---------- Style A: image left, text right (horizontal cards) ----- */
.tgl-story-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 1rem;
}
.tgl-story-list__item {
    background: #fff;
    border: 1px solid var(--tgl-border, #e5e7eb);
    border-radius: 24px;
    overflow: hidden;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tgl-story-list__item:hover {
    border-color: var(--tgl-green-dark, #122806);
    box-shadow: 0 6px 20px rgba(18, 40, 6, .08);
    transform: translateY(-1px);
}
.tgl-story-list__link {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
    color: inherit;
    text-decoration: none;
}
.tgl-story-list__thumb {
    position: relative; overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: 4 / 3;
}
.tgl-story-list__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.tgl-story-list__item:hover .tgl-story-list__thumb img { transform: scale(1.03); }
.tgl-story-list__thumb--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tgl-green-light, #CFD877), var(--tgl-orange, #EDC196));
}
.tgl-story-list__body {
    padding: 1.1rem 1.25rem 1.1rem 0;
    display: flex; flex-direction: column; gap: .4rem;
    align-self: center;
}
.tgl-story-list__cat {
    font-family: var(--tgl-font-display); font-weight: 700;
    font-size: .68rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-story-list__title {
    margin: 0; font-family: var(--tgl-font-display);
    font-size: 1.3rem; line-height: 1.25; font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-story-list__meta {
    margin: 0; font-size: .82rem; color: var(--tgl-green-dark, #122806);
}
.tgl-story-list__excerpt {
    margin: .25rem 0 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem; line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
}
@media (max-width: 720px) {
    .tgl-story-list__link {
        grid-template-columns: 110px 1fr;
        gap: .85rem;
    }
    .tgl-story-list__body { padding: .85rem 1rem .85rem 0; }
    .tgl-story-list__title { font-size: 1.05rem; }
    .tgl-story-list__excerpt { display: none; }
}

/* ---------- Style B: image top, text below (2/4 col tile grid) ---- */
.tgl-story-tiles {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
@media (min-width: 900px) {
    .tgl-story-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tgl-story-tile {
    background: #fff;
    border: 1px solid var(--tgl-border, #e5e7eb);
    border-radius: 24px;
    overflow: hidden;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tgl-story-tile:hover {
    border-color: var(--tgl-green-dark, #122806);
    box-shadow: 0 6px 16px rgba(18, 40, 6, .08);
    transform: translateY(-2px);
}
.tgl-story-tile__link {
    display: flex; flex-direction: column;
    height: 100%;
    color: inherit; text-decoration: none;
}
.tgl-story-tile__thumb {
    position: relative; overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: 16 / 10;
}
.tgl-story-tile__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.tgl-story-tile:hover .tgl-story-tile__thumb img { transform: scale(1.04); }
.tgl-story-tile__thumb--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tgl-green-light, #CFD877), var(--tgl-orange, #EDC196));
}
.tgl-story-tile__body {
    padding: .85rem 1rem 1rem;
    display: flex; flex-direction: column; gap: .3rem;
    flex: 1;
}
.tgl-story-tile__cat {
    font-family: var(--tgl-font-display); font-weight: 700;
    font-size: .62rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-story-tile__title {
    margin: 0; font-family: var(--tgl-font-display);
    font-size: .98rem; line-height: 1.25; font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    /* clamp to 3 lines so tiles stay aligned */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    text-transform: uppercase;
}
.tgl-story-tile__meta {
    margin: 0; font-size: .76rem; color: var(--tgl-green-dark, #122806);
}
.tgl-story-tile__excerpt {
    margin: .15rem 0 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: .92rem; line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===================================================================
   Full-bleed feature rows — Style C (dark green) + Style D (orange)
   Break out of the 1040px page container; use the brand palette as
   the section ground so the title/image dominates.
   =================================================================== */
.tgl-feature-row {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding: 4rem 0;
}
.tgl-feature-row--green {
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-green-light, #CFD877);
}
.tgl-feature-row--orange {
    background: var(--tgl-orange, #EDC196);
    color: var(--tgl-green-dark, #122806);
}
.tgl-feature-row__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}
.tgl-feature-row--reverse .tgl-feature-row__inner {
    grid-template-columns: 1fr 1.1fr;
}
.tgl-feature-row--reverse .tgl-feature-row__media { order: 2; }

.tgl-feature-row__media {
    display: block;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
.tgl-feature-row__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
}
.tgl-feature-row__media:hover img { transform: scale(1.03); }
.tgl-feature-row__media--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tgl-green-light, #CFD877), var(--tgl-orange, #EDC196));
}

.tgl-feature-row__body { max-width: 540px; }
.tgl-feature-row__eyebrow {
    margin: 0 0 .85rem;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    opacity: .7;
}
.tgl-feature-row__cat {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 4px 10px;
    border-radius: 24px;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
}
.tgl-feature-row--green .tgl-feature-row__cat {
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-green-dark, #122806);
}
.tgl-feature-row--orange .tgl-feature-row__cat {
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-orange, #EDC196);
}
.tgl-feature-row__title {
    margin: 0 0 1.25rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.6rem);
    line-height: 1.05;
    text-transform: uppercase;
}
.tgl-feature-row__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .35s ease;
}
.tgl-feature-row__title a:hover { background-size: 100% 2px; }
.tgl-feature-row__excerpt {
    margin: 0 0 1.5rem;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.18rem;
    line-height: 1.55;
    opacity: .9;
}
.tgl-feature-row__cta {
    display: inline-block;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    padding: .75rem 1.4rem;
    border: 2px solid currentColor;
    border-radius: 24px;
    transition: background .2s ease, color .2s ease;
}
.tgl-feature-row--green .tgl-feature-row__cta:hover,
.tgl-feature-row--orange .tgl-feature-row__cta:hover {
    color: var(--tgl-green-light, #CFD877);
    border-color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

@media (max-width: 760px) {
    .tgl-feature-row { padding: 2.5rem 0; }
    .tgl-feature-row__inner,
    .tgl-feature-row--reverse .tgl-feature-row__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1.25rem;
    }
    .tgl-feature-row--reverse .tgl-feature-row__media { order: 0; }
    .tgl-feature-row__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
    .tgl-feature-row__excerpt { font-size: 1.05rem; }
}

/* ===================================================================
   Full-bleed multi-post bands — Style C (dark green) + Style D (orange).
   Single section header + 3-card grid against a brand-colored ground.
   =================================================================== */
.tgl-feature-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* No vertical margin — full-bleed coloured sections butt up against
       whatever's above/below them so the body gradient doesn't leak
       through between blocks. Inner spacing lives on `padding` instead. */
    margin-top: 0;
    margin-bottom: 0;
    padding: 4.5rem 0;
}
.tgl-feature-band--green {
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-green-light, #CFD877);
}
.tgl-feature-band--orange {
    background: var(--tgl-orange, #EDC196);
    color: var(--tgl-green-dark, #122806);
}
.tgl-feature-band__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 2rem;
}
.tgl-feature-band__head {
    margin: 0 0 2.5rem;
    max-width: 720px;
}
.tgl-feature-band__eyebrow {
    margin: 0 0 .65rem;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    opacity: .7;
}
.tgl-feature-band__title {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    line-height: 1.08;
    text-transform: uppercase;
}
.tgl-feature-band__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}
@media (max-width: 900px) {
    .tgl-feature-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .tgl-feature-band__card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .tgl-feature-band__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .tgl-feature-band__card:nth-child(3) { grid-column: auto; }
}
.tgl-feature-band__card {}
.tgl-feature-band__link {
    display: flex; flex-direction: column;
    color: inherit; text-decoration: none;
    gap: .65rem;
    transition: transform .2s ease;
}
.tgl-feature-band__link:hover { transform: translateY(-3px); }
.tgl-feature-band__thumb {
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    margin-bottom: .35rem;
}
.tgl-feature-band__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.tgl-feature-band__link:hover .tgl-feature-band__thumb img { transform: scale(1.04); }
.tgl-feature-band__thumb--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tgl-green-light, #CFD877), var(--tgl-orange, #EDC196));
}
.tgl-feature-band__cat {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 24px;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: .65rem;
    text-transform: uppercase;
}
.tgl-feature-band--green .tgl-feature-band__cat {
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-green-dark, #122806);
}
.tgl-feature-band--orange .tgl-feature-band__cat {
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-orange, #EDC196);
}
.tgl-feature-band__card-title {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.2;
    text-transform: uppercase;
}
.tgl-feature-band__excerpt {
    margin: 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.02rem;
    line-height: 1.5;
    opacity: .9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===================================================================
   Style C — Magazine spread (asymmetric: lead + side list)
   Reuses .tgl-feature-band ground (dark green / orange) but redefines
   the layout inside.
   =================================================================== */
.tgl-band-mag__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 2rem;
}
.tgl-band-mag__head { margin: 0 0 2.5rem; }
.tgl-band-mag__eyebrow {
    margin: 0 0 .65rem;
    font-family: var(--tgl-font-display);
    font-weight: 700; font-size: .7rem;
    text-transform: uppercase; opacity: .7;
}
.tgl-band-mag__title {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    line-height: 1.08;
    text-transform: uppercase;
}
.tgl-band-mag__layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    /* `start` so the right column is sized by its own aspect-ratio
       (see `.tgl-band-mag__list` below) — matches the left image
       height only, ignoring the title/excerpt underneath it. */
    align-items: start;
}
.tgl-band-mag__lead {
    display: block;
    color: inherit; text-decoration: none;
}
.tgl-band-mag__lead-image {
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 16 / 10;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
    margin-bottom: 1.25rem;
}
.tgl-band-mag__lead-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.tgl-band-mag__lead:hover .tgl-band-mag__lead-image img { transform: scale(1.04); }
.tgl-band-mag__lead-image--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tgl-green-light, #CFD877), var(--tgl-orange, #EDC196));
}
.tgl-band-mag__cat {
    display: inline-block; padding: 4px 10px;
    border-radius: 24px;
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display);
    font-weight: 700; font-size: .68rem;
    margin-bottom: .85rem;
    text-transform: uppercase;
}
.tgl-band-mag__cat--small { padding: 2px 8px; font-size: .6rem; margin-bottom: .35rem; }
.tgl-band-mag__lead-title {
    margin: 0 0 .65rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    text-transform: uppercase;
}
.tgl-band-mag__lead-excerpt {
    margin: 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.12rem; line-height: 1.55;
    opacity: .9;
}
.tgl-band-mag__list {
    list-style: none; padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    /* Aspect-ratio math to match the LEFT lead image's height only
       (excluding its title/excerpt underneath). Image is 16:10 in
       the 1.4fr column and the list sits in the 1fr column:
         image height = (1.4 × unit) × (10/16) = 0.875 unit
         list width   = 1 unit
       So list aspect = 1 / 0.875 ≈ 8/7. Independent of viewport. */
    aspect-ratio: 8 / 7;
    justify-content: space-between;
    gap: 1rem;
}
.tgl-band-mag__list-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    align-items: center;
    color: inherit; text-decoration: none;
    /* Borders removed — items distribute evenly across the column
       height and the whitespace itself does the separating. */
    padding: 0;
    /* Each item grows to share the available height equally. */
    flex: 1 1 0;
    min-height: 0;
}
/* Hover brightens titles to white instead of the global mid-green (which would
   dim into the dark-green band background). */
.tgl-feature-band--green a { transition: color .2s ease; }
.tgl-feature-band--green a:hover,
.tgl-feature-band--green a:focus { color: #fff; }
.tgl-band-mag__lead:hover .tgl-band-mag__lead-title,
.tgl-band-mag__list-item:hover .tgl-band-mag__list-title { color: #fff; }
.tgl-band-mag__list-thumb {
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 4 / 3;
    background: rgba(255,255,255,0.06);
}
.tgl-band-mag__list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tgl-band-mag__list-thumb--placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--tgl-green-light, #CFD877), var(--tgl-orange, #EDC196));
}
.tgl-band-mag__list-title {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    text-transform: uppercase;
}
@media (max-width: 760px) {
    .tgl-band-mag__layout { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===================================================================
   Style D — Poster cards (tall vertical cards, headline over image)
   =================================================================== */
.tgl-poster-band__inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 2rem;
}
.tgl-poster-band__head { margin: 0 0 2.5rem; }
.tgl-poster-band__eyebrow {
    margin: 0 0 .65rem;
    font-family: var(--tgl-font-display);
    font-weight: 700; font-size: .7rem;
    text-transform: uppercase; opacity: .7;
}
.tgl-poster-band__title {
    margin: 0;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.85rem, 3.6vw, 2.85rem);
    line-height: 1.08;
    text-transform: uppercase;
}
.tgl-poster-grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.tgl-poster-card { position: relative; }
.tgl-poster-card__link {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 24px;
    text-decoration: none;
    color: #fff;
    background: var(--tgl-green-dark, #122806);
    box-shadow: 0 20px 50px rgba(18, 40, 6, 0.2);
    transition: transform .25s ease;
}
.tgl-poster-card__link:hover { transform: translateY(-4px); }
.tgl-poster-card__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
}
.tgl-poster-card__link:hover .tgl-poster-card__img { transform: scale(1.05); }
.tgl-poster-card__img--placeholder {
    background: linear-gradient(135deg, var(--tgl-green-dark, #122806), var(--tgl-green-light, #CFD877));
}
.tgl-poster-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(18,40,6,0) 35%,
        rgba(18,40,6,0.55) 65%,
        rgba(18,40,6,0.92) 100%);
}
.tgl-poster-card__cat {
    position: absolute; top: 1rem; left: 1rem;
    padding: 4px 10px;
    border-radius: 24px;
    background: var(--tgl-orange, #EDC196);
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display);
    font-weight: 700; font-size: .65rem;
    text-transform: uppercase;
}
.tgl-poster-card__body {
    position: absolute;
    left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
    color: #fff;
}
.tgl-poster-card__title {
    margin: 0 0 .5rem;
    font-family: var(--tgl-font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    line-height: 1.18;
    color: #fff;
    text-transform: uppercase;
}
.tgl-poster-card__excerpt {
    margin: 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: .95rem; line-height: 1.4;
    color: rgba(255,255,255,0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 760px) {
    .tgl-poster-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .tgl-poster-card__link { aspect-ratio: 4 / 3; }
}

/* ===================================================================
   Author byline component — single source of truth for "who wrote this"
   strips. Loaded via get_template_part('template-parts/author-byline').
   =================================================================== */
.tgl-byline {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin: 1rem 0;
}
.tgl-byline__avatar-link {
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
    border-radius: 24px;
    overflow: hidden;
}
.tgl-byline__avatar {
    flex-shrink: 0;
    display: block;
    border-radius: 24px;
    object-fit: cover;
    /* width + height come from get_avatar's HTML attributes — don't override */
    max-width: 100%;
    height: auto;
}
.tgl-byline__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    text-align: left;
}
.tgl-byline__body,
.tgl-byline__body * { text-align: left; }
.tgl-byline__name {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    line-height: 1.2;
}
.tgl-byline__name:hover,
.tgl-byline__name:focus-visible {
    color: var(--tgl-green-accent, #122806);
    /* Sitewide `a:hover { text-decoration: underline }` also fires on
       mobile tap-persist. Byline names never underline — the pill
       already telegraphs interactivity. */
    text-decoration: none;
}
.tgl-byline__subline {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: .82rem;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.3;
    text-transform: none;
}
.tgl-byline__actions { flex-shrink: 0; margin-left: auto; }

/* ---- Variants -------------------------------------------------- */
.tgl-byline--compact { gap: .55rem; margin: .5rem 0; }
.tgl-byline--compact .tgl-byline__name { font-size: .72rem; }
.tgl-byline--compact .tgl-byline__subline { font-size: .72rem; }

.tgl-byline--large { gap: 1rem; padding: 1rem 0; }
.tgl-byline--large .tgl-byline__name { font-size: 1rem; }
.tgl-byline--large .tgl-byline__subline { font-size: .9rem; }

/* Card: pill-shaped tinted container — for "creator strip" callouts
   (author pages, Tool/Guide bylines, anywhere the author IS the focal point).
   Pale brand-green tint so it sits softly on any background. Centered when
   used standalone via the .tgl-byline--centered modifier. */
.tgl-byline--card {
    /* Full brand Light Green — was a 28% wash which read as an
       off-palette washed-out olive. */
    background: var(--tgl-green-light, #CFD877);
    border-radius: 24px;
    padding: .85rem 1.25rem .85rem 1rem;
    gap: 1rem;
    max-width: 560px;
}
.tgl-byline--card.tgl-byline--centered { margin-left: auto; margin-right: auto; }

/* Mobile: on the byline pill (author card + follow button), lay out as
   a 2-column grid so the Follow button sits UNDER the name, in-line with
   the avatar column (compact — avatar stays vertically centered across
   both rows). Keeps the pill short vs. the earlier stacked-button
   layout that took a full extra row.
   Trigger under 480px — narrower than the iPhone-standard portrait
   width — so tablets and larger keep the horizontal layout. */
@media (max-width: 480px) {
    .tgl-byline--card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "avatar body"
            "avatar actions";
        align-items: center;
        column-gap: 0.85rem;
        row-gap: 0.5rem;
    }
    .tgl-byline--card > .tgl-byline__avatar,
    .tgl-byline--card > .tgl-byline__avatar-link,
    .tgl-byline--card > img.tgl-byline__avatar {
        grid-area: avatar;
        align-self: center;
    }
    .tgl-byline--card > .tgl-byline__body {
        grid-area: body;
    }
    .tgl-byline--card > .tgl-byline__actions {
        grid-area: actions;
        margin: 0 auto 0 0 !important;
        justify-self: start !important;
        width: max-content !important;
        max-width: 100%;
        text-align: left;
    }
    .tgl-byline--card .tgl-byline__actions .tgl-follow-btn {
        width: auto !important;
        display: inline-flex;
        margin: 0 !important;
    }
}

/* Byline-group: één green-pill container. Auteurs stapelen VERTICAAL
   binnen — geen risico op cramming met Follow-knop / lange namen.
   Optionele section-label ("Reported by") staat er boven. */
.tgl-issue__part-byline {
    max-width: 560px;
    margin: 1.5rem auto;
    background: var(--tgl-green-light, #CFD877);
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tgl-issue__part-byline-group {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.tgl-issue__part-byline-label {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    opacity: .75;
    margin-bottom: .1rem;
}
/* Elke auteur-card binnen: transparent, avatar links, tekst rechts,
   Follow-knop rechts ernaast (nooit óver de tekst heen). */
.tgl-issue__part-byline .tgl-byline--card {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: none;
    box-shadow: none;
    border: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
}
.tgl-issue__part-byline .tgl-byline__body { min-width: 0; }
.tgl-issue__part-byline .tgl-byline__actions {
    margin-left: 0;
    flex-shrink: 0;
}
/* Avatar: perfect rond 64px, focus op gezicht, harde overrides omdat
   AJ-plugin CSS + theme's `height: auto` de img anders platslaan. */
.tgl-issue__part-byline .tgl-byline__avatar-link,
.tgl-issue__part-byline .tgl-byline__avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    flex: 0 0 64px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.tgl-issue__part-byline .tgl-byline__avatar {
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
/* AJ pill zit op een licht-groene achtergrond — een kleur-shift op hover
   maakt de naam onleesbaar. Neutraliseer alle hover/focus-styling. */
.tgl-issue__part-byline .tgl-byline__name,
.tgl-issue__part-byline .tgl-byline__name:hover,
.tgl-issue__part-byline .tgl-byline__name:focus,
.tgl-issue__part-byline .tgl-byline__name:focus-visible,
.tgl-issue__part-byline .tgl-byline__avatar-link:hover,
.tgl-issue__part-byline .tgl-byline__avatar-link:focus-visible {
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    opacity: 1;
}
@media (max-width: 480px) {
    /* Op smalle mobiel: Follow-knop op eigen regel onder de naam. */
    .tgl-issue__part-byline .tgl-byline--card {
        grid-template-columns: auto 1fr;
    }
    .tgl-issue__part-byline .tgl-byline__actions {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
.tgl-byline--card .tgl-byline__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    /* Base .tgl-byline__name already sets uppercase + tracking — keep
       the brand-rule (Libre Franklin bold → uppercase) intact here. */
}
.tgl-byline--card .tgl-byline__subline {
    font-size: .92rem;
    color: var(--tgl-green-dark, #122806);
    margin-top: 1px;
}
.tgl-byline--card .tgl-byline__actions { margin-left: auto; }
.tgl-byline--card .tgl-byline__actions .button,
.tgl-byline--card .tgl-byline__actions button,
.tgl-byline--card .tgl-byline__actions a.tgl-btn {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    padding: 8px 22px;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    text-transform: uppercase;
}
.tgl-byline--card .tgl-byline__actions .button:hover,
.tgl-byline--card .tgl-byline__actions button:hover,
.tgl-byline--card .tgl-byline__actions a.tgl-btn:hover {
    color: var(--tgl-green-light, #CFD877);
}
@media (max-width: 480px) {
    .tgl-byline--card { padding: .7rem .9rem; gap: .65rem; }
    .tgl-byline--card .tgl-byline__name { font-size: .95rem; }
}

/* Inline: single horizontal row "[avatar] Name · subline" — for article
   headers and card meta strips where the byline is supporting text, not a
   primary block. No uppercase shouting; reads like a sentence. */
.tgl-byline--inline { gap: .5rem; margin: .35rem 0; align-items: center; }
.tgl-byline--inline .tgl-byline__body {
    flex-direction: row; align-items: baseline;
    gap: .4rem; flex-wrap: wrap;
}
.tgl-byline--inline .tgl-byline__name {
    font-size: .9rem;
    /* Brand rule: Libre Franklin bold → uppercase. Base
       .tgl-byline__name already sets it — keep the inline
       variant consistent. */
    font-weight: 700;
}
.tgl-byline--inline .tgl-byline__subline {
    font-size: .85rem;
    color: var(--tgl-green-dark, #122806);
}
/* Insert a · separator BEFORE the subline when both render in inline mode. */
.tgl-byline--inline .tgl-byline__name + .tgl-byline__subline::before {
    content: "·";
    margin-right: .4rem;
    color: var(--tgl-green-dark, #122806);
    opacity: .6;
}

/* Mobile: name + subline can wrap; actions stay top-right */
@media (max-width: 480px) {
    .tgl-byline__name { font-size: .78rem; }
    .tgl-byline__subline { font-size: .76rem; }
}

/* Date strip that lives alongside a byline component (story-single, list
   pages that use the shared byline template part). Content-card dates are
   handled by the meta-footer rules further up — the __date selector here
   is scoped away from content-card to avoid double-styling. */
.tgl-story-card__date {
    margin: .15rem 0 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: .78rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-hero__date {
    display: inline-block;
    margin-left: .5rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: .85rem;
    color: var(--tgl-green-dark, #122806);
}

/* ===================================================================
   Author archive — /author/{slug}/  — single source of truth for the
   public author page. Two full-bleed dark-green bands wrap a white hero
   card + a list of posts.
   =================================================================== */
.tgl-author-page { color: var(--tgl-green-dark, #122806); }

/* ---- Top band + hero card --------------------------------------- */
.tgl-author-hero { margin: 0 0 2.5rem; }
.tgl-author-hero__band,
.tgl-author-works__band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    text-align: center;
    padding: 1rem 1rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}
.tgl-author-works__band em { font-style: normal; font-weight: 700; }

.tgl-author-hero__inner {
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
}
.tgl-author-hero__avatar {
    width: 220px; height: 220px;
    margin: 0 auto 1rem;
    border-radius: 24px;
    overflow: hidden;
    background: #eef0e6;
    line-height: 0;
}
.tgl-author-hero__img,
.tgl-author-hero__avatar img {
    width: 100% !important; height: 100% !important;
    object-fit: cover;
    border-radius: 24px;
}
.tgl-author-hero__socials {
    list-style: none; padding: 0;
    margin: 1.25rem 0 1.5rem;
    display: flex; justify-content: center; gap: .75rem;
}
.tgl-author-hero__socials a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 24px;
    background: rgba(207, 216, 119, 0.45); /* light-green tint */
    transition: background .15s;
}
.tgl-author-hero__socials a:hover { background: rgba(207, 216, 119, 0.85); }

.tgl-author-hero__name {
    margin: 0 0 .75rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.1;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-author-hero__eyebrow {
    margin: 0 0 1.25rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
}
.tgl-author-hero__bio {
    max-width: 38em;
    margin: 0 auto 1.5rem;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tgl-green-dark, #122806);
}

/* ---- "{Name}'s Work" band + post list --------------------------- */
.tgl-author-works { margin: 0 0 3rem; }
.tgl-author-works__band { padding: 1rem 1rem; }

/* Author archive now reuses the shared content-card template part, so
   the per-card visuals live in .tgl-content-card__* (elsewhere in this
   file). This selector only handles the grid layout: 2 cols on desktop,
   1 col on mobile — and cascades equal-height flex behaviour into the
   cards so a longer title on one doesn't leave the other visually
   short. Same pattern as the homepage lead-stack. */
.tgl-author-works__grid {
    list-style: none;
    padding: 0;
    margin: 2rem auto 0;
    max-width: 1040px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 760px) {
    .tgl-author-works__grid { grid-template-columns: repeat(2, 1fr); }
}
.tgl-author-works__grid > .tgl-content-card { display: flex; }
.tgl-author-works__grid .tgl-content-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tgl-author-works__grid .tgl-content-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.tgl-author-works__grid .tgl-content-card__meta { margin-top: auto; }
.tgl-author-works__empty {
    max-width: 720px;
    margin: 2rem auto;
    color: var(--tgl-green-dark, #122806);
    text-align: center;
    font-style: italic;
}

@media (max-width: 560px) {
    .tgl-author-hero__avatar { width: 160px; height: 160px; }
    .tgl-author-hero__inner { padding: 2rem 1rem 2.25rem; }
}

/* ===================================================================
   Membership Benefits page — /membership-benefits/
   Stacked tier cards with brand-accented backgrounds, group + non-member
   sections at the bottom. Mirrors the Figma marketing layout.
   =================================================================== */
.tgl-benefits {
    max-width: 720px;
    margin: 2.5rem auto 4rem;
    padding: 0 1.25rem;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
}
.tgl-benefits__intro { text-align: center; margin: 0 0 2.5rem; }
.tgl-benefits__eyebrow {
    margin: 0 0 .35rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700; font-size: .72rem;
    text-transform: uppercase; color: rgba(18,40,6,.6);
}
.tgl-benefits__title {
    margin: 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.15;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}

/* Tier card wrapper — each tier sits on its own brand-tinted band */
.tgl-benefits__tier { margin: 0 0 2rem; }
.tgl-benefits__tier-card {
    position: relative;
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
}
.tgl-benefits__tier--kennedy .tgl-benefits__tier-card { background: rgba(247, 194, 153, 0.35); /* light orange */ }
.tgl-benefits__tier--bloor   .tgl-benefits__tier-card { background: rgba(247, 194, 153, 0.55); /* deeper orange */ }
.tgl-benefits__tier--kipling .tgl-benefits__tier-card { background: rgba(207, 216, 119, 0.45); /* light green */ }

.tgl-benefits__badge {
    position: absolute; top: -.6rem; right: 1.25rem;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 3px 10px;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700; font-size: .68rem;
    text-transform: uppercase;
}

.tgl-benefits__tier-label {
    margin: 0 0 .25rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-benefits__tier-price {
    margin: 0 0 .85rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-benefits__tier-pitch {
    margin: 0 auto 1.25rem;
    max-width: 32em;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
}
.tgl-benefits__tier-cta {
    display: inline-block;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    padding: 11px 28px;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700; font-size: .92rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
    text-transform: uppercase;
}
.tgl-benefits__tier-cta:hover { color: var(--tgl-green-light, #CFD877); text-decoration: none; }
.tgl-benefits__tier-cta--secondary {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    border: 2px solid var(--tgl-green-dark, #122806);
}
.tgl-benefits__tier-cta--secondary:hover {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-benefits__tier-perks-heading {
    margin: 1.5rem 0 .5rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700; font-size: .85rem; text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
}
.tgl-benefits__tier-perks {
    list-style: none; padding: 0; margin: 0 auto;
    max-width: 28em;
    text-align: left;
}
.tgl-benefits__tier-perks li {
    position: relative;
    padding: .35rem 0 .35rem 1.5rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    border-bottom: 1px solid rgba(18,40,6,0.08);
}
.tgl-benefits__tier-perks li:last-child { border-bottom: 0; }
.tgl-benefits__tier-perks li::before {
    content: "✓";
    position: absolute; left: 0; top: .35rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
}

/* Group memberships */
.tgl-benefits__group {
    margin: 3rem 0;
    padding: 2rem 1.5rem;
    text-align: center;
}
/* When the shared `.tgl-hr` divider sits directly above, its own
   2rem bottom margin already carries the section-break — cancel the
   group's top margin+padding so the two don't stack (was reading as
   ~7rem of dead space). */
.tgl-hr + .tgl-benefits__group {
    margin-top: 0;
    padding-top: 0;
}
.tgl-hr + .tgl-benefits__notready,
.tgl-band-stripes + .tgl-benefits__notready {
    margin-top: 0;
    padding-top: 2.5rem;
}
.tgl-benefits__group-title {
    margin: 0 0 .85rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800; font-size: 1.4rem;
    text-transform: uppercase;
}
.tgl-benefits__group a { color: var(--tgl-green-dark, #122806); }

/* What non-members get */
.tgl-benefits__non-members { margin: 3rem 0 0; text-align: center; }
.tgl-benefits__non-members-title {
    margin: 0 0 .5rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800; font-size: 1.4rem;
    text-transform: uppercase;
}
.tgl-benefits__non-members-sub {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
}
.tgl-benefits__non-members-list {
    list-style: none; padding: 0;
    margin: 1.25rem auto 1.75rem;
    max-width: 28em;
    text-align: left;
}
.tgl-benefits__non-members-list li {
    padding: .35rem 0 .35rem 1.5rem;
    position: relative;
    font-size: .95rem; line-height: 1.45; color: var(--tgl-green-dark, #122806);
}
.tgl-benefits__non-members-list li::before {
    content: "·"; position: absolute; left: .35rem; top: .1rem;
    font-weight: 700; font-size: 1.4rem;
    color: var(--tgl-green-dark, #122806);
}

/* === Mobile nav: expandable items (Walker_Nav_Menu output) ===
   Row is `position: relative` so the chevron can be absolutely
   positioned to the RIGHT of the row without joining the flex
   flow. That keeps the label truly centered in the panel's
   column-flex, independent of whether the chevron exists — labels
   line up between items-with-children and items-without. */
.tgl-mobile-nav__item--has-children {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0;
    width: 100%;
}
.tgl-mobile-nav__item--has-children > .tgl-mobile-nav__sublist {
    /* Sublist still wraps to its own row beneath the label. */
    flex-basis: 100%;
}
.tgl-mobile-nav__expand {
    /* Absolute-anchored to the right edge of the row so it never
       shifts the label off-center. Vertically centered via top:50%
       + translate. */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 8px 10px;
    cursor: pointer;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    transition: background 0.15s ease;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    font-size: 1.4rem;
    font-weight: 800;
}
.tgl-mobile-nav__expand:hover,
.tgl-mobile-nav__expand:focus-visible {
    background: rgba(255, 255, 255, 0.08);
}
/* +/- toggle glyph — brand-wide pattern shared with
   .tgl-accordion__chevron. Base state renders `+` via ::before;
   flips to `−` when the parent button is expanded. */
.tgl-mobile-nav__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    color: #fff;
    line-height: 1;
    position: relative;
}
.tgl-mobile-nav__chevron::before {
    content: "+";
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1;
    color: currentColor;
}
.tgl-mobile-nav__expand[aria-expanded="true"] .tgl-mobile-nav__chevron::before {
    content: "−";
}
.tgl-mobile-nav__sublist {
    list-style: none;
    margin: 6px 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}
.tgl-mobile-nav__sublist[hidden] { display: none; }
/* Child rows match parent typography — same font, same white, same bold —
   so the submenu reads as part of the same menu. Slightly smaller and
   lighter so you can still tell parent from child at a glance. */
.tgl-mobile-nav__item--child > .tgl-mobile-nav__link {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    line-height: 1.2;
}
.tgl-mobile-nav__item--child > .tgl-mobile-nav__link:hover,
.tgl-mobile-nav__item--child > .tgl-mobile-nav__link:focus-visible {
    /* Match the parent-item hover — brand Light Green flip on the
       dark-green overlay so subitems get the same feedback. */
    color: var(--tgl-green-light, #CFD877);
}

/* Section heading — divides base menu from the appended "My account"
   items when the viewer is signed in. Non-interactive, sits between
   the last base item and the first account item. */
.tgl-mobile-nav__item--section-heading {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center;
}
.tgl-mobile-nav__section-label {
    display: inline-block;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    padding: 0.35rem 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
    .tgl-mobile-nav__chevron { transition: none; }
}

/* ================================================================
   Guides highlight block — homepage insertion between Action Journey
   and Recommended. Soft top-to-bottom gradient intro, dark-green band,
   two-column grid of guide cards.
   ================================================================ */

.tgl-guides-highlight {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 0;
    /* Zero bottom margin so the dark-green strip sits flush against
       the footer — a `2rem` gap here showed the body-gradient
       peeking through as a light bar right before the footer. */
    margin-bottom: 0;
    /* Whole strip on dark green so title + description + CTA read
       as one editorial block, matching the top magazine band. */
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-green-light, #CFD877);
    padding-bottom: 3rem;
}
.tgl-guides-highlight__intro {
    background: transparent;   /* parent supplies the dark green */
    text-align: left;
    max-width: 1040px;
    margin: 0 auto;
    padding: 4rem 1.5rem 2rem;
}.tgl-guides-highlight__desc {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.55;
    max-width: 560px;
    margin: 0 0 1.75rem;
    color: #fff;
}
.tgl-guides-highlight__cta {
    display: inline-block;
    /* Inverted CTA — light-green pill on dark background, still
       reads as a solid button. Hover flips to a lighter tone.
       Padding/font-size matched to .tgl-issues__cta ("Explore the
       issue") — colour/border varies per surface, geometry does not. */
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-green-dark, #122806);
    padding: 0.7rem 1.5rem;
    border-radius: 24px;
    text-decoration: none;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    transition: background 0.15s ease;
    text-transform: uppercase;
}
.tgl-guides-highlight__cta:hover,
.tgl-guides-highlight__cta:focus-visible {
    /* Light-Green bg base — text→LGreen would be invisible, keep dark
       green + add a 2px inset dark-green ring as typographic hover
       feedback (bg-swap forbidden per brand rule). */
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
    text-decoration: none;
}

/* Top-of-homepage magazine strip — slimmer than default
   `.tgl-feature-band { padding: 4.5rem 0 }` so it doesn't dominate
   the fold on desktop. */
.tgl-band-mag--top { padding: 2.5rem 0 2rem; }

/* .tgl-guides-highlight__band + __band-title inherit their look from the
   shared .tgl-band / .tgl-band__title classes composed on the same
   element — one look, one place to change it. */

/* "The latest / See all" tab-row — mirrors .tgl-issues__tabs from
   the Action Journey section, adapted for the dark-green surface
   (white text + white hairline instead of dark-green versions). */
.tgl-guides-highlight__tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Match the inner content-width of `.tgl-guides-highlight__intro`
       + `__grid` (both use max-width 1040px + 1.5rem horizontal
       padding). Without the horizontal padding on the tabs the row
       reads wider than the copy above + grid below. */
    /* 1040px − 2 × 1.5rem padding on the intro/grid = 992px inner
       content width. Setting the tabs' OUTER width to the same value
       (with zero padding) lines the border-bottom up exactly under
       the intro copy above and the guides grid below. */
    max-width: calc(1040px - 3rem);
    margin: 0 auto 1.5rem;
    padding: 0 0 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
/* Mobile — the desktop max-width calc collapses the tabs strip flush
   to the viewport edge on narrow screens. Add the same 1.5rem side
   gutter the intro copy uses so THE LATEST / SEE ALL don't touch the
   browser rand. */
@media (max-width: 720px) {
    .tgl-guides-highlight__tabs {
        max-width: none;
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }
}
.tgl-guides-highlight__tab {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: #fff;
    text-decoration: none;
}
/* Hover only applies to the NON-active tab (which is a real link).
   The active tab renders as a <span> without an href, so a color
   shift on it would falsely suggest interactivity. */
.tgl-guides-highlight__tab:not(.is-active):hover,
.tgl-guides-highlight__tab:not(.is-active):focus-visible {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-guides-highlight__grid {
    max-width: 1040px;
    margin: 0 auto;
    /* Top padding tightened — was 2.5rem, added air below the
       "Recommended Guides" band that sits right above the cards. */
    padding: 1.25rem 1.5rem 1rem;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

@media (max-width: 720px) {
    .tgl-guides-highlight__intro { padding: 2.75rem 1.25rem 3.5rem; }
    .tgl-guides-highlight__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 1.75rem 1rem 0.5rem;
    }
}

/* ================================================================
   Shared brand-band component — one look, used everywhere.
   Full-bleed dark green strip with centered uppercase display-font
   heading. Live in the section header where the eyebrow tells the
   reader what block they're in ("Recommended For You", "Recommended
   Guides", tools/guides/videos archive labels). Applied as an extra
   class alongside existing hooks so we don't have to rewrite every
   template — just append `tgl-band` / `tgl-band__title` in the markup
   and drop any conflicting local overrides. */
.tgl-band {
    background: var(--tgl-green-dark, #122806);
    padding: 1rem 1.5rem;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}
.tgl-band__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
    font-style: normal;
    line-height: 1.25;
}

/* ================================================================
   Lead stack — three secondary story cards directly under the hero.
   Desktop: 3-up grid at 1040px content width. Mobile: single column
   stacked. Uses the shared .tgl-content-card component so hover, meta,
   and typography match every other card grid on the site.
   ================================================================ */

.tgl-lead-stack {
    max-width: 1040px;
    margin: 2.5rem auto 3rem;
    padding: 0 1.5rem;
}
.tgl-lead-stack__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    /* Force every card in the row to share the tallest card's height so a
       longer title on one card doesn't leave the other two visually short.
       Grid auto-stretches items vertically by default, but only the outer
       <li> — the inner card `<a>` still hugged its content, exposing a
       trailing gap. Cascading flex on the card + flex-grow on the body
       pushes the meta strip flush to the bottom of the tallest card. */
    align-items: stretch;
}
.tgl-lead-stack__grid > .tgl-content-card { display: flex; }
.tgl-lead-stack__grid .tgl-content-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.tgl-lead-stack__grid .tgl-content-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.tgl-lead-stack__grid .tgl-content-card__meta {
    margin-top: auto;
}
@media (max-width: 760px) {
    .tgl-lead-stack { margin: 1.5rem auto 2rem; padding: 0 1rem; }
    .tgl-lead-stack__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* Inline legal notice under the newsletter pill — Privacy Policy link
   in the same white-ish tint as the intro copy, kept small so it never
   competes with the CTA. Rendered on the shared template-part so both
   footer + article-tail versions carry it. */
.tgl-newsletter__notice {
    margin: 0.85rem auto 0;
    max-width: 520px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}
.tgl-newsletter__notice a { color: #fff; text-decoration: underline; }
.tgl-newsletter__notice a:hover { color: var(--tgl-light-green, #CFD877); }

/* ================================================================
   Header row 2 — desktop nav strip.
   Sits below .tgl-header__bar (which is sticky). This strip is NOT
   sticky, so it scrolls away as the reader dives into the page —
   maximum vertical reading space. Nav remains reachable via the
   hamburger in row 1. Hidden entirely on <900px viewports where the
   hamburger overlay covers this role.
   ================================================================ */
.tgl-header__nav {
    display: none; /* mobile-first: hidden until desktop breakpoint */
    background: #EAE0DE;
    border-top: 1px solid rgba(18, 40, 6, 0.08);
}
@media (min-width: 900px) {
    .tgl-header__nav { display: block; }
}
.tgl-header__nav-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.tgl-header__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    height: 44px;
}
.tgl-header__nav-list a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 2px;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
    /* Never wrap the label / dropdown caret onto a new line. */
    white-space: nowrap;
}
.tgl-header__nav-list a:hover,
.tgl-header__nav-list a:focus-visible {
    /* Hover: 3px dark-green bar at the bottom (matches active state).
       Rendered via `box-shadow` inset so it doesn't fight the `::after`
       pseudo that carries the dropdown caret on menu-item-has-children. */
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    box-shadow: inset 0 -3px 0 var(--tgl-green-dark, #122806);
}
/* Active-section indicator — dark-green underline. Matches WP's automatic
   `current-menu-item` / `current-menu-parent` classes on wp_nav_menu output,
   so no PHP-side wiring needed. */
.tgl-header__nav-list .current-menu-item > a,
.tgl-header__nav-list .current-menu-parent > a,
.tgl-header__nav-list .current-menu-ancestor > a {
    color: var(--tgl-green-dark, #122806);
}
.tgl-header__nav-list > li.current-menu-item > a,
.tgl-header__nav-list > li.current-menu-parent > a,
.tgl-header__nav-list > li.current-menu-ancestor > a {
    /* Active-section indicator — same 3px bar as hover, drawn via
       inset box-shadow so it doesn't consume the `::after` pseudo
       (which the caret on `.menu-item-has-children > a` uses).
       Scoped to DIRECT children of the top-level `<ul>` so the bar
       never shows on sub-menu items (they inherit `.current-menu-item`
       when the user is on their page but shouldn't get the bar). */
    box-shadow: inset 0 -3px 0 var(--tgl-green-dark, #122806);
}

/* ---- Desktop dropdowns (one level, e.g. Resources → Guides/Tools/...) ----
   WP's wp_nav_menu emits nested <ul class="sub-menu"> inside <li> for
   depth ≥ 2 items. Show it on hover / keyboard focus, no JS. */
.tgl-header__nav-list li {
    position: relative;
}
.tgl-header__nav-list .menu-item-has-children > a::after {
    /* Absolutely positioned OUTSIDE the anchor box (right: -1em)
       so the anchor's width equals the label's width. That keeps
       the hover/active bar sitting under the LABEL only, and lets
       the sub-menu (`left: 50%; translateX(-50%)`) centre on the
       label instead of on the label+caret combo. */
    content: "+";
    position: absolute;
    right: -1em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.95em;
    line-height: 1;
    opacity: 0.65;
    pointer-events: none;
}
.tgl-header__nav-list .sub-menu {
    /* Anchored to the parent <li> — full brand-white panel with a light
       shadow so it reads as a floating dropdown, not part of the strip.
       Nudged 1.5rem right of true center so the panel's first-item
       text lines up under the parent label rather than sitting to
       its left (the panel is wider than the label, so a pure
       translateX(-50%) leaves the label visually right-of-center). */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(calc(-50% + 1.5rem));
    min-width: 180px;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.08);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(18, 40, 6, 0.14);
    z-index: 50;
    /* Hidden by default — opened via :hover / :focus-within on the
       parent <li>. `visibility` toggle keeps children keyboard-focusable
       when open but skips them when closed. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease;
    /* Both transforms must carry the same +1.5rem right-nudge as the
       base rule above, otherwise the panel jumps horizontally as
       it fades in. */
    transform: translate(calc(-50% + 1.5rem), 6px);
    pointer-events: none;
}
.tgl-header__nav-list li:hover > .sub-menu,
.tgl-header__nav-list li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(-50% + 1.5rem));
    pointer-events: auto;
}
.tgl-header__nav-list .sub-menu li {
    display: block;
    height: auto;
    width: 100%;
}
.tgl-header__nav-list .sub-menu a {
    display: block;
    height: auto;
    padding: 0.55rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}
.tgl-header__nav-list .sub-menu a:hover,
.tgl-header__nav-list .sub-menu a:focus-visible {
    /* Brand hover rule: text → Light Green, no bar, no underline.
       `box-shadow: none` cancels the 3px bar inherited from the
       top-level `.tgl-header__nav-list a:hover` rule. */
    background: transparent;
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
    box-shadow: none;
}
/* Sub-item's own underline indicator is off — the parent chevron is
   enough context for "you're in this dropdown". */
.tgl-header__nav-list .sub-menu .current-menu-item > a::after,
.tgl-header__nav-list .sub-menu a::after {
    display: none;
}

/* ================================================================
   Page intro component — reusable pattern for landing / archive
   page headers. Two intro types:

     1. Small eyebrow + serif paragraph  (top of a page)
        <div class="tgl-page-intro">
          <p class="tgl-page-intro__eyebrow">BE WHERE THE ACTION IS</p>
          <p class="tgl-page-intro__text">City life has its charm...</p>
        </div>

     2. Big display heading + serif paragraph  (mid-page section)
        <div class="tgl-page-intro tgl-page-intro--section">
          <h2 class="tgl-page-intro__title">Find your community...</h2>
          <p class="tgl-page-intro__text">Explore our upcoming...</p>
        </div>

   Both variants share the same centered, max-width, brand-typography
   base. One place to tweak; every landing / archive / marketing page
   picks it up.
   ================================================================ */
.tgl-page-intro {
    text-align: center;
    padding: 2.5rem 1.5rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}
.tgl-page-intro--section {
    padding: 1.5rem 1.5rem 2rem;
}
.tgl-page-intro__eyebrow {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
    line-height: 1.2;
}.tgl-page-intro__text {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: clamp(1rem, 1.7vw, 1.15rem);
    line-height: 1.6;
    color: #122806;
    margin: 0;
}

/* ================================================================
   Events-page CTA block — three viewer-aware variants:
     .tgl-role-cta--login    dark-green, anon visitors (log in path)
     .tgl-role-cta--upgrade  orange, free Kennedy members (paid pitch)
   Bloor / Kipling members see nothing (they already get the discount).
   Layout is the same shell for both variants; colour + button style
   flip via the modifier.
   ================================================================ */
.tgl-role-cta {
    max-width: 780px;
    margin: 1.5rem auto 2rem;
    /* Container-tier radius (24px). The class name ends in `__cta` so
       the bulk button-radius pass caught it and clamped to 4px, but
       this is a CTA *panel* (padded card wrapper) not a button —
       actual button lives inside as `.tgl-role-cta__pill`. */
    border-radius: 24px;
    padding: 2.25rem 2rem;
    box-sizing: border-box;
    text-align: center;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
}
.tgl-role-cta--login {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
.tgl-role-cta--upgrade {
    /* Zelfde dark-green visuele shell als --login variant — de rol-splitsing
       zit in de copy + CTA-label, niet in de kleur. */
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
.tgl-role-cta__inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.tgl-role-cta__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 24px;
}
.tgl-role-cta__pill span[aria-hidden="true"] {
    color: var(--tgl-light-green, #CFD877);
}
.tgl-role-cta__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    text-transform: uppercase;
    margin: 0;
    line-height: 1.15;
    color: inherit;
}
.tgl-role-cta__text {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0;
    color: inherit;
}
.tgl-role-cta__text strong { font-weight: 700; }

/* Login variant — mirrors the `.tgl-newsletter__pill` pattern:
   form is just a semantic wrapper, `.tgl-role-cta__pill` div holds
   the squared-rounded (4px, per brand button rule) container with
   the input on the left and the submit button flush on the right. */
.tgl-role-cta__form {
    width: 100%;
    max-width: 460px;
}
/* Match `.tgl-newsletter__pill` exactly — white pill with 6px inner
   padding around the input, button floats inside with its own 4px
   radius. No border, subtle drop-shadow instead. */
.tgl-role-cta__pill {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.tgl-role-cta__pill:focus-within {
    box-shadow: 0 0 0 3px rgba(207, 216, 119, 0.5), 0 4px 12px rgba(0, 0, 0, 0.12);
}
.tgl-role-cta__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 0;
    background: transparent;
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
    outline: none;
}
.tgl-role-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Left corners flush so the button reads as a continuation of
       the input pill it sits next to (matches `.tgl-newsletter__button`).
       Right corners keep the brand 24px radius. */
    border-radius: 0 24px 24px 0;
    padding: 0.75rem 1.4rem;
    border: 0;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.tgl-role-cta__button:hover,
.tgl-role-cta__button:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}

/* Solid CTA button (upgrade variant) — full-width pill in the same brand
   dark green as the login variant's submit, but standalone (no input
   next to it). */
.tgl-role-cta__button--solid {
    /* Standalone variant — no form wrapper, so it owns its own 24px
       pill radius (base `.tgl-role-cta__button` has radius 0 because
       inside the form it inherited the wrapper's shape). */
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    /* Witte border teruggezet — geeft de solid CTA een pill-outline
       tegen dark-green section backgrounds waar de button anders
       met de achtergrond zou versmelten. */
    border: 2px solid #fff;
    padding: 14px 28px;
    font-size: 0.9rem;
    text-transform: uppercase;
}
.tgl-role-cta__button--solid:hover {
    color: var(--tgl-green-light, #CFD877);
}

@media (max-width: 600px) {
    .tgl-role-cta { padding: 1.75rem 1.25rem; margin: 1.25rem 1rem 1.75rem; }
    /* Keep input + button side-by-side inside the pill on mobile too
       — the pill collapses gracefully because both children have
       flex: 1 1 auto vs flex-shrink: 0. Stacking them would break
       the "input with submit flush inside" pattern. */
}

/* Content-archive search input — sits in the filter row as the last pill.
   Same pill height + radius as the select filters so the row reads as one
   consistent chip set. On mobile it wraps below like the other filters. */
.tgl-content-archive__search {
    /* Pill matches the newsletter CTA + role-cta search pattern:
       white wrapper with 3px inner padding, dark-green submit button
       flush to the right with straight left corners + rounded right
       corners so it slots into the pill cleanly. Grows to fill any
       remaining space on the filter row so the whole row reads as one
       full-width control cluster. */
    display: flex;
    flex: 1 1 240px;
    min-width: 240px;
    align-items: stretch;
    gap: 0;
    padding: 3px;
    padding-left: 1rem;
    background: #fff;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
}
.tgl-content-archive__search-icon {
    color: var(--tgl-green-dark, #122806);
    flex-shrink: 0;
    align-self: center;
    /* Breathing room between the icon and the input so the placeholder
       text doesn't butt up against the magnifier — matches the old
       pill spacing before the submit button was added. */
    margin-right: 0.55rem;
}
/* Submit button inside the search pill — straight-left / rounded-right
   corners so it slots into the pill without a visible seam. Same
   dark-green + Franklin uppercase treatment as the newsletter CTA. */
.tgl-content-archive__search-submit {
    border: 0;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 0.55rem 1.2rem;
    border-radius: 0 24px 24px 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.15s ease;
    margin-left: 0.75rem;
}
.tgl-content-archive__search-submit:hover,
.tgl-content-archive__search-submit:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    outline: none;
}
.tgl-content-archive__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    /* Padding lives on the wrapper; zeroing here avoids double-stacking
       so the outer control matches the filter/sort pill heights. */
    padding: 0;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--tgl-green-dark, #122806);
    outline: none;
}
/* Suppress the global input focus-ring — the pill wrapper carries a
   :focus-within ring instead, so the highlight matches the pill shape
   instead of a mismatched rectangle inside a rounded container. */
.tgl-content-archive__search-input:focus,
.tgl-content-archive__search-input:focus-visible {
    outline: none;
    box-shadow: none;
}
.tgl-content-archive__search:focus-within {
    box-shadow: 0 0 0 3px var(--tgl-focus-ring, rgba(61,122,28,0.45)),
                0 1px 3px rgba(18, 40, 6, 0.06);
}
.tgl-content-archive__search-input::placeholder {
    color: var(--tgl-green-dark, #122806);
}
@media (max-width: 720px) {
    .tgl-content-archive__search {
        width: 100%;
        min-width: 0;
    }
    /* Filter selects stretch full-width on mobile too so every control
       in the filter row shares the same rhythm. */
    .tgl-content-archive__filter,
    .tgl-content-archive__filter select {
        width: 100%;
        min-width: 0;
    }
}

/* ================================================================
   Content archive — "Browse by category" list.
   Compact pill-rows shown below the card grid on archive pages
   (currently guides; can be reused on tools by wiring the same
   block into archive-tool.php with the tool tax_query).
   ================================================================ */
.tgl-content-archive__browse {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-content-archive__browse-heading {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.tgl-content-archive__browse-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.tgl-content-archive__browse-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    /* Match the content-card radius (14px) so the browse rows and the
       cards above them read as one consistent card family. */
    border-radius: 24px;
    box-shadow: 0 1px 3px rgba(18, 40, 6, 0.08);
    text-decoration: none;
    color: var(--tgl-green-dark, #122806);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tgl-content-archive__browse-link:hover,
.tgl-content-archive__browse-link:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(18, 40, 6, 0.12);
    color: var(--tgl-green-dark, #122806);
}
.tgl-content-archive__browse-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-content-archive__browse-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tgl-content-archive__browse-kicker {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
/* Inline count sits next to the kicker, comma-list style — separator
   handled inline in the template with "·". Slightly lighter weight so
   the kicker still leads the eye. */
.tgl-content-archive__browse-count-inline {
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
    margin-left: 0.35em;
}
.tgl-content-archive__browse-desc {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
    text-transform: none;
}

/* Active-filter summary strip — shown above the archive grid whenever a
   topic / location / author / search filter is applied. Presents result
   count + human-readable filter fragments + Clear all link. */
.tgl-content-archive__summary {
    max-width: 1040px;
    margin: 0 auto 1rem;
    padding: 0 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.tgl-content-archive__summary-text {
    margin: 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-content-archive__summary-text strong { font-weight: 700; }
.tgl-content-archive__summary-clear {
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tgl-green-dark, #122806);
    text-decoration: underline;
    text-transform: uppercase;
}
.tgl-content-archive__summary-clear:hover {
    color: var(--tgl-green-accent, #122806);
}

/* Role-CTA theme override — light-green pill (brand light-green with
   dark text). Used on the videos archive per Figma. Overrides both
   variants so the same block flips its palette without any layout
   change. Button stays dark-green so it still reads as the primary
   action against the light-green background. */
.tgl-role-cta.tgl-role-cta--theme-light {
    background: var(--tgl-light-green, #CFD877);
    color: var(--tgl-green-dark, #122806);
}
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__title,
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__text {
    color: var(--tgl-green-dark, #122806);
}
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__input {
    background: #fff;
}
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__button,
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__button--solid {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__button:hover,
.tgl-role-cta.tgl-role-cta--theme-light .tgl-role-cta__button--solid:hover {
    color: var(--tgl-green-light, #CFD877);
}

/* Lead media (video singles) — mirrors .tgl-article's max-width + padding
   so the hoisted embed lines up with the title/body underneath. Bottom
   margin ties it visually to the article header that follows. */
.tgl-article__lead-media {
    max-width: 1040px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 0;
}
.tgl-article__lead-media .tgl-article__embed,
.tgl-article__lead-media .tgl-article__figure {
    margin: 0 auto;
    max-width: 900px;
}
/* WordPress oEmbed sets width/height HTML attributes on the iframe (e.g.
   500×281). Setting width:100% via CSS scales width but the browser
   still honours the height attribute — result: 100% width × 281px tall,
   super flat. `height: auto` releases that, letting aspect-ratio kick
   in for a proper 16:9 shape. */
.tgl-article__lead-media .tgl-article__embed iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
    border-radius: 24px;
}
/* Trim the article's default top padding on video singles — the lead
   media already provides a comfortable top rhythm above the header. */
.tgl-article--video {
    padding-top: 1rem;
}
@media (max-width: 760px) {
    .tgl-article__lead-media {
        padding: 0.75rem 0 0;
    }
    .tgl-article__lead-media .tgl-article__embed iframe {
        border-radius: 0;
    }
}

/* ==================================================================
   NEWSLETTERS LANDING PAGE  (page-newsletters.php)
   Sections:
     .tgl-newsletters-hero        Full-bleed hero image + big headline
     .tgl-newsletters-band        Dark-green section divider "Our Newsletters"
     .tgl-newsletters-page__list  3 newsletter cards
     .tgl-cta.tgl-cta--bleed      Bottom "Ready to build" strip (shared)
   ================================================================== */
.tgl-newsletters-page.tgl-landing {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    /* Top padding lives on the shared `.tgl-landing` container class
       used here — no extra top padding on this scope, otherwise the
       two stack (5rem) and the header floats too low. */

    /* Gradient moved to `body.page-template-page-newsletters` so the
       sitewide 6-bar stripe divider (outside <main>) sees the same
       green-blue image and doesn't render a colour-block seam above
       the footer. `<main>` intentionally has no background here. */
}

/* Hero / intro moved to the shared `.tgl-page-header` component
   (template-parts/archive-page-header.php) — see rules further down in
   this file. The .tgl-newsletters-hero / .tgl-newsletters-page__intro
   selectors are unused after that swap and can be deleted the next
   time this section is touched. */

/* --- SECTION BAND — dark-green strip "Our Newsletters" ------------ */
.tgl-newsletters-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 1rem 1.5rem;
    text-align: center;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- CARDS -------------------------------------------------------- */
.tgl-newsletters-page__list {
    list-style: none;
    /* Horizontal padding stops the cards from touching the viewport
       edge on mobile — matches the sitewide "content breathes 1rem
       from the rand" rule. Desktop hits max-width first so the padding
       is harmless there. */
    padding: 0 1rem;
    margin: 2rem auto;
    max-width: 1040px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.tgl-newsletter-card {
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.08);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(18, 40, 6, 0.04);
    /* Mobile: image stacked above body (default). Desktop: switches to
       a 40/60 grid with image left, text right — see min-width rule
       below. */
    display: grid;
    grid-template-columns: 1fr;
}
.tgl-newsletter-card__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #e8f5e9, #CFD877);
}
.tgl-newsletter-card__media img,
.tgl-newsletter-card__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-newsletter-card__body {
    padding: 1.5rem 1.75rem 1.75rem;
    text-align: center;
}

/* Desktop: horizontal editorial-magazine layout — image on the left
   (about 40% of card width), body text aligned left on the right. Cap
   the image's natural aspect-ratio so it doesn't dominate. */
@media (min-width: 780px) {
    .tgl-newsletter-card {
        grid-template-columns: minmax(240px, 40%) 1fr;
    }
    .tgl-newsletter-card__media {
        aspect-ratio: auto;
        height: 100%;
        min-height: 240px;
    }
    .tgl-newsletter-card__body {
        text-align: left;
        padding: 2rem 2.25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    /* Anon email form was `margin-inline: auto` (centered) in the
       vertical layout — left-align it now that the card is
       horizontal. */
    .tgl-newsletter-card__form { margin-left: 0; margin-right: 0; }
    .tgl-newsletter-card__form-row { max-width: 420px; }
}
.tgl-newsletter-card__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.4rem;
}
.tgl-newsletter-card__cadence {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    margin: 0 0 0.85rem;
}
.tgl-newsletter-card__blurb {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.85rem;
}
.tgl-newsletter-card__author {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-style: normal;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
}

/* Subscribe button + anon email form ------------------------------- */
.tgl-newsletter-card__actions { margin-top: 0.5rem; }
.tgl-newsletter-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 0.7rem 1.6rem;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tgl-newsletter-card__btn:hover,
.tgl-newsletter-card__btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    /* Invert on hover — brand-strict palette can't do a mid-green
       accent, so the button flips to a transparent fill with the
       dark-green border+text staying. Clear visual feedback without
       introducing an off-brand hue. */
    outline: none;
}
.tgl-newsletter-card__btn.is-subscribed {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
}
/* Subscribed state hover: brand Pink instead of destructive red so
   the "click to unsubscribe" intent still reads, quieter. */
.tgl-newsletter-card__btn.is-subscribed:hover,
.tgl-newsletter-card__btn.is-subscribed:focus-visible {
    background: #FDD7D8;
    border-color: #FDD7D8;
    color: var(--tgl-green-dark, #122806);
}

/* Anon email form (hidden until Subscribe click) */
.tgl-newsletter-card__form {
    margin-top: 0;
    max-width: 420px;
    /* No horizontal margin/padding — form aligns to the card's
       left edge just like the body copy above it. */
    margin-inline: 0;
    padding-inline: 0;
    text-align: left;
}
/* Pill wrapper — matches `.tgl-newsletter__pill` shape (4px radius,
   button flush inside white pill) with a dark-green border so the
   white input stays visible against a white card background. */
.tgl-newsletter-card__pill,
.tgl-newsletter-card__form-row {
    display: flex;
    gap: 0;
    align-items: stretch;
    background: #fff;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    padding: 3px;
}
.tgl-newsletter-card__email {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    color: var(--tgl-green-dark, #122806);
    font-family: inherit;
    outline: none;
}
.tgl-newsletter-card__email:focus {
    outline: none;
}
.tgl-newsletter-card__submit {
    border: 0;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 0.55rem 1.2rem;
    border-radius: 0 24px 24px 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-transform: uppercase;
}
.tgl-newsletter-card__submit:hover {
    color: var(--tgl-green-light, #CFD877);
}
.tgl-newsletter-card__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
}
.tgl-newsletter-card__consent input[type="checkbox"] { margin-top: 3px; }
.tgl-newsletter-card__form-msg {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #b42318;
    min-height: 1.2em;
}
.tgl-newsletter-card__done {
    margin: 0;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f3f8ed 0%, #ecfdf5 100%);
    border: 1px solid #CFD877;
    border-radius: 24px;
    color: var(--tgl-green-dark, #122806);
    font-weight: 600;
    text-align: center;
}

/* Breathing room above the brand HR that separates the newsletter
   cards list from the bottom CTA. */
.tgl-newsletters-page > .tgl-hr { margin-top: 5rem; }

/* --- SHARED SECTION CTA -------------------------------------------
   `.tgl-cta` is the reusable "title + serif copy + button" block
   that ends landing pages (newsletters "Ready to build", team page
   "Become a Partner", etc.). Text colour is intentionally
   inherited — the CTA adapts to a light gradient wallpaper or a
   dark-green band by inheriting the surrounding text colour.
   Button styling stays on the shared `.tgl-btn` variants so the
   CTA never owns button rules. */
.tgl-cta {
    text-align: center;
    /* Bottom padding gives the CTA breathing room from the sitewide
       6-bar stripe divider (rendered above the footer). Was 0 which
       let the button sit flush against the stripe seam. */
    padding: 2.5rem 1.5rem 2.5rem;
    color: inherit;
}
/* When a brand HR sits directly above the CTA, the HR's own
   `margin-bottom: 2rem` already provides breathing room — drop the
   CTA's top padding so the two don't stack. */
.tgl-hr + .tgl-cta { padding-top: 0; }
/* Full-bleed variant — used when the CTA sits on the page wallpaper
   (e.g. `/newsletters/` bottom). Stretches to viewport edges via
   the standard 100vw + negative-margin trick. */
.tgl-cta--bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.tgl-cta__inner { max-width: 720px; margin: 0 auto; }
.tgl-cta__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: inherit;
    margin: 0 0 0.75rem;
}
.tgl-cta__text {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: inherit;
    margin: 0 0 1.5rem;
    /* Neutralise any inline <em> italics that survive from legacy
       editorial copy — brand rule: no italic. */
    font-style: normal;
}
/* Clear the bottom margin when the text is the last thing in the
   CTA — otherwise it adds unwanted breathing room above the footer. */
.tgl-cta__text:last-child { margin-bottom: 0; }
.tgl-cta__text em { font-style: normal; }
/* Optional bullet list inside a shared CTA — same serif body voice,
   centered inside the CTA inner max-width. */
.tgl-cta__list {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: inherit;
    list-style: disc;
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
    padding-left: 1.25rem;
}
.tgl-cta__list li { margin: 0 0 0.35rem; }

/* ==================================================================
   SHARED PAGE / ARCHIVE HEADER  (template-parts/archive-page-header.php)
   Used on /action-journeys/, /newsletters/, and any future landing
   page that needs the "small green eyebrow → big display headline →
   serif intro" opener. One class family = one visual system.
   ================================================================== */
.tgl-page-header {
    text-align: center;
    max-width: 780px;
    /* Shared component owns bottom spacing only. Top spacing is the
       parent container's job — different pages have different top-of-
       page treatments (page-bar, hero, breadcrumb), and the header
       shouldn't fight them. Both archive containers (.tgl-aj-archive
       + .tgl-newsletters-page) supply their own top padding. */
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-page-header__eyebrow {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    margin: 0 0 1rem;
}
.tgl-page-header__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
}
.tgl-page-header__intro {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}
.tgl-page-header__intro strong { color: var(--tgl-green-dark, #122806); }
/* When the intro carries multiple paragraphs (see archive-page-header
   template-part), space them out so the first paragraph doesn't butt
   into the second. Last `<p>` keeps no bottom margin. */
.tgl-page-header__intro > p { margin: 0 0 1rem; }
.tgl-page-header__intro > p:last-child { margin-bottom: 0; }

/* --- Follow this topic button — archive hero ---------------------
   Prominent primary CTA next to the category / location archive
   title. Same data-tgl-follow-topic contract as content-card badges
   so tgl-follow-topic.js drives state without extra wiring. */
.tgl-archive-follow {
    margin: 1rem 0 0;
}
.tgl-archive-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    border: 1.5px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tgl-archive-follow-btn:hover,
.tgl-archive-follow-btn:focus-visible {
    background: var(--tgl-green-accent, #122806);
    border-color: var(--tgl-green-accent, #122806);
    outline: none;
}
.tgl-archive-follow-btn[data-tgl-follow-state="following"] {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
}
.tgl-archive-follow-btn[data-tgl-follow-state="following"]:hover,
.tgl-archive-follow-btn[data-tgl-follow-state="following"]:focus-visible {
    background: #FDD7D8;
    border-color: #FDD7D8;
    color: var(--tgl-green-dark, #122806);
}
.tgl-archive-follow-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 1em;
    line-height: 1;
}
.tgl-archive-follow-btn__plus,
.tgl-archive-follow-btn__check { display: none; }
.tgl-archive-follow-btn[data-tgl-follow-state="not"] .tgl-archive-follow-btn__plus { display: inline; }
.tgl-archive-follow-btn[data-tgl-follow-state="following"] .tgl-archive-follow-btn__check { display: inline; }

/* ------------------ Homepage For You strip ------------------------
   Personalized zone for logged-in members with ≥1 follow. Sits
   between the hero and the lead-stack, reuses the lead-stack grid
   so equal-height + 3-col layout comes for free. */
.tgl-for-you {
    max-width: 1040px;
    margin: 2.5rem auto 1rem;
    padding: 0 1.5rem;
}
/* Mobile — the Action Journey block above and the lead-stack cards
   below both full-bleed via `width: 100vw`, so a plain
   `padding: 0 1rem` here leaves the personalized block visibly
   narrower than everything else on the page. Bleed to viewport
   edges too and keep the same 1rem content gutter. */
@media (max-width: 720px) {
    .tgl-for-you {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 0 1rem;
        max-width: none;
    }
}
.tgl-for-you__head {
    margin: 0 0 1.5rem;
}
.tgl-for-you__eyebrow {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    margin: 0 0 0.4rem;
}
.tgl-for-you__title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.35rem;
}
.tgl-for-you__sub {
    /* Font-metrics matcht .tgl-guides-highlight__desc (Crimson Pro
       1.15rem / 1.55). Kleur blijft dark-green want deze zit op een
       lichte bg, niet op de guides-highlight donker groene band. */
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}

/* ==================================================================
   /advertise/ page — page-advertise.php
   Sections:
     .tgl-advertise__hero        Full-bleed hero image below the header
     .tgl-advertise__intro       Two paragraphs + primary CTA
     .tgl-band                   Reusable dark-green section divider
     .tgl-advertise__reach       Audience stats (3 ring charts)
     .tgl-advertise__engagement  5 coloured engagement stat cards
     .tgl-advertise__gatherings  Editorial paragraphs
     .tgl-cta-banner             Reusable dark-green CTA strip
     .tgl-advertise__awards      Award-card grid
   ================================================================== */
.tgl-advertise {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    padding-top: 2.5rem;
}
/* Section-head eyebrows on the advertise page stay inside the shared
   992px content grid — matches /consulting/ + /stories/. */
/* No per-page override needed — sitewide `.tgl-section__head` now
   supplies both max-width AND side gutter. Kept as a comment marker
   so future edits know this used to be here. */
/* Advertise page gradient moved to `body.page-template-page-advertise`
   below — main intentionally has no background so the sitewide 6-bar
   stripe divider outside <main> stays continuous. */

/* --- Hero image (below the shared page-header) -------------------- */
.tgl-advertise__hero {
    margin: 0 auto 2.5rem;
    max-width: 1040px;
    padding: 0 1.5rem;
}
.tgl-advertise__hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    border-radius: 24px;
}
.tgl-advertise__hero-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    border-radius: 24px;
    background: linear-gradient(135deg, #122806, #cfd877);
}

/* --- Intro + CTA -------------------------------------------------- */
/* Unified body-copy scale for /advertise/ — all editorial paragraphs
   on this page share Open Sans / 1rem / line-height 1.55 / dark green.
   Applied to: intro, lead, gatherings, stat descriptions, engage
   copy, award copy. Individual selectors below only override the
   layout bits (max-width, margin, text-align). */
.tgl-advertise__intro {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    text-align: left;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
}
.tgl-advertise__intro p { margin: 0 0 1rem; }
.tgl-advertise__intro-cta { margin-top: 1.5rem; }

/* --- Shared button (dark-green pill) ------------------------------ */
.tgl-btn.tgl-btn--primary {
    display: inline-block;
    padding: 0.55rem 1rem;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

/* Gutenberg block style — "Compact (left-aligned)". Registered via
   register_block_style('core/button', 'compact'). Renders the CTA at
   about 70% of the primary button's footprint and pushes it to the
   left of its `.wp-block-buttons` flex row, so it sits in the reading
   column instead of blocking mid-page. Reuses the dark-green fill +
   light-green hover of the primary variant to stay on brand. */
.wp-block-button.is-style-compact { margin-right: auto; }
.wp-block-button.is-style-compact .wp-block-button__link {
    padding: 0.35rem 0.85rem;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.wp-block-button.is-style-compact .wp-block-button__link:hover,
.wp-block-button.is-style-compact .wp-block-button__link:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}
.wp-block-buttons:has(.wp-block-button.is-style-compact) { justify-content: flex-start; }
.tgl-btn.tgl-btn--primary:hover,
.tgl-btn.tgl-btn--primary:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}

/* Secondary / outline variant — same footprint as --primary so pairs
   line up in an action row (Cancel + Confirm). Transparent fill,
   dark-green border + text. Hover fills dark-green so the destructive
   direction is visible. Reused by the confirm-dialog + anywhere else
   we need a "muted" alternative next to a primary CTA. */
.tgl-btn.tgl-btn--secondary {
    display: inline-block;
    padding: 0.55rem 1rem;
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    border: 1.5px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-btn.tgl-btn--secondary:hover,
.tgl-btn.tgl-btn--secondary:focus-visible {
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-green-light, #CFD877);
}

/* wp:button block normalizer — voorkomt dat WP core's flex-container
   (.wp-block-buttons.is-layout-flex) de innerlijke .wp-block-button
   div uitrekt tot volle kolom-breedte. Onze buttons zijn pill-shaped
   met natuurlijke content-width; flex-start houdt ze links + auto-wide. */
.wp-block-buttons.is-layout-flex {
    justify-content: flex-start;
    align-items: flex-start;
}
.wp-block-button {
    width: auto;
    max-width: 100%;
}
/* Reset WP element-button defaults zodat onze .tgl-btn styling wint —
   matcht tgl-header__cta metrics (padding/font-size) maar in dark-green. */
/* Canonical wp:button save-markup zet className op de parent <div>,
   niet op de <a>. Selector matcht BEIDE: parent .tgl-btn ÉN legacy
   link-level .tgl-btn (voor als iets nog niet ge-normaliseerd is). */
.wp-block-button.tgl-btn > .wp-block-button__link,
.wp-block-button.tgl-btn--primary > .wp-block-button__link,
.wp-block-button__link.tgl-btn,
.wp-block-button__link.tgl-btn--primary {
    background-color: var(--tgl-green-dark, #122806) !important;
    color: #fff !important;
    padding: 0.55rem 1rem !important;
    border-radius: 24px !important;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}
.wp-block-button.tgl-btn > .wp-block-button__link:hover,
.wp-block-button.tgl-btn > .wp-block-button__link:focus-visible,
.wp-block-button__link.tgl-btn:hover,
.wp-block-button__link.tgl-btn:focus-visible {
    color: var(--tgl-green-light, #CFD877) !important;
    background-color: var(--tgl-green-dark, #122806) !important;
}

/* --- Section band — reusable dark-green divider ------------------- */
.tgl-band {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 1.25rem 1.5rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
}
.tgl-band__title {
    margin: 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-style: normal;
    font-weight: 800;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: #fff;
    text-transform: uppercase;
}

/* --- Audience stats — 3 rings ------------------------------------ */
.tgl-advertise__reach {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
    text-align: center;
}
.tgl-advertise__reach-title {
    /* Matches the top intro (`.tgl-page-header__intro`) — Crimson Pro
       serif, natural case, comfortable reading measure. */
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.55;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 2rem;
}
.tgl-advertise__reach-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 720px) {
    .tgl-advertise__reach-grid { grid-template-columns: repeat(3, 1fr); }
}
.tgl-advertise__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    text-align: center;
}
.tgl-advertise__stat h4 {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.tgl-advertise__stat p {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}

/* --- Stat disc (Figma "sticker" look) -----------------------------
   Two overlapping filled circles per stat: a lighter halo behind
   at 55% opacity, offset up-and-left, and the solid main disc in
   front. The `--ring-color` custom property carries the tint (set
   inline by `tgl_advertise_ring()`), so one CSS block styles all
   three stats regardless of brand color. */
.tgl-ring {
    position: relative;
    display: inline-block;
    width: 128px;
    height: 128px;
    flex-shrink: 0;
}
.tgl-ring__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ring-color, #CFD877);
    box-sizing: border-box;
    /* Hand-drawn brand outline — 3px dark-green stroke on every disc. */
    border: 3px solid var(--tgl-green-dark, #122806);
}
.tgl-ring__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    z-index: 1;
}

/* --- Engagement stat cards ---------------------------------------- */
.tgl-advertise__engagement {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-advertise__lead {
    max-width: 720px;
    margin: 0 0 2rem;
    text-align: left;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
}
.tgl-advertise__engagement-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 720px) {
    .tgl-advertise__engagement-grid { grid-template-columns: repeat(2, 1fr); }
    .tgl-advertise__engage-card--wide { grid-column: 1 / -1; }
}
.tgl-advertise__engage-card {
    /* Default = light-brand-tint bg + dark-green text. Add the
       `--dark` modifier for dark-green bg cards, which flips text
       and copy to white. `color: inherit` on value + copy so both
       branches only need the one color decision here. */
    background: var(--card-bg, #D3E5E4);
    color: var(--tgl-green-dark, #122806);
    padding: 2rem;
    border-radius: 24px;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.tgl-advertise__engage-card--dark {
    color: #fff;
}
.tgl-advertise__engage-value {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: inherit;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0;
}
.tgl-advertise__engage-copy {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}

/* --- Gatherings paragraphs --------------------------------------- */
.tgl-advertise__gatherings {
    max-width: 1040px;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    text-align: center;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
}
.tgl-advertise__gatherings p {
    /* Match `.tgl-advertise__reach-title` — same Crimson Pro
       size / weight / line-height so the two editorial blocks read
       as one continuous voice, not two typographic tiers. */
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    max-width: 780px;
    margin: 0 auto 1rem;
}
.tgl-advertise__gatherings strong { color: var(--tgl-green-dark, #122806); }

/* --- Ready to build CTA banner (reusable) ------------------------- */
.tgl-cta-banner {
    /* Internal CTA style — background removed; whatever divider
       sits ABOVE (`.tgl-hr`, `.tgl-band-stripes`, etc.) owns its
       own bottom margin so this block doesn't add its own top
       padding. Sitewide "every element cleans up after itself"
       rule — the ONE with breathing room is the sibling above,
       not this one. */
    width: 100vw;
    margin: 0;
    margin-left: calc(50% - 50vw);
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    padding: 0 1.5rem 3rem;
    text-align: center;
}
.tgl-cta-banner__inner { max-width: 720px; margin: 0 auto; }
.tgl-cta-banner__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}
.tgl-cta-banner__text {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.5rem;
}
.tgl-cta-banner__btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border: 2px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    text-decoration: none;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}
.tgl-cta-banner__btn:hover,
.tgl-cta-banner__btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}

/* --- Awards grid -------------------------------------------------- */
.tgl-advertise__awards {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-advertise__awards-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 720px) {
    .tgl-advertise__awards-grid { grid-template-columns: repeat(4, 1fr); }
}
.tgl-advertise__award {
    /* Card shell (bg / border / radius / shadow / hover) comes from
       the shared `.tgl-tile` base under `.tgl-landing` — layered via
       the class attribute (`class="tgl-tile tgl-advertise__award"`).
       This rule only adds the awards-grid-specific layout on top. */
    display: flex;
    flex-direction: column;
}
.tgl-advertise__award-media {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #e8f5e9, #CFD877);
    overflow: hidden;
}
.tgl-advertise__award-media img,
.tgl-advertise__award-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-advertise__award-body {
    padding: 1rem 1.15rem 1.15rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-top: 3px solid var(--tgl-green-dark, #122806);
}
.tgl-advertise__award-copy {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}
.tgl-advertise__award-byline {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin: auto 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(18, 40, 6, 0.08);
    text-transform: uppercase;
}

/* ==================================================================
   /consulting/ page — page-consulting.php
   Sections:
     .tgl-consulting__model         Action Journey step carousel
     .tgl-consulting__services      5 coloured service bands
     .tgl-consulting__impact        4 impact stats
     .tgl-consulting__testimonials  2 testimonial cards
     .tgl-consulting__team          "Meet Our Team" strip
   Reuses .tgl-band + .tgl-cta-banner from /advertise/.
   ================================================================== */
.tgl-consulting.tgl-landing {
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    padding-top: 2.5rem;
    /* Gradient moved to `body.page-template-page-consulting` — main
       stays background-free so the sitewide 6-bar stripe divider
       outside <main> stays visually continuous. */
}
.tgl-consulting__hero-cta {
    text-align: center;
    margin: 0 auto 3rem;
}

/* --- Action Journey model carousel -------------------------------- */
.tgl-consulting__model {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    padding: 3rem 0 2rem;
}
.tgl-consulting__model-eyebrow {
    max-width: 780px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
    text-align: center;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}
.tgl-consulting__model-slider {
    list-style: none;
    padding: 0 1.5rem 1.5rem;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 92%;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 780px) {
    .tgl-consulting__model-slider {
        grid-auto-columns: 60%;
        max-width: 1200px;
        margin: 0 auto;
    }
}
@media (min-width: 1080px) {
    .tgl-consulting__model-slider { grid-auto-columns: 44%; }
}
.tgl-consulting__model-slide {
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 16 / 9;
    background: #122806 center / cover no-repeat;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}
.tgl-consulting__model-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(18, 40, 6, 0.6);
    z-index: -1;
}
.tgl-consulting__model-inner {
    max-width: 520px;
    color: #fff;
}
.tgl-consulting__model-step {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-light, #cfd877);
    margin: 0 0 0.75rem;
}
.tgl-consulting__model-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.75rem;
}
.tgl-consulting__model-copy {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    margin: 0;
}

/* --- Services list — 5 tinted bands, alternating image side ------- */
/* Whole "Our Services" section (header + tiles) capped at the shared
   992px content grid used across the site. Side gutter matches every
   other landing section (1.5rem) so the tiles never plak against the
   viewport edge on mobile. `box-sizing: border-box` keeps the outer
   width capped at content-max regardless of the added padding. */
.tgl-consulting > .tgl-section__head,
.tgl-consulting__services,
.tgl-consulting__impact {
    max-width: var(--tgl-content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}
/* When `.tgl-section__head` is nested INSIDE one of the padded wrappers
   above, drop its own sitewide side padding — otherwise the head reads
   as double-inset and visibly narrower than its sibling content. */
.tgl-consulting__services > .tgl-section__head,
.tgl-consulting__impact   > .tgl-section__head {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}
/* Section head on the impact block reads left-aligned like the rest
   of the site. */
.tgl-consulting__impact > .tgl-section__head { text-align: left; }
.tgl-consulting__services-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-items: start;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .tgl-consulting__services-list { grid-template-columns: repeat(2, 1fr); }
}
.tgl-consulting__service {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    /* Unified card look — dark-green surface, white typography.
       Per editorial direction we're not mixing brand tints on
       these cards anymore. */
    background: var(--tgl-green-dark, #122806);
    color: #ffffff;
}
.tgl-consulting__service .tgl-consulting__service-title,
.tgl-consulting__service .tgl-consulting__service-text,
.tgl-consulting__service .tgl-consulting__service-bullets { color: inherit; }
.tgl-consulting__service .tgl-consulting__service-icon::before,
.tgl-consulting__service .tgl-consulting__service-icon::after { background: #ffffff; }
.tgl-consulting__service-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.tgl-consulting__service-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-consulting__service-body {
    padding: 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tgl-consulting__service-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}
/* Native <details> collapsible — click the title to unfold bullets.
   Strip the default disclosure marker; render `+` / `−` on the right
   via a CSS pseudo-element so the icon lives inside the same click
   target as the title. */
.tgl-consulting__service-toggle {
    display: flex;
    flex-direction: column;
    flex: 1;
}
/* Space above the expanded bullet list — only when open, so a
   collapsed card stays tight under the title. */
.tgl-consulting__service-toggle[open] > .tgl-consulting__service-bullets {
    margin-top: 0.75rem;
}
.tgl-consulting__service-toggle > summary.tgl-consulting__service-title {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.tgl-consulting__service-toggle > summary::-webkit-details-marker { display: none; }
.tgl-consulting__service-toggle > summary::marker { content: ''; }
.tgl-consulting__service-icon {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.tgl-consulting__service-icon::before,
.tgl-consulting__service-icon::after {
    content: '';
    position: absolute;
    background: var(--tgl-green-dark, #122806);
    top: 50%;
    left: 50%;
    transition: transform 0.15s ease;
}
/* Horizontal bar (always present) */
.tgl-consulting__service-icon::before {
    width: 18px;
    height: 2px;
    transform: translate(-50%, -50%);
}
/* Vertical bar — visible when closed, rotates flat when open. */
.tgl-consulting__service-icon::after {
    width: 2px;
    height: 18px;
    transform: translate(-50%, -50%);
}
.tgl-consulting__service-toggle[open] > summary .tgl-consulting__service-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.tgl-consulting__service-text {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    flex: 1;
}
.tgl-consulting__service-body .tgl-consulting__service-btn { align-self: flex-start; margin-top: auto; }
.tgl-consulting__service-bullets {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    list-style: disc;
    padding-left: 1.15rem;
    margin: 0;
    flex: 1;
}
.tgl-consulting__service-bullets li { margin: 0 0 0.5rem; }
.tgl-consulting__service-bullets li:last-child { margin-bottom: 0; }
/* Matches the site-wide button reference (.tgl-issues__cta) —
   4px radius, 2px border, 0.78rem font, 0.7rem/1.5rem padding. */
.tgl-consulting__service-btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 2px solid var(--tgl-green-dark, #122806);
    border-radius: 24px;
    text-decoration: none;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    transition: color 0.15s ease;
}
/* Standard dark-green button hover — text flips to Light Green,
   background stays put (see CLAUDE.md button hover rule). */
.tgl-consulting__service-btn:hover,
.tgl-consulting__service-btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}

/* --- Stats block (universal) --------------------------------------
   `.tgl-stats` is the reusable "grid of encircled numbers" pattern
   used on /consulting/ ("Our Impact"), /advertise/ ("Reach the
   people building Toronto"), and any future landing page that wants
   the same visual. Compose freely — no page-specific overrides
   should ever land in this block.
   Usage:
     <ul class="tgl-stats">
         <li class="tgl-stats__item">
             <span class="tgl-stats__value">1,363</span>
             <span class="tgl-stats__copy">Increase in new users…</span>
         </li>
         …
     </ul>
   The grid auto-fits — pages with 3 stats sit as 3 columns from
   ≥780px, pages with 4+ get 4 columns. Any outer max-width /
   centering / padding is the caller's responsibility (usually the
   surrounding `<section>`). */
.tgl-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* Mobile — 1 column so long stat titles ("MONTHLY ACTIVE USERS")
       + the padded oval-framed value can't push their grid cell wider
       than the viewport. Bumps to 2-up at ≥520px and auto-fit at
       tablet+. Explicit `min-width: 0` on items neutralises the
       default `auto` sizing that lets grid children overflow. */
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
}
@media (min-width: 520px) {
    .tgl-stats { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 780px) {
    .tgl-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.tgl-stats__item {
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    min-width: 0;
}
.tgl-stats__value { max-width: 100%; }
.tgl-stats__value {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    line-height: 1.1;
    text-transform: uppercase;
    /* Hand-drawn oval framing — matches the "Oval" editorial icon
       from the TGL brand library (July 2021 guidelines, page 20).
       SVG stretches to any value width via preserveAspectRatio=none
       so short ("21") and long ("1,363") numbers both feel wrapped
       by the same wobbly loop.
       Flex centering (align + justify) rules out any baseline drift
       that inline padding alone can't correct — the number now sits
       exactly on the oval's geometric center regardless of the digit
       count or descenders. */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.6em;
    min-width: 4.4em;
    padding: 0.7em 1.4em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140' preserveAspectRatio='none' fill='none'><path d='M125 118 Q152 105 150 78 Q148 40 105 22 Q60 8 32 30 Q6 55 15 90 Q28 125 82 130 Q125 132 142 118 Q152 110 148 104' stroke='%23122806' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.tgl-stats__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    max-width: 220px;
    text-align: center;
}
.tgl-stats__copy {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    max-width: 220px;
    text-align: center;
    margin: 0;
}

/* --- Testimonials — 2 cards --------------------------------------- */
.tgl-consulting__testimonials {
    max-width: 1040px;
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-consulting__testimonials-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 780px) {
    .tgl-consulting__testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}
.tgl-consulting__testimonial {
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.08);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(18, 40, 6, 0.04);
}
.tgl-consulting__testimonial-brand {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.tgl-consulting__testimonial-quote {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
}
.tgl-consulting__testimonial-attr {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    text-transform: uppercase;
}

/* --- Meet Our Team strip ------------------------------------------ */
.tgl-consulting__team {
    max-width: 720px;
    margin: 3rem auto 2rem;
    padding: 2rem 1.5rem;
    text-align: center;
    background: #f8dcdc;
    border-radius: 24px;
}
.tgl-consulting__team-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
}

/* ==================================================================
   Shared landing-page system — /advertise/, /consulting/,
   /awards-media-mentions/, /newsletters/
   -------------------------------------------------------------------
   Landings sit in the "marketing" family, editorially distinct from
   posts / archives. They share:
     - peach full-bleed body (brand orange, `#EDC196`)
     - consistent section header ritme (h2 + intro, no dark strip)
     - 1040px content column
     - dark-green typography
   Card + component styles per page still live under their own BEM
   scope; only the *skeleton* is shared here.
   ================================================================== */
.tgl-landing {
    /* No background on <main> — gradients live on <body> so the
       sitewide 6-bar stripe divider outside <main> stays visually
       continuous with the page. Each page-template gets its own
       body-level gradient rule below (or inherits the body default). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Top padding so the shared `.tgl-page-header` breathes below the
       site header. No bottom padding — the sitewide stripe divider +
       footer own the spacing under <main>. */
    padding: 2.5rem 0 0;
    color: var(--tgl-green-dark, #122806);
}
/* Pink modifier — used on /about/what-people-are-saying/ where the
   Figma calls for a softer tint. Same skeleton, different canvas.
   Add `.tgl-landing--pink` to <main> alongside `.tgl-landing`. */
.tgl-landing--pink { background: #f8dcdc; }
/* Green modifier — /about/membership-benefits/ (matches the Figma
   soft-green canvas). Kept for backward compat, but the guaranteed
   full-viewport gradient lives on body.page-template-* (below) —
   the .tgl-landing 100vw hack has failed on this layout in the past
   (main got constrained by an unknown ancestor rule and the green
   only covered the content column). Body-level bg avoids that. */
.tgl-landing--green { background: transparent; }
/* `.tgl-landing--mint` modifier — gradient moved to body scope
   (see `body.page-template-page-impact-report` further down). Kept
   the modifier class in the markup so pages can opt in via that
   convention, but the paint lives on <body> now. */
.tgl-landing--mint {}
body.page-template-page-membership-benefits,
body.page-template-page-membership-benefits-3col {
    background: linear-gradient(180deg, #e6ecc4 0%, #cfd877 100%) fixed;
}
/* Meet-the-team body — mirrors the SAME gradient painted on
   `.tgl-team-page.tgl-landing` (3-colour.png, top center, fixed) so
   the strip between `</main>` and `<footer>` doesn't fall back to
   the default body gradient and read as a colour-block above the
   footer. Zero visible change inside the page itself — main still
   paints on top. */
body.page-template-page-meet-the-team {
    background: url("assets/img/gradients/3-colour.png") top center / cover no-repeat fixed;
}
/* Newsletters body — canvas now managed via the wp-admin
   "Background" meta box on the Newsletters page (green-blue).
   `body.tgl-bg-green-blue` rule below paints it. */
/* Advertise body — canvas managed via the wp-admin "Background"
   meta box (currently set to 3-colour). Legacy pink-green rule
   removed so the picker is the single source of truth. */
/* Consulting body — 3-colour brand gradient (was on <main> before). */
body.page-template-page-consulting {
    background: url("assets/img/gradients/3-colour.png") top center / cover no-repeat fixed;
}
/* Impact Report body — canvas now managed via the wp-admin
   "Background" meta box on the Impact Report page (green-blue).
   `body.tgl-bg-green-blue` rule below paints it. */

/* --- Per-page background picker (wp-admin) ------------------------
   Editors pick a canvas from the 6 official brand gradients via the
   "Background" meta box on the post edit screen. Saved slug lands on
   <body> as `tgl-bg-{slug}` (see inc/class-tgl-page-background.php).
   These rules cover the entire fixed option set. Overrides any
   hardcoded per-template body rule because they come after in the
   stylesheet + share equal selector weight. */
body.tgl-bg-3-colour       { background: url("assets/img/gradients/3-colour.png")      center center / cover no-repeat fixed; }
body.tgl-bg-pink-green     { background: url("assets/img/gradients/pink-green.png")    center center / cover no-repeat fixed; }
body.tgl-bg-blue-violet    { background: url("assets/img/gradients/blue-violet.png")   center center / cover no-repeat fixed; }
body.tgl-bg-orange-pink    { background: url("assets/img/gradients/orange-pink.png")   center center / cover no-repeat fixed; }
body.tgl-bg-violet-orange  { background: url("assets/img/gradients/violet-orange.png") center center / cover no-repeat fixed; }
body.tgl-bg-green-blue     { background: url("assets/img/gradients/green-blue.png")    center center / cover no-repeat fixed; }
/* Membership / Support body — canvas now falls back to the
   sitewide default (body's 3-colour brand gradient). Previously
   hardcoded to solid Light Green; removed per editorial direction. */
/* Events page — official brand `orange-pink.png` gradient. Warm
   event-listing tone; fixed so it stays put on scroll. */
body.page-template-page-events {
    background: url("/wp-content/themes/tgl-theme/assets/img/gradients/orange-pink.png") center center / cover no-repeat fixed;
}
body.page-template-page-events::before { display: none; }
/* Impact report background — managed via the wp-admin "Background"
   meta box (currently set to green-blue). Legacy linear-gradient
   removed so the picker rule (`body.tgl-bg-*`) is the source of
   truth. */
/* Also disable the site-wide wallpaper on these pages so the gradient
   isn't fighting the .png that body normally shows. */
body.page-template-page-membership-benefits::before,
body.page-template-page-membership-benefits-3col::before,
body.page-template-page-meet-the-team::before,
body.page-template-page-impact-report::before {
    display: none;
}
/* Benefits-specific: tighten the content column so the tier cards +
   text sit visually centered on wide screens (default 1040px shared
   with editorial grids feels too wide for this marketing layout).
   The `.tgl-landing.tgl-benefits` compound selector cancels an OLDER
   `.tgl-benefits { max-width: 720px }` rule (regels 6226+, from the
   original /membership-benefits/ page that lives as page 113 with
   inline HTML markup). Without this, main gets constrained to 720px
   and the whole layout misaligns. */
.tgl-landing.tgl-benefits {
    max-width: none;
    margin: 0;
    padding: 2.5rem 0 4rem;
}
.tgl-benefits .tgl-landing__section {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
/* Bring the shared archive-page-header into the landing tint (defaults
   are white-page assumptions). Children take the peach as their canvas. */
.tgl-landing .tgl-page-header {
    background: transparent;
    max-width: 1040px;
    /* Bottom margin matches the base `.tgl-page-header` (3rem) so
       the header breathes into the section below — restores the
       rhythm used on /action-journeys/. Top padding stays 0 because
       `.tgl-landing` base already provides 2.5rem top-of-container. */
    margin: 0 auto 3rem;
    padding: 0 1.5rem;
}
.tgl-landing .tgl-page-header__title,
.tgl-landing .tgl-page-header__intro,
.tgl-landing .tgl-page-header__eyebrow {
    color: var(--tgl-green-dark, #122806);
}
.tgl-landing__section {
    max-width: 1040px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
}
.tgl-landing__section-header {
    margin: 0 0 1.5rem;
    max-width: 720px;
}
.tgl-landing__section-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.tgl-landing__section-intro {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
}
/* Inside a landing, the dark-green `.tgl-band` strips get dialed back
   to an inline section-title so we don't get 5 dark rectangles per
   page. It stays the same on pages OUTSIDE `.tgl-landing`
   (homepage "Recommended", guides highlight, etc.). */
.tgl-landing .tgl-band {
    width: auto;
    margin: 3rem 0 1.5rem;
    padding: 0;
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    text-align: left;
    max-width: 1040px;
    /* Undo the .tgl-band 100vw trick when it sits inside a landing */
    margin-left: auto;
    margin-right: auto;
}
.tgl-landing .tgl-band__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-style: normal;
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    color: var(--tgl-green-dark, #122806);
    padding: 0 1.5rem;
    text-transform: uppercase;
}
/* Unified card baseline for tiles / grid items sitting on the peach.
   Component-specific classes (.tgl-awards__card, .tgl-advertise__award,
   .tgl-consulting__service) can layer on top; this gives every card
   the same border-radius, elevation, and hover motion. */
.tgl-landing .tgl-tile {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(18, 40, 6, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tgl-landing .tgl-tile:hover,
.tgl-landing .tgl-tile:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(18, 40, 6, 0.12);
}

/* ==================================================================
   Awards & Media Mentions — page-specific
   Uses `.tgl-landing` skeleton + local card styles.
   ================================================================== */
.tgl-awards__section-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 800;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.tgl-awards__section-intro {
    font-family: var(--tgl-font-serif, 'Crimson Pro', serif);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.5rem;
    max-width: 640px;
}
.tgl-awards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 780px) {
    .tgl-awards__grid { grid-template-columns: 1fr 1fr; }
}
.tgl-awards__card { margin: 0; }
.tgl-awards__card-inner {
    display: block;
    text-decoration: none;
    color: inherit;
}
a.tgl-awards__card-inner:hover .tgl-awards__media,
a.tgl-awards__card-inner:focus-visible .tgl-awards__media {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.tgl-awards__badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    margin: 0 auto 0.75rem;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    min-width: 180px;
    text-transform: uppercase;
}
.tgl-awards__card-inner { text-align: center; }
.tgl-awards__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #d9d9d9;
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tgl-awards__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-awards__media-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #d9d9d9;
}

/* ==================================================================
   Archive hero — category / tag / location / author / date pages
   Sits above the card grid on archive.php. Replaces the old
   `.tgl-section__head` treatment. Structure: eyebrow + h1 title +
   intro paragraph + optional follow button.
   ================================================================== */
.tgl-archive-hero {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    padding: 2.5rem 1.5rem 1.5rem;
    text-align: left;
}
.tgl-archive-hero__eyebrow {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tgl-green-accent, #122806);
    margin: 0 0 0.75rem;
}
.tgl-archive-hero__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1rem;
    text-transform: uppercase;
}
.tgl-archive-hero__intro {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
}
.tgl-archive-hero__actions {
    margin: 0.5rem 0 0;
}

/* ==================================================================
   Testimonial component — reusable quote block. The old
   `/about/what-people-are-saying/` page that once used the
   page-scoped `.tgl-testimonials-page*` rules below has been deleted;
   the base `.tgl-testimonial*` classes still power quote lists
   embedded on other landing pages (e.g. /consulting/). Safe to
   trim the page-scoped rules the next time this section is touched.
   ================================================================== */
.tgl-testimonials-page .tgl-page-header__title {
    /* Design headline is a mid-weight statement, wider than the
       eyebrow/big-title mix on other landings — pull it to a
       comfortable measure and center. */
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}
.tgl-testimonials-page__list {
    max-width: 760px;
    margin: 1.5rem auto 0;
    padding: 0 1.5rem;
}
.tgl-testimonial {
    position: relative;
    padding: 3rem 0 2.5rem;
    text-align: center;
}
.tgl-testimonial.has-separator {
    /* Hairline between items — same border-color as content-card meta
       for visual consistency across the theme. */
    border-top: 1px solid rgba(18, 40, 6, 0.15);
}

/* Big green typographic quotes floating at opposite corners of the
   quote block. Not part of the readable flow — pure decoration. */
.tgl-testimonial__quote-open,
.tgl-testimonial__quote-close {
    position: absolute;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 3rem;
    line-height: 1;
    color: var(--tgl-green-accent, #CFD877);
    font-weight: 400;
}
.tgl-testimonial__quote-open  { top: 2.5rem; left: 0.5rem; }
.tgl-testimonial__quote-close { top: 12rem;   right: 0.5rem; }

/* The quote body — italic serif, generous line-height. Uses
   `.the_content` output so editors can add <em>, links, line breaks
   in the Gutenberg editor and they render as expected. */
.tgl-testimonial__body {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-style: italic;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    max-width: 620px;
    margin: 0 auto 2rem;
    padding: 0 1.75rem;
    text-align: left;
}
.tgl-testimonial__body p { margin: 0 0 0.75rem; }
.tgl-testimonial__body p:last-child { margin-bottom: 0; }

.tgl-testimonial__attribution {
    margin-top: 2rem;
}
.tgl-testimonial__avatar {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(18, 40, 6, 0.12);
}
.tgl-testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-testimonial__name {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.25rem;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.75rem;
    text-transform: uppercase;
}
.tgl-testimonial__subline {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.9rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.75rem;
}
.tgl-testimonials-page__empty {
    text-align: center;
    padding: 3rem 0;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
}

@media (min-width: 780px) {
    .tgl-testimonial__quote-open  { font-size: 4rem; left: -1.5rem; }
    .tgl-testimonial__quote-close { font-size: 4rem; right: -1.5rem; }
}

/* ==================================================================
   Membership Benefits — /about/membership-benefits/
   Uses `.tgl-landing` skeleton + `--green` canvas modifier.
   Layout per tier: two-column split at ≥780px, one column stacked
   below. Left/right column swaps for the Bloor tier (--reverse) so
   the sequence reads: card left, body right, card right, body left…
   giving the design its zig-zag rhythm.
   ================================================================== */
.tgl-benefits__tier {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width: 780px) {
    /* Even split — user requested card + body columns share the same
       width so the tier blocks feel balanced on either side of the
       vertical axis. */
    .tgl-benefits__tier { grid-template-columns: 1fr 1fr; }
    .tgl-benefits__tier--reverse .tgl-benefits__body { order: 1; }
    .tgl-benefits__tier--reverse .tgl-benefits__card { order: 2; }
}

/* -- Right-column body: heading + perks + CTA --------------------- */
.tgl-benefits__tier-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
}
.tgl-benefits__perks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.tgl-benefits__perks li {
    position: relative;
    padding-left: 1.5rem;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
}
.tgl-benefits__perks li::before {
    content: "•";
    position: absolute;
    left: 0.35rem;
    top: 0;
    color: var(--tgl-green-dark, #122806);
    font-weight: 700;
}
.tgl-benefits__body--center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.tgl-benefits__cta-row { margin: 1.5rem 0 0; }

/* -- Tier summary cards --
   Each tier gets its own tint per the Figma: Kennedy=soft pink,
   Bloor=warmer pink (most popular), Kipling=peach. Colours defined
   as tier-modifier overrides; base rule keeps layout consistent. */
.tgl-benefits__card {
    position: relative;
    background: #f8dcdc;             /* Kennedy default */
    border-radius: 24px;
    padding: 1.5rem 1.25rem 1.5rem;
    text-align: center;
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
}
/* Kennedy = warm peach, Bloor = soft pink, Kipling = light blue — per
   Figma direction. Buttons in each tier inherit the same tone so the
   "Become a … Member" CTA visually belongs to its tier. */
.tgl-benefits__tier--kennedy .tgl-benefits__card { background: rgba(247, 194, 153, 0.55); }
.tgl-benefits__tier--bloor   .tgl-benefits__card { background: #C8CFE8; }
.tgl-benefits__tier--kipling .tgl-benefits__card { background: rgba(207, 223, 226, 1); }
/* Per-tier button colour needs to beat `.tgl-btn.tgl-btn--pink` which
   already has 2 classes worth of specificity — match `.tgl-btn.tgl-btn--pink`
   with the tier prefix so we're at 0,3,0 vs 0,2,0. */
.tgl-benefits__tier--bloor   .tgl-btn.tgl-btn--pink { background: #C8CFE8; }
.tgl-benefits__tier--kipling .tgl-btn.tgl-btn--pink { background: rgba(207, 223, 226, 1); }
/* Per-tier hover: text shifts dark-green → light-green, bg holds.
   Explicit per tier so the background stays the tier-specific tint
   from above (bloor pink / kipling blue), not a shared default. */
.tgl-benefits__tier--bloor   .tgl-btn.tgl-btn--pink:hover,
.tgl-benefits__tier--bloor   .tgl-btn.tgl-btn--pink:focus-visible {
    background: #C8CFE8;
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
}
.tgl-benefits__tier--kipling .tgl-btn.tgl-btn--pink:hover,
.tgl-benefits__tier--kipling .tgl-btn.tgl-btn--pink:focus-visible {
    background: rgba(207, 223, 226, 1);
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
}
.tgl-benefits__card-flag {
    position: absolute;
    top: -12px;
    right: -12px;
    background: var(--tgl-green-accent, #CFD877);
    color: #fff;
    /* Flag labels ("Most Popular" / "Best deal") use the Open Sans
       body font — the display font's uppercase treatment felt too
       shouty against the softer sentence-case flag copy. */
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 24px;
    text-transform: none;
    letter-spacing: 0;
    transform: rotate(-6deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.tgl-benefits__card-flag--best { background: #CFD877; color: var(--tgl-green-dark, #122806); }

/* Tier icon — centered between the price row and the tagline, so it
   reads as the tier's mascot punctuating the header stack. Uses the
   brand Cultural icon set (WhiteSquirrel / BeerPint / PeaceSign —
   see /assets/img/tiers/). */
.tgl-benefits__card-icon {
    display: block;
    width: 72px;
    height: 72px;
    margin: 0.5rem auto 1rem;
    object-fit: contain;
}

.tgl-benefits__card-label {
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.05;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0;
}
/* Short dark-green rule under the tier name — matches the Figma
   divider between "KENNEDY MEMBERSHIP" and "FREE". Uses the
   brand-standard 5px HR thickness (see `.tgl-hr`). */
.tgl-benefits__card-label::after {
    content: "";
    display: block;
    width: 12rem;
    height: 5px;
    background: var(--tgl-green-dark, #122806);
    margin: 0.75rem auto 0;
}
.tgl-benefits__card-price {
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0;
}
.tgl-benefits__card-tagline {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
}
.tgl-benefits__card-cta,
.tgl-benefits__card-pill {
    display: inline-block;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    /* Zero the UA <button> chrome — border, outline, and gray
       system background — since this class is used on both <a> and
       <button> elements (account dashboard renders <button> so the
       upgrade action can fire the Stripe portal handler). */
    border: 0;
    outline: 0;
    -webkit-appearance: none;
            appearance: none;
    cursor: pointer;
    /* Button-radius per brand: 24px matches every other button. */
    border-radius: 24px;
    padding: 0.85rem 1.6rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0 0 1rem;
    transition: color 0.2s ease;
}
/* Current-plan pill — non-interactive marker on the tier the viewer
   already has. Reads as "you're here" so the other cards clearly
   read as switch options. */
.tgl-benefits__card-cta--current {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    border: 1.5px solid var(--tgl-green-dark, #122806);
    cursor: default;
}
/* Current-plan CTA: no visual change on hover/focus so it doesn't
   read as switchable. The generic `.tgl-benefits__card-cta:hover`
   rule swaps bg + text colour with `(0,1,1)` specificity + is defined
   later in the file — even our `(0,2,1)` selector loses on some
   cascades. `!important` on all three properties makes the override
   deterministic across load order + late overrides. */
.tgl-benefits__card-cta--current,
.tgl-benefits__card-cta--current:hover,
.tgl-benefits__card-cta--current:focus,
.tgl-benefits__card-cta--current:focus-visible {
    background: transparent !important;
    color: var(--tgl-green-dark, #122806) !important;
    border-color: var(--tgl-green-dark, #122806) !important;
    cursor: default;
    box-shadow: none !important;
    text-decoration: none !important;
}
/* Downgrade variant — same button footprint as upgrade so the row
   of CTAs across the 3 cards stays visually aligned; muted so
   downgrade doesn't compete with the primary upgrade CTA. */
.tgl-benefits__card-cta--downgrade {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
    border: 1.5px solid var(--tgl-green-dark, #122806);
}
.tgl-benefits__card-cta--downgrade:hover,
.tgl-benefits__card-cta--downgrade:focus-visible {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
.tgl-benefits__card-cta:hover,
.tgl-benefits__card-cta:focus-visible {
    /* Brand-wide dark-green button hover: text → Light Green, bg
       stays put. See CLAUDE.md "Button hover rule". */
    background: var(--tgl-green-dark, #122806);
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

.tgl-benefits__card-heading {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 0.65rem;
    text-align: left;
}
.tgl-benefits__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.tgl-benefits__card-list li {
    position: relative;
    padding-left: 1.5rem;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin-bottom: 0.8rem;
}
.tgl-benefits__card-list li::before {
    content: "◆";
    position: absolute;
    left: 0.35rem;
    top: 0;
    color: var(--tgl-green-accent, #CFD877);
    font-size: 0.7rem;
    line-height: 1.6;
}

/* -- Pink CTA button (used by every "Become a … Member" + "JOIN") - */
.tgl-btn.tgl-btn--pink {
    display: inline-block;
    background: #f7d0d5;
    color: var(--tgl-green-dark, #122806);
    border: none;
    border-radius: 24px;
    padding: 0.85rem 2rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
}
.tgl-btn.tgl-btn--pink:hover,
.tgl-btn.tgl-btn--pink:focus-visible {
    background: #f7d0d5;
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
    text-decoration: none;
}
/* Icon-in-button modifier — inline SVG stroke inherits `color` so it
   flips to Light Green on hover along with the label. */
.tgl-btn.tgl-btn--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.tgl-btn__icon {
    flex-shrink: 0;
    width: 1.05em;
    height: 1.05em;
}

/* -- Group Memberships band --------------------------------------- */
.tgl-benefits__group {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.tgl-benefits__group-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    text-transform: uppercase;
}
.tgl-benefits__group-body {
    max-width: 620px;
    margin: 1.25rem auto 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
}

/* =================================================================
   .tgl-benefits--3col — sandbox modifier for the 3-column
   experiment at /membership-benefits-3col/.

   Lays the three tier cards side-by-side on desktop, stacks on
   mobile. Cards are equal height (grid `align: stretch`) so the
   "Most Popular" and "Best deal" flags line up across the row.
   Tier tints hang off the card-level modifier here since the
   3-col template drops the outer `.tgl-benefits__tier--*` wrapper.
   ================================================================= */
.tgl-benefits--3col .tgl-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 1.5rem auto 3rem;
    padding: 0 1.5rem;
    align-items: stretch;
}
.tgl-benefits--3col .tgl-benefits__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 2rem 1.5rem;
}
/* Push the CTA to the bottom of the card so all three "Become a
   member" / "Create a free account" buttons line up across the
   row regardless of perks-list length. Full-width + block so the
   CTA doesn't shrink to label text (Kennedy's "CREATE A FREE
   ACCOUNT" is wider than Bloor's "BECOME A MEMBER") — uniform
   button footprint per SaaS pricing convention. */
.tgl-benefits--3col .tgl-benefits__card-list {
    /* Clear the default bullet-list bottom margin so `margin-top:
       auto` on the CTA gets ALL the leftover vertical space. */
    margin-bottom: 0;
}
.tgl-benefits--3col .tgl-benefits__card-cta {
    display: block;
    width: 100%;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
}
/* Tier tints — strict brand palette (see CLAUDE.md):
     Kennedy = Orange  #EDC196
     Bloor   = Pink    #FDD7D8
     Kipling = Blue    #D3E5E4
   Scoped to the card modifier so the 3-col grid doesn't need the
   outer tier wrap. */
.tgl-benefits--3col .tgl-benefits__card--kennedy { background: #EDC196; }
.tgl-benefits--3col .tgl-benefits__card--bloor   { background: #C8CFE8; }
.tgl-benefits--3col .tgl-benefits__card--kipling { background: #D3E5E4; }

/* Stack under 900px — three cards need real breathing room. */
@media (max-width: 900px) {
    .tgl-benefits--3col .tgl-benefits__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}

/* -- "Not ready to join yet?" section ----------------------------- */
.tgl-benefits__notready {
    max-width: 640px;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.tgl-benefits__notready-title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
}
.tgl-benefits__notready-lead {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.5rem;
}
.tgl-benefits__notready-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.tgl-benefits__notready-list li {
    position: relative;
    padding-left: 1.25rem;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-benefits__notready-list li::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
    color: var(--tgl-green-dark, #122806);
}

/* ==================================================================
   Meet the Team — /about/meet-the-team/
   `.tgl-landing--green` skeleton + accordion bars whose colours come
   from per-item inline `--tgl-acc-bg` / `--tgl-acc-fg` custom
   properties (set by PHP from the palette map).
   Native `<details>` handles open/close; the `tgl-team.js` companion
   enforces single-open-at-a-time within `[data-tgl-single-open]`
   groups.
   ================================================================== */


/* Intro block */
.tgl-team-page__intro { text-align: center; padding-top: 2rem; }.tgl-team-page__lead {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
    max-width: 620px;
    margin: 0 auto;
}
.tgl-team-page__block { margin-top: 1.75rem; }

/* Green band — full-bleed brand Dark Green wrapper around HOW WE
   STARTED, Meet Our Team, Our Values, Fundings + Partnerships.
   Ends BEFORE the "Letter from the Editor" section. Section titles
   flip to white so they read on the dark canvas; accordion tiles
   keep their own tinted backgrounds. */
.tgl-team-page__green-band {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Bottom-padding matches the stripes' own top-margin below so
       the 6 white bars sit with identical breathing room above +
       below (see `.tgl-team-page__green-band .tgl-band-stripes`). */
    padding: 3rem calc(50vw - 50%) 2.5rem;
    box-sizing: border-box;
}
.tgl-team-page__green-band .tgl-band-stripes {
    margin-top: 2.5rem;
}
.tgl-team-page__green-band .tgl-team-page__section-title {
    color: #fff;
}

/* Accordion primitives — used for both top-level and nested groups */
.tgl-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tgl-accordion__item {
    /* Inherit color from the parent surface — on light pages the
       body is dark green, on the meet-the-team dark-green band the
       band sets white. Previously hardcoded to `--tgl-acc-fg` which
       stayed dark green even on dark bands. */
    color: inherit;
    border-radius: 24px;
    overflow: hidden;
}
/* Plain variant — strips the brand-tint background + rounded corners
   for use inside dark bands (Meet-the-Team green band) where the
   editorial folds should read as unadorned text rows. */
.tgl-accordion--plain .tgl-accordion__item {
    background: transparent;
    color: inherit;
    border-radius: 0;
}
.tgl-accordion--plain .tgl-accordion__summary {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 1.6rem;
    padding: 1.1rem 0;
}
/* Divider between folds so it's clear they're separate unfoldable
   blocks. White because the plain variant sits on a dark-green band. */
.tgl-accordion--plain .tgl-accordion__item + .tgl-accordion__item {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.tgl-accordion__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.9rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Editorial serif label — Crimson Pro, natural case (no uppercase).
       Reads as a heading-style caption instead of a hard button label. */
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 700;
    font-size: 1.1rem;
    color: inherit;
    user-select: none;
    text-transform: none;
}
.tgl-accordion__summary::-webkit-details-marker { display: none; }
.tgl-accordion__summary::marker { content: ''; }

/* Summary typography for migrated `wp:details` accordions — Libre
   Franklin bold uppercase with a hairline separator below, matching
   the site's other section-label patterns. Scoped to the native
   `<details>` variant so the older PHP accordions (Meet-the-Team,
   etc.) keep their Crimson Pro summary treatment. */
.tgl-accordion details.wp-block-details.tgl-accordion__item > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: inherit;
    user-select: none;
    border-bottom: 1px solid var(--tgl-green-dark, #122806);
}
.tgl-accordion details.wp-block-details.tgl-accordion__item > summary::-webkit-details-marker { display: none; }
.tgl-accordion details.wp-block-details.tgl-accordion__item > summary::marker { content: ''; }
/* Migrated wp:details items — reset the base `.tgl-accordion__item`
   rounded corners + overflow:hidden. That clip was for the older PHP
   accordions that put styled backgrounds on each item; here the summary
   just carries a bottom hairline that needs to reach edge-to-edge. */
.tgl-accordion details.wp-block-details.tgl-accordion__item {
    border-radius: 0;
    overflow: visible;
}

/* Native +/- toggle + inner indent for migrated `wp:details` accordions.
   These carry no chevron span (the older PHP accordions do), so paint
   the toggle glyph on the summary itself via ::after and indent the
   fold body via the details' non-summary children — no wrapper DIV
   needed. Applies wherever a `.tgl-accordion` group contains native
   `<details>` blocks. */
/* +/- toggle only for summaries that DON'T ship their own chevron
   span (the older PHP accordion emits `<span class="tgl-accordion
   __chevron">` inside the summary and paints +/- on it). Without
   the `:not()` guard both would render on the About page's
   accordions. */
.tgl-accordion details.wp-block-details.tgl-accordion__item > summary:not(:has(.tgl-accordion__chevron))::after {
    content: "+";
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1;
    margin-left: auto;
    color: inherit;
    opacity: 0.9;
    transition: transform 0.15s ease;
}
.tgl-accordion details.wp-block-details.tgl-accordion__item[open] > summary.tgl-accordion__summary:not(:has(.tgl-accordion__chevron))::after {
    content: "−";
}
.tgl-accordion details.wp-block-details.tgl-accordion__item > *:not(summary) {
    padding-left: 1rem;
    padding-right: 1rem;
}
.tgl-accordion details.wp-block-details.tgl-accordion__item > *:not(summary):first-of-type {
    padding-top: 1rem;
}
.tgl-accordion details.wp-block-details.tgl-accordion__item > *:not(summary):last-child {
    padding-bottom: 1.1rem;
}
/* Meet-the-Team accordion tab labels use `capitalize` — the stored
   strings are sentence case ("Overall funders") so this yields
   Title Case ("Overall Funders") without hardcoded casing per label. */
.tgl-team-page__block .tgl-accordion__label { text-transform: uppercase; letter-spacing: 0; }
/* Toggle icon — CSS-driven +/− so all 8 accordion instances swap
   glyphs automatically when `<details>` opens. The template still
   emits a `<span>›</span>`; we hide its text and paint the sign via
   ::before. This keeps the PHP identical while letting the icon shape
   change per state. */
.tgl-accordion__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.15s ease;
    /* Hide the `›` glyph the template ships with. */
    color: transparent;
    text-indent: -9999px;
    position: relative;
}
.tgl-accordion__chevron::before {
    content: "+";
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    text-indent: 0;
    font-family: var(--tgl-font-display, 'Libre Franklin', system-ui, sans-serif);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1;
    /* Force text color back — parent inherits `color: transparent` to
       hide the fallback `›`. */
    color: inherit;
}
/* Force the inherited `color: transparent` off the pseudo. */
.tgl-accordion__chevron::before { color: #fff; }
.tgl-accordion__item[style*="--tgl-acc-fg:#122806"] > .tgl-accordion__summary .tgl-accordion__chevron::before,
.tgl-team-page__sub .tgl-accordion__chevron::before {
    color: var(--tgl-green-dark, #122806);
}
.tgl-accordion__item[open] > .tgl-accordion__summary .tgl-accordion__chevron::before {
    content: "−";
}
.tgl-accordion__body {
    padding: 0 1rem 1.1rem;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    /* Sans-serif renders visually larger than Crimson Pro at the
       same nominal size — trim a hair to keep body copy weight
       balanced against the accordion label above. */
    font-size: 0.9rem;
    line-height: 1.55;
    color: inherit;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 1rem;
}
/* Nested accordion sits inside a body; slightly tighter to read as
   "child of parent". */
.tgl-accordion--nested { gap: 0.45rem; }
.tgl-accordion--nested .tgl-accordion__summary {
    font-size: 0.85rem;
    padding: 0.7rem 0.85rem;
}
/* Plain + nested combo (Meet-the-Team: Our Team > Staff / Advisory).
   The generic `--nested` shrink above is too small for these top-of-
   subsection labels — bump back up and add a visible top hairline
   so the nested folds read as separate sub-blocks under Our Team. */
.tgl-accordion--plain.tgl-accordion--nested .tgl-accordion__summary {
    font-size: 1.2rem;
    padding: 0.9rem 0;
}
.tgl-accordion--plain.tgl-accordion--nested .tgl-accordion__item + .tgl-accordion__item {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}
.tgl-accordion--plain.tgl-accordion--nested .tgl-accordion__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Flat title + paragraph blocks inside the "Our Values" and
   "Opportunities" folds — no nested dropdowns, just stacked
   editorial items. */
.tgl-team-page__item { break-inside: avoid; margin-bottom: 1.75rem; }
.tgl-team-page__item:last-child { margin-bottom: 0; }
.tgl-team-page__item-title {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.5rem;
    color: inherit;
}
.tgl-team-page__item-body {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    color: inherit;
}
/* Two-column layout on wider screens — CSS columns keeps the
   editorial flow simple without needing extra markup. Only applied
   when the body actually contains `.tgl-team-page__item` blocks
   (Values / Opportunities) — skipping team-member fold bodies so
   the 3-column staff grid renders correctly. Items honour
   `break-inside: avoid` so titles never split from their body. */
@media (min-width: 780px) {
    .tgl-accordion--plain .tgl-accordion__body:has(.tgl-team-page__item) {
        column-count: 2;
        column-gap: 2.5rem;
    }
}

/* Team member grid inside the OUR TEAM accordion body */
.tgl-team-page__grid {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    color: inherit;
    /* Top-align every card in the row so names/pronouns/bios don't
       drift vertically when siblings have shorter bios. */
    align-items: start;
}
@media (min-width: 640px) {
    .tgl-team-page__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
    .tgl-team-page__grid { grid-template-columns: repeat(3, 1fr); }
}
.tgl-team-card { text-align: left; }
.tgl-team-card__photo {
    /* Photo fills the card width — image scales to whatever grid
       column width the card sits in. `aspect-ratio: 1/1` keeps it
       square regardless of card width. */
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 0 0.75rem;
    overflow: hidden;
    background: rgba(255,255,255,0.15);
    border-radius: 24px;
}
.tgl-team-card__photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: grayscale(100%);
}
.tgl-team-card__role {
    font-family: var(--tgl-font-body, 'Open Sans', sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 1px;
    margin: 0 0 15px;
    color: #fff;
}
.tgl-team-card__name {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.1;
    margin: 0 0 0.25rem;
    color: inherit;
    text-transform: uppercase;
}
.tgl-team-card__pronouns {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.72rem;
    color: #fff;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}
.tgl-team-card__bio {
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
    /* Bio fills the card width now — photos went full-width so a
       narrow 220px bio underneath sits off-center. Let the grid
       column control width. */
    margin: 0;
    color: inherit;
    opacity: 0.92;
}
.tgl-team-page__empty {
    text-align: center; padding: 1rem 0; opacity: 0.7;
}

/* Social icons row under the bio — all one color (currentColor from
   the card) so they read as a set. White on the dark-green card. */
.tgl-team-card__social {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    justify-content: flex-start;
    gap: 0.9rem;
    color: #ffffff;
}
.tgl-team-card__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.tgl-team-card__social a:hover,
.tgl-team-card__social a:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

/* Freelance + Advisory Board sub-accordions inside OUR TEAM. Their
   summary sits on a divider line rather than a filled bar — matches
   the Figma "text with chevron on the right, hairline separators". */
.tgl-team-page__sub { margin-top: 1.5rem; gap: 0; }
.tgl-team-page__sub .tgl-accordion__item {
    background: transparent;
    border-radius: 0;
    border-top: 1px solid rgba(255,255,255,0.35);
}
.tgl-team-page__sub .tgl-accordion__item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.35);
}
.tgl-team-page__sub .tgl-accordion__summary {
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    font-size: 0.95rem;
}
.tgl-team-page__sub .tgl-accordion__body {
    border-top: none;
    padding-top: 0.5rem;
}

/* "Become a Green Liner" CTA — copy + soft-green button, both
   centered under the sub-accordions. */
.tgl-team-page__cta {
    text-align: center;
    margin-top: 2rem;
    padding: 0 1rem;
}
.tgl-team-page__cta-copy {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    line-height: 1.55;
    /* CTA sits outside the accordion now — on the page-level gradient
       wallpaper — so dark-green text reads properly against it. */
    color: var(--tgl-green-dark, #122806);
    max-width: 480px;
    margin: 0 auto 1.25rem;
}
.tgl-team-page__cta-btn-row { margin: 0; }
/* Matches the site-wide button reference (.tgl-issues__cta):
   dark-green pill, white text, 4px radius, 0.7rem/1.5rem padding,
   0.78rem font. Hover inverts to transparent with dark-green text. */
.tgl-team-page__cta-btn {
    display: inline-block;
    background: var(--tgl-green-dark, #122806);
    color: #ffffff;
    border: 2px solid var(--tgl-green-dark, #122806);
    padding: 0.7rem 1.5rem;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}
.tgl-team-page__cta-btn:hover,
.tgl-team-page__cta-btn:focus-visible {
    color: var(--tgl-green-light, #CFD877);
}

/* Fundings / Partnerships simple list */
.tgl-team-page__logo-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
}
.tgl-team-page__logo-list li {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.9rem;
}
.tgl-team-page__logo-list a { color: inherit; }

/* PARTNERSHIPS — logo grid rendered inside each accordion body. Uses
   auto-fill so the number of logos per row scales with viewport
   width. Logos are constrained to a max height so tall/wide variants
   don't blow out row heights. */
.tgl-team-page__partners-desc {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 1rem;
    line-height: 1.55;
    color: inherit;
    margin: 0 0 1.5rem;
    max-width: 60ch;
}
.tgl-team-page__logo-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
    align-items: center;
    justify-items: center;
}
.tgl-team-page__logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
}
.tgl-team-page__logo-img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
    /* Monochrome without silhouette flattening — `grayscale(1)`
       desaturates while preserving the internal light/dark structure
       (letterforms, wordmarks stay readable). Colourful logos become
       a grey palette; the shapes still read.

       Caveat: logos that are pure-white-on-transparent (Village
       Media, The Trillium, Riverside BIA etc.) stay near-invisible
       on light backgrounds because grayscale can't invert them. Add
       `.tgl-team-page__logo-img--invert` per attachment to flip
       those cases (see below). */
    filter: grayscale(1);
}
/* Opt-in modifier for white-source logos that need an invert to
   render on the light-tinted accordion backgrounds. Compose with
   the base class in the template when we identify each one. */
.tgl-team-page__logo-img--invert {
    filter: grayscale(1) invert(1);
}

/* Partner CTA styles retired — call site now uses the shared
   `.tgl-cta` block (see the SHARED SECTION CTA rules above). */

/* Letter from Our Team — pink editorial band, full-bleed across the
   viewport. Needs 3-class specificity to beat
   `.tgl-team-page .tgl-landing__section` (2 classes, max-width: 780px)
   otherwise the letter stays constrained to 780px and left-aligned. */
/* Meet-the-team ends on a pink letter block that has its own
   padding + bg — the shared `.tgl-landing` bottom 4rem then reveals
   an unusual strip below. Zero it out on this page. */
.tgl-team-page.tgl-landing {
    padding-bottom: 0;
    /* Gradient moved to `body.page-template-page-meet-the-team` so
       the sitewide 6-bar stripe divider (outside <main>) sees the
       same 3-colour image and doesn't render a colour-block seam
       above the footer. `<main>` intentionally has no background. */
}

.tgl-team-page .tgl-landing__section.tgl-team-page__letter {
    text-align: center;
    padding: 3rem 1.5rem;
    /* Background removed — the page gradient wallpaper reads through
       so the letter section blends into the rest of the page. */
    background: transparent;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 3rem;
}
/* ==================================================================
   Brand horizontal rule — full-bleed 5px dark-green line. Reusable
   across the site as a section-divider (see the .tgl-hr class below
   OR compose via `.tgl-team-page__letter-rule` inside letter blocks).

   Use ONE of:
     <hr class="tgl-hr">                           — generic
     <hr class="tgl-team-page__letter-rule">       — kept for legacy
   ================================================================== */
/* Brand stripe band — 6 stacked 5px dark-green lines (9px stride).
   Reusable divider used above/below the internal CTA blocks on
   /newsletters/ + /consulting/. Full-viewport width, uses a
   repeating-linear-gradient so it scales with viewport width without
   needing an SVG asset.

   Usage: <div class="tgl-band-stripes" aria-hidden="true"></div>  */
.tgl-band-stripes {
    /* 2rem gutter on either side so the stripe band never touches
       the browser edge — matches the same near-full-bleed pattern
       as `.tgl-hr`. */
    width: calc(100vw - 4rem);
    height: 50px;
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
    background: repeating-linear-gradient(
        to bottom,
        var(--tgl-green-dark, #122806) 0 5px,
        transparent            5px 9px
    );
}
/* Sitewide pre-footer usage — breathing room so the divider never
   butts up against the dark-green footer band. */
.tgl-band-stripes + .tgl-footer { margin-top: 2.5rem; }

/* Logged-in homepage — the "Stay Connected" newsletter CTA that
   normally sits above the stripe is hidden for members, so the
   default pink page-bg collapses to a thin awkward strip between
   the dark-green guides-highlight above and the dark-green footer
   below. Extend the guides-highlight visually: full-bleed dark
   green band with WHITE stripes centered, seamed straight into
   the footer. Only touches the homepage; other logged-in pages
   still see the standard divider. */
body.home.logged-in .tgl-band-stripes {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 110px;
    background:
        repeating-linear-gradient(
            to bottom,
            #ffffff 0 5px,
            transparent 5px 9px
        ) center center / calc(100% - 4rem) 50px no-repeat,
        var(--tgl-green-dark, #122806);
}
body.home.logged-in .tgl-band-stripes + .tgl-footer { margin-top: 0; }


/* White variant — used INSIDE a dark-green band (e.g. bottom of
   `.tgl-team-page__green-band`) where the default dark-green bars
   would blend into the background. */
.tgl-band-stripes--white {
    background: repeating-linear-gradient(
        to bottom,
        #ffffff  0 5px,
        transparent 5px 9px
    );
}

/* Dev-only pointer strip — rendered only when WP_DEBUG is true (see
   the guard in `page-membership-benefits.php`). Kept intentionally
   ugly + prefixed so nobody mistakes it for production chrome. */
.tgl-devnote {
    max-width: 900px;
    margin: 3rem auto;
    padding: 0.85rem 1.25rem;
    background: #fff4c2;
    border: 1px dashed #b58900;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.9rem;
    color: #122806;
    text-align: center;
}
.tgl-devnote a { color: #122806; text-decoration: underline; }

.tgl-hr,
.tgl-team-page__letter-rule {
    /* Near-full-bleed with a comfortable breathing margin on either
       side — 2rem gutter at large viewports, `calc()` shrinks it on
       narrow screens so the rule never touches the edge. Vertical
       spacing uses the sitewide tokens so cadence stays consistent
       across pages. */
    width: calc(100vw - 4rem);
    max-width: none;
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
    margin-top: var(--tgl-space-lg, 3rem);
    margin-bottom: var(--tgl-space-lg, 3rem);
    border: 0;
    height: 5px;
    background: var(--tgl-green-dark, #122806);
}
/* White variant — same 5px full-bleed rule, used inside dark-green
   bands (Meet-the-Team green band) where the default dark-green line
   would vanish. Adds symmetric breathing room above and below so the
   line reads as a section divider, not a hairline. */
.tgl-hr.tgl-hr--white {
    background: #ffffff;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.tgl-team-page__letter-title {
    /* Big display treatment — matches the page-header title
       ("DIFFERENT HUES. DIFFERENT VIEWS.") for section-hierarchy
       consistency. */
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 2.5rem;
    text-transform: uppercase;
}
.tgl-team-page__letter-body {
    /* 780px matches the shared `.tgl-team-page .tgl-landing__section`
       reading width the rest of the page uses. */
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
    /* Lead-paragraph style — mirrors `.tgl-article__standfirst`
       (Crimson Pro 300, 1.2rem base → 1.4rem on desktop) so the
       letter reads as an editorial intro, not body copy. */
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--tgl-green-dark, #122806);
}
@media (min-width: 720px) {
    .tgl-team-page__letter-body { font-size: 1.4rem; line-height: 1.45; }
}
.tgl-team-page__letter-body p { margin: 0 0 1rem; }
.tgl-team-page__letter-body p:last-child { margin-bottom: 0; }
/* wp:embed inside the letter (video) — sizing now comes from the
   universal `.wp-block-embed__wrapper` rule further up in this file
   (full width + 16:9 aspect). Nothing letter-specific needed. */

/* Signature block — portrait + name + signature + role + outlet.
   Centered under the letter body. Portrait defaults to a 4:3 grey
   placeholder when no image URL is set. Signature has an image-slot
   AND a text-fallback so the block always looks complete. */
.tgl-team-page__letter-sig {
    margin-top: 2.5rem;
    text-align: center;
    color: var(--tgl-green-dark, #122806);
}
.tgl-team-page__letter-portrait {
    max-width: 360px;
    margin: 0 auto 1.5rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(18, 40, 6, 0.12);
    border-radius: 24px;
}
.tgl-team-page__letter-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgl-team-page__letter-portrait-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(18, 40, 6, 0.12);
}
.tgl-team-page__letter-name {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-transform: uppercase;
    margin: 0 0 0.5rem;
    color: inherit;
}
.tgl-team-page__letter-signature {
    max-width: 256px;
    margin: 0 auto 1rem;
}
.tgl-team-page__letter-signature img {
    display: block;
    width: 100%;
    height: auto;
}
/* Text-fallback signature — italic script-ish tilt when there's no
   uploaded signature image, so the block still reads as "signed". */
.tgl-team-page__letter-signature--text {
    font-family: 'Snell Roundhand', 'Apple Chancery', 'Segoe Script', cursive;
    font-size: 3rem;
    font-weight: 400;
    color: var(--tgl-green-dark, #122806);
    transform: rotate(-4deg);
    max-width: none;
}
.tgl-team-page__letter-role {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.4;
    margin: 0.75rem 0 0.15rem;
    color: inherit;
    text-transform: none;
}
.tgl-team-page__letter-outlet {
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.4;
    color: inherit;
    margin: 0;
}
.tgl-team-page__letter-outlet em { font-style: italic; }

/* ==================================================================
   Impact Report — /about/impact-report/
   Mint-top → pink-bottom gradient (body-level bg). Featured report
   section at top with intro + big infographic; then a stack of
   past-report cards (title + full-width photo); then the Support-the-
   Greenline CTA button.
   ================================================================== */

/* Same "beat the old .tgl-benefits max-width" fix as the benefits
   page — main gets constrained if any legacy selector matches. */
.tgl-landing.tgl-impact-page {
    max-width: none;
    margin: 0;
    padding: 2.5rem 0 4rem;
}
.tgl-impact-page .tgl-landing__section {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
/* Archive grid spans the wider 992px canvas so the report cards
   sit on the same grid as the stories archive. Section-head is
   left-aligned to match /stories/ (defaults inherit `text-align:
   center` from the impact page's centered layout). */
.tgl-impact-page .tgl-landing__section.tgl-impact-page__archive {
    max-width: var(--tgl-content-max);
}
.tgl-impact-page .tgl-landing__section.tgl-impact-page__archive .tgl-section__head {
    text-align: left;
}

/* Featured report — just the big infographic image; intro copy now
   lives in the shared `.tgl-page-header` above this section. */
.tgl-impact-page__featured {
    text-align: center;
}
/* Hero atmosphere photo — full-bleed above the featured infographic.
   `100vw` + negative-margin trick pulls it out of `.tgl-landing`'s
   container padding for edge-to-edge coverage. */
.tgl-impact-page__hero {
    margin: 1.5rem auto 2.5rem;
    max-width: 540px;
    padding: 0 1.5rem;
}
.tgl-impact-page__hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

/* Impact-page override for the shared page-header title. Uses the
   same specs as `.tgl-about__hero-title` (the "Local Stories.
   Real-life Impact." heading) so both pages share one intro treatment
   — bold display, sentence-case, tight line-height. */
/* Impact-page-specific title override REMOVED — the shared
   `.tgl-page-header__title` (with brand-standard uppercase + size)
   is now used unchanged, so /impact-report/ reads identical to
   /action-journeys/, /videos/, /consulting/, etc. */
.tgl-impact-page__infographic {
    margin: 0 auto;
    max-width: 540px;
}
.tgl-impact-page__infographic img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.tgl-impact-page__infographic-fallback {
    background: rgba(255,255,255,0.4);
    border-radius: 24px;
    padding: 1rem;
    text-align: center;
}
.tgl-impact-page__infographic-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: rgba(18,40,6,0.08);
    border-radius: 24px;
}
.tgl-impact-page__infographic-caption {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    margin: 0.75rem 0 0;
    text-transform: uppercase;
}

/* Archive list — each report as a title + full-width photo stack.
   Separated with a hairline above the first entry (per Figma). */
.tgl-impact-page__archive {
    margin-top: 3rem;
}
/* Breathing room above the bottom role-CTA — separates it from the
   report grid so the sign-up pitch reads as its own beat. */
.tgl-impact-page + .tgl-role-cta,
.tgl-impact-page ~ .tgl-role-cta,
body.page-slug-impact-report .tgl-role-cta { margin-top: 4rem; }
.tgl-impact-card { text-align: center; }
.tgl-impact-card__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
}
.tgl-impact-card__media {
    display: block;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.tgl-impact-card__media:hover,
a.tgl-impact-card__media:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.tgl-impact-card__media img {
    display: block;
    width: 100%;
    height: auto;
}
.tgl-impact-card__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: rgba(18, 40, 6, 0.12);
}

/* "Download the full report" button under each card. Only renders
   when the editor sets the report's external URL (PDF). Same pink
   pill family as the Support-the-Greenline CTA at the bottom of the
   page, but a touch smaller so it reads as a per-card action. */
/* "Full Report (PDF)" button — dark-green wide pill matching the
   Figma reference (screenshot from the design). Sits centered under
   each impact card. */
.tgl-impact-card__actions { margin: 1rem auto 0; max-width: 480px; }
.tgl-impact-card__download {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--tgl-green-dark, #122806);
    color: #ffffff;
    padding: 0.85rem 2rem;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease;
}
.tgl-impact-card__download:hover,
.tgl-impact-card__download:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    text-decoration: none;
}

/* CTA wrapper — button itself is now the shared `.tgl-btn.tgl-btn--pink`. */
.tgl-impact-page__cta {
    text-align: center;
    padding-top: 3rem;
}

/* ==================================================================
   Comment Guidelines modal — first-comment ack interstitial.
   Rendered by TGL_Comment_Guidelines::render_modal() and driven by
   `assets/js/tgl-comment-guidelines.js`. Only shows for logged-in
   users who haven't acked yet; after the first ack (per user meta)
   PHP skips the render call entirely.
   ================================================================== */
.tgl-cg-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.tgl-cg-modal[hidden] { display: none !important; }
.tgl-cg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
}
.tgl-cg-modal__card {
    position: relative;
    background: #fff;
    border-radius: 24px;
    max-width: 480px;
    width: 100%;
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
}
.tgl-cg-modal__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--tgl-green-dark, #122806);
    padding: 0.25rem 0.5rem;
}
.tgl-cg-modal__close:hover { color: var(--tgl-green-dark, #122806); }
.tgl-cg-modal__title {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 0 1rem;
    color: var(--tgl-green-dark, #122806);
    text-transform: uppercase;
}
.tgl-cg-modal__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-size: 0.95rem;
    line-height: 1.45;
}
.tgl-cg-modal__list li {
    padding-left: 1.25rem;
    position: relative;
}
.tgl-cg-modal__list li::before {
    content: '•';
    position: absolute;
    left: 0.25rem;
    color: var(--tgl-green-accent, #CFD877);
    font-weight: 700;
}
.tgl-cg-modal__link {
    margin: 0 0 1.5rem;
    font-size: 0.85rem;
    color: var(--tgl-green-dark, #122806);
}
.tgl-cg-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.tgl-cg-modal__cancel,
.tgl-cg-modal__agree {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.65rem 1.1rem;
    border-radius: 24px;
    cursor: pointer;
    border: 0;
    transition: background 0.15s ease, color 0.15s ease;
    text-transform: uppercase;
}
.tgl-cg-modal__cancel {
    background: transparent;
    color: var(--tgl-green-dark, #122806);
}
.tgl-cg-modal__cancel:hover { color: var(--tgl-green-dark, #122806); }
.tgl-cg-modal__agree {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
}
.tgl-cg-modal__agree:hover,
.tgl-cg-modal__agree:focus-visible { color: var(--tgl-green-light, #CFD877); text-decoration: none; }
.tgl-cg-modal__agree:disabled { opacity: 0.6; cursor: default; }

/* ==================================================================
   /videos/ — inline play button on each card.
   Sits absolutely-positioned over the thumb; whole-card link
   underneath still routes to the single-video page. Player element
   inserted by tgl-video-inline-play.js replaces the thumb-wrap
   contents on click.
   ================================================================== */
/* 9:16 aspect is archive-only — a single-video page or a related-
   videos strip may reuse `.tgl-video-card` with content that isn't
   vertical, so we don't want to force it globally. */
.tgl-video-archive__grid .tgl-video-card__thumb-wrap { position: relative; aspect-ratio: 9 / 16; }
.tgl-video-archive__grid .tgl-video-card__thumb      { aspect-ratio: 9 / 16; }
/* Positioning context on the wrap regardless of aspect. */
.tgl-video-card__thumb-wrap { position: relative; }

/* Play button — bottom-right corner, small footprint, so the vast
   majority of the thumb is still clickable as the card-link to the
   single video page. Was a full-center 56px overlay that stole
   ~40% of the click area. */
/* Whole photo is a click target for playback when the wrap carries
   `[data-tgl-video-play]` (added by page-videos.php when an embed
   URL is set). JS intercepts the click and stops the surrounding
   `<a class="tgl-video-card__link">` from firing. */
.tgl-video-card__thumb-wrap[data-tgl-video-play] { cursor: pointer; }

.tgl-video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64px;
    height: 64px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 40, 6, 0.85);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background 0.15s ease;
}
.tgl-video-card__play:hover,
.tgl-video-card__play:focus-visible,
.tgl-video-card__thumb-wrap:hover .tgl-video-card__play {
    color: var(--tgl-green-light, #CFD877);
    transform: translate(-50%, -50%) scale(1.08);
    outline: none;
}
.tgl-video-card__play svg { margin-left: 3px; width: 28px; height: 28px; }
/* Hide play button zodra JS de speler heeft geplaatst — expliciete
   `display: none` want `display: inline-flex` op de button-basis-regel
   wint anders van het bare `hidden` attribuut. */
.tgl-video-card__play[hidden] { display: none !important; }

/* Player (iframe or <video>) fills the thumb-wrap after swap. */
.tgl-video-card__player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    aspect-ratio: 9 / 16;
}

/* ==================================================================
   Profile Edit (Settings tab) — display name + avatar upload UI.
   Rendered in account-dashboard.php; behaviour in tgl-profile-edit.js.
   ================================================================== */
.tgl-profile-edit__row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
}
.tgl-profile-edit__row--name { display: block; }
.tgl-profile-edit__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(18, 40, 6, 0.08);
}
.tgl-profile-edit__avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.tgl-profile-edit__upload-btn {
    cursor: pointer;
}
.tgl-profile-edit__remove {
    background: none;
    border: 0;
    color: var(--tgl-green-dark, #122806);
    text-decoration: underline;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0;
}
.tgl-profile-edit__remove:hover { color: var(--tgl-green-dark, #122806); }
.tgl-profile-edit__hint {
    font-size: 0.78rem;
    color: var(--tgl-green-dark, #122806);
    margin: 0.25rem 0 0;
}
.tgl-profile-edit__label {
    display: block;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
    margin: 0 0 0.35rem;
}
/* Display-name row — now wraps the shared `.tgl-content-archive__search`
   pill (icon + input + flush submit). Only role of this class is to
   constrain the pill width so it doesn't stretch across the settings
   panel; the input's own border/padding lives on the pill itself. */
.tgl-profile-edit__name-row {
    max-width: 480px;
}
.tgl-profile-edit__name-row .tgl-content-archive__search { width: 100%; }
/* Name input inherits `.tgl-content-archive__search-input` — no extra
   border/padding here so the pill stays seamless. Keep the color hook
   so future themes can override just this field. */
.tgl-profile-edit__input {
    color: var(--tgl-green-dark, #122806);
}
.tgl-profile-edit__msg {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--tgl-green-dark, #122806);
    min-height: 1.2em;
}
.tgl-profile-edit__msg.is-ok  { color: #122806; }
.tgl-profile-edit__msg.is-err { color: #b32d2e; }

/* ==================================================================
   Comment vote (▲ | score | ▼) — single-pill control.
   Rendered by tgl_comment_vote_render(), driven by tgl-comment-vote.js.
   Score is the visible signal; per-direction counts stay in the DOM
   (hidden) for JS state + shown in the title tooltip on hover.
   ================================================================== */
.tgl-cv {
    display: inline-flex;
    align-items: stretch;
    margin: 0.75rem 0 0;
    background: #ffffff;
    border: 1px solid rgba(18, 40, 6, 0.14);
    border-radius: 24px;
    overflow: hidden;
    line-height: 1;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    box-shadow: 0 1px 0 rgba(18, 40, 6, 0.02);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tgl-cv:hover { border-color: var(--tgl-green-dark, #122806); box-shadow: 0 2px 6px rgba(18, 40, 6, 0.05); }

.tgl-cv__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0.4rem 0;
    background: transparent;
    border: 0;
    color: var(--tgl-green-dark, #122806);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.tgl-cv__arrow:hover               { color: var(--tgl-green-dark, #122806); background: rgba(18, 40, 6, 0.05); }
.tgl-cv__arrow.is-active           { color: #fff; }
.tgl-cv__arrow--up.is-active       { background: #122806; }
/* Neutral grey for down-active — red felt too "outrage-signal" for
   an editorial site. Still clearly filled so users see their vote. */
.tgl-cv__arrow--down.is-active     { background: rgba(18, 40, 6, 0.6); }
.tgl-cv__arrow:disabled            { opacity: 0.6; cursor: default; }

.tgl-cv__score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    border-left:  1px solid rgba(18, 40, 6, 0.1);
    border-right: 1px solid rgba(18, 40, 6, 0.1);
}
.tgl-cv__hidden { display: none; }

/* Own comment — self-vote server-blocked; disable UI up-front. */
.tgl-cv.is-own {
    pointer-events: none;
    opacity: 0.45;
    cursor: default;
}

/* Downvoted-collapse hint sits where the body would be. */
.tgl-comment__downvoted-hint {
    margin: 0.35rem 0 0;
    font-family: var(--tgl-font-serif, 'Crimson Pro', Georgia, serif);
    font-style: italic;
    color: var(--tgl-green-dark, #122806);
    font-size: 0.9rem;
}
.tgl-comment__downvoted-show {
    background: none;
    border: 0;
    padding: 0;
    color: var(--tgl-green-dark, #122806);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font: inherit;
    margin-left: 0.35rem;
}
.tgl-comment__downvoted-show:hover { color: var(--tgl-green-accent, #122806); }

/* Sort tabs above the thread — 3 pill links. */
.tgl-comments__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Extra top margin so the "N COMMENT" heading + sort tabs don't sit
       flush against the white comment-form panel above them. */
    margin: 2.5rem 0 0.75rem;
    flex-wrap: wrap;
}
.tgl-cv-sort {
    display: inline-flex;
    gap: 0.25rem;
    background: rgba(18, 40, 6, 0.05);
    padding: 0.25rem;
    border-radius: 24px;
}
.tgl-cv-sort__tab {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tgl-green-dark, #122806);
    text-decoration: none;
    border-radius: 24px;
    transition: color 0.15s ease, background 0.15s ease;
    text-transform: uppercase;
}
.tgl-cv-sort__tab:hover     { color: var(--tgl-green-dark, #122806); }
.tgl-cv-sort__tab.is-active {
    background: var(--tgl-green-dark, #122806);
    color: #ffffff;
}

/* Custom-avatar variant of the account header bubble — square-crop
   circle-mask, replaces the initials div when a custom photo is set. */
.tgl-account__avatar--photo {
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* ==================================================================
   Search refine bar — inline date-range filter on /?s=… pages.
   Native `<input type="date">` for the pickers (browser calendar
   popup, no JS). Styled to match TGL editorial forms — same border
   colour + typography as the newsletter signup + membership forms.
   ================================================================== */
.tgl-search-refine {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
    align-items: flex-end;
    margin: 0 0 2rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    border: 1px solid rgba(18, 40, 6, 0.12);
    border-radius: 24px;
    box-shadow: 0 2px 10px rgba(18, 40, 6, 0.04);
}
.tgl-search-refine__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 1 auto;
}
.tgl-search-refine__field label {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--tgl-green-dark, #122806);
}
.tgl-search-refine__field input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(18, 40, 6, 0.2);
    border-radius: 24px;
    font-family: var(--tgl-font-body, 'Open Sans', system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.2;
    color: var(--tgl-green-dark, #122806);
    background: #fff;
    min-width: 175px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tgl-search-refine__field input[type="date"]:hover {
    border-color: var(--tgl-green-dark, #122806);
}
.tgl-search-refine__field input[type="date"]:focus {
    outline: none;
    border-color: var(--tgl-green-dark, #122806);
    box-shadow: 0 0 0 3px rgba(18, 40, 6, 0.15);
}
/* Force every part of Safari/Chrome date-input to render dark-green.
   Safari respects `-webkit-text-fill-color` on date-input shadow parts,
   but often ignores plain `color`. Setting both covers Chrome + Safari. */
.tgl-search-refine__field input[type="date"],
.tgl-search-refine__field input[type="date"]::-webkit-datetime-edit,
.tgl-search-refine__field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.tgl-search-refine__field input[type="date"]::-webkit-datetime-edit-text,
.tgl-search-refine__field input[type="date"]::-webkit-datetime-edit-day-field,
.tgl-search-refine__field input[type="date"]::-webkit-datetime-edit-month-field,
.tgl-search-refine__field input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--tgl-green-dark, #122806) !important;
    -webkit-text-fill-color: var(--tgl-green-dark, #122806) !important;
    opacity: 1 !important;
}
.tgl-search-refine__field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.tgl-search-refine__field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}
.tgl-search-refine__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-left: auto;
    align-self: flex-end;
}
.tgl-search-refine__submit {
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border: 0;
    padding: 0.7rem 1.6rem;
    border-radius: 24px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    text-transform: uppercase;
}
.tgl-search-refine__submit:hover,
.tgl-search-refine__submit:focus-visible {
    color: var(--tgl-green-light, #CFD877);
    transform: translateY(-1px);
}
.tgl-search-refine__clear {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.78rem;
    color: var(--tgl-green-dark, #122806);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tgl-search-refine__clear:hover { color: var(--tgl-green-dark, #122806); }

/* Membership CTA in the site header — desktop-only pill sitting
   between the search icon and the login/user area. Hidden on narrow
   viewports so mobile keeps the existing hamburger CTA. */
.tgl-header__cta {
    display: none;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 24px;
    background: var(--tgl-green-light, #CFD877);
    color: var(--tgl-green-dark, #122806);
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    text-transform: uppercase;
}
.tgl-header__cta:hover,
.tgl-header__cta:focus-visible {
    /* Light-Green bg base — text→LGreen would be invisible, keep dark
       green + add a 2px inset dark-green ring as typographic hover
       feedback (bg-swap + lift forbidden per brand rule). */
    color: var(--tgl-green-dark, #122806);
    box-shadow: inset 0 0 0 2px var(--tgl-green-dark, #122806);
    text-decoration: none;
}
@media (min-width: 720px) {
    .tgl-header__cta { display: inline-flex; }
}

/* Cookie-preferences floating button — hidden site-wide. The footer
   already has a "Cookie preferences" link (see footer.php) that
   triggers `window.tglConsent.open()`, so the floating pill was
   duplicating an existing entry point + eating fixed screen space.
   We keep the plugin element in the DOM so `toggle.click()` still
   works programmatically from the footer link. */
.tgl-consent-toggle { display: none !important; }

/* ==================================================================
   Share popover (desktop) — social platforms + copy link.
   Rendered by tgl-share.js. Mobile still uses the OS share sheet.
   ================================================================== */
.tgl-share-pop {
    position: absolute;
    z-index: 200;
    background: var(--tgl-green-dark, #122806);
    color: #fff;
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(18, 40, 6, 0.25), 0 2px 6px rgba(18, 40, 6, 0.12);
    min-width: 280px;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
}
.tgl-share-pop__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 4px;
    margin-bottom: 8px;
}
.tgl-share-pop__item,
.tgl-share-pop__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    background: transparent;
    border: 0;
    border-radius: 24px;
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.tgl-share-pop__item:hover,
.tgl-share-pop__item:focus-visible,
.tgl-share-pop__copy:hover,
.tgl-share-pop__copy:focus-visible {
    /* Brand hover rule: text → Light Green, bg holds. */
    color: #CFD877;
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}
.tgl-share-pop__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 24px;
    /* Subtle white bubble + white icon fill — much stronger contrast
       on the dark-green popover than the old Light-Green-alpha bubble
       with `--tgl-green-accent` (dark green after brand-strict pass)
       which rendered as near-invisible dark-on-dark. */
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.tgl-share-pop__copy {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 10px 12px;
    border-top: 1px solid rgba(207, 216, 119, 0.15);
    border-radius: 24px;
    padding-top: 12px;
    font-size: 0.8rem;
}
.tgl-share-pop__copy .tgl-share-pop__icon {
    width: 28px; height: 28px;
}
.tgl-share.is-copied { color: var(--tgl-green-accent, #CFD877); }

/* ==================================================================
   Kill hover underline on button-shaped anchors — universal.

   The global `a:hover { text-decoration: underline }` (line ~56) is
   correct for inline text links but leaks into every `<a>` that has
   a button class. Buttons already carry visual feedback (fill flip,
   border, bg pill) so the extra underline reads as a broken style.

   This selector catches every BEM button/CTA class in the theme +
   plugins by attribute-substring match — new button classes are
   automatically covered without further work.
   ================================================================== */
/* NOTE: `color: LGreen` on hover only works when the base bg is
   dark green — on light-brand surfaces (Pink, Light Green, Orange,
   Blue) LGreen text fails contrast. This global sweep therefore
   ONLY sets `text-decoration: none` (kill the a:hover underline).
   Each button's own hover rule owns the color shift, so light-
   surface buttons can keep their text dark-green + use an inset
   ring for feedback without an `!important` arms race. */
a[class*="__btn"]:hover,
a[class*="__btn"]:focus-visible,
a[class*="__cta"]:hover,
a[class*="__cta"]:focus-visible,
a[class*="__submit"]:hover,
a[class*="__submit"]:focus-visible,
a[class*="__link-btn"]:hover,
a[class*="__link-btn"]:focus-visible,
a[class*="__button"]:hover,
a[class*="__button"]:focus-visible,
a.tgl-btn:hover,
a.tgl-btn:focus-visible {
    text-decoration: none;
}

/* ================================================================
   Pull-quote — migrated from legacy Beaver <h2>"quote"</h2><p>attr</p>
   pattern via TGL_Migration_PullQuoteWrapper. Franklin bold, sits
   off the copy flow with generous vertical rhythm.
   ================================================================ */
.tgl-article__content .tgl-article__pullquote {
    margin: 2.5rem 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.tgl-article__content .tgl-article__pullquote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    quotes: none;
}
.tgl-article__content .tgl-article__pullquote blockquote p {
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif) !important;
    font-size: 35px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    margin: 0;
    font-style: normal !important;
    text-transform: uppercase;
}
.tgl-article__content .tgl-article__pullquote figcaption {
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-family: var(--tgl-font-display, 'Libre Franklin', sans-serif);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--tgl-green-dark, #122806);
    font-style: normal;
}

/* Team-member name → author archive link. Sits inside dark-green
   band on /about/. Keep white, no underline; hover to Light Green
   (only readable green option on dark bg). */
.tgl-team-card__name a,
.tgl-team-card__name a:visited {
    color: inherit;
    text-decoration: none !important;
}
.tgl-team-card__name a:hover,
.tgl-team-card__name a:focus-visible {
    color: var(--tgl-green-light, #CFD877) !important;
    text-decoration: none !important;
    outline: none;
}


/* --- Recovered content marker -----------------------------------------
   The migration recovery script (scratchpad/restore-lost-blocks.php)
   appends any blocks that were dropped during the workbench run into a
   `wp:group` with class `tgl-recovered-content`. The wrap gets a bright
   band so editors + preview-viewers see it clearly and know these blocks
   must be repositioned. Remove or invert this rule once the editorial
   team has finished repositioning everything. */
.tgl-recovered-content {
    background: #FFF8DC;                 /* soft amber */
    border: 2px dashed #B8860B;
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0;
}
.tgl-recovered-heading {
    color: #7A5C00 !important;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 1rem !important;
    margin: 0 0 0.5rem !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.tgl-recovered-intro {
    color: #7A5C00;
    font-style: normal;
    margin: 0 0 1rem !important;
}

/* --- Lede paragraph --------------------------------------------------
   Large serif "kicker" paragraph. Registered as a Gutenberg block style
   on core/paragraph in functions.php ("Lede"), which emits
   `class="is-style-lede"` on the <p>. All content sources — editor
   choice + migrated content (normalized to is-style-lede) — use the
   SAME class so there's exactly one rule to reason about. Applied only
   inside content scopes so it never leaks into UI/nav. */
.tgl-article__content .is-style-lede,
.tgl-event-single__description .is-style-lede,
.tgl-page__content .is-style-lede {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 1.75rem;
    line-height: 1.25em;
    font-weight: 500;
    color: var(--tgl-green-dark, #122806);
    /* Keep the prose column's 700px cap + auto centering so the lede
       aligns with the paragraphs beneath it (`.tgl-article__content > p`
       is already max-width:700px; margin-inline:auto). Only override
       the vertical margins. */
    max-width: 700px;
    margin: 0 auto 2rem;
    font-style: normal;
}
@media (max-width: 760px) {
    .tgl-article__content .is-style-lede,
    .tgl-event-single__description .is-style-lede,
    .tgl-page__content .is-style-lede { font-size: 1.4rem; }
}

/* --- Crimson Subhead paragraph -------------------------------------
   Registered as a Gutenberg block style on core/paragraph in
   functions.php ("Crimson Subhead"). Editors pick it from the Styles
   sidebar; the class `is-style-crimson-subhead` lands on the <p>.
   Applied only inside content scopes so it never leaks into UI/nav. */
.tgl-article__content .is-style-crimson-subhead,
.tgl-event-single__description .is-style-crimson-subhead,
.tgl-page__content .is-style-crimson-subhead {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    color: var(--tgl-green-dark, #122806);
    max-width: 700px;
    margin: 0 auto 1.5rem;
}

/* Shared byline group container — see block at bottom for full styles */

/* --- Shared byline group container -----------------------------------
   Used on ANY page that has 2+ authors — story pages, AJ parts, etc.
   Single green pill; authors stack vertically inside. */
.tgl-byline-group {
    max-width: 560px;
    margin: 1.5rem auto;
    background: var(--tgl-green-light, #CFD877);
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tgl-byline-group .tgl-byline--card {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: none;
    box-shadow: none;
    border: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .85rem;
}
.tgl-byline-group .tgl-byline__body { min-width: 0; }
.tgl-byline-group .tgl-byline__actions {
    margin-left: 0;
    flex-shrink: 0;
}
.tgl-byline-group .tgl-byline__avatar-link,
.tgl-byline-group .tgl-byline__avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    flex: 0 0 64px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.tgl-byline-group .tgl-byline__avatar {
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
@media (max-width: 480px) {
    /* Mobile: avatar left spanning both rows; name row 1 right; follow
       button row 2 right, aligned with the name column (matches the
       standalone `.tgl-byline--card` mobile layout so a group looks like
       stacked compact cards). */
    .tgl-byline-group .tgl-byline--card {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "avatar body"
            "avatar actions";
        row-gap: 0.5rem;
        column-gap: 0.85rem;
    }
    .tgl-byline-group .tgl-byline--card > .tgl-byline__avatar,
    .tgl-byline-group .tgl-byline--card > .tgl-byline__avatar-link,
    .tgl-byline-group .tgl-byline--card > img.tgl-byline__avatar {
        grid-area: avatar;
        align-self: center;
    }
    .tgl-byline-group .tgl-byline--card > .tgl-byline__body { grid-area: body; }
    .tgl-byline-group .tgl-byline--card > .tgl-byline__actions {
        grid-area: actions;
        margin: 0 auto 0 0 !important;
        justify-self: start !important;
        width: max-content !important;
        max-width: 100%;
    }
    .tgl-byline-group .tgl-byline__actions .tgl-follow-btn {
        width: auto !important;
        display: inline-flex;
    }
}