/* ============================================================
   George Hammel — canonical record
   Visual language: radiograph film on a lightbox.
   Cool clinical paper, exposed-film black, telemetry teal,
   signal orange reserved for impacts and the live present.
   ============================================================ */

:root{
  --paper:      #EAEBE6;
  --paper-hi:   #F5F5F1;
  --film:       #12171B;
  --film-2:     #1A2127;
  --ink:        #161B1F;
  --ink-soft:   #5B6469;
  --ink-faint:  #8A9196;
  --rule:       #CBCDC6;
  --rule-soft:  #DCDDD7;
  --trace:      #1B6E78;
  --trace-hi:   #2E9AA6;
  --signal:     #D2551C;
  --signal-hi:  #F07038;

  --measure: 34rem;
  --shell: 76rem;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:1.75rem; }

a{ color:var(--trace); text-underline-offset:.18em; text-decoration-thickness:.06em; }
a:hover{ color:var(--signal); }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:2px; }

/* ---------------------------------------------------- masthead */
.masthead{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead__in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:3.5rem;
}
.wordmark{
  font-family:var(--display);
  font-variation-settings:"wdth" 112,"wght" 800;
  font-size:.9rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.wordmark:hover{ color:var(--ink); }

.mast-nav{ display:flex; gap:1.35rem; margin-left:auto; }
.mast-nav a{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.mast-nav a:hover{ color:var(--signal); }

.social{ display:flex; gap:.15rem; margin-left:1.35rem; padding-left:1.35rem; border-left:1px solid var(--rule); }
.social a{
  display:grid; place-items:center; width:2rem; height:2rem;
  color:var(--ink-soft); font-size:.98rem; text-decoration:none;
  border-radius:2px; transition:color .15s, background .15s;
}
.social a:hover{ color:var(--paper-hi); background:var(--film); }

/* ---------------------------------------------------- hero */
.hero{ padding:clamp(3rem,7vw,5.5rem) 0 0; }
.eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--signal); flex:none; }

.hero h1{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2.5rem,7.4vw,5.25rem);
  line-height:.94; letter-spacing:-.02em; text-transform:uppercase;
  margin:1.1rem 0 0; max-width:16ch; text-wrap:balance;
}
/* the creed: three words, three beats — the stop is the point */
.creed span{
  display:block; line-height:.92;
  font-size:clamp(2.3rem,7vw,5rem);
}
.creed i{ font-style:normal; color:var(--signal); }
/* the creed headline is far wider than the old one; give the standfirst room */
.creed em{ max-width:46ch; font-size:.4em; margin-top:1.15rem; }
@media (prefers-reduced-motion: no-preference){
  .creed span{ opacity:0; animation:creedIn .7s cubic-bezier(.2,.7,.3,1) forwards; }
  .creed span:nth-child(1){ animation-delay:.05s }
  .creed span:nth-child(2){ animation-delay:.30s }
  .creed span:nth-child(3){ animation-delay:.55s }
  @keyframes creedIn{ from{ opacity:0; transform:translateY(.18em) } to{ opacity:1; transform:none } }
}

.hero h1 em{
  font-style:normal; display:block;
  font-variation-settings:"wdth" 92,"wght" 500;
  color:var(--ink-soft);
  font-size:.44em; letter-spacing:.005em; text-transform:none;
  line-height:1.25; margin-top:.85rem; max-width:34ch;
  font-family:var(--body);
}

