/* ==========================================================================
   TeknoParrot Nation
   Every rule is scoped under .tp-nation and every class is prefixed tpn-,
   because the payment scripts react to generic class names anywhere on a page.
   No z-index above page content (header 1090, cookie banner 10000, Paddle).
   Animations use only transform and opacity on whole layers, pause off screen
   (nation.js) and switch off entirely for prefers-reduced-motion.
   ========================================================================== */

.tp-nation {
    --tpn-ink: #060d1d;
    --tpn-navy: #0b1b33;
    --tpn-navy-2: #102d49;
    --tpn-ivory: #fcf7ef;
    --tpn-ivory-dim: rgba(252, 247, 239, 0.78);
    --tpn-ivory-mute: rgba(252, 247, 239, 0.58);
    --tpn-gold: #e7b64b;
    --tpn-gold-soft: #f3d38a;
    --tpn-cyan: #7fe9ff;
    --tpn-magenta: #ff8fe6;
    --tpn-lime: #c9ff86;
    --tpn-coral: #ff7a6b;
    --tpn-glass: rgba(8, 16, 34, 0.8);
    --tpn-glass-soft: rgba(252, 247, 239, 0.05);
    --tpn-line: rgba(252, 247, 239, 0.14);
    --tpn-line-gold: rgba(243, 211, 138, 0.32);
    --tpn-radius: 16px;
    --tpn-radius-sm: 10px;
    --tpn-shadow: 0 30px 70px rgba(2, 6, 16, 0.5);
    --tpn-font: var(--font-family-system, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    --tpn-serif: Georgia, "Times New Roman", serif;
    --tpn-mono: var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-family: var(--tpn-font);
    -webkit-font-smoothing: antialiased;
}

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

.tp-nation .tpn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------- scene */

/* The art is never mirrored: in rtl the layers' left offsets (hero and banner crops, set against inset: 0) would be
   dropped for right: 0, so the scene keeps ltr whatever the page direction. */
.tp-nation .tpn-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #0a1936;
    contain: strict;
    direction: ltr;
}

.tp-nation .tpn-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.tp-nation .tpn-layer--base {
    pointer-events: auto;
}

@keyframes tpn-twinkle { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.35; } }
@keyframes tpn-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }

.tp-nation.tpn-paused .tpn-layer,
.tp-nation.tpn-paused .tpn-animate {
    animation-play-state: paused;
}

/* Plots on the skyline are links to their progress entries. */
.tp-nation .tpn-plot { cursor: pointer; }
.tp-nation .tpn-plot:focus { outline: none; }
.tp-nation .tpn-plot:focus-visible .tpn-plot__halo,
.tp-nation .tpn-plot:hover .tpn-plot__halo { opacity: 1; }
.tp-nation .tpn-plot__halo { opacity: 0; transition: opacity 0.2s ease; }

/* ---------------------------------------------------------------- shared type */

.tp-nation .tpn-overline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: max(0.74rem, 11px);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-overline__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tpn-lime);
    box-shadow: 0 0 0 4px rgba(201, 255, 134, 0.18), 0 0 14px rgba(201, 255, 134, 0.8);
}

.tp-nation .tpn-headline {
    margin: 0.7rem 0 1rem;
    font-size: clamp(2.5rem, 5.2vw, 4.7rem);
    line-height: 0.93;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--tpn-ivory);
    text-wrap: balance;
}

