/* decriptaj.ro — shared styles for every page.
   Article-specific charts live in articles/<slug>/article.css. */

:root{
  --paper:#f6f6f3; --ink:#14171a; --ink-2:#3d4248; --muted:#6c7178; --rule:#d8d9d2; --grid:#e2e2dc; --base:#b4b5ae;
  --accent:#0b6a55; --highlight:#ffe07a; --quote:#c47f00; --box:#eeefe9;
  --tint:color-mix(in srgb, var(--accent) 8%, transparent);
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* layout: reading column, wide track for figures, outer frame for masthead/home */
  --pad:clamp(16px, 4vw, 48px);
  --text:42rem; --wide:76rem; --rail:14rem; --rail-gap:3rem;
  --frame:calc(var(--wide) + var(--rail) + var(--rail-gap));
  color-scheme:light;
}
/* wide screens: a longer line (rail + 50.4rem column still fit at 1280px) */
@media (min-width: 80rem){ :root{--text:50.4rem} }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15181b; --ink:#eeece6; --ink-2:#c6c4bc; --muted:#8f9297; --rule:#2e3337; --grid:#262a2e; --base:#3c4146;
    --accent:#5ccaa8; --highlight:#5b4a10; --quote:#e3a43c; --box:#1d2124;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#15181b; --ink:#eeece6; --ink-2:#c6c4bc; --muted:#8f9297; --rule:#2e3337; --grid:#262a2e; --base:#3c4146;
  --accent:#5ccaa8; --highlight:#5b4a10; --quote:#e3a43c; --box:#1d2124;
  color-scheme:dark;
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto}
::selection{background:var(--accent);color:var(--paper)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{background:var(--highlight);color:var(--ink)}
a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.frame{width:min(var(--frame), 100% - 2*var(--pad));margin-inline:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;scroll-behavior:auto!important} }

