:root { --ink:#171717; --paper:#ece7dc; --paper-dark:#dcd3c4; --red:#c64738; --rust:#9e5d45; --olive:#667260; --slate:#576a72; --muted:#615d55; --line:#b6ad9f; --display:"Iowan Old Style", "Baskerville", "Times New Roman", serif; --body:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
button { font:inherit; }
:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.skip-link { position:fixed; z-index:20; top:1rem; left:1rem; padding:.8rem 1rem; color:var(--ink); background:var(--paper); font-weight:700; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.shell { width:min(100% - 3rem, 1240px); margin-inline:auto; }
.opening { position:relative; isolation:isolate; min-height:max(740px,100svh); overflow:clip; color:var(--paper); background:var(--ink); }
.opening::after,.ecosystems-table-section::before { position:absolute; z-index:-1; inset:0; content:""; opacity:.13; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.opening::before { position:absolute; z-index:-1; top:16%; right:-6vw; width:min(78vw,950px); height:min(78vw,950px); content:""; border:1px solid rgba(236,231,220,.22); border-radius:50%; box-shadow:0 0 0 95px rgba(236,231,220,.025),0 0 0 190px rgba(236,231,220,.025); }
.site-header { display:flex; align-items:center; justify-content:space-between; padding-top:max(1.35rem,env(safe-area-inset-top)); }
.brand { display:inline-flex; align-items:center; gap:.62rem; color:var(--paper); font-size:.8rem; font-weight:760; letter-spacing:-.015em; }
.brand-mark { width:1.72rem; height:1.72rem; fill:var(--red); }
.header-link { display:inline-flex; align-items:center; gap:.35rem; min-height:44px; color:rgba(236,231,220,.78); font-size:.88rem; font-weight:650; }
.header-link span { color:var(--red); font-size:1.1rem; }
.opening__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(230px,300px); align-content:end; min-height:calc(max(740px,100svh) - 4.5rem); padding-top:9rem; padding-bottom:clamp(4rem,8vw,7rem); }
.edition,.section-tag { color:var(--red); font-size:.72rem; font-weight:780; letter-spacing:.08em; }
.edition { grid-column:1 / -1; margin-bottom:1.5rem; }
h1,h2 { text-wrap:balance; font-family:var(--display); font-weight:400; letter-spacing:-.035em; }
.opening h1 { grid-column:1 / -1; max-width:1080px; font-size:clamp(3.7rem,8.7vw,7.2rem); line-height:.96; }
.opening__lead { grid-column:2; max-width:20rem; margin-top:2.5rem; color:rgba(236,231,220,.73); font-size:1rem; line-height:1.55; text-wrap:pretty; }
.jump { display:inline-flex; align-items:center; align-self:end; justify-content:space-between; width:max-content; min-width:220px; min-height:52px; margin-top:2.5rem; padding:.7rem .85rem .7rem 1rem; color:var(--ink); background:var(--paper); font-size:.92rem; font-weight:750; }
.jump span { color:var(--red); font-size:1.2rem; }
.opening__number { position:absolute; right:max(1.5rem,calc((100vw - 1240px)/2)); bottom:1.3rem; color:rgba(236,231,220,.45); font-size:.7rem; letter-spacing:.06em; }
.premise { padding:clamp(6rem,12vw,11rem) 0; background:var(--paper); }
.premise__layout,.routes__layout,.sources__layout { display:grid; grid-template-columns:minmax(180px,.32fr) minmax(0,1fr); gap:2rem clamp(3rem,9vw,10rem); }
.premise h2,.ecosystems-table-section h2,.capital h2,.routes h2,.sources h2 { max-width:890px; font-size:clamp(2.8rem,5.8vw,5.4rem); line-height:.98; }
.premise div > p { max-width:620px; margin-top:2rem; color:var(--muted); font-size:clamp(1.05rem,1.55vw,1.25rem); line-height:1.55; }
.ecosystems-table-section { position:relative; isolation:isolate; overflow:clip; padding:clamp(6rem,11vw,10rem) 0 clamp(5rem,9vw,8rem); color:var(--paper); background:#252523; }
.ecosystems-table-section::before { opacity:.18; }
.ecosystems-table-section__heading { display:grid; grid-template-columns:minmax(180px,.32fr) minmax(0,1fr); gap:2rem clamp(3rem,9vw,10rem); align-items:start; }
.ecosystems-table-section .section-tag { color:#d56c58; padding-top:.65rem; }
.ecosystems-table-section h2 { max-width:760px; }
.ecosystem-filters { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:clamp(3rem,6vw,5rem); }
.filter { display:inline-flex; align-items:center; gap:.65rem; min-height:42px; padding:.45rem .65rem .45rem .8rem; color:rgba(236,231,220,.76); border:1px solid rgba(236,231,220,.3); background:transparent; cursor:pointer; font-size:.82rem; font-weight:650; transition:background-color 180ms var(--ease),color 180ms var(--ease),border-color 180ms var(--ease); }
.filter span { display:grid; min-width:1.35rem; min-height:1.35rem; place-items:center; color:var(--ink); background:#d9d1c1; font-size:.68rem; }
.filter:hover,.filter.is-active { color:var(--ink); border-color:var(--paper); background:var(--paper); }
.ecosystem-explorer { margin-top:1.25rem; }
.table-wrap { overflow-x:auto; border:1px solid rgba(236,231,220,.28); background:rgba(23,23,23,.22); }
.ecosystem-table { width:100%; min-width:680px; border-collapse:collapse; }
.ecosystem-table th { padding:.9rem 1rem; color:rgba(236,231,220,.56); border-bottom:1px solid rgba(236,231,220,.28); font-size:.67rem; font-weight:780; letter-spacing:.07em; text-align:left; text-transform:uppercase; }
.ecosystem-table th:last-child { width:1%; }
.ecosystem-table td { padding:1rem; border-bottom:1px solid rgba(236,231,220,.16); font-size:.88rem; line-height:1.35; vertical-align:middle; }
.ecosystem-table td:first-child { color:var(--paper); font-size:1rem; font-weight:730; }
.ecosystem-table td:nth-child(2) { max-width:230px; color:rgba(236,231,220,.74); }
.ecosystem-table td:nth-child(3) { color:#dcc383; font-family:var(--display); font-size:1.1rem; letter-spacing:-.025em; }
.ecosystem-table tbody tr { transition:background-color 180ms var(--ease),color 180ms var(--ease); }
.ecosystem-table tbody tr:hover,.ecosystem-table tbody tr.is-active { background:rgba(236,231,220,.11); }
.ecosystem-table tbody tr[hidden] { display:none; }
.ecosystem-table__open { display:inline-flex; align-items:center; gap:.4rem; min-height:36px; padding:.35rem 0 .35rem .5rem; color:var(--paper); border:0; background:transparent; cursor:pointer; font-size:.74rem; font-weight:760; white-space:nowrap; }
.ecosystem-table__open span { color:var(--red); font-size:1rem; transition:transform 180ms var(--ease); }
.ecosystem-table__open:hover span { transform:translate(.15rem,-.15rem); }
.country-card { display:flex; flex-direction:column; min-height:0; padding:clamp(1.5rem,3.3vw,3rem); color:var(--ink); background:var(--paper-dark); }
.country-dialog { position:fixed; z-index:40; inset:0; display:grid; place-items:center; overflow-y:auto; padding:clamp(1rem,3vw,2.5rem); background:rgba(23,23,23,.76); }
.country-dialog[hidden] { display:none; }
.country-dialog .country-card { position:relative; width:min(100%,900px); max-height:calc(100svh - 2rem); overflow-y:auto; box-shadow:0 1.5rem 4rem rgba(0,0,0,.32); }
.country-dialog__close { position:absolute; top:1rem; right:1rem; display:grid; width:44px; height:44px; place-items:center; padding:0; color:var(--ink); border:1px solid rgba(23,23,23,.38); border-radius:50%; background:var(--paper); cursor:pointer; font-size:1.8rem; font-weight:300; line-height:1; }
body.country-dialog-open { overflow:hidden; }
.country-card__eyebrow { color:var(--rust); font-size:.72rem; font-weight:780; letter-spacing:.08em; }
.country-card h3 { max-width:100%; margin-top:1rem; overflow-wrap:anywhere; font-family:var(--display); font-size:clamp(2.8rem,5.2vw,5.25rem); font-weight:400; letter-spacing:-.035em; line-height:.98; text-wrap:balance; }
.country-card__model { max-width:42rem; margin-top:1rem; font-size:1.05rem; font-weight:720; line-height:1.25; }
.country-card__summary { max-width:48rem; margin-top:1rem; color:var(--muted); font-size:.93rem; line-height:1.55; }
.country-card__metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1.8rem; }
.country-card__metrics div { padding-top:.65rem; border-top:1px solid rgba(23,23,23,.35); }
.country-card__metrics dt { color:var(--muted); font-size:.66rem; font-weight:750; letter-spacing:.04em; }
.country-card__metrics dd { margin:.35rem 0 0; font-family:var(--display); font-size:1.55rem; line-height:1.08; letter-spacing:-.03em; }
.country-card__takeaway { max-width:54rem; margin-top:1.5rem; padding-left:.8rem; border-left:3px solid var(--rust); color:#3e3b35; font-size:.87rem; font-weight:620; line-height:1.45; }
.source-link { display:flex; align-items:flex-start; justify-content:space-between; width:max-content; max-width:100%; gap:1rem; margin-top:2rem; padding-top:1.1rem; border-top:1px solid rgba(23,23,23,.35); font-size:.82rem; font-weight:760; line-height:1.35; }
.source-link span { flex:0 0 auto; color:var(--red); font-size:1.1rem; line-height:1; }
.table-caption { max-width:860px; margin-top:1.5rem; color:rgba(236,231,220,.62); font-size:.86rem; line-height:1.5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.capital { position:relative; overflow:hidden; padding:clamp(6rem,11vw,10rem) 0; background:#b94a3b; }
.capital::after { position:absolute; inset:0; content:""; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.capital__heading { position:relative; z-index:1; display:grid; grid-template-columns:minmax(180px,.32fr) minmax(0,1fr); gap:2rem clamp(3rem,9vw,10rem); }
.capital .section-tag { color:#3b2926; padding-top:.65rem; }
.capital h2 { color:var(--paper); }
.signal-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,4vw,4rem); margin-top:clamp(4rem,8vw,7rem); }
.signal-grid article { padding-top:1rem; border-top:2px solid #2e2524; }
.signal-grid__number { color:var(--paper); font-family:var(--display); font-size:clamp(2.7rem,4.6vw,4.5rem); letter-spacing:-.045em; line-height:.98; }
.signal-grid h3 { max-width:17rem; margin-top:.9rem; font-size:1.08rem; line-height:1.25; }
.signal-grid article > p:not(.signal-grid__number) { max-width:19rem; margin-top:.7rem; color:rgba(23,23,23,.72); font-size:.9rem; line-height:1.5; }
.signal-grid a { display:inline-block; margin-top:1rem; font-size:.8rem; font-weight:760; text-decoration:underline; text-underline-offset:.18em; }
.routes { padding:clamp(6rem,11vw,10rem) 0; background:var(--paper); }
.routes ol { display:grid; gap:0; margin:clamp(3rem,6vw,5rem) 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.routes li { display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:1rem; padding:1.2rem 0 1.35rem; border-bottom:1px solid var(--line); }
.routes li > span { color:var(--red); font-size:.78rem; font-weight:800; }
.routes li p { max-width:590px; color:var(--muted); line-height:1.5; }
.routes li strong { color:var(--ink); }
.sources { padding:clamp(5.5rem,10vw,9rem) 0; color:var(--paper); background:#394849; }
.sources .section-tag { color:#d2b269; padding-top:.65rem; }
.sources h2 { max-width:680px; }
.sources div > p:not(.section-tag) { max-width:650px; margin-top:1.5rem; color:rgba(236,231,220,.76); line-height:1.55; }
.sources-list { display:grid; gap:.8rem; max-width:790px; margin:2.25rem 0 0; padding:0; list-style:none; }
.sources-list li { padding-top:.8rem; border-top:1px solid rgba(236,231,220,.3); color:rgba(236,231,220,.74); font-size:.9rem; line-height:1.5; }
.sources-list a { color:var(--paper); font-weight:700; text-decoration:underline; text-underline-offset:.2em; }
.sources__note { color:rgba(236,231,220,.56)!important; font-size:.82rem; }
.closing { position:relative; overflow:hidden; color:var(--paper); background:var(--ink); }
.closing__content { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; min-height:560px; padding-top:clamp(5rem,10vw,8rem); padding-bottom:3rem; }
.closing__content > p { color:var(--red); font-size:.78rem; font-weight:760; letter-spacing:.06em; }
.closing h2 { grid-column:1 / -1; max-width:960px; font-size:clamp(3rem,6.5vw,6.2rem); line-height:.96; }
.closing a { align-self:end; display:flex; align-items:center; justify-content:space-between; gap:2rem; min-width:220px; min-height:52px; padding:.7rem .85rem .7rem 1rem; color:var(--ink); background:var(--paper); font-size:.9rem; font-weight:760; }
.closing a span { color:var(--red); font-size:1.1rem; }
.closing small { grid-column:1 / -1; align-self:end; margin-top:auto; color:rgba(236,231,220,.55); font-size:.72rem; }
@media (hover:hover) { .source-link:hover,.signal-grid a:hover,.sources-list a:hover { color:var(--red); } .closing a:hover,.jump:hover { color:var(--paper); background:var(--red); } .header-link:hover { color:var(--paper); } }
@media (max-width:860px) { .opening__grid { grid-template-columns:1fr; } .opening__lead { grid-column:1; } .premise__layout,.routes__layout,.sources__layout,.ecosystems-table-section__heading,.capital__heading { grid-template-columns:1fr; gap:1.2rem; } .ecosystems-table-section .section-tag,.capital .section-tag,.sources .section-tag { padding-top:0; } .signal-grid { grid-template-columns:1fr; gap:2rem; } .signal-grid article { display:grid; grid-template-columns:minmax(180px,.45fr) 1fr; gap:.3rem 1.3rem; } .signal-grid__number { grid-row:span 3; } .signal-grid h3,.signal-grid article > p:not(.signal-grid__number),.signal-grid a { margin-top:0; } }
@media (max-width:620px) { .shell { width:min(100% - 2.25rem,1240px); } .opening { min-height:max(680px,100svh); } .opening__grid { min-height:calc(max(680px,100svh) - 3.6rem); padding-top:7rem; padding-bottom:3.5rem; } .opening h1 { font-size:clamp(3.25rem,14vw,4.8rem); } .opening__lead { max-width:24rem; margin-top:1.65rem; font-size:.94rem; } .jump { margin-top:1.5rem; } .opening__number { right:1.15rem; bottom:1rem; } .premise h2,.ecosystems-table-section h2,.capital h2,.routes h2,.sources h2 { font-size:clamp(2.65rem,12vw,3.75rem); } .ecosystem-filters { flex-wrap:nowrap; overflow-x:auto; margin-right:-1.125rem; padding-right:1.125rem; scrollbar-width:none; } .filter { flex:0 0 auto; } .ecosystem-explorer { margin-top:1rem; } .ecosystem-table { min-width:620px; } .ecosystem-table th,.ecosystem-table td { padding-right:.8rem; padding-left:.8rem; } .country-dialog { align-items:end; padding:0; } .country-dialog .country-card { width:100%; max-height:min(88svh,760px); padding:1.5rem; } .country-dialog__close { top:.8rem; right:.8rem; } .country-card h3 { padding-right:2.5rem; font-size:clamp(2.65rem,13vw,3.6rem); line-height:1; } .country-card__metrics { margin-top:1.35rem; } .country-card__takeaway { margin-top:1.25rem; } .source-link { width:100%; margin-top:1.5rem; } .signal-grid article { display:block; } .signal-grid h3,.signal-grid article > p:not(.signal-grid__number),.signal-grid a { margin-top:.8rem; } .routes li { grid-template-columns:3rem minmax(0,1fr); } .closing__content { grid-template-columns:1fr; min-height:520px; } .closing h2 { font-size:clamp(3rem,13vw,4.3rem); } .closing a { align-self:start; width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.001ms!important; animation-duration:.001ms!important; animation-iteration-count:1!important; } }