/* Turbeh — "atlas" design.
   Layout: a printed catalogue of numbered plates. Home = title + turning globe, plate cards, two-calendar chart.
   A place = catalogue entry: plate number, names in three scripts, facts, frontispiece photo; a dark viewing room
   for the 3D / 360° views; a cited essay with a margin (locator map, place in time, UNESCO); sources.
   Type: Newsreader (Latin text + display), Amiri (Arabic text), Reem Kufi (Arabic display, tile-inscription feel),
   IBM Plex Sans / Plex Sans Arabic (captions, tables, controls). Rules instead of boxes; square corners. */
:root {
  --paper: #fafaf7;
  --paper-2: #f0f0ea;
  --ink: #16171a;
  --ink-2: #565860;
  --rule: #d8d8d0;
  --land: #e3e3db;
  --grat: #ccd1d4;
  --sea: #eef0ec;       /* globe sea */
  --coast: #b4b6ad;     /* globe coastline */
  --shade: #16171a;     /* globe limb shading */
  --shade-a: .16;
  --g-land: #dfdccf;    /* globe land (a little warmer than the locator maps) */
  --lapis: #1f3a8f;     /* Timurid cobalt — links, current state */
  --turq: #0b757b;      /* turquoise glaze — "you can go inside" */
  --gilt: #8c6620;      /* gold leaf — plate numerals, Arabic names */
  --room: #0c0d10;      /* viewing room (always dark) */
  --room-ink: #ecebe6;
  --room-ink-2: #a3a49f;
  --room-rule: #2b2d33;

  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-text: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-ar-display: "Reem Kufi", "Geeza Pro", "Segoe UI", sans-serif;
  --f-ar-text: "Amiri", "Geeza Pro", "Traditional Arabic", serif;
  --f-ar-ui: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", sans-serif;
  --size-text: 1.1875rem;
  --lh-text: 1.62;
  --maxw: 1280px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
/* dark theme: follows the system unless the reader picked one with the header switch (data-theme on <html>, set by theme.js) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111215; --paper-2: #191a1e; --ink: #ebe9e3; --ink-2: #a5a6a9; --rule: #2d2e33;
    --land: #23252b; --grat: #30343a; --lapis: #a3b4f4; --turq: #5cc3c6; --gilt: #d3ab62;
    --sea: #16181c; --coast: #3e414a; --shade: #000; --shade-a: .55; --g-land: #2a2c33;
    --room: #07080a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #111215; --paper-2: #191a1e; --ink: #ebe9e3; --ink-2: #a5a6a9; --rule: #2d2e33;
    --land: #23252b; --grat: #30343a; --lapis: #a3b4f4; --turq: #5cc3c6; --gilt: #d3ab62;
    --sea: #16181c; --coast: #3e414a; --shade: #000; --shade-a: .55; --g-land: #2a2c33;
    --room: #07080a;
    color-scheme: dark;
}
html[dir="rtl"] {
  --f-display: var(--f-ar-display);
  --f-text: var(--f-ar-text);
  --f-ui: var(--f-ar-ui);
  --size-text: 1.3125rem;
  --lh-text: 1.9;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--size-text)/var(--lh-text) var(--f-text);
  font-optical-sizing: auto; font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[dir="rtl"] body { font-variant-numeric: normal; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0; line-height: 1.08; text-wrap: balance; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { line-height: 1.35; font-weight: 600; }
p, ul, ol, dl, figure { margin: 0; }
p { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--lapis) 28%, transparent); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.ui { font-family: var(--f-ui); }
.lat { font-family: "Newsreader", Georgia, serif; }            /* Latin inside Arabic pages */
.kufi { font-family: "Reem Kufi", "Geeza Pro", sans-serif; }    /* Arabic inside English pages */
.naskh { font-family: "Amiri", "Geeza Pro", serif; }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; inset-inline-start: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.muted { color: var(--ink-2); }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--ink); }
.mast-in { display: flex; align-items: center; gap: 12px 22px; padding-block: 16px 13px; flex-wrap: wrap; }
.wordmark { display: flex; align-items: baseline; gap: 12px; color: var(--ink); text-decoration: none; }
.wm-lat { font-family: "Newsreader", Georgia, serif; font-size: 1.7rem; font-weight: 600; letter-spacing: -.015em; line-height: 1; }
.wm-ar { font-family: "Reem Kufi", "Geeza Pro", sans-serif; font-size: 1.55rem; font-weight: 600; color: var(--gilt); line-height: 1; }
.mast-tag { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); padding-inline-start: 18px; border-inline-start: 1px solid var(--rule); line-height: 1.3; }
.mast nav { margin-inline-start: auto; display: flex; gap: 22px; font-family: var(--f-ui); font-size: .875rem; }
.mast nav a { color: var(--ink); text-decoration: none; }
.mast nav a:hover { text-decoration: underline; }
.mast nav { align-items: center; }
/* language menu: a native <details>, so it opens without JavaScript */
.langs { position: relative; }
.langs > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--ink); font-weight: 500; }
.langs > summary::-webkit-details-marker { display: none; }
.langs > summary:hover span { text-decoration: underline; }
.langs-i { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.langs > ul { position: absolute; inset-inline-end: -10px; top: calc(100% + 10px); z-index: 30; margin: 0; padding: 6px 0; list-style: none;
  min-width: 190px; max-height: min(70vh, 520px); overflow: auto; background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12); columns: 1; }
.langs > ul a { display: block; padding: 6px 16px; text-decoration: none; }
.langs > ul a:hover { background: var(--paper-2); text-decoration: none; }
.langs > ul a[aria-current] { color: var(--lapis); }
.langs > ul a[aria-current]::after { content: " ✓"; }
/* the offer of the reader's own language (app.js) */
.lang-offer { position: fixed; z-index: 40; inset-inline-start: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 10px 8px 16px;
  background: var(--paper); border: 1px solid var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); font-family: var(--f-ui); font-size: .875rem; }