/* ---- masthead / footer --------------------------------------------------- */
.masthead{border-bottom:1px solid var(--rule);font-family:var(--f-display)}
.masthead .frame{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:1.1rem}
.brand{font-weight:900;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand span{color:var(--accent)}
.brand:hover{background:none;color:var(--ink)}
.section-tag{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.site-foot{margin-top:5rem;border-top:1px solid var(--rule);font-family:var(--f-display);font-size:.85rem;color:var(--muted)}
.site-foot .frame{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;padding-block:1.6rem 2.4rem}
.site-foot a{color:var(--muted)}
@media (max-width: 640px){ .masthead .section-tag{display:none} }

/* ---- breakout grid --------------------------------------------------------
   Children sit in the reading column by default; .wide goes to the figure
   track, .full edge to edge, .head spans the header width (rail + wide on
   large screens). */
.grid{
  display:grid;
  --side:minmax(0, calc((var(--wide) - var(--text)) / 2));
  grid-template-columns:
    [full-start] minmax(var(--pad), 1fr)
    [head-start wide-start] var(--side)
    [text-start] min(var(--text), 100% - 2*var(--pad))
    [text-end] var(--side)
    [wide-end head-end] minmax(var(--pad), 1fr)
    [full-end];
}
.grid > *{grid-column:text;min-width:0}
.grid > .wide{grid-column:wide}
.grid > .full{grid-column:full}
.grid > .head{grid-column:head}
@media (min-width: 80rem){
  .grid{
    grid-template-columns:
      [full-start] minmax(var(--pad), 1fr)
      [rail-start] var(--rail)
      [rail-end] var(--rail-gap)
      [head-start wide-start] var(--side)
      [text-start] var(--text)
      [text-end] var(--side)
      [wide-end head-end] minmax(var(--pad), 1fr)
      [full-end];
  }
  .grid > .full{grid-column:full}
}

/* ---- article header ------------------------------------------------------ */
.page-head{padding-top:2.6rem}
.kicker{font-family:var(--f-display);font-weight:800;font-size:.86rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
h1{font-family:var(--f-display);font-weight:900;color:var(--ink);font-size:clamp(2.05rem, 1.15rem + 3.6vw, 4.2rem);line-height:1.03;letter-spacing:-.025em;margin:0;max-width:22ch;text-wrap:balance}
h1 .t2{display:block;font-weight:700;color:var(--ink-2);margin-top:.35em;font-size:.62em;line-height:1.12;letter-spacing:-.015em}
.dek{font-size:clamp(1.15rem, 1.05rem + .45vw, 1.45rem);line-height:1.45;color:var(--ink);margin:1.3rem 0 1.2rem;max-width:40rem}
.byline{font-family:var(--f-display);font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:0}
.byline b{color:var(--ink);font-weight:700}
.lead-photo{margin:2rem 0 0;display:grid;grid-template-columns:subgrid}
.lead-photo img{grid-column:full;display:block;width:100%;height:clamp(240px, 42vw, 680px);object-fit:cover;background:var(--box)}
.lead-photo figcaption{grid-column:head;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1.2rem;font-family:var(--f-display);font-size:.88rem;line-height:1.45;color:var(--ink-2);margin-top:.55rem}
.lead-photo .credit{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width: 640px){ .lead-photo img{height:auto;aspect-ratio:3/2} }

/* ---- article body -------------------------------------------------------- */
.story{padding-top:1.6rem}
/* prose sizing; figures and wide blocks style their own text */
.story :where(p, li):not(:where(.fig *, .wide *)){font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem);line-height:1.55}
.story :where(p):not(:where(.fig *, .wide *)){margin:0 0 1.15rem}
.story p strong{color:var(--ink);font-weight:600}
.lead p:first-child::first-letter{font-family:var(--f-display);font-weight:900;color:var(--ink);float:left;font-size:3.6em;line-height:.82;margin:.08em .08em 0 0}
.story h2{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:clamp(1.55rem, 1.15rem + 1.5vw, 2.3rem);line-height:1.1;letter-spacing:-.02em;margin:3.4rem 0 1.1rem;text-wrap:balance;scroll-margin-top:1.5rem}

/* numbered list with a highlighter band (contents, sources) */
ol.band{position:relative;margin:0;padding:0 0 0 2.4rem;counter-reset:n}
ol.band::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:8px;background:var(--highlight);border-radius:1px}
ol.band li{list-style:none;counter-increment:n;position:relative;margin:0 0 .45rem}
ol.band li::before{content:counter(n);position:absolute;left:-1.35rem;top:.1em;font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}

/* contents: a box under the lead; a sticky rail beside the text on wide screens */
.toc{margin:1rem 0 1rem;padding:1.3rem 1.3rem 1.1rem;background:var(--box);border-radius:4px;font-family:var(--f-display)}
.toc > p{font-weight:700;font-size:1rem;color:var(--ink);margin:0 0 .7rem;line-height:1.35}
.toc li{font-size:1rem;line-height:1.35}
.toc a{color:var(--ink);text-decoration-color:var(--rule)}
@media (min-width: 80rem){
  .grid > .toc{grid-column:rail;grid-row:1 / span 400;align-self:start;position:sticky;top:1.5rem;margin:.4rem 0 0;padding:0;background:none;max-height:calc(100vh - 3rem);overflow-y:auto}
  .toc > p{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .toc ol.band{padding-left:1.6rem}
  .toc ol.band::before{width:3px;background:var(--rule)}
  .toc ol.band li::before{left:-1.1rem}
  .toc li{font-size:.9rem;margin-bottom:.7rem}
  .toc a{color:var(--ink-2);text-decoration:none}
  .toc a:hover{background:none;color:var(--accent)}
  .toc a[aria-current="true"]{color:var(--ink);font-weight:700}
  .toc li:has(a[aria-current="true"])::after{content:"";position:absolute;left:-1.6rem;top:.1rem;bottom:.1rem;width:3px;background:var(--accent)}
}

/* big-number counters */
.counters{display:grid;grid-template-columns:repeat(auto-fit, minmax(10.5rem, 1fr));gap:1rem;margin:1.8rem 0 2rem;padding:0;list-style:none}
.counter{border-top:3px solid var(--ink);padding-top:.7rem;font-family:var(--f-display)}
.counter b{display:block;font-weight:900;color:var(--ink);font-size:clamp(2rem, 1.6rem + 1.4vw, 2.7rem);letter-spacing:-.03em;line-height:1}
.story .counter span{display:block;margin-top:.5rem;font-size:.92rem;line-height:1.35;color:var(--ink-2)}

/* pull quote */
.pull{margin:2rem 0 2.2rem;padding:0;font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.35rem, 1.1rem + 1vw, 1.75rem);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.pull::before{content:"„";display:block;font-family:var(--f-body);font-size:4.2rem;line-height:.6;height:2.4rem;margin-top:-1.2rem;color:var(--quote)}
.pull::after{content:"";display:block;width:4rem;height:3px;background:var(--quote);margin-top:.9rem}
.pull cite{display:block;font-style:normal;font-weight:500;font-size:.85rem;letter-spacing:0;color:var(--muted);margin-top:.6rem;line-height:1.4}

/* accordion + timeline */
.acc{margin:2rem 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.08rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary small{display:block;font-weight:500;color:var(--muted);font-size:.85rem}
.acc summary .pm{font-family:var(--f-mono);font-size:1.2rem;color:var(--accent);flex:none;transition:transform .15s}
.acc[open] summary .pm{transform:rotate(45deg)}
.timeline{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.7rem}
.story .timeline li{display:grid;grid-template-columns:7.2rem minmax(0, 1fr);gap:.8rem;font-size:1rem;line-height:1.45}
.timeline time{font-family:var(--f-mono);font-size:.72rem;color:var(--accent);padding-top:.2rem}
@media (max-width: 480px){ .story .timeline li{grid-template-columns:1fr;gap:.1rem} }

/* methodology + sources */
.method{margin:3.6rem 0 0;padding:1.5rem 1.4rem;background:var(--box);border-radius:4px}
.story .method h2{margin:0 0 .9rem;font-size:1.4rem}
.story .method p{font-size:1.02rem;line-height:1.55}
.story .method ol.band li{font-size:.92rem;line-height:1.45;font-family:var(--f-display);color:var(--ink-2);overflow-wrap:anywhere}
.story .method .stamp{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin:.8rem 0 0}

/* sign-off */
.signoff{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-family:var(--f-display)}
.story .signoff p{margin:0;font-size:.95rem}
.story .signoff .author + p{margin-top:1rem}
.author{display:flex;gap:.9rem;align-items:flex-start;margin-top:1rem}
.author .av{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:.82rem}
.author b{display:block;color:var(--ink);font-size:1rem}
.author span{display:block;color:var(--ink-2);font-size:.9rem;line-height:1.45;margin-top:.15rem}

/* ---- figures and chart primitives ---------------------------------------- */
.fig{margin:2.4rem 0 2.6rem;padding:0;container-type:inline-size}
.fig-kicker{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.fig-title{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:clamp(1.3rem, 1.05rem + 1vw, 1.75rem);line-height:1.15;letter-spacing:-.015em;margin:0;max-width:48rem;text-wrap:balance}
.story .fig-sub{font-family:var(--f-display);font-size:.95rem;line-height:1.45;color:var(--ink-2);margin:.5rem 0 0;max-width:46rem}
.plot{margin-top:1.2rem}
.fig-foot{margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--rule);font-family:var(--f-display);font-size:.8rem;line-height:1.5;color:var(--muted)}
.story .fig-foot p{margin:0 0 .3rem;font-size:inherit;line-height:inherit;max-width:60rem}
.fig-foot b{color:var(--ink-2);font-weight:700}
.fig-foot a{color:var(--muted)}
.fig-data{margin-top:.6rem;font-family:var(--f-display);font-size:.85rem}
.fig-data summary{cursor:pointer;color:var(--accent);font-weight:700;width:max-content;max-width:100%}

.legend-chips{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-family:var(--f-display);margin:1.1rem 0 0;padding:0;list-style:none}
.story .legend-chips li{display:flex;align-items:center;font-size:.84rem;line-height:1.4;color:var(--ink-2)}
.fig .legend-chips{margin-top:.9rem}
.sw{display:inline-block;width:.62rem;height:.62rem;border-radius:2px;margin-right:.4rem;vertical-align:.02em;flex:none}

/* horizontal bar on a track, with gridlines, zero line and value label */
.track{position:relative;height:18px}
.gridline{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--grid)}
.zero{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--base)}
.bar{position:absolute;top:1px;height:16px}
.bar.pos{border-radius:0 4px 4px 0}
.bar.neg{border-radius:4px 0 0 4px}
.val{position:absolute;top:0;font-family:var(--f-mono);font-size:.72rem;line-height:18px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.axis{position:relative;height:1.2rem;margin-top:.2rem;font-family:var(--f-mono);font-size:.66rem;color:var(--muted)}
.axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.axis span.unit{transform:none;right:0}

/* data tables */
.tbl{overflow-x:auto;margin-top:.6rem}
.tbl table{border-collapse:collapse;width:100%;min-width:28rem;font-size:.85rem}
.tbl th{text-align:left;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);padding:.45rem .55rem;background:var(--paper)}
.tbl td{padding:.4rem .55rem;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tbl td.n,.tbl th.n{text-align:right}
.tbl tr:nth-child(even) td{background:var(--tint)}
.tbl tbody tr:hover td{background:color-mix(in srgb, var(--highlight) 45%, transparent)}

/* tooltip for [data-tip] elements (js/article.js) */
.tip{position:fixed;z-index:20;pointer-events:none;max-width:16rem;background:var(--ink);color:var(--paper);font-family:var(--f-display);font-size:.82rem;line-height:1.35;padding:.45rem .6rem;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tip b{font-weight:800}
[data-tip]{cursor:default}

/* ---- homepage ------------------------------------------------------------ */
.home{padding-top:2.4rem}
.home-lead{display:grid;gap:1.4rem 2.6rem;padding-bottom:2.6rem;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none}
.home-lead:last-child{border-bottom:0}
.home-lead:hover,.card:hover{background:none;color:inherit}
.home-lead img,.card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--box)}
.home-lead h2{font-family:var(--f-display);font-weight:900;color:var(--ink);font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem);line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance}
.home-lead .dek{margin:1rem 0}
.home-lead:hover h2,.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (min-width: 56rem){ .home-lead{grid-template-columns:minmax(0, 3fr) minmax(0, 2fr);align-items:center} }
.home-more{margin-top:2.6rem}
.home-more > h2{font-family:var(--f-display);font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 1.2rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 18rem), 1fr));gap:2rem 1.8rem;margin:0;padding:0;list-style:none}
.card{display:block;color:inherit;text-decoration:none}
.card .kicker{margin:.9rem 0 .4rem;font-size:.75rem}
.card h3{font-family:var(--f-display);font-weight:800;color:var(--ink);font-size:1.3rem;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5rem;text-wrap:balance}
.card p{margin:0;font-size:1.02rem;line-height:1.45}
.card .byline{margin-top:.6rem;font-size:.8rem}

/* ---- simple pages (404) -------------------------------------------------- */
.plain{min-height:50vh;display:grid;place-content:center;text-align:center;padding:3rem var(--pad)}
.plain h1{max-width:none;margin-inline:auto}
.plain p{font-size:1.2rem;color:var(--muted)}