/* ==========================================================================
   Hana Karam — hanakaram.net
   Palette and type carried over from the designer's Squarespace version:
     sage ground #CAD5CA · navy ink #203B4D · muted green #608374
   Orpheus Pro / Adobe Garamond Pro (Adobe Fonts, licence-bound) are replaced
   with the closest open equivalents: Cormorant Garamond and EB Garamond.
   Arabic is set in Amiri, a Naskh face that sits comfortably beside Garamond.
   ========================================================================== */

:root {
  /* Evolved from the first Squarespace design's flat sage into the layered
     scheme of "Between East & West": a warm cream base, two tonal sage bands,
     and a deep forest green that serves as both ink and closing-band ground. */
  --paper: #f7f5ee;
  --band-sage: #d8e1d6;
  --band-sage-pale: #e3e8dc;
  --band-cream: #efede4;
  --forest: #263e35;

  --ink: #263e35;
  --ink-soft: #4c6157;
  --ink-mid: #53665b;
  --ink-faint: rgba(38, 62, 53, 0.2);
  --green: #4f6d5e;
  --green-deep: #33513f;
  --coral: #b9503c;

  --display: "Cormorant Garamond", "Times New Roman", serif;
  --body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --arabic: "Amiri", "Geeza Pro", "Times New Roman", serif;

  --measure: 34rem;
  --wide: 76rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --step: clamp(3.5rem, 8vw, 7rem);

  --t: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-height, 5rem) + 1rem); }
[hidden] { display: none !important; }
.sr-only { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-feature-settings: "liga" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="ar"] body {
  font-family: var(--arabic);
  font-size: 1.15rem;
  line-height: 1.95;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { overflow-wrap: anywhere; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--band-sage); color: var(--ink); }

/* ------------------------------------------------------------------ skip */
.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
}
.skip:focus { inset-inline-start: 0; }

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

/* ---------------------------------------------------------------- header */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 238, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
.site-head[data-scrolled="true"] {
  border-bottom-color: rgba(32, 59, 77, 0.14);
}

.head-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-inline-end: auto;
  flex-shrink: 0;
}
.brand svg { width: 1.6rem; height: 1.6rem; color: var(--green); flex: none; }
.brand-name {
  font-family: var(--display);
  font-size: 1.32rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
html[lang="ar"] .brand-name { font-family: var(--arabic); font-size: 1.28rem; }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.9vw, 1.9rem); }

.nav a {
  font-size: 0.975rem;
  letter-spacing: 0.012em;
  color: var(--ink-soft);
  padding-block: 0.4rem;
  position: relative;
  transition: color var(--t);
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.1rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--t);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--green); }

html[lang="ar"] .nav a { font-size: 1.04rem; }

/* Native disclosures remain usable if scripts fail. Closed contents are
   absent from both the focus order and the accessibility tree. */
.nav-menu, .language-picker { flex: none; }
.nav-toggle, .language-picker > summary {
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink-faint);
  border-radius: 3px;
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.nav-toggle::-webkit-details-marker, .language-picker > summary::-webkit-details-marker { display: none; }
html[lang="ar"] .nav-toggle { font-family: var(--arabic); }
.nav-menu:not([data-desktop]) .nav {
  position: absolute;
  inset: 100% 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: var(--paper);
  padding: 0.5rem var(--gutter) 1rem;
  border-bottom: 1px solid var(--ink-faint);
  max-height: calc(100vh - var(--head-height, 5rem));
  max-height: calc(100dvh - var(--head-height, 5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 1rem 1.5rem -1.5rem var(--forest);
}
.nav-menu:not([data-desktop]) .nav a { min-height: 48px; padding-block: 0.65rem; font-size: 1.15rem; border-bottom: 1px solid var(--ink-faint); }
.nav-menu:not([data-desktop]) .nav a::after { display: none; }
.nav-menu[data-desktop] { display: contents; }
.nav-menu[data-desktop] > summary { display: none; }
.language-picker { position: relative; }
.language-picker > summary span[lang="ar"] { font-family: var(--arabic); }
.lang {
  position: absolute;
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-end: 0;
  width: max-content;
  min-width: 9rem;
  max-height: calc(100dvh - var(--head-height, 5rem) - 1rem);
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  padding: 0.35rem;
  box-shadow: 0 0.6rem 1.5rem -0.5rem rgba(38, 62, 53, 0.2);
}
.lang a { display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.85rem; font-size: 1rem; }
.lang a[lang="ar"] { font-family: var(--arabic); }
.lang a:hover, .lang a[aria-current="true"] { background: var(--band-sage-pale); }

@media (max-width: 62rem) {
  .head-row { gap: 0.5rem; min-height: 4.25rem; flex-wrap: wrap; padding-block: 0.35rem; }
  .brand { flex: 1 1 9rem; min-width: 0; gap: 0.4rem; }
  .brand-name { font-size: 1.15rem; white-space: normal; line-height: 1.1; }
  .brand svg { width: 1.25rem; height: 1.25rem; }
  .brand-tag { display: none; }
}
@media (max-width: 23rem) {
  .brand svg { display: none; }
  .nav-toggle, .language-picker > summary { padding-inline: 0.55rem; font-size: 0.9rem; }
}

/* ------------------------------------------------------------------ hero */
.hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem);
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1.25rem;
}
html[lang="ar"] .kicker { letter-spacing: 0.04em; text-transform: none; font-size: 0.95rem; }

.hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
html[lang="ar"] .hero h1 {
  font-family: var(--arabic);
  font-weight: 400;
  line-height: 1.22;
  font-size: clamp(3rem, 9vw, 5.6rem);
  letter-spacing: 0;
}

.hero-line {
  font-size: 1.14rem;
  color: var(--ink-soft);
  max-width: 26rem;
  margin: 1.5rem 0 0;
}

.portrait {
  position: relative;
  margin: 0;
}
.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  filter: saturate(0.92);
}
.portrait figcaption {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.7rem;
  max-width: 24rem;
}

/* An interior two-column block reuses .hero-grid, but there the columns must
   align to the top — bottom alignment leaves a gap above the prose. */
.band > .hero-grid { align-items: start; }

/* ------------------------------------------------------------ section rhythm */
.band { padding-block: var(--step); }
.band + .band { padding-top: 0; }
.page-head + .band { padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }

.rule {
  border: 0;
  border-top: 1px solid var(--ink-faint);
  margin: 0;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 2rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--ink-faint);
}
html[lang="ar"] .eyebrow { letter-spacing: 0.03em; text-transform: none; font-size: 0.98rem; }

h2.section-title,
.page-head h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--green-deep);
}
html[lang="ar"] h2.section-title,
html[lang="ar"] .page-head h1 {
  font-family: var(--arabic);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

.page-head { padding-block: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head .lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 1.5rem 0 0;
}

/* ------------------------------------------------------------------ essay */
/* The essay is set in display type, so a 38rem measure yielded only ~40
   characters per line — far below the 60-75 that reads comfortably. Widen the
   column and ease the size down so the line length lands in range. */
.essay { max-width: 52rem; overflow-wrap: anywhere; }
.essay p {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.5;
  font-weight: 300;
  color: var(--green-deep);
  margin: 0 0 1.5rem;
}
.essay p:first-child::first-letter {
  font-size: 3.4em;
  float: inline-start;
  line-height: 0.78;
  padding-inline-end: 0.08em;
  padding-top: 0.06em;
  color: var(--coral);
  font-weight: 400;
}
/* Arabic words are shorter, so the same column runs far too long a line. */
html[lang="ar"] .essay,
html[lang="ar"] .welcome { max-width: 40rem; }
html[lang="ar"] .essay p {
  font-family: var(--arabic);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.95;
  font-weight: 400;
}
html[lang="ar"] .essay p:first-child::first-letter {
  font-size: 1em;
  float: none;
  padding: 0;
  color: inherit;
}

.welcome {
  overflow-wrap: anywhere;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--ink-faint);
  max-width: 52rem;
}
.welcome p:first-child {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1rem;
}
html[lang="ar"] .welcome p:first-child { font-family: var(--arabic); font-style: normal; line-height: 1.6; }
.welcome p:last-child { margin: 0; color: var(--ink-soft); font-size: 1.1rem; }

.signature {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--green-deep);
  margin-top: 2rem;
}
html[lang="ar"] .signature { font-family: var(--arabic); font-style: normal; }

