/* PRDM — Political Risk Demystified
   Rebuilt from design_handoff_prdm_site. Border radius: 0 everywhere. */

:root{
  --navy:#101823; --navy-panel:#16202D; --navy-inset:#18222E;
  --bd-navy:#223040; --bd-navy-soft:#26343F; --bd-navy-panel:#2A3846;
  --bd-navy-input:#3A4854; --bd-navy-btn:#4A5866;
  --olive:#3C4A46;
  --paper:#EDF0F3; --white:#FFFFFF;
  --ink:#16202D; --ink-body:#454B52; --ink-muted:#7C848C;
  --bd-paper:#D3D9DF; --bd-paper-soft:#C3CBD3; --bd-paper-mid:#A9B4BE;
  --on-dark:#AFB8C2; --muted-dark:#78828D; --muted-deep:#6B7681;
  --blue:#8FB2D2; --blue-deep:#3E6389;
  --serif:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy); color:var(--paper);
  font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
/* height:auto is load-bearing — the width/height attrs are kept for CLS,
   and without this the browser honours the declared height and distorts. */
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none; transition:color .2s,background-color .2s,border-color .2s}
a:hover{color:var(--white)}
:focus-visible{outline:1px solid var(--paper); outline-offset:4px}
::selection{background:var(--paper); color:var(--navy)}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:400}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:1160px; margin:0 auto; padding:0 40px}
.eyebrow{font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:500; color:var(--blue)}
.eyebrow.on-paper{color:var(--ink-muted)}
.micro{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--muted-deep)}
.lede{font-size:1.2rem; line-height:1.6; color:var(--on-dark); font-weight:300; max-width:52ch}
.cap{font-size:.95rem; color:var(--muted-dark); font-weight:300; max-width:30ch}

/* two-column rhythm */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:72px}
.duo.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
.duo.end{align-items:end}
.duo.start{align-items:start}

/* buttons */
.btn-solid{display:inline-block; background:var(--paper); color:var(--navy); padding:17px 42px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.btn-solid:hover{background:var(--white); color:var(--navy)}
.btn-out{display:inline-block; border:1px solid var(--bd-navy-btn); padding:14px 30px; color:var(--paper);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.btn-out:hover{background:var(--paper); color:var(--navy); border-color:var(--paper)}
.btn-paper{display:inline-block; border:1px solid var(--bd-paper-mid); padding:15px 32px; color:var(--ink);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.btn-paper:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.tlink{font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--on-dark);
  border-bottom:1px solid var(--bd-navy-input); padding-bottom:3px}
.tlink:hover{color:var(--white); border-color:var(--white)}
.tlink.strong{letter-spacing:.16em; font-weight:600; color:var(--paper); border-color:var(--bd-navy-btn)}
.tlink.paper{color:var(--ink); border-color:var(--bd-paper-mid); font-weight:600; letter-spacing:.16em}
.tlink.paper:hover{color:var(--ink); border-color:var(--ink)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:30; height:74px; border-bottom:1px solid var(--bd-navy);
  background:rgba(14,16,19,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.nav .wrap{height:100%; display:flex; align-items:center; justify-content:space-between; gap:32px}
.nav-left{display:flex; align-items:baseline; gap:12px}
.wordmark{font-family:var(--serif); font-size:21px; letter-spacing:.06em; color:var(--blue)}
#nav-desc{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-dark);
  font-weight:500; white-space:nowrap}
#nav-links{display:flex; align-items:center; gap:24px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500; color:var(--on-dark); white-space:nowrap}
#nav-cta{border:1px solid var(--bd-navy-btn); padding:11px 22px; color:var(--paper)}
#nav-cta:hover{background:var(--paper); border-color:var(--paper); color:var(--navy)}

/* ---------- hero ---------- */
.hero{padding:132px 0 100px; border-bottom:1px solid var(--bd-navy); overflow:hidden;
  background-image:linear-gradient(100deg,#101823 0%,#101823 46%,rgba(16,24,35,.94) 62%,rgba(16,24,35,.66) 82%,rgba(16,24,35,.5) 100%),url("img/book/p06.webp");
  background-size:cover,cover; background-position:center,center 40%; background-repeat:no-repeat}
.hero-eyebrow{display:flex; align-items:center; gap:16px}
.hero-eyebrow span{white-space:nowrap}
.hero-rule{width:56px; height:1px; background:var(--olive); flex:none}
.hero h1{font-size:clamp(1.6rem,3.6vw,3.1rem); line-height:1.08; letter-spacing:-.015em;
  white-space:nowrap; margin:26px 0 28px}
.hero h1 .mark{color:var(--blue)}
.hero-beat{font-size:1.05rem; color:var(--paper); font-weight:400; max-width:52ch; margin-top:20px}
.cta-row{display:flex; align-items:center; gap:28px; flex-wrap:wrap; margin:40px 0 18px}

/* ---------- trust bar ---------- */
.trust{border-bottom:1px solid var(--bd-navy)}
.trust .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding:26px 40px}
.trust li{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-dark); font-weight:500}

/* ---------- who is in the room ---------- */
.room{padding:104px 0; border-bottom:1px solid var(--bd-navy)}
.room-head{margin-bottom:64px}
.room h2{font-size:clamp(1.9rem,3.2vw,2.6rem); line-height:1.18; letter-spacing:-.01em; max-width:26ch}
.bars{display:grid; gap:2px}
.bar{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:28px; padding:11px 0; align-items:center}
.bar-label{font-size:.95rem; color:var(--paper); font-weight:300}
.bar-track{display:block; height:14px; background:var(--navy-inset)}
.bar-fill{display:block; height:14px; background:var(--blue)}
.src{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-dark);
  font-weight:500; margin-top:22px}
.room-schools{margin-top:76px; border-top:1px solid var(--bd-navy-soft); padding-top:44px}
.schools{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px 44px}
.schools li{font-size:.98rem; color:var(--paper); font-weight:300; line-height:1.5}

/* ---------- membership (paper) ---------- */
.paper-sec{background:var(--paper); color:var(--ink); padding:110px 0}
.paper-sec h2{color:var(--ink); font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.18; letter-spacing:-.01em; max-width:26ch}
.paper-sec .eyebrow{margin-bottom:32px; display:block}
.mem-head h2{margin-bottom:76px}
#membership-grid{display:grid; border-top:1px solid var(--bd-paper); border-bottom:1px solid var(--bd-paper);
  grid-template-columns:repeat(4,minmax(0,1fr))}
