/* ============================================================================
   SADER — SERVICE DETAIL  (sd-)
   "The Monograph — Plate & Ledger"
   A data-driven detail page (service.html?id=…) rendered from
   data/<lang>/service-detail.json by service-detail.js.

   Austere typographic hero -> a sticky grayscale image "plate" with a live
   folio counter beside a self-inscribing numbered capability ledger -> a light
   "deliverables" exhale -> a dark line-masked "intended for" manifesto ->
   a CTA band (second crop of the same photo) with a prev/next pager.

   Composes on tokens.css / base.css / components.css. Reuses .reveal,
   .reveal--up|left|scale|fade, [data-stagger], [data-parallax], .divider(.reveal),
   .divider--full|center, .eyebrow(--center), .btn, .btn--text, .media-overlay,
   the [data-theme="dark"] auto-flip and the [dir="rtl"] mirror. Logical
   properties throughout. All bespoke selectors are .sd-* namespaced.
   ============================================================================ */

.sd {
  position: relative;
  --sd-plate-max: 78vh;
  background-color: var(--bg);
}

/* ============================================================================
   TOPBAR — back-link over the dark hero
   ============================================================================ */
.sd-topbar {
  position: absolute;
  inset-block-start: var(--header-h);
  inset-inline: 0;
  z-index: var(--z-raised);
}
.sd-topbar__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-dark-soft);
  padding-block: var(--space-4);
}
.sd-topbar__back:hover { color: var(--text-on-dark); }
/* Short inline rule that grows to 24px (override the 80px default) */
.sd-rule--inline { block-size: 1px; margin-block: 0; background-color: currentColor; }
.sd-rule--inline.reveal.is-in { inline-size: 24px; }

/* ============================================================================
   1 · HERO — austere, typographic (NO photo). The image is "earned" later.
   ============================================================================ */
.sd-hero {
  position: relative;
  min-block-size: 100svh;
  min-block-size: 100dvh;
  display: grid;
  /* Empty top track collapses to 0 so the inner (row 2) top-anchors at the
     shared offset, while the scroll cue (row 3) stays pinned to the bottom. */
  grid-template-rows: auto auto 1fr;
  align-content: start;
  overflow: hidden;
  padding-block: calc(var(--header-h) + var(--space-9)) var(--space-9);
  /* data-theme="dark" only swaps tokens; paint the dark ground explicitly */
  background-color: var(--bg);
}
.sd-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  grid-row: 2;
  inline-size: 100%;
  max-inline-size: var(--container);
}
.sd-hero__eyebrow { color: var(--text-faint); }
.sd-hero__rule { margin-block: var(--space-5) var(--space-5); }

.sd-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  /* capped by viewport-height so the colophon meta always stays in view */
  font-size: clamp(2.75rem, min(1.6rem + 6vw, 12svh), 8rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  max-inline-size: 18ch;
  margin-block: var(--space-2) var(--space-5);
}
.sd-hero__title em { font-style: italic; }

.sd-hero__lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-inline-size: 42ch;
  text-align: justify;
  text-justify: inter-word;
}

/* Engraved outline ordinal watermark */
.sd-hero__ord {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -0.06em;
  transform: translateY(-50%) translate3d(0, var(--parallax-y, 0), 0);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(10rem, 26vw, 22.5rem);
  line-height: 0.8;
  z-index: var(--z-base);
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .sd-hero__ord { color: rgba(255, 255, 255, 0.05); }
}

/* Colophon / title-page imprint */
.sd-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sd-hero__meta-item + .sd-hero__meta-item {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--line);
}

.sd-hero__scroll {
  grid-row: 3;
  align-self: end;
  justify-self: center;
  z-index: var(--z-raised);
}
.sd-hero__scroll-line {
  display: block;
  inline-size: 1px;
  block-size: 48px;
  background-color: var(--line-strong);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .sd-hero__scroll-line { animation: sd-cue 2.4s var(--ease-in-out) infinite; }
}
@keyframes sd-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================================================
   2 · THE SPREAD — sticky plate + foreword + capabilities ledger (SIGNATURE)
   ============================================================================ */
.sd-spread {
  padding-block: var(--section-pad);
  background-color: var(--bg);
}
.sd-spread__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(var(--space-8), 6vw, var(--space-11));
  row-gap: var(--space-9);
}
@media (min-width: 1024px) {
  .sd-spread__grid {
    grid-template-columns: minmax(320px, 44%) 1fr;
    align-items: start;
  }
}

