/* ==========================================================================
   THE TRIBE — השבט
   A feed of Jewish contribution, told in primary sources.

   Design position, taken from the EXHIBITA brief of 2026-08-16:
   genre CULTURE (museums/archives — colorful 1.5x, big background 1.6x,
   scrolling 1.3x above the field) crossed with PUBLISHING (typography 2.8x,
   clean 2.0x, microinteractions 2.0x). Palette values are sampled off culture
   and institution winners, not invented: #0042AF #FEF1D0 #F1EADA #F5E211
   #FD4401 #DF4359 #8ED462 #FDCB40 #DAE2E8.
   Motion narrates and is native scroll-driven — no library, no WebGL, which
   the brief shows falling 45%→15%.
   ========================================================================== */

:root{
  --paper:#f1ead9;
  --paper-2:#fef1d0;
  --ink:#10131c;
  --ink-soft:#57523f;
  --rule:#10131c1f;
  --rule-hard:#10131c4d;
  --card:#fbf5e6;
  --accent:#0042af;
  --accent-soft:#0042af14;
  --shadow:0 1px 0 #10131c14, 0 12px 34px -22px #10131c66;

  /* Field colours. Plate values are the sampled originals; the -t (text)
     variants are the same hue dropped in lightness until they clear 4.5:1 on
     this ground, because the sampled ones are chosen for area, not for type. */
  --f-physics:#0042af;    --f-physics-t:#0042af;
  --f-math:#12806a;       --f-math-t:#0f6b57;
  --f-medicine:#df4359;   --f-medicine-t:#b62438;
  --f-biology:#12806a;    --f-biology-t:#0f6b57;
  --f-law:#fd4401;        --f-law-t:#b73400;
  --f-mind:#5546ff;       --f-mind-t:#4433bd;
  --f-economics:#fdcb40;  --f-economics-t:#755200;
  --f-torah:#b8860b;      --f-torah-t:#7d5307;
  --f-letters:#df4359;    --f-letters-t:#9e1a53;
  --f-arts:#8ed462;       --f-arts-t:#6a2e9e;
  --f-conscience:#8ed462; --f-conscience-t:#3d6a16;

  /* Seven fields added in the expansion. Same three-token rule: plate value for
     area, -t for type on paper, -d for white type on a coloured ground. */
  --f-matter:#00857a;  --f-matter-t:#0a6b60;
  --f-screen:#413fa5;  --f-screen-t:#3a3894;
  --f-built:#a06a3c;   --f-built-t:#7a4d24;
  --f-play:#c2185b;    --f-play-t:#a3134c;
  --f-sport:#0f7b3f;   --f-sport-t:#0c6333;
  --f-space:#1b2a6b;   --f-space-t:#1b2a6b;
  --f-trade:#8a6d1f;   --f-trade-t:#6b5417;

  /* A third variant, for when the field colour is the GROUND and white type
     sits on it. The sampled hexes are chosen for area and several of them fail
     badly under white — #b8860b gives 3.25:1, #fd4401 gives 3.5:1. These are
     the same hues taken down until white clears 4.5:1 with room to spare, and
     they do not flip between schemes, because a coloured panel with white type
     reads the same either way. */
  --f-physics-d:#002d78;    --f-math-d:#0b5344;      --f-medicine-d:#8f1a2b;
  --f-biology-d:#0b5344;    --f-law-d:#8c2800;       --f-mind-d:#322593;
  --f-economics-d:#5c4000;  --f-torah-d:#6b3e0a;     --f-letters-d:#79103f;
  --f-arts-d:#4a1f70;       --f-conscience-d:#2c4d10;
  --f-matter-d:#05564e;     --f-screen-d:#2a2870;    --f-built-d:#5c3818;
  --f-play-d:#780f38;       --f-sport-d:#084d27;     --f-space-d:#131d4d;
  --f-trade-d:#4f3d10;

  --mono:ui-monospace,'Cascadia Code','Consolas','SF Mono',monospace;
  --display:'Arial Black','Segoe UI Black','Helvetica Neue',Inter,system-ui,sans-serif;
  --serif:Georgia,'Iowan Old Style','Times New Roman',ui-serif,serif;
  --hebrew:'Frank Ruehl CLM','Narkisim','David','Times New Roman',serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:5vw;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0b0e17;
    --paper-2:#111624;
    --ink:#ede6d6;
    --ink-soft:#98917c;
    --rule:#ede6d626;
    --rule-hard:#ede6d659;
    --card:#131826;
    --accent:#7fa8ff;
    --accent-soft:#7fa8ff1c;
    --shadow:0 1px 0 #ffffff0d, 0 18px 40px -26px #000;

    --f-physics-t:#6e9bff;
    --f-math-t:#5fd9b4;
    --f-medicine-t:#ff7c8e;
    --f-biology-t:#5fd9b4;
    --f-law-t:#ff8a4c;
    --f-mind-t:#a79bff;
    --f-economics-t:#f5c24b;
    --f-torah-t:#e0ae5c;
    --f-letters-t:#ff87bd;
    --f-arts-t:#c89bff;
    --f-conscience-t:#a5de6a;
    --f-matter-t:#45d3c2;
    --f-screen-t:#9d9bf0;
    --f-built-t:#dfa26a;
    --f-play-t:#ff8fb4;
    --f-sport-t:#56d489;
    --f-space-t:#8f9fe8;
    --f-trade-t:#dcbd57;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1rem;line-height:1.62;
  overflow-x:hidden;
  font-kerning:normal;
}
img,svg{max-width:100%;display:block}
a{color:var(--accent);text-underline-offset:.18em}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.8em 1.2em;font-family:var(--mono);font-size:.75rem;z-index:200}
.skip:focus{left:0}

