/* ==========================================================================
   Mourad Mekki Teacher Toolkit — "The Teacher's Atelier"
   One stylesheet for every page: index, case studies, scan, OwlMark.
   Order: tokens → base → layout → type → components → sections → pages
          → motion → print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand surfaces */
  --navy-950: #091321;          /* dark navy */
  --navy-900: #0F1D33;          /* deep navy */
  --navy-800: #162844;          /* raised surface on navy */
  --navy-700: #233a5e;          /* hairlines on navy */
  --pearl:    #FAF6EF;
  --pearl-2:  #F3EDE2;          /* alternate section */
  --pearl-3:  #E9E1D3;          /* mats, quiet fills */
  --paper:    #FFFDF9;          /* cards on pearl */

  /* Ink */
  --ink:        #15243A;        /* body text on light (14.5:1) */
  --ink-soft:   #4A586E;        /* secondary text (6.7:1) */
  --ink-muted:  #5E6A7D;        /* tertiary text (5.1:1) */
  --on-navy:      #FAF6EF;
  --on-navy-soft: #B8C2D3;      /* 9.4:1 on navy */
  --on-navy-mute: #9AA6BA;      /* 6.9:1 on navy */

  /* Gold — an accent. On pearl, text uses --gold-ink. */
  --gold:      #C9A961;
  --gold-hi:   #D9BF85;
  --gold-ink:  #7A5E21;         /* 5.6:1 on pearl */

  /* Lines */
  --line:        rgba(21, 36, 58, .13);
  --line-strong: rgba(21, 36, 58, .26);
  --line-navy:   rgba(250, 246, 239, .14);

  /* Chapter accents — sampled from the 2026–2027 portfolio edition.
     --cN is the decorative accent; --cN-ink is the text-safe variant on pearl. */
  --c1: #2E5C61; --c1-ink: #2A5559;   /* I    Curriculum & planning      */
  --c2: #B8421F; --c2-ink: #8E3E24;   /* II   Assessment & diagnostics   */
  --c3: #997431; --c3-ink: #765A22;   /* III  Reading & writing          */
  --c4: #6A3D5D; --c4-ink: #63385A;   /* IV   The grammar track          */
  --c5: #3F6A4A; --c5-ink: #3B6145;   /* V    Learning games             */
  --c6: #2B4A79; --c6-ink: #2B4A79;   /* VI   Exam preparation           */
  --c7: #8E4E45; --c7-ink: #82463D;   /* VII  Built with colleagues      */
  --c8: #42647B; --c8-ink: #3B5A6F;   /* VIII Teacher creation tools     */

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --arabic: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", serif;

  --fs-display: clamp(2.75rem, 1.15rem + 5.6vw, 6.4rem);
  --fs-h1:      clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  --fs-h2:      clamp(2.05rem, 1.3rem + 2.7vw, 3.75rem);
  --fs-h3:      clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem);
  --fs-h4:      clamp(1.25rem, 1.08rem + .6vw, 1.55rem);
  --fs-lead:    clamp(1.125rem, 1.03rem + .35vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9375rem;
  --fs-xs:      .8125rem;
  --fs-label:   .72rem;

  /* Space (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-y: clamp(72px, 7vw + 32px, 152px);

  /* Layout */
  --max: 1320px;
  --gutter: clamp(16px, 4.6vw, 64px);
  --measure: 66ch;

  /* Shape */
  --r-xs: 4px; --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(9, 19, 33, .06), 0 2px 8px rgba(9, 19, 33, .05);
  --shadow-2: 0 2px 6px rgba(9, 19, 33, .07), 0 18px 40px -18px rgba(9, 19, 33, .34);
  --shadow-3: 0 6px 14px rgba(9, 19, 33, .12), 0 40px 80px -30px rgba(9, 19, 33, .55);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 200ms;
  --t-reveal: 560ms;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: rgba(201, 169, 97, .35); }

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-navy :focus-visible, .site-nav :focus-visible, .site-foot :focus-visible { outline-color: var(--gold-hi); }

.skip {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: var(--gold); color: var(--navy-950);
  padding: 10px 16px; border-radius: var(--r-s); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s3); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[lang="ar"], .ar { font-family: var(--arabic); font-weight: 500; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 5vw + 24px, 104px); }
.surface-pearl  { background: var(--pearl); }
.surface-pearl2 { background: var(--pearl-2); }
.surface-paper  { background: var(--paper); }
.on-navy { background: var(--navy-900); color: var(--on-navy); }
.on-navy--deep { background: var(--navy-950); }
.anchor-alias { position: relative; top: -88px; display: block; height: 0; }
.split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 96px); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display, .h1, .h2, .h3, .h4 {
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  color: inherit;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .98; letter-spacing: -.025em; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; }
.h2 { font-size: var(--fs-h2); line-height: 1.05; }
.h3 { font-size: var(--fs-h3); line-height: 1.1; font-weight: 340; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; font-weight: 400; letter-spacing: -.005em; }
.display em, .h1 em, .h2 em, .h3 em, .h4 em, .title-em em {
  font-style: italic; font-weight: 300; color: var(--accent-ink, var(--gold-ink));
}
.on-navy .display em, .on-navy .h1 em, .on-navy .h2 em, .on-navy .h3 em, .on-navy .h4 em { color: var(--gold); }

.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; text-wrap: pretty; }
.on-navy .lead { color: var(--on-navy-soft); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose p { text-wrap: pretty; }
.muted { color: var(--ink-soft); }
.on-navy .muted { color: var(--on-navy-soft); }

.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: .75em;
}
.on-navy .eyebrow { color: var(--gold); }
.eyebrow--rule::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

.label {
  font-family: var(--mono); font-weight: 500; font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.on-navy .label { color: var(--on-navy-mute); }
.numeral { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--accent-ink, var(--gold-ink)); }
.on-navy .numeral { color: var(--gold); }

/* Chapter accent hooks: set data-cat on any element. */
[data-cat="curriculum"]  { --accent: var(--c1); --accent-ink: var(--c1-ink); }
[data-cat="assessment"]  { --accent: var(--c2); --accent-ink: var(--c2-ink); }
[data-cat="reading-writing"] { --accent: var(--c3); --accent-ink: var(--c3-ink); }
[data-cat="grammar"]     { --accent: var(--c4); --accent-ink: var(--c4-ink); }
[data-cat="games"]       { --accent: var(--c5); --accent-ink: var(--c5-ink); }
[data-cat="exam"]        { --accent: var(--c6); --accent-ink: var(--c6-ink); }
[data-cat="colleagues"]  { --accent: var(--c7); --accent-ink: var(--c7-ink); }
[data-cat="creation"]    { --accent: var(--c8); --accent-ink: var(--c8-ink); }

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* 5.1 Buttons & links */
.btn {
  --btn-bg: var(--navy-900); --btn-fg: var(--pearl); --btn-bd: var(--navy-900);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  text-decoration: none; text-align: center; max-width: 100%;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--navy-800); --btn-bd: var(--navy-800); }