html[dir="rtl"] .lang-offer { transform: translateX(50%); padding: 8px 16px 8px 10px; }
@media print { .lang-offer { display: none; } }
.lang-offer a { font-weight: 500; color: var(--ink); }
.lang-offer a::before { content: "→ "; color: var(--gilt); }
html[dir="rtl"] .lang-offer a::before { content: "← "; }
.lang-offer-x { border: 0; background: none; color: var(--ink-2); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
@media (max-width: 560px) { .langs > summary span { display: none; } }
.theme { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -6px 0; padding: 0;
  background: none; border: 1px solid transparent; color: var(--ink); cursor: pointer; }
.theme:hover { border-color: var(--rule); }
.theme[hidden] { display: none; }
.theme-i { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
html[dir="rtl"] .theme-i { transform: scaleX(-1); }
@media (max-width: 720px) { .mast-tag { display: none; } .mast nav { gap: 16px; } }

/* ---------- home: a large globe, its western half passing behind the title ---------- */
.hero { --col: min(520px, 44vw); position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: 1fr auto;
  min-height: clamp(640px, calc(100svh - 62px), 920px); }
.hero .globe { --d: clamp(900px, 84vw, 1300px); position: absolute; z-index: 0; margin: 0; width: var(--d); height: var(--d);
  inset-inline-start: calc(62% - var(--d) / 2); top: calc(56% - var(--d) / 2); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 26%; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--paper) 88%); }
.hero-in { position: relative; z-index: 2; display: grid; align-content: center; gap: 24px; padding-block: 44px 20px; pointer-events: none; }
.hero-in > * { position: relative; max-width: var(--col); pointer-events: auto; }
.hero-in::before { content: ""; position: absolute; z-index: -1; inset-block: -60px -240px; inset-inline-start: -60vw; pointer-events: none;
  width: calc(60vw + var(--col) + 220px);
  background: linear-gradient(to var(--fwd, right), var(--paper) calc(100% - 330px), color-mix(in srgb, var(--paper) 72%, transparent) calc(100% - 190px), transparent); }
html[dir="rtl"] .hero-in::before { --fwd: left; }
.hero-text { display: grid; gap: 22px; min-width: 0; }
.hero-foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-block: 0 20px; pointer-events: none; }
.hero h1 { font-size: clamp(2.4rem, 3.9vw, 3.75rem); font-weight: 400; letter-spacing: -.022em; line-height: 1; }
.hero h1 em { font-style: italic; }
html[dir="rtl"] .hero h1 em, html[dir="rtl"] .tl-tip em { font-style: normal; }   /* no faux italics in Arabic script */
html[dir="rtl"] .hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); letter-spacing: 0; line-height: 1.35; }
.intro-text { display: grid; gap: 14px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); max-width: 46ch; }
html[dir="rtl"] .intro-text { font-size: 1.1875rem; }
.counts { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 8px; font-family: var(--f-ui); }
.hl-main { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ink); color: var(--paper); text-decoration: none;
  font-size: .9375rem; font-weight: 500; }
