/* Homepage, story-first rebuild (8 Oct 2026). Loaded after styles.css, homepage and method page only. */

/* ---------- hero: Helen's Road beside the 1946 portrait ---------- */
.hhero{ display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); gap:1.2rem; margin:0 0 1rem; align-items:stretch; }
.roadcard{ position:relative; display:block; overflow:hidden; border-radius:4px; background:#0d0f12; border:1px solid var(--rule); text-decoration:none; color:#f3ecdf; min-height:16rem; }
.roadcard img{ display:block; width:100%; height:100%; object-fit:cover; opacity:.78; transition:opacity .4s, transform 1.2s; }
.roadcard:hover img, .roadcard:focus-visible img{ opacity:.95; transform:scale(1.02); }
.roadcard .rcover{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:.7rem; padding:1.4rem; background:linear-gradient(180deg,rgba(13,15,18,0) 35%,rgba(13,15,18,.88) 100%); }
.roadcard .rck{ font:500 .72rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:#cf9f63; }
.roadcard .rct{ font:400 clamp(1.5rem,3.2vw,2.3rem)/1.1 var(--serif); margin:0; color:#f3ecdf; }
.roadcard .rcd{ font:400 1rem/1.45 var(--serif); color:#d9cfbf; margin:0; max-width:34rem; }
.roadcard .rcgo{ align-self:flex-start; display:inline-flex; align-items:center; gap:.6rem; margin-top:.3rem; padding:.75rem 1.15rem; border-radius:999px; background:#cf9f63; color:#17120d; font:500 .8rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.roadcard .rcgo .tri{ font-size:.9rem; }
.hportrait{ margin:0; display:flex; flex-direction:column; }
.hportrait img{ display:block; width:100%; flex:1; min-height:0; object-fit:cover; object-position:center 20%; border-radius:4px; border:1px solid var(--rule); }
.hportrait figcaption{ font:400 .74rem/1.45 var(--mono); color:var(--muted); margin-top:.5rem; }
.hhero-note{ font:400 .74rem/1.5 var(--mono); color:var(--muted); margin:0 0 2.4rem; }

/* ---------- section kicker numbers ---------- */
.sk{ display:block; font:500 .72rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin:0 0 .6rem; }
.hsec{ scroll-margin-top:1.5rem; }

/* ---------- intro ---------- */
.intro{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:2rem; align-items:start; }
.intro figure{ margin:0; }
.intro figure img{ display:block; width:100%; max-height:34rem; object-fit:cover; border-radius:4px; border:1px solid var(--rule); }
.intro figcaption{ font:400 .74rem/1.45 var(--mono); color:var(--muted); margin-top:.5rem; }
.intro .big{ font-size:1.25em; line-height:1.45; }

/* ---------- the process flow diagram ---------- */
.pfd{ margin:1.6rem 0 1rem; }
.pfd svg{ display:block; width:100%; height:auto; overflow:visible; }
.pfd .tall{ display:none; max-width:24rem; margin-inline:auto; }
.pfd .box{ fill:var(--panel); stroke:var(--accent); stroke-width:1.6; transition:fill .2s; }
.pfd a:hover .box, .pfd a:focus-visible .box{ fill:var(--rule); }
.pfd a:focus-visible{ outline:none; }
.pfd a:focus-visible .box{ stroke-width:3; }
.pfd .purgebox{ stroke:var(--warm); stroke-dasharray:5 4; }
.pfd .num{ font:500 13px var(--mono); letter-spacing:.14em; fill:var(--accent); }
.pfd .ttl{ font:500 22px var(--serif); fill:var(--ink); }
.pfd .dsc{ font:400 17px var(--serif); fill:var(--ink-dim); }
.pfd .ex{ font:italic 400 13px var(--serif); fill:var(--muted); }
.pfd .io{ font:500 13px var(--mono); letter-spacing:.2em; fill:var(--accent); }
.pfd .iot{ font:400 21px var(--serif); fill:var(--ink); }
.pfd .ios{ font:400 13px var(--mono); fill:var(--muted); }
.pfd .lnk{ font:400 11px var(--mono); letter-spacing:.08em; fill:var(--accent); }
.pfd .flow{ fill:none; stroke:var(--accent); stroke-width:2; }
.pfd .rec{ stroke-dasharray:6 5; }
.pfd .pur{ stroke:var(--warm); }
.pfd .rl{ font:italic 400 17px var(--serif); fill:var(--accent); }
.pfd .pl{ font:italic 400 16px var(--serif); fill:var(--warm); }
.pfd .ah{ fill:var(--accent); }
.pfd .ahp{ fill:var(--warm); }
.pfd-cap{ font:400 .8rem/1.5 var(--mono); color:var(--muted); margin:.4rem 0 2rem; }
/* reveal the units in order as the reader scrolls (only when JS has armed it) */
.pfd.arm .u{ opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease; transform-box:fill-box; }
.pfd.arm.on .u{ opacity:1; transform:none; }
.pfd.arm.on .u1{ transition-delay:.0s } .pfd.arm.on .u2{ transition-delay:.35s } .pfd.arm.on .u3{ transition-delay:.7s }
.pfd.arm.on .u4{ transition-delay:1.05s } .pfd.arm.on .u5{ transition-delay:1.4s } .pfd.arm.on .u6{ transition-delay:1.75s }
.pfd.arm.on .u7{ transition-delay:2.1s }  .pfd.arm.on .u8{ transition-delay:2.45s }
@media (prefers-reduced-motion: reduce){ .pfd.arm .u{ opacity:1; transform:none; transition:none; } }

.steps4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0 0 1.6rem; padding:0; list-style:none; }
.steps4 li{ border-top:2px solid var(--accent); padding-top:.7rem; }
.steps4 b{ display:block; font:500 .74rem/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:.35rem; }
.steps4 span{ display:block; font-size:.98rem; line-height:1.45; color:var(--ink-dim); }
.steps4 i{ display:block; margin-top:.4rem; font-size:.92rem; color:var(--muted); }
.rules4{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:0 0 1rem; }
.rules4 .panel{ margin:0; }

/* ---------- hiccups ---------- */
.hgroup{ margin:2.4rem 0 0; scroll-margin-top:1.5rem; }
.hgroup > .gk{ display:flex; align-items:baseline; gap:.8rem; font:500 .74rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--rule); padding-bottom:.55rem; margin:0 0 1.2rem; }
.hgroup > .gk a{ margin-left:auto; color:var(--muted); letter-spacing:.08em; text-decoration:none; }
.hgroup > .gk a:hover{ color:var(--accent); }
.hic{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:1.6rem; align-items:start; margin:0 0 2.2rem; }
.hic.solo{ grid-template-columns:minmax(0,1fr); max-width:46rem; }
.hic h3{ margin-top:0; }
.hic p{ margin:0 0 .8rem; }
.hic .try{ font:400 .9rem/1.5 var(--mono); color:var(--accent); border-left:2px solid var(--accent); padding-left:.8rem; }
.hic figure{ margin:0; }
.hic figure a{ display:block; }
.hic figure img{ display:block; width:100%; height:auto; border-radius:3px; border:1px solid var(--rule); background:var(--paper); }
.hic figcaption{ font:400 .9rem/1.5 var(--serif); color:var(--ink-dim); margin-top:.55rem; }
.hic figcaption .tr{ display:block; font:400 .8rem/1.5 var(--mono); color:var(--ink); margin:.3rem 0; }
.hic figcaption .cite{ display:block; font:400 .72rem/1.45 var(--mono); color:var(--muted); margin-top:.3rem; }

/* ---------- mistakes ---------- */
.mistakes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.2rem 0 1rem; }
.mk{ border:1px solid var(--rule); border-left:3px solid var(--warm); border-radius:3px; padding:1rem 1.1rem; background:var(--panel); }
.mk h3{ margin:0 0 .45rem; font-size:1.1rem; }
.mk p{ margin:0 0 .5rem; font-size:.98rem; line-height:1.5; color:var(--ink-dim); }
.mk .why{ font:400 .82rem/1.5 var(--mono); color:var(--ink); }
.mk .why em{ font-style:normal; color:var(--warm); letter-spacing:.1em; text-transform:uppercase; font-size:.72rem; margin-right:.4rem; }
.mk .lesson{ margin:0; font-style:italic; color:var(--accent); }

/* ---------- expectations ---------- */
.expect{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.2rem 0 1.4rem; }
.expect div{ border-top:2px solid var(--rule); padding-top:.7rem; }
.expect b{ display:block; font:400 1.9rem/1.1 var(--serif); color:var(--accent); margin-bottom:.35rem; }
.expect span{ font-size:.98rem; line-height:1.45; color:var(--ink-dim); }
figure.roster{ margin:0 0 2rem; }
figure.roster img{ display:block; width:100%; height:auto; border-radius:3px; border:1px solid var(--rule); background:var(--paper); }
figure.roster figcaption{ font:400 .9rem/1.5 var(--serif); color:var(--ink-dim); margin-top:.55rem; }
figure.roster .cite{ display:block; font:400 .72rem/1.45 var(--mono); color:var(--muted); margin-top:.3rem; }
figure.wide{ margin:1.4rem 0 2rem; }
figure.wide img{ display:block; width:100%; height:auto; border-radius:3px; border:1px solid var(--rule); }
figure.wide figcaption{ font:400 .9rem/1.5 var(--serif); color:var(--ink-dim); margin-top:.55rem; }
figure.wide .cite{ display:block; font:400 .72rem/1.45 var(--mono); color:var(--muted); margin-top:.3rem; }

/* ---------- call to action ---------- */
.cta{ margin:2.6rem 0 2rem; padding:2rem 1.8rem; border:1px solid var(--accent-deep); border-radius:4px; background:var(--panel); }
.cta .line{ font:400 clamp(1.35rem,2.6vw,1.8rem)/1.3 var(--serif); margin:0 0 1rem; color:var(--ink); }
.cta .line + .line{ color:var(--accent); }
.cta .acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.2rem 0 .6rem; }
.cta .acts a{ display:inline-block; padding:.75rem 1.1rem; border-radius:999px; border:1px solid var(--accent); font:500 .78rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--accent); }
.cta .acts a.pri{ background:var(--accent); color:var(--bg); }
.cta .small{ font-size:.95rem; color:var(--ink-dim); margin:.8rem 0 0; }