/* ---------------------------------------------------- the trace (signature) */
.trace{
  margin:clamp(2.25rem,5vw,3.5rem) 0 0;
  background:var(--film);
  border-radius:3px;
  padding:1.5rem 1.5rem 1.15rem;
  overflow:hidden;
}
.trace__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.15rem;
}
.trace__title{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.15em;
  text-transform:uppercase; color:#7F8B92;
}
.trace__title b{ color:var(--paper-hi); font-weight:500; }
.trace__key{ display:flex; gap:1.15rem; font-family:var(--mono); font-size:.63rem;
  letter-spacing:.09em; text-transform:uppercase; color:#7F8B92; }
.trace__key i{ display:inline-block; width:16px; height:2px; vertical-align:middle;
  margin-right:.4rem; }
.trace__key .k-past i{ background:var(--trace-hi); }
.trace__key .k-now  i{ background:var(--signal-hi); }
.trace__key .k-hit  i{ background:#6E7A81; height:9px; width:2px; }

.trace svg{ display:block; width:100%; height:auto; }
.trace__axis{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.1em;
  color:#6E7A81; margin-top:.55rem;
}
@media (prefers-reduced-motion: no-preference){
  .trace .draw{ stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 2.1s cubic-bezier(.4,.1,.2,1) forwards; }
  .trace .draw--now{ animation-delay:1.5s; animation-duration:1.1s; }
  .trace .hit{ opacity:0; animation:fade .5s ease forwards; }
  .trace .hit--1{ animation-delay:.72s } .trace .hit--2{ animation-delay:1.18s }
  .trace .hit--3{ animation-delay:1.5s } .trace .hit--4{ animation-delay:2.1s }
  @keyframes draw{ to{ stroke-dashoffset:0 } }
  @keyframes fade{ to{ opacity:1 } }
}

/* ---------------------------------------------------- lead + prose */
.lead{
  margin:clamp(2.5rem,5vw,3.75rem) 0 0;
  font-size:clamp(1.16rem,1.9vw,1.4rem); line-height:1.55;
  max-width:44rem; color:var(--ink);
}
.lead em{ font-style:italic; color:var(--ink-soft); }

.rule{
  border:0; border-top:1px solid var(--rule);
  width:100%; max-width:calc(var(--shell) - 3.5rem);
  margin:clamp(2.75rem,6vw,4.5rem) auto;
}

/* ---------------------------------------------------- timeline */
.entry{
  display:grid; grid-template-columns:11rem minmax(0,1fr);
  gap:0 2.75rem; padding:clamp(2rem,4vw,2.85rem) 0;
  border-top:1px solid var(--rule-soft);
}
.entry:first-of-type{ border-top:1px solid var(--rule); }

.entry__rail{ position:relative; }
.entry__era{
  position:sticky; top:5.25rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.07em;
  color:var(--ink-soft); line-height:1.5;
}
.entry__kicker{
  display:block; margin-top:.45rem;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint);
}
.entry--impact .entry__era{ color:var(--signal); }
.entry--impact .entry__era::before{
  content:""; display:block; width:22px; height:2px;
  background:var(--signal); margin-bottom:.6rem;
}

.entry h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(1.35rem,2.7vw,1.95rem); line-height:1.1; letter-spacing:-.008em;
  margin:0 0 1rem; text-wrap:balance;
}
.entry p{ margin:0 0 1.05rem; max-width:var(--measure); }
.entry p:last-child{ margin-bottom:0; }

blockquote{
  margin:1.6rem 0 0; padding:0 0 0 1.35rem;
  border-left:2px solid var(--signal);
  font-size:1.1rem; line-height:1.5; color:var(--ink);
  max-width:var(--measure);
}
blockquote p{ margin:0; }

/* ---------------------------------------------------- star stream (inverted) */
.ss{
  background:var(--film); color:#D5DBDE;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding:clamp(3rem,7vw,5rem) 0 clamp(3rem,6vw,4.25rem);
}
.ss .eyebrow{ color:#7F8B92; }
/* the paper-tuned link colour is unreadable on film; lift it */
.ss a:not(.golink){ color:var(--trace-hi); }
.ss a:not(.golink):hover{ color:var(--signal-hi); }
.ss h2{
  font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2rem,5vw,3.4rem); line-height:.97; text-transform:uppercase;
  letter-spacing:-.015em; margin:1rem 0 0; color:var(--paper-hi);
}
.ss__lead{ margin:1.5rem 0 0; max-width:44rem; font-size:1.14rem; line-height:1.58; color:#B9C2C7; }
.ss__lead b{ color:var(--paper-hi); font-weight:600; }

.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1.25rem;
  margin-top:clamp(2.25rem,5vw,3.25rem); }
