/* =========================================================================
   Design Warehouse — layout.css
   Page chrome (topbar, rail, progress, footer) and section-level grids.
   ========================================================================= */

/* ================================================================
   1. TOPBAR
   Compact, transparent, adapts its ink to whatever section is behind it.
   ================================================================ */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-topbar);

  /* The topbar sits outside every themed section, so it carries its own
     theme context. Without this, --fg/--bg/--hair-strong are undefined here
     and the outline button loses its label on hover. */
  --fg: var(--paper);
  --bg: var(--ink);
  --muted: var(--muted-dark);
  --hair: var(--hair-dark);
  --hair-strong: var(--hair-strong-dark);
  --accent-text: var(--clay-soft);

  --tb-hair: transparent;
  --tb-bg: transparent;

  color: var(--fg);
  transition: background var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) linear,
              color var(--dur-2) linear;
  border-bottom: 1px solid var(--tb-hair);
}

/* Fairly opaque, because a translucent bar lets dark content bleed through
   the blur and drag the muted label under 4.5:1. */
.topbar.is-stuck {
  --tb-bg: rgba(11, 11, 12, 0.84);
  --tb-hair: var(--hair-dark);
  background: var(--tb-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.topbar.is-on-light {
  --fg: var(--ink);
  --bg: var(--paper);
  --muted: var(--muted-light);
  --hair: var(--hair-light);
  --hair-strong: var(--hair-strong-light);
  --accent-text: var(--clay-ink);
}

.topbar.is-on-light.is-stuck {
  --tb-bg: rgba(243, 240, 234, 0.90);
  --tb-hair: var(--hair-light);
}

.topbar__inner {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-block: 6px;
  color: inherit;
}

.wordmark__svg {
  display: block;
  width: clamp(128px, 13vw, 168px);
  height: auto;
}

/* The stacked lockup, used as the centrepiece of the opening screen. */
.brandmark {
  display: flex;
  justify-content: center;
  padding-block: clamp(20px, 3.6vh, 52px);
}

.brandmark__svg {
  display: block;
  width: min(46vw, 38vh, 430px);
  height: auto;
  color: var(--paper);
}

@media (max-width: 760px) {
  .brandmark__svg { width: min(72vw, 32vh, 300px); }
}

/* The opening screen reads as one centred column rather than a spread. */
.hero--brand .hero__mid { text-align: center; }

.hero--brand h1 {
  max-width: 22ch;
  margin-inline: auto;
}

.hero--brand .hero__tail { align-items: end; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: clamp(20px, 3vh, 34px);
}

/* The serif line that sits above the brandmark on the opening screen. */
.hero__kicker {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.3vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: 0 auto clamp(6px, 1.2vh, 18px);
}

.hero__sub {
  max-width: 62ch;
  margin: clamp(14px, 2.2vh, 28px) auto 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.62;
}

/* The opening screen carries more than the other heroes — a kicker, the
   lockup, a paragraph and two buttons — so it gets its own vertical budget
   in order to still land inside a single viewport. */
.hero--brand {
  padding-top: calc(var(--topbar-h) + clamp(18px, 3.6vh, 52px));
  padding-bottom: clamp(18px, 3.2vh, 44px);
}

.hero--brand .hero__eyebrow { margin-bottom: clamp(12px, 2.6vh, 36px); }
.hero--brand .brandmark { padding-block: clamp(12px, 2.4vh, 36px); }
.hero--brand .brandmark__svg { width: min(42vw, 30vh, 380px); }
.hero--brand .hero__tail { margin-top: clamp(18px, 3.4vh, 52px); }

@media (max-width: 760px) {
  .hero--brand .brandmark__svg { width: min(68vw, 26vh, 280px); }
}

.topbar__tag {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.topbar__nav a {
  /* The bar is 68px tall, so the links can carry a full touch target without
     changing its height. At 18px they were below even the 24px floor. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  opacity: 0.72;
  transition: opacity var(--dur-1) linear;
}
.topbar__nav a:hover { opacity: 1; }

.topbar__cta { flex: 0 0 auto; }

@media (max-width: 1080px) {
  .topbar__nav { display: none; }
}
@media (max-width: 640px) {
  .topbar__tag { display: none; }
  .topbar__cta { margin-left: auto; }
}

/* ------------------------------------------------------------- locale ----
   Two links, not a control. They carry a query parameter rather than a cookie,
   so they work with scripting off, they can be pasted into an email, and the
   URL stays the whole state — the same rule the catalogue filters follow.
   `aria-current` marks the one being read.
   -------------------------------------------------------------------------- */
.lang {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
  margin-inline-start: var(--s-2);
}

.lang__link {
  /* 44px like every other topbar link: the bar is 68px, so the target can be
     full height without moving anything. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  opacity: 0.72;
  transition: opacity var(--dur-1) linear;
}

.lang__link:hover { opacity: 1; }

.lang__link[aria-current] {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* The endonym is written in its own script, and Arabic is connected: the meta
   tracking above would pull the joins of «العربية» apart on the English page. */
.lang__link:lang(ar) { letter-spacing: 0; }

/* ------------------------------------------------------- narrow topbar ----
   The switch is the fourth thing in a bar that was already full at 390px, and
   everything in it is `flex: 0 0 auto` — so without these the row oversubscribes
   and the Contact Us button is clipped by the shell's `overflow-x: hidden`
   rather than wrapping. Measured at 380px of content box: wordmark 128 + switch
   45 + button 153 + two 32px gaps + two 20px gutters = 430 against 380.

   Only the language you can switch *to* stays on a narrow screen; which one you
   are reading is what the page is written in, and `aria-current` still marks it
   for a screen reader.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .topbar__inner { gap: var(--s-3); }
  .lang { margin-inline-start: 0; }
  .lang__link[aria-current] { display: none; }
}

@media (max-width: 460px) {
  .wordmark__svg { width: 104px; }
  .topbar__cta.btn { padding-inline: 16px; }
}

/* Below 360px the topbar has no room for a fourth thing at all — 104 + 30 + 145
   plus gaps and gutters is already past the content box. The footer keeps the
   switch reachable, so nothing becomes unreachable, only less prominent. */
@media (max-width: 359px) {
  .topbar .lang { display: none; }
}

/* ================================================================
   2. SECTION RAIL — the chapter index, à la the reference site.
   Numbers and marks are permanent; the section name slides out on hover
   and is legible over anything because the whole rail is difference-
   blended. That keeps its footprint at 54px, so the content column only
   has to step across by a small amount.
   ================================================================ */
.rail {
  position: fixed;
  left: max(20px, calc((100vw - var(--shell-max)) / 2 + 8px));
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-rail);
  mix-blend-mode: difference;
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-4) var(--ease-out-quart),
              visibility var(--dur-4) linear;
}

.rail.is-visible { opacity: 1; visibility: visible; }

.rail__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  /* Not 0.5, and not 0.66 either. The rail is difference-blended, so an item's
     alpha is applied *after* the blend: transparency composites the numeral
     back towards the section behind it, and 0.5 measured 3.67:1 on paper —
     under AA for 10px text. No single alpha satisfies both themes, because the
     blend already spans the full range, so the numerals run at 0.9 and the
     current section is marked by its rule rather than by extra brightness. */
  opacity: 0.9;
  transition: opacity var(--dur-2) var(--ease-out-quart);
}

.rail__item:hover { opacity: 1; }

.rail__num {
  width: 16px;
  flex: 0 0 16px;
  font-variant-numeric: tabular-nums;
}

.rail__mark {
  height: 1px;
  width: 16px;
  flex: 0 0 auto;
  background: currentColor;
  transform-origin: left center;
  transition: width var(--dur-2) var(--ease-out-expo),
              height var(--dur-2) var(--ease-out-expo);
}

.rail__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width var(--dur-2) var(--ease-out-expo),
              opacity var(--dur-2) linear;
}

.rail__item.is-active { opacity: 1; }
.rail__item.is-active .rail__mark { width: 30px; height: 2px; }

.rail__item:hover .rail__label,
.rail__item:focus-visible .rail__label { max-width: 140px; opacity: 1; }

@media (max-width: 1280px) {
  .rail { display: none; }
}

@media (min-width: 1281px) {
  :root { --pad-left: 96px; }
}

/* ================================================================
   3. READING PROGRESS
   ================================================================ */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--z-progress);
  pointer-events: none;
}