/* ---------- tablets and phones ---------- */
@media (max-width:52rem){
  .hhero{ grid-template-columns:minmax(0,1fr); }
  .hportrait{ display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.9rem; align-items:end; }
  .hportrait img{ height:auto; aspect-ratio:900/1368; flex:none; }
  .intro{ grid-template-columns:minmax(0,1fr); }
  .intro figure{ max-width:22rem; }
  .intro figure img{ max-height:26rem; }
  .pfd .wide{ display:none; }
  .pfd .tall{ display:block; }
  .steps4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hic{ grid-template-columns:minmax(0,1fr); gap:1rem; }
  .mistakes{ grid-template-columns:minmax(0,1fr); }
  .expect{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:34rem){
  .roadcard{ min-height:0; }
  .roadcard img{ height:auto; aspect-ratio:16/9; opacity:.95; }
  .roadcard .rcover{ position:static; padding:1rem; background:#0d0f12; }
  .roadcard .rcd{ font-size:.95rem; }
  .steps4, .rules4{ grid-template-columns:minmax(0,1fr); }
  .cta{ padding:1.4rem 1.1rem; }
}

/* ---------- wide screens: hero and evidence use the full width; prose keeps its measure ---------- */
@media (min-width:52.01rem){
  .roadcard .rcover{ justify-content:center; padding:2rem 2.2rem;
    background:linear-gradient(90deg,rgba(13,15,18,.94) 0%,rgba(13,15,18,.86) 42%,rgba(13,15,18,.25) 72%,rgba(13,15,18,0) 100%); }
  .roadcard .rct, .roadcard .rcd{ max-width:26rem; }
  .roadcard img{ opacity:.9; }
}
@media (min-width:72rem){
  .wrap > .hhero, .wrap > .hhero-note, .wrap > section.hsec{ grid-column:1 / -1; }
  .hhero{ grid-template-columns:minmax(0,2.4fr) minmax(0,1fr); gap:1.4rem; }
  .roadcard{ min-height:26rem; }
  /* inside a full-width section, text stays in the centre column; evidence goes wide */
  section.hsec > *{ max-width:46rem; margin-inline:auto; }
  section.hsec > .pfd, section.hsec > .steps4, section.hsec > .rules4, section.hsec > .hero,
  section.hsec > figure.wide, section.hsec > .strip, section.hsec > .pull, section.hsec > .intro,
  section.hsec > .hgroup, section.hsec > .mistakes, section.hsec > .expect, section.hsec > figure.roster{ max-width:none; }
  section.hsec > .sk{ display:block; }
  .intro{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:3rem; }
  .pfd .wide{ max-width:68rem; margin-inline:auto; }
  .steps4, .rules4{ max-width:68rem !important; }
  .rules4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hic{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:2.4rem; }
  .hic.solo{ max-width:46rem; margin-inline:auto; }
  .mistakes{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cta{ grid-column:1 / -1; max-width:60rem; margin-inline:auto; }
}
@media (min-width:72rem){
  .wrap:has(> .hhero) > .eyebrow, .wrap:has(> .hhero) > h1, .wrap:has(> .hhero) > .claim{ grid-column:1 / -1; }
  .wrap:has(> .hhero) > .claim{ max-width:44rem; }
}
/* show Sam's whole photo, never cropped */
.intro figure img, .intro figure img[src]{ max-height:none; height:auto; object-fit:contain; }
.intro figure{ max-width:24rem; justify-self:center; }
/* hero = the map + the three men, side by side (Sam, 8 Oct) */
.hhero figure.hero{ margin:0; min-width:0; }
.hhero figure.hero figcaption{ font-size:.92rem; }
.jportrait{ margin:0; }
.jportrait img{ display:block; width:100%; height:auto; border-radius:4px; border:1px solid var(--rule); }
.jportrait figcaption{ font:400 .74rem/1.45 var(--mono); color:var(--muted); margin-top:.5rem; }
@media (min-width:52.01rem){
  .hhero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
  .roadcard{ min-height:0; aspect-ratio:1418/762; }
  .roadcard img{ position:absolute; inset:0; }
  .roadcard .rcover{ padding:1.4rem 1.6rem; }
  .roadcard .rct{ font-size:clamp(1.35rem,2.1vw,2rem); }
  .roadcard .rcd{ font-size:.95rem; max-width:22rem; }
}
@media (min-width:72rem){
  .hhero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .roadcard{ min-height:0; }
}
@media (max-width:52rem){ .jportrait{ max-width:18rem; } }
/* hero grid, balanced (Sam, 8 Oct): map | men, then the two small notes, then the caption across both */
.hhero{ margin-bottom:2.6rem; row-gap:.6rem; }
.hhero .hhero-note{ margin:0; }
.hhero .facehint{ margin:0; }
.hhero .herocap{ margin:.4rem 0 0; color:var(--muted); font-size:.92rem; font-style:italic; line-height:1.55; max-width:none; }
.hhero .herocap .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); }
.hhero .facecard{ margin:.4rem 0 0; }
.hhero .roadcard{ order:1 } .hhero .hhero-note{ order:2 } .hhero figure.hero{ order:3 } .hhero .facehint{ order:4 } .hhero .facecard{ order:5 } .hhero .herocap{ order:6 }
.hhero figure.hero img{ max-height:none; }
@media (min-width:52.01rem){
  .hhero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; column-gap:1.4rem; }
  .hhero .roadcard{ grid-row:1; grid-column:1; aspect-ratio:auto; height:100%; }
  .hhero figure.hero{ grid-row:1; grid-column:2; }
  .hhero .hhero-note{ grid-row:2; grid-column:1; }
  .hhero .facehint{ grid-row:2; grid-column:2; }
  .hhero .facecard{ grid-row:3; grid-column:1 / -1; }
  .hhero .herocap{ grid-row:4; grid-column:1 / -1; }
}
/* who I am: the kicker lines up with the text, not the centre column */
@media (min-width:72rem){
  #why > .sk, #why > .intro{ max-width:66rem; }
  #why .intro figure{ justify-self:end; }
}

/* ---------- databases page: search and filters ---------- */
.dbtools{ position:sticky; top:0; z-index:5; margin:1.6rem 0 1rem; padding:1rem 1.1rem; background:var(--panel); border:1px solid var(--rule); border-radius:4px; display:grid; gap:.8rem; }
.dbsearch span{ display:block; font:500 .7rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:.45rem; }
.dbsearch input{ width:100%; box-sizing:border-box; padding:.75rem .9rem; font:400 1.05rem/1.3 var(--serif); color:var(--ink); background:var(--bg); border:1px solid var(--rule); border-radius:3px; }
.dbsearch input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.dbcost, .dbjump{ display:flex; flex-wrap:wrap; gap:.45rem; }
.dbcost button, .dbjump a{ font:500 .72rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:.55rem .8rem; border-radius:999px; border:1px solid var(--rule); background:transparent; color:var(--ink-dim); text-decoration:none; cursor:pointer; }
.dbcost button[aria-pressed="true"]{ background:var(--accent); color:var(--bg); border-color:var(--accent); }
.dbjump a:hover, .dbcost button:hover{ border-color:var(--accent); color:var(--accent); }
.dbcost button[aria-pressed="true"]:hover{ color:var(--bg); }
.dbcount{ margin:0; font:400 .78rem/1 var(--mono); color:var(--muted); }
.dbnone{ font-style:italic; color:var(--muted); }
h2.dbh{ scroll-margin-top:16rem; }
.db[hidden], h2.dbh[hidden], .dbgrid[hidden]{ display:none !important; }
@media (max-width:52rem){ .dbtools{ position:static; } .dbjump{ display:none; } h2.dbh{ scroll-margin-top:1rem; } }