.tp-nation .tpn-headline__accent {
    display: inline-block;
    background: linear-gradient(100deg, #ffe7a3 0%, #ffb35c 45%, #ff7ad9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tp-nation .tpn-lede {
    max-width: 36rem;
    margin: 0 0 0.9rem;
    font-size: clamp(1.02rem, 1.35vw, 1.2rem);
    line-height: 1.55;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-tagline {
    margin: 0 0 1.3rem;
    font-family: var(--tpn-serif);
    font-style: italic;
    font-size: 1.08rem;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-dateline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem calc(0.9rem + 18px + 0.45rem);
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: max(0.72rem, 11px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
    clip-path: inset(-0.5em 0);
}

/* Every item leads with the gold rule and is pulled back over it (into the column gap), so the first item of each
   line has its rule outside the list, where the clip above hides it: the rule only ever stands between two items on
   one line, never at the start of a wrapped one (phones, long translations). */
.tp-nation .tpn-dateline li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-inline-start: calc(-18px - 0.45rem);
}
.tp-nation .tpn-dateline li::before {
    content: "";
    flex: none;
    width: 18px;
    height: 1px;
    background: var(--tpn-line-gold);
}

.tp-nation .tpn-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tp-nation .tpn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.85rem 1.45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.tp-nation .tpn-cta:hover { transform: translateY(-2px); text-decoration: none; }
.tp-nation .tpn-cta:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 3px; }

.tp-nation .tpn-cta--gold {
    color: #1d1304;
    background: linear-gradient(135deg, #ffe39a 0%, #f5b54a 55%, #e79a36 100%);
    box-shadow: 0 12px 30px rgba(231, 154, 54, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.tp-nation .tpn-cta--gold:hover { color: #1d1304; box-shadow: 0 16px 36px rgba(231, 154, 54, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45); }

.tp-nation .tpn-cta--ghost {
    color: var(--tpn-ivory);
    background: rgba(8, 16, 34, 0.35);
    border-color: rgba(252, 247, 239, 0.4);
}
.tp-nation .tpn-cta--ghost:hover { color: var(--tpn-ivory); border-color: var(--tpn-ivory); background: rgba(8, 16, 34, 0.55); }

.tp-nation .tpn-cta--neon {
    color: #041018;
    background: linear-gradient(135deg, #9ff8ff 0%, #56d6ff 50%, #c38bff 100%);
    box-shadow: 0 10px 28px rgba(86, 214, 255, 0.35);
}
.tp-nation .tpn-cta--neon:hover { color: #041018; }

.tp-nation .tpn-cta--small { min-height: 38px; padding: 0.55rem 1rem; font-size: 0.86rem; }
.tp-nation .tpn-cta[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.tp-nation .tpn-link {
    color: var(--tpn-gold-soft);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.45);
    text-underline-offset: 3px;
}
.tp-nation .tpn-link:hover { color: #fff1c9; text-decoration-color: currentColor; }

/* ---------------------------------------------------------------- homepage hero */

.tp-nation.tpn-hero {
    position: relative;
    min-height: max(100vh, 860px);
    min-height: max(100svh, 860px);
    margin: 0;
    padding: clamp(6.6rem, 9vw, 8.2rem) clamp(1rem, 4vw, 3rem) clamp(9rem, 22vh, 16rem);
    color: var(--tpn-ivory);
    background: #0a1936;
    isolation: isolate;
    overflow: hidden;
}

.tp-nation.tpn-hero .tpn-scene { z-index: 0; }

.tp-nation .tpn-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(75% 70% at 12% 30%, rgba(4, 9, 21, 0.62) 0%, rgba(4, 9, 21, 0.3) 55%, rgba(4, 9, 21, 0) 80%),
        linear-gradient(180deg, rgba(4, 9, 21, 0.45) 0%, rgba(4, 9, 21, 0) 28%);
}

.tp-nation .tpn-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 430px);
    gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: start;
    width: min(100%, 1240px);
    margin: 0 auto;
    pointer-events: none;
}

.tp-nation .tpn-hero__inner > * { pointer-events: auto; }

.tp-nation .tpn-hero__copy { animation: tpn-rise 0.7s ease-out both; }
.tp-nation .tpn-hero__panel { animation: tpn-rise 0.7s 0.12s ease-out both; }

@media (max-width: 991.98px) {
    .tp-nation.tpn-hero {
        min-height: 0;
        padding: 6.2rem 1rem 2.4rem;
        background: linear-gradient(180deg, #050b18 0%, #0e2146 55%, #1a2a5c 100%);
    }

    .tp-nation.tpn-hero {
        display: flex;
        flex-direction: column;
    }

    /* One column: the copy, then the harbor band, then the vote panel, so the first screen of a phone already shows
       the harbor (the inner grid box steps aside: copy and panel become the hero's own flex items). */
    .tp-nation.tpn-hero .tpn-hero__inner { display: contents; }
    .tp-nation.tpn-hero .tpn-hero__copy { order: 1; }

    .tp-nation.tpn-hero .tpn-scene {
        position: relative;
        order: 2;
        margin: 1.4rem -1rem 0;
    }

    .tp-nation.tpn-hero .tpn-hero__panel { order: 3; margin-top: 1rem; }

    .tp-nation.tpn-hero .tpn-hero__scrim { display: none; }
}

/* ---------------------------------------------------------------- vote panel */

.tp-nation .tpn-note {
    margin: 0.75rem 0 0;
    font-size: max(0.78rem, 11px);
    line-height: 1.5;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-notice {
    margin: 0 0 0.9rem;
    padding: 0.65rem 0.8rem;
    border-radius: var(--tpn-radius-sm);
    border: 1px solid var(--tpn-line);
    background: rgba(252, 247, 239, 0.06);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-notice--ok { border-color: rgba(201, 255, 134, 0.45); background: rgba(201, 255, 134, 0.09); }
.tp-nation .tpn-notice--warn { border-color: rgba(255, 122, 107, 0.5); background: rgba(255, 122, 107, 0.1); }

.tp-nation .tpn-empty {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--tpn-ivory-dim);
}

/* ---------------------------------------------------------------- sections on light pages */

.tp-nation.tpn-section {
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem);
    background: linear-gradient(180deg, #081228 0%, #0c1c3a 100%);
    color: var(--tpn-ivory);
}

.tp-nation .tpn-container { width: min(100%, 1180px); margin: 0 auto; }

/* Nation pages render inside the site's centred .container (the shared layout): their banner and
   sections run full-bleed, and the banner tucks up under the header instead of floating as a card. */
.main-container .tp-nation.tpn-banner,
.main-container .tp-nation.tpn-section {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.main-container > main > .tp-nation.tpn-banner:first-child,
.main-container > main > .tp-nation.tpn-section:first-child { margin-top: -3rem; }

.main-container > main:has(> .tp-nation:last-child) { padding-bottom: 0 !important; }

/* A short Nation page (one section: a passport without a passport yet, a not-found page) still reaches the footer
   instead of leaving a band of the site canvas above it: the main container's own minimum (layout.css, header and
   footer subtracted) plus the 3rem the section tucks up under the header. */
.main-container > main > .tp-nation.tpn-section:only-child { min-height: calc(100vh - 260px + 3rem); }

.tp-nation .tpn-section__head { max-width: 46rem; margin: 0 0 2rem; }

.tp-nation .tpn-section__title {
    margin: 0.6rem 0 0.6rem;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-section__lede { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--tpn-ivory-dim); }

/* page banner with a short harbor band (Nation pages) */
.tp-nation.tpn-banner {
    position: relative;
    padding: clamp(6.6rem, 9vw, 8rem) clamp(1rem, 4vw, 3rem) clamp(9rem, 20vw, 13rem);
    color: var(--tpn-ivory);
    background: #0a1936;
    overflow: hidden;
    isolation: isolate;
}

.tp-nation.tpn-banner .tpn-scene { z-index: 0; }
.tp-nation.tpn-banner .tpn-hero__scrim { z-index: 1; }
.tp-nation .tpn-banner__inner { position: relative; z-index: 2; width: min(100%, 1180px); margin: 0 auto; }
.tp-nation .tpn-banner__inner .tpn-headline { font-size: clamp(2.2rem, 5vw, 4.2rem); }

.tp-nation .tpn-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .tp-nation .tpn-layout { grid-template-columns: minmax(0, 1fr); }
}

.tp-nation .tpn-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: max(0.72rem, 11px);
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tp-nation .tpn-status--active { color: #06140a; background: var(--tpn-lime); }
.tp-nation .tpn-status--inactive { color: var(--tpn-ivory); background: rgba(252, 247, 239, 0.12); }

.tp-nation .tpn-seasons {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-nation .tpn-season {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--tpn-line);
    border-radius: var(--tpn-radius-sm);
    background: rgba(252, 247, 239, 0.03);
    font-size: 0.9rem;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-season__no {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: rgba(243, 211, 138, 0.14);
    color: var(--tpn-gold-soft);
    font-weight: 900;
}

.tp-nation .tpn-season--open { border-color: rgba(201, 255, 134, 0.45); }
.tp-nation .tpn-season__days { font-weight: 800; color: var(--tpn-ivory); white-space: nowrap; }

.tp-nation .tpn-card {
    padding: 1.3rem 1.3rem 1.2rem;
    border: 1px solid var(--tpn-line);
    border-radius: var(--tpn-radius);
    background: rgba(252, 247, 239, 0.04);
}

.tp-nation .tpn-card + .tpn-card { margin-top: 1rem; }
.tp-nation .tpn-card__title { margin: 0 0 0.9rem; font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tpn-ivory); }

.tp-nation .tpn-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 0.7rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--tpn-ivory-dim);
    cursor: pointer;
}

.tp-nation .tpn-toggle input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--tpn-gold); }
.tp-nation .tpn-toggle strong { color: var(--tpn-ivory); }

/* The "Also show..." choices are kept while the passport is private but used only while it is public: they step
   back (still editable) while "Share a public passport" is off. */
.tp-nation .tpn-privacy__more { margin: 0 0 1rem; padding-inline-start: 1.8rem; transition: opacity 0.15s ease; }
.tp-nation .tpn-privacy:has(input[name="PublicEnabled"]:not(:checked)) .tpn-privacy__more { opacity: 0.62; }
.tp-nation .tpn-privacy__note { margin: -0.2rem 0 0; }

/* the public passport link on its own line, broken anywhere rather than inside the Citizen ID */
.tp-nation .tpn-publink { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; }

.tp-nation .tpn-qr { display: inline-block; padding: 10px; border-radius: 12px; background: #fff; }

/* 1040 px: the licence column below it (.subscription-auth-container, account-surfaces.css) */
.tp-nation.tpn-licenses-heading {
    max-width: 1040px;
    margin: 0 auto 0.8rem;
    font-size: max(0.78rem, 11px);
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #102d49;
    text-align: start;
}

.tp-nation.tpn-licenses-heading[dir="rtl"] { letter-spacing: 0; font-size: 0.9rem; }

/* ---------------------------------------------------------------- right-to-left */

.tp-nation[dir="rtl"] .tpn-build,
.tp-nation[dir="rtl"] .tpn-strip { text-align: right; }

/* ---------------------------------------------------------------- motion off */

@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-layer,
    .tp-nation .tpn-hero__copy,
    .tp-nation .tpn-hero__panel,
    .tp-nation .tpn-animate {
        animation: none !important;
    }

    .tp-nation .tpn-cta,
    .tp-nation .tpn-option { transition: none; }
}

/* ==========================================================================
   Nation surfaces: Citizen passport (security document), crest, stamps,
   member strip. Replaces the "passport", stamp, stats and compact strip
   blocks of nation.css. Guilloche patterns are generated (gen.py) and inlined
   as SVG data URIs; no filters, no external assets.
   ========================================================================== */

.tp-nation {
    --tpn-foil: linear-gradient(100deg, #8f6118 0%, #e7b64b 14%, #fff4cf 24%, #c9922f 38%, #f6d98f 56%, #a8741f 74%, #f3d38a 88%, #7a4f12 100%);
    --tpn-cream: #f7f0e0;
    --tpn-ink-blue: #1f3a86;
    --tpn-ink-red: #9a2436;
    --tpn-pat-lattice-gold: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 18 18%22 width=%2218%22 height=%2218%22%3E%3Cg fill=%22none%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.07%22 stroke-width=%22.5%22%3E%3Cpath d=%22M0 9.0 C4.5 0 4.5 0 9.0 9.0 S13.5 18 18 9.0%22/%3E%3Cpath d=%22M0 9.0 C4.5 18 4.5 18 9.0 9.0 S13.5 0 18 9.0%22/%3E%3C/g%3E%3C/svg%3E");
    --tpn-pat-lattice-visa: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22 width=%2222%22 height=%2222%22%3E%3Cg fill=%22none%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.06%22 stroke-width=%22.5%22%3E%3Cpath d=%22M0 11.0 C5.5 0 5.5 0 11.0 11.0 S16.5 22 22 11.0%22/%3E%3Cpath d=%22M0 11.0 C5.5 22 5.5 22 11.0 11.0 S16.5 0 22 11.0%22/%3E%3C/g%3E%3C/svg%3E");
    --tpn-pat-rosette-gold: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22 width=%22200%22 height=%22200%22%3E%3Cdefs%3E%3Cpath id=%22a%22 d=%22M84 0l3.4 2 1.9 2-.5 2-2.8 1.7-3.7 1.6-3.3 1.4-1.5 1.6 .9 1.9 2.7 2.4 3.1 2.6 2.1 2.5-.2 2.1-2.4 1.3-3.8 .9-3.9 .6-2.4 1-.2 1.8 1.6 2.7 2.6 3.1 2 3.1 .1 2.3-1.9 1.2-3.7 .3-4-.2-3.2 .2-1.3 1.2 .6 2.6 1.8 3.5 1.6 3.6 .3 2.7-1.6 1.3-3.2-.2-4-1-3.5-.7-2.1 .4-.4 2.1 .7 3.5 1 4 .2 3.2-1.3 1.6-2.7-.3-3.6-1.6-3.5-1.8-2.6-.6-1.2 1.3-.2 3.2 .2 4-.3 3.7-1.2 1.9-2.3-.1-3.1-2-3.1-2.6-2.7-1.6-1.8 .2-1 2.4-.6 3.9-.9 3.8-1.3 2.4-2.1 .2-2.5-2.1-2.6-3.1-2.4-2.7-1.9-.9-1.6 1.5-1.4 3.3-1.6 3.7-1.7 2.8-2 .5-2-1.9-2-3.4-1.8-3.4-1.7-2-1.8 .3-2 2.4-2.2 3.4-2.4 2.8-2.1 .9-1.8-1.5-1.3-3.4-1.1-3.9-1.1-3-1.6-.8-2.3 1.4-2.8 2.7-2.9 2.6-2.5 1.2-1.7-1.1-.9-3.2-.2-4-.4-3.6-1-1.9-2.2 .3-3.1 1.8-3.4 2.2-3 1.1-1.9-.7-.6-2.7 .4-3.9 .6-3.9-.2-2.6-1.7-.8-3 .8-3.8 1.4-3.5 .9-2.3-.5-.5-2.3 .9-3.5 1.4-3.8 .8-3-.8-1.7-2.6-.2-3.9 .6-3.9 .4-2.7-.6-.7-1.9 1.1-3 2.2-3.4 1.8-3.1 .3-2.2-1.9-1-3.6-.4-4-.2-3.2-.9-1.1-1.7 1.2-2.5 2.6-2.9 2.7-2.8 1.4-2.3-.8-1.6-3-1.1-3.9-1.1-3.4-1.3-1.5-1.8 .9-2.1 2.8-2.4 3.4-2.2 2.4-2 .3-1.8-2-1.7-3.4-1.8-3.4-2-1.9-2 .5-2 2.8-1.7 3.7-1.6 3.3-1.4 1.5-1.6-.9-1.9-2.7-2.4-3.1-2.6-2.1-2.5 .2-2.1 2.4-1.3 3.8-.9 3.9-.6 2.4-1 .2-1.8-1.6-2.7-2.6-3.1-2-3.1-.1-2.3 1.9-1.2 3.7-.3 4 .2 3.2-.2 1.3-1.2-.6-2.6-1.8-3.5-1.6-3.6-.3-2.7 1.6-1.3 3.2 .2 4 1 3.5 .7 2.1-.4 .4-2.1-.7-3.5-1-4-.2-3.2 1.3-1.6 2.7 .3 3.6 1.6 3.5 1.8 2.6 .6 1.2-1.3 .2-3.2-.2-4 .3-3.7 1.2-1.9 2.3 .1 3.1 2 3.1 2.6 2.7 1.6 1.8-.2 1-2.4 .6-3.9 .9-3.8 1.3-2.4 2.1-.2 2.5 2.1 2.6 3.1 2.4 2.7 1.9 .9 1.6-1.5 1.4-3.3 1.6-3.7 1.7-2.8 2-.5 2 1.9 2 3.4 1.8 3.4 1.7 2 1.8-.3 2-2.4 2.2-3.4 2.4-2.8 2.1-.9 1.8 1.5 1.3 3.4 1.1 3.9 1.1 3 1.6 .8 2.3-1.4 2.8-2.7 2.9-2.6 2.5-1.2 1.7 1.1 .9 3.2 .2 4 .4 3.6 1 1.9 2.2-.3 3.1-1.8 3.4-2.2 3-1.1 1.9 .7 .6 2.7-.4 3.9-.6 3.9 .2 2.6 1.7 .8 3-.8 3.8-1.4 3.5-.9 2.3 .5 .5 2.3-.9 3.5-1.4 3.8-.8 3 .8 1.7 2.6 .2 3.9-.6 3.9-.4 2.7 .6 .7 1.9-1.1 3-2.2 3.4-1.8 3.1-.3 2.2 1.9 1 3.6 .4 4 .2 3.2 .9 1.1 1.7-1.2 2.5-2.6 2.9-2.7 2.8-1.4 2.3 .8 1.6 3 1.1 3.9 1.1 3.4 1.3 1.5 1.8-.9 2.1-2.8 2.4-3.4 2.2-2.4 2-.3 1.8 2 1.7z%22/%3E%3Cpath id=%22b%22 d=%22M64 0l4.5 1.5 2.2 1.6-.1 1.5-.5 1.5 .3 1.6-.2 1.5-2.5 1.2-4.7 .7-4.7 .5-2.4 .8-.3 1.2 0 1.3-.7 1.1-.3 1.2 1.7 1.9 3.8 2.8 3.8 2.9 1.5 2.3-.6 1.4-1 1.3-.3 1.5-.7 1.4-2.7 .3-4.7-1-4.6-1.2-2.5-.1-.7 1.1-.4 1.2-1.1 .8-.7 1 1 2.4 2.6 3.9 2.5 4.1 .7 2.6-1.1 1.1-1.3 .9-.9 1.3-1.1 1.1-2.6-.7-4.1-2.5-3.9-2.6-2.4-1-1 .7-.8 1.1-1.2 .4-1.1 .7 .1 2.5 1.2 4.6 1 4.7-.3 2.7-1.4 .7-1.5 .3-1.3 1-1.4 .6-2.3-1.5-2.9-3.8-2.8-3.8-1.9-1.7-1.2 .3-1.1 .7-1.3 0-1.2 .3-.8 2.4-.5 4.7-.7 4.7-1.2 2.5-1.5 .2-1.6-.3-1.5 .5-1.5 .1-1.6-2.2-1.5-4.5-1.3-4.6-1.2-2.2-1.2-.1-1.3 .3-1.2-.5-1.3-.2-1.5 2.1-2.1 4.2-2.3 4.2-1.9 1.9-1.5-.3-1.4-.8-1.6 0-1.5-.5-.7-2.6 .1-4.8 .3-4.7-.3-2.5-1.1-.5-1.3-.2-1-.9-1.1-.6-2.2 1.4-3.4 3.3-3.6 3.2-2.4 1.1-1.3-.8-1.1-1.2-1.5-.6-1.2-.9 .2-2.7 1.8-4.5 1.9-4.3 .5-2.5-.9-.9-1.1-.6-.6-1.1-.9-.9-2.5 .5-4.3 1.9-4.5 1.8-2.7 .2-.9-1.2-.6-1.5-1.2-1.1-.8-1.3 1.1-2.4 3.2-3.6 3.3-3.4 1.4-2.2-.6-1.1-.9-1-.2-1.3-.5-1.1-2.5-.3-4.7 .3-4.8 .1-2.6-.7-.5-1.5 0-1.6-.8-1.4-.3-1.5 1.9-1.9 4.2-2.3 4.2-2.1 2.1-1.5-.2-1.3-.5-1.2 .3-1.3-.1-1.2-2.2-1.2-4.6-1.3-4.5-1.5-2.2-1.6 .1-1.5 .5-1.5-.3-1.6 .2-1.5 2.5-1.2 4.7-.7 4.7-.5 2.4-.8 .3-1.2 0-1.3 .7-1.1 .3-1.2-1.7-1.9-3.8-2.8-3.8-2.9-1.5-2.3 .6-1.4 1-1.3 .3-1.5 .7-1.4 2.7-.3 4.7 1 4.6 1.2 2.5 .1 .7-1.1 .4-1.2 1.1-.8 .7-1-1-2.4-2.6-3.9-2.5-4.1-.7-2.6 1.1-1.1 1.3-.9 .9-1.3 1.1-1.1 2.6 .7 4.1 2.5 3.9 2.6 2.4 1 1-.7 .8-1.1 1.2-.4 1.1-.7-.1-2.5-1.2-4.6-1-4.7 .3-2.7 1.4-.7 1.5-.3 1.3-1 1.4-.6 2.3 1.5 2.9 3.8 2.8 3.8 1.9 1.7 1.2-.3 1.1-.7 1.3 0 1.2-.3 .8-2.4 .5-4.7 .7-4.7 1.2-2.5 1.5-.2 1.6 .3 1.5-.5 1.5-.1 1.6 2.2 1.5 4.5 1.3 4.6 1.2 2.2 1.2 .1 1.3-.3 1.2 .5 1.3 .2 1.5-2.1 2.1-4.2 2.3-4.2 1.9-1.9 1.5 .3 1.4 .8 1.6 0 1.5 .5 .7 2.6-.1 4.8-.3 4.7 .3 2.5 1.1 .5 1.3 .2 1 .9 1.1 .6 2.2-1.4 3.4-3.3 3.6-3.2 2.4-1.1 1.3 .8 1.1 1.2 1.5 .6 1.2 .9-.2 2.7-1.8 4.5-1.9 4.3-.5 2.5 .9 .9 1.1 .6 .6 1.1 .9 .9 2.5-.5 4.3-1.9 4.5-1.8 2.7-.2 .9 1.2 .6 1.5 1.2 1.1 .8 1.3-1.1 2.4-3.2 3.6-3.3 3.4-1.4 2.2 .6 1.1 .9 1 .2 1.3 .5 1.1 2.5 .3 4.7-.3 4.8-.1 2.6 .7 .5 1.5 0 1.6 .8 1.4 .3 1.5-1.9 1.9-4.2 2.3-4.2 2.1-2.1 1.5 .2 1.3 .5 1.2-.3 1.3 .1 1.2 2.2 1.2z%22/%3E%3Cpath id=%22c%22 d=%22M46 0l-.7 1.8-2.1 1.7-2.8 1.4-3.1 1.2-2.6 1-1.6 1.1-.3 1.4 1 1.7 1.7 2.3 2.1 2.5 1.7 2.7 .8 2.4-.3 1.9-1.7 1.2-2.7 .4-3.2-.3-3.2-.5-2.7-.4-1.8 .2-.9 1.1 0 2.1 .4 2.9 .5 3.2 .1 3.2-.5 2.4-1.4 1.4-2 0-2.6-1.1-2.6-1.8-2.5-2.1-2.1-1.6-1.7-.6-1.3 .6-1 1.9-1.1 2.8-1.2 3-1.5 2.7-1.7 1.8-1.9 .4-1.8-1.1-1.6-2.3-1.3-3-1.2-3-1-2.4-1.1-1.3-1.5 .1-1.9 1.1-2.3 1.9-2.6 2.1-2.6 1.5-2.4 .6-1.7-.7-1-2-.2-2.8 .4-3.3 .5-3.1 .3-2.5-.4-1.6-1.4-.7-2.3 .2-3 .5-3.3 .4-3 0-2.2-.8-1-1.5 .2-2.2 1.4-2.6 1.9-2.7 2-2.4 1.4-2 .4-1.5-1-1.2-2.1-1.1-2.9-1.1-3.1-1.2-2.5-1.6-1.4-1.8 0-1.8 1.4-1.8 2.5-1.6 3.1-1.2 2.9-1.1 2.1-1.1 1-1.2-.4-1.5-1.4-2-2-2.4-1.9-2.7-1.4-2.6-.2-2.2 1-1.5 2.2-.8 3 0 3.3 .4 3 .5 2.3 .2 1.4-.7 .4-1.6-.3-2.5-.5-3.1-.4-3.3 .2-2.8 1-2 1.7-.7 2.4 .6 2.6 1.5 2.6 2.1 2.3 1.9 1.9 1.1 1.5 .1 1.1-1.3 1-2.4 1.2-3 1.3-3 1.6-2.3 1.8-1.1 1.9 .4 1.7 1.8 1.5 2.7 1.2 3 1.1 2.8 1 1.9 1.3 .6 1.7-.6 2.1-1.6 2.5-2.1 2.6-1.8 2.6-1.1 2 0 1.4 1.4 .5 2.4-.1 3.2-.5 3.2-.4 2.9 0 2.1 .9 1.1 1.8 .2 2.7-.4 3.2-.5 3.2-.3 2.7 .4 1.7 1.2 .3 1.9-.8 2.4-1.7 2.7-2.1 2.5-1.7 2.3-1 1.7 .3 1.4 1.6 1.1 2.6 1 3.1 1.2 2.8 1.4 2.1 1.7z%22/%3E%3Cpath id=%22h%22 d=%22M35 0l-.1-.9-.2-.9-.4-.9-.5-.8-.7-.8-.8-.7-.9-.6-1-.4-1.1-.4-1.2-.2-1.3-.1-1.3 0-1.3 .2-1.3 .4-1.4 .5-1.3 .6-1.3 .8-1.2 .9-1.2 1-1.1 1.2-.9 1.2-.9 1.4-.8 1.4-.6 1.5-.5 1.6-.3 1.6-.2 1.6-.1 1.6 .1 1.6 .2 1.5 .4 1.5 .5 1.4 .6 1.4 .7 1.2 .8 1.1 .9 1 1 .9 1 .7 1 .6 1.1 .5 1.1 .3 1.1 .1 1 0 1-.2 .9-.3 .9-.4 .8-.5 .6-.7 .5-.8 .5-.8 .2-.9 .2-1-.1-1-.1-1-.4-1.1-.4-1-.6-1-.8-.9-.9-.9-1-.8-1.2-.7-1.2-.6-1.4-.5-1.4-.3-1.5-.3-1.5-.1-1.6 .1-1.6 .2-1.5 .3-1.6 .5-1.5 .6-1.4 .8-1.4 .8-1.3 1-1.1 1.1-1.1 1.2-1 1.3-.8 1.3-.7 1.4-.5 1.4-.4 1.4-.3 1.4-.1 1.4 .1 1.3 .1 1.3 .4 1.2 .4 1.2 .5 1 .7 .9 .7 .8 .8 .7 .9 .5 .9 .4 .9 .2 1 .1 .9-.1 .9-.3 .8-.4 .8-.5 .8-.6 .6-.8 .5-.9 .4-1 .3-1.1 .2-1.2 0-1.2-.1-1.2-.3-1.3-.4-1.3-.6-1.2-.7-1.3-.9-1.2-1-1.1-1.1-1.1-1.2-.9-1.3-.9-1.4-.7-1.5-.7-1.6-.4-1.6-.4-1.6-.2-1.6-.1-1.6 .1-1.6 .2-1.5 .4-1.5 .5-1.4 .6-1.3 .7-1.2 .8-1.1 .9-1 1-.8 1.1-.7 1.1-.6 1.1-.4 1.2-.2 1.1-.1 1.1 0 1.1 .2 1 .3 1 .5 .9 .6 .7 .6 .7 .8 .5 .8 .4 .9 .3 1 .1 1-.1 1-.2 .9-.3 1-.5 .9-.6 .9-.8 .8-1 .7-1 .6-1.1 .5-1.3 .4-1.3 .2-1.4 .1-1.5 0-1.5-.2-1.5-.3-1.6-.5-1.5-.6-1.4-.7-1.5-.9-1.4-1-1.2-1.1-1.2-1.2-1.1-1.2-1-1.4-.9-1.4-.7-1.4-.6-1.5-.4-1.5-.3-1.5-.1-1.4 0-1.4 .1-1.3 .3-1.2 .4-1.2 .5-1 .6-.9 .7-.8 .8-.7 .9-.5 .9-.4 .9-.2 1 0 .9 .1 1 .2 .9 .4 .8 .5 .8 .7 .7 .8 .6 .8 .5 1 .3 1.1 .3 1.1 .1 1.2-.1 1.2-.2 1.2-.3 1.2-.5 1.2-.6 1.1-.8 1.1-.9 1-1.1 1-1.2 .8-1.2 .8-1.4 .6-1.5 .5-1.5 .3-1.6 .2-1.6 .1-1.6-.1-1.6-.2-1.6-.3-1.6-.5-1.5-.6-1.5-.8-1.4-.8-1.2-1-1.2-1-1.1-1.1-.9-1.1-.8-1.2-.6-1.2-.5-1.2-.3-1.2-.2-1.2-.1-1.1 .1-1.1 .3-1 .3-.8 .5-.8 .6-.7 .7-.5 .8-.4 .8-.2 .9-.1 1 0 .9 .2 1 .4 .9 .5 .9 .7 .9 .8 .8 .9 .7 1 .6 1.2 .5 1.2 .4 1.3 .3 1.4 .1 1.4 0 1.5-.1 1.5-.3 1.5-.4 1.4-.6 1.4-.7 1.4-.9 1.2-1 1.2-1.1 1.1-1.2 1-1.2 .9-1.4 .7-1.5 .6-1.4 .5-1.5 .3-1.6 .2-1.5 0-1.5-.1-1.5-.2-1.4-.4-1.3-.5-1.3-.6-1.1-.7-1-.8-1-.9-.8-.9-.6-1-.5-.9-.3-1-.2-1-.1-1 .1-.9 .3-.8 .4-.8 .5-.6 .7-.6 .7-.5 .9-.3 1-.2 1 0 1.1 .1 1.1 .2 1.1 .4 1.2 .6 1.1 .7 1.1 .8 1.1 1 1 1.1 .9 1.2 .8 1.3 .7 1.4 .6 1.5 .5 1.5 .4 1.6 .2 1.6 .1 1.6-.1 1.6-.2 1.6-.4 1.6-.4 1.5-.7 1.4-.7 1.3-.9 1.2-.9 1.1-1.1 1-1.1 .9-1.2 .7-1.3 .6-1.2 .4-1.3 .3-1.3 .1-1.2 0-1.2-.2-1.2-.3-1.1-.4-1-.5-.9-.6-.8-.8-.6-.8-.5-.8-.4-.9-.3-.9-.1-1 .1-.9 .2-.9 .4-.9 .5-.8 .7-.7 .8-.7 .9-.5 1-.4 1.2-.4 1.2-.1 1.3-.1 1.3 .1 1.4 .3 1.4 .4 1.4 .5 1.4 .7 1.4 .8 1.3 1 1.3 1.1 1.2 1.1 1.1 1.3 1 1.4 .8 1.4 .8 1.5 .6 1.6 .5 1.5 .3 1.6 .2 1.6 .1 1.5-.1 1.5-.3 1.4-.3 1.4-.5 1.2-.6 1.2-.7 1-.8 .9-.9 .8-.9 .6-1 .4-1 .4-1.1 .1-1 .1-1-.2-1-.2-.9-.5-.8-.5-.8-.6-.7-.8-.5-.9-.4-.9-.3-1-.2-1 0-1.1 .1-1.1 .3-1.1 .5-1 .6-1 .7-1 .9-.9 1-.8 1.1-.7 1.2-.6 1.4-.5 1.4-.4 1.5-.2 1.5-.1 1.6 .1 1.6 .2 1.6 .3 1.6 .5 1.6 .6 1.5 .8 1.4 .9 1.4 .9 1.2 1.1 1.2 1.2 1 1.2 .9 1.3 .8 1.3 .6 1.4 .5 1.3 .4 1.3 .2 1.3 0 1.3-.1 1.2-.2 1.1-.4 1-.4 .9-.6 .8-.7 .7-.8 .5-.8 .4-.9 .2-.9z%22/%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.30%22%3E%3Cg stroke-width=%220.42%22%3E%3Cuse href=%22%23a%22 transform=%22rotate(0)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(1.7)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(3.4)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(5.1)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(6.9)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(8.6)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(10.3)%22/%3E%3C/g%3E%3Cg stroke-width=%220.42%22%3E%3Cuse href=%22%23b%22 transform=%22rotate(0)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(3.3)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(6.7)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(10)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(13.3)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(16.7)%22/%3E%3C/g%3E%3Cg stroke-width=%220.4%22%3E%3Cuse href=%22%23c%22 transform=%22rotate(0)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(5)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(10)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(15)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(20)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(25)%22/%3E%3C/g%3E%3Cg stroke-width=%22.35%22%3E%3Cuse href=%22%23h%22/%3E%3Cuse href=%22%23h%22 transform=%22rotate(10) scale(.82)%22/%3E%3C/g%3E%3Cg stroke-width=%22.5%22%3E%3Ccircle r=%2293%22/%3E%3Ccircle r=%2295.5%22 stroke-dasharray=%22.6 1.4%22/%3E%3Ccircle r=%2274.5%22/%3E%3Ccircle r=%2251%22/%3E%3Ccircle r=%2217%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --tpn-pat-rosette-ink: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-100 -100 200 200%22 width=%22200%22 height=%22200%22%3E%3Cdefs%3E%3Cpath id=%22a%22 d=%22M84 0l3.4 2 1.9 2-.5 2-2.8 1.7-3.7 1.6-3.3 1.4-1.5 1.6 .9 1.9 2.7 2.4 3.1 2.6 2.1 2.5-.2 2.1-2.4 1.3-3.8 .9-3.9 .6-2.4 1-.2 1.8 1.6 2.7 2.6 3.1 2 3.1 .1 2.3-1.9 1.2-3.7 .3-4-.2-3.2 .2-1.3 1.2 .6 2.6 1.8 3.5 1.6 3.6 .3 2.7-1.6 1.3-3.2-.2-4-1-3.5-.7-2.1 .4-.4 2.1 .7 3.5 1 4 .2 3.2-1.3 1.6-2.7-.3-3.6-1.6-3.5-1.8-2.6-.6-1.2 1.3-.2 3.2 .2 4-.3 3.7-1.2 1.9-2.3-.1-3.1-2-3.1-2.6-2.7-1.6-1.8 .2-1 2.4-.6 3.9-.9 3.8-1.3 2.4-2.1 .2-2.5-2.1-2.6-3.1-2.4-2.7-1.9-.9-1.6 1.5-1.4 3.3-1.6 3.7-1.7 2.8-2 .5-2-1.9-2-3.4-1.8-3.4-1.7-2-1.8 .3-2 2.4-2.2 3.4-2.4 2.8-2.1 .9-1.8-1.5-1.3-3.4-1.1-3.9-1.1-3-1.6-.8-2.3 1.4-2.8 2.7-2.9 2.6-2.5 1.2-1.7-1.1-.9-3.2-.2-4-.4-3.6-1-1.9-2.2 .3-3.1 1.8-3.4 2.2-3 1.1-1.9-.7-.6-2.7 .4-3.9 .6-3.9-.2-2.6-1.7-.8-3 .8-3.8 1.4-3.5 .9-2.3-.5-.5-2.3 .9-3.5 1.4-3.8 .8-3-.8-1.7-2.6-.2-3.9 .6-3.9 .4-2.7-.6-.7-1.9 1.1-3 2.2-3.4 1.8-3.1 .3-2.2-1.9-1-3.6-.4-4-.2-3.2-.9-1.1-1.7 1.2-2.5 2.6-2.9 2.7-2.8 1.4-2.3-.8-1.6-3-1.1-3.9-1.1-3.4-1.3-1.5-1.8 .9-2.1 2.8-2.4 3.4-2.2 2.4-2 .3-1.8-2-1.7-3.4-1.8-3.4-2-1.9-2 .5-2 2.8-1.7 3.7-1.6 3.3-1.4 1.5-1.6-.9-1.9-2.7-2.4-3.1-2.6-2.1-2.5 .2-2.1 2.4-1.3 3.8-.9 3.9-.6 2.4-1 .2-1.8-1.6-2.7-2.6-3.1-2-3.1-.1-2.3 1.9-1.2 3.7-.3 4 .2 3.2-.2 1.3-1.2-.6-2.6-1.8-3.5-1.6-3.6-.3-2.7 1.6-1.3 3.2 .2 4 1 3.5 .7 2.1-.4 .4-2.1-.7-3.5-1-4-.2-3.2 1.3-1.6 2.7 .3 3.6 1.6 3.5 1.8 2.6 .6 1.2-1.3 .2-3.2-.2-4 .3-3.7 1.2-1.9 2.3 .1 3.1 2 3.1 2.6 2.7 1.6 1.8-.2 1-2.4 .6-3.9 .9-3.8 1.3-2.4 2.1-.2 2.5 2.1 2.6 3.1 2.4 2.7 1.9 .9 1.6-1.5 1.4-3.3 1.6-3.7 1.7-2.8 2-.5 2 1.9 2 3.4 1.8 3.4 1.7 2 1.8-.3 2-2.4 2.2-3.4 2.4-2.8 2.1-.9 1.8 1.5 1.3 3.4 1.1 3.9 1.1 3 1.6 .8 2.3-1.4 2.8-2.7 2.9-2.6 2.5-1.2 1.7 1.1 .9 3.2 .2 4 .4 3.6 1 1.9 2.2-.3 3.1-1.8 3.4-2.2 3-1.1 1.9 .7 .6 2.7-.4 3.9-.6 3.9 .2 2.6 1.7 .8 3-.8 3.8-1.4 3.5-.9 2.3 .5 .5 2.3-.9 3.5-1.4 3.8-.8 3 .8 1.7 2.6 .2 3.9-.6 3.9-.4 2.7 .6 .7 1.9-1.1 3-2.2 3.4-1.8 3.1-.3 2.2 1.9 1 3.6 .4 4 .2 3.2 .9 1.1 1.7-1.2 2.5-2.6 2.9-2.7 2.8-1.4 2.3 .8 1.6 3 1.1 3.9 1.1 3.4 1.3 1.5 1.8-.9 2.1-2.8 2.4-3.4 2.2-2.4 2-.3 1.8 2 1.7z%22/%3E%3Cpath id=%22b%22 d=%22M64 0l4.5 1.5 2.2 1.6-.1 1.5-.5 1.5 .3 1.6-.2 1.5-2.5 1.2-4.7 .7-4.7 .5-2.4 .8-.3 1.2 0 1.3-.7 1.1-.3 1.2 1.7 1.9 3.8 2.8 3.8 2.9 1.5 2.3-.6 1.4-1 1.3-.3 1.5-.7 1.4-2.7 .3-4.7-1-4.6-1.2-2.5-.1-.7 1.1-.4 1.2-1.1 .8-.7 1 1 2.4 2.6 3.9 2.5 4.1 .7 2.6-1.1 1.1-1.3 .9-.9 1.3-1.1 1.1-2.6-.7-4.1-2.5-3.9-2.6-2.4-1-1 .7-.8 1.1-1.2 .4-1.1 .7 .1 2.5 1.2 4.6 1 4.7-.3 2.7-1.4 .7-1.5 .3-1.3 1-1.4 .6-2.3-1.5-2.9-3.8-2.8-3.8-1.9-1.7-1.2 .3-1.1 .7-1.3 0-1.2 .3-.8 2.4-.5 4.7-.7 4.7-1.2 2.5-1.5 .2-1.6-.3-1.5 .5-1.5 .1-1.6-2.2-1.5-4.5-1.3-4.6-1.2-2.2-1.2-.1-1.3 .3-1.2-.5-1.3-.2-1.5 2.1-2.1 4.2-2.3 4.2-1.9 1.9-1.5-.3-1.4-.8-1.6 0-1.5-.5-.7-2.6 .1-4.8 .3-4.7-.3-2.5-1.1-.5-1.3-.2-1-.9-1.1-.6-2.2 1.4-3.4 3.3-3.6 3.2-2.4 1.1-1.3-.8-1.1-1.2-1.5-.6-1.2-.9 .2-2.7 1.8-4.5 1.9-4.3 .5-2.5-.9-.9-1.1-.6-.6-1.1-.9-.9-2.5 .5-4.3 1.9-4.5 1.8-2.7 .2-.9-1.2-.6-1.5-1.2-1.1-.8-1.3 1.1-2.4 3.2-3.6 3.3-3.4 1.4-2.2-.6-1.1-.9-1-.2-1.3-.5-1.1-2.5-.3-4.7 .3-4.8 .1-2.6-.7-.5-1.5 0-1.6-.8-1.4-.3-1.5 1.9-1.9 4.2-2.3 4.2-2.1 2.1-1.5-.2-1.3-.5-1.2 .3-1.3-.1-1.2-2.2-1.2-4.6-1.3-4.5-1.5-2.2-1.6 .1-1.5 .5-1.5-.3-1.6 .2-1.5 2.5-1.2 4.7-.7 4.7-.5 2.4-.8 .3-1.2 0-1.3 .7-1.1 .3-1.2-1.7-1.9-3.8-2.8-3.8-2.9-1.5-2.3 .6-1.4 1-1.3 .3-1.5 .7-1.4 2.7-.3 4.7 1 4.6 1.2 2.5 .1 .7-1.1 .4-1.2 1.1-.8 .7-1-1-2.4-2.6-3.9-2.5-4.1-.7-2.6 1.1-1.1 1.3-.9 .9-1.3 1.1-1.1 2.6 .7 4.1 2.5 3.9 2.6 2.4 1 1-.7 .8-1.1 1.2-.4 1.1-.7-.1-2.5-1.2-4.6-1-4.7 .3-2.7 1.4-.7 1.5-.3 1.3-1 1.4-.6 2.3 1.5 2.9 3.8 2.8 3.8 1.9 1.7 1.2-.3 1.1-.7 1.3 0 1.2-.3 .8-2.4 .5-4.7 .7-4.7 1.2-2.5 1.5-.2 1.6 .3 1.5-.5 1.5-.1 1.6 2.2 1.5 4.5 1.3 4.6 1.2 2.2 1.2 .1 1.3-.3 1.2 .5 1.3 .2 1.5-2.1 2.1-4.2 2.3-4.2 1.9-1.9 1.5 .3 1.4 .8 1.6 0 1.5 .5 .7 2.6-.1 4.8-.3 4.7 .3 2.5 1.1 .5 1.3 .2 1 .9 1.1 .6 2.2-1.4 3.4-3.3 3.6-3.2 2.4-1.1 1.3 .8 1.1 1.2 1.5 .6 1.2 .9-.2 2.7-1.8 4.5-1.9 4.3-.5 2.5 .9 .9 1.1 .6 .6 1.1 .9 .9 2.5-.5 4.3-1.9 4.5-1.8 2.7-.2 .9 1.2 .6 1.5 1.2 1.1 .8 1.3-1.1 2.4-3.2 3.6-3.3 3.4-1.4 2.2 .6 1.1 .9 1 .2 1.3 .5 1.1 2.5 .3 4.7-.3 4.8-.1 2.6 .7 .5 1.5 0 1.6 .8 1.4 .3 1.5-1.9 1.9-4.2 2.3-4.2 2.1-2.1 1.5 .2 1.3 .5 1.2-.3 1.3 .1 1.2 2.2 1.2z%22/%3E%3Cpath id=%22c%22 d=%22M46 0l-.7 1.8-2.1 1.7-2.8 1.4-3.1 1.2-2.6 1-1.6 1.1-.3 1.4 1 1.7 1.7 2.3 2.1 2.5 1.7 2.7 .8 2.4-.3 1.9-1.7 1.2-2.7 .4-3.2-.3-3.2-.5-2.7-.4-1.8 .2-.9 1.1 0 2.1 .4 2.9 .5 3.2 .1 3.2-.5 2.4-1.4 1.4-2 0-2.6-1.1-2.6-1.8-2.5-2.1-2.1-1.6-1.7-.6-1.3 .6-1 1.9-1.1 2.8-1.2 3-1.5 2.7-1.7 1.8-1.9 .4-1.8-1.1-1.6-2.3-1.3-3-1.2-3-1-2.4-1.1-1.3-1.5 .1-1.9 1.1-2.3 1.9-2.6 2.1-2.6 1.5-2.4 .6-1.7-.7-1-2-.2-2.8 .4-3.3 .5-3.1 .3-2.5-.4-1.6-1.4-.7-2.3 .2-3 .5-3.3 .4-3 0-2.2-.8-1-1.5 .2-2.2 1.4-2.6 1.9-2.7 2-2.4 1.4-2 .4-1.5-1-1.2-2.1-1.1-2.9-1.1-3.1-1.2-2.5-1.6-1.4-1.8 0-1.8 1.4-1.8 2.5-1.6 3.1-1.2 2.9-1.1 2.1-1.1 1-1.2-.4-1.5-1.4-2-2-2.4-1.9-2.7-1.4-2.6-.2-2.2 1-1.5 2.2-.8 3 0 3.3 .4 3 .5 2.3 .2 1.4-.7 .4-1.6-.3-2.5-.5-3.1-.4-3.3 .2-2.8 1-2 1.7-.7 2.4 .6 2.6 1.5 2.6 2.1 2.3 1.9 1.9 1.1 1.5 .1 1.1-1.3 1-2.4 1.2-3 1.3-3 1.6-2.3 1.8-1.1 1.9 .4 1.7 1.8 1.5 2.7 1.2 3 1.1 2.8 1 1.9 1.3 .6 1.7-.6 2.1-1.6 2.5-2.1 2.6-1.8 2.6-1.1 2 0 1.4 1.4 .5 2.4-.1 3.2-.5 3.2-.4 2.9 0 2.1 .9 1.1 1.8 .2 2.7-.4 3.2-.5 3.2-.3 2.7 .4 1.7 1.2 .3 1.9-.8 2.4-1.7 2.7-2.1 2.5-1.7 2.3-1 1.7 .3 1.4 1.6 1.1 2.6 1 3.1 1.2 2.8 1.4 2.1 1.7z%22/%3E%3Cpath id=%22h%22 d=%22M35 0l-.1-.9-.2-.9-.4-.9-.5-.8-.7-.8-.8-.7-.9-.6-1-.4-1.1-.4-1.2-.2-1.3-.1-1.3 0-1.3 .2-1.3 .4-1.4 .5-1.3 .6-1.3 .8-1.2 .9-1.2 1-1.1 1.2-.9 1.2-.9 1.4-.8 1.4-.6 1.5-.5 1.6-.3 1.6-.2 1.6-.1 1.6 .1 1.6 .2 1.5 .4 1.5 .5 1.4 .6 1.4 .7 1.2 .8 1.1 .9 1 1 .9 1 .7 1 .6 1.1 .5 1.1 .3 1.1 .1 1 0 1-.2 .9-.3 .9-.4 .8-.5 .6-.7 .5-.8 .5-.8 .2-.9 .2-1-.1-1-.1-1-.4-1.1-.4-1-.6-1-.8-.9-.9-.9-1-.8-1.2-.7-1.2-.6-1.4-.5-1.4-.3-1.5-.3-1.5-.1-1.6 .1-1.6 .2-1.5 .3-1.6 .5-1.5 .6-1.4 .8-1.4 .8-1.3 1-1.1 1.1-1.1 1.2-1 1.3-.8 1.3-.7 1.4-.5 1.4-.4 1.4-.3 1.4-.1 1.4 .1 1.3 .1 1.3 .4 1.2 .4 1.2 .5 1 .7 .9 .7 .8 .8 .7 .9 .5 .9 .4 .9 .2 1 .1 .9-.1 .9-.3 .8-.4 .8-.5 .8-.6 .6-.8 .5-.9 .4-1 .3-1.1 .2-1.2 0-1.2-.1-1.2-.3-1.3-.4-1.3-.6-1.2-.7-1.3-.9-1.2-1-1.1-1.1-1.1-1.2-.9-1.3-.9-1.4-.7-1.5-.7-1.6-.4-1.6-.4-1.6-.2-1.6-.1-1.6 .1-1.6 .2-1.5 .4-1.5 .5-1.4 .6-1.3 .7-1.2 .8-1.1 .9-1 1-.8 1.1-.7 1.1-.6 1.1-.4 1.2-.2 1.1-.1 1.1 0 1.1 .2 1 .3 1 .5 .9 .6 .7 .6 .7 .8 .5 .8 .4 .9 .3 1 .1 1-.1 1-.2 .9-.3 1-.5 .9-.6 .9-.8 .8-1 .7-1 .6-1.1 .5-1.3 .4-1.3 .2-1.4 .1-1.5 0-1.5-.2-1.5-.3-1.6-.5-1.5-.6-1.4-.7-1.5-.9-1.4-1-1.2-1.1-1.2-1.2-1.1-1.2-1-1.4-.9-1.4-.7-1.4-.6-1.5-.4-1.5-.3-1.5-.1-1.4 0-1.4 .1-1.3 .3-1.2 .4-1.2 .5-1 .6-.9 .7-.8 .8-.7 .9-.5 .9-.4 .9-.2 1 0 .9 .1 1 .2 .9 .4 .8 .5 .8 .7 .7 .8 .6 .8 .5 1 .3 1.1 .3 1.1 .1 1.2-.1 1.2-.2 1.2-.3 1.2-.5 1.2-.6 1.1-.8 1.1-.9 1-1.1 1-1.2 .8-1.2 .8-1.4 .6-1.5 .5-1.5 .3-1.6 .2-1.6 .1-1.6-.1-1.6-.2-1.6-.3-1.6-.5-1.5-.6-1.5-.8-1.4-.8-1.2-1-1.2-1-1.1-1.1-.9-1.1-.8-1.2-.6-1.2-.5-1.2-.3-1.2-.2-1.2-.1-1.1 .1-1.1 .3-1 .3-.8 .5-.8 .6-.7 .7-.5 .8-.4 .8-.2 .9-.1 1 0 .9 .2 1 .4 .9 .5 .9 .7 .9 .8 .8 .9 .7 1 .6 1.2 .5 1.2 .4 1.3 .3 1.4 .1 1.4 0 1.5-.1 1.5-.3 1.5-.4 1.4-.6 1.4-.7 1.4-.9 1.2-1 1.2-1.1 1.1-1.2 1-1.2 .9-1.4 .7-1.5 .6-1.4 .5-1.5 .3-1.6 .2-1.5 0-1.5-.1-1.5-.2-1.4-.4-1.3-.5-1.3-.6-1.1-.7-1-.8-1-.9-.8-.9-.6-1-.5-.9-.3-1-.2-1-.1-1 .1-.9 .3-.8 .4-.8 .5-.6 .7-.6 .7-.5 .9-.3 1-.2 1 0 1.1 .1 1.1 .2 1.1 .4 1.2 .6 1.1 .7 1.1 .8 1.1 1 1 1.1 .9 1.2 .8 1.3 .7 1.4 .6 1.5 .5 1.5 .4 1.6 .2 1.6 .1 1.6-.1 1.6-.2 1.6-.4 1.6-.4 1.5-.7 1.4-.7 1.3-.9 1.2-.9 1.1-1.1 1-1.1 .9-1.2 .7-1.3 .6-1.2 .4-1.3 .3-1.3 .1-1.2 0-1.2-.2-1.2-.3-1.1-.4-1-.5-.9-.6-.8-.8-.6-.8-.5-.8-.4-.9-.3-.9-.1-1 .1-.9 .2-.9 .4-.9 .5-.8 .7-.7 .8-.7 .9-.5 1-.4 1.2-.4 1.2-.1 1.3-.1 1.3 .1 1.4 .3 1.4 .4 1.4 .5 1.4 .7 1.4 .8 1.3 1 1.3 1.1 1.2 1.1 1.1 1.3 1 1.4 .8 1.4 .8 1.5 .6 1.6 .5 1.5 .3 1.6 .2 1.6 .1 1.5-.1 1.5-.3 1.4-.3 1.4-.5 1.2-.6 1.2-.7 1-.8 .9-.9 .8-.9 .6-1 .4-1 .4-1.1 .1-1 .1-1-.2-1-.2-.9-.5-.8-.5-.8-.6-.7-.8-.5-.9-.4-.9-.3-1-.2-1 0-1.1 .1-1.1 .3-1.1 .5-1 .6-1 .7-1 .9-.9 1-.8 1.1-.7 1.2-.6 1.4-.5 1.4-.4 1.5-.2 1.5-.1 1.6 .1 1.6 .2 1.6 .3 1.6 .5 1.6 .6 1.5 .8 1.4 .9 1.4 .9 1.2 1.1 1.2 1.2 1 1.2 .9 1.3 .8 1.3 .6 1.4 .5 1.3 .4 1.3 .2 1.3 0 1.3-.1 1.2-.2 1.1-.4 1-.4 .9-.6 .8-.7 .7-.8 .5-.8 .4-.9 .2-.9z%22/%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22%231d3b86%22 stroke-opacity=%22.085%22%3E%3Cg stroke-width=%220.42%22%3E%3Cuse href=%22%23a%22 transform=%22rotate(0)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(1.7)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(3.4)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(5.1)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(6.9)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(8.6)%22/%3E%3Cuse href=%22%23a%22 transform=%22rotate(10.3)%22/%3E%3C/g%3E%3Cg stroke-width=%220.42%22%3E%3Cuse href=%22%23b%22 transform=%22rotate(0)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(3.3)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(6.7)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(10)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(13.3)%22/%3E%3Cuse href=%22%23b%22 transform=%22rotate(16.7)%22/%3E%3C/g%3E%3Cg stroke-width=%220.4%22%3E%3Cuse href=%22%23c%22 transform=%22rotate(0)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(5)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(10)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(15)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(20)%22/%3E%3Cuse href=%22%23c%22 transform=%22rotate(25)%22/%3E%3C/g%3E%3Cg stroke-width=%22.35%22%3E%3Cuse href=%22%23h%22/%3E%3Cuse href=%22%23h%22 transform=%22rotate(10) scale(.82)%22/%3E%3C/g%3E%3Cg stroke-width=%22.5%22%3E%3Ccircle r=%2293%22/%3E%3Ccircle r=%2295.5%22 stroke-dasharray=%22.6 1.4%22/%3E%3Ccircle r=%2274.5%22/%3E%3Ccircle r=%2251%22/%3E%3Ccircle r=%2217%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    --tpn-pat-waves-gold: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22 width=%22240%22 height=%2264%22%3E%3Cg fill=%22none%22 stroke-width=%22.45%22%3E%3Cpath d=%22M0 20.8l4.4 4 4.5 3 4.4 1.4 4.5-.2 4.4-1 4.5-.9 4.4-.3 4.5 .7 4.4 1.1 4.4 .7 4.5-.6 4.4-2.2 4.5-3.6 4.4-4.2 4.5-3.6 4.4-2.2 4.5-.6 4.4 .7 4.4 1.1 4.5 .7 4.4-.3 4.5-.9 4.4-1 4.5-.2 4.4 1.4 4.5 3 4.4 4 4.4 4 4.5 3 4.4 1.4 4.5-.2 4.4-1 4.5-.9 4.4-.3 4.5 .7 4.4 1.1 4.4 .7 4.5-.6 4.4-2.2 4.5-3.6 4.4-4.2 4.5-3.6 4.4-2.2 4.5-.6 4.4 .7 4.4 1.1 4.5 .7 4.4-.3 4.5-.9 4.4-1 4.5-.2 4.4 1.4 4.5 3 4.4 4%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 25.5l4.4 3.9 4.5 2.8 4.4 1.1 4.5-.5 4.4-1.4 4.5-1.4 4.4-.7 4.5 .3 4.4 .7 4.4 .3 4.5-.8 4.4-2.4 4.5-3.6 4.4-4.1 4.5-3.5 4.4-2 4.5-.2 4.4 1 4.4 1.6 4.5 1.1 4.4 .2 4.5-.6 4.4-.7 4.5 .2 4.4 1.6 4.5 3.1 4.4 4 4.4 3.9 4.5 2.8 4.4 1.1 4.5-.5 4.4-1.4 4.5-1.4 4.4-.7 4.5 .3 4.4 .7 4.4 .3 4.5-.8 4.4-2.4 4.5-3.6 4.4-4.1 4.5-3.5 4.4-2 4.5-.2 4.4 1 4.4 1.6 4.5 1.1 4.4 .2 4.5-.6 4.4-.7 4.5 .2 4.4 1.6 4.5 3.1 4.4 4%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 30.1l4.4 3.7 4.5 2.5 4.4 .8 4.5-.9 4.4-1.8 4.5-1.9 4.4-1.1 4.5-.1 4.4 .4 4.4 .1 4.5-1 4.4-2.4 4.5-3.7 4.4-3.9 4.5-3.3 4.4-1.6 4.5 .1 4.4 1.4 4.4 2 4.5 1.5 4.4 .6 4.5-.2 4.4-.3 4.5 .3 4.4 1.7 4.5 3.1 4.4 4 4.4 3.7 4.5 2.5 4.4 .8 4.5-.9 4.4-1.8 4.5-1.9 4.4-1.1 4.5-.1 4.4 .4 4.4 .1 4.5-1 4.4-2.4 4.5-3.7 4.4-3.9 4.5-3.3 4.4-1.6 4.5 .1 4.4 1.4 4.4 2 4.5 1.5 4.4 .6 4.5-.2 4.4-.3 4.5 .3 4.4 1.7 4.5 3.1 4.4 4%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 34.5l4.4 3.5 4.5 2.2 4.4 .3 4.5-1.3 4.4-2.2 4.5-2.3 4.4-1.5 4.5-.5 4.4 .1 4.4 0 4.5-1.1 4.4-2.4 4.5-3.5 4.4-3.7 4.5-3 4.4-1.3 4.5 .5 4.4 2 4.4 2.3 4.5 2 4.4 1 4.5 0 4.4-.1 4.5 .5 4.4 1.7 4.5 3.1 4.4 3.7 4.4 3.5 4.5 2.2 4.4 .3 4.5-1.3 4.4-2.2 4.5-2.3 4.4-1.5 4.5-.5 4.4 .1 4.4 0 4.5-1.1 4.4-2.4 4.5-3.5 4.4-3.7 4.5-3 4.4-1.3 4.5 .5 4.4 2 4.4 2.3 4.5 2 4.4 1 4.5 0 4.4-.1 4.5 .5 4.4 1.7 4.5 3.1 4.4 3.7%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 38.7l4.4 3.1 4.5 1.8 4.4 0 4.5-1.8 4.4-2.7 4.5-2.6 4.4-1.8 4.5-.8 4.4 0 4.4-.2 4.5-1 4.4-2.3 4.5-3.3 4.4-3.5 4.5-2.6 4.4-.9 4.5 1 4.4 2.3 4.4 2.9 4.5 2.3 4.4 1.2 4.5 .4 4.4 0 4.5 .5 4.4 1.6 4.5 2.9 4.4 3.5 4.4 3.1 4.5 1.8 4.4 0 4.5-1.8 4.4-2.7 4.5-2.6 4.4-1.8 4.5-.8 4.4 0 4.4-.2 4.5-1 4.4-2.3 4.5-3.3 4.4-3.5 4.5-2.6 4.4-.9 4.5 1 4.4 2.3 4.4 2.9 4.5 2.3 4.4 1.2 4.5 .4 4.4 0 4.5 .5 4.4 1.6 4.5 2.9 4.4 3.5%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 42.6l4.4 2.8 4.5 1.3 4.4-.4 4.5-2.2 4.4-3.1 4.5-3 4.4-2.1 4.5-1 4.4-.1 4.4-.2 4.5-.9 4.4-2.1 4.5-3 4.4-3.1 4.5-2.2 4.4-.4 4.5 1.4 4.4 2.7 4.4 3.2 4.5 2.6 4.4 1.5 4.5 .5 4.4 0 4.5 .5 4.4 1.5 4.5 2.6 4.4 3.2 4.4 2.8 4.5 1.3 4.4-.4 4.5-2.2 4.4-3.1 4.5-3 4.4-2.1 4.5-1 4.4-.1 4.4-.2 4.5-.9 4.4-2.1 4.5-3 4.4-3.1 4.5-2.2 4.4-.4 4.5 1.4 4.4 2.7 4.4 3.2 4.5 2.6 4.4 1.5 4.5 .5 4.4 0 4.5 .5 4.4 1.5 4.5 2.6 4.4 3.2%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 46.2l4.4 2.3 4.5 .9 4.4-.9 4.5-2.5 4.4-3.5 4.5-3.3 4.4-2.3 4.5-1 4.4-.2 4.4 0 4.5-.8 4.4-1.8 4.5-2.7 4.4-2.7 4.5-1.7 4.4 0 4.5 1.8 4.4 3.1 4.4 3.5 4.5 2.9 4.4 1.7 4.5 .5 4.4 0 4.5 .3 4.4 1.3 4.5 2.3 4.4 2.8 4.4 2.3 4.5 .9 4.4-.9 4.5-2.5 4.4-3.5 4.5-3.3 4.4-2.3 4.5-1 4.4-.2 4.4 0 4.5-.8 4.4-1.8 4.5-2.7 4.4-2.7 4.5-1.7 4.4 0 4.5 1.8 4.4 3.1 4.4 3.5 4.5 2.9 4.4 1.7 4.5 .5 4.4 0 4.5 .3 4.4 1.3 4.5 2.3 4.4 2.8%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 49.4l4.4 1.9 4.5 .5 4.4-1.4 4.5-2.9 4.4-3.7 4.5-3.6 4.4-2.4 4.5-1 4.4-.1 4.4 .1 4.5-.4 4.4-1.5 4.5-2.3 4.4-2.2 4.5-1.3 4.4 .4 4.5 2.2 4.4 3.4 4.4 3.8 4.5 3 4.4 1.8 4.5 .4 4.4-.1 4.5 .1 4.4 .9 4.5 2 4.4 2.4 4.4 1.9 4.5 .5 4.4-1.4 4.5-2.9 4.4-3.7 4.5-3.6 4.4-2.4 4.5-1 4.4-.1 4.4 .1 4.5-.4 4.4-1.5 4.5-2.3 4.4-2.2 4.5-1.3 4.4 .4 4.5 2.2 4.4 3.4 4.4 3.8 4.5 3 4.4 1.8 4.5 .4 4.4-.1 4.5 .1 4.4 .9 4.5 2 4.4 2.4%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 52.1l4.4 1.5 4.5 .1 4.4-1.7 4.5-3.2 4.4-4 4.5-3.6 4.4-2.5 4.5-.9 4.4 .1 4.4 .4 4.5-.2 4.4-1 4.5-1.9 4.4-1.8 4.5-.9 4.4 .8 4.5 2.5 4.4 3.8 4.4 3.9 4.5 3.1 4.4 1.7 4.5 .4 4.4-.4 4.5-.2 4.4 .6 4.5 1.5 4.4 1.9 4.4 1.5 4.5 .1 4.4-1.7 4.5-3.2 4.4-4 4.5-3.6 4.4-2.5 4.5-.9 4.4 .1 4.4 .4 4.5-.2 4.4-1 4.5-1.9 4.4-1.8 4.5-.9 4.4 .8 4.5 2.5 4.4 3.8 4.4 3.9 4.5 3.1 4.4 1.7 4.5 .4 4.4-.4 4.5-.2 4.4 .6 4.5 1.5 4.4 1.9%22 stroke=%22%23f3d38a%22 stroke-opacity=%22.22%22/%3E%3Cpath d=%22M0 23.7l4.4-2.2 4.5-3.4 4.4-3.8 4.5-3.2 4.4-1.6 4.5 .3 4.4 1.7 4.5 2.4 4.4 2 4.4 1.1 4.5 .1 4.4-.1 4.5 .3 4.4 1.6 4.5 2.8 4.4 3.8 4.5 3.5 4.4 2.5 4.4 .7 4.5-1.1 4.4-2.2 4.5-2.3 4.4-1.6 4.5-.6 4.4 .2 4.5 0 4.4-.9 4.4-2.2 4.5-3.4 4.4-3.8 4.5-3.2 4.4-1.6 4.5 .3 4.4 1.7 4.5 2.4 4.4 2 4.4 1.1 4.5 .1 4.4-.1 4.5 .3 4.4 1.6 4.5 2.8 4.4 3.8 4.5 3.5 4.4 2.5 4.4 .7 4.5-1.1 4.4-2.2 4.5-2.3 4.4-1.6 4.5-.6 4.4 .2 4.5 0 4.4-.9%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 24.6l4.4-2.1 4.5-3.2 4.4-3.5 4.5-2.8 4.4-1.2 4.5 .7 4.4 2.1 4.5 2.8 4.4 2.4 4.4 1.4 4.5 .4 4.4 0 4.5 .4 4.4 1.5 4.5 2.7 4.4 3.5 4.5 3.3 4.4 2.1 4.4 .2 4.5-1.5 4.4-2.6 4.5-2.7 4.4-2 4.5-.8 4.4-.1 4.5-.1 4.4-.9 4.4-2.1 4.5-3.2 4.4-3.5 4.5-2.8 4.4-1.2 4.5 .7 4.4 2.1 4.5 2.8 4.4 2.4 4.4 1.4 4.5 .4 4.4 0 4.5 .4 4.4 1.5 4.5 2.7 4.4 3.5 4.5 3.3 4.4 2.1 4.4 .2 4.5-1.5 4.4-2.6 4.5-2.7 4.4-2 4.5-.8 4.4-.1 4.5-.1 4.4-.9%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 25.6l4.4-1.9 4.5-3 4.4-3.1 4.5-2.4 4.4-.8 4.5 1.1 4.4 2.6 4.5 3.2 4.4 2.7 4.4 1.7 4.5 .5 4.4 .1 4.5 .3 4.4 1.4 4.5 2.5 4.4 3.2 4.5 2.9 4.4 1.6 4.4-.1 4.5-2 4.4-3 4.5-3 4.4-2.3 4.5-1.1 4.4-.2 4.5-.1 4.4-.8 4.4-1.9 4.5-3 4.4-3.1 4.5-2.4 4.4-.8 4.5 1.1 4.4 2.6 4.5 3.2 4.4 2.7 4.4 1.7 4.5 .5 4.4 .1 4.5 .3 4.4 1.4 4.5 2.5 4.4 3.2 4.5 2.9 4.4 1.6 4.4-.1 4.5-2 4.4-3 4.5-3 4.4-2.3 4.5-1.1 4.4-.2 4.5-.1 4.4-.8%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 26.8l4.4-1.7 4.5-2.6 4.4-2.8 4.5-1.9 4.4-.4 4.5 1.6 4.4 3 4.5 3.5 4.4 2.9 4.4 1.9 4.5 .6 4.4 0 4.5 .3 4.4 1.1 4.5 2.2 4.4 2.8 4.5 2.5 4.4 1.2 4.4-.6 4.5-2.3 4.4-3.4 4.5-3.4 4.4-2.4 4.5-1.2 4.4-.3 4.5 0 4.4-.6 4.4-1.7 4.5-2.6 4.4-2.8 4.5-1.9 4.4-.4 4.5 1.6 4.4 3 4.5 3.5 4.4 2.9 4.4 1.9 4.5 .6 4.4 0 4.5 .3 4.4 1.1 4.5 2.2 4.4 2.8 4.5 2.5 4.4 1.2 4.4-.6 4.5-2.3 4.4-3.4 4.5-3.4 4.4-2.4 4.5-1.2 4.4-.3 4.5 0 4.4-.6%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 28.2l4.4-1.4 4.5-2.2 4.4-2.3 4.5-1.6 4.4 .1 4.5 2 4.4 3.3 4.5 3.8 4.4 3.1 4.4 2 4.5 .6 4.4-.1 4.5 0 4.4 .9 4.5 1.8 4.4 2.4 4.5 2.1 4.4 .7 4.4-1 4.5-2.7 4.4-3.7 4.5-3.6 4.4-2.6 4.5-1.2 4.4-.2 4.5 .2 4.4-.4 4.4-1.4 4.5-2.2 4.4-2.3 4.5-1.6 4.4 .1 4.5 2 4.4 3.3 4.5 3.8 4.4 3.1 4.4 2 4.5 .6 4.4-.1 4.5 0 4.4 .9 4.5 1.8 4.4 2.4 4.5 2.1 4.4 .7 4.4-1 4.5-2.7 4.4-3.7 4.5-3.6 4.4-2.6 4.5-1.2 4.4-.2 4.5 .2 4.4-.4%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 29.9l4.4-1 4.5-1.8 4.4-1.9 4.5-1.1 4.4 .5 4.5 2.3 4.4 3.6 4.5 3.9 4.4 3.3 4.4 1.9 4.5 .6 4.4-.3 4.5-.3 4.4 .5 4.5 1.4 4.4 2 4.5 1.6 4.4 .4 4.4-1.4 4.5-3.1 4.4-3.9 4.5-3.7 4.4-2.7 4.5-1.1 4.4-.1 4.5 .4 4.4 0 4.4-1 4.5-1.8 4.4-1.9 4.5-1.1 4.4 .5 4.5 2.3 4.4 3.6 4.5 3.9 4.4 3.3 4.4 1.9 4.5 .6 4.4-.3 4.5-.3 4.4 .5 4.5 1.4 4.4 2 4.5 1.6 4.4 .4 4.4-1.4 4.5-3.1 4.4-3.9 4.5-3.7 4.4-2.7 4.5-1.1 4.4-.1 4.5 .4 4.4 0%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 31.9l4.4-.5 4.5-1.4 4.4-1.5 4.5-.7 4.4 .9 4.5 2.6 4.4 3.8 4.5 4 4.4 3.3 4.4 1.8 4.5 .3 4.4-.5 4.5-.7 4.4 .1 4.5 1.1 4.4 1.5 4.5 1.2 4.4 0 4.4-1.8 4.5-3.3 4.4-4 4.5-3.8 4.4-2.6 4.5-1 4.4 .2 4.5 .7 4.4 .3 4.4-.5 4.5-1.4 4.4-1.5 4.5-.7 4.4 .9 4.5 2.6 4.4 3.8 4.5 4 4.4 3.3 4.4 1.8 4.5 .3 4.4-.5 4.5-.7 4.4 .1 4.5 1.1 4.4 1.5 4.5 1.2 4.4 0 4.4-1.8 4.5-3.3 4.4-4 4.5-3.8 4.4-2.6 4.5-1 4.4 .2 4.5 .7 4.4 .3%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 34.3l4.4-.1 4.5-.9 4.4-1.1 4.5-.3 4.4 1.1 4.5 2.8 4.4 3.9 4.5 4.1 4.4 3.2 4.4 1.6 4.5 .1 4.4-.9 4.5-1.1 4.4-.3 4.5 .6 4.4 1.1 4.5 .8 4.4-.3 4.4-2 4.5-3.5 4.4-4.1 4.5-3.8 4.4-2.4 4.5-.8 4.4 .5 4.5 1.1 4.4 .7 4.4-.1 4.5-.9 4.4-1.1 4.5-.3 4.4 1.1 4.5 2.8 4.4 3.9 4.5 4.1 4.4 3.2 4.4 1.6 4.5 .1 4.4-.9 4.5-1.1 4.4-.3 4.5 .6 4.4 1.1 4.5 .8 4.4-.3 4.4-2 4.5-3.5 4.4-4.1 4.5-3.8 4.4-2.4 4.5-.8 4.4 .5 4.5 1.1 4.4 .7%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 37.1l4.4 .4 4.5-.6 4.4-.7 4.5 0 4.4 1.4 4.5 2.9 4.4 3.9 4.5 4 4.4 3 4.4 1.4 4.5-.3 4.4-1.3 4.5-1.4 4.4-.8 4.5 .1 4.4 .7 4.5 .5 4.4-.6 4.4-2.1 4.5-3.6 4.4-4.1 4.5-3.6 4.4-2.2 4.5-.5 4.4 .9 4.5 1.5 4.4 1.1 4.4 .4 4.5-.6 4.4-.7 4.5 0 4.4 1.4 4.5 2.9 4.4 3.9 4.5 4 4.4 3 4.4 1.4 4.5-.3 4.4-1.3 4.5-1.4 4.4-.8 4.5 .1 4.4 .7 4.5 .5 4.4-.6 4.4-2.1 4.5-3.6 4.4-4.1 4.5-3.6 4.4-2.2 4.5-.5 4.4 .9 4.5 1.5 4.4 1.1%22 stroke=%22%237fe9ff%22 stroke-opacity=%22.10%22/%3E%3C/g%3E%3C/svg%3E");
    --tpn-pat-waves-visa: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 240 64%22 width=%22240%22 height=%2264%22%3E%3Cg fill=%22none%22 stroke-width=%22.45%22%3E%3Cpath d=%22M0 20.8l4.4 4 4.5 3 4.4 1.4 4.5-.2 4.4-1 4.5-.9 4.4-.3 4.5 .7 4.4 1.1 4.4 .7 4.5-.6 4.4-2.2 4.5-3.6 4.4-4.2 4.5-3.6 4.4-2.2 4.5-.6 4.4 .7 4.4 1.1 4.5 .7 4.4-.3 4.5-.9 4.4-1 4.5-.2 4.4 1.4 4.5 3 4.4 4 4.4 4 4.5 3 4.4 1.4 4.5-.2 4.4-1 4.5-.9 4.4-.3 4.5 .7 4.4 1.1 4.4 .7 4.5-.6 4.4-2.2 4.5-3.6 4.4-4.2 4.5-3.6 4.4-2.2 4.5-.6 4.4 .7 4.4 1.1 4.5 .7 4.4-.3 4.5-.9 4.4-1 4.5-.2 4.4 1.4 4.5 3 4.4 4%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 25.5l4.4 3.9 4.5 2.8 4.4 1.1 4.5-.5 4.4-1.4 4.5-1.4 4.4-.7 4.5 .3 4.4 .7 4.4 .3 4.5-.8 4.4-2.4 4.5-3.6 4.4-4.1 4.5-3.5 4.4-2 4.5-.2 4.4 1 4.4 1.6 4.5 1.1 4.4 .2 4.5-.6 4.4-.7 4.5 .2 4.4 1.6 4.5 3.1 4.4 4 4.4 3.9 4.5 2.8 4.4 1.1 4.5-.5 4.4-1.4 4.5-1.4 4.4-.7 4.5 .3 4.4 .7 4.4 .3 4.5-.8 4.4-2.4 4.5-3.6 4.4-4.1 4.5-3.5 4.4-2 4.5-.2 4.4 1 4.4 1.6 4.5 1.1 4.4 .2 4.5-.6 4.4-.7 4.5 .2 4.4 1.6 4.5 3.1 4.4 4%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 30.1l4.4 3.7 4.5 2.5 4.4 .8 4.5-.9 4.4-1.8 4.5-1.9 4.4-1.1 4.5-.1 4.4 .4 4.4 .1 4.5-1 4.4-2.4 4.5-3.7 4.4-3.9 4.5-3.3 4.4-1.6 4.5 .1 4.4 1.4 4.4 2 4.5 1.5 4.4 .6 4.5-.2 4.4-.3 4.5 .3 4.4 1.7 4.5 3.1 4.4 4 4.4 3.7 4.5 2.5 4.4 .8 4.5-.9 4.4-1.8 4.5-1.9 4.4-1.1 4.5-.1 4.4 .4 4.4 .1 4.5-1 4.4-2.4 4.5-3.7 4.4-3.9 4.5-3.3 4.4-1.6 4.5 .1 4.4 1.4 4.4 2 4.5 1.5 4.4 .6 4.5-.2 4.4-.3 4.5 .3 4.4 1.7 4.5 3.1 4.4 4%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 34.5l4.4 3.5 4.5 2.2 4.4 .3 4.5-1.3 4.4-2.2 4.5-2.3 4.4-1.5 4.5-.5 4.4 .1 4.4 0 4.5-1.1 4.4-2.4 4.5-3.5 4.4-3.7 4.5-3 4.4-1.3 4.5 .5 4.4 2 4.4 2.3 4.5 2 4.4 1 4.5 0 4.4-.1 4.5 .5 4.4 1.7 4.5 3.1 4.4 3.7 4.4 3.5 4.5 2.2 4.4 .3 4.5-1.3 4.4-2.2 4.5-2.3 4.4-1.5 4.5-.5 4.4 .1 4.4 0 4.5-1.1 4.4-2.4 4.5-3.5 4.4-3.7 4.5-3 4.4-1.3 4.5 .5 4.4 2 4.4 2.3 4.5 2 4.4 1 4.5 0 4.4-.1 4.5 .5 4.4 1.7 4.5 3.1 4.4 3.7%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 38.7l4.4 3.1 4.5 1.8 4.4 0 4.5-1.8 4.4-2.7 4.5-2.6 4.4-1.8 4.5-.8 4.4 0 4.4-.2 4.5-1 4.4-2.3 4.5-3.3 4.4-3.5 4.5-2.6 4.4-.9 4.5 1 4.4 2.3 4.4 2.9 4.5 2.3 4.4 1.2 4.5 .4 4.4 0 4.5 .5 4.4 1.6 4.5 2.9 4.4 3.5 4.4 3.1 4.5 1.8 4.4 0 4.5-1.8 4.4-2.7 4.5-2.6 4.4-1.8 4.5-.8 4.4 0 4.4-.2 4.5-1 4.4-2.3 4.5-3.3 4.4-3.5 4.5-2.6 4.4-.9 4.5 1 4.4 2.3 4.4 2.9 4.5 2.3 4.4 1.2 4.5 .4 4.4 0 4.5 .5 4.4 1.6 4.5 2.9 4.4 3.5%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 42.6l4.4 2.8 4.5 1.3 4.4-.4 4.5-2.2 4.4-3.1 4.5-3 4.4-2.1 4.5-1 4.4-.1 4.4-.2 4.5-.9 4.4-2.1 4.5-3 4.4-3.1 4.5-2.2 4.4-.4 4.5 1.4 4.4 2.7 4.4 3.2 4.5 2.6 4.4 1.5 4.5 .5 4.4 0 4.5 .5 4.4 1.5 4.5 2.6 4.4 3.2 4.4 2.8 4.5 1.3 4.4-.4 4.5-2.2 4.4-3.1 4.5-3 4.4-2.1 4.5-1 4.4-.1 4.4-.2 4.5-.9 4.4-2.1 4.5-3 4.4-3.1 4.5-2.2 4.4-.4 4.5 1.4 4.4 2.7 4.4 3.2 4.5 2.6 4.4 1.5 4.5 .5 4.4 0 4.5 .5 4.4 1.5 4.5 2.6 4.4 3.2%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 46.2l4.4 2.3 4.5 .9 4.4-.9 4.5-2.5 4.4-3.5 4.5-3.3 4.4-2.3 4.5-1 4.4-.2 4.4 0 4.5-.8 4.4-1.8 4.5-2.7 4.4-2.7 4.5-1.7 4.4 0 4.5 1.8 4.4 3.1 4.4 3.5 4.5 2.9 4.4 1.7 4.5 .5 4.4 0 4.5 .3 4.4 1.3 4.5 2.3 4.4 2.8 4.4 2.3 4.5 .9 4.4-.9 4.5-2.5 4.4-3.5 4.5-3.3 4.4-2.3 4.5-1 4.4-.2 4.4 0 4.5-.8 4.4-1.8 4.5-2.7 4.4-2.7 4.5-1.7 4.4 0 4.5 1.8 4.4 3.1 4.4 3.5 4.5 2.9 4.4 1.7 4.5 .5 4.4 0 4.5 .3 4.4 1.3 4.5 2.3 4.4 2.8%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 49.4l4.4 1.9 4.5 .5 4.4-1.4 4.5-2.9 4.4-3.7 4.5-3.6 4.4-2.4 4.5-1 4.4-.1 4.4 .1 4.5-.4 4.4-1.5 4.5-2.3 4.4-2.2 4.5-1.3 4.4 .4 4.5 2.2 4.4 3.4 4.4 3.8 4.5 3 4.4 1.8 4.5 .4 4.4-.1 4.5 .1 4.4 .9 4.5 2 4.4 2.4 4.4 1.9 4.5 .5 4.4-1.4 4.5-2.9 4.4-3.7 4.5-3.6 4.4-2.4 4.5-1 4.4-.1 4.4 .1 4.5-.4 4.4-1.5 4.5-2.3 4.4-2.2 4.5-1.3 4.4 .4 4.5 2.2 4.4 3.4 4.4 3.8 4.5 3 4.4 1.8 4.5 .4 4.4-.1 4.5 .1 4.4 .9 4.5 2 4.4 2.4%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 52.1l4.4 1.5 4.5 .1 4.4-1.7 4.5-3.2 4.4-4 4.5-3.6 4.4-2.5 4.5-.9 4.4 .1 4.4 .4 4.5-.2 4.4-1 4.5-1.9 4.4-1.8 4.5-.9 4.4 .8 4.5 2.5 4.4 3.8 4.4 3.9 4.5 3.1 4.4 1.7 4.5 .4 4.4-.4 4.5-.2 4.4 .6 4.5 1.5 4.4 1.9 4.4 1.5 4.5 .1 4.4-1.7 4.5-3.2 4.4-4 4.5-3.6 4.4-2.5 4.5-.9 4.4 .1 4.4 .4 4.5-.2 4.4-1 4.5-1.9 4.4-1.8 4.5-.9 4.4 .8 4.5 2.5 4.4 3.8 4.4 3.9 4.5 3.1 4.4 1.7 4.5 .4 4.4-.4 4.5-.2 4.4 .6 4.5 1.5 4.4 1.9%22 stroke=%22%232a5aa8%22 stroke-opacity=%22.13%22/%3E%3Cpath d=%22M0 23.7l4.4-2.2 4.5-3.4 4.4-3.8 4.5-3.2 4.4-1.6 4.5 .3 4.4 1.7 4.5 2.4 4.4 2 4.4 1.1 4.5 .1 4.4-.1 4.5 .3 4.4 1.6 4.5 2.8 4.4 3.8 4.5 3.5 4.4 2.5 4.4 .7 4.5-1.1 4.4-2.2 4.5-2.3 4.4-1.6 4.5-.6 4.4 .2 4.5 0 4.4-.9 4.4-2.2 4.5-3.4 4.4-3.8 4.5-3.2 4.4-1.6 4.5 .3 4.4 1.7 4.5 2.4 4.4 2 4.4 1.1 4.5 .1 4.4-.1 4.5 .3 4.4 1.6 4.5 2.8 4.4 3.8 4.5 3.5 4.4 2.5 4.4 .7 4.5-1.1 4.4-2.2 4.5-2.3 4.4-1.6 4.5-.6 4.4 .2 4.5 0 4.4-.9%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 24.6l4.4-2.1 4.5-3.2 4.4-3.5 4.5-2.8 4.4-1.2 4.5 .7 4.4 2.1 4.5 2.8 4.4 2.4 4.4 1.4 4.5 .4 4.4 0 4.5 .4 4.4 1.5 4.5 2.7 4.4 3.5 4.5 3.3 4.4 2.1 4.4 .2 4.5-1.5 4.4-2.6 4.5-2.7 4.4-2 4.5-.8 4.4-.1 4.5-.1 4.4-.9 4.4-2.1 4.5-3.2 4.4-3.5 4.5-2.8 4.4-1.2 4.5 .7 4.4 2.1 4.5 2.8 4.4 2.4 4.4 1.4 4.5 .4 4.4 0 4.5 .4 4.4 1.5 4.5 2.7 4.4 3.5 4.5 3.3 4.4 2.1 4.4 .2 4.5-1.5 4.4-2.6 4.5-2.7 4.4-2 4.5-.8 4.4-.1 4.5-.1 4.4-.9%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 25.6l4.4-1.9 4.5-3 4.4-3.1 4.5-2.4 4.4-.8 4.5 1.1 4.4 2.6 4.5 3.2 4.4 2.7 4.4 1.7 4.5 .5 4.4 .1 4.5 .3 4.4 1.4 4.5 2.5 4.4 3.2 4.5 2.9 4.4 1.6 4.4-.1 4.5-2 4.4-3 4.5-3 4.4-2.3 4.5-1.1 4.4-.2 4.5-.1 4.4-.8 4.4-1.9 4.5-3 4.4-3.1 4.5-2.4 4.4-.8 4.5 1.1 4.4 2.6 4.5 3.2 4.4 2.7 4.4 1.7 4.5 .5 4.4 .1 4.5 .3 4.4 1.4 4.5 2.5 4.4 3.2 4.5 2.9 4.4 1.6 4.4-.1 4.5-2 4.4-3 4.5-3 4.4-2.3 4.5-1.1 4.4-.2 4.5-.1 4.4-.8%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 26.8l4.4-1.7 4.5-2.6 4.4-2.8 4.5-1.9 4.4-.4 4.5 1.6 4.4 3 4.5 3.5 4.4 2.9 4.4 1.9 4.5 .6 4.4 0 4.5 .3 4.4 1.1 4.5 2.2 4.4 2.8 4.5 2.5 4.4 1.2 4.4-.6 4.5-2.3 4.4-3.4 4.5-3.4 4.4-2.4 4.5-1.2 4.4-.3 4.5 0 4.4-.6 4.4-1.7 4.5-2.6 4.4-2.8 4.5-1.9 4.4-.4 4.5 1.6 4.4 3 4.5 3.5 4.4 2.9 4.4 1.9 4.5 .6 4.4 0 4.5 .3 4.4 1.1 4.5 2.2 4.4 2.8 4.5 2.5 4.4 1.2 4.4-.6 4.5-2.3 4.4-3.4 4.5-3.4 4.4-2.4 4.5-1.2 4.4-.3 4.5 0 4.4-.6%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 28.2l4.4-1.4 4.5-2.2 4.4-2.3 4.5-1.6 4.4 .1 4.5 2 4.4 3.3 4.5 3.8 4.4 3.1 4.4 2 4.5 .6 4.4-.1 4.5 0 4.4 .9 4.5 1.8 4.4 2.4 4.5 2.1 4.4 .7 4.4-1 4.5-2.7 4.4-3.7 4.5-3.6 4.4-2.6 4.5-1.2 4.4-.2 4.5 .2 4.4-.4 4.4-1.4 4.5-2.2 4.4-2.3 4.5-1.6 4.4 .1 4.5 2 4.4 3.3 4.5 3.8 4.4 3.1 4.4 2 4.5 .6 4.4-.1 4.5 0 4.4 .9 4.5 1.8 4.4 2.4 4.5 2.1 4.4 .7 4.4-1 4.5-2.7 4.4-3.7 4.5-3.6 4.4-2.6 4.5-1.2 4.4-.2 4.5 .2 4.4-.4%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 29.9l4.4-1 4.5-1.8 4.4-1.9 4.5-1.1 4.4 .5 4.5 2.3 4.4 3.6 4.5 3.9 4.4 3.3 4.4 1.9 4.5 .6 4.4-.3 4.5-.3 4.4 .5 4.5 1.4 4.4 2 4.5 1.6 4.4 .4 4.4-1.4 4.5-3.1 4.4-3.9 4.5-3.7 4.4-2.7 4.5-1.1 4.4-.1 4.5 .4 4.4 0 4.4-1 4.5-1.8 4.4-1.9 4.5-1.1 4.4 .5 4.5 2.3 4.4 3.6 4.5 3.9 4.4 3.3 4.4 1.9 4.5 .6 4.4-.3 4.5-.3 4.4 .5 4.5 1.4 4.4 2 4.5 1.6 4.4 .4 4.4-1.4 4.5-3.1 4.4-3.9 4.5-3.7 4.4-2.7 4.5-1.1 4.4-.1 4.5 .4 4.4 0%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 31.9l4.4-.5 4.5-1.4 4.4-1.5 4.5-.7 4.4 .9 4.5 2.6 4.4 3.8 4.5 4 4.4 3.3 4.4 1.8 4.5 .3 4.4-.5 4.5-.7 4.4 .1 4.5 1.1 4.4 1.5 4.5 1.2 4.4 0 4.4-1.8 4.5-3.3 4.4-4 4.5-3.8 4.4-2.6 4.5-1 4.4 .2 4.5 .7 4.4 .3 4.4-.5 4.5-1.4 4.4-1.5 4.5-.7 4.4 .9 4.5 2.6 4.4 3.8 4.5 4 4.4 3.3 4.4 1.8 4.5 .3 4.4-.5 4.5-.7 4.4 .1 4.5 1.1 4.4 1.5 4.5 1.2 4.4 0 4.4-1.8 4.5-3.3 4.4-4 4.5-3.8 4.4-2.6 4.5-1 4.4 .2 4.5 .7 4.4 .3%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 34.3l4.4-.1 4.5-.9 4.4-1.1 4.5-.3 4.4 1.1 4.5 2.8 4.4 3.9 4.5 4.1 4.4 3.2 4.4 1.6 4.5 .1 4.4-.9 4.5-1.1 4.4-.3 4.5 .6 4.4 1.1 4.5 .8 4.4-.3 4.4-2 4.5-3.5 4.4-4.1 4.5-3.8 4.4-2.4 4.5-.8 4.4 .5 4.5 1.1 4.4 .7 4.4-.1 4.5-.9 4.4-1.1 4.5-.3 4.4 1.1 4.5 2.8 4.4 3.9 4.5 4.1 4.4 3.2 4.4 1.6 4.5 .1 4.4-.9 4.5-1.1 4.4-.3 4.5 .6 4.4 1.1 4.5 .8 4.4-.3 4.4-2 4.5-3.5 4.4-4.1 4.5-3.8 4.4-2.4 4.5-.8 4.4 .5 4.5 1.1 4.4 .7%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3Cpath d=%22M0 37.1l4.4 .4 4.5-.6 4.4-.7 4.5 0 4.4 1.4 4.5 2.9 4.4 3.9 4.5 4 4.4 3 4.4 1.4 4.5-.3 4.4-1.3 4.5-1.4 4.4-.8 4.5 .1 4.4 .7 4.5 .5 4.4-.6 4.4-2.1 4.5-3.6 4.4-4.1 4.5-3.6 4.4-2.2 4.5-.5 4.4 .9 4.5 1.5 4.4 1.1 4.4 .4 4.5-.6 4.4-.7 4.5 0 4.4 1.4 4.5 2.9 4.4 3.9 4.5 4 4.4 3 4.4 1.4 4.5-.3 4.4-1.3 4.5-1.4 4.4-.8 4.5 .1 4.4 .7 4.5 .5 4.4-.6 4.4-2.1 4.5-3.6 4.4-4.1 4.5-3.6 4.4-2.2 4.5-.5 4.4 .9 4.5 1.5 4.4 1.1%22 stroke=%22%23c2456e%22 stroke-opacity=%22.10%22/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- passport: the data page */

.tp-nation .tpn-passport {
    position: relative;
    display: block;
    isolation: isolate;
    --tpn-pp-x: clamp(1.25rem, 3.4vw, 2.6rem);
    padding: clamp(1.4rem, 3vw, 2.2rem) var(--tpn-pp-x) 0;
    border-radius: 18px;
    overflow: hidden;
    container: tpn-passport / inline-size;
    color: var(--tpn-ivory);
    background:
        var(--tpn-pat-lattice-gold) 0 0 / 18px 18px,
        linear-gradient(112deg, rgba(127, 233, 255, 0) 34%, rgba(127, 233, 255, 0.06) 41%, rgba(255, 143, 230, 0.06) 47%, rgba(243, 211, 138, 0.07) 53%, rgba(201, 255, 134, 0) 60%),
        radial-gradient(70% 110% at 88% 18%, rgba(35, 78, 128, 0.6) 0%, rgba(35, 78, 128, 0) 62%),
        radial-gradient(60% 80% at 8% 100%, rgba(231, 182, 75, 0.1) 0%, rgba(231, 182, 75, 0) 60%),
        linear-gradient(162deg, #13294a 0%, #0c1d38 48%, #081428 100%);
    border: 1px solid rgba(243, 211, 138, 0.55);
    box-shadow: 0 34px 80px rgba(2, 6, 16, 0.6), 0 2px 0 rgba(255, 244, 207, 0.08) inset;
}

/* two foil hairlines: the printed frame */
.tp-nation .tpn-passport::before,
.tp-nation .tpn-passport::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 12px;
    background: none;
}
.tp-nation .tpn-passport::before { inset: 11px; border: 1px solid rgba(243, 211, 138, 0.55); }
.tp-nation .tpn-passport::after { inset: 15px; border: 1px solid rgba(243, 211, 138, 0.2); border-radius: 9px; }

.tp-nation .tpn-passport > * { position: relative; z-index: 1; }

/* microtext running round the frame: kicker + Citizen ID, 5.5 px */
.tp-nation .tpn-passport > .tpn-passport__micro {
    position: absolute;
    left: 22px;
    right: 22px;
    height: 11px;
    overflow: hidden;
    white-space: nowrap;
    font: 700 5.5px/11px var(--tpn-font);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243, 211, 138, 0.62);
    user-select: none;
}
.tp-nation .tpn-passport__micro--top { top: 0; }
.tp-nation .tpn-passport__micro--bottom { bottom: 0; }

.tp-nation .tpn-passport > .tpn-passport__rosette {
    position: absolute;
    z-index: 0;
    top: 50%;
    inset-inline-end: -150px;
    width: 560px;
    height: 560px;
    margin-top: -300px;
    background: var(--tpn-pat-rosette-gold) center / contain no-repeat;
    opacity: 0.85;
    pointer-events: none;
}

.tp-nation .tpn-passport__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tp-nation .tpn-passport__kicker {
    flex: 0 1 auto;
    margin: 0;
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-passport__foil {
    flex: 1 1 3rem;
    min-width: 2rem;
    height: 2px;
    border-radius: 2px;
    background: var(--tpn-foil);
    opacity: 0.85;
}

.tp-nation .tpn-passport__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "portrait who ghost"
        "portrait fields ghost";
    align-items: end;
    gap: 0.9rem clamp(1.2rem, 3vw, 2.4rem);
    margin-top: clamp(1rem, 2.4vw, 1.6rem);
}

.tp-nation .tpn-passport__portrait {
    grid-area: portrait;
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(132px, 15vw, 168px);
    aspect-ratio: 4 / 5;
    align-self: stretch;
    max-height: 230px;
    border-radius: 12px;
    background:
        linear-gradient(rgba(14, 35, 66, 0.45), rgba(14, 35, 66, 0.45)),
        var(--tpn-pat-rosette-gold) center / 150% auto no-repeat,
        radial-gradient(90% 70% at 50% 35%, #1b3d66 0%, #0e2342 60%, #0a1830 100%);
    border: 1px solid rgba(243, 211, 138, 0.6);
    box-shadow: inset 0 0 0 4px rgba(8, 20, 40, 0.75), inset 0 0 0 5px rgba(243, 211, 138, 0.22), 0 10px 26px rgba(2, 6, 16, 0.45);
}

.tp-nation .tpn-passport__portrait .tpn-passport__emblem {
    display: block;
    width: 82%;
    height: auto;
    aspect-ratio: 1;
}

/* holographic laminate patch over the portrait corner */
.tp-nation .tpn-passport__holo {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0 0.6px, rgba(255, 255, 255, 0) 0.6px 3.4px),
        conic-gradient(from 210deg, rgba(127, 233, 255, 0.7), rgba(255, 143, 230, 0.6), rgba(243, 211, 138, 0.75), rgba(201, 255, 134, 0.55), rgba(127, 233, 255, 0.7));
    mix-blend-mode: screen;
    opacity: 0.45;
    border: 1px solid rgba(243, 211, 138, 0.6);
}

.tp-nation .tpn-passport__who { grid-area: who; min-width: 0; }

.tp-nation .tpn-passport__label,
.tp-nation .tpn-passport__fields dt {
    margin: 0 0 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(243, 211, 138, 0.86);
}

.tp-nation .tpn-passport__name {
    margin: 0;
    font-family: var(--tpn-serif);
    font-size: clamp(1.6rem, 4.3cqi, 3rem);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--tpn-ivory);
    overflow-wrap: break-word;
    container-type: inline-size;
}

/* The name is <span>NationName.Breakable(name)</span>: a <wbr> after every '_', '-' and '.', so handles wrap at their
   separators. --tpn-len (NationName.LongestRun) is the longest piece between break points; the name shrinks until
   that piece fits the name column on one line (0.62 em per character is an upper bound for Georgia incl. capitals
   and umlauts), never below 1.05rem. Only a single piece longer than about 20 characters on a phone still falls
   back to overflow-wrap. */
.tp-nation .tpn-passport__name > span {
    display: block;
    font-size: max(1.05rem, min(1em, calc(100cqi / (var(--tpn-len, 12) * 0.62))));
}

.tp-nation .tpn-passport__fields {
    grid-area: fields;
    /* a 2 x 2 data block: ID | Status, Citizen since | Passport issued */
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    gap: 0.95rem clamp(1.8rem, 4.5cqi, 3.6rem);
    margin: 0.4rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(243, 211, 138, 0.28);
}

.tp-nation .tpn-field { min-width: 0; }
.tp-nation .tpn-passport__chips .tpn-status { white-space: nowrap; }

.tp-nation .tpn-passport__fields dd {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tpn-ivory);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.tp-nation .tpn-passport__fields .tpn-passport__id {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: var(--tpn-mono);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--tpn-cyan);
    unicode-bidi: isolate;
    text-align: start;
    white-space: nowrap;
}

.tp-nation .tpn-passport .tpn-status {
    padding: 0.2rem 0.6rem 0.2rem 0.5rem;
    font-size: max(0.7rem, 11px);
    letter-spacing: 0.12em;
    vertical-align: 0.1em;
}
.tp-nation .tpn-passport__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.45rem; }
.tp-nation .tpn-passport .tpn-status--founding {
    color: #2a1a02;
    background: linear-gradient(180deg, #fff0bf 0%, #f0c865 55%, #d79f35 100%);
    box-shadow: inset 0 -1px 0 rgba(90, 59, 14, 0.4);
}
.tp-nation .tpn-passport .tpn-status--founding::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.tp-nation .tpn-passport .tpn-status::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

/* ghost image: the crest again, faint, through a line screen */
.tp-nation .tpn-passport__ghost {
    grid-area: ghost;
    position: relative;
    align-self: center;
    width: clamp(110px, 12vw, 150px);
    opacity: 0.34;
}
.tp-nation .tpn-passport__ghost::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(11, 27, 51, 0.8) 0 1px, rgba(11, 27, 51, 0) 1px 3px);
}
.tp-nation .tpn-passport__ghost-emblem { display: block; width: 100%; height: auto; aspect-ratio: 1; }

.tp-nation .tpn-passport__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem 1.6rem;
    margin: clamp(1.2rem, 2.6vw, 1.7rem) calc(16px - var(--tpn-pp-x)) 0;
    padding: 0.8rem calc(var(--tpn-pp-x) - 16px) 0.75rem;
    background: linear-gradient(180deg, rgba(8, 19, 38, 0.93), rgba(7, 16, 32, 0.96));
    border-top: 1px solid rgba(243, 211, 138, 0.3);
}

