/* ============================================================================
   WE THEM MEDIA — DESIGN SYSTEM v2 (2026-07-17)
   Community-maintained public-interest media.
   Layered on top of wtm.css. Load AFTER wtm.css in the <link> chain.
   Adopts the July 2026 logo redesign visual language:
     - Teal (#3FBFAD) as primary editorial accent
     - Coral (#E5714F) as urgency + CTA accent
     - Cream ink (#EFEAE0) as text + hard rules
     - Archivo Black (display) + Archivo (body) + IBM Plex Mono (labels)
     - Hard 2px cream rules dividing every section
     - Swiss editorial tile grids
   ============================================================================ */

/* ============ TOKEN REBIND ============ */
:root {
    /* Backgrounds */
    --bg: #12110E;
    --bg-elev: #1A1814;
    --bg-surface: #221F1A;
    --bg-hover: #2A261F;

    /* Text — cream */
    --text: #EFEAE0;
    --text-muted: #B5AFA2;
    --text-dim: #8F897C;
    --text-low: #6B665B;

    /* Borders — cream/faint */
    --border: #2C2820;
    --border-strong: #3D362A;
    --rule-color: #EFEAE0;

    /* Brand accents */
    --teal: #3FBFAD;
    --teal-deep: #1A6962;
    --coral: #E5714F;
    --coral-deep: #C45438;
    --ink: #EFEAE0;              /* cream, replacing old brushwork coral */
    --gold: #EFEAE0;             /* deprecated — remapped to cream no-op */

    /* Type stack */
    --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
    --body: 'Archivo', system-ui, -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;

    /* Rule */
    --rule: 2px solid #EFEAE0;
}

/* ============ BODY BASELINE ============ */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1280px; margin: 0 auto; }

/* Kill the old brushstroke / WONK / sumi-e climax treatments — new visual doesn't use them */
.climax-ink,
[class*="brush"],
h1 em, h2 em, h3 em {
    font-family: inherit !important;
    font-style: normal;
    font-variation-settings: normal !important;
    color: var(--teal);
    font-weight: inherit;
    background-image: none !important;
}

/* Old .tape / .eyebrow / .kicker legacy patterns get remapped to new mono kicker */
.tape, .eyebrow, .page-eyebrow {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--teal) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    display: inline-block;
}

/* ============ TYPOGRAPHY OVERRIDES ============ */
h1, h2, h3, h4 {
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    text-wrap: pretty;
    font-variation-settings: normal;
}
h1 { font-size: clamp(38px, 5.5vw, 68px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(19px, 2vw, 26px); text-transform: none; letter-spacing: 0; }
h4 { font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 800; font-family: var(--body); }

/* Highlighted phrase — teal ink accent */
h1 .hl, h2 .hl, h3 .hl, .hl {
    color: var(--teal);
    font-family: inherit;
    font-style: normal;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--coral); }

/* ============ HEADER + NAV ============ */
header {
    border-bottom: var(--rule);
    background: var(--bg);
}
header .wrap.nav,
header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 44px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--text);
    text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand img {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 2px solid var(--text);
    display: block;
}
.brand span:not(.tag) {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--teal);
    border: 1px solid rgba(63, 191, 173, 0.4);
    padding: 4px 9px;
    border-radius: 2px;
    text-transform: uppercase;
}
.links {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
    margin: 0;
    padding: 0;
}
.links a { color: #C9C3B6; }
.links a:hover { color: var(--text); }
.links a.active,
.links a[aria-current="page"] { color: var(--teal); }

/* Backwards compat with existing masthead nav id */
#primary-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    font-weight: 700;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
#primary-nav li { list-style: none; }
#primary-nav a {
    color: #C9C3B6;
    font-family: var(--body);
    text-transform: none;
    letter-spacing: 0;
}
#primary-nav a:hover { color: var(--text); }
#primary-nav a[aria-current="page"] { color: var(--teal); }
#primary-nav .nav-pizzaday a,
#primary-nav a[href="pizzaday.html"] { color: var(--coral) !important; font-weight: 800; }

