/* ==========================================================================
   CEMI Infographics — shared design layer
   --------------------------------------------------------------------------
   Every infographic is a PLATE: one dark, framed surface on the warm CEMI
   ground, with a masthead at the top and a colophon at the bottom. The plate
   is exactly what the PNG/PDF export captures, so a download comes out as a
   finished, branded artifact rather than a screenshot of a web page.

   This file carries tokens, the plate chrome, and a small vocabulary of
   primitives. Each infographic keeps its own content styles; it maps its old
   palette onto these tokens rather than inventing colours.

   Palette is the CEMI "ancestral six" (STYLE-GUIDE.md), on the warm ground —
   never the cool slate/navy of the retired Xperto identity.
   ========================================================================== */

:root {
    --ig-ground:     #0b0608;   /* warm near-black — page */
    --ig-plate:      #150e10;   /* the plate itself */
    --ig-raised:     #1c1215;   /* cards on the plate */
    --ig-line:       rgba(217, 164, 65, .22);   /* ocre hairline */
    --ig-line-soft:  rgba(244, 237, 231, .10);

    --ig-ink:        #f4ede7;
    --ig-ink-soft:   #c9bcb6;
    --ig-mute:       #a3928c;

    --ig-red:        #a70000;
    --ig-red-deep:   #850000;
    --ig-red-light:  #c62828;
    --ig-ocre:       #D9A441;
    --ig-cobalt:     #2F4F6F;
    --ig-cobalt-light:#4a7395;
    --ig-green:      #4B775A;
    --ig-clay:       #A67F5B;
    --ig-sand:       #E0CBA8;

    --ig-display: 'MuseoModerno', ui-rounded, 'Segoe UI', sans-serif;
    --ig-body:    'Inter', ui-sans-serif, 'Segoe UI', Helvetica, Arial, sans-serif;

    --ig-radius:    24px;
    --ig-radius-sm: 14px;
    --ig-pad:       clamp(1.5rem, 4vw, 3.5rem);
    --ig-max:       1180px;
}

/* ---- page ground ------------------------------------------------------- */
html.ig { background: var(--ig-ground); }
body.ig {
    margin: 0;
    background: var(--ig-ground);
    color: var(--ig-ink);
    font-family: var(--ig-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---- the plate --------------------------------------------------------- */
.ig-stage {
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(.75rem, 2.5vw, 2rem) clamp(2.5rem, 5vw, 4rem);
}
.ig-plate {
    position: relative;
    max-width: var(--ig-max);
    margin: 0 auto;
    background: var(--ig-plate);
    color: var(--ig-ink);
    border: 1px solid var(--ig-line);
    border-radius: var(--ig-radius);
    padding: var(--ig-pad);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45),
        inset 0 1px 0 rgba(244, 237, 231, .06);
    overflow: hidden;
    animation: ig-rise .55s cubic-bezier(.2, .7, .2, 1) both;
}
/* a warm breath of light across the top edge — the plate is lit, not flat */
.ig-plate::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 220px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(217,164,65,.10), transparent 70%);
    pointer-events: none;
}
.ig-plate > * { position: relative; }

@keyframes ig-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ig-plate { animation: none; } }
/* html2canvas renders the cloned plate at the animation's FIRST keyframe
   (opacity 0), which washed every export grey. No motion while exporting. */
.ig-plate.is-exporting { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ---- masthead ---------------------------------------------------------- */
.ig-masthead {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem 2rem;
    align-items: start;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--ig-line);
}
.ig-eyebrow {
    display: block;
    font-family: var(--ig-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ig-ocre);
    margin-bottom: .6rem;
}
.ig-title {
    font-family: var(--ig-display);
    font-weight: 800;
    font-size: clamp(1.9rem, 4.2vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--ig-ink);
    text-wrap: balance;
}
.ig-title em { font-style: normal; color: var(--ig-ocre); }
.ig-lede {
    max-width: 62ch;
    margin: .9rem 0 0;
    color: var(--ig-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
}
.ig-mark {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--ig-ink);
    align-self: start;
}
.ig-mark img { width: 44px; height: 44px; object-fit: contain; }
.ig-mark span { font-family: var(--ig-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; white-space: nowrap; }
.ig-mark small { display: block; font-family: var(--ig-body); font-weight: 400; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ig-mute); }