/* ---------- shared type ---------- */
.kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-soft)}
.dept{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:1em}
.dept::after{content:"";flex:1;height:1px;background:var(--rule-hard)}
h2{font-family:var(--display);font-size:clamp(2rem,6.2vw,4.4rem);line-height:.92;
  letter-spacing:-.035em;text-transform:uppercase;margin-bottom:.6rem}
.standfirst{font-size:clamp(1.05rem,1.7vw,1.3rem);font-style:italic;color:var(--ink-soft);
  max-width:38em;margin-bottom:2.4rem}

/* ---------- masthead over the name wall ---------- */
.hero{position:relative;min-height:min(50vh,460px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:clip;border-bottom:2px solid var(--ink)}
.wall{position:absolute;inset:0;z-index:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 42%,#000 12%,#0006 46%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 42%,#000 12%,#0006 46%,transparent 78%)}
/* The wall is the hero image, and it is made of the archive itself — every
   name in the file, drifting. The rows are distributed over the full height so
   it reads as a field rather than a ticker stuck to the top. */
.wall-col{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;
  white-space:nowrap;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);opacity:.8}
.wall-row{display:flex;gap:2.4em;animation:drift 90s linear infinite;padding:.35em 0}
.wall-row:nth-child(even){animation-direction:reverse;animation-duration:120s}
.wall-row:nth-child(3n){animation-duration:150s}
.wall-row b{font-weight:400}
.wall-row .hit{color:var(--accent);font-weight:700}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* the prism — one big graphic element, the brief's "single strong object" */
.prism{position:absolute;inset:auto 0 -18% 0;height:62%;z-index:0;pointer-events:none;
  background:
    conic-gradient(from 210deg at 50% 120%,
      #0042af00 0deg,#0042af26 26deg,#5546ff26 52deg,#df435926 78deg,
      #fd440126 104deg,#fdcb4026 130deg,#8ed46226 156deg,#0042af00 182deg);
  filter:blur(2px)}

/* Scrim: the wall runs the full height of the hero, so the lower half is
   dropped back to the ground colour before the masthead type sits on it.
   Without this the wordmark competes with a hundred names behind it. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88%;z-index:1;
  pointer-events:none;background:linear-gradient(to top,var(--paper) 42%,transparent)}

.mast{position:relative;z-index:2;padding:1.1rem 0 1.5rem}
.mast-top{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);padding-bottom:.55rem;margin-bottom:1rem}
.wordmark{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.3rem,8.6vw,6.2rem);line-height:.8;letter-spacing:-.055em;
  margin-left:-.055em}
.wordmark .lo{color:var(--accent)}
.wordmark-he{font-family:var(--hebrew);direction:rtl;font-size:clamp(1.1rem,2.6vw,1.7rem);
  letter-spacing:.02em;color:var(--ink-soft);margin-top:.2rem;line-height:1.1}
.hero-lede{font-size:clamp(.98rem,1.35vw,1.15rem);max-width:46em;margin:.85rem 0 1rem;
  line-height:1.45}
.hero-lede b{font-weight:400;background:linear-gradient(transparent 62%,var(--accent-soft) 0)}

.stats{display:flex;gap:1.7rem;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:.8rem}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.25rem,2.2vw,1.75rem);
  line-height:1;letter-spacing:-.03em}
.stat span{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft)}

.jump{display:inline-flex;align-items:center;gap:.7em;margin-top:1rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);border:1px solid var(--rule-hard);
  padding:.62em 1.15em;border-radius:999px;
  transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),gap .25s var(--ease)}
.jump:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);gap:1.1em}
.jump span{transition:transform .25s var(--ease)}
.jump:hover span{transform:translateY(3px)}

/* ---------- dispatches: the landing ---------- */
h2 .hl{color:var(--accent)}
.dispatches{display:grid;gap:1.6rem;margin-top:1rem}
.dispatch{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:0;
  border:1px solid var(--rule-hard);border-radius:2px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.dispatch:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 #10131c14,0 34px 60px -34px #10131c8c}
@media (max-width:900px){.dispatch{grid-template-columns:1fr}}

/* Left half: one enormous photograph, pushed into the field colour until the
   headline reads over it. Brief: big background images 0%->10% and 3.2x inside
   Institutions, "a single strong image beats a grid". The type sits at z-index
   1 over a scrim, and every measured pair still clears 4.5:1 because the scrim
   is opaque enough at the type's own position. */
.d-head{position:relative;background:#05070c;color:#fff;padding:clamp(1.8rem,3.4vw,3.2rem);
  display:flex;flex-direction:column;justify-content:flex-end;gap:.9rem;overflow:hidden;
  isolation:isolate;min-height:clamp(360px,46vw,560px)}
.d-head > *{position:relative;z-index:1}
.d-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;
  filter:contrast(1.05) saturate(1.04);
  opacity:1;
  transform:scale(1.02);
  transition:transform 1.1s var(--ease),opacity .6s var(--ease),filter .6s var(--ease)}
.dispatch:hover .d-bg{transform:scale(1.06);opacity:1}
/* The scrim. Without it the headline sits on whatever tonal accident the
   photograph happens to have in that corner. */
/* Neutral scrim, not a colour cast — the photograph keeps its own colour and
   the type gets a near-black bed to sit on. Measured white-on-scrim at the
   type's own position, not at the panel average. */
.d-head--photo::before{content:"";position:absolute;z-index:0;inset:0;
  background:linear-gradient(to top,
    #04060bf7 0%, #04060be0 30%, #04060ba6 56%, #04060b4d 78%, #04060b1a 100%)}
.d-head--photo{box-shadow:inset 0 3px 0 0 var(--f)}
.d-head:not(.d-head--photo)::after{content:"";position:absolute;z-index:-1;
  inset:auto -18% -55% auto;width:62%;aspect-ratio:1;border-radius:50%;background:#ffffff1f}
/* Decorative sheen — only on the flat panels. On a photographed panel this
   pseudo-element is the scrim instead (same ::before, equal specificity, so
   the two cannot both exist: scope this one out explicitly). */
.d-head:not(.d-head--photo)::before{content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(160deg,#ffffff14,transparent 55%)}
.d-kicker{font-family:var(--mono);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:#ffffffd4}
.d-headline{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.7rem,3.4vw,3.1rem);line-height:.95;letter-spacing:-.035em;
  text-wrap:balance}
.d-why{font-size:.95rem;line-height:1.5;color:#fffffff0;max-width:34em}
.d-why-tag{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:#ffffffb3;margin-bottom:.45em}
.d-index{position:absolute;top:.5rem;right:.9rem;z-index:4;font-family:var(--display);
  font-size:clamp(3.2rem,6vw,5.6rem);line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px #ffffff73;pointer-events:none}
@media (max-width:900px){.d-index{color:transparent;-webkit-text-stroke-color:#ffffff59}}

/* right half: the history */
.d-thread{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:.9rem}
.d-thread-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ft);display:flex;align-items:center;gap:.8em}
.d-thread-tag::after{content:"";flex:1;height:1px;background:var(--rule)}
.d-body{font-size:.96rem;line-height:1.6;max-width:46em}

.d-people{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;
  padding-top:1.1rem;border-top:1px solid var(--rule)}
.d-people a{display:flex;align-items:center;gap:.6em;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);border-radius:999px;padding:.28em .9em .28em .3em;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.d-people a:hover{border-color:var(--ft);background:var(--accent-soft)}
.d-face{width:2rem;height:2rem;border-radius:50%;overflow:hidden;flex:none;
  background:var(--fd);display:grid;place-items:center}
.d-face img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  transition:transform .3s var(--ease)}
.d-people a:hover .d-face img{transform:scale(1.08)}
.d-glyph{font-family:var(--hebrew);font-size:1.15rem;color:#fff;line-height:1}
.d-name{font-family:var(--display);font-size:.72rem;text-transform:uppercase;
  letter-spacing:-.01em;white-space:nowrap}
.d-yrs{font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;color:var(--ink-soft);
  white-space:nowrap}

/* ---------- sticky filter rail ---------- */
.rail{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--rule-hard);padding:.7rem 0}
.rail-in{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none}
.chip{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule-hard);background:transparent;color:var(--ink);
  padding:.42em .78em;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5em;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.chip .dot{width:.5em;height:.5em;border-radius:50%;background:currentColor;flex:none}
.chip:hover{border-color:currentColor}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip[aria-pressed="true"] .dot{background:var(--paper)}
.search{margin-left:auto;display:flex;align-items:center;gap:.5em;
  border-bottom:1px solid var(--rule-hard);padding:.2em 0}
.search input{border:0;background:transparent;color:var(--ink);font-family:var(--mono);
  font-size:.72rem;letter-spacing:.06em;width:12ch;padding:.3em 0}
.search input::placeholder{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em;
  font-size:.62rem}
.search input:focus{outline:none;width:18ch}
.count{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}

/* On a phone the ten chips wrap into a 200px sticky slab — a quarter of the
   screen given to furniture. Scroll them sideways instead. */
@media (max-width:760px){
  .rail-in{flex-wrap:nowrap;gap:.7rem}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:.15rem;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .chips::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
  .search{margin-left:0;flex:none}
  .search input{width:7ch}
  .count{display:none}
}

/* ---------- the feed ---------- */
section{padding:3.2rem 0;border-top:1px solid var(--rule)}
section.major{border-top:2px solid var(--ink)}
#feed{border-top:0;padding-top:1.8rem}

.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:start}
@media (max-width:980px){.feed{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.feed{grid-template-columns:1fr}}

.card{grid-column:span 1;background:var(--card);border:1px solid var(--rule);
  border-radius:2px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:var(--rule-hard);
  box-shadow:0 1px 0 #10131c14,0 26px 48px -28px #10131c80}
.card[hidden]{display:none}

.card--feature{grid-column:1/-1;flex-direction:row}
@media (max-width:980px){.card--feature{grid-column:1/-1;flex-direction:row}}
@media (max-width:760px){.card--feature{flex-direction:column}}
.card--feature .plate{flex:0 0 44%;aspect-ratio:auto;min-height:min(78vh,720px)}
.card--feature .card-body{padding:2.2rem 2.4rem}
.card--feature .name{font-size:clamp(1.9rem,3.4vw,3rem)}
.card--feature .quote{font-size:clamp(1.15rem,1.9vw,1.5rem)}

.plate{position:relative;aspect-ratio:3/4;display:block;background:var(--f);overflow:hidden;
  margin:0}
.plate svg{position:absolute;inset:0;width:100%;height:100%}
.plate .plate-yrs{position:absolute;right:.7rem;top:.6rem;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;color:#fff;opacity:.9;z-index:3;
  text-shadow:0 1px 3px #0009}

/* ---- photographs -------------------------------------------------------
   True colour. An earlier pass duotoned all 79 into their field colour so that
   scans from eight decades would cohere; it worked, and the cost was that every
   face read as a filter effect rather than as a person. Cohesion now comes from
   the frame instead — one aspect ratio, one crop gravity baked into the file,
   one near-black ground, one luminous field-colour rule — and the photograph is
   left alone. The only treatment is a hairline scan texture and a foot gradient
   that exists so the date and credit have something to sit on. */
.plate--photo{background:#05070c}
.plate--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.04) saturate(1.03);
  transition:transform 1s var(--ease),filter .5s var(--ease)}
.card:hover .plate--photo img,.card:focus-within .plate--photo img{
  transform:scale(1.045);filter:contrast(1.08) saturate(1.08)}

/* scan texture — 1px in 3, barely there, gone entirely on a coarse screen */
.plate--photo::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(to bottom,#0000 0 2px,#0000001a 2px 3px);
  opacity:.55}
.plate--photo::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,#05070ceb 0%,#05070c66 22%,transparent 46%);
  box-shadow:inset 0 0 0 1px #ffffff1a, inset 0 2px 0 0 var(--f)}

/* an image that is not a face, and says so */
.notlikeness{position:absolute;left:0;top:0;z-index:3;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:#05070cd9;border-right:1px solid var(--f);
  border-bottom:1px solid var(--f);padding:.45em .7em;border-radius:0 0 2px 0}

/* ---- lettered plates, for the entries with no likeness ------------------ */
.plate--drawn .glyph{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  font-family:var(--hebrew);font-size:clamp(5rem,13vw,9rem);line-height:1;color:#fff;
  opacity:.94;text-shadow:0 6px 26px #0000004d;
  padding-bottom:.06em}
.card--feature .plate--drawn .glyph{font-size:clamp(7rem,13vw,12rem)}
.plate--drawn .noportrait{position:absolute;left:.7rem;bottom:.55rem;z-index:3;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:.72}
.plate--drawn::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 38%,#ffffff1f,transparent 70%)}

.card-body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.tagline{display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.field-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ft);display:inline-flex;align-items:center;gap:.5em}
.field-tag::before{content:"";width:1.7em;height:2px;background:var(--ft)}
.nobel{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--f-economics-t);color:var(--f-economics-t);padding:.14em .5em;border-radius:2px}
.name{font-family:var(--display);font-size:1.35rem;line-height:1.02;letter-spacing:-.025em;
  text-transform:uppercase}
.name-he{font-family:var(--hebrew);direction:rtl;font-size:1rem;color:var(--ink-soft);
  line-height:1.3}
.claim{font-size:1.02rem;line-height:1.45}
.quote{font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.4;
  border-left:2px solid var(--ft);padding-left:.9em;margin:.3rem 0}
.qsrc{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft);
  padding-left:1.1em;text-transform:uppercase}
.he-quote{font-family:var(--hebrew);direction:rtl;text-align:right;font-size:1.28rem;
  line-height:1.75;border-right:2px solid var(--ft);border-left:0;padding:0 .8em 0 0;
  margin:.3rem 0;font-style:normal}
.he-ref{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft);
  text-align:right;text-transform:uppercase}
.body{font-size:.94rem;color:var(--ink);line-height:1.6;margin-top:.2rem}
.meta{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule);
  display:flex;gap:.5rem;flex-wrap:wrap}
.meta span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--ink-soft);
  border:1px solid var(--rule);padding:.16em .5em;border-radius:2px}

/* ---------- breakers ---------- */
.breaker{grid-column:1/-1;border-radius:3px;padding:clamp(2rem,5vw,4rem);
  background:var(--bg);color:#fff;position:relative;overflow:hidden}
.breaker .kicker{color:#ffffffbf}
.breaker-q{font-family:var(--serif);font-style:italic;
  font-size:clamp(1.4rem,3.6vw,2.8rem);line-height:1.22;max-width:22ch;margin:.9rem 0}
.breaker-he{font-family:var(--hebrew);direction:rtl;text-align:right;font-style:normal;
  font-size:clamp(1.4rem,3.2vw,2.4rem);line-height:1.7;max-width:26ch;margin-left:auto}
.breaker-src{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:#ffffffd9}
.breaker::after{content:"";position:absolute;inset:auto -10% -60% auto;width:60%;aspect-ratio:1;
  border-radius:50%;background:#ffffff1a;pointer-events:none}

/* ---------- the Torah line (RTL feed) ---------- */
.torah-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.2rem}
.tcard{background:var(--card);border:1px solid var(--rule);border-radius:3px;
  padding:1.4rem 1.5rem;box-shadow:var(--shadow);border-top:3px solid var(--f-torah-t)}
.tcard .work{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--f-torah-t);margin-bottom:.7rem}
.tcard .he{font-family:var(--hebrew);direction:rtl;text-align:right;font-size:1.22rem;
  line-height:1.8}
.tcard .en{font-size:.88rem;color:var(--ink-soft);margin-top:.8rem;
  padding-top:.8rem;border-top:1px solid var(--rule)}
.tcard .ref{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-soft);
  margin-top:.7rem;display:block}

/* ---------- by the numbers ---------- */
.bars{display:grid;gap:.5rem;margin-top:1.5rem}
.bar-row{display:grid;grid-template-columns:12ch 1fr 5ch;gap:.9rem;align-items:center;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em}
.bar-row .label{text-transform:uppercase;color:var(--ink-soft);text-align:right}
.bar{height:1.15rem;background:var(--bc);border-radius:2px;transform-origin:left;
  min-width:2px}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .bar{animation:grow linear both;animation-timeline:view();animation-range:entry 10% entry 55%}
  }
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bar-row .n{color:var(--ink-soft)}
.note{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink-soft);
  margin-top:1.4rem;max-width:60ch;line-height:1.8}

/* ---------- century band ---------- */
.band{display:flex;gap:.35rem;align-items:flex-end;margin-top:1.6rem;overflow-x:auto;
  padding-bottom:.8rem}
.band-col{flex:1 0 34px;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.band-bar{width:100%;background:var(--accent);border-radius:2px 2px 0 0;min-height:3px}
.band-col span{font-family:var(--mono);font-size:.55rem;letter-spacing:.06em;color:var(--ink-soft);
  writing-mode:vertical-rl}

/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);padding:3rem 0 4rem;font-size:.92rem}
footer h3{font-family:var(--display);text-transform:uppercase;font-size:1rem;
  letter-spacing:-.01em;margin-bottom:.7rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2.4rem}
footer p{color:var(--ink-soft);max-width:44ch}
.colophon{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- scroll-driven reveal (native, no library) ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 2% entry 34%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;
    scroll-behavior:auto !important}
  .wall-row{transform:none !important}
}