/* ------------------------------------------------------------------- cta */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  max-width: 100%;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--paper); }
.btn .arrow { transition: transform var(--t); }
.btn:hover .arrow { transform: translateX(0.22rem); }
html[dir="rtl"] .btn:hover .arrow { transform: translateX(-0.22rem); }
html[lang="ar"] .btn { text-transform: none; letter-spacing: 0; font-size: 1.05rem; }

/* ----------------------------------------------------------------- books */
.book {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--ink-faint);
  align-items: start;
}
@media (min-width: 48rem) {
  .book { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .book--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }
  .book--reverse .book-visual { order: 2; }
  /* Heba has no cover scan; let the text take the whole measure rather than
     leaving an empty column that reads as a stray indent. */
  .book--nocover { grid-template-columns: minmax(0, 1fr); }
}

.book-visual { margin: 0; }
.book-visual img {
  width: 100%;
  box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(32, 59, 77, 0.45);
  background: var(--paper);
}
.book-visual--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  align-items: start;
}
.book-visual figcaption {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.65rem;
}

.book-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1rem;
}
html[lang="ar"] .book-meta { letter-spacing: 0.02em; text-transform: none; font-size: 0.95rem; }

.book h2 {
  font-family: var(--arabic);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.35;
  margin: 0;
  color: var(--ink);
  direction: rtl;
  unicode-bidi: isolate;
  text-align: right;
}
/* On the Latin pages the Arabic title must still sit flush with the Latin
   subtitle beneath it, so override the RTL default alignment. */
html[lang="en"] .book h2,
html[lang="fr"] .book h2 { text-align: left; }
.book .book-latin {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--green-deep);
  margin: 0.4rem 0 1.5rem;
}
html[lang="ar"] .book .book-latin { display: none; }

.book p { margin: 0 0 1.1rem; max-width: 36rem; }

.dedication {
  margin: 1.75rem 0 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--coral);
  font-family: var(--display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink);
  max-width: 34rem;
}
html[lang="ar"] .dedication { font-family: var(--arabic); font-style: normal; }
.dedication p { margin: 0 0 0.85rem; }
.dedication p:last-child { margin: 0; }

.questions {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  max-width: 34rem;
  counter-reset: q;
}
.questions li {
  counter-increment: q;
  position: relative;
  padding-inline-start: 2.25rem;
  margin-bottom: 1.1rem;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink);
}
html[lang="ar"] .questions li { font-family: var(--arabic); font-size: 1.15rem; line-height: 1.85; }
.questions li::before {
  content: counter(q);
  position: absolute;
  inset-inline-start: 0;
  top: 0.15em;
  font-family: var(--body);
  font-size: 0.8rem;
  color: var(--coral);
  letter-spacing: 0.05em;
}

