/* Self-hosted: Cormorant Garamond + Inter (Google Fonts static woff2, latin + latin-ext) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-italic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Nasser AlYousif — design system
   Museum-grade austere: the works carry the colour.
   Logical properties only (Arabic RTL, phase 2).
   ============================================================ */

:root {
  --ink: #1a1917;         /* near-black warm ink */
  --ground: #faf9f7;      /* near-white warm ground */
  --line: #d9d6d0;        /* hairlines */
  --quiet: #6b6862;       /* captions, apparatus */
  --accent: #8a2f1d;      /* sparing: hover, current-page marker */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --measure: 62ch;
  --space: clamp(1rem, 2.5vw, 2rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1; inline-size: 100%; }

img { max-inline-size: 100%; block-size: auto; }

h1, h2, h3, .wordmark {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}

a { color: inherit; }

::selection { background: var(--accent); color: var(--ground); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: var(--gutter);
  background: var(--ink);
  color: var(--ground);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  text-decoration: none;
  z-index: 10;
}
.skip-link:focus { inset-block-start: 0.5rem; }

/* ---- apparatus: small-caps eyebrow labels ---- */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0;
}

/* ---- header ---- */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding-block: 1.6rem 1.4rem;
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--line);
}

.wordmark {
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(0.9rem, 2.2vw, 1.9rem);
  row-gap: 0.35rem;
}

.site-header nav a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--quiet);
  padding-block: 0.25rem 0.35rem;
  border-block-end: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-header nav a:hover { color: var(--accent); }

.site-header nav a[aria-current="page"] {
  color: var(--ink);
  border-block-end-color: var(--accent);
}

@media (min-width: 60rem) {
  .site-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
  .site-header nav { justify-content: flex-end; }
}

/* ---- home: the masterwork ---- */
.hero {
  text-align: center;
  padding-inline: var(--gutter);
  padding-block: clamp(3.5rem, 9vh, 6.5rem) clamp(3rem, 7vh, 5rem);
}

.hero-name {
  font-size: clamp(2.9rem, 9vw, 5.75rem);
  line-height: 1.02;
  margin-block-start: 1.1rem;
}

.hero-dates {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--quiet);
  margin-block: 0.9rem 0;
}

.hero-work {
  margin: 0;
  margin-block-start: clamp(3rem, 7vh, 5rem);
}

.hero-work a { display: inline-block; line-height: 0; }

.hero-work img {
  inline-size: auto;
  max-inline-size: min(100%, 58rem);
  max-block-size: 74vh;
  box-shadow:
    0 1px 2px rgba(26, 25, 23, 0.08),
    0 18px 50px -24px rgba(26, 25, 23, 0.35);
}

.hero-work figcaption {
  font-size: 0.8rem;
  color: var(--quiet);
  letter-spacing: 0.02em;
  margin-block-start: 1.2rem;
}

.hero-work cite {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
}

.hero-intro {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.55;
  max-inline-size: 44ch;
  margin-inline: auto;
  margin-block: clamp(3rem, 7vh, 4.5rem) 0;
  text-wrap: balance;
}

/* ---- home: contents index ---- */
.contents {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 6vh, 4.5rem) clamp(4rem, 9vh, 6.5rem);
}

.contents .eyebrow { text-align: center; margin-block-end: 1.6rem; }

.index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--line);
}

.index li { border-block-start: 1px solid var(--line); }

.index a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.05rem;
  text-decoration: none;
}

.index-label {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.index-desc {
  font-size: 0.82rem;
  color: var(--quiet);
  margin-inline-start: auto;
  text-align: end;
}

.index-mark {
  color: var(--line);
  flex-shrink: 0;
  transition: color 0.2s ease, transform 0.25s ease;
}

.index a:hover .index-label { color: var(--accent); }
.index a:hover .index-mark { color: var(--accent); transform: translateX(0.25rem); }

@media (max-width: 34rem) {
  .index a { flex-wrap: wrap; row-gap: 0.1rem; }
  .index-desc { flex-basis: 100%; margin-inline-start: 0; text-align: start; }
  .index-mark { display: none; }
}

/* ---- interior pages ---- */
.page {
  padding-inline: var(--gutter);
  padding-block-end: clamp(4rem, 9vh, 6.5rem);
}

.page-head {
  text-align: center;
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(2.5rem, 6vh, 4rem);
}

.page-head h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.05;
  margin-block-start: 1rem;
}

