/* The era pages' shared stylesheet (design/entry/entry.css). tools/build-entry/build.ts copies it to design/final/ beside the
   pages, so a reader's browser keeps one copy for all of them. */
:root {
  --bg: #fbf9f4; --card: #ffffff; --ink: #121212; --ink2: #3d3d3d; --muted: #6b6862; --line: #e6e1d6;
  --red: #e3262d; --green: #18874a; --sun: #f7b718; --sky: #dfeee6; --blush: #fde8e3; --cream: #fff4d6;
  --wash-sky: #dfeee6; --wash-far: #b9cfc4; --wash-mid: #7fae93; --wash-near: #18874a; --wash-sun: #e3262d; --accent: var(--red);
  --indigo: #1b1d3c; --madder: #9b2b25; --saffron: #e9a73b; --teal: #2c6563; --walnut: #4a2f22; --ivory: #f4ead8;
  --f: 'Bricolage Grotesque', system-ui, sans-serif; --ku: 'Vazirmatn', sans-serif;
  --gold: linear-gradient(135deg, #d99a0e, var(--sun) 30%, #fbe39b 50%, var(--sun) 70%, #d99a0e);
}
[data-season="spring"] { --bg: #f7f9f1; --wash-sky: #e3f0e4; --wash-far: #b7d3b0; --wash-mid: #6fae6a; --wash-near: #18874a; --wash-sun: #f7b718; --accent: var(--green); }
[data-season="summer"] { --bg: #fbf9f4; --wash-sky: #fdf1d6; --wash-far: #e6cf9c; --wash-mid: #c9a35c; --wash-near: #8a6a2c; --wash-sun: #e3262d; --accent: #94650f; }
[data-season="autumn"] { --bg: #fbf4ee; --wash-sky: #fbe3d7; --wash-far: #e2b096; --wash-mid: #c4693f; --wash-near: #8f2f1a; --wash-sun: #e3262d; --accent: var(--red); }
[data-season="winter"] { --bg: #f4f6f7; --wash-sky: #e8eef2; --wash-far: #c9d4dc; --wash-mid: #8b9aa5; --wash-near: #46525b; --wash-sun: #9fb1bd; --accent: #46525b; }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f); -webkit-font-smoothing: antialiased; transition: background .8s; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
/* a dark inner ring, so focus shows on cream as well as on dark (the yellow alone is 1.7:1 on cream) */
html :focus-visible:not(input, textarea, select) { box-shadow: 0 0 0 2px var(--ink); }
.wrap { max-width: 1260px; margin: 0 auto; padding: 0 28px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; background: var(--ink); color: #fff; }
.tag.r { background: var(--red); } .tag.g { background: var(--green); } .tag.y { background: var(--sun); color: var(--ink); } .tag.o { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn { display: inline-flex; gap: 8px; align-items: center; padding: 15px 22px; border-radius: 99px; font: 600 16px var(--f); transition: .2s; cursor: pointer; border: 0; text-decoration: none; }
.btn.dark { background: var(--ink); color: #fff; } .btn.dark:hover { background: var(--accent); }
.btn.line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); } .btn.line:hover { background: var(--ink); color: #fff; }
.btn.sm { padding: 10px 16px; font-size: 14px; }
section { padding: 110px 0; position: relative; }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 44px; }
.head h2 { font: 800 clamp(40px, 5vw, 70px)/.95 var(--f); letter-spacing: -.04em; margin-top: 14px; }
.hl { background: linear-gradient(transparent 62%, var(--sun) 62% 92%, transparent 92%); }
.head p { color: var(--ink2); max-width: 470px; justify-self: end; }
.chap { font: 800 14px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: color .8s; }
.ku { font-family: var(--ku); }
.muted { color: var(--muted); }
.illum { height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='26'%3E%3Crect width='96' height='26' fill='%23fff4d6'/%3E%3Crect width='96' height='2' fill='%23f7b718'/%3E%3Crect y='24' width='96' height='2' fill='%23f7b718'/%3E%3Crect x='8' y='6' width='46' height='14' rx='7' fill='%23121212'/%3E%3Cpath d='M14 13 q5 -6 10 0 t10 0 t10 0' stroke='%23f7b718' stroke-width='1.6' fill='none'/%3E%3Ccircle cx='75' cy='13' r='7' fill='%23e3262d'/%3E%3Ccircle cx='75' cy='13' r='3' fill='%23fff4d6'/%3E%3Cpath d='M75 3 L77 6 L73 6Z M75 23 L77 20 L73 20Z' fill='%2318874a'/%3E%3C/svg%3E") repeat-x; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); padding: 8px 14px; border-radius: 99px; font: 600 13.5px var(--f); cursor: pointer; text-decoration: none; transition: .2s; }
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .chip.on { background: var(--ink); color: #fff; box-shadow: none; }
.chip small { opacity: .6; margin-left: 4px; }

/* ===== nav ===== */
nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background .8s; }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font: 800 21px/1 var(--f); letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; }
.brand, .ctrl { flex-shrink: 0; }
.ctrl { display: flex; gap: 8px; align-items: center; }
.seasons { display: flex; gap: 2px; background: var(--card); padding: 3px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.seasons button { border: 0; background: transparent; font: 600 12px var(--f); padding: 7px 10px; border-radius: 99px; cursor: pointer; color: var(--muted); }
.seasons button.on { background: var(--ink); color: #fff; }
.searchbtn { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--f); border-radius: 99px; padding: 8px 14px; background: var(--ink); color: #fff; cursor: pointer; border: 0; }
.searchbtn kbd { font: 600 11px var(--f); opacity: .6; }

/* ===== hero: J's watercolour + E's illuminated folio ===== */
.hero { position: relative; overflow: hidden; padding: 50px 0 80px; }
.hero > svg.wc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero .wc .sky { fill: var(--wash-sky); } .hero .wc .far { fill: var(--wash-far); } .hero .wc .mid { fill: var(--wash-mid); } .hero .wc .near { fill: var(--wash-near); } .hero .wc .sunw { fill: var(--wash-sun); }
.hero .wc path, .hero .wc circle, .hero .wc rect { transition: fill .8s; }
.mist { animation: mist 40s ease-in-out infinite alternate; } @keyframes mist { to { transform: translateX(-140px); } }
.hero .grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.crumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 600 13px var(--f); color: var(--ink2); }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.hero h1 { font: 800 clamp(64px, 9vw, 150px)/.85 var(--f); letter-spacing: -.055em; margin: 22px 0 6px; }
.hero h1 .r { color: var(--red); }
.hero .kurd { font: 700 34px var(--ku); color: var(--green); }
.lede { margin-top: 22px; font: 500 21px/1.45 var(--f); color: var(--ink2); max-width: 560px; border-left: 4px solid var(--sun); padding-left: 18px; }
.lede cite { display: block; font: 600 13px var(--f); color: var(--muted); font-style: normal; margin-top: 8px; }
.stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 28px; }
.stats div b { display: block; font: 800 34px/1 var(--f); letter-spacing: -.03em; } .stats div span { font: 600 12px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hero .row { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.folio { background: #fffdf6; padding: 22px; border-radius: 4px; box-shadow: 0 40px 80px -40px rgba(18,18,18,.45); transform: rotate(1deg); }
.gild { padding: 9px; background: var(--gold); }
.gild .in { border: 3px solid var(--ink); padding: 6px; background: #fffdf6; }
.gild img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; }
.folio figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.folio figcaption b { color: var(--ink); }
.jump { position: relative; z-index: 1; margin-top: 46px; }

/* ===== J: a passage surfaces word by word ===== */
.tell { height: 240vh; padding: 0; }
.tell .sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; }
.tell .inner { max-width: 980px; padding: 0 28px; }
.tell p { font: 700 clamp(28px, 3.6vw, 50px)/1.2 var(--f); letter-spacing: -.025em; }
.tell .w { color: color-mix(in srgb, var(--ink) 16%, var(--bg)); transition: color .35s; }
.tell .w.on { color: var(--ink); } .tell .w.r.on { color: var(--red); }
.tell cite { display: block; margin-top: 22px; font: 600 14px var(--f); color: var(--muted); font-style: normal; }

/* ===== E: the illuminated reader ===== */
.reader { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 54px; align-items: start; }
.rail { position: sticky; top: 96px; min-width: 0; }
.rail ol { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.rail li button { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 8px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 0; cursor: pointer; font: 600 15px/1.25 var(--f); transition: padding .25s, color .25s; }
.rail li button span { font: 800 13px var(--f); color: var(--muted); padding-top: 2px; }
.rail li button:hover { padding-left: 8px; } .rail li button.on { color: var(--accent); padding-left: 8px; } .rail li button.on span { color: var(--accent); }
.page { background: #fffdf6; border-radius: 6px; box-shadow: 0 40px 80px -50px rgba(18,18,18,.5); position: relative; }
.page::before { content: ''; position: absolute; inset: 10px; border: 1.5px solid #e7d7a8; border-radius: 3px; pointer-events: none; }
.page .band { height: 26px; border-radius: 6px 6px 0 0; }
.page .body { padding: 44px clamp(22px, 5vw, 70px) 50px; position: relative; }
.page h3.ct { font: 800 clamp(34px, 4vw, 54px)/1 var(--f); letter-spacing: -.035em; margin: 10px 0 26px; }
.prose { font: 400 18.5px/1.75 var(--f); color: #1d1d1d; max-width: 720px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose figure { margin: 0 0 1.05em; }
.prose h3, .prose h4, .prose h5 { font: 800 24px/1.2 var(--f); letter-spacing: -.02em; margin: 1.4em 0 .5em; }
.prose blockquote { border-left: 4px solid var(--sun); padding: 4px 0 4px 18px; color: var(--ink2); }
.prose a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-word; }
.prose .at { font-weight: 700; color: var(--green); }
.kn { text-decoration: underline dotted color-mix(in srgb, var(--green) 70%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: help; } /* a Kurdish location renamed from its state name; the tooltip keeps the original */
.prose .sub { font-size: 14px; color: var(--muted); }
.prose .spoiler { background: var(--ink); color: var(--ink); border-radius: 4px; cursor: pointer; } .prose .spoiler.show { background: var(--line); color: inherit; }
.prose pre { white-space: pre-wrap; font: 14px/1.5 ui-monospace, monospace; background: var(--cream); padding: 14px; border-radius: 10px; }
.prose > .post:first-child > p:first-of-type::first-letter { float: left; font: 800 76px/.8 var(--f); margin: 8px 12px 0 0; padding: 10px 12px 6px; color: #fffdf6; background: var(--red); border: 3px solid var(--ink); box-shadow: 0 0 0 4px #fbe39b, 0 0 0 7px #d99a0e; }
.post { scroll-margin-top: 100px; }
.post + .post { margin-top: 1.4em; }
.post.flash { animation: flash 2.2s; } @keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--sun) 35%, transparent); } }
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 1.2em; }
.figs.one { grid-template-columns: 1fr; }
.figs button { padding: 7px; background: var(--gold); border: 0; cursor: zoom-in; border-radius: 3px; }
.figs img { display: block; width: 100%; height: 100%; max-height: 520px; object-fit: cover; border: 2px solid var(--ink); background: #eee; }
.figs.one img { object-fit: contain; background: #fffdf6; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 600 13px var(--f); color: var(--muted); margin-top: 26px; padding-top: 16px; border-top: 1px dashed #e2d3a6; }
.byline b { color: var(--ink); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 24px; }
.pager .pg { font: 800 30px var(--f); color: var(--red); text-align: center; }
.pager button { justify-self: start; } .pager button:last-child { justify-self: end; }
.pager button[disabled] { visibility: hidden; }
video { width: 100%; border-radius: 4px; border: 2px solid var(--ink); background: #000; }

/* ===== D: woven timeline ===== */
.weave { border-radius: 6px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(74,47,34,.8); }
.fringe { height: 16px; background: repeating-linear-gradient(90deg, #e8dcc5 0 3px, transparent 3px 7px); }
.stripe { display: grid; grid-template-columns: 170px 1fr 170px; align-items: center; min-height: 64px; cursor: pointer; position: relative; transition: filter .25s; border: 0; width: 100%; text-align: inherit; font: inherit; padding: 0; }
.stripe:hover, .stripe[aria-expanded="true"] { filter: brightness(1.12); }
.stripe .y { font: 700 14px var(--f); letter-spacing: .06em; padding: 0 22px; opacity: .9; } .stripe .y.r { text-align: right; font-weight: 600; font-size: 12px; text-transform: uppercase; opacity: .7; }
.stripe .n { font: 800 clamp(18px, 2vw, 25px)/1.1 var(--f); letter-spacing: -.02em; text-align: center; padding: 10px 0; }
.stripe::before { content: ''; position: absolute; left: 170px; right: 170px; top: 0; bottom: 0; opacity: .13; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 12 L12 0 L24 12 L12 24Z M24 12 L36 0 L48 12 L36 24Z' fill='%23f4ead8'/%3E%3C/svg%3E") repeat-x center / auto 100%; }
.s1 { background: var(--walnut); color: var(--ivory); } .s2 { background: var(--teal); color: var(--ivory); } .s3 { background: var(--madder); color: var(--ivory); } .s4 { background: var(--saffron); color: var(--indigo); } .s5 { background: var(--indigo); color: var(--ivory); }
.knot { display: none; background: var(--ivory); color: var(--walnut); padding: 18px 170px 22px; font-size: 16.5px; border-bottom: 1px solid #e4d6bc; }
.knot.open { display: block; animation: drop .3s; } @keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.knot q { font-weight: 600; } .knot .src { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; font: 600 13px var(--f); }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; font: 700 13px var(--f); color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.weavenote { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }

/* ===== People: F's image-on-text + A's web ===== */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.names { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.names li button { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; transition: padding .3s, color .3s; }
.names li b { font: 800 clamp(28px, 3.3vw, 46px)/1 var(--f); letter-spacing: -.035em; }
.names li em { font-style: normal; font-size: 14px; color: var(--muted); text-align: right; max-width: 260px; }
.names li button:hover, .names li button.on { padding-left: 18px; color: var(--red); }
.preview { position: fixed; z-index: 30; width: 220px; height: 280px; pointer-events: none; border-radius: 16px; background: center/cover; opacity: 0; transform: translate(-50%, -50%) scale(.85) rotate(-4deg); transition: opacity .25s, transform .25s; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.preview.px { image-rendering: pixelated; }
.preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); }
/* a touch screen has no hover to show the picture, so each name carries its own */
.names .face { display: none; }
@media (hover: none) {
  .preview { display: none; }
  .names li button { grid-template-columns: 52px 1fr; align-items: center; row-gap: 4px; column-gap: 14px; }
  .names .face { display: block; grid-row: span 2; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; object-position: center 20%; background: var(--line); }
  .names .face.px { image-rendering: pixelated; }
  .names li em { text-align: left; max-width: none; }
}
.webcard { position: sticky; top: 90px; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 26px; }
.webcard h3 { font: 800 34px/1 var(--f); letter-spacing: -.03em; margin: 10px 0 4px; }
.webcard .sub { color: var(--muted); font-size: 15px; }
.webcard blockquote { margin-top: 14px; font-size: 15px; color: var(--ink2); border-left: 3px solid var(--sun); padding-left: 12px; }
.web { width: 100%; height: auto; margin-top: 10px; }
.web line { stroke: var(--line); stroke-width: 1.5; } .web line.hot { stroke: var(--accent); stroke-width: 2; }
.web g.n { cursor: pointer; } .web circle { fill: var(--card); stroke: var(--ink); stroke-width: 2; } .web circle.me { fill: var(--red); stroke: var(--red); }
.web g.n:hover circle { fill: var(--sun); }
.web text { font: 600 13px var(--f); fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: 4px; } .web text.rel { font: 700 10px var(--f); fill: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.web g.n { animation: pop .5s cubic-bezier(.3,1.6,.5,1) both; } @keyframes pop { from { opacity: 0; transform: scale(.6); } }

/* ===== F: the slide, for the topics ===== */
.hs { padding: 0; background: var(--ink); color: #fff; }
.hs .sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hs .label { position: absolute; top: 92px; left: 28px; }
.htrack { display: flex; gap: 30px; padding: 0 28px 0 36vw; will-change: transform; }
.htrack .intro { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 31vw; }
.htrack .intro h2 { font: 800 clamp(40px, 4.8vw, 74px)/.92 var(--f); letter-spacing: -.04em; }
.htrack .intro p { color: #bdbdbd; margin-top: 16px; }
.age { flex: 0 0 400px; height: 64vh; border-radius: 22px; position: relative; overflow: hidden; background: #222 center/cover; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; isolation: isolate; border: 0; color: #fff; text-align: left; cursor: pointer; transition: transform .3s; }
.age:hover { transform: translateY(-6px); }
.age::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,18,18,.05) 30%, rgba(18,18,18,.94)); }
.age .y { position: absolute; top: 20px; left: 22px; font: 800 80px/.85 var(--f); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px var(--sun); }
.age .t { display: block; font: 800 36px/1 var(--f); letter-spacing: -.03em; }
.page .ct:focus { outline: none; box-shadow: none; } .age p { color: #d6d6d6; font-size: 15px; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.age .more { margin-top: 14px; font: 700 13px var(--f); color: var(--sun); }
.hs .bar { position: absolute; left: 28px; right: 28px; bottom: 36px; height: 3px; background: #333; border-radius: 3px; }
.hs .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--red), var(--sun)); border-radius: 3px; }

/* ===== L: dig through the artifacts ===== */
.dig { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: stretch; }
.strata { position: relative; height: 660px; border-radius: 26px; overflow: hidden; background: #2b2018; display: flex; flex-direction: column; }
.strata .top { flex: 0 0 64px; position: relative; background: linear-gradient(180deg, var(--wash-sky), color-mix(in srgb, var(--wash-near) 70%, #000)); transition: background .8s; }
.strata .top svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; }
.strata .pit { flex: 1; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; }
.lay { display: grid; grid-template-columns: 74px 1fr auto; gap: 16px; align-items: center; width: 100%; min-height: 86px; padding: 8px 20px; border: 0; color: #fff3df; text-align: left; cursor: pointer; position: relative; font: 700 15px/1.3 var(--f); transition: filter .3s; }
.lay img { width: 74px; height: 62px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255,243,223,.25); }
.lay span { font: 600 12px var(--f); opacity: .7; }
.lay em { font-style: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lay.dim { filter: brightness(.6) saturate(.6); }
.lay.cur { box-shadow: inset 0 0 0 3px var(--sun); filter: none; }
.lay::after { content: ''; position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,.25) 0 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.16) 0 3px, transparent 4px); background-size: 70px 50px, 130px 90px; }
.digside { display: grid; grid-template-rows: auto 1fr; gap: 16px; min-height: 0; }
.gauge { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 20px; }
.gauge input[type=range] { flex: 1; accent-color: var(--red); height: 28px; }
.gauge b { font: 800 13px var(--f); white-space: nowrap; }
.digcard { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.digcard .find { background: #2b2018; border-radius: 14px; overflow: hidden; display: grid; place-items: center; height: 300px; flex-shrink: 0; cursor: zoom-in; border: 0; padding: 0; }
.digcard .find img { max-width: 100%; max-height: 300px; object-fit: contain; display: block; }
.digcard .depth { font: 800 40px/1 var(--f); letter-spacing: -.04em; }
.digcard .txt { font-size: 15px; color: var(--ink2); overflow-y: auto; min-height: 0; }
.digcard .txt p { margin-bottom: .6em; }

/* ===== Gallery ===== */
.masonry { columns: 4 250px; column-gap: 14px; }
.tile { break-inside: avoid; margin: 0 0 14px; position: relative; border-radius: 14px; overflow: hidden; background: var(--line); cursor: zoom-in; display: block; width: 100%; border: 0; padding: 0; }
.tile img { display: block; width: 100%; height: auto; transition: transform .6s; }
.tile:hover img { transform: scale(1.04); }
.tile .cap { position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px; color: #fff; font: 600 13.5px/1.35 var(--f); text-align: left; background: linear-gradient(transparent, rgba(18,18,18,.88)); opacity: 0; transform: translateY(8px); transition: .3s; }
.tile:hover .cap, .tile:focus-visible .cap { opacity: 1; transform: none; }
.tile .n { position: absolute; top: 10px; right: 10px; background: rgba(18,18,18,.7); color: #fff; font: 700 11px var(--f); padding: 4px 8px; border-radius: 99px; }
.tile .n.dg { left: 10px; right: auto; background: var(--sun); color: var(--ink); letter-spacing: .04em; }
.more-row { text-align: center; margin-top: 26px; }

/* ===== Sources ===== */
.srcbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 22px; }
.field { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 99px; padding: 6px 8px 6px 18px; }
.field:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--sun); }
.field input { flex: 1; border: 0; outline: none; background: transparent; font: 600 16px var(--f); padding: 8px 0; color: var(--ink); min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; text-align: left; cursor: pointer; padding: 0; transition: transform .25s, box-shadow .25s; font: inherit; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(18,18,18,.5); }
.card .thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 160px; background: var(--line); }
.card .thumbs img { width: 100%; height: 160px; object-fit: cover; display: block; }
.card .thumbs.link { display: grid; place-items: center; background: var(--cream); font: 800 22px var(--f); color: var(--walnut); padding: 0 18px; text-align: center; }
.card .bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card .bd p { font-size: 15px; line-height: 1.5; color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; font: 600 12px var(--f); color: var(--muted); }
.card .meta b { color: var(--ink); }
/* ties: for a realm the channels tie to the Kurds without calling it Kurdish, each thread of evidence on its own card */
.ties { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tie { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: 18px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .8s; }
.tie .kind { font: 800 11.5px var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: color .8s; }
.tie h3 { font: 800 22px/1.15 var(--f); letter-spacing: -.02em; }
.tie q { font: 400 15.5px/1.55 var(--f); color: var(--ink2); quotes: '“' '”'; }
.tie .by { margin-top: auto; font: 600 12.5px/1.5 var(--f); color: var(--muted); }
.pill { display: inline-flex; padding: 3px 9px; border-radius: 99px; background: var(--cream); color: var(--walnut); font: 700 11.5px var(--f); }
.empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 20px; }

/* ===== K: the library shelf ===== */
.shelf { display: flex; gap: 14px; align-items: flex-end; overflow-x: auto; padding: 10px 4px 0; scrollbar-width: thin; }
.book { flex: 0 0 auto; width: 96px; height: 340px; border-radius: 6px 6px 3px 3px; position: relative; overflow: hidden; text-decoration: none; color: #fff; box-shadow: inset -6px 0 10px rgba(0,0,0,.25), 0 16px 26px -18px rgba(0,0,0,.6); transition: transform .3s; background-size: 100% auto; image-rendering: pixelated; }
.book:hover { transform: translateY(-12px) rotate(-1deg); }
.book span { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 800 15px/1.1 var(--f); background: rgba(18,18,18,.82); padding: 12px 7px; border-radius: 4px; max-height: 280px; overflow: hidden; }
.plank { height: 18px; background: linear-gradient(#7a5233, #4a2f22); border-radius: 3px; box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); }
.shelfnotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 26px; }
.shelfnotes div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--ink2); }
.shelfnotes b { display: block; color: var(--ink); font-size: 15px; word-break: break-word; }
.shelfnotes .cited { background: var(--cream); border-style: dashed; }

/* ===== map: the empire, traced from the community's own map ===== */
.empire { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.emap { position: relative; border-radius: 26px; overflow: hidden; background: var(--wash-sky); transition: background .8s; aspect-ratio: 1000 / 660; }
.emap svg { display: block; width: 100%; height: 100%; }
.emap { --sea: color-mix(in srgb, var(--wash-sky) 45%, #9cc9de); }
.emap .water { fill: var(--sea); transition: fill .8s; } .emap .land { fill: #f8f4ea; stroke: #b9c9cf; stroke-width: .6; } .emap .grat { fill: none; stroke: #121212; stroke-opacity: .06; stroke-width: .6; }
.emap .lake { fill: var(--sea); }
.emap path { vector-effect: non-scaling-stroke; } .emap svg { cursor: grab; } .emap svg:active { cursor: grabbing; }
.zoomer { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 1; }
.zoomer[hidden], .zhint[hidden] { display: none; }
.zoomer button { width: 38px; height: 38px; border-radius: 12px; border: 0; background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.12); font: 800 18px var(--f); cursor: pointer; }
.zoomer button:hover { background: var(--ink); color: #fff; }
.zhint { position: absolute; left: 14px; bottom: 12px; font: 600 12px var(--f); color: var(--ink2); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 5px 10px; border-radius: 99px; } .emap .river { fill: none; stroke: color-mix(in srgb, var(--wash-sky) 60%, #4d8bb0); stroke-width: .9; }
.emap .today { fill: none; stroke: #b4ac9b; stroke-width: .7; stroke-dasharray: 3 3; }
.emap .conq { fill: #c62828; fill-opacity: .72; stroke: #8e1c1c; stroke-width: 1.2; stroke-opacity: .6; }
.emap .infl { fill: url(#hatch); stroke: #c62828; stroke-width: 1; stroke-dasharray: 5 4; stroke-opacity: .7; }
.emap .kurd { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 7 4; }
.emap .rlab { font: 800 15px var(--f); letter-spacing: .22em; text-transform: uppercase; fill: #121212; fill-opacity: .55; text-anchor: middle; paint-order: stroke; stroke: #f7f3e8; stroke-width: 3px; stroke-opacity: .7; }
.emap .rlab tspan.s { font: 600 11px var(--f); letter-spacing: .04em; text-transform: none; fill-opacity: .9; }
.emap .pin { cursor: pointer; outline: none; } .emap .pin circle { fill: var(--sun); stroke: #121212; stroke-width: 1.5; transition: r .2s; }
.emap .pin.event circle { fill: #fff; } .emap .pin:hover circle, .emap .pin:focus-visible circle, .emap .pin.on circle { r: 8; fill: var(--red); }
.emap .pin text { font: 700 12.5px var(--f); fill: #121212; paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.emap .pin .star { fill: var(--sun); stroke: #121212; stroke-width: 1.5; }
.emap .pin:hover .star, .emap .pin.on .star { fill: #fff; }
.eload { position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px var(--f); color: var(--muted); }
.etip { position: absolute; z-index: 2; width: min(300px, 80%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 24px 50px -20px rgba(18,18,18,.45); font-size: 14px; color: var(--ink2); }
.etip b { display: block; font: 800 18px/1.15 var(--f); color: var(--ink); margin-bottom: 6px; } .etip .yr { font: 700 12px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.etip q { display: block; margin: 6px 0 8px; } .etip .x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; font-size: 13px; }
.eside { display: flex; flex-direction: column; gap: 14px; }
.legend { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px 18px; }
.legend h4 { font: 800 13px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.tog { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 8px 0; cursor: pointer; font: 600 14.5px/1.25 var(--f); text-align: left; transition: opacity .2s; }
.tog[aria-pressed="false"] { opacity: .4; }
.sw { width: 26px; height: 18px; border-radius: 5px; flex-shrink: 0; display: inline-block; }
.esrc { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px; display: grid; grid-template-columns: 78px 1fr; gap: 12px; align-items: start; font-size: 13.5px; color: var(--ink2); }
.esrc button.th { padding: 0; border: 0; cursor: zoom-in; border-radius: 10px; overflow: hidden; width: 78px; height: 78px; }
.esrc img { width: 78px; height: 78px; object-fit: cover; display: block; }
.esrc b { display: block; color: var(--ink); font-size: 14.5px; line-height: 1.25; margin: 2px 0 4px; }
.esrc small { display: block; font: 700 11px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.method { font-size: 12.5px; color: var(--muted); padding: 0 6px; }
.places { margin-top: 18px; }
.emap .route { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.emap .route-arrow { fill: var(--red); }
.emap .homeland { fill: var(--green); fill-opacity: .13; stroke: var(--green); stroke-width: 1.6; stroke-dasharray: 7 4; }
.emap .pin .step { fill: var(--ink); } .emap .pin .stepn { font: 800 10px var(--f); fill: #fff; stroke: none; text-anchor: middle; }
.emap .pin.off text { font-weight: 800; }

/* ===== witnesses: the old historians, each on the line of his lifetime ===== */
.lives { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: 18px 22px 12px; }
.lives .axis { position: relative; height: 26px; border-bottom: 1.5px solid var(--ink); margin-bottom: 10px; }
.lives .axis span { position: absolute; bottom: 6px; transform: translateX(-50%); font: 700 12px var(--f); color: var(--muted); }
.lives .rows { position: relative; margin-bottom: 34px; }
.life.rev { flex-direction: row-reverse; }
.lives .ref { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--sun) 22%, transparent); border-inline: 1.5px dashed color-mix(in srgb, var(--sun) 80%, var(--ink)); pointer-events: none; }
.lives .ref b { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 800 11px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--walnut); background: var(--sun); padding: 4px 8px; border-radius: 99px; }
.life { position: absolute; height: 22px; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; cursor: pointer; font: 700 12.5px/1 var(--f); color: var(--ink); white-space: nowrap; text-align: left; }
.life i { display: block; height: 10px; border-radius: 99px; flex-shrink: 0; transition: height .2s; }
.life i.pt { width: 12px !important; height: 12px; border-radius: 3px; transform: rotate(45deg); }
.life:hover i, .life.on i { height: 14px; } .life:hover, .life.on { color: var(--red); }
.life.c1 i { background: var(--walnut); } .life.c2 i { background: var(--teal); } .life.c3 i { background: var(--madder); } .life.c4 i { background: var(--saffron); } .life.c5 i { background: var(--indigo); }
.life.fade-l i { -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); }
.life.fade-r i { -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
.lives .undated { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font: 600 13px var(--f); color: var(--muted); }
.witcard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; margin-top: 18px; background: #fffdf6; border-radius: 22px; padding: 22px; box-shadow: 0 30px 60px -45px rgba(18,18,18,.55); position: relative; }
.witcard::before { content: ''; position: absolute; inset: 8px; border: 1.5px solid #e7d7a8; border-radius: 16px; pointer-events: none; }
.witcard .ph { padding: 7px; background: var(--gold); border: 0; border-radius: 3px; cursor: zoom-in; align-self: start; }
.witcard .ph img { display: block; width: 100%; height: 250px; object-fit: cover; border: 2px solid var(--ink); background: #eee; }
.witcard .ph.none { display: grid; place-items: center; height: 264px; cursor: default; font: 800 13px var(--f); color: var(--walnut); }
.witcard h3 { font: 800 clamp(28px, 3vw, 40px)/1.02 var(--f); letter-spacing: -.03em; margin: 8px 0 2px; }
.witcard .yrs { font: 700 14px var(--f); letter-spacing: .06em; color: var(--accent); }
.witcard q { display: block; margin: 14px 0 12px; font: 500 18px/1.55 var(--f); color: var(--ink2); quotes: '“' '”'; }
.witcard .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font: 600 13px var(--f); color: var(--muted); }
.witlist { display: none; }
.prose h4.thread { font: 800 22px/1.15 var(--f); letter-spacing: -.02em; margin: 0 0 14px; padding-top: 8px; scroll-margin-top: 20px; }
.prose h4.thread small { font: 700 12px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-left: 8px; }

/* ===== battles: the roll from the entry's Battles channel, as on battles.html ===== */
.tally { display: flex; flex-wrap: wrap; gap: 30px; margin: -8px 0 26px; }
.tally div b { display: block; font: 800 44px/1 var(--f); letter-spacing: -.04em; } .tally div span { font: 600 12px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tally .won b { color: var(--green); }
.roll h3 { font: 800 clamp(28px, 3.2vw, 42px)/1 var(--f); letter-spacing: -.03em; margin: 8px 0 18px; }
.roll .body { padding-top: 34px; padding-bottom: 40px; }
.roll .gchips { margin-bottom: 20px; position: relative; z-index: 1; }
.blist { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); column-gap: 30px; position: relative; z-index: 1; }
.bt { display: grid; grid-template-columns: 92px minmax(0, 1fr) 26px; gap: 12px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px dashed #e2d3a6; padding: 10px 2px; cursor: pointer; font: 600 15.5px/1.3 var(--f); transition: background .2s, padding .2s; }
.bt:hover { background: color-mix(in srgb, var(--sun) 16%, transparent); padding-left: 8px; }
.bt .d { font: 800 13px var(--f); letter-spacing: .03em; color: var(--madder); } .bt .d.none { color: #c9bb93; font-weight: 600; }
.bt .m { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 13px/1 var(--f); }
.bt .m.w { background: var(--green); color: #fff; box-shadow: 0 0 0 2px #fffdf6, 0 0 0 3.5px var(--green); } .bt .m.n { box-shadow: inset 0 0 0 1.5px #d8c9a0; }
.vs { grid-column: 1 / -1; font: 800 13px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--walnut); padding: 16px 0 6px; border-bottom: 1.5px solid var(--ink); }
.gnotes { margin-top: 18px; font-size: 14px; color: var(--ink2); position: relative; z-index: 1; }
.gnotes b { font: 800 12px var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.gfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 14px; border-top: 1px dashed #e2d3a6; font: 600 13px var(--f); color: var(--muted); position: relative; z-index: 1; }
.legend-mark { display: inline-flex; align-items: center; gap: 6px; }
.legend-mark i { width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; font: 800 10px/16px var(--f); text-align: center; font-style: normal; }
.batacc { margin-top: 44px; }
.batacc h3 { font: 800 28px/1.05 var(--f); letter-spacing: -.02em; margin-bottom: 4px; } .batacc > p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }

/* ===== drawer (reading a channel or a source) and lightbox ===== */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(18,18,18,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--bg); transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; box-shadow: -30px 0 80px rgba(0,0,0,.25); }
.drawer.on { transform: none; }
.drawer[hidden] { display: none; }
.drawer header { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border-bottom: 1px solid var(--line); }
.drawer header h3 { font: 800 26px/1.05 var(--f); letter-spacing: -.02em; flex: 1; }
.x { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: none; cursor: pointer; font: 700 18px var(--f); flex-shrink: 0; }
.x:hover { background: var(--ink); color: #fff; }
.drawer .scroll { overflow-y: auto; padding: 26px 26px 60px; flex: 1; }
.drawer .post { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.drawer .byline { margin-top: 12px; }
.links { display: grid; gap: 8px; margin-bottom: 1em; }
.links a { display: block; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-decoration: none; font: 600 14px/1.35 var(--f); }
.links a small { display: block; color: var(--muted); font-weight: 600; font-size: 12px; }
.files a { display: inline-flex; gap: 8px; align-items: center; margin: 0 8px 8px 0; }
.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(12,12,12,.94); display: none; grid-template-rows: 1fr auto; color: #fff; }
.lightbox.on { display: grid; }
.lightbox .stage { display: grid; place-items: center; padding: 60px 70px 10px; min-height: 0; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 190px); object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox .lbcap { padding: 14px 28px 26px; max-width: 980px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.lightbox .lbcap p { font-size: 15px; color: #ddd; max-height: 90px; overflow-y: auto; }
.lightbox .lbcap small { display: block; color: #9a9a9a; font: 600 12.5px var(--f); margin-top: 6px; }
.lbnav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(0,0,0,.3); color: #fff; font: 700 20px var(--f); cursor: pointer; }
.lbnav:hover { background: #fff; color: var(--ink); } .lbnav.p { left: 14px; } .lbnav.n { right: 14px; }
.lightbox .x { position: absolute; top: 14px; right: 14px; border-color: #fff; color: #fff; }
.lightbox .x:hover { background: #fff; color: var(--ink); }
.lightbox .count { position: absolute; top: 24px; left: 26px; font: 700 13px var(--f); color: #bbb; }

/* ===== search ===== */
.search { position: fixed; inset: 0; z-index: 65; display: none; place-items: start center; padding-top: 10vh; background: rgba(18,18,18,.45); }
.search.on { display: grid; }
.search .box { width: min(720px, 92vw); background: var(--bg); border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,.35); overflow: hidden; }
.search .field { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px 10px 22px; }
.search .field input { font-size: 20px; }
.search ul { list-style: none; padding: 8px; max-height: 60vh; overflow-y: auto; }
.search li button { width: 100%; text-align: left; background: none; border: 0; padding: 12px 14px; border-radius: 12px; cursor: pointer; display: grid; gap: 4px; }
.search li button:hover, .search li button.on { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.search li small { font: 700 11.5px var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.search li span { font-size: 14.5px; color: var(--ink2); }
.search mark { background: color-mix(in srgb, var(--sun) 60%, transparent); color: inherit; border-radius: 3px; }
.search .hint { padding: 12px 22px 16px; font-size: 13px; color: var(--muted); }

/* ===== colophon ===== */

@media (max-width: 960px) {
  .head, .hero .grid, .people, .dig, .reader, .empire { grid-template-columns: 1fr } .head p { justify-self: start }
  .emap .rlab tspan.s { display: none; } .zhint { display: none; }
  .rail { position: static; } .rail ol { display: flex; overflow-x: auto; border: 0; gap: 6px; } .rail li button { width: auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; grid-template-columns: auto auto; }
  .stripe { grid-template-columns: 92px 1fr 70px } .stripe::before { left: 92px; right: 70px } .knot { padding: 16px 20px; }
  .hs .sticky { position: static; height: auto; overflow: visible; padding: 136px 0 70px; } .hs .bar { display: none; }
  .htrack { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 0 16px 10px; scrollbar-width: thin; }
  .age { flex-basis: 78vw; height: 70vh; scroll-snap-align: start; } .htrack .intro { position: static; transform: none; width: 70vw; flex: 0 0 70vw; align-self: center; scroll-snap-align: start; }
  .voice { grid-template-columns: 40px 1fr; } .voice .n { font-size: 22px; } .voice .linkish { grid-column: 2; justify-self: start; }
  .webcard { position: static } .strata { height: 420px; }
  .lives { display: none; } .witlist { display: grid; gap: 6px; } .witcard { grid-template-columns: 1fr; } .witcard .ph img { height: 220px; }
  .witlist button { display: grid; grid-template-columns: 96px 1fr; gap: 10px; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 0; cursor: pointer; font: 700 15px/1.25 var(--f); }
  .witlist button span { font: 700 12.5px var(--f); color: var(--accent); padding-top: 2px; } .witlist button.on { color: var(--red); } .seasons button { padding: 7px 7px }
  .searchbtn kbd { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; } .seasons { display: none; } section { padding: 70px 0; } .srcbar { grid-template-columns: 1fr; }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .stats div b { font-size: 28px; }
  .etip { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 12px; width: auto; z-index: 50; }
  .lightbox .stage { padding: 56px 10px 10px; } .lbnav { top: auto; bottom: 18px; transform: none; } .lightbox .lbcap { grid-template-columns: 1fr; padding-bottom: 80px; }
  .stripe .y.r { display: none; } .stripe { grid-template-columns: 84px 1fr } .stripe::before { left: 84px; right: 0 }
  .blist { grid-template-columns: 1fr; } .bt { grid-template-columns: 74px minmax(0, 1fr) 26px; font-size: 15px; } .tally { gap: 18px; } .tally div b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } html { scroll-behavior: auto } }