.fine { font-size: 0.85rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- stories */
.story-list { list-style: none; margin: 0; padding: 0; }

.story-list li { border-top: 1px solid var(--ink-faint); }
.story-list li:last-child { border-bottom: 1px solid var(--ink-faint); }

.story {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.15rem;
  transition: padding-inline var(--t), color var(--t);
}
.story:hover { color: var(--green-deep); padding-inline-start: 0.6rem; }
html[dir="rtl"] .story:hover { padding-inline-start: 0; padding-inline-end: 0.6rem; }

.story-title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 300;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
.story-title--ar {
  font-family: var(--arabic);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.6;
  direction: rtl;
  unicode-bidi: isolate;
  text-align: start;
}
.story-note {
  unicode-bidi: isolate;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: none;
}
html[lang="ar"] .story-note { letter-spacing: 0.02em; text-transform: none; font-size: 0.92rem; }
.story-go { flex: none; color: var(--coral); transition: transform var(--t); }
.story:hover .story-go { transform: translateX(0.25rem); }
html[dir="rtl"] .story:hover .story-go { transform: translateX(-0.25rem); }

/* On narrow screens a long note (French labels especially) pushes the arrow
   past the viewport, so let the row stack instead. */
@media (max-width: 34rem) {
  .story { flex-wrap: wrap; gap: 0.2rem 0.7rem; }
  .story-title { flex: 1 1 100%; }
  /* Greek and French labels run long; let the note shrink and wrap rather
     than pushing the arrow off the edge. */
  .story-note { order: 2; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .story-go { order: 3; margin-inline-start: auto; flex: none; }
}

.two-col {
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .two-col { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------- listings */
.ticks { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.ticks li {
  position: relative;
  padding-inline-start: 1.6rem;
  margin-bottom: 0.9rem;
}
.ticks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--coral);
}

.press-list { list-style: none; margin: 0; padding: 0; }
.press-list li {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--ink-faint);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------ pull / card */
.card {
  background: var(--band-sage-pale);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-top: 2px solid var(--green);
}
.card h2,
.card h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
html[lang="ar"] .card h2,
html[lang="ar"] .card h3 { font-family: var(--arabic); }
.card p { margin: 0 0 1.25rem; color: var(--ink-soft); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--ink-faint);
  align-items: baseline;
}
@media (max-width: 34rem) {
  .timeline li { grid-template-columns: 1fr; gap: 0.25rem; }
}
.timeline dt,
.timeline .tl-key {
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
}
html[lang="ar"] .timeline .tl-key { letter-spacing: 0.02em; text-transform: none; font-size: 1rem; }

/* ----------------------------------------------------------------- form */
.form { max-width: 34rem; margin-top: 2.5rem; }
.field { margin-bottom: 1.5rem; }
.field label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 0.5rem;
}
html[lang="ar"] .field label { letter-spacing: 0.02em; text-transform: none; font-size: 1rem; }
.field .req { color: var(--coral); text-transform: none; letter-spacing: 0; font-size: 0.78rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-faint);
  padding: 0.6rem 0;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color var(--t);
}
.field select { appearance: none; background-image: none; cursor: pointer; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--green);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.form-status {
  margin-top: 1.25rem;
  font-size: 1rem;
  min-height: 1.5rem;
}
.form-status[data-state="ok"] { color: var(--green-deep); }
.form-status[data-state="err"] { color: var(--coral); }

.mail-alt { margin-top: 2.5rem; font-size: 1rem; color: var(--ink-soft); }
.mail-alt a { border-bottom: 1px solid var(--coral); }

/* --------------------------------------------------------------- footer */
.site-foot {
  /* The final .band already supplies bottom padding; adding --step here
     produced a double gap above the footer. */
  margin-top: 0;
  border-top: 1px solid var(--ink-faint);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  font-size: 0.95rem;
}
.foot-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; }
}
.foot-h {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1rem;
}
html[lang="ar"] .foot-h { letter-spacing: 0.02em; text-transform: none; font-size: 0.95rem; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin-bottom: 0.6rem; }
.foot-list a { color: var(--ink-soft); transition: color var(--t); }
.foot-list a:hover { color: var(--ink); }
.foot-ar { font-family: var(--arabic); color: var(--ink-soft); font-size: 1.1rem; margin: .15rem 0 0; }
html[lang="en"] .foot-ar,
html[lang="fr"] .foot-ar { text-align: left; }
.foot-note {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink-faint);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.foot-mark {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--green-deep);
  margin: 0 0 0.75rem;
}
html[lang="ar"] .foot-mark { font-family: var(--arabic); }

