/* Mercy for Mark — one stylesheet for the whole site.
   Off-white, off-black, one accent. Everything on this site is either a
   document or a face; the design's job is to hold still around them. */

:root{
  --paper:#FBF9F5;
  --paper-2:#F4F0E8;
  --paper-3:#EEE8DC;
  --card:#FFFFFF;
  --ink:#16150F;
  --ink-2:#4A4740;
  --ink-3:#8A857A;
  --rule:#E2DCD0;
  --hair:rgba(22,21,15,.09);
  --accent:#A8431C;
  --accent-soft:#F6EAE3;
  --accent-lift:#D98A62;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1240px;
  --gut:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:720px}
.measure{max-width:66ch}
.twocol{columns:2;column-gap:52px;margin-top:6px}
.chapter .twocol{max-width:none;margin-bottom:1.15em}
.chapter .twocol p{max-width:none}
.twocol p{break-inside:avoid;max-width:none}
.twocol p:last-child{margin-bottom:0}
.splithead{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start}
@media(max-width:860px){.twocol{columns:1}.splithead{grid-template-columns:1fr;gap:24px}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,249,245,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:66px}
.wordmark{font-family:var(--serif);font-size:23px;font-weight:500;
  letter-spacing:-.012em;line-height:1;white-space:nowrap}
.wordmark s{text-decoration:none;color:var(--accent)}
.navlinks{display:flex;align-items:center;gap:28px;font-size:15px;
  font-weight:500;color:var(--ink-2)}
.nav .wrap{padding-right:0}
.navlinks a{padding:6px 0;border-bottom:2px solid transparent;
  transition:color .14s ease,border-color .14s ease}
.navlinks a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.navlinks a.on{color:var(--ink);border-bottom-color:var(--accent)}
.nav .wrap>.navlinks{align-self:stretch}
.navlinks a.cta{background:var(--accent);color:#fff !important;border-radius:0;
  font-weight:600;font-size:14.5px;border-bottom:0 !important;align-self:stretch;
  display:flex;align-items:center;padding:0 30px;margin-left:14px}
.cta:hover{background:#8E3816;border-bottom-color:transparent !important}
.navtoggle{display:none;background:none;border:1px solid var(--rule);
  border-radius:2px;padding:7px 11px;font:inherit;font-size:14px;cursor:pointer}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;
  line-height:1.12;margin:0 0 .4em}
h1{font-size:clamp(33px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,37px)}
h3{font-size:clamp(20px,2.2vw,25px);font-weight:500;letter-spacing:-.012em}
h4{font-size:19px;font-weight:600;font-family:var(--sans);letter-spacing:0}
.eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 14px}
.eyebrow.mute{color:var(--ink-3)}
.lede{font-size:19.5px;line-height:1.55;color:var(--ink-2)}
.serif-lede{font-family:var(--serif);font-size:clamp(20px,2.3vw,25px);
  line-height:1.45;color:var(--ink)}
em.hl{font-style:normal;color:var(--accent)}
.small{font-size:13.5px;color:var(--ink-3);line-height:1.55}