/* — Plate (sticky, capped, content-budgeted to image + caption + folio) — */
.sd-plate__sticky { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .sd-plate__sticky {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-6));
    block-size: calc(100dvh - var(--header-h) - var(--space-8));
    max-block-size: var(--sd-plate-max);
    justify-content: space-between;
  }
}
.sd-plate__figure { margin: 0; }
.sd-plate__frame {
  display: block;
  position: relative;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  max-block-size: var(--sd-plate-max);
}
/* The caption sits BELOW the frame, so no legibility wash is needed over the
   image — keep only a whisper of vignette at the foot for depth. */
.sd-plate__frame.media-overlay::after { opacity: 0.22; }
.sd-plate__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  /* Strict monochrome, plus a touch of depth so bright source photos read as a
     richer, collectible plate rather than a washed-out scan. */
  filter: contrast(1.08) brightness(0.92);
  transform: scale(1.04) translate3d(0, var(--parallax-y, 0), 0);
}
.sd-plate__cap {
  margin-block-start: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .sd-plate__cap { letter-spacing: var(--tracking-normal); }

/* — Live folio counter (the page's one piece of net-new JS) — */
.sd-plate__folio {
  margin-block-start: var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-variant-numeric: lining-nums tabular-nums;
}
.sd-plate__folio-num {
  font-size: var(--fs-h2);
  color: var(--text);
  transition: opacity var(--dur-fast) var(--ease);
}
.sd-plate__folio-sep,
.sd-plate__folio-total { font-size: var(--fs-h4); color: var(--text-faint); }
.sd-plate__folio.is-ticking .sd-plate__folio-num { opacity: 0.5; }

/* — Foreword + drop-cap — */
.sd-read__block + .sd-read__block { margin-block-start: var(--space-10); }
.sd-scene { color: var(--text-faint); }
.sd-foreword__rule,
.sd-ledger__head-rule { margin-block: var(--space-4) var(--space-6); }
.sd-foreword__lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text);
  max-inline-size: 60ch;
  text-align: justify;
  text-justify: inter-word;
}
/* Drop-cap — English / LTR only (Arabic connected script must not split) */
[dir="ltr"] .sd-foreword__lead:lang(en)::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-3);
  line-height: 0.78;
  float: inline-start;
  margin-inline-end: var(--space-3);
  margin-block-start: 0.06em;
}

/* — Capabilities ledger (the centrepiece grammar) — */
.sd-ledger__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
}
.sd-ledger__row {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: start;
  column-gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--line);
}
.sd-ledger__num {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  color: var(--text-faint);
  font-variant-numeric: lining-nums tabular-nums;
  unicode-bidi: isolate;
  padding-block-start: 0.35em;
  transition: color var(--dur-fast) var(--ease);
}
.sd-ledger__body { min-inline-size: 0; }
.sd-ledger__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
}
.sd-ledger__rule {
  display: block;
  block-size: 1px;
  margin-block: var(--space-4) 0;
  background-color: var(--line-brass);
}
@media (hover: hover) and (pointer: fine) {
  .sd-ledger__row:hover .sd-ledger__num { color: var(--text); }
  .sd-ledger__row:hover .sd-ledger__text {
    padding-inline-start: var(--space-3);
    transition: padding-inline-start var(--dur-fast) var(--ease);
  }
}

/* ============================================================================
   3 · KEY OUTPUTS — ledger grammar, smaller register, LIGHT exhale
   ============================================================================ */
.sd-outputs {
  padding-block: var(--section-pad);
  background-color: var(--bg-alt);
}
.sd-outputs__rule { margin-block: var(--space-4) var(--space-6); }
.sd-outputs__head {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin-block: 0 var(--space-8);
}
.sd-outputs__list { margin: 0; }
.sd-outputs__row {
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--line);
}
.sd-outputs__row:first-child { border-block-start: 0; }
.sd-outputs__term {
  margin: 0;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: baseline;
  column-gap: var(--space-4);
}
.sd-outputs__ord {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-small);
  color: var(--text-faint);
  font-variant-numeric: lining-nums tabular-nums;
  unicode-bidi: isolate;
}
.sd-outputs__name {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text);
}
.sd-outputs__def { margin: 0; }
.sd-outputs__def .divider--full { margin-block: var(--space-5) 0; }

/* ============================================================================
   4 · WHO THIS IS FOR — dark, centred manifesto, line-mask reveal
   ============================================================================ */