.hl-main::after { content: "↓"; }
.hl-main:hover { background: var(--lapis); color: var(--paper); }
.hl-random { font-size: .9375rem; color: var(--ink); text-underline-offset: .25em; }
.inside-cta { margin-top: -4px; }
@media (max-width: 999px) {
  /* phones and tablets: title, then the globe edge to edge, then the text */
  .hero { display: flex; flex-direction: column; min-height: 0; padding-block: 26px 8px; }
  .hero::after, .hero-in::before { display: none; }
  .hero-in { display: contents; }
  .hero-in > * { max-width: none; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .hero h1 { order: 0; }
  .hero .globe { order: 1; position: relative; inset: auto; --d: max(560px, 132vw); width: 100%; height: min(104vw, 640px); margin-block: 6px; overflow: hidden; }
  .hero .globe-box { position: absolute; inset: auto; width: var(--d); height: var(--d); left: calc(50% - var(--d) / 2); top: calc(50% - var(--d) / 2); }
  .hero-text { order: 2; }
  .hero-foot { order: 3; justify-content: flex-start; padding-block: 14px 6px; }
}

/* the globe: a printed globe (paper sea, tinted land, ink rim); assets/globe.js turns it */
.globe { min-width: 0; }
.globe-box { position: absolute; inset: 0; touch-action: pan-y; cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.globe-box:focus-visible { outline-offset: 8px; }
.globe-box.is-drag { cursor: grabbing; }
.globe-box.is-pin { cursor: pointer; }
.globe svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the globe is drawn several times larger than its 600-unit viewBox: lines keep their width, and globe.js keeps dots and labels at a fixed size */
.g-grat, .g-land, .g-lakes, .g-rim, .g-limb circle, .g-limb path, .g-route { vector-effect: non-scaling-stroke; }
.g-sea { fill: var(--sea); }
.g-grat { fill: none; stroke: var(--grat); stroke-width: .7; }
.g-land { fill: var(--g-land); stroke: var(--coast); stroke-width: .6; stroke-linejoin: round; }
.g-lakes { fill: var(--sea); stroke: var(--coast); stroke-width: .5; }
.g-shade { pointer-events: none; }
.gs0 { stop-color: var(--shade); stop-opacity: 0; }
.gs1 { stop-color: var(--shade); stop-opacity: var(--shade-a); }
.g-rim { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-opacity: .85; pointer-events: none; }
.g-limb { pointer-events: none; }
.g-limb circle { fill: none; stroke: var(--ink-2); stroke-width: .8; stroke-opacity: .55; }
.g-limb path { fill: none; stroke: var(--ink-2); stroke-width: .8; stroke-opacity: .6; }
.g-seas text { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 12px; letter-spacing: .07em; fill: var(--ink-2);
  text-anchor: middle; pointer-events: none; }
html[dir="rtl"] .g-seas text { font-family: var(--f-ar-text); font-style: normal; font-size: 14px; letter-spacing: 0; }
.g-seas .is-back, .g-pin.is-back { display: none; }
.g-hit { fill: transparent; }
.g-dot { fill: var(--ink); stroke: var(--sea); stroke-width: 1.6; transition: fill .2s; }
.g-ring { fill: none; stroke: var(--lapis); stroke-width: 1.6; opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
  transition: opacity .25s, transform .25s; }
.g-pin.is-on .g-ring { opacity: 1; transform: none; }
.g-pin.is-on .g-dot { fill: var(--lapis); }
.g-pin.is-dim .g-dot { opacity: .25; }
/* several places a short way apart: one dot with a thin outer ring and the count; it opens into a ring of dots on hover or tap */
.g-cluster.is-back, .g-cluster.is-future, .g-pin.is-folded, .g-legs line.is-future { display: none; }
.g-c-ring { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .55; }
.g-hub { fill: var(--gilt); opacity: 0; }
.g-n { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 12.5px; fill: var(--ink-2); pointer-events: none; }
html[dir="rtl"] .g-n { font-family: var(--f-ar-text); font-style: normal; font-size: 13px; }
.g-legs line { stroke: var(--gilt); stroke-width: 1; stroke-linecap: round; }
.g-cluster > .g-dot, .g-cluster > .g-c-ring, .g-cluster > .g-n, .g-hub { transition: opacity .2s; }
.g-cluster.is-open > .g-dot, .g-cluster.is-open > .g-c-ring, .g-cluster.is-open > .g-n { opacity: 0; }
.g-cluster.is-open > .g-hub { opacity: 1; }
.g-cluster.is-dim > .g-dot, .g-cluster.is-dim > .g-n, .g-cluster.is-dim > .g-c-ring { opacity: .25; }
.g-tag { position: absolute; top: 0; left: 0; z-index: 2; display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto 1fr;
  justify-content: start; column-gap: 6px; align-items: baseline; padding: 6px 12px 7px 6px; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
  width: max-content; max-width: min(340px, 86vw); font-family: var(--f-ui); font-size: .8125rem; line-height: 1.3; pointer-events: none; }
.g-tag[hidden] { display: none; }
.g-tag.is-tap { pointer-events: auto; }
.g-tag .g-no { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--gilt); font-size: .9375rem; }
html[dir="rtl"] .g-tag .g-no { font-family: var(--f-ar-text); font-style: normal; }
.g-tag .g-name { font-family: var(--f-display); font-size: 1.0625rem; line-height: 1.2; }
.g-tag .g-meta { grid-column: 2 / -1; color: var(--ink-2); font-size: .75rem; align-self: start; }
.g-tag .g-img { grid-row: 1 / 3; width: 48px; height: 60px; object-fit: cover; margin-inline-end: 6px; align-self: center; background: var(--paper-2); }
.g-tag .g-img:not([src]) { display: none; }
html[dir="rtl"] .g-tag { padding: 6px 6px 7px 12px; }
.g-route { fill: none; stroke: var(--gilt); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; opacity: .95; transition: opacity .6s; pointer-events: none; }
.g-route.is-fading { opacity: 0; }
.g-ctrl { display: grid; justify-items: end; gap: 10px; max-width: 520px; pointer-events: auto; }
.g-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; margin: 0;
  font-family: var(--f-ui); font-size: .75rem; line-height: 1.45; color: var(--ink-2); }
.g-cap > .g-cred { grid-column: 1 / -1; font-size: .6875rem; opacity: .85; }
@media (max-width: 999px) { .g-ctrl { justify-items: start; max-width: none; } .g-cap { grid-template-columns: minmax(0, 1fr); } }
.g-play { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 9px; border: 1px solid var(--rule); background: none;
  color: var(--ink); font: 500 .75rem/1 var(--f-ui); cursor: pointer; }
.g-play:hover, .g-hist:hover { border-color: var(--ink); }
.g-btns { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.g-hist { padding: 6px 10px; border: 1px solid var(--rule); background: none; color: var(--gilt); font: 500 .75rem/1 var(--f-ui); cursor: pointer; }
.g-hist[hidden] { display: none; }
.g-hist[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.g-pin.is-future { display: none; }
.g-year { display: grid; gap: 2px; justify-items: end; margin: 0; pointer-events: none; }
@media (max-width: 999px) { .g-year { justify-items: start; } }
.g-year[hidden] { display: none; }
.g-year .ce { font-family: "Newsreader", Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }
html[dir="rtl"] .g-year .ce { font-family: var(--f-ar-text); }
.g-year .ah { font-family: var(--f-ui); font-size: .8125rem; color: var(--gilt); font-variant-numeric: lining-nums; }
.g-play[hidden] { display: none; }
.g-play-i { width: 8px; height: 9px; border-inline: 2.5px solid currentColor; }
.g-play[aria-pressed="true"] .g-play-i { border: 0; width: 0; height: 0; border-block: 5px solid transparent; border-inline-start: 8px solid currentColor; }
@media (max-width: 600px) { .g-dot { r: 4.6px; } }
.cap-touch { display: none; }
@media (hover: none) { .cap-hover { display: none; } .cap-touch { display: inline; } }

/* ---------- home: plates (small cards, 6 / 4 / 3 / 2 across: 36 divides evenly by each) ---------- */
.index { padding-block: 34px 0; }
.filters { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 28px; margin-top: 12px; }
.filters[hidden], .f-none[hidden] { display: none; }
.regions { display: flex; flex-wrap: wrap; gap: 2px 22px; font-family: var(--f-ui); font-size: .875rem; }
.filters-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-family: var(--f-ui); font-size: .875rem; }
.f-in { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; border-bottom: 1px solid transparent; padding: 5px 0 4px;
  font: inherit; color: var(--ink-2); cursor: pointer; }
.f-in .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--turq); }
.f-in[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.f-in[aria-pressed="true"] .dot { background: var(--turq); }
.f-in > span:last-child { font-size: .75rem; font-variant-numeric: lining-nums tabular-nums; }
.f-q input { width: 210px; max-width: 100%; padding: 6px 2px 5px; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0; background: none;
  color: var(--ink); font: 400 .875rem/1.2 var(--f-ui); -webkit-appearance: none; appearance: none; }
.f-q input::placeholder { color: var(--ink-2); }
.f-q input:focus { outline: none; border-bottom-color: var(--lapis); box-shadow: 0 1px 0 var(--lapis); }
.f-none { margin-top: 26px; font-family: var(--f-ui); font-size: .9375rem; color: var(--ink-2); }
.f-count { margin-top: 10px; min-height: 1em; font-family: var(--f-ui); font-size: .75rem; color: var(--ink-2); font-variant-numeric: lining-nums; }
@media (max-width: 600px) { .filters-more, .f-q, .f-q input { width: 100%; } }
.regions button { background: none; border: 0; border-bottom: 1px solid transparent; padding: 5px 0 4px; font: inherit; color: var(--ink-2); cursor: pointer; }
.regions button span { font-size: .75rem; font-variant-numeric: lining-nums tabular-nums; }
.regions button:hover { color: var(--ink); }
.regions button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.plates { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
.plate[hidden] { display: none; }
.plate a { display: grid; gap: 5px; align-content: start; color: var(--ink); text-decoration: none; }
.plate-fig { position: relative; display: block; overflow: hidden; background: var(--paper-2); margin-bottom: 5px; }
.plate-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s; }
.plate a:hover .plate-img, .plate a:focus-visible .plate-img { transform: scale(1.04); }
.plate-sum { position: absolute; inset: auto 0 0 0; padding: 34px 10px 10px; color: #f4f2ec; font: 400 .8125rem/1.4 var(--f-text);
  background: linear-gradient(to top, rgb(8 9 11 / .88) 55%, rgb(8 9 11 / 0)); opacity: 0; transform: translateY(6px);
  transition: opacity .25s, transform .25s; pointer-events: none; }
.plate-sum > span { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
html[dir="rtl"] .plate-sum { font-size: .9375rem; line-height: 1.6; }
@media (hover: hover) { .plate a:hover .plate-sum, .plate a:focus-visible .plate-sum { opacity: 1; transform: none; } }
.plate-tag { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; padding: 2px 6px 3px; background: var(--paper); color: var(--ink);
  font: 500 .6875rem/1.2 var(--f-ui); letter-spacing: .04em; font-variant-numeric: lining-nums; }
.plate-head { display: flex; gap: 7px; align-items: baseline; }
.plate-no { flex: none; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1rem; color: var(--gilt); }
html[dir="rtl"] .plate-no { font-family: var(--f-ar-text); font-style: normal; font-size: 1.1rem; }
.plate-name { font-family: var(--f-display); font-size: 1.125rem; line-height: 1.15; letter-spacing: -.005em; }
html[dir="rtl"] .plate-name { font-size: 1.15rem; line-height: 1.45; letter-spacing: 0; }
.plate a:hover .plate-name, .plate.is-lit .plate-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.plate.is-lit .plate-fig { outline: 2px solid var(--lapis); outline-offset: 3px; }
.plate-alt { font-size: 1rem; color: var(--gilt); line-height: 1.3; }
.plate-alt.lat { font-style: italic; color: var(--ink-2); font-size: .9375rem; }
.plate-meta { font-family: var(--f-ui); font-size: .75rem; line-height: 1.45; color: var(--ink-2); font-variant-numeric: lining-nums; }
.plate-meta .in { color: var(--turq); font-weight: 500; }
.plate-meta .ah { color: var(--gilt); }
@media (max-width: 1239px) { .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 999px) { .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } }
@media (max-width: 599px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .plate-name { font-size: 1.0625rem; } }
/* the list view: the same cards as a compact index (number, name, place, years) */
.view-sw { display: inline-flex; border: 1px solid var(--rule); font-family: var(--f-ui); font-size: .8125rem; margin-inline-start: auto; }
.view-sw[hidden] { display: none; }
.view-sw button { padding: 5px 12px; border: 0; background: none; color: var(--ink-2); cursor: pointer; font: inherit; }
.view-sw button + button { border-inline-start: 1px solid var(--rule); }
.view-sw button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.plates.is-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--ink); }
.plates.is-list .plate { border-bottom: 1px solid var(--rule); }
.plates.is-list .plate > a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 9px 0 10px; }
.plates.is-list .plate-fig, .plates.is-list .plate-alt { display: none; }
.plates.is-list .plate-name { font-size: 1.0625rem; }
.plates.is-list .plate-meta br { display: none; }
.plates.is-list .pm-d::before { content: " · "; }
@media (max-width: 999px) { .plates.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .plates.is-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home: chronological chart (two calendars) ---------- */
.chrono { padding-block: 48px 6px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--ink); padding-top: 12px; }
.sec-head h2 { font-size: 1.5rem; font-weight: 500; }
.sec-head p { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); }
/* the timeline: one dot per place, stacked where the dots crowd; CE scale above, Hijri below */
.tl { --dd: 11px; --step: 13px; position: relative; margin-top: 16px; margin-inline-start: 34px; font-family: var(--f-ui); }
.tl-scale { position: relative; height: 26px; }
.tl-lab { position: absolute; inset-inline-end: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-size: .6875rem; color: var(--ink-2); white-space: nowrap; }
.tl-lab.ah { color: var(--gilt); }
.tl-ce, .tl-ah { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.tl-ce li, .tl-ah li { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: .75rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
html[dir="rtl"] .tl-ce li, html[dir="rtl"] .tl-ah li { transform: translate(50%, -50%); }
.tl-ah li { color: var(--gilt); }
.tl-field { position: relative; height: calc(var(--rows) * var(--step) + 18px); border-block: 1px solid var(--ink); }
.tl-dots { list-style: none; margin: 0; padding: 0; }
.tl-dot { --c: var(--ink); position: absolute; bottom: calc(8px + var(--lv, 0) * var(--step)); width: var(--dd); height: var(--dd);
  margin-inline-start: calc(var(--dd) / -2); border-radius: 50%; background: var(--c); border: 1.5px solid var(--c); transition: transform .15s, opacity .2s; }
.tl-dot.in { --c: var(--turq); }
.tl-dot.unc { background: var(--paper); }
.tl-dot:hover, .tl-dot:focus-visible, .tl-dot.is-lit { transform: scale(1.45); z-index: 2; }
.tl-dot.is-lit { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--lapis); }
.tl-dot.is-dim { opacity: .18; }
.tl-dot:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }
.tl-range { position: absolute; bottom: -1px; height: 3px; background: var(--gilt); pointer-events: none; }
.tl-range[hidden] { display: none; }
.tl-tip { position: absolute; z-index: 5; top: 0; left: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 7px; margin: 0;
  padding: 7px 12px 8px; background: var(--paper); border: 1px solid var(--ink); width: max-content; max-width: min(340px, 88vw);
  font-size: .75rem; line-height: 1.35; color: var(--ink-2); pointer-events: none; }