/* ---- sections & type --------------------------------------------------- */
.ig-section { margin: 2.5rem 0; }
.ig-section > h2, .ig-h2 {
    font-family: var(--ig-display);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--ig-ink);
}
.ig-h2 .ig-n, .ig-section > h2 .ig-n {
    font-family: var(--ig-body); font-weight: 600; font-size: .8rem; letter-spacing: .12em;
    color: var(--ig-ocre); margin-right: .6rem; vertical-align: .18em;
}
.ig-kicker { color: var(--ig-mute); font-size: .92rem; margin: -.4rem 0 1.2rem; max-width: 70ch; }
/* Opt-in prose: pages keep ownership of their own copy; only marked blocks take theme type. */
.ig-copy p { color: var(--ig-ink-soft); }
.ig-copy strong { color: var(--ig-ink); font-weight: 600; }
.ig-copy a, .ig-colophon a { color: var(--ig-ocre); text-decoration: none; border-bottom: 1px solid rgba(217,164,65,.35); }
.ig-copy a:hover, .ig-colophon a:hover { border-bottom-color: var(--ig-ocre); }

/* ---- primitives -------------------------------------------------------- */
.ig-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ig-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ig-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.ig-card {
    background: var(--ig-raised);
    border: 1px solid var(--ig-line-soft);
    border-radius: var(--ig-radius-sm);
    padding: 1.35rem 1.4rem;
}
.ig-card h3 {
    display: flex; align-items: center; gap: .6rem;   /* icons sit INLINE with the title — house rule */
    font-family: var(--ig-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25;
    margin: 0 0 .55rem; color: var(--ig-ink);
}
.ig-card h3 svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ig-ocre); }
.ig-card p { margin: 0; font-size: .95rem; }
.ig-card--accent { border-left: 3px solid var(--ig-red); }
.ig-card--cobalt { border-left: 3px solid var(--ig-cobalt-light); }
.ig-card--green  { border-left: 3px solid var(--ig-green); }
.ig-card--clay   { border-left: 3px solid var(--ig-clay); }

/* the number is the message; the label is quiet. Inter tabular for alignment. */
.ig-stat { padding: 1.2rem 1.3rem; }
.ig-stat .n {
    display: block;
    font-family: var(--ig-display); font-weight: 800;
    font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1;
    color: var(--ig-ocre); font-variant-numeric: tabular-nums;
}
.ig-stat .l { display: block; margin-top: .45rem; font-size: .85rem; color: var(--ig-mute); letter-spacing: .02em; }

.ig-callout {
    border-left: 3px solid var(--ig-ocre);
    background: linear-gradient(90deg, rgba(217,164,65,.08), transparent 70%);
    padding: 1rem 1.25rem; border-radius: 0 var(--ig-radius-sm) var(--ig-radius-sm) 0;
    margin: 1.5rem 0;
}
.ig-callout p { margin: 0; color: var(--ig-ink); }

.ig-chip {
    display: inline-block; padding: .28rem .75rem; border-radius: 999px;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    background: rgba(217,164,65,.12); color: var(--ig-ocre); border: 1px solid rgba(217,164,65,.28);
}
.ig-chip--red    { background: rgba(167,0,0,.16);  color: #ff9a9a; border-color: rgba(167,0,0,.4); }
.ig-chip--cobalt { background: rgba(74,115,149,.18); color: #9fc4e0; border-color: rgba(74,115,149,.45); }
.ig-chip--green  { background: rgba(75,119,90,.18);  color: #9fd1af; border-color: rgba(75,119,90,.45); }

/* a track for scales / progress — ocre on a soft groove */
.ig-track { height: 8px; border-radius: 999px; background: rgba(244,237,231,.08); overflow: hidden; }
.ig-track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ig-red), var(--ig-ocre)); border-radius: 999px; }