/* ---- prose ---- */
.prose {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

.prose p {
  margin-block: 0 1.25em;
  font-size: 0.98rem;
  line-height: 1.8;
}

.prose > p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  margin-block-end: 1.5em;
}

.prose h2 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  line-height: 1.15;
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.6rem;
  margin-block: 2.8rem 1.1rem;
}

.prose h3 {
  font-size: 1.3rem;
  margin-block: 2rem 0.8rem;
}

.prose a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.prose a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.prose em { font-style: italic; }

.prose ul {
  padding-inline-start: 1.2rem;
  margin-block: 0 1.25em;
}

.prose li { font-size: 0.98rem; line-height: 1.8; }

.prose blockquote {
  margin: 0;
  margin-block: 2.4rem;
  padding-inline-start: 1.7rem;
  border-inline-start: 2px solid var(--line);
}

.prose blockquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.5rem);
  line-height: 1.5;
  margin: 0;
}

/* ---- chronology timeline ---- */
.chronology {
  max-inline-size: var(--measure);
  margin-inline: auto;
  margin-block-start: clamp(3.5rem, 8vh, 5.5rem);
}

.chronology h2 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.6rem;
  margin-block-end: 1.4rem;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--line);
}

.timeline li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  column-gap: 1.4rem;
  padding-block: 0.9rem;
  border-block-start: 1px solid var(--line);
}

.tl-year {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
}

.tl-event {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink);
  align-self: center;
}

@media (max-width: 34rem) {
  .timeline li { grid-template-columns: 4.25rem 1fr; column-gap: 1rem; }
  .tl-year { font-size: 1.05rem; }
}

/* ---- footer ---- */
.site-footer {
  border-block-start: 1px solid var(--line);
  padding-inline: var(--gutter);
  padding-block: 2.2rem 2.6rem;
  text-align: center;
}

.site-footer p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--quiet);
  letter-spacing: 0.02em;
}

.site-footer .footer-quiet { margin-block-start: 0.5rem; font-size: 0.74rem; }

.site-footer a {
  color: var(--quiet);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}

.site-footer a:hover { color: var(--accent); }

/* ---- entrance: one quiet, staggered rise ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero > * {
    animation: rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
  .hero > *:nth-child(2) { animation-delay: 0.08s; }
  .hero > *:nth-child(3) { animation-delay: 0.16s; }
  .hero > *:nth-child(4) { animation-delay: 0.28s; }
  .hero > *:nth-child(5) { animation-delay: 0.42s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- works index / period pages ---- */
.page-head-works,
.page-head {
  text-align: center;
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(2.5rem, 6vh, 4rem);
  padding-inline: var(--gutter);
}

.page-intro {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  color: var(--quiet);
  max-inline-size: 40ch;
  margin-inline: auto;
  margin-block-start: 1rem;
}

.period-group {
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1rem, 3vh, 2rem);
  border-block-start: 1px solid var(--line);
}

.period-group:first-of-type { border-block-start: none; }

.period-group .eyebrow { text-align: center; margin-block-end: 1rem; }
.period-group .eyebrow a { text-decoration: none; }
.period-group .eyebrow a:hover { color: var(--accent); }

.period-group h2 {
  text-align: center;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
}

.period-group h2 a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.period-group h2 a:hover { color: var(--accent); }

.period-group .range {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--quiet);
}

.period-count {
  text-align: center;
  font-size: 0.78rem;
  color: var(--quiet);
  margin-block: 0.4rem 0;
}

.period-essay {
  max-inline-size: var(--measure);
  margin-inline: auto;
  margin-block: clamp(2rem, 5vh, 3rem) 0;
}

.period-essay > p:first-child { font-size: 1rem; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-block-start: clamp(2rem, 5vh, 3rem);
}

.work-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}

