/* International News Hub v2 (9/11): ink, ivory, brass. Serif display, humanist body, map silhouettes. */
:root {
  --ink: #0b1220; --ink-2: #111a2c; --ink-3: #182339; --line: rgba(243,236,220,.12); --line-2: rgba(243,236,220,.22);
  --ivory: #f3ecdc; --ivory-2: rgba(243,236,220,.72); --ivory-3: rgba(243,236,220,.5);
  --brass: #c9a96a; --brass-2: #e3c88f; --up: #7fc9a2; --down: #e28b8b;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box }
html { background: var(--ink); color: var(--ivory); }
body { margin: 0; font: 17px/1.55 var(--sans); background:
  radial-gradient(1200px 600px at 20% -10%, rgba(201,169,106,.10), transparent 60%),
  radial-gradient(900px 500px at 100% 0%, rgba(80,120,200,.10), transparent 60%), var(--ink); min-height: 100vh; }
a { color: inherit; text-decoration: none } a:hover { color: var(--brass-2) }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px }
/* header */
.top { display: flex; align-items: baseline; gap: 22px; padding: 22px 0 18px; border-bottom: 1px solid var(--line) }
.brand { font: 600 26px/1 var(--serif); letter-spacing: .04em; text-transform: uppercase } .brand small { display: block; font: 400 12px/1.6 var(--sans); letter-spacing: .28em; color: var(--ivory-3); text-transform: uppercase; margin-top: 6px }
.nav { margin-left: auto; display: flex; gap: 22px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--ivory-2) }
/* markets ribbon */
.ribbon { display: flex; gap: 34px; overflow-x: auto; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ivory-2); scrollbar-width: none; white-space: nowrap } .ribbon::-webkit-scrollbar { display: none }
.ribbon span b { color: var(--ivory); font-weight: 600; margin-left: 6px } .up { color: var(--up) } .down { color: var(--down) }
/* home hero */
.hero { padding: 64px 0 34px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center }
.hero h1 { font: 500 64px/1.02 var(--serif); margin: 0 0 18px; letter-spacing: -.01em } .hero h1 em { font-style: italic; color: var(--brass-2) }
.hero p { color: var(--ivory-2); font-size: 19px; max-width: 46ch; margin: 0 }
.hero .globe { color: rgba(243,236,220,.16); filter: drop-shadow(0 0 40px rgba(201,169,106,.15)) } .hero .globe { aspect-ratio: 1000/460 }
/* regions */
.region { padding: 30px 0 8px } .region h2 { font: 500 30px/1.1 var(--serif); margin: 0 0 6px; display: flex; align-items: baseline; gap: 16px }
.region h2 small { font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass) }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 16px 0 8px }
.tile { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 16px; background: linear-gradient(160deg, var(--ink-3), var(--ink-2)); min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color .2s, transform .2s }
.tile:hover { border-color: var(--line-2); transform: translateY(-2px); color: inherit }
.tile .map { position: absolute; right: -6%; top: -8%; width: 68%; height: 118%; opacity: .16; color: var(--tint, var(--ivory)) } 
.tile .flag { font-size: 30px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)) }
.tile h3 { font: 500 24px/1.05 var(--serif); margin: 0 0 6px } .tile .meta { font-size: 12.5px; color: var(--ivory-3); letter-spacing: .06em } .tile .meta b { color: var(--ivory-2); font-weight: 600 }
/* country page */
.chero { position: relative; overflow: hidden; border-radius: 22px; margin: 26px 0 22px; padding: 52px 44px 40px; min-height: 380px; border: 1px solid var(--line);
  background: linear-gradient(140deg, color-mix(in srgb, var(--c1) 18%, var(--ink-2)), color-mix(in srgb, var(--c2) 12%, var(--ink)) 70%) }
.chero::after { content: ""; position: absolute; inset: 0; background-image: repeating-radial-gradient(circle at 70% 40%, rgba(243,236,220,.05) 0 1px, transparent 1px 46px); pointer-events: none }
.chero .map { position: absolute; right: 2%; top: -6%; width: 58%; height: 118%; color: color-mix(in srgb, var(--c1) 55%, var(--ivory)); opacity: .22; filter: drop-shadow(0 0 30px rgba(0,0,0,.5)) } 
.chero .eyebrow { position: relative; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--brass) }
.chero h1 { position: relative; font: 500 74px/1 var(--serif); margin: 10px 0 12px; letter-spacing: -.01em } .chero h1 .flag { font-size: 54px; vertical-align: -6px; margin-right: 16px }
.chero .sub { position: relative; color: var(--ivory-2); font-size: 17px; max-width: 52ch }
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 0 0 30px }
.inst { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; background: rgba(255,255,255,.025) }
.inst .k { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ivory-3) } .inst .v { font: 500 30px/1.15 var(--serif); margin: 6px 0 2px } .inst .d { font-size: 12px; color: var(--ivory-3) }
.cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; padding-bottom: 60px }
.stories h2 { font: 500 22px/1.1 var(--serif); margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px } .stories h2 small { font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--brass) }
.story { padding: 16px 0; border-top: 1px solid var(--line) } .story:last-child { border-bottom: 1px solid var(--line) }
.story h3 { font: 500 22px/1.25 var(--serif); margin: 0 0 6px } .story p { margin: 0 0 8px; color: var(--ivory-2); font-size: 16px }
.story .src { font-size: 12.5px; color: var(--ivory-3); letter-spacing: .04em } .story .src a { color: var(--brass) } .story .src a:hover { color: var(--brass-2) }
.side .stories h2 { margin-top: 2px }
footer { border-top: 1px solid var(--line); color: var(--ivory-3); font-size: 13px; padding: 26px 0 50px; line-height: 1.6 } footer a { color: var(--ivory-2) }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: 34px } .hero h1 { font-size: 44px } .chero h1 { font-size: 46px } .chero h1 .flag { font-size: 36px } .chero .map { width: 90%; opacity: .14 } .strip { grid-template-columns: repeat(2, 1fr) } .cols { grid-template-columns: 1fr } .wrap { padding: 0 16px } .nav { gap: 14px } }

.mask { width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat }