/* ============================================================
   The Z Impact — public theme v1.1 "Private Trading Desk"
   Luxury trading terminal × premium financial publication.
   Type: Fraunces (display) · Source Serif 4 (article body)
         Archivo (UI) · IBM Plex Mono (data vernacular)
   ============================================================ */

:root {
    --void:      #08090c;   /* page */
    --graphite:  #0e1117;   /* raised surfaces */
    --carbon:    #141823;   /* elevated / inputs */
    --line:      #1f2430;   /* neutral hairline */
    --gold:      #c9a44d;   /* champagne gold — THE accent */
    --gold-hi:   #e8c97a;   /* hover / highlights */
    --gold-dim:  rgba(201, 164, 77, .32);
    --text:      #eae8e1;   /* warm paper-white */
    --muted:     #8f93a3;
    --faint:     #5d6170;
    --up:        #3ecf8e;   /* session-open only */
    --serif:     "Fraunces", Georgia, serif;
    --body-serif:"Source Serif 4", Georgia, serif;
    --sans:      "Archivo", system-ui, sans-serif;
    --mono:      "IBM Plex Mono", ui-monospace, monospace;
    --wrap:      1080px;
    --measure:   68ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--void);
    color: var(--text);
    font: 16px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
    /* faint vertical grid — the terminal's graph paper */
    background-image:
        linear-gradient(rgba(201,164,77,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,164,77,.018) 1px, transparent 1px);
    background-size: 72px 72px;
}
a { color: var(--gold); text-decoration: none; }
.dim { color: var(--muted); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
::selection { background: var(--gold); color: var(--void); }

/* underline that draws itself */
.u-link { background-image: linear-gradient(var(--gold-hi), var(--gold-hi));
    background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%;
    transition: background-size .35s cubic-bezier(.22,1,.36,1); }
.u-link:hover { background-size: 100% 1px; }

/* ── mono vernacular ─────────────────────────────────────── */
.eyebrow { font: 600 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold); }
.meta { font: 400 .78rem/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; }
.meta a { color: var(--muted); } .meta a:hover { color: var(--gold-hi); }

/* level-tag divider: a price level with its label */
.level { display: flex; align-items: center; gap: .9rem; margin: 0 0 1.8rem; }
.level::after { content: ""; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--gold-dim), var(--line) 60%, transparent); }
.level .eyebrow { white-space: nowrap; }

/* ── session strip (signature) ───────────────────────────── */
.session-strip { border-bottom: 1px solid var(--line); background: var(--graphite);
    font: 500 .68rem/1 var(--mono); letter-spacing: .06em; color: var(--faint); }
.session-strip .wrap { display: flex; gap: 1.6rem; align-items: center; height: 30px;
    overflow-x: auto; scrollbar-width: none; }
