/* ============================================================
   WHITE PAPER — long-form reading layout.
   Loaded only by whitepaper.html, on top of styles.css.
   ============================================================ */
/* ONE measure, shared by the title and the body so their columns line up, and
   fluid so it adapts per screen: it fills a narrow viewport, then stops growing
   at 40rem — about 75 characters, the top of the comfortable reading range.
   Set in rem, not ch: `ch` resolves against the *using* element's font size, so
   it would come out different for the 64px title than for 17px body copy. */
.paper{--measure:clamp(20rem,92vw,40rem);
  max-width:1120px;margin-inline:auto;
  padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(70px,10vw,140px)}
.paper__head{max-width:min(100%,var(--measure));margin-inline:auto;
  margin-bottom:clamp(44px,6vw,72px)}
.paper__title{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.05em;line-height:1.08}
.paper__meta{margin-top:26px;font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* Centred content column. Everything — text and figures alike — sits in the
   middle track, so every block is the same width and shares the same edges. */
.paper__body{display:grid;grid-template-columns:
  [full-start] minmax(0,1fr)
  [content-start] min(100%,var(--measure)) [content-end]
  minmax(0,1fr) [full-end]}
.paper__body>*{grid-column:content}
.paper__body h2{font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.035em;line-height:1.12;
  margin:clamp(52px,6vw,84px) 0 22px;scroll-margin-top:100px}
.paper__body h2:first-child{margin-top:0}
.paper__body h3{font-size:clamp(1.2rem,1.7vw,1.45rem);font-weight:500;letter-spacing:-.02em;
  margin:clamp(36px,4vw,52px) 0 14px;scroll-margin-top:100px}
.paper__body p{color:var(--muted);font-size:1.06rem;line-height:1.72;margin-bottom:20px}
.paper__body p strong{color:var(--accent);font-weight:500}
.paper__body p em{color:var(--accent);font-style:normal;font-weight:500}
.paper__body a:not(.btn){color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* deck: the long-form subtitle under a short heading */
.paper__deck{color:var(--ink)!important;font-size:clamp(1.1rem,1.5vw,1.28rem)!important;
  font-weight:400;line-height:1.5!important;margin-bottom:28px!important}

/* a claim worth pulling out of the flow */
.paper__lead{padding-left:28px;border-left:2px solid var(--accent);
  color:var(--ink)!important;font-size:clamp(1.1rem,1.6vw,1.32rem)!important;
  line-height:1.5!important;margin:clamp(32px,4vw,44px) 0!important}

/* figures break the measure — they carry detail that needs the width */
.paper__fig{margin:clamp(40px,5vw,64px) 0}
.paper__fig img{width:100%;height:auto;display:block;border-radius:10px}
.paper__fig figcaption{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font-size:.9rem;line-height:1.55;color:var(--muted-2)}
.paper__fig figcaption b{color:var(--accent);font-weight:600}

@media (max-width:860px){
  .paper__fig{margin-left:0;margin-right:0}
}

/* ============================================================
   BLOG INDEX
   Same measure and centring as the paper, so the two pages line up.
   ============================================================ */
.blog{--measure:clamp(20rem,92vw,40rem);
  max-width:1120px;margin-inline:auto;
  padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(70px,10vw,140px)}
.blog__head{max-width:min(100%,var(--measure));margin-inline:auto;
  margin-bottom:clamp(38px,5vw,60px)}
.blog__meta{font-size:.82rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px}
.blog__title{font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.05em;line-height:1.08}
.blog__lead{margin-top:22px;color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6}

.blog__list{list-style:none;max-width:min(100%,var(--measure));margin-inline:auto}
.post{padding:clamp(26px,3vw,34px) 0;border-top:1px solid var(--line)}
.post:last-child{border-bottom:1px solid var(--line)}
.post__meta{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:14px}
.post__title{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.035em;line-height:1.18;
  margin-bottom:14px}
.post__title a{transition:opacity .2s}
.post__title a:hover{opacity:.72}
.post__excerpt{color:var(--muted);font-size:1.02rem;line-height:1.65;margin-bottom:16px}
.post__more{color:var(--accent);font-size:.95rem;font-weight:500}
.post__more:hover{opacity:.7}

/* back to the index, from a post */
.paper__back{display:inline-block;margin-bottom:24px;font-size:.92rem;font-weight:500;
  color:var(--accent)}
.paper__back:hover{opacity:.7}