/* Content is readable immediately, including when JavaScript fails. */
.reveal { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- print */
@media print {
  .site-head, .site-foot, .cta-row, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
}


/* ==========================================================================
   Tonal bands, numbered sections, arch portrait, pill language switcher
   and dark closing band — adopted from the "Between East & West" design.
   ========================================================================== */

.band--sage      { background: var(--band-sage); }
.band--sage-pale { background: var(--band-sage-pale); }
.band--cream     { background: var(--band-cream); }

/* A tinted band needs its own padding: it is a coloured surface, not a gap. */
.band--sage,
.band--sage-pale,
.band--cream { padding-block: var(--step); }
.page-head + .band--sage,
.page-head + .band--sage-pale,
.page-head + .band--cream { padding-top: var(--step); }

.band--dark {
  background: var(--forest);
  color: var(--paper);
  padding-block: var(--step);
}
.band--dark .eyebrow { color: rgba(247, 245, 238, 0.72); }
.band--dark .eyebrow::after { background: rgba(247, 245, 238, 0.3); }
.band--dark h2.section-title { color: var(--paper); }
.band--dark p { color: rgba(247, 245, 238, 0.82); }
.band--dark .btn {
  border-color: rgba(247, 245, 238, 0.5);
  color: var(--paper);
}
.band--dark .btn:hover { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.band--dark .btn--solid { background: var(--paper); color: var(--forest); border-color: var(--paper); }
.band--dark .btn--solid:hover { background: var(--band-sage); border-color: var(--band-sage); color: var(--forest); }
.band--dark a:not(.btn) { color: var(--paper); border-bottom: 1px solid rgba(247, 245, 238, 0.45); }

/* numbered section label — one flex child, so the trailing rule keeps the gap
   and the number sits tight against its word.

   "01 · Welcome" is a single phrase, so the number, the separator and the word
   all take one colour and one size, inherited from .eyebrow. They previously
   carried three different colours, which read as three fragments. */
.eyebrow .sec-label { display: inline-flex; align-items: baseline; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.eyebrow .sec-num {
  font-variant-numeric: tabular-nums;
  color: inherit;
  margin-inline-end: 0.15rem;
}
.eyebrow .sec-dot { color: inherit; margin-inline: 0.35rem; }

/* wordmark tagline */
.brand-stack { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.brand-tag {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
}
html[lang="ar"] .brand-tag {
  font-family: var(--arabic);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.82rem;
}
@media (max-width: 30rem) { .brand-tag { display: none; } }

/* Keep the homepage photograph's natural proportions under a decorative arch. */
.portrait--home img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 46% 46% 3px 3px / 32% 32% 3px 3px;
}
.portrait--home figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-top: 0.85rem;
  max-width: none;
  text-align: center;
}
html[lang="ar"] .portrait--home figcaption {
  letter-spacing: 0; text-transform: none; font-size: 0.9rem;
}

/* featured pull quote */
.pull {
  margin: 0;
  max-width: 32rem;
}
.pull blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
html[lang="ar"] .pull blockquote {
  font-family: var(--arabic);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
}
.pull cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
html[lang="ar"] .pull cite { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }

/* tighter display tracking, as in the reference design */
.hero h1 { letter-spacing: -0.035em; }
html[lang="ar"] .hero h1 { letter-spacing: 0; }
h2.section-title,
.page-head h1 {
  letter-spacing: -0.022em;
  text-wrap: balance;
}
html[lang="ar"] h2.section-title,
html[lang="ar"] .page-head h1 { letter-spacing: 0; }

/* hero sits on its own tinted band now */
.hero {
  background: var(--band-sage);
  padding-block: 2.5rem;
}
.hero .hero-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  row-gap: 2rem;
}
.hero .hero-copy { text-align: center; }
.hero .hero-line { margin-inline: auto; max-width: 40rem; }
.hero .portrait { width: min(100%, 360px); }
.hero h1 { font-size: clamp(3.2rem, 8.5vw, 5.6rem); }

/* back to top */
.to-top {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  transition: color var(--t);
}
.to-top:hover { color: var(--ink); }
html[lang="ar"] .to-top { letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

/* ==========================================================================
   Plate galleries — scanned book pages, press cuttings, school photographs
   ========================================================================== */

.sub-block { margin-top: 2.25rem; }

.sub-label {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 1rem;
}
html[lang="ar"] .sub-label { letter-spacing: 0.02em; text-transform: none; font-size: 0.98rem; }

.pub { margin-top: 2.75rem; }
.pub-name { font-weight: 500; }
.pub-name[dir="rtl"] {
  font-family: var(--arabic);
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
}
.pub-kind { color: var(--ink-mid); letter-spacing: 0.1em; }
html[lang="ar"] .pub-kind { letter-spacing: 0; }
.pub-count {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: var(--coral);
}

.plates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.15rem);
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
.plates--dense { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.plates--photos { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }

.plates li { margin: 0; }

.plates a {
  display: block;
  position: relative;
  background: var(--paper);
  box-shadow: 0 0.5rem 1.4rem -0.8rem rgba(38, 62, 53, 0.5);
  transition: transform var(--t), box-shadow var(--t);
}
.plates a:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem -0.8rem rgba(38, 62, 53, 0.55);
}
.plates img {
  width: 100%;
  height: auto;
  display: block;
}
/* the scanned pages are portrait and of slightly varying ratio; crop to a
   common shape so the grid reads as a grid rather than a ragged pile */
.plates--dense img,
.plates:not(.plates--photos) img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 0;
}
.plates--photos img { aspect-ratio: 3 / 2; object-fit: cover; }

