/* =====================================================================
   DETERMINANT CHINA · MARKET READ · deck styles
   Brand-exact per design-systems/det/DESIGN.md. No colours outside the
   palette, no gradients, no shadows, near-sharp 2px corners, hairline
   separation.

   ONE ADDED DISCIPLINE, deck-wide: bright cyan #78F9FF means exactly one
   thing, DETERMINANT's own position. It is never used decoratively, so
   "where are we" is answerable at a glance on any section.

   The brand specifies no monospace, and bans unnoted grotesque
   substitution, so the source apparatus gets its own voice through
   uppercase wide-tracked caption setting rather than a second face.
   ===================================================================== */

:root{
  --det:#004D71; --deep:#003349; --mid:#4786A3;
  --cyan:#78F9FF; --cyanlt:#AEDFE6;
  --grey:#C1BFB8; --greylt:#EBEBEC;
  --ink:#212124; --white:#FFFFFF; --hair:#DADDDE;

  --ruler-h:56px;
  --pad:clamp(28px, 5vw, 96px);
  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--white); color:var(--ink);
  font-family:'Neue Haas Grotesk Display Pro','Helvetica Now Display',Helvetica,Arial,sans-serif;
  font-weight:300; font-size:17px; line-height:1.5;
  padding-bottom:var(--ruler-h);
  -webkit-font-smoothing:antialiased;
}
b,strong{font-weight:500}
h1,h2,h3{font-weight:500; letter-spacing:-.015em; line-height:1.08}

/* tabular figures everywhere a number is compared to another number */
.num,.pricebig,.stat b,table td,table th{font-variant-numeric:tabular-nums}

/* ---------- section shell ---------- */
.sec{
  min-height:calc(100vh - var(--ruler-h));
  padding:var(--pad) var(--pad) calc(var(--pad) * .8);
  display:flex; flex-direction:column; justify-content:center;
  border-bottom:1px solid var(--hair);
  scroll-margin-top:0;
}
.sec > .inner{max-width:var(--maxw); margin:0 auto; width:100%}
.sec.dark{background:var(--det); color:var(--white); border-bottom-color:var(--det)}
.sec.deep{background:var(--deep); color:var(--white); border-bottom-color:var(--deep)}
.sec.tint{background:var(--greylt)}

/* the + cross grid, a quiet brand texture, only on drenched sections */
.sec.dark,.sec.deep{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 30v12M30 36h12' stroke='%23FFFFFF' stroke-opacity='0.09' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:var(--det); margin-bottom:18px;
}
.dark .eyebrow,.deep .eyebrow{color:var(--cyanlt)}

/* Slide titles state the takeaway, per the brand playbook's Pyramid rule */
.title{font-size:clamp(30px, 4.0vw, 52px); max-width:19ch; margin-bottom:16px}
.title.wide{max-width:26ch}
.lede{font-size:clamp(17px, 1.45vw, 21px); font-weight:300; max-width:66ch; color:rgba(33,33,36,.82); line-height:1.55}
.dark .lede,.deep .lede{color:var(--cyanlt)}

/* source apparatus: the deck's credibility rests on provenance, so it
   gets a consistent, quiet, unmistakable voice */
.src{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(33,33,36,.50); font-weight:400; margin-top:22px; line-height:1.7;
}
.dark .src,.deep .src{color:rgba(255,255,255,.55)}
.src b{color:var(--det); font-weight:500}
.dark .src b,.deep .src b{color:var(--cyanlt)}

/* ---------- cover ---------- */
#cover{justify-content:space-between; padding-top:calc(var(--pad) * .9)}
.coverhead{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap}
.wordmark{font-size:13px; letter-spacing:.3em; font-weight:500; color:var(--white)}
.covertitle{font-size:clamp(40px, 7.2vw, 96px); line-height:.98; letter-spacing:-.03em; max-width:15ch}
.covermeta{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cyanlt); font-weight:400}

