/* Enrico Molinaro — personal site draft. Ledger aesthetic: warm paper, ink, one ochre accent. */
:root {
  --paper: #f2ede2;
  --paper-2: #e8e0d0;
  --ink: #1b1915;
  --ink-2: #5d5648;
  --rule: rgba(27, 25, 21, .2);
  --rule-soft: rgba(27, 25, 21, .1);
  --accent: #96541a;
  --accent-light: #dba869;
  --card: #fffdf8;
  --max: 1280px;
  --gut: clamp(20px, 4.2vw, 64px);
  --edge: calc((100vw - min(100vw, var(--max))) / 2 + var(--gut));
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: 116px; }
body { margin: 0; min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .07  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
::selection { background: var(--accent); color: var(--paper); }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--accent); transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
p { margin: 0 0 .8em; }
h1, h2, h3 { font-weight: 400; margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.label { font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
.skip { position: absolute; inset-inline-start: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 20; }
.skip:focus { inset-inline-start: 8px; top: 8px; }

/* top bar */
.top { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 15px; padding-bottom: 13px; }
.brand { font-size: 1.02rem; font-style: italic; text-decoration: none; letter-spacing: -.005em; }
.top nav { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.2vw, 30px); font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover, .top nav a[aria-current] { color: var(--accent); }
.top nav { align-items: center; }
.top nav .full { color: var(--ink); border: 1px solid var(--ink); padding: 8px 12px 7px; line-height: 1; transition: background .25s, color .25s; }
.top nav .full:hover, .top nav .full[aria-current] { background: var(--ink); color: var(--paper); }

/* language menu */
.lang { position: relative; }
.lang summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink); border: 1px solid var(--rule); padding: 8px 10px 7px; line-height: 1; user-select: none; transition: border-color .2s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary .ico { width: 13px; height: 13px; flex: none; }
.lang summary .ico:last-child { width: 11px; height: 11px; transition: transform .2s; }
.lang[open] summary .ico:last-child { transform: rotate(180deg); }
.lang summary:hover, .lang[open] summary { border-color: var(--ink); }
.lang-cur { text-transform: none; letter-spacing: .02em; font-size: .7rem; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 176px; background: var(--paper); border: 1px solid var(--ink); padding: 6px; z-index: 30; box-shadow: 0 16px 30px -20px rgba(27, 25, 21, .6); }
.lang li a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 10px 8px; text-decoration: none; color: var(--ink); text-transform: none; letter-spacing: .01em; font-size: .78rem; font-weight: 500; }
.lang li a:hover { background: var(--paper-2); color: var(--ink); }
.lang li a[aria-current] { font-weight: 600; }
.lang li a .ico { width: 13px; height: 13px; color: var(--accent); }