.session-strip .wrap::-webkit-scrollbar { display: none; }
.session-strip .s { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.session-strip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.session-strip .s.open { color: var(--muted); }
.session-strip .s.open .dot { background: var(--up); box-shadow: 0 0 6px rgba(62,207,142,.7); }
.session-strip .utc { margin-left: auto; color: var(--muted); }

/* ── header ──────────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 50;
    background: rgba(8,9,12,.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line); }
.site-head .wrap { height: 62px; }
.logo { display: inline-flex; align-items: baseline; gap: .55rem; color: var(--text); }
.logo-mark { display: grid; place-items: center; width: 30px; height: 30px; align-self: center;
    border: 1px solid var(--gold); color: var(--gold);
    font: 700 1.05rem/1 var(--serif); border-radius: 2px; position: relative; }
.logo-mark::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--gold-dim);
    border-radius: 1px; }
.logo-name { font: 600 1.02rem/1 var(--serif); letter-spacing: .02em; }
.site-nav { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { font: 500 .8rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); padding: .4rem 0; white-space: nowrap; position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--gold); transition: right .3s cubic-bezier(.22,1,.36,1); }
.site-nav a:hover { color: var(--text); }
.site-nav a:hover::after { right: 0; }

main.wrap { padding: 3rem 1.4rem 5rem; min-height: 62vh; }

/* ── hero ────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3rem; align-items: center; padding: 3.5rem 0 4rem; }
.hero-copy .eyebrow { display: block; margin-bottom: 1.1rem; }
.hero h1 { font: 600 clamp(2.4rem, 5.5vw, 3.7rem)/1.08 var(--serif);
    letter-spacing: -.015em; margin: 0 0 1.2rem; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.lede { font: 400 1.06rem/1.7 var(--sans); color: var(--muted);
    max-width: 50ch; margin: 0 0 1.8rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero-copy > * { animation: rise .7s cubic-bezier(.22,1,.36,1) backwards; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* liquidity-sweep brand mark */
.sweep-art { width: 100%; height: auto; display: block;
    animation: rise .9s .2s cubic-bezier(.22,1,.36,1) backwards; }
.sweep-art .grid-line { stroke: var(--line); stroke-width: 1; }
.sweep-art .liq { stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 5 6; opacity: .9; }
.sweep-art .candle { fill: var(--carbon); stroke: var(--faint); stroke-width: 1; }
.sweep-art .candle.gold { fill: rgba(201,164,77,.18); stroke: var(--gold); }
.sweep-art .wick { stroke: var(--faint); stroke-width: 1; }
.sweep-art .wick.gold { stroke: var(--gold); stroke-width: 1.5; }
.sweep-art text { font: 600 9px var(--mono); fill: var(--gold); letter-spacing: .14em; }
.sweep-art .lbl-dim { fill: var(--faint); }

/* ── buttons ─────────────────────────────────────────────── */
.btn-gold { display: inline-block; background: var(--gold); color: var(--void);
    font: 600 .82rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
    padding: .85rem 1.6rem; border: 1px solid var(--gold); border-radius: 2px;
    cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.btn-gold:hover { background: transparent; color: var(--gold-hi);
    box-shadow: inset 0 0 0 1px var(--gold), 0 0 24px rgba(201,164,77,.15); }
.btn-ghost { display: inline-block; color: var(--muted); font: 500 .82rem/1 var(--sans);
    letter-spacing: .1em; text-transform: uppercase; padding: .85rem .4rem;
    border-bottom: 1px solid var(--line); transition: color .25s, border-color .25s; }
.btn-ghost:hover { color: var(--gold-hi); border-color: var(--gold); }

/* ── editorial index (replaces card grids) ───────────────── */
.feed { border-top: 1px solid var(--line); }
.entry { display: grid; grid-template-columns: 150px minmax(0,1fr) 32px; gap: 1.6rem;
    padding: 1.6rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
    transition: background .25s; position: relative; }
.entry:hover { background: linear-gradient(90deg, rgba(201,164,77,.045), transparent 65%); }
.entry::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 1px;
    background: var(--gold); transform: scaleY(0); transform-origin: top;
    transition: transform .3s cubic-bezier(.22,1,.36,1); }
.entry:hover::before { transform: scaleY(1); }
.entry .meta { padding-top: .2rem; }
.entry h2, .entry h3 { margin: 0 0 .35rem; font: 600 1.3rem/1.3 var(--serif); letter-spacing: -.005em; }
.entry h2 a, .entry h3 a { color: var(--text); transition: color .2s; }
.entry h2 a:hover, .entry h3 a:hover { color: var(--gold-hi); }
.entry p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 64ch; }
.entry .go { font: 400 1.1rem/1 var(--mono); color: var(--faint); justify-self: end;
    transition: transform .3s cubic-bezier(.22,1,.36,1), color .2s; }
.entry:hover .go { transform: translateX(5px); color: var(--gold); }

/* featured (first) entry on home */
.entry-featured { display: block; padding: 2rem 0; border-bottom: 1px solid var(--line); position: relative; }
.entry-featured::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 1px;
    background: var(--gold); transform: scaleY(0); transform-origin: top;
    transition: transform .3s cubic-bezier(.22,1,.36,1); }
.entry-featured:hover::before { transform: scaleY(1); }
.entry-featured .meta { margin-bottom: .6rem; display: block; }
.entry-featured h2 { margin: 0 0 .6rem; font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--serif); }
.entry-featured h2 a { color: var(--text); }
.entry-featured h2 a:hover { color: var(--gold-hi); }
.entry-featured p { color: var(--muted); max-width: 70ch; margin: 0; }

/* pillar trio on home */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); margin: 0 0 4rem; }
.pillar { background: var(--graphite); padding: 1.8rem 1.6rem; transition: background .3s; }
.pillar:hover { background: var(--carbon); }
.pillar .eyebrow { display: block; margin-bottom: .9rem; color: var(--faint); }
.pillar:hover .eyebrow { color: var(--gold); }
.pillar h3 { margin: 0 0 .5rem; font: 600 1.18rem/1.3 var(--serif); }
.pillar p { margin: 0; font-size: .88rem; color: var(--muted); }

