@font-face{font-family:'Caprasimo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caprasimo-latin-ext.woff2) format('woff2');unicode-range:latin-ext}
@font-face{font-family:'Caprasimo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caprasimo-latin.woff2) format('woff2');unicode-range:latin}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:latin-ext}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(../fonts/figtree-latin.woff2) format('woff2');unicode-range:latin}
:root{
  color-scheme: light;
  /* — Organic design tokens — */
  --color-bg:#f5ead8; --color-surface:#ebddc5; --color-text:#201e1d;
  --color-accent:#c67139; --color-accent-2:#7a8a5e;
  --color-divider:rgba(32,30,29,.16);
  --color-neutral-100:#f9f4ed; --color-neutral-200:#eee7db; --color-neutral-300:#dcd3c4;
  --color-neutral-400:#c0b6a5; --color-neutral-500:#a19786; --color-neutral-600:#82796a;
  --color-neutral-700:#645c50; --color-neutral-800:#474238; --color-neutral-900:#2e2b25;
  --color-accent-100:#fff2eb; --color-accent-200:#ffe1d0; --color-accent-300:#ffc6a5;
  --color-accent-400:#f6a06b; --color-accent-500:#d67f48; --color-accent-600:#b2622d;
  --color-accent-700:#8c491a; --color-accent-800:#643312; --color-accent-900:#402310;
  --color-accent-2-100:#f0fae1; --color-accent-2-200:#e1eecc; --color-accent-2-300:#ccdbb2;
  --color-accent-2-400:#aebf92; --color-accent-2-500:#8fa073; --color-accent-2-600:#728157;
  --color-accent-2-700:#56633f; --color-accent-2-800:#3d472b; --color-accent-2-900:#272e1b;
  --font-heading:"Caprasimo",Georgia,serif; --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --space-1:4.4px; --space-2:8.8px; --space-3:13.2px; --space-4:17.6px; --space-6:26.4px; --space-8:35.2px;
  --radius-sm:8px; --radius-md:16px; --radius-lg:28px;
  --shadow-sm:0 1px 2px rgba(46,43,37,.14);
  --shadow-md:0 3px 10px rgba(46,43,37,.16);
  --shadow-lg:0 12px 32px rgba(46,43,37,.22);
  /* — chart / legacy aliases (read by the chart code) — */
  --page:#f5ead8; --surface:#ebddc5; --ink:#201e1d; --ink2:#645c50; --muted:#82796a;
  --grid:#dcd3c4; --axis:#c0b6a5; --ring:rgba(32,30,29,.16);
  --in:#728157; --out:#c67139; --s3:#82796a;
  --o-dubai:#c67139; --o-alex:#728157; --o-wg:#82796a;
  --good:#56633f; --bad:#8c491a;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-heading);font-weight:400;line-height:1.12;letter-spacing:-.015em;margin:0}
a{color:var(--color-accent);text-underline-offset:3px}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:rgba(198,113,57,.3)}
.text-muted,.muted{color:var(--color-neutral-600)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--space-6) 64px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:20;background:var(--color-bg);padding:var(--space-6) 0 var(--space-3)}
.masthead{display:flex;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent)}
h1{font-size:38px;margin:4px 0 0}
.asof{font-size:13px;margin-top:6px}
.pswitch{margin-left:auto;display:flex;gap:var(--space-2);align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font-family:var(--font-heading);font-weight:400;font-size:14px;line-height:1.2;
  color:var(--color-text);background:transparent;border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3)*1.2);border-radius:999px;transition:background .12s,color .12s}
.btn-secondary{border-color:var(--color-divider)}
.btn-secondary:hover{background:rgba(32,30,29,.07)}
.pbtn{padding:9px 20px;font-size:14px}
.pbtn.on{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}
.bar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;justify-content:space-between;
  background:var(--color-surface);border-radius:999px;padding:var(--space-2) var(--space-3);
  margin-top:var(--space-4);box-shadow:var(--shadow-sm)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;cursor:pointer;font-family:var(--font-heading);font-weight:400;
  font-size:14px;color:var(--color-neutral-700);background:transparent;border:1px solid transparent;
  padding:8px 18px;border-radius:999px}
.tab:hover{background:rgba(32,30,29,.06)}
.tab.on{background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-sm)}
.markets{display:inline-flex;align-items:center;gap:2px;margin-left:var(--space-2);padding:3px;
  border-radius:999px;background:var(--color-accent-100);border:1px solid var(--color-accent-300)}
.mlbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-700);padding:0 8px 0 12px}
.mbtns{display:flex;gap:2px}
.mkt{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--font-heading);
  font-weight:400;font-size:14px;color:var(--color-accent-800);background:transparent;border:0;
  padding:7px 15px;border-radius:999px;transition:background .12s,color .12s}
.mkt:hover{background:var(--color-accent-200)}
.mkt.on{background:var(--color-accent);color:var(--color-bg)}
.mkt.cur{background:var(--color-bg);box-shadow:inset 0 0 0 1.5px var(--color-accent)}
.mkt .short{display:none}
.card.empty{text-align:center;padding:var(--space-8) var(--space-6)}
.card.empty h2{margin:0 0 var(--space-2)}
.card.empty code{font-size:12px;background:var(--color-neutral-100);padding:1px 6px;border-radius:6px}
.filters{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;padding-right:4px}
.chip{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-heading);
  font-weight:400;font-size:13px;color:var(--color-neutral-700);background:transparent;
  border:1px solid transparent;padding:7px 14px;border-radius:999px}