.work-card img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--line);
  transition: opacity 0.2s ease;
}

.work-card:hover img { opacity: 0.82; }

.card-caption {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--quiet);
  transition: color 0.2s ease;
}

.work-card:hover .card-caption { color: var(--accent); }

.work-card[hidden] { display: none; }

/* ---- filter bar (JS-inserted) ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--gutter);
  padding-block: 1.4rem;
  border-block-end: 1px solid var(--line);
  position: sticky;
  inset-block-start: 0;
  background: var(--ground);
  z-index: 5;
}

.filter-select {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  padding: 0.5rem 0.7rem;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--quiet);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pill:hover { color: var(--accent); border-color: var(--accent); }

.pill.is-active {
  color: var(--ground);
  background: var(--ink);
  border-color: var(--ink);
}

.period-group[hidden] { display: none; }

.filter-empty {
  padding-inline: var(--gutter);
  padding-block: 2.5rem;
  color: var(--quiet);
}
.filter-empty[hidden] { display: none; }

/* ---- single work page ---- */
.work {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vh, 3rem);
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 6vh, 4rem) clamp(4rem, 9vh, 6.5rem);
}

.work-figure {
  margin: 0;
  line-height: 0;
}

.work-figure img {
  /* Centred by the image itself, not by its container: the enlarge link that
     wraps it is a full-width block, so an image capped at max-inline-size
     would otherwise sit against the link's leading edge. */
  display: block;
  margin-inline: auto;
  inline-size: auto;
  max-inline-size: min(100%, 52rem);
  max-block-size: 78vh;
  box-shadow:
    0 1px 2px rgba(26, 25, 23, 0.08),
    0 18px 50px -24px rgba(26, 25, 23, 0.35);
}

.tombstone {
  text-align: center;
  max-inline-size: 36rem;
}

.tombstone h1 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1.15;
}

.title-ar {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 0.85em;
  color: var(--quiet);
  margin-block-start: 0.35rem;
}

.caption {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--quiet);
  margin-block: 0.9rem 0;
}

.apparatus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  margin-block: 1.2rem 0;
  padding-block-start: 1.1rem;
  padding-inline-start: 0;
  border-block-start: 1px solid var(--line);
  list-style: none;
}

.apparatus li {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--quiet);
}

.period-link {
  margin: 0;
  margin-block-start: 1.4rem;
}

.period-link a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--quiet);
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.period-link a:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================
   The research archive
   A reading room: registers of documents, then each document
   page by page - the scan, the Arabic transcription and the
   English translation set as equals.
   ============================================================ */

/* Arabic is set in a naskh face, a little larger than the English and looser,
   so the primary source reads as a primary source. Short Arabic strings
   (captions, labels) get their direction here rather than from a dir attribute,
   which is reserved for the transcription pane itself. */
:root {
  --arabic: 'Noto Naskh Arabic', 'Amiri', 'Geeza Pro', 'Traditional Arabic', serif;
}

[lang="ar"] {
  direction: rtl;
  unicode-bidi: isolate;
  font-family: var(--arabic);
}

/* Alignment is inherited, not forced: an Arabic title inside a centred
   tombstone must centre with its English line, while an Arabic paragraph in a
   left-aligned block still starts on the right because its own direction
   resolves `start`. Forcing `text-align: start` here pushed every Arabic
   title and caption to the right edge of its centred container. */

.archive-body {
  max-inline-size: 58rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-end: clamp(4rem, 9vh, 6.5rem);
}

/* The search field is inert without JavaScript, so it stays out of the page
   until the search script removes .js-only. (Class order matters here: the
   .js-only rule has to out-specify the .archive-search display below.) */
.js-only, .archive-search.js-only { display: none; }

.archive-search {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-end: clamp(2rem, 5vh, 3rem);
}

.archive-input {
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-block-end: 1px solid var(--line);
  padding-block: 0.6rem;
  inline-size: 100%;
}

.archive-input:focus { outline: none; border-block-end-color: var(--accent); }

.archive-results[hidden] { display: none; }

/* ---- search filters (JS-inserted into .archive-search) ---- */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.archive-filter-select {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line);
  padding: 0.5rem 0.7rem;
}