.btn:active { transform: translateY(1px); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--navy-950); --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: var(--gold-hi); --btn-bd: var(--gold-hi); }
.btn--line { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); }
.btn--line:hover { --btn-bg: rgba(21, 36, 58, .05); --btn-bd: var(--ink); }
.on-navy .btn--line, .btn--line-navy { --btn-bg: transparent; --btn-fg: var(--on-navy); --btn-bd: rgba(250, 246, 239, .34); }
.on-navy .btn--line:hover, .btn--line-navy:hover { --btn-bg: rgba(250, 246, 239, .08); --btn-bd: var(--on-navy); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.btn .arr { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn:hover .arr--ext { transform: translate(2px, -2px); }

.link {
  font-weight: 600; text-decoration: none; color: var(--accent-ink, var(--ink));
  display: inline-flex; align-items: center; gap: .4em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--t-fast) var(--ease);
  padding-block: 4px;
}
.link:hover { background-size: 100% 1px; }
.on-navy .link { color: var(--gold-hi); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* 5.2 Site navigation */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy-950); color: var(--on-navy);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.site-nav.is-scrolled { background: rgba(9, 19, 33, .94); border-bottom-color: var(--line-navy); }
@supports (backdrop-filter: blur(8px)) {
  .site-nav.is-scrolled { background: rgba(9, 19, 33, .86); backdrop-filter: saturate(1.2) blur(10px); }
}
.site-nav__inner { display: flex; align-items: center; gap: var(--s5); min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--on-navy); margin-right: auto; }
.brand__mark { width: auto; height: 38px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--serif); font-size: 1.22rem; font-weight: 400; letter-spacing: -.005em; }
.brand__sub { font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: 3px; }
.site-nav__links ul { display: flex; gap: clamp(10px, 1.6vw, 26px); list-style: none; padding: 0; margin: 0; }
.site-nav__links a {
  color: var(--on-navy-soft); text-decoration: none; font-size: .9rem; font-weight: 500;
  padding: 10px 2px; position: relative; transition: color var(--t-fast) var(--ease);
}
.site-nav__links a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--on-navy); }
.site-nav__links a:hover::after, .site-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__toggle {
  display: none; align-items: center; gap: 10px;
  background: transparent; border: 1px solid rgba(250, 246, 239, .3); color: var(--on-navy);
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 600; font-size: .9rem;
}
.site-nav__toggle-bars { width: 16px; height: 10px; position: relative; }
.site-nav__toggle-bars::before, .site-nav__toggle-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease);
}
.site-nav__toggle-bars::before { top: 1px; }
.site-nav__toggle-bars::after { top: 7.5px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::before { top: 4.5px; transform: rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bars::after { top: 4.5px; transform: rotate(-45deg); }
.nav-panel {
  border-top: 1px solid var(--line-navy);
  padding: var(--s4) var(--gutter) var(--s6);
  background: var(--navy-950);
}
.nav-panel ul { list-style: none; padding: 0; margin: 0; display: grid; }
.nav-panel a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line-navy);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--on-navy); text-decoration: none;
}
.nav-panel a span { color: var(--gold); font-family: var(--sans); font-size: 1rem; }
.nav-panel .btn { margin-top: var(--s5); width: 100%; }

@media (max-width: 980px) {
  .site-nav__links, .site-nav__cta { display: none; }
  .site-nav__toggle { display: inline-flex; }
}
@media (min-width: 981px) { .nav-panel { display: none !important; } }

/* 5.3 Screenshot plate — one framing system for every product image.
   Interface images are contained (never cropped); the mat colour is sampled
   from each screenshot's own edge so letterboxing reads as intentional. */
.shot { position: relative; margin: 0; }
.shot__plate {
  position: relative;
  background: var(--paper);
  border-radius: var(--r-m);
  padding: clamp(5px, .6vw, 9px);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(21, 36, 58, .08);
}
.on-navy .shot__plate { background: #1b2d4b; border-color: rgba(250, 246, 239, .1); box-shadow: var(--shadow-3); }
.shot__view {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ar, 16 / 10);
  border-radius: calc(var(--r-m) - 5px);
  background: var(--mat, var(--pearl-3));
}
.shot__view img { width: 100%; height: 100%; object-fit: contain; }
.shot__cap {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.45;
}
.shot__cap b { font-weight: 600; color: var(--ink-soft); }
.on-navy .shot__cap { color: var(--on-navy-mute); }
.on-navy .shot__cap b { color: var(--on-navy-soft); }
.shot__cap .label { overflow-wrap: anywhere; }
button.shot__zoom {
  all: unset; display: block; cursor: zoom-in; border-radius: var(--r-m);
}
button.shot__zoom:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
.shot--illustrative .shot__view::after {
  content: "Illustrative"; position: absolute; right: 10px; top: 10px;
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(9, 19, 33, .78); color: var(--pearl); padding: 6px 8px; border-radius: 4px;
}

/* A4 cover plate (print series) */
.a4 { aspect-ratio: 210 / 297; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-3); background: var(--navy-900); }
.a4 img { width: 100%; height: 100%; object-fit: cover; }

