/* NeoGravity.org
   Palette taken from the figures in the papers so the site and the
   published work read as one body. Navy is the plenum at baseline,
   gold is emitting matter, blue is the compressed medium. */

:root{
  --ink:        #0b1024;   /* deepest, page ground */
  --plenum:     #1a2560;   /* the navy used throughout the figures */
  --plenum-lift:#26327a;
  --emission:   #c9a227;   /* mass / radiation gold */
  --medium:     #4a7fb5;   /* density shells */
  --paper:      #f4f2ec;   /* reading surface */
  --paper-dim:  #e6e3da;
  --rule:       #c8cbd9;
  --text:       #14182c;
  --text-soft:  #4d5470;

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  --measure: 34rem;
  --gap: clamp(1rem, 3vw, 2.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--plenum); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--emission)}
:focus-visible{outline:2px solid var(--emission); outline-offset:3px; border-radius:2px}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(244,242,236,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead .inner{
  max-width:74rem; margin:0 auto; padding:.75rem var(--gap);
  display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  letter-spacing:.01em; color:var(--plenum); text-decoration:none; white-space:nowrap;
}
.wordmark em{font-style:normal; color:var(--emission)}
.nav{margin-left:auto; display:flex; gap:1.35rem; flex-wrap:wrap}
.nav a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--text-soft);
}
.nav a:hover,.nav a[aria-current]{color:var(--plenum)}

/* ---------- shell field: the signature ---------- */
.field{position:relative; background:var(--ink); color:#e9ecf7; overflow:hidden}
.field::before{
  content:""; position:absolute; inset:-30% -10%;
  background:
    radial-gradient(circle at 50% 52%, rgba(214,178,60,.60) 0 5.5%, rgba(201,162,39,.30) 5.5% 7%, transparent 7.2%),
    radial-gradient(circle at 50% 52%, rgba(74,127,181,.28) 0 11%, transparent 11.4%),
    radial-gradient(circle at 50% 52%, rgba(74,127,181,.20) 0 17%, transparent 17.4%),
    radial-gradient(circle at 50% 52%, rgba(74,127,181,.14) 0 24%, transparent 24.4%),
    radial-gradient(circle at 50% 52%, rgba(74,127,181,.09) 0 32%, transparent 32.4%),
    radial-gradient(circle at 50% 52%, rgba(74,127,181,.05) 0 41%, transparent 41.4%);
  pointer-events:none;
}
.field .inner{position:relative; max-width:74rem; margin:0 auto; padding:clamp(3.5rem,9vw,6.5rem) var(--gap)}

.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--emission); margin:0 0 1.1rem;
}
.hero-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,5.6vw,3.9rem); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 1.1rem; max-width:20ch;
}
.hero-sub{max-width:var(--measure); color:#c4cbe4; font-size:1.08rem; margin:0 0 2rem}

.formula{
  display:inline-block; font-family:var(--mono); font-size:clamp(1.15rem,3vw,1.75rem);
  color:var(--paper); padding:.85rem 1.4rem; margin:.5rem 0 .6rem;
  border:1px solid rgba(201,162,39,.45); border-radius:2px;
  background:rgba(255,255,255,.03);
}
.formula-note{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:#8f9bc4; margin:0}

/* ---------- generic sections ---------- */
.wrap{max-width:74rem; margin:0 auto; padding:0 var(--gap)}
.section{padding:clamp(3rem,7vw,5rem) 0}
.section + .section{border-top:1px solid var(--rule)}
.section-head{margin:0 0 2.25rem}
.section-head h2{
  font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3.2vw,2.1rem);
  letter-spacing:-.015em; margin:.25rem 0 .5rem;
}
.section-head p{max-width:var(--measure); color:var(--text-soft); margin:0}

/* ---------- claim strip ---------- */
.claims{display:grid; gap:1px; background:var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); border:1px solid var(--rule)}
.claim{background:var(--paper); padding:1.5rem 1.35rem}
.claim h3{font-family:var(--display); font-size:1.02rem; font-weight:600; margin:0 0 .45rem}
.claim p{margin:0; font-size:.94rem; color:var(--text-soft)}
.claim .n{font-family:var(--mono); font-size:.7rem; color:var(--emission);
  letter-spacing:.12em; display:block; margin-bottom:.5rem}

