/* ==========================================================================
   The Sugar Question - theme styles

   Look: deep maroon and near black on the hero and the section bands, lit with
   a warm amber glow and soft out of focus cells, all drawn with CSS gradients
   so there are no images to load or license. Reading stays on the light cream
   background, because a daily newsletter has to be comfortable to read.

   All colours and type live in :root. Classes are prefixed thp- so they never
   clash with Ghost cards.min.css.
   ========================================================================== */

:root {
    /* brand anchors, shared with the email cards */
    --sq-crimson: #e11d48;
    --sq-crimson-dark: #be123c;
    --sq-crimson-deep: #9f1239;
    --sq-gold: #fbbf24;
    --sq-gold-dark: #f59e0b;
    --sq-green: #10b981;
    --sq-green-dark: #059669;

    /* the dark end, taken from the reference imagery */
    --sq-void: #14030a;
    --sq-deep: #2e0711;
    --sq-blood: #6d121d;
    --sq-plum: #4a0d16;

    /* the warm glow */
    --sq-amber: #f0a34f;
    --sq-amber-light: #ffcf8f;
    --sq-coral: #e07a72;

    /* iridescence, used sparingly as a hairline accent */
    --sq-iris-a: #b9d6e6;
    --sq-iris-b: #cdbde3;
    --sq-iris-c: #bfe3d2;

    /* light surfaces */
    --sq-bg: #fdf3f6;
    --sq-card: #fff8f1;
    --sq-white: #ffffff;
    --sq-line: #fce7ef;

    /* text */
    --sq-ink: #2a0810;
    --sq-text: #2b1220;
    --sq-muted: #8a5c70;
    --sq-on-dark: #ffeaf0;
    --sq-on-dark-muted: #e0b5c2;

    /* type */
    --sq-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
    --sq-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* shape */
    --sq-radius: 16px;
    --sq-radius-sm: 12px;
    --sq-shadow: 0 10px 40px rgba(20, 3, 10, 0.45);
    --sq-shadow-sm: 0 2px 12px rgba(42, 8, 16, 0.08);

    /* layout */
    --sq-wrap: 1200px;
    --sq-narrow: 680px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--sq-bg);
    color: var(--sq-text);
    font-family: var(--sq-body);
    font-size: 17px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; }
a { color: var(--sq-crimson-dark); }

:focus-visible { outline: 3px solid var(--sq-gold); outline-offset: 2px; }

.thp-skip { position: absolute; left: -9999px; top: 0; background: var(--sq-void); color: #fff; padding: 12px 18px; z-index: 100; }
.thp-skip:focus { left: 8px; top: 8px; }

.thp-wrap { width: 100%; max-width: var(--sq-wrap); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.thp-narrow { max-width: var(--sq-narrow); }
.thp-center, .thp-text { text-align: center; }
.thp-gold { color: var(--sq-gold); }

/* =============================================== the atmosphere layer ==== */

.thp-dark {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 72% 18%, rgba(109, 18, 29, 0.85) 0%, rgba(46, 7, 17, 0) 60%),
        radial-gradient(90% 70% at 18% 88%, rgba(240, 163, 79, 0.22) 0%, rgba(46, 7, 17, 0) 55%),
        linear-gradient(165deg, var(--sq-deep) 0%, var(--sq-void) 100%);
    color: var(--sq-on-dark);
}

.thp-cells { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }

/* one cell: a biconcave disc, dimmer in the middle, fading at the rim */
.thp-cell {
    position: absolute;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(122, 20, 30, 0.95) 0%,
            rgba(122, 20, 30, 0.95) 26%,
            rgba(196, 58, 58, 0.92) 42%,
            rgba(224, 122, 114, 0.75) 62%,
            rgba(224, 122, 114, 0) 74%);
}