/* 5.4 Tags, chapter marks, status */
.chapter-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; color: var(--accent-ink, var(--ink-soft));
}
.chapter-mark__dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent, var(--ink)); color: #fff;
  font: italic 300 11px/1 var(--serif);
}
.on-navy .chapter-mark { color: var(--on-navy-soft); }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft);
}
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3F8A5C; box-shadow: 0 0 0 3px rgba(63, 138, 92, .16); }
.status--dev::before { background: #B98A2B; box-shadow: 0 0 0 3px rgba(185, 138, 43, .18); }
.status--request::before { background: var(--c6); box-shadow: 0 0 0 3px rgba(43, 74, 121, .16); }
.status--private::before { background: var(--ink-muted); box-shadow: 0 0 0 3px rgba(94, 106, 125, .16); }
.on-navy .status { color: var(--on-navy-soft); }
.kind-tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.on-navy .kind-tag { border-color: var(--line-navy); color: var(--on-navy-soft); }

/* 5.5 Numbered feature list */
.numlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.numlist li {
  display: grid; grid-template-columns: 2.2em 1fr; gap: 10px; align-items: baseline;
  padding: 12px 0; border-top: 1px solid var(--line);
  font-size: var(--fs-small); line-height: 1.5;
}
.numlist li:last-child { border-bottom: 1px solid var(--line); }
.numlist .numeral { font-size: .95rem; }
.on-navy .numlist li { border-color: var(--line-navy); color: var(--on-navy-soft); }
.numlist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
.numlist--2 li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
.on-navy .numlist--2 li:nth-last-child(2):nth-child(odd) { border-bottom-color: var(--line-navy); }
@media (max-width: 640px) { .numlist--2 { grid-template-columns: minmax(0, 1fr); } .numlist--2 li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }

/* 5.6 Section head */
.section-head { display: grid; gap: var(--s4); margin-bottom: clamp(36px, 4vw, 64px); max-width: 880px; }
.section-head--split {
  max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; column-gap: var(--s8);
}
.section-head--split > :last-child { padding-bottom: 6px; }
@media (max-width: 860px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } }

/* 5.7 Arcs (signature motif) */
.arcs { position: absolute; pointer-events: none; color: var(--gold); }
.arcs circle, .arcs path { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; }

/* 5.8 Dialog (lightbox) */
.lightbox {
  border: 0; padding: 0; margin: auto; background: transparent; color: var(--on-navy);
  width: min(96vw, 1500px); max-height: 94vh; overflow: visible;
}
.lightbox::backdrop { background: rgba(9, 19, 33, .9); }
.lightbox__inner { display: grid; gap: 12px; }
.lightbox__img { max-height: calc(94vh - 90px); width: 100%; object-fit: contain; border-radius: var(--r-s); background: var(--navy-900); }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--fs-small); color: var(--on-navy-soft); }
.lightbox__close {
  background: var(--pearl); color: var(--navy-950); border: 0; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); font-weight: 600; flex: none;
}

/* --------------------------------------------------------------------------
   6. Home — hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--navy-950); color: var(--on-navy); }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 30%, rgba(201, 169, 97, .10), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, rgba(43, 74, 121, .35), transparent 70%);
}
.hero .arcs { right: -22vw; top: -16vw; width: 66vw; max-width: 1040px; opacity: .5; }
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(32px, 4vw, 72px); align-items: center;
  padding-block: clamp(48px, 6vw, 96px) clamp(64px, 7vw, 112px);
}
.hero__copy { display: grid; gap: clamp(20px, 2vw, 28px); align-content: center; }
.hero .display .line { display: block; }
.hero .display em { color: var(--gold); }
.hero__lead { font-size: var(--fs-lead); color: var(--on-navy-soft); line-height: 1.55; max-width: 34em; }
.hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 0; margin-top: 8px;
  border-top: 1px solid var(--line-navy); padding-top: 22px;
}
.hero__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding-right: clamp(14px, 2vw, 32px); margin-right: clamp(14px, 2vw, 32px); border-right: 1px solid var(--line-navy); }
.hero__facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero__facts dd { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.35rem); line-height: 1; color: var(--pearl); }
.hero__facts dt { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-mute); font-weight: 600; line-height: 1.35; max-width: 11ch; }

.hero__stage { position: relative; aspect-ratio: 1 / .98; min-height: 0; }
.hero__portrait {
  position: absolute; right: 0; top: 0; width: 52%;
  margin: 0;
}
.hero__portrait-frame {
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px 18px 18px;
  background: var(--navy-800);
  box-shadow: 0 0 0 1px rgba(201, 169, 97, .55), 0 0 0 10px rgba(9, 19, 33, .9), 0 0 0 11px rgba(201, 169, 97, .25), var(--shadow-3);
}
.hero__portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero__portrait figcaption {
  display: flex; justify-content: flex-end; align-items: baseline; gap: 14px;
  margin-top: 16px; padding-inline: 4px;
}
.hero__portrait figcaption b { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.05rem; color: var(--pearl); }
.hero__portrait figcaption [lang="ar"] { color: var(--gold); font-size: 1.05rem; }
.hero__shot { position: absolute; margin: 0; }
.hero__shot--a { left: 0; bottom: 0; width: 63%; z-index: 2; }
.hero__shot--b { left: 3%; top: 4%; width: 42%; z-index: 1; }
.hero__shot .shot__cap { margin-top: 10px; }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { width: min(100%, 720px); justify-self: center; }
}
@media (max-width: 640px) {
  .hero__grid { padding-top: 36px; gap: 40px; }
  .hero__stage { aspect-ratio: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__portrait { position: relative; width: 62%; justify-self: end; margin-right: 2%; }
  .hero__shot--a { position: relative; width: 100%; margin-top: -26%; }
  .hero__shot--b { display: none; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .hero__facts > div { padding-right: 12px; margin-right: 12px; }
  .hero__facts > div:nth-child(2) { border-right: 0; margin-right: 0; padding-right: 0; }
  .hero__facts dt { max-width: none; }
  .eyebrow { letter-spacing: .14em; }
}

/* --------------------------------------------------------------------------
   7. Home — toolkit trio (asymmetric)
   -------------------------------------------------------------------------- */
.toolkit__grid {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 36px); align-items: stretch;
}
.feature {
  position: relative; display: grid; align-content: start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: clamp(18px, 2vw, 28px);
  box-shadow: var(--shadow-1);
}
.feature__media { margin-bottom: clamp(18px, 2vw, 28px); }
.feature__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.feature__title { margin-bottom: 10px; }
.feature__tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--accent-ink); margin-bottom: 14px; }
.feature__tag [lang="ar"] { font-style: normal; font-size: 1.05rem; margin-left: .5em; }
.feature__body { color: var(--ink-soft); max-width: 58ch; margin-bottom: 18px; }
.feature .numlist { margin-bottom: 22px; }
.feature--xl { padding: clamp(16px, 1.6vw, 22px); }
.feature--xl .feature__text { padding: clamp(6px, 1vw, 12px) clamp(6px, 1.2vw, 16px) clamp(4px, .8vw, 8px); }
.toolkit__side { display: grid; gap: clamp(20px, 2.4vw, 36px); grid-template-rows: auto auto; }
.feature--panel .feature__media { margin-bottom: 18px; }