/* ============ BUTTONS ============ */
.btn {
    display: inline-block;
    font-family: var(--body);
    font-weight: 800;
    font-size: 13.5px;
    padding: 11px 22px;
    border-radius: 2px;
    color: #12110E;
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.15s;
    border: 0;
    cursor: pointer;
}
.btn:hover { opacity: 0.85; color: #12110E; }
.btn-coral { background: var(--coral); }
.btn-teal { background: var(--teal); }
.btn-ink { background: var(--text); }
.btn-line {
    border: 2px solid var(--text);
    color: var(--text);
    padding: 9px 22px;
    background: transparent;
}
.btn-line:hover { color: var(--text); background: rgba(239, 234, 224, 0.08); opacity: 1; }

/* ============ HERO ============ */
.hero {
    padding: 68px 44px 52px;
    border-bottom: var(--rule);
}
.kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--teal);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}
.hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 48px;
    margin-top: 26px;
    flex-wrap: wrap;
}
.lede {
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
    max-width: 50ch;
    color: var(--text-muted);
    text-transform: none;
    font-weight: 400;
}
.cta {
    display: flex;
    gap: 12px;
    flex: none;
    font-weight: 800;
    flex-wrap: wrap;
}

/* ============ TILES ============ */
.tiles {
    display: grid;
    border-bottom: var(--rule);
}
.tiles-3 { grid-template-columns: 1.3fr 1fr 1fr; }
.tiles-eq { grid-template-columns: repeat(3, 1fr); }
.tiles-2 { grid-template-columns: repeat(2, 1fr); }
.tile {
    padding: 30px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-right: var(--rule);
    text-decoration: none;
    color: var(--text);
}
.tile:last-child { border-right: none; }
.still {
    aspect-ratio: 4/3;
    background: repeating-linear-gradient(-45deg, #1C1A16, #1C1A16 8px, #221F1A 8px, #221F1A 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-low);
    position: relative;
    overflow: hidden;
}
.still img,
.still video,
.still iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.still-wide { aspect-ratio: 16/9; }
.cat {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--coral);
}
.tile h3 {
    font-family: var(--body);
    font-weight: 800;
    font-size: 19px;
    line-height: 1.25;
    margin: 0;
    text-wrap: pretty;
    text-transform: none;
    letter-spacing: 0;
}
.tile.lead h3 { font-size: 26px; line-height: 1.2; }
.byline { font-size: 13px; color: var(--text-dim); }
.byline strong { color: var(--text); font-weight: 700; }
a.tile { color: var(--text); }
a.tile:hover { background: #161512; color: var(--text); }

/* Responsive tiles: stack on narrow screens */
@media (max-width: 900px) {
    .tiles-3, .tiles-eq, .tiles-2 { grid-template-columns: 1fr; }
    .tile { border-right: none; border-bottom: var(--rule); }
    .tile:last-child { border-bottom: none; }
}

/* ============ NUMBERED STEPS ============ */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: var(--rule);
}
.step {
    padding: 32px;
    border-right: var(--rule);
}
.step:last-child { border-right: none; }
.step .n {
    font-family: var(--display);
    font-size: 34px;
    color: var(--teal);
    line-height: 1;
}
.step h4 {
    font-family: var(--body);
    font-weight: 800;
    font-size: 16px;
    margin: 8px 0 0;
    text-transform: none;
    letter-spacing: 0;
}
.step p {
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 6px 0 0;
}
@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr; }
    .step { border-right: none; border-bottom: var(--rule); }
    .step:last-child { border-bottom: none; }
}