/* homepage: a big door into the databases */
.dbdoor{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1.2rem 0 1.6rem; padding:1.1rem 1.3rem; border:1px solid var(--accent-deep); border-radius:4px; background:var(--panel); text-decoration:none; color:var(--ink); }
.dbdoor b{ display:block; font:400 1.3rem/1.2 var(--serif); }
.dbdoor span{ font-size:.95rem; color:var(--ink-dim); }
.dbdoor i{ font-style:normal; font:500 .75rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap; }
.dbdoor:hover{ border-color:var(--accent); }
/* birth-date matrix table */
.bdm{ width:100%; border-collapse:collapse; margin:.2rem 0 1rem; font-size:.92rem; }
.bdm caption{ text-align:left; font:500 .7rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding-bottom:.5rem; }
.bdm th{ text-align:left; font:500 .7rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule); padding:.35rem .5rem .35rem 0; }
.bdm td{ border-bottom:1px solid var(--rule-soft); padding:.4rem .5rem .4rem 0; color:var(--ink-dim); vertical-align:top; }
.bdm td:first-child{ font-family:var(--mono); font-size:.82rem; color:var(--ink); white-space:nowrap; }
/* hints page */
.hintgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.2rem 0 1rem; }
.hint{ border:1px solid var(--rule); border-top:2px solid var(--accent); border-radius:3px; padding:.9rem 1rem; background:var(--panel); }
.hint b{ display:block; font:500 1.08rem/1.3 var(--serif); color:var(--ink); margin-bottom:.35rem; }
.hint p{ margin:0; font-size:.98rem; line-height:1.5; color:var(--ink-dim); }
@media (min-width:72rem){ .hintgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } section.hsec > .hintgrid{ max-width:none; } }
@media (max-width:34rem){ .hintgrid{ grid-template-columns:minmax(0,1fr); } }