/* Writing ladder (Kātib) */
.ladder { list-style: none; padding: 0; margin: 4px 0 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; counter-reset: rung; }
.ladder li {
  position: relative; padding: 12px 10px 10px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: .78rem; line-height: 1.35; color: var(--ink-soft);
}
.ladder li b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; }
.ladder li:nth-child(1) { margin-top: 30px; }
.ladder li:nth-child(2) { margin-top: 20px; }
.ladder li:nth-child(3) { margin-top: 10px; }
.ladder--wide { gap: 10px; margin: 0; }
.ladder--wide li { padding: 18px 16px 16px; font-size: .9rem; }
.ladder--wide li b { font-size: 1.25rem; }
.ladder--wide li:nth-child(1) { margin-top: 54px; }
.ladder--wide li:nth-child(2) { margin-top: 36px; }
.ladder--wide li:nth-child(3) { margin-top: 18px; }
.ladder li q { display: block; margin-top: 8px; font-family: var(--serif); font-style: italic; color: var(--ink); }
.ladder__ar { display: block; margin-top: 4px; color: var(--accent-ink); font-size: 1.05rem; text-align: start; }

.toolkit__relation {
  margin-top: clamp(28px, 3vw, 44px);
  display: grid; grid-template-columns: auto 1fr; gap: 18px 28px; align-items: start;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.toolkit__relation p { color: var(--ink-soft); max-width: 72ch; font-size: var(--fs-small); }
.flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--serif); font-size: 1.1rem; }
.flow span { white-space: nowrap; }
.flow i { font-style: normal; color: var(--gold-ink); }

@media (max-width: 1080px) {
  .toolkit__grid { grid-template-columns: minmax(0, 1fr); }
  .toolkit__side { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
}
@media (max-width: 720px) {
  .toolkit__side { grid-template-columns: minmax(0, 1fr); }
  .ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder li:nth-child(n) { margin-top: 0; }
  .toolkit__relation { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Home — Teacher Companion (full-width contrast)
   -------------------------------------------------------------------------- */
.companion { overflow: hidden; }
.companion .arcs { left: -22vw; bottom: -30vw; width: 70vw; max-width: 1000px; opacity: .35; }
.companion__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.34fr);
  gap: clamp(32px, 4.5vw, 80px); align-items: center;
}
.companion__alias { font-family: var(--serif); font-style: italic; font-weight: 300; color: var(--on-navy-soft); font-size: 1.15rem; margin-top: -4px; }
.companion__copy { display: grid; gap: 22px; }
.workflows { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-navy); }
.workflows > div { padding: 16px 14px 0 0; }
.workflows > div + div { padding-left: 14px; border-left: 1px solid var(--line-navy); }
.workflows dt { font-family: var(--serif); font-size: 1.15rem; color: var(--pearl); font-weight: 400; }
.workflows dd { font-size: .82rem; color: var(--on-navy-mute); line-height: 1.45; margin-top: 4px; }
.figures { display: flex; flex-wrap: wrap; gap: 14px 36px; }
.figures > div { display: flex; flex-direction: column-reverse; }
.figures dd { font-family: var(--serif); font-weight: 300; font-size: 2.1rem; line-height: 1; color: var(--gold); }
.figures dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-mute); margin-top: 6px; font-weight: 600; max-width: 16ch; line-height: 1.35; }
.companion__strip {
  position: relative; margin-top: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
}
.coverage { position: relative; border-top: 1px solid var(--line-navy); padding-top: 14px; }
.coverage summary { cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--gold-hi); width: max-content; max-width: 100%; padding: 6px 0; }
.coverage__table { width: 100%; max-width: 760px; border-collapse: collapse; margin-top: 14px; font-size: var(--fs-small); }
.coverage__table th, .coverage__table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-navy); font-weight: 400; }
.coverage__table thead th { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-mute); font-weight: 600; }
.coverage__table tbody th { color: var(--on-navy-soft); }
.coverage__table td { font-family: var(--serif); font-size: 1.25rem; color: var(--pearl); }
.feature--plan { background: var(--navy-900); color: var(--on-navy); border-color: transparent; }
.feature--plan .feature__body { color: var(--on-navy-soft); }
.feature--plan .chapter-mark, .feature--plan .kind-tag { color: var(--on-navy-soft); border-color: var(--line-navy); }
.feature--plan .h3 em { color: var(--gold); }
.feature--plan .link { color: var(--gold-hi); }
.companion__note { font-size: var(--fs-xs); color: var(--on-navy-mute); max-width: 70ch; border-left: 2px solid var(--gold); padding-left: 14px; }
@media (max-width: 1080px) {
  .companion__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .workflows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflows > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .companion__strip { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   9. Home — Inclusion & SEN
   -------------------------------------------------------------------------- */
.inclusion__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.inclusion__intro { position: sticky; top: 104px; display: grid; gap: 20px; }
.boundary {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 18px 20px; font-size: var(--fs-small); color: var(--ink-soft);
}
.boundary b { color: var(--ink); }
.access-levels { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-m); overflow: hidden; background: var(--paper); }
.access-levels li { padding: 16px 14px; display: grid; gap: 6px; align-content: start; }
.access-levels li + li { border-left: 1px solid var(--line); }
.access-levels .lvl { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c1-ink); }
.access-levels b { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; line-height: 1.2; }
.access-levels span { font-size: .8rem; color: var(--ink-muted); line-height: 1.4; }
.access-bar { height: 4px; border-radius: 2px; background: var(--pearl-3); overflow: hidden; }
.access-bar i { display: block; height: 100%; background: var(--c1); }
.sen-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
.sen-tile { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.sen-tile:nth-child(even) { padding-left: 22px; padding-right: 0; border-left: 1px solid var(--line); }
.sen-tile h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.sen-tile p { font-size: var(--fs-small); color: var(--ink-soft); }
.sen-main { margin-top: clamp(24px, 3vw, 36px); }
.sen-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin-top: clamp(28px, 3vw, 44px); align-items: start; }
@media (max-width: 1000px) {
  .inclusion__grid { grid-template-columns: minmax(0, 1fr); }
  .inclusion__intro { position: static; }
}
@media (max-width: 640px) {
  .access-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-levels li:nth-child(3) { border-left: 0; }
  .access-levels li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sen-tiles { grid-template-columns: minmax(0, 1fr); }
  .sen-tile, .sen-tile:nth-child(even) { padding: 18px 0; border-left: 0; }
  .sen-shots { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   10. Home — established platforms index
   -------------------------------------------------------------------------- */
.index-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.index-row {
  position: relative;
  display: grid; grid-template-columns: 220px 72px minmax(0, 1fr) minmax(0, .8fr) auto;
  gap: clamp(16px, 2.4vw, 36px); align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease);
}
.index-row:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.index-row__thumb { border-radius: var(--r-s); overflow: hidden; aspect-ratio: 16 / 10; background: var(--mat, var(--pearl-3)); box-shadow: var(--shadow-1); }
.index-row__thumb img { width: 100%; height: 100%; object-fit: contain; transition: transform 400ms var(--ease); }
.index-row:hover .index-row__thumb img { transform: scale(1.03); }
.index-row__no { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.6rem; color: var(--accent-ink); }
.index-row__name { font-family: var(--serif); font-weight: 340; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.95rem); line-height: 1.1; }
.index-row__name a { text-decoration: none; }
.index-row__name a::after { content: ""; position: absolute; inset: 0; }
.index-row__name em { font-style: italic; color: var(--accent-ink); font-weight: 300; }
.index-row__cat { margin-top: 6px; }
.index-row__desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.index-row__actions { display: flex; gap: 8px; position: relative; z-index: 1; }
@media (max-width: 1080px) {
  .index-row { grid-template-columns: 180px minmax(0, 1fr) auto; }
  .index-row__no { display: none; }
  .index-row__desc { grid-column: 2 / 3; grid-row: 2; }
  .index-row__thumb { grid-row: span 2; }
  .index-row__actions { grid-row: span 2; }
}
@media (max-width: 640px) {
  .index-row { grid-template-columns: 112px minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 18px 0; }
  .index-row__thumb { grid-row: span 3; }
  .index-row__desc { grid-column: 2; grid-row: auto; }
  .index-row__actions { grid-column: 2; grid-row: auto; margin-top: 6px; }
}