.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* ================================================================
   4. CURTAIN — first-load reveal
   ================================================================ */
/* Hidden unless scripting is on — with JS disabled the curtain would
   otherwise park itself over the whole page for good. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  pointer-events: none;
  display: none;
  grid-template-rows: 1fr 1fr;
}

.js .curtain { display: grid; }

.curtain__panel {
  background: var(--ink);
  transform: translateY(0);
  /* A symmetric ease reads better on a full-height wipe than the front-loaded
     expo used for smaller reveals. */
  transition: transform var(--dur-4) var(--ease-soft);
  will-change: transform;
}

body.is-ready .curtain__panel:first-child { transform: translateY(-101%); }
body.is-ready .curtain__panel:last-child  { transform: translateY(101%); }

body.is-ready .curtain { visibility: hidden; transition: visibility 0s linear var(--dur-4); }

/* ================================================================
   5. HERO
   ================================================================ */
.hero {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(var(--topbar-h) + clamp(40px, 9vh, 120px));
  padding-bottom: clamp(32px, 6vh, 72px);
  overflow: hidden;
}

/* Pointer-following warm pool of light. Purely decorative. */
.hero__glow {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    46vmax 46vmax at var(--mx, 50%) var(--my, 40%),
    rgba(192, 96, 58, 0.20),
    rgba(176, 141, 87, 0.07) 42%,
    transparent 68%
  );
  transition: opacity var(--dur-5) var(--ease-out-quart);
}
.hero.is-live .hero__glow { opacity: 1; }

