/* DETERMINANT APAC market read.
   Brand-exact per design-systems/det/DESIGN.md: palette only, Neue Haas
   (45/55/65 = 300/400/500), near-sharp 2px corners, hairlines not shadows,
   no gradients, left-aligned, generous whitespace.

   One deck-wide discipline carried from the China deck: bright cyan #78F9FF
   carries exactly one meaning, DETERMINANT's own position, and is never used
   decoratively. */

:root{
  --det:#004D71; --deep:#003349; --mid:#4786A3; --cyan:#78F9FF; --cyanlt:#AEDFE6;
  --grey:#C1BFB8; --greylt:#EBEBEC; --ink:#212124; --hair:#DADDDE; --white:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
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:16px;line-height:1.55}
b,strong{font-weight:500}
i,em{font-style:italic}

/* ---------- section shell ---------- */
.s{padding:64px 0 72px;border-bottom:1px solid var(--hair)}
.inner{max-width:1180px;margin:0 auto;padding:0 56px}
.s.alt{background:var(--greylt);border-bottom:none}
.s.warn{background:#FFF8E8;border-bottom:none}

/* DET Blue drenched section with the brand's plus-cross grid texture */
.s.drench{background:var(--det);color:var(--white);border-bottom:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M32 26v12M26 32h12' stroke='%23FFFFFF' stroke-opacity='0.10' stroke-width='1.5'/%3E%3C/svg%3E")}
.s.drench h2,.s.drench h3,.s.drench b{color:var(--white)}
.w{color:var(--white)!important}

/* oversized outline section numeral, per the guideline */
.num{font-size:52px;font-weight:500;color:transparent;-webkit-text-stroke:1px var(--cyanlt);
  letter-spacing:-.02em;line-height:1;margin-bottom:14px}
.num.light{-webkit-text-stroke-color:rgba(255,255,255,.45)}

h1{font-size:44px;font-weight:500;letter-spacing:-.015em;line-height:1.14}
h2{font-size:32px;font-weight:500;letter-spacing:-.01em;line-height:1.2;
  color:var(--det);max-width:960px;margin-bottom:16px}
h3{font-size:15px;font-weight:500;letter-spacing:.02em;color:var(--det);margin:20px 0 7px}
.s.drench h3{color:var(--cyanlt)}
.lede{font-size:18px;line-height:1.62;max-width:900px;margin-bottom:26px;color:#3C4043}
.s.drench .lede{color:rgba(255,255,255,.88)}
p{margin-bottom:12px}
.src{font-size:12.5px;color:#6B7075;line-height:1.55;margin-top:22px;max-width:940px}
.s.drench .src{color:rgba(255,255,255,.6)}

/* the one pull-quote treatment: a hairline rule, never a box shadow */
.pull{font-size:19px;line-height:1.55;font-weight:400;color:var(--det);
  border-left:3px solid var(--cyan);padding:2px 0 2px 20px;margin:26px 0 8px;max-width:920px}
.s.drench .pull{color:var(--white);border-left-color:var(--cyan)}

/* ---------- cover ---------- */
.cover{padding:96px 0 88px}
.eyebrow{font-size:11.5px;letter-spacing:.22em;color:var(--cyanlt);margin-bottom:22px;font-weight:400}
.cvt{max-width:1000px}
.cvs{font-size:18px;color:rgba(255,255,255,.82);margin-top:20px}
.cvmeta{display:grid;grid-template-columns:repeat(4,auto);gap:44px;margin-top:48px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:22px;justify-content:start}
.cvmeta b{display:block;font-size:34px;font-weight:400;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--white)}
.cvmeta span{display:block;font-size:12px;color:rgba(255,255,255,.7);margin-top:3px;max-width:130px;line-height:1.4}

/* ---------- grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:38px;margin-top:8px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:6px 0 26px}
.card{border:1px solid var(--hair);padding:20px 22px;background:var(--white)}
.s.alt .card{border-color:#DCDCDD}
.card.warncard{border-left:3px solid #E0A200}
.card h3{margin-top:0}
.card .big{font-size:40px;font-weight:400;color:var(--det);letter-spacing:-.02em;line-height:1;margin-bottom:8px;
  font-variant-numeric:tabular-nums}
.card p{font-size:14px;line-height:1.55;margin:0}

.defs{font-size:14px}
.defs dt{font-weight:500;color:var(--det);margin-top:9px}
.defs dd{margin-left:0;color:#3C4043}
ul.tick{list-style:none;font-size:14.5px;line-height:1.6}
ul.tick li{padding-left:16px;position:relative;margin-bottom:9px}
ul.tick li:before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--mid)}

/* ---------- tables ---------- */
.t{border-collapse:collapse;width:100%;font-size:14px;margin-top:6px}
.t.narrow{max-width:640px}
.t th{background:var(--det);color:var(--white);text-align:left;padding:9px 13px;
  font-weight:500;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.t td{padding:9px 13px;border-bottom:1px solid var(--hair);vertical-align:top}
.t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t tbody tr:nth-child(even){background:rgba(235,235,236,.5)}
.s.alt .t tbody tr:nth-child(even){background:rgba(255,255,255,.6)}
.t .bad{color:#8A5A00;font-weight:500}
.t tr.lo td{background:rgba(174,223,230,.32)}
.t tr.hi td{background:rgba(193,191,184,.3)}
.sub{display:block;font-size:11px;color:#6B7075;font-weight:300}

.chip{display:inline-block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 7px;margin-right:7px;font-weight:500;vertical-align:1px}
.chip.c{background:var(--cyanlt);color:var(--deep)}
.chip.t{background:var(--mid);color:var(--white)}
.chip.o{background:var(--cyan);color:var(--deep)}

/* ---------- market index bars ---------- */
.bars{margin:6px 0 30px;max-width:760px}
.bar{display:flex;align-items:center;gap:14px;margin-bottom:9px}
.bl{width:110px;font-size:14px;text-align:right;color:#3C4043}
.bt{display:block;height:26px;background:var(--mid);position:relative;max-width:calc(100% - 130px)}
.bar.base .bt{background:var(--det)}
.bt i{position:absolute;right:9px;top:4px;font-style:normal;font-size:12.5px;color:var(--white);
  font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- the ladder ---------- */
.ladder{margin:8px 0 6px}
.lr{display:flex;align-items:center;gap:16px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.lv{width:64px;text-align:right;font-variant-numeric:tabular-nums;font-size:17px;color:var(--white);font-weight:400}
.ln{width:170px;font-size:14px;color:rgba(255,255,255,.85)}
.lb{height:12px;background:rgba(255,255,255,.3);display:block}
.lr.me .lv,.lr.me .ln{color:var(--cyan);font-weight:500}
.lr.me .lb{background:var(--cyan)}

/* ---------- decomposition ---------- */
.decomp{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:10px 0 30px;max-width:940px}
.decomp>div{border-left:3px solid var(--hair);padding-left:16px}
.decomp>.hero{border-left-color:var(--cyan)}
.dn{display:block;font-size:38px;font-weight:400;letter-spacing:-.02em;color:var(--det);
  font-variant-numeric:tabular-nums;line-height:1.05}
.dl{display:block;font-size:12.5px;color:#5A5F63;margin-top:6px;line-height:1.45}

/* ---------- tension cards ---------- */
.tension{margin:6px 0 4px}
.tcard{border:1px solid var(--hair);border-top:3px solid var(--det);padding:20px 22px;background:var(--white)}
.tk{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mid);font-weight:500}
.tbig{font-size:38px;font-weight:400;color:var(--det);letter-spacing:-.02em;margin:6px 0 8px;
  font-variant-numeric:tabular-nums}
.tcard p{font-size:14px;margin:0;color:#3C4043}

/* ---------- spread comparison strip ---------- */
.cmp{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin:28px 0 4px}
.cmp>div{border-top:2px solid var(--hair);padding-top:9px}
.cmp span{display:block;font-size:11px;color:#6B7075;line-height:1.3;min-height:26px}
.cmp b{display:block;font-size:19px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:3px}
.cmp>.best{border-top-color:var(--det)}
.cmp>.best b{color:var(--det);font-weight:500}
.cmp>.us{border-top-color:var(--cyan)}
.cmp>.us b{color:var(--det);font-weight:500}

.statbig{margin-bottom:16px}
.statbig b{display:block;font-size:52px;font-weight:400;color:var(--det);letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums}
.statbig span{display:block;font-size:13px;color:#5A5F63;margin-top:6px;max-width:340px}

.brandlist{font-size:14px;line-height:1.75;color:#3C4043;max-width:520px}

/* ---------- close ---------- */
.link{font-size:19px;color:var(--cyan);letter-spacing:.01em;margin:18px 0 30px;font-weight:400}
.dates{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:20px;margin-bottom:8px}
.dates b{display:block;font-size:19px;color:var(--white);font-weight:500}
.dates span{display:block;font-size:12px;color:rgba(255,255,255,.72);margin-top:4px;line-height:1.45}

/* ---------- nav ---------- */
#nav{position:fixed;right:0;top:0;height:100vh;width:210px;padding:26px 20px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;z-index:20;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 40%)}
#nav a{display:block;font-size:11px;color:#8A8F93;text-decoration:none;padding:3px 0;
  letter-spacing:.02em;line-height:1.3}
#nav a:hover{color:var(--det)}
#nav a.on{color:var(--det);font-weight:500}
#nav a.on:before{content:"";display:inline-block;width:10px;height:1px;background:var(--det);
  vertical-align:3px;margin-right:5px}

@media (max-width:1500px){ #nav{display:none} }
@media (max-width:900px){
  .g2,.g3,.decomp,.dates,.tension{grid-template-columns:1fr}
  .cmp{grid-template-columns:repeat(3,1fr)}
  .cvmeta{grid-template-columns:repeat(2,auto);gap:24px}
  h1{font-size:32px} h2{font-size:24px} .inner{padding:0 26px}
}

/* ---------- print: one section per page, colour preserved ----------
   Same lesson as the China deck: every multi-column layout must be pinned,
   because the person exporting will use Cmd+P at whatever window width they
   happen to have, and an unpinned breakpoint silently reflows the PDF. */
@page{size:381mm 214mm;margin:0}
@media print{
  #nav{display:none}
  body{font-size:13px}
  .s{page-break-after:always;break-after:page;border-bottom:none;
     padding:34px 0;min-height:198mm}
  .inner{max-width:none;padding:0 26mm}
  .g2,.tension{grid-template-columns:1fr 1fr!important}
  .g3,.decomp{grid-template-columns:repeat(3,1fr)!important}
  .cmp{grid-template-columns:repeat(9,1fr)!important}
  .dates,.cvmeta{grid-template-columns:repeat(4,1fr)!important}
  h1{font-size:30px} h2{font-size:22px} .lede{font-size:14px}
  .num{font-size:38px} .dn,.tbig{font-size:28px} .statbig b{font-size:38px}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}