.empty{grid-column:1/-1;padding:3rem 0;text-align:center;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- the strip: what else survives of a person ----------------------
   Not decoration. Each of these is a document — the kever, the title page of a
   first printing, a signature, the beis medrash that is still standing. For the
   entries with no likeness this is the whole visual argument, and for the rest
   it is the evidence behind the portrait. Every tile links to its Commons file
   page so the provenance is one click away. */
.strip{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  margin-top:.9rem}
.strip a{display:block;position:relative;aspect-ratio:1;overflow:hidden;border-radius:2px;
  background:#05070c;text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--rule)}
.strip img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease),opacity .3s var(--ease)}
.strip a:hover img,.strip a:focus-visible img{transform:scale(1.07)}
.strip span{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono);font-size:.46rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:linear-gradient(to top,#05070ce6,#05070c00);
  padding:.9em .5em .35em;text-align:center}

/* A plate carrying a document rather than a face reads with a lighter frame,
   so a kever or a title page is never mistaken for a portrait at a glance. */
.plate--doc img{object-fit:cover;object-position:50% 50%}
.plate--doc::after{box-shadow:inset 0 0 0 1px #ffffff26, inset 0 2px 0 0 var(--f)}

@media (max-width:660px){.strip{grid-template-columns:repeat(3,1fr)}}

/* ---------- trails: routes that ignore the categories ---------------------
   The field rail answers "show me the physicists". A trail answers "show me
   the ones who refused the money", which cuts across nine fields to do it.
   This is the half of the navigation that is meant to feel like wandering. */
.trails{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:1rem}
@media (max-width:900px){.trails{grid-template-columns:1fr}}

.trail{position:relative;background:var(--card);border:1px solid var(--rule);
  border-radius:2px;padding:1.6rem 1.7rem 1.3rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.8rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),
    border-color .3s var(--ease)}
