/* Capital Stacks of Journalism — site styles.
   Layout and typography live inline in the markup (ported 1:1 from the design
   files in /design). This sheet holds what inline styles cannot: hover and
   focus states, pictogram tiles and their animations, and breakpoints. */

body{margin:0;background:#DAD7CE;font-family:'Space Grotesk',system-ui,sans-serif;color:#16151B;-webkit-text-size-adjust:100%}
a{color:#5F5E9C}a:hover{color:#16151B}
img{max-width:100%}
[hidden]{display:none !important}
.skip-link{position:absolute;left:8px;top:-60px;z-index:1000;padding:10px 14px;background:#16151B;color:#F1EFE8;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:8px;color:#F1EFE8}
:focus-visible{outline:3px solid #5F5E9C;outline-offset:2px}
.cs-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
body.is-locked{overflow:hidden}

/* ---- Buttons (colour swaps are instant by design) ---- */
.btn-p:hover{background:#16151B !important;color:#F1EFE8 !important}
.btn-s:hover{background:#16151B !important;color:#F1EFE8 !important;border-color:#16151B !important}
.btn-w:hover{background:#F1EFE8 !important;color:#16151B !important}
.btn-x:hover{background:#16151B !important;color:#F1EFE8 !important}
.cs-field:focus{box-shadow:4px 4px 0 #5F5E9C}

/* ---- Header ---- */
.navtab .navarrow{opacity:.55}
.navtab:hover{background:#E7C4A2 !important}.navtab:hover .navarrow{opacity:1}
.navtab:hover .tile,.navtab.is-on .tile{outline:1.5px solid #16151B;outline-offset:0}
.cs-nav-logo{display:none}
.cs-nav.is-stuck{grid-template-columns:auto repeat(4,1fr) !important}.cs-nav.is-stuck .cs-nav-logo{display:flex}
@media (max-width:880px){
  .cs-hdr{grid-template-columns:auto minmax(0,1fr) !important}.cs-hdr-sub{display:none !important}
  .cs-nav,.cs-nav.is-stuck{grid-template-columns:1fr 1fr !important}.cs-nav .cs-nav-logo{display:none !important}
  .cs-nav a.navtab:nth-child(-n+3){border-bottom:2px solid #16151B !important}.cs-nav a.navtab:nth-child(3){border-right:none !important}.cs-nav a.navtab{padding:14px 16px !important}
}

/* ---- Footer ---- */
.cs-ft-contact:hover{background:#16151B !important;color:#F1EFE8 !important}
.cs-ft-logos>div{border-right:2px solid #16151B;border-bottom:2px solid #16151B;margin-bottom:-2px}
.cs-ft-logos>div:last-child{border-right:none}
.cs-ft-logos img{filter:brightness(0) saturate(100%)}
@media (max-width:760px){
  .cs-ft-top{grid-template-columns:minmax(0,1fr) !important}.cs-ft-top>a{border-left:none !important;border-top:3px solid #16151B !important;justify-content:center !important}
  .cs-ft-row{grid-template-columns:minmax(0,1fr) !important}.cs-ft-row>div:first-child{border-right:none !important;border-bottom:2px solid #16151B !important}
  .cs-ft-logos{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cs-ft-logos>div:last-child{border-right:2px solid #16151B}
  .cs-ft-logos>div:nth-child(2n){border-right:none !important}
}

/* ---- Pictogram tiles: shapes ---- */
.tile{position:relative;display:block;aspect-ratio:1;overflow:hidden;flex:none}.tile > span{position:absolute}
.tile > span > i{display:none}
.tile .arrow-right{inset:14% 16%;clip-path:polygon(0 0,100% 50%,0 100%,30% 50%)}
.tile .sun{left:16%;top:16%;width:26%;aspect-ratio:1;border-radius:50%}.tile .planet{right:12%;bottom:14%;width:52%;aspect-ratio:1;border-radius:50%}
.tile .head{left:31%;top:13%;width:38%;aspect-ratio:1;border-radius:50%}.tile .body{left:12%;bottom:-2%;width:76%;height:40%;border-radius:50% 50% 0 0/100% 100% 0 0;transform-origin:50% 100%}
.tile .pie{inset:16%;border-radius:50%}.tile .arrow{inset:14% 16%;clip-path:polygon(50% 0,100% 100%,50% 70%,0 100%)}
.tile .big{left:38%;top:38%;width:50%;aspect-ratio:1;border-radius:50%}.tile .small{left:16%;top:16%;width:24%;aspect-ratio:1;border-radius:50%}
.tile .ring{inset:16%;border-radius:50%}.tile .ring2{inset:30%;border-radius:50%}.tile .core{inset:42%;border-radius:50%}
.tile .star{inset:12%;clip-path:polygon(50% 0,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0 50%,45% 45%)}
.tile .eye{left:10%;top:30%;width:80%;height:40%;border-radius:50%}.tile .iris{left:36%;top:36%;width:28%;aspect-ratio:1;border-radius:50%}.tile .pupil{left:44%;top:44%;width:12%;aspect-ratio:1;border-radius:50%}
.tile .bars{inset:12% 14%;display:flex !important;flex-direction:column;justify-content:flex-end;gap:9%;background:transparent !important}.tile .bars i{display:block;height:16%;width:100%;flex:none;transform-origin:50% 100%}.tile .bars i:nth-child(1){width:55%;margin-left:45%}.tile .bars i:nth-child(2){width:78%;margin-left:22%}
.tile .road{inset:0;clip-path:polygon(36% 0,64% 0,100% 100%,0 100%)}.tile .dash{left:46%;width:8%;height:14%}.tile .dash1{top:6%}.tile .dash2{top:36%}.tile .dash3{top:68%}
.tile .env{left:12%;top:24%;width:76%;height:52%}.tile .flap{left:12%;top:24%;width:76%;height:52%;clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0}
.tile .bar1{left:14%;bottom:14%;width:18%;height:30%}.tile .bar2{left:41%;bottom:14%;width:18%;height:52%}.tile .bar3{left:68%;bottom:14%;width:18%;height:72%}
.tile .bar1,.tile .bar2,.tile .bar3{transform-origin:50% 100%}
.tile .st1{left:54%;top:14%;width:32%;height:20%}.tile .st2{left:32%;top:40%;width:54%;height:20%}.tile .st3{left:14%;top:66%;width:72%;height:20%}
.tile .half-l{left:14%;top:14%;width:36%;height:72%}.tile .half-r{left:50%;top:14%;width:36%;height:72%;clip-path:polygon(0 0,100% 0,100% 100%)}
.tile .diamond{inset:14%;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.tile .dot{inset:38%;border-radius:50%}

/* ---- Pictogram tiles: motion ---- */
@keyframes op-dash{0%,100%{transform:translateX(0)}40%{transform:translateX(18%)}70%{transform:translateX(-6%)}}
@keyframes cs-twinkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(72deg) scale(1.18)}}
@keyframes cs-blink{0%,18%,42%,100%{transform:scaleY(1)}9%,33%{transform:scaleY(.06)}}
@keyframes cs-grow{0%{transform:scaleY(.2)}60%{transform:scaleY(1.12)}100%{transform:scaleY(1)}}
@keyframes cs-nod{0%,100%{transform:translateY(0)}30%{transform:translateY(9%)}65%{transform:translateY(-4%)}}
@keyframes cs-squash{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.9)}}
@keyframes cs-spin{to{transform:rotate(360deg)}}
@keyframes cs-shoot{0%,100%{transform:translateY(0)}40%{transform:translateY(-18%)}70%{transform:translateY(6%)}}
@keyframes cs-rise{0%,100%{transform:translate(0,0)}50%{transform:translate(8%,-22%)}}
@keyframes cs-wobble{0%,100%{transform:translate(0,0)}50%{transform:translate(-5%,5%)}}
@keyframes cs-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes cs-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(12%)}}
@keyframes cs-slide-back{0%,100%{transform:translateX(0)}50%{transform:translateX(-12%)}}
@keyframes cs-step{0%{transform:translateX(-30%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes cs-drive{from{transform:translateY(-30%)}to{transform:translateY(30%)}}
@keyframes cs-open{0%,100%{transform:scaleY(1)}50%{transform:scaleY(-1)}}

/* header nav tiles (every page) */
.navtab:hover .tile .planet{animation:cs-twinkle .8s ease}
.navtab:hover .tile .star{animation:cs-twinkle .8s ease}
.navtab:hover .tile .eye,.navtab:hover .tile .iris,.navtab:hover .tile .pupil{animation:cs-blink 1s ease}
.navtab:hover .tile .bars i{animation:cs-grow .6s ease}.navtab:hover .tile .bars i:nth-child(2){animation-delay:.08s}.navtab:hover .tile .bars i:nth-child(3){animation-delay:.16s}

/* ---- Home ---- */
@keyframes v4-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v4-kind > div:first-child{transform-origin:left;animation:v4-grow 1s cubic-bezier(.2,.7,.2,1) both}
.v4-kind:nth-child(2) > div:first-child{animation-delay:.15s}.v4-kind:nth-child(3) > div:first-child{animation-delay:.3s}
.door:hover{background:#16151B !important}.door:hover h3,.door:hover p,.door:hover > div > span,.door:hover > div > span *{color:#F1EFE8 !important}
.v4-doors > a:nth-child(2n){border-right:none !important}.v4-doors > a:nth-last-child(-n+2){border-bottom:none !important}
.door .tile > span,.v4-side .tile > span{will-change:transform}
.door:hover .tile .sun,.door:hover .tile .planet{animation:cs-twinkle .8s ease}.door:hover .tile .star{animation:cs-twinkle .8s ease}
.door:hover .tile .eye,.door:hover .tile .iris,.door:hover .tile .pupil{animation:cs-blink 1s ease}
.door:hover .tile .bars i{animation:cs-grow .6s ease}.door:hover .tile .bars i:nth-child(2){animation-delay:.08s}.door:hover .tile .bars i:nth-child(3){animation-delay:.16s}
.v4-side .tile:hover .head{animation:cs-nod .7s ease}.v4-side .tile:hover .body{animation:cs-squash .7s ease}
.v4-side .tile:hover .pie{animation:cs-spin .9s ease}.v4-side .tile:hover .star{animation:cs-twinkle .8s ease}
.v4-side .tile:hover .eye,.v4-side .tile:hover .iris,.v4-side .tile:hover .pupil{animation:cs-blink 1s ease}
.v4-side .tile:hover .bars i{animation:cs-grow .6s ease}.v4-side .tile:hover .arrow{animation:cs-shoot .6s ease}
.v4-side .tile:hover .small{animation:cs-rise .8s ease}.v4-side .tile:hover .big{animation:cs-wobble .8s ease}
.v4-side .tile:hover .ring{animation:cs-pulse .8s ease}.v4-side .tile:hover .ring2{animation:cs-pulse .8s ease .1s}.v4-side .tile:hover .core{animation:cs-pulse .8s ease .2s}
.v4-road:hover .tile .dash{animation:cs-drive .6s linear infinite}.v4-news:hover .tile .flap{animation:cs-open 1s ease}
@media (max-width:880px){
  .v4-hero{grid-template-columns:minmax(0,1fr) !important}.v4-hero > div:last-child{border-left:none !important;border-top:1px solid #16151B}
  .v4-picto{aspect-ratio:9/1 !important;grid-template-columns:repeat(9,minmax(0,1fr)) !important;grid-template-rows:1fr !important}
  .v4-doors{border-left:none !important;border-top:3px solid #16151B}
  .v4-aud{grid-template-columns:minmax(0,1fr) !important}.v4-aud > div:last-child{border-left:none !important;border-top:3px solid #16151B}
  .v4-two{grid-template-columns:minmax(0,1fr) !important}.v4-two > div:last-child{border-left:none !important;border-top:3px solid #16151B}
  .v4-thesis{grid-template-columns:minmax(0,1fr) !important}.v4-thesis > div:last-child{order:-1}
}
@media (max-width:720px){.v4-dl-b{grid-template-columns:auto minmax(0,1fr) !important}.v4-dl-b > a{grid-column:1 / -1;justify-self:start}}
@media (max-width:560px){.v4-doors{grid-template-columns:minmax(0,1fr) !important}.v4-doors > a{border-right:none !important;min-height:0 !important}.v4-doors > a:nth-last-child(2){border-bottom:1px solid #F1EFE8 !important}}

/* ---- Report list ---- */
.chrow:hover{background:#5F5E9C !important}.chrow:hover *{color:#fff !important}
.chrow:hover .head{animation:cs-nod .7s ease}.chrow:hover .body{animation:cs-squash .7s ease}
.chrow:hover .pie{animation:cs-spin .9s cubic-bezier(.4,0,.2,1)}
.chrow:hover .small{animation:cs-rise .8s ease}.chrow:hover .big{animation:cs-wobble .8s ease}
.chrow:hover .bar1{animation:cs-grow .6s ease}.chrow:hover .bar2{animation:cs-grow .6s ease .08s}.chrow:hover .bar3{animation:cs-grow .6s ease .16s}
.chrow:hover .half-l{animation:cs-slide-back .7s ease}.chrow:hover .half-r{animation:cs-slide .7s ease}
.chrow:hover .arrow-right{animation:op-dash .6s ease}.chrow:hover .arrow{animation:cs-shoot .6s ease}
.chrow:hover .planet{animation:cs-twinkle .8s ease}.chrow:hover .sun{animation:cs-pulse .8s ease}
.chrow:hover .ring{animation:cs-pulse .8s ease}.chrow:hover .ring2{animation:cs-pulse .8s ease .1s}.chrow:hover .core{animation:cs-pulse .8s ease .2s}
.chrow:hover .eye,.chrow:hover .iris,.chrow:hover .pupil{animation:cs-blink 1s ease}
.chrow:hover .st3{animation:cs-step .5s ease both}.chrow:hover .st2{animation:cs-step .5s ease .1s both}.chrow:hover .st1{animation:cs-step .5s ease .2s both}
.chrow:hover .star{animation:cs-twinkle .8s ease}
.door-sum:hover{background:#DFB68E !important}.door-sum:hover .sum-btn{background:#16151B !important;transform:translate(2px,2px);box-shadow:3px 3px 0 #16151B !important}
.door-sum:hover .tile .star{animation:cs-twinkle .8s ease}.door-sum .sum-stats > div{transition:background .15s}.door-sum:hover .sum-stats > div{background:#FBFAF6}
@media (max-width:880px){
  .rp-hero{grid-template-columns:minmax(0,1fr) !important}.rp-hero > a{border-left:none !important;border-top:3px solid #16151B}
  .chrow{grid-template-columns:44px minmax(0,1fr) !important;gap:0 14px !important}.chrow .charrow{display:none !important}
  .chrow .tile,.chrow .chportrait{width:44px !important;height:44px !important}
}

/* ---- Chapter reader ---- */
.rowlink:hover{background:#16151B !important}.rowlink:hover *{color:#F1EFE8 !important}
.striplink:hover{background:#E7C4A2 !important}
.tocrow:hover{background:#5F5E9C !important}.tocrow:hover *{color:#fff !important}
.btn-toc:hover{background:#16151B !important;color:#F1EFE8 !important}
.sublink:hover{text-decoration:underline !important;text-underline-offset:3px;border-bottom-color:#16151B !important}
.fig-link:hover{background:#16151B !important;color:#F1EFE8 !important}.fig-link:hover *{color:#F1EFE8 !important}
.pg-chapter article a{overflow-wrap:anywhere}
.pg-chapter figure,.pg-data figure{overflow-x:auto}
@media (max-width:880px){.cs-chhead{grid-template-columns:minmax(0,1fr) !important}.cs-chhead > div:last-child{border-left:none !important;border-top:1px solid #16151B}.cs-strip .stripmid{display:none !important}.cs-strip{grid-template-columns:auto minmax(0,1fr) !important}.cs-strip .btn-toc{justify-content:flex-end}}

/* ---- Ventures ---- */
.filt{background:transparent;color:#16151B}.filt.is-on{background:#16151B;color:#F1EFE8}
.filt:hover{background:#16151B !important;color:#F1EFE8 !important}
.vcard:hover,.vcard.is-active{background:#16151B !important;color:#F1EFE8 !important}
.vcard:hover .vopen{background:#F1EFE8;color:#16151B}
.dbtn:hover{background:#F1EFE8 !important;color:#16151B !important}
.dbtn:focus-visible{outline:2px solid #F1EFE8;outline-offset:-5px}.cs-drawer:focus{outline:none}
.cs-drawer.is-open{transform:translateX(0) !important}
.cs-vscrim.is-open{opacity:1 !important;pointer-events:auto !important}
@media (max-width:880px){.cs-vgrid::after{content:"";background:#F1EFE8}.cs-vgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.cs-vhead{grid-template-columns:minmax(0,1fr) !important}.cs-vhead > div:last-child{border-left:none !important;border-top:1px solid #16151B}}
@media (max-width:560px){.cs-vgrid::after{display:none}.cs-vgrid{grid-template-columns:minmax(0,1fr) !important}.cs-d2{grid-template-columns:minmax(0,1fr) !important}.cs-d2 > div + div{border-left:none !important;border-top:1px solid #D8D5CA}.cs-d2 > div{border-right:none !important}}

/* ---- Data ---- */
@media (max-width:820px){.cs-rswrap{padding:28px 20px 60px !important}}
@media (max-width:640px){.cs-stop{grid-template-columns:minmax(0,1fr) !important;gap:6px !important}}
@media (max-width:820px){.cs-dhero{padding:34px 20px 30px !important}.cs-dwrap{padding:0 20px 60px !important}}

/* ---- About ---- */
.abtab:hover{background:#16151B !important;color:#F1EFE8 !important}
.cs-quote.no-photo{grid-template-columns:minmax(0,1fr) !important}
@media (max-width:760px){.cs-abhead{grid-template-columns:minmax(0,1fr) !important}.cs-abhead > div:last-child{border-left:none !important;border-top:1px solid #16151B}.cs-quote{grid-template-columns:minmax(0,1fr) !important}.cs-mast{grid-template-columns:minmax(0,1fr) !important}}

@media (prefers-reduced-motion:reduce){
  .tile *,.v4-kind > div:first-child{animation:none !important}
  .cs-drawer,.cs-vscrim{transition:none !important}
  html{scroll-behavior:auto !important}
}

/* Inline-labelled bar charts: in narrow containers the name sits above a full-width bar */
@container (max-width:480px){.cs-bars{grid-template-columns:minmax(0,1fr) !important;grid-auto-rows:auto !important}.cs-bars .cs-med{top:-2px !important;bottom:-2px !important}.cs-bars>.cs-bl{margin:10px 0 5px}.cs-bars>.cs-bl:first-child{margin-top:0}}

/* Figure deep links land on the figure's intro (sticky-header clearance comes from site.js); the figure then flashes an outline */
@keyframes cs-flash{0%,55%{outline-color:#D79A4E}100%{outline-color:transparent}}
.cs-fig-flash{outline:4px solid transparent;outline-offset:4px;animation:cs-flash 2.4s ease-out}
@media (prefers-reduced-motion:reduce){.cs-fig-flash{animation-duration:0s}}

/* Venture profiles: when a two-up row has lost one metric (no data), the remaining block spans the full width */
.cs-d2 > :only-child{grid-column:1 / -1;border-right:none !important}
@container (max-width:480px){.cs-sq{grid-template-columns:repeat(8,minmax(0,1fr)) !important}.cs-sq>.cs-sqc{height:10px !important}}
.cs-wl-h{display:none}@container (max-width:560px){.cs-wl-v{display:none}.cs-wl-h{display:block}}
@container (max-width:680px){.cs-gate{flex-direction:column}}
@container (max-width:480px){.cs-dots .cs-dot{width:20px !important;height:20px !important}}
@container (max-width:480px){.cs-split .cs-seg-sm{color:transparent !important}}
@container (max-width:480px){.cs-lp .cs-lp-band{display:none}}
@container (max-width:520px){.cs-rg-g{grid-template-columns:minmax(64px,78px) minmax(0,1fr) !important}.cs-rg-n{grid-column:1/-1;border-top:none !important;padding:0 0 10px !important}}

/* ---- Cookie consent card (fixed, bottom right; no scrim, no entry animation) ---- */
.cc{position:fixed;right:20px;bottom:20px;z-index:1000;width:320px;max-width:calc(100vw - 40px);box-sizing:border-box;background:#E7C4A2;border:3px solid #16151B;display:grid;grid-template-columns:auto minmax(0,1fr);font-family:'Space Grotesk',system-ui,sans-serif;color:#16151B}
.cc__icon{padding:18px;border-right:2px solid #16151B}
.cc__body{padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.cc__text{margin:0;font-family:'Source Serif 4',Georgia,serif;font-size:16px;line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}
.cc__link{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#16151B}
.cc__link:hover{color:#5F5E9C}
.cc__actions{display:flex;gap:10px}
.cc__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0;border-radius:0;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:11px;line-height:normal;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.cc__btn--primary{padding:13px 20px;background:#5F5E9C;color:#FFFFFF;border:3px solid #16151B;box-shadow:5px 5px 0 #16151B}
.cc__btn--secondary{padding:15px 20px;background:transparent;color:#16151B;border:1px solid #16151B}
.cc__btn:hover{background:#16151B;color:#F1EFE8}
.cc__btn:focus-visible,.cc__link:focus-visible{outline:4px solid #5F5E9C;outline-offset:2px}
.cc:hover .tile .eye,.cc:hover .tile .iris,.cc:hover .tile .pupil{animation:cs-blink 1s ease}
@media (max-width:480px){.cc{left:12px;right:12px;bottom:12px;width:auto;max-width:none}}