/* ---------- parts + papers ---------- */
.part{margin:0 0 2.75rem}
.part-head{display:flex; gap:1rem; align-items:baseline; border-bottom:2px solid var(--plenum);
  padding-bottom:.5rem; margin-bottom:.25rem}
.part-num{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--emission)}
.part-name{font-family:var(--display); font-weight:600; font-size:1.22rem; margin:0}
.part-blurb{color:var(--text-soft); font-size:.94rem; margin:.6rem 0 1.1rem; max-width:var(--measure)}

.paper-row{
  display:grid; grid-template-columns:62px 2.6rem 1fr auto; gap:1.1rem; align-items:center;
  padding:1.05rem 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit;
}
.paper-cover{
  width:62px; height:88px; display:block; border-radius:2px;
  border:1px solid var(--rule); background:var(--ink);
  box-shadow:0 1px 3px rgba(11,16,36,.16);
  transition:transform .18s, box-shadow .18s;
}
.paper-row:hover .paper-cover{
  transform:translateY(-2px); box-shadow:0 4px 10px rgba(11,16,36,.24);
}
@media (max-width:34rem){
  .paper-row{grid-template-columns:48px 2.2rem 1fr; gap:.8rem}
  .paper-cover{width:48px; height:68px}
  .paper-go{display:none}
}
.paper-row:hover{background:var(--paper-dim)}
.paper-row:hover .paper-title{color:var(--plenum)}
.paper-n{font-family:var(--mono); font-size:1.3rem; color:var(--rule); line-height:1;
  transition:color .18s}
.paper-row:hover .paper-n{color:var(--emission)}
.paper-title{font-family:var(--display); font-weight:600; font-size:1.06rem; margin:0 0 .25rem;
  transition:color .18s}
.paper-tag{margin:0; font-size:.9rem; color:var(--text-soft); font-style:italic}
.paper-doi{margin:.32rem 0 0; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.03em; color:var(--text-soft); opacity:.7}
.paper-go{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); white-space:nowrap; padding-top:.3rem}

/* ---------- paper detail ---------- */
.detail-quote{
  font-family:var(--display); font-size:clamp(1.25rem,3.2vw,1.85rem); line-height:1.32;
  font-weight:500; max-width:26ch; margin:0 0 1.5rem; color:var(--paper);
}
.detail-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.34;
  letter-spacing:-.005em; max-width:44ch; margin:0 0 2rem; color:var(--plenum);
}
.detail-body{max-width:var(--measure)}
.detail-body p{margin:0 0 1.15rem}
.lede{font-size:1.15rem; color:var(--text)}

.detail-cols{
  display:grid; grid-template-columns:170px 1fr; gap:2rem; align-items:start; margin:2rem 0;
}
.detail-cover{
  width:170px; height:241px; display:block; border-radius:2px;
  border:1px solid var(--rule); background:var(--ink);
  box-shadow:0 3px 12px rgba(11,16,36,.22);
}
@media (max-width:40rem){
  .detail-cols{grid-template-columns:1fr; gap:1.25rem}
  .detail-cover{width:140px; height:198px; margin:0 auto}
}
.meta{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:0}
.meta div{background:var(--paper); padding:.85rem 1.1rem; display:flex; gap:1rem; flex-wrap:wrap}
.meta dt{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); min-width:7rem; margin:0}
.meta dd{margin:0; font-family:var(--mono); font-size:.82rem; word-break:break-word}