.tp-nation .tpn-passport__dateline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.8rem;
    margin: 0;
    font-size: max(0.72rem, 11px);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-passport__dateline span + span::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-inline-end: 0.8rem;
    vertical-align: 0.18em;
    background: var(--tpn-gold);
    transform: rotate(45deg);
}

.tp-nation .tpn-passport__disclaimer {
    margin: 0;
    font-size: max(0.76rem, 11px);
    font-style: italic;
    color: rgba(252, 247, 239, 0.86);
}

/* machine-readable zone */
.tp-nation .tpn-passport__mrz {
    container-type: inline-size;
    display: block;
    margin: 0 calc(16px - var(--tpn-pp-x)) 16px;
    padding: 0.8rem calc(var(--tpn-pp-x) - 16px) 1rem;
    background:
        var(--tpn-pat-waves-gold) 0 50% / 240px 64px repeat-x,
        linear-gradient(180deg, rgba(5, 12, 26, 0.82), rgba(4, 10, 22, 0.9));
    border-top: 1px solid rgba(243, 211, 138, 0.3);
    text-align: left;
}

.tp-nation .tpn-passport__mrz span {
    display: block;
    overflow: hidden;
    white-space: pre;
    font-family: var(--tpn-mono);
    font-size: clamp(11px, calc(100cqi / 44 / 0.62), 17px);
    letter-spacing: clamp(0.06em, calc((100cqi - 44 * 0.6em) / 44), 0.62em);
    line-height: 1.55;
    font-weight: 600;
    color: rgba(252, 247, 239, 0.72);
}

/* ---------------------------------------------------------------- stats row */

.tp-nation .tpn-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.tp-nation .tpn-stat {
    min-width: 0;
    padding: 0.95rem 1rem 0.9rem;
    border: 1px solid var(--tpn-line);
    border-top-color: rgba(243, 211, 138, 0.4);
    border-radius: var(--tpn-radius-sm);
    background: linear-gradient(180deg, rgba(252, 247, 239, 0.06), rgba(252, 247, 239, 0.025));
}