/* sub-header: appears once a section is reached; two things only: where the reader is and the fact to keep */
.sub { max-height: 0; overflow: hidden; background: var(--ink); color: var(--paper); transition: max-height .4s cubic-bezier(.2, .7, .2, 1); }
.sub.on { max-height: 72px; }
.sub-in { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; padding-top: 10px; padding-bottom: 10px; }
.sub-where, .sub-key { margin: 0; }
.sub-where { display: flex; align-items: baseline; gap: 14px; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.sub-num { color: var(--accent-light); }
.sub-key { font-size: .92rem; line-height: 1.3; font-style: italic; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* hero */
.hero { padding-top: clamp(34px, 6vw, 84px); }
.hero h1 { font-size: clamp(4rem, 15.4vw, 13.6rem); line-height: .82; letter-spacing: -.045em; margin: clamp(14px, 2vw, 26px) 0 0 -.04em; font-variation-settings: "opsz" 72; font-weight: 380; }
.hero h1 .fn { display: block; }
.hero h1 .ln { display: block; font-style: italic; padding-left: clamp(0px, 9.5vw, 190px); font-weight: 340; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7.4fr) minmax(0, 3.6fr); gap: clamp(28px, 6vw, 110px); margin-top: clamp(40px, 6.5vw, 96px); padding-bottom: clamp(34px, 5vw, 70px); align-items: start; }
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--rule); }
.role { font-size: clamp(1.32rem, 2.35vw, 1.95rem); line-height: 1.2; letter-spacing: -.012em; margin-bottom: 1em; font-variation-settings: "opsz" 36; }
.lead { max-width: 62ch; color: var(--ink); }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 2em 0 0; }
.facts, .rail-head, .rail-bar { display: none; }
.glance { border-top: 2px solid var(--ink); margin-bottom: clamp(48px, 7vw, 104px); }
.glance ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(14px, 2.4vw, 36px); }
.glance li { padding: 13px 0 0; }
.glance .y { display: block; margin-bottom: 5px; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.glance .t { font-size: .95rem; line-height: 1.3; }
.glance a { text-decoration-color: transparent; }
.glance a:hover { text-decoration-color: var(--accent); }

/* sections */
main { position: relative; isolation: isolate; overflow-x: clip; }

/* background illustrations: large, behind the text, cut by the page edge */
.bleed { position: absolute; z-index: -1; height: auto; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.hero, .sec, .rec-hero { position: relative; }
.bleed-compass { width: clamp(560px, 64vw, 1040px); inset-inline-start: calc(-1 * clamp(120px, 21vw, 400px)); top: clamp(150px, 23vw, 400px); opacity: .1; }
/* --w is the drawing's width, --r its offset from the right edge of the text column (negative = further out).
   --k is the share of the width that lies to the right of the first ink at the height of the rule. */
.sec { --gap-art: clamp(14px, 2vw, 28px); --cut-top: 0px; --cut-first: 0px; }
#dialogue { --w: clamp(460px, 52vw, 800px); --r: calc(-1 * var(--edge) - clamp(120px, 16vw, 300px)); --k: .82;
  --cut-top: max(0px, calc(var(--r) + var(--w) * var(--k) + var(--gap-art))); }
#jerusalem { --w: clamp(400px, 46vw, 700px); --r: calc(-1 * var(--edge) - clamp(20px, 5vw, 110px));
  --cut-first: max(0px, calc(var(--r) + var(--w) + var(--gap-art))); }
#institutions { --w: clamp(280px, 29vw, 430px); --r: calc(-1 * var(--edge) + clamp(20px, 5vw, 100px)); --k: 1.03;
  --cut-top: max(0px, calc(var(--r) + var(--w) * var(--k) + var(--gap-art))); }
#method { --w: clamp(400px, 47vw, 720px); --r: calc(-1 * var(--edge) - clamp(40px, 7vw, 130px)); --k: .86;
  --cut-top: max(0px, calc(var(--r) + var(--w) * var(--k) + var(--gap-art))); }
#roles { --w: clamp(200px, 20vw, 300px); --r: calc(-1 * var(--edge) + clamp(16px, 4vw, 80px)); --k: 1;
  --cut-top: max(0px, calc(var(--r) + var(--w) * var(--k) + var(--gap-art))); }