/* book link */
.book{
  display:inline-flex; align-items:center; gap:.8rem; text-decoration:none;
  background:var(--plenum); color:var(--paper); padding:.9rem 1.4rem;
  border-radius:2px; font-family:var(--mono); font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; transition:background .18s;
}
.book:hover{background:var(--plenum-lift); color:var(--paper)}
.book svg{flex:none}
.book-row{display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; margin:1.75rem 0 0}
.book-alt{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-soft)}

.pager{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--rule); padding-top:1.5rem; margin-top:3rem}
.pager a{font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-decoration:none}

/* ---------- misc ---------- */
.note{border-left:3px solid var(--emission); padding:.15rem 0 .15rem 1.1rem;
  color:var(--text-soft); font-size:.95rem; margin:1.5rem 0}
.two-col{display:grid; gap:2.5rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.stat{font-family:var(--mono)}
.stat b{display:block; font-size:1.6rem; color:var(--plenum); font-weight:500}
.stat span{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft)}

footer{background:var(--ink); color:#9aa4c6; padding:3rem 0 2.5rem; margin-top:0}
footer .inner{max-width:74rem; margin:0 auto; padding:0 var(--gap)}
footer a{color:#c4cbe4}
footer .fine{font-family:var(--mono); font-size:.72rem; line-height:1.9; margin:1.25rem 0 0}

/* ---------- verification page ---------- */
/* Added 14 September 2026 with verification.html. Every class here begins v- so this block
   can be lifted out whole, and nothing above it is touched. */
.vstrip{
  display:flex; flex-wrap:wrap; gap:0; margin:2rem 0 0;
  border:1px solid rgba(201,162,39,.35); border-radius:2px; overflow:hidden;
}
.vstrip > div{
  flex:1 1 7.5rem; padding:.8rem 1.1rem;
  border-right:1px solid rgba(201,162,39,.25); background:rgba(255,255,255,.03);
}
.vstrip > div:last-child{border-right:0}
.vk{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8f9bc4; margin-bottom:.25rem}
.vv{font-family:var(--mono); font-size:1.35rem; color:var(--paper); line-height:1}
.vv-ok{color:var(--emission)}

.vfilters{margin:0 0 1.75rem}
.vrow{display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; margin:0 0 .6rem}
.vlabel{font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-soft); min-width:6rem}
.vchip{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  padding:.4rem .7rem; border:1px solid var(--rule); border-radius:2px;
  background:var(--paper); color:var(--text-soft); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.vchip:hover{border-color:var(--plenum); color:var(--plenum)}
.vchip.is-on{background:var(--plenum); border-color:var(--plenum); color:var(--paper)}
.vchip .vn{opacity:.65; margin-left:.25rem}
.vchip.is-on .vn{opacity:.8}
.vcount{font-family:var(--mono); font-size:.7rem; color:var(--text-soft); margin:.5rem 0 0}

/* The rules are drawn on the cards, not by a 1px gap over a grey ground: filtering hides
   cards, and a gapped grid leaves grey ghost cells where the hidden ones were. */
.vgrid{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule)}
.vcard{background:var(--paper); padding:1.35rem 1.35rem 1.1rem;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.vcard[hidden]{display:none}
.vcard > header{display:grid; grid-template-columns:2.2rem 1fr auto; gap:.7rem;
  align-items:baseline; margin:0 0 .7rem}
.vnum{font-family:var(--mono); font-size:1.3rem; color:var(--rule); line-height:1}
.vcard h3{font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.3; margin:0}
.vpill{font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .45rem; border-radius:2px; white-space:nowrap;
  background:var(--paper-dim); color:var(--text-soft); border:1px solid var(--rule)}
.vpill-derived{background:var(--plenum); color:var(--paper); border-color:var(--plenum)}
.vpill-fitted,.vpill-model,.vpill-postulated{background:rgba(201,162,39,.16);
  color:#7a6412; border-color:rgba(201,162,39,.5)}
.vpill-withdrawn,.vpill-recorded{background:transparent; color:var(--text-soft);
  border-style:dashed}
.vsrc{margin:0 0 .6rem; font-size:.88rem; color:var(--text-soft); line-height:1.55}
.vpart{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--emission); margin-bottom:.2rem}
.vsec{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em}
.vrec{margin:0 0 .75rem; font-size:.94rem}
.vchecks{list-style:none; margin:0; padding:0}
.vchecks li{font-size:.88rem; color:var(--text-soft); margin:0 0 .3rem; padding-left:3.3rem;
  text-indent:-3.3rem}
.vtick{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; padding:.1rem .3rem;
  border-radius:2px; background:var(--plenum); color:var(--paper); margin-right:.45rem}
.vtick.no,.vchecks li.no .vtick{background:#8c2f2f}
.vout{margin:.8rem 0 0; border-top:1px solid var(--rule); padding-top:.6rem}
.vout summary{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-soft); cursor:pointer}
.vout summary:hover{color:var(--plenum)}
/* The transcript keeps the program's own alignment: it scrolls sideways rather than wrapping,
   because a wrapped rule of equals signs stops looking like the program's output. */
.vout pre{font-family:var(--mono); font-size:.66rem; line-height:1.5; white-space:pre;
  background:var(--paper-dim); padding:.8rem .9rem; margin:.7rem 0 0;
  border-radius:2px; overflow-x:auto}

.vsummary{width:100%; border-collapse:collapse; margin:0 0 2rem;
  border:1px solid var(--rule)}
.vsummary th{text-align:left; vertical-align:top; width:9rem; padding:.85rem 1.1rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); background:var(--paper-dim); border-bottom:1px solid var(--rule)}
.vsummary td{padding:.85rem 1.1rem; font-size:.92rem; line-height:1.7;
  border-bottom:1px solid var(--rule)}
.vsummary a{font-family:var(--mono); font-size:.76rem; margin-right:.3rem}
.vnoclaim{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft); opacity:.75; margin-right:.3rem}
.vh3{font-family:var(--display); font-weight:600; font-size:1.05rem; margin:1.75rem 0 .6rem}
.vplain{margin:0; padding-left:1.1rem; font-size:.94rem; color:var(--text-soft)}
.vplain li{margin:0 0 .35rem}
.vcode{font-family:var(--mono); font-size:.76rem; line-height:1.8; background:var(--ink);
  color:#dfe4f4; padding:1.1rem 1.25rem; border-radius:2px; overflow-x:auto; margin:0 0 1.5rem}

@media (max-width:34rem){
  .vgrid{grid-template-columns:1fr}
  .vlabel{min-width:100%}
  .vsummary th{width:auto}
  .vsummary,.vsummary tbody,.vsummary tr,.vsummary th,.vsummary td{display:block; width:auto}
  .vsummary td{border-bottom:1px solid var(--rule)}
}

/* The filtered-to-nothing state, and the flash that shows which claim a link landed on.
   Added 14 September 2026: following "Claim 4" out of the summary while a filter was on
   scrolled to a hidden card, and a grid filtered to nothing looked like a broken page. */
.vempty{
  font-family:var(--mono); font-size:.78rem; color:var(--text-soft);
  border:1px dashed var(--rule); padding:1.4rem 1.5rem; margin:0;
  display:flex; gap:1rem; align-items:center; flex-wrap:wrap;
}
.vempty[hidden]{display:none}
.vgrid[hidden]{display:none}
@keyframes vflash{
  from{box-shadow:inset 0 0 0 2px var(--emission); background:rgba(201,162,39,.12)}
  to  {box-shadow:inset 0 0 0 2px transparent;     background:var(--paper)}
}
.vflash{animation:vflash 1.6s ease-out 1}
@media (prefers-reduced-motion:reduce){
  .vflash{animation:none; box-shadow:inset 0 0 0 2px var(--emission)}
}

/* The open-problem register. Added 14 September 2026: the page had been showing a four-line list
   that was not Paper 21's register, so this block shows the nine as the paper states them. */
.vopen{display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin:0 0 1.5rem}
.vprob{padding:1.25rem 1.3rem; border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule); background:var(--paper)}
.vprob.is-decider{background:var(--paper-dim)}
.vprob > header{display:grid; grid-template-columns:2rem 1fr; gap:.6rem .7rem;
  align-items:baseline; margin:0 0 .55rem}