/* HERO SIGNATURE: the strike-through.
   A tag price, struck, landing on what people actually pay. The subject's
   own vernacular, and the whole thesis in three seconds. */
.strike{margin:clamp(28px,5vh,64px) 0; display:flex; align-items:baseline; gap:clamp(18px,3vw,44px); flex-wrap:wrap}
.strikecol .k{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cyanlt); margin-bottom:8px; font-weight:400}
.pricebig{font-size:clamp(44px,8vw,104px); font-weight:500; letter-spacing:-.035em; line-height:1; position:relative; display:inline-block}
.pricebig.was{color:rgba(255,255,255,.42)}
.pricebig.was::after{
  content:""; position:absolute; left:-4%; right:-4%; top:52%; height:3px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left center;
}
.pricebig.now{color:var(--white)}
.arrowdown{font-size:clamp(20px,3vw,34px); color:var(--cyanlt); font-weight:300}

/* load sequence, one orchestrated moment and nothing else */
.anim .pricebig.was{opacity:0; animation:fadeUp .5s ease-out .25s forwards}
.anim .pricebig.was::after{animation:strikeIn .45s cubic-bezier(.65,0,.35,1) 1.0s forwards}
.anim .arrowdown{opacity:0; animation:fadeUp .4s ease-out 1.45s forwards}
.anim .pricebig.now{opacity:0; animation:fadeUp .55s ease-out 1.6s forwards}
.anim .coverline{opacity:0; animation:fadeUp .5s ease-out 2.1s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none}}
@keyframes strikeIn{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .anim .pricebig.was,.anim .arrowdown,.anim .pricebig.now,.anim .coverline{opacity:1;animation:none}
  .anim .pricebig.was::after{transform:scaleX(1);animation:none}
}
.coverline{font-size:clamp(16px,1.6vw,22px); font-weight:300; color:var(--cyanlt); max-width:60ch}
.coverline b{color:var(--white); font-weight:500}

/* ---------- the price ruler: the deck's signature structure ----------
   Every finding here is positional. A reader who loses the scale loses the
   argument, so the scale is permanent and the active band lights up. */
.ruler{
  position:fixed; left:0; right:0; bottom:0; height:var(--ruler-h); z-index:60;
  background:var(--white); border-top:1px solid var(--hair);
  display:flex; align-items:stretch;
}
.rlabel{
  flex:0 0 auto; padding:0 14px 0 var(--pad); display:flex; align-items:center;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(33,33,36,.50); font-weight:500;
  white-space:nowrap;
}
.rtrack{flex:1; display:flex; position:relative; padding-right:var(--pad)}
.rband{
  flex:1; position:relative; border-left:1px solid var(--hair);
  display:flex; flex-direction:column; justify-content:center; padding:0 9px;
  transition:background .28s ease;
}
.rband:last-child{border-right:1px solid var(--hair)}
.rband .rb{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(33,33,36,.42); font-weight:500; line-height:1.3}
.rband .rr{font-size:9.5px; color:rgba(33,33,36,.32); font-weight:300; line-height:1.3}
.rband.on{background:var(--cyanlt)}
.rband.on .rb{color:var(--deep)}
.rband.on .rr{color:var(--det)}
/* the 350 boundary is the study's thesis, so it is drawn, not implied */
.rband[data-edge="350"]{border-left:2px solid var(--det)}
.rband[data-edge="350"]::before{
  content:"350"; position:absolute; top:3px; left:-15px; font-size:9px; font-weight:500;
  color:var(--det); letter-spacing:.04em; background:var(--white); padding:0 3px;
}
@media(max-width:820px){
  .rband .rr{display:none}
  .rlabel{padding-left:16px; font-size:8.5px}
}

