@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,600;0,700;1,400&display=swap');

html { font-size: 17px; }
:root {
    --bg: #0e0f13;
    --surface: #14161d;
    --surface2: #1a1d27;
    --border: rgba(255,255,255,.12);
    --accent: #c8960c;
    --accent-dim: rgba(200,150,12,.12);
    --accent-bd: rgba(200,150,12,.35);
    --accent-hover: #d4a418;
    --green: #4ade80;
    --red: #f87171;
    --amber: #fbbf24;
    --text: #f0ebe0;
    --text-muted: #6b6470;
    --text-dim: #a49fae;
    --mono: 'IBM Plex Mono', 'SFMono-Regular', 'Consolas', monospace;
    --sh: 0 2px 10px rgba(0,0,0,.4);
    --sh-lg: 0 4px 24px rgba(0,0,0,.55);
    --r: 6px;
    --highlight: rgba(200,150,12,.15);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--mono); background: var(--bg); color: var(--text); line-height:1.75; min-height:100vh; font-size:16px; }

header { background: var(--surface); border-bottom: 1px solid var(--border); padding:2.8rem 0 2.2rem; }
.container { max-width:820px; margin:0 auto; padding:0 1.5rem; }

.back-link { display:inline-block; font-size:.72rem; letter-spacing:.05em; color: var(--text-muted); text-decoration:none; margin-bottom:1.1rem; transition: color .2s, background .2s; border: 1px solid var(--border); padding:.2rem .6rem; border-radius:var(--r); }
.back-link:hover { color: var(--accent); background: var(--highlight); }
.back-link::before { content:"\2190 \00a0"; }

.doc-meta { display:flex; flex-wrap:wrap; gap:1.5rem; margin-bottom:1rem; }
.meta-item { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-muted); }
.meta-item strong { color: var(--text-dim); }
h1 { font-size:1.7rem; font-weight:700; color: var(--text); letter-spacing:-.015em; margin-bottom:.5rem; line-height:1.3; }
.subtitle { font-size:.92rem; color: var(--text-dim); line-height:1.65; }

main { padding:2.5rem 0 4rem; }
.section { margin-bottom:3rem; }
.section-title { font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--text-muted); margin-bottom:1.3rem; padding-bottom:.55rem; border-bottom: 1px solid var(--border); }

/* KPI */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius:var(--r); padding:1.05rem 1.15rem; box-shadow: var(--sh); }
.kpi.info { border-top: 3px solid var(--accent); }
.kpi.flat { border-top: 3px solid var(--text-muted); }
.kpi.warn { border-top: 3px solid var(--amber); }
.kpi.down { border-top: 3px solid var(--red); }
.kpi-label { font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--text-muted); margin-bottom:.5rem; }
.kpi-val { font-size:1.4rem; font-weight:700; color: var(--text); margin-bottom:.25rem; line-height:1.2; }
.kpi-sub { font-size:.68rem; color: var(--text-dim); line-height:1.5; }

/* STORY CARD */
.story {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius:0 var(--r) var(--r) 0;
    padding:1.6rem 1.9rem 1.5rem;
    margin-bottom:1.4rem;
    box-shadow: var(--sh);
}
.story.warn { border-left-color: var(--amber); }
.story.red  { border-left-color: var(--red); }
.story.flat { border-left-color: var(--text-muted); }
.story-meta { display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:.75rem; align-items:center; }
.story-date, .story-source { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.story-date { color: var(--text-muted); }
.story-source { color: var(--accent); }
.story.warn .story-source { color: var(--amber); }
.story.red  .story-source { color: var(--red); }
.story h3 { font-size:1.15rem; font-weight:700; color: var(--text); margin-bottom:.9rem; letter-spacing:-.005em; line-height:1.35; }
.story p { font-size:.88rem; color: var(--text-dim); line-height:1.85; margin-bottom:.85rem; }
.story p:last-of-type { margin-bottom:0; }
.story ul { list-style:none; padding:0; margin:.65rem 0 .85rem; }
.story li { font-size:.85rem; color: var(--text-dim); line-height:1.8; padding-left:1.4rem; position:relative; margin-bottom:.6rem; }
.story li::before { content:"\203A"; position:absolute; left:.25rem; top:-.05rem; color: var(--accent); font-weight:700; font-size:1.1rem; }
.story.warn li::before { color: var(--amber); }
.story.red  li::before { color: var(--red); }
.story strong { color: var(--accent); font-weight:700; }
.story.warn strong { color: var(--amber); }
.story.red  strong { color: var(--red); }
.story em { color: var(--text); font-style:italic; }
.story blockquote { font-size:.85rem; color: var(--text-dim); font-style:italic; border-left:3px solid var(--border); padding:.45rem 0 .45rem 1.1rem; margin:.75rem 0; line-height:1.8; background: var(--surface2); border-radius:0 var(--r) var(--r) 0; }

.story-source-link {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    margin-top:1.1rem;
    padding:.6rem .95rem;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.05em;
    color: #1a0e00;
    background: var(--accent);
    border: 1px solid rgba(0,0,0,.2);
    border-radius:var(--r);
    text-decoration:none;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: all .15s;
}
.story-source-link:hover { filter: brightness(1.1); box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.story-source-link::after { content:"\2197"; font-weight:700; }
.story.warn .story-source-link { background: var(--amber); color: #1a1000; }
.story.red  .story-source-link { background: var(--red);   color: #1a0000; }

.note { font-size:.76rem; color: var(--text-dim); margin-top:1.4rem; padding:.85rem 1.05rem; background: var(--highlight); border-radius:var(--r); border: 1px solid var(--accent-bd); line-height:1.7; }
.note strong { color: var(--text); }
.note a { color: var(--accent); text-decoration:none; font-weight:700; }
.note a:hover { text-decoration:underline; }

/* SHARE BUTTONS */
.share {
    margin-top:2rem;
    padding:1.2rem 1.3rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius:var(--r);
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    align-items:center;
    box-shadow: var(--sh);
}
.share-label {
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color: var(--text-muted);
    margin-right:.4rem;
}
.share-btn {
    font-family: var(--mono);
    font-size:.74rem;
    font-weight:700;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    padding:.55rem 1rem;
    border-radius:var(--r);
    text-decoration:none;
    cursor:pointer;
    box-shadow: var(--sh);
    transition: all .15s;
    letter-spacing:.02em;
}
.share-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--highlight);
}

footer { border-top: 1px solid var(--border); padding:1.4rem 0; text-align:center; }
footer p { font-size:.72rem; color: var(--text-muted); }
footer a { color: var(--accent); text-decoration:none; font-weight:700; }

@media(max-width:700px){
    html { font-size: 16px; }
    .kpi-grid { grid-template-columns:1fr 1fr; }
    .story { padding:1.3rem 1.4rem; }
    .share { flex-direction:column; align-items:flex-start; }
}
@media(max-width:480px){
    .kpi-grid { grid-template-columns:1fr; }
}