/* ============ SECTION HEADER ROWS ============ */
.sechead {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 18px 44px;
    border-bottom: var(--rule);
    gap: 20px;
    flex-wrap: wrap;
}
.sechead .t {
    font-family: var(--display);
    font-size: clamp(22px, 2.4vw, 30px);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.sechead .mono {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ============ POSTER + PROSE ============ */
.poster {
    font-family: var(--display);
    font-size: clamp(24px, 3vw, 34px);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    line-height: 1.05;
}
.prose {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 64ch;
}
.prose strong { color: var(--text); font-weight: 700; }
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--teal); border-bottom: 1px solid rgba(63, 191, 173, 0.4); }
.prose a:hover { color: var(--coral); border-bottom-color: var(--coral); }

/* ============ FOOTER ============ */
footer {
    padding: 32px 44px;
    border-top: var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
footer .wrap {
    display: contents;
}
.foot-state {
    font-family: var(--display);
    font-size: clamp(18px, 1.8vw, 22px);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    max-width: 40ch;
    line-height: 1.15;
}
.foot-right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.foot-right span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.foot-links {
    display: flex;
    justify-content: space-between;
    padding: 18px 44px;
    border-top: var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    gap: 20px;
    flex-wrap: wrap;
}
.foot-links a { color: var(--text-dim); }
.foot-links a:hover { color: var(--teal); }

@media (max-width: 720px) {
    header .wrap.nav, header .nav { flex-direction: column; align-items: flex-start; padding: 16px 20px; }
    .hero { padding: 44px 20px 36px; }
    .sechead, .foot-links, footer { padding-left: 20px; padding-right: 20px; }
}

/* ============ UTILITY ============ */
.mono { font-family: var(--mono); }
.black { font-family: var(--display); }

/* ============ NEUTRALIZE LEGACY DECORATION ============ */
/* Old page-hero gradients and coral watermarks: mute them so the new hard-rule aesthetic dominates */
[class*="page-hero"]::before,
[class*="page-hero"]::after,
[class*="hero"]::before,
[class*="hero"]::after {
    display: none !important;
}
/* Soften old .page-eyebrow / eyebrow chips */
.page-eyebrow, .eyebrow-chip { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* ============================================================================
   MASTHEAD OVERRIDES — restyle existing .masthead structure in new system
   ============================================================================ */
.masthead {
    background: var(--bg) !important;
    border-bottom: var(--rule) !important;
    box-shadow: none !important;
}
.masthead-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
    flex-wrap: wrap;
}
.masthead .brand {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    color: var(--text) !important;
    text-decoration: none;
}
.masthead .brand img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    border: 2px solid var(--text);
    display: block;
    object-fit: cover !important;
}
.masthead .brand span:not(.tag) {
    font-family: var(--display) !important;
    font-size: 18px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    color: var(--text) !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}
.masthead .spiral { display: none !important; }

/* Nav rows */
.masthead #primary-nav ul {
    display: flex;
    align-items: center;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.masthead #primary-nav a {
    font-family: var(--body);
    font-weight: 700;
    font-size: 13px;
    color: #C9C3B6;
    text-transform: none;
    letter-spacing: 0;
}
.masthead #primary-nav a:hover { color: var(--text); }
.masthead #primary-nav a[aria-current="page"] { color: var(--teal); }
.masthead #primary-nav .nav-pizzaday a { color: var(--coral) !important; font-weight: 800; }

