:root{
  --bg:#17120d;
  --side:#120e09;
  --panel:#231a12;
  --ink:#f1e7d5;
  --ink-dim:#cfc0a7;
  --muted:#9a8a71;
  --accent:#cf9f63;
  --accent-deep:#9c6f3c;
  --warm:#c2603f;
  --warm-dim:#9d4b30;
  --rule:#342619;
  --rule-soft:#271c13;
  --paper:#f8f3e7;

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua','Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-dim);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-deep); color:#0c0b10; }

/* ============ sidebar ============ */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:20rem;
  background:var(--side);
  border-right:1px solid var(--rule);
  padding:3rem 2.1rem 2.4rem;
  overflow-y:auto;
}
.brand{
  display:block; border:0; margin-bottom:.9rem;
  font-family:var(--mono); font-weight:500;
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); line-height:2;
}
.brand span{ display:block; }
.tagline{
  color:var(--muted); font-size:.9rem; font-style:italic; line-height:1.5;
  margin:0 0 2.2rem; padding-bottom:1.7rem;
  border-bottom:1px solid var(--rule);
  max-width:none;
}
.sidebar nav{ display:flex; flex-direction:column; }
.sidebar nav a{
  border:0; padding:.72rem 0;
  border-bottom:1px solid var(--rule-soft);
  color:var(--ink-dim);
  font-family:var(--mono); font-weight:400;
  font-size:.74rem; letter-spacing:.13em; text-transform:uppercase;
  display:flex; gap:.95rem; align-items:baseline;
  transition:color .18s ease;
}
.sidebar nav a .k{ color:var(--muted); font-size:.68rem; }
.sidebar nav a:hover{ color:var(--accent); }
.sidebar nav a[aria-current="page"]{ color:var(--accent); }
.sidebar nav a[aria-current="page"] .k{ color:var(--accent-deep); }
.sidefoot{
  margin-top:2.8rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  color:var(--muted); font-size:.84rem;
}
.sidefoot p{ margin:0 0 .45rem; max-width:none; color:var(--muted); }

/* ============ main ============ */
.main{ margin-left:20rem; }
.wrap{ max-width:62rem; margin-inline:auto; padding:4.6rem 3.4rem 7rem; }

