:root{
  --leo:#D42B1E;
  --leobright:#FF4B38;
  --press:#183A63;
  --ink:#15171C;
  --deep:#101216;
  --paper:#F9F6F0;
  --wash:#F1EDE3;
  --rule:#E5DFD2;
  --mut:#8A867D;
  --dim:rgba(255,255,255,.42);
  --dimx:rgba(255,255,255,.10);
  --disp:'Montserrat',sans-serif;
  --body:'Montserrat',sans-serif;
  --mono:'Montserrat',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  display:grid;
  grid-template-columns:minmax(430px,45%) 1fr;
  height:100svh;
  overflow:hidden;
}

/* ---------- press sweep (load) ---------- */
.sweep{
  position:fixed;inset:0;z-index:99;background:var(--leo);
  transform:translateX(-101%);
  animation:sweep 1.15s cubic-bezier(.77,0,.18,1) .1s forwards;
  pointer-events:none;
}
@keyframes sweep{
  0%{transform:translateX(-101%)}
  44%{transform:translateX(0)}
  56%{transform:translateX(0)}
  100%{transform:translateX(101%)}
}

/* ---------- left: press panel ---------- */
.pressp{
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.055), transparent 55%),
    var(--deep);
  color:var(--paper);
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  position:relative;
}
.presshead{padding:38px 46px 0}
.logo{width:196px;display:block}
.logo .lg-ink{fill:#fff}
.logo .lg-red{fill:#EF3941}
.thesis{
  font-family:var(--disp);
  font-size:clamp(30px,3vw,48px);
  line-height:1.1;font-weight:800;letter-spacing:-.02em;
  margin-top:34px;
}
.thesis em{font-style:normal;color:var(--leobright)}
.lede{
  margin-top:14px;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.62);max-width:36em;
}
@keyframes langin{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.langswap{animation:langin .45s cubic-bezier(.2,.7,.3,1) both}
.mapwrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:12px 40px 4px;min-height:0;
  position:relative;overflow:hidden;
}
.map{
  width:100%;max-height:100%;display:block;
  transition:opacity .5s ease,transform .8s cubic-bezier(.5,0,.2,1);
  /* the crop slices countries at the frame; melt the edges into the panel
     instead of ending in a hard rectangle */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-composite:intersect;
}
body.world-mode .map{opacity:0;transform:scale(.5)}
.globe{
  position:absolute;inset:12px 40px 4px;margin:auto;
  height:calc(100% - 16px);max-width:100%;
  opacity:0;transform:scale(1.35);pointer-events:none;
  transition:opacity .5s ease,transform .8s cubic-bezier(.5,0,.2,1);
}
body.world-mode .globe{opacity:1;transform:scale(1)}
.globe .gsea{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.22);stroke-width:1}
.globe .ggrat{fill:none;stroke:rgba(255,255,255,.07);stroke-width:.7}
.globe .gwld{
  fill:rgba(255,75,56,.30);stroke:rgba(255,110,90,.42);
  stroke-width:.5;stroke-linejoin:round;
}
.globe .gmkt{
  fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.35);
  stroke-width:.6;stroke-linejoin:round;
}
.map path{
  opacity:0;
  animation:din .6s ease forwards;
  animation-delay:var(--w);
  transition:opacity .3s ease,fill .25s ease,stroke .25s ease;
}
@keyframes din{to{opacity:1}}
body.loaded .map path{animation:none;opacity:1}
.mapg{cursor:pointer;transition:filter .3s ease}
.mapg path{
  fill:rgba(255,255,255,.13);
  stroke:rgba(255,255,255,.32);stroke-width:.6;stroke-linejoin:round;
}
.landg path{
  fill:rgba(255,255,255,.045);
  stroke:rgba(255,255,255,.10);stroke-width:.5;stroke-linejoin:round;
}
.mapg.on path{fill:var(--leobright);stroke:#FF8A7C;opacity:1}
.mapg.on{filter:drop-shadow(0 0 14px rgba(255,75,56,.45))}
body.loaded .map.focus g.mapg:not(.on) path{
  fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.16);
}
body.loaded .map.world .landg path{
  fill:rgba(255,75,56,.20);stroke:rgba(255,110,90,.38);
}
body.loaded .map.world g.mapg path{
  fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.18);
}
.mapcap{
  padding:0 46px 14px;
  font-size:12.5px;color:rgba(255,255,255,.48);
  display:flex;justify-content:space-between;gap:16px;
}
.mapcap b{color:#fff;font-weight:600;transition:color .2s}
.tick{
  border-top:1px solid rgba(255,255,255,.13);
  overflow:hidden;flex:none;
}
.tickin{
  display:flex;white-space:nowrap;width:max-content;
  animation:tick 52s linear infinite;
}
.tickin span{
  font-size:12.5px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.55);
  padding:12px 0 12px 30px;
}
.tickin span::after{content:'·';color:var(--leobright);margin-left:28px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- right: index ---------- */
.index{
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--paper);
}
.idxhead{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;padding:34px 48px 0;
}
.idxhead h1{
  font-family:var(--disp);font-size:clamp(20px,1.8vw,26px);
  font-weight:700;letter-spacing:-.01em;
}
.idxhead p{
  margin:8px 0 22px;font-size:14px;line-height:1.55;color:#6B665B;max-width:34em;
}
.list{
  flex:1;display:flex;flex-direction:column;
  min-height:0;overflow-y:auto;
  border-top:1px solid var(--rule);
}
.row{
  position:relative;flex:1;min-height:52px;
  display:grid;grid-template-columns:36px auto 1fr auto auto 26px;
  align-items:center;gap:14px;
  padding:0 48px;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--rule);
  outline:none;
}
.row::before{
  content:'';position:absolute;inset:0;background:var(--leo);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.7,0,.2,1);
}
.row>*{position:relative;z-index:1}
.row .cc{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;
  color:#BBB3A3;
  transition:color .2s;
}
.row .cc .gl{width:17px;height:17px;display:block;margin-left:-1px}
.row[data-cc=int]::before{background:var(--press)}
.row[data-cc=int]:hover,.row[data-cc=int]:focus-visible{border-bottom-color:var(--press)}
.row[data-cc=int] .nm{font-weight:600}
.row .ld{
  border-bottom:2px dotted #D9D2C1;
  transform:translateY(5px);
  transition:border-color .2s;
}
.row .nm{
  font-family:var(--disp);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(18px,1.6vw,24px);
  transition:color .2s,transform .3s cubic-bezier(.7,0,.2,1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row .hi{
  font-family:var(--disp);font-weight:600;font-size:15px;
  color:var(--paper);opacity:0;transform:translateY(9px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.7,0,.2,1);
  white-space:nowrap;
}
.row .dm{
  font-family:var(--mono);font-size:12.5px;color:var(--mut);
  transition:color .2s;white-space:nowrap;
}
.row .ar{
  font-family:var(--disp);font-size:18px;font-weight:600;color:var(--mut);
  transition:color .2s,transform .3s cubic-bezier(.7,0,.2,1);
  text-align:right;
}
.row:hover::before,.row:focus-visible::before{transform:scaleX(1)}
.row:hover,.row:focus-visible{border-bottom-color:var(--leo)}
.row:hover .nm,.row:focus-visible .nm{color:var(--paper);transform:translateX(6px)}
.row:hover .hi,.row:focus-visible .hi{opacity:1;transform:translateY(0)}
.row:hover .dm,.row:focus-visible .dm{color:rgba(255,255,255,.75)}
.row:hover .cc,.row:focus-visible .cc{color:rgba(255,255,255,.7)}
.row:hover .ld,.row:focus-visible .ld{border-color:rgba(255,255,255,.4)}
.row:hover .ar,.row:focus-visible .ar{color:var(--paper);transform:translate(4px,-4px)}
.row:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.row.on:not(:hover){background:var(--wash)}
.row.on:not(:hover) .cc{color:var(--leo)}
.row.on:not(:hover) .ar{color:var(--leo)}
.idxfoot{
  flex:none;display:flex;justify-content:space-between;gap:16px;
  padding:14px 48px;
  font-size:12px;color:#9C968A;
}
.idxfoot a{
  color:inherit;text-decoration:none;
}
.idxfoot a:hover,.idxfoot a:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* ---------- load stagger ---------- */
.fadein{opacity:0;transform:translateY(14px);animation:fup .55s cubic-bezier(.2,.6,.2,1) forwards}
@keyframes fup{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100svh;overflow:auto}
  .pressp{min-height:0}
  .presshead{padding:26px 24px 0}
  .thesis{font-size:clamp(30px,8vw,42px)}
  .mapwrap{padding:10px 18px 0;max-height:38vh}
  .mapcap{padding:0 24px 12px;flex-wrap:wrap}
  .idxhead{padding:24px 24px 0}
  .row{padding:0 24px;grid-template-columns:34px auto 1fr auto 24px;min-height:62px}
  .row .hi{display:none}
  .row .nm{font-size:clamp(17px,5.2vw,22px)}
}
@media (max-width:520px){
  .row{grid-template-columns:34px auto 1fr 24px}
  .row .dm{display:none}
  .idxfoot{padding:13px 24px;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .sweep{display:none}
  .map path{animation:none;opacity:1}
  .map,.globe{transition:opacity .3s ease;transform:none}
  body.world-mode .map{transform:none}
  body.world-mode .globe{transform:none}
  .tickin{animation:none}
  .fadein{animation:none;opacity:1;transform:none}
  .row::before,.row .nm,.row .hi,.row .ar{transition:none}
}