.plates a span {
  display: block;
  padding: 0.55rem 0.65rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
html[lang="ar"] .plates a span {
  letter-spacing: 0; text-transform: none; font-size: 0.9rem; font-family: var(--arabic);
}

.band--dark .plates a { background: rgba(247, 245, 238, 0.08); }

/* ==========================================================================
   Media viewer
   ========================================================================== */

html.lbx-open { overflow: hidden; padding-inline-end: var(--sbw, 0); }

.lbx {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--forest) 95%, black);
  opacity: 0;
  transition: opacity 200ms ease;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .lbx { background: #1b2c26; }
}
.lbx.is-in { opacity: 1; }
.lbx[hidden] { display: none; }

/* A flex column is what makes the image's max-height resolve reliably: the
   stage is allowed to shrink (min-height: 0), so a tall scan is scaled down to
   fit rather than running off the bottom of the screen. */
.lbx-figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
}

.lbx-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.lbx-cap { flex: none; }

.lbx-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  flex: 0 1 auto;
  display: block;
  background: var(--paper);
  box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, 0.7);
  opacity: 1;
  transition: opacity 160ms ease;
}
.lbx.is-loading .lbx-img { opacity: 0; }
.lbx.can-zoom .lbx-img { cursor: zoom-in; }
.lbx.is-zoom .lbx-img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

/* a quiet spinner while the full-size scan arrives */
.lbx.is-loading .lbx-stage::after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid rgba(247, 245, 238, 0.28);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: lbx-spin 700ms linear infinite;
}
@keyframes lbx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lbx, .lbx-img { transition: none; }
  .lbx.is-loading .lbx-stage::after { animation-duration: 2s; }
}

.lbx-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.25rem;
  color: rgba(247, 245, 238, 0.92);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-align: start;
  padding-inline: 0.15rem;
}
.lbx-text { font-family: var(--display); font-size: 1.05rem; }
html[lang="ar"] .lbx-text { font-family: var(--arabic); }
.lbx-meta {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-inline-start: auto;
  white-space: nowrap;
}
.lbx-count {
  font-variant-numeric: tabular-nums;
  color: rgba(247, 245, 238, 0.6);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}
html[lang="ar"] .lbx-count { letter-spacing: 0; font-size: 0.9rem; }
.lbx-full {
  color: rgba(247, 245, 238, 0.6);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 245, 238, 0.25);
  padding-bottom: 1px;
}
.lbx-full:hover, .lbx-full:focus-visible { color: var(--paper); border-color: var(--paper); }
html[lang="ar"] .lbx-full { letter-spacing: 0; text-transform: none; font-size: 0.88rem; }

.lbx-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid rgba(247, 245, 238, 0.22);
  border-radius: 50%;
  background: rgba(247, 245, 238, 0.06);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform var(--t);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lbx-btn svg { width: 1.15rem; height: 1.15rem; }
.lbx-btn:hover { background: rgba(247, 245, 238, 0.16); border-color: rgba(247, 245, 238, 0.5); }
.lbx-btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.lbx-btn[hidden] { display: none; }

.lbx-close { top: clamp(0.85rem, 2.5vw, 1.6rem); inset-inline-end: clamp(0.85rem, 2.5vw, 1.6rem); }
.lbx-nav { top: 50%; transform: translateY(-50%); }
.lbx-prev { inset-inline-start: clamp(0.5rem, 2vw, 1.6rem); }
.lbx-next { inset-inline-end: clamp(0.5rem, 2vw, 1.6rem); }
.lbx-nav:hover { transform: translateY(-50%) scale(1.06); }
/* the arrows are drawn pointing left/right; mirror them for Arabic */
html[dir="rtl"] .lbx-nav svg { transform: scaleX(-1); }