.trail:hover{transform:translateY(-3px);border-color:var(--rule-hard);
  box-shadow:0 1px 0 #10131c14,0 28px 52px -30px #10131c8c}
.trail.is-on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),
  0 28px 52px -30px #10131c8c}
.t-n{position:absolute;top:.5rem;right:.9rem;font-family:var(--display);
  font-size:2.4rem;line-height:1;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px var(--rule-hard);pointer-events:none}
.t-title{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.15rem,1.9vw,1.6rem);line-height:1.02;letter-spacing:-.03em;
  max-width:16ch}
.t-blurb{font-size:.95rem;line-height:1.5;color:var(--ink-soft);max-width:44ch}
.t-count{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}

.t-faces{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;
  padding-top:.9rem;border-top:1px solid var(--rule)}
.t-faces a{display:flex;align-items:center;gap:.5em;text-decoration:none;
  color:var(--ink);border:1px solid var(--rule);border-radius:999px;
  padding:.22em .8em .22em .25em;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.t-faces a:hover{border-color:var(--accent);background:var(--accent-soft)}
.t-faces .d-face{width:1.7rem;height:1.7rem}
.t-name{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}

/* ---------- era chips + surprise ---------- */
.chips--era{margin-left:.4rem;padding-left:.9rem;border-left:1px solid var(--rule-hard)}
.chip--era{color:var(--ink-soft)}
.chip--era .n{font-style:normal;font-size:.55rem;opacity:.7;margin-left:.15em}
.chip--era[aria-pressed="true"]{background:var(--accent);color:var(--paper);
  border-color:var(--accent)}
.surprise{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:.45em .95em;
  cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease)}