.card{
  background:var(--film-2); border:1px solid #262F36; border-radius:3px;
  padding:1.65rem 1.6rem;
}
.card h3{
  font-family:var(--display); font-variation-settings:"wdth" 106,"wght" 700;
  font-size:1.18rem; margin:0; color:var(--paper-hi); letter-spacing:.005em;
}
.card__line{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal-hi); margin:.5rem 0 1rem;
}
.card p{ margin:0 0 .9rem; color:#AEB8BE; font-size:.98rem; line-height:1.6; }
.card p:last-child{ margin-bottom:0; }

.field{ margin-top:clamp(2.25rem,5vw,3.25rem); }
.field h3, .press h3, .record h3{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.35rem; font-weight:400;
}
.ss .field h3{ color:#7F8B92; }
.field dl{ margin:0; border-top:1px solid #262F36; }
/* scoped to rows inside the list so it can't capture other divs in the section */
.field dl > div{ display:grid; grid-template-columns:13rem minmax(0,1fr); gap:0 2rem;
  padding:1.15rem 0; border-bottom:1px solid #262F36; }
.field dt{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em; color:var(--paper-hi);
}
.field dd{ margin:0; color:#AEB8BE; font-size:.97rem; line-height:1.6; max-width:42rem; }

.pull{
  margin:clamp(2.25rem,5vw,3.25rem) 0 0; padding:1.5rem 0 0; border-top:1px solid #262F36;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:2rem;
}
.pull blockquote{
  border-left:2px solid var(--signal); margin:0; color:var(--paper-hi);
  font-size:1.05rem; line-height:1.5;
}
.pull cite{
  display:block; margin-top:.7rem; font-family:var(--mono); font-style:normal;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#7F8B92;
}

/* ---------------------------------------------------- the kit (inherits .field) */
.kit{ margin-top:clamp(2.25rem,5vw,3.25rem); }
.kit__note{
  margin:1.35rem 0 0; font-size:.95rem; line-height:1.6; color:#8A959B; max-width:44rem;
}

/* ---------------------------------------------------- outbound links to Star Stream */
.golinks{
  display:flex; flex-wrap:wrap; gap:.75rem;
  margin-top:clamp(2rem,4vw,2.75rem);
}
.golink{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.8rem 1.15rem; border-radius:3px; text-decoration:none;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.09em; text-transform:uppercase;
  transition:background .15s, color .15s, border-color .15s;
}
.golink--primary{ background:var(--signal); color:#fff; }
.golink--primary:hover{ background:var(--signal-hi); color:#fff; }
.golink--ghost{ border:1px solid #39434A; color:#C6CFD4; }
.golink--ghost:hover{ border-color:var(--signal-hi); color:var(--signal-hi); }
.golink i{ font-size:.85rem; }

/* ---------------------------------------------------- method / how to rise */
.method{ padding:clamp(3rem,7vw,5rem) 0 0; }
.method__intro{ max-width:44rem; }
.method h2{
  font-family:var(--display); font-variation-settings:"wdth" 116,"wght" 800;
  font-size:clamp(1.9rem,4.6vw,3rem); line-height:1; text-transform:uppercase;
  letter-spacing:-.015em; margin:1rem 0 1.35rem;
}
.method__intro p{ font-size:1.1rem; line-height:1.6; margin:0 0 1.1rem; }

.obs{
  list-style:none; margin:clamp(2.25rem,5vw,3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:0 3rem;
  border-top:1px solid var(--rule);
}
.obs li{ padding:1.6rem 0; border-bottom:1px solid var(--rule-soft); }
.obs h3{
  font-family:var(--display); font-variation-settings:"wdth" 104,"wght" 700;
  font-size:1.1rem; line-height:1.3; margin:0 0 .6rem; letter-spacing:-.005em;
}
.obs p{ margin:0; font-size:.99rem; line-height:1.6; color:var(--ink-soft); }

/* ---------------------------------------------------- closing / record / press */
.close{ padding:clamp(3rem,7vw,5rem) 0 0; }
.close p{ font-size:clamp(1.1rem,1.8vw,1.3rem); line-height:1.55; max-width:46rem; margin:0 0 1.3rem; }
.close p:first-child{
  font-family:var(--display); font-variation-settings:"wdth" 100,"wght" 600;
  font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.28; letter-spacing:-.01em;
}

.record{ padding:clamp(2.75rem,6vw,4rem) 0 0; }
.record ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.record li{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:0 2rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule-soft); align-items:baseline;
}
.record time{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); }
.record span{ font-size:1rem; }

.press{ padding:clamp(2.75rem,6vw,4rem) 0 0; }
.press ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.press li{ border-bottom:1px solid var(--rule-soft); }
.press a{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 2rem; align-items:baseline;
  padding:1rem 0; text-decoration:none; color:var(--ink);
}
.press a:hover{ color:var(--signal); }
.press a:hover .press__src{ color:var(--signal); }
.press__t{ font-size:1.02rem; line-height:1.4; }
.press__src{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}

/* ---------------------------------------------------- archive index */
.archive{ padding:clamp(2.5rem,6vw,4rem) 0 0; }
.yr{ margin-bottom:clamp(2rem,4vw,3rem); }
.yr h2{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--display); font-variation-settings:"wdth" 116,"wght" 800;
  font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:-.01em;
  margin:0 0 .5rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}
.yr h2 span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-variation-settings:normal; font-weight:400;
}
.yr ul{ list-style:none; margin:0; padding:0; }
.yr li{ border-bottom:1px solid var(--rule-soft); }
.yr a{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:0 1.75rem; align-items:baseline;
  padding:.85rem 0; text-decoration:none; color:var(--ink);
}
.yr a:hover{ color:var(--signal); }
.yr time{ font-family:var(--mono); font-size:.75rem; color:var(--ink-faint); letter-spacing:.03em; }
.yr a:hover time{ color:var(--signal); }
.yr__t{ font-size:1.02rem; line-height:1.4; }

/* ---------------------------------------------------- single post */
.post{ padding:clamp(2.5rem,6vw,4rem) 0 0; max-width:52rem; }
.post h1{
  font-family:var(--display); font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(1.75rem,4.4vw,2.9rem); line-height:1.06; letter-spacing:-.015em;
  margin:1rem 0 1.75rem; text-wrap:balance;
}
.post__body{ font-size:1.08rem; line-height:1.68; }
.post__body p{ margin:0 0 1.15rem; }
.post__body h3,.post__body h4{
  font-family:var(--display); font-variation-settings:"wdth" 104,"wght" 700;
  font-size:1.2rem; margin:2rem 0 .75rem;
}
.post__body img{
  display:block; max-width:100%; height:auto; margin:1.75rem 0;
  border:1px solid var(--rule); border-radius:2px; background:var(--paper-hi);
}
.post__body ul,.post__body ol{ margin:0 0 1.15rem 1.25rem; padding:0; }
.post__body li{ margin-bottom:.4rem; }
.post__body .muted{ color:var(--ink-faint); font-style:italic; }
.vids{ margin:1.75rem 0 0; }
.vid{
  display:inline-flex; align-items:center; gap:.55rem; margin:0 .5rem .5rem 0;
  padding:.6rem 1rem; border:1px solid var(--rule); border-radius:3px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
}
.vid:hover{ border-color:var(--signal); color:var(--signal); }
.post__note{
  margin:2.5rem 0 0; padding-top:1.25rem; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:.68rem; line-height:1.7; letter-spacing:.04em;
  color:var(--ink-faint);
}
.postnav{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
  margin:2rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule-soft);
}
.postnav a{ text-decoration:none; color:var(--ink); font-size:.98rem; line-height:1.4; }
.postnav a:hover{ color:var(--signal); }
.postnav span{
  display:block; font-family:var(--mono); font-size:.65rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.35rem;
}
.postnav__n{ text-align:right; }

/* ---------------------------------------------------- speech transcript */
.speech h1{
  font-variation-settings:"wdth" 100,"wght" 700;
  font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.14; letter-spacing:-.012em;
  max-width:20ch;
}
.speech .post__body h3{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; font-variation-settings:normal;
  margin:2.75rem 0 1.25rem; padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}
.speech .post__body h3:first-child{ margin-top:1rem; }
.speech .post__body p{ margin:0 0 1.35rem; }
.ts{
  display:inline-block; min-width:3.4rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  color:var(--ink-faint); vertical-align:baseline;
}
.pullbox{
  margin:2.25rem 0; padding:1.5rem 1.6rem;
  background:var(--paper-hi); border:1px solid var(--rule); border-left:2px solid var(--signal);
  border-radius:2px;
}
.pullbox h2{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; margin:0 0 .75rem;
}
.pullbox p{ margin:0; font-size:1.08rem; line-height:1.55; }
.pullbox--end{ background:transparent; border-left-color:var(--rule); }
.pullbox--end p{ font-size:.99rem; color:var(--ink-soft); }

/* press page variant */
.press--full{ padding-top:clamp(2rem,5vw,3rem); }
.press__b{
  display:block; margin-top:.3rem; font-size:.93rem; line-height:1.5; color:var(--ink-soft);
  max-width:46rem;
}

/* ---------------------------------------------------- footer */
.foot{
  margin-top:clamp(3.5rem,7vw,5.5rem); border-top:1px solid var(--rule);
  padding:2.25rem 0 3rem;
  display:flex; gap:1.5rem; justify-content:space-between; flex-wrap:wrap; align-items:center;
}
.foot p{ margin:0; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em;
  color:var(--ink-faint); text-transform:uppercase; }
.foot .social{ border-left:0; padding-left:0; margin-left:0; }

/* ---------------------------------------------------- responsive */
@media (max-width:900px){
  .mast-nav{ display:none; }
  .entry{ grid-template-columns:1fr; gap:0; }
  .entry__era{ position:static; margin-bottom:1rem; }
  .entry__kicker{ display:inline; margin-left:.75rem; }
  .field div{ grid-template-columns:1fr; gap:.4rem; }
  .record li{ grid-template-columns:4.5rem minmax(0,1fr); gap:0 1.25rem; }
  .press a{ grid-template-columns:1fr; gap:.35rem; }
  .yr a{ grid-template-columns:4.25rem minmax(0,1fr); gap:0 1rem; }
  .postnav{ grid-template-columns:1fr; gap:1.25rem; }
  .postnav__n{ text-align:left; }
}
@media (max-width:640px){
  /* the in-chart annotations stop being legible; the timeline below carries the same facts */
  .trace .hit text{ display:none; }
}
@media (max-width:520px){
  .shell{ padding-inline:1.15rem; }
  .trace{ padding:1.1rem 1rem .9rem; }
  .trace__key{ display:none; }
}

@media print{
  .masthead,.trace,.social{ display:none; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .ss{ background:#fff; color:#000; }
  .ss h2,.card h3,.ss__lead b{ color:#000; }
  .card,.field dd,.card p{ color:#222; }
}

/* ============================================================
   The biography — /story/
   A book, not a landing page: numbered chapters, a generous
   measure, and primary sources hung off each chapter.
   ============================================================ */
.story{ padding-bottom:2rem; }
.story__head{ padding:clamp(3rem,7vw,5rem) 0 0; max-width:52rem; }
.story__head h1{
  font-family:var(--display); font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(2.6rem,8vw,5.5rem); line-height:.94; letter-spacing:-.02em;
  text-transform:uppercase; margin:1.1rem 0 1.5rem;
}
.story__body{ max-width:52rem; }

/* contents */
.toc{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; }
.toc ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.toc li{ border-bottom:1px solid var(--rule-soft); }
.toc a{
  display:grid; grid-template-columns:3rem minmax(0,1fr) auto; gap:0 1.25rem;
  align-items:baseline; padding:.8rem 0; text-decoration:none; color:var(--ink);
  font-size:1.02rem;
}
.toc a:hover{ color:var(--signal); }
.toc__n{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); letter-spacing:.06em; }
.toc a:hover .toc__n{ color:var(--signal); }
.toc em{
  font-family:var(--mono); font-style:normal; font-size:.7rem; letter-spacing:.05em;
  color:var(--ink-faint); text-align:right; white-space:nowrap;
}

/* chapters */
.chap{ padding:clamp(3rem,7vw,5rem) 0 0; scroll-margin-top:5rem; }
.chap__meta{
  display:flex; align-items:baseline; gap:1rem; margin:0 0 .75rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; color:var(--ink-soft);
}
.chap__n{
  font-size:.68rem; letter-spacing:.14em; color:var(--ink-faint);
  padding-right:1rem; border-right:1px solid var(--rule);
}
.chap--impact .chap__meta{ color:var(--signal); }
.chap--impact .chap__n{ color:var(--signal); border-right-color:var(--signal); }
.chap h2{
  font-family:var(--display); font-variation-settings:"wdth" 110,"wght" 700;
  font-size:clamp(1.7rem,4vw,2.7rem); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 1.5rem; text-wrap:balance;
}
.chap__body{ font-size:1.09rem; line-height:1.68; }
.chap__body p{ margin:0 0 1.3rem; }
/* the opening line of each chapter carries the weight */
.chap__body > p:first-child{ font-size:1.16rem; line-height:1.58; }

/* primary sources hung off a chapter */
.sources{
  margin:2rem 0 0; padding:1.15rem 1.35rem;
  background:var(--paper-hi); border:1px solid var(--rule); border-left:2px solid var(--trace);
  border-radius:2px;
}
.sources h4{
  margin:0 0 .6rem; font-family:var(--mono); font-weight:400;
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint);
}
.sources ul{ list-style:none; margin:0; padding:0; }
.sources li{ margin:0 0 .3rem; font-size:.95rem; }
.sources li:last-child{ margin-bottom:0; }
.sources a{ text-transform:none; }

.story__foot{
  margin-top:clamp(3rem,7vw,4.5rem); padding-top:1.75rem; border-top:1px solid var(--rule);
  max-width:52rem;
}
.story__foot p{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.6; }

/* the record page: a chapter's primary sources, inline */
.entry__cite{
  margin:1.1rem 0 0 !important; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.05em; color:var(--ink-faint);
}
.entry__cite a{ text-transform:none; }

@media (max-width:900px){
  .toc a{ grid-template-columns:2.5rem minmax(0,1fr); gap:0 .9rem; }
  .toc em{ display:none; }
}