section{padding:74px 0}
section.tight{padding:52px 0}
.band{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.dark{background:var(--ink);color:#EFEBE2}
.dark h2,.dark h3{color:#fff}
.dark .lede,.dark p{color:#C6C0B3}
.dark .eyebrow{color:var(--accent-lift)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:14px 24px;
  border-radius:2px;font-weight:600;font-size:15.5px;border:1px solid var(--accent)}
.btn:hover{background:#8E3816;border-color:#8E3816}
.btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.dark .btn.ghost:hover{background:#fff;color:var(--ink)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn.arrow{display:inline-flex;align-items:center;gap:10px}
.btn.arrow span{transition:transform .18s ease;font-size:17px;line-height:1}
.btn.arrow:hover span{transform:translateY(3px)}
.textlink{color:var(--accent);font-weight:600;border-bottom:1px solid currentColor;
  padding-bottom:1px}

/* ---------------------------------------------------------------- hero */
.hero{padding:46px 0 54px}
.hero.full{min-height:calc(100svh - 66px);display:flex;align-items:center;
  padding:40px 0}
.hero.full .wrap{width:100%}
.hero.full img{max-height:min(56vh,520px)}
.hero.full.align-end .natural img{max-height:min(58vh,540px);object-fit:contain}
.hero.align-end .wrap{align-items:end}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero .lede{max-width:44ch;margin-bottom:0}
.hero figure{margin:0}
.hero img{width:100%;border:1px solid var(--rule);
  max-height:min(52vh,510px);object-fit:cover;object-position:center 14%}
.hero .natural{align-self:start}
.hero.align-end .wrap>*{align-self:end}
.hero .natural img{width:100%;height:auto;max-height:none;object-fit:fill;
  border:1px solid var(--rule)}

/* -------------------------------------------------- risk-factor matrix */
.legend{display:flex;flex-wrap:wrap;gap:20px;margin:26px 0 16px;
  font-size:12.5px;color:var(--ink-2)}
.legend i{font-style:normal;display:inline-flex;align-items:center;gap:8px}
.key{width:22px;height:12px;border-radius:2px;flex:none}
.key.t2{background:var(--ink)}
.key.t1{background:var(--accent-soft);border:1px dashed var(--accent)}
.key.t0{border:1px dotted #C9C2B4}
.matrix{display:grid;grid-template-columns:104px repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden}
.colhead{background:var(--paper-2);padding:11px 13px;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink-2)}
.rowhead{background:var(--paper-2);padding:15px 13px}
.rowhead b{font-family:var(--serif);font-size:16px;font-weight:500}
.cell{background:var(--card);padding:11px;display:flex;flex-direction:column;
  align-items:flex-start;gap:5px}
.f{font:inherit;font-size:12.5px;line-height:1.34;text-align:left;padding:5px 9px;
  border-radius:2px;display:block;width:100%;margin:0}
button.f{cursor:pointer;border:1px solid transparent;transition:transform .12s ease}
button.f:hover{transform:translateX(2px)}
button.f:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.f.t2{background:var(--ink);color:#F6F3EC;font-weight:500;
  box-shadow:inset 3px 0 0 var(--accent)}
.f.t1{background:var(--accent-soft);color:#7C3315;border:1px dashed #D3A48E}
.f.t0{border:1px dotted #C9C2B4;color:#A9A296;background:none}
.receipt{margin:24px 0 0;border:1px solid var(--rule);
  border-left:3px solid var(--accent);background:var(--card);border-radius:3px;
  padding:18px 22px;min-height:104px}
.receipt .empty{color:var(--ink-3);font-size:14px;margin:0}
.receipt .where{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 3px}
.receipt h4{margin:0 0 9px;font-family:var(--serif);font-size:20px;font-weight:500}
.receipt blockquote{margin:0;border:0;padding:0;font-family:var(--serif);
  font-size:16.5px;line-height:1.55}
.receipt .tierline{margin:11px 0 0;font-size:12.5px;color:var(--ink-3)}
.receipt .tierline s{text-decoration:none;color:var(--accent);font-weight:600}
.count{margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.count b{font-family:var(--serif);font-size:52px;line-height:.9;font-weight:400;
  color:var(--accent);display:block;white-space:nowrap}
.count b s{text-decoration:none;color:var(--ink-3);font-size:26px}
.count p{margin:0;color:var(--ink-2);max-width:60ch}
.count p em{font-style:normal;color:var(--ink);font-weight:600}
.drow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;
  overflow:hidden}
button.d{font:inherit;text-align:left;background:var(--card);border:0;
  cursor:pointer;padding:18px 16px 20px;display:block}
button.d:hover{background:var(--paper)}
.d i{font-style:normal;display:block;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:9px}
.d b{display:block;font-family:var(--serif);font-size:23px;font-weight:500;
  line-height:1.1;margin-bottom:8px}
.d span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}
@media(max-width:900px){
  .matrix{grid-template-columns:1fr 1fr}
  .rowhead{grid-column:1/-1;background:var(--ink);color:#F6F3EC}
  .rowhead b{color:#fff}
  .colhead{display:none}
  .drow{grid-template-columns:1fr 1fr}
  .count{grid-template-columns:1fr;gap:12px}
}
@media(max-width:560px){.matrix,.drow{grid-template-columns:1fr}}
.hero figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-3)}

/* ---------------------------------------------------------------- stats */
.statband{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:44px 0 48px}
.statband .head{display:flex;justify-content:space-between;align-items:baseline;
  gap:26px;flex-wrap:wrap;margin-bottom:26px}
.statband .head h3{margin:0;font-size:24px}
.statband .head p{margin:0;font-size:13.5px;color:var(--ink-3);max-width:40ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.stat{background:var(--paper);padding:0 24px 30px;position:relative;
  display:flex;flex-direction:column;min-height:194px}
.stat::before{content:'';display:block;height:4px;background:var(--accent);
  width:46px;margin:0 0 24px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(40px,4.6vw,58px);
  font-weight:400;line-height:.95;color:var(--ink);margin-bottom:14px;
  letter-spacing:-.02em}
.stat span{font-size:14.5px;color:var(--ink-2);line-height:1.45;display:block;
  margin-top:auto}

/* preview list — a small table of contents for a section */
.toc{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a,.toc.plain>li>span{display:flex;gap:16px;align-items:baseline;padding:12px 2px;
  transition:color .14s ease,padding .14s ease}
.toc a:hover{color:var(--accent);padding-left:6px}
.toc.plain>li>span{cursor:default}
.toc i{font-style:normal;font-family:var(--serif);font-size:13px;color:var(--ink-3);
  min-width:26px}
.toc b{font-weight:500;font-size:16px}
.toc span{margin-left:auto;font-size:13.5px;color:var(--ink-3)}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px) and (min-width:901px){.cards.four{grid-template-columns:repeat(2,1fr)}}

.card{background:var(--paper);padding:32px 28px 30px;display:flex;
  flex-direction:column}
.card .n{font-family:var(--serif);font-size:13px;color:var(--ink-3);
  display:block;margin-bottom:16px;letter-spacing:.05em}
.card h3{margin-bottom:10px}
.card p{font-size:15px;color:var(--ink-2);margin-bottom:16px}
.card .textlink{margin-top:auto;align-self:flex-start;font-size:14px}

/* ---------------------------------------------------------------- quote */
.pull{font-family:var(--serif);font-size:clamp(21px,2.6vw,29px);line-height:1.42;
  margin:0 0 16px;max-width:22ch}
.pull-attr{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}
blockquote{margin:0 0 22px;padding-left:22px;border-left:3px solid var(--accent);
  font-family:var(--serif);font-size:19px;line-height:1.5}

/* ---------------------------------------------------------------- faces */
.faces{display:flex;gap:-0}
.faces img{width:74px;height:74px;object-fit:cover;object-position:center 26%;
  border-radius:50%;border:3px solid var(--paper);margin-right:-16px;
  background:var(--paper-2)}
.dark .faces img{border-color:var(--ink)}

/* ---------------------------------------------------------------- media */
.media{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.media.flip>*:first-child{order:2}
figure{margin:0}
figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.doc{border:1px solid var(--rule);background:#fff;padding:9px}
.docgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* video / audio placeholders */
.placeholder{border:1px dashed #C6BFB0;background:var(--paper-2);
  border-radius:3px;padding:38px 30px;text-align:center;color:var(--ink-3)}
.placeholder b{display:block;color:var(--ink-2);font-size:15px;margin-bottom:6px;
  font-weight:600}
.placeholder span{font-size:13.5px}
.player{display:flex;align-items:center;gap:18px;background:var(--card);
  border:1px solid var(--rule);border-radius:3px;padding:18px 20px}
.player .play{width:48px;height:48px;border-radius:50%;background:var(--accent);
  color:#fff;display:flex;align-items:center;justify-content:center;flex:none;
  font-size:16px}
.player div b{display:block;font-size:15px;margin-bottom:2px}
.player div span{font-size:13px;color:var(--ink-3)}

/* ------------------------------------------------- chapters + bottom rail */
.chapnav{position:fixed;bottom:0;left:0;right:0;z-index:45;
  background:rgba(251,249,245,.97);backdrop-filter:saturate(180%) blur(10px);
  color:var(--ink-2);font-size:13.5px;border-top:1px solid var(--rule);
  box-shadow:0 -6px 26px rgba(22,21,15,.07);
  transform:translateY(115%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.chapnav.show{transform:none}
.chapnav .wrap{display:flex;gap:18px;align-items:center;
  padding-top:11px;padding-bottom:11px}
.chapnav .links{flex:1;display:flex;gap:28px;justify-content:center;
  overflow-x:auto;scrollbar-width:none}
.chapnav .links::-webkit-scrollbar{display:none}
.chapnav a{white-space:nowrap;color:var(--ink-3);font-weight:500;
  border-bottom:2px solid transparent;padding:3px 0;transition:color .14s ease}
.chapnav a:hover{color:var(--accent)}
.chapnav a.on{color:var(--ink);border-bottom-color:var(--accent)}
.railbtn{font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  background:none;border:1px solid var(--rule);border-radius:2px;color:var(--ink-2);
  padding:8px 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .14s ease,color .14s ease}
.railbtn:hover{border-color:var(--accent);color:var(--accent)}
.railbtn[disabled]{opacity:.35;cursor:default}
.railbtn:hover[disabled]{border-color:var(--rule);color:var(--ink-2)}
@media(max-width:760px){.chapnav .links{display:none}
  .chapnav .wrap{justify-content:space-between}}
.has-rail .foot{padding-bottom:106px}
.chapter{padding:70px 0;border-top:1px solid var(--rule)}
.longform .chapter:first-of-type{padding-top:44px;border-top:0}
.chapter:first-of-type{border-top:0}
.chapter .num{font-family:var(--sans);font-size:12px;color:var(--accent);
  letter-spacing:.14em;margin:0 0 12px;font-weight:700}
.chapter h2{margin-bottom:18px}
.chapter p{font-size:17.5px;line-height:1.68;color:var(--ink-2);max-width:none}
/* The narrative reads in the serif; the interface stays in the sans. */
.longform .chapter p,.longform .intro p{font-family:var(--serif);
  font-size:19.5px;line-height:1.6;color:var(--ink)}
.longform .chapter p strong{font-weight:600}
.longform figcaption,.longform p.small,.longform .ph b,.longform .ph span,
.longform p.num,.longform .inset p.k,.longform .btn{font-family:var(--sans)}
.longform p.num{color:var(--accent)}
.longform p.small{font-size:13.5px;color:var(--ink-3);line-height:1.55}
.longform figcaption,.longform .small,.longform .ph b,.longform .ph span,
.longform .num,.longform .inset .k,.longform .btn{font-family:var(--sans)}
.chapter h2,.chapter h3,.chapter ul,.chapter .serif-lede{max-width:660px}

/* ---- editorial: text runs down the left, one picture holds the right ----
   The right column is sticky. As the reader moves through the prose, the
   photograph beside them changes to the one that belongs to what they are
   reading. Below 1000px the pictures fall back into the flow. */
.longform{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.inset{clear:both}
.scrolly{display:grid;grid-template-columns:620px minmax(0,1fr);gap:64px;
  align-items:start}
.scrolly .track>*:first-child{margin-top:0}
/* the column stretches to the text; the picture inside it sticks */
.stage{align-self:stretch;position:relative}
.stage-in{position:sticky;top:104px;height:min(64vh,520px)}
.stage figure{position:absolute;top:0;left:0;right:0;margin:0;display:flex;
  flex-direction:column;opacity:0;transition:opacity .45s ease;pointer-events:none}
.stage figure.on{opacity:1;pointer-events:auto}
.stage .imgbox{max-height:calc(min(64vh,520px) - 40px);display:flex;
  align-items:flex-start}
.stage .imgbox img{max-height:100%;max-width:100%;width:auto;height:auto;
  object-fit:contain;border:1px solid var(--rule);background:#fff}
.stage .imgbox button.zoom{width:auto;height:100%;display:flex;align-items:flex-start}
.stage .ph{height:100%;width:auto;aspect-ratio:3/4;max-width:100%}
.stage figcaption{margin-top:12px;flex:none;font-family:var(--sans)}
figure.wide{margin:38px 0}
figure.pair{margin:38px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
figure.pair img{width:100%}
.splitmedia{display:grid;grid-template-columns:620px minmax(0,1fr);gap:64px;
  align-items:start;margin:6px 0 4px}
.splitmedia figure{margin:0}
.splitmedia figure.fill{align-self:stretch;display:flex;flex-direction:column}
.splitmedia figure.fill>*:not(figcaption){width:100%;flex:1;min-height:0}
.doccard{border:1px solid var(--rule);background:var(--card);border-radius:3px;
  padding:18px;display:flex;gap:16px;align-items:flex-start}
.doccard img{width:104px;flex:none;border:1px solid var(--rule)}
.doccard div{min-width:0}
.doccard b{display:block;font-family:var(--serif);font-size:18px;font-weight:500;
  margin-bottom:5px;line-height:1.25}
.doccard span{display:block;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-3);margin-bottom:12px}
@media(max-width:1000px){
  .scrolly,.splitmedia{grid-template-columns:1fr;gap:24px}
  .stage{position:static}
  .stage-in{position:static;height:auto;display:flex;
    flex-direction:column;gap:26px}
  .stage figure{position:static;opacity:1;pointer-events:auto}
  .stage .imgbox,.stage .imgbox button.zoom{height:auto}
  .stage .ph{height:auto;width:100%}
  figure.pair{grid-template-columns:1fr}
}
.chapter::after{content:'';display:block;clear:both}
.ph{border:1px dashed #C6BFB0;background:var(--paper-2);border-radius:2px;
  aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:22px;gap:6px}
.ph b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-weight:700}
.ph span{font-size:13px;color:var(--ink-3);line-height:1.45;max-width:24ch}
figure.wide .ph{aspect-ratio:16/7}
figure.pair .ph{aspect-ratio:3/4}

/* ---- a full-width inset, the way a magazine breaks a narrative ---- */
.inset{clear:both;margin:44px 0;padding:38px 40px 40px;background:var(--paper-2);
  border-top:3px solid var(--accent);border-bottom:1px solid var(--rule)}
.inset .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin:0 0 10px}
.inset h3{margin:0 0 8px}
.inset p{max-width:74ch;font-size:16px}

/* ---- display pull quote ---- */
.pullq{clear:both;margin:40px 0;padding:0 0 0 26px;border-left:3px solid var(--accent)}
.pullq p{font-family:var(--serif);font-size:clamp(21px,2.5vw,27px);line-height:1.36;
  color:var(--ink);margin:0;max-width:none;letter-spacing:-.012em}

/* ---- intro block, set apart from the narrative that follows ---- */
.intro{clear:both;padding-bottom:32px;margin-bottom:38px;
  border-bottom:1px solid var(--rule)}
.intro p:last-child{margin-bottom:0}
.longform .intro.sans p{font-family:var(--sans);font-size:16px;line-height:1.6;
  color:var(--ink-2);max-width:88ch}

/* ---- content warning ---- */
.cwband{background:var(--paper-2);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:36px 0}
.cwband .inner{max-width:760px;margin:0 auto;text-align:center;position:relative}
.cwband .inner::before{content:'';display:block;width:38px;height:2px;
  background:var(--accent);margin:0 auto 20px}
.cwband p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,21px);
  line-height:1.5;color:var(--ink);margin:0}
@media(max-width:820px){ figure.pair{grid-template-columns:1fr} }
.chapter p strong{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:22px 40px 22px 0;font-family:var(--serif);
  font-size:21px;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:20px;
  color:var(--accent);font-size:24px;font-family:var(--sans);font-weight:300}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 40px 26px 0;color:var(--ink-2);font-size:16.5px}
.faq .a p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--ink);color:#B4AEA1;padding:56px 0 40px;font-size:14.5px}
.foot .wrap{display:grid;grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr);
  gap:34px}   /* minmax(0,..): a long address must not set the column floor */
.foot .wordmark{color:#fff;margin-bottom:12px;display:inline-block}
.foot h4{color:#fff;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:14px;font-weight:700}
.foot a{color:#D6D0C4}
.foot a:hover{color:#fff}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot .base{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.13);
  font-size:12.5px;color:#8A857A;display:block}

/* ---------------------------------------------------------------- responsive */
@media(max-width:900px){
  .hero .wrap,.media{grid-template-columns:1fr;gap:34px}
  .media.flip>*:first-child{order:0}
  .cards,.cards.two,.cards.four{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot .base{grid-column:1/-1}
}
@media(max-width:640px){
  /* one column, so nothing is stranded beside a short list (Camryn) */
  .foot .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot .base{margin-top:26px}
}
@media(max-width:900px){
  .navlinks{position:fixed;inset:66px 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 26px 22px;
    border-bottom:1px solid var(--rule);display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 0;border-bottom:1px solid var(--rule)}
  .navlinks a.cta{margin-top:14px;text-align:center;border-bottom:0}
  .navtoggle{display:block}
  .nav .wrap{padding-right:var(--gut)}
  section{padding:52px 0}
  .docgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important;
  animation:none !important;scroll-behavior:auto !important}}
html{scroll-behavior:smooth;scroll-padding-top:120px}

/* segmented view control, shared by the archive and the postcard wall */
.views{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.views button{font:inherit;font-size:14px;font-weight:500;padding:10px 16px;
  background:var(--card);border:0;border-right:1px solid var(--rule);cursor:pointer;
  color:var(--ink-2)}
.views button:last-child{border-right:0}
.views button:hover{color:var(--ink)}
.views button.on{background:var(--ink);color:#fff}

/* ---- archival evidence, clickable ---- */
button.zoom{display:block;padding:0;border:0;background:none;cursor:zoom-in;
  width:100%;font:inherit}
button.zoom img{width:100%;transition:transform .18s ease,box-shadow .18s ease}
button.zoom:hover img{transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(22,21,15,.14)}
button.zoom:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
dialog.lightbox{background:transparent;border:0;padding:0;
  max-width:min(1180px,calc(100vw - 40px));width:auto}
dialog.lightbox::backdrop{background:rgba(22,21,15,.82)}
dialog.lightbox img{max-width:100%;max-height:82vh;width:auto;background:#fff;
  border-radius:3px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
dialog.lightbox .lb-bar{display:flex;justify-content:space-between;
  align-items:center;gap:16px;margin-top:16px;color:#EFEBE2;font-size:14px}
dialog.lightbox .lb-bar button{font:inherit;font-size:14.5px;font-weight:600;
  padding:9px 17px;border-radius:2px;cursor:pointer;background:none;
  border:1px solid rgba(255,255,255,.45);color:#fff}

/* the record's pages pack rather than sit in a ragged grid */
.inset .docgrid{display:block;columns:2;column-gap:20px}
.inset .docgrid>*{break-inside:avoid;margin:0 0 20px;display:block}
@media(max-width:760px){.inset .docgrid{columns:1}}


/* ---------------------------------------------------- section rhythm ---- */
.chapter{position:relative}
.chapter.tone{background:var(--paper-2);
  box-shadow:0 0 0 100vmax var(--paper-2);clip-path:inset(0 -100vmax)}
.chapter.tone .inset{background:var(--paper-3)}

/* a quiet invitation to keep going, between blocks */
.contread{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:6px 0 30px;background:none;border:0;font:inherit;cursor:pointer;
  color:var(--ink-3);width:100%}
.contread i{display:block;width:1px;height:34px;background:var(--rule)}
.contread span{font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;transition:color .16s ease}
.contread em{font-style:normal;font-size:15px;line-height:1;
  transition:transform .18s ease}
.contread:hover span{color:var(--accent)}
.contread:hover em{transform:translateY(3px)}

/* the closing line of a section */
.sectend{text-align:center;max-width:760px;margin:44px auto 0}
.sectend::before{content:'';display:block;width:44px;height:2px;
  background:var(--accent);margin:0 auto 26px}
.longform .sectend p{font-family:var(--serif);font-size:clamp(20px,2.05vw,24px);
  line-height:1.5;color:var(--ink);margin:0}

/* ------------------------------------------- the risk-factor instrument ---- */
.rftool{margin:26px 0 0;border-top:1px solid var(--rule)}
.rf-legend{display:flex;flex-wrap:wrap;gap:22px;padding:16px 0;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.rf-legend i{font-style:normal;display:inline-flex;align-items:center;gap:8px}
.rf-key{width:20px;height:12px;border-radius:2px;flex:none}
.rf-key.on{background:var(--accent-soft);
  box-shadow:inset 2px 0 0 var(--accent),inset 0 0 0 1px rgba(168,67,28,.22)}
.rf-key.off{border:1px dotted #C9C2B4}
.acc{border-top:1px solid var(--rule)}
.acc:last-of-type{border-bottom:1px solid var(--rule)}
.acc summary{cursor:pointer;list-style:none;padding:18px 2px;
  display:grid;grid-template-columns:var(--rfl) 1fr auto;
  align-items:baseline;gap:20px;font-family:var(--serif);font-size:22px}
.acc summary b{font-weight:400}
.acc summary::-webkit-details-marker{display:none}
.acc summary em{font-style:normal;font-family:var(--sans);font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  justify-self:end}
.acc summary .caret{margin-left:auto;font-family:var(--sans);font-size:22px;
  font-weight:300;color:var(--accent);line-height:1}
.acc[open] summary .caret{transform:rotate(45deg)}
.acc summary:hover{color:var(--accent)}
.acc-body{display:grid;grid-template-columns:1fr;gap:26px;padding:0 0 28px;
  align-items:start}
.acc-body.open{grid-template-columns:minmax(0,1fr) 330px}
.rf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rf-col h5{margin:0 0 10px;font-family:var(--sans);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.rf-col{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.rfc,.longform .chapter p.rfc{font-family:var(--sans);font-size:12.5px;
  line-height:1.34;text-align:left;padding:6px 10px;border-radius:2px;margin:0;
  display:block;width:100%;letter-spacing:0}
button.rfc{cursor:pointer;border:0;background:var(--accent-soft);color:#7C3315;
  box-shadow:inset 2px 0 0 var(--accent);transition:transform .12s ease}
button.rfc:hover{transform:translateX(2px)}
button.rfc[aria-pressed="true"]{background:var(--accent);color:#fff;
  box-shadow:inset 2px 0 0 #6E2A0F}
button.rfc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
p.rfc.off,.longform .chapter p.rfc.off{border:1px dotted #C9C2B4;
  color:#A9A296;background:none}
.rf-side{position:sticky;top:100px;border-left:3px solid var(--accent);
  background:var(--card);padding:18px 20px;border-radius:0 3px 3px 0}
.rf-side .where{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 4px}
.rf-side h4{margin:0 0 10px;font-family:var(--serif);font-size:19px;font-weight:500}
.rf-side blockquote{margin:0;font-family:var(--serif);font-size:16px;line-height:1.5;
  border:0;padding:0}
.rf-side .tier{font-family:var(--sans);font-size:12px;color:var(--ink-3);
  margin:12px 0 0;line-height:1.5}
.rf-side .tier s{text-decoration:none;color:var(--accent);font-weight:600}
.rf-side .cls{font:inherit;font-family:var(--sans);font-size:12px;background:none;
  border:0;color:var(--ink-3);cursor:pointer;padding:0;margin-top:12px;
  text-decoration:underline}
.rf-count{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:baseline;
  margin:26px 0 0;padding-top:22px;border-top:1px solid var(--rule)}
.rf-count b{font-family:var(--serif);font-size:46px;line-height:.9;font-weight:400;
  color:var(--accent)}
@media(max-width:1000px){
  .acc-body.open{grid-template-columns:1fr}
  .rf-side{position:static}
  .rf-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){.rf-cols{grid-template-columns:1fr}}

/* diagnosis strip, with its finding docked directly beneath */
/* one column per finding: the clinic's round cut the fifth, and a fixed
   five-column grid left an empty cell hanging off the right-hand end */
.dstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px 3px 0 0;
  overflow:hidden}
button.dt{font:inherit;font-family:var(--sans);text-align:left;background:var(--card);
  border:0;cursor:pointer;padding:18px 16px 20px;transition:background .13s;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
button.dt:hover{background:var(--paper)}
button.dt[aria-pressed="true"]{background:var(--ink)}
button.dt[aria-pressed="true"] i{color:var(--accent-lift)}
button.dt[aria-pressed="true"] b,button.dt[aria-pressed="true"] span{color:#EFEBE2}
.dt i{font-style:normal;display:block;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:9px}
.dt b{display:block;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--ink);
  line-height:1.1;margin-bottom:8px}
.dt span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.dpanel{border:1px solid var(--rule);border-top:0;border-left:3px solid var(--accent);
  background:var(--card);padding:20px 22px;border-radius:0 0 3px 3px}
.dpanel .empty{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);margin:0}
.dpanel blockquote{margin:0;border:0;padding:0;font-family:var(--serif);
  font-size:16.5px;line-height:1.5}
.dpanel .where{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 4px}
@media(max-width:900px){.dstrip{grid-template-columns:1fr 1fr}}

/* the closing call, unnumbered and centred */
.actblock{text-align:center;padding:70px 0}
.actblock h2{max-width:20ch;margin-left:auto;margin-right:auto}
.longform .actblock p{max-width:62ch;margin-left:auto;margin-right:auto}
.actblock .btnrow{justify-content:center}


/* the article's serif body must not leak into the instrument's panels */
.longform .chapter .rf-side p.where,.longform .chapter .dpanel p.where{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 4px;
  line-height:1.4}
.longform .chapter .rf-side h4{font-family:var(--serif);font-size:19px;
  font-weight:500;margin:0 0 10px;line-height:1.2}
.longform .chapter .rf-side blockquote,.longform .chapter .dpanel blockquote{
  font-family:var(--serif);font-size:16px;line-height:1.5;margin:0;padding:0;border:0}
.longform .chapter .rf-side p.tier{font-family:var(--sans);font-size:12px;
  color:var(--ink-3);margin:12px 0 0;line-height:1.5}
.longform .chapter .rf-side p.tier s{text-decoration:none;color:var(--accent);
  font-weight:600}
.longform .chapter .dpanel p.empty{font-family:var(--sans);font-size:13.5px;
  color:var(--ink-3);margin:0;line-height:1.5}
.longform .chapter .rf-legend,.longform .chapter .acc summary,
.longform .chapter .rf-count p,.longform .chapter .doccard span{line-height:1.5}

/* ============================================================ scroll-pinned
   Mark's story, sections 02 to 04. A block holds the screen while the reader
   moves through it one step at a time, then releases and the page carries on.
   Three kinds: side by side, centred cards, and the accumulating collage.
   Below 1000px, and for anyone who asks for reduced motion, every block falls
   back to the stacked version that sits beside it in the markup. */
.pinned{position:relative}
.pin{position:sticky;top:67px}   /* the exact offset is set in script, so the
  block sits centred in the window without leaving a hole as it arrives */
.pin-in{width:100%}
.pin-head{display:flex;align-items:baseline;gap:16px;padding-bottom:20px;
  margin-bottom:26px;border-bottom:1px solid var(--rule)}
/* the chapter heading picks up again after the inset block. It used to be
   faded, which read as a different, greyer heading rather than the same
   one resumed. */
.pin-head.quiet{opacity:1}
.longform .pin-head p.num{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  font-weight:700;color:var(--accent);margin:0}
.pin-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.5vw,29px);
  letter-spacing:-.018em;margin:0;line-height:1.15;max-width:none}
.pin-grid{display:grid;grid-template-columns:1fr minmax(0,500px);gap:70px;
  align-items:stretch;height:min(58svh,460px)}
.pin-grid.wide{grid-template-columns:minmax(0,1fr) 700px;gap:44px;
  height:min(60svh,480px)}
.pin-text{position:relative;display:flex;align-items:center}
.longform .pin-text p,.longform .pin-text .tstep{position:absolute;margin:0;
  font-family:var(--serif);font-size:clamp(20px,2.05vw,24px);line-height:1.5;
  color:var(--ink);max-width:34em;opacity:0;transform:translateY(16px);
  pointer-events:none;
  transition:opacity .42s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.longform .pin-text p.on,.longform .pin-text .tstep.on{opacity:1;transform:none;
  pointer-events:auto}
.longform .pin-text .tstep p{position:static;opacity:1;transform:none;
  max-width:30em;font-size:clamp(19px,1.95vw,23px)}
.pinbtn{display:inline-block;margin-top:22px;background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:14.5px;font-weight:600;padding:12px 20px;
  border-radius:2px;text-decoration:none;line-height:1.3}
.pinbtn:hover{background:#8E3816}
.pin-text .btnrow{margin-top:22px}
.pin-media{position:relative;background:var(--paper-3);border:1px solid var(--rule)}
.chapter.tone .pin-media{background:var(--paper-3)}
.pin-media figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.035);
  pointer-events:none;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.pin-media figure.on{opacity:1;transform:none}
.pin-media .imgbox{position:absolute;inset:0;bottom:34px;display:flex;
  align-items:center;justify-content:center;padding:16px}
.pin-media img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;box-shadow:0 2px 16px rgba(22,21,15,.16)}
.pin-media figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--ink-3);
  padding:0 16px 12px;text-align:center}
.pin-foot{display:flex;align-items:center;gap:9px;margin-top:24px;
  position:relative;z-index:30}
.pin-foot span{height:3px;flex:1;max-width:70px;background:var(--rule);
  border-radius:2px;transition:background .35s ease}
.pin-foot span.on{background:var(--accent)}
.pin-foot em{font-style:normal;margin-left:auto;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;font-family:var(--sans)}

/* centred cards: one at a time, each replacing the last */
.pin-centre{position:relative;max-width:820px;margin:0 auto;min-height:30svh}
.ccard{position:absolute;left:0;right:0;top:50%;
  transform:translate(0,calc(-50% + 18px));text-align:center;opacity:0;
  pointer-events:none;
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.ccard.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.longform .ccard p{margin:0;font-family:var(--serif);font-size:clamp(21px,2.3vw,27px);
  line-height:1.48;max-width:none}
.longform .ccard.em p{font-style:italic}
.longform .ccard.title p{font-size:clamp(38px,6vw,74px);line-height:1.05;
  letter-spacing:-.02em;color:var(--accent)}
/* a hairline comes down into the card from what is above it */
.ccard i.drop{position:absolute;left:50%;bottom:100%;width:1px;background:var(--accent);
  transform:translateX(-50%) scaleY(0);transform-origin:top;
  transition:transform .95s cubic-bezier(.2,.7,.2,1) .08s}
.ccard.on i.drop{transform:translateX(-50%) scaleY(1)}
.ccard.tall i.drop{height:34vh;margin-bottom:30px}
.ccard.short i.drop{height:17vh;margin-bottom:34px}

/* the collage: photographs land on one another, and none of them leave */
.collage{position:relative}
.collage figure{position:absolute;margin:0;background:#fff;padding:9px 9px 8px;
  box-shadow:0 10px 30px rgba(22,21,15,.20),0 2px 6px rgba(22,21,15,.12);
  opacity:0;transform:rotate(var(--r)) translateY(20px) scale(.94);
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.collage figure.on{opacity:1;transform:rotate(var(--r)) translateY(0) scale(1)}
.collage img{display:block;width:100%;height:auto}
.collage figcaption{display:none}

/* the stacked fallback */
.pinflow{display:none;padding:8px 0 4px}
.pinflow .flow-step{display:grid;grid-template-columns:1fr 400px;gap:44px;
  align-items:center;padding:26px 0}
.pinflow img{width:100%;display:block}
.pinflow figure{margin:0}
.pinflow figure.loose{margin:24px 0;max-width:520px}
.longform .pinflow figcaption{font-size:12.5px;color:var(--ink-3);margin-top:9px}
.pinflow.centred{text-align:center}
/* on mobile the date carries the weight the pinned title card carries on
   desktop, so it is marked as a header rather than left as body text */
.longform .pinflow.centred p.dateline{font-style:italic;color:var(--accent);
  font-size:clamp(24px,5vw,32px);line-height:1.15;margin-bottom:26px}
.longform .pinflow .btnrow{margin-bottom:26px}
@media(max-width:1000px),(prefers-reduced-motion:reduce){
  .pinned{display:none}
  .pinflow{display:block}
  .pinflow .flow-step{grid-template-columns:1fr;gap:20px}
  .pinflow figure{max-width:460px;margin:0 auto}
  .longform .sectend p{font-size:19.5px;line-height:1.6}
}

.sectend .closefig{margin:30px auto 0;max-width:400px}
.sectend .closefig img{width:100%;border:1px solid var(--rule);background:#fff;
  box-shadow:0 2px 18px rgba(22,21,15,.12)}
.longform .sectend .closefig figcaption{font-family:var(--sans);font-size:12.5px;
  color:var(--ink-3);margin-top:11px}

/* ============================================== Why Clemency, second pass ==
   A centred opening, section labels beside the numbers, and the AAIDD
   framework set as a magazine insert rather than another run of the page. */
.hero.full.mid .wrap{display:block;max-width:900px;text-align:center}
.hero.full.mid h1{max-width:20ch;margin-left:auto;margin-right:auto}
.hero.full.mid .lede{max-width:56ch;margin:0 auto}
.hero.full.mid .btnrow{justify-content:center;margin-top:30px}

/* the short label that sits beside a section number */
.longform p.num span{font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  font-weight:700;text-transform:uppercase;color:var(--ink-3);margin-left:10px}

/* the standfirst above a section reads quieter than the section itself */
.longform .intro.sans p{font-size:14.5px;line-height:1.62;max-width:64ch}

/* a report shown at the height of the text beside it */
.splitmedia.tall{align-items:start}
.splitmedia.tall figure.fill{align-self:start}
.splitmedia .reportfig{margin:0;display:flex;flex-direction:column}
.splitmedia .reportfig a{display:block}
.splitmedia .reportfig img{display:block;width:auto;max-width:100%;
  max-height:min(62vh,520px);margin:0 auto;border:1px solid var(--rule);background:#fff}
.longform .splitmedia .reportfig figcaption{font-family:var(--sans);font-size:12.5px;
  line-height:1.5;color:var(--ink-3);margin:11px auto 0;max-width:46ch;
  text-align:center}

/* ---- the insert -------------------------------------------------------- */
/* full-bleed without clip-path, which would crop the source panels */
.insert{position:relative;isolation:isolate;margin:60px 0 8px;
  padding:38px 40px 34px;border-top:3px solid var(--accent);
  border-bottom:1px solid var(--rule)}
.insert::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--paper-2);z-index:-1}
.chapter.tone .insert::before{background:var(--paper-3)}
.insert-head{max-width:74ch;margin-bottom:30px}
.longform .insert-head p.k{font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 12px}
.insert-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.6vw,31px);
  line-height:1.2;letter-spacing:-.016em;margin:0 0 14px;max-width:26ch}
.longform .insert p.dek,.longform .chapter p.dek{font-family:var(--sans);
  font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
.longform p.dek b{color:var(--accent);font-weight:600}

/* the four kinds of cause, shown before anything is opened */
/* the framework reads as a table: life periods down the left, the four kinds of
   cause across the top, holding their columns whichever period you open */
.rf-table{--rfl:196px;margin-top:30px}
.rf-head{display:grid;grid-template-columns:var(--rfl) 1fr;gap:20px;align-items:end;
  padding-bottom:9px;border-bottom:1px solid var(--rule)}
.longform .rf-lab,.longform p.rf-lab{font-family:var(--sans);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  margin:0;display:block}
.rf-types{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rf-types .rf-lab{position:absolute;bottom:100%;left:0;margin-bottom:7px}
.rf-types h5{margin:0;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);font-weight:700}
.rf-table .acc-body{padding-left:calc(var(--rfl) + 20px)}
@media(max-width:900px){
  .rf-table{--rfl:0px}
  .rf-head{display:none}
  .rf-table .acc-body{padding-left:0}
  .acc summary{display:flex}
}
.insert .rf-legend{padding-top:0;margin-top:4px}
.rf-outside{margin-top:26px;padding:20px 22px;background:var(--card);
  border:1px solid var(--rule);border-radius:3px}
.rf-outside h4{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 4px}
.longform .rf-outside p{font-family:var(--sans);font-size:13.5px;line-height:1.55;
  color:var(--ink-2);margin:0 0 14px;max-width:70ch}
@media(max-width:900px){.rf-types{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rf-types{display:none}}
.longform p.k.eyebrow-k{font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 10px}

/* the film panel that holds still while the text moves through it */
.pin-media figure.still{position:absolute;inset:0;opacity:1;transform:none}
.pin-media .ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  border:1px dashed var(--rule);background:var(--paper)}
.pin-media .ph b{font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  color:var(--ink-2)}
.pin-media .ph span{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);
  max-width:34ch;margin-top:6px;line-height:1.5}

/* Dr. Boyd, across the foot of the record */
.longform p.boyd{font-family:var(--sans);font-size:13.5px;line-height:1.6;
  color:var(--ink-2);max-width:none;margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--rule)}

/* a section that ends on a pinned block does not need its full skirt */
.chapter.snug{padding-bottom:0}
.chapter.snug .contread{padding-top:0}

/* =========================================== Why Clemency, third pass ==== */
.hero.full.mid{min-height:min(76svh,760px);padding:40px 0 24px}
.longform .chapter:first-of-type{padding-top:54px}

/* a quiet cue on to the next thing */
.jump{display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--accent);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:3px}
.jump:hover{border-bottom-color:var(--accent)}
.jump span{font-size:15px;line-height:1;transition:transform .18s ease}
.jump:hover span{transform:translateY(3px)}

/* one colour, one state: the key matches the chips */
.rf-key.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(168,67,28,.25)}

/* an open period reads as one row with its factors */
.acc[open] summary em{visibility:hidden}
.acc[open] .acc-body{margin-top:-46px}
.acc-body{position:relative;display:block;padding-bottom:28px}
.acc-body.open{display:block}

/* the source opens beside the factor, and closes on its own */
.rf-side{position:absolute;z-index:30;width:330px;max-width:100%;
  background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--accent);
  box-shadow:0 14px 40px rgba(22,21,15,.20);padding:18px 20px;border-radius:0 3px 3px 0;
  top:0;left:0}
.rf-side .cls{position:absolute;top:8px;right:10px;margin:0;padding:2px 6px;
  font-family:var(--sans);font-size:19px;line-height:1;color:var(--ink-3);
  background:none;border:0;cursor:pointer;text-decoration:none}
.rf-side .cls:hover{color:var(--accent)}
.longform .chapter .rf-side h4{padding-right:26px}

/* outside the framework, in the same language as the table */
.rf-outside{position:relative;margin-top:30px;padding:22px 0 0;background:none;
  border:0;border-top:1px solid var(--rule);border-radius:0}
.rf-outside-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;align-items:start}
.longform .rf-outside p{font-family:var(--sans);font-size:13.5px;line-height:1.55;
  color:var(--ink-2);margin:0;max-width:52ch}
.rf-outside-chips{display:flex;flex-direction:column;gap:5px}
@media(max-width:900px){.rf-outside-body{grid-template-columns:1fr}}

/* a small drift of records, rather than a single sparse page */
.docstack{position:relative;margin:0;padding-bottom:34px;min-height:430px}
.docstack button.zoom{position:absolute;left:var(--x);top:var(--y);width:82%;
  padding:0;border:0;background:#fff;cursor:pointer;transform:rotate(var(--r));
  box-shadow:0 10px 28px rgba(22,21,15,.18),0 2px 6px rgba(22,21,15,.10);
  transition:transform .18s ease}
.docstack button.zoom:hover{transform:rotate(0deg) scale(1.02);z-index:20!important}
.docstack img{display:block;width:100%;border:1px solid var(--rule)}
.longform .docstack figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin:0}

/* the caret keeps its own gutter, so an open period can still be closed */
.rf-table{--rfr:36px}
.rf-head{padding-right:var(--rfr)}
.rf-table .acc-body{padding-right:var(--rfr)}
.acc[open] .acc-body{pointer-events:none}
.acc[open] .acc-body>*{pointer-events:auto}

/* the three reasons in the opening, each pointing at its section */
.hero.full.mid .lede a{color:inherit;border-bottom:1px solid var(--accent-lift);
  padding-bottom:1px;text-decoration:none}
.hero.full.mid .lede a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* something that rises to meet the words above it */
.reveal{opacity:0;transform:translateY(64px);
  transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* the section title rides inside the block, so it holds while the text moves */
.pin-head{margin-bottom:30px}
.pin-head h2{max-width:34ch}

/* the postcard page's closing ask */
.pc-ask{padding:64px 0 76px;border-top:1px solid var(--rule)}
.pc-ask .media{align-items:start;gap:56px}
.pc-ask h2{max-width:16ch}
.pc-ask>.wrap>.media>div>p{color:var(--ink-2);max-width:52ch}
.pc-ways{border-top:2px solid var(--accent);padding-top:18px}
.pc-ways .rf-lab{margin-bottom:10px}
.pc-ways ul{list-style:none;margin:0;padding:0}
.pc-ways li{border-bottom:1px solid var(--rule)}
.pc-ways a{display:block;padding:15px 0;text-decoration:none;color:inherit}
.pc-ways a:hover b{color:var(--accent)}
.pc-ways b{display:block;font-family:var(--serif);font-size:19px;font-weight:500;
  transition:color .14s ease}
.pc-ways span{display:block;font-family:var(--sans);font-size:13.5px;
  color:var(--ink-3);line-height:1.5;margin-top:3px}
.pc-ways .rf-lab{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 10px;
  display:block}

/* ---------------------------------------------- embedded recording + transcript */
.vidfig{margin:0}
.vidfig video{display:block;width:100%;aspect-ratio:16/9;background:#0E0D0A;
  border:1px solid var(--rule);border-radius:3px}
.vtx{margin-top:14px;border-top:1px solid var(--rule);padding-top:11px}
.vtx summary{cursor:pointer;list-style:none;position:relative;padding-right:26px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--accent)}
.vtx summary::-webkit-details-marker{display:none}
.vtx summary::after{content:'+';position:absolute;right:4px;top:-7px;font-size:20px;
  font-weight:300}
.vtx[open] summary::after{content:'\2212'}
.vtx .tx{margin-top:14px}
.vtx .tx p{font-family:var(--sans);font-size:14.5px;line-height:1.62;
  color:var(--ink-2);max-width:none;margin:0 0 .9em}
.vtx .tx p:last-child{margin-bottom:0}
.vtx .tx p b,.vtx .tx p strong{color:var(--ink);font-weight:600}
.vtx .tx p.sd{font-size:13.5px;font-style:italic;color:var(--ink-3)}

/* The homepage portrait is full-length. object-fit:cover with a height cap has
   to crop a tall picture somewhere, and it was cropping his shoes off; show the
   whole frame instead and let the border hug it. */
.hero.full figure.whole{width:max-content;max-width:100%;margin-inline:auto}
.hero.full figure.whole img{width:auto;max-width:100%;height:auto;
  max-height:min(74svh,700px);margin:0 auto;object-fit:fill}

/* --------------------------------------------- the officers' words, as archivals
   Real crops from the 300-dpi originals, so the variety of type is the variety of
   the letters. They settle into the space beside the standfirst on load. */
.officers-hero .wrap{grid-template-columns:1fr 1.06fr;gap:54px;align-items:start}
.wordfield{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;
  padding-top:6px}
.wordfield .w{display:inline-block;transform:rotate(var(--r))}
.wordfield img{display:block;width:auto;max-height:none;border:0;object-fit:fill;
  opacity:.9;animation:wordset .52s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i) * 42ms)}
@keyframes wordset{
  from{opacity:0;transform:translateY(9px) scale(.93)}
  to{opacity:.9;transform:none}
}
.wordfield-cap{flex-basis:100%;font-family:var(--sans);font-size:12px;
  color:var(--ink-3);margin:18px 0 0}
@media(max-width:900px){
  .officers-hero .wrap{grid-template-columns:1fr;gap:30px}
  .wordfield{gap:10px 18px}
  .wordfield img{max-height:26px;height:auto!important}
}
@media(prefers-reduced-motion:reduce){
  .wordfield img{animation:none;opacity:.9}
}

/* the scrapbook's caption, which changes as each photograph lands. It rides in
   the footer row, set like every other caption on the site, and reserves only
   the height it needs so the progress bars stay in view. */
.pin-foot{flex-wrap:wrap;margin-top:14px}
/* in the scrapbook the caption and the progress bars sit under the paragraph in
   the left column, clear of the photographs stacked on the right */
.pin-foot.footleft{max-width:calc(100% - 744px);margin-top:-48px}
@media(max-width:1240px){.pin-foot.footleft{max-width:calc(100% - 620px)}}
.pin-foot .colcap,.longform .chapter p.colcap{flex:0 0 100%;order:-1;
  font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink-3);
  margin:0 0 10px;min-height:1.45em;max-width:86ch}
@media(max-width:900px){.colcap{min-height:2.9em;margin-bottom:8px}}

/* the eleven-minute film, sitting in the pinned media column */
/* The film sits on the page with nothing around it: no panel, no frame, just
   the poster frame until someone presses play. .pin-media figure sets
   pointer-events:none so a photograph never takes a click, and these selectors
   have to outrank it to give the film its clicks back. */
.pin-media.bare{background:transparent;border:0}
.pin-media figure.filmfig{display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:transparent;pointer-events:auto}
.filmwrap{position:relative;width:100%;line-height:0}
.pin-media figure.filmfig video{width:100%;height:auto;max-height:100%;
  display:block;background:transparent;border:0;pointer-events:auto}

.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(22,21,15,.55);display:flex;align-items:center;
  justify-content:center;padding:0;
  box-shadow:0 6px 26px rgba(22,21,15,.35);
  transition:background .25s ease,transform .25s ease}
.playbtn svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.playbtn:hover,.playbtn:focus-visible{background:var(--accent);
  transform:translate(-50%,-50%) scale(1.06)}
.filmfig.playing .playbtn{display:none}
@media(max-width:900px){.playbtn{width:60px;height:60px}
  .playbtn svg{width:24px;height:24px}}
@media(max-width:900px){.cofilm-fig .playbtn{width:7.083%;height:auto}
  .cofilm-fig .playbtn svg{width:38%;height:38%}}

/* ---- Transformation, re-laid 18 Sept ----------------------------------- */
/* the citation carries the link to the report, so the caption is two lines */
.longform .splitmedia .reportfig figcaption a.textlink{display:inline-block;
  margin-top:7px}

/* a paragraph and the quotation that answers it, side by side */
.sidebyside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:58px;row-gap:0;align-items:start;margin:6px 0}
/* something upstream zeroes the bottom margin on paragraphs in this column,
   so the second paragraph asks for its own gap and reads as an ordinary
   paragraph break rather than a new section. */
.sidebyside > div > p + p{margin-top:1.15em}


/* a sub-heading inside a chapter, quieter than the chapter number */
.chapter p.sublabel{font-family:var(--sans);font-size:12px;color:var(--accent);
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:0 0 16px}

/* the line that introduces a centred quotation, set in the sans above it */
.longform .cwband p.cw-lead{font-family:var(--sans);font-style:normal;font-size:13.5px;
  line-height:1.6;color:var(--ink-3);max-width:62ch;margin:0 auto 22px}

/* a closing line, centred under everything. Named for its job rather than
   its alignment: mark.html already carries a .centred, on .pinflow */


@media(max-width:900px){
  .sidebyside{grid-template-columns:1fr;gap:30px}
}

/* the quotation reads first, the line that frames it underneath and quieter */
.longform .cwband p.cw-after{margin:20px auto 0}

/* the chaplain's words, given a card of their own for distinction */
.qcard{margin:0;background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:3px;padding:30px 32px 26px;
  position:relative}
.qcard::before{content:'\201C';position:absolute;top:8px;right:22px;
  font-family:var(--serif);font-size:72px;line-height:1;color:var(--accent);
  opacity:.16;pointer-events:none}
.qcard blockquote{margin:0;padding:0;border:0}
.longform .chapter .qcard p{font-size:18px;line-height:1.55;margin:0;
  position:relative}
.longform .chapter .qcard figcaption{margin-top:18px;font-family:var(--sans);
  font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600}

/* ------------------------------------------------ dialogs and focus ----- */
/* A modal dialog gives focus to something the moment it opens, and Safari
   paints its own blue ring around whatever that is. On a phone that is a blue
   box around a close button, which reads as a rendering fault rather than as
   a focus ring. Every dialog on the site now takes focus itself; the ring is
   kept for people navigating by keyboard, where it is the point. */
dialog:focus{outline:none}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
dialog.lightbox :focus-visible{outline-color:#fff}

/* the caption under a zoomed picture can run several lines on a phone; the
   button must not be squeezed to fit beside it */
dialog.lightbox .lb-bar button{flex:none}
@media(max-width:620px){
  dialog.lightbox .lb-bar{flex-direction:column;align-items:flex-start;gap:12px}
  dialog.lightbox .lb-bar button{align-self:stretch;text-align:center;padding:12px 17px}
}

/* ---- the stacked fallback's own chapter heading ------------------------ */
/* Below 1000px the pinned blocks are hidden and .pinflow is what a reader
   gets. The heading lives inside the pinned block, so the fallback carries a
   copy of it; this is only ever seen on a phone. */
.pinflow > .flow-head{margin:4px 0 24px}
@media(max-width:620px){
  .pinflow > .flow-head{gap:10px;padding-bottom:16px;margin-bottom:20px}
}

/* ---- the eleven-minute film, its own block above chapter 01 ------------- */
.filmband{padding:54px 0 10px}
/* the heading keeps the page’s own left edge, the same one the chapter
   headings below it start on; the film itself sits outside the wrap and
   runs the full width of the screen. */
.filmband-head{max-width:64ch;margin-bottom:26px}
.filmband-head h2{margin:2px 0 0}
figure.filmfig.big{margin:0;width:100%;background:var(--ink);line-height:0}
figure.filmfig.big video{width:100%;height:auto;display:block}
@media(max-width:900px){.filmband{padding:34px 0 4px}}

/* the disability records: report cards on one row, report excerpts on the next */
.inset .docgrid.rows{display:grid;columns:auto;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.inset .docgrid.rows>*{margin:0}
@media(max-width:760px){.inset .docgrid.rows{grid-template-columns:1fr}}

/* ---- the officers on camera, above the archive ------------------------- */
/* The officers’ film, full width. Its title is burned into the poster, so
   the only heading in the markup is a hidden one, for screen readers and
   for the document outline. */
.cofilm{padding:10px 0 4px}
.cofilm-fig{margin:0;width:100%}
.cofilm-fig video{width:100%;height:auto;display:block;background:var(--ink)}
/* The poster leaves a gap for this button beside its two lines of type.
   The numbers are that gap measured in the 1920x1080 poster and written as
   percentages, so the button tracks the type at every screen width. */
.cofilm-fig .playbtn{left:77.371%;top:46.296%;width:7.083%;height:auto;
  aspect-ratio:1/1;background:none;box-shadow:none;padding:0}
/* a solid disc with the triangle cut out of it, so the film shows through
   the play mark itself. Reads against a dark photograph and a light one. */
.cofilm-fig .playbtn svg{width:100%;height:100%;margin:0;fill:var(--paper);
  filter:drop-shadow(0 2px 15px rgba(22,21,15,.5));transition:fill .2s ease}
.cofilm-fig .playbtn:hover,.cofilm-fig .playbtn:focus-visible{background:none}
.cofilm-fig .playbtn:hover svg,.cofilm-fig .playbtn:focus-visible svg{fill:#fff}
.cofilm-fig.playing .playbtn{display:none}
@media(max-width:900px){.cofilm{padding:4px 0 0}}

/* iOS Safari turns anything that looks like a phone number into a blue link.
   The meta format-detection tag stops it; this catches anything already
   linkified, so a number never reads as something to tap. */
a[href^="tel:"]{color:inherit;text-decoration:none}

/* ------------------------------------------------- the email sign-up form
   A real form posting to a Google Form in a hidden iframe, so nobody has to
   compose an email or guess what to put in the subject line. Styled to sit
   inside a Take Action card without looking like a widget bolted on. */
.sub{margin-top:auto}
.sub-row{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.sub-in{flex:1 1 9ch;min-width:0;font:inherit;font-family:var(--sans);
  font-size:14.5px;padding:11px 12px;border:1px solid var(--rule);
  border-radius:2px;background:var(--card);color:var(--ink)}
.sub-in::placeholder{color:var(--ink-3)}
.sub-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sub-go{font:inherit;font-family:var(--sans);font-weight:600;font-size:14.5px;
  padding:11px 18px;border-radius:2px;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid var(--accent)}
.sub-go:hover{background:#8E3816;border-color:#8E3816}
.sub-go:disabled{opacity:.6;cursor:default}
.sub-msg{font-family:var(--sans);font-size:13px;line-height:1.45;
  color:var(--ink-3);margin:10px 0 0}
/* while there is nothing to say, the message must take up no room at all,
   so the field and button sit on the same baseline as the links in the
   cards beside them. */
.sub-msg:empty{display:none}
.sub-msg.is-ok{color:var(--accent);font-weight:600}
.sub-msg.is-err{color:var(--ink-2)}
.sub.is-done .sub-row{display:none}
/* the field no human sees, and no bot can resist */
.sub-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sub-sink{display:none}
/* visually hidden, still read aloud */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}