.surprise:hover{background:var(--accent);color:var(--paper)}
.card.is-found{animation:found 1.6s var(--ease)}
@keyframes found{0%{box-shadow:0 0 0 0 var(--accent)}
  25%{box-shadow:0 0 0 4px var(--accent)}100%{box-shadow:var(--shadow)}}
@media (prefers-reduced-motion: reduce){.card.is-found{animation:none;
  outline:3px solid var(--accent);outline-offset:3px}}

@media (max-width:760px){
  .chips--era{border-left:0;padding-left:0;margin-left:0}
  .surprise{padding:.45em .7em}
}

/* ---------- the disproportion --------------------------------------------
   Two bars on one scale, because the whole point is the ratio and any chart
   that rescales the small bar to make it visible has told a lie about it. */
.disprop{margin-top:1rem;display:grid;gap:2.4rem}
.dp-lead{border:1px solid var(--rule-hard);border-radius:2px;padding:clamp(1.4rem,3vw,2.4rem);
  background:var(--card)}
.dp-mult{display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;margin-bottom:1.6rem}
.dp-mult b{font-family:var(--display);font-size:clamp(3.2rem,9vw,7rem);line-height:.86;
  letter-spacing:-.05em;color:var(--accent)}
.dp-mult span{font-size:clamp(.98rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:22ch;
  line-height:1.35}
.dp-pair{display:grid;gap:.7rem}
.dp-row{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr 4.5rem;gap:1rem;
  align-items:center}
.dp-lab{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}
.dp-track{position:relative;height:1.5rem;background:var(--rule);border-radius:2px;
  overflow:hidden}
.dp-track i{display:block;height:100%;background:var(--ink-soft);border-radius:2px;
  min-width:2px;transform-origin:left}
.dp-track i.hot{background:var(--accent)}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .dp-track i{animation:grow linear both;animation-timeline:view();
      animation-range:entry 12% entry 60%}
  }
}
.dp-val{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em;text-align:right}
.dp-scale{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft);
  margin-top:1rem}