.thp-cell-1 { width: 300px; height: 300px; top: -70px; right: -60px; filter: blur(2px); opacity: 0.85; }
.thp-cell-2 { width: 170px; height: 170px; top: 28%; right: 16%; filter: blur(1px); opacity: 0.75; }
.thp-cell-3 { width: 92px;  height: 92px;  top: 12%; right: 32%; filter: blur(4px); opacity: 0.5; }
.thp-cell-4 { width: 220px; height: 220px; bottom: -80px; right: 24%; filter: blur(6px); opacity: 0.45; }
.thp-cell-5 { width: 64px;  height: 64px;  bottom: 22%; right: 8%;  filter: blur(1px); opacity: 0.6; }
.thp-cell-6 { width: 130px; height: 130px; bottom: -40px; left: -30px; filter: blur(5px); opacity: 0.4; }
.thp-cell-7 { width: 48px;  height: 48px;  top: 58%; right: 42%; filter: blur(2px); opacity: 0.45; }

/* the warm light coming through the vessel wall */
.thp-glow {
    position: absolute;
    left: -10%;
    bottom: -40%;
    width: 70%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 207, 143, 0.30) 0%, rgba(240, 163, 79, 0.14) 38%, rgba(240, 163, 79, 0) 68%);
    filter: blur(14px);
}

/* a hairline of iridescence, the one place the pearl colours show up */
.thp-iris {
    display: block;
    width: 72px;
    height: 3px;
    border-radius: 3px;
    margin: 0 0 18px;
    background: linear-gradient(90deg, var(--sq-iris-a), var(--sq-iris-b) 45%, var(--sq-iris-c) 75%, var(--sq-amber-light));
}
.thp-text .thp-iris { margin-left: auto; margin-right: auto; }

/* ======================================================= header / nav ==== */

.thp-header {
    background: linear-gradient(135deg, var(--sq-void) 0%, var(--sq-deep) 55%, var(--sq-blood) 100%);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(240, 163, 79, 0.22);
}

.thp-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }

.thp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 0; }

.thp-brand-mark {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--sq-amber-light), var(--sq-amber) 55%, #c9702a 100%);
    color: var(--sq-void);
    font-family: var(--sq-display);
    font-size: 22px; line-height: 34px; text-align: center;
    box-shadow: 0 0 18px rgba(240, 163, 79, 0.45);
}

.thp-brand-text { display: flex; flex-direction: column; line-height: 0.92; }
.thp-brand-line1, .thp-brand-line2 {
    font-family: var(--sq-display); font-size: 19px;
    text-transform: uppercase; letter-spacing: 0.01em; color: #fff;
}
.thp-brand-line2 { color: var(--sq-amber); }

.thp-nav { display: flex; align-items: center; gap: 22px; }

