/* Latin subsets of Source Serif 4 and Source Sans 3 (Adobe, SIL Open Font License 1.1).
   Renamed off the reserved font name as OFL clause 3 requires for a modified version;
   the copyright notice, licence notice and licence URL are retained inside each file.
   Self-hosted alongside the page: no external request is made at load. */
@font-face{
  font-family:"FICO Serif";
  src:url("/assets/fonts/serif-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:"FICO Serif";
  src:url("/assets/fonts/serif-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:block;
}
@font-face{
  font-family:"FICO Serif";
  src:url("/assets/fonts/serif-400-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:block;
}
@font-face{
  font-family:"FICO Sans";
  src:url("/assets/fonts/sans-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:block;
}
@font-face{
  font-family:"FICO Sans";
  src:url("/assets/fonts/sans-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:block;
}

:root{
  --paper:#fcfaf5; --band:#f2eee3; --band-deep:#ece7d9;
  --ink:#29261f; --ink-soft:#3f3a2f; --muted:#6f6759;
  --navy:#122e45; --navy-deep:#0b2033;
  --rule:#d9d2c2; --rule-soft:#e7e1d3;
  --serif:"FICO Serif",Georgia,"Times New Roman",serif;
  --sans:"FICO Sans",-apple-system,"Segoe UI",sans-serif;
  --maxw:1120px; --pad:48px; --sect:92px; --measure:660px;
  --h1:60px; --h1lh:1.06; --h2:31px; --lead:21px; --body:17px;
  --stat:54px; --small:13.5px; --label:11.5px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:#fcfaf5}
.page{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:var(--body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main{flex:1 0 auto}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
p{margin:0}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-0.012em; text-wrap:balance}
ul{margin:0; padding:0; list-style:none}
a{color:var(--navy); text-decoration:none}
a:hover{color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px}
.skip{
  position:absolute; left:-9999px; top:0; z-index:9;
  font-family:var(--sans); font-size:14px; background:var(--navy); color:var(--paper);
  padding:12px 18px;
}
.skip:focus{left:0}

/* ---------- shared type utilities ---------- */
.label{
  font-family:var(--sans); font-size:13px; font-weight:400;
  letter-spacing:.055em; color:var(--muted); line-height:1.5;
}
.label-cap{
  font-family:var(--sans); font-size:var(--label); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:1.6;
}
.meta{font-family:var(--sans); font-size:var(--small); line-height:1.6; color:var(--muted)}
.prose{font-size:var(--body); line-height:1.68; color:var(--ink-soft); max-width:var(--measure); text-wrap:pretty}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--rule)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:72px}
.wordmark{font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:-0.01em; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-link{
  font-family:var(--sans); font-size:14px; font-weight:400; color:var(--muted);
  padding:14px 14px; display:inline-flex; align-items:center; min-height:48px;
  border-bottom:2px solid transparent; transition:color .12s ease, border-color .12s ease;
}
.nav-link:hover{color:var(--ink)}
.nav-link.is-active{color:var(--navy); font-weight:600; border-bottom-color:var(--navy)}

/* ---------- hero ---------- */
.hero{padding-top:72px; padding-bottom:var(--sect)}
.hero-eyebrow{margin-bottom:26px}
.hero-title{font-size:var(--h1); line-height:var(--h1lh); max-width:880px; margin-bottom:44px}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:72px; align-items:start}
.hero-main{display:flex; flex-direction:column; gap:28px; max-width:var(--measure)}

.verdict{
  border-top:2px solid var(--navy); border-bottom:1px solid var(--rule);
  background:var(--band); padding:22px 26px 20px;
  display:flex; flex-direction:column; gap:9px;
}
.verdict-label{
  font-family:var(--sans); font-size:16px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.35; color:var(--navy);
}
.verdict-note{font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--muted)}
.vintage{font-family:var(--sans); font-size:var(--small); color:var(--muted); line-height:1.6}
.conclusion{font-size:var(--lead); line-height:1.55; color:var(--ink); text-wrap:pretty}

.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:4px}
.cta{
  display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 30px;
  background:var(--navy); color:var(--paper);
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.005em;
  transition:background .12s ease;
}
.cta:hover{background:var(--navy-deep); color:var(--paper)}
.cta svg{flex:none}
.cta-alt{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-family:var(--sans); font-size:14px; font-weight:400; color:var(--muted);
  transition:color .12s ease;
}
.cta-alt:hover{color:var(--navy)}
.cta-support{font-family:var(--sans); font-size:var(--small); color:var(--muted); margin-top:-4px}

.preview{display:flex; flex-direction:column; gap:14px; align-self:start; margin:0}
.preview-frame{
  display:block; border:1px solid var(--rule); background:var(--paper);
  box-shadow:0 1px 2px rgba(41,38,31,.05), 0 14px 34px -18px rgba(41,38,31,.32);
  transition:box-shadow .14s ease, border-color .14s ease;
}
.preview-frame:hover{border-color:#c3b9a3; box-shadow:0 1px 2px rgba(41,38,31,.06), 0 18px 42px -18px rgba(41,38,31,.4)}
.preview-frame img{display:block; width:100%; height:auto}
.preview-cap{font-family:var(--sans); font-size:12.5px; color:var(--muted); line-height:1.5}

/* ---------- generic section ---------- */
.sect{padding-bottom:var(--sect)}
.sect-head{border-top:1px solid var(--rule); padding-top:22px; margin-bottom:40px}
.sect-head h2{font-size:var(--h2); line-height:1.2}

/* ---------- decision math ---------- */
.math{
  display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center;
  gap:0 30px; border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
  padding:42px 0 46px;
}
.math-cell{display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.math-num{
  font-family:var(--sans); font-size:var(--stat); font-weight:600; line-height:1;
  letter-spacing:-0.015em; color:var(--navy); font-variant-numeric:tabular-nums lining-nums;
}
.math-arrow{color:#a89e8c; display:flex; align-items:center; justify-content:center; padding-top:26px}
.math-note{margin-top:30px}

/* ---------- contributions ---------- */
.contrib{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px}
.contrib-close{display:none}
.contrib-item{display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--rule); padding-top:20px}
.contrib-idx{font-family:var(--sans); font-size:var(--label); font-weight:600; letter-spacing:.16em}
.contrib-item .contrib-idx{color:var(--navy)}
.contrib-item h3{font-size:22px; line-height:1.28}
.contrib-item p{font-size:16.5px; line-height:1.66; color:var(--ink-soft); text-wrap:pretty}

/* ---------- change the view ---------- */
.changes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 56px; border-bottom:1px solid var(--rule-soft)}
.changes li{display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--rule-soft); padding:20px 0 22px}
.changes li:nth-child(-n+2){border-top:1px solid var(--rule)}
.changes .mark{flex:none; width:6px; height:6px; background:var(--navy); margin-top:11px}
.changes p{font-size:16.5px; line-height:1.62; color:var(--ink-soft); text-wrap:pretty}

/* ---------- methodology ---------- */
.method{display:grid; grid-template-columns:minmax(0,var(--measure)); }
.method p{font-size:16.5px; line-height:1.72; color:var(--ink-soft); text-wrap:pretty}
.tag{
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.05em;
  color:var(--navy); white-space:nowrap;
}

/* ---------- disclosure + contact ---------- */
.closing{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:72px; align-items:start}
.disclosure{background:var(--band); border:1px solid var(--rule); padding:28px 30px 30px; max-width:var(--measure)}
.disclosure h2{font-size:19px; letter-spacing:0; margin-bottom:12px; color:var(--navy)}
.disclosure p{font-size:16.5px; line-height:1.65; color:var(--ink)}
.contact{display:flex; flex-direction:column; gap:10px; padding-top:4px}
.contact .name{font-size:18px; color:var(--ink)}
.contact a.mail{
  font-family:var(--sans); font-size:15px; color:var(--navy);
  align-self:flex-start;
  min-height:44px; display:inline-flex; align-items:center;
}
.contact .again{
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--navy);
  display:inline-flex; align-items:center; gap:9px; min-height:44px; align-self:flex-start;
}
.freeze{border-top:1px solid var(--rule-soft); margin-top:46px; padding-top:22px; max-width:760px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule); background:var(--band)}
.foot-inner{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 32px; padding-top:32px; padding-bottom:34px}
.foot-id{display:flex; flex-direction:column; gap:8px}
.foot-links{display:flex; flex-wrap:wrap; gap:4px}
.foot-links a{
  font-family:var(--sans); font-size:14px; color:var(--muted);
  padding:10px 12px; min-height:44px; display:inline-flex; align-items:center;
  transition:color .12s ease;
}
.foot-links a:hover{color:var(--navy)}
.foot-note{font-family:var(--sans); font-size:13px; color:var(--muted)}

/* ---------- wordmark as a link ---------- */
a.wordmark{color:var(--ink); transition:color .12s ease}
a.wordmark:hover{color:var(--navy)}

/* ---------- index page head ---------- */
.phead{padding-top:72px; padding-bottom:54px}
.phead h1{font-size:var(--h1); line-height:var(--h1lh); margin-bottom:28px}
.phead .lede{font-size:var(--lead); line-height:1.55; color:var(--ink-soft); max-width:700px; text-wrap:pretty}

/* ---------- listing ---------- */
.listing{padding-bottom:var(--sect)}
.listing-label{margin-bottom:26px}

.card{border-top:2px solid var(--navy); padding-top:30px}
.card + .card{margin-top:56px}
.card-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:64px; align-items:start}
.card-main{display:flex; flex-direction:column; gap:16px; max-width:var(--measure)}
.card-eyebrow{margin-bottom:2px}
.card h2{font-size:30px; line-height:1.24; letter-spacing:-0.014em}
.card h2 a{color:var(--ink); transition:color .12s ease}
.card h2 a:hover{color:var(--navy)}
.card-verdict{
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--navy); line-height:1.4;
  background:var(--band); border-left:3px solid var(--navy);
  padding:11px 16px; align-self:flex-start;
}
.card-meta{font-family:var(--sans); font-size:var(--small); color:var(--muted); line-height:1.6}
.card-go{
  font-family:var(--sans); font-size:15px; font-weight:600; color:var(--navy);
  display:inline-flex; align-items:center; gap:10px; min-height:44px; align-self:flex-start;
  margin-top:4px;
}
.card-shot{display:flex; flex-direction:column; gap:12px; align-self:start; margin:0}