.eyebrow{
  font-family:var(--mono); font-weight:500;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-deep); margin:0 0 1.5rem;
}
h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.15rem,4.6vw,3.6rem); line-height:1.1;
  letter-spacing:-.02em; color:var(--ink);
  margin:0 0 1.3rem; max-width:none;
}
h2{
  font-family:var(--serif); font-weight:400;
  font-size:1.42rem; line-height:1.3; letter-spacing:-.01em;
  margin:3.4rem 0 1rem; color:var(--accent);
}
h3{
  font-family:var(--mono); font-weight:500;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); margin:3rem 0 .9rem;
}
h4{ font-family:var(--serif); }
p{ margin:0 0 1.15rem; max-width:60ch; }
.lede{
  color:var(--ink); font-size:1.2rem; font-weight:300; line-height:1.5;
  margin-bottom:3rem; max-width:none;
}
a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule); transition:border-color .18s ease; }
a:hover{ border-bottom-color:currentColor; }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ============ register rows ============ */
.register{ border-top:1px solid var(--rule); margin:2.2rem 0 1rem; }
.row{
  display:grid; grid-template-columns:4rem 1fr auto; gap:1.1rem;
  align-items:baseline; padding:1rem .55rem 1rem 0;
  border-bottom:1px solid var(--rule-soft);
  transition:background .2s ease;
}
.row:hover{ background:rgba(207,159,99,.05); }
.no{
  font-family:var(--mono); font-weight:500;
  font-size:.95rem; color:var(--accent); letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.name{ font-size:1.14rem; color:var(--ink); letter-spacing:-.005em; }
.trade{
  font-family:var(--mono); font-weight:400;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.caption{
  color:var(--muted); font-size:.94rem; font-style:italic; line-height:1.55;
  margin:0 0 3rem; max-width:52ch;
}

/* ============ numbered steps ============ */
.step{
  display:grid; grid-template-columns:4rem 1fr; gap:1.1rem;
  padding:1.5rem 0; border-bottom:1px solid var(--rule-soft);
}
.step:first-of-type{ border-top:1px solid var(--rule); }
.step h4{ font-size:1.18rem; font-weight:400; margin:0 0 .45rem; color:var(--ink); letter-spacing:-.008em; }
.step p{ margin:0; font-size:1rem; }

/* ============ timeline ============ */
.tl{ border-left:1px solid var(--rule); padding-left:1.7rem; margin:2rem 0 3rem; }
.tl div{ position:relative; margin-bottom:1.5rem; }
.tl div::before{
  content:''; position:absolute; left:-1.83rem; top:.62rem;
  width:5px; height:5px; border-radius:50%;
  background:var(--accent-deep);
}
.tl .when{
  font-family:var(--mono); font-weight:500;
  font-size:.69rem; letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:.3rem;
}
.tl p{ margin:0; }

/* ============ documents ============ */
figure.doc{ margin:2.8rem 0; }
figure.doc img{
  display:block; width:100%; height:auto;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:2px; padding:.6rem;
}
figure.doc figcaption{
  margin-top:.85rem; color:var(--muted);
  font-size:.9rem; font-style:italic; line-height:1.55; max-width:56ch;
}
figure.doc .cite{
  display:block; margin-top:.5rem; font-style:normal;
  font-family:var(--mono); font-weight:400;
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-deep);
}
.slot{
  background:var(--panel); border:1px dashed var(--rule);
  border-radius:2px; padding:3.2rem 1.2rem; text-align:center;
  color:var(--muted); font-family:var(--mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}

/* ============ fields ============ */
.fields{ border-top:1px solid var(--rule); margin:1.8rem 0 2.2rem; }
.fields div{
  display:grid; grid-template-columns:9.5rem 1fr; gap:1.2rem;
  padding:.72rem 0; border-bottom:1px solid var(--rule-soft);
}
.fields .lbl{
  font-family:var(--mono); font-weight:400;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  padding-top:.22rem;
}
.fields .val{ color:var(--ink-dim); }

/* ============ panel ============ */
.panel{
  background:var(--panel); border:1px solid var(--rule);
  border-left:2px solid var(--accent-deep);
  padding:1.5rem 1.7rem; margin:2.4rem 0; border-radius:2px;
}
.panel p{ max-width:58ch; }
.panel p:last-child{ margin-bottom:0; }
.panel .lbl{
  display:block; margin-bottom:.7rem;
  font-family:var(--mono); font-weight:500; font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
}

.sources{ color:var(--muted); font-size:.95rem; line-height:1.7; }

footer.page{
  margin-top:4.6rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  color:var(--muted); font-size:.88rem;
}
footer.page p{ margin:0 0 .4rem; color:var(--muted); }

/* ============ responsive ============ */
@media (max-width:64rem){
  .sidebar{
    position:static; width:auto; inset:auto;
    border-right:0; border-bottom:1px solid var(--rule);
    padding:1.9rem 1.5rem 1.2rem;
  }
  .brand{ margin-bottom:.7rem; }
  .brand span{ display:inline; }
  .brand span+span::before{ content:' '; }
  .tagline{ margin-bottom:1.3rem; padding-bottom:1.1rem; }
  .sidebar nav{ flex-flow:row wrap; gap:.2rem 1.5rem; }
  .sidebar nav a{ border-bottom:0; padding:.32rem 0; }
  .sidebar nav a .k{ display:none; }
  .sidefoot{ display:none; }
  .main{ margin-left:0; }
  .wrap{ padding:2.8rem 1.5rem 4.5rem; }
}
@media (max-width:34rem){
  body{ font-size:17px; }
  .row{ grid-template-columns:3.1rem 1fr; }
  .trade{ grid-column:2; }
  .step{ grid-template-columns:3.1rem 1fr; }
  .fields div{ grid-template-columns:1fr; gap:.2rem; }
  .fields .lbl{ padding-top:0; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}


/* ============ paper grain ============ */
body::after{
  content:''; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ============ warm marks ============ */
.eyebrow{ color:var(--warm-dim); }
.tl div::before{ background:var(--warm); }
.tl .when{ color:var(--warm); }
.no{ color:var(--warm); }
figure.doc .cite{ color:var(--warm-dim); }

/* ============ pull quote ============ */
.pull{
  margin:3.2rem 0;
  padding:0 0 0 1.9rem;
  border-left:2px solid var(--warm-dim);
}
.pull p{
  font-size:1.42rem; font-weight:300; font-style:italic; line-height:1.42;
  color:var(--ink); max-width:34ch; margin:0 0 .8rem;
  letter-spacing:-.01em;
}
.pull cite{
  font-family:var(--mono); font-style:normal; font-weight:400;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ============ opening initial ============ */
.opening::first-letter{
  float:left; font-size:3.5em; line-height:.82;
  padding:.06em .1em 0 0; color:var(--warm);
  font-weight:400;
}

/* ============ portrait ============ */
figure.portrait{ margin:2.6rem 0; max-width:22rem; }
figure.portrait img{
  display:block; width:100%; height:auto; border-radius:2px;
  border:1px solid var(--rule); filter:saturate(.9);
}
figure.portrait figcaption{
  margin-top:.7rem; color:var(--muted); font-size:.86rem; font-style:italic;
}


/* ============ life strip ============ */
.strip{ margin:3.4rem 0 2.6rem; }
.strip .lbl{
  display:block; margin-bottom:1rem;
  font-family:var(--mono); font-weight:500; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--warm-dim);
}
.strip .frames{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:.7rem; align-items:end;
}
.strip figure{ margin:0; }
.strip img{
  display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover;
  border:1px solid var(--rule); border-radius:2px;
  filter:saturate(.85) contrast(1.02);
  transition:filter .25s ease, transform .25s ease;
}
.strip figure:hover img{ filter:saturate(1) contrast(1.04); transform:translateY(-2px); }
.strip .ph{
  aspect-ratio:3/4; border:1px dashed var(--rule); border-radius:2px;
  background:var(--panel);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-family:var(--mono); font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; padding:.5rem;
}
.strip figcaption{
  margin-top:.5rem; color:var(--muted);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  text-align:center;
}
@media (max-width:52rem){
  .strip .frames{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); }
}
@media (max-width:34rem){
  .strip .frames{ grid-template-columns:repeat(2,1fr); }
}


/* ============ light theme ============ */
[data-theme="light"]{
  --bg:#f7f1e4;
  --side:#efe6d3;
  --panel:#f2ead9;
  --ink:#241c12;
  --ink-dim:#4a3c2b;
  --muted:#7d6b52;
  --accent:#7a5122;
  --accent-deep:#5d3c17;
  --warm:#a8412a;
  --warm-dim:#87331f;
  --rule:#dccdb0;
  --rule-soft:#e9dcc4;
  --paper:#fffdf7;
}
[data-theme="light"] body::after{ opacity:.035; mix-blend-mode:multiply; }
[data-theme="light"] .row:hover{ background:rgba(122,81,34,.055); }
[data-theme="light"] ::selection{ background:var(--accent); color:#faf8f3; }
[data-theme="light"] .strip img{ filter:saturate(.92) contrast(1.01); }

/* ============ theme toggle ============ */
.themetoggle{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--muted);
  border:1px solid var(--rule); border-radius:2px;
  padding:.45rem .8rem; margin-bottom:1rem;
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.14em; text-transform:uppercase;
  transition:color .18s ease, border-color .18s ease;
}
.themetoggle:hover{ color:var(--accent); border-color:var(--accent-deep); }
.themetoggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ============ map frame ============ */
.mapframe{
  margin:2.4rem 0 1rem;
  border:1px solid var(--rule); border-radius:2px; overflow:hidden;
  background:var(--panel);
}
.mapframe iframe{ display:block; width:100%; height:34rem; border:0; }
@media (max-width:52rem){ .mapframe iframe{ height:26rem; } }


/* ============ card trio ============ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.cards figure{ margin:0; }
.cards img{
  display:block; width:100%; height:auto;
  background:var(--paper); border:1px solid var(--rule);
  border-radius:2px; padding:.35rem;
}
.cards figcaption{
  margin-top:.55rem; color:var(--ink-dim);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  font-style:normal; text-align:center;
}
.cards .cite{ display:block; margin-top:.25rem; font-size:.58rem; }
@media (max-width:44rem){ .cards{ grid-template-columns:1fr; gap:1.4rem; } }

/* ============ collapsible sidebar ============ */
.sidetoggle{
  position:fixed; top:1.1rem; left:1.1rem; z-index:40;
  appearance:none; cursor:pointer;
  width:2.4rem; height:2.4rem; padding:0;
  display:none; align-items:center; justify-content:center;
  background:var(--side); color:var(--accent);
  border:1px solid var(--rule); border-radius:2px;
  font-family:var(--mono); font-size:1rem; line-height:1;
}
.sidetoggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (min-width:64.01rem){
  html[data-side="off"] .sidebar{ transform:translateX(-100%); }
  html[data-side="off"] .main{ margin-left:0; }
  html[data-side="off"] .sidetoggle{ display:flex; }
  .sidebar{ transition:transform .28s ease; }
  .main{ transition:margin-left .28s ease; }
  .sidehide{
    appearance:none; cursor:pointer; background:transparent;
    color:var(--muted); border:0; padding:.2rem 0; margin-top:.9rem;
    font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  }
  .sidehide:hover{ color:var(--accent); }
}
@media (max-width:64rem){ .sidehide{ display:none; } }


/* ============ the mark ============ */
.wheel{ display:block; color:var(--accent-deep); margin:0 0 1.1rem; }
.wheel .rim{ stroke:var(--accent); }
.wheel .node{ fill:var(--warm); }
.brandwrap{ display:block; border:0; }
@media (max-width:64rem){
  .brandwrap{ display:flex; align-items:center; gap:.85rem; }
  .wheel{ width:34px; height:34px; margin:0; flex:0 0 auto; }
}


/* ============ hero ============ */
.hero{ margin:0 0 2.6rem; }
.hero img{
  display:block; width:100%; height:auto;
  max-height:26rem; object-fit:cover; object-position:center 42%;
  border:1px solid var(--rule); border-radius:2px;
  filter:saturate(.82) contrast(1.03);
}
.hero figcaption{
  margin-top:.8rem; color:var(--muted);
  font-size:.88rem; font-style:italic; line-height:1.55; max-width:none;
}
.hero .cite{
  display:block; margin-top:.35rem; font-style:normal;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--warm-dim);
}

/* ============ cross-stitch band ============ */
.stitch{
  height:14px; margin:3.4rem 0; border:0;
  background-repeat:repeat-x; background-position:center;
  background-size:auto 14px;
  opacity:.75;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='14' shape-rendering='crispEdges'><g fill='%23cf9f63'><rect x='20' y='0' width='2' height='2'/><rect x='18' y='2' width='2' height='2'/><rect x='22' y='2' width='2' height='2'/><rect x='16' y='4' width='2' height='2'/><rect x='24' y='4' width='2' height='2'/><rect x='14' y='6' width='2' height='2'/><rect x='26' y='6' width='2' height='2'/><rect x='16' y='8' width='2' height='2'/><rect x='24' y='8' width='2' height='2'/><rect x='18' y='10' width='2' height='2'/><rect x='22' y='10' width='2' height='2'/><rect x='20' y='12' width='2' height='2'/></g><g fill='%23b3573f'><rect x='20' y='6' width='2' height='2'/><rect x='0' y='6' width='2' height='2'/><rect x='6' y='6' width='2' height='2'/><rect x='34' y='6' width='2' height='2'/><rect x='40' y='6' width='2' height='2'/></g></svg>");
}
[data-theme="light"] .stitch{ opacity:.9; }


/* ============ red as a second voice ============ */
.eyebrow{ color:var(--warm); }
h2{ color:var(--ink); }
h2::before{
  content:''; display:inline-block; vertical-align:.28em;
  width:1.5rem; height:2px; margin-right:.75rem;
  background:var(--warm);
}
.tl .when{ color:var(--warm); }
.tl div::before{ background:var(--warm); }
.panel{ border-left-color:var(--warm); }
.panel .lbl{ color:var(--warm); }
.pull{ border-left-color:var(--warm); }
.opening::first-letter{ color:var(--warm); }
.strip .lbl{ color:var(--warm); }
.no{ color:var(--warm); }
a{ color:var(--warm); }
.sidebar nav a:hover,
.sidebar nav a[aria-current="page"]{ color:var(--warm); }
.brand{ color:var(--accent); }
.hero .cite, figure.doc .cite{ color:var(--accent-deep); }
::selection{ background:var(--warm); color:#f8f3e7; }
[data-theme="light"] ::selection{ background:var(--warm); color:#fffdf7; }
[data-theme="light"] .row:hover{ background:rgba(168,65,42,.05); }
.row:hover{ background:rgba(194,96,63,.055); }


/* ============ hero names ============ */
.heronames{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;
  margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--rule);
}
.heronames > div{ text-align:center; }
.hn{
  display:block; color:var(--ink);
  font-size:1.06rem; line-height:1.3; letter-spacing:-.005em;
}
.hnum{
  display:block; margin-top:.2rem; color:var(--warm);
  font-family:var(--mono); font-weight:500; font-size:.9rem;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.hrole{
  display:block; margin-top:.15rem; color:var(--muted);
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
}
@media (max-width:34rem){
  .heronames{ gap:.5rem; }
  .hn{ font-size:.86rem; }
  .hnum{ font-size:.78rem; }
  .hrole{ display:none; }
}

/* hero image sits flush; names are baked into the crop */
.hero img{ max-height:none; object-fit:contain; }


/* ============ her voice ============ */
audio.hear{
  display:block; width:100%; max-width:26rem;
  margin:1.1rem 0 .5rem; height:2.2rem;
  filter:sepia(.25) saturate(.7) hue-rotate(-12deg);
}
[data-theme="dark"] audio.hear{ filter:invert(.9) sepia(.3) saturate(.8) hue-rotate(-10deg); }
.hearlbl{
  display:block; color:var(--muted);
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase;
}


/* ============ sidebar fit ============ */
.sidebar{
  padding-top:2.2rem; padding-bottom:1.6rem;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior:contain;
}
.sidebar::-webkit-scrollbar{ width:0; height:0; }
.wheel{ margin-bottom:.85rem; }
.tagline{ margin-bottom:1.6rem; padding-bottom:1.2rem; }
.sidebar nav a{ padding:.58rem 0; }
.sidefoot{ margin-top:1.9rem; padding-top:1.1rem; }
@media (max-height:44rem) and (min-width:64.01rem){
  .wheel{ width:34px; height:34px; }
  .tagline{ display:none; }
  .sidebar nav a{ padding:.48rem 0; }
}


/* ============ hear Helen ============ */
.helenbtn{
  appearance:none; cursor:pointer; width:100%;
  display:flex; align-items:center; gap:.6rem;
  background:transparent; color:var(--warm);
  border:1px solid var(--warm-dim); border-radius:2px;
  padding:.6rem .8rem; margin:0 0 1.4rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.15em; text-transform:uppercase;
  transition:background .18s ease, color .18s ease;
}
.helenbtn:hover{ background:var(--warm); color:var(--paper); }
.helenbtn:focus-visible{ outline:2px solid var(--warm); outline-offset:2px; }
.hplay{ font-size:.6rem; line-height:1; }

dialog.helen{
  border:1px solid var(--rule); border-radius:3px;
  background:var(--panel); color:var(--ink-dim);
  padding:2rem 2.1rem 1.7rem; max-width:32rem; width:calc(100% - 2.4rem);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
dialog.helen::backdrop{ background:rgba(10,7,4,.72); }
[data-theme="light"] dialog.helen::backdrop{ background:rgba(60,44,26,.42); }
.hclose{
  position:absolute; top:.5rem; right:.7rem;
  appearance:none; cursor:pointer; background:none; border:0;
  color:var(--muted); font-size:1.5rem; line-height:1; padding:.2rem .4rem;
}
.hclose:hover{ color:var(--warm); }
.hlabel{
  margin:0 0 1rem; color:var(--warm);
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.hquote{
  margin:0 0 .9rem; padding:0; border:0;
  font-size:1.32rem; font-weight:300; font-style:italic; line-height:1.44;
  color:var(--ink); max-width:none;
}
.hattr{
  margin:0 0 1.2rem; color:var(--muted);
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase;
}
dialog.helen audio.hear{ width:100%; max-width:none; margin:0; }
@media (max-width:64rem){ .helenbtn{ margin-bottom:1rem; } }


/* ============ his hand ============ */
.sig{ margin:2.8rem 0 0; }
.sig img{
  display:block; width:190px; max-width:62%; height:auto;
  opacity:.6; filter:invert(1);
}
[data-theme="light"] .sig img{ filter:none; opacity:.7; }
.sig figcaption{
  margin-top:.45rem; color:var(--muted);
  font-family:var(--mono); font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase;
}


/* ============ collapse state must never leak into the narrow layout ============ */
@media (max-width:64rem){
  html[data-side="off"] .sidebar{ transform:none !important; }
  html[data-side="off"] .main{ margin-left:0 !important; }
  .sidetoggle{ display:none !important; }
  .sidehide{ display:none !important; }
}
body{ overflow-x:hidden; }


/* ============ the wheel, faint, behind everything ============ */
body::before{
  content:''; position:fixed; z-index:0; pointer-events:none;
  right:-16vmin; bottom:-22vmin;
  width:78vmin; height:78vmin;
  background-repeat:no-repeat; background-size:contain;
  opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32.0' cy='32.0' r='28.0' fill='none' stroke='%23ffffff' stroke-width='1.6'/><circle cx='32.0' cy='32.0' r='23.6' fill='none' stroke='%23ffffff' stroke-width='0.8'/><line x1='32.00' y1='25.40' x2='32.00' y2='8.40' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='35.30' y1='26.28' x2='43.80' y2='11.56' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='37.72' y1='28.70' x2='52.44' y2='20.20' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='38.60' y1='32.00' x2='55.60' y2='32.00' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='37.72' y1='35.30' x2='52.44' y2='43.80' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='35.30' y1='37.72' x2='43.80' y2='52.44' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='32.00' y1='38.60' x2='32.00' y2='55.60' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='28.70' y1='37.72' x2='20.20' y2='52.44' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='26.28' y1='35.30' x2='11.56' y2='43.80' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='25.40' y1='32.00' x2='8.40' y2='32.00' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='26.28' y1='28.70' x2='11.56' y2='20.20' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><line x1='28.70' y1='26.28' x2='20.20' y2='11.56' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/><circle cx='32.0' cy='32.0' r='6.6' fill='none' stroke='%23ffffff' stroke-width='1.5'/></svg>");
}
[data-theme="light"] body::before{
  opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32.0' cy='32.0' r='28.0' fill='none' stroke='%23000000' stroke-width='1.6'/><circle cx='32.0' cy='32.0' r='23.6' fill='none' stroke='%23000000' stroke-width='0.8'/><line x1='32.00' y1='25.40' x2='32.00' y2='8.40' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='35.30' y1='26.28' x2='43.80' y2='11.56' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='37.72' y1='28.70' x2='52.44' y2='20.20' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='38.60' y1='32.00' x2='55.60' y2='32.00' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='37.72' y1='35.30' x2='52.44' y2='43.80' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='35.30' y1='37.72' x2='43.80' y2='52.44' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='32.00' y1='38.60' x2='32.00' y2='55.60' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='28.70' y1='37.72' x2='20.20' y2='52.44' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='26.28' y1='35.30' x2='11.56' y2='43.80' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='25.40' y1='32.00' x2='8.40' y2='32.00' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='26.28' y1='28.70' x2='11.56' y2='20.20' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><line x1='28.70' y1='26.28' x2='20.20' y2='11.56' stroke='%23000000' stroke-width='0.9' stroke-linecap='round'/><circle cx='32.0' cy='32.0' r='6.6' fill='none' stroke='%23000000' stroke-width='1.5'/></svg>");
}
.main{ position:relative; z-index:1; }
.sidebar{ z-index:2; }
@media (max-width:64rem){
  body::before{ right:-28vmin; bottom:-28vmin; width:92vmin; height:92vmin; opacity:.04; }
}

/* ============ theme toggle stays reachable on phones ============ */
@media (max-width:64rem){
  .sidebar{ position:relative; }
  .sidefoot{
    display:block; position:absolute;
    top:1.5rem; right:1.5rem;
    margin:0; padding:0; border-top:0;
  }
  .sidefoot p{ display:none; }
  .sidehide{ display:none !important; }
  .themetoggle{ margin:0; }
  .brandwrap, .tagline{ padding-right:8rem; }
}
@media (max-width:34rem){
  .sidefoot{ top:1.2rem; right:1.1rem; }
  .themetoggle{ padding:.4rem .6rem; font-size:.58rem; letter-spacing:.1em; }
  .brandwrap, .tagline{ padding-right:6.5rem; }
}

/* ============ life-strip captions: year, then the detail ============ */
.strip .frames{ align-items:start; }
.strip figcaption{ text-transform:none; letter-spacing:0; }
.strip figcaption .yr{
  display:block;
  font-family:var(--mono); font-size:.6rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.strip figcaption .cap{
  display:block; margin-top:.28rem;
  font-family:var(--serif); font-size:.8rem; line-height:1.35;
  color:var(--muted); text-wrap:balance;
}
@media (max-width:34rem){
  .strip figcaption .cap{ font-size:.75rem; }
}

/* ============ place line at the foot of every page ============ */
footer.page .place{
  margin-top:.9rem;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-deep);
}

/* ============ alternating step bands, for readability ============ */
.step{
  padding-left:1.15rem; padding-right:1.15rem;
  margin-left:-1.15rem; margin-right:-1.15rem;
  border-radius:2px;
}
.step.alt{ background:rgba(194,96,63,.07); }
[data-theme="light"] .step.alt{ background:rgba(168,65,42,.055); }

/* ============ let the visual blocks use the full column ============ */
.hero img, .mapframe, .strip, .doc img, .cards{ width:100%; }
.tl, .fields{ max-width:52rem; }

/* ============ interactive hero: three faces ============ */
.faces{ position:relative; display:block; line-height:0; }
.faces img{ width:100%; height:auto; display:block; }
.face{
  position:absolute; top:0; bottom:0; width:33.333%;
  appearance:none; border:0; background:transparent; cursor:pointer;
  padding:0; margin:0;
  transition:background .18s ease, box-shadow .18s ease;
}
.face:nth-of-type(1){ left:0; }
.face:nth-of-type(2){ left:33.333%; }
.face:nth-of-type(3){ left:66.666%; }
.face:hover{ background:rgba(207,159,99,.16); }
.face:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
.face.on{
  background:rgba(207,159,99,.12);
  box-shadow:inset 0 0 0 2px var(--accent);
}
.facehint{
  margin:.6rem 0 0; max-width:none;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.facecard{
  position:relative;
  margin:1rem 0 .4rem; padding:1.4rem 1.6rem 1.3rem;
  background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--accent-deep);
  border-radius:2px;
}
.facecard[hidden]{ display:none; }
.fcclose{
  position:absolute; top:.5rem; right:.7rem;
  appearance:none; background:transparent; border:0; cursor:pointer;
  color:var(--muted); font-size:1.35rem; line-height:1; padding:.2rem .35rem;
}
.fcclose:hover{ color:var(--warm); }
.fcname{
  margin:0; max-width:none;
  font-family:var(--serif); font-size:1.35rem; color:var(--ink); letter-spacing:-.01em;
}
.fcwho{ margin:.15rem 0 .5rem; max-width:none; color:var(--ink-dim); font-size:.98rem; }
.fcnum{
  margin:0 0 .9rem; max-width:none;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.fcbody p{ margin:0 0 .5rem; font-size:.97rem; max-width:60ch; }
.fcfate{
  margin:.9rem 0 0; max-width:60ch; padding-top:.8rem;
  border-top:1px solid var(--rule-soft);
  font-size:.97rem;
}
.fcfate.lived{ color:var(--ink); }
.fcfate.died{ color:var(--warm); }
@media (max-width:44rem){
  .facecard{ padding:1.15rem 1.2rem 1.1rem; }
  .fcname{ font-size:1.2rem; }
}

/* ============ alternating bands on the timeline and the field table ============ */
.tl div{
  padding:.85rem 1rem; margin-left:-1rem; margin-right:-1rem;
  margin-bottom:.4rem; border-radius:2px;
}
.tl div::before{ left:-0.83rem; top:1.47rem; }
.tl div:nth-child(even){ background:rgba(194,96,63,.07); }
[data-theme="light"] .tl div:nth-child(even){ background:rgba(168,65,42,.055); }

.fields div{
  padding-left:1rem; padding-right:1rem;
  margin-left:-1rem; margin-right:-1rem;
}
.fields div:nth-child(even){ background:rgba(194,96,63,.07); }
[data-theme="light"] .fields div:nth-child(even){ background:rgba(168,65,42,.055); }

/* ============ the tap hint reads as a control, not a stray line ============ */
.facehint{
  margin:.55rem 0 0; text-align:right; color:var(--accent);
}
.hero figcaption{ margin-top:.55rem; }