/* --------------------------------------------------------------------------
   11. Home — exam preparation (navy)
   -------------------------------------------------------------------------- */
.exam__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
.routine { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.routine li { padding: 14px 14px 14px 0; border-top: 2px solid var(--gold); display: grid; gap: 4px; }
.routine li + li { padding-left: 14px; border-left: 1px solid var(--line-navy); }
.routine .numeral { font-size: 1.2rem; }
.routine b { font-family: var(--serif); font-weight: 400; font-size: 1.12rem; color: var(--pearl); line-height: 1.2; }
.exam-card { background: var(--navy-800); border: 1px solid var(--line-navy); border-radius: var(--r-l); padding: clamp(18px, 2vw, 28px); display: grid; gap: 16px; align-content: start; }
.exam-card--wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.covers { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 18px 0 14px; }
.covers .a4 { width: clamp(78px, 8.6vw, 126px); flex: none; }
.covers .a4 + .a4 { margin-left: clamp(-40px, -2.4vw, -18px); }
.covers .a4:nth-child(1) { transform: rotate(-6deg) translateY(10px); }
.covers .a4:nth-child(2) { transform: rotate(-2deg); z-index: 1; }
.covers .a4:nth-child(3) { transform: rotate(2deg) translateY(-6px); z-index: 2; }
.covers .a4:nth-child(4) { transform: rotate(6deg) translateY(4px); z-index: 3; }
.covers .a4:nth-child(5) { transform: rotate(9deg) translateY(14px); z-index: 4; }
.disclaimer { font-size: var(--fs-xs); color: var(--on-navy-mute); line-height: 1.5; }
@media (max-width: 1000px) {
  .exam__grid { grid-template-columns: minmax(0, 1fr); }
  .exam-card--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .covers .a4:nth-child(n+4) { display: none; }
  .covers .a4 { width: 30%; }
}
@media (max-width: 640px) {
  .routine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routine li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* --------------------------------------------------------------------------
   12. Home — built with colleagues
   -------------------------------------------------------------------------- */
.colleagues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.colleague { padding: clamp(24px, 3vw, 40px) clamp(0px, 3vw, 40px) clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.colleague:nth-child(even) { padding-left: clamp(20px, 3vw, 40px); padding-right: 0; border-left: 1px solid var(--line); }
.colleague__name { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.7rem); line-height: 1.05; letter-spacing: -.015em; }
.colleague__role { font-size: var(--fs-small); color: var(--ink-soft); }
.colleague__works { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.colleague__works li { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.colleague__works .thumb { aspect-ratio: 16 / 10; border-radius: var(--r-s); overflow: hidden; background: var(--mat, var(--pearl-3)); box-shadow: var(--shadow-1); }
.colleague__works .thumb img { width: 100%; height: 100%; object-fit: contain; }
.colleague__works a { display: inline-block; padding-block: 2px; font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; text-decoration: none; }
.colleague__works a:hover { text-decoration: underline; }
.colleague__works small { display: block; font-size: var(--fs-xs); color: var(--ink-muted); margin-top: 3px; line-height: 1.4; }
.credit-line { font-size: var(--fs-xs); color: var(--accent-ink, var(--ink-soft)); font-weight: 600; letter-spacing: .01em; }
@media (max-width: 860px) {
  .colleagues { grid-template-columns: minmax(0, 1fr); }
  .colleague, .colleague:nth-child(even) { padding: 26px 0; border-left: 0; }
}
@media (max-width: 420px) { .colleague__works li { grid-template-columns: 96px 1fr; } }

/* --------------------------------------------------------------------------
   13. Catalogue (index #catalogue)
   -------------------------------------------------------------------------- */
.cat-toolbar {
  position: sticky; top: 72px; z-index: 20;
  display: grid; gap: 14px;
  padding: 16px 0 14px; margin-bottom: 24px;
  background: color-mix(in srgb, var(--pearl-2) 94%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) { .cat-toolbar { background: color-mix(in srgb, var(--pearl-2) 82%, transparent); backdrop-filter: blur(8px); } }
.cat-toolbar__row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
html:not(.js) .cat-toolbar, html:not(.js) .empty { display: none; }
.search {
  position: relative; flex: 1 1 320px; max-width: 520px;
}
.search input {
  width: 100%; min-height: 48px; padding: 0 16px 0 44px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--paper);
  font-size: 1rem; color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.search input::placeholder { color: var(--ink-muted); }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(122, 94, 33, .25); }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-muted); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px; background: var(--paper); }
.seg button {
  border: 0; background: transparent; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--navy-900); color: var(--pearl); }
.seg button:not([aria-pressed="true"]):hover { color: var(--ink); background: rgba(21, 36, 58, .06); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft);
  font-size: .85rem; font-weight: 600;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--ink-muted)); }
