/* base link rule: no page on this sheet falls to the browser default (standalone sheet gate, 2026-10-12) */
a { color: var(--skj-gold); text-decoration: none; }

/* senatorkimjackson.com landing page (templates/skj_landing.html, 2026-10-07).
   Standalone sheet: the page does not load public.css or the app shell (bill_modal.css carries the evidence modal).
   One screen, no scrolling: a two-column grid on desktop (.skj: photo left, copy right); under 821 px the phone
   block (.skj-m, 2026-10-08: photo band, two title lines, the tag cloud filling the height, the button). */

:root {
    --skj-purple: #3d2260;
    --skj-purple-deep: #2a1745;
    --skj-gold: #fbc926;
    --skj-gold-hover: #e5b71e;
    --skj-white: #ffffff;
    --skj-muted: rgba(255, 255, 255, 0.72);
    --skj-line: rgba(255, 255, 255, 0.18);
    --skj-red: #c1272d;
    --skj-teal: #1f8a8a;
    --skj-pink: #e0338c;
    --skj-orange: #f26b1d;
    --skj-sky: #3b82f6;
    --skj-lime: #b5e048;
    --skj-ink: #1a1a2e;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: var(--skj-white);
    background: var(--skj-purple-deep);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.skj {
    display: grid;
    grid-template-columns: minmax(300px, 47%) 1fr;
    height: 100svh;
    overflow: hidden;
}

.skj-photo {
    position: relative;
    overflow: hidden;
    background: var(--skj-purple-deep);
    display: flex;
    align-items: center;
}

.skj-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.skj-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(42, 23, 69, 0) 78%, var(--skj-purple-deep) 100%);
}

.skj-photo-credit {
    position: absolute;
    left: 0.75rem;
    bottom: 0.5rem;
    font-size: 0.62rem;
    color: var(--skj-muted);
    z-index: 1;
}

.skj-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.5rem, 2.2vh, 1.6rem);
    padding: clamp(0.8rem, 3vh, 2.2rem) clamp(1.25rem, 4.5vw, 4.5rem) clamp(0.8rem, 3vh, 2.2rem) clamp(1rem, 2vw, 2.25rem);
    min-width: 0;
}

.skj-kicker {
    margin: 0;
    font-size: clamp(0.72rem, 1.6vh, 1rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--skj-gold);
}

.skj-title {
    margin: 0;
    font-size: clamp(1.5rem, 4.3vh, 3.1rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.skj-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.45rem, 1.8vh, 1.2rem);
}

.skj-point {
    padding-left: 1rem;
    border-left: 4px solid var(--skj-gold);
}

.skj-claim {
    display: block;
    font-size: clamp(1.02rem, 2.7vh, 1.6rem);
    font-weight: 800;
    line-height: 1.2;
}

.skj-proof {
    display: block;
    margin-top: 0.3rem;
    font-size: clamp(0.86rem, 2.05vh, 1.25rem);
    line-height: 1.42;
    color: var(--skj-white);
}