/* ── article (the reading experience) ────────────────────── */
.prose { max-width: var(--measure); margin: 0 auto; }
.crumbs { font: 400 .75rem/1.6 var(--mono); color: var(--faint); margin-bottom: 2rem; }
.crumbs a { color: var(--faint); } .crumbs a:hover { color: var(--gold); }
.crumbs .sep { color: var(--gold-dim); padding: 0 .35rem; }
.prose .article-eyebrow { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
.prose h1 { font: 600 clamp(1.9rem, 4.5vw, 2.9rem)/1.15 var(--serif);
    letter-spacing: -.01em; margin: 0 0 1.1rem; }
.byline { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
    padding: .9rem 0; margin: 0 0 2rem; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); }
.prose img.featured { width: 100%; height: auto; border: 1px solid var(--line);
    border-radius: 2px; margin: 0 0 2.4rem; }

.prose .body { font: 400 1.12rem/1.85 var(--body-serif); color: #d9d7cf; }
.prose .body > p:first-of-type::first-letter { font: 600 3.4em/0.85 var(--serif);
    color: var(--gold); float: left; padding: .08em .12em 0 0; }
.prose .body h2 { font: 600 1.65rem/1.3 var(--serif); color: var(--text);
    margin: 2.6rem 0 .9rem; padding-top: 1.4rem; position: relative; }
.prose .body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent); }
.prose .body h3 { font: 600 1.25rem/1.35 var(--serif); color: var(--text); margin: 2rem 0 .7rem; }
.prose .body a { border-bottom: 1px solid var(--gold-dim); transition: border-color .2s, color .2s; }
.prose .body a:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.prose .body img { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 2px; }
.prose .body blockquote { margin: 2rem 0; padding: 1.3rem 1.6rem;
    background: var(--graphite); border-left: 2px solid var(--gold);
    font-style: italic; color: var(--muted); }
.prose .body blockquote p { margin: 0; }
.prose .body ul, .prose .body ol { padding-left: 1.3rem; }
.prose .body li { margin: .45rem 0; }
.prose .body li::marker { color: var(--gold); }
.prose .body pre { background: var(--graphite); border: 1px solid var(--line); border-radius: 2px;
    padding: 1rem 1.2rem; overflow-x: auto; font: .86rem/1.6 var(--mono); }
.prose .body code { font: .88em var(--mono); background: var(--carbon);
    padding: .1em .35em; border-radius: 2px; }
.prose .body pre code { background: none; padding: 0; }
.prose .body hr { border: 0; height: 1px; margin: 2.4rem 0;
    background: linear-gradient(90deg, var(--gold-dim), var(--line), transparent); }
.prose .body table { width: 100%; border-collapse: collapse; font: .92rem/1.5 var(--sans); }
.prose .body th { font: 600 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--gold); text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--gold-dim); }
.prose .body td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); }

.hub-intro { margin: 0 auto 3rem; }

/* ── related reading ─────────────────────────────────────── */
.related { max-width: var(--measure); margin: 3.5rem auto 0; }
.related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.related li { border-bottom: 1px solid var(--line); }
.related li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1rem .2rem; color: var(--text); font: 500 1.02rem/1.4 var(--serif); transition: padding-left .25s, color .2s; }
.related li a::after { content: "→"; font: 400 1rem/1 var(--mono); color: var(--faint); transition: color .2s, transform .3s; }
.related li a:hover { color: var(--gold-hi); padding-left: .7rem; }
.related li a:hover::after { color: var(--gold); transform: translateX(4px); }

/* ── lead CTA (the distinctive ask) ──────────────────────── */
.cta-box { margin: 3rem 0 0; padding: 2.2rem 2rem; position: relative;
    background:
        linear-gradient(var(--graphite), var(--graphite)) padding-box,
        linear-gradient(120deg, var(--gold), rgba(201,164,77,.15) 40%, var(--gold-dim)) border-box;
    border: 1px solid transparent; border-radius: 2px; }
.cta-box::before { content: "SIGNAL"; position: absolute; top: -8px; left: 1.6rem;
    background: var(--void); padding: 0 .6rem;
    font: 600 .64rem/1.2 var(--mono); letter-spacing: .22em; color: var(--gold); }