.chip[data-cat="all"]::before { background: conic-gradient(var(--c1) 0 12.5%, var(--c2) 0 25%, var(--c3) 0 37.5%, var(--c4) 0 50%, var(--c5) 0 62.5%, var(--c6) 0 75%, var(--c7) 0 87.5%, var(--c8) 0); }
.chip .n { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--ink-muted); }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--pearl); }
.chip[aria-pressed="true"] .n { color: var(--on-navy-soft); }
.cat-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; font-size: var(--fs-small); color: var(--ink-soft); }
.cat-status b { color: var(--ink); }
.cat-status .reset { border: 0; background: none; padding: 6px 2px; font-weight: 600; color: var(--gold-ink); text-decoration: underline; text-underline-offset: .2em; }
.cat-key { font-size: var(--fs-xs); color: var(--ink-muted); }

.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.card {
  position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
  overflow: hidden; box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--line-strong); }
.card__media { position: relative; aspect-ratio: 16 / 10; background: var(--mat, var(--pearl-3)); border-bottom: 1px solid var(--line); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
.card__typo {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; padding: 18px;
  background: radial-gradient(80% 90% at 50% 0%, color-mix(in srgb, var(--accent) 40%, var(--navy-900)), var(--navy-950));
  color: var(--pearl);
}
.card__typo b { font-family: var(--serif); font-weight: 300; font-size: 1.7rem; line-height: 1.05; }
.card__typo span { font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.card__media--covers { background: radial-gradient(90% 100% at 50% 0%, #1f3557, var(--navy-950)); display: grid; place-items: center; }
.card__media--covers .covers { padding: 0; }
.card__media--covers .covers .a4 { width: 26%; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6); }
.card__media--covers .covers .a4 + .a4 { margin-left: -8%; }
.card__body { display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card__no { font: 500 .7rem/1 var(--mono); letter-spacing: .1em; color: var(--ink-muted); }
.card__title { font-family: var(--serif); font-weight: 400; font-size: 1.32rem; line-height: 1.15; letter-spacing: -.01em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card__title em { font-style: italic; font-weight: 300; color: var(--accent-ink); }
.card__sum { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.card__aud { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.4; }
.card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.card__open {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); text-decoration: none; font-size: .8rem; font-weight: 600; color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.card__open:hover { background: var(--navy-900); border-color: var(--navy-900); color: var(--pearl); }
.card__credit { font-size: var(--fs-xs); color: var(--accent-ink); font-weight: 600; }

/* List view */
.cards[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
.cards[data-view="list"] .card {
  grid-template-rows: none; grid-template-columns: 132px minmax(0, 1fr);
  border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; background: transparent;
}
.cards[data-view="list"] .card:hover { transform: none; background: var(--paper); }
.cards[data-view="list"] .card__media { border: 0; border-radius: var(--r-s); margin: 14px 0; align-self: center; }
.cards[data-view="list"] .card__media::after { display: none; }
.cards[data-view="list"] .card__body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; padding: 14px 0 14px 22px; }
.cards[data-view="list"] .card__top { grid-column: 1; }
.cards[data-view="list"] .card__title { grid-column: 1; font-size: 1.2rem; }
.cards[data-view="list"] .card__sum { grid-column: 2; grid-row: 1 / span 3; font-size: .85rem; }
.cards[data-view="list"] .card__aud { grid-column: 1; }
.cards[data-view="list"] .card__foot { grid-column: 3; grid-row: 1 / span 3; border: 0; padding: 0; margin: 0; flex-direction: column; align-items: flex-end; }
.cards[data-view="list"] .card__typo b { font-size: .9rem; }
.cards[data-view="list"] .card__typo span { display: none; }
@media (max-width: 760px) {
  .cards[data-view="list"] .card { grid-template-columns: 88px minmax(0, 1fr); }
  .cards[data-view="list"] .card__body { grid-template-columns: minmax(0, 1fr); padding-left: 14px; }
  .cards[data-view="list"] .card__sum { display: none; }
  .cards[data-view="list"] .card__foot { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 6px; }
}
.empty {
  display: grid; justify-items: start; gap: 12px; padding: 40px clamp(20px, 4vw, 48px);
  border: 1px dashed var(--line-strong); border-radius: var(--r-l); background: var(--paper);
}
.empty h3 { font-family: var(--serif); font-weight: 300; font-size: 1.8rem; }
.empty p { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   14. Home — voices, interlude, creator, contact
   -------------------------------------------------------------------------- */
.voices { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.voice { grid-column: span 4; display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.voice--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); padding-top: 0; border-top: 0; margin-bottom: clamp(12px, 2vw, 28px); }
.voice__topic { font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.voice blockquote { font-family: var(--serif); font-weight: 300; font-size: 1.22rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.voice--lead blockquote { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.3; letter-spacing: -.01em; }
.voice blockquote p::before { content: "\201C"; }
.voice blockquote p::after { content: "\201D"; }
.voice blockquote p:not(:first-child)::before { content: ""; }
.voice blockquote p:not(:last-child)::after { content: ""; }
.voice blockquote p + p { margin-top: .8em; }
.voice figcaption { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; }
.voice__initials { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-900); color: var(--gold); font: 400 .95rem/1 var(--serif); }
.voice__name { font-weight: 600; font-size: .95rem; }
.voice__role { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.4; }
.voice details { font-size: var(--fs-small); color: var(--ink-soft); }
.voice summary { cursor: pointer; font-weight: 600; color: var(--gold-ink); width: max-content; padding: 4px 0; }
.voice details[open] summary { margin-bottom: 8px; }
.voice details p + p { margin-top: .7em; }
.voice__excerpt { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
@media (max-width: 1000px) { .voice { grid-column: span 6; } .voice--lead { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } }
@media (max-width: 640px) { .voice { grid-column: 1 / -1; } }

.interlude { text-align: center; overflow: hidden; }
.interlude .arcs { left: 50%; top: 50%; width: 900px; transform: translate(-50%, -50%); opacity: .3; }
.interlude blockquote { position: relative; font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.9rem); line-height: 1.25; max-width: 30ch; margin-inline: auto; letter-spacing: -.01em; text-wrap: balance; }
.interlude blockquote em { color: var(--gold); }
.interlude cite { position: relative; display: block; margin-top: 26px; font-style: normal; font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--on-navy-mute); font-weight: 600; }

.creator { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.creator__portrait { position: sticky; top: 104px; margin: 0; }
.creator__frame { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-m) var(--r-m); overflow: hidden; box-shadow: 0 0 0 1px var(--gold), 0 0 0 9px var(--pearl), 0 0 0 10px rgba(201, 169, 97, .5), var(--shadow-2); background: var(--pearl-3); }
.creator__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.creator__portrait figcaption { margin-top: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.creator__portrait figcaption b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; }
.creator__portrait figcaption [lang="ar"] { color: var(--gold-ink); font-size: 1.2rem; }
.creator__bio { display: grid; gap: 22px; }
.creator__bio .prose { font-size: 1.08rem; color: var(--ink-soft); }
.creator__bio .prose p:first-child { font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.4; color: var(--ink); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.facts > div { padding: 18px 16px 18px 0; display: flex; flex-direction: column-reverse; gap: 6px; }
.facts > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dd { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem, 1.4rem + 1vw, 2.5rem); line-height: 1; }
.facts dt { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); line-height: 1.35; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.principles > div { padding: 16px 0; border-bottom: 1px solid var(--line); }
.principles dt { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; margin-bottom: 4px; }
.principles dd { font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 960px) {
  .creator { grid-template-columns: minmax(0, 1fr); }
  .creator__portrait { position: static; width: min(100%, 360px); }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .principles { grid-template-columns: minmax(0, 1fr); }
}

/* Contact + footer */
.site-foot { background: var(--navy-950); color: var(--on-navy); position: relative; overflow: hidden; }
.site-foot .arcs { right: -20vw; top: -24vw; width: 64vw; max-width: 900px; opacity: .28; }
.contact { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: end; padding-block: clamp(80px, 9vw, 152px) clamp(56px, 6vw, 96px); }
.contact__mail { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 1rem + 2.2vw, 2.8rem); color: var(--gold); text-decoration: none; overflow-wrap: anywhere; border-bottom: 1px solid rgba(201, 169, 97, .4); padding-bottom: 4px; transition: border-color var(--t-fast) var(--ease); }
.contact__mail:hover { border-bottom-color: var(--gold); }
.channels { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line-navy); }
.channels a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--line-navy); text-decoration: none; transition: padding var(--t-fast) var(--ease); }
.channels a:hover { padding-left: 6px; }
.channels .k { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-navy-mute); grid-column: 1; }
.channels .v { font-size: 1.05rem; color: var(--pearl); grid-column: 1; overflow-wrap: anywhere; }
.channels .arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--gold); }
.foot-grid { position: relative; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 40px; border-top: 1px solid var(--line-navy); }
.foot-grid h2 { font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-navy-mute); margin-bottom: 14px; font-family: var(--sans); }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-grid a { display: inline-block; padding-block: 3px; color: var(--on-navy-soft); text-decoration: none; font-size: var(--fs-small); }
.foot-grid a:hover { color: var(--pearl); text-decoration: underline; }
.foot-brand p { font-size: var(--fs-small); color: var(--on-navy-mute); max-width: 36ch; margin-top: 14px; }
.foot-base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 32px; border-top: 1px solid var(--line-navy); font-size: var(--fs-xs); color: var(--on-navy-mute); }
.foot-base p { max-width: 80ch; }
@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   15. Case-study pages
   -------------------------------------------------------------------------- */