/* ---------- tools: deliberately a different object from a research card ---------- */
.card.tool{border-top:1px solid var(--rule); background:var(--band); padding:28px 30px 30px}
.card.tool h2{font-size:25px}
.card.tool .card-grid{grid-template-columns:minmax(0,1fr); gap:0}
.tool-kind{
  font-family:var(--sans); font-size:var(--label); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); line-height:1.6;
}
.tool-scope{font-size:16.5px; line-height:1.66; color:var(--ink-soft); text-wrap:pretty}

/* ---------- scope / prose page ---------- */
.scope{padding-bottom:var(--sect); display:grid; grid-template-columns:minmax(0,var(--measure))}
.scope p + p{margin-top:20px}
.boundary{
  border-left:3px solid var(--navy); background:var(--band);
  padding:20px 24px 21px; margin-top:34px; max-width:var(--measure);
}
.boundary p{font-size:16.5px; line-height:1.62; color:var(--ink)}
.mv-open{margin-top:34px}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:72px; align-items:start; padding-bottom:var(--sect)}
.about-body p + p{margin-top:20px}
.about-side{display:flex; flex-direction:column; gap:10px; padding-top:4px}
.about-side .label-cap{margin-bottom:2px}
.about-side a.mail{
  font-family:var(--sans); font-size:15px; color:var(--navy);
  align-self:flex-start;
  min-height:44px; display:inline-flex; align-items:center;
}
.about-side .go{
  font-family:var(--sans); font-size:15px; color:var(--navy);
  display:inline-flex; align-items:center; gap:9px; min-height:44px; align-self:flex-start;
}