.vprob h3{font-family:var(--display); font-weight:600; font-size:1rem; line-height:1.3; margin:0}
.vprob header .vpill{grid-column:2; justify-self:start; margin-right:.3rem}
.vprob p{margin:0; font-size:.92rem; color:var(--text-soft); line-height:1.6}
.vpill-open{background:transparent; color:var(--text-soft); border:1px dashed var(--rule)}
.vpill-decider{background:var(--emission); color:var(--ink); border-color:var(--emission)}
.vsub{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft); margin:0 0 .5rem}
@media (max-width:34rem){ .vopen{grid-template-columns:1fr} }
/* ---------- the book: buy panel and home pitch ---------- */
/* Added 17 September 2026 with the book cover and PayPal checkout. */
.book-gold{background:var(--emission); color:var(--ink)}
.book-gold:hover{background:#d9b441; color:var(--ink)}
.buy-cols{display:grid; grid-template-columns:300px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.buy-cover{margin:0; position:sticky; top:5rem}
.buy-cover img{width:300px; height:auto; display:block; border-radius:2px;
  box-shadow:0 14px 34px rgba(11,16,36,.35), 0 2px 6px rgba(11,16,36,.25)}
.buy-spec{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin:2rem 0 0}
.buy-spec div{background:var(--paper); padding:.8rem .9rem}
.buy-spec dt{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-soft); margin:0}
.buy-spec dd{margin:.15rem 0 0; font-family:var(--mono); font-size:1.3rem; color:var(--plenum)}
.buy-panel{margin:2rem 0 0; padding:1.5rem 1.5rem 1.1rem; border:1px solid var(--rule);
  border-top:3px solid var(--emission); background:#fff; scroll-margin-top:5rem}
.buy-title{font-family:var(--display); font-weight:600; font-size:1.35rem; margin:0 0 1rem; color:var(--plenum)}
.buy-panel .book-alt{display:block; margin:.6rem 0 0}
@media (max-width:48rem){
  .buy-cols{grid-template-columns:1fr}
  .buy-cover{position:static}
  .buy-cover img{width:220px; margin:0 auto}
  .buy-spec{grid-template-columns:repeat(2,1fr)}
}
.pitch{background:var(--paper-dim)}
.pitch-cols{display:grid; grid-template-columns:200px 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.pitch-cover img{width:200px; height:auto; display:block; border-radius:2px;
  box-shadow:0 10px 26px rgba(11,16,36,.32); transition:transform .18s}
.pitch-cover:hover img{transform:translateY(-3px)}
.pitch-title{font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.12; letter-spacing:-.015em; margin:0 0 .8rem; max-width:24ch}
.pitch-text{max-width:var(--measure); color:var(--text-soft); margin:0}
@media (max-width:40rem){
  .pitch-cols{grid-template-columns:1fr}
  .pitch-cover img{width:150px}
}
/* thank-you page downloads */
.dl-list{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin:1.5rem 0 0}
.dl{display:grid; grid-template-columns:1fr auto; grid-template-areas:"part go" "pages go";
  gap:.1rem 1rem; align-items:center; background:#fff; padding:1.1rem 1.25rem;
  text-decoration:none; color:inherit; transition:background .18s}
.dl:hover{background:var(--paper-dim); color:inherit}
.dl-part{grid-area:part; font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--plenum)}
.dl-pages{grid-area:pages; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--text-soft)}
.dl-go{grid-area:go; display:inline-flex; align-items:center; gap:.6rem; background:var(--emission); color:var(--ink);
  padding:.7rem 1rem; border-radius:2px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
.dl:hover .dl-go{background:#d9b441}
.dl-size{opacity:.7; text-transform:none}
@media (max-width:30rem){
  .dl{grid-template-columns:1fr; grid-template-areas:"part" "pages" "go"}
  .dl-go{justify-self:start; margin-top:.6rem}
}
/* the sponsor block on the book page */
.wlf{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start}
.wlf .detail-body{max-width:none}
.wlf-logo{display:block; width:min(300px,100%); height:auto; margin:0 0 1.5rem}
.wlf-video{position:relative; width:100%; aspect-ratio:16/9; background:var(--ink);
  border:1px solid var(--rule); border-radius:2px; overflow:hidden}
.wlf-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (max-width:48rem){ .wlf{grid-template-columns:1fr} }
/* author photographs on the About page, and the Foundation's icon */
.bio-cols{display:grid; grid-template-columns:1fr 240px; gap:clamp(1.5rem,4vw,3rem); align-items:start}
.bio-rail{display:grid; gap:1.25rem; justify-items:center}
.bio-rail figure{margin:0}
.bio-rail img{display:block; width:100%; height:auto; border-radius:2px;
  border:1px solid var(--rule); box-shadow:0 3px 12px rgba(11,16,36,.18)}
.bio-rail figure img{width:100%}
@media (max-width:48rem){
  .bio-cols{grid-template-columns:1fr}
  .bio-rail{grid-auto-flow:column; justify-content:start; align-items:end; gap:1rem}
  .bio-rail figure img{width:190px}
}
.sponsor-line{display:flex; gap:1.1rem; align-items:flex-start; margin:1.5rem 0;
  border-left:3px solid var(--emission); padding:.15rem 0 .15rem 1.1rem}
.sponsor-line p{margin:0; color:var(--text-soft); font-size:.95rem}
.wlf-icon{flex:none; width:54px; height:54px; border-radius:4px; display:block}

/* The students' talk, directly under the elevator pitch on the index page.
   The poster carries the first slide, so the block reads as a film before it is played. */
.talkfilm{margin:2rem 0 0; border-top:1px solid var(--rule); padding-top:1.6rem}
.talkfilm figure{margin:0}
.talkfilm video{
  width:100%; height:auto; display:block; background:var(--ink);
  border:1px solid var(--rule); border-radius:2px;
}
.talkfilm figcaption{
  margin-top:.7rem; font-size:.9375rem; color:var(--text-soft); line-height:1.5;
}
.talkfilm .filmhead{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .9rem; margin:0 0 .85rem;
}
.talkfilm .filmhead h3{
  font-family:var(--display); font-size:1.25rem; font-weight:600; margin:0; color:var(--plenum);
}
.talkfilm .runtime{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-soft);
}
@media (max-width:40rem){ .talkfilm{padding-top:1.2rem} }

/* The elevator pitch fills the width of the page instead of stopping at the reading
   measure. Above 68rem it runs in two columns: the block then fills the page edge to
   edge while each line stays near sixty-five characters, which is the length the eye
   follows most easily. The opening sentence spans both columns, as a standfirst. */
.elevator{max-width:none}
.elevator p{max-width:none}
@media (min-width:68rem){
  .elevator{columns:2; column-gap:3.25rem; column-fill:balance}
  .elevator p:first-child{
    column-span:all; font-size:1.16rem; line-height:1.5; margin-bottom:1.35rem;
  }
}

/* The hero opens by saying what gravity is not, a size down and a shade back, so that the
   claim underneath lands in full display type instead of running on from it. Both sentences
   are the corpus's own words; only their weight differs. */
.hero-deny{
  display:block; font-size:.56em; line-height:1.25; color:#9fb0d8;
  font-weight:600; margin:0 0 .5em;
}
@media (max-width:40rem){ .hero-deny{font-size:.62em} }