.cs-hero { position: relative; overflow: hidden; background: var(--pearl); border-bottom: 1px solid var(--line); }
.cs-hero .arcs { right: -18vw; top: -26vw; width: 70vw; max-width: 1000px; color: var(--accent); opacity: .3; }
.cs-hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.3fr);
  gap: clamp(32px, 5vw, 88px); align-items: center; padding-block: clamp(40px, 5vw, 88px) clamp(48px, 6vw, 104px);
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: 26px; }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-hidden] { opacity: .6; }
.cs-hero__no { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cs-hero__no .label { color: var(--accent-ink); }
.cs-hero__no .numeral { font-size: 1.5rem; }
.cs-hero h1 { margin-bottom: 10px; }
.cs-hero h1 em { color: var(--accent-ink); }
.cs-alias { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.2rem; color: var(--ink-soft); margin-bottom: 18px; }
.cs-hero .lead { margin-bottom: 26px; }
.cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); margin-bottom: 28px; }
.cs-facts > div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.cs-facts > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
.cs-facts dt { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; }
.cs-facts dd { font-size: .93rem; line-height: 1.45; }
.cs-hero__media .covers { padding: 24px 0; }
.cs-hero__media .covers .a4 { width: clamp(84px, 9.5vw, 150px); }
@media (max-width: 1000px) { .cs-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .cs-facts { grid-template-columns: minmax(0, 1fr); } .cs-facts > div:nth-child(even) { padding-left: 0; border-left: 0; } }