.tl-tip[hidden] { display: none; }
.tl-no { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--gilt); font-size: .9375rem; }
html[dir="rtl"] .tl-no { font-family: var(--f-ar-text); font-style: normal; }
.tl-t { font-family: var(--f-display); font-size: 1rem; color: var(--ink); line-height: 1.25; }
.tl-m { grid-column: 2; }
@media (max-width: 700px) {
  .tl { --dd: 9px; --step: 11px; }
  .tl-ce li:nth-child(even), .tl-ah li:nth-child(even) { display: none; }
}
.tl-key { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--f-ui); font-size: .75rem; color: var(--ink-2); margin-top: 10px; }
.tl-key span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1.5px solid var(--ink);
  margin-inline-end: 7px; vertical-align: -1px; }
.tl-key .in::before { background: var(--turq); border-color: var(--turq); }
.tl-key .unc::before { background: var(--paper); }

/* ---------- locator map + pins (place pages) ---------- */
.locator .land { fill: var(--land); }
.locator .grat { stroke: var(--grat); stroke-width: .6; }
.pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pin { position: absolute; width: 0; height: 0; }
.pin::before { content: ""; position: absolute; width: 9px; height: 9px; left: -4.5px; top: -4.5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2.5px var(--paper); }
.pin a { position: absolute; display: none; }

/* ---------- home: the word ---------- */
.word { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 28px; padding-block: 56px 0; }
.word h2 { grid-column: 1 / span 4; font-size: 1.75rem; display: grid; align-content: start; gap: 4px; }
.word-big { font-family: "Reem Kufi", "Geeza Pro", sans-serif; font-size: clamp(4.5rem, 9vw, 7.5rem); font-weight: 500; line-height: 1.15; color: var(--gilt); margin-top: 18px; }
.word-lat { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.25rem; font-weight: 400; color: var(--ink-2); }
html[dir="rtl"] .word-lat { display: none; }
.word-text { grid-column: 5 / span 7; display: grid; gap: 14px; }
.word .notes { grid-column: 5 / span 7; }
@media (max-width: 900px) { .word h2, .word-text, .word .notes { grid-column: 1 / -1; } }

/* ---------- place: entry header ---------- */
.crumbs { display: flex; gap: 8px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); padding-block: 18px 0; }
.crumbs a { color: var(--ink-2); }
.entry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 32px; padding-block: 22px 48px; align-items: start; }
.entry-text { grid-column: 1 / span 7; display: grid; gap: 18px; min-width: 0; }
.entry-photo { grid-column: 8 / span 5; }
.entry-no { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); }
.entry-no .n { font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.6rem; color: var(--gilt); line-height: 1; }
.share { margin-inline-start: auto; padding: 5px 10px; border: 1px solid var(--rule); background: none; color: var(--ink); cursor: pointer;
  font: 500 .75rem/1 var(--f-ui); }
