/* 日印フロンティア・マップ — map, cards, entity and explainer pages.
   Mobile-first: written for 360px and widened at breakpoints. Extends site.css. */

:root {
    --ink: #1a1a2e;
    --paper: #FAFAF7;
    --rule: #000000;
    --muted: #4a4f63;
    --india: #C2410C;        /* AA against white at 4.8:1 — the old #FF6B35 was 2.8:1 */
    --india-dot: #FF6B35;    /* decorative only, never behind text */
    --japan: #9A2E22;
    --japan-dot: #6B7280;    /* neutral, so a JP city is never read as a sector colour */
    --ja-font: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
    --latin-font: 'Space Grotesk', sans-serif;
    --mono: 'Space Mono', monospace;
}

/* Japanese line breaking: never split a word, but never overflow either. */
html[lang="ja"] body, .ja, [lang="ja"] {
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
}

body.frontier {
    padding: 0;
    display: block;
    align-items: initial;
    overflow-x: hidden;
    font-family: var(--ja-font);
}
.frontier *, .frontier *::before, .frontier *::after { box-sizing: border-box; }

/* Latin text and numbers keep the display face; Japanese gets a real JP face. */
.frontier .counter-num, .frontier time, .frontier .mono, .frontier .dc-amount,
.frontier .map-label, .frontier .t-en, .frontier .hero-gloss, .frontier .df-email {
    font-family: var(--latin-font);
}

.frontier .t-en, .frontier .p-en { display: none; }
html.en-mode .frontier .t-ja, html.en-mode .frontier .p-ja { display: none; }
html.en-mode .frontier .t-en, html.en-mode .frontier .p-en { display: inline; }
html.en-mode .frontier { font-family: var(--latin-font); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; font-family: var(--mono);
}
.skip-link:focus { left: 0; }
.frontier :focus-visible { outline: 3px solid var(--india); outline-offset: 2px; }