.cs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); padding-block: clamp(48px, 6vw, 104px); }
.cs-toc { position: sticky; top: 100px; align-self: start; }
.cs-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; border-left: 1px solid var(--line-strong); }
.cs-toc a { display: grid; grid-template-columns: 2.2em 1fr; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; font-size: .88rem; color: var(--ink-soft); line-height: 1.35; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.cs-toc a .numeral { font-size: .9rem; }
.cs-toc a:hover, .cs-toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.cs-toc__title { margin-bottom: 14px; }
.cs-chapters { display: grid; gap: clamp(56px, 6vw, 96px); min-width: 0; }
.chapter { display: grid; gap: 22px; scroll-margin-top: 96px; }
.chapter__head { display: grid; gap: 8px; }
.chapter__head .numeral { font-size: 1.15rem; }
.chapter .prose { font-size: 1.08rem; }
.chapter .prose p:first-child { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.3rem); line-height: 1.55; color: var(--ink); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.gallery .shot:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.gallery .shot--full { grid-column: 1 / -1; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.duo h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; margin-bottom: 8px; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--line); font-size: .98rem; line-height: 1.5; }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 10px; height: 6px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
.details > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.details dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.details dd { font-size: .98rem; color: var(--ink-soft); line-height: 1.55; }
.evidence { display: grid; gap: 20px; }
.evidence__row { display: grid; grid-template-columns: 180px 1fr; gap: 16px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.evidence__row dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); padding-top: 4px; }
.evidence__row dd { color: var(--ink-soft); max-width: 66ch; }
.evidence .voice { padding-top: 0; border-top: 0; }
.collab {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
  padding: 18px 20px; border-radius: var(--r-m); background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.collab__mono { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 400 1.1rem/1 var(--serif); }
.collab b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; }
.collab span { font-size: var(--fs-small); color: var(--ink-soft); }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.callout {
  border-radius: var(--r-l); background: var(--navy-900); color: var(--on-navy);
  padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px;
}
.callout .h4 { color: var(--pearl); }
.callout p { color: var(--on-navy-soft); max-width: 64ch; }
.volumes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(18px, 2vw, 28px); }
.volume { display: grid; gap: 12px; align-content: start; }
.volume .a4 { box-shadow: var(--shadow-2); }
.volume b { font-family: var(--serif); font-weight: 400; font-size: 1.08rem; line-height: 1.25; }
.volume span { font-size: var(--fs-xs); color: var(--ink-muted); }
.cs-next { border-top: 1px solid var(--line); background: var(--pearl-2); }
.cs-next__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding-block: 36px; }
.cs-next a.pn { text-decoration: none; display: grid; gap: 4px; }
.cs-next a.pn b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; overflow-wrap: anywhere; }
.cs-next a.pn:hover b { text-decoration: underline; text-underline-offset: .2em; }
.cs-next a.pn--next { text-align: right; justify-items: end; }
@media (max-width: 1000px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-toc { position: static; }
  .cs-toc ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .cs-toc a { border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 6px 12px; grid-template-columns: auto auto; gap: 6px; margin: 0; }
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gallery, .duo, .details, .related { grid-template-columns: minmax(0, 1fr); }
  .evidence__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cs-next__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-next__grid > .cs-next__mid { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}

/* --------------------------------------------------------------------------
   16. Scan & share
   -------------------------------------------------------------------------- */
.scan-hero { position: relative; overflow: hidden; }
.scan-hero .arcs { right: -16vw; top: -20vw; width: 60vw; max-width: 860px; opacity: .45; }
.scan-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(48px, 6vw, 96px); }
.scan-home { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: var(--navy-800); border: 1px solid var(--line-navy); border-radius: var(--r-l); padding: 18px; }
.qr { background: #fff; border-radius: 10px; padding: 0; line-height: 0; }
.qr svg { width: 100%; height: auto; shape-rendering: crispEdges; }
.scan-home .qr { width: 148px; }
.scan-howto { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-small); color: var(--on-navy-soft); }
@media (max-width: 860px) {
  .scan-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .scan-home { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; max-width: 440px; }
  .scan-home .qr { width: 112px; }
}
.scan-howto [lang="ar"] { color: var(--gold-hi); }
.scan-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-jump .chip { text-decoration: none; }
.scan-chapter { padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px clamp(24px, 3vw, 48px); align-items: start; }
.scan-chapter__head { display: grid; gap: 6px; position: sticky; top: 96px; }
.scan-chapter__head .numeral { font-size: 1.6rem; }
.scan-chapter__head p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 900px) { .scan-chapter { grid-template-columns: minmax(0, 1fr); } .scan-chapter__head { position: static; } }
.qcards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); gap: 16px; }
.qcard { display: grid; grid-template-rows: auto 1fr; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; break-inside: avoid; }
.qcard .qr { border: 1px solid var(--line); }
.qcard__name { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.qcard__name em { font-style: italic; font-weight: 300; color: var(--accent-ink); }
.qcard__url { font: 500 .72rem/1.35 var(--mono); color: var(--ink-soft); overflow-wrap: anywhere; }
.qcard__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; }
.qcard a { text-decoration: none; }
.qcard__links { display: flex; gap: 12px; font-size: var(--fs-xs); font-weight: 600; }
.qcard__links a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .18em; }
.qcard--request { background: var(--pearl-2); border-style: dashed; }
.qcard--request .request-box { aspect-ratio: 1; display: grid; place-content: center; text-align: center; gap: 8px; padding: 14px; border-radius: 10px; border: 1px dashed var(--line-strong); color: var(--ink-soft); font-size: var(--fs-small); }
.qcard--request .request-box b { font-family: var(--serif); font-weight: 400; color: var(--ink); font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   17. OwlMark page
   -------------------------------------------------------------------------- */
.om-studios { display: grid; gap: clamp(56px, 7vw, 112px); }
.om-studio { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.om-studio:nth-child(even) .om-studio__text { order: 2; }
.om-studio__ar { font-size: 1.15rem; color: var(--gold-ink); margin: 2px 0 12px; }
.om-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.om-sheet a { display: block; border-radius: var(--r-s); overflow: hidden; box-shadow: var(--shadow-1); aspect-ratio: 16 / 9.4; background: var(--navy-900); }
.om-sheet img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.om-sheet a:hover img { transform: scale(1.04); }
.om-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border-top: 1px solid var(--line-strong); }
.om-principles > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.om-principles dt { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin: 4px 0 6px; }
.om-principles dd { font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 900px) {
  .om-studio { grid-template-columns: minmax(0, 1fr); }
  .om-studio:nth-child(even) .om-studio__text { order: 0; }
  .om-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .om-principles { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   18. Motion — content is visible by default; reveal only when JS opts in.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on [data-reveal] {
    opacity: 0; transform: translateY(16px);
    transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
    transition-delay: calc(var(--d, 0) * 70ms);
  }
  html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 14mm 12mm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .site-nav, .nav-panel, .skip, .cat-toolbar, .cs-toc, .arcs, .lightbox, .no-print, .site-foot .contact, .foot-grid { display: none !important; }
  .on-navy, .hero, .site-foot, .cs-hero, .callout { background: #fff !important; color: #000 !important; }
  .on-navy *, .hero * { color: #000 !important; }
  .shot__plate, .card, .qcard, .feature { box-shadow: none !important; }
  a { text-decoration: none; }
  .section { padding-block: 10mm; }
  .qcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5mm; }
  .scan-hero__grid { grid-template-columns: minmax(0, 1fr) 82mm; gap: 8mm; padding-block: 0 6mm; }
  .scan-home { grid-template-columns: 30mm minmax(0, 1fr); gap: 4mm; padding: 4mm; }
  .scan-home .qr { width: 30mm; }
  .scan-home .h4 { font-size: 13pt; }
  .scan-hero .h1 { font-size: 26pt; }
  .scan-hero .lead { font-size: 10.5pt; }
  .qcard { border: .3mm solid #999; padding: 3mm; break-inside: avoid; }
  .qcard .qr { border: 0; }
  .scan-chapter { display: block; break-inside: auto; padding-block: 6mm; border-top: .3mm solid #999; }
  .scan-chapter__head { position: static; break-after: avoid; margin-bottom: 4mm; }
  .scan-chapter__head p { display: none; }
  .scan-home { background: #fff !important; border: .3mm solid #999; }
  .cs-layout { grid-template-columns: minmax(0, 1fr); padding-block: 6mm; }
  .chapter { break-inside: auto; gap: 4mm; }
  .chapter__head { break-after: avoid; }
  .shot, .duo > div, .details > div, .evidence__row { break-inside: avoid; }
  .cs-chapters { gap: 8mm; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Comfortable targets for small inline links */
.cat-key a, .crumbs a, .qcard__links a { display: inline-block; padding-block: 4px; }
@media (max-width: 640px) { .hero .eyebrow--rule::before { display: none; } }