/* ---------- progress + nav ---------- */
.prog{position:fixed; top:0; left:0; height:2px; background:var(--cyan); z-index:70; width:0; transition:width .12s linear}
.nav{
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:7px;
}
.nav button{
  width:7px; height:7px; border-radius:50%; background:var(--hair); border:none; padding:0; cursor:pointer;
  transition:background .2s, transform .2s;
}
.nav button.on{background:var(--det); transform:scale(1.5)}
.nav button:focus-visible{outline:2px solid var(--det); outline-offset:3px}
@media(max-width:900px){.nav{display:none}}

/* ---------- data blocks ---------- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:start}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,42px)}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}

.stat{border-top:2px solid var(--det); padding-top:14px}
.stat b{display:block; font-size:clamp(30px,4.4vw,54px); font-weight:500; color:var(--det); letter-spacing:-.03em; line-height:1}
.stat span{display:block; font-size:13.5px; font-weight:300; color:rgba(33,33,36,.66); margin-top:8px; line-height:1.45}
.dark .stat,.deep .stat{border-top-color:var(--cyan)}
.dark .stat b,.deep .stat b{color:var(--white)}
.dark .stat span,.deep .stat span{color:var(--cyanlt)}
/* the one exception: our own position always reads cyan */
.stat.us b{color:var(--det)}
.stat.us{border-top-color:var(--cyan); border-top-width:3px}

table{width:100%; border-collapse:collapse; font-size:14.5px; margin-top:8px}
th{
  text-align:left; font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--white); background:var(--det); padding:9px 12px; vertical-align:bottom;
}
td{padding:9px 12px; border-bottom:1px solid var(--hair); font-weight:300; vertical-align:top}
tr.us td{background:rgba(174,223,230,.20); font-weight:400}
tr.us td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
td.n{text-align:right; font-weight:400}
td.good{color:var(--det); font-weight:500}
td.bad{color:rgba(33,33,36,.50)}
.tnote{font-size:12px; color:rgba(33,33,36,.50); font-weight:300; margin-top:10px}

/* a bar that reads as a price hold, used where a number alone would not land */
.bars{margin-top:6px}
.bar{display:grid; grid-template-columns:minmax(120px,190px) 1fr 52px; gap:14px; align-items:center; padding:6px 0}
.bar .bn{font-size:14px; font-weight:300}
.bar .bt{height:12px; background:var(--greylt); position:relative}
.bar .bf{position:absolute; left:0; top:0; bottom:0; background:var(--mid)}
.bar .bv{font-size:13.5px; font-weight:500; color:var(--det); text-align:right; font-variant-numeric:tabular-nums}
.bar.low .bf{background:var(--grey)}
.bar.us .bf{background:var(--det)}
.bar.us .bn{font-weight:500; color:var(--det)}

.callout{border-left:3px solid var(--cyan); padding:14px 0 14px 20px; margin-top:26px; max-width:70ch}
.callout p{font-size:16px; font-weight:300; line-height:1.55}
.dark .callout,.deep .callout{border-left-color:var(--cyan)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:14.5px; margin-top:14px}
.kv dt{font-weight:500; color:var(--det); white-space:nowrap}
.kv dd{font-weight:300; color:rgba(33,33,36,.82)}
.dark .kv dt,.deep .kv dt{color:var(--cyanlt)}
.dark .kv dd,.deep .kv dd{color:rgba(255,255,255,.86)}

ol.qs{counter-reset:q; list-style:none; margin-top:10px}
ol.qs li{counter-increment:q; position:relative; padding-left:46px; margin-bottom:22px; max-width:62ch}
ol.qs li::before{
  content:counter(q); position:absolute; left:0; top:-2px;
  font-size:26px; font-weight:300; color:var(--cyan); line-height:1;
}
ol.qs b{display:block; font-size:19px; font-weight:500; margin-bottom:5px}
ol.qs span{font-size:15px; font-weight:300; color:var(--cyanlt)}