.archive-filter-clear {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
  background: transparent;
  border: none;
  padding: 0.3rem 0;
  cursor: pointer;
  transition: color 0.2s ease;
}

.archive-filter-clear:hover { color: var(--accent); }

.archive-results .archive-count {
  margin: 0 0 0.5rem;
}

.archive-empty {
  color: var(--quiet);
  font-size: 0.92rem;
  padding-block: 1.4rem;
  border-block: 1px solid var(--line);
}

.archive-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
}

.archive-jump a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--quiet);
  transition: color 0.2s ease;
}

.archive-jump a:hover { color: var(--accent); }
.archive-jump .count { color: var(--line); margin-inline-start: 0.35rem; }

.archive-category {
  padding-block: clamp(2.5rem, 6vh, 3.5rem) 0;
}

.archive-category h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
}

.archive-category h2 a { text-decoration: none; transition: color 0.2s ease; }
.archive-category h2 a:hover { color: var(--accent); }

.archive-count {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
}

/* ---- the document register ---- */
.doc-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  border-block-end: 1px solid var(--line);
}

.doc-row { border-block-start: 1px solid var(--line); }

.doc-row > a {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-block: 1.1rem;
  text-decoration: none;
  color: inherit;
}

.doc-thumb {
  inline-size: 3.5rem;
  flex: none;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--line);
  transition: opacity 0.2s ease;
}

.doc-thumb-none { display: block; border: 1px solid var(--line); background: transparent; }

.doc-row > a:hover .doc-thumb { opacity: 0.82; }

.doc-row-text { display: block; }

.doc-row-title {
  display: block;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.2s ease;
}

.doc-row > a:hover .doc-row-title { color: var(--accent); }

.doc-row-sub {
  display: block;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--quiet);
  margin-block-start: 0.25rem;
}

.doc-row-meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-block-start: 0.45rem;
}

/* ---- chronological register ---- */
.archive-chronology { padding-block: clamp(3rem, 7vh, 4.5rem) 0; }

.archive-chronology h2 {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.6rem;
}

.chrono-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  border-block-end: 1px solid var(--line);
}

.chrono-list li { border-block-start: 1px solid var(--line); }

.chrono-list a {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  column-gap: 1.2rem;
  align-items: baseline;
  padding-block: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.chrono-year {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--quiet);
}

.chrono-title {
  font-size: 0.92rem;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.chrono-list a:hover .chrono-title { color: var(--accent); }

.chrono-cat {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--quiet);
  text-align: end;
}

@media (max-width: 34rem) {
  .chrono-list a { grid-template-columns: 3rem 1fr; row-gap: 0.2rem; }
  .chrono-cat { grid-column: 2; text-align: start; }
}

/* ---- a single document ---- */
.document {
  padding-inline: var(--gutter);
  padding-block-end: clamp(4rem, 9vh, 6.5rem);
}

.doc-head {
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(3rem, 8vh, 5rem) clamp(1.5rem, 4vh, 2.5rem);
}

.doc-head .eyebrow a { text-decoration: none; }
.doc-head .eyebrow a:hover { color: var(--accent); }

.doc-head h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12;
  margin-block-start: 1rem;
  text-wrap: balance;
}

.doc-subtitle {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.4;
  color: var(--quiet);
  margin-block: 0.7rem 0;
}

.doc-meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-block: 1.1rem 0;
}

.doc-description {
  max-inline-size: var(--measure);
  margin-inline: auto;
  margin-block-start: 1.6rem;
  text-align: start;
}

.doc-description p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

.doc-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  max-inline-size: var(--measure);
  margin-inline: auto;
  margin-block: 1.4rem 0;
}

.doc-keywords span { font-size: 0.74rem; color: var(--quiet); }
.doc-keywords .pane-label { flex-basis: 100%; text-align: center; }

.page-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem 0.7rem;
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-block: 1rem;
  border-block: 1px solid var(--line);
}

.page-nav a {
  font-size: 0.78rem;
  color: var(--quiet);
  text-decoration: none;
  padding-inline: 0.3rem;
  transition: color 0.2s ease;
}