/* Right-side CTAs */
.masthead-cta {
    background: var(--coral) !important;
    color: #12110E !important;
    font-family: var(--body) !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    padding: 11px 22px !important;
    border-radius: 2px !important;
    border: 0 !important;
    text-decoration: none;
    transition: opacity 0.15s;
}
.masthead-cta:hover { opacity: 0.85; color: #12110E !important; }

.masthead-discord,
.masthead-subscribe {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    border: 1px solid rgba(63, 191, 173, 0.4) !important;
    padding: 7px 10px !important;
    border-radius: 2px !important;
    background: transparent !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.masthead-discord:hover,
.masthead-subscribe:hover {
    background: rgba(63, 191, 173, 0.08) !important;
    color: var(--teal) !important;
    border-color: var(--teal) !important;
}

/* ============================================================================
   FOOTER OVERRIDES — restyle existing rich footer in new system
   ============================================================================ */
footer {
    background: var(--bg) !important;
    border-top: var(--rule) !important;
    padding: 0 !important;
    display: block !important;
}
footer .wrap {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 40px 44px 20px !important;
    display: block !important;
}
.footer-masthead {
    font-family: var(--display) !important;
    font-size: clamp(22px, 2.4vw, 32px) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    color: var(--text) !important;
    max-width: 40ch;
    margin-bottom: 36px;
}
.footer-masthead .italic {
    font-style: normal !important;
    color: var(--teal) !important;
    font-family: inherit !important;
}
.footer-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    border-top: var(--rule);
    border-bottom: var(--rule);
    margin: 24px 0 !important;
}
.footer-col {
    padding: 24px 28px !important;
    border-right: var(--rule);
}
.footer-col:last-child { border-right: none; }
.footer-col h4 {
    font-family: var(--display) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--text) !important;
    margin-bottom: 12px !important;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col li { margin-bottom: 6px; }
.footer-col a {
    font-family: var(--body) !important;
    color: var(--text-muted) !important;
    font-size: 14px !important;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-col a:hover { color: var(--teal) !important; }
.footer-bio {
    font-family: var(--body) !important;
    color: var(--text-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.footer-social {
    display: flex;
    gap: 18px;
    margin: 20px 0 !important;
}
.footer-social-icon {
    width: 22px; height: 22px;
    color: var(--text-muted) !important;
    transition: color 0.15s;
}
.footer-social-icon:hover { color: var(--teal) !important; }
.footer-social-icon svg { width: 100%; height: 100%; }
.footer-cta {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--border);
    margin-top: 20px;
}
.footer-cta a {
    color: var(--teal) !important;
    text-decoration: none;
}
.footer-cta a:hover { color: var(--coral) !important; }
.footer-bottom {
    font-family: var(--mono) !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--text-dim) !important;
    padding: 16px 0 !important;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col { border-right: none; border-bottom: var(--rule); }
    .footer-col:last-child { border-bottom: none; }
}

/* ============================================================================
   PAGE HERO OVERRIDES — existing .page-hero / .hero patterns
   ============================================================================ */
.page-hero,
main > section.hero:first-of-type,
main > .hero:first-child {
    border-bottom: var(--rule);
    padding: 68px 44px 52px !important;
    background: var(--bg) !important;
}
.page-hero h1,
.page-hero .h1 {
    font-family: var(--display) !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    font-variation-settings: normal !important;
    color: var(--text) !important;
}
.page-hero .page-eyebrow,
.page-hero .eyebrow-chip {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    color: var(--teal) !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px;
    display: inline-block;
}

/* Neutralize legacy hero decorations */
.page-hero::before,
.page-hero::after { display: none !important; }

/* ============================================================================
   MOBILE POLISH (2026-08-04)
   Targeted improvements for touch, hierarchy, and rhythm on small screens.
   ============================================================================ */

@media (max-width: 720px) {
    /* Bigger touch targets — WCAG recommends 48x48px minimum, we go 52px */
    .btn, .sup-cta-primary, .sup-cta-alt {
        min-height: 52px;
        padding: 15px 24px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Nav links — bigger tap area */
    #primary-nav a,
    .links a {
        padding: 10px 0 !important;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Masthead spacing on mobile */
    .masthead-inner,
    header .wrap.nav,
    header .nav {
        padding: 14px 20px !important;
        gap: 12px !important;
    }

    /* Hero padding — tighter horizontally, still generous vertically */
    .hero,
    .qtw-hero,
    .rm-hero,
    .sup-story {
        padding: 48px 20px !important;
    }

    /* Section headers on mobile — smaller padding */
    .sechead {
        padding: 14px 20px !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .sechead .t {
        font-size: 20px;
        line-height: 1.1;
    }
    .sechead .mono {
        font-size: 10px;
    }

    /* Tiles + steps — stack cleanly, less padding */
    .tile, .step, .qtw-step, .rm-phase, .sup-tier, .sup-plan-tile,
    .sup-two-col > div, .sup-four > div, .rm-meta-cell {
        padding: 24px 20px !important;
    }

    /* Iframe survey embed — full width */
    iframe[src*="docs.google.com/forms"] {
        width: 100% !important;
        max-width: none !important;
        min-height: 800px;
    }

    /* Support tier tiles — tighten */
    .sup-tier {
        padding: 28px 20px !important;
    }
    .sup-tier-price {
        font-size: 36px !important;
    }
    .sup-tier-perks li {
        font-size: 15px;
        line-height: 1.55;
    }

    /* Bills breakdown — stack two buckets cleanly */
    .sup-budget-list {
        grid-template-columns: 1fr !important;
    }
    .sup-budget-row {
        border-right: none !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 24px 20px !important;
    }
    .sup-budget-row:last-child {
        border-bottom: none !important;
    }

    /* Threshold ladder — mono type slightly bigger */
    .sup-ladder-row {
        padding: 20px !important;
        flex-direction: column;
        gap: 10px;
    }
    .sup-ladder-when {
        font-size: 22px !important;
    }
    .sup-ladder-what {
        font-size: 15px;
    }

    /* FAQ — cleaner spacing */
    .sup-faq-item {
        padding: 20px 0 !important;
    }
    .sup-faq-q {
        font-size: 17px;
    }
    .sup-faq-a {
        font-size: 14.5px;
    }

    /* Footer stack cleanly */
    footer .wrap { padding: 32px 20px 16px !important; }
    .footer-masthead { font-size: 22px !important; margin-bottom: 24px; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-col { border-right: none !important; border-bottom: var(--rule) !important; padding: 20px !important; }
    .footer-col:last-child { border-bottom: none !important; }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 0 !important;
        font-size: 9.5px !important;
    }

    /* Hero row — stack CTAs vertically on mobile with full-width buttons */
    .hero-row, .cta {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-row .cta { width: 100%; }
    .cta .btn { width: 100%; text-align: center; }

    /* August 2026 goal banner — tighter */
    .sup-aug-goal {
        padding: 18px 20px !important;
        margin-right: 0 !important;
    }

    /* pd-section stack tighter */
    .pd-section-wrap { padding: 32px 20px !important; }

    /* Anchor sections start higher when scrolled to (mobile has less viewport) */
    section[id], div[id="tiers"], div[id="submissions"] {
        scroll-margin-top: 90px;
    }
}

/* Tighter tap-affordance on tier CTA rows */
.sup-tier a.btn {
    text-align: center;
    width: 100%;
    justify-content: center;
}

/* ============================================================================
   DESIGN POLISH (2026-08-04)
   Iteration on the v2 system after live-usage review.
   ============================================================================ */

/* ── 1. Warmer body text muted color ─────────
   Old: #B5AFA2 (slightly gray/cold)
   New: #C4BDAD (cream-tinted, warmer against near-black bg)
   Still WCAG AA compliant against #12110E background (~9.1:1)
   ============================================ */
:root {
    --text-muted: #C4BDAD;
}

/* ── 2. H1 hierarchy — homepage keeps the shout, secondary pages get a slightly quieter version ──
   Homepage hero H1 stays at 68px max.
   Secondary pages (identified by not having .tv-section on the page — usually only home has it)
   drop to 56px so the visual weight has variation across the site. ── */
main:not(:has(.tv-section)) .hero h1,
main:not(:has(.tv-section)) .qtw-hero h1 {
    font-size: clamp(34px, 4.4vw, 56px);
}

/* ── 3. Featured tier gets real visual emphasis ─────────
   Coral border, slight upward lift, MOST-POPULAR chip elevation.
   ============================================ */
.sup-tier.featured {
    border: 2px solid var(--coral) !important;
    background: rgba(229, 113, 79, 0.06) !important;
    position: relative;
    z-index: 2;
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.sup-tier.featured .sup-tier-name .badge {
    background: var(--coral);
    color: #12110E;
    border-color: var(--coral);
    padding: 4px 10px;
    font-weight: 800;
}
@media (max-width: 900px) {
    .sup-tier.featured { transform: none; box-shadow: none; }
}

/* ── 4. Tile hover — add micro-motion so cards feel clickable ─────────
   Translate + slight border color shift on hover.
   ============================================ */
a.tile {
    transition: transform 0.2s ease, background 0.2s, border-color 0.2s;
}
a.tile:hover {
    transform: translate(-2px, -2px);
    background: #161512 !important;
}
a.tile:active { transform: translate(0, 0); }

/* Same treatment on queryheworld campaign links */
.qtw-campaign a.qtw-cta {
    transition: background 0.2s, transform 0.15s, color 0.2s !important;
}
.qtw-campaign a.qtw-cta:hover {
    transform: translateY(-1px);
}

/* ── 5. Consistent focus states for accessibility ─────────
   Every interactive element gets a 2px teal outline on keyboard focus.
   Removes ugly browser default blue box, adds real a11y.
   ============================================ */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.sup-cta-primary:focus-visible,
.sup-cta-alt:focus-visible,
input:focus-visible,
.tile:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
    border-radius: 1px;
}
/* Coral variant when the interactive element is inside a coral-bordered context */
.sup-tier.featured a:focus-visible,
.sup-aug-goal a:focus-visible {
    outline-color: var(--coral);
}

/* ============================================================================
   DESIGN POLISH — PART 2 (2026-08-04, remaining 3 items)
   Softer rules · standardized underlines · neutralized reveal
   ============================================================================ */

/* ── 6. Softer hard rules ─────────
   Was: --rule: 2px solid #EFEAE0 (full cream, loud)
   Now: 1px solid cream at 55% opacity (still hard-editorial, less shouted)
   Result: on long pages, sections feel like they breathe instead of stacking like drawers.
   ============================================ */
:root {
    --rule: 1px solid rgba(239, 234, 224, 0.55);
}
/* Where a stronger divider is intentional (major narrative shift, header/footer boundary), the class can override */
header, footer, .rule-strong {
    border-bottom: 2px solid var(--text) !important;
}

/* ── 7. Standardized inline prose link underlines ─────────
   Global base sets links as no-underline. Inside prose contexts we WANT the underline
   to signal "clickable body text link" without stealing color from the design.
   ============================================ */
.prose a,
.sup-story .prose a,
.rm-body a,
.wtm-article a,
.sup-faq-a a,
.pd-prose a,
p a[href^="http"]:not(.btn):not(.sup-cta-alt):not(.sup-cta-primary):not(.pd-btn),
p a[href^="/"]:not(.btn):not(.sup-cta-alt):not(.sup-cta-primary):not(.pd-btn),
p a[href^="mission.html"]:not(.btn),
p a[href^="supporter.html"]:not(.btn),
p a[href^="pizzaday.html"]:not(.btn),
p a[href^="portfolio.html"]:not(.btn),
p a[href^="team.html"]:not(.btn),
p a[href^="queryheworld.html"]:not(.btn),
li a[href^="http"]:not(.btn) {
    text-decoration: underline !important;
    text-decoration-color: var(--teal) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 4px !important;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.prose a:hover,
.wtm-article a:hover,
.sup-faq-a a:hover {
    text-decoration-color: var(--coral) !important;
    color: var(--coral) !important;
}

/* ── 8. Neutralize dead .reveal scroll-fade classes ─────────
   Old design had opacity-0 → opacity-1 fade-in-on-scroll patterns using .reveal + intersection
   observer JS. The v2 hard-editorial aesthetic doesn't lean on motion.
   Forcing .reveal elements to be always-visible eliminates any FOUC/jank without touching JS.
   ============================================ */
.reveal,
.reveal[data-revealed="false"],
.reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
}
/* Any staggered fade patterns */
[class*="stagger"], [data-stagger] {
    opacity: 1 !important;
    transform: none !important;
}