/* teaching records: numbered boxes on the record, a key beneath (green true, red false, gold what it says) */
.trec{ margin:0; }
.trec-img{ position:relative; line-height:0; }
.trec-img img{ display:block; width:100%; height:auto; border-radius:3px; border:1px solid var(--rule); background:var(--paper); }
.tb{ position:absolute; border:2px solid var(--accent); border-radius:3px; box-shadow:0 0 0 2px rgba(0,0,0,.35); pointer-events:none; }
.tb.ok{ border-color:#5fae6e; } .tb.no{ border-color:#d0573f; }
.tb i{ position:absolute; top:-.7rem; left:-.7rem; width:1.3rem; height:1.3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font:600 .68rem/1 var(--mono); font-style:normal; color:#17120d; background:var(--accent); }
.tb.ok i{ background:#5fae6e; } .tb.no i{ background:#d0573f; color:#fff; }
.trec-key{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.5rem; }
.trec-key li{ display:grid; grid-template-columns:1.7rem minmax(0,1fr); column-gap:.5rem; align-items:start; }
.trec-key li > i{ grid-row:1 / span 2; width:1.3rem; height:1.3rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font:600 .68rem/1 var(--mono); font-style:normal; color:#17120d; background:var(--accent); margin-top:.1rem; }
.trec-key li.ok > i{ background:#5fae6e; } .trec-key li.no > i{ background:#d0573f; color:#fff; }
.trec-key .says{ font:400 .82rem/1.4 var(--mono); color:var(--ink); }
.trec-key li.no .says{ text-decoration:line-through; text-decoration-color:#d0573f; }
.trec-key .means{ font-size:.95rem; line-height:1.4; color:var(--ink-dim); }
.trec-key li.ok .means::before{ content:"\2713\00a0"; color:#5fae6e; }
.trec-key li.no .means::before{ content:"\2717\00a0"; color:#d0573f; }
.trec figcaption{ font:400 .9rem/1.5 var(--serif); color:var(--ink-dim); margin-top:.7rem; }
.trec figcaption .tr{ display:block; font:400 .8rem/1.5 var(--mono); color:var(--ink); margin:.3rem 0; }
.trec figcaption .cite{ display:block; font:400 .72rem/1.45 var(--mono); color:var(--muted); margin-top:.3rem; }
.trec-go{ display:block; width:100%; margin:.8rem 0 0; padding:.8rem 1rem; border-radius:3px; border:1px dashed var(--accent); background:transparent; color:var(--accent); font:500 .78rem/1.35 var(--mono); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; text-align:left; }
.trec-go:hover{ background:var(--panel); }
.js .trec.quiz:not(.shown) .tb, .js .trec.quiz:not(.shown) .trec-key{ display:none; }
.trec.quiz.shown .trec-go{ border-style:solid; color:var(--ink-dim); border-color:var(--rule); }
[data-theme="light"] .tb{ box-shadow:0 0 0 2px rgba(255,255,255,.6); }

/* ---------- the block flow diagram in Sam's brand colours (business card: gold, terracotta, salmon, bronze, cream) ---------- */
.pfd .u2 .box{ fill:#cf9f63; stroke:#cf9f63; }
.pfd .u3 .box{ fill:#c96b49; stroke:#c96b49; }
.pfd .u4 .box{ fill:#e08a6a; stroke:#e08a6a; }
.pfd .u5 .box{ fill:#a97a44; stroke:#a97a44; }
.pfd .u2 text, .pfd .u3 text, .pfd .u4 text, .pfd .u5 text{ fill:#1a120b !important; }
.pfd .u3 text, .pfd .u5 text{ fill:#fff7ec !important; }
.pfd .u2 .num, .pfd .u3 .num, .pfd .u4 .num, .pfd .u5 .num{ opacity:.8; }
.pfd .u2 .ex, .pfd .u3 .ex, .pfd .u4 .ex, .pfd .u5 .ex{ opacity:.85; }
.pfd a:hover .box, .pfd a:focus-visible .box{ filter:brightness(1.12); }
.pfd a.u2:hover .box, .pfd a.u3:hover .box, .pfd a.u4:hover .box, .pfd a.u5:hover .box{ fill-opacity:1; }
.pfd .u2 .box, .pfd .u3 .box, .pfd .u4 .box, .pfd .u5 .box{ filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.pfd .u3 .flow{ stroke:#cf9f63; } .pfd .u4 .flow{ stroke:#c96b49; } .pfd .u5 .flow{ stroke:#e08a6a; } .pfd .u6 .flow{ stroke:#a97a44; }
.pfd .io{ fill:#e08a6a; } .pfd .iot{ fill:var(--ink); font-weight:500; }
.pfd .rec{ stroke:#e08a6a; stroke-width:2.4; } .pfd .rl{ fill:#e08a6a; }
.pfd .purgebox{ fill:transparent; stroke:#f1e7d5; stroke-opacity:.55; }
.pfd .u8 .ttl, .pfd .u8 .dsc{ fill:var(--ink-dim); }
.pfd .pur{ stroke:#f1e7d5; stroke-opacity:.6; } .pfd .ahp{ fill:#f1e7d5; fill-opacity:.7; } .pfd .pl{ fill:var(--muted); }

/* ---------- one left edge on every page (Sam: use the space properly) ----------
   styles.css centres a 46rem text column with empty gutters either side; instead the text
   column sits on the left and the evidence (cards, records, diagrams) runs the full width. */
@media (min-width:72rem){
  .wrap{ grid-template-columns:minmax(0,48rem) minmax(0,1fr); }
  .wrap > *{ grid-column:1 / 2; }
  .wrap > .pair, .wrap > .dbgrid, .wrap > .hero, .wrap > .routes, .wrap > .strip, .wrap > .mapframe,
  .wrap > .flow, .wrap > .pull, .wrap > figure.doc, .wrap > .fields, .wrap > hr.stitch, .wrap > figure.pfd,
  .wrap > .hhero, .wrap > .hhero-note, .wrap > section.hsec, .wrap > .dbtools, .wrap > .cta, .wrap > .kind,
  .wrap > h2.dbh, .wrap > .dbnone{ grid-column:1 / -1; }
  .wrap:has(> .hhero) > .eyebrow, .wrap:has(> .hhero) > h1, .wrap:has(> .hhero) > .claim{ grid-column:1 / -1; }
  section.hsec > *{ margin-inline:0; }
  #why > .sk, #why > .intro{ max-width:none; }
  .hic.solo{ margin-inline:0; }
  .cta{ max-width:none; margin-inline:0; }
  .dbtools{ grid-template-columns:minmax(0,1.2fr) auto; align-items:end; }
  .dbtools .dbsearch{ grid-column:1; } .dbtools .dbcost{ grid-column:2; }
  .dbtools .dbjump, .dbtools .dbcount{ grid-column:1 / -1; }
  .pfd .wide{ margin-inline:0; }
  .steps4, .rules4{ margin-inline:0; }
  .wrap > .step{ grid-column:1 / -1; max-width:62rem; }
}

/* ---------- method page tabs ---------- */
.mtabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0 1.6rem; padding:.6rem 0; position:sticky; top:0; z-index:6; background:var(--bg); border-bottom:1px solid var(--rule); }
.mt{ cursor:pointer; padding:.7rem 1.05rem; border-radius:999px; border:2px solid transparent; font:500 .78rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#1a120b; opacity:.62; transition:opacity .2s, transform .2s; }
.mt:hover{ opacity:.9; } .mt[aria-selected="true"]{ opacity:1; transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.35); border-color:var(--ink); }
.mt1{ background:#cf9f63; } .mt2{ background:#e08a6a; } .mt3{ background:#c96b49; color:#fff7ec; } .mt4{ background:#a97a44; color:#fff7ec; } .mt5{ background:#f1e7d5; }
.js .mpanel:not(.on){ display:none; }
.mpanel{ scroll-margin-top:5rem; }
.mpanel [id]{ scroll-margin-top:5.5rem; }
@media (min-width:72rem){
  .wrap > .mtabs, .wrap > .mpanel{ grid-column:1 / -1; }
  .mpanel > h2, .mpanel > p, .mpanel > h3, .mpanel > .panel, .mpanel > .step{ max-width:62rem; }
}
@media (max-width:34rem){ .mt{ padding:.6rem .8rem; font-size:.7rem; } .mtabs{ position:static; } }

/* ---------- be kind to yourself + expectations cards, pull quotes ---------- */
.kindgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.2rem 0 1.6rem; }
.kc{ border-radius:10px; padding:1.1rem 1.2rem; background:var(--panel); border:1px solid var(--rule); border-top:4px solid #e08a6a; }
.kc:nth-child(3n+2){ border-top-color:#cf9f63; } .kc:nth-child(3n){ border-top-color:#a97a44; }
.kc b{ display:block; font:500 1.1rem/1.3 var(--serif); color:var(--ink); margin-bottom:.4rem; }
.kc p{ margin:0; font-size:.98rem; line-height:1.5; color:var(--ink-dim); }
.kind{ margin-top:2.2rem; padding:1.6rem 1.4rem; border-radius:12px; background:linear-gradient(135deg,rgba(224,138,106,.10),rgba(207,159,99,.06)); border:1px solid rgba(224,138,106,.25); }
.kind .kindgrid{ margin-bottom:0; }
.expect b{ color:#e08a6a; font-size:2.4rem; }
.bq{ font:italic 400 clamp(1.3rem,2.4vw,1.8rem)/1.35 var(--serif); color:#e08a6a; border-left:4px solid #c96b49; padding:.2rem 0 .2rem 1rem; margin:.5rem 0 1.6rem; max-width:44rem; }
@media (max-width:52rem){ .kindgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:34rem){ .kindgrid{ grid-template-columns:minmax(0,1fr); } .kind{ padding:1.2rem 1rem; } }
@media (min-width:72rem){ .hintgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:72rem){ section.hsec > .kindgrid, section.hsec > .hintgrid{ max-width:none; } .kindgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* hero photo title (Sam): reads like the map card's heading */
.herohead{ display:flex; flex-direction:column; gap:.35rem; margin:0 0 .7rem; }
.herohead .rck{ font:500 .72rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:#cf9f63; }
.herohead .hht{ font:400 clamp(1.25rem,2vw,1.75rem)/1.15 var(--serif); color:var(--ink); }
@media (min-width:52.01rem){ .hhero figure.hero{ display:flex; flex-direction:column; justify-content:space-between; } }
.hhero .roadcard{ order:1 } .hhero .hhero-note{ order:2 } .hhero .herohead{ order:3; margin:0 } .hhero figure.hero{ order:4 } .hhero .facehint{ order:5 } .hhero .facecard{ order:6 } .hhero .herocap{ order:7 }
@media (min-width:52.01rem){
  .hhero .roadcard{ grid-row:1 / span 2; grid-column:1; }
  .hhero .herohead{ grid-row:1; grid-column:2; align-self:end; }
  .hhero figure.hero{ grid-row:2; grid-column:2; display:block; }
  .hhero .hhero-note{ grid-row:3; grid-column:1; }
  .hhero .facehint{ grid-row:3; grid-column:2; }
  .hhero .facecard{ grid-row:4; grid-column:1 / -1; }
  .hhero .herocap{ grid-row:5; grid-column:1 / -1; }
}
@media (min-width:52.01rem){ .hhero .roadcard{ height:auto; align-self:stretch; } }
/* the three Helmans as big as possible (Sam): photo column wider than the map card */
@media (min-width:52.01rem){ .hhero{ grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) !important; } .herohead .hht{ font-size:clamp(1.2rem,1.7vw,1.6rem); } }

/* ---------- design intern fixes (8 Oct) ---------- */
/* badges sit inside their box, so neighbouring boxes never collide */
.tb i{ top:2px; left:2px; }
/* readable minimum for the small mono labels */
.eyebrow, .facehint, .hhero .facehint, figcaption, .place, .db .tag, .sp, .helenbtn, .herohead .rck, .roadcard .rck, .sk, .dbcount{ font-size:max(.7rem,11px); }
.sk{ line-height:1.5; }
/* the diagram fills its width; the wide version from tablet up */
.pfd .wide{ max-width:none; width:100%; }
@media (max-width:52rem) and (min-width:37.51rem){ .pfd .wide{ display:block; } .pfd .tall{ display:none; } }
/* homepage portraits end on the same right edge */
.intro figure{ justify-self:end; }
/* tabs: easier to read and tap */
.mt{ opacity:.8; min-height:44px; color:#1a120b !important; }
.mt[aria-selected="true"]{ opacity:1; }
@media (max-width:34rem){
  .mtabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mtabs::-webkit-scrollbar{ display:none; }
  .mt{ flex:0 0 auto; white-space:nowrap; }
  /* the database door stacks on phones */
  .dbdoor{ flex-direction:column; align-items:flex-start; }
  /* records: wide enough to read, swipe sideways */
  .trec{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .trec-img{ min-width:560px; }
  .trec::before{ content:"Swipe sideways to read the whole record"; display:block; font:400 11px/1.4 var(--mono); color:var(--muted); margin-bottom:.4rem; position:sticky; left:0; }
  .trec-key, .trec figcaption, .trec-go{ position:sticky; left:0; max-width:calc(100vw - 2.4rem); }
  .tb i{ width:1.1rem; height:1.1rem; font-size:.6rem; }
}
/* database cards keep a margin on small screens */
@media (max-width:78rem){ .db{ margin-left:0 !important; margin-right:0 !important; } }
/* light mode: darker brand tones for text so it stays readable on cream */
[data-theme="light"] .bq, [data-theme="light"] .expect b, [data-theme="light"] .pfd .io, [data-theme="light"] .pfd .rl{ color:#a8492c; fill:#a8492c; }
[data-theme="light"] .pfd .rec{ stroke:#a8492c; }
[data-theme="light"] .herohead .rck, [data-theme="light"] .sk{ color:#8a6230; }
[data-theme="light"] .roadcard .rck{ color:#cf9f63; }
[data-theme="light"] .pfd .purgebox{ stroke:#7d6b52; } [data-theme="light"] .pfd .pur{ stroke:#7d6b52; } [data-theme="light"] .pfd .ahp{ fill:#7d6b52; }
/* hero title and place/date on one line, so the photo keeps the height (Sam) */
.herohead{ flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:.9rem; row-gap:.2rem; }
/* the finds: Helen's 1946 portrait + the Dror photo, titled like the hero (Sam: front-page things) */
.finds{ display:grid; grid-template-columns:minmax(0,1fr); gap:1.4rem; margin:0 0 2.6rem; }
.find{ margin:0; display:flex; flex-direction:column; }
.find img{ display:block; width:100%; height:auto; border-radius:4px; border:1px solid var(--rule); }
.find figcaption{ font:italic 400 .92rem/1.5 var(--serif); color:var(--muted); margin-top:.55rem; }
.find figcaption .cite{ display:block; margin-top:.35rem; font-style:normal; font-family:var(--mono); font-size:max(.64rem,11px); letter-spacing:.13em; text-transform:uppercase; color:var(--warm-dim); }
.find .herohead{ margin-bottom:.7rem; }
@media (min-width:52.01rem){
  .finds{ grid-template-columns:minmax(0,1fr) minmax(0,2.15fr); align-items:start; }
  .find-por img{ aspect-ratio:900/1368; object-fit:cover; }
}
@media (max-width:52rem){ .find-por{ max-width:22rem; } }
@media (min-width:72rem){ .wrap > .finds{ grid-column:1 / -1; } }
/* researcher page finds */
.about-por{ max-width:24rem; margin:0 0 1.6rem; }
.wrap > figure.find{ margin:1.2rem 0 2rem; }
@media (min-width:72rem){ .wrap > figure.find:not(.about-por){ grid-column:1 / -1; max-width:62rem; } }

/* ---------- diagram: a travelling dot (like the map) and one real record under each step ---------- */
.pfd .dot{ fill:#fff7ec; filter:drop-shadow(0 0 6px #e08a6a) drop-shadow(0 0 12px rgba(224,138,106,.7)); }
.pfd.arm .pfd-dot{ opacity:0; transition:opacity .6s 2.6s; } .pfd.arm.on .pfd-dot{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .pfd-dot{ display:none; } }
.pfd-recs{ display:grid; grid-template-columns:repeat(4,16.35%); column-gap:2.52%; padding-left:13.2%; margin-top:.3rem; }
.pr{ display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:var(--ink-dim); }
.pr img{ display:block; width:100%; height:4.2rem; object-fit:cover; object-position:left center; border-radius:6px; border:2px solid #cf9f63; background:var(--paper); transition:transform .2s; }
.pr2 img{ border-color:#c96b49; } .pr3 img{ border-color:#e08a6a; } .pr4 img{ border-color:#a97a44; }
.pr:hover img{ transform:translateY(-2px); }
.pr span{ font:400 max(.72rem,11px)/1.35 var(--mono); }
@media (max-width:37.5rem){
  .pfd-recs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; padding-left:0; margin-top:1rem; }
  .pr img{ height:4.6rem; }
}
/* thumbnails sit exactly under their boxes (percentages of the area after the left padding) */
.pfd-recs{ grid-template-columns:repeat(4,18.84%); column-gap:2.9%; }
.pr img{ height:auto; aspect-ratio:3/1; object-fit:cover; object-position:center; }
@media (max-width:37.5rem){ .pfd-recs{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:.9rem; } }
/* reopen: set-aside leads can come back */
.pfd .reo{ stroke:#f1e7d5; stroke-opacity:.45; stroke-dasharray:3 5; stroke-width:1.8; }
.pfd .rl2{ font:italic 400 15px var(--serif); fill:var(--muted); }
[data-theme="light"] .pfd .reo{ stroke:#7d6b52; }
.pfd .xo{ font:500 18px var(--serif); fill:var(--ink-dim); text-decoration:line-through; text-decoration-color:#d0573f; }
.pfd .xs{ font:400 14px var(--serif); fill:var(--muted); }

/* ---------- What I do: three doors (Sam, 9 Oct 2026) ---------- */
.doorsec h2{ max-width:30ch; }
.doors{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.4rem 0 .8rem; }
.door{ display:flex; flex-direction:column; gap:.55rem; padding:1.2rem 1.25rem 1.1rem; border:1px solid var(--rule); border-top:3px solid var(--accent); border-radius:4px; background:var(--panel); color:var(--ink); text-decoration:none; transition:border-color .2s, transform .2s; }
.door:hover, .door:focus-visible{ border-color:var(--accent); transform:translateY(-2px); }
.door .dk{ font:500 .7rem/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.door b{ font:400 1.3rem/1.2 var(--serif); }
.door span:not(.dk){ font-size:.98rem; line-height:1.5; color:var(--ink-dim); }
.door em{ color:var(--ink); font-style:italic; }
.door i{ margin-top:auto; padding-top:.4rem; font:500 .74rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-style:normal; }
.balalink{ display:inline-block; font:500 .78rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
@media (max-width:900px){ .doors{ grid-template-columns:1fr; } }
/* Balagula page */
.bala-steps{ list-style:none; padding:0; margin:1rem 0 1.4rem; counter-reset:bs; }
.bala-steps li{ counter-increment:bs; position:relative; padding:.7rem 0 .7rem 3rem; border-bottom:1px solid var(--rule-soft); }
.bala-steps li::before{ content:counter(bs); position:absolute; left:0; top:.55rem; width:2rem; height:2rem; border-radius:50%; border:1px solid var(--accent); color:var(--accent); font:500 .85rem/2rem var(--mono); text-align:center; }
.bala-h1{ display:flex; align-items:center; gap:.9rem; }
.bala-logo{ width:clamp(52px,9vw,76px); height:auto; flex:none; }
.bala-note{ border-left:3px solid var(--accent); padding:.8rem 1.1rem; background:var(--panel); margin:1.2rem 0; }
.bala-soon{ display:inline-block; font:500 .72rem/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--bg); background:var(--accent); padding:.45rem .7rem; border-radius:3px; }

.roadcard .rct .rcred{ color:#e2685c; display:block; }   /* Sam, 9 Oct 2026: as on the link preview */
.roadcard img{ opacity:.9; }
.roadcard .rcover{ background:linear-gradient(90deg,rgba(13,15,18,.94) 0%,rgba(13,15,18,.86) 48%,rgba(13,15,18,.25) 100%)!important; }
.roadcard img{ object-position:72% 50%; }
@media (max-width:760px){ .roadcard .rcover{ background:#0d0f12!important; } }
/* the road card carries Helen's 1946 portrait and when it was found (Sam, 9 Oct 2026), as on the link preview */
.roadcard .rcover{ flex-direction:row; align-items:center; justify-content:flex-start; gap:1.2rem; }
.roadcard .rctext{ display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.roadcard .rcpor{ position:relative; flex:0 0 32%; align-self:center; }
.roadcard .rcpor img{ position:static; width:100%; height:auto; object-fit:initial; opacity:1; transform:none!important; border-radius:3px; box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 0 1px rgba(243,236,223,.12); }
.roadcard .rctag{ position:absolute; top:6px; left:6px; right:6px; padding:.3rem .35rem; text-align:center; font:600 .56rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#e2685c; background:rgba(13,15,18,.9); border:1.5px solid #e2685c; border-radius:2px; }
@media (max-width:760px){
  .roadcard .rcover{ flex-direction:column; align-items:stretch; }
  .roadcard .rcpor{ flex:none; width:46%; align-self:center; }
}
.roadcard > img{ position:absolute; inset:0; width:100%; height:100%; }
.roadcard .rcover{ position:relative; inset:auto; min-height:100%; padding:1.3rem 1.3rem 1.3rem 1.2rem; }
.roadcard .rct{ font-size:clamp(1.25rem,1.9vw,1.75rem)!important; }
.roadcard .rcd{ font-size:.92rem; }
.roadcard .rcgo{ font-size:.72rem; padding:.65rem .95rem; }
.roadcard .rcpor{ flex-basis:30%; }
@media (max-width:760px){ .roadcard > img{ position:static; height:auto; aspect-ratio:16/9; } .roadcard .rcover{ min-height:0; } }
/* the hero is Helen's Road alone; the photographs follow, each explained (Sam, 9 Oct 2026) */
.hhero.solo{ grid-template-columns:minmax(0,1fr)!important; }
.hhero.solo .roadcard{ grid-column:1!important; grid-row:auto!important; min-height:20rem; }
.hhero.solo .hhero-note{ grid-column:1!important; grid-row:auto!important; }
.hhero.solo .roadcard .rcpor{ flex-basis:22%; max-width:15rem; }
.hhero.solo .roadcard .rct{ font-size:clamp(1.5rem,2.6vw,2.4rem)!important; }
.gave h2{ max-width:30ch; }
.gave-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.4rem; margin-top:1.2rem; align-items:start; }
.gave-item{ margin:0; min-width:0; }
.gave figure.hero{ margin:0; }
.gave figure.hero img{ max-height:none; }
.gave .facehint{ margin:.5rem 0 0; }
.gave .herocap{ margin:.5rem 0 0; color:var(--muted); font-size:.92rem; font-style:italic; line-height:1.55; }
.gave .herocap .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); }
.gave .facecard{ margin:.5rem 0 0; }
.gave-dror img{ display:block; width:100%; height:auto; }
.gave-dror figcaption{ margin-top:.5rem; color:var(--muted); font-size:.92rem; font-style:italic; line-height:1.55; }
.gave-dror figcaption .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); }
@media (max-width:900px){ .gave-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px){
  .roadcard > img{ display:none; }   /* phones: the portrait and the words carry the card; the dark map read as an empty block */
  .roadcard .rcpor img{ aspect-ratio:auto!important; height:auto!important; }
  .roadcard .rcover{ padding:1.1rem; gap:1rem; }
  .roadcard .rcpor{ width:58%; }
}
/* Sam, 9 Oct 2026: the card ends after its words; the Three Helmans sit beside it, explained */
.hhero.solo{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)!important; align-items:start; column-gap:1.4rem; }
.hhero.solo .roadcard{ grid-column:1!important; grid-row:1!important; }
.hhero.solo .hhelm{ grid-column:2; grid-row:1 / span 2; min-width:0; }
.hhero.solo .hhero-note{ grid-column:1!important; grid-row:2!important; }
.hhelm figure.hero{ margin:0; } .hhelm figure.hero img{ max-height:none; }
.hhelm .facehint{ margin:.5rem 0 0; }
.hhelm .herocap{ margin:.5rem 0 0; color:var(--muted); font-size:.9rem; font-style:italic; line-height:1.55; }
.hhelm .herocap .cite{ display:block; margin-top:.35rem; font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--warm-dim); }
.hhelm .facecard{ margin:.5rem 0 0; }
.hhero.solo .roadcard .rcpor{ flex-basis:34%; max-width:none; }
.hhero.solo .roadcard .rct{ font-size:clamp(1.3rem,2vw,2rem)!important; }
.gave-grid{ grid-template-columns:minmax(0,1fr)!important; max-width:46rem; }
@media (max-width:900px){ .hhero.solo{ grid-template-columns:minmax(0,1fr)!important; } .hhero.solo .hhelm,.hhero.solo .hhero-note{ grid-column:1!important; grid-row:auto!important; } }
.gave-grid{ max-width:38rem!important; }
/* phones and small screens: Hear Helen lives in the menu, so it doesn't take room on the page (Sam, 9 Oct 2026) */
.sidebar nav .navhelen{ display:none; }
@media (max-width:64rem){
  .helenbtn{ display:none!important; }
  .sidebar nav .navhelen{ display:flex; gap:.95rem; align-items:baseline; width:100%; background:none; border:0; border-bottom:1px solid var(--rule-soft); padding:.58rem 0; margin:0; cursor:pointer; text-align:left;
    color:var(--warm); font-family:var(--mono); font-weight:400; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; }
  .sidebar nav .navhelen .k{ color:var(--warm); font-size:.68rem; }
}
.sidebar nav a .soon{ font-size:.58rem; letter-spacing:.12em; color:var(--muted); border:1px solid var(--rule); border-radius:3px; padding:.12rem .35rem; margin-left:.1rem; align-self:center; white-space:nowrap; }
.sidebar nav a .soon.now{ color:var(--accent); border-color:var(--accent-deep); }
.hhero.solo{ grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)!important; }
.hhero.solo .roadcard .rcpor{ flex-basis:30%; }
.hhero.solo .roadcard .rct{ font-size:clamp(1.2rem,1.7vw,1.75rem)!important; }
.hhero.solo .roadcard .rcd{ font-size:.88rem; }
.hhero.solo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; }
.hhero.solo .roadcard .rcpor{ flex:0 0 30%; min-width:8.5rem; }
.hhero.solo .roadcard .rctag{ font-size:.5rem; padding:.22rem .25rem; }
.hhero.solo .roadcard .rcgo{ white-space:nowrap; }
@media (max-width:1400px){ .hhero.solo .roadcard .rcgo{ white-space:normal; } .hhero.solo .roadcard .rcd{ display:none; } }
.hintro{ grid-column:1 / -1; max-width:44rem; font-size:1.12rem; line-height:1.6; color:var(--ink-dim); margin:-.4rem 0 1.6rem; }
/* when each photo was found (Sam, 9 Oct 2026): 2026, and Zacharias's card in 2019 */
.faces{ position:relative; }
.ftagwrap{ position:relative; display:block; }
.ftag{ position:absolute; top:6px; transform:translateX(-50%); z-index:2; pointer-events:none; white-space:nowrap;
  font:600 .58rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#e2685c; background:rgba(13,15,18,.88); border:1.5px solid #e2685c; border-radius:2px; padding:.28rem .4rem; }
.ftag.old{ color:#cf9f63; border-color:#cf9f63; }
@media (max-width:34rem){ .ftag{ font-size:.5rem; padding:.22rem .3rem; letter-spacing:.08em; } }
.roadcard .rcd.rcnum{ display:block!important; font:500 .78rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#cf9f63; }
/* the one-card-to-300 line, as on the research brief (Sam, 9 Oct 2026) */
.onecard{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.4rem; margin:1.2rem 0 1.6rem; padding:1rem 1.3rem; border-left:3px solid var(--warm); background:var(--panel); border-radius:3px; max-width:46rem; }
.onecard .ocn{ margin:0; font:400 clamp(1.6rem,2.6vw,2.2rem)/1.1 var(--serif); color:var(--ink); }
.onecard .ocn b{ font-weight:500; color:var(--warm); }
.onecard .ocn span{ color:var(--muted); }
.onecard .ocs{ margin:0; font-size:.95rem; color:var(--ink-dim); }
/* when each face was found, under the photo, never on it (Sam, 9 Oct 2026) */
.ftrow{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:.35rem; }
.ftrow span{ text-align:center; font:600 .6rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#e2685c; }
.ftrow span.old{ color:#cf9f63; }
/* What I do, tightened (Sam, 9 Oct 2026: "this could be better") */
.doorsec h2{ max-width:none!important; }
.doorsec .doors{ max-width:none; grid-column:1 / -1; gap:1.1rem; }
.door{ padding:1.3rem 1.35rem 1.2rem; gap:.6rem; }
.door b{ font-size:1.42rem; }
.door .dl{ font-size:1rem!important; line-height:1.5; color:var(--ink-dim); }
.door .dnext{ font:500 .7rem/1.4 var(--mono)!important; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)!important; }
.door .dgo, .door .dsub{ font:500 .74rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); text-decoration:none; }
.door .dgo{ margin-top:auto; padding-top:.4rem; }
.door .dsub{ color:var(--muted); border-top:1px solid var(--rule); padding-top:.6rem; text-transform:none; letter-spacing:.04em; font-size:.8rem; }
.door .dsub em{ color:var(--ink); font-style:italic; }
.door .dgo:hover, .door .dsub:hover{ color:var(--warm); }
div.door:hover{ transform:none; }
/* Sam, 9 Oct 2026: her portrait bigger, more room around the words, the button low in the card as before */
.hhero.solo .roadcard .rcover{ align-items:stretch; gap:2rem; padding:1.5rem 1.6rem 1.5rem 1.4rem; }
.hhero.solo .roadcard .rcpor{ flex:0 0 40%!important; align-self:center; }
.hhero.solo .roadcard .rctext{ align-self:stretch; justify-content:flex-start; gap:1rem; padding:.4rem 0 .2rem; }
.hhero.solo .roadcard .rct{ line-height:1.2; margin:0; }
.hhero.solo .roadcard .rcgo{ margin-top:auto; }
.hhero.solo .roadcard .rctag{ font-size:.55rem; }
@media (max-width:760px){ .hhero.solo .roadcard .rcover{ gap:1.1rem; } .hhero.solo .roadcard .rcgo{ margin-top:.6rem; } }
.roadcard .rcgo .sm{ display:none; }
@media (max-width:1560px) and (min-width:761px){
  .roadcard .rcgo .lg{ display:none; } .roadcard .rcgo .sm{ display:inline; }
  .roadcard .rcgo{ white-space:nowrap!important; }
  .hhero.solo .roadcard .rcpor{ flex-basis:36%!important; }
  .hhero.solo .roadcard .rcover{ gap:1.4rem; }
}
/* Sam, 9 Oct 2026: the words line up with the photo, label level with its top, button level with its bottom */
@media (min-width:761px){
  .hhero.solo .roadcard .rcover{ display:grid!important; grid-template-columns:40% minmax(0,1fr); column-gap:1.6rem; align-items:stretch; padding:1.6rem; }
  .hhero.solo .roadcard .rcpor{ align-self:start; max-width:none; }
  .hhero.solo .roadcard .rctext{ align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; gap:.8rem; padding:0; }
  .hhero.solo .roadcard .rcgo{ margin-top:0; }
}
.roadcard .rctag{ line-height:1.35; }
@media (min-width:761px){
  .hhero.solo .roadcard .rcover{ align-items:start; }
  .hhero.solo .roadcard .rctext{ align-self:start; height:var(--porH,auto); }
}
.roadcard .rctag{ left:50%!important; right:auto!important; transform:translateX(-50%); white-space:nowrap; padding:.32rem .6rem!important; font-size:.56rem!important; line-height:1.45; }
/* Sam, 9 Oct 2026: the label and the headline read as one block at the top; the button alone at the bottom */
@media (min-width:761px){
  .hhero.solo .roadcard .rctext{ justify-content:flex-start!important; gap:0!important; }
  .hhero.solo .roadcard .rck{ margin:0 0 1.1rem; }
  .hhero.solo .roadcard .rct{ margin:0; }
  .hhero.solo .roadcard .rcgo{ margin-top:auto!important; }
}
.hhelm .herohead .hht{ font-weight:600; letter-spacing:-.005em; }
/* make the card want to be clicked (Sam, 9 Oct 2026): a bigger line, her voice promised, a button that glows */
@media (min-width:761px){
  .hhero.solo .roadcard .rct{ font-size:clamp(1.6rem,2.35vw,2.5rem)!important; line-height:1.15!important; }
  .hhero.solo .roadcard .rcvoice{ margin-top:1.3rem; }
}
.roadcard .rcvoice{ display:flex; align-items:center; gap:.6rem; font:500 .76rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:#e9dcc0; }
.roadcard .rcvoice .bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
.roadcard .rcvoice .bars i{ width:3px; height:4px; background:#cf9f63; border-radius:1px; animation:rcbar 1.1s ease-in-out infinite; }
.roadcard .rcvoice .bars i:nth-child(2){ animation-delay:.18s } .roadcard .rcvoice .bars i:nth-child(3){ animation-delay:.36s } .roadcard .rcvoice .bars i:nth-child(4){ animation-delay:.54s }
@keyframes rcbar{ 0%,100%{ height:4px } 50%{ height:14px } }
.roadcard .rcgo{ padding:.95rem 1.5rem!important; font-size:.82rem!important; box-shadow:0 0 0 0 rgba(207,159,99,.55); animation:rcglow 2.6s ease-out infinite; transition:transform .2s, background .2s; }
.roadcard:hover .rcgo, .roadcard:focus-visible .rcgo{ background:#e6b66e; transform:translateY(-1px); }
@keyframes rcglow{ 0%{ box-shadow:0 0 0 0 rgba(207,159,99,.5) } 70%{ box-shadow:0 0 0 14px rgba(207,159,99,0) } 100%{ box-shadow:0 0 0 0 rgba(207,159,99,0) } }
@media (prefers-reduced-motion:reduce){ .roadcard .rcgo, .roadcard .rcvoice .bars i{ animation:none; } }
@media (min-width:761px){
  .hhero.solo .roadcard .rcover{ grid-template-columns:36% minmax(0,1fr)!important; column-gap:1.5rem!important; }
  .hhero.solo .roadcard .rct{ font-size:clamp(1.35rem,1.75vw,2rem)!important; }
  .hhero.solo .roadcard .rcvoice{ margin-top:1rem; white-space:nowrap; }
  .hhero.solo .roadcard .rcgo{ max-width:100%; padding:.85rem 1.2rem!important; font-size:.76rem!important; }
}
@media (max-width:1400px) and (min-width:761px){ .hhero.solo .roadcard .rcvoice{ font-size:.66rem; letter-spacing:.1em; } }
/* Helen, in brief: her photo beside the words (Sam, 9 Oct 2026) */
.brief{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:2.2rem; align-items:start; }
.brief .brieftext p{ max-width:none; }
.briefpic{ margin:.3rem 0 0; }
.briefpic img{ display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 0 1px rgba(243,236,223,.08); }
.briefpic figcaption{ margin-top:.55rem; color:var(--muted); font-size:.88rem; font-style:italic; line-height:1.5; }
@media (max-width:900px){ .brief{ grid-template-columns:minmax(0,1fr); gap:1.2rem; } .briefpic{ max-width:28rem; } }
#journey .brief{ max-width:none!important; width:100%; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
#journey .briefpic{ max-width:30rem; }
.briefpic .ftagin{ display:block; margin-top:.4rem; font:600 .6rem/1 var(--mono); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:#cf9f63; }
@media (min-width:761px){ .hhero.solo .roadcard .rcvoice{ margin-top:auto!important; margin-bottom:.8rem; } .hhero.solo .roadcard .rcgo{ margin-top:0!important; } }
/* What came back: the panel on top, then two finds side by side (Sam, 9 Oct 2026) */
#found .gave-grid{ max-width:none!important; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)!important; gap:1.6rem; align-items:start; }
#found .onecard{ max-width:none; }
#found .gave-item img{ display:block; width:100%; height:auto; }
#found figcaption{ margin-top:.5rem; color:var(--muted); font-size:.9rem; font-style:italic; line-height:1.55; }
#found figcaption .cite{ display:block; margin-top:.35rem; font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--warm-dim); }
#found .ftagin{ display:block; margin-top:.45rem; font:600 .6rem/1 var(--mono); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:#e2685c; }
@media (max-width:900px){ #found .gave-grid{ grid-template-columns:minmax(0,1fr)!important; } #found .gave-la{ max-width:26rem; } }
/* when each photo was found, set in the photo's empty space, never on a person (Sam, 9 Oct 2026) */
.ftagwrap{ position:relative; display:block; }
.ptag{ position:absolute; z-index:2; pointer-events:none; white-space:nowrap; font:600 .58rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#e2685c; background:rgba(13,15,18,.88); border:1.5px solid #e2685c; border-radius:2px; padding:.32rem .45rem; }
@media (max-width:34rem){ .ptag{ font-size:.5rem; padding:.24rem .32rem; letter-spacing:.08em; } }
/* the three buttons on one line at the bottom; the Balagula note plain, like door 2's "Next" line (Sam, 9 Oct 2026) */
.door .dsub{ border:0!important; padding:0!important; font:500 .7rem/1.4 var(--mono)!important; letter-spacing:.12em!important; text-transform:uppercase!important; color:var(--muted)!important; }
.door .dsub em{ font-family:var(--serif); font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--ink); }
.door .dgo{ margin-top:auto!important; padding-top:.9rem!important; border:0!important; }
.door i{ padding-top:.9rem!important; }
/* the method page: each step shows its example from Helen's case beside it, so it teaches by showing (Sam, 9 Oct 2026) */
.step{ grid-template-columns:3.1rem minmax(0,1.15fr) minmax(0,1fr)!important; column-gap:1.8rem!important; align-items:start; }
.stepex{ margin:0; padding:.9rem 1rem 1rem; background:rgba(13,15,18,.45); border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:3px; }
.stepex .exk{ display:block; font:500 .66rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem; }
.stepex img{ display:block; width:100%; height:auto; border-radius:2px; background:#f3ecdf; }
.stepex figcaption{ margin-top:.65rem; font-size:.94rem; line-height:1.5; color:var(--ink-dim); font-style:normal; }
.stepex figcaption b{ color:var(--ink); font-weight:500; }
.stepex .cite{ display:block; margin-top:.45rem; font:400 .62rem/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--warm-dim); }
@media (max-width:64rem){ .step{ grid-template-columns:3.1rem minmax(0,1fr)!important; } .stepex{ grid-column:2; margin-top:1rem; } }
.dbwhere{ margin-top:.55rem!important; font-size:.88rem!important; color:var(--muted); }
.dbwhere b{ color:var(--ink-dim); font-weight:500; }
/* the method examples, marked like Helen's Road: a box on each piece of the record, its words beside it (Sam, 9 Oct 2026) */
.stepex .exdoc{ position:relative; display:block; margin:1.9rem 0 1.9rem; }
.stepex .exdoc img{ display:block; width:100%; height:auto; }
.exmk{ position:absolute; border:2px solid #cf9f63; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.exmk.true{ border-color:#7fc49a; } .exmk.false{ border-color:#e2685c; }
.exl{ position:absolute; left:-2px; bottom:calc(100% + 4px); width:max-content; max-width:min(17rem,calc(100cqw)); white-space:normal;
  font:500 .68rem/1.3 var(--mono); letter-spacing:.02em; color:#f3ecdf; background:rgba(12,13,16,.93); border:1px solid #cf9f63; border-radius:3px; padding:.25rem .4rem; z-index:2; }
.exmk.true .exl{ border-color:#7fc49a; color:#c9ecd6; } .exmk.false .exl{ border-color:#e2685c; color:#ffc9c1; }
.exmk.below .exl{ bottom:auto; top:calc(100% + 4px); }
.stepex{ container-type:inline-size; }
/* examples under each step, full width, so the record is big enough to read (Sam, 9 Oct 2026) */
.step{ grid-template-columns:3.1rem minmax(0,1fr)!important; }
.stepex{ grid-column:2!important; margin-top:1.2rem!important; max-width:52rem; }
.stepex .exdoc{ margin:2.4rem 0 2.4rem!important; }
.exl{ font-size:.74rem!important; max-width:22rem!important; }
.exmk.right .exl{ left:auto!important; right:-2px; }
.cta .line:first-child{ color:#e2685c!important; }
.rarity{ display:block; margin:.6rem 0 0!important; padding-left:.7rem; border-left:2px solid #e2685c; font:italic 400 .95rem/1.5 var(--serif)!important; color:var(--ink)!important; max-width:none; }
.hintro2{ margin-top:-1rem!important; font-size:1rem!important; color:var(--muted)!important; }
/* phones and small tablets: one column again (the side-by-side rule was leaking onto phones), and a lighter top (Sam, 9 Oct 2026) */
@media (max-width:900px){
  .hhero.solo{ grid-template-columns:minmax(0,1fr)!important; }
  .hhero.solo .roadcard, .hhero.solo .hhelm, .hhero.solo .hhero-note{ grid-column:1!important; grid-row:auto!important; }
  #journey .brief{ grid-template-columns:minmax(0,1fr)!important; }
  #found .gave-grid{ grid-template-columns:minmax(0,1fr)!important; }
}
@media (max-width:600px){
  .hintro{ font-size:1rem!important; line-height:1.55!important; margin-bottom:1rem!important; }
  .hintro2{ display:none!important; }
  .claim{ font-size:1.15rem!important; }
  .roadcard .rcgo .lg{ display:none; } .roadcard .rcgo .sm{ display:inline; }
}
@media (max-width:900px){
  .hhero.solo .roadcard{ order:1!important; } .hhero.solo .hhero-note{ order:2!important; } .hhero.solo .hhelm{ order:3!important; margin-top:1.4rem; }
}
@media (max-width:600px){
  .ftrow span{ font-size:.5rem!important; letter-spacing:.06em!important; line-height:1.35; padding:0 .15rem; }
}
/* phones: the road card keeps the laptop layout, portrait left and words right, scaled down (Sam, 9 Oct 2026) */
@media (max-width:760px){
  .hhero.solo .roadcard{ min-height:0; }
  .hhero.solo .roadcard > img{ display:block!important; position:absolute!important; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; aspect-ratio:auto!important; }
  .hhero.solo .roadcard .rcover{ position:relative!important; display:grid!important; grid-template-columns:40% minmax(0,1fr)!important; column-gap:.85rem!important; align-items:start!important; padding:.9rem!important;
    background:linear-gradient(90deg,rgba(13,15,18,.9),rgba(13,15,18,.55))!important; }
  .hhero.solo .roadcard .rcpor{ width:auto!important; flex:none!important; align-self:start!important; }
  .hhero.solo .roadcard .rctext{ display:flex!important; flex-direction:column; align-self:stretch!important; height:var(--porH,auto); gap:0!important; }
  .hhero.solo .roadcard .rck{ font-size:.54rem!important; letter-spacing:.14em!important; margin:0 0 .55rem!important; }
  .hhero.solo .roadcard .rct{ font-size:1.12rem!important; line-height:1.18!important; }
  .hhero.solo .roadcard .rcvoice{ margin-top:auto!important; margin-bottom:.5rem; font-size:.5rem!important; letter-spacing:.08em!important; white-space:normal!important; }
  .hhero.solo .roadcard .rcvoice .bars{ height:10px; }
  .hhero.solo .roadcard .rcgo{ padding:.5rem .7rem!important; font-size:.56rem!important; letter-spacing:.06em!important; gap:.35rem; white-space:nowrap!important; align-self:flex-start; }
  .hhero.solo .roadcard .rctag{ font-size:.42rem!important; padding:.2rem .3rem!important; letter-spacing:.06em!important; top:4px!important; }
}
@media (max-width:760px){
  .hhero.solo .roadcard .rctext{ min-width:0!important; overflow:hidden; }
  .hhero.solo .roadcard .rck, .hhero.solo .roadcard .rct{ white-space:normal!important; overflow-wrap:break-word; }
  .hhero.solo .roadcard .rcover{ grid-template-columns:34% minmax(0,1fr)!important; }
  .hhero.solo .roadcard .rct{ font-size:1rem!important; }
  .hhero.solo .hhero-note{ display:none!important; }
  .hhero.solo .hhelm{ margin-top:.9rem!important; }
  .wrap:has(> .hhero) > .eyebrow{ margin-bottom:.4rem!important; }
  .wrap:has(> .hhero) > h1{ font-size:1.7rem!important; margin-bottom:.3rem!important; }
  .claim{ font-size:1.02rem!important; margin-bottom:.6rem!important; }
  .hintro{ font-size:.92rem!important; line-height:1.5!important; margin-bottom:.9rem!important; }
}
/* method examples: on phones and tablets the labels sit in a list under the record, each with the colour of its box (Sam, 10 Oct 2026) */
@media (max-width:1100px){
  .stepex .exdoc{ margin:.4rem 0 .2rem!important; }
  .stepex .exl{ display:none!important; }
  .stepex .exlist{ display:block!important; }
}
.stepex .exlist{ display:none; list-style:none; margin:.7rem 0 0; padding:0; }
.stepex .exlist li{ margin:0 0 .4rem; padding:.3rem .55rem; border-left:3px solid #cf9f63; background:rgba(12,13,16,.6); font:500 .78rem/1.4 var(--mono); color:#f3ecdf; }
.stepex .exlist li.true{ border-left-color:#7fc49a; color:#c9ecd6; } .stepex .exlist li.false{ border-left-color:#e2685c; color:#ffc9c1; }
/* method tabs wrap instead of scrolling off-screen on phones */
@media (max-width:600px){ .mtabs{ flex-wrap:wrap!important; overflow:visible!important; } .mtabs .mt{ flex:1 1 auto; } }
/* the road card on phones: the portrait never runs into the words, and nothing under ~8px */
@media (max-width:760px){
  .hhero.solo .roadcard .rcpor{ min-width:0!important; max-width:100%!important; }
  .hhero.solo .roadcard .rcpor img{ width:100%!important; }
  .hhero.solo .roadcard .rctag{ font-size:.5rem!important; }
  .hhero.solo .roadcard .rcvoice{ font-size:.56rem!important; }
  .hhero.solo .roadcard .rck{ font-size:.58rem!important; }
  .hhero.solo .roadcard .rcgo{ font-size:.62rem!important; }
}

/* review pass, 9 Oct 2026: a tone behind photos while they load; readable small labels; no mixed caps in the door link */
.main img:not([src$=".png"]):not([src$=".svg"]){ background-color:var(--panel); }
:root:not([data-theme="light"]) .cite{ color:#d9896a!important; }
.cite{ font-size:max(.7rem,11.5px)!important; }
.ftrow span{ font-size:max(.68rem,11px); line-height:1.3; }
.ptag{ font-size:max(.62rem,10px); }
@media (max-width:34rem){ .ptag{ font-size:10px; } }
.door .dsub em{ font:inherit!important; font-style:normal!important; text-transform:uppercase!important; letter-spacing:inherit!important; color:var(--ink); }

#faces{ scroll-margin-top:150px; }

/* Hero: the claim is the headline, as on the booth poster (Sam, 14 Oct 2026) */
.hclaim{ max-width:24ch; text-wrap:balance; }
.hclaim em{ font-style:italic; color:var(--warm); }
/* Philadelphia visitors, until 1 Nov 2026 (hidden by script after) */
.wrap > .philly{ grid-column:1 / -1; }
.philly{ display:flex; flex-wrap:wrap; gap:.35rem 1rem; align-items:baseline; margin:0 0 1.4rem; padding:.7rem 1rem; border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:4px; background:var(--panel); font-size:.95rem; }
.philly b{ font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.philly a{ color:var(--ink); white-space:nowrap; }
.wrap > h1.hclaim{ margin-bottom:1.1rem !important; }
.wrap > h1.hclaim + .hintro{ margin-top:0 !important; }
/* Method tabs: make them read as choices (Sam, 14 Oct 2026) */
.mtlabel{ font-family:var(--mono); font-weight:500; font-size:max(.7rem,11px); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); margin:1.6rem 0 .55rem; }
.mtabs .mt[aria-selected="false"]{ opacity:.68; transition:opacity .15s ease, transform .15s ease; }
.mtabs .mt[aria-selected="false"]:hover, .mtabs .mt[aria-selected="false"]:focus-visible{ opacity:1; transform:translateY(-1px); }
@media (prefers-reduced-motion:reduce){ .mtabs .mt[aria-selected="false"]:hover{ transform:none; } }
.mtlabel + .mtabs{ margin-top:0 !important; }
/* Bigger small labels for older readers (14 Oct 2026) */
.facehint, .hhero .facehint{ font-size:max(.78rem,12.5px) !important; }
figcaption .cite, .hhero .herocap .cite, .find figcaption .cite, figure.wide .cite, figure.roster .cite{ font-size:max(.74rem,12px) !important; }
/* Phones: the Philadelphia banner sits below the hero so the photos come first (Sam, 14 Oct 2026) */
.philly.philly-low{ margin:1.4rem 0; }
/* Phones: the case-study line returns, below the hero (Sam, 14 Oct 2026) */
@media (max-width:760px){ .hintro2.hintro2-low{ display:block!important; margin:1.2rem 0 0!important; } }
@media (max-width:760px){ .hintro.hintro-low{ margin:1.4rem 0 0!important; } .wrap > h1.hclaim{ margin-bottom:1rem!important; } }

/* Databases: send the search to the archives themselves (Sam, 16 Oct 2026) */
.dbgo{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0; }
.dbgo > span{ font:400 .78rem/1.3 var(--mono); color:var(--muted); margin-right:.2rem; }
.dbgo a{ font:500 .72rem/1 var(--mono); letter-spacing:.06em; padding:.55rem .8rem; border-radius:999px; border:1px solid var(--accent); color:var(--accent); text-decoration:none; }
.dbgo a:hover, .dbgo a:focus-visible{ background:var(--accent); color:var(--bg, #15110d); }
.dbgo small{ font:inherit; opacity:.75; }
.dbtools .dbgo{ grid-column:1 / -1; }