.lbx-status {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* On phones the nav buttons would sit on top of the page, so drop them to the
   bottom corners and let the swipe carry most of the navigating. */
@media (max-width: 34rem) {
  .lbx { padding: 3.6rem 0.75rem 1rem; }
  .lbx-nav { top: auto; bottom: 0.75rem; transform: none; }
  .lbx-nav:hover { transform: none; }
  .lbx-cap { padding-bottom: 3.4rem; font-size: 0.82rem; }
  .lbx-meta { margin-inline-start: 0; }
}

.plates a { cursor: zoom-in; }

/* ==========================================================================
   The flourish

   Lifted from the 2006 masthead, where a white arabesque sat behind the
   wordmark. It is used as a mask so it takes the colour of whatever band it
   sits on, and kept faint enough to be felt rather than looked at.
   ========================================================================== */

.flourish {
  position: absolute;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-image: url("../assets/ornament.png");
  mask-image: url("../assets/ornament.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* top-left of the hero, echoing where it sat in 2006 */
.flourish--hero {
  top: 0;
  inset-inline-start: clamp(-2rem, -1vw, 0rem);
  width: clamp(18rem, 34vw, 30rem);
  aspect-ratio: 825 / 310;
  color: var(--forest);
  opacity: 0.07;
}
html[dir="rtl"] .flourish--hero { transform: scaleX(-1); }

/* centred above the closing band's heading, where white reads clearly */
.flourish--center {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(11rem, 22vw, 17rem);
  aspect-ratio: 825 / 310;
  color: var(--paper);
  opacity: 0.16;
}

.hero, .band--dark { position: relative; overflow: hidden; }

/* Masks are well supported, but if they are not the flourish must not appear
   as an opaque block of colour. */
@supports not ((mask-image: url("x")) or (-webkit-mask-image: url("x"))) {
  .flourish { display: none; }
}

/* ==========================================================================
   Dotted leaders on the story rows

   The 2006 navigation ran dotted leaders between each item and its edge, the
   way an index or a table of contents does. It suits a list of stories.
   ========================================================================== */

.story { position: relative; }

.story-title { position: relative; }

.story-leader {
  flex: 1 1 2rem;
  min-width: 1.5rem;
  align-self: baseline;
  height: 1px;
  margin-bottom: 0.32em;
  border-bottom: 1px dotted color-mix(in srgb, var(--forest) 34%, transparent);
  opacity: 0.85;
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .story-leader { border-bottom-color: rgba(38, 62, 53, 0.34); }
}
.band--dark .story-leader { border-bottom-color: rgba(247, 245, 238, 0.3); }

/* On a narrow screen the title takes the full row and the leader would be a
   stray dash, so it is dropped. */
@media (max-width: 34rem) {
  .story-leader { display: none; }
}

.sub-note {
  margin: -0.5rem 0 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-mid);
  max-width: 34rem;
}

/* Keep the centered portrait compact on mobile without cropping its height. */

@media (max-width: 51.999rem) {
  .hero { padding-block: 1.5rem 2rem; }
  .hero .hero-grid { row-gap: 1rem; }
  .hero h1 { font-size: clamp(2.6rem, 10vw, 3.4rem); }
  .hero .kicker { margin-bottom: 0.75rem; font-size: 0.72rem; letter-spacing: 0.12em; }
  .hero-line { margin-top: 0.85rem; font-size: 1.08rem; line-height: 1.5; }
  .hero .portrait { width: min(100%, 260px); }
  .hero .portrait figcaption { margin-top: 0.3rem; font-size: 0.72rem; }
}


/* Jump links shorten the route through the writing and image archives. */
.jump-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.jump-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 0.85rem; border: 1px solid var(--ink-faint); border-radius: 3px; font-size: 1rem; }
.jump-links a:hover { background: var(--band-sage-pale); }
.jump-links a[lang="ar"] { font-family: var(--arabic); }
.home-reading .section-title { margin-bottom: 1rem; }
.mail-alt a { text-decoration: underline; overflow-wrap: anywhere; }
@media (max-width: 34rem) {
  .lbx-close { top: max(0.85rem, env(safe-area-inset-top)); }
  .lbx-nav { bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .lbx-cap { padding-bottom: calc(3.4rem + env(safe-area-inset-bottom)); }
}