/* ---------- header ---------- */
.fx-head {
    position: relative; border-bottom: 4px solid var(--rule); background: #fff;
    padding: 1.25rem 1rem 0.75rem; width: 100%; margin: 0; box-shadow: none;
    display: block; text-align: left; max-width: none;
}
.fx-head .header-accent { height: 8px; }
.fx-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fx-wordmark img { display: block; width: 150px; height: auto; }
.lang-toggle {
    font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
    border: 2px solid var(--rule); background: var(--paper); color: var(--ink);
    padding: 0.35rem 0.7rem; cursor: pointer; box-shadow: 3px 3px 0 0 var(--rule);
    min-height: 44px; min-width: 56px;
}
.lang-toggle[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fx-product { font-family: var(--mono); font-weight: 700; font-size: 0.95rem; margin-top: 0.6rem; }
.fx-nav {
    display: flex; flex-wrap: wrap; gap: 0.1rem 0.85rem; margin-top: 0.75rem;
    padding-top: 0.5rem; border-top: 1px dashed #c9c9c9; font-size: 0.85rem;
}
.fx-nav a {
    color: var(--ink); text-decoration: none; padding: 0.6rem 0;
    border-bottom: 2px solid transparent; min-height: 44px; display: inline-flex; align-items: center;
}
.fx-nav a:hover, .fx-nav a:focus { border-bottom-color: var(--india); }
.fx-nav .nav-cta { font-weight: 700; color: var(--india); }

/* ---------- layout ---------- */
.fx-main { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.section-head { margin-bottom: 1rem; }
.section-head h2 { font-size: 1.25rem; margin-bottom: 0.35rem; }
.section-note { font-size: 0.82rem; color: var(--muted); line-height: 1.8; }

/* ---------- hero ---------- */
.hero { padding: 1.25rem 0 1rem; }
.hero h1 { font-size: 1.6rem; line-height: 1.5; margin-bottom: 0.8rem; }
.hero-sub { font-size: 0.95rem; line-height: 1.9; margin-bottom: 0.7rem; }
.hero-gloss {
    font-size: 0.76rem; line-height: 1.7; color: var(--muted);
    border-left: 3px solid var(--india); padding-left: 0.7rem; margin-bottom: 1.1rem;
}
.hero-offer { background: #fff; border: 3px solid var(--rule); box-shadow: 6px 6px 0 0 var(--rule); padding: 1rem; }
.hero-offer-title { font-size: 0.92rem; font-weight: 700; line-height: 1.7; margin-bottom: 0.8rem; }

/* ---------- digest forms ---------- */
.digest-form { display: block; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.df-heading { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.7; }
.df-row { display: grid; gap: 0.5rem; }
.df-label { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.df-email {
    font-size: 1rem; padding: 0.7rem; border: 2px solid var(--rule);
    background: var(--paper); color: var(--ink); min-height: 48px; width: 100%;
}
.df-submit {
    font-family: var(--mono); font-weight: 700; font-size: 0.9rem; padding: 0.75rem 1.2rem;
    border: 2px solid var(--rule); background: var(--india); color: #fff; cursor: pointer;
    box-shadow: 4px 4px 0 0 var(--rule); min-height: 48px; width: 100%;
}
.df-submit:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--rule); }
.df-note { font-size: 0.74rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.7; }
.df-note a { color: var(--ink); }
.digest-thanks { border: 2px dashed var(--rule); background: #FFFBEB; padding: 1rem; }
.dt-title { font-weight: 700; margin-bottom: 0.7rem; line-height: 1.7; }
.dt-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.dt-dl {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.9rem;
    border: 2px solid var(--rule); background: #fff; color: var(--ink);
    font-family: var(--mono); font-size: 0.8rem; text-decoration: none; box-shadow: 3px 3px 0 0 var(--rule);
}
.dt-note, .dt-call { font-size: 0.8rem; color: var(--muted); line-height: 1.7; }
.dt-call a { color: var(--ink); }

/* ---------- counters ---------- */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.5rem 0; }
.counter {
    display: block; text-align: left; text-decoration: none; color: var(--ink); cursor: pointer;
    background: #fff; border: 2px solid var(--rule); box-shadow: 4px 4px 0 0 var(--rule);
    padding: 0.7rem 0.6rem; min-height: 44px; font: inherit;
}
.counter:hover, .counter:focus { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--rule); }
.counter-num { display: block; font-family: var(--mono); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.counter-num-sm { font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.counter-label { display: block; font-size: 0.66rem; color: var(--muted); margin-top: 0.35rem; line-height: 1.5; }

/* ---------- legend and chips ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.legend-item, .legend-all {
    display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono);
    font-size: 0.72rem; color: var(--ink); background: #fff; border: 2px solid var(--rule);
    padding: 0.4rem 0.55rem; cursor: pointer; min-height: 44px; opacity: 0.45;
}
.legend-item.is-on, .legend-all { opacity: 1; box-shadow: 3px 3px 0 0 var(--rule); }
.legend-all { font-weight: 700; }
.legend-swatch { color: var(--sector-color); font-size: 0.95rem; line-height: 1; }
.tier-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin-bottom: 0.8rem; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
.tk { display: inline-flex; align-items: center; gap: 0.3rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.76rem;
    background: var(--ink); color: var(--paper); border: 2px solid var(--rule);
    padding: 0.4rem 0.7rem; cursor: pointer; min-height: 44px;
}
.chip-x { font-size: 1rem; line-height: 1; }

/* ---------- map ---------- */
.map-stage {
    position: relative; background: #fff; border: 3px solid var(--rule);
    box-shadow: 6px 6px 0 0 var(--rule); margin-bottom: 0.8rem; min-height: 190px; overflow: hidden;
}
.map-stage svg { display: block; width: 100%; height: auto; }
.map-loading { padding: 3rem 1rem; text-align: center; font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.map-country { fill: #EFEFE9; stroke: var(--rule); stroke-width: 2.5; }
.map-country.india { fill: #FDEFE8; }
.map-country.japan { fill: #F1F1F4; }
.map-label { font-family: var(--mono); font-size: 30px; font-weight: 700; fill: var(--muted); letter-spacing: 0.1em; }

.map-arc { fill: none; opacity: 0.8; cursor: pointer; }
.map-arc:hover, .map-arc:focus { opacity: 1; outline: none; }
.map-arc.is-active { opacity: 1; stroke-width: 7; }
svg.is-dimmed .map-arc { opacity: 0.12; }
svg.is-dimmed .map-arc.is-active { opacity: 1; }

.map-node-group { cursor: pointer; }
.map-node { stroke: var(--rule); stroke-width: 2; }
.map-node.node-in { fill: var(--india-dot); }
.map-node.node-jp { fill: var(--japan-dot); }
.map-node-group.is-selected .map-node { stroke-width: 5; stroke: var(--ink); }
.map-node-group:focus-visible .map-node { stroke-width: 5; }
.map-node-pulse { fill: none; stroke: var(--india); stroke-width: 3; transform-origin: center; animation: nodePulse 2.4s ease-out infinite; }
@keyframes nodePulse {
    0% { opacity: 0.8; r: 10; }
    100% { opacity: 0; r: 42; }
}
.map-node-label {
    font-family: var(--mono); font-size: 19px; fill: var(--ink);
    paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round;
}
.map-node-badge { font-family: var(--mono); font-size: 16px; font-weight: 700; fill: var(--india); paint-order: stroke; stroke: #fff; stroke-width: 5px; }

/* ---------- time replay ---------- */
.timeline-control {
    display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
    background: #fff; border: 2px solid var(--rule); padding: 0.5rem 0.7rem;
}
.tc-play {
    min-width: 44px; min-height: 44px; border: 2px solid var(--rule); background: var(--paper);
    cursor: pointer; font-size: 0.9rem;
}
.tc-play.is-playing { background: var(--ink); color: var(--paper); }
.tc-label { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.tc-range { flex: 1; min-width: 80px; height: 44px; }
.tc-out { font-family: var(--mono); font-size: 0.78rem; min-width: 4.5rem; text-align: right; }

/* ---------- deal list ---------- */
.deal-list-head { font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.deal-list-count { background: var(--ink); color: var(--paper); font-size: 0.72rem; padding: 0.1rem 0.45rem; }
.deal-list { display: grid; gap: 0.75rem; }
.list-more-wrap { margin-top: 1rem; text-align: center; }
.list-more {
    font-family: var(--mono); font-size: 0.85rem; padding: 0.75rem 1.6rem; min-height: 48px;
    border: 2px solid var(--rule); background: #fff; cursor: pointer; box-shadow: 4px 4px 0 0 var(--rule);
}

.deal-card {
    background: #fff; border: 2px solid var(--rule); border-left: 6px solid var(--sector-color);
    box-shadow: 4px 4px 0 0 var(--rule); padding: 0.9rem; cursor: pointer;
    content-visibility: auto; contain-intrinsic-size: auto 260px;
}
.deal-card.is-highlight { box-shadow: 4px 4px 0 0 var(--sector-color); border-color: var(--sector-color); cursor: default; }
.deal-card.is-new { border-top: 3px solid var(--india); }
.dc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.sector-chip, .type-chip, .new-badge {
    display: inline-flex; align-items: center; gap: 0.22rem; font-family: var(--mono);
    font-size: 0.66rem; border: 1px solid var(--rule); padding: 0.15rem 0.4rem;
}
.sector-chip .chip-icon { color: var(--sector-color); }
.type-chip { background: var(--paper); }
.new-badge { background: var(--india); color: #fff; border-color: var(--india); font-weight: 700; }
.dc-head time { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-left: auto; }
.dc-title { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.35rem; }
.dc-title-src { font-family: var(--latin-font); font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.45rem; }
.dc-parties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.82rem; margin-bottom: 0.5rem; }
.side { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.flag { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; border: 1px solid var(--rule); padding: 0.1rem 0.28rem; }
.side-in .flag { background: var(--india); color: #fff; border-color: var(--india); }
.side-jp .flag { background: var(--japan); color: #fff; border-color: var(--japan); }
.party { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.party-sep, .party-none, .arrow { color: var(--muted); }
.dc-amount { font-family: var(--mono); font-size: 0.78rem; margin-bottom: 0.45rem; }
.dc-amount-value { font-weight: 700; background: #FFF3C4; padding: 0.08rem 0.35rem; border: 1px solid var(--rule); }
.dc-amount-ja { font-size: 0.72rem; color: var(--muted); margin-left: 0.4rem; }
.dc-amount-quote { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.6; }
.dc-amount-none { color: var(--muted); font-size: 0.68rem; }
.dc-tier { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); margin-bottom: 0.4rem; }
.dc-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.dc-source, .dc-permalink {
    display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono);
    font-size: 0.72rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.dc-also { font-size: 0.68rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.6; }
.dc-also a { color: var(--muted); }

/* ---------- card sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(26,26,46,0.45); z-index: 60; }
.deal-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 85vh; overflow-y: auto;
    background: var(--paper); border-top: 4px solid var(--rule); padding: 1.6rem 1rem 1.2rem;
}
.panel-close {
    position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; font-size: 1.2rem;
    background: #fff; border: 2px solid var(--rule); cursor: pointer; z-index: 2;
}

/* ---------- sector timelines ---------- */
.sectors-section { margin-top: 2.5rem; }
.sector-details > summary {
    cursor: pointer; font-family: var(--mono); font-size: 0.85rem; padding: 0.8rem 1rem;
    border: 2px solid var(--rule); background: #fff; box-shadow: 4px 4px 0 0 var(--rule); min-height: 48px;
}
.sector-block { margin: 1.5rem 0; }
.sector-head { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; padding-bottom: 0.5rem; margin-bottom: 0.85rem; border-bottom: 3px solid var(--sector-color); }
.sector-head .chip-icon { color: var(--sector-color); }
.sector-count { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; background: var(--paper); border: 2px solid var(--rule); padding: 0.1rem 0.45rem; }
.timeline { display: grid; gap: 0.6rem; }
.timeline-empty { font-size: 0.8rem; color: var(--muted); border: 2px dashed #b9b9b9; padding: 1rem; line-height: 1.8; }

/* ---------- digest blocks ---------- */
.digest { margin-top: 2.5rem; background: var(--ink); color: var(--paper); border: 3px solid var(--rule); box-shadow: 7px 7px 0 0 var(--rule); padding: 1.4rem 1rem; }
.digest h2 { font-size: 1.1rem; line-height: 1.6; margin-bottom: 0.6rem; }
.digest-note { font-size: 0.82rem; opacity: 0.9; margin-bottom: 1rem; line-height: 1.8; }
.digest .df-label { color: #d6d6de; }
.digest .df-note { color: #d6d6de; }
.digest .df-note a { color: #fff; }
.digest-mid { margin: 2rem 0; }
.digest-mid-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.8rem; line-height: 1.7; }

/* ---------- sticky CTA ---------- */
.sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; gap: 0.7rem; justify-content: space-between;
    background: var(--ink); color: var(--paper); border-top: 3px solid var(--rule); padding: 0.6rem 0.9rem;
}
.sticky-text { font-size: 0.78rem; line-height: 1.5; }
.sticky-btn {
    flex-shrink: 0; background: var(--india); color: #fff; border: 2px solid var(--rule);
    padding: 0.55rem 1rem; font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
    text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}

/* ---------- secondary CTA and footer ---------- */
.secondary-cta { margin-top: 2rem; text-align: center; }
.correction-link {
    display: inline-flex; align-items: center; min-height: 48px; font-family: var(--mono);
    font-weight: 700; font-size: 0.85rem; color: var(--ink); background: #fff;
    border: 2px solid var(--rule); padding: 0.7rem 1.4rem; box-shadow: 4px 4px 0 0 var(--rule); text-decoration: none;
}
.correction-note { font-size: 0.74rem; color: var(--muted); margin-top: 0.7rem; line-height: 1.7; }
.fx-foot { border-top: 4px solid var(--rule); background: #fff; padding: 1.5rem 1rem 5rem; text-align: center; }
.foot-links { font-size: 0.8rem; line-height: 2.2; }
.foot-links a { color: var(--ink); }
.foot-links .sep { color: #b9b9b9; margin: 0 0.25rem; }
.foot-data, .foot-ga { font-size: 0.72rem; color: var(--muted); margin-top: 0.7rem; line-height: 1.8; }
.foot-credit { font-family: var(--mono); font-size: 0.74rem; margin-top: 0.7rem; }
.nowrap { white-space: nowrap; }

/* ---------- entity tags on /news/ ---------- */
.card-entities { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed #d8d8d8; }
.card-entities-label { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.entity-tag { font-family: var(--mono); font-size: 0.68rem; border: 1px solid var(--rule); padding: 0.35rem 0.45rem; text-decoration: none; color: var(--ink); background: #fff; display: inline-flex; align-items: center; min-height: 36px; }
.entity-tag:hover { background: #FFF3C4; }
.entity-tag.entity-IN { border-left: 3px solid var(--india); }
.entity-tag.entity-JP { border-left: 3px solid var(--japan); }

/* ---------- entity and explainer pages ---------- */
.crumbs { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--ink); }
.entity-head { background: #fff; border: 3px solid var(--rule); box-shadow: 6px 6px 0 0 var(--rule); padding: 1.2rem; margin-bottom: 1.5rem; }
.entity-name { font-size: 1.45rem; line-height: 1.5; margin-bottom: 0.2rem; }
.entity-alt { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); margin-bottom: 0.9rem; }
.entity-desc { font-size: 0.9rem; line-height: 1.8; margin-bottom: 0.9rem; }
.entity-meta { display: grid; gap: 0.7rem; margin-bottom: 0.7rem; }
.entity-meta div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; align-items: start; }
.entity-meta dt { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.entity-meta dd { font-size: 0.88rem; line-height: 1.7; }
.prov { font-family: var(--mono); font-size: 0.66rem; display: inline-block; margin-top: 0.3rem; padding: 0.1rem 0.35rem; border: 1px solid var(--rule); }
.prov-ok { background: #E6F4EA; }
.prov-todo { background: #FFF3C4; }
.entity-sectors { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.entity-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.entity-actions a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.9rem;
    border: 2px solid var(--rule); background: var(--paper); color: var(--ink);
    font-family: var(--mono); font-size: 0.78rem; text-decoration: none; box-shadow: 3px 3px 0 0 var(--rule);
}
.entity-deals h2, .deal-page h2 { font-size: 1.1rem; margin-bottom: 0.9rem; padding-bottom: 0.4rem; border-bottom: 3px solid var(--rule); }
.entity-digest { margin-top: 2rem; background: #fff; border: 2px solid var(--rule); box-shadow: 5px 5px 0 0 var(--rule); padding: 1.1rem; }

.ent-search-label { display: block; font-family: var(--mono); font-size: 0.75rem; margin-bottom: 0.35rem; }
.ent-search { width: 100%; font-size: 1rem; padding: 0.7rem; border: 2px solid var(--rule); background: #fff; margin-bottom: 1.25rem; min-height: 48px; }
.ent-list { list-style: none; display: grid; gap: 0.5rem; }
.ent-row a { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.6rem; align-items: center; background: #fff; border: 2px solid var(--rule); box-shadow: 3px 3px 0 0 var(--rule); padding: 0.7rem 0.8rem; text-decoration: none; color: var(--ink); min-height: 48px; }
.ent-flag { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; text-align: center; padding: 0.1rem 0.25rem; border: 1px solid var(--rule); color: #fff; }
.ent-flag.ent-IN { background: var(--india); }
.ent-flag.ent-JP { background: var(--japan); }
.ent-names { display: flex; flex-direction: column; min-width: 0; }
.ent-ja { font-size: 0.9rem; }
.ent-en { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
.ent-kind { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); display: none; }
.ent-count { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; background: var(--ink); color: var(--paper); padding: 0.1rem 0.45rem; }
.ent-empty { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); padding: 1rem 0; }

.kai-article, .prose { background: #fff; border: 2px solid var(--rule); box-shadow: 6px 6px 0 0 var(--rule); padding: 1.2rem; line-height: 2; }
.kai-head { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 3px solid var(--rule); }
.kai-head h1 { font-size: 1.35rem; line-height: 1.6; margin-bottom: 0.4rem; }
.kai-title-en { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.kai-date { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; }
.kai-article h2, .prose h2 { font-size: 1.05rem; margin: 1.7rem 0 0.7rem; padding-left: 0.6rem; border-left: 5px solid var(--india); }
.kai-article p, .prose p { margin-bottom: 1rem; font-size: 0.93rem; }
.kai-list { padding-left: 1.2rem; margin-bottom: 1rem; }
.kai-list li { margin-bottom: 0.5rem; font-size: 0.93rem; }
.kai-article a, .prose a { color: var(--ink); }
.todo-flag { background: #FFF3C4; border: 1px solid var(--rule); padding: 0 0.25rem; font-family: var(--mono); font-size: 0.8em; }
.kai-todo { background: #FFFBEB; border: 2px dashed var(--rule); padding: 0.8rem; font-size: 0.85rem; }
.kai-foot { margin-top: 2rem; padding-top: 1rem; border-top: 2px dashed #c9c9c9; font-size: 0.78rem; color: var(--muted); }
.kai-index { list-style: none; display: grid; gap: 0.9rem; }
.kai-index a { display: block; background: #fff; border: 2px solid var(--rule); box-shadow: 4px 4px 0 0 var(--rule); padding: 1rem; text-decoration: none; color: var(--ink); }
.kai-index h2 { font-size: 1.02rem; line-height: 1.6; margin-bottom: 0.3rem; }
.kai-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.8; margin-top: 0.4rem; }
.empty-state { background: #fff; border: 2px dashed var(--rule); padding: 2rem; text-align: center; font-family: var(--mono); }

/* ---------- wider screens ---------- */
@media (min-width: 760px) {
    .fx-main { padding: 1.5rem 1.5rem 4rem; }
    .fx-head { padding: 1.25rem 1.5rem 0.75rem; }
    .hero h1 { font-size: 2.2rem; }
    .hero-offer { padding: 1.4rem; }
    .df-row { grid-template-columns: auto 1fr auto; align-items: center; }
    .df-submit { width: auto; white-space: nowrap; }
    .counter { padding: 1rem; }
    .counter-num { font-size: 2.1rem; }
    .counter-num-sm { font-size: 1.1rem; }
    .counter-label { font-size: 0.72rem; }
    .map-stage { min-height: 320px; }
    .deal-list, .timeline { grid-template-columns: repeat(2, 1fr); }
    .ent-row a { grid-template-columns: 2.2rem 1fr 8rem auto; }
    .ent-kind { display: block; }
    .ent-list { grid-template-columns: repeat(2, 1fr); }
    .kai-article, .prose { padding: 2rem; }
    .kai-head h1 { font-size: 1.8rem; }
    .sticky-cta { display: none; }
    .fx-foot { padding-bottom: 1.5rem; }

    /* On a wide screen the card sits beside the map rather than over it. */
    .deal-sheet {
        position: sticky; top: 1rem; inset: auto; max-height: none; overflow: visible;
        border: 3px solid var(--rule); border-top-width: 3px; box-shadow: 6px 6px 0 0 var(--rule);
        margin-bottom: 1rem; padding: 1.6rem 1rem 1rem; background: #fff;
    }
    .sheet-backdrop { display: none; }
}

@media (min-width: 1040px) {
    .deal-list, .timeline { grid-template-columns: repeat(3, 1fr); }
    .hero h1 { font-size: 2.5rem; max-width: 20ch; }
}

@media (prefers-reduced-motion: reduce) {
    .frontier *, .frontier *::before, .frontier *::after {
        transition: none !important; animation: none !important; scroll-behavior: auto !important;
    }
    .counter:hover, .correction-link:hover, .df-submit:hover, .list-more:hover { transform: none; }
}