.hero__inner { position: relative; z-index: 2; }

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: clamp(28px, 6vh, 72px);
}

.hero__eyebrow .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clay);
  flex: 0 0 auto;
}

/* Below about 700px the two halves of the eyebrow stop fitting on one line.
   The dot is a separator between them, so on its own at the end of the first
   line it reads as a stray mark rather than punctuation — it goes. */
@media (max-width: 700px) {
  .hero__eyebrow .dot { display: none; }
}

.hero h1 { max-width: 22ch; }

.hero__tail {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6) var(--s-5);
  align-items: end;
  margin-top: clamp(48px, 10vh, 120px);
}

.hero__lead { grid-column: 1 / span 5; }
/* `flex-wrap` is load-bearing: the inline `justify-content: center` on this row
   pushes an over-wide set of facts off *both* edges, where `overflow-x: hidden`
   on the body silently clips them. Four facts are wider than the column below
   about 520px, so let them wrap instead. */
.hero__facts { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; gap: var(--s-8); }

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-cue__line {
  display: block;
  width: 46px;
  height: 1px;
  background: currentColor;
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--clay);
  animation: cue 2600ms var(--ease-in-out) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

/* A single hairline "horizon" that grounds the hero. */
.hero__horizon {
  position: absolute;
  left: var(--pad-left);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1600ms var(--ease-out-expo) 420ms;
}
body.is-ready .hero__horizon { transform: scaleX(1); }

@media (max-width: 900px) {
  .hero__lead { grid-column: 1 / -1; }
  .hero__facts { grid-column: 1 / -1; column-gap: var(--s-7); row-gap: var(--s-5); }
}

/* The four counters are gone, so the tail band carries one paragraph of
   brand introduction instead. The band is a 12-column grid and `.hero__facts`
   sits in columns 8–12 for the counter row, so the intro has to take the whole
   width back off it — otherwise a centred paragraph renders centred inside the
   right-hand five columns, which is where the numbers used to be. */