.bleed-dialogue, .bleed-jerusalem, .bleed-institutions, .bleed-method, .bleed-roles { width: var(--w); inset-inline-end: var(--r); }
.bleed-dialogue { top: clamp(-110px, -6vw, -50px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 44%, transparent 72%); mask-image: linear-gradient(180deg, #000 0, #000 44%, transparent 72%); }
.bleed-jerusalem { bottom: 0; }
.bleed-institutions { top: clamp(-150px, -9.5vw, -80px); transform: rotate(9deg); transform-origin: 60% 40%; }
.bleed-method { top: clamp(-96px, -5.4vw, -44px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 86%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 86%); }
.bleed-roles { top: clamp(-110px, -6.5vw, -50px); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 42%, transparent 76%); mask-image: linear-gradient(180deg, #000 0, #000 42%, transparent 76%); }
.bleed-record { width: clamp(380px, 44vw, 660px); bottom: 0; right: clamp(-120px, -6vw, -30px); }

/* sections */
.sec { padding-bottom: clamp(44px, 7vw, 110px); }
.sec-head { position: relative; display: flex; flex-direction: column; min-height: clamp(250px, 27vw, 400px); padding: 18px 0 clamp(24px, 3.4vw, 48px); }
.sec-head::before { content: ""; position: absolute; top: 0; inset-inline: 0 var(--cut-top); height: 2px; background: var(--ink); }
.sec-dek { max-width: 46ch; margin: clamp(14px, 1.8vw, 24px) 0 0; font-size: clamp(1.02rem, 1.45vw, 1.2rem); line-height: 1.36; color: var(--ink-2); text-wrap: pretty; }
.sec-meta { display: flex; gap: 22px; font-size: .7rem; margin-bottom: auto; }
.sec-num { color: var(--accent); }
.sec-head h2 { max-width: 72%; font-size: clamp(2.7rem, 7vw, 5rem); line-height: .92; letter-spacing: -.036em; font-variation-settings: "opsz" 72; text-wrap: balance; margin-top: clamp(30px, 5vw, 76px); }

/* entries */
.entry { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6.2fr) minmax(0, 2.8fr); gap: clamp(16px, 3vw, 44px); padding: clamp(22px, 3vw, 38px) 0; border-top: 1px solid var(--rule); position: relative; }
.entry::before { content: ""; position: absolute; inset-inline-start: 0; top: -1px; height: 1px; width: 0; background: var(--accent); transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.entry:hover::before { width: 100%; }
.sec-head + .entry { border-top-color: transparent; }
.sec-head + .entry::after { content: ""; position: absolute; inset-inline: 0 var(--cut-first); top: -1px; height: 1px; background: var(--rule); }
.sec-head + .entry:hover::before { width: calc(100% - var(--cut-first)); }
.when { display: flex; flex-direction: column; gap: 6px; padding-top: .45em; }
.when .num { font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .08em; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.when .date { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1.35; font-variant-numeric: lining-nums; }
.what h3 { font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.08; letter-spacing: -.014em; font-weight: 480; margin-bottom: .55em; font-variation-settings: "opsz" 36; text-wrap: balance; }
.what p { max-width: 60ch; }
.spoke { font-size: .93rem; color: var(--ink-2); line-height: 1.42; }
.spoke .label { color: var(--accent); margin-inline-end: .6em; }
.subs { margin-top: 1em; border-inline-start: 1px solid var(--rule); padding-inline-start: 16px; max-width: 62ch; }
.subs li { display: grid; grid-template-columns: 4.2em 1fr; gap: 10px; font-size: .93rem; line-height: 1.42; padding: 5px 0; }
.subs .y { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); padding-top: .28em; font-variant-numeric: lining-nums tabular-nums; }
.sources { padding-top: .45em; }

/* accordion: one entry open, the rest reduced to title and two lines; without JavaScript all stay open */
.acc-title { all: unset; display: block; cursor: pointer; transition: color .2s; }
.acc-title:hover { color: var(--accent); }
.acc-title:focus-visible, .acc-btn:focus-visible, .acc-allbtn:focus-visible, .yr-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.acc-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: .45em; }
.acc-side .sources { padding-top: 0; }
.acc-btn, .acc-allbtn { all: unset; box-sizing: border-box; display: none; align-items: center; gap: 9px; cursor: pointer; font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1; color: var(--ink); border: 1px solid var(--ink); padding: 10px 12px 9px; transition: background .2s, color .2s; }
.js .acc-btn, .js .acc-allbtn { display: inline-flex; }
.acc-btn:hover, .acc-allbtn:hover { background: var(--ink); color: var(--paper); }
.acc-btn .ico, .acc-allbtn .ico { width: 12px; height: 12px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.acc.open .acc-btn .ico, .acc-allbtn[data-state="open"] .ico { transform: rotate(180deg); }
.acc-close, .acc.open .acc-open { display: none; }
.acc.open .acc-close { display: inline; }
.js .acc:not(.open) { padding-top: clamp(16px, 2vw, 24px); padding-bottom: clamp(14px, 1.8vw, 22px); }
.js .acc:not(.open) .what h3 { margin-bottom: .35em; }
.js .acc:not(.open) .acc-more > :not(p:first-child) { display: none; }
.js .acc:not(.open) .acc-more > p:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; color: var(--ink-2); }
.js .acc:not(.open) .sources { display: none; }
.acc-all { margin: 0; padding-top: clamp(16px, 2vw, 24px); border-top: 1px solid var(--rule); }
.sources > .label { margin-bottom: 12px; }
.src { display: grid; gap: 10px; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .005em; line-height: 1.36; color: var(--ink); font-variant-numeric: lining-nums; }
.src a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: start; text-decoration: none; }
.src .ib { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); transition: background .2s, color .2s, border-color .2s, transform .2s; }
.src .ib .ico { width: 12px; height: 12px; display: block; }
.src .lb { padding-top: 4px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--rule); transition: text-decoration-color .2s; }
.src a:hover { color: var(--ink); }
.src a:hover .ib { background: var(--accent); border-color: var(--accent); color: var(--paper); transform: translate(1px, -1px); }
.src a:hover .lb { text-decoration-color: var(--accent); }
.src .nolink { padding-inline-start: 35px; color: var(--ink-2); }
.src .nolink .lb { text-decoration: none; }
.src.compact { gap: 7px; font-size: .64rem; }
.src.compact a { grid-template-columns: 20px minmax(0, 1fr); gap: 9px; }
.src.compact .ib { width: 20px; height: 20px; }
.src.compact .ib .ico { width: 10px; height: 10px; }
.src.compact .lb { padding-top: 3px; }
.src.ref { margin: -.2em 0 1.5em; }