/* ---------- appendix ---------- */
.dive{padding:clamp(34px,5vw,64px) var(--pad); border-bottom:1px solid var(--hair)}
.dive .inner{max-width:var(--maxw); margin:0 auto}
.divehead{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:6px}
.divenum{font-size:11px; letter-spacing:.2em; color:var(--mid); font-weight:500}
.dive h3{font-size:clamp(22px,2.6vw,30px)}
.dive .proves{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--white); background:var(--mid); padding:3px 9px; font-weight:500}
.dive .verdict{font-size:16px; font-weight:300; max-width:76ch; margin:12px 0 20px; line-height:1.55; color:rgba(33,33,36,.82)}
.dive .verdict b{color:var(--det); font-weight:500}
.divegrid{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(18px,3vw,40px)}
@media(max-width:900px){.divegrid{grid-template-columns:1fr}}
.divegrid h4{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--det); font-weight:500;
  border-bottom:1px solid var(--hair); padding-bottom:6px; margin-bottom:9px}
.divegrid p,.divegrid li{font-size:14px; font-weight:300; line-height:1.55; color:rgba(33,33,36,.82)}
.divegrid ul{list-style:none}
.divegrid li{padding-left:14px; position:relative; margin-bottom:6px}
.divegrid li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:1px; background:var(--mid)}
.ladder{font-size:14px; font-variant-numeric:tabular-nums; font-weight:400; color:var(--det)}

footer{padding:34px var(--pad) 46px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(33,33,36,.50); font-weight:400; max-width:var(--maxw); margin:0 auto}

a{color:inherit}
:focus-visible{outline:2px solid var(--det); outline-offset:2px}
.dark :focus-visible,.deep :focus-visible{outline-color:var(--cyan)}

/* =====================================================================
   MAP SNAPSHOTS
   Live renders from the shared cell layer, not screenshots. Styled to sit
   inside the argument rather than float beside it: hairline frame, no
   shadow, and a footer that both says what to look at and offers the way
   through to the live map.
   ===================================================================== */
.shot{
  margin:30px 0 4px; border:1px solid var(--hair); border-radius:2px;
  padding:10px 12px 6px; background:var(--white);
}
.shot svg{display:block}
.shotfoot{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--hair); margin-top:6px; padding:8px 2px 2px;
  font-size:11px; letter-spacing:.06em; color:rgba(33,33,36,.50); font-weight:400;
}
.shotfoot a{color:var(--det); font-weight:500; text-decoration:none; white-space:nowrap}
.shotfoot a:hover{text-decoration:underline}
.shotfail{font-size:13px; font-weight:300; color:rgba(33,33,36,.66); padding:16px 4px}

/* on a drenched section the frame inverts rather than punching a white hole */
.shot.dark{background:transparent; border-color:rgba(255,255,255,.22)}
.shot.dark .shotfoot{border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.55)}
.shot.dark .shotfoot a{color:var(--cyan)}
.shot.dark .shotfail{color:var(--cyanlt)}

/* =====================================================================
   SPLIT SECTIONS
   Where a section carries a map snapshot, the argument sits left and the
   chart sits right. The chart gains a lot of height that way, which is
   what the crowded y-axis wanted; the columns are weighted 38/62 rather
   than evenly, because the price axis spans 0 to 2900 and horizontal
   resolution is not something this chart can spare.
   ===================================================================== */
.inner.split{
  display:grid; grid-template-columns:0.62fr 1fr;
  gap:clamp(28px,3.4vw,58px); align-items:center;
}
.inner.split .splittext{min-width:0}
.inner.split .title{font-size:clamp(26px,2.6vw,40px); max-width:20ch}
.inner.split .lede{font-size:clamp(15px,1.15vw,17.5px); max-width:46ch}
.inner.split .stat b{font-size:clamp(26px,2.7vw,40px)}
.inner.split .stat span{font-size:12.5px}
.inner.split .callout{margin-top:22px}
.inner.split .callout p{font-size:14.5px}
.inner.split .src{margin-top:18px}
.inner.split .shot{margin:0; min-width:0}

@media(max-width:1000px){
  .inner.split{grid-template-columns:1fr; gap:26px}
  .inner.split .shot{margin-top:8px}
}