.skj-evidence {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 2.2rem;
    z-index: 1;
    max-width: 360px;
    border: 2px solid var(--skj-gold);
    border-radius: 4px;
    background: var(--skj-white);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.skj-evidence img {
    display: block;
    width: 100%;
    height: auto;
}

.skj-point-stamped {
    position: relative;
    padding-right: 7.5rem;
}

.skj-stamp {
    position: absolute;
    right: 0.4rem;
    top: -0.6rem;
    width: 6.6rem;
    height: auto;
    transform: rotate(-14deg);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

.skj-record {
    margin: 0;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
}

.skj-proof a,
.skj-record a,
.skj-foot a {
    font-weight: 700;
    white-space: nowrap;
    color: var(--skj-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.skj-proof a:hover,
.skj-record a:hover,
.skj-foot a:hover {
    color: var(--skj-gold-hover);
}

.skj-cta {
    display: block;
    align-self: stretch;       /* spans the text column (Jeff 2026-10-10) */
    text-align: center;
    padding: clamp(0.7rem, 1.6vh, 1rem) clamp(1.1rem, 2.4vw, 1.9rem);
    background: var(--skj-gold);
    color: var(--skj-purple-deep);
    font-size: clamp(0.95rem, 2.4vh, 1.4rem);
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.skj-cta:hover {
    background: var(--skj-gold-hover);
}

.skj-foot {
    margin: 0;
    padding-top: clamp(0.5rem, 1.4vh, 0.9rem);
    border-top: 1px solid var(--skj-line);
    font-size: clamp(0.64rem, 0.8vw, 0.76rem);
    line-height: 1.45;
    color: var(--skj-muted);
}

.skj-draft {
    position: fixed;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    padding: 0.2rem 0.55rem;
    background: #c1272d;
    color: var(--skj-white);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 3px;
}

@media (min-width: 821px) and (min-aspect-ratio: 2/1) {
    .skj-copy { gap: 2.6vh; }
    .skj-title { font-size: clamp(1.5rem, 5.2vh, 3.4rem); }
    .skj-claim { font-size: clamp(1.02rem, 3.3vh, 1.9rem); }
    .skj-proof { font-size: clamp(0.86rem, 2.5vh, 1.5rem); }
    .skj-points { gap: 2.4vh; }
    .skj-cta { font-size: clamp(0.95rem, 2.9vh, 1.6rem); padding: 2vh 2.4vw; }
}

/* ── Phone layout (.skj-m, under 821 px; the desktop .skj hides there) ── */
.skj-m { display: none; }

/* The phone layout shows under 821 px, or on any width when <html> carries skj-layout-phone (the /phone page; the class
   is set by the head script in skj_landing.html from the width and the route, 2026-10-10) */
html.skj-layout-phone .skj { display: none; }

html.skj-layout-phone .skj-m {
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
}

html.skj-layout-phone .skj-m-photo {
    position: relative;
    flex-shrink: 0;
    height: 24svh;
    overflow: hidden;
}

html.skj-layout-phone .skj-m-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

html.skj-layout-phone .skj-m-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42, 23, 69, 0) 45%, var(--skj-purple-deep) 100%);
}

html.skj-layout-phone .skj-m-credit {
    position: absolute;
    top: 0.35rem;
    right: 0.6rem;
    z-index: 1;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.6);
}

html.skj-layout-phone .skj-m-head {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    margin: -1.2rem 0.5rem 0;
    text-align: center;
}

html.skj-layout-phone .skj-m-kicker {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: min(1.15rem, 5.2vw);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--skj-gold);
}

html.skj-layout-phone .skj-m-title {
    margin: 0.1rem 0 0;
    font-family: 'Anton', 'Oswald', sans-serif;
    font-weight: 400;
    font-size: min(2.6rem, 8.4vw);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

html.skj-layout-phone .skj-m-accent { color: var(--skj-gold); }

/* the cloud takes the height left over and spreads its rows across it */
html.skj-layout-phone .skj-m-cloud {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    justify-content: center;
    gap: 0.4rem 0.32rem;
    margin: 0.55rem 0.5rem 0;
}

html.skj-layout-phone .skj-tag {
    display: inline-block;
    margin: 0;
    padding: 0.18rem 0.5rem;
    border: 0;
    border-radius: 0;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
}

html.skj-layout-phone .skj-tag:focus-visible {
    outline: 3px solid var(--skj-white);
    outline-offset: 2px;
}

html.skj-layout-phone .skj-tag:active { filter: brightness(0.9); }

/* eight looks: font, color and tilt */
html.skj-layout-phone .skj-tag-look1 { font-family: 'Anton', sans-serif; font-size: 1rem; background: var(--skj-gold); color: var(--skj-purple-deep); transform: rotate(-3deg); }
html.skj-layout-phone .skj-tag-look2 { font-family: 'Bangers', cursive; font-size: 1.1rem; letter-spacing: 0.04em; background: var(--skj-red); color: var(--skj-white); transform: rotate(2deg); }
html.skj-layout-phone .skj-tag-look3 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.86rem; text-transform: uppercase; background: var(--skj-white); color: var(--skj-purple-deep); transform: rotate(-1.5deg); }
html.skj-layout-phone .skj-tag-look4 { font-family: 'Permanent Marker', cursive; font-size: 0.92rem; background: var(--skj-pink); color: var(--skj-white); transform: rotate(3deg); }
html.skj-layout-phone .skj-tag-look5 { font-family: 'Archivo Black', sans-serif; font-size: 0.78rem; text-transform: uppercase; background: var(--skj-teal); color: var(--skj-white); transform: rotate(-2deg); }
html.skj-layout-phone .skj-tag-look6 { font-family: 'Anton', sans-serif; font-size: 0.98rem; background: var(--skj-orange); color: var(--skj-white); transform: rotate(1.5deg); }
html.skj-layout-phone .skj-tag-look7 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.88rem; text-transform: uppercase; background: var(--skj-sky); color: var(--skj-white); transform: rotate(-2.5deg); }
html.skj-layout-phone .skj-tag-look8 { font-family: 'Bangers', cursive; font-size: 1.05rem; letter-spacing: 0.04em; background: var(--skj-lime); color: var(--skj-purple-deep); transform: rotate(2.5deg); }