/* institutions table */
.table-wrap { overflow-x: auto; }
.ledger { width: 100%; border-collapse: collapse; font-size: .96rem; line-height: 1.35; }
.ledger thead th { font-family: var(--sans); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; text-align: start; padding: 0 0 10px; padding-inline-end: 16px; }
.ledger tbody tr { border-top: 1px solid var(--rule); transition: background .2s; }
.ledger tbody tr:hover { background: var(--paper-2); }
.ledger td, .ledger tbody th { padding: 13px 0 12px; padding-inline-end: 16px; vertical-align: top; text-align: start; }
.ledger tbody th { font-weight: 520; width: 27%; }
.ledger .yr { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: var(--accent); width: 11%; padding-top: 17px; }
.ledger td:last-child { width: 24%; padding-inline-end: 0; padding-top: 13px; }

/* method, publications, roles */
.two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.method p { font-size: clamp(1.12rem, 1.7vw, 1.36rem); line-height: 1.32; letter-spacing: -.006em; margin-bottom: 1em; }
.pubs li, .roles li { display: grid; grid-template-columns: 4.6em 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.pubs .y { font-family: var(--sans); font-size: .7rem; font-weight: 600; color: var(--accent); letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.pubs a { text-decoration-color: transparent; font-style: italic; }
.pubs a:hover { text-decoration-color: var(--accent); }
.pubs .pub { display: block; font-family: var(--sans); font-size: .58rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 4px; }
.roles li { grid-template-columns: 6.2em 1fr; }
.roles strong { font-weight: 520; }
.contact { border-top: 2px solid var(--ink); padding-top: 14px; }
.contact p { max-width: 36ch; }
.btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .09em; line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); padding: 15px 18px 14px; padding-inline-start: 20px; transition: background .25s, color .25s, border-color .25s; }
.btn .ico { width: 15px; height: 15px; flex: none; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover .ico { transform: translateX(4px); }
.btn-down:hover .ico { transform: translateY(4px); }
.btn-fill { background: var(--ink); color: var(--paper); }
.btn-fill:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.contact .btn { margin-top: .8em; }

.more { margin: 1.2em 0 0; }
.btn-small { padding: 10px 13px 9px; padding-inline-start: 14px; font-size: .6rem; gap: 10px; border-width: 1px; }
.btn-small .ico { width: 13px; height: 13px; }

/* entry pages: one record in detail */
.det-hero { padding: clamp(30px, 5vw, 70px) 0 clamp(26px, 4vw, 50px); }
.det-hero .label a { text-decoration-color: transparent; }
.det-hero .label a:hover { text-decoration-color: var(--accent); }
.det-hero h1 { font-size: clamp(2.3rem, 6.2vw, 5rem); line-height: .97; letter-spacing: -.034em; max-width: 19ch; margin: 14px 0 clamp(26px, 4vw, 50px); font-variation-settings: "opsz" 72; text-wrap: balance; }
.det-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(14px, 2.4vw, 36px); border-top: 2px solid var(--ink); margin: 0; }
.det-facts div { padding: 13px 0 0; }
.det-facts dt { margin-bottom: 6px; color: var(--accent); }
.det-facts dd { margin: 0; font-size: .95rem; line-height: 1.34; }
.det-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(28px, 6vw, 96px); padding-bottom: clamp(40px, 6vw, 90px); align-items: start; }
.det-block { border-top: 1px solid var(--rule); padding: clamp(18px, 2.4vw, 30px) 0 clamp(20px, 2.6vw, 34px); }
.det-block:first-child { border-top: 0; padding-top: 0; }
.det-block h2 { font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.12; letter-spacing: -.014em; font-weight: 480; margin-bottom: .7em; font-variation-settings: "opsz" 36; }
.det-block p { max-width: 62ch; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(18px, 3vw, 44px); }
.people li { padding: 11px 0 12px; border-top: 1px solid var(--rule-soft); }
.people b { display: block; font-weight: 520; }
.people span { display: block; margin-top: 3px; font-family: var(--sans); font-size: .68rem; line-height: 1.4; color: var(--ink-2); }
.dated li, .steps li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule-soft); max-width: 78ch; }
.dated .y { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--accent); padding-top: .32em; font-variant-numeric: lining-nums; }
.steps { counter-reset: st; }
.steps li { grid-template-columns: 2.4em minmax(0, 1fr); counter-increment: st; }
.steps li::before { content: counter(st, decimal-leading-zero); font-family: var(--sans); font-size: .64rem; font-weight: 600; color: var(--accent); padding-top: .42em; }
.det-side { position: sticky; top: 96px; border-top: 2px solid var(--ink); padding-top: 14px; }
.det-side .label { margin-bottom: 12px; }
.det-nav { border-top: 1px solid var(--rule); padding: 22px 0 clamp(40px, 6vw, 80px); }
.det-nav-in { display: flex; justify-content: space-between; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.det-nav .btn { max-width: 48%; text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; line-height: 1.25; }

/* footer */
.foot { border-top: 2px solid var(--ink); padding: 22px 0 46px; }
.foot-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6.2fr) minmax(0, 2.8fr); gap: clamp(16px, 3vw, 44px); font-size: .9rem; color: var(--ink-2); }
.foot-in .label:last-child { text-align: end; }
.foot a { color: var(--ink); }