/* ---- colophon (bottom of every plate) --------------------------------- */
.ig-colophon {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem 2rem;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ig-line);
    font-size: .8rem;
    color: var(--ig-mute);
}
.ig-colophon .ig-source { margin: 0; }
.ig-colophon .ig-source b { color: var(--ig-ink-soft); font-weight: 600; }

/* export toolbar — the only interactive thing on the plate */
.ig-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.ig-btn {
    appearance: none; cursor: pointer;
    font: 600 .82rem/1 var(--ig-body); letter-spacing: .02em;
    padding: .6rem .95rem; border-radius: 999px;
    color: var(--ig-ink); background: transparent;
    border: 1px solid rgba(217,164,65,.45);
    transition: background .2s, border-color .2s, color .2s;
    display: inline-flex; align-items: center; gap: .45rem;
}
.ig-btn svg { width: 15px; height: 15px; }
.ig-btn:hover { background: rgba(217,164,65,.12); border-color: var(--ig-ocre); }
.ig-btn:focus-visible { outline: 2px solid var(--ig-ocre); outline-offset: 2px; }
.ig-btn[disabled] { opacity: .6; cursor: progress; }
.ig-btn.is-done { border-color: var(--ig-green); color: #9fd1af; }
.ig-btn.is-error { border-color: var(--ig-red-light); color: #ff9a9a; }

/* the stamp: hidden on screen, printed onto every export. This is the
   signature — a download leaves the plate as a signed CEMI artifact. */
.ig-stamp { display: none; }
.ig-plate.is-exporting .ig-tools { display: none; }
.ig-plate.is-exporting .ig-stamp {
    display: flex; align-items: center; gap: .9rem; justify-content: flex-end;
    color: var(--ig-mute); font-size: .78rem; white-space: nowrap;
}
.ig-stamp img { width: 34px; height: 34px; }
.ig-stamp .ig-motto {
    font-family: 'Caveat', 'Segoe Script', cursive; font-weight: 600;
    font-size: 1.15rem; color: var(--ig-ocre); transform: rotate(-3deg); margin-right: .4rem;
}
html[lang="zh"] .ig-stamp .ig-motto, html[lang="ja"] .ig-stamp .ig-motto { font-style: italic; font-size: .95rem; transform: rotate(-2deg); }

/* ---- paper finish ------------------------------------------------------ */
.ig-plate--paper {
    --ig-plate:    #f6f0e7;   /* warm paper, from the sand family — never pure white */
    --ig-raised:   #ffffff;
    --ig-ink:      #1b1114;
    --ig-ink-soft: #3d3034;
    --ig-mute:     #6f6167;
    --ig-line:     rgba(166, 127, 91, .35);   /* clay hairline on paper */
    --ig-line-soft:rgba(27, 17, 20, .10);
    background: var(--ig-plate);
    color: var(--ig-ink);
    border-color: var(--ig-line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.7);
}
.ig-plate--paper::before { background: radial-gradient(60% 100% at 50% 0%, rgba(217,164,65,.14), transparent 70%); }
.ig-plate--paper .ig-title { color: var(--ig-ink); }
.ig-plate--paper .ig-stat .n { color: var(--ig-red); }
.ig-plate--paper .ig-btn { color: var(--ig-ink); border-color: rgba(166,127,91,.55); }
.ig-plate--paper .ig-btn:hover { background: rgba(217,164,65,.14); border-color: var(--ig-ocre); }
.ig-plate--paper .ig-track { background: rgba(27,17,20,.08); }
.ig-plate--paper .ig-chip--red { color: var(--ig-red-deep); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 720px) {
    .ig-masthead { grid-template-columns: 1fr; }
    .ig-mark { order: -1; }
    .ig-colophon { grid-template-columns: 1fr; }
    .ig-plate { border-radius: 18px; }
}

/* ---- print: the plate only ------------------------------------------- */
@media print {
    body.ig { background: #fff; }
    .ig-chrome { display: none !important; }
    .ig-stage { padding: 0; }
    .ig-plate { box-shadow: none; animation: none; border-radius: 0; max-width: none; }
    .ig-tools { display: none; }
    .ig-stamp { display: flex; }
}