.hero__facts--intro {
  grid-column: 1 / -1;
  display: block;
  justify-content: normal;
  text-align: center;
}

.hero__intro {
  max-width: 62ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* ================================================================
   6. STATEMENT — scroll-lit long-form
   ================================================================ */
.statement__lede {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.9vw, 3.35rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  max-width: 34ch;
}

.statement__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-7) var(--s-5);
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--hair);
}

.statement__col { grid-column: span 4; }
.statement__col:first-child { grid-column: 1 / span 4; }
.statement__col:last-child  { grid-column: 9 / span 4; }

@media (max-width: 900px) {
  .statement__grid { grid-template-columns: 1fr; }
  .statement__col,
  .statement__col:first-child,
  .statement__col:last-child { grid-column: 1 / -1; }
}

/* ================================================================
   7. CAPABILITY INDEX
   ================================================================ */
.index-list { border-top: 1px solid var(--hair); }

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1.05fr) minmax(0, 1.35fr) 120px 84px;
  align-items: center;
  gap: var(--s-5);
  padding-block: clamp(20px, 3vh, 34px);
  border-bottom: 1px solid var(--hair);
  isolation: isolate;
}

/* Wipe fill that rises from the bottom on hover. */
.index-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  opacity: 0.045;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.index-row:hover::before,
.index-row:focus-within::before { transform: scaleY(1); }

/* A row that is a statement rather than an entry. Section 03 lists five
   stages of a transaction, not five things to browse, so the row keeps the
   furniture but drops every affordance: no wipe, no slide, no icon reveal
   — nothing that suggests it can be clicked. */
.index-row--inert { grid-template-columns: 56px minmax(0, 0.85fr) minmax(0, 1.9fr) 84px; }
.index-row--inert::before { content: none; }
.index-row--inert .index-row__name { transition: none; }
.index-row--inert:hover .index-row__name { transform: none; }
.index-row--inert .index-row__art {
  opacity: 0.34;
  transform: none;
  transition: none;
}
.index-row--inert:hover .index-row__art { opacity: 0.34; transform: none; }

@media (max-width: 1000px) {
  .index-row--inert { grid-template-columns: 40px minmax(0, 1fr) 72px; }
}

.index-row__num {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.index-row__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  transition: transform var(--dur-3) var(--ease-out-expo);
}
.index-row:hover .index-row__name { transform: translateX(10px); }

.index-row__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--muted);
}

.index-row__count {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.index-row__art {
  justify-self: end;
  width: 84px;
  height: 62px;
  color: var(--fg);
  opacity: 0.42;
  transform: translateX(-8px);
  transition: opacity var(--dur-3) var(--ease-out-quart),
              transform var(--dur-3) var(--ease-out-expo);
}
.index-row:hover .index-row__art { opacity: 1; transform: translateX(0); }
.index-row__art svg { width: 100%; height: 100%; }

/* The whole row is clickable via a stretched link. */
.index-row__link { position: absolute; inset: 0; z-index: 2; }
.index-row__link:focus-visible { outline-offset: -3px; }

@media (max-width: 1000px) {
  .index-row {
    grid-template-columns: 40px minmax(0, 1fr) 72px;
    grid-template-areas:
      "num name art"
      ".   desc art";
    row-gap: var(--s-2);
  }
  .index-row__num   { grid-area: num; align-self: start; padding-top: 6px; }
  .index-row__name  { grid-area: name; }
  .index-row__desc  { grid-area: desc; }
  .index-row__art   { grid-area: art; }
  .index-row__count { display: none; }
}

/* ================================================================
   8. WORK / SERIES GRID
   ================================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 5vh, 72px) var(--s-6);
}

.work-item { grid-column: span 6; }
.work-item:nth-child(odd)  { grid-column: 1 / span 6; }
.work-item:nth-child(even) { grid-column: 7 / span 6; margin-top: clamp(0px, 8vh, 110px); }

/* With scripting off the placeholder card would sit there saying "loading"
   forever. Hide it and let the <noscript> paragraph say something true. */
html:not(.js) .work-item--placeholder { display: none; }

/* Section 04 has no project material yet. What stands in for it is a plain
   statement, not a card dressed up as work. work.js removes it when it has
   real projects to render; the `:has` rule is the belt to that braces, so a
   rendered card always wins over the stand-in. */
html.js .work-grid:has(.work-card) .work-await { display: none; }

.work-await {
  grid-column: 1 / -1;
  max-width: 54ch;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--fg);
  border-left: 1px solid var(--hair-strong);
  padding-left: var(--s-5);
}