/* record page */
.rec-hero { padding: clamp(34px, 6vw, 84px) 0 clamp(26px, 4vw, 48px); }
.rec-hero .role, .rec-hero h1 { max-width: 54%; }

.rec-hero h1 { font-size: clamp(3.2rem, 10vw, 8.4rem); line-height: .86; letter-spacing: -.04em; font-style: italic; font-weight: 340; margin: 12px 0 clamp(22px, 3.5vw, 44px) -.03em; font-variation-settings: "opsz" 72; }
.rec-hero .role { max-width: 40ch; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.filters button { all: unset; cursor: pointer; font-family: var(--sans); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0 4px; border-bottom: 1px solid transparent; }
.filters button:hover { color: var(--ink); }
.filters button.on { color: var(--ink); border-bottom-color: var(--accent); }
.yr-group { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 9fr); gap: clamp(16px, 3vw, 44px); border-top: 2px solid var(--ink); padding: 14px 0 clamp(18px, 3vw, 34px); }
.yr-group.hide { display: none; }
.yr-h { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: .95; letter-spacing: -.03em; font-variation-settings: "opsz" 72; position: sticky; top: 74px; align-self: start; }
.row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 5fr) minmax(0, 2.4fr); gap: clamp(14px, 2.4vw, 36px); padding: 14px 0 12px; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; padding-top: 4px; }
.row.hide { display: none; }
.yr-toggle { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.js .yr-toggle { cursor: pointer; }
.yr-toggle .ico { display: none; width: 15px; height: 15px; transition: transform .25s; }
.js .yr-toggle .ico { display: block; margin-top: 4px; }
.ygrp.open .yr-toggle .ico { transform: rotate(180deg); }
.yr-count { font-weight: 500; white-space: nowrap; }
.js .ygrp:not(.open) .yr-items { display: none; }
.js .ygrp:not(.open) { padding-bottom: 12px; }
.js .ygrp:not(.open) .yr-h { font-size: clamp(1.6rem, 3.2vw, 2.4rem); position: static; }
.js .ygrp:not(.open) .yr-toggle { flex-direction: row; align-items: baseline; gap: 18px; }
.js .ygrp:not(.open) .yr-toggle .ico { margin: 0; align-self: center; }
.row .d { color: var(--ink); padding-top: .46em; font-size: .62rem; font-weight: 600; }
.row .x p { margin: 0; max-width: 62ch; font-size: .98rem; line-height: 1.42; }
.row .x .th { margin-top: 6px; font-size: .56rem; }
.row .s { padding-top: .3em; }
.tag { font-family: var(--sans); font-size: .54rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 2px 6px 1px; white-space: nowrap; vertical-align: .12em; margin-left: .3em; }

/* Arabic and Hebrew: their own type, no Latin tracking, mirrored drawings and arrows */
.brand, .hero h1 { font-family: "Newsreader", "Iowan Old Style", Georgia, serif; }
html[lang="ar"] { --serif: "Noto Naskh Arabic", "Newsreader", serif; --sans: "IBM Plex Sans Arabic", "Libre Franklin", sans-serif; line-height: 1.75; }
html[lang="he"] { --serif: "Frank Ruhl Libre", "Newsreader", serif; --sans: "Heebo", "Libre Franklin", sans-serif; line-height: 1.6; }
html[lang="ar"] *, html[lang="he"] * { letter-spacing: 0 !important; }
html[lang="ar"] .sec-head h2, html[lang="he"] .sec-head h2 { line-height: 1.12; }
html[lang="ar"] .what h3, html[lang="he"] .what h3 { line-height: 1.25; }
html[lang="ar"] .label, html[lang="ar"] .btn, html[lang="ar"] .top nav { font-size: .72rem; }
html[lang="ar"] .sub-key, html[lang="he"] .sub-key, html[lang="ar"] .pubs a, html[lang="he"] .pubs a { font-style: normal; }
[dir="rtl"] .hero h1 { text-align: right; }
[dir="rtl"] .hero h1 .ln { padding-left: 0; padding-right: clamp(0px, 9.5vw, 190px); }
[dir="rtl"] .bleed { transform: scaleX(-1); }
[dir="rtl"] .bleed-institutions { transform: rotate(-9deg) scaleX(-1); transform-origin: 40% 40%; }
[dir="rtl"] .btn:not(.btn-down) .ico { transform: scaleX(-1); }
[dir="rtl"] .btn:not(.btn-down):hover .ico { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .src .ib .ico { transform: scaleX(-1); }
[dir="rtl"] .src a:hover .ib { transform: translate(-1px, -1px); }

/* motion */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.r { opacity: 0; animation: rise 1s cubic-bezier(.2, .7, .2, 1) forwards; }
.r0 { animation-delay: .05s; } .r1 { animation-delay: .14s; } .r2 { animation-delay: .36s; } .r3 { animation-delay: .48s; } .r4 { animation-delay: .6s; } .r5 { animation-delay: .72s; }
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .r, .js .reveal { opacity: 1; animation: none; transform: none; transition: none; }
  .entry::before { display: none; }
}

/* narrow screens */
@media (max-width: 900px) {
  html { font-size: 18px; }
  .two { grid-template-columns: 1fr; }
  /* phone hero: the name carries the screen. Portrait, role line and three figures share one card;
     whatever scrolls sideways is one light, rounded component that says so (counter, arrows, progress). */
  .hero { padding-top: 18px; }
  .hero h1 { font-size: clamp(3.6rem, 21.5vw, 9rem); margin-top: 10px; }
  .hero h1 .ln { padding-left: 0; }
  [dir="rtl"] .hero h1 .ln { padding-right: 0; }
  .hero-grid { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 0; margin-top: 22px; padding-bottom: 14px; align-items: stretch; }
  .hero-grid::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 3; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; }
  .hero-grid > div { display: contents; }
  .portrait { grid-column: 1; grid-row: 1; position: relative; z-index: 1; min-height: 172px; margin: 1px 0 0; margin-inline-start: 1px; }
  .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 16%; border: 0; border-start-start-radius: 15px; }
  .role { grid-column: 2; grid-row: 1; z-index: 1; align-self: center; margin: 0; padding: 14px 16px 14px 14px; font-size: clamp(.9rem, 3.85vw, 1.24rem); line-height: 1.3; letter-spacing: 0; }
  .lead { display: none; }
  .facts { grid-column: 1 / -1; grid-row: 2; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); margin: 0; }
  .facts li { padding: 12px 10px 13px 12px; border-inline-start: 1px solid var(--rule); }
  .facts li:first-child { border-inline-start: 0; }
  .facts b { display: block; font-size: clamp(1.25rem, 6.1vw, 2.1rem); line-height: 1; font-weight: 400; letter-spacing: -.03em; color: var(--accent); font-variation-settings: "opsz" 72; font-variant-numeric: lining-nums; white-space: nowrap; }
  .facts span { display: block; margin-top: 6px; font-family: var(--sans); font-size: .6rem; line-height: 1.32; color: var(--ink); }
  .hero-links { grid-column: 1 / -1; grid-row: 3; margin: 12px 0 0; gap: 8px; }
  .hero-links .btn { flex: 1 1 100%; justify-content: space-between; border-radius: 12px; }
  .entry, .foot-in { grid-template-columns: 1fr; gap: 10px; }
  .sec-head { min-height: 0; padding-top: 14px; }
  .sec-head h2 { max-width: none; margin-top: clamp(70px, 22vw, 150px); }
  .bleed-compass { width: 124vw; inset-inline-start: -64vw; top: 170px; opacity: .08; }
  .acc-side { padding-top: 2px; gap: 12px; }
  .js .acc:not(.open) .acc-side { padding-top: 6px; }
  #dialogue { --w: 88vw; --r: calc(-1 * var(--gut) - 38vw); }
  #jerusalem { --w: 54vw; --r: calc(-1 * var(--gut) - 8vw); --cut-first: 0px; }
  #institutions { --w: 44vw; --r: calc(-1 * var(--gut) - 4vw); }
  #method { --w: 72vw; --r: calc(-1 * var(--gut) - 24vw); --k: .88; }
  #roles { --w: 30vw; --r: calc(-1 * var(--gut) + 3vw); }
  .bleed-dialogue { top: -36px; opacity: .6; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 34%, transparent 60%); mask-image: linear-gradient(180deg, #000 0, #000 34%, transparent 60%); }
  .bleed-jerusalem { bottom: auto; top: 16px; opacity: .7; }
  .bleed-institutions { top: -64px; opacity: .6; }
  .bleed-method { top: -40px; opacity: .7; }
  .bleed-roles { top: -34px; opacity: .7; }
  .hero-links .btn { flex: 1 1 100%; justify-content: space-between; }
  .bleed-record { width: 74vw; right: -24vw; opacity: .4; }
  .rec-hero .role, .rec-hero h1 { max-width: none; }
  .glance { margin: 0 0 46px; padding: 12px 0 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--card); overflow: hidden; }
  .rail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px 10px; }
  .rail-head .label { color: var(--ink); font-weight: 600; }
  .rail-ctl { display: flex; align-items: center; gap: 8px; }
  .rail-count { margin-inline-end: 4px; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; }
  .rail-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--ink); border-radius: 50%; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
  .rail-btn:active { background: var(--ink); color: var(--paper); }
  .rail-btn[disabled] { opacity: .28; cursor: default; }
  .rail-btn .ico { width: 14px; height: 14px; display: block; }
  [dir="rtl"] .rail-btn .ico { transform: scaleX(-1); }
  .glance ol { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; scrollbar-width: none; margin: 0; padding: 0 14px; }
  .glance ol::-webkit-scrollbar { display: none; }
  .glance li { scroll-snap-align: start; min-height: 108px; padding: 12px 14px 14px; border-radius: 12px; background: var(--paper); }
  .glance .y { margin: 0 0 6px; font-family: var(--serif); font-size: 1.7rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
  .glance .t { font-size: .88rem; line-height: 1.3; }
  .rail-bar { display: block; height: 3px; margin: 12px 14px 0; border-radius: 2px; background: var(--rule); overflow: hidden; }
  .rail-bar span { display: block; width: 20%; height: 100%; border-radius: 2px; background: var(--ink); transition: width .25s; }
  .foot-in .label:last-child { text-align: start; }
  .when { flex-direction: row; gap: 14px; align-items: baseline; padding-top: 0; }
  .sources { padding-top: 6px; border-top: 1px dashed var(--rule-soft); margin-top: 4px; }
  .ledger thead { display: none; }
  .ledger tbody tr { display: grid; grid-template-columns: 1fr; padding: 12px 0; }
  .ledger td, .ledger tbody th, .ledger .yr, .ledger td:last-child { width: auto; padding: 2px 0; }
  .yr-group { grid-template-columns: 1fr; gap: 6px; }
  .yr-h { position: static; }
  .row { grid-template-columns: 1fr; gap: 4px; }
  .top nav > a:not(.full) { display: none; }
  .top nav { gap: 10px; flex-wrap: nowrap; }
  .sub-in { flex-direction: column; gap: 2px; padding-top: 8px; padding-bottom: 8px; }
  .det-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .det-facts div { padding-bottom: 6px; }
  .det-grid { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr; }
  .det-side { position: static; }
  .dated li { grid-template-columns: 1fr; gap: 2px; }
  .det-nav .btn { max-width: none; flex: 1 1 100%; justify-content: space-between; }
  .sub-key { text-align: start; white-space: normal; font-size: .86rem; }
}
@media print {
  .top, .filters, .hero-links { display: none; }
  .r, .js .reveal { opacity: 1; animation: none; transform: none; }
  body { background: #fff; }
  .js .acc:not(.open) .acc-more > :not(p:first-child), .js .acc:not(.open) .sources, .js .ygrp:not(.open) .yr-items { display: revert; }
  .js .acc:not(.open) .acc-more > p:first-child { display: block; overflow: visible; }
  .acc-btn, .acc-allbtn { display: none !important; }
}