.tp-nation .tpn-stat__value {
    display: flex;
    align-items: flex-end;
    min-height: calc(clamp(1.9rem, 3vw, 2.5rem) * 1.05);
    font-size: clamp(1.5rem, 2.3vw, 2rem);
    line-height: 1.05;
    font-weight: 800;
    color: var(--tpn-ivory);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.tp-nation .tpn-stat__value--hero {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    background: linear-gradient(180deg, #fff8e6 0%, #f3d38a 55%, #d9a441 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tp-nation .tpn-stat__value--text {
    font-size: 1.1rem;
    line-height: 1.25;
}

.tp-nation .tpn-stat__label {
    display: block;
    margin-top: 0.4rem;
    font-size: max(0.7rem, 11px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
}

/* ---------------------------------------------------------------- the visa page (Your history) */

.tp-nation .tpn-card.tpn-visa {
    position: relative;
    padding: 1.5rem 1.4rem 1.6rem;
    border: 1px solid #d9c9a4;
    border-radius: var(--tpn-radius);
    color: #0b1b33;
    background:
        var(--tpn-pat-waves-visa) 0 -6px / 240px 64px repeat-x,
        var(--tpn-pat-waves-visa) 0 calc(100% + 6px) / 240px 64px repeat-x,
        var(--tpn-pat-rosette-ink) 50% 56% / min(64%, 330px) auto no-repeat,
        var(--tpn-pat-lattice-visa) 0 0 / 22px 22px,
        linear-gradient(180deg, #faf4e6 0%, var(--tpn-cream) 100%);
    box-shadow: inset 0 0 0 7px rgba(247, 240, 224, 0.9), inset 0 0 0 8px rgba(31, 58, 134, 0.16), 0 18px 40px rgba(2, 6, 16, 0.35);
}

.tp-nation .tpn-visa .tpn-card__title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.2rem;
    font-size: 0.8rem;
    letter-spacing: 0.24em;
    color: #0b1b33;
}
.tp-nation .tpn-visa .tpn-card__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(31, 58, 134, 0.35), rgba(31, 58, 134, 0));
}
.tp-nation[dir="rtl"] .tpn-visa .tpn-card__title::after,
.tp-nation [dir="rtl"] .tpn-visa .tpn-card__title::after {
    background: linear-gradient(270deg, rgba(31, 58, 134, 0.35), rgba(31, 58, 134, 0));
}

/* ---------------------------------------------------------------- stamps */

/* Flex + centred wrap: a short last row sits in the middle instead of hanging at the start. */
.tp-nation .tpn-stamps {
    --tpn-stamp-w: 9.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 1.9rem;
    margin: 0;
    padding: 0.2rem 0 0.4rem;
    list-style: none;
}

/* Lettering: the partial passes the longest word's length as --tpn-len. The title is sized so that word fits on
   one line (0.8 em per capital is a safe upper bound for bold caps incl. umlauts), never below 9.5 px; when it
   would need less, the stamp itself gets wider instead. */
.tp-nation .tpn-stamps .tpn-stamp {
    --r: -3deg;
    --j: 0deg;
    --tpn-fs-min: 9.5px;
    --tpn-fs-max: 11.5px;
    --tpn-k: 0.8;
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: max(var(--tpn-stamp-w), calc(var(--tpn-len, 10) * var(--tpn-k) * var(--tpn-fs-min) + var(--tpn-pad-x, 28px)));
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    text-align: center;
    container-type: inline-size;
    transform: none;
    rotate: calc(var(--r) + var(--j));
    animation: tpn-stamp-press 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

@keyframes tpn-stamp-press { from { opacity: 0; scale: 1.3; } to { opacity: 1; scale: 1; } }

.tp-nation .tpn-stamps .tpn-stamp--founding { --r: -4deg; }
.tp-nation .tpn-stamps .tpn-stamp--voted { --r: 3deg; }
.tp-nation .tpn-stamps .tpn-stamp--issued { --r: -5deg; }
.tp-nation .tpn-stamps .tpn-stamp--restored { --r: 4deg; }
.tp-nation .tpn-stamps .tpn-stamp:nth-child(3n + 2) { --j: 4deg; }
.tp-nation .tpn-stamps .tpn-stamp:nth-child(4n + 3) { --j: -5deg; }
.tp-nation .tpn-stamps .tpn-stamp:nth-child(5n + 4) { --j: 2deg; }
.tp-nation .tpn-stamps .tpn-stamp:nth-child(2) { animation-delay: 0.06s; }
.tp-nation .tpn-stamps .tpn-stamp:nth-child(3) { animation-delay: 0.12s; }
.tp-nation .tpn-stamps .tpn-stamp:nth-child(n + 4) { animation-delay: 0.18s; }

.tp-nation .tpn-stamp__art,
.tp-nation .tpn-stamp__rim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* rim legend: 10.8 user units = 9.2 px on the smallest (136 px) coin; the voted rim is scaled .915, so 11.8 */
.tp-nation .tpn-stamp__rim text {
    font: 800 10.8px/1 var(--tpn-font);
    letter-spacing: 1px;
    fill: #5a3b0a;
    fill-opacity: 0.72;
}
.tp-nation .tpn-stamp--voted .tpn-stamp__rim { scale: 0.915; }
.tp-nation .tpn-stamp--voted .tpn-stamp__rim text { font-size: 11.8px; fill: #394150; }
.tp-nation .tpn-stamp--issued .tpn-stamp__rim,
.tp-nation .tpn-stamp--restored .tpn-stamp__rim { display: none; }

.tp-nation .tpn-stamps .tpn-stamp__title {
    display: block;
    font-size: clamp(var(--tpn-fs-min), calc(var(--tpn-avail) / (var(--tpn-len, 10) * var(--tpn-k))), var(--tpn-fs-max));
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    -webkit-hyphens: manual;
    hyphens: manual;
    overflow-wrap: anywhere;
}

.tp-nation .tpn-stamps .tpn-stamp__date {
    display: block;
    margin: 0;
    font-family: var(--tpn-mono);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    opacity: 1;
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}
.tp-nation .tpn-stamps .tpn-stamp__date:empty { display: none; }

/* "Voted · Week 12": two halves and the dot. --tpn-line is an upper bound for the whole title on one line
   (--tpn-tlen characters at --tpn-k em); --tpn-inner is the width the title has (set per kind below).
   Fits: the dot is 1.1em wide and both halves share the line. Does not fit: the dot collapses to 0 and the second
   half takes a full line, so the ribbon reads "ABGESTIMMT / WOCHE 12" - never a line that ends in the dot. */
.tp-nation .tpn-stamps .tpn-stamp__title--split {
    --tpn-line: calc(var(--tpn-tlen, 20) * var(--tpn-k) * 1em);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}
.tp-nation .tpn-stamps .tpn-stamp__half { min-width: 0; }
.tp-nation .tpn-stamps .tpn-stamp__sep {
    display: block;
    overflow: hidden;
    width: clamp(0px, calc((var(--tpn-inner) - var(--tpn-line)) * 1000), 1.1em);
    text-align: center;
    white-space: nowrap;
}
.tp-nation .tpn-stamps .tpn-stamp__sep + .tpn-stamp__half {
    min-width: clamp(0px, calc((var(--tpn-line) - var(--tpn-inner)) * 1000), 100%);
}

/* ---- coins (founding, voted): a navy ribbon across the token and a credit-counter date window */
.tp-nation .tpn-stamps .tpn-stamp--founding,
.tp-nation .tpn-stamps .tpn-stamp--voted {
    /* the ribbon is 108 % of the coin, minus its notches and padding */
    --tpn-avail: calc(108cqi - 30px);
    /* ribbon content box: 108 % of the coin minus the ribbon's padding (0.95em + 6px a side) */
    --tpn-inner: calc(108cqi - 1.9em - 12px);
    width: max(var(--tpn-stamp-w), calc((var(--tpn-len, 10) * var(--tpn-k) * var(--tpn-fs-min) + 30px) / 1.08));
    aspect-ratio: 1;
}

.tp-nation .tpn-stamp--founding .tpn-stamp__text,
.tp-nation .tpn-stamp--voted .tpn-stamp__text {
    position: absolute;
    top: 45.5%;
    left: -4%;
    right: -4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.tp-nation .tpn-stamp--founding .tpn-stamp__title,
.tp-nation .tpn-stamp--voted .tpn-stamp__title {
    align-self: stretch;
    padding: 0.5em calc(0.95em + 6px) 0.45em;
    color: var(--tpn-ivory);
    background: linear-gradient(180deg, #1d3f6c 0%, #0b1b33 52%, #12294a 100%);
    border-top: 1px solid rgba(243, 211, 138, 0.85);
    border-bottom: 1px solid rgba(243, 211, 138, 0.85);
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.95em) 50%, 100% 100%, 0 100%, 0.95em 50%);
}
/* no date (public passport): the ribbon moves to the middle of the coin */
.tp-nation .tpn-stamp--founding.tpn-stamp--undated .tpn-stamp__text,
.tp-nation .tpn-stamp--voted.tpn-stamp--undated .tpn-stamp__text { top: 53%; translate: 0 -50%; }

.tp-nation .tpn-stamp--voted .tpn-stamp__title {
    background: linear-gradient(180deg, #2a3a55 0%, #121d31 52%, #1e2b43 100%);
    border-color: rgba(220, 226, 235, 0.85);
}

.tp-nation .tpn-stamp--founding .tpn-stamp__date,
.tp-nation .tpn-stamp--voted .tpn-stamp__date {
    padding: 0.2em 0.5em 0.18em;
    border-radius: 3px;
    font-size: clamp(9px, 6.4cqi, 10.5px);
    color: #fff0c2;
    background: linear-gradient(180deg, #2a1a03 0%, #4a2f09 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 246, 214, 0.75), 0 -1px 0 rgba(90, 59, 14, 0.5);
}
.tp-nation .tpn-stamp--voted .tpn-stamp__date {
    color: #eef1f5;
    background: linear-gradient(180deg, #121b2b 0%, #262d3a 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 0 rgba(58, 65, 80, 0.5);
}

/* ---- ink (issued, restored): the frame is stretched to the box, and the box grows with the title */
.tp-nation .tpn-stamps .tpn-stamp--issued,
.tp-nation .tpn-stamps .tpn-stamp--restored {
    --tpn-pad-x: 30px;
    aspect-ratio: auto;
    --tpn-avail: calc(100cqi - 30px);
    --tpn-inner: 100cqi;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--tpn-stamp-w) * 0.8);
    padding: 44px 15px 16px;
}
.tp-nation .tpn-stamps .tpn-stamp--restored { padding: 48px 15px 30px; min-height: calc(var(--tpn-stamp-w) * 0.98); }
/* no date (public passport): the box only has to hold the glyph row and the title */
.tp-nation .tpn-stamps .tpn-stamp--issued.tpn-stamp--undated { min-height: calc(var(--tpn-stamp-w) * 0.6); padding-bottom: 14px; }
.tp-nation .tpn-stamps .tpn-stamp--restored.tpn-stamp--undated { min-height: calc(var(--tpn-stamp-w) * 0.72); padding-bottom: 24px; }

.tp-nation .tpn-stamp--issued .tpn-stamp__text,
.tp-nation .tpn-stamp--restored .tpn-stamp__text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(31, 58, 134, 0.7);
}
.tp-nation .tpn-stamp--restored .tpn-stamp__text { border-top: 1px dashed rgba(154, 36, 54, 0.7); }

.tp-nation .tpn-stamp--issued .tpn-stamp__date,
.tp-nation .tpn-stamp--restored .tpn-stamp__date {
    align-self: stretch;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(31, 58, 134, 0.7);
    font-size: 0.8rem;
    font-weight: 800;
}
.tp-nation .tpn-stamp--restored .tpn-stamp__date { border-top: 1px solid rgba(154, 36, 54, 0.7); }

/* uneven pad pressure on the lettering too (contrast >= 5.4:1 on cream at the lightest stop) */
.tp-nation .tpn-stamp--issued .tpn-stamp__title,
.tp-nation .tpn-stamp--issued .tpn-stamp__date {
    color: transparent;
    background: linear-gradient(100deg, rgba(31, 58, 134, 0.96) 0%, rgba(31, 58, 134, 0.8) 38%, rgba(31, 58, 134, 0.97) 64%, rgba(31, 58, 134, 0.84) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.tp-nation .tpn-stamp--restored .tpn-stamp__title,
.tp-nation .tpn-stamp--restored .tpn-stamp__date {
    color: transparent;
    background: linear-gradient(100deg, rgba(154, 36, 54, 0.95) 0%, rgba(154, 36, 54, 0.8) 42%, rgba(154, 36, 54, 0.97) 70%, rgba(154, 36, 54, 0.84) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------------------------------------------------------------- crest */

.tp-nation .tpn-emblem { display: block; flex: none; overflow: visible; }
.tp-nation .tpn-passport__emblem { width: 88px; height: 88px; }

/* ---------------------------------------------------------------- compact strip (member license page) */

.tp-nation.tpn-strip {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem 1.2rem;
    margin: 0 auto 1.4rem;
    padding: 1rem 1.3rem 1rem 1.1rem;
    max-width: 1040px;
    border-radius: 16px;
    color: var(--tpn-ivory);
    text-align: start;
    background:
        var(--tpn-pat-waves-gold) 100% 50% / 240px 64px repeat-x,
        var(--tpn-pat-lattice-gold) 0 0 / 18px 18px,
        radial-gradient(80% 140% at 100% 0%, rgba(35, 78, 128, 0.65) 0%, rgba(35, 78, 128, 0) 60%),
        linear-gradient(135deg, #13294a 0%, #0a1830 100%);
    border: 1px solid rgba(243, 211, 138, 0.55);
    box-shadow: inset 0 0 0 5px rgba(10, 24, 48, 0.9), inset 0 0 0 6px rgba(243, 211, 138, 0.3), 0 18px 40px rgba(8, 19, 39, 0.3);
}

.tp-nation .tpn-strip__emblem { width: 58px; height: 58px; }
.tp-nation .tpn-strip__kicker { margin: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.26em; text-transform: uppercase; color: var(--tpn-gold-soft); }
.tp-nation .tpn-strip__line { margin: 0.2rem 0 0; font-family: var(--tpn-serif); font-size: 1.12rem; line-height: 1.35; color: var(--tpn-ivory); }
.tp-nation .tpn-strip__line strong { font-family: var(--tpn-font); font-weight: 800; color: var(--tpn-gold-soft); }
.tp-nation .tpn-strip__meta { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-strip__id { font-family: var(--tpn-mono); letter-spacing: 0.1em; color: var(--tpn-cyan); unicode-bidi: isolate; }

@media (max-width: 575.98px) {
    .tp-nation.tpn-strip { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; }
    .tp-nation.tpn-strip .tpn-strip__action { grid-column: 1 / -1; justify-self: stretch; text-align: center; justify-content: center; }
    .tp-nation .tpn-strip__kicker { font-size: 0.62rem; letter-spacing: 0.16em; text-wrap: balance; }
}

/* ---------------------------------------------------------------- passport: narrow cards and screens */

/* The card responds to its own width (container queries), because it sits in the 1180 px page container on
   Passport.cshtml but in an 820 px one on the public Citizen.cshtml. */
@container tpn-passport (max-width: 900px) {
    .tp-nation .tpn-passport__ghost { display: none; }
    .tp-nation .tpn-passport__body {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "portrait who"
            "portrait fields";
    }
}

@container tpn-passport (max-width: 600px) {
    .tp-nation .tpn-passport > .tpn-passport__rosette { width: 420px; height: 420px; margin-top: -250px; inset-inline-end: -210px; }
    .tp-nation .tpn-passport__head { gap: 0.7rem; }
    .tp-nation .tpn-passport__kicker { font-size: 0.62rem; letter-spacing: 0.16em; }
    .tp-nation .tpn-passport__body {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "portrait who"
            "fields fields";
        align-items: center;
        gap: 1rem;
    }
    .tp-nation .tpn-passport__portrait { width: 96px; max-height: none; }
    .tp-nation .tpn-passport__name { font-size: clamp(1.25rem, 6.5cqi, 1.9rem); }
    .tp-nation .tpn-passport__foil { display: none; }
    .tp-nation .tpn-passport__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; margin-top: 0; }
    .tp-nation .tpn-passport__fields .tpn-field--status { grid-column: 1 / -1; }
    .tp-nation .tpn-passport__fields .tpn-passport__id { font-size: 0.95rem; letter-spacing: 0.06em; }
    .tp-nation .tpn-passport__foot { display: block; }
    .tp-nation .tpn-passport__dateline { display: grid; gap: 0.3rem; font-size: 0.66rem; letter-spacing: 0.14em; }
    .tp-nation .tpn-passport__dateline span + span::before { display: none; }
    .tp-nation .tpn-passport__disclaimer { margin-top: 0.45rem; }
    /* MRZ: keep 12 px glyphs with air between them; the filler tail is clipped under a fade */
    .tp-nation .tpn-passport__mrz span {
        font-size: 13px;
        letter-spacing: 0.12em;
        -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
        mask-image: linear-gradient(90deg, #000 86%, transparent);
    }
}

@media (max-width: 991.98px) {
    .tp-nation .tpn-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
    .tp-nation .tpn-card.tpn-visa { padding: 1.3rem 1rem 1.4rem; }
    .tp-nation .tpn-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tp-nation .tpn-stamps { --tpn-stamp-w: 8.5rem; gap: 1.5rem 1.7rem; }
}

/* public passport: only the shared counters exist (1-4 tiles): fixed-size tiles instead of the 6-column row */
.tp-nation .tpn-passport--public ~ .tpn-stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }

/* ---------------------------------------------------------------- right-to-left */

.tp-nation[dir="rtl"] .tpn-passport__holo { right: auto; left: 7px; }
.tp-nation[dir="rtl"] .tpn-passport__mrz { text-align: left; }
.tp-nation[dir="rtl"] .tpn-passport__fields .tpn-passport__id { text-align: right; }
.tp-nation[dir="rtl"] .tpn-passport__label,
.tp-nation[dir="rtl"] .tpn-passport__fields dt,
.tp-nation[dir="rtl"] .tpn-passport__kicker,
.tp-nation[dir="rtl"] .tpn-passport__dateline,
.tp-nation[dir="rtl"] .tpn-stat__label,
.tp-nation[dir="rtl"] .tpn-strip__kicker,
.tp-nation[dir="rtl"] .tpn-stamps .tpn-stamp__title,
.tp-nation[dir="rtl"] .tpn-status,
.tp-nation[dir="rtl"] .tpn-visa .tpn-card__title { letter-spacing: 0; }

/* Arabic / Hebrew: no caps, no tracking, so the small-caps label sizes read too small - go up a step */
.tp-nation[dir="rtl"] .tpn-passport__label,
.tp-nation[dir="rtl"] .tpn-passport__fields dt { font-size: 0.8rem; }
.tp-nation[dir="rtl"] .tpn-passport__kicker { font-size: 0.84rem; }
.tp-nation[dir="rtl"] .tpn-passport__dateline { font-size: 0.82rem; }
.tp-nation[dir="rtl"] .tpn-passport__disclaimer { font-size: 0.84rem; }
.tp-nation[dir="rtl"] .tpn-passport .tpn-status { font-size: 0.8rem; }
.tp-nation[dir="rtl"] .tpn-stat__label { font-size: 0.8rem; }
.tp-nation[dir="rtl"] .tpn-strip__kicker { font-size: 0.8rem; }
.tp-nation[dir="rtl"] .tpn-visa .tpn-card__title { font-size: 0.95rem; }
.tp-nation[dir="rtl"] .tpn-stamps .tpn-stamp { --tpn-fs-min: 11px; --tpn-fs-max: 14px; --tpn-k: 0.62; }

/* ---------------------------------------------------------------- motion off */

@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-stamps .tpn-stamp { animation: none !important; }
}

/* ---------------------------------------------------------------- harbor scene: motion, fold, crops (tools/nation-art) */

/* Dusk harbor scene: layer motion, laptop fold, ultra-wide height-fit, banner and phone crops (see INTEGRATION.md).
   Loaded after nation.css. Every animation is a whole-layer transform/opacity. */
.tp-nation .tpn-scene { background: #0b0b24; }
.tp-nation .tpn-plot__halo { fill: rgba(243, 211, 138, .08); stroke: #f3d38a; stroke-width: 2px; }

.tp-nation .tpn-layer--stars { fill: none; animation: tpn-twinkle 5.5s ease-in-out infinite; }
.tp-nation .tpn-layer--lights-a { animation: tpn-dusk-blink 6.4s ease-in-out infinite; }
.tp-nation .tpn-layer--lights-b { animation: tpn-dusk-blink 6.4s ease-in-out -3.2s infinite; }
.tp-nation .tpn-layer--glitter-a { animation: tpn-dusk-shimmer 5.2s ease-in-out infinite; }
.tp-nation .tpn-layer--glitter-b { animation: tpn-dusk-shimmer 5.2s ease-in-out -2.6s infinite; }
.tp-nation .tpn-layer--ark { animation: tpn-dusk-bob 8s ease-in-out infinite; }
.tp-nation .tpn-layer--beam { opacity: 1; transform-origin: 13.44% 64.56%; }
.tp-nation.tpn-js .tpn-layer--beam {
    transform-origin: var(--tpn-lamp-x, 13.44%) var(--tpn-lamp-y, 64.56%);
    animation: tpn-dusk-sweep 12s ease-in-out infinite;
}
@keyframes tpn-dusk-blink {
    0%, 100% { opacity: 1; }
    40% { opacity: .85; }
    48% { opacity: .25; }
    52% { opacity: .9; }
    56% { opacity: .35; }
    62% { opacity: 1; }
}
@keyframes tpn-dusk-shimmer {
    0%, 100% { opacity: .15; transform: translate3d(0, 0, 0); }
    50% { opacity: 1; transform: translate3d(3px, 0, 0); }
}
@keyframes tpn-dusk-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 2.5px, 0); }
}
@keyframes tpn-dusk-sweep {
    0%, 100% { transform: rotate(-5deg); opacity: .8; }
    50% { transform: rotate(4deg); opacity: 1; }
}
/* the still frame keeps the shimmer half-lit */
@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-layer--glitter-a,
    .tp-nation .tpn-layer--glitter-b { opacity: .6; }
}

/* ---- time of day: the four harbor ambiences (_HarborScene.<ambience>.cshtml) ----
   The scene div carries tpn-scene--<ambience>; the hero / banner / place sections carry tpn-time--<phase>.
   Only whole layers animate (transform / opacity). The ambience overrides use longhands (animation-name /
   -duration / -delay), never the shorthand, so the .tpn-paused rule at the end of this file still pauses them. */
.tp-nation .tpn-scene--dawn { background: #1a2444; }
.tp-nation .tpn-scene--day { background: #1646a0; }
.tp-nation .tpn-scene--night { background: #03081c; }

/* dawn: the mist drifts over the water, the lighthouse beam is fading, the last stars twinkle slowly */
.tp-nation .tpn-scene--dawn .tpn-layer--mist { animation: tpn-dawn-drift 28s ease-in-out infinite; }
.tp-nation .tpn-scene--dawn .tpn-layer--stars { animation-duration: 8s; }
.tp-nation .tpn-scene--dawn .tpn-layer--beam { opacity: .6; }   /* still frame (no JS / reduced motion): fading */
.tp-nation.tpn-js .tpn-scene--dawn .tpn-layer--beam { animation-name: tpn-dawn-sweep; }
@keyframes tpn-dawn-drift {
    0%, 100% { transform: translate3d(-14px, 0, 0); opacity: .8; }
    50% { transform: translate3d(14px, 1px, 0); opacity: 1; }
}
@keyframes tpn-dawn-sweep {
    0%, 100% { transform: rotate(-5deg); opacity: .5; }
    50% { transform: rotate(4deg); opacity: .8; }
}

/* day: no stars, marquees or beam (the day scene has no such layers); gulls glide, the sun sparkles on the water */
.tp-nation .tpn-scene--day .tpn-layer--gulls { animation: tpn-day-glide 16s ease-in-out infinite; }
.tp-nation .tpn-scene--day .tpn-layer--glitter-a,
.tp-nation .tpn-scene--day .tpn-layer--glitter-b { animation-name: tpn-day-sparkle; animation-duration: 3.4s; }
.tp-nation .tpn-scene--day .tpn-layer--glitter-b { animation-delay: -1.7s; }
@keyframes tpn-day-glide {
    0%, 100% { transform: translate3d(0, 0, 0); }
    35% { transform: translate3d(10px, -4px, 0); }
    70% { transform: translate3d(18px, 1px, 0); }
}
@keyframes tpn-day-sparkle {
    0%, 100% { opacity: .2; transform: translate3d(0, 0, 0); }
    50% { opacity: 1; transform: translate3d(2px, 0, 0); }
}

/* night: a strong beam, a slow twinkle */
.tp-nation.tpn-js .tpn-scene--night .tpn-layer--beam { animation-name: tpn-night-sweep; }
.tp-nation .tpn-scene--night .tpn-layer--stars { animation-duration: 7s; }
@keyframes tpn-night-sweep {
    0%, 100% { transform: rotate(-5deg); opacity: .9; }
    50% { transform: rotate(4deg); opacity: 1; }
}

/* the still frame (reduced motion) keeps the day's sparkle lit */
@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-scene--day .tpn-layer--glitter-a,
    .tp-nation .tpn-scene--day .tpn-layer--glitter-b { opacity: .7; }
}

/* day text: the sky behind the copy is lighter than at dusk. This scrim is a deeper cobalt (the navy one would grey
   the blue), held to the copy block so the sunlit Building Site below and the cloud beside the headline stay bright.
   The muted copy text is also a little more opaque. */
.tp-nation.tpn-hero.tpn-time--day .tpn-hero__scrim,
.tp-nation.tpn-banner.tpn-time--day .tpn-hero__scrim {
    background:
        radial-gradient(46% 44% at 20% 38%, rgba(5, 22, 66, 0.6) 0%, rgba(5, 22, 66, 0.42) 55%, rgba(5, 22, 66, 0) 100%),
        linear-gradient(180deg, rgba(5, 22, 66, 0.4) 0%, rgba(5, 22, 66, 0) 26%);
}
.tp-nation.tpn-hero.tpn-time--day .tpn-hero__copy,
.tp-nation.tpn-banner.tpn-time--day .tpn-banner__inner {
    --tpn-ivory-dim: rgba(252, 247, 239, 0.92);
    --tpn-ivory-mute: rgba(252, 247, 239, 0.84);
}
/* dawn text: the rose haze behind the note and the dateline is lighter than dusk's */
.tp-nation.tpn-hero.tpn-time--dawn .tpn-hero__copy,
.tp-nation.tpn-banner.tpn-time--dawn .tpn-banner__inner { --tpn-ivory-mute: rgba(252, 247, 239, 0.7); }
/* the dateline sits lowest in the copy, nearest the horizon glow: in every ambience it uses the dim (not the mute)
   ivory, which keeps it at AA on narrow desktops (1024-1152 px) where the glow reaches it */
.tp-nation.tpn-hero .tpn-dateline,
.tp-nation.tpn-banner .tpn-dateline { color: var(--tpn-ivory-dim); }
/* day panel: the sunlit city and sky show through the glass; a denser cobalt glass */
@media (min-width: 992px) {
    @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
        .tp-nation.tpn-hero.tpn-time--day .tpn-hero__panel .tpn-panel { background: rgba(6, 20, 54, 0.8); }
    }
}

@media (min-width: 992px) {
    /* short laptops: the hero is min-height tall, so the fold sits at vb y >= 804 */
    @media (max-height: 940px) {
        .tp-nation.tpn-hero { padding-top: clamp(6rem, 12.5vh, 8.2rem); padding-bottom: 2.5rem; }
    }
    /* only the layers that paint past the viewBox sides overflow (the rest keep a viewBox-sized surface) */
    .tp-nation .tpn-layer--base,
    .tp-nation .tpn-layer--lights-a,
    .tp-nation .tpn-layer--lights-b,
    .tp-nation .tpn-layer--beam,
    .tp-nation .tpn-layer--mist { overflow: visible; }
    /* wider than 16:9: fit the art by height (16:9 box, centred) */
    @supports (width: 1cqh) {
        .tp-nation.tpn-hero .tpn-scene { container-type: size; }
        .tp-nation.tpn-hero .tpn-layer {
            left: calc((100cqw - min(100cqw, 177.78cqh)) / 2);
            width: min(100cqw, 177.78cqh);
        }
    }
    @supports not (width: 1cqh) {
        @media (min-aspect-ratio: 16/9) {
            .tp-nation.tpn-hero .tpn-layer { left: calc(50% - 88.89vh); width: 177.78vh; }
        }
    }
    /* Town Square banner: 86 vb of water cropped off, art nudged right, capped at 241cqh on wide screens. The nudge
       keeps the Ark clear of the copy and is as large as the Grand Cabinet (the TP tower, vb 1462-1530) allows:
       4.3% of the art's width less 12px, so the tower always stands whole inside the right edge. */
    .tp-nation.tpn-banner { min-height: min(44vw, 700px); }
    .tp-nation.tpn-banner .tpn-layer {
        top: auto;
        bottom: -5.375vw;
        left: calc(4.3vw - 12px);
        height: calc(100% + 5.375vw);
    }
    @supports (width: 1cqh) {
        .tp-nation.tpn-banner .tpn-scene { container-type: size; }
        .tp-nation.tpn-banner .tpn-layer {
            --tpn-bw: min(100cqw, 241cqh);
            left: calc((100cqw - var(--tpn-bw)) / 2 + var(--tpn-bw) * .043 - 12px);
            width: var(--tpn-bw);
            bottom: calc(var(--tpn-bw) * -.05375);
            height: calc(100cqh + var(--tpn-bw) * .05375);
        }
    }
    /* the water fades into the banner's navy (next to the Building Site's) instead of ending in a hard cut */
    .tp-nation.tpn-banner .tpn-scene {
        -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 4.5rem), transparent);
        mask-image: linear-gradient(180deg, #000 calc(100% - 4.5rem), transparent);
    }
}

/* phones / tablets: a band (on the hero between the copy and the vote panel, on the Town Square at the banner's foot),
   layers oversized in % of the band width (vb x 104..1544, y 170..840: the headland to the whole Grand Cabinet, with
   the moon above it in every ambience) */
@media (max-width: 991.98px) {
    .tp-nation.tpn-hero .tpn-scene,
    .tp-nation.tpn-banner .tpn-scene { height: auto; aspect-ratio: 1440 / 670; }
    .tp-nation.tpn-hero .tpn-layer,
    .tp-nation.tpn-banner .tpn-layer {
        inset: auto auto 0 calc(-100% * 104 / 1440);
        width: calc(100% * 1600 / 1440);
        height: auto;
        aspect-ratio: 16 / 9;
        margin-bottom: calc(-100% * 60 / 1440);
    }
    /* soft edges: the sky comes out of the navy around the band and the water goes back into it (no seam at either
       edge, whatever the ambience or the section below) */
    .tp-nation.tpn-hero .tpn-scene,
    .tp-nation.tpn-banner .tpn-scene {
        -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent);
        mask-image: linear-gradient(180deg, transparent, #000 12%, #000 92%, transparent);
    }
    .tp-nation.tpn-banner { min-height: 0; padding-bottom: calc(46.53vw + 1.5rem); }
    .tp-nation.tpn-banner .tpn-scene { position: absolute; inset: auto 0 0; }
}
/* phones: vb x 140..968, y 256..840 (lighthouse with its TP board, Building Site, Ark, landing stage) */
@media (max-width: 575.98px) {
    .tp-nation.tpn-hero .tpn-scene,
    .tp-nation.tpn-banner .tpn-scene { aspect-ratio: 828 / 584; }
    .tp-nation.tpn-hero .tpn-layer,
    .tp-nation.tpn-banner .tpn-layer {
        left: calc(-100% * 140 / 828);
        width: calc(100% * 1600 / 828);
        margin-bottom: calc(-100% * 60 / 828);
    }
    .tp-nation.tpn-banner { padding-bottom: calc(70.53vw + 1.5rem); }
    /* the Ark's name is ~5px here: a plain gilt name-board band instead of illegible lettering */
    .tp-nation .tpn-ark-name { display: none; }
    .tp-nation .tpn-ark-band { display: inline; }
}

/* must stay last: the beam's animation shorthand above would otherwise reset the play state to running */

/* Right-to-left pages: the harbor is composed for copy on the left and the vote panel on the right (the Building Site
   and the Ark sit under the copy). Keep that column order in rtl and let the text inside each column run rtl. */
.tp-nation.tpn-hero[dir="rtl"] .tpn-hero__inner { direction: ltr; }
.tp-nation.tpn-hero[dir="rtl"] .tpn-hero__inner > * { direction: rtl; }
@media (min-width: 992px) {
    /* right-aligned lines must end where the ltr ones do, clear of the masts in the copy/panel gap */
    .tp-nation.tpn-hero[dir="rtl"] .tpn-hero__copy { max-width: 36rem; }
}
.tp-nation.tpn-banner[dir="rtl"] .tpn-banner__inner { direction: ltr; }
/* the ltr lede's 36rem column: right-aligned lines end where the ltr ones do, left of the Ark's masts */
.tp-nation.tpn-banner[dir="rtl"] .tpn-banner__inner > * { direction: rtl; max-width: 36rem; margin-right: auto; }
/* the overline is inline-flex: as a block-level flex row it spans the column and starts at its right edge */
.tp-nation.tpn-banner[dir="rtl"] .tpn-banner__inner > .tpn-overline { display: flex; }
/* narrow desktops (992-1279 px): the Ark's masts stand inside a 36rem column, so the column narrows with the art and
   keeps clear of them (the ltr lede; in rtl every line, since each one ends at the column's right edge) */
@media (min-width: 992px) and (max-width: 1279.98px) {
    .tp-nation.tpn-banner .tpn-lede,
    .tp-nation.tpn-banner[dir="rtl"] .tpn-banner__inner > * { max-width: min(36rem, calc(47.5vw - 60px)); }
}
/* phones / tablets: the harbor is a band under the copy, so the rtl column starts at the right content edge, where
   the vote panel and the Building Site below start */
@media (max-width: 991.98px) {
    .tp-nation.tpn-banner[dir="rtl"] .tpn-banner__inner > * { margin-right: 0; margin-left: auto; }
}

/* ================================================================ Town Square, vote panel, poll page */

/* ==========================================================================
   TeknoParrot Nation: Town Square ("Harbor ledger & charter")
   The builder's ledger (chronicle), the Citizen Vote panel, the Citizen Charter
   (how voting works + the key-token weights), the Hall of Records, the poll page
   and the block under the Subscription pricing.
   Replaces the vote panel, chronicle / how-voting-works / archive and
   Subscription-block rules of nation.css (see INTEGRATION.md for the exact cut
   list). Scoped under .tp-nation, classes tpn-, z-index <= 2, no filters,
   inline SVG and data-URI masks only, reduced motion honoured.
   ========================================================================== */

.tp-nation {
    --tpn-paper: #f6eedc;
    --tpn-paper-edge: #e9dcc0;
    --tpn-paper-ink: #1b2740;
    --tpn-paper-text: #3a3325;
    --tpn-paper-rule: rgba(143, 101, 36, 0.5);
    --tpn-paper-gold: #7d5a17;
    --tpn-paper-red: #9a2436;
    --tpn-ledger: #0d1f3c;
    --tpn-hair-gold: rgba(243, 211, 138, 0.3);
    --tpn-hair: rgba(252, 247, 239, 0.12);
    --tpn-weight: #f3d38a;
    --tpn-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6.2 10.4l2.6 2.6 5-5.4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --tpn-i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.6l8 14.2H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M10 8v4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.4' r='1.1'/%3E%3C/svg%3E");
    --tpn-i-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 6.6v6.8M12 6.6v6.8' stroke='%23000' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
    --tpn-i-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3.5' y='9' width='13' height='8.5' rx='1'/%3E%3Cpath d='M2.5 6h15v3h-15zM10 6v11.5M10 6C8.5 2.5 5 3 6.5 6M10 6c1.5-3.5 5-3 3.5 0'/%3E%3C/g%3E%3C/svg%3E");
    --tpn-i-former: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='4.3' r='1.9'/%3E%3Cpath d='M10 6.2v11.3M6.4 9h7.2M3.6 12.2q1 5.1 6.4 5.4q5.4-.3 6.4-5.4'/%3E%3C/g%3E%3C/svg%3E");
    --tpn-i-count: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.6h10M5 17.4h10M6.2 2.6c0 4.4 7.6 4.2 7.6 7.4s-7.6 3-7.6 7.4M13.8 2.6c0 4.4-7.6 4.2-7.6 7.4s7.6 3 7.6 7.4'/%3E%3C/g%3E%3C/svg%3E");
    --tpn-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 5l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tp-nation .tpn-link:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- Town Square sections */

.tp-nation.tpn-section--site {
    background:
        radial-gradient(70% 50% at 20% 0%, rgba(35, 78, 128, 0.35) 0%, rgba(35, 78, 128, 0) 70%),
        linear-gradient(180deg, #081228 0%, #0c1c3a 100%);
}

.tp-nation.tpn-section--site .tpn-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: clamp(2rem, 4vw, 3.5rem);
}

.tp-nation.tpn-section--site .tpn-section__head { margin-bottom: 1.6rem; }
.tp-nation.tpn-section--site .tpn-section__lede { max-width: 42rem; }

/* The Town Square banner title is a single long word in several languages (Bürgerabstimmung, Kansalaisäänestys):
   on phones it scales with the viewport instead of running off the screen. (A banner rule: it can move to the
   banner block of nation.css.) */
@media (max-width: 575.98px) {
    .tp-nation .tpn-banner__inner .tpn-headline { font-size: min(2.2rem, 7.6vw); }
}

@media (max-width: 991.98px) {
    .tp-nation.tpn-section--site .tpn-layout { grid-template-columns: minmax(0, 1fr); }
    /* On one column the vote comes first: it is the thing to do on this page. Full width, like the ledger under it. */
    .tp-nation.tpn-section--site .tpn-layout__aside { order: -1; }
}

/* ---------------------------------------------------------------- the builder's ledger */

.tp-nation .tpn-ledger {
    margin: 0;
    padding: 0.35rem clamp(1rem, 2.4vw, 1.75rem);
    list-style: none;
    border-radius: 16px;
    border: 1px solid rgba(243, 211, 138, 0.3);
    background:
        linear-gradient(180deg, rgba(243, 211, 138, 0.06), rgba(243, 211, 138, 0) 140px),
        repeating-linear-gradient(180deg, rgba(243, 211, 138, 0) 0 31px, rgba(243, 211, 138, 0.04) 31px 32px),
        var(--tpn-ledger);
    box-shadow:
        inset 0 0 0 5px rgba(8, 18, 36, 0.55),
        inset 0 0 0 6px rgba(243, 211, 138, 0.1),
        0 26px 60px rgba(2, 6, 16, 0.42);
    container: tpn-ledger / inline-size;
}

.tp-nation .tpn-entry {
    position: relative;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    gap: 0 clamp(1rem, 2.4vw, 1.75rem);
    padding: 1.6rem 0 1.5rem;
    scroll-margin-top: 110px;
}

.tp-nation .tpn-entry + .tpn-entry { border-top: 3px double rgba(243, 211, 138, 0.2); }

.tp-nation .tpn-entry:target::before {
    content: "";
    position: absolute;
    inset: 0.5rem calc(-1 * clamp(0.6rem, 1.4vw, 1rem));
    border-radius: 12px;
    border: 1px solid var(--tpn-gold);
    box-shadow: 0 0 0 4px rgba(231, 182, 75, 0.15);
    pointer-events: none;
}

.tp-nation .tpn-entry__art {
    position: relative;
    align-self: start;
    padding-bottom: 18px;
}

.tp-nation .tpn-entry__body { min-width: 0; }

/* the drawing: a small framed vignette of the plot at its stage */
.tp-nation .tpn-vignette {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(243, 211, 138, 0.5);
    background:
        radial-gradient(90% 60% at 50% 100%, rgba(226, 115, 95, 0.32) 0%, rgba(226, 115, 95, 0) 70%),
        linear-gradient(180deg, #111d3e 0%, #232a5c 62%, #3a3478 100%);
    box-shadow: inset 0 0 0 3px rgba(9, 18, 36, 0.7), inset 0 0 0 4px rgba(243, 211, 138, 0.14);
}

.tp-nation .tpn-vignette--released {
    background:
        radial-gradient(70% 60% at 50% 30%, rgba(255, 214, 148, 0.35) 0%, rgba(255, 214, 148, 0) 70%),
        radial-gradient(90% 60% at 50% 100%, rgba(255, 174, 102, 0.45) 0%, rgba(255, 174, 102, 0) 70%),
        linear-gradient(180deg, #1a2150 0%, #3a3478 55%, #8c4a86 100%);
}

.tp-nation .tpn-vignette--testing {
    background:
        radial-gradient(60% 55% at 50% 40%, rgba(127, 233, 255, 0.16) 0%, rgba(127, 233, 255, 0) 70%),
        linear-gradient(180deg, #0f1c3d 0%, #1d2a5a 60%, #2c3470 100%);
}

.tp-nation .tpn-vignette--shelved {
    background: linear-gradient(180deg, #151d33 0%, #1f2742 60%, #2a3150 100%);
}

.tp-nation .tpn-vignette__svg { display: block; width: 100%; height: 100%; }

/* vignette ink (SVG presentation via classes: no ids, no gradients) */
.tp-nation .tpn-art-ground rect { fill: #17223f; }
.tp-nation .tpn-art-ground path { stroke: #17223f; stroke-width: 3; }
.tp-nation .tpn-art-glint { fill: none; stroke: #7fe9ff; stroke-opacity: 0.35; stroke-linecap: round; }
.tp-nation .tpn-art-plot { fill: rgba(243, 211, 138, 0.1); stroke: #f3d38a; stroke-dasharray: 3 2; }
.tp-nation .tpn-art-ghost { fill: none; stroke: rgba(252, 247, 239, 0.42); stroke-dasharray: 2 3; }
.tp-nation .tpn-art-stake { stroke: #e7b64b; stroke-width: 1.6; stroke-linecap: round; }
.tp-nation .tpn-art-flag { fill: #ff8f6b; }
.tp-nation .tpn-art-tripod path { fill: none; stroke: #c9d6ea; stroke-width: 1.2; }
.tp-nation .tpn-art-tripod rect { fill: #e7b64b; }
.tp-nation .tpn-art-lens { fill: #7fe9ff; }
.tp-nation .tpn-art-sign path { fill: none; stroke: #b88a3e; stroke-width: 2; }
.tp-nation .tpn-art-sign rect { fill: #f6eedc; stroke: #b88a3e; }
.tp-nation .tpn-art-sign .tpn-art-sign__tick { stroke: #1f3a86; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tp-nation .tpn-art-sign .tpn-art-sign__pause { stroke: #9a2436; stroke-width: 2.2; stroke-linecap: round; }
.tp-nation .tpn-art-tower { fill: #22325f; stroke: rgba(243, 211, 138, 0.55); }
.tp-nation .tpn-art-tower--lit { fill: #2b3672; stroke: #f3d38a; }
.tp-nation .tpn-art-win { fill: none; stroke: rgba(243, 211, 138, 0.3); stroke-width: 3; }
.tp-nation .tpn-art-win--lit { stroke: #ffd98a; }
.tp-nation .tpn-art-scaffold { fill: none; stroke: #c79a4a; stroke-width: 1; stroke-linecap: round; }
.tp-nation .tpn-art-crane path { fill: none; stroke: #e7b64b; stroke-width: 1.2; stroke-linejoin: round; }
.tp-nation .tpn-art-crane rect { fill: #e7b64b; }
.tp-nation .tpn-art-crane .tpn-art-cable { stroke: #c9d6ea; stroke-width: 0.8; }
.tp-nation .tpn-art-crane .tpn-art-beam { fill: #ff8f6b; }
.tp-nation .tpn-art-warn { fill: #ff7a6b; }
.tp-nation .tpn-art-marquee { fill: #ff8fe6; }
.tp-nation .tpn-art-marquee--off { fill: #3b4274; }
.tp-nation .tpn-art-screen { fill: #0a1428; stroke: rgba(127, 233, 255, 0.7); }
.tp-nation .tpn-art-screen--lit { fill: #3a3478; stroke: #ffd694; }
.tp-nation .tpn-art-sun { fill: #ffd694; }
.tp-nation .tpn-art-sea { stroke: #7fe9ff; stroke-width: 1.4; }
.tp-nation .tpn-art-bar--c { fill: #7fe9ff; }
.tp-nation .tpn-art-bar--m { fill: #ff8fe6; }
.tp-nation .tpn-art-bar--l { fill: #c9ff86; }
.tp-nation .tpn-art-bar--g { fill: #f3d38a; }
.tp-nation .tpn-art-probe path { fill: none; stroke: #c9d6ea; stroke-width: 1.2; }
.tp-nation .tpn-art-probe rect { fill: #0a1428; stroke: #7fe9ff; }
.tp-nation .tpn-art-probe .tpn-art-probe__trace { stroke: #c9ff86; stroke-width: 1; stroke-linejoin: round; }
.tp-nation .tpn-art-pole { stroke: #f3d38a; stroke-width: 1.2; }
.tp-nation .tpn-art-pennant { fill: #e7b64b; }
.tp-nation .tpn-art-door { fill: #0b1b33; }
.tp-nation .tpn-art-stars { fill: #fcf7ef; opacity: 0.7; }
.tp-nation .tpn-art-rays { stroke: rgba(255, 224, 160, 0.28); stroke-width: 1.4; }
.tp-nation .tpn-art-confetti circle:nth-child(1) { fill: #7fe9ff; }
.tp-nation .tpn-art-confetti circle:nth-child(2) { fill: #ff8fe6; }
.tp-nation .tpn-art-confetti circle:nth-child(3) { fill: #c9ff86; }
.tp-nation .tpn-art-confetti circle:nth-child(4) { fill: #f3d38a; }
.tp-nation .tpn-art-tarp { fill: #3f6fb0; }
.tp-nation .tpn-art-fold { fill: none; stroke: #2a4f8a; stroke-width: 1.4; stroke-linecap: round; }
.tp-nation .tpn-art-sheen { fill: none; stroke: #8db0e3; stroke-width: 1; stroke-linecap: round; opacity: 0.8; }
.tp-nation .tpn-art-rope { fill: none; stroke: #ecd8ae; stroke-width: 1; stroke-linecap: round; }

/* the plot plate: a small brass tag screwed to the vignette */
.tp-nation .tpn-plate {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.24rem 0.7rem 0.28rem;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff0bf 0%, #efc566 48%, #c8912e 100%);
    color: #2a1a02;
    box-shadow: 0 5px 12px rgba(2, 6, 16, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(90, 59, 14, 0.45);
    white-space: nowrap;
}

.tp-nation .tpn-plate::before,
.tp-nation .tpn-plate::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 50%;
    background: rgba(90, 59, 14, 0.55);
}
.tp-nation .tpn-plate::before { inset-inline-start: 4px; }
.tp-nation .tpn-plate::after { inset-inline-end: 4px; }

.tp-nation .tpn-plate__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tp-nation .tpn-plate__no {
    font-family: var(--tpn-serif);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.tp-nation .tpn-plate__no--blank {
    display: inline-block;
    width: 1.3rem;
    height: 0.9rem;
    border-bottom: 1.5px dashed rgba(42, 26, 2, 0.6);
}

/* entry text */
.tp-nation .tpn-build__title {
    margin: 0.1rem 0 0.35rem;
    font-family: var(--tpn-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--tpn-ivory);
    text-wrap: balance;
}

.tp-nation .tpn-build__origin {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-build__log {
    margin: 1.1rem 0 0;
    padding-inline-start: 0.95rem;
    border-inline-start: 2px solid rgba(243, 211, 138, 0.4);
}

.tp-nation .tpn-build__date {
    margin: 0 0 0.25rem;
    font-size: max(0.72rem, 11px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
    font-variant-numeric: tabular-nums;
}

.tp-nation .tpn-build__update {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tpn-ivory-dim);
    white-space: pre-line;
    overflow-wrap: break-word;
}

.tp-nation .tpn-build__more { margin: 0.45rem 0 0; font-size: 0.86rem; }

.tp-nation .tpn-link--arrow::after {
    content: "";
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-inline-start: 0.35em;
    vertical-align: -0.12em;
    background: currentColor;
    -webkit-mask: var(--tpn-i-arrow) center / contain no-repeat;
    mask: var(--tpn-i-arrow) center / contain no-repeat;
}

.tp-nation .tpn-link--back::before {
    content: "";
    display: inline-block;
    width: 0.95em;
    height: 0.95em;
    margin-inline-end: 0.4em;
    vertical-align: -0.12em;
    background: currentColor;
    -webkit-mask: var(--tpn-i-arrow) center / contain no-repeat;
    mask: var(--tpn-i-arrow) center / contain no-repeat;
    transform: scaleX(-1);
}

.tp-nation[dir="rtl"] .tpn-link--arrow::after { transform: scaleX(-1); }
.tp-nation[dir="rtl"] .tpn-link--back::before { transform: none; }

/* the stage track: Selected - In development - Testing - Released (or Shelved) */
.tp-nation .tpn-stages {
    display: grid;
    /* auto tracks: each label keeps its own width ("In development" on one line) and the spare width is shared;
       a track only shrinks to its longest word when the row is really out of room */
    grid-template-columns: repeat(4, auto);
    margin: 1.05rem 0 0;
    padding: 0;
    list-style: none;
}

.tp-nation .tpn-stage {
    position: relative;
    display: grid;
    justify-items: start;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0;
    padding-inline-end: 1.1rem;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: max(0.72rem, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-stage:last-child { padding-inline-end: 0; }

/* the rail from this milestone to the next */
.tp-nation .tpn-stage::before {
    content: "";
    position: absolute;
    top: 7px;
    inset-inline-start: 18px;
    inset-inline-end: 2px;
    height: 2px;
    border-radius: 2px;
    background: rgba(252, 247, 239, 0.14);
}

.tp-nation .tpn-stage:last-child::before { display: none; }

.tp-nation .tpn-stage__node {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(252, 247, 239, 0.32);
    background: var(--tpn-ledger);
}

.tp-nation .tpn-stage__label { display: block; max-width: 100%; }

.tp-nation .tpn-stage--done { color: var(--tpn-gold-soft); }
.tp-nation .tpn-stage--done::before { background: var(--tpn-gold); }
.tp-nation .tpn-stage--done .tpn-stage__node {
    border-color: var(--tpn-gold);
    background: var(--tpn-gold);
}
.tp-nation .tpn-stage--done .tpn-stage__node::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 4px;
    height: 7.5px;
    border: solid #2a1a02;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tp-nation .tpn-stage--now { color: var(--tpn-ivory); }
.tp-nation .tpn-stage--now .tpn-stage__node {
    border-color: var(--tpn-cyan);
    background: radial-gradient(circle, var(--tpn-cyan) 0 3.5px, var(--tpn-ledger) 4px);
    box-shadow: 0 0 0 4px rgba(127, 233, 255, 0.14), 0 0 14px rgba(127, 233, 255, 0.5);
}

/* Released is the end of the line: done and final, the last milestone is a gold star (still aria-current). */
.tp-nation .tpn-stage--final { color: #fff1c9; }
.tp-nation .tpn-stage--final .tpn-stage__node {
    width: 18px;
    height: 18px;
    margin: -1px 0 -1px;
    margin-inline-start: -1px;
    border: 0;
    background: var(--tpn-gold);
    clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 57%, 79% 92%, 50% 71%, 21% 92%, 31% 57%, 2% 35%, 38% 34%);
    box-shadow: none;
}
.tp-nation .tpn-stage--final .tpn-stage__node::after { display: none; }

/* shelved: one coral milestone, the rail runs on dashed and dim */
.tp-nation .tpn-stages--shelved { grid-template-columns: minmax(0, 1fr); }
.tp-nation .tpn-stage--shelved { color: #ffb0a6; }
.tp-nation .tpn-stages .tpn-stage--shelved::before {
    display: block;
    inset-inline-end: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 122, 107, 0.4) 0 6px, rgba(255, 122, 107, 0) 6px 11px);
}
.tp-nation .tpn-stage--shelved .tpn-stage__node {
    border-color: #ff7a6b;
    background: linear-gradient(90deg, var(--tpn-ledger) 0 4px, #ff7a6b 4px 6px, var(--tpn-ledger) 6px 8px, #ff7a6b 8px 10px, var(--tpn-ledger) 10px) center / 12px 6px no-repeat, var(--tpn-ledger);
}

/* empty state (launch day) and "records unavailable" */
.tp-nation .tpn-empty--ledger {
    margin: 0.2rem 0 0;
    font-family: var(--tpn-serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.55;
    color: var(--tpn-ivory);
}

.tp-nation.tpn-section--site .tpn-site > .tpn-empty--ledger {
    padding: 1.2rem 1.4rem;
    border-radius: 14px;
    border: 1px dashed rgba(243, 211, 138, 0.35);
}

/* launch day: the surveyed site at the harbor's edge, drawn wide (staked plots, idle crane, site hut) */
.tp-nation .tpn-ledger--empty { padding: clamp(0.9rem, 2vw, 1.25rem) clamp(0.9rem, 2vw, 1.25rem) clamp(1.4rem, 3vw, 2rem); }

.tp-nation .tpn-groundbreak {
    position: relative;
    padding-bottom: 18px;
}

.tp-nation .tpn-groundbreak__svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 250;
    border-radius: 10px;
    border: 1px solid rgba(243, 211, 138, 0.5);
    background:
        radial-gradient(55% 30% at 50% 66%, rgba(236, 130, 102, 0.42) 0%, rgba(236, 130, 102, 0) 72%),
        linear-gradient(180deg, #0c1735 0%, #1b2453 45%, #3a3478 66%, #121b3c 80%, #0c1532 100%);
    box-shadow: inset 0 0 0 3px rgba(9, 18, 36, 0.7), inset 0 0 0 4px rgba(243, 211, 138, 0.14);
}

.tp-nation .tpn-art-moon { fill: #f6e7c1; opacity: 0.85; }
.tp-nation .tpn-groundbreak .tpn-art-ghost { stroke: rgba(252, 247, 239, 0.3); }
.tp-nation .tpn-art-deck { fill: #1f2c52; }
.tp-nation .tpn-art-face { fill: #111a33; }
.tp-nation .tpn-art-pile path { stroke: #0b1328; stroke-width: 4; }
.tp-nation .tpn-art-water { fill: #0f1a3a; opacity: 0.78; }
.tp-nation .tpn-art-far { fill: #28265a; }
.tp-nation .tpn-art-shine { stroke: #ffd98a; stroke-opacity: 0.55; stroke-width: 1.4; stroke-linecap: round; }
.tp-nation .tpn-art-crane .tpn-art-crane__base { fill: #394a78; }
.tp-nation .tpn-art-hut__body { fill: #2a3a68; stroke: rgba(243, 211, 138, 0.55); }
.tp-nation .tpn-art-hut__roof { stroke: #e7b64b; stroke-width: 3; stroke-linecap: round; }
.tp-nation .tpn-art-hut__win { fill: #ffd98a; }
.tp-nation .tpn-art-hut__bars { stroke: #2a3a68; stroke-width: 1.4; }
.tp-nation .tpn-art-hut__steps { stroke: #c79a4a; stroke-width: 1.4; }
.tp-nation .tpn-art-barrier__rail { fill: #f6eedc; }
.tp-nation .tpn-art-barrier__stripe { fill: #ff7a6b; }
.tp-nation .tpn-art-barrier__leg { stroke: #c9d6ea; stroke-width: 1.4; }
.tp-nation .tpn-art-crane .tpn-art-hook { fill: none; stroke: #c9d6ea; stroke-width: 1.4; stroke-linecap: round; }

/* The Building Site follows the harbor's time of day (UTC, like the banner above it): _Chronicle puts
   tpn-time--<ambience> on the ledger. The plates above are dusk; night cools the horizon, dawn and day light the sky
   and take the moon and stars away, and by day the quay, the water and the far city come out of the dark. Each stage
   keeps its own light (the release's warm glow, the test screen's cyan, the shelved plot's overcast). */
.tp-nation .tpn-ledger.tpn-time--night {
    --tpn-site-sky: linear-gradient(180deg, #050a22 0%, #0c1638 62%, #1f3262 100%);
    --tpn-site-glow: rgba(120, 150, 210, 0.28);
}
.tp-nation .tpn-ledger.tpn-time--dawn {
    --tpn-site-sky: linear-gradient(180deg, #26325a 0%, #5c6284 62%, #bc98a4 100%);
    --tpn-site-glow: rgba(242, 198, 170, 0.48);
}
.tp-nation .tpn-ledger.tpn-time--day {
    --tpn-site-sky: linear-gradient(180deg, #1646a0 0%, #3f7cca 62%, #9cc2e8 100%);
    --tpn-site-glow: rgba(216, 232, 244, 0.42);
}

.tp-nation .tpn-ledger.tpn-time--night .tpn-groundbreak__svg {
    background:
        radial-gradient(55% 30% at 50% 66%, var(--tpn-site-glow) 0%, transparent 72%),
        linear-gradient(180deg, #050a22 0%, #0c1638 45%, #1f3262 66%, #0e1834 80%, #0a1330 100%);
}
.tp-nation .tpn-ledger.tpn-time--dawn .tpn-groundbreak__svg {
    background:
        radial-gradient(55% 30% at 50% 66%, var(--tpn-site-glow) 0%, transparent 72%),
        linear-gradient(180deg, #26325a 0%, #5c6284 42%, #bc98a4 64%, #3a4264 80%, #262e4e 100%);
}
.tp-nation .tpn-ledger.tpn-time--day .tpn-groundbreak__svg {
    background:
        radial-gradient(55% 30% at 50% 66%, var(--tpn-site-glow) 0%, transparent 72%),
        linear-gradient(180deg, #1646a0 0%, #3f7cca 45%, #9cc2e8 64%, #2c5a94 80%, #1d4478 100%);
}

.tp-nation .tpn-ledger:is(.tpn-time--night, .tpn-time--dawn, .tpn-time--day) .tpn-vignette {
    background: radial-gradient(90% 60% at 50% 100%, var(--tpn-site-glow) 0%, transparent 70%), var(--tpn-site-sky);
}
.tp-nation .tpn-ledger:is(.tpn-time--night, .tpn-time--dawn, .tpn-time--day) .tpn-vignette--released {
    background:
        radial-gradient(70% 60% at 50% 30%, rgba(255, 214, 148, 0.35) 0%, rgba(255, 214, 148, 0) 70%),
        radial-gradient(90% 60% at 50% 100%, rgba(255, 174, 102, 0.42) 0%, rgba(255, 174, 102, 0) 70%),
        var(--tpn-site-sky);
}
.tp-nation .tpn-ledger:is(.tpn-time--night, .tpn-time--dawn, .tpn-time--day) .tpn-vignette--testing {
    background:
        radial-gradient(60% 55% at 50% 40%, rgba(127, 233, 255, 0.16) 0%, rgba(127, 233, 255, 0) 70%),
        var(--tpn-site-sky);
}
.tp-nation .tpn-ledger:is(.tpn-time--night, .tpn-time--dawn, .tpn-time--day) .tpn-vignette--shelved {
    background: linear-gradient(180deg, rgba(21, 29, 51, 0.6) 0%, rgba(42, 49, 80, 0.6) 100%), var(--tpn-site-sky);
}

.tp-nation .tpn-ledger.tpn-time--night .tpn-art-far { fill: #121e40; }
.tp-nation .tpn-ledger.tpn-time--dawn .tpn-art-far { fill: #5a6280; }
.tp-nation .tpn-ledger.tpn-time--dawn .tpn-art-deck { fill: #3a4264; }
.tp-nation .tpn-ledger.tpn-time--dawn .tpn-art-water { fill: #2e3858; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-far { fill: #7896bc; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-deck { fill: #3b5078; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-face,
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-ground rect { fill: #26395e; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-ground path { stroke: #26395e; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-pile path { stroke: #1a2a48; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-water { fill: #2a64a6; opacity: 0.9; }
.tp-nation .tpn-ledger.tpn-time--day .tpn-art-glint { stroke: #e6f0ff; stroke-opacity: 0.5; }
.tp-nation .tpn-ledger:is(.tpn-time--dawn, .tpn-time--day) :is(.tpn-art-moon, .tpn-art-stars) { display: none; }

.tp-nation .tpn-plate--site { font-size: 1.08rem; }

.tp-nation .tpn-groundbreak__body {
    max-width: 36rem;
    margin: 1.1rem auto 0;
    text-align: center;
}

.tp-nation .tpn-groundbreak__body .tpn-empty--ledger { margin: 0; }
.tp-nation .tpn-stages--ghost { opacity: 0.8; }
.tp-nation .tpn-groundbreak__body .tpn-stages { text-align: start; }

/* The dimmed track under the launch-day text is centred like the text and the plate above it: four equal columns,
   each node centred over its label, the rails running node centre to node centre (so its visual span, first node
   to last label, is symmetric; an auto track would end short of the grid box on the right). Below 460 px the track
   turns vertical like every other one. */
@container tpn-ledger (min-width: 460.02px) {
    .tp-nation .tpn-groundbreak__body .tpn-stages {
        grid-template-columns: repeat(4, minmax(min-content, 1fr));
        margin-top: 1.2rem;
        text-align: center;
    }

    .tp-nation .tpn-groundbreak__body .tpn-stage {
        justify-items: center;
        padding-inline: 0.4rem;
    }

    .tp-nation .tpn-groundbreak__body .tpn-stage::before {
        inset-inline-start: calc(50% + 12px);
        inset-inline-end: calc(-50% + 12px);
    }
}

/* ledger on narrow widths: drawing and title side by side, the rest full width */
@container tpn-ledger (max-width: 540px) {
    .tp-nation .tpn-entry {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 0 1rem;
        padding: 1.25rem 0 1.2rem;
    }

    .tp-nation .tpn-entry__body { display: contents; }
    .tp-nation .tpn-entry__art { grid-row: 1 / span 2; }
    .tp-nation .tpn-build__title { grid-column: 2; align-self: end; }
    .tp-nation .tpn-build__origin { grid-column: 2; align-self: start; }
    .tp-nation .tpn-entry .tpn-stages,
    .tp-nation .tpn-build__log { grid-column: 1 / -1; }
    .tp-nation .tpn-groundbreak__body .tpn-empty--ledger { font-size: 1rem; }
    .tp-nation .tpn-plate { padding: 0.18rem 0.55rem 0.2rem; }
    .tp-nation .tpn-plate__label { font-size: 0.64rem; letter-spacing: 0.1em; }
    .tp-nation .tpn-plate__no { font-size: 1.02rem; }
}

/* a 320 px phone: "Chosen in <poll>" leaves the drawing's side and takes the full width (long single words) */
@container tpn-ledger (max-width: 330px) {
    .tp-nation .tpn-entry__art { grid-row: 1; }
    .tp-nation .tpn-build__title { align-self: center; }
    .tp-nation .tpn-build__origin { grid-column: 1 / -1; margin-top: 0.6rem; }
}

/* the track goes vertical when four labels no longer fit side by side */
@container tpn-ledger (max-width: 460px) {
    .tp-nation .tpn-stages {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 0.9rem;
    }

    .tp-nation .tpn-stage {
        grid-template-columns: 16px minmax(0, 1fr);
        align-items: center;
        gap: 0.7rem;
        padding: 0 0 0.55rem;
    }

    .tp-nation[dir="rtl"] .tpn-stage { padding: 0 0 0.55rem; }

    .tp-nation .tpn-stage::before {
        top: 17px;
        bottom: 0;
        inset-inline-start: 7px;
        inset-inline-end: auto;
        width: 2px;
        height: auto;
    }

    .tp-nation .tpn-stages .tpn-stage--shelved::before { display: none; }
    .tp-nation .tpn-stage--final .tpn-stage__node { margin: 0; margin-inline-start: -1px; }
}

/* ---------------------------------------------------------------- the vote panel */

.tp-nation .tpn-panel {
    position: relative;
    padding: 1.35rem 1.4rem 1.2rem;
    border-radius: 18px;
    border: 1px solid rgba(243, 211, 138, 0.42);
    background: linear-gradient(180deg, rgba(20, 40, 74, 0.97) 0%, rgba(11, 24, 47, 0.98) 100%);
    box-shadow: 0 30px 70px rgba(2, 6, 16, 0.5), inset 0 1px 0 rgba(255, 244, 207, 0.08);
    color: var(--tpn-ivory);
    container: tpn-panel / inline-size;
}

.tp-nation .tpn-panel::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 14px;
    border: 1px solid rgba(243, 211, 138, 0.12);
    pointer-events: none;
}

.tp-nation .tpn-panel > * { position: relative; }

/* on the homepage hero: frosted glass over the harbor scene */
.tp-nation .tpn-hero__panel .tpn-panel {
    background: rgba(9, 18, 38, 0.9);
    border-color: rgba(243, 211, 138, 0.5);
    /* muted text one step brighter over the scene: >= 4.5:1 over the brightest sunset behind the glass
       (measured with contrast.py at 1024-1920 px, every ambience) */
    --tpn-ivory-mute: rgba(252, 247, 239, 0.66);
}

@media (min-width: 992px) {
    @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
        .tp-nation .tpn-hero__panel .tpn-panel {
            background: linear-gradient(180deg, rgba(12, 24, 50, 0.74) 0%, rgba(9, 17, 36, 0.8) 45%, rgba(8, 15, 32, 0.86) 100%);
            -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
        }
    }
}

/* The hero panel fits the first screen of a 1440x900 laptop in every state (panel top at 113 px there, NationHero's
   padding): its primary action (Cast your vote / Change selection / Become a Citizen / Follow the build) and the
   guardrail note are visible on arrival. Measured with tools/hero.mjs, see INTEGRATION 4. */
.tp-nation .tpn-hero__panel .tpn-panel { padding: 1rem 1.15rem 0.8rem; }
.tp-nation .tpn-hero__panel .tpn-panel__head { padding-bottom: 0.65rem; }
.tp-nation .tpn-hero__panel .tpn-panel .tpn-notice[role="status"] { margin-top: 0.7rem; padding-block: 0.5rem 0.52rem; }
.tp-nation .tpn-hero__panel .tpn-panel .tpn-notice[role="status"]::before { top: 0.52rem; }
.tp-nation .tpn-hero__panel .tpn-panel__title { margin: 0.7rem 0 0.35rem; font-size: 1.3rem; }
.tp-nation .tpn-hero__panel .tpn-panel__scope { font-size: 0.86rem; line-height: 1.5; }
.tp-nation .tpn-hero__panel .tpn-panel__meta { margin: 0.65rem 0 0.7rem; }
.tp-nation .tpn-hero__panel .tpn-panel__when { padding: 0.38rem 0; }
.tp-nation .tpn-hero__panel .tpn-options { gap: 0.35rem; margin-bottom: 0.7rem; }
.tp-nation .tpn-hero__panel .tpn-option { padding: 0.5rem 0.8rem 0.55rem; row-gap: 0.15rem; }
.tp-nation .tpn-hero__panel .tpn-option__desc { font-size: max(0.78rem, 11px); line-height: 1.38; }
.tp-nation .tpn-hero__panel .tpn-cta--cast { min-height: 44px; }
.tp-nation .tpn-hero__panel .tpn-panel__actions { margin-top: 0.75rem; }
.tp-nation .tpn-hero__panel .tpn-follow { margin-bottom: 0.75rem; padding-block: 0.4rem; }
.tp-nation .tpn-hero__panel .tpn-panel__next { margin-top: 0.7rem; padding-block: 0.45rem; }
.tp-nation .tpn-hero__panel .tpn-panel__fineprint { margin-top: 0.7rem; padding-top: 0.55rem; font-size: max(0.74rem, 11px); line-height: 1.45; }
/* The option cards with their radios say "choose one" by themselves on the hero: the legend stays for screen readers
   (the fieldset keeps its name) and leaves the screen. */
.tp-nation .tpn-hero__panel .tpn-ballot legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* Results on the hero: the options' descriptions are for choosing; once the vote has ended they give way, so the
   panel stays within one screen. */
.tp-nation .tpn-hero__panel .tpn-panel--ended .tpn-option__desc,
.tp-nation .tpn-hero__panel .tpn-panel--announced .tpn-option__desc { display: none; }
/* The same once the viewer has voted in an open poll (tpn-panel--voted): they have read the options and chosen,
   the live standings (each option's votes and its bar) take the descriptions' place, and the memberships behind the locked
   weight stay on the Town Square. Before voting (no standings yet) the hero keeps the descriptions for choosing.
   Once the viewer has voted, or the vote has ended, the decision scope under the question gives way as well (it is
   on the poll page and the Town Square panel); before voting it stays. */
.tp-nation .tpn-hero__panel .tpn-panel--voted .tpn-option__desc,
.tp-nation .tpn-hero__panel .tpn-panel--open .tpn-power__mix,
.tp-nation .tpn-hero__panel .tpn-panel--voted .tpn-panel__scope,
.tp-nation .tpn-hero__panel .tpn-panel--ended .tpn-panel__scope,
.tp-nation .tpn-hero__panel .tpn-panel--announced .tpn-panel__scope,
.tp-nation .tpn-hero__panel .tpn-panel--open .tpn-welcome { display: none; }
.tp-nation .tpn-hero__panel .tpn-panel--voted .tpn-result { margin-top: 0.2rem; }
.tp-nation .tpn-hero__panel .tpn-panel--voted .tpn-option { padding-block: 0.4rem 0.45rem; }
.tp-nation .tpn-hero__panel .tpn-panel--open .tpn-power { gap: 0.1rem 0.75rem; margin-bottom: 0.75rem; padding: 0.45rem 0.75rem; }
.tp-nation .tpn-hero__panel .tpn-panel--open .tpn-power__token { width: 42px; height: 42px; }
.tp-nation .tpn-hero__panel .tpn-panel--open .tpn-power__value { font-size: 1.2rem; }
.tp-nation .tpn-hero__panel .tpn-panel--announced .tpn-result,
.tp-nation .tpn-hero__panel .tpn-panel--ended .tpn-result { margin-top: 0.25rem; }

.tp-nation .tpn-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.8rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(243, 211, 138, 0.22);
}

.tp-nation .tpn-panel__eyebrow {
    margin: 0;
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 255, 134, 0.42);
    background: rgba(201, 255, 134, 0.08);
    color: var(--tpn-lime);
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-nation .tpn-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.tp-nation .tpn-live--closed { border-color: rgba(252, 247, 239, 0.25); background: rgba(252, 247, 239, 0.05); color: rgba(252, 247, 239, 0.75); }
.tp-nation .tpn-live--closed::before { box-shadow: none; }
.tp-nation .tpn-live--cancelled { border-color: rgba(255, 122, 107, 0.55); background: rgba(255, 122, 107, 0.08); color: #ffa196; }
.tp-nation .tpn-live--cancelled::before { box-shadow: none; }
.tp-nation .tpn-live--result { border-color: rgba(243, 211, 138, 0.5); background: rgba(243, 211, 138, 0.1); color: var(--tpn-gold-soft); }
.tp-nation .tpn-live--result::before { border-radius: 0; width: 8px; height: 8px; box-shadow: none; clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 57%, 79% 92%, 50% 71%, 21% 92%, 31% 57%, 2% 35%, 38% 34%); }

.tp-nation .tpn-panel .tpn-notice[role="status"] { margin: 0.9rem 0 0; }

.tp-nation .tpn-panel__title {
    margin: 0.95rem 0 0.45rem;
    font-family: var(--tpn-serif);
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--tpn-ivory);
    text-wrap: balance;
}

.tp-nation .tpn-panel__scope {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--tpn-ivory-dim);
}

/* launch day: the sealed ballot box */
.tp-nation .tpn-panel__idle {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin: 1rem 0 0.7rem;
}

.tp-nation .tpn-panel__idle .tpn-panel__title { margin: 0; font-size: 1.3rem; }
.tp-nation .tpn-panel__art { display: block; width: 72px; height: auto; }
.tp-nation .tpn-art-slip { fill: #f6eedc; stroke: #b88a3e; }
.tp-nation .tpn-art-slip__lines { fill: none; stroke: rgba(58, 51, 37, 0.45); stroke-width: 1.4; }
.tp-nation .tpn-art-box { fill: #1c2e58; stroke: #e7b64b; stroke-width: 1.3; }
.tp-nation .tpn-art-box__lid { stroke: #f3d38a; stroke-width: 2.4; stroke-linecap: round; }
.tp-nation .tpn-art-box__slot { fill: #060d1d; }
.tp-nation .tpn-art-box__trim { stroke: rgba(243, 211, 138, 0.4); }
.tp-nation .tpn-art-box__seal { fill: #9a2436; stroke: #c9505f; }

/* the closing (or opening) time; closed voting: no count of voters or votes stands under it */
.tp-nation .tpn-panel__meta {
    margin: 1.05rem 0 1.05rem;
    border-top: 1px solid rgba(243, 211, 138, 0.26);
    border-bottom: 1px solid rgba(243, 211, 138, 0.26);
}

.tp-nation .tpn-panel__when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.55rem;
    margin: 0;
    padding: 0.6rem 0;
    border-bottom: 1px dashed rgba(252, 247, 239, 0.14);
    font-size: 0.86rem;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-panel__when-label,
.tp-nation .tpn-panel__next-label {
    font-size: max(0.72rem, 11px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-panel__when strong { font-weight: 600; color: var(--tpn-ivory); }

/* a vote held outside the site (the Citizens' vote on Discord) and recorded here: where it was held, under its date */
.tp-nation .tpn-panel__decided {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    margin: 0;
    padding: 0.62rem 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-panel__decided-mark {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tpn-gold-soft);
    box-shadow: 0 0 0 3px rgba(243, 211, 138, 0.16);
    transform: translateY(-1px);
}
/* the time line closes the meta block (only a recorded vote's "where" follows it) */
.tp-nation .tpn-panel__when:last-child { border-bottom: 0; }

/* welcome + voting power */
.tp-nation .tpn-welcome {
    margin: 0 0 0.6rem;
    font-family: var(--tpn-serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-power {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem 0.9rem;
    margin: 0 0 1.05rem;
    padding: 0.8rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(243, 211, 138, 0.3);
    background: linear-gradient(135deg, rgba(243, 211, 138, 0.11) 0%, rgba(243, 211, 138, 0.02) 100%);
}

.tp-nation .tpn-power__token {
    grid-row: span 3;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fff3cc 0%, #f0c865 42%, #c8912e 100%);
    box-shadow:
        inset 0 0 0 3px rgba(122, 79, 18, 0.35),
        inset 0 0 0 5px rgba(255, 244, 207, 0.55),
        inset 0 0 0 6px rgba(122, 79, 18, 0.3),
        0 6px 14px rgba(2, 6, 16, 0.4);
}

.tp-nation .tpn-power__value {
    font-family: var(--tpn-serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: #3a2606;
    font-variant-numeric: lining-nums;
}

.tp-nation .tpn-power__label {
    font-size: max(0.72rem, 11px);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-power__detail {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-power__lock {
    flex: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--tpn-gold-soft);
    stroke-width: 1.6;
}

.tp-nation .tpn-power__mix {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.2rem;
    font-size: max(0.72rem, 11px);
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-power__chip {
    padding: 0.06rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 211, 138, 0.3);
    color: var(--tpn-ivory-dim);
    white-space: nowrap;
}
.tp-nation .tpn-power__chip b { color: var(--tpn-gold-soft); font-weight: 700; }

/* notices: a calm slip with an icon, one per viewer situation */
.tp-nation .tpn-panel .tpn-notice {
    position: relative;
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem 0.72rem 2.45rem;
    border-radius: 10px;
    border: 1px solid rgba(252, 247, 239, 0.16);
    background: rgba(252, 247, 239, 0.05);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--tpn-ivory);
    --tpn-notice-ink: var(--tpn-gold-soft);
    --tpn-notice-icon: var(--tpn-i-warn);
}

.tp-nation[dir="rtl"] .tpn-panel .tpn-notice { padding: 0.7rem 2.45rem 0.72rem 0.85rem; }

.tp-nation .tpn-panel .tpn-notice::before {
    content: "";
    position: absolute;
    top: 0.72rem;
    inset-inline-start: 0.8rem;
    width: 18px;
    height: 18px;
    background: var(--tpn-notice-ink);
    -webkit-mask: var(--tpn-notice-icon) center / contain no-repeat;
    mask: var(--tpn-notice-icon) center / contain no-repeat;
}

.tp-nation .tpn-panel .tpn-notice--ok { border-color: rgba(201, 255, 134, 0.42); background: rgba(201, 255, 134, 0.07); --tpn-notice-ink: var(--tpn-lime); --tpn-notice-icon: var(--tpn-i-ok); }
.tp-nation .tpn-panel .tpn-notice--warn { border-color: rgba(255, 122, 107, 0.48); background: rgba(255, 122, 107, 0.08); --tpn-notice-ink: #ff9d91; --tpn-notice-icon: var(--tpn-i-warn); }
.tp-nation .tpn-panel .tpn-notice--pause { border-color: rgba(243, 211, 138, 0.38); background: rgba(243, 211, 138, 0.07); --tpn-notice-icon: var(--tpn-i-pause); }
.tp-nation .tpn-panel .tpn-notice--gift { border-color: rgba(243, 211, 138, 0.38); background: rgba(243, 211, 138, 0.07); --tpn-notice-icon: var(--tpn-i-gift); }
.tp-nation .tpn-panel .tpn-notice--former { --tpn-notice-ink: var(--tpn-ivory-dim); --tpn-notice-icon: var(--tpn-i-former); }
.tp-nation .tpn-panel .tpn-notice--count { border-color: rgba(127, 233, 255, 0.36); background: rgba(127, 233, 255, 0.06); --tpn-notice-ink: var(--tpn-cyan); --tpn-notice-icon: var(--tpn-i-count); }
.tp-nation .tpn-panel .tpn-notice .tpn-link { white-space: nowrap; }

/* the ballot: option cards with real radio inputs */
.tp-nation .tpn-ballot {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tp-nation .tpn-ballot legend {
    float: none;
    width: auto;
    margin: 0 0 0.6rem;
    padding: 0;
    font-size: max(0.72rem, 11px);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-options {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.05rem;
    padding: 0;
    list-style: none;
}

.tp-nation .tpn-option {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 0.25rem 0.8rem;
    align-items: start;
    margin: 0;
    padding: 0.8rem 0.9rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(252, 247, 239, 0.15);
    background: rgba(252, 247, 239, 0.035);
    color: var(--tpn-ivory);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tp-nation .tpn-option:hover { border-color: rgba(243, 211, 138, 0.55); background-color: rgba(243, 211, 138, 0.05); }

.tp-nation .tpn-option input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 0.05rem 0 0;
    border-radius: 50%;
    border: 1.5px solid rgba(252, 247, 239, 0.55);
    background: rgba(6, 13, 29, 0.5);
    cursor: pointer;
}

.tp-nation .tpn-option input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tpn-gold);
    transform: scale(0);
    transition: transform 0.15s ease;
}

.tp-nation .tpn-option input[type="radio"]:checked { border-color: var(--tpn-gold); }
.tp-nation .tpn-option input[type="radio"]:checked::before { transform: scale(1); }
.tp-nation .tpn-option input[type="radio"]:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 3px; }

.tp-nation .tpn-option:has(input:checked) {
    border-color: var(--tpn-gold);
    background: linear-gradient(135deg, rgba(243, 211, 138, 0.15) 0%, rgba(243, 211, 138, 0.04) 100%);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.3);
}

.tp-nation .tpn-option:has(input:focus-visible) { border-color: var(--tpn-cyan); }

.tp-nation .tpn-option__title {
    grid-column: 2;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.tp-nation .tpn-option__desc {
    grid-column: 2;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-option--readonly { cursor: default; }
.tp-nation .tpn-option--readonly:hover { border-color: rgba(252, 247, 239, 0.15); background-color: rgba(252, 247, 239, 0.035); }

.tp-nation .tpn-option__marker {
    grid-row: 1;
    width: 20px;
    height: 20px;
    margin-top: 0.05rem;
}

.tp-nation .tpn-option__marker::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin: 6.5px auto 0;
    transform: rotate(45deg);
    background: rgba(243, 211, 138, 0.55);
}

.tp-nation .tpn-option--winner .tpn-option__marker::before { display: none; }

/* Your choice once voting is over: nothing round (a filled circle would read as a radio you can still press). The
   list's diamond turns solid gold inside a thin diamond outline, and the title carries a written "(your choice)". */
.tp-nation .tpn-option--chosen { border-color: rgba(243, 211, 138, 0.55); }
.tp-nation .tpn-option--chosen .tpn-option__marker::before {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    background: var(--tpn-gold);
    box-shadow: 0 0 0 2px rgba(11, 24, 47, 0.9), 0 0 0 3px var(--tpn-gold);
}

/* the title and the annotation wrap as two pieces: when the annotation needs a new line it starts at the title's edge */
.tp-nation .tpn-option--chosen .tpn-option__title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; }

.tp-nation .tpn-option__tag {
    font-family: var(--tpn-serif);
    font-style: italic;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--tpn-gold-soft);
    white-space: nowrap;
}
.tp-nation[dir="rtl"] .tpn-option__tag { font-style: normal; }
.tp-nation .tpn-option__tag--winner { font-weight: 700; color: #ffe39a; }
.tp-nation .tpn-option--winner .tpn-option__title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.4em; }

/* announced: why the winner won (Rule VII's order), in words */
.tp-nation .tpn-result-why {
    margin: -0.2rem 0 1rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 2px solid rgba(243, 211, 138, 0.55);
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--tpn-ivory-dim);
}
.tp-nation .tpn-hero__panel .tpn-result-why { margin-bottom: 0.75rem; font-size: max(0.78rem, 11px); }

.tp-nation .tpn-option--winner,
.tp-nation .tpn-option--winner:hover {
    border-color: rgba(243, 211, 138, 0.75);
    background: linear-gradient(135deg, rgba(243, 211, 138, 0.18) 0%, rgba(243, 211, 138, 0.05) 100%);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.25), 0 8px 22px rgba(2, 6, 16, 0.3);
}

.tp-nation .tpn-option--winner .tpn-option__marker {
    width: 22px;
    height: 22px;
    margin: -0.1rem 0 0 -1px;
    border: 0;
    background: none;
}
.tp-nation .tpn-option--winner .tpn-option__marker svg { display: block; width: 100%; height: 100%; }
.tp-nation .tpn-seal-mini { fill: var(--tpn-gold); }
.tp-nation .tpn-seal-mini__ring { fill: none; stroke: #8f6118; stroke-width: 0.8; }
.tp-nation .tpn-seal-mini__tail { fill: #c9505f; }
.tp-nation .tpn-seal-mini__star { fill: #3a2606; }
.tp-nation .tpn-option--winner .tpn-option__title { color: #fff1c9; }

/* closed voting: an option's standing is its votes and one bar for its share of all the votes (never how many
   people voted). The label column has a floor, so the bars start at the same x in every option (the fills stay
   comparable). */
.tp-nation .tpn-result {
    grid-column: 2;
    display: grid;
    grid-template-columns: minmax(6.5em, max-content) minmax(3rem, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.45rem;
}

/* the one number a result shows: a touch brighter than the small print around it, gold-white on the winner */
.tp-nation .tpn-result__label {
    font-size: max(0.78rem, 11px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--tpn-ivory);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tp-nation .tpn-option--winner .tpn-result__label { color: #fff1c9; }

.tp-nation .tpn-bar {
    display: block;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(252, 247, 239, 0.09);
}

.tp-nation .tpn-bar__fill {
    display: block;
    height: 100%;
    width: var(--tpn-pct, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #d9a441, var(--tpn-weight));
}

.tp-nation .tpn-option--winner .tpn-bar__fill { background: linear-gradient(90deg, #f0c865, #fff1c9); }
.tp-nation[dir="rtl"] .tpn-bar__fill { background: linear-gradient(270deg, #d9a441, var(--tpn-weight)); }
.tp-nation[dir="rtl"] .tpn-option--winner .tpn-bar__fill { background: linear-gradient(270deg, #f0c865, #fff1c9); }

@container tpn-panel (max-width: 330px) {
    /* the launch-day box sits above its title, so a long single word ("Bürgerabstimmung") keeps the full width */
    .tp-nation .tpn-panel__idle { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
    .tp-nation .tpn-panel__art { width: 60px; }
}

.tp-nation .tpn-panel__footer {
    display: grid;
    gap: 0.6rem;
}

.tp-nation .tpn-cta--cast {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
}

.tp-nation .tpn-panel__actions { margin: 0.9rem 0 0.2rem; }
.tp-nation .tpn-options + .tpn-panel__actions { margin-top: 0; }

/* announced: follow the build to its plot */
.tp-nation .tpn-follow {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.1rem;
    padding: 0.5rem 0.9rem 0.5rem 0.5rem;
    border-radius: 12px;
    border: 1px solid rgba(243, 211, 138, 0.45);
    background: rgba(243, 211, 138, 0.07);
    color: var(--tpn-gold-soft);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tp-nation[dir="rtl"] .tpn-follow { padding: 0.5rem 0.5rem 0.5rem 0.9rem; }
.tp-nation .tpn-follow:hover { color: #fff1c9; border-color: var(--tpn-gold); background: rgba(243, 211, 138, 0.12); text-decoration: none; }
.tp-nation .tpn-follow:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 3px; }

.tp-nation .tpn-follow__plate {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff0bf 0%, #efc566 48%, #c8912e 100%);
    color: #2a1a02;
    white-space: nowrap;
}
.tp-nation .tpn-follow__plate span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.tp-nation .tpn-follow__plate b { font-family: var(--tpn-serif); font-size: 1rem; line-height: 1; }

.tp-nation .tpn-follow__text { flex: 1 1 auto; }
.tp-nation .tpn-follow__text::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-start: 0.4em;
    vertical-align: -0.15em;
    background: currentColor;
    -webkit-mask: var(--tpn-i-arrow) center / contain no-repeat;
    mask: var(--tpn-i-arrow) center / contain no-repeat;
}
.tp-nation[dir="rtl"] .tpn-follow__text::after { transform: scaleX(-1); }

.tp-nation .tpn-panel__next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    margin: 1rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px dashed rgba(243, 211, 138, 0.4);
    font-size: 0.86rem;
    color: var(--tpn-ivory);
}

/* "Also open": the other polls open right now, each linking to its own page (below the panel, so the panel keeps its
   first-screen fit on the hero) */
.tp-nation .tpn-also {
    margin: 0.9rem 0 0;
    padding: 0.85rem 1.1rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(243, 211, 138, 0.34);
    background: rgba(9, 18, 38, 0.86);
    box-shadow: 0 18px 40px rgba(2, 6, 16, 0.35);
    color: var(--tpn-ivory);
}

.tp-nation .tpn-also__title {
    margin: 0 0 0.45rem;
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation[dir="rtl"] .tpn-also__title { letter-spacing: 0; font-size: 0.82rem; }
.tp-nation .tpn-also__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.tp-nation .tpn-also__item { display: grid; gap: 0.1rem; padding-top: 0.5rem; border-top: 1px solid rgba(252, 247, 239, 0.1); }
.tp-nation .tpn-also__item:first-child { padding-top: 0; border-top: 0; }

.tp-nation .tpn-also__link {
    font-family: var(--tpn-serif);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--tpn-ivory);
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.45);
    text-underline-offset: 3px;
}

.tp-nation .tpn-also__link:hover { color: #fff1c9; text-decoration-color: currentColor; }
.tp-nation .tpn-also__link:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 2px; border-radius: 3px; }
.tp-nation .tpn-also__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; font-size: 0.8rem; color: var(--tpn-ivory-dim); }

.tp-nation .tpn-panel__next-label { color: var(--tpn-gold-soft); }

.tp-nation .tpn-panel__fineprint {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(252, 247, 239, 0.1);
    font-size: max(0.76rem, 11px);
    line-height: 1.55;
    color: var(--tpn-ivory-mute);
}

/* ---------------------------------------------------------------- the Citizen Charter */

.tp-nation.tpn-section--charter {
    background:
        radial-gradient(62% 560px at 50% 400px, rgba(35, 78, 128, 0.42) 0%, rgba(35, 78, 128, 0) 70%),
        linear-gradient(180deg, #0b1b39 0%, #0c1c3a 30%, #0a1730 100%);
}

.tp-nation .tpn-charter {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.2rem, 5vw, 4rem) clamp(1.4rem, 5.5vw, 4.5rem) clamp(2rem, 4vw, 3.2rem);
    border-radius: 6px;
    color: var(--tpn-paper-text);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(55% 45% at 100% 100%, rgba(190, 142, 62, 0.18) 0%, rgba(190, 142, 62, 0) 70%),
        radial-gradient(45% 40% at 0% 100%, rgba(190, 142, 62, 0.14) 0%, rgba(190, 142, 62, 0) 70%),
        radial-gradient(40% 30% at 0% 0%, rgba(190, 142, 62, 0.1) 0%, rgba(190, 142, 62, 0) 70%),
        var(--tpn-paper);
    box-shadow: 0 40px 90px rgba(2, 6, 16, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 0 60px rgba(160, 118, 48, 0.12);
    font-family: var(--tpn-serif);
}

/* a printed double frame with small diamond corners */
.tp-nation .tpn-charter::before,
.tp-nation .tpn-charter::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 2px;
}
.tp-nation .tpn-charter::before { inset: 14px; border: 1.5px solid var(--tpn-paper-rule); }
.tp-nation .tpn-charter::after {
    inset: 19px;
    border: 0.5px solid rgba(143, 101, 36, 0.4);
    background:
        linear-gradient(45deg, transparent 45%, var(--tpn-paper-rule) 46% 54%, transparent 55%) 0 0 / 9px 9px no-repeat,
        linear-gradient(45deg, transparent 45%, var(--tpn-paper-rule) 46% 54%, transparent 55%) 100% 0 / 9px 9px no-repeat,
        linear-gradient(45deg, transparent 45%, var(--tpn-paper-rule) 46% 54%, transparent 55%) 0 100% / 9px 9px no-repeat,
        linear-gradient(45deg, transparent 45%, var(--tpn-paper-rule) 46% 54%, transparent 55%) 100% 100% / 9px 9px no-repeat;
}

.tp-nation .tpn-charter > * { position: relative; }

.tp-nation .tpn-charter__head { max-width: 44rem; margin: 0 auto; text-align: center; }

.tp-nation .tpn-charter__kicker {
    margin: 0;
    font-family: var(--tpn-font);
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--tpn-paper-gold);
}

.tp-nation .tpn-charter__title {
    margin: 0.6rem 0 0.7rem;
    font-family: var(--tpn-serif);
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.01em;
    color: var(--tpn-paper-ink);
    text-wrap: balance;
}

.tp-nation .tpn-charter__preamble {
    margin: 0 auto;
    max-width: 36rem;
    font-style: italic;
    font-size: clamp(1.02rem, 1.4vw, 1.15rem);
    line-height: 1.55;
    color: #4d4330;
}

.tp-nation .tpn-charter__ornament {
    display: block;
    position: relative;
    width: min(260px, 70%);
    height: 12px;
    margin: 1.4rem auto 0;
    background:
        linear-gradient(90deg, rgba(143, 101, 36, 0) 0%, var(--tpn-paper-rule) 30%, var(--tpn-paper-rule) calc(50% - 12px), transparent calc(50% - 18px), transparent calc(50% + 18px), var(--tpn-paper-rule) calc(50% + 18px), var(--tpn-paper-rule) 70%, rgba(143, 101, 36, 0) 100%) center / 100% 1px no-repeat;
}

/* the centre of the rule: a red lozenge flanked by two small ones in the rule's gold (rotated squares; the flanking
   ones are box-shadows of the small square, offset along its diagonal so they land level with it) */
.tp-nation .tpn-charter__ornament::before,
.tp-nation .tpn-charter__ornament::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.tp-nation .tpn-charter__ornament::before {
    width: 8px;
    height: 8px;
    background: var(--tpn-paper-red);
    box-shadow: 0 0 0 1.5px var(--tpn-paper), 0 0 0 2.5px rgba(154, 36, 54, 0.45);
}
.tp-nation .tpn-charter__ornament::after {
    width: 3.5px;
    height: 3.5px;
    background: transparent;
    box-shadow: 8.5px -8.5px 0 var(--tpn-paper-rule), -8.5px 8.5px 0 var(--tpn-paper-rule);
}

.tp-nation .tpn-articles {
    counter-reset: tpn-article;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.7rem clamp(2rem, 5vw, 4rem);
    margin: clamp(2rem, 4vw, 2.8rem) 0 0;
    padding: 0;
    list-style: none;
}

.tp-nation .tpn-article {
    counter-increment: tpn-article;
    position: relative;
    min-width: 0;
    padding-inline-start: 3.1rem;
}

.tp-nation .tpn-article::before {
    content: counter(tpn-article, upper-roman);
    position: absolute;
    top: -0.05rem;
    inset-inline-start: 0;
    width: 2.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(154, 36, 54, 0.45);
    text-align: center;
    font-family: var(--tpn-serif);
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--tpn-paper-red);
}

.tp-nation .tpn-article__title {
    margin: 0 0 0.35rem;
    font-family: var(--tpn-serif);
    font-size: 1.14rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tpn-paper-ink);
}

.tp-nation .tpn-article__text {
    margin: 0;
    font-family: var(--tpn-serif);
    font-size: 1rem;
    line-height: 1.62;
    color: var(--tpn-paper-text);
}

.tp-nation .tpn-charter__annex {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem clamp(2rem, 5vw, 4rem);
    margin-top: clamp(2.2rem, 4vw, 3rem);
    padding-top: clamp(1.6rem, 3vw, 2.2rem);
    border-top: 3px double var(--tpn-paper-rule);
}

.tp-nation .tpn-schedule { min-width: 0; max-width: 600px; }

.tp-nation .tpn-schedule__title {
    margin: 0 0 0.9rem;
    font-family: var(--tpn-serif);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--tpn-paper-ink);
}

/* the weights table, each weight drawn as a wall of license-key blocks: one block per key, courses of five */
.tp-nation .tpn-weights {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--tpn-font);
    font-variant-numeric: tabular-nums;
}

.tp-nation .tpn-weights th,
.tp-nation .tpn-weights td {
    padding: 0.5rem 0.4rem;
    border-bottom: 1px solid rgba(143, 101, 36, 0.24);
    text-align: start;
    vertical-align: bottom;
}

/* the tier and its number sit level with the middle of the key wall beside them, not at the foot of a tall one */
.tp-nation .tpn-weights tbody th,
.tp-nation .tpn-weights tbody td { vertical-align: middle; }

.tp-nation .tpn-weights th:first-child { padding-inline-start: 0; }
.tp-nation .tpn-weights td:last-child,
.tp-nation .tpn-weights th:last-child { padding-inline-end: 0; text-align: end; }

.tp-nation .tpn-weights thead th {
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #6b5530;
    border-bottom: 1px solid var(--tpn-paper-rule);
}

.tp-nation .tpn-weights tbody th {
    width: 1%;
    padding-inline-end: 1.2rem;
    white-space: nowrap;
    font-family: var(--tpn-serif);
    font-size: 1.02rem;
    font-weight: 400;
    color: var(--tpn-paper-ink);
}

.tp-nation .tpn-weights__stack { width: 100%; vertical-align: bottom; }

.tp-nation .tpn-weights__n {
    width: 3.2rem;
    font-family: var(--tpn-serif);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tpn-paper-ink);
}

/* One course = up to five key blocks side by side, laid in running bond; the wall's area is the weight.
   Each block carries a keyhole so it reads as a key, never as a coin or a price. Ink-navy on the charter's paper. */
.tp-nation .tpn-keys {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 2px;
    padding: 3px 0 4px;
    vertical-align: bottom;
    --tpn-key: #1f3055;
    --tpn-key-top: #3c5383;
    --tpn-key-hole: #f6eedc;
}

.tp-nation .tpn-keys__row {
    display: block;
    width: calc(var(--tpn-n, 1) * 16px - 3px);
    height: 11px;
    background:
        radial-gradient(circle at 6.5px 4px, var(--tpn-key-hole) 0 1.9px, transparent 2.3px) 0 0 / 16px 11px repeat-x,
        linear-gradient(90deg, transparent 5.6px, var(--tpn-key-hole) 5.6px 7.4px, transparent 7.4px) 0 4.6px / 16px 4.4px repeat-x,
        linear-gradient(90deg, var(--tpn-key-top) 0 13px, transparent 13px) 0 0 / 16px 1.5px repeat-x,
        linear-gradient(90deg, var(--tpn-key) 0 13px, transparent 13px) 0 0 / 16px 100% repeat-x;
}

.tp-nation .tpn-keys__row:nth-child(even) { margin-inline-start: 8px; }

.tp-nation .tpn-schedule__note {
    margin: 0.9rem 0 0;
    font-family: var(--tpn-serif);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #4d4330;
}

.tp-nation .tpn-sum {
    display: inline-block;
    margin-inline-start: 0.35rem;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(143, 101, 36, 0.4);
    font-family: var(--tpn-font);
    font-style: normal;
    font-size: max(0.78rem, 11px);
    font-weight: 600;
    white-space: nowrap;
    color: var(--tpn-paper-gold);
}
.tp-nation .tpn-sum b { color: var(--tpn-paper-ink); }

/* the gold seal: it hangs into the charter's bottom padding, but its ribbons end inside the printed frame (inset
   19px); on narrower screens the padding shrinks (4vw), so the seal hangs less */
.tp-nation .tpn-seal {
    width: clamp(120px, 16vw, 184px);
    margin: 0 0 max(-1.2rem, 28px - clamp(2rem, 4vw, 3.2rem));
    transform: rotate(-9deg);
}

.tp-nation[dir="rtl"] .tpn-seal { transform: rotate(9deg); }
.tp-nation .tpn-seal__svg { display: block; width: 100%; height: auto; overflow: visible; }
.tp-nation .tpn-seal__ribbon path:first-child { fill: #9a2436; }
.tp-nation .tpn-seal__ribbon path:last-child { fill: #7c1c2b; }
.tp-nation .tpn-seal__rim { fill: #d4a03c; stroke: #8f6118; stroke-width: 0.8; }
.tp-nation .tpn-seal__face { fill: #e9bb55; }
.tp-nation .tpn-seal__line { fill: none; stroke: #8f6118; stroke-width: 0.8; }
.tp-nation .tpn-seal__path { fill: none; stroke: none; }
.tp-nation .tpn-seal__text {
    font-family: var(--tpn-font);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    fill: #5c3c0b;
}
.tp-nation .tpn-seal__ring { fill: #7a5212; }
.tp-nation .tpn-seal__center { fill: #f2cd72; stroke: #b0802a; stroke-width: 0.8; }
.tp-nation .tpn-seal__stars { fill: #8f6118; }
.tp-nation .tpn-seal__anchor { fill: none; stroke: #5c3c0b; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-nation .tpn-seal__anchor .tpn-seal__fluke { fill: #5c3c0b; stroke: none; }
/* the light on the seal stays on the raised centre (r 32 < the ring text at r 40-55), never across the ring text */
.tp-nation .tpn-seal__shine { fill: none; stroke: rgba(255, 249, 225, 0.8); stroke-width: 2.2; stroke-linecap: round; }


@media (max-width: 767.98px) {
    .tp-nation .tpn-articles { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .tp-nation .tpn-charter__annex { grid-template-columns: minmax(0, 1fr); }
    .tp-nation .tpn-seal { justify-self: end; margin: -0.5rem 0 -0.6rem; width: 112px; }
    .tp-nation .tpn-charter::before { inset: 9px; }
    .tp-nation .tpn-charter::after { inset: 13px; }
}

/* ---------------------------------------------------------------- the Hall of Records */

.tp-nation.tpn-section--records {
    background: linear-gradient(180deg, #0a1730 0%, #070f22 100%);
}

.tp-nation .tpn-register {
    position: relative;
    padding: clamp(1.6rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3rem);
    border-radius: 14px;
    border: 1px solid rgba(243, 211, 138, 0.38);
    background:
        linear-gradient(180deg, rgba(243, 211, 138, 0.06) 0%, rgba(243, 211, 138, 0.01) 45%),
        #0b1830;
    box-shadow: inset 0 0 0 6px #09142a, inset 0 0 0 7px rgba(243, 211, 138, 0.18), 0 26px 60px rgba(2, 6, 16, 0.45);
}

.tp-nation .tpn-register__head { text-align: center; }

.tp-nation .tpn-register__title {
    margin: 0.55rem 0 0;
    font-family: var(--tpn-serif);
    font-size: clamp(1.35rem, 0.9rem + 3.2vw, 2.7rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(255, 240, 200, 0.14);
}

.tp-nation .tpn-archive {
    margin: clamp(1.4rem, 3vw, 2rem) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(243, 211, 138, 0.4);
    counter-reset: none;
}

.tp-nation .tpn-record { border-bottom: 1px solid rgba(243, 211, 138, 0.15); }

.tp-nation .tpn-record__link {
    display: grid;
    grid-template-columns: 10px minmax(0, max-content) minmax(1.5rem, 1fr) auto;
    align-items: start;
    gap: 0 0.9rem;
    padding: 1rem 0.5rem;
    color: var(--tpn-ivory);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.tp-nation .tpn-record__link:hover { background: rgba(243, 211, 138, 0.05); color: var(--tpn-ivory); text-decoration: none; }
.tp-nation .tpn-record__link:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: -3px; border-radius: 6px; }

/* dotted leader from the title to the date, as in a printed register */
.tp-nation .tpn-record__link::after {
    content: "";
    order: 2;
    align-self: start;
    margin-top: 0.95em;
    border-bottom: 2px dotted rgba(243, 211, 138, 0.32);
}

.tp-nation .tpn-record__mark {
    order: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.55em;
    background: var(--tpn-gold);
    transform: rotate(45deg);
}

.tp-nation .tpn-record__main { order: 1; display: grid; gap: 0.2rem; min-width: 0; }

.tp-nation .tpn-record__title {
    font-family: var(--tpn-serif);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--tpn-ivory);
    overflow-wrap: break-word;
}

.tp-nation .tpn-record__link:hover .tpn-record__title { text-decoration: underline; text-decoration-color: rgba(243, 211, 138, 0.5); text-underline-offset: 3px; }

.tp-nation .tpn-record__winner {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-record__winner::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    background: var(--tpn-gold);
    clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 57%, 79% 92%, 50% 71%, 21% 92%, 31% 57%, 2% 35%, 38% 34%);
}

.tp-nation .tpn-record__where {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-record__where::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tpn-gold-soft);
    transform: translateY(-1px);
}

.tp-nation .tpn-record__when {
    order: 3;
    padding-top: 0.2em;
    font-size: max(0.74rem, 11px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tpn-ivory-mute);
    font-variant-numeric: tabular-nums;
}

.tp-nation .tpn-record--cancelled .tpn-record__mark { background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 122, 107, 0.8); }
.tp-nation .tpn-record--cancelled .tpn-record__title { color: var(--tpn-ivory-dim); }

.tp-nation .tpn-record__stamp {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border: 1.5px solid rgba(255, 122, 107, 0.85);
    border-radius: 3px;
    color: #ffa196;
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.14em;
    transform: rotate(-4deg);
}

@media (max-width: 575.98px) {
    .tp-nation .tpn-record__link {
        grid-template-columns: 10px minmax(0, 1fr);
        gap: 0.35rem 0.8rem;
        padding: 0.95rem 0.2rem;
    }
    .tp-nation .tpn-record__link::after { display: none; }
    .tp-nation .tpn-record__when { grid-column: 2; padding-top: 0; }
}

/* ---------------------------------------------------------------- the poll page */

.tp-nation.tpn-section--first { padding-top: clamp(7rem, 10vw, 9rem); }

.tp-nation .tpn-brief { min-width: 0; }

@media (max-width: 991.98px) {
    .tp-nation.tpn-section--first .tpn-layout > :last-child { width: min(100%, 600px); }
}

/* Desktop: the brief and the panel share the page as two columns of a document. The panel gets the wider column
   (its standings then sit side by side, one line of bars per option), and the brief (question, scope, the "doesn't
   decide" clause, back link) stays beside it while the reader scrolls through the results. */
@media (min-width: 992px) {
    .tp-nation.tpn-section--first .tpn-layout {
        --tpn-poll-gap: clamp(2.5rem, 5vw, 4.5rem);
        position: relative;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--tpn-poll-gap);
    }
    .tp-nation.tpn-section--first .tpn-brief {
        position: sticky;
        top: 5.5rem;
        padding-top: 0.5rem;
    }
    /* the spread's gutter: a gold hairline from a small lozenge down the full height of the panel, fading out, so the
       brief's column reads as the left page of a document spread, not as space left over */
    .tp-nation.tpn-section--first .tpn-layout::before,
    .tp-nation.tpn-section--first .tpn-layout::after {
        content: "";
        position: absolute;
        inset-inline-start: calc((100% - var(--tpn-poll-gap)) * 5 / 11 + var(--tpn-poll-gap) / 2);
        pointer-events: none;
    }
    .tp-nation.tpn-section--first .tpn-layout::before {
        top: 1.6rem;
        bottom: 0;
        width: 1px;
        margin-inline-start: -0.5px;
        background: linear-gradient(180deg, rgba(243, 211, 138, 0.5) 0%, rgba(243, 211, 138, 0.18) 55%, rgba(243, 211, 138, 0) 100%);
    }
    .tp-nation.tpn-section--first .tpn-layout::after {
        top: 0.9rem;
        width: 7px;
        height: 7px;
        margin-inline-start: -3.5px;
        transform: rotate(45deg);
        background: var(--tpn-gold-soft);
    }
}

.tp-nation .tpn-brief__title {
    margin: 0.8rem 0 0.8rem;
    font-family: var(--tpn-serif);
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--tpn-ivory);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.tp-nation .tpn-brief__scope {
    max-width: 40rem;
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--tpn-ivory-dim);
}

/* "What this vote doesn't decide": a clause slip in the charter's paper */
.tp-nation .tpn-clause {
    position: relative;
    max-width: 40rem;
    margin: 1.9rem 0 0;
    padding: 1.5rem 1.6rem 1.45rem;
    border-radius: 4px;
    background:
        radial-gradient(90% 80% at 100% 100%, rgba(190, 142, 62, 0.16) 0%, rgba(190, 142, 62, 0) 70%),
        var(--tpn-paper);
    color: var(--tpn-paper-text);
    box-shadow: 0 22px 50px rgba(2, 6, 16, 0.45), inset 0 0 40px rgba(160, 118, 48, 0.1);
}

.tp-nation .tpn-clause::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--tpn-paper-rule);
    border-radius: 2px;
    pointer-events: none;
}

.tp-nation .tpn-clause__title {
    position: relative;
    margin: 0 0 0.5rem;
    padding-inline-start: 1.6rem;
    font-family: var(--tpn-serif);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tpn-paper-ink);
}

/* "not" mark: a struck circle in charter red */
.tp-nation .tpn-clause__title::before {
    content: "";
    position: absolute;
    top: 0.2em;
    inset-inline-start: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid var(--tpn-paper-red);
    background: linear-gradient(45deg, transparent calc(50% - 1px), var(--tpn-paper-red) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.tp-nation .tpn-clause__text {
    position: relative;
    margin: 0;
    font-family: var(--tpn-serif);
    font-size: 1rem;
    line-height: 1.62;
    white-space: pre-line;
}

.tp-nation .tpn-cancelled {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 1rem;
    max-width: 40rem;
    margin: 1.6rem 0 0;
    padding: 0.95rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 122, 107, 0.45);
    background: rgba(255, 122, 107, 0.07);
}

.tp-nation .tpn-cancelled__stamp {
    margin: 0;
    padding: 0.3rem 0.7rem;
    border: 2px solid rgba(255, 122, 107, 0.9);
    border-radius: 4px;
    color: #ffa196;
    font-size: max(0.78rem, 11px);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transform: rotate(-5deg);
}

.tp-nation .tpn-cancelled__note { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--tpn-ivory); }

.tp-nation .tpn-brief__back { margin: 1.8rem 0 0; font-size: 0.92rem; }

/* ---------------------------------------------------------------- key-weight tables on phones */

/* a 320-400 px phone: the weights tables give the key walls their room (tier and number columns tighter) */
@media (max-width: 399.98px) {
    .tp-nation .tpn-weights tbody th { padding-inline-end: 0.6rem; }
    .tp-nation .tpn-weights__n { width: 2.4rem; }
}

/* ---------------------------------------------------------------- right-to-left */

/* Arabic and Hebrew: no capitals or tracking, and small labels one step larger */
.tp-nation[dir="rtl"] .tpn-stage,
.tp-nation[dir="rtl"] .tpn-plate__label,
.tp-nation[dir="rtl"] .tpn-build__date,
.tp-nation[dir="rtl"] .tpn-panel__eyebrow,
.tp-nation[dir="rtl"] .tpn-live,
.tp-nation[dir="rtl"] .tpn-panel__when-label,
.tp-nation[dir="rtl"] .tpn-panel__next-label,
.tp-nation[dir="rtl"] .tpn-power__label,
.tp-nation[dir="rtl"] .tpn-ballot legend,
.tp-nation[dir="rtl"] .tpn-follow__plate span,
.tp-nation[dir="rtl"] .tpn-charter__kicker,
.tp-nation[dir="rtl"] .tpn-weights thead th,
.tp-nation[dir="rtl"] .tpn-seal__text,
.tp-nation[dir="rtl"] .tpn-register__title,
.tp-nation[dir="rtl"] .tpn-record__when,
.tp-nation[dir="rtl"] .tpn-record__stamp,
.tp-nation[dir="rtl"] .tpn-cancelled__stamp,
.tp-nation[dir="rtl"] .tpn-dateline {
    letter-spacing: 0;
    text-transform: none;
}

.tp-nation[dir="rtl"] .tpn-stage,
.tp-nation[dir="rtl"] .tpn-build__date,
.tp-nation[dir="rtl"] .tpn-panel__eyebrow,
.tp-nation[dir="rtl"] .tpn-panel__when-label,
.tp-nation[dir="rtl"] .tpn-panel__next-label,
.tp-nation[dir="rtl"] .tpn-ballot legend,
.tp-nation[dir="rtl"] .tpn-weights thead th,
.tp-nation[dir="rtl"] .tpn-record__when,
.tp-nation[dir="rtl"] .tpn-dateline { font-size: 0.8rem; }

.tp-nation[dir="rtl"] .tpn-plate__label,
.tp-nation[dir="rtl"] .tpn-follow__plate span { font-size: max(0.72rem, 11px); }

.tp-nation[dir="rtl"] .tpn-power__label,
.tp-nation[dir="rtl"] .tpn-live { font-size: 0.8rem; }

/* "Cancelled" stamps: rotated ink, so they need the most room in Arabic ("ألغي" is short and dense) */
.tp-nation[dir="rtl"] .tpn-record__stamp,
.tp-nation[dir="rtl"] .tpn-cancelled__stamp { font-size: 0.95rem; font-weight: 700; line-height: 1.35; transform: rotate(-3deg); }
.tp-nation[dir="rtl"] .tpn-live--cancelled { font-size: 0.85rem; }

.tp-nation[dir="rtl"] .tpn-charter__kicker { font-size: 0.9rem; }

/* The document surfaces (charter, clause, register, ledger notes, panel lines) are set in Georgia, which has no
   Arabic: the browser then falls back to Times New Roman, whose Arabic is small and thin at 16 px. Right-to-left
   pages keep Georgia for Latin names and figures and name real Arabic text faces first (Noto Naskh Arabic on
   Android/Linux and where installed, Segoe UI on Windows, Geeza Pro on Apple), before any Times fallback.
   Scoped to this design's own roots (Town Square sections, poll page, vote panel), so the
   hero, banner and passport keep their owners' stacks. Arabic has no italic: every italic here goes upright. */
.tp-nation[dir="rtl"]:is(.tpn-section--site, .tpn-section--charter, .tpn-section--records, .tpn-section--first),
.tp-nation[dir="rtl"] .tpn-panel {
    --tpn-serif: Georgia, "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", Tahoma, serif;
}

.tp-nation[dir="rtl"] .tpn-empty--ledger,
.tp-nation[dir="rtl"] .tpn-welcome,
.tp-nation[dir="rtl"] .tpn-charter__preamble,
.tp-nation[dir="rtl"] .tpn-schedule__note { font-style: normal; }
.tp-nation[dir="rtl"] .tpn-article::before { content: counter(tpn-article, arabic-indic); }

/* ---------------------------------------------------------------- forced colours, motion off */

/* Windows high contrast: the drawn radios go back to native ones; bars and rails keep their painted fills. */
@media (forced-colors: active) {
    .tp-nation .tpn-option input[type="radio"] { -webkit-appearance: radio; appearance: auto; }
    .tp-nation .tpn-option input[type="radio"]::before { display: none; }
    .tp-nation .tpn-stage::before,
    .tp-nation .tpn-stage__node,
    .tp-nation .tpn-bar,
    .tp-nation .tpn-bar__fill,
    .tp-nation .tpn-keys__row { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-option,
    .tp-nation .tpn-option input[type="radio"]::before,
    .tp-nation .tpn-follow,
    .tp-nation .tpn-record__link { transition: none; }
}

/* ---- integration fixes (site.css runs on every page and forces h1-h3 to position: static and hides their
   ::before/::after with !important; below 768 px it also sets the root font to 14 px) ---- */
/* the struck-circle 'not' mark on the poll page's "What this vote doesn't decide" clause */
.tp-nation .tpn-clause__title { position: relative !important; }
.tp-nation .tpn-clause__title::before { display: block !important; }
/* poll page: the question and scope are the page's h1 and lede right beside the panel; the panel's own copy of
   them stays in the DOM for aria-labelledby but is not shown twice */
.tp-nation .tpn-poll__panel .tpn-panel__title,
.tp-nation .tpn-poll__panel .tpn-panel__scope {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ...and with it hidden, the head's bottom rule already closes the head: the meta block drops its own top rule */
.tp-nation .tpn-poll__panel .tpn-panel__meta { margin-top: 0; border-top: 0; }
/* Arabic / Hebrew: the weights table headers read small next to the rows at the Latin tracking */
.tp-nation[dir="rtl"] .tpn-weights th { font-size: 0.9rem; letter-spacing: 0; }

.tp-nation.tpn-paused .tpn-layer { animation-play-state: paused; }

/* ================================================================ the National Assembly */

/* The team's weekly live session: streamed on YouTube for everyone, while Citizens pitch their ideas by voice on the
   Stage of the Citizens' Discord (the Citizen Votes on them are held on the site). The Town Square section (a
   lantern-lit hall on the quay whose screen is the player), the lower-third on the home hero and the card in the Radio
   Room. Each root has data-tpn-state (unscheduled, upcoming, live, ended; nation.js follows the clock), and
   a part marked data-tpn-when shows only in the states it lists. On air is signal coral; the rest is the harbor's
   navy, ivory and gold. Motion (the on-air lamp, the broadcast rings) is transform and opacity only, live only, paused
   off screen and off for reduced motion. */

.tp-nation [data-tpn-state="unscheduled"] [data-tpn-when]:not([data-tpn-when~="unscheduled"]),
.tp-nation [data-tpn-state="upcoming"] [data-tpn-when]:not([data-tpn-when~="upcoming"]),
.tp-nation [data-tpn-state="live"] [data-tpn-when]:not([data-tpn-when~="live"]),
.tp-nation [data-tpn-state="ended"] [data-tpn-when]:not([data-tpn-when~="ended"]) { display: none; }

/* the on-air lamp: a steady gold pilot light until the session starts, a pulsing coral one while it is on air */
.tp-nation .tpn-onair-lamp {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tpn-gold-soft);
    box-shadow: 0 0 0 3px rgba(243, 211, 138, 0.16), 0 0 10px rgba(243, 211, 138, 0.6);
}

.tp-nation [data-tpn-state="live"] .tpn-onair-lamp,
.tp-nation .tpn-onair::before {
    background: #ff6a5a;
    box-shadow: 0 0 0 3px rgba(255, 106, 90, 0.2), 0 0 12px rgba(255, 106, 90, 0.9);
}

.tp-nation [data-tpn-state="live"] .tpn-onair-lamp::after,
.tp-nation .tpn-onair::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 106, 90, 0.55);
    animation: tpn-onair-pulse 1.8s ease-out infinite;
}

@keyframes tpn-onair-pulse {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(3.2); opacity: 0; }
}

/* "Live now": the vote panel's status pill, in signal coral */
.tp-nation .tpn-onair {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.65rem 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 122, 107, 0.6);
    background: rgba(255, 106, 90, 0.14);
    color: #ffc1b8;
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-nation .tpn-onair::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.tp-nation .tpn-onair::after {
    width: 7px;
    height: 7px;
    inset: auto;
    inset-inline-start: 0.55rem;
    top: calc(50% - 3.5px);
}

/* ---------------------------------------------------------------- Town Square section */

.tp-nation.tpn-section--assembly {
    background:
        radial-gradient(38% 55% at 76% 42%, rgba(255, 179, 92, 0.13) 0%, rgba(255, 179, 92, 0) 72%),
        radial-gradient(60% 60% at 8% 100%, rgba(35, 78, 128, 0.32) 0%, rgba(35, 78, 128, 0) 70%),
        linear-gradient(180deg, #0c1c3a 0%, #0a1831 55%, #0b1b39 100%);
}

.tp-nation .tpn-assembly {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
    align-items: center;
}

.tp-nation .tpn-assembly__copy .tpn-section__lede { max-width: 34rem; margin-bottom: 1.6rem; }

@media (max-width: 991.98px) {
    .tp-nation .tpn-assembly { grid-template-columns: minmax(0, 1fr); }
    .tp-nation .tpn-assembly__stage { width: min(100%, 600px); }
}

/* the schedule board: a glass slip like the vote panel's meta block */
.tp-nation .tpn-session {
    max-width: 34rem;
    padding: 1.15rem 1.3rem 1.2rem;
    border: 1px solid var(--tpn-line-gold);
    border-radius: var(--tpn-radius);
    background: linear-gradient(180deg, rgba(16, 45, 73, 0.55) 0%, rgba(8, 16, 34, 0.55) 100%);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.06), 0 18px 44px rgba(2, 6, 16, 0.35);
}

.tp-nation .tpn-session__status { display: flex; align-items: center; gap: 0.6rem; min-height: 1.6rem; margin: 0; }

.tp-nation .tpn-session__label,
.tp-nation .tpn-countdown__label,
.tp-nation .tpn-session__topic-label {
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-session__when {
    margin: 0.45rem 0 0;
    font-family: var(--tpn-serif);
    font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem);
    line-height: 1.25;
    color: var(--tpn-ivory);
    text-wrap: balance;
}

.tp-nation .tpn-session__note,
.tp-nation .tpn-session__ended {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-session__every {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin: 0.85rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tpn-hair);
    font-size: 0.9rem;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-session__length { color: var(--tpn-ivory-mute); }

.tp-nation .tpn-session__topic {
    display: grid;
    gap: 0.2rem;
    margin: 0.85rem 0 0;
    padding: 0.7rem 0.85rem;
    border-inline-start: 2px solid var(--tpn-gold);
    border-radius: 0 8px 8px 0;
    background: rgba(243, 211, 138, 0.07);
    font-family: var(--tpn-serif);
    font-size: 1.08rem;
    line-height: 1.4;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-session__topic-label { font-family: var(--tpn-font); }
.tp-nation[dir="rtl"] .tpn-session__topic { border-radius: 8px 0 0 8px; }

.tp-nation .tpn-session__actions { margin-top: 1.15rem; }
.tp-nation .tpn-session .tpn-note { margin-top: 0.8rem; }

/* the Stage: taking part is on the Citizens' Discord. A Citizen's button carries the invite; everyone else's is locked
   (a disabled button, no link) next to the way to citizenship. */
.tp-nation .tpn-speak {
    margin-top: 1.05rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--tpn-hair);
}

.tp-nation .tpn-speak__title {
    margin: 0;
    font-size: max(0.72rem, 11px);
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-speak__body { margin: 0.35rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-speak__actions { margin-top: 0.8rem; gap: 0.6rem; }

.tp-nation .tpn-cta__icon {
    flex: none;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the Stage's own colour: the on-air coral */
.tp-nation .tpn-cta--stage {
    color: #fff5f2;
    background: linear-gradient(180deg, rgba(255, 111, 94, 0.3) 0%, rgba(216, 55, 47, 0.26) 100%);
    border-color: rgba(255, 157, 144, 0.75);
    box-shadow: 0 10px 26px rgba(216, 55, 47, 0.22);
}
.tp-nation .tpn-cta--stage:hover { color: #fff; border-color: #ffc1b8; background: linear-gradient(180deg, rgba(255, 111, 94, 0.42) 0%, rgba(216, 55, 47, 0.36) 100%); }

/* locked: plainly not a way in (dashed, muted, no lift), but still legible */
.tp-nation .tpn-cta--locked,
.tp-nation .tpn-cta--locked[disabled] {
    min-height: 38px;
    padding: 0.55rem 1rem;
    font-size: 0.86rem;
    color: var(--tpn-ivory-dim);
    background: rgba(8, 16, 34, 0.45);
    border: 1px dashed rgba(252, 247, 239, 0.34);
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}
.tp-nation .tpn-cta--locked:hover { transform: none; }
.tp-nation .tpn-cta--locked .tpn-cta__icon { width: 15px; height: 15px; color: var(--tpn-gold-soft); }

.tp-nation .tpn-session--compact .tpn-speak { margin-top: 0.9rem; padding-top: 0.8rem; }
.tp-nation .tpn-session--compact .tpn-speak__body { font-size: 0.88rem; }

@media (forced-colors: active) {
    .tp-nation .tpn-cta--locked { border-color: GrayText; color: GrayText; }
}

/* while on air the gold button carries the on-air lamp */
.tp-nation [data-tpn-state="live"] .tpn-cta--watch::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d92f2a;
    box-shadow: 0 0 0 3px rgba(217, 47, 42, 0.22);
}

/* the countdown: split-flap tiles, like the departures board at the ferry quay */
.tp-nation .tpn-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
}

.tp-nation .tpn-countdown[hidden] { display: none; }

.tp-nation .tpn-countdown__label { flex: 0 0 100%; color: var(--tpn-ivory-mute); }

.tp-nation .tpn-countdown__cell {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    min-width: 3.6rem;
}

.tp-nation .tpn-countdown__cell b {
    position: relative;
    display: block;
    min-width: 3.6rem;
    padding: 0.42rem 0.45rem 0.38rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #17325c 0%, #13294d 50%, #0f2244 50%, #0c1c3a 100%);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 18px rgba(2, 6, 16, 0.4);
    font-family: var(--tpn-mono);
    font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.8rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    color: var(--tpn-gold-soft);
}

/* the flap's hinge */
.tp-nation .tpn-countdown__cell b::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(4, 9, 21, 0.75);
}

.tp-nation .tpn-countdown__cell small {
    font-size: max(0.66rem, 10px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
}

/* the stage: the town hall's doorway on the quay. A fanlight in the arch (lit from inside), the on-air sign on its
   sill, two lanterns hanging from the arch, and the doorway itself is the screen. */
.tp-nation .tpn-hall {
    --tpn-arch: clamp(104px, 12.5vw, 172px);
    position: relative;
    margin-bottom: 14px;
    padding: calc(var(--tpn-arch) * 0.8) clamp(0.85rem, 2vw, 1.35rem) clamp(0.85rem, 2vw, 1.35rem);
    border: 1px solid rgba(243, 211, 138, 0.42);
    border-radius: 50% 50% 16px 16px / var(--tpn-arch) var(--tpn-arch) 16px 16px;
    background:
        radial-gradient(60% 34% at 50% 0%, rgba(255, 196, 120, 0.2) 0%, rgba(255, 196, 120, 0) 100%),
        radial-gradient(22% 18% at 9% 24%, rgba(255, 196, 120, 0.2) 0%, rgba(255, 196, 120, 0) 100%),
        radial-gradient(22% 18% at 91% 24%, rgba(255, 196, 120, 0.2) 0%, rgba(255, 196, 120, 0) 100%),
        linear-gradient(180deg, #16305a 0%, #0f2244 48%, #0a1831 100%);
    box-shadow:
        inset 0 0 0 7px rgba(8, 16, 34, 0.55),
        inset 0 0 0 8px rgba(243, 211, 138, 0.2),
        0 36px 80px rgba(2, 6, 16, 0.55);
}

/* the fanlight: a half-round window with radiating glazing bars */
.tp-nation .tpn-hall::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--tpn-arch) * 0.1);
    width: min(56%, calc(var(--tpn-arch) * 2.3));
    height: calc(var(--tpn-arch) * 0.56);
    transform: translateX(-50%);
    border: 2px solid rgba(231, 182, 75, 0.62);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background:
        repeating-conic-gradient(from -90deg at 50% 100%, rgba(231, 182, 75, 0.5) 0deg 0.6deg, rgba(231, 182, 75, 0) 0.6deg 15deg),
        radial-gradient(64% 100% at 50% 100%, rgba(255, 200, 120, 0.5) 0%, rgba(255, 170, 90, 0.2) 50%, rgba(80, 60, 70, 0.25) 100%);
    box-shadow: inset 0 0 0 3px rgba(8, 16, 34, 0.45), 0 0 34px rgba(255, 190, 110, 0.12);
    pointer-events: none;
}

/* the keystone at the top of the arch */
.tp-nation .tpn-hall::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -1px;
    width: 26px;
    height: 20px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #f3d38a 0%, #c9953a 100%);
    clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%);
    pointer-events: none;
}

.tp-nation [data-tpn-state="live"] .tpn-hall::before {
    background:
        repeating-conic-gradient(from -90deg at 50% 100%, rgba(255, 220, 160, 0.6) 0deg 0.6deg, rgba(255, 220, 160, 0) 0.6deg 15deg),
        radial-gradient(64% 100% at 50% 100%, rgba(255, 204, 120, 0.8) 0%, rgba(255, 176, 90, 0.36) 50%, rgba(255, 176, 90, 0.12) 100%);
    box-shadow: inset 0 0 0 3px rgba(8, 16, 34, 0.45), 0 0 50px rgba(255, 190, 110, 0.3);
}

/* the steps up to the hall: two courses of quay stone */
.tp-nation .tpn-hall__steps {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: -14px;
    height: 14px;
    border-radius: 0 0 6px 6px;
    background:
        linear-gradient(180deg, rgba(243, 211, 138, 0.35) 0 1px, transparent 1px 7px, rgba(243, 211, 138, 0.18) 7px 8px, transparent 8px),
        linear-gradient(180deg, #13294d 0%, #0a1730 100%);
    box-shadow: 0 10px 24px rgba(2, 6, 16, 0.45);
}

.tp-nation .tpn-hall__lantern {
    position: absolute;
    top: calc(var(--tpn-arch) * 0.3);
    width: clamp(20px, 2.1vw, 28px);
    aspect-ratio: 24 / 40;
}
.tp-nation .tpn-hall__lantern--start { inset-inline-start: 14.5%; }
.tp-nation .tpn-hall__lantern--end { inset-inline-end: 14.5%; }

.tp-nation .tpn-hall__lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 201, 122, 0.3) 0%, rgba(255, 201, 122, 0.08) 38%, rgba(255, 201, 122, 0) 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tp-nation .tpn-hall__lantern svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.tp-nation .tpn-hall__lantern-chain { fill: none; stroke: rgba(243, 211, 138, 0.55); stroke-width: 1.2; }
.tp-nation .tpn-hall__lantern-cap { fill: #0b1b33; stroke: #c9a45a; stroke-width: 1.1; stroke-linejoin: round; }
.tp-nation .tpn-hall__lantern-glass { fill: #ffd27a; stroke: #c9a45a; stroke-width: 1.1; }
.tp-nation .tpn-hall__lantern-frame { fill: none; stroke: rgba(125, 90, 23, 0.7); stroke-width: 1; }

/* the on-air sign: unlit between sessions, lit coral while the Assembly is on air */
.tp-nation .tpn-hall__sign {
    position: absolute;
    top: calc(var(--tpn-arch) * 0.66 - 1.05rem);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.95rem 0.38rem;
    border: 1px solid rgba(255, 122, 107, 0.34);
    border-radius: 6px;
    background: rgba(38, 12, 20, 0.62);
    box-shadow: inset 0 0 0 3px rgba(8, 16, 34, 0.5);
    font-size: max(0.72rem, 11px);
    font-weight: 900;
    letter-spacing: 0.3em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 176, 166, 0.5);
}

.tp-nation [data-tpn-state="live"] .tpn-hall__sign {
    border-color: #ffb0a5;
    background: linear-gradient(180deg, #ff6f5e 0%, #d8372f 100%);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 18px rgba(255, 106, 90, 0.7), 0 0 46px rgba(255, 106, 90, 0.35);
    color: #fff5f2;
}

.tp-nation .tpn-hall__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(243, 211, 138, 0.3);
    border-radius: 10px;
    background: #050b18;
    box-shadow: 0 0 0 5px rgba(5, 11, 24, 0.7), inset 0 0 50px rgba(0, 0, 0, 0.55);
}

.tp-nation .tpn-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the poster: a plain link to YouTube; nation.js swaps in the player on click (nothing loads from YouTube before) */
.tp-nation .tpn-player {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--tpn-ivory);
    background:
        radial-gradient(55% 60% at 50% 42%, rgba(35, 78, 128, 0.55) 0%, rgba(35, 78, 128, 0) 72%),
        repeating-linear-gradient(180deg, rgba(252, 247, 239, 0.025) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #0b1830 0%, #060d1d 100%);
}

.tp-nation .tpn-player:hover { color: var(--tpn-ivory); text-decoration: none; }
.tp-nation .tpn-player:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: -5px; }

.tp-nation .tpn-player__rings {
    position: absolute;
    left: 50%;
    top: 42%;
    width: min(70%, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: repeating-radial-gradient(circle, rgba(243, 211, 138, 0) 0 21px, rgba(243, 211, 138, 0.16) 21px 22px);
    -webkit-mask: radial-gradient(circle, #000 0%, #000 34%, transparent 70%);
    mask: radial-gradient(circle, #000 0%, #000 34%, transparent 70%);
    pointer-events: none;
}

.tp-nation [data-tpn-state="live"] .tpn-player__rings::before,
.tp-nation [data-tpn-state="live"] .tpn-player__rings::after {
    content: "";
    position: absolute;
    inset: 32%;
    border: 1.5px solid rgba(255, 122, 107, 0.7);
    border-radius: 50%;
    animation: tpn-broadcast 2.8s ease-out infinite;
}
.tp-nation [data-tpn-state="live"] .tpn-player__rings::after { animation-delay: 1.4s; }

@keyframes tpn-broadcast {
    from { transform: scale(0.6); opacity: 0.9; }
    to { transform: scale(2.1); opacity: 0; }
}

.tp-nation .tpn-player__play {
    position: relative;
    width: clamp(58px, 7vw, 76px);
    height: clamp(58px, 7vw, 76px);
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe39a 0%, #f5b54a 55%, #e79a36 100%);
    box-shadow: 0 14px 34px rgba(231, 154, 54, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 7px rgba(243, 211, 138, 0.12);
    transition: transform 0.18s ease;
}

.tp-nation .tpn-player__play::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30%;
    height: 34%;
    background: #1d1304;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-38%, -50%);
}

.tp-nation .tpn-player:hover .tpn-player__play { transform: scale(1.06); }

.tp-nation .tpn-player__mic {
    position: relative;
    width: clamp(46px, 5.5vw, 62px);
    height: auto;
    fill: none;
    stroke: var(--tpn-gold-soft);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tp-nation .tpn-player__mic path:first-of-type { stroke-width: 1.5; opacity: 0.7; }

.tp-nation .tpn-player__label { position: relative; font-size: 1.02rem; font-weight: 800; letter-spacing: 0.02em; }
.tp-nation .tpn-player--channel .tpn-player__label { text-decoration: underline; text-decoration-color: rgba(243, 211, 138, 0.45); text-underline-offset: 4px; }
.tp-nation .tpn-player__note { position: relative; max-width: 22rem; font-size: max(0.76rem, 11px); line-height: 1.45; color: var(--tpn-ivory-mute); }

/* from an idea to the ballot: three stations on a dashed harbor route */
.tp-nation .tpn-path {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2rem, 4vw, 2.8rem);
    border-top: 1px solid var(--tpn-hair);
}

.tp-nation .tpn-path__title {
    margin: 0 0 1.8rem;
    font-family: var(--tpn-serif);
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    font-weight: 400;
    text-align: center;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-path__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tpn-step;
}

.tp-nation .tpn-path__steps::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 16.7%;
    right: 16.7%;
    border-top: 1.5px dashed rgba(243, 211, 138, 0.42);
}

.tp-nation .tpn-path__step {
    position: relative;
    padding: 0 0.6rem;
    text-align: center;
    counter-increment: tpn-step;
}

.tp-nation .tpn-path__step::before {
    content: counter(tpn-step, upper-roman);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 0.95rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #ffecb3 0%, #e7b64b 45%, #a8761f 100%);
    box-shadow: 0 0 0 5px #0b1a36, 0 0 0 6px rgba(243, 211, 138, 0.4), 0 10px 22px rgba(2, 6, 16, 0.5);
    font-family: var(--tpn-serif);
    font-size: 1rem;
    font-weight: 700;
    color: #2a1a04;
}

.tp-nation .tpn-path__name { margin: 0 0 0.4rem; font-size: 1.06rem; font-weight: 800; letter-spacing: 0.01em; color: var(--tpn-ivory); }
.tp-nation .tpn-path__body { max-width: 20rem; margin: 0 auto; font-size: 0.95rem; line-height: 1.55; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-path__body .tpn-link { white-space: nowrap; }

@media (max-width: 767.98px) {
    .tp-nation .tpn-path__title { text-align: start; }
    .tp-nation .tpn-path__steps { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .tp-nation .tpn-path__steps::before { top: 22px; bottom: 22px; left: auto; right: auto; inset-inline-start: 21px; border-top: 0; border-inline-start: 1.5px dashed rgba(243, 211, 138, 0.42); }
    .tp-nation .tpn-path__step { padding: 0.35rem 0 0; padding-inline-start: 64px; text-align: start; min-height: 44px; }
    .tp-nation .tpn-path__step::before { position: absolute; top: 0; inset-inline-start: 0; margin: 0; }
    .tp-nation .tpn-path__body { margin: 0; max-width: none; }
}

/* ---------------------------------------------------------------- home hero: the lower-third */

/* Under the copy column, at the left in rtl too: the hero keeps its ltr column order there (see "Right-to-left pages"
   above), and the bar's own content runs rtl. */
.tp-nation .tpn-lower-third {
    position: absolute;
    z-index: 2;
    bottom: clamp(1.1rem, 3.4vh, 2.2rem);
    left: max(clamp(1rem, 4vw, 3rem), calc((100% - 1240px) / 2));
    display: flex;
    align-items: stretch;
    /* no wider than the copy column (the hero's inner grid less the 430 px panel and the gap), so it never reaches
       under a tall vote panel on narrow desktops */
    max-width: min(600px, calc(min(100% - 2 * clamp(1rem, 4vw, 3rem), 1240px) - 430px - clamp(1.5rem, 4vw, 4.5rem)));
    overflow: hidden;
    border: 1px solid rgba(243, 211, 138, 0.38);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(8, 16, 34, 0.9) 0%, rgba(11, 27, 51, 0.84) 100%);
    box-shadow: 0 18px 44px rgba(2, 6, 16, 0.5);
    color: var(--tpn-ivory);
    text-decoration: none;
    transition: border-color 0.18s ease;
    animation: tpn-rise 0.7s 0.24s ease-out both;
}

.tp-nation .tpn-lower-third:hover { color: var(--tpn-ivory); text-decoration: none; border-color: var(--tpn-gold-soft); }
.tp-nation .tpn-lower-third:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 3px; }

.tp-nation .tpn-lower-third__tab {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.95rem;
    border-inline-end: 1px solid rgba(243, 211, 138, 0.3);
    background: linear-gradient(180deg, rgba(243, 211, 138, 0.18) 0%, rgba(243, 211, 138, 0.07) 100%);
    font-size: max(0.7rem, 11px);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tpn-gold-soft);
}

.tp-nation .tpn-lower-third[data-tpn-state="live"] .tpn-lower-third__tab {
    border-inline-end-color: #ff9d90;
    background: linear-gradient(180deg, #ff6f5e 0%, #d8372f 100%);
    color: #fff5f2;
}

.tp-nation .tpn-lower-third[data-tpn-state="live"] .tpn-onair-lamp { background: #fff5f2; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
.tp-nation .tpn-lower-third[data-tpn-state="live"] .tpn-onair-lamp::after { background: rgba(255, 255, 255, 0.5); }

.tp-nation .tpn-lower-third__body { display: grid; gap: 0.12rem; min-width: 0; padding: 0.62rem 0.95rem 0.66rem; }

.tp-nation .tpn-lower-third__title {
    font-family: var(--tpn-serif);
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-lower-third__line { font-size: 0.86rem; line-height: 1.35; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-lower-third__line time { white-space: nowrap; }
.tp-nation .tpn-lower-third__relative { color: var(--tpn-gold-soft); white-space: nowrap; }
.tp-nation .tpn-lower-third__relative::before { content: "\00B7"; margin: 0 0.45rem; color: var(--tpn-ivory-mute); }
.tp-nation .tpn-lower-third__relative[hidden] { display: none; }

.tp-nation .tpn-lower-third__go {
    flex: none;
    width: 46px;
    border-inline-start: 1px solid var(--tpn-line);
    background: var(--tpn-gold-soft);
    -webkit-mask: var(--tpn-i-arrow) center / 18px no-repeat;
    mask: var(--tpn-i-arrow) center / 18px no-repeat;
    transition: transform 0.18s ease;
}

.tp-nation .tpn-lower-third:hover .tpn-lower-third__go { transform: translateX(3px); }
.tp-nation[dir="rtl"] .tpn-lower-third__go { transform: scaleX(-1); }
.tp-nation[dir="rtl"] .tpn-lower-third:hover .tpn-lower-third__go { transform: scaleX(-1) translateX(3px); }

/* phones and tablets: the hero is a column (copy, harbor band, panel); the lower-third sits on the band's foot */
@media (max-width: 991.98px) {
    .tp-nation.tpn-hero .tpn-lower-third {
        position: relative;
        order: 3;
        bottom: auto;
        left: auto;
        max-width: none;
        margin: -1.9rem 0 0;
    }

    .tp-nation.tpn-hero .tpn-hero__panel { order: 4; }
}

@media (max-width: 575.98px) {
    .tp-nation .tpn-lower-third__tab {
        flex-direction: column;
        justify-content: center;
        gap: 0.35rem;
        max-width: 6.4rem;
        padding: 0 0.6rem;
        font-size: max(0.62rem, 10px);
        letter-spacing: 0.12em;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
    }

    .tp-nation .tpn-lower-third__body { padding: 0.55rem 0.75rem; }
    .tp-nation .tpn-lower-third__title { font-size: 1rem; }
    .tp-nation .tpn-lower-third__line { font-size: 0.8rem; }
    .tp-nation .tpn-lower-third__go { width: 36px; }
}

/* ---------------------------------------------------------------- Radio Room card (Home/Live) */

.tp-nation.tpn-onair-card-wrap { padding: clamp(2.2rem, 4vw, 3.2rem) 0 clamp(1.4rem, 3vw, 2.4rem); color: var(--tpn-ivory); }

.tp-nation .tpn-onair-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: center;
    padding: clamp(1.2rem, 2.6vw, 1.9rem);
    border: 1px solid var(--tpn-line-gold);
    border-radius: 18px;
    background:
        radial-gradient(220px 220px at 5.5rem 50%, rgba(255, 179, 92, 0.12) 0%, rgba(255, 179, 92, 0) 70%),
        linear-gradient(135deg, #102a4c 0%, #0b1b36 100%);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.06), 0 26px 60px rgba(2, 6, 16, 0.45);
}

.tp-nation[dir="rtl"] .tpn-onair-card {
    background:
        radial-gradient(220px 220px at calc(100% - 5.5rem) 50%, rgba(255, 179, 92, 0.12) 0%, rgba(255, 179, 92, 0) 70%),
        linear-gradient(225deg, #102a4c 0%, #0b1b36 100%);
}

.tp-nation .tpn-onair-card__plate {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(96px, 10vw, 128px);
    aspect-ratio: 1;
    margin-bottom: 0.9rem;
    border: 1px solid rgba(243, 211, 138, 0.36);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #17325c 0%, #0a1730 72%);
    box-shadow: inset 0 0 0 5px rgba(8, 16, 34, 0.55), inset 0 0 0 6px rgba(243, 211, 138, 0.18);
}

.tp-nation .tpn-onair-card__plate .tpn-player__rings { top: 50%; width: 150%; }
.tp-nation .tpn-onair-card__plate .tpn-player__mic { width: 44%; }
.tp-nation .tpn-onair-card__plate .tpn-hall__sign { top: auto; bottom: -0.85rem; padding: 0.28rem 0.45rem; font-size: max(0.64rem, 10px); letter-spacing: 0.08em; }

.tp-nation .tpn-onair-card__title {
    margin: 0.5rem 0 0.45rem;
    font-family: var(--tpn-serif);
    font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-onair-card__lede { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.55; color: var(--tpn-ivory-dim); }

/* The Radio Room is a themed banner page: the site theme sets the page body's link, heading and paragraph colours and
   heading sizes (tools/nation-site/base.css, ":root .tpn-place ~ .main-container ...", specificity up to 0,5,1). The
   card keeps its own, in the theme's scope plus the card's class. */
:root .tpn-place ~ .main-container .tpn-onair-card .tpn-overline { color: var(--tpn-gold-soft); }
:root .tpn-place ~ .main-container .tpn-onair-card h2.tpn-onair-card__title {
    font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tpn-ivory);
}
:root .tpn-place ~ .main-container .tpn-onair-card :is(.tpn-onair-card__lede, .tpn-session__every, .tpn-session__ended, .tpn-session__note) { color: var(--tpn-ivory-dim); }
:root .tpn-place ~ .main-container .tpn-onair-card .tpn-session__when { color: var(--tpn-ivory); }
:root .tpn-place ~ .main-container .tpn-onair-card :is(a.tpn-cta--gold, a.tpn-cta--gold:hover) { color: #1d1304; }
:root .tpn-place ~ .main-container .tpn-onair-card a.tpn-link { color: var(--tpn-gold-soft); }
:root .tpn-place ~ .main-container .tpn-onair-card a.tpn-link:hover { color: #fff1c9; }

.tp-nation .tpn-session--compact {
    max-width: none;
    padding: 1rem 1.1rem 1.05rem;
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.05);
}

.tp-nation .tpn-session--compact .tpn-session__when { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); }
.tp-nation .tpn-session--compact .tpn-countdown__cell,
.tp-nation .tpn-session--compact .tpn-countdown__cell b { min-width: 3.1rem; }
.tp-nation .tpn-session--compact .tpn-countdown__cell b { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.tp-nation .tpn-session--compact .tpn-session__actions { margin-top: 0.95rem; }

@media (max-width: 1199.98px) {
    .tp-nation .tpn-onair-card { grid-template-columns: auto minmax(0, 1fr); }
    .tp-nation .tpn-onair-card .tpn-session { grid-column: 1 / -1; }
}

/* phones: the plate stands beside the title, the schedule below both. The plate's column is wide enough for its sign
   in every language, and the plate stands in its middle. */
@media (max-width: 575.98px) {
    .tp-nation .tpn-onair-card { grid-template-columns: 6.25rem minmax(0, 1fr); align-items: start; gap: 1rem 0.9rem; }
    .tp-nation .tpn-onair-card__plate { justify-self: center; width: 66px; margin: 0.2rem 0 0.8rem; }
    .tp-nation .tpn-onair-card__plate .tpn-hall__sign { bottom: -0.7rem; padding: 0.2rem 0.3rem; letter-spacing: 0.02em; word-spacing: 0.18em; }
    .tp-nation .tpn-onair-card__title { margin-top: 0.35rem; }
}

/* A long compound word in the Assembly's name (Nationalversammlung) breaks at a hyphen on narrow phones instead of
   running out of its card; a browser without the language's hyphenation still breaks it inside the card. */
.tp-nation .tpn-onair-card__title,
.tp-nation.tpn-section--assembly .tpn-section__title,
.tp-nation .tpn-lower-third__title { overflow-wrap: break-word; }

.tp-nation .tpn-onair-card__title:is(:lang(de), :lang(nl), :lang(fi)),
.tp-nation.tpn-section--assembly .tpn-section__title:is(:lang(de), :lang(nl), :lang(fi)),
.tp-nation .tpn-lower-third__title:is(:lang(de), :lang(nl), :lang(fi)) { -webkit-hyphens: auto; hyphens: auto; }

/* ---------------------------------------------------------------- right-to-left, motion */

.tp-nation[dir="rtl"] .tpn-session__label,
.tp-nation[dir="rtl"] .tpn-countdown__label,
.tp-nation[dir="rtl"] .tpn-countdown__cell small,
.tp-nation[dir="rtl"] .tpn-session__topic-label,
.tp-nation[dir="rtl"] .tpn-speak__title,
.tp-nation[dir="rtl"] .tpn-onair,
.tp-nation[dir="rtl"] .tpn-hall__sign,
.tp-nation[dir="rtl"] .tpn-lower-third__tab {
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
}

/* the route's stations in the reader's numerals (the Charter's articles do the same in Arabic) */
.tp-nation[dir="rtl"]:lang(ar) .tpn-path__step::before { content: counter(tpn-step, arabic-indic); font-size: 1.1rem; }
.tp-nation[dir="rtl"]:lang(he) .tpn-path__step::before { content: counter(tpn-step, hebrew); }

/* Arabic has no text face in Georgia (see the Town Square's rtl note): real Arabic faces first */
.tp-nation[dir="rtl"].tpn-section--assembly,
.tp-nation[dir="rtl"].tpn-onair-card-wrap,
.tp-nation[dir="rtl"] .tpn-lower-third {
    --tpn-serif: Georgia, "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", Tahoma, serif;
}

.tp-nation .tpn-offscreen .tpn-onair-lamp::after,
.tp-nation .tpn-offscreen .tpn-onair::after,
.tp-nation .tpn-offscreen .tpn-player__rings::before,
.tp-nation .tpn-offscreen .tpn-player__rings::after,
.tp-nation.tpn-paused .tpn-onair-lamp::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-onair-lamp::after,
    .tp-nation .tpn-onair::after,
    .tp-nation [data-tpn-state] .tpn-player__rings::before,
    .tp-nation [data-tpn-state] .tpn-player__rings::after { animation: none; opacity: 0; }
    .tp-nation .tpn-lower-third { animation: none; transition: none; }
    .tp-nation .tpn-lower-third__go,
    .tp-nation .tpn-player__play { transition: none; }
}

@media (forced-colors: active) {
    .tp-nation .tpn-lower-third__go { forced-color-adjust: none; background: CanvasText; }
}

/* ================================================================ Founding Week, the Founding Sale, and what only Citizens get */

/* The pieces that make the one real deadline (Founding Week) and the real Citizens-only things visible: the home hero's
   Founding card (and its one-line strip above an open vote), the Town Square's chip and locked ballot box, the Assembly
   seat card, the Passport Office's Founding band with the Founding Sale's codes and the "what the passport unlocks"
   tiles, and the Citizens marks on the Assembly and the Building Site. Every count is real and every countdown stops
   at the minute (nation.js). Navy, ivory and gold like the vote panel; nothing here touches the pricing block, except
   the Founding Sale's badge next to each plan's title, which is taken out of the card's layout (end of this section). */

/* ---------------------------------------------------------------- shared pieces */

.tp-nation .tpn-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 211, 138, 0.45);
    background: rgba(243, 211, 138, 0.08);
    color: var(--tpn-gold-soft);
    font-size: max(0.7rem, 11px);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.tp-nation .tpn-tag[hidden] { display: none; }
.tp-nation .tpn-tag--cyan { color: var(--tpn-cyan); border-color: rgba(127, 233, 255, 0.45); background: rgba(127, 233, 255, 0.07); }
.tp-nation .tpn-tag__icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* a countdown to the minute: no seconds tile */
.tp-nation .tpn-countdown--minutes .tpn-countdown__cell,
.tp-nation .tpn-countdown--minutes .tpn-countdown__cell b { min-width: 3.4rem; }

.tp-nation .tpn-when { margin: 0.55rem 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-when time { color: var(--tpn-ivory); font-weight: 600; }

/* "Thousands of Citizens already call the Nation home.": where a count stood, never a number (the owner's rule) */
.tp-nation .tpn-tally {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.95rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(243, 211, 138, 0.22);
    font-family: var(--tpn-serif);
    font-size: 1.02rem;
    line-height: 1.35;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-tally > span { text-wrap: balance; }

.tp-nation .tpn-tally__icon {
    flex: none;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--tpn-gold-soft);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-nation .tpn-fine { margin: 0.85rem 0 0; font-size: max(0.76rem, 11px); line-height: 1.5; color: var(--tpn-ivory-mute); }

/* what a ballot weighs, per plan */
.tp-nation .tpn-keychips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }

.tp-nation .tpn-keychips__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.26rem 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(243, 211, 138, 0.28);
    background: rgba(243, 211, 138, 0.06);
    font-size: 0.8rem;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-keychips__item b { font-family: var(--tpn-serif); font-size: 1rem; font-weight: 400; color: var(--tpn-gold-soft); }

/* the gold Founding stamp as a new passport would carry it; after Founding Week the red "Closed" ink over it */
.tp-nation .tpn-coin { position: relative; width: fit-content; }
.tp-nation .tpn-coin__stamp { --tpn-stamp-w: 8rem; justify-content: flex-start; padding: 0.2rem 0; }
.tp-nation .tpn-coin__stamp .tpn-stamp { animation: none; }

.tp-nation .tpn-coin__ink {
    position: absolute;
    z-index: 3;
    left: 58%;
    top: 82%;
    translate: -50% -50%;
    rotate: -12deg;
    padding: 0.25rem 0.6rem 0.2rem;
    border: 2.5px solid rgba(154, 36, 54, 0.92);
    border-radius: 6px;
    background: rgba(255, 244, 230, 0.85);
    box-shadow: 0 0 0 3px rgba(255, 244, 230, 0.5);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(176, 34, 54, 0.95);
}

/* ---------------------------------------------------------------- 1. the Founding card (home hero) */

.tp-nation .tpn-founding-card__body {
    display: grid;
    grid-template-columns: 8.2rem minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-top: 0.85rem;
}

.tp-nation .tpn-hero__panel .tpn-panel--founding .tpn-panel__title { margin: 0 0 0.4rem; }
.tp-nation .tpn-panel--founding .tpn-panel__scope { color: var(--tpn-ivory-dim); }
.tp-nation .tpn-founding-card__actions { margin-top: 1rem; gap: 0.6rem; align-items: center; }

/* the Founding Sale in one pill: "Founding Sale up to -50% on your first payment" */
.tp-nation .tpn-salepill {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(243, 211, 138, 0.55);
    background: linear-gradient(135deg, rgba(255, 227, 154, 0.14) 0%, rgba(231, 154, 54, 0.1) 100%);
    color: var(--tpn-ivory);
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
}

.tp-nation .tpn-salepill:hover { color: var(--tpn-ivory); border-color: var(--tpn-gold-soft); text-decoration: none; }
.tp-nation .tpn-salepill:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 2px; }
.tp-nation .tpn-salepill b { color: var(--tpn-gold-soft); }

.tp-nation .tpn-salepill__icon,
.tp-nation .tpn-sale__icon {
    flex: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--tpn-gold-soft);
    stroke-width: 1.7;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------- 1b. Founding Week in one line (Town Square, hero strip) */

.tp-nation .tpn-foundchip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    max-width: 100%;
    margin: 1.1rem 0 0;
    padding: 0.5rem 0.6rem 0.5rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 211, 138, 0.5);
    background: linear-gradient(180deg, rgba(20, 40, 74, 0.92), rgba(8, 16, 34, 0.88));
    box-shadow: 0 12px 30px rgba(2, 6, 16, 0.45);
    color: var(--tpn-ivory);
    font-size: 0.92rem;
    line-height: 1.4;
    text-decoration: none;
}

.tp-nation .tpn-foundchip:hover { color: var(--tpn-ivory); border-color: var(--tpn-gold-soft); text-decoration: none; }
.tp-nation .tpn-foundchip:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 3px; }
.tp-nation .tpn-foundchip b { color: var(--tpn-gold-soft); letter-spacing: 0.02em; }
.tp-nation .tpn-foundchip time { font-weight: 600; }
.tp-nation .tpn-foundchip__text { min-width: 0; }
.tp-nation .tpn-foundchip__sale { display: block; margin-top: 0.15rem; }

.tp-nation .tpn-foundchip__coin { flex: none; width: 34px; height: 34px; }
.tp-nation .tpn-foundchip__rim { fill: #e2ae45; stroke: #7a4f12; stroke-width: 1; }
.tp-nation .tpn-foundchip__ring { fill: #f0c661; stroke: #5a3b0a; stroke-opacity: 0.45; stroke-dasharray: 1 1.6; }
.tp-nation .tpn-foundchip__star { fill: #fff6d8; stroke: #8f6118; stroke-width: 0.6; }

.tp-nation .tpn-foundchip__go {
    flex: none;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe39a 0%, #f5b54a 55%, #e79a36 100%);
    color: #1d1304;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.tp-nation[dir="rtl"] .tpn-foundchip__go > span { display: inline-block; transform: scaleX(-1); }

/* above the hero's open vote: one card-width strip, so the vote keeps the first screen (the deadline and the sale) */
.tp-nation .tpn-foundchip--strip {
    display: flex;
    width: 100%;
    margin: 0 0 0.75rem;
    border-radius: 16px;
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
}

.tp-nation .tpn-foundchip--strip .tpn-foundchip__join { display: none; }

@media (min-width: 992px) {
    @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
        .tp-nation .tpn-hero__panel .tpn-foundchip--strip {
            background: linear-gradient(180deg, rgba(12, 24, 50, 0.74) 0%, rgba(8, 15, 32, 0.86) 100%);
            -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
        }
    }
}

/* ---------------------------------------------------------------- 3. the Assembly seat card (home hero) */

.tp-nation .tpn-panel--seat .tpn-panel__title { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.62rem); }

.tp-nation .tpn-access { margin: 0.95rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(243, 211, 138, 0.2); }

.tp-nation .tpn-access__row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.55rem 0.1rem;
    border-bottom: 1px solid rgba(252, 247, 239, 0.08);
}

.tp-nation .tpn-access__icon {
    width: 2rem;
    height: 2rem;
    padding: 0.45rem;
    border-radius: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tp-nation .tpn-access__row--open .tpn-access__icon { color: var(--tpn-lime); background: rgba(201, 255, 134, 0.08); border: 1px solid rgba(201, 255, 134, 0.3); }
.tp-nation .tpn-access__row--locked .tpn-access__icon { color: var(--tpn-gold-soft); background: rgba(243, 211, 138, 0.08); border: 1px solid rgba(243, 211, 138, 0.35); }
.tp-nation .tpn-access__what b { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: var(--tpn-ivory); }
.tp-nation .tpn-access__what small { display: block; font-size: max(0.76rem, 11px); line-height: 1.35; color: var(--tpn-ivory-mute); }
.tp-nation .tpn-access__who { font-size: max(0.68rem, 10.5px); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.tp-nation .tpn-access__row--open .tpn-access__who { color: var(--tpn-lime); }
.tp-nation .tpn-access__row--locked .tpn-access__who { color: var(--tpn-gold-soft); }

.tp-nation .tpn-seat__actions { margin-top: 1rem; }
.tp-nation .tpn-seat__more { margin-top: 0.6rem; gap: 0.6rem; align-items: center; }

/* ---------------------------------------------------------------- 4. the locked ballot box (Town Square) */

.tp-nation .tpn-ballotbox__art { position: relative; display: block; width: 72px; }

.tp-nation .tpn-ballotbox__lock {
    position: absolute;
    right: -8px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid rgba(243, 211, 138, 0.6);
    background: #0b1b33;
    box-shadow: 0 6px 18px rgba(2, 6, 16, 0.6);
}

.tp-nation .tpn-ballotbox__lock svg { width: 13px; height: 13px; fill: none; stroke: var(--tpn-gold-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tp-nation .tpn-panel--ballotbox .tpn-panel__title time { font-weight: 400; white-space: nowrap; }
.tp-nation .tpn-panel--ballotbox .tpn-panel__scope { color: var(--tpn-ivory-dim); }

.tp-nation .tpn-ballotbox__label {
    margin: 1rem 0 0;
    font-size: max(0.7rem, 11px);
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tpn-ivory-mute);
}

.tp-nation .tpn-lastdecided {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1rem 0 0;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(252, 247, 239, 0.12);
    background: rgba(252, 247, 239, 0.04);
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--tpn-ivory-dim);
}

.tp-nation .tpn-lastdecided b { color: var(--tpn-ivory); font-weight: 700; }
.tp-nation .tpn-lastdecided small { display: block; font-size: max(0.78rem, 11px); color: var(--tpn-ivory-mute); }
.tp-nation .tpn-lastdecided__icon { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--tpn-gold-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- 2. the Founding band and the Founding Sale (Passport Office) */

/* On the night canvas above the Passport Office's sheet (outside the pricing block and its sheet). */
.tp-nation.tpn-founding { position: relative; margin: 0 0 1.4rem; color: var(--tpn-ivory); }

.tp-nation .tpn-founding__inner {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "coin head clock"
        "coin lede clock"
        "sale sale sale";
    gap: 0.4rem 2.2rem;
    align-items: center;
    padding: 1.5rem 1.8rem 1.5rem 1.6rem;
    border-radius: 20px;
    border: 1px solid rgba(243, 211, 138, 0.45);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(243, 211, 138, 0.1) 0%, rgba(243, 211, 138, 0) 45%),
        linear-gradient(180deg, rgba(20, 40, 74, 0.97) 0%, rgba(11, 24, 47, 0.98) 100%);
    box-shadow: 0 26px 60px rgba(2, 6, 16, 0.45), inset 0 1px 0 rgba(255, 244, 207, 0.08);
}

.tp-nation .tpn-founding__inner::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 16px;
    border: 1px solid rgba(243, 211, 138, 0.12);
    pointer-events: none;
}

.tp-nation .tpn-founding__inner > * { position: relative; }
.tp-nation .tpn-founding__inner > .tpn-coin { grid-area: coin; }
.tp-nation .tpn-founding__inner > .tpn-coin .tpn-coin__stamp { --tpn-stamp-w: 8.6rem; }
.tp-nation .tpn-founding__head { grid-area: head; align-self: end; min-width: 0; }
.tp-nation .tpn-founding__lede { grid-area: lede; align-self: start; max-width: 62ch; margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-founding__clock { grid-area: clock; min-width: 17rem; }
.tp-nation .tpn-founding__clock .tpn-countdown { margin-top: 0; }

.tp-nation .tpn-founding__title {
    margin: 0.5rem 0 0;
    font-family: var(--tpn-serif);
    font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--tpn-ivory);
    text-wrap: balance;
}

/* the record (30 days after the week) and the sale on its own: head and lede, no clock */
.tp-nation .tpn-founding__inner--record { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "coin head" "coin lede" "sale sale"; }
.tp-nation .tpn-founding__inner--sale { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "lede" "sale"; }
.tp-nation .tpn-founding__inner--sale .tpn-sale { margin-top: 0.3rem; padding-top: 0; border-top: 0; }
.tp-nation .tpn-founding__inner--sale .tpn-founding__lede { color: var(--tpn-gold-soft); font-weight: 600; }

/* the Founding Sale: each plan's percent and code, a copy button, first payment only */
.tp-nation .tpn-sale {
    grid-area: sale;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(243, 211, 138, 0.3);
}

.tp-nation .tpn-sale__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; margin: 0; font-size: 1rem; line-height: 1.4; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-sale__head b { font-size: 1.05rem; letter-spacing: 0.02em; color: var(--tpn-gold-soft); }

.tp-nation .tpn-sale__codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.6rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}

.tp-nation .tpn-sale__code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "plan pct" "value copy";
    gap: 0.25rem 0.6rem;
    align-items: center;
    padding: 0.6rem 0.7rem 0.65rem;
    border-radius: 12px;
    border: 1px solid rgba(243, 211, 138, 0.3);
    background: rgba(8, 16, 34, 0.45);
}

.tp-nation .tpn-sale__plan { grid-area: plan; font-size: max(0.72rem, 11px); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tpn-ivory-mute); }
.tp-nation .tpn-sale__pct { grid-area: pct; justify-self: end; font-family: var(--tpn-serif); font-size: 1.2rem; line-height: 1; color: var(--tpn-gold-soft); white-space: nowrap; }

.tp-nation .tpn-sale__value {
    grid-area: value;
    justify-self: start;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    border: 1px dashed rgba(243, 211, 138, 0.5);
    background: rgba(243, 211, 138, 0.06);
    color: var(--tpn-ivory);
    font-family: var(--tpn-mono);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    user-select: all;
    overflow-wrap: anywhere;
}

.tp-nation .tpn-sale__copy {
    grid-area: copy;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(252, 247, 239, 0.35);
    background: rgba(8, 16, 34, 0.35);
    color: var(--tpn-ivory);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.tp-nation .tpn-sale__copy[hidden] { display: none; }
.tp-nation .tpn-sale__copy:hover { border-color: var(--tpn-gold-soft); color: var(--tpn-gold-soft); }
.tp-nation .tpn-sale__copy:focus-visible { outline: 3px solid var(--tpn-cyan); outline-offset: 2px; }
.tp-nation .tpn-sale__copy[data-tpn-copied] { border-color: rgba(201, 255, 134, 0.6); color: var(--tpn-lime); }
.tp-nation .tpn-sale__copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.tp-nation .tpn-sale__fine { margin: 0.75rem 0 0; font-size: max(0.78rem, 11px); line-height: 1.5; color: var(--tpn-ivory-mute); }
.tp-nation .tpn-sale__fine time { color: var(--tpn-ivory-dim); font-weight: 600; }

/* ---------------------------------------------------------------- 5. what the passport unlocks (Passport Office) */

.tp-nation.tpn-unlocks { position: relative; margin: 0 0 1.8rem; color: var(--tpn-ivory); }

.tp-nation .tpn-unlocks__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.6rem 2rem;
    margin-bottom: 1.1rem;
}

.tp-nation .tpn-unlocks__title {
    margin: 0.5rem 0 0;
    font-family: var(--tpn-serif);
    font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--tpn-ivory);
}

.tp-nation .tpn-unlocks__sub { max-width: 44ch; margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-unlocks__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }

.tp-nation .tpn-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.2rem 1.15rem 1.1rem;
    border-radius: 16px;
    border: 1px solid rgba(243, 211, 138, 0.32);
    background: linear-gradient(180deg, rgba(20, 40, 74, 0.95) 0%, rgba(11, 24, 47, 0.97) 100%);
    box-shadow: 0 18px 44px rgba(2, 6, 16, 0.38);
}

.tp-nation .tpn-tile__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 12px;
    border: 1px solid rgba(243, 211, 138, 0.35);
    background: rgba(243, 211, 138, 0.08);
}

.tp-nation .tpn-tile__icon > svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--tpn-gold-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.tp-nation .tpn-tile__lock {
    position: absolute;
    right: -7px;
    bottom: -7px;
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 1px solid rgba(243, 211, 138, 0.6);
    background: #0b1b33;
}

.tp-nation .tpn-tile__lock svg { width: 10px; height: 10px; fill: none; stroke: var(--tpn-gold-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tp-nation .tpn-tile__title { margin: 0.35rem 0 0; font-family: var(--tpn-serif); font-size: 1.22rem; font-weight: 400; line-height: 1.2; color: var(--tpn-ivory); }
.tp-nation .tpn-tile__body { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--tpn-ivory-dim); }
.tp-nation .tpn-tile__short { display: none; }
.tp-nation .tpn-tile__foot { margin: auto 0 0; padding-top: 0.7rem; border-top: 1px dashed rgba(243, 211, 138, 0.2); font-size: 0.8rem; line-height: 1.45; color: var(--tpn-ivory-mute); }
.tp-nation .tpn-tile__foot time { color: var(--tpn-ivory-dim); }
.tp-nation .tpn-tile__foot .tpn-keychips { margin: 0; }
.tp-nation .tpn-tile__foot .tpn-keychips__item { padding: 0.2rem 0.45rem; font-size: 0.74rem; }

/* the Citizens' Discord, locked: a plain line, not a control */
.tp-nation .tpn-lockline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.75rem 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px dashed rgba(252, 247, 239, 0.32);
    background: rgba(8, 16, 34, 0.45);
    color: rgba(252, 247, 239, 0.7);
    font-weight: 700;
}

.tp-nation .tpn-lockline svg { width: 13px; height: 13px; fill: none; stroke: var(--tpn-gold-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- 6. Citizens-only marks (the Assembly, the Building Site, the Charter) */

.tp-nation .tpn-hall__plaque {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 1.4rem;
    translate: -50% 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: calc(100% - 2rem);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 211, 138, 0.55);
    background: rgba(8, 16, 34, 0.88);
    font-size: max(0.7rem, 11px);
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tpn-gold-soft);
    pointer-events: none;
}

.tp-nation .tpn-hall__plaque svg,
.tp-nation .tpn-path__who svg,
.tp-nation .tpn-ribbon svg { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.tp-nation .tpn-path__who {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.45rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(243, 211, 138, 0.4);
    background: rgba(243, 211, 138, 0.07);
    font-size: max(0.66rem, 10.5px);
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--tpn-gold-soft);
}

/* every build was chosen by Citizens: the gold ribbon, the first line of its title */
.tp-nation .tpn-ribbon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    margin: 0 0 0.45rem;
    padding: 0.22rem 0.75rem 0.22rem 0.6rem;
    border-radius: 4px;
    background: linear-gradient(135deg, #ffe39a 0%, #f5b54a 55%, #e79a36 100%);
    font-family: var(--tpn-font);
    font-size: max(0.68rem, 10.5px);
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #1d1304;
}

.tp-nation .tpn-ribbon svg { stroke: #1d1304; }
.tp-nation .tpn-ribbon svg path:first-child { fill: rgba(29, 19, 4, 0.12); }

@container tpn-ledger (max-width: 540px) {
    .tp-nation .tpn-ribbon { margin-bottom: 0.35rem; letter-spacing: 0.1em; }
}

/* the Charter's one exception to "two numbers, always": a result recorded from a vote held elsewhere */
.tp-nation .tpn-article__note { margin: 0.45rem 0 0; font-family: var(--tpn-serif); font-size: 0.9rem; font-style: italic; line-height: 1.5; color: var(--tpn-paper-text); opacity: 0.85; }

/* ---------------------------------------------------------------- narrower screens */

@media (max-width: 991.98px) {
    .tp-nation .tpn-founding__inner {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "coin head"
            "coin lede"
            "clock clock"
            "sale sale";
    }

    .tp-nation .tpn-founding__clock { min-width: 0; margin-top: 0.6rem; }
    .tp-nation .tpn-founding__inner--record { grid-template-areas: "coin head" "coin lede" "sale sale"; }
    .tp-nation .tpn-founding__inner--sale { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "lede" "sale"; }
    .tp-nation .tpn-unlocks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    /* 1: the coin beside the title, the text below both */
    .tp-nation .tpn-founding-card__body { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 0.85rem; }
    .tp-nation .tpn-founding-card__body .tpn-coin__stamp { --tpn-stamp-w: 6.3rem; }
    .tp-nation .tpn-founding-card__body .tpn-panel__scope { grid-column: 1 / -1; }
    .tp-nation .tpn-founding-card__copy { display: contents; }
    .tp-nation .tpn-hero__panel .tpn-panel--founding .tpn-panel__title { font-size: 1.22rem; margin: 0; align-self: center; }

    /* 1b: a rounded card, the coin beside the text and the button under it */
    .tp-nation .tpn-foundchip { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 0.5rem 0.7rem; border-radius: 18px; padding: 0.65rem 0.75rem; }
    .tp-nation .tpn-foundchip__go { grid-column: 2; justify-self: start; }

    /* 2: coin and head side by side, then the lede, the clock and the codes */
    .tp-nation .tpn-founding__inner,
    .tp-nation .tpn-founding__inner--record {
        grid-template-columns: 5.4rem minmax(0, 1fr);
        grid-template-areas:
            "coin head"
            "lede lede"
            "clock clock"
            "sale sale";
        gap: 0.8rem 0.9rem;
        padding: 1.2rem 1rem 1.15rem;
    }

    .tp-nation .tpn-founding__inner--record { grid-template-areas: "coin head" "lede lede" "sale sale"; }
    .tp-nation .tpn-founding__inner--sale { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "lede" "sale"; }
    .tp-nation .tpn-founding__inner > .tpn-coin .tpn-coin__stamp { --tpn-stamp-w: 5.3rem; }
    .tp-nation .tpn-founding__title { font-size: 1.22rem; margin-top: 0.3rem; }
    .tp-nation .tpn-founding__head .tpn-overline { font-size: 10.5px; letter-spacing: 0.14em; }
    .tp-nation .tpn-founding__lede { font-size: 0.9rem; line-height: 1.5; }
    .tp-nation .tpn-founding__clock { margin-top: 0; padding-top: 0.8rem; border-top: 1px dashed rgba(243, 211, 138, 0.2); }
    .tp-nation .tpn-countdown--minutes .tpn-countdown__cell,
    .tp-nation .tpn-countdown--minutes .tpn-countdown__cell b { min-width: 3.1rem; }
    .tp-nation .tpn-sale__codes { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
    .tp-nation .tpn-sale__code { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "plan pct value copy"; gap: 0.5rem; padding: 0.5rem 0.6rem; }
    .tp-nation .tpn-sale__value { justify-self: end; }

    /* 3 */
    .tp-nation .tpn-access__row { grid-template-columns: 1.9rem minmax(0, 1fr) auto; gap: 0.6rem; padding: 0.5rem 0; }
    .tp-nation .tpn-access__icon { width: 1.9rem; height: 1.9rem; }

    /* 5: a 2 x 2 grid of short tiles */
    .tp-nation .tpn-unlocks__sub { display: none; }
    .tp-nation .tpn-unlocks__title { font-size: 1.45rem; }
    .tp-nation .tpn-unlocks__grid { gap: 0.6rem; }
    .tp-nation .tpn-tile { gap: 0.35rem; padding: 0.85rem 0.8rem 0.8rem; }
    .tp-nation .tpn-tile__icon { width: 2.4rem; height: 2.4rem; }
    .tp-nation .tpn-tile__icon > svg { width: 1.15rem; height: 1.15rem; }
    .tp-nation .tpn-tile__title { margin-top: 0.3rem; font-size: 1rem; }
    .tp-nation .tpn-tile__body,
    .tp-nation .tpn-tile__foot { display: none; }
    .tp-nation .tpn-tile__short { display: block; font-size: 0.78rem; line-height: 1.4; color: var(--tpn-ivory-mute); }

    /* 6 */
    .tp-nation .tpn-hall__plaque { bottom: 0.8rem; font-size: 10px; letter-spacing: 0.12em; }

    /* the small coin's ribbon and date reach below its box (two lines of Arabic or Hebrew lettering reach further): keep
       the text under it clear */
    .tp-nation .tpn-coin { padding-bottom: 0.5rem; }
    .tp-nation[dir="rtl"] .tpn-coin { padding-bottom: 1.8rem; }
    .tp-nation .tpn-coin__ink { left: 50%; padding: 0.2rem 0.45rem 0.15rem; font-size: 0.74rem; letter-spacing: 0.12em; }
}

/* right to left: the badges and the ribbon keep their order, the arrows turn */
.tp-nation[dir="rtl"] .tpn-access__who,
.tp-nation[dir="rtl"] .tpn-sale__plan,
.tp-nation[dir="rtl"] .tpn-path__who,
.tp-nation[dir="rtl"] .tpn-ribbon,
.tp-nation[dir="rtl"] .tpn-hall__plaque,
.tp-nation[dir="rtl"] .tpn-ballotbox__label,
.tp-nation[dir="rtl"] .tpn-tag { letter-spacing: 0.02em; }

@media (forced-colors: active) {
    .tp-nation .tpn-foundchip__go,
    .tp-nation .tpn-ribbon { forced-color-adjust: none; background: CanvasText; color: Canvas; }
    .tp-nation .tpn-ribbon svg { stroke: Canvas; }
}

/* ---------------------------------------------------------------- the Founding Sale's badge on the pricing cards */

/* nation.js puts it next to each plan's title while the sale is on (the percents come from the Passport Office's
   Founding band). It is the only Nation element inside the protected pricing block, and it stays out of the block's
   layout: absolutely positioned at its own static place (right after the title's text), so the title, the card and
   every button keep exactly their boxes (the Paddle check in tools/nation-site/README.md compares them). Visual only:
   no pointer events, no focus; its full wording is for screen readers. Outside .tp-nation, so its own class only. */
.tpn-sale-badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.5rem;
    padding: 0.2rem 0.5rem 0.18rem;
    border-radius: 999px;
    border: 1px solid rgba(154, 104, 20, 0.55);
    background: linear-gradient(135deg, #ffe39a 0%, #f5b54a 55%, #e79a36 100%);
    box-shadow: 0 4px 10px rgba(29, 19, 4, 0.18);
    color: #1d1304;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
    translate: 0 0.22em;
    pointer-events: none;
    user-select: none;
}

.tpn-sale-badge__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (forced-colors: active) {
    .tpn-sale-badge { forced-color-adjust: none; background: CanvasText; color: Canvas; border-color: CanvasText; }
}