.cta-box h3 { margin: 0 0 .4rem; font: 600 1.45rem/1.25 var(--serif); }
.cta-box > p { margin: 0 0 1.2rem; color: var(--muted); font-size: .95rem; }
.cta-row { display: flex; gap: .7rem; flex-wrap: wrap; }
.cta-row input[type="email"] { flex: 1 1 230px; min-width: 0; }

/* ── forms ───────────────────────────────────────────────── */
input[type="email"], input[type="text"], input[type="search"], textarea, input:not([type]) {
    background: var(--carbon); border: 1px solid var(--line); border-radius: 2px;
    color: var(--text); font: 400 .95rem/1.5 var(--sans); padding: .8rem 1rem; width: 100%;
    transition: border-color .25s, box-shadow .25s; }
input:focus, textarea:focus { outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,164,77,.12); }
input::placeholder, textarea::placeholder { color: var(--faint); }
label { display: block; font: 600 .7rem/1 var(--mono); letter-spacing: .16em;
    text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 .45rem; }
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important;
    height: 1px; width: 1px; opacity: 0; }
.contact-form { max-width: 560px; }
.contact-form button { margin-top: 1.4rem; }
.form-note { font: 400 .74rem/1.6 var(--mono); color: var(--faint); margin-top: .8rem; }

/* ── pager ───────────────────────────────────────────────── */
.pager { display: flex; gap: .5rem; margin-top: 2.2rem; }
.pager a { font: 500 .8rem/1 var(--mono); padding: .55rem .9rem;
    border: 1px solid var(--line); border-radius: 2px; color: var(--muted);
    transition: border-color .2s, color .2s; }
.pager a:hover { border-color: var(--gold-dim); color: var(--text); }
.pager a.on { border-color: var(--gold); color: var(--gold); }

/* ── page titles / message / 404 ─────────────────────────── */
.page-title { margin: 0 0 2.2rem; }
.page-title .eyebrow { display: block; margin-bottom: .8rem; }
.page-title h1 { font: 600 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--serif); margin: 0; }
.page-title p.sub { color: var(--muted); margin: .7rem 0 0; max-width: 60ch; }
.statement { max-width: 620px; margin: 4rem auto; text-align: center; }
.statement .code { font: 600 .78rem/1 var(--mono); letter-spacing: .3em; color: var(--gold); }
.statement h1 { font: 600 clamp(1.9rem, 4.5vw, 2.7rem)/1.2 var(--serif); margin: 1rem 0; }
.statement p { color: var(--muted); margin: 0 0 1.8rem; }

/* ── footer ──────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: var(--graphite);
    margin-top: 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.2fr .8fr 1.4fr; gap: 3rem;
    padding: 3rem 0 2.4rem; }
.foot-grid h4 { font: 600 .7rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
    color: var(--faint); margin: 0 0 1rem; }
.foot-brand .logo { margin-bottom: 1rem; display: inline-flex; }
.foot-brand p { font-size: .85rem; color: var(--muted); margin: 0; max-width: 36ch; }
.foot-nav { display: flex; flex-direction: column; gap: .55rem; }
.foot-nav a { color: var(--muted); font-size: .88rem; }
.foot-nav a:hover { color: var(--gold-hi); }
.newsletter-box h3 { margin: 0 0 .4rem; font: 600 1.3rem/1.3 var(--serif); }
.newsletter-box > p { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; }
.newsletter-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.newsletter-form input[type="email"] { flex: 1 1 200px; min-width: 0; }
.foot-base { border-top: 1px solid var(--line); padding: 1.2rem 0;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font: 400 .74rem/1.6 var(--mono); color: var(--faint); }
.foot-base a { color: var(--muted); }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 2rem; padding: 2.2rem 0 3rem; }
    .hero-art { order: -1; max-width: 420px; }
    .pillars { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
    .entry { grid-template-columns: 1fr; gap: .4rem; }
    .entry .meta { order: -1; }
    .entry .go { display: none; }
    main.wrap { padding: 2rem 1.2rem 4rem; }
    .prose .body { font-size: 1.05rem; }
    .byline { gap: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ── quality floor ───────────────────────────────────────── */