#membership-grid > div{padding:38px 28px 42px; display:flex; flex-direction:column}
#membership-grid > div + div{border-left:1px solid var(--bd-paper)}
.numeral{font-family:var(--serif); font-size:14px; letter-spacing:.2em; color:var(--blue-deep); margin-bottom:28px}
#membership-grid h3{font-size:1.5rem; line-height:1.2; margin-bottom:14px; color:var(--ink)}
#membership-grid p{font-size:.97rem; color:var(--ink-body); font-weight:300; margin-bottom:22px}
.status{margin-top:auto; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-deep); font-weight:600; white-space:nowrap}
a.status{color:var(--ink-body); border-bottom:1px solid var(--bd-paper-soft); align-self:flex-start}
a.status:hover{color:var(--ink); border-color:var(--ink)}
#manual-band{display:grid; margin-top:76px; border-top:1px solid var(--bd-paper); padding-top:64px;
  gap:64px; align-items:center; grid-template-columns:320px minmax(0,1fr)}
#manual-band img{width:100%; max-width:320px; border:1px solid var(--bd-paper)}
#manual-band h3{font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.16; max-width:22ch; margin:14px 0 18px; color:var(--ink)}
#manual-band p{color:var(--ink-body); font-weight:300; max-width:54ch; margin-bottom:28px}
.band-note{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-muted);
  font-weight:600; margin-top:16px}
.mem-close{margin-top:56px; font-size:.98rem; color:var(--ink-body); font-weight:300}
.mem-close a{color:var(--ink); font-weight:500; border-bottom:1px solid var(--bd-paper-mid)}
.mem-close a:hover{color:var(--ink); border-color:var(--ink)}

/* ---------- approach ---------- */
.approach{padding:110px 0; border-bottom:1px solid var(--bd-navy)}
.std{border-top:1px solid var(--bd-navy-soft); padding:34px 0}
.std:last-of-type{border-bottom:1px solid var(--bd-navy-soft)}
.std h3{font-size:1.8rem; line-height:1.2; margin-bottom:10px}
.std p{color:var(--on-dark); font-weight:300; max-width:58ch}
.std-closer{margin-top:30px; font-size:1.02rem; color:var(--paper); font-weight:400; max-width:58ch}

/* ---------- jobs ---------- */
.jobs{background:var(--navy-panel); padding:110px 0; border-bottom:1px solid var(--bd-navy)}
.jobs-head{margin-bottom:52px}
.jobs h2{font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.18; letter-spacing:-.01em; max-width:26ch; margin-bottom:18px}
.jobs-sub{color:var(--on-dark); font-weight:300; max-width:56ch}
.jobs-status{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue);
  font-weight:600; margin-bottom:18px}
.rows{border-top:1px solid var(--bd-navy-panel)}
.row{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1.6fr) minmax(0,1fr) 110px;
  gap:24px; padding:24px 0; border-bottom:1px solid var(--bd-navy-panel); align-items:baseline}
.row:hover .row-title{color:var(--white)}
.row-title{font-size:1.06rem; color:var(--paper); font-weight:400}
.row-meta{font-size:.95rem; color:var(--on-dark); font-weight:300}
.row-fresh{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  font-weight:600; text-align:right}
.jobs-out{margin-top:26px; display:inline-block}
.ci{margin-top:56px; border:1px solid var(--bd-navy-panel); padding:36px 40px; display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:44px; align-items:center}
.ci-kicker{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--blue); font-weight:600}
.ci h3{font-size:1.6rem; margin:12px 0 14px}
.ci p{color:var(--on-dark); font-weight:300; max-width:56ch}
.tags{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
.tag{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); font-weight:600;
  border:1px solid var(--bd-navy-panel); padding:7px 14px}