.dp-h{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;display:flex;align-items:center;gap:.9em}
.dp-h::after{content:"";flex:1;height:1px;background:var(--rule)}
.dp-cat{display:grid;grid-template-columns:minmax(8rem,13rem) 1fr 3.4rem 6.5rem;gap:.9rem;
  align-items:center;padding:.45rem 0;border-bottom:1px solid var(--rule)}
.dp-cname{font-size:.92rem}
.dp-ctrack{position:relative;height:1.1rem;background:var(--rule);border-radius:2px;
  overflow:hidden}
.dp-ctrack i{display:block;height:100%;background:var(--ft);border-radius:2px;
  transform-origin:left}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .dp-ctrack i{animation:grow linear both;animation-timeline:view();
      animation-range:entry 8% entry 55%}
  }
}
.dp-cpct{font-family:var(--display);font-size:.95rem;text-align:right}
.dp-craw{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--ink-soft);
  text-align:right}

.dp-others ul{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.dp-others li{border:1px solid var(--rule);border-radius:2px;padding:1.1rem 1.2rem;
  background:var(--card)}
.dp-others b{display:block;font-family:var(--display);font-size:2.1rem;line-height:1;
  letter-spacing:-.04em;color:var(--accent)}
.dp-others span{display:block;font-size:.95rem;margin-top:.35rem}
.dp-others em{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;
  color:var(--ink-soft);font-style:normal;margin-top:.5rem;line-height:1.6}

.dp-note{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.2rem;
  font-size:.94rem;line-height:1.6;max-width:70ch;color:var(--ink)}
.dp-src{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--ink-soft);
  line-height:1.8;max-width:70ch}

@media (max-width:660px){
  .dp-row{grid-template-columns:1fr 3.5rem;grid-template-areas:"lab lab" "track val"}
  .dp-lab{grid-area:lab}.dp-track{grid-area:track}.dp-val{grid-area:val}
  .dp-cat{grid-template-columns:1fr 3.2rem;grid-template-areas:"name name" "track pct" "raw raw"}
  .dp-cname{grid-area:name}.dp-ctrack{grid-area:track}.dp-cpct{grid-area:pct}
  .dp-craw{grid-area:raw;text-align:left}
}

/* On a phone the five stats wrap to three rows and eat a third of the hero.
   Tighten the gap, shrink the numerals, and let the range line drop — it is
   the least load-bearing of the five and it is restated in the century band. */
@media (max-width:560px){
  .hero{min-height:auto}
  .mast{padding:.9rem 0 1.2rem}
  .stats{gap:.9rem 1.4rem;padding-top:.65rem}
  .stat b{font-size:1.15rem}
  .stat span{font-size:.55rem;letter-spacing:.14em}
  .stat:last-child{display:none}
  .hero-lede{margin:.7rem 0 .85rem}
  .wordmark-he{font-size:1.05rem}
}