.sd-who {
  position: relative;
  min-block-size: 88svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-pad);
  overflow: hidden;
  background-color: var(--bg);   /* dark ground (data-theme swaps the token) */
}
.sd-who__inner { position: relative; z-index: var(--z-raised); }
.sd-who__rule { margin-block: var(--space-4) var(--space-7); }
.sd-who__ord {
  position: absolute;
  inset-block-end: -0.14em;
  inset-inline-end: -0.06em;
  transform: translate3d(0, var(--parallax-y, 0), 0);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(12rem, 30vw, 28rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
  pointer-events: none;
  user-select: none;
  z-index: var(--z-base);
}
@supports not ((-webkit-text-stroke: 1px black) or (text-stroke: 1px black)) {
  .sd-who__ord { color: rgba(255, 255, 255, 0.04); }
}
.sd-who__statement {
  position: relative;
  z-index: var(--z-raised);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-3);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  max-inline-size: 22ch;
  margin-inline: auto;
}
.sd-who__statement em { font-style: italic; }
/* line-mask: each visual line wrapped by JS into .sd-who__line > span */
.sd-who__line { display: block; overflow: hidden; padding-block-end: 0.08em; }
.sd-who__line > span {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
.sd-who__statement.is-in .sd-who__line > span { transform: none; }

/* ============================================================================
   5 · CTA + PAGER — dark continuation, second crop of the same image
   ============================================================================ */
.sd-cta {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--space-10);
  padding-block: var(--section-pad);
  overflow: hidden;
  background-color: var(--bg);
}
.sd-cta__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 72% 50%;
  filter: contrast(1.02);
  opacity: 0.1;
  z-index: var(--z-base);
  pointer-events: none;
}
.sd-cta__inner {
  position: relative;
  z-index: var(--z-raised);
  text-align: center;
}
.sd-cta__rule { margin-block: var(--space-4) var(--space-7); }
.sd-cta__head {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin-block: 0 var(--space-8);
}
.sd-cta__head em { font-style: italic; }
.sd-cta__actions { display: flex; justify-content: center; }

/* Pager — reuses ledger row grammar */
.sd-pager {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .sd-pager { grid-template-columns: 1fr 1fr; } }
.sd-pager__row {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}
.sd-pager__dir {
  grid-column: 1 / -1;
  margin-block-end: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sd-pager__ord {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  color: var(--text-faint);
  unicode-bidi: isolate;
  transition: color var(--dur-fast) var(--ease);
}
.sd-pager__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.sd-pager__row--next { text-align: end; }
.sd-pager__row--next .sd-pager__ord { order: 2; }
@media (hover: hover) and (pointer: fine) {
  .sd-pager__row:hover .sd-pager__ord { color: var(--text); }
  .sd-pager__row:hover .sd-pager__title {
    padding-inline-start: var(--space-3);
    transition: padding-inline-start var(--dur-fast) var(--ease);
  }
  .sd-pager__row--next:hover .sd-pager__title { padding-inline-start: 0; padding-inline-end: var(--space-3); }
}
.sd-cta__back {
  position: relative;
  z-index: var(--z-raised);
  text-align: center;
}

/* ============================================================================
   NOT-FOUND STATE — invalid ?id=; keep only the hero message + back-link
   ============================================================================ */
.sd--error .sd-spread,
.sd--error .sd-outputs,
.sd--error .sd-who,
.sd--error .sd-cta,
.sd--error .sd-hero__scroll,
.sd--error .sd-hero__eyebrow,
.sd--error .sd-hero__rule,
.sd--error .sd-hero__meta,
.sd--error .sd-hero__ord { display: none; }

/* ============================================================================
   RTL — emphasis carried by family/weight (Amiri has no true italic)
   ============================================================================ */
[dir="rtl"] .sd-hero__title em,
[dir="rtl"] .sd-cta__head em,
[dir="rtl"] .sd-who__statement em { font-style: normal; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1023px) {
  /* plate sits full-width above the narrative; folio still updates */
  .sd-plate__frame { max-block-size: 64vh; }
}
@media (max-width: 600px) {
  .sd-hero__title { font-size: clamp(2.25rem, 1.4rem + 5vw, 3.5rem); }
  .sd-ledger__row,
  .sd-outputs__term { grid-template-columns: 2.5rem 1fr; column-gap: var(--space-3); }
  .sd-cta { gap: var(--space-8); }
}

/* ============================================================================
   REDUCED MOTION — sticky→static, line-mask→static, cue + pulse off
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .sd-plate__sticky { position: static !important; block-size: auto; max-block-size: none; }
  .sd-who__line > span { transform: none; transition: none; }
  .sd-hero__scroll-line { animation: none; }
  .sd-plate__folio.is-ticking .sd-plate__folio-num { opacity: 1; }
}