@media (max-width: 860px) {
  .work-item,
  .work-item:nth-child(odd),
  .work-item:nth-child(even) {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* ================================================================
   9. PROCESS — sticky label, advancing steps
   ================================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-8) var(--s-6);
  align-items: start;
}

.process-aside {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--topbar-h) + clamp(24px, 6vh, 72px));
}

.process-steps { grid-column: 6 / span 7; }

@media (max-width: 960px) {
  .process-aside { grid-column: 1 / -1; position: static; }
  .process-steps { grid-column: 1 / -1; }
}

/* ================================================================
   10. TRADE
   ================================================================ */
.trade-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-8) var(--s-6);
  align-items: start;
}

.trade-intro { grid-column: 1 / span 4; }
.trade-specs { grid-column: 6 / span 7; }

@media (max-width: 960px) {
  .trade-intro,
  .trade-specs { grid-column: 1 / -1; }
}

/* ================================================================
   11. CONTACT
   ================================================================ */
.contact { position: relative; overflow: hidden; }

.contact__glow {
  position: absolute;
  left: 50%;
  top: -30%;
  width: 120vw;
  height: 80vh;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(192, 96, 58, 0.16),
    transparent 72%
  );
}

.contact__head { position: relative; }

.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-8) var(--s-6);
  align-items: start;
  margin-top: var(--s-9);
}

.contact-form { grid-column: 1 / span 7; }
.contact-aside { grid-column: 9 / span 4; }

@media (max-width: 1000px) {
  .contact-form,
  .contact-aside { grid-column: 1 / -1; }
}

/* ================================================================
   12. FOOTER
   ================================================================ */
.footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--hair-dark);
  padding-block: clamp(56px, 9vh, 120px) var(--s-7);
}

.footer__top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-7) var(--s-5);
}

.footer__brand { grid-column: 1 / span 5; }
.footer__nav   { grid-column: 7 / span 3; }
.footer__legal { grid-column: 10 / span 3; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
}

.footer__list { display: flex; flex-direction: column; gap: 10px; }

.footer__list a {
  font-size: var(--fs-small);
  color: var(--muted-dark);
  transition: color var(--dur-1) linear;
  /* Vertical padding on an inline box does not move the line, but it does
     extend the hit area: 16px of text plus 8px gives the 24px minimum a
     target needs, and the footer keeps its rhythm. */
  padding-block: 4px;
  /* The width half of the same trick, and it is not decoration: the target rule
     is 44px tall *or* 44x24, and a short word cannot reach 44 on its own. "النهج"
     is 27px wide in Arabic where "Practice" is 60 in English — the same link,
     passing in one language and failing in the other. Horizontal padding with
     the same negative margin extends the box and leaves the text exactly where
     it was, so the list still aligns with everything above it. */
  padding-inline: 10px;
  margin-inline: -10px;
}
.footer__list a:hover { color: var(--paper); }

/* The footer's copy of the switch. The footer is already dark, so it inherits
   `color` and only needs its own spacing. */
.lang--footer { margin-inline-start: 0; gap: var(--s-4); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hair-dark);
}

@media (max-width: 900px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__nav   { grid-column: 1 / span 6; }
  .footer__legal { grid-column: 7 / span 6; }
}
@media (max-width: 560px) {
  .footer__nav,
  .footer__legal { grid-column: 1 / -1; }
}