/* ---------- root fallback ---------- */
.fallback{justify-content:center}
.fallback-inner{padding-top:80px; padding-bottom:80px; max-width:var(--measure)}
.fallback h1{font-size:var(--h2); line-height:1.25; margin-bottom:16px}
.fallback p{color:var(--ink-soft); margin-bottom:24px}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  :root{--pad:40px; --sect:84px; --h1:50px; --h2:28px; --stat:46px}
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:52px}
  .preview{max-width:340px}
  .closing{grid-template-columns:minmax(0,1fr); gap:44px}
  .contrib{gap:36px}
  .card-grid{grid-template-columns:minmax(0,1fr); gap:40px}
  .card-shot{max-width:280px}
  .about{grid-template-columns:minmax(0,1fr); gap:44px}
}
@media (max-width:860px){
  :root{--h1:44px}
  .contrib{grid-template-columns:minmax(0,1fr); gap:0; border-bottom:1px solid var(--rule-soft)}
  .contrib-item{padding-top:20px; padding-bottom:26px}
  .changes{grid-template-columns:minmax(0,1fr); gap:0}
  .changes li:nth-child(-n+2){border-top:1px solid var(--rule-soft)}
  .changes li:first-child{border-top:1px solid var(--rule)}
}

/* ---------- mobile ---------- */
@media (max-width:680px){
  :root{
    --pad:22px; --sect:60px; --h1:34px; --h1lh:1.12; --h2:24px;
    --lead:19px; --body:16.5px; --stat:42px; --small:13px; --measure:100%;
  }
  .nav-inner{min-height:62px; gap:12px}
  .wordmark{font-size:17px}
  .nav-links{gap:0; margin-right:-10px}
  .nav-link{padding:12px 8px; font-size:13px}
  .hero{padding-top:44px}
  .hero-eyebrow{margin-bottom:20px; font-size:10.5px; letter-spacing:.13em}
  .hero-title{margin-bottom:32px; max-width:100%}
  .hero-main{gap:24px}
  .verdict{padding:18px 18px 17px}
  .verdict-label{font-size:14.5px; letter-spacing:.08em}
  .cta{width:100%; justify-content:center; padding:0 20px; text-align:center; font-size:15.5px}
  .cta-row{gap:12px}
  .cta-alt{width:100%; justify-content:center}
  .preview{display:none}
  .sect-head{padding-top:18px; margin-bottom:28px}
  .math{grid-template-columns:minmax(0,1fr); gap:0; padding:30px 0 32px}
  .math-cell{gap:8px; padding:14px 0}
  .math-arrow{transform:none; height:38px; padding:0}
  .math-arrow svg{transform:rotate(90deg)}
  .math-note{margin-top:24px}
  .contrib-item h3{font-size:20px}
  .contrib-item p, .changes p, .method p, .disclosure p{font-size:16px}
  .disclosure{padding:22px 20px 24px}
  .closing{gap:36px}
  .freeze{margin-top:36px}
  .foot-inner{flex-direction:column; align-items:flex-start; gap:6px}
  .foot-links{margin-left:-12px}
  .phead{padding-top:44px; padding-bottom:38px}
  .phead h1{margin-bottom:22px}
  .card{padding-top:24px}
  .card + .card{margin-top:40px}
  .card h2{font-size:24px}
  .card-verdict{font-size:12.5px; letter-spacing:.08em; padding:10px 13px}
  .card-shot{display:none}
  .card.tool{padding:22px 20px 24px}
  .card.tool h2{font-size:21px}
  .tool-scope, .scope p, .boundary p, .about-body p{font-size:16px}
  .boundary{padding:17px 18px 18px; margin-top:28px}
}