.ci-right{text-align:right}
.price{font-family:var(--serif); font-size:2.1rem; color:var(--paper); line-height:1.1}
.per{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-dark); font-weight:500}
.ci-right .btn-out{margin-top:18px}

/* ---------- banner ---------- */
.banner{background:var(--navy-panel); border-bottom:1px solid var(--bd-navy)}
.banner img{width:100%; height:240px; object-fit:cover}

/* ---------- curriculum ---------- */
.cur-head{margin-bottom:64px}
.cur-status{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-deep);
  font-weight:600; margin-top:16px}
.cur-img{aspect-ratio:4/5; width:100%; object-fit:cover; border:1px solid var(--bd-paper)}
.step{display:grid; grid-template-columns:64px 1fr; gap:28px; padding:26px 0;
  border-top:1px solid var(--bd-paper); align-items:baseline}
.step:last-of-type{border-bottom:1px solid var(--bd-paper)}
.step-n{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); font-weight:500}
.step h3{font-family:var(--sans); font-size:1.05rem; font-weight:600; color:var(--ink); margin-bottom:6px}
.step p{color:var(--ink-body); font-size:.95rem; font-weight:300}
.cur-link{margin-top:26px; display:inline-block}

/* ---------- what costs money ---------- */
.costs{padding:104px 0; border-bottom:1px solid var(--bd-navy)}
.costs h2{font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.18; letter-spacing:-.01em; max-width:26ch; margin-bottom:20px}
.costs p{color:var(--on-dark); font-weight:300; max-width:58ch}
.tiles{display:flex; gap:36px; flex-wrap:wrap; border-top:1px solid var(--bd-navy-soft);
  padding-top:26px; margin-top:34px}
.tiles li{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--paper); font-weight:500}

/* ---------- join ---------- */
.join{padding:120px 0}
.join h2{font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.18; letter-spacing:-.01em; max-width:20ch; margin-bottom:36px}
.join .micro{margin-top:18px; display:block}
.yt{margin-top:34px; border-top:1px solid var(--bd-navy-soft); padding-top:28px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.yt p{font-size:1.02rem; color:var(--on-dark); font-weight:300}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--bd-navy); padding:40px 0 56px}
.foot .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; align-items:baseline}
.foot .wordmark{font-size:18px; color:var(--paper)}
.foot-links{display:flex; flex-wrap:wrap; gap:32px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-dark); font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:1180px){ #nav-desc{display:none} }
@media (max-width:1080px){
  #membership-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #membership-grid > div:nth-child(3){border-left:none}
  #membership-grid > div:nth-child(n+3){border-top:1px solid var(--bd-paper)}
}
@media (max-width:1000px){ #nav-links a:not(#nav-cta){display:none} }
@media (max-width:920px){
  .duo,.duo.wide{grid-template-columns:minmax(0,1fr); gap:40px}
  .duo.end,.duo.start{align-items:start}
  .bar{grid-template-columns:minmax(0,1fr); gap:8px}
  .ci{grid-template-columns:minmax(0,1fr); gap:32px}
  .ci-right{text-align:left}
  .row{grid-template-columns:minmax(0,1fr); gap:4px; padding:22px 0}
  .row-fresh{text-align:left; margin-top:8px}
  .hero h1{white-space:normal}
  .hero{background-position:center,center 40%}
}
@media (max-width:760px){
  #manual-band{grid-template-columns:minmax(0,1fr); gap:36px}
  #manual-band img{width:100%; max-width:320px}
  .wrap{padding:0 24px}
  .trust .wrap{padding:22px 24px}
  .hero{padding:96px 0 76px}
  .room,.approach,.jobs,.paper-sec,.costs{padding:76px 0}
  .join{padding:84px 0}
  .ci{padding:28px 24px}
  .banner img{height:180px}
}
@media (max-width:620px){
  #membership-grid{grid-template-columns:minmax(0,1fr)}
  #membership-grid > div + div{border-left:none; border-top:1px solid var(--bd-paper)}
  #membership-grid > div:nth-child(3){border-left:none}
  .cta-row{gap:18px}
  .btn-solid{padding:16px 32px}
  .schools{grid-template-columns:minmax(0,1fr)}
  .step{grid-template-columns:minmax(0,1fr); gap:8px}
  .tiles{gap:20px}
  /* the eyebrow is nowrap by design on desktop; on a phone it must wrap */
  .hero-eyebrow{flex-wrap:wrap; gap:12px}
  .hero-eyebrow .eyebrow{white-space:normal; line-height:1.5}
  .hero-rule{display:none}
  .trust .wrap{gap:14px}
  .foot-links{gap:18px}
}