html.skj-layout-phone .skj-m-foot {
    flex-shrink: 0;
    padding: 0.5rem 0.9rem 0.75rem;
}

html.skj-layout-phone .skj-m-cta {
    display: block;
    padding: 0.7rem 0.8rem;
    border-radius: 6px;
    background: var(--skj-gold);
    color: var(--skj-purple-deep);
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

html.skj-layout-phone .skj-m-cta:hover { background: var(--skj-gold-hover); }

html.skj-layout-phone .skj-m-paid {
    margin: 0.45rem 0 0;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}

@media (max-height: 720px) {
    html.skj-layout-phone .skj-m-photo { height: 17svh; }
    html.skj-layout-phone .skj-m-title { font-size: min(2.2rem, 8.4vw); }
    html.skj-layout-phone .skj-m-cloud { gap: 0.3rem 0.26rem; }
    html.skj-layout-phone .skj-tag { padding: 0.12rem 0.42rem; }
    html.skj-layout-phone .skj-tag-look1, html.skj-layout-phone .skj-tag-look6 { font-size: 0.86rem; }
    html.skj-layout-phone .skj-tag-look2, html.skj-layout-phone .skj-tag-look8 { font-size: 0.95rem; }
    html.skj-layout-phone .skj-tag-look3, html.skj-layout-phone .skj-tag-look7 { font-size: 0.76rem; }
    html.skj-layout-phone .skj-tag-look4 { font-size: 0.8rem; }
    html.skj-layout-phone .skj-tag-look5 { font-size: 0.68rem; }
    html.skj-layout-phone .skj-m-cta { font-size: 0.88rem; padding: 0.55rem 0.7rem; }
}

@media (min-height: 780px) {
    html.skj-layout-phone .skj-m-cloud { gap: 0.5rem 0.4rem; margin-left: 0.4rem; margin-right: 0.4rem; }
    html.skj-layout-phone .skj-tag { padding: 0.24rem 0.6rem; }
    html.skj-layout-phone .skj-tag-look1, html.skj-layout-phone .skj-tag-look6 { font-size: 1.12rem; }
    html.skj-layout-phone .skj-tag-look2, html.skj-layout-phone .skj-tag-look8 { font-size: 1.22rem; }
    html.skj-layout-phone .skj-tag-look3, html.skj-layout-phone .skj-tag-look7 { font-size: 0.96rem; }
    html.skj-layout-phone .skj-tag-look4 { font-size: 1.02rem; }
    html.skj-layout-phone .skj-tag-look5 { font-size: 0.86rem; }
}

/* ── Evidence modal (includes/kims_rc_modal.html + static/bill_modal.css): dark text on the white card (the page body
   is white on purple) and the compare page's link style ── */
.rc-modal { color: var(--skj-ink); text-align: left; }

.rc-modal a:not(.rc-bill-btn):not(.rc-kw) {
    color: var(--skj-purple);
    font-weight: 600;
    text-decoration: underline;
}

.rc-modal a:not(.rc-bill-btn):not(.rc-kw):hover { color: var(--skj-purple-deep); }

/* Shared clip page /clip/<tag> (2026-10-10): the tag's card as a page, the modal shell shown static */
.skj-clip-page { margin: 0; background: var(--skj-purple-deep, #2a1745); color: #fff; font-family: 'Roboto', system-ui, sans-serif; min-height: 100svh; display: flex; flex-direction: column; }
.skj-clip-head { padding: 0.9rem 1rem 0.6rem; text-align: center; }
.skj-clip-brand { color: #fff; text-decoration: none; display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.skj-clip-kicker { font-family: 'Oswald', sans-serif; font-weight: 500; letter-spacing: 0.22em; font-size: 0.78rem; color: var(--skj-gold, #f2c230); text-transform: uppercase; }
.skj-clip-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.04em; }
.skj-clip-main { flex: 1 1 auto; padding: 0 0 1rem; }
.skj-clip-foot { padding: 0.5rem 1rem 1rem; }
/* the card page's own shell (#rcOverlay) sits in the page; the shared bill modal (#bmOverlay) stays a real overlay on top */
.rc-page #rcOverlay { position: static; inset: auto; background: transparent; padding: 0 0.75rem; display: block; z-index: auto; }
.rc-page #rcOverlay .rc-modal { max-height: none; box-shadow: 0 12px 40px rgba(0,0,0,0.3); margin: 0 auto; }
.rc-page #rcOverlay .rc-close { display: none; }
.rc-page .rc-foot-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rc-page .rc-foot-actions .rc-bill-btn { margin-left: 0; }
@media (max-width: 600px) { .rc-page #rcOverlay { padding: 0 0.5rem; } .rc-page #rcOverlay .rc-modal { border-radius: 12px; } }

/* Points pages /points/woke|abortion|gender (2026-10-10): one desktop paragraph's tags as a list, each opening its card */
.skj-pt-list-main { flex: 1 1 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 1rem 1rem; box-sizing: border-box; }
.skj-pt-list-h1 { font-family: 'Roboto', sans-serif; font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; margin: 0.4rem 0 0.2rem; color: #fff; }
.skj-pt-list-sub { margin: 0 0 1rem; color: rgba(255,255,255,0.75); font-size: 0.95rem; }
.skj-pt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.skj-pt { display: grid; grid-template-columns: 1fr; grid-template-areas: "label" "lead"; row-gap: 0.15rem; align-items: start; width: 100%; text-align: left; padding: 0.85rem 1rem; border: 0; border-radius: 10px; background: #fff; color: var(--skj-purple-deep, #2a1745); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.22); font: inherit; }
.skj-pt:hover { background: #fff8e1; }
.skj-pt-kind { grid-area: kind; align-self: center; font-family: 'Oswald', sans-serif; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--skj-gold, #f2c230); color: var(--skj-purple-deep, #2a1745); padding: 0.25rem 0.5rem; border-radius: 4px; }
.skj-pt-label { grid-area: label; font-weight: 900; font-size: 1.08rem; line-height: 1.2; }
.skj-pt-lead { grid-area: lead; font-size: 0.9rem; line-height: 1.35; color: #4a3a66; font-style: italic; }
.skj-pt-list-foot { margin: 1.4rem 0 0; display: grid; gap: 0.7rem; }
.skj-pt-list-cta { align-self: auto; }
.skj-pt-list-more { color: var(--skj-gold, #f2c230); font-weight: 700; text-align: center; }

/* Points rows expand in place (2026-10-10): the row is the card's head, the body opens under it */
.skj-pt-list > li { background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.22); overflow: hidden; }
.skj-pt { box-shadow: none; border-radius: 10px; }
.skj-pt-list > li.is-open .skj-pt { border-radius: 10px 10px 0 0; background: #fff8e1; }
.skj-pt-body { padding: 0.25rem 1rem 1rem; color: var(--skj-purple-deep, #2a1745); border-top: 1px solid #efe9f5; }
.skj-pt-body .rc-foot-actions { margin-top: 0.75rem; }

/* The clip, points and other card pages scroll (2026-10-10): the one-screen landing page locks html and body, these pages must not inherit that */
html:has(body.skj-clip-page), body.skj-clip-page { height: auto; min-height: 100%; overflow: visible; }

/* /phone on a wide screen (Jeff 2026-10-10): the phone layout at phone width, centered, no frame or bezel */
body.skj-phone-page .skj-m { max-width: 430px; margin: 0 auto; }

/* /m phone view for desktops (2026-10-10): the landing page inside a phone-sized frame */
.skj-preview-main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 0.5rem 1rem 1.5rem; }
.skj-phone { width: 414px; max-width: 100%; height: 860px; max-height: calc(100svh - 150px); padding: 12px; border-radius: 44px; background: #0b0710; box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 2px #3a2d4d; box-sizing: border-box; }
.skj-phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: var(--skj-purple-deep, #2a1745); }
.skj-phone-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.skj-preview-note { max-width: 520px; text-align: center; color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.45; margin: 0; }
.skj-preview-note a { color: var(--skj-gold, #f2c230); }