button { font: inherit; -webkit-appearance: none; appearance: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.site-nav a:focus-visible, .foot-nav a:focus-visible { outline-offset: 4px; }
img { max-width: 100%; }


/* ── footer social icons ─────────────────────────────────── */
.foot-social { display: flex; gap: .65rem; margin-top: 1.1rem; flex-wrap: wrap; }
.foot-social a {
    display: inline-grid; place-items: center; width: 38px; height: 38px;
    color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
    transition: color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.foot-social a:hover {
    color: var(--gold-hi); border-color: var(--gold);
    transform: translateY(-2px); box-shadow: 0 0 18px rgba(201,164,77,.18);
}
.foot-social svg { display: block; }


/* ── contact: connect hub ────────────────────────────────── */
.connect-hero { max-width: 620px; margin: 1rem 0 2.6rem; }
.connect-hero .eyebrow { display: block; margin-bottom: 1rem; }
.connect-hero h1 { font: 600 clamp(2rem, 5vw, 3rem)/1.1 var(--serif);
    letter-spacing: -.015em; margin: 0 0 1.1rem; }
.connect-hero h1 em { font-style: italic; color: var(--gold); }
.connect-lede { font: 400 1.05rem/1.7 var(--sans); color: var(--muted); margin: 0; max-width: 52ch; }

.connect-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 0 0 2.4rem; }

.connect-card {
    position: relative; display: flex; align-items: center; gap: 1.1rem;
    padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: 12px;
    background: var(--graphite); color: var(--text); overflow: hidden;
    transition: border-color .3s, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
    animation: rise .6s cubic-bezier(.22,1,.36,1) backwards;
}
.connect-card:nth-child(1){animation-delay:.04s} .connect-card:nth-child(2){animation-delay:.10s}
.connect-card:nth-child(3){animation-delay:.16s} .connect-card:nth-child(4){animation-delay:.22s}
.connect-card:nth-child(5){animation-delay:.28s} .connect-card:nth-child(6){animation-delay:.34s}
.connect-card:hover { border-color: var(--gold); transform: translateY(-3px);
    box-shadow: 0 10px 34px -12px rgba(201,164,77,.32); }

.cc-icon { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px;
    border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
    background: var(--carbon); transition: color .3s, border-color .3s, background .3s; }
.connect-card:hover .cc-icon { color: var(--gold-hi); border-color: var(--gold-dim); background: var(--graphite); }

.cc-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.cc-label { font: 600 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.cc-handle { font: 600 1.1rem/1.25 var(--serif); color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connect-card:hover .cc-handle { color: var(--gold-hi); }
.cc-sub { font-size: .82rem; color: var(--muted); }

.cc-arrow { margin-left: auto; font: 400 1.2rem/1 var(--mono); color: var(--faint);
    transition: transform .3s cubic-bezier(.22,1,.36,1), color .3s; }
.connect-card:hover .cc-arrow { transform: translateX(5px); color: var(--gold); }

/* primary (support) card: gradient border + persistent glow */
.connect-primary { grid-column: 1 / -1;
    background:
        linear-gradient(var(--graphite), var(--graphite)) padding-box,
        linear-gradient(120deg, var(--gold), rgba(201,164,77,.2) 45%, var(--gold-dim)) border-box;
    border: 1px solid transparent; }
.connect-primary .cc-icon { color: var(--gold); border-color: var(--gold-dim); }
.connect-primary .cc-handle { color: var(--gold-hi); }
.cc-glow { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120px 80px at 8% 50%, rgba(201,164,77,.10), transparent 70%); }

.connect-foot { text-align: center; color: var(--muted); font-size: .92rem; margin: 0; }

@media (max-width: 640px) {
    .connect-grid { grid-template-columns: 1fr; }
    .cc-sub { display: none; }
}


/* ── in-article indicator showcase CTA ───────────────────── */
.indicator-cta {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; align-items: stretch;
    margin: 3rem 0 0; border-radius: 14px; overflow: hidden;
    background:
        linear-gradient(var(--graphite), var(--graphite)) padding-box,
        linear-gradient(130deg, var(--gold), rgba(201,164,77,.18) 45%, var(--gold-dim)) border-box;
    border: 1px solid transparent;
}
.ic-media { position: relative; background: var(--carbon); }
.ic-media img { width: 100%; height: auto; object-fit: contain; display: block; }
.ic-placeholder { width: 100%; height: 100%; min-height: 220px; display: grid; place-items: center;
    background:
        radial-gradient(140px 100px at 50% 40%, rgba(201,164,77,.16), transparent 70%),
        repeating-linear-gradient(0deg, rgba(201,164,77,.04) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(201,164,77,.04) 0 1px, transparent 1px 26px),
        var(--carbon); }
.ic-placeholder span { font: 600 4rem/1 var(--serif); color: var(--gold);
    border: 2px solid var(--gold); border-radius: 6px; width: 92px; height: 92px;
    display: grid; place-items: center; }
.ic-badge { position: absolute; left: 12px; bottom: 12px;
    font: 600 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    color: var(--void); background: var(--gold); padding: .4rem .6rem; border-radius: 4px; }

.ic-body { padding: 1.8rem 1.9rem; display: flex; flex-direction: column; }
.ic-body .eyebrow { display: block; margin-bottom: .7rem; }
.ic-body h3 { margin: 0 0 .5rem; font: 600 1.5rem/1.2 var(--serif); color: var(--gold-hi); }
.ic-body > p { margin: 0 0 1.3rem; color: var(--muted); font-size: .95rem; line-height: 1.7; }

.ic-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.ic-toggle { background: none; cursor: pointer; }

.ic-form { margin-top: 1.2rem; animation: rise .4s cubic-bezier(.22,1,.36,1); }
.ic-form .cta-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.ic-form input[type="email"] { flex: 1 1 220px; min-width: 0; }
.ic-note { font: 400 .76rem/1.5 var(--mono); color: var(--faint); margin: .7rem 0 0; }

@media (max-width: 640px) {
    .indicator-cta { grid-template-columns: 1fr; }
    .ic-media img { height: auto; object-fit: contain; }
    .ic-placeholder { min-height: 160px; }
    .ic-body { padding: 1.4rem 1.3rem; }
    .ic-body h3 { font-size: 1.35rem; }
    .ic-actions { flex-direction: column; align-items: stretch; }
    .ic-actions .btn-gold, .ic-actions .btn-ghost { text-align: center; }
}


/* ── image lightbox ──────────────────────────────────────── */
.zi-zoomable { cursor: zoom-in; transition: opacity .25s, transform .35s cubic-bezier(.22,1,.36,1); }
.zi-zoomable:hover { opacity: .92; }
.zi-lightbox {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 4vmin; background: rgba(5,6,7,0); backdrop-filter: blur(0px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .32s ease, background .32s ease, backdrop-filter .32s ease, visibility .32s;
}
.zi-lightbox.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    background: rgba(5,6,7,.92); backdrop-filter: blur(6px);
}
.zi-lb-fig { margin: 0; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column;
    align-items: center; gap: .8rem; }
.zi-lb-img {
    max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 8px;
    border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9);
    transform: scale(.86); opacity: 0;
    transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .38s ease;
}
.zi-lightbox.open .zi-lb-img { transform: scale(1); opacity: 1; }
.zi-lb-cap { font: 400 .82rem/1.5 var(--mono); color: var(--muted); text-align: center; max-width: 70ch; }
.zi-lb-close {
    position: fixed; width: 44px; height: 44px; border-radius: 50%;
    /* respect iPhone safe areas (notch / rounded corners) */
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(16px + env(safe-area-inset-right, 0px));
    background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--text);
    cursor: pointer; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s, border-color .25s, color .25s, transform .25s;
    -webkit-tap-highlight-color: transparent;
}
/* Center the glyph reliably across iOS/desktop: use an explicit sized span-free
   approach — the × is sized and line-height normalized so it sits dead center. */
.zi-lb-close { font-family: var(--sans); font-weight: 300; font-size: 26px; }
.zi-lb-close::before {
    content: "\00d7"; display: block; line-height: 1; margin-top: -2px;
}
.zi-lb-close:hover, .zi-lb-close:active {
    background: var(--gold); border-color: var(--gold); color: var(--void); transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .zi-lb-img, .zi-lightbox, .zi-lb-close { transition: opacity .2s ease; }
    .zi-lightbox.open .zi-lb-img { transform: none; }
    .zi-lb-img { transform: none; }
}

/* ── custom scrollbar (gold, themed) ─────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--gold), var(--gold-dim));
    border: 2px solid var(--void); border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--gold-hi), var(--gold)); }
::-webkit-scrollbar-corner { background: var(--void); }

/* ── reading progress bar (top of viewport) ──────────────── */
#zi-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-hi));
    box-shadow: 0 0 10px rgba(201,164,77,.5); z-index: 999;
    transition: width .08s linear; pointer-events: none;
}