.chip:hover{background:rgba(32,30,29,.06)}
.chip.on{background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-sm)}
.chip .dot{width:9px;height:9px;border-radius:50%;display:block;opacity:.4}
.chip.on .dot{opacity:1}
select,input[type=search]{font:inherit;font-size:13px;color:var(--color-text);
  background:var(--color-neutral-100);border:1px solid var(--color-divider);border-radius:999px;
  padding:6px 14px;min-height:34px;caret-color:var(--color-accent)}
select{min-width:150px}
input[type=search]{width:100%;max-width:340px}
input[type=search]:hover,select:hover{border-color:rgba(32,30,29,.45)}

/* ---------- kpis ---------- */
.view{display:none}.view.on{display:block}
.kpis{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.kpi{flex:1 1 150px;max-width:100%;background:var(--color-surface);border-radius:32px;
  box-shadow:var(--shadow-sm);padding:var(--space-4) var(--space-6);display:flex;flex-direction:column;
  justify-content:center}
.kpi .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-600)}
.kpi .val{font-family:var(--font-heading);font-size:clamp(21px,2.1vw,30px);line-height:1.1;
  margin-top:var(--space-1);white-space:nowrap}
.kpi .sub2{font-size:12px;margin-top:4px;color:var(--color-neutral-600)}
.kpi.hero{flex:2 1 260px;background:var(--color-accent-100);padding:var(--space-6)}
.kpi.hero .lbl{color:var(--color-accent-800)}
.kpi.hero .val{font-size:clamp(32px,3.4vw,52px);line-height:1.05;margin-top:var(--space-2)}
.kpi.hero .sub2{font-size:13px;margin-top:var(--space-2);color:var(--color-accent-800)}
.kpi.hero.green{background:var(--color-accent-2-100)}
.kpi.hero.green .lbl,.kpi.hero.green .sub2{color:var(--color-accent-2-800)}
.kpi .val.in{color:var(--color-accent-2-700)}
.kpi .val.out{color:var(--color-accent-700)}
.kpi .val.third{color:var(--color-neutral-700)}

/* ---------- sections & cards ---------- */
.sec{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-8) 0 var(--space-3)}
.sec h2{font-size:25px;margin:0}
.sec .note{font-size:12.5px;color:var(--color-neutral-600)}
.cards{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--color-surface);border-radius:32px;box-shadow:var(--shadow-sm);
  padding:var(--space-6);min-width:0}
.card.full{grid-column:1/-1}
.card h2{font-family:var(--font-heading);font-size:17px;line-height:1.2;margin:0}
.card .note{font-size:12.5px;color:var(--color-neutral-600);margin-bottom:var(--space-2)}
.legend{display:flex;gap:var(--space-4);font-size:12.5px;flex-wrap:wrap;margin:2px 0 6px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px;display:block}

/* ---------- charts ---------- */
svg text{font:11px var(--font-body);fill:var(--color-neutral-600)}
svg .dl{fill:var(--color-neutral-800);font-weight:600;font-variant-numeric:tabular-nums}
svg .gl{stroke:var(--grid);stroke-width:1}
svg .bl{stroke:var(--axis);stroke-width:1}
.tip{position:fixed;pointer-events:none;display:none;z-index:60;background:var(--color-neutral-900);
  color:var(--color-neutral-100);border-radius:var(--radius-md);padding:10px 13px;font-size:12.5px;
  line-height:1.5;box-shadow:var(--shadow-lg);max-width:280px}
.tip b{font-variant-numeric:tabular-nums}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;
  color:var(--color-neutral-600);padding:var(--space-2);border-bottom:1px solid var(--color-divider);
  white-space:nowrap}
td{padding:var(--space-2);border-bottom:1px solid rgba(32,30,29,.08);vertical-align:top}
tbody tr:hover{background:rgba(32,30,29,.04)}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td .pill{display:inline-flex;align-items:center;font-size:11px;padding:2px 10px;border-radius:999px;
  background:var(--color-neutral-100);color:var(--color-neutral-800);white-space:nowrap}
.pos{color:var(--color-accent-2-700)} .neg{color:var(--color-text)}
tr.tot td{font-weight:700;border-top:2px solid var(--color-neutral-400)}
.more{margin-top:var(--space-4);text-align:center}
.scroll{overflow-x:auto}
.scroll table{min-width:820px}
#tbody td:first-child,#pTbody td:first-child{white-space:nowrap}

/* ---------- notes ---------- */
footer{margin-top:var(--space-8);display:grid;gap:var(--space-4) var(--space-8);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));font-size:12px;line-height:1.7;
  color:var(--color-neutral-700)}
footer b{color:var(--color-accent-800)}
@media(max-width:760px){
  header{position:static}
  h1{font-size:30px}
  .wrap{padding:0 var(--space-4) 48px}
  .bar{border-radius:var(--radius-lg)}
  .tabs{width:100%}
  .markets{margin-left:0;width:100%}
  .mbtns{flex:1}
  .mkt{flex:1;padding:7px 6px}
}
@media(max-width:520px){
  .mkt .full{display:none}
  .mkt .short{display:inline}
}