.page-nav a:hover { color: var(--accent); }
.page-nav .pane-label { margin-inline-end: 0.4rem; }

/* film and video: recorded as a link only - no embedding, no third-party
   script (our CSP has no frame-src and refuses iframes outright) */
.doc-video-link {
  text-align: center;
  margin-block: clamp(2rem, 5vh, 3rem);
}

.doc-video-link a {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--quiet);
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.doc-video-link a:hover { color: var(--accent); border-color: var(--accent); }

.doc-empty {
  text-align: center;
  color: var(--quiet);
  font-size: 0.9rem;
  padding-block: 3rem;
}

/* ---- one page of a document ---- */
.doc-page {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 7vh, 4.5rem);
  border-block-start: 1px solid var(--line);
  scroll-margin-block-start: 1.5rem;
}

.scan {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.scan a { display: block; line-height: 0; }

.scan img {
  inline-size: auto;
  max-inline-size: min(100%, 42rem);
  max-block-size: 76vh;
  background: var(--line);
  box-shadow:
    0 1px 2px rgba(26, 25, 23, 0.08),
    0 18px 50px -24px rgba(26, 25, 23, 0.35);
}

.scan figcaption {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}

/* ---- the two panes: transcription and translation, as equals ---- */
.panes {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  margin-block-start: clamp(2rem, 5vh, 3rem);
}

@media (min-width: 56.25rem) {
  .panes-two { grid-template-columns: 1fr 1fr; }
}

/* A page transcribed in one language only keeps a readable measure rather than
   running the full width of the spread. */
.panes:not(.panes-two) .pane { max-inline-size: var(--measure); }

.pane {
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
  min-inline-size: 0;
}

.pane p, .pane li { margin-block: 0 1em; }
.pane p:last-child, .pane li:last-child { margin-block-end: 0; }
.pane ul, .pane ol { padding-inline-start: 1.2rem; margin-block: 0 1em; }
.pane h1, .pane h2, .pane h3 { font-size: 1.15rem; margin-block: 1.2em 0.5em; }
.pane img { display: block; margin-block: 1em; }
.pane a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.pane a:hover { color: var(--accent); }

.pane-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 0 0 0.9rem;
}

.transcription {
  font-family: var(--arabic);
  text-align: start;
  font-size: 1.18rem;
  line-height: 2.05;
}

.transcription .pane-label {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

.translation, .commentary {
  font-size: 0.95rem;
  line-height: 1.85;
}

.commentary {
  color: var(--quiet);
  font-style: italic;
}

/* Quill's alignment classes, as they arrive in the transcribed text */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-direction-rtl { direction: rtl; }

/* ---- photographs printed with the page ---- */
.page-evidence {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-block-start: clamp(2rem, 5vh, 3rem);
  padding-block-start: clamp(1.5rem, 4vh, 2.25rem);
  border-block-start: 1px solid var(--line);
}

.page-evidence figure { margin: 0; }

/* Photographs keep their own proportions - nothing is cropped - but a cap on
   height stops one tall portrait setting the rhythm for a whole row. */
.page-evidence a {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 0;
}

.page-evidence img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 20rem;
  block-size: auto;
  background: var(--line);
  transition: opacity 0.2s ease;
}

.page-evidence a:hover img { opacity: 0.82; }

.page-evidence figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block-start: 0.8rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--quiet);
}

.page-evidence figcaption [lang="ar"] { font-size: 0.95rem; line-height: 1.8; }

/* ---- works discussed ---- */
.page-artworks {
  margin-block-start: clamp(2rem, 5vh, 3rem);
  padding-block-start: clamp(1.5rem, 4vh, 2.25rem);
  border-block-start: 1px solid var(--line);
}

.artwork-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.artwork-row a {
  inline-size: 7.5rem;
  text-decoration: none;
  color: inherit;
}

.artwork-row img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--line);
  transition: opacity 0.2s ease;
}

.artwork-row a:hover img { opacity: 0.82; }

.artwork-row span {
  display: block;
  margin-block-start: 0.5rem;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--quiet);
  transition: color 0.2s ease;
}

