/* Al-Itqan Institute — Learning Station Children's Maktab
   ---------------------------------------------------------------------------
   The design idea is the Institute's own name. *Itqan* means mastery: doing a
   thing with precision and care. Its visual home is the ruled manuscript page
   — the jadwal rule that frames a mushaf text block, the ruled class register,
   the handwriting line. So the page is ruled, not boxed: a single gold hairline
   runs down both margins from the ribbon to the last line of the footer, and
   content is separated by rules rather than floated on cards and shadows.

   Two faces, because there are two kinds of content here. Literata is the
   book — headings, prose, what families say. Archivo is the register pinned to
   the wall — ages, times, fees, nav, forms. Amiri sets the Arabic.

   Tokens first, then the page frame, then components, then pages.
   --------------------------------------------------------------------------- */

/* ---------- tokens ---------- */
:root {
  /* ink on paper */
  --ink: #241d16;          /* warm gall-ink brown-black */
  --ink-soft: #574b3e;
  --ink-faint: #75695c;
  --paper: #fbf7ed;        /* ivory */
  --paper-deep: #f3ebd9;   /* the recessed band */
  --rule: #e0d4ba;
  --rule-soft: #ebe2cd;

  /* the board */
  --green: #0d3a2d;
  --green-deep: #07261d;
  --green-lift: #12493a;
  --green-line: #2b6151;
  --green-text: #e2ece7;
  --green-faint: #a8c6b8;

  /* illumination */
  --gold: #8d6113;         /* text-safe gold, 4.6:1 on either paper tone */
  --gold-lift: #b8862b;
  --gold-rule: #c6a054;    /* hairline gold — borders, underlines */
  --leaf: #fd9f14;         /* the logo amber — bright, on green only */
  --gold-ink: #35230a;     /* text on a gold fill */

  /* measure and rhythm */
  --measure: 66ch;
  --rail: clamp(1.25rem, 4.5vw, 3.25rem);
  --shell: 1080px;

  /* type scale */
  --t--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --t-0: clamp(1.0313rem, 1.01rem + 0.11vw, 1.0938rem);
  --t-1: clamp(1.1875rem, 1.13rem + 0.28vw, 1.375rem);
  --t-2: clamp(1.4375rem, 1.31rem + 0.63vw, 1.875rem);
  --t-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.625rem);
  --t-4: clamp(2.375rem, 1.72rem + 3.27vw, 4.25rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: `hidden` would break the sticky masthead. Needed because
   the off-canvas nav sits outside the viewport when closed. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Literata, Georgia, "Times New Roman", serif;
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.14; letter-spacing: -0.008em; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Archivo is the register: anything a parent scans rather than reads. */
.nav, .ribbon, .btn, .faq__q, .field label, .form__status, .crumb,
.rail, .register, .prayer, .price, .quotes figcaption, .columns h3,
.roster, .footer, .tag { font-family: Archivo, ui-sans-serif, system-ui, sans-serif; }

.arabic { font-family: Amiri, "Noto Naskh Arabic", serif; direction: rtl; line-height: 1.9; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: 100;
  background: var(--green); color: var(--paper); padding: .7rem 1.1rem;
  font-family: Archivo, sans-serif; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- the page measure ----------
   The single width every band is laid out on. The margin hairlines that used
   to run down each side of it have been removed at the owner's request. */
.shell {
  width: min(100%, var(--shell) + var(--rail) * 2);
  margin-inline: auto;
  padding-inline: var(--rail);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center;
  font: inherit; font-family: Archivo, sans-serif;
  font-size: var(--t--1); font-weight: 600; letter-spacing: .005em;
  padding: .8rem 1.4rem; border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--green { background: var(--green); color: var(--paper); }
.btn--green:hover { background: var(--gold); color: var(--paper); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: none; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--leaf { background: var(--leaf); color: var(--gold-ink); }
.btn--leaf:hover { background: var(--paper); color: var(--green); }
.btn--onboard { border-color: var(--green-faint); color: var(--green-text); background: none; }
.btn--onboard:hover { background: var(--green-text); color: var(--green); border-color: var(--green-text); }

/* ---------- ribbon ---------- */
.ribbon {
  background: var(--green-deep); color: var(--green-faint);
  font-size: var(--t--1); font-weight: 400;
}
.ribbon__inner {
  display: flex; flex-wrap: wrap; gap: .2rem 2rem; align-items: center;
  padding: .6rem 0; justify-content: space-between;
}
.ribbon a { text-decoration: none; }
.ribbon a:hover { color: var(--leaf); }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 40; }
/* The blur lives on a pseudo-element: backdrop-filter on .masthead itself
   would make it the containing block for the fixed off-canvas nav inside it. */
.masthead::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 247, 237, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; }
.brand { display: inline-flex; }
.brand img { height: 64px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  text-decoration: none; font-size: var(--t--1); font-weight: 500;
  padding-block: .3rem; border-bottom: 1px solid transparent;
}
.nav a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.nav .btn { border-bottom: 0; padding: .6rem 1.1rem; }
.nav .btn:hover { border-bottom: 0; color: var(--paper); }

.nav-toggle {
  display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: inherit;
  position: relative; z-index: 5; /* stays clickable above the open nav panel */
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(20rem, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 5.5rem 1.75rem 2rem;
    background: var(--paper); border-left: 1px solid var(--rule);
    transform: translateX(100%); transition: transform .25s ease, visibility .25s;
    visibility: hidden; overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; visibility: visible; }
  .nav a { font-size: var(--t-1); font-weight: 500; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
  .nav a[aria-current="page"] { color: var(--gold); }
  .nav .btn { justify-content: center; margin-top: 1.5rem; border-bottom: 0; }
}

/* ---------- bands ---------- */
.band { padding: 0; }
.band > .shell { padding-block: clamp(3rem, 7vw, 5.5rem); }
.band--deep { background: var(--green-deep); color: var(--green-text); }
.band--green { background: var(--green); color: var(--green-text); }
.band--warm { background: var(--paper-deep); }
.band--green p, .band--deep p { color: var(--green-faint); }
.band--green a, .band--deep a { text-decoration-color: var(--green-line); }

.band__head { max-width: 46ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.band__title { font-size: var(--t-3); text-wrap: balance; }
.band__intro { margin: .85rem 0 0; color: var(--ink-soft); font-size: var(--t-1); line-height: 1.5; }
.band--green .band__intro, .band--deep .band__intro { color: var(--green-faint); }

/* ---------- hero ---------- */
.hero > .shell { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .hero__grid { grid-template-columns: 1.02fr .98fr; } }

/* The opening mark. Every lesson and every Islamic text begins with it, so the
   page does too — small, in gold, above the first line rather than decorating
   the page. Live text in Amiri, not an image. */
.bismillah {
  font-family: Amiri, "Noto Naskh Arabic", serif;
  color: var(--gold-lift); font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1; margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}
.hero__title { font-size: var(--t-4); font-weight: 600; letter-spacing: -0.018em; line-height: 1.07; text-wrap: pretty; }
.hero__lede { font-size: var(--t-1); line-height: 1.5; color: var(--ink-soft); margin-top: 1.5rem; max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* facts, set on the rule below the hero copy like a ledger foot */
.rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule);
}
.rail > div { padding: 1.1rem 1rem 0 0; }
.rail > div + div { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.rail dt { font-size: var(--t--1); color: var(--ink-faint); }
.rail dd { margin: .35rem 0 0; font-size: var(--t-2); font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: lining-nums tabular-nums; }

/* Three columns is too narrow on a phone; the facts become a ruled list,
   which is the same object the register already is. */
@media (max-width: 560px) {
  .rail { grid-template-columns: 1fr; }
  .rail > div,
  .rail > div + div {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: .85rem 0 .85rem 0; border-left: 0; border-bottom: 1px solid var(--rule);
  }
  .rail dd { margin: 0; font-size: var(--t-1); }
}

/* ---------- the class register (hero centrepiece) ---------- */
.register {
  background: var(--green); color: var(--green-text);
  padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(198, 160, 84, .45);
}
.register__head { padding-bottom: 1rem; border-bottom: 1px solid var(--green-line); }
.register__title { font-family: Literata, Georgia, serif; font-size: var(--t-1); font-weight: 600; color: var(--paper); }
.register__when { font-size: var(--t--1); color: var(--green-faint); font-variant-numeric: lining-nums tabular-nums; margin: .3rem 0 0; }
.register__list { list-style: none; }
.register__row {
  display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .2rem 1rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid rgba(43, 97, 81, .6);
}
.register__row:last-child { border-bottom: 0; padding-bottom: 0; }
.register__code {
  grid-row: span 2; align-self: center;
  font-weight: 700; font-size: var(--t-1); letter-spacing: -0.02em; color: var(--leaf);
  font-variant-numeric: lining-nums;
}
.register__who { font-weight: 600; color: var(--paper); font-size: var(--t-0); }
.register__age { font-size: var(--t--1); color: var(--green-faint); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.register__teacher { grid-column: 2 / -1; font-size: var(--t--1); color: var(--green-faint); }
/* Given the full width of the page, the register reads better as a true
   four-column ledger line than as a stacked two-line row. */
@media (min-width: 780px) {
  .register--wide .register__row { grid-template-columns: 2.8rem 5rem 7rem 1fr; align-items: baseline; }
  .register--wide .register__code { grid-row: auto; align-self: baseline; }
  .register--wide .register__teacher { grid-column: auto; text-align: right; }
}
.register__foot {
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--green-line);
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
}
.register__cap { font-size: var(--t--1); color: var(--green-faint); margin: 0; max-width: 28ch; font-family: Archivo, sans-serif; }

/* ---------- the syllabus (ruled list, not cards) ---------- */
.syllabus { list-style: none; display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .syllabus { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.syllabus li { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.syllabus h3 { font-size: var(--t-1); font-weight: 600; }
.syllabus p { margin: .6rem 0 0; color: var(--ink-soft); font-size: var(--t-0); max-width: 42ch; }
.band--warm .syllabus, .band--warm .syllabus li { border-color: var(--rule); }
.tag {
  display: inline-block; margin-top: .9rem; font-size: var(--t--1); font-weight: 600;
  color: var(--gold); border: 1px solid var(--gold-rule); border-radius: 2px; padding: .15rem .55rem;
}

/* ---------- columns (the four assurances, on green) ----------
   Vertical gold rules between columns: a ledger's columns, which is what this
   content is — four separate answers to four separate questions. */
.columns { list-style: none; display: grid; gap: 2rem; }
@media (min-width: 700px) { .columns { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1000px) { .columns { grid-template-columns: repeat(4, 1fr); gap: 0; } }
/* subgrid so a heading that wraps to two lines does not push its own paragraph
   out of line with the others in the row */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .columns { grid-template-rows: auto auto; }
    .columns li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  }
  @media (min-width: 840px) {
    .quotes { grid-template-rows: auto auto; }
    .quotes li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .quotes figure { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
    .quotes figcaption { align-self: end; }
  }
}
.columns li { padding-top: 1.25rem; border-top: 2px solid var(--leaf); }
@media (min-width: 1000px) {
  .columns li { padding: 1.25rem 1.75rem 0 0; }
  .columns li + li { border-left: 1px solid var(--green-line); padding-left: 1.75rem; }
}
.columns h3 { font-size: var(--t-0); font-weight: 600; color: var(--paper); line-height: 1.35; letter-spacing: 0; }
.columns p { margin: .6rem 0 0; font-size: var(--t--1); color: var(--green-faint); font-family: Literata, Georgia, serif; }

/* ---------- roster ---------- */
.roster { list-style: none; display: grid; border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .roster { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 3.5rem); } }
@media (min-width: 980px) { .roster { grid-template-columns: repeat(3, 1fr); } }
.roster li {
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.roster .name { font-family: Literata, Georgia, serif; font-weight: 500; }
.roster .role { font-size: var(--t--1); color: var(--ink-faint); white-space: nowrap; }

/* ---------- what families say ----------
   No boxes. A hanging gold quotation mark, the words, a rule, the family. */
.quotes { list-style: none; display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 840px) { .quotes { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); } }
.quotes figure { margin: 0; position: relative; padding-top: 2.75rem; }
.quotes figure::before {
  content: "\201C"; position: absolute; top: -.35rem; left: -.15rem;
  font-family: Literata, Georgia, serif; font-size: 4.5rem; line-height: 1;
  color: var(--gold-rule);
}
.quotes blockquote { margin: 0; font-size: var(--t-1); line-height: 1.5; color: var(--ink); }
.quotes figcaption {
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--rule);
  font-size: var(--t--1); color: var(--ink-faint);
}
.quotes figcaption b { font-weight: 600; color: var(--ink); }

/* ---------- fees ---------- */
.fees { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 880px) { .fees { grid-template-columns: 1.15fr 1fr; } }
.aside { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
@media (min-width: 880px) {
  .aside { padding: 0 0 0 clamp(2rem, 4vw, 3.5rem); border-top: 0; border-left: 1px solid var(--rule); }
}
.aside h3 { font-size: var(--t-1); font-weight: 600; margin-bottom: .8rem; }
.aside p { font-size: var(--t-0); color: var(--ink-soft); }
.band--green .aside, .band--deep .aside { border-color: var(--green-line); }
.band--green .aside h3, .band--deep .aside h3 { color: var(--paper); }
/* .aside p sets a dark ink; on a green band it has to be re-lit, or it sinks. */
.band--green .aside p, .band--deep .aside p { color: var(--green-faint); }
.price {
  display: flex; align-items: baseline; gap: .6rem; margin-top: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.price b { font-size: var(--t-4); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.price span { font-size: var(--t-0); color: var(--ink-faint); font-family: Archivo, sans-serif; }
.band--green .price span, .band--deep .price span { color: var(--green-faint); }
.fees__note { margin-top: 1.4rem; }
.band--green strong, .band--deep strong { color: var(--paper); font-weight: 600; }

/* ---------- gallery ----------
   Four columns. The two landscape photographs span two columns at 3:2, the
   portrait ones take one at 3:4, so nothing is cropped to a shape it isn't. */
.gallery { display: grid; gap: .75rem; grid-template-columns: repeat(4, 1fr); }
.gallery img { width: 100%; object-fit: cover; border-radius: 2px; }
.shot--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
.shot--tall { aspect-ratio: 3 / 4; }
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot--wide { grid-column: span 2; }
}

/* ---------- questions ---------- */
.faq { list-style: none; border-top: 1px solid var(--rule); }
.faq li { border-bottom: 1px solid var(--rule); }
.faq h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }
.faq__q {
  width: 100%; display: flex; gap: 1.5rem; align-items: baseline; justify-content: space-between;
  background: none; border: 0; padding: 1.35rem 0; font-size: var(--t-1);
  font-family: Literata, Georgia, serif; font-weight: 500; line-height: 1.35;
  text-align: left; cursor: pointer; color: inherit;
}
.faq__q:hover { color: var(--gold); }
.faq .marker { flex: none; width: 1.1rem; height: 1.1rem; position: relative; color: var(--gold); }
.faq .marker::before, .faq .marker::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: transform .2s ease;
}
.faq .marker::after { transform: rotate(90deg); }
.faq [aria-expanded="true"] .marker::after { transform: rotate(0); }
.faq .answer { padding: 0 0 1.5rem; max-width: var(--measure); color: var(--ink-soft); }
.faq .answer[hidden] { display: none; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- prayer times ---------- */
.prayer {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--green-line);
}
@media (min-width: 720px) { .prayer { grid-template-columns: repeat(6, 1fr); } }
.prayer div { padding: 1.1rem 1.1rem 1.1rem 0; border-bottom: 1px solid var(--green-line); }
.prayer div:not(:nth-child(3n + 1)) { border-left: 1px solid var(--green-line); padding-left: 1.1rem; }
@media (min-width: 720px) {
  .prayer div:nth-child(3n + 1) { border-left: 1px solid var(--green-line); padding-left: 1.1rem; }
  .prayer div:first-child { border-left: 0; padding-left: 0; }
}
.prayer dt { font-size: var(--t--1); color: var(--green-faint); font-family: Archivo, sans-serif; }
.prayer dd {
  margin: .3rem 0 0; font-size: var(--t-1); font-weight: 600; color: var(--green-text);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.01em;
}
.prayer .is-next dd { color: var(--leaf); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.05fr; } }
.contact-list { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.contact-list > div { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.contact-list dt { font-size: var(--t--1); color: var(--ink-faint); font-family: Archivo, sans-serif; }
.contact-list dd { margin: .35rem 0 0; font-size: var(--t-1); font-weight: 500; }
.contact-list a { text-decoration-color: var(--gold-rule); text-underline-offset: 4px; }
.contact-note { font-size: var(--t--1); font-weight: 400; color: var(--ink-faint); font-family: Archivo, sans-serif; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--t--1); font-weight: 500; }
.field input, .field textarea {
  font: inherit; font-family: Archivo, sans-serif; color: var(--ink);
  padding: .75rem .85rem; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--paper); width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); outline-offset: 1px; }
.field textarea { min-height: 8rem; resize: vertical; }
.form__status { font-size: var(--t--1); margin: 0; }
.form__status[data-state="error"] { color: #9c2415; }
.form__status[data-state="ok"] { color: #145c2a; }
.map { border: 1px solid var(--rule); width: 100%; aspect-ratio: 16 / 9; border-radius: 2px; max-width: 900px; }

/* ---------- footer ---------- */
.footer {
  background: var(--green-deep); color: var(--green-faint);
  font-size: var(--t--1);
}
.footer > .shell { padding-block: clamp(2.5rem, 6vw, 4rem) 2rem; }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer h2 { font-size: var(--t--1); font-weight: 600; color: var(--paper); margin-bottom: .9rem; font-family: Archivo, sans-serif; letter-spacing: 0; }
.footer p { color: inherit; margin-bottom: .6rem; }
.footer ul { list-style: none; display: grid; gap: .55rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--leaf); }
.footer img { height: 96px; width: auto; margin-bottom: 1.2rem; }
.footer__base {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--green-line);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}
.footer__base p { margin: 0; }

/* ---------- page opening (interior pages) ---------- */
.pagehead > .shell { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 2.75rem); }
.pagehead h1 { font-size: var(--t-3); max-width: 20ch; text-wrap: balance; }
.pagehead p { margin: 1.1rem 0 0; color: var(--ink-soft); font-size: var(--t-1); max-width: 48ch; }
.pagehead > .shell { position: relative; }
.pagehead > .shell::after {
  content: ""; position: absolute; left: var(--rail); right: var(--rail); bottom: 0;
  border-bottom: 1px solid var(--rule);
}
.crumb { font-size: var(--t--1); color: var(--ink-faint); margin-bottom: 1.2rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--gold); }

/* ---------- prose ---------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-2); margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); }
.prose strong { font-weight: 600; color: var(--ink); }
/* The word the Institute is named after, set as a display line above the
   sentence that defines it. fit-content keeps the rtl block at the left of the
   column instead of floating off to the right margin. */
.prose .arabic {
  color: var(--gold-lift); font-size: var(--t-4); line-height: 1.4;
  width: fit-content; max-width: 100%; margin: 2.5rem 0 1rem;
}

/* Some pages read as one column the width of the shell, so their content band
   lines up with the page heading above it rather than sitting in a narrower
   well. */
.page--centred .band__head,
.page--centred .prose,
.page--centred .prose p { max-width: 100%; }
.page--centred .prose p { max-width: var(--measure); }

/* ---------- a plain list of links (404) ---------- */
.plainlist { list-style: none; display: grid; gap: .75rem; font-size: var(--t-1); }
.plainlist a { text-decoration-color: var(--gold-rule); text-underline-offset: 4px; }
.plainlist a:hover { color: var(--gold); }

/* ---------- selection ---------- */
::selection { background: var(--leaf); color: var(--gold-ink); }

/* Anchored headings clear the sticky masthead. */
:target { scroll-margin-top: 6rem; }