.thp-navlink {
    color: var(--sq-on-dark-muted); text-decoration: none;
    font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.thp-navlink:hover { color: #fff; }

.thp-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; background: rgba(255, 255, 255, 0.1);
    border: 0; border-radius: 10px; cursor: pointer;
}
.thp-burger-bar { display: block; width: 20px; height: 2px; margin: 0 auto; background: #fff; }

/* ================================================================ hero === */

.thp-hero { padding: 72px 0 64px; }

.thp-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: start;
}

.thp-pill {
    display: inline-block;
    background: rgba(240, 163, 79, 0.16);
    border: 1px solid rgba(240, 163, 79, 0.45);
    color: var(--sq-amber-light);
    font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.thp-pill-gold { background: var(--sq-gold); border-color: var(--sq-gold); color: var(--sq-void); }

/* on light sections the pill inverts */
.thp-sec-light .thp-pill { background: var(--sq-crimson); border-color: var(--sq-crimson); color: #fff; }

.thp-h1 {
    font-family: var(--sq-display);
    font-size: clamp(44px, 6.2vw, 76px);
    line-height: 0.94;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 18px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
}
.thp-h1 .thp-gold { color: var(--sq-amber); }

.thp-h2 {
    font-family: var(--sq-display);
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.06;
    text-transform: uppercase;
    color: var(--sq-ink);
    margin: 0 0 12px;
}
.thp-h2-light { color: #fff; }

.thp-lead { font-size: 18.5px; line-height: 1.62; color: #fff6f8; margin: 0 0 26px; max-width: 52ch; text-shadow: 0 1px 8px rgba(20, 3, 10, 0.6); }
.thp-sub { font-size: 16px; color: var(--sq-muted); margin: 0; max-width: 60ch; }
.thp-text .thp-sub { margin-left: auto; margin-right: auto; }
.thp-headwrap-light .thp-sub { color: var(--sq-on-dark-muted); }

.thp-hero-fine { font-size: 13px; color: #fbe4ea; margin: 12px 0 0; text-shadow: 0 1px 6px rgba(20, 3, 10, 0.75); }
.thp-cta-fine { font-size: 13px; color: #fbe4ea; margin: 12px 0 0; text-shadow: 0 1px 6px rgba(20, 3, 10, 0.75); }

.thp-hero-caption { font-size: 13px; font-style: italic; color: #f7dbe3; text-align: center; margin: 14px 0 0; text-shadow: 0 1px 6px rgba(20, 3, 10, 0.7); }

/* vs card, floated over the dark */
.thp-vs { display: flex; border-radius: var(--sq-radius); overflow: hidden; box-shadow: var(--sq-shadow); }
.thp-vs-side { flex: 1 1 0; min-width: 0; padding: 26px 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.thp-vs-red { background: linear-gradient(160deg, var(--sq-blood), #a81f2b); }
.thp-vs-green { background: linear-gradient(160deg, var(--sq-green-dark), var(--sq-green)); }
.thp-vs-emoji { font-size: 34px; line-height: 1; }
.thp-vs-label { font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: #ffc9d3; }
.thp-vs-value { font-family: var(--sq-display); font-size: clamp(34px, 5vw, 46px); color: #fff; line-height: 1; }
.thp-vs-unit { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #ffd9e0; }
.thp-vs-badge {
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(160deg, var(--sq-amber-light), var(--sq-amber));
    padding: 0 12px; text-align: center;
}
.thp-vs-badge-num { font-family: var(--sq-display); font-size: 20px; color: var(--sq-void); white-space: nowrap; line-height: 1.1; }
.thp-vs-badge-label { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #5c2c07; }

/* proof numbers */
.thp-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.thp-proof-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(240, 163, 79, 0.3);
    border-radius: var(--sq-radius-sm);
    padding: 18px 16px; text-align: center;
    backdrop-filter: blur(2px);
}
.thp-proof-num { display: block; font-family: var(--sq-display); font-size: clamp(32px, 4vw, 46px); line-height: 1; color: var(--sq-amber); }
.thp-proof-label { display: block; font-size: 12.5px; line-height: 1.45; color: var(--sq-on-dark-muted); margin-top: 8px; }

/* =============================================================== forms === */

.thp-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.thp-form-hero { max-width: 480px; }

.thp-input {
    flex: 1 1 220px; min-width: 0;
    padding: 15px 16px;
    font-family: inherit; font-size: 16px; color: var(--sq-text);
    background: #fff; border: 2px solid transparent; border-radius: var(--sq-radius-sm);
}
.thp-input:focus { border-color: var(--sq-amber); outline: none; }
.thp-sec-light .thp-input { border-color: var(--sq-line); }

.thp-btn {
    display: inline-block; padding: 15px 26px;
    background: var(--sq-crimson); color: #fff;
    font-family: var(--sq-display); font-size: 17px; letter-spacing: 0.03em;
    text-transform: uppercase; text-decoration: none;
    border: 2px solid var(--sq-crimson); border-radius: var(--sq-radius-sm);
    cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.thp-btn:hover { background: var(--sq-crimson-dark); border-color: var(--sq-crimson-dark); transform: translateY(-1px); }
.thp-btn-gold {
    background: linear-gradient(135deg, var(--sq-amber-light), var(--sq-amber));
    border-color: var(--sq-amber); color: var(--sq-void);
    box-shadow: 0 0 24px rgba(240, 163, 79, 0.35);
}
.thp-btn-gold:hover { box-shadow: 0 0 34px rgba(240, 163, 79, 0.5); background: linear-gradient(135deg, var(--sq-amber), var(--sq-gold-dark)); }
.thp-btn-outline { background: transparent; color: var(--sq-crimson-dark); border-color: var(--sq-crimson); }
.thp-btn-outline:hover { background: var(--sq-crimson); color: #fff; }
.thp-btn-sm { padding: 10px 16px; font-size: 14px; }
.thp-nav-cta { background: linear-gradient(135deg, var(--sq-amber-light), var(--sq-amber)); border-color: var(--sq-amber); color: var(--sq-void); }

.thp-form-msg { flex: 1 0 100%; margin: 4px 0 0; font-size: 14px; font-weight: 700; display: none; }
.thp-success { color: #86efac; }
.thp-error { color: #ffd7de; }
.thp-sec-light .thp-success { color: var(--sq-green-dark); }
.thp-sec-light .thp-error { color: var(--sq-crimson-dark); }
form[data-members-form].success .thp-success { display: block; }
form[data-members-form].error .thp-error { display: block; }

/* ============================================================ sections === */

.thp-sec { padding: 64px 0; }
.thp-sec-light { background: var(--sq-bg); }
.thp-sec-tight { padding: 48px 0; }
.thp-sec-head { padding: 56px 0 24px; }
.thp-sec-top0 { padding-top: 0; }
.thp-sec-alt { background: #fff5f8; }

.thp-headwrap { margin-bottom: 30px; }

/* chips */
.thp-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 18px; padding: 0; }
.thp-chip {
    background: #fff; border: 2px solid var(--sq-line); border-radius: 999px;
    padding: 10px 18px; font-size: 15px; font-weight: 700; color: var(--sq-ink);
    box-shadow: var(--sq-shadow-sm);
}
.thp-chips-note { font-size: 17px; font-weight: 700; color: var(--sq-crimson-dark); margin: 0; }

/* lie / truth */
.thp-flip { max-width: 720px; }
.thp-flip-controls { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.thp-flip-tab {
    padding: 10px 18px; background: rgba(255, 255, 255, 0.08); color: var(--sq-on-dark);
    border: 1px solid rgba(240, 163, 79, 0.4); border-radius: 999px;
    font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.thp-flip-tab.is-active {
    background: linear-gradient(135deg, var(--sq-amber-light), var(--sq-amber));
    border-color: var(--sq-amber); color: var(--sq-void);
}
.thp-flip-panel { display: none; }
.thp-flip-panel.is-active { display: block; }

.thp-lie { background: rgba(0, 0, 0, 0.42); border-radius: var(--sq-radius) var(--sq-radius) 0 0; padding: 20px 22px; }
.thp-lie-label, .thp-truth-label { display: block; font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; }
.thp-lie-label { color: var(--sq-coral); }
.thp-lie-text {
    font-family: var(--sq-display); font-size: clamp(20px, 3vw, 27px);
    text-transform: uppercase; color: #fff; margin: 6px 0 0;
    text-decoration: line-through; text-decoration-color: var(--sq-amber); text-decoration-thickness: 4px;
}
.thp-truth {
    background: linear-gradient(135deg, var(--sq-amber-light), var(--sq-amber));
    border-radius: 0 0 var(--sq-radius) var(--sq-radius); padding: 20px 22px;
}
.thp-truth-label { color: #5c2c07; }
.thp-truth-text { font-family: var(--sq-display); font-size: clamp(20px, 3vw, 27px); text-transform: uppercase; color: var(--sq-void); margin: 6px 0 0; }
.thp-flip-note { color: var(--sq-on-dark-muted); font-size: 15px; margin: 16px 0 0; max-width: 60ch; }

/* cards */
.thp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.thp-card {
    background: #fff; border: 2px solid var(--sq-line); border-radius: var(--sq-radius);
    padding: 26px 22px; box-shadow: var(--sq-shadow-sm); position: relative; overflow: hidden;
}
.thp-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--sq-crimson), var(--sq-amber));
}
.thp-card-icon { font-size: 30px; line-height: 1; display: block; margin-bottom: 10px; }
.thp-card-title { font-family: var(--sq-display); font-size: 22px; text-transform: uppercase; color: var(--sq-ink); margin: 0 0 8px; }
.thp-card-text { font-size: 15.5px; color: var(--sq-text); margin: 0; }

/* ============================================================== issues === */

.thp-issues { display: flex; flex-direction: column; gap: 14px; }
.thp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }

.thp-issue {
    background: #fff; border: 2px solid var(--sq-line); border-radius: var(--sq-radius);
    box-shadow: var(--sq-shadow-sm); transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.thp-issue:hover { border-color: var(--sq-amber); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(42, 8, 16, 0.12); }

.thp-issue-link { display: block; padding: 24px 26px; text-decoration: none; color: inherit; }
.thp-issue-meta { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sq-muted); margin-bottom: 8px; }
.thp-issue-dot { margin: 0 6px; }
.thp-issue-title { font-family: var(--sq-display); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.1; text-transform: uppercase; color: var(--sq-ink); margin: 0 0 8px; }
.thp-issue-excerpt { font-size: 15.5px; color: var(--sq-text); margin: 0 0 12px; }
.thp-issue-more { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sq-crimson); }

.thp-empty { background: #fff; border: 2px dashed var(--sq-amber); border-radius: var(--sq-radius); padding: 36px 26px; text-align: center; }
.thp-empty-title { font-family: var(--sq-display); font-size: 24px; text-transform: uppercase; color: var(--sq-ink); margin: 0 0 8px; }
.thp-empty-text { color: var(--sq-text); margin: 0 0 16px; }

/* ============================================================= article === */

.thp-article { background: var(--sq-bg); }

.thp-article-mast { padding: 46px 0 40px; margin-bottom: 30px; }
.thp-mast-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sq-amber); margin-bottom: 10px; }
.thp-article-title {
    font-family: var(--sq-display); font-size: clamp(30px, 4.6vw, 50px); line-height: 1.02;
    text-transform: uppercase; color: #fff; margin: 0 0 12px;
    text-shadow: 0 4px 26px rgba(0, 0, 0, 0.45);
}
.thp-article-meta { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sq-on-dark-muted); margin: 0; }
.thp-article-deck { font-size: 16.5px; font-weight: 700; color: var(--sq-on-dark); margin: 12px 0 0; }

.thp-article-image { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--sq-radius); margin-bottom: 30px; }

/* Post body. Issues arrive as one inline styled HTML card that has to render
   the same here as it does in the inbox, so the theme keeps out of its way:
   no colour, font or spacing overrides on tables inside the content. */
.thp-content { padding: 0 30px 40px; }
.thp-content > * { max-width: 100%; }
.thp-content p, .thp-content ul, .thp-content ol { font-size: 18px; line-height: 1.72; margin: 0 0 16px; }
.thp-content h2, .thp-content h3 { font-family: var(--sq-display); text-transform: uppercase; color: var(--sq-ink); line-height: 1.12; margin: 32px 0 12px; }
.thp-content h2 { font-size: 30px; }
.thp-content h3 { font-size: 24px; }
.thp-content blockquote {
    margin: 26px 0; padding: 18px 22px;
    background: linear-gradient(135deg, var(--sq-crimson), var(--sq-blood));
    border-radius: var(--sq-radius-sm); color: #fff;
    font-family: var(--sq-display); font-size: 22px; text-transform: uppercase; line-height: 1.25;
}
.thp-content hr { border: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sq-iris-a), var(--sq-iris-b), var(--sq-amber-light)); margin: 32px 0; }
.thp-content img { border-radius: var(--sq-radius-sm); }
.thp-content figcaption { font-size: 13px; color: var(--sq-muted); text-align: center; padding-top: 8px; }

/* hands off: the issue card styles itself inline */
.thp-content table { border-collapse: collapse; max-width: 100%; }
.thp-content table p { margin: 0; }
.thp-issue-body > table { margin: 0 auto; }

.thp-content .kg-width-wide { max-width: 1040px; margin-left: calc(50% - 520px); }
.thp-content .kg-width-full { max-width: 100vw; margin-left: calc(50% - 50vw); }

.thp-signoff { border-top: 2px solid var(--sq-line); margin: 0 30px; padding: 24px 0 48px; }
.thp-signoff-name { font-family: var(--sq-display); font-size: 22px; text-transform: uppercase; color: var(--sq-crimson); margin: 0 0 6px; }
.thp-signoff-reply { font-size: 15px; color: var(--sq-muted); margin: 0; }

.thp-page-head { padding-top: 40px; }
.thp-archive-intro { padding: 0; margin-bottom: 8px; }

/* ================================================================= cta === */

.thp-cta { padding: 64px 0; }
.thp-cta-inner { max-width: 640px; text-align: center; }
.thp-cta-title { font-family: var(--sq-display); font-size: clamp(30px, 4vw, 44px); text-transform: uppercase; color: #fff; margin: 0 0 10px; }
.thp-cta-sub { color: var(--sq-on-dark); font-size: 16.5px; margin: 0 0 24px; }
.thp-cta .thp-form { justify-content: center; }

/* ============================================================== footer === */

.thp-footer { background: var(--sq-void); color: var(--sq-on-dark-muted); padding: 48px 0 28px; border-top: 1px solid rgba(240, 163, 79, 0.2); }
.thp-footer-top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.thp-footer-title { font-family: var(--sq-display); font-size: 26px; text-transform: uppercase; color: #fff; }
.thp-footer-tag { color: var(--sq-amber); font-weight: 700; margin: 6px 0 0; font-size: 15px; }
.thp-footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.thp-footer-nav a { color: var(--sq-on-dark-muted); text-decoration: none; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.thp-footer-nav a:hover { color: #fff; }
.thp-footer-note { font-size: 13px; line-height: 1.6; color: #c49aaa; margin: 26px 0 0; max-width: 70ch; }
.thp-footer-bottom {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 22px; padding-top: 18px; font-size: 13px;
}
.thp-footer-legal { display: flex; gap: 16px; }
.thp-footer-legal a { color: #c49aaa; }

/* ========================================================== responsive === */

@media (max-width: 900px) {
    .thp-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .thp-cards, .thp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .thp-burger { display: flex; }
    .thp-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: flex-start; gap: 14px;
        background: var(--sq-deep); padding: 18px 24px 24px;
        border-bottom: 1px solid rgba(240, 163, 79, 0.25);
    }
    .thp-nav.is-open { display: flex; }
    .thp-header-inner { position: relative; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .thp-wrap { padding: 0 20px; }
    .thp-sec, .thp-cta { padding: 44px 0; }
    .thp-hero { padding: 48px 0 46px; }
    .thp-cards, .thp-grid3 { grid-template-columns: minmax(0, 1fr); }
    .thp-content { padding: 0 20px 32px; }
    .thp-signoff { margin: 0 20px; }
    .thp-article-image { margin-bottom: 20px; }
    .thp-article-mast { padding: 32px 0 28px; margin-bottom: 20px; }
    .thp-issue-link { padding: 20px 20px; }
    .thp-content .kg-width-wide { max-width: 100%; margin-left: 0; }
    .thp-cell-1 { width: 200px; height: 200px; }
    .thp-cell-4 { width: 150px; height: 150px; }
}

@media (max-width: 400px) {
    .thp-vs-side { padding: 20px 8px; }
    .thp-brand-line1, .thp-brand-line2 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .thp-issue:hover, .thp-btn:hover { transform: none; }
}