.artwork-row a:hover span { color: var(--accent); }

/* ---- document footer ---- */
.doc-foot {
  max-inline-size: 58rem;
  margin-inline: auto;
  padding-block-start: clamp(3rem, 7vh, 4.5rem);
}

.doc-related { margin-block-end: clamp(2.5rem, 6vh, 3.5rem); }

.doc-related h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  border-block-start: 1px solid var(--line);
  padding-block-start: 1.5rem;
}

.doc-related .doc-list { margin-block-start: 1rem; }

.page-head .eyebrow a { text-decoration: none; transition: color 0.2s ease; }
.page-head .eyebrow a:hover { color: var(--accent); }

.doc-back { margin: 0; text-align: center; }
.archive-body > .doc-back { margin-block-start: clamp(2.5rem, 6vh, 3.5rem); }

.doc-back a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--quiet);
  border-block-end: 1px solid var(--line);
  padding-block-end: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.doc-back a:hover { color: var(--accent); border-color: var(--accent); }

/* Provenance note on works reproduced from the monograph */
.source-note {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--quiet);
  max-inline-size: 34ch;
  margin-inline: auto;
}

/* Cross-links from a work page to the archive documents that discuss it */
.work-documents {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
  max-inline-size: 34ch;
  margin-inline: auto;
  text-align: center;
}

.work-documents .pane-label { margin-block-end: 0.6rem; }

.work-documents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.work-documents li {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--quiet);
}

.work-documents a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
}

.work-documents a:hover { color: var(--accent); }

/* Enlarged scan or photograph. Dismissed by clicking anywhere, pressing
   Escape, or the close button; without JavaScript the links simply open the
   image file as before. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 25, 23, 0.92);
  cursor: zoom-out;
}
.lightbox img {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-close {
  position: absolute;
  inset-block-start: clamp(0.5rem, 2vw, 1.5rem);
  inset-inline-end: clamp(0.5rem, 2vw, 1.5rem);
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 1px solid rgba(250, 249, 247, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--ground);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  border-color: var(--ground);
  background: rgba(250, 249, 247, 0.12);
}
.lightbox-hint {
  position: absolute;
  inset-block-end: clamp(0.75rem, 3vw, 2rem);
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 249, 247, 0.6);
}
body.lightbox-open { overflow: hidden; }
.scan a, .page-evidence a { cursor: zoom-in; }
.work-figure a { display: block; line-height: 0; cursor: zoom-in; }

/* Moving between the images on a page without leaving the overlay. */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 3rem;
  block-size: 3rem;
  border: 1px solid rgba(250, 249, 247, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--ground);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-prev { inset-inline-start: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-next { inset-inline-end: clamp(0.5rem, 2vw, 1.5rem); }
.lightbox-prev:hover, .lightbox-next:hover,
.lightbox-prev:focus-visible, .lightbox-next:focus-visible {
  border-color: var(--ground);
  background: rgba(250, 249, 247, 0.12);
}
.lightbox-counter {
  position: absolute;
  inset-block-start: clamp(0.75rem, 2vw, 1.6rem);
  inset-inline: 0;
  margin: 0;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(250, 249, 247, 0.6);
}

/* Stepping through the catalogue: arrows at the edges of the screen, in the
   order the index lists the works. The title travels in the label and the
   tooltip rather than on screen, so the artwork keeps the page to itself. */
.work-arrow {
  position: fixed;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(250, 249, 247, 0.94);
  color: rgba(26, 25, 23, 0.62);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.work-arrow svg { inline-size: 1.45rem; block-size: 1.45rem; display: block; }
.work-arrow-prev { inset-inline-start: clamp(1.25rem, 4vw, 4.5rem); }
.work-arrow-next { inset-inline-end: clamp(1.25rem, 4vw, 4.5rem); }
.work-arrow:hover,
.work-arrow:focus-visible {
  color: var(--accent);
  background: var(--ground);
}

@media (max-width: 40rem) {
  .work-arrow { inline-size: 2.75rem; block-size: 2.75rem; }
  .work-arrow svg { inline-size: 1.15rem; block-size: 1.15rem; }
}
}