.share:hover { border-color: var(--ink); }
.share[hidden] { display: none; }
html[dir="rtl"] .entry-no .n { font-family: var(--f-ar-text); font-style: normal; font-size: 1.8rem; }
.entry h1 { font-size: clamp(2.7rem, 6.4vw, 5.6rem); font-weight: 400; letter-spacing: -.026em; line-height: .96; }
.entry h1.long { font-size: clamp(2.4rem, 4.8vw, 4.3rem); line-height: 1; }
html[dir="rtl"] .entry h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); letter-spacing: 0; line-height: 1.25; }
html[dir="rtl"] .entry h1.long { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.names .kufi { font-size: 1.65rem; color: var(--gilt); line-height: 1.3; }
.names .lat { font-size: 1.35rem; color: var(--gilt); font-style: italic; }
.names .local { font-size: 1.125rem; color: var(--ink-2); }
.names .local i { font-family: "Newsreader", Georgia, serif; }
.lede { font-size: 1.375rem; line-height: 1.45; max-width: 38ch; }
html[dir="rtl"] .lede { font-size: 1.5rem; line-height: 1.7; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; border-top: 1px solid var(--ink);
  font-family: var(--f-ui); font-size: .875rem; line-height: 1.45; margin-top: 6px; }
.facts dt, .facts dd { margin: 0; padding-block: 9px; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-2); }
.facts dd { font-variant-numeric: lining-nums tabular-nums; }
.facts dd .ah { color: var(--gilt); }
.facts dd .note { color: var(--ink-2); font-size: .8125rem; display: inline-block; margin-top: 4px; }
.entry-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-2); }
.zoom { display: block; cursor: zoom-in; }
.gallery { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; }
.gallery a { display: block; cursor: zoom-in; }
.gallery img { width: 74px; height: 74px; object-fit: cover; background: var(--paper-2); transition: opacity .2s; }
.gallery a:hover img { opacity: .8; }
.lightbox .lb-nav { position: fixed; top: 50%; translate: 0 -50%; width: 44px; height: 64px; border: 1px solid #5a5c62; background: rgb(17 18 21 / .7);
  color: #ecebe6; font: 400 1.5rem/1 var(--f-ui); cursor: pointer; padding: 0; }
.lightbox .lb-nav:hover { border-color: #ecebe6; }
.lightbox .lb-prev { inset-inline-start: 16px; }
.lightbox .lb-next { inset-inline-end: 16px; }
.lightbox .lb-nav[hidden] { display: none; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 9 11 / .94); color: #ecebe6; }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; }
.lightbox::backdrop { background: rgb(8 9 11 / .6); }
.lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; }
.lightbox p { font: 400 .8125rem/1.5 var(--f-ui); color: #a3a49f; padding: 12px 16px 18px; text-align: center; }
.lightbox p a { color: #a3a49f; }
.lightbox .lb-close { position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); inset-inline-end: 16px; padding: 9px 14px; border: 1px solid #5a5c62;
  background: #111215; color: #ecebe6; font: 500 .8125rem/1 var(--f-ui); cursor: pointer; }
.lightbox .lb-close:hover { border-color: #ecebe6; }
.entry-photo figcaption, .cap { font-family: var(--f-ui); font-size: .75rem; color: var(--ink-2); line-height: 1.45; margin-top: 8px; }
.cap a, .entry-photo figcaption a { color: var(--ink-2); }
@media (max-width: 900px) { .entry-text, .entry-photo { grid-column: 1 / -1; } .entry-photo { max-width: 520px; } }
/* phones and tablets: the photograph comes right after the summary, before the table of facts */
@media screen and (max-width: 900px) {
  .entry { row-gap: 18px; }
  .entry-text { display: contents; }
  .entry-text > * { grid-column: 1 / -1; min-width: 0; }
  .entry-photo { order: 1; margin-block: 4px 6px; }
  .entry-text > .facts { order: 2; }
}

/* ---------- place: viewing room ---------- */
.room { background: var(--room); color: var(--room-ink); padding-block: 26px 30px; }
.room a { color: var(--room-ink); }
.room-in { display: grid; gap: 14px; }
.room-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.room-head h2 { font-size: 1.5rem; font-weight: 400; color: var(--room-ink); }
.room-head p { font-family: var(--f-ui); font-size: .8125rem; color: var(--room-ink-2); }
.stage { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; overflow: hidden; }
@media (max-width: 640px) { .stage { aspect-ratio: 4 / 5; } }
.stage .poster { width: 100%; height: 100%; object-fit: cover; opacity: .7; }
.stage-label { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 24px; text-align: center; pointer-events: none;
  font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.4rem); color: #f4f2ec; text-shadow: 0 2px 18px rgb(0 0 0 / .6); opacity: 0; transition: opacity .3s; }
.stage-label[hidden] { display: none; }
.stage.is-inside .poster { filter: blur(7px) brightness(.55); transform: scale(1.06); }
.stage.is-inside .stage-label { opacity: 1; }
.stage iframe, .stage .pano { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.enter { position: absolute; inset-inline-start: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 14px;
  font: 500 1rem/1 var(--f-ui); color: #0c0d10; background: #f3f2ed; border: 0; border-radius: 2px; padding: 15px 18px; cursor: pointer; }
.enter:hover { background: #fff; }
.enter svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
html[dir="rtl"] .enter svg { transform: scaleX(-1); }
.stage.loading::after { content: attr(data-loading); position: absolute; inset-inline-start: 22px; bottom: 22px; font-family: var(--f-ui);
  font-size: .8125rem; color: var(--room-ink); background: rgb(0 0 0 / .55); padding: 6px 10px; }
.reel { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: 14px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
.reel li { scroll-snap-align: start; }
.reel button { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; padding: 10px 0 0;
  background: none; border: 0; border-top: 2px solid var(--room-rule); color: var(--room-ink-2); text-align: start; cursor: pointer;
  font-family: var(--f-ui); font-size: .8125rem; line-height: 1.3; }
.reel button:hover { color: var(--room-ink); }
.reel button[aria-selected="true"] { border-top-color: var(--room-ink); color: var(--room-ink); }
.reel img { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; opacity: .8; }
.reel button[aria-selected="true"] img { opacity: 1; }
.reel .t { display: block; font-weight: 500; }
.reel .k { display: block; font-size: .75rem; color: var(--room-ink-2); }
.reel .in { color: #6fd0d3; }
.room-foot { display: flex; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; font-family: var(--f-ui); font-size: .75rem; color: var(--room-ink-2); line-height: 1.5; }
.room-foot li[hidden] { display: none; }
.room-foot ul { list-style: none; margin: 0; padding: 0; }

/* ---------- place: essay + margin ---------- */
.entry-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding-block: 56px 20px; align-items: start; }
.essay { display: grid; gap: 46px; min-width: 0; }
.essay section { display: grid; gap: 16px; max-width: 66ch; }
.essay h2 { font-size: 1.75rem; }
.essay p { hyphens: auto; }
html[dir="ltr"] #history p:first-of-type::first-letter { float: left; font-family: "Newsreader", Georgia, serif; font-size: 3.55em; line-height: .78;
  padding: .06em .09em 0 0; color: var(--gilt); font-weight: 400; }
sup.fn { font-family: var(--f-ui); font-size: .62em; line-height: 0; vertical-align: super; font-variant-numeric: lining-nums; }
sup.fn a { text-decoration: none; padding-inline: 1px; }
sup.fn a:hover { text-decoration: underline; }
.highlights { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: h; }
.highlights li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 6px; }
.highlights li::before { counter-increment: h; content: counter(h); font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 1.35em; line-height: 1.1; color: var(--gilt); }
html[dir="rtl"] .highlights li::before { content: counter(h, arabic-indic); font-family: var(--f-ar-text); font-style: normal; }
.open-view { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font: 500 .9375rem/1 var(--f-ui); color: var(--paper);
  background: var(--ink); border: 0; border-radius: 2px; padding: 12px 16px; cursor: pointer; }
.open-view:hover { background: var(--lapis); }
.open-view::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #6fd0d3; }
.visit { display: grid; gap: 14px; }
.visit ul { padding-inline-start: 1.1em; display: grid; gap: 6px; }
.visit-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--f-ui); font-size: .9375rem; }
.mapframe { width: 100%; height: 320px; border: 1px solid var(--rule); background: var(--paper-2); display: block; }
.margin { align-self: stretch; display: grid; gap: 30px; align-content: start; font-family: var(--f-ui); font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.toc { position: sticky; top: 18px; }
.near { margin-top: 12px; }
.near h3 { font-family: var(--f-ui); font-size: .75rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.near ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.near a { color: var(--ink-2); }
.near span { color: var(--ink-2); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; }
.toc a { display: block; padding: 5px 0 5px 12px; border-inline-start: 2px solid var(--rule); color: var(--ink-2); text-decoration: none; }
html[dir="rtl"] .toc a { padding: 5px 12px 5px 0; }
.toc a:hover { color: var(--ink); border-inline-start-color: var(--ink-2); }
.toc a[aria-current="true"] { color: var(--ink); border-inline-start-color: var(--lapis); font-weight: 500; }
:target, section[id], .src li { scroll-margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* citation preview: hovering or focusing a footnote number shows the source in place (app.js) */
.fn-pop { position: absolute; z-index: 30; max-width: min(380px, calc(100vw - 32px)); padding: 10px 12px 11px; background: var(--paper);
  color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 6px 24px rgb(0 0 0 / .14); font: 400 .8125rem/1.5 var(--f-ui); }
.fn-pop[hidden] { display: none; }
.fn-pop .fn-n { display: block; font-size: .6875rem; color: var(--ink-2); margin-bottom: 3px; font-variant-numeric: lining-nums; }
.fn-pop .pub { color: var(--ink-2); }
.fn-pop a { overflow-wrap: anywhere; }
.margin h2 { font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.margin-block { border-top: 1px solid var(--ink); padding-top: 10px; }
.locator { position: relative; }
.locator svg { display: block; width: 100%; height: auto; }
.locator .pin a { display: none; }
.locator .pin::before { width: 5px; height: 5px; left: -2.5px; top: -2.5px; background: var(--ink-2); box-shadow: none; }
.locator .pin.is-current::before { width: 11px; height: 11px; left: -5.5px; top: -5.5px; background: var(--turq); box-shadow: 0 0 0 2.5px var(--paper); }
.when { position: relative; height: 34px; margin-block: 6px 8px; }
.when-axis { position: absolute; left: 0; right: 0; top: 16px; border-top: 1px solid var(--ink-2); }
.when-tick { position: absolute; top: 10px; width: 1px; height: 13px; background: var(--ink-2); }
.when-tick.is-current { width: 3px; height: 26px; top: 3px; background: var(--turq); }
.when-ends { display: flex; justify-content: space-between; font-size: .6875rem; font-variant-numeric: lining-nums; }
.margin .big { font-family: var(--f-display); font-size: 1.25rem; color: var(--ink); line-height: 1.3; font-variant-numeric: lining-nums; }
@media (max-width: 1000px) { .entry-body { grid-template-columns: minmax(0, 1fr); gap: 40px; } .margin { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .toc { display: none; } }

/* ---------- sources + pager ---------- */
.sources { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px 64px; padding-block: 34px 0; }
.sources > div { min-width: 0; }
.sources h2 { font-size: 1.5rem; margin-bottom: 14px; }
.sources h3 { font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; margin-bottom: 8px; }
.src { font-family: var(--f-ui); font-size: .875rem; line-height: 1.5; display: grid; gap: 8px; padding-inline-start: 1.7em; }
html[dir="rtl"] .src { list-style: arabic-indic; }
.src li { padding-inline-start: 4px; overflow-wrap: anywhere; }
.src li::marker { color: var(--ink-2); font-variant-numeric: lining-nums; }
.src li:target { background: color-mix(in srgb, var(--lapis) 14%, transparent); }
.src .pub { color: var(--ink-2); }
.credits { list-style: none; padding: 0; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); display: grid; gap: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.credits a { color: var(--ink-2); }
.sources-top { border-top: 1px solid var(--ink); }
@media (max-width: 1000px) { .sources { grid-template-columns: minmax(0, 1fr); } }
.related { padding-block: 56px 0; }
.related .sec-head a { color: var(--ink-2); }
.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); margin-top: 56px; }
.pager a { display: grid; gap: 2px; padding-block: 16px; color: var(--ink); text-decoration: none; }
.pager a + a { text-align: end; border-inline-start: 1px solid var(--rule); padding-inline-start: 20px; }
.pager .k { font-family: var(--f-ui); font-size: .75rem; color: var(--ink-2); }
.pager .t { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.2; }
.pager a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- prose pages + footer ---------- */
.prose { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 28px; padding-block: 48px 0; }
.prose h1 { grid-column: 1 / span 5; font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 400; letter-spacing: -.02em; }
.prose-text { grid-column: 6 / span 7; display: grid; gap: 16px; }
.prose-text h2 { font-size: 1.4rem; margin-top: 18px; }
@media (max-width: 900px) { .prose h1, .prose-text { grid-column: 1 / -1; } }
.foot { border-top: 1px solid var(--ink); margin-top: 80px; }
.foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 28px; padding-block: 26px 48px; font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); line-height: 1.55; }
.foot-in .wordmark { grid-column: 1 / span 3; align-self: start; }
.foot-in .wm-lat { font-size: 1.3rem; } .foot-in .wm-ar { font-size: 1.2rem; }
.foot-text { grid-column: 4 / span 6; display: grid; gap: 8px; }
.foot-links { grid-column: 10 / span 3; display: grid; gap: 6px; align-content: start; }
.foot a { color: var(--ink-2); }
.foot-date { font-variant-numeric: lining-nums; }

/* page-to-page: a short cross-fade; a plate card's photo grows into the place page's photo (and back) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
  ::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}
.foot-regions { grid-column: 4 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.foot-regions span { color: var(--ink); font-weight: 500; }
.foot-langs { grid-column: 4 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.foot-langs span { color: var(--ink); font-weight: 500; }
@media (max-width: 800px) { .foot-langs { grid-column: 1 / -1; } }
/* a part still in English on another language's page */
.untr-note { font-family: var(--f-ui); font-size: .8125rem; color: var(--ink-2); border-inline-start: 2px solid var(--gilt); padding-inline-start: 12px; margin: 0 0 22px; }
html[dir="rtl"] .untr { font-family: "Newsreader", Georgia, serif; font-size: 1.125rem; line-height: 1.7; text-align: left; }
/* Persian: its own digits in numbered lists */
html[lang="fa"] .src { list-style: persian; }
html[lang="fa"] .highlights li::before { content: counter(h, persian); }
/* Chinese, Japanese, Korean: Latin from Newsreader / Plex, then the CJK face; no faux italics */
html[lang="zh-Hans"] { --f-display: "Newsreader", "Noto Serif SC", "Songti SC", serif; --f-text: "Newsreader", "Noto Serif SC", "Songti SC", serif;
  --f-ui: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif; }
html[lang="ja"] { --f-display: "Newsreader", "Noto Serif JP", "Hiragino Mincho ProN", serif; --f-text: "Newsreader", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-ui: "IBM Plex Sans", "Noto Sans JP", "Hiragino Sans", sans-serif; }
html[lang="ko"] { --f-display: "Newsreader", "Noto Serif KR", "AppleMyungjo", serif; --f-text: "Newsreader", "Noto Serif KR", "AppleMyungjo", serif;
  --f-ui: "IBM Plex Sans", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
html[lang="ko"] { word-break: keep-all; overflow-wrap: anywhere; }
html[lang="ja"], html[lang="zh-Hans"] { line-break: strict; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .g-name, html[lang="ja"] .plate-name { word-break: auto-phrase; }
html[lang="zh-Hans"] em, html[lang="ja"] em, html[lang="ko"] em, html[lang="zh-Hans"] i, html[lang="ja"] i, html[lang="ko"] i { font-style: normal; }
html[lang="zh-Hans"] body, html[lang="ja"] body, html[lang="ko"] body { line-height: 1.85; }
html[lang="zh-Hans"] h1, html[lang="ja"] h1, html[lang="ko"] h1 { letter-spacing: .01em; line-height: 1.3; }
/* Russian: Newsreader has no Cyrillic; Noto Serif carries it */
html[lang="ru"] { --f-display: "Newsreader", "Noto Serif", Georgia, serif; --f-text: "Newsreader", "Noto Serif", Georgia, serif; }
@media (max-width: 800px) { .foot-in .wordmark, .foot-text, .foot-links, .foot-regions { grid-column: 1 / -1; } }

/* 360° panorama (Pannellum) fills the stage like an iframe */
.pnlm-container { background: #000 !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* print: a place page as a clean reference sheet (no viewer, no navigation; links spelled out) */
@media print {
  :root { --paper: #fff; --paper-2: #f3f3f3; --ink: #000; --ink-2: #444; --rule: #bbb; --lapis: #000; --gilt: #6b4d14; color-scheme: light; }
  .mast nav, .skip, .room, .toc, .related, .pager, .foot-links, .open-view, .inside-cta, .g-play, .filters, .hero-links, .fn-pop, .theme { display: none !important; }
  body { font-size: 11pt; }
  .entry, .entry-body, .sources { display: block; }
  .entry-photo { max-width: 9cm; margin: 0 0 12pt; }
  .margin { display: block; margin-top: 18pt; }
  .src a::after { content: " <" attr(href) ">"; font-size: 8pt; color: #444; overflow-wrap: anywhere; }
  a { color: inherit; text-decoration: none; }
  h2, h3 { break-after: avoid; }
  section, li { break-inside: avoid; }
}