/* ============================================================
   Youssef Al Brawy · The Working Manuscript
   A book-shaped personal website.
   Palette: paper, ink, editor's green pencil, wine bookmark.
   Two modes: printed book by day, ink-green reading room by night.
   Type (English): Alegreya (display), Manrope (body, UI, labels);
   Fraunces, Newsreader and Courier Prime as editorial accents.
   Type (Arabic): The Year of Handicrafts (display, labels), Noto Naskh
   Arabic (body), IBM Plex Sans Arabic (UI), Thmanyah Serif Display (the
   Fraunces editorial role, drawn as outlines by the build).
   ============================================================ */

:root {
  color-scheme: light;
  /* Light mode: an editorial printed book. Warm ivory paper, forest ink, botanical green pencil, rust mark. */
  --cream: #F6F2E8;
  --paper: #FFFDF8;
  --paper-deep: #F5F1E8;
  --paper-dim: #ECE8DC;
  --ink: #1F2A22;
  --ink-soft: #5D685F;
  --pencil: #3F684B;
  --pencil-ghost: rgba(63, 104, 75, 0.09);
  --mark: #A85B36;
  --rule: #DDD9CC;
  --cloth: #26382B;
  --cloth-deep: #172018;

  --font-display: "Alegreya", "Iowan Old Style", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Manrope", "Helvetica Neue", Arial, sans-serif; /* eyebrows, metadata */
  /* Editorial accents: quotes, corrections, margin notes, typewriter marks */
  --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-serif-text: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mark: "Courier Prime", "Courier New", monospace;

  --measure: 64ch;
  --reading-body-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  --reading-body-line-height: 1.72;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease-page: cubic-bezier(0.55, 0.06, 0.28, 0.99);
  --radius: 4px;   /* buttons, controls, and content cards */
}

/* Dark mode: the same book read at night. Deep forest paper, ivory text, moss pencil, amber mark. */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #172018;
  --paper-deep: #223025;
  --paper-dim: #1C291F;
  --ink: #F6F2E8;
  --ink-soft: #C7CCBD;
  --pencil: #A9C982;
  --pencil-ghost: rgba(169, 201, 130, 0.10);
  --mark: #E4A561;
  --rule: #3A493C;
  --cloth: #314634;
  --cloth-deep: #26372A;
}

/* No-JS fallback: follow the system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #172018;
    --paper-deep: #223025;
    --paper-dim: #1C291F;
    --ink: #F6F2E8;
    --ink-soft: #C7CCBD;
    --pencil: #A9C982;
    --pencil-ghost: rgba(169, 201, 130, 0.10);
    --mark: #E4A561;
    --rule: #3A493C;
    --cloth: #314634;
    --cloth-deep: #26372A;
  }
}

/* Smooth mode change: applied briefly by the toggle, then removed */
html.theme-anim, html.theme-anim body,
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease,
    background-image 0.45s ease, box-shadow 0.45s ease !important;
}

/* The Year of Handicrafts: self-hosted Arabic display face (see /fonts/) */
@font-face {
  font-family: "TheYearofHandicrafts";
  src: url("/fonts/theyearofhandicrafts-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TheYearofHandicrafts";
  src: url("/fonts/theyearofhandicrafts-semibold.otf") format("opentype");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "TheYearofHandicrafts";
  src: url("/fonts/theyearofhandicrafts-bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

/* Thmanyah Serif Display (the Arabic counterpart of the Fraunces editorial
   role) is not served as a font: its license does not allow handing the
   font files to visitors. The build draws those words as inline SVG
   outlines instead; see "Thmanyah outlines" at the end of this file. */

/* ---------- Reset ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--reading-body-size);
  line-height: var(--reading-body-line-height);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { margin: 0 0 1.35em; }

a {
  color: inherit;
  text-decoration-color: var(--pencil);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover { color: var(--pencil); }

::selection { background: var(--pencil); color: var(--paper); }

:focus-visible {
  outline: 2px dashed var(--pencil);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On the forest cloth (cover, header over it, end-of-page band) the pencil outline is too faint */
.cover :focus-visible,
.runhead.on-cover :focus-visible,
.next-chapter :focus-visible { outline-color: var(--cream); }

/* Accessible-only text: hidden without extending the RTL scroll area */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-label);
  font-size: 0.85rem;
  padding: 0.7em 1.2em;
  border-radius: var(--radius);
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* Paper grain, very quiet */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Utility voices ---------- */

.mark-label {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
}

.mark-label--ink { color: var(--ink-soft); }

.small-caps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}

/* ---------- Running head (site header) ---------- */

.runhead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mark);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  transition: transform 0.3s var(--ease-page), background 0.3s ease;
}

.runhead.on-cover {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--cream);
}

.runhead__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.brand-symbol {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--pencil);
  -webkit-mask: url("/assets/brand/logo/throughline-symbol.svg") center / contain no-repeat;
  mask: url("/assets/brand/logo/throughline-symbol.svg") center / contain no-repeat;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  font-style: normal;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.runhead.on-cover .brand-symbol { background: var(--cream); }
.runhead__brand:hover { color: var(--pencil); }
.runhead.on-cover .runhead__brand:hover { color: var(--cream); opacity: 0.85; }

.runhead__chapter {
  flex: 1;
  text-align: center;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.runhead.on-cover .runhead__chapter { color: color-mix(in srgb, var(--cream) 72%, transparent); }

.runhead__right {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  white-space: nowrap;
}

.runhead__folio { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.runhead.on-cover .runhead__folio { color: color-mix(in srgb, var(--cream) 72%, transparent); }

.toc-toggle {
  appearance: none;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45em 0.95em;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.toc-toggle:hover { background: var(--ink); color: var(--paper); }
.runhead.on-cover .toc-toggle:hover { background: var(--cream); color: var(--cloth); }

/* Controls must read clearly before hover, especially at night.
   Dark mode gives every control a quiet plate and a firm border. */
[data-theme="dark"] .toc-toggle,
[data-theme="dark"] .lang-toggle,
[data-theme="dark"] .theme-toggle {
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  border-color: color-mix(in srgb, var(--ink) 75%, transparent);
  color: var(--ink);
}
[data-theme="dark"] .toc-toggle:hover,
[data-theme="dark"] .lang-toggle:hover,
[data-theme="dark"] .theme-toggle:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
[data-theme="dark"] .btn {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: color-mix(in srgb, var(--ink) 80%, transparent);
}
[data-theme="dark"] .btn:hover { background: var(--ink); border-color: var(--ink); }
[data-theme="dark"] .btn--pencil {
  background: var(--pencil-ghost);
  border-color: var(--pencil);
}
[data-theme="dark"] .btn--pencil:hover { background: var(--pencil); border-color: var(--pencil); }
[data-theme="dark"] .btn--paper {
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border-color: color-mix(in srgb, var(--cream) 85%, transparent);
}
[data-theme="dark"] .btn--paper:hover { background: var(--cream); border-color: var(--cream); }
[data-theme="dark"] .toc-close { color: var(--ink); }

/* The cover sits on dark cloth in both modes: keep its controls readable there too */
.runhead.on-cover .toc-toggle,
.runhead.on-cover .lang-toggle,
.runhead.on-cover .theme-toggle {
  background: color-mix(in srgb, var(--cream) 10%, transparent);
  border-color: color-mix(in srgb, var(--cream) 80%, transparent);
  color: var(--cream);
}

/* Language switch: a small framed link, same voice as the other controls */
.lang-toggle {
  display: inline-block;
  border: 1.5px solid currentColor;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.45em 0.8em;
  border-radius: var(--radius);
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-toggle:hover { background: var(--ink); color: var(--paper); }
.runhead.on-cover .lang-toggle:hover { background: var(--cream); color: var(--cloth); }

/* Reading-lamp switch: light and dark mode */
.theme-toggle {
  appearance: none;
  border: 1.5px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--font-mark);
  font-size: 0.9rem;
  line-height: 1;
  width: 2.35em;
  height: 2.35em;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.theme-toggle:hover { background: var(--ink); color: var(--paper); }
.runhead.on-cover .theme-toggle:hover { background: var(--cream); color: var(--cloth); }
.theme-toggle .glyph { display: block; transition: transform 0.35s var(--ease-page); }
.theme-toggle:active .glyph { transform: rotate(40deg); }
.theme-toggle .glyph--sun { display: none; }
[data-theme="dark"] .theme-toggle .glyph--sun { display: block; }
[data-theme="dark"] .theme-toggle .glyph--moon { display: none; }

/* ---------- Bookmark ribbon (reading progress) ---------- */

.ribbon {
  position: fixed;
  top: 0;
  right: clamp(0.9rem, 2.5vw, 2.2rem);
  z-index: 110;
  width: 9px;
  height: 0;
  background: var(--mark);
  box-shadow: 0 1px 3px rgba(28, 26, 21, 0.25);
  pointer-events: none;
  transition: height 0.12s linear;
}
.ribbon::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  border-left: 4.5px solid var(--mark);
  border-right: 4.5px solid var(--mark);
  border-bottom: 8px solid transparent;
}

/* ---------- Contents overlay ---------- */

.toc-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--paper-deep);
  display: grid;
  place-items: center;
  padding: clamp(4.5rem, 10vh, 7rem) var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-page), visibility 0s linear 0.3s;
  overflow-y: auto;
}
.toc-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease-page);
}

.toc-overlay__inner { width: min(46rem, 100%); }

.toc-overlay__eyebrow { margin-bottom: 2.2rem; text-align: center; display: block; }

.toc-close {
  position: absolute;
  top: 1rem;
  right: var(--gutter);
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.6em 0.4em;
}
.toc-close:hover { color: var(--mark); }

.toc-list { list-style: none; margin: 0; padding: 0; }

.toc-list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-page);
}
.toc-overlay.open .toc-list li { opacity: 1; transform: none; }
.toc-overlay.open .toc-list li:nth-child(2) { transition-delay: 0.05s; }
.toc-overlay.open .toc-list li:nth-child(3) { transition-delay: 0.1s; }
.toc-overlay.open .toc-list li:nth-child(4) { transition-delay: 0.15s; }
.toc-overlay.open .toc-list li:nth-child(5) { transition-delay: 0.2s; }
.toc-overlay.open .toc-list li:nth-child(6) { transition-delay: 0.25s; }

.toc-entry {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 1.05rem 0.25rem;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.toc-entry__num {
  font-family: var(--font-mark);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pencil);
  min-width: 2.4em;
}

.toc-entry__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  font-weight: 480;
  letter-spacing: -0.01em;
  transition: color 0.18s ease, transform 0.25s var(--ease-page);
}

.toc-entry .leader {
  flex: 1;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-0.35em);
  min-width: 2rem;
}

.toc-entry__page {
  font-family: var(--font-mark);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.toc-entry:hover .toc-entry__title { color: var(--pencil); transform: translateX(6px); }
.toc-entry[aria-current="page"] .toc-entry__title { color: var(--mark); }
.toc-entry[aria-current="page"] .toc-entry__num::after { content: " ❧"; color: var(--mark); }

.toc-entry__desc {
  display: block;
  font-family: var(--font-serif-text);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.2em;
  letter-spacing: 0;
  max-width: 30ch;
}

.home-toc .toc-entry__title { flex: 0 1 auto; min-width: 0; }

/* ---------- Page arrival + exit (the page turn) ---------- */

main {
  animation: page-arrive 0.65s var(--ease-page) both;
}

@keyframes page-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.turner {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: linear-gradient(105deg, var(--paper) 82%, var(--paper-dim));
  box-shadow: -18px 0 40px rgba(28, 26, 21, 0.22);
  transform: translateX(104%);
  pointer-events: none;
}
html.exiting .turner {
  transform: translateX(0);
  transition: transform 0.34s var(--ease-page);
}
html.exiting main { opacity: 0.35; transition: opacity 0.3s ease; }

/* ---------- Reveal on scroll ---------- */

.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease-page);
}
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; }
.rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; }

/* ---------- The cover (home hero) ---------- */

.cover {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 5.5rem var(--gutter) 4rem;
  background:
    radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--cream) 7%, transparent), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.12) 2px 3px),
    linear-gradient(160deg, var(--cloth), var(--cloth-deep) 70%);
  color: var(--cream);
  position: relative;
}

.cover__frame {
  width: min(52rem, 100%);
  border: 1px solid color-mix(in srgb, var(--cream) 35%, transparent);
  outline: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  outline-offset: 7px;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.cover__eyebrow {
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  display: block;
  margin-bottom: 2.4rem;
}
.cover__eyebrow.mark-label { color: color-mix(in srgb, var(--cream) 62%, transparent); }

.cover__title {
  font-size: clamp(2.7rem, 8vw, 5.4rem);
  font-weight: 430;
  margin-bottom: 0.35em;
}
.cover__title em {
  font-style: italic;
  font-weight: 380;
}

.cover__sub {
  font-family: var(--font-serif-text);
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: color-mix(in srgb, var(--cream) 78%, transparent);
  max-width: 34em;
  margin: 0 auto 2.8rem;
}

.cover__rule {
  width: 4.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--cream) 40%, transparent);
  margin: 0 auto 2.6rem;
  border: none;
}

.cover__edition {
  font-family: var(--font-mark);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
}

.cover__open {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: color-mix(in srgb, var(--cream) 75%, transparent);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.5em;
}
.cover__open:hover { color: var(--cream); }
.cover__open .arrow { animation: nudge 2.2s ease-in-out infinite; font-size: 1.1rem; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Cover page-load sequence */
.cover__frame > * {
  opacity: 0;
  transform: translateY(16px);
  animation: page-arrive 0.8s var(--ease-page) forwards;
}
.cover__frame > *:nth-child(1) { animation-delay: 0.15s; }
.cover__frame > *:nth-child(2) { animation-delay: 0.3s; }
.cover__frame > *:nth-child(3) { animation-delay: 0.5s; }
.cover__frame > *:nth-child(4) { animation-delay: 0.65s; }
.cover__frame > *:nth-child(5) { animation-delay: 0.8s; }
.cover__open { opacity: 0; animation: fade-in 1s ease 1.4s forwards; }

@keyframes fade-in { to { opacity: 1; } }

/* ---------- Chapter opener ---------- */

.chapter-opener {
  padding: clamp(8rem, 16vh, 11rem) var(--gutter) clamp(3rem, 6vh, 4.5rem);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}

.chapter-opener__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 320;
  font-size: clamp(3.2rem, 9vw, 6rem);
  color: var(--pencil);
  line-height: 1;
  display: block;
  margin-bottom: 0.2em;
}

.chapter-opener__label { display: block; margin-bottom: 2.2rem; }

.chapter-opener__title {
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  font-weight: 460;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}

.chapter-opener__epigraph {
  font-family: var(--font-serif-text);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 38em;
  margin: 1.6rem auto 0;
  font-size: 1.02em;
}
.chapter-opener__epigraph cite {
  display: block;
  font-style: normal;
  font-family: var(--font-mark);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.9em;
}

/* Selected photographic openers, using the existing plate and heading system. */
.photo-opener { padding-block: clamp(2.5rem, 7vh, 5rem) clamp(3rem, 6vh, 4.5rem); }
.photo-opener__plate { max-width: 72rem; margin: 0 auto; }
.photo-opener__surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 24rem;
  height: clamp(24rem, 40vw, 31rem);
  background: var(--cloth-deep);
}
.photo-opener .photo-opener__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
[dir="rtl"] .photo-opener__image { transform: scaleX(-1); }
.photo-opener__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,32,24,.88), rgba(23,32,24,.78) 57%, rgba(23,32,24,.08) 76%, transparent); }
[dir="rtl"] .photo-opener__veil { background: linear-gradient(270deg, rgba(23,32,24,.88), rgba(23,32,24,.78) 57%, rgba(23,32,24,.08) 76%, transparent); }
.photo-opener__copy {
  position: absolute;
  inset-inline-start: clamp(1.5rem, 4vw, 3.25rem);
  inset-block: 0;
  width: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: start;
  color: var(--cream);
}
.photo-opener__meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem; }
.photo-opener .chapter-opener__num { margin: 0; font-size: 2.8rem; color: currentColor; opacity: .75; }
.photo-opener .chapter-opener__label { margin: 0; color: currentColor; }
.photo-opener .chapter-opener__title { margin: 0; max-width: 100%; color: currentColor; }
.photo-opener .chapter-opener__epigraph { max-width: 38em; margin-top: 2rem; }
.photo-opener--lower .photo-opener__copy { justify-content: flex-end; padding-bottom: 2.75rem; }
.photo-opener--lower .photo-opener__veil { background: linear-gradient(90deg, rgba(23,32,24,.85), rgba(23,32,24,.56) 44%, transparent 80%), linear-gradient(0deg, rgba(23,32,24,.72), transparent 70%); }
[dir="rtl"] .photo-opener--lower .photo-opener__veil { background: linear-gradient(270deg, rgba(23,32,24,.85), rgba(23,32,24,.56) 44%, transparent 80%), linear-gradient(0deg, rgba(23,32,24,.72), transparent 70%); }
.photo-opener--paper .photo-opener__copy { color: #172018; }
.photo-opener--paper .photo-opener__veil { background: linear-gradient(90deg, rgba(246,242,232,.96), rgba(246,242,232,.82) 43%, rgba(246,242,232,.02) 75%, transparent); }
[dir="rtl"] .photo-opener--paper .photo-opener__veil { background: linear-gradient(270deg, rgba(246,242,232,.96), rgba(246,242,232,.82) 43%, rgba(246,242,232,.02) 75%, transparent); }

/* About Option 1: keep the cutout and two-level name, with the full first name clear of the portrait. */
.about-portrait { padding-block: clamp(2.5rem, 7vh, 5rem) 3.5rem; text-align: start; }
.about-portrait__plate { --about-frame-inset: .55rem; position: relative; max-width: 72rem; margin: auto; }
.about-portrait .plate__frame { overflow: hidden; }
/* Cream paper by day, like the other light openers; the forest plate returns at night. */
.about-portrait__surface {
  position: relative; isolation: isolate; overflow: visible; height: 560px;
  --about-surface: var(--cream);
  background: var(--about-surface); color: var(--ink);
  --about-portrait-height: clamp(700px, 67vw, 850px);
  /* First and last name share one size, stacked clear of the portrait's shoulders. */
  --about-name-size: clamp(84px, 11.2vw, 160px);
  --about-name-top: calc(284px - .95 * var(--about-name-size));
}
[data-theme="dark"] .about-portrait__surface { --about-surface: var(--paper-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .about-portrait__surface { --about-surface: var(--paper-deep); }
}
.about-portrait__meta { position: absolute; inset-inline-start: 2.6rem; top: 1.8rem; display: flex; align-items: center; gap: 1rem; z-index: 4; }
.about-portrait__meta .chapter-opener__num { font-size: 2rem; margin: 0; color: var(--pencil); }
.about-portrait__meta .mark-label { color: var(--ink-soft); }
.about-portrait__first, .about-portrait__last { position: absolute; inset-inline-start: 2.6rem; white-space: nowrap; line-height: 1; font-family: var(--font-serif); font-size: var(--about-name-size); letter-spacing: .02em; }
.about-portrait__first { z-index: 1; top: var(--about-name-top); font-weight: 500; color: var(--ink); }
/* The 1122x1402 cutout is seated, forearms on a removed table: its alpha reaches
   x=1012 and y=1241 only at single points (the arm's curve, the clasped hands),
   so pinning those to the frame leaves wedges of background beside and beneath
   the body. Pin the body instead: column 1000 (the arm is solid from y=855 down)
   to the frame's inner end edge, and row 1160 (the last row solid from elbow to
   sleeve) to its inner bottom edge, through the frame padding. In Arabic,
   inset-inline-end is the left edge and scaleX(-1) mirrors the photo in place. */
.about-portrait .plate__frame img.about-portrait__image { position: absolute; z-index: 2; inset-inline-end: calc(var(--about-portrait-height) * -122 / 1402 - var(--about-frame-inset)); bottom: calc(var(--about-portrait-height) * -242 / 1402 - var(--about-frame-inset)); display: block; height: var(--about-portrait-height, 850px); width: auto; max-width: none; object-fit: contain; }
[dir="rtl"] .about-portrait .plate__frame img.about-portrait__image { transform: scaleX(-1); }
.about-portrait__last { z-index: 3; top: calc(var(--about-name-top) + .88 * var(--about-name-size) + var(--about-name-word-gap, 0px)); font-style: italic; font-weight: 430; color: var(--pencil); }
[dir="rtl"] .page-about .about-portrait__surface { --about-name-word-gap: .1em; }
/* The title sits outside the frame in the markup; on desktop it is placed back inside,
   22px above the surface (frame margin 5px + border 1px + padding). */
.about-portrait__title { position: absolute; z-index: 4; inset-inline-start: calc(2.6rem + var(--about-frame-inset) + 6px); bottom: calc(22px + var(--about-frame-inset) + 6px); max-width: 14em; margin: 0; font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.about-portrait .chapter-opener__epigraph { max-width: 38em; margin-top: 2rem; text-align: center; }
[dir="rtl"] .about-portrait__first, [dir="rtl"] .about-portrait__last { font-style: normal; letter-spacing: 0; }
@media (max-width: 760px) {
  /* The name rises above the shoulders; the portrait stays grounded at the plate edge. */
  .about-portrait__surface { --about-portrait-height: clamp(530px, 101vw - 117px, 650px); --about-name-size: 11vw; --about-name-top: 84px; }
  /* The title leaves the photo and sits just under the frame, aligned with its inner edge. */
  .about-portrait__title { position: static; inset: auto; max-width: none; margin: .75rem calc(var(--about-frame-inset) + 6px) 0; }
}

@media (max-width: 640px) {
  .photo-opener__surface { height: 30rem; min-height: 0; }
  .photo-opener .photo-opener__image { object-position: 76% 12%; }
  .page-notes .photo-opener__image { object-position: 92% 12%; }
  .photo-opener__copy, .photo-opener--lower .photo-opener__copy {
    inset-inline: 1.3rem;
    width: auto;
    justify-content: flex-end;
    padding-bottom: 1.75rem;
  }
  .photo-opener__meta { margin-bottom: .9rem; gap: .8rem; }
  .photo-opener .chapter-opener__num { font-size: 2.1rem; }
  html[lang="en"] .photo-opener .chapter-opener__title { line-height: 1.14; }
  .photo-opener__veil, [dir="rtl"] .photo-opener__veil,
  .photo-opener--lower .photo-opener__veil, [dir="rtl"] .photo-opener--lower .photo-opener__veil {
    background: linear-gradient(0deg, rgba(23,32,24,.96), rgba(23,32,24,.84) 28%, rgba(23,32,24,.04) 62%, transparent);
  }
  .photo-opener--paper .photo-opener__veil, [dir="rtl"] .photo-opener--paper .photo-opener__veil {
    background: linear-gradient(0deg, rgba(246,242,232,.99), rgba(246,242,232,.90) 28%, rgba(246,242,232,.04) 62%, transparent);
  }
  .about-portrait__surface { height: 560px; --about-portrait-height: clamp(470px, 132vw, 530px); --about-name-size: min(16.5vw, 70px); --about-name-top: 58px; }
  .about-portrait__meta { inset-inline-start: 1.2rem; top: 1.2rem; }
  .about-portrait__first, .about-portrait__last { inset-inline-start: 1.2rem; }
  .about-portrait__title { font-size: 1.4rem; }
}

/* ---------- Sections and prose ---------- */

/* Approved photo pairings follow the saved reading mode. */
.photo-opener__surface > picture { display: block; width: 100%; height: 100%; }
html:not([data-theme="dark"]) .photo-opener--dark-only,
[data-theme="dark"] .chapter-opener--light-only { display: none; }
[data-theme="light"] .photo-opener--paired .photo-opener__copy { color: #172018; }
[data-theme="light"] .photo-opener--paired .photo-opener__veil {
  background: linear-gradient(90deg, rgba(246,242,232,.96), rgba(246,242,232,.82) 43%, rgba(246,242,232,.02) 75%, transparent);
}
[data-theme="light"][dir="rtl"] .photo-opener--paired .photo-opener__veil {
  background: linear-gradient(270deg, rgba(246,242,232,.96), rgba(246,242,232,.82) 43%, rgba(246,242,232,.02) 75%, transparent);
}
/* Services light needs no image-wide haze: the ivory wall carries dark text. */
.photo-opener--services-light .photo-opener__image {
  position: absolute; inset-inline-end: 0; top: 0;
  width: auto; height: 100%; max-width: none;
  object-fit: contain; object-position: 100% 50%;
  /* Blend only the empty background edge into the existing text-safe field. */
  mask-image: linear-gradient(90deg, transparent, #000 25%);
}
[data-theme="light"] .photo-opener--services-light .photo-opener__surface { background: var(--cream); }
[data-theme="light"] .photo-opener--services-light .photo-opener__veil { display: none; }
@media (max-width: 640px) {
  .photo-opener--services-light .photo-opener__image {
    height: 72%;
  }
  [data-theme="light"] .photo-opener--services-light .photo-opener__copy {
    inset-block: auto 0; inset-inline: 0; width: auto;
    padding: 1.15rem 1.3rem 1.35rem;
    background: #F6F2E8; color: #172018;
  }
}
/* Keep the refined portraits clear; confine contrast to the copy area. */
.photo-opener--crisp .photo-opener__veil { background: linear-gradient(90deg, rgba(23,32,24,.90), rgba(23,32,24,.72) 40%, transparent 58%); }
[dir="rtl"] .photo-opener--crisp .photo-opener__veil { background: linear-gradient(270deg, rgba(23,32,24,.90), rgba(23,32,24,.72) 40%, transparent 58%); }
[data-theme="light"] .photo-opener--crisp .photo-opener__veil { background: linear-gradient(90deg, rgba(246,242,232,.96), rgba(246,242,232,.80) 40%, transparent 58%); }
[data-theme="light"][dir="rtl"] .photo-opener--crisp .photo-opener__veil { background: linear-gradient(270deg, rgba(246,242,232,.96), rgba(246,242,232,.80) 40%, transparent 58%); }
@media (max-width: 640px) {
  [data-theme="light"] .photo-opener--paired .photo-opener__veil,
  [data-theme="light"][dir="rtl"] .photo-opener--paired .photo-opener__veil { background: linear-gradient(0deg, rgba(246,242,232,.99), rgba(246,242,232,.90) 28%, rgba(246,242,232,.04) 62%, transparent); }
  .photo-opener--crisp .photo-opener__veil,
  [dir="rtl"] .photo-opener--crisp .photo-opener__veil { background: linear-gradient(0deg, rgba(23,32,24,.98), rgba(23,32,24,.85) 22%, transparent 48%); }
  [data-theme="light"] .photo-opener--crisp .photo-opener__veil,
  [data-theme="light"][dir="rtl"] .photo-opener--crisp .photo-opener__veil { background: linear-gradient(0deg, rgba(246,242,232,.99), rgba(246,242,232,.90) 22%, transparent 48%); }
}

.section {
  padding: clamp(4rem, 9vh, 7rem) var(--gutter);
}

.section--shade { background: var(--paper-deep); }

.section--rule-top { border-top: 1px solid var(--rule); }

.prose {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.prose--wide { max-width: 76rem; }

.section__eyebrow { display: block; margin-bottom: 1.1rem; }

.section__title {
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  margin-bottom: 0.8em;
}

.lede {
  font-size: 1.16em;
  line-height: 1.62;
}

/* Drop cap for chapter-opening paragraphs */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 0.08em 0.14em 0 0;
  color: var(--pencil);
}

/* Annotated paragraphs with margin notes */
.anno { position: relative; }

.anno-note {
  font-family: var(--font-mark);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--pencil);
  transform: rotate(-1.2deg);
}
.anno-note::before { content: "^ "; font-weight: 700; }
.anno-note .sig { font-style: italic; opacity: 0.7; }

@media (min-width: 1280px) {
  .anno .anno-note {
    position: absolute;
    inset-inline-start: calc(100% + 2.8rem);
    top: 0.2em;
    width: 13.5rem;
  }
}

@media (max-width: 1279px) {
  .anno .anno-note {
    display: block;
    margin: -0.5em 0 1.5em;
    padding: 0.7em 1em;
    background: var(--pencil-ghost);
    border-inline-start: 2px solid var(--pencil);
    transform: none;
  }
}

/* ---------- Plates (image placeholders, book style) ---------- */

.plate {
  margin: 0;
}

.plate__frame {
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  background: var(--paper-deep);
  padding: 0.55rem;
  margin: 5px;
}

.plate__ph {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--pencil) 45%, var(--rule));
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, var(--pencil-ghost) 12px 13px),
    var(--paper);
  font-family: var(--font-mark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.7;
}
.plate__ph .ph-mark { display: block; font-size: 1.5rem; color: var(--pencil); margin-bottom: 0.5rem; font-weight: 400; }

.plate--portrait :is(.plate__ph, .plate__img) { aspect-ratio: 4 / 5; }
.plate--landscape :is(.plate__ph, .plate__img) { aspect-ratio: 3 / 2; }

/* When a real image replaces the placeholder */
.plate__frame img { width: 100%; height: auto; }
.plate__img { object-fit: cover; }
[dir="rtl"] .plate__img { transform: scaleX(-1); }

/* A plate set into the reading column, like a tipped-in book plate */
.plate--right {
  float: inline-end;
  width: min(15.5rem, 44%);
  margin-block: 0.35rem 1.4rem;
  margin-inline: 2.2rem 0;
}

.plate--wide {
  max-width: var(--measure);
  margin: 2.6rem auto;
}

@media (max-width: 640px) {
  .plate--right {
    float: none;
    width: 100%;
    margin: 0 0 1.8rem;
  }
}

/* ---------- The live edit (signature) ---------- */

.edit-scene {
  max-width: 46rem;
  margin: 0 auto;
  text-align: start;
}

.edit-line {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 4.4vw, 2.7rem);
  font-weight: 430;
  line-height: 1.28;
  margin-bottom: 0.55em;
  color: var(--ink-soft);
}

.strike {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--pencil), var(--pencil));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 0.09em;
  transition: background-size 1.1s var(--ease-page) 0.1s, color 0.6s ease 0.7s;
}
/* The pencil starts where the sentence starts. */
[dir="rtl"] .strike { background-position: 100% 58%; }
.edit-scene.played .strike {
  background-size: 100% 0.1em;
  color: color-mix(in srgb, var(--ink) 52%, var(--paper));
}
[data-theme="dark"] .edit-scene.played .strike {
  color: color-mix(in srgb, var(--ink) 62%, var(--paper));
}

.edit-fix {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5.2vw, 3.2rem);
  font-weight: 540;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.9s, transform 0.7s var(--ease-page) 0.9s;
}
.edit-scene.played .edit-fix { opacity: 1; transform: none; }
.edit-fix .u-pencil {
  text-decoration: underline;
  text-decoration-color: var(--pencil);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

.edit-note {
  display: inline-block;
  font-family: var(--font-mark);
  font-size: 0.85rem;
  color: var(--pencil);
  transform: rotate(-1.5deg) translateY(8px);
  opacity: 0;
  transition: opacity 0.5s ease 1.6s, transform 0.5s var(--ease-page) 1.6s;
}
.edit-scene.played .edit-note { opacity: 1; transform: rotate(-1.5deg); }
.edit-note::before { content: "^ "; font-weight: 700; }

/* No animation fallback */
@media (prefers-reduced-motion: reduce) {
  .strike { background-size: 100% 0.1em; color: color-mix(in srgb, var(--ink) 52%, var(--paper)); }
  [data-theme="dark"] .strike { color: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
  .edit-fix, .edit-note { opacity: 1; transform: none; transition: none; }
}

/* ---------- Contents section on home (TOC as content) ---------- */

.home-toc { list-style: none; margin: 0; padding: 0; }
.home-toc li { border-bottom: 1px solid var(--rule); }
.home-toc li:first-child { border-top: 1px solid var(--rule); }

.home-toc .toc-entry { border-bottom: none; padding: 1.4rem 0.25rem; flex-wrap: wrap; }
.home-toc .toc-entry__title { font-size: clamp(1.45rem, 3.6vw, 2.1rem); }

/* ---------- Practice grid ---------- */

.practices {
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 76rem;
  margin: 0 auto;
}

.practice {
  background: var(--paper);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: background 0.25s ease;
}
.practice:hover { background: var(--pencil-ghost); }

.practice__part {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mark);
}

.practice h3 {
  font-size: 1.45rem;
  margin: 0;
}

.practice p { margin: 0; color: var(--ink-soft); font-size: 0.98em; }

.practice__link { margin-top: auto; align-self: start; }

/* Business Architecting spans the first row and Product Building the last:
   six crafts sit between, and Product Building leads into the company band. */
.practice--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  grid-template-areas:
    "part part"
    "title text"
    "title link";
  gap: 0.4rem 3rem;
  align-items: start;
}
.practice--wide .practice__part { grid-area: part; margin-bottom: 0.5rem; }
.practice--wide h3 { grid-area: title; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }
.practice--wide p { grid-area: text; max-width: 52em; }
.practice--wide .practice__link { grid-area: link; margin-top: 0; }

@media (max-width: 860px) {
  .practice--wide {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .practice--wide h3 { font-size: 1.45rem; }
}

/* ---------- Services page introduction ---------- */

.services-intro { margin-bottom: clamp(2.5rem, 6vh, 4rem); }

/* ---------- Reader list (who I help) ---------- */

.readers { list-style: none; margin: 0; padding: 0; max-width: 76rem; margin-inline: auto; }

.reader {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) 1fr;
  gap: 1rem 3rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.reader:first-child { border-top: 1px solid var(--rule); }

.reader h3 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  margin: 0;
}

.reader p { margin: 0; color: var(--ink-soft); max-width: 46em; }

@media (max-width: 640px) {
  .reader { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ---------- Pull quote ---------- */

.pullquote {
  text-align: center;
  padding: clamp(4.5rem, 12vh, 8rem) var(--gutter);
}

.pullquote blockquote {
  margin: 0 auto;
  max-width: 22em;
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4.8vw, 3rem);
  font-weight: 430;
  font-style: italic;
  line-height: 1.3;
}
.pullquote .accent { color: var(--pencil); font-style: italic; }

.pullquote .mark-label { display: block; margin-top: 2rem; color: var(--ink-soft); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 1em 1.9em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-page);
}
.btn:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

.btn--pencil { border-color: var(--pencil); color: var(--pencil); }
.btn--pencil:hover { background: var(--pencil); color: var(--paper); }

.btn--paper { border-color: var(--cream); color: var(--cream); }
.btn--paper:hover { background: var(--cream); color: var(--cloth); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.btn--solid {
  background: var(--pencil);
  border-color: var(--pencil);
  color: var(--paper);
}
.btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
[data-theme="dark"] .btn--solid { background: var(--pencil); border-color: var(--pencil); color: var(--paper); }
[data-theme="dark"] .btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--lg { font-size: 0.95rem; padding: 1.15em 2.3em; }

.service-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.6rem;
}
.booking { border-bottom: 1px solid var(--rule); }
.booking__title {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin: 0.4em 0 0.5em;
}
.booking__text {
  max-width: 42em;
  margin: 0 auto 1.8rem;
  color: var(--ink-soft);
}
.booking .btn-row { margin-bottom: 1.4rem; }

/* ---------- Chapter-end CTA band ---------- */

.next-chapter {
  background: linear-gradient(160deg, var(--cloth), var(--cloth-deep) 75%);
  color: var(--cream);
  text-align: center;
  padding: clamp(4.5rem, 11vh, 7.5rem) var(--gutter);
}

.next-chapter .mark-label { color: color-mix(in srgb, var(--cream) 66%, transparent); display: block; margin-bottom: 1.2rem; }

.next-chapter h2 {
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  max-width: 18em;
  margin: 0 auto 0.7em;
}

.next-chapter p {
  color: color-mix(in srgb, var(--cream) 75%, transparent);
  max-width: 36em;
  margin: 0 auto 2.2rem;
}

.next-chapter .btn-row { justify-content: center; }

/* Closing CTAs sit on cream paper in light mode and keep the forest band in dark mode. */
[data-theme="light"] .next-chapter {
  --paper: var(--cream);
  --ink: var(--cloth-deep);
  --ink-soft: var(--cloth);
  background: var(--paper);
  color: var(--ink);
}
[data-theme="light"] .next-chapter .mark-label,
[data-theme="light"] .next-chapter p { color: var(--ink-soft); }
[data-theme="light"] .next-chapter .btn {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
[data-theme="light"] .next-chapter .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
[data-theme="light"] .next-chapter :focus-visible { outline-color: var(--ink); }

/* Follow the system light preference when JavaScript has not selected a theme. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .next-chapter {
    --paper: var(--cream);
    --ink: var(--cloth-deep);
    --ink-soft: var(--cloth);
    background: var(--paper);
    color: var(--ink);
  }
  :root:not([data-theme]) .next-chapter .mark-label,
  :root:not([data-theme]) .next-chapter p { color: var(--ink-soft); }
  :root:not([data-theme]) .next-chapter .btn {
    background: transparent;
    border-color: var(--ink);
    color: var(--ink);
  }
  :root:not([data-theme]) .next-chapter .btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
  :root:not([data-theme]) .next-chapter :focus-visible { outline-color: var(--ink); }
}

/* ---------- Principles (about) ---------- */

.principles { list-style: none; margin: 0; padding: 0; counter-reset: rule; }

.principle {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 1.4rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.principle:first-child { border-top: 1px solid var(--rule); }

.principle::before {
  content: counter(rule, decimal-leading-zero);
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mark);
  padding-top: 0.45em;
}

.principle h3 { font-size: 1.35rem; margin-bottom: 0.35em; }
.principle p { margin: 0; color: var(--ink-soft); }

/* ---------- Service parts (services page) ---------- */

.service-part {
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 7vh, 5rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 2rem 4.5rem;
  max-width: 76rem;
  margin: 0 auto;
}
.service-part:last-of-type { border-bottom: 1px solid var(--rule); }

.service-part__head .practice__part { display: block; margin-bottom: 0.9rem; }

.service-part__head h2 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  margin-bottom: 0.5em;
}

.service-part__head .forwho {
  font-family: var(--font-serif-text);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.98em;
}

.service-part__descriptor {
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.9rem;
  max-width: 34em;
}

/* Alias anchor (old #consulting links): out of grid flow, top of the article */
.service-part { position: relative; }
.anchor-alias {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.service-part__body > p:first-child { margin-top: 0.2em; }

.deliverables {
  list-style: none;
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.55rem 2rem;
}
.deliverables li {
  font-size: 0.97em;
  padding-inline-start: 1.4em;
  position: relative;
  color: var(--ink);
}
.deliverables li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--pencil);
  font-family: var(--font-mark);
  font-weight: 700;
}

.outcome {
  border-inline-start: 2px solid var(--mark);
  padding-block: 0.35em;
  padding-inline: 1.1em 0;
  font-family: var(--font-serif-text);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}
.outcome strong { color: var(--ink); font-style: normal; font-weight: 600; }

@media (max-width: 860px) {
  .service-part { grid-template-columns: 1fr; gap: 1.2rem; }
}

/* ---------- Method steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; position: relative; }

.step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0 2.2rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.step:first-child { border-top: 1px solid var(--rule); }

.step__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 2.9rem;
  line-height: 1;
  color: var(--pencil);
}

.step h3 { font-size: 1.6rem; margin-bottom: 0.35em; }
.step h3 .verb { color: var(--pencil); font-family: var(--font-serif); font-style: italic; font-weight: 420; }

.step p { color: var(--ink-soft); margin-bottom: 0.8em; }
.step p:last-child { margin-bottom: 0; }

.step__meta {
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mark);
}

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 0.6rem; }
  .step__num { font-size: 2.2rem; }
}

/* ---------- Field notes ---------- */

.note-entry {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(2.8rem, 6vh, 4.2rem) 0;
  border-bottom: 1px solid var(--rule);
}
.note-entry:last-of-type { border-bottom: none; }

.note-entry__no {
  font-family: var(--font-mark);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mark);
  display: block;
  margin-bottom: 0.9rem;
}

.note-entry h2 { font-size: clamp(1.55rem, 3.8vw, 2.2rem); }

.note-entry .kicker {
  font-family: var(--font-serif-text);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- Field notes index (the journal) ---------- */

.note-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 72rem; }

.note-card {
  display: grid;
  grid-template-columns: minmax(10rem, 13rem) 1fr;
  gap: 0.6rem 3.5rem;
  padding: clamp(1.9rem, 4vh, 2.6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.note-card:first-child { border-top: 1px solid var(--rule); }

.note-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-family: var(--font-label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.note-card__cat { color: var(--pencil); }
.note-card__time { color: var(--ink-soft); font-weight: 400; letter-spacing: 0.12em; }

.note-card h2 { font-size: clamp(1.35rem, 3.2vw, 1.85rem); margin-bottom: 0.35em; }
.note-card h2 a { text-decoration: none; }
.note-card h2 a:hover { color: var(--pencil); }
.note-card h2 a:hover::after { content: " →"; font-family: var(--font-mark); font-size: 0.75em; }

.note-card__excerpt { color: var(--ink-soft); margin: 0 0 0.9em; max-width: 52em; }

.note-card__soon {
  font-family: var(--font-label);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.note-card__soon::before { content: "✎ "; color: var(--mark); }

@media (max-width: 760px) {
  .note-card { grid-template-columns: 1fr; gap: 0.7rem; }
  .note-card__meta { flex-direction: row; flex-wrap: wrap; gap: 0.4em 1.4em; }
}

/* ---------- A single field note (post page) ---------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 1.6em;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.4rem;
}
.post-meta .cat { color: var(--pencil); }

.post-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  line-height: 1.3;
  margin: 2.4rem 0 0.8rem;
}

.post-end {
  max-width: var(--measure);
  margin: 0 auto;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mark);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.post-end a:not(.editorial-cta) { text-decoration: none; color: var(--pencil); font-weight: 700; text-transform: uppercase; }
.post-end a:not(.editorial-cta):hover { text-decoration: underline; }

/* Blog reading keeps the site's type and pencil treatment. The grid follows
   document direction: contents at the reading start, related reads at the end. */
.blog-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }
.blog-hero .chapter-opener__title { font-size: clamp(2.1rem, 4vw, 3.25rem); max-width: 30ch; margin-inline: auto; }
.blog-reading { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 44rem) minmax(8rem, 11rem); justify-content: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start; padding: 1rem var(--gutter) 2rem; }
.blog-prose { min-width: 0; font-size: var(--reading-body-size); line-height: var(--reading-body-line-height); }
.blog-prose > p { margin-bottom: 1.35em; }
.blog-prose .post-h2 { font-size: clamp(1.65rem, 2.3vw, 2.1rem); margin-block: 2.8rem 1rem; scroll-margin-top: 6.5rem; }
.blog-prose .post-h2:focus { outline: none; }
.blog-prose .post-h2:focus-visible { outline: 2px solid var(--pencil); outline-offset: 6px; }
.blog-prose .post-h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.35; margin-block: 1.8rem .75rem; }
.post-list { margin-block: 1rem 1.75rem; padding-inline-start: 1.4rem; }
.post-list li { padding-inline-start: .2rem; margin-block: .65rem; }
.blog-reading .blog-toc { margin-inline-start: 0; padding: 0; border: 0; background: transparent; }
.blog-reading .blog-toc, .blog-related { position: sticky; top: 6rem; max-height: none; overflow: visible; }
.blog-reading .blog-toc ul, .blog-related ul { list-style: none; margin: .75rem 0 0; padding: 0; }
.blog-reading .blog-toc a { min-height: 0; padding: .5rem .65rem; }
.blog-related { padding-inline-start: 1rem; border-inline-start: 1px solid var(--rule); }
.blog-related h2 { font-family: var(--font-label); font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--pencil); margin: 0; padding-block: .5rem; }
.blog-related li + li { border-top: 1px solid var(--rule); }
.blog-related a { display: block; padding-block: .85rem; font-family: var(--font-ui); font-size: .9375rem; line-height: 1.55; text-decoration: none; }
.blog-related a strong { display: block; }
.blog-related a span { display: block; color: var(--ink-soft); font-size: .875rem; line-height: 1.6; margin-top: .35rem; }
.blog-related a:focus-visible { outline: 2px solid var(--pencil); outline-offset: 2px; }
[dir="rtl"] .blog-prose .post-h2, [dir="rtl"] .blog-prose .post-h3 { letter-spacing: 0; line-height: 1.5; }
@media (min-width: 1101px) {
  .blog-reading .blog-toc summary { list-style: none; pointer-events: none; }
  .blog-reading .blog-toc summary::-webkit-details-marker { display: none; }
  .blog-reading .blog-toc summary [data-current-section] { display: none; }
}
@media (min-width: 1101px) and (max-height: 850px) {
  .blog-reading .blog-toc { position: static; }
}
@media (max-width: 1100px) {
  .blog-reading { grid-template-columns: minmax(0, 44rem); gap: 1.5rem; }
  .blog-reading .blog-toc, .blog-related { position: static; }
  .blog-reading .blog-toc { border-block: 1px solid var(--rule); padding: .25rem .75rem; }
  .blog-reading .blog-toc summary { min-height: 44px; cursor: pointer; }
  .blog-reading .blog-toc summary [data-current-section] { display: inline; margin-inline-start: .8rem; color: var(--ink-soft); font-size: .85em; font-weight: 400; }
  .blog-reading .blog-toc ul { margin-bottom: .5rem; }
  .blog-reading .blog-toc a { min-height: 44px; }
  .blog-related { border-inline-start: 0; border-top: 1px solid var(--rule); padding: 1.25rem 0 0; }
}

/* ---------- Ways to work (contact) ---------- */

.ways {
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 76rem;
  margin: 0 auto;
}

.way {
  background: var(--paper);
  padding: clamp(1.7rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.way .practice__part { color: var(--pencil); }
.way h3 { font-size: 1.5rem; margin: 0; }
.way .way__fit { font-family: var(--font-serif-text); font-style: italic; color: var(--ink-soft); font-size: 0.95em; margin: 0; }
.way p { margin: 0; color: var(--ink-soft); font-size: 0.98em; }

/* ---------- FAQ ---------- */

.faq { max-width: var(--measure); margin: 0 auto; }

.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0;
}
.faq details:first-of-type { border-top: 1px solid var(--rule); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.05rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 480;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mark);
  color: var(--pencil);
  font-size: 1.25rem;
  transition: transform 0.25s var(--ease-page);
  flex-shrink: 0;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-soft); padding: 0 0.2rem 1.2rem; margin: 0; max-width: 56em; }

/* ---------- Email plate ---------- */

.email-plate {
  text-align: center;
  padding: clamp(3.5rem, 8vh, 5.5rem) var(--gutter);
}

.email-plate .mark-label { display: block; margin-bottom: 1.4rem; }

.email-link {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.6vw, 2.7rem);
  font-weight: 480;
  text-decoration: none;
  background-image: linear-gradient(var(--pencil), var(--pencil));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  transition: color 0.2s ease, background-size 0.3s var(--ease-page);
  word-break: break-word;
}
.email-link:hover { color: var(--pencil); background-size: 100% 0.14em; }

.email-plate .aside {
  margin-top: 1.3rem;
  color: var(--ink-soft);
  font-family: var(--font-serif-text);
  font-style: italic;
  font-size: 0.98em;
}

.contact-invitation { scroll-margin-top: 5rem; }
.contact-invitation__grid {
  max-width: 68rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  text-align: start;
}
.contact-invitation .booking__text { margin-inline: 0; }
.contact-invitation .btn-row { justify-content: flex-start; }
.contact-invitation .aside { max-width: 42em; }
.contact-invitation__portrait { width: 20rem; }
.contact-invitation__portrait .plate__img { display: block; }
@media (max-width: 900px) {
  .contact-invitation__grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .contact-invitation .booking__text { margin-inline: auto; }
  .contact-invitation .btn-row { justify-content: center; }
  .contact-invitation__portrait { justify-self: center; width: min(18rem, 100%); }
}

/* ---------- Colophon (footer) ---------- */

.colophon {
  background: var(--paper-deep);
  border-top: 1px solid var(--rule);
  padding: clamp(3rem, 7vh, 4.5rem) var(--gutter) 2rem;
  font-size: 0.95rem;
}

.colophon__grid {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
}

.colophon h2 {
  font-size: 1.35rem;
  margin-bottom: 0.4em;
}

.colophon__author { display: flow-root; }
.colophon__portrait { float: inline-end; width: 10rem; margin: 2.3rem 0 1rem 1.6rem; }
[dir="rtl"] .colophon__portrait { margin: 2.3rem 1.6rem 1rem 0; }
.colophon__portrait .plate__frame { padding: .5rem; margin: 4px; outline-offset: 3px; }
.colophon__portrait .plate__img { display: block; }
.colophon__author > .btn { clear: both; }
@media (max-width: 640px) {
  .colophon__portrait, [dir="rtl"] .colophon__portrait { width: 8rem; margin-top: 1.4rem; margin-inline-start: 1.1rem; }
}

.colophon .mark-label { display: block; margin-bottom: 1rem; }

.colophon p { color: var(--ink-soft); max-width: 32em; margin-bottom: 1.4em; }

.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: 0.55em; }
.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-decoration-color: var(--pencil); }

.colophon__foot {
  max-width: 76rem;
  margin: 3rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--font-mark);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .colophon__grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main, .cover__frame > *, .cover__open { animation: none; opacity: 1; transform: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .toc-list li { transition: none; }
  .cover__open .arrow { animation: none; }
  .turner { display: none; }
  html.exiting main { opacity: 1; }
  .ribbon { transition: none; }
}

/* ---------- Small screens ---------- */

@media (max-width: 720px) {
  .runhead__chapter { display: none; }
  .runhead { padding: 0.6rem 1rem; gap: 0.6rem; }
  .runhead__right { gap: 0.7rem; }
  .ribbon { right: 0.4rem; width: 6px; }
  .toc-entry { flex-wrap: wrap; }
  .toc-entry .leader { display: none; }
  .toc-entry__page { margin-left: auto; }
}

@media (max-width: 480px) {
  .runhead__folio { display: none; }
  .runhead__brand { gap: 0.4rem; }
  .brand-symbol { width: 1.25rem; height: 1.25rem; }
  .brand-name { font-size: 1rem; }
  .toc-toggle { padding: 0.45em 0.7em; font-size: 0.72rem; }
  .runhead__right { gap: 0.4rem; }
  .runhead .lang-toggle { padding-inline: 0.5em; min-width: 0; }
  .runhead .toc-toggle { letter-spacing: 0.06em; }
}

@media (max-width: 360px) {
  .runhead { padding-inline: 0.65rem; gap: 0.4rem; }
  .runhead .lang-toggle { font-size: 0.7rem; padding-inline: 0.35em; }
  .runhead .theme-toggle { width: 1.85rem; }
  .runhead .toc-toggle { padding-inline: 0.4em; }
}

/* ============================================================
   Homepage hero: its own light and dark system, independent of
   the cover cloth. Copy on the inline start; on the inline end an
   open organic composition whose central shape will hold the
   portrait later (.hero__portrait).
   ============================================================ */

.home-hero {
  --hero-moss-pale: color-mix(in srgb, var(--pencil) 17%, var(--paper-deep));
  --hero-moss-deep: color-mix(in srgb, var(--pencil) 34%, var(--paper-deep));
  --hero-olive: color-mix(in srgb, var(--pencil) 60%, var(--mark));
  --hero-shadow: rgba(23, 32, 24, 0.42);
  --hero-glow-x: 74%;
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(100svh, 60rem);
  padding: 7rem var(--gutter) 6rem;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
[dir="rtl"] .home-hero { --hero-glow-x: 26%; }

.hero {
  width: min(76rem, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero__text { text-align: start; --enter-x: -46px; }
[dir="rtl"] .hero__text { --enter-x: 46px; }

.hero__text > * {
  opacity: 0;
  transform: translateX(var(--enter-x));
  animation: hero-in 0.9s var(--ease-page) forwards;
}
.hero__text > *:nth-child(1) { animation-delay: 0.12s; }
.hero__text > *:nth-child(2) { animation-delay: 0.26s; }
.hero__text > *:nth-child(3) { animation-delay: 0.42s; }
.hero__text > *:nth-child(4) { animation-delay: 0.58s; }
.hero__text > *:nth-child(5) { animation-delay: 0.74s; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

.hero__eyebrow { display: block; margin-bottom: 1.9rem; }

/* The name borrows the pull quote's quiet italic serif, at the identity-line scale. */
.hero__name {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 430;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.hero__name em { font-style: inherit; font-weight: inherit; color: var(--pencil); }

/* The statement: the dominant display line */
.hero__statement {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3.85rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 15em;
  margin: 0 0 2.5rem;
  text-wrap: balance;
}
[dir="rtl"] .hero__statement { font-size: clamp(1.95rem, 3.4vw, 3.05rem); line-height: 1.55; letter-spacing: 0; }

.hero__cta { gap: 1.6rem; margin-bottom: 2.8rem; }

/* Home supplies the shared editorial typography. Corner Frame is the
   approved secondary action shape; filled primary buttons never use it. */
.editorial-cta {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  line-height: var(--reading-body-line-height);
}
/* Shared Corner Frame: the approved hover tint is now the resting treatment.
   An isolated wash stays beneath the label; the frame never changes size. */
.editorial-cta.editorial-cta--corner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75em;
  width: fit-content;
  max-width: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: .65rem .9rem;
  border: 0;
  color: var(--pencil);
  /* Match the preview's tint over paper without stacking linked-card tints. */
  background-color: var(--paper);
  background-image: linear-gradient(var(--pencil-ghost), var(--pencil-ghost));
  isolation: isolate;
}
.editorial-cta--corner::before, .editorial-cta--corner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The second ghost layer matches the comparison's 240ms entry / 140ms exit. */
.editorial-cta--corner::before {
  z-index: -1;
  background: var(--pencil-ghost);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .14s ease-out;
}
/* Four pencil strokes preserve the two opposite 12px, 1px corners exactly. */
.editorial-cta--corner::after {
  background-image:
    linear-gradient(var(--pencil), var(--pencil)),
    linear-gradient(var(--pencil), var(--pencil)),
    linear-gradient(var(--pencil), var(--pencil)),
    linear-gradient(var(--pencil), var(--pencil));
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position: left top, left top, right bottom, right bottom;
  background-repeat: no-repeat;
}
[dir="rtl"] .editorial-cta--corner::before { transform-origin: right; }
[dir="rtl"] .editorial-cta--corner::after {
  background-position: right top, right top, left bottom, left bottom;
}
.editorial-cta--corner:is(:hover, :focus-visible, :active)::before,
a:is(:hover, :focus-visible, :active) .editorial-cta--corner::before,
.note-card--live:is(:hover, :focus-within, :active) .editorial-cta--corner::before {
  transform: scaleX(1);
  transition-duration: .24s;
}
.editorial-cta--corner:focus-visible,
a:focus-visible .editorial-cta--corner,
.note-card--live:focus-within .editorial-cta--corner {
  outline: 2px dashed var(--pencil);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .editorial-cta--corner, .editorial-cta--corner::before { transition: none !important; }
}
@media (forced-colors: active) {
  .editorial-cta--corner::before { display: none; }
  .editorial-cta--corner::after { forced-color-adjust: none; --pencil: LinkText; }
  .editorial-cta--corner:focus-visible,
  a:focus-visible .editorial-cta--corner,
  .note-card--live:focus-within .editorial-cta--corner { outline-color: Highlight; }
}
.editorial-cta:hover, a:hover .editorial-cta { color: var(--pencil); }
.editorial-cta .arr { flex: 0 0 auto; }
[dir="rtl"] .editorial-cta { letter-spacing: 0; text-transform: none; }

.hero__edition {
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}

/* "Start reading" cue, restyled for the light hero (behavior unchanged) */
.home-hero .cover__open {
  left: 0;
  right: 0;
  bottom: 1.5rem;
  width: max-content;
  margin-inline: auto;
  transform: none;
  color: var(--ink-soft);
}
.home-hero .cover__open:hover { color: var(--pencil); }

/* --- The hero composition (hero media) --- */

.hero__media {
  --lean: 1;
  position: relative;
  justify-self: end;
  width: min(30rem, 100%);
  aspect-ratio: 1 / 1.08;
  isolation: isolate;
  opacity: 0;
  animation: page-arrive 1.1s var(--ease-page) 0.35s forwards;
}
[dir="rtl"] .hero__media { --lean: -1; }

.hero-shape { position: absolute; display: block; }

/* a warm field behind everything */
.hero-shape--halo {
  z-index: -2;
  top: -3%;
  inset-inline-end: -14%;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper-deep);
}

/* one fine orbit around the central shape */
.hero-shape--ring {
  z-index: -1;
  top: -2%;
  inset-inline-start: -1%;
  width: 100%;
  aspect-ratio: 1 / 1.06;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--pencil) 30%, transparent);
  rotate: calc(var(--lean) * -14deg);
}

/* The central organic shape. This is where the portrait will sit. */
.hero__portrait {
  position: absolute;
  z-index: 1;
  top: 4%;
  inset-inline-start: 11%;
  width: 74%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 66% 34% 52% 48% / 52% 58% 42% 48%;
  background:
    radial-gradient(70% 50% at 62% 26%, color-mix(in srgb, var(--paper) 65%, transparent), transparent 72%),
    linear-gradient(168deg, var(--hero-moss-pale) 10%, var(--hero-moss-deep) 100%);
  box-shadow: 0 44px 70px -42px var(--hero-shadow);
}
[dir="rtl"] .hero__portrait {
  inset-inline-start: 15%;
  border-radius: 34% 66% 48% 52% / 58% 52% 48% 42%;
}
.hero__portrait::before {
  /* restrained editorial hatching (hidden under the portrait later) */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-32deg, transparent 0 11px,
    color-mix(in srgb, var(--pencil) 10%, transparent) 11px 12px);
}
.hero__portrait::after {
  /* an inner contour line; it passes behind the portrait cutout */
  content: "";
  position: absolute;
  inset: 5%;
  z-index: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
  pointer-events: none;
}

/* Future portraits: one image per reading mode, filling the central shape. */
.hero__portrait-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--portrait-position, 50% 50%);
}
/* Arabic: the portrait faces the copy, which sits on the right. Only the image flips. */
[dir="rtl"] .hero__portrait-img { transform: scaleX(-1); }
.hero__portrait-img--dark { display: none; }
[data-theme="dark"] .hero__portrait-img--light { display: none; }
[data-theme="dark"] .hero__portrait-img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .hero__portrait-img--light { display: none; }
  :root:not([data-theme]) .hero__portrait-img--dark { display: block; }
}

/* The system layer: an orbit, a faded dot grid, alignment guides and crop
   marks behind the portrait; a growth path with nodes in front of it. */
.hero-system {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
[dir="rtl"] .hero-system { transform: scaleX(-1); }
.hero-system--back { z-index: -1; opacity: 0; animation: fade-in 0.9s ease 0.7s forwards; }
.hero-system--front { z-index: 3; opacity: 0; animation: art-grow 1.1s var(--ease-page) 0.85s forwards; }

.hs-grid-dot { fill: color-mix(in srgb, var(--pencil) 32%, transparent); }
.hs-orbit { fill: none; stroke: color-mix(in srgb, var(--pencil) 34%, transparent); stroke-width: 0.22; stroke-dasharray: 0.5 1.4; }
.hs-guide { fill: none; stroke: color-mix(in srgb, var(--pencil) 30%, transparent); stroke-width: 0.2; }
.hs-ticks { stroke: color-mix(in srgb, var(--pencil) 50%, transparent); }
.hs-frame { fill: none; stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 0.26; }

.hs-path { fill: none; stroke: color-mix(in srgb, var(--pencil) 78%, transparent); stroke-width: 0.34; stroke-linecap: round; }
.hs-path--draft { stroke-dasharray: 0.9 1.5; stroke: color-mix(in srgb, var(--pencil) 60%, transparent); }
.hs-node { fill: var(--paper); stroke: var(--pencil); stroke-width: 0.34; }
.hs-node--solid { fill: var(--pencil); }
.hs-signal { fill: var(--mark); }
.hs-signal-ring { fill: none; stroke: color-mix(in srgb, var(--mark) 55%, transparent); stroke-width: 0.24; }

@keyframes art-grow {
  from { opacity: 0; scale: 0.84; }
  to { opacity: 1; scale: 1; }
}

/* Night edition: the same composition, deeper and lamp-lit */
[data-theme="dark"] .home-hero {
  --hero-shadow: rgba(8, 12, 9, 0.6);
  background:
    radial-gradient(46% 60% at var(--hero-glow-x) 46%, color-mix(in srgb, var(--paper-deep) 90%, transparent), transparent 72%),
    var(--paper);
}
[data-theme="dark"] .hero-shape--halo {
  background:
    radial-gradient(60% 60% at 58% 22%, color-mix(in srgb, var(--mark) 16%, transparent), transparent 70%),
    var(--paper-deep);
}
[data-theme="dark"] .hero-shape--ring { border-color: color-mix(in srgb, var(--pencil) 26%, transparent); }
[data-theme="dark"] .hero__portrait {
  background:
    radial-gradient(70% 50% at 62% 26%, color-mix(in srgb, var(--cream) 16%, transparent), transparent 72%),
    linear-gradient(168deg, var(--cloth) 0%, var(--paper-deep) 100%);
}
[data-theme="dark"] .hero__portrait::before {
  background: repeating-linear-gradient(-32deg, transparent 0 11px,
    color-mix(in srgb, var(--cream) 5%, transparent) 11px 12px);
}
[data-theme="dark"] .hero__portrait::after { border-color: color-mix(in srgb, var(--cream) 22%, transparent); }

@media (max-width: 900px) {
  .home-hero { min-height: 0; padding: 6.5rem var(--gutter) 8.5rem; place-items: stretch; }
  .hero { grid-template-columns: 1fr; gap: 3.5rem; }
  .hero__media { justify-self: center; width: min(24rem, 92%); }
}

@media (max-width: 480px) {
  .hero__media { width: min(22rem, 94%); }
  .hero__cta { gap: 1.2rem; }
}

@media (max-width: 640px) {
  .home-hero .hero { gap: 1.5rem; }
  .home-hero .hero__text { display: contents; }
  .home-hero .hero__name { order: 0; margin: 0; }
  .home-hero .hero__media { order: 1; }
  .home-hero .hero__eyebrow { order: 2; margin: 0; }
  .home-hero .hero__statement { order: 3; margin: 0; }
  .home-hero .hero__cta { order: 4; margin-bottom: 0; }
  .home-hero .hero__edition { order: 5; }
}

/* --- The book --- */

.hero__book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  perspective: 1500px;
}
[dir="rtl"] .book-float { transform: scaleX(-1); }

.book-float { animation: book-float 7s ease-in-out infinite alternate; }

@keyframes book-float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}
[dir="rtl"] .book-float {
  animation-name: book-float-rtl;
}
@keyframes book-float-rtl {
  from { transform: scaleX(-1) translateY(0); }
  to { transform: scaleX(-1) translateY(-12px); }
}

.book {
  position: relative;
  width: min(23rem, 78vw);
  aspect-ratio: 10 / 6.6;
  transform: rotateX(52deg) rotateZ(-11deg);
  transform-style: preserve-3d;
}

.book .piece {
  position: absolute;
  opacity: 0;
  animation: piece-in 0.85s var(--ease-page) forwards;
}
.book .pc1 { animation-delay: 0.25s; --from: translate3d(-70px, 30px, 40px) rotateZ(-7deg); }
.book .pc2 { animation-delay: 0.38s; --from: translate3d(70px, 30px, 40px) rotateZ(7deg); }
.book .pc3 { animation-delay: 0.55s; --from: translate3d(-40px, -50px, 60px) rotateZ(5deg); }
.book .pc4 { animation-delay: 0.68s; --from: translate3d(40px, -50px, 60px) rotateZ(-5deg); }
.book .pc5 { animation-delay: 0.85s; --from: translate3d(0, -40px, 80px); }
.book .pc6 { animation-delay: 0.95s; --from: translate3d(0, -55px, 90px); }
.book .pc7 { animation-delay: 1.05s; --from: translate3d(0, -70px, 100px); }
.book .pc8 { animation-delay: 1.3s; --from: translate3d(0, -90px, 60px); }

@keyframes piece-in {
  from { opacity: 0; transform: var(--from, translate3d(0, -40px, 60px)); }
  to { opacity: 1; transform: none; }
}

/* Boards: the binding, in green cloth with a thin cream frame */
.book__board {
  top: -3.5%;
  width: 51.5%;
  height: 107%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cloth) 88%, var(--cream)), var(--cloth-deep) 80%);
  border: 1px solid color-mix(in srgb, var(--cream) 28%, transparent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.book__board--l { left: -1.5%; border-radius: 6px 2px 2px 6px; }
.book__board--r { right: -1.5%; border-radius: 2px 6px 6px 2px; }

/* Page stacks: cream paper with printed text lines */
.book__stack {
  top: 2%;
  width: 47.5%;
  height: 96%;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(32, 29, 21, 0.1) 14px 15px),
    linear-gradient(120deg, #F6F1E2, #EDE7D2);
  box-shadow: inset 0 0 18px rgba(32, 29, 21, 0.12);
}
.book__stack--l {
  left: 1.5%;
  border-radius: 5px 1px 1px 5px;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(32, 29, 21, 0.1) 14px 15px) 0 0 / 82% 100% no-repeat,
    linear-gradient(120deg, #F6F1E2, #EDE7D2);
  background-position: 9% 22%;
}
.book__stack--r { right: 1.5%; border-radius: 1px 5px 5px 1px; }

.book__pilcrow {
  position: absolute;
  right: 12%;
  bottom: 8%;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: rgba(63, 104, 75, 0.4);
}

/* Leafing sheets: anchored at the spine, flipping right to left */
.book__sheetwrap {
  left: 50%;
  top: 2.5%;
  width: 46.5%;
  height: 95%;
  transform-style: preserve-3d;
}
.book__sheet {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: linear-gradient(115deg, #F9F5E8, #EFE9D6 70%);
  box-shadow: 0 1px 4px rgba(32, 29, 21, 0.18);
  border-radius: 1px 5px 5px 1px;
  backface-visibility: visible;
}
.sh1 { animation: leaf 9s cubic-bezier(0.5, 0.05, 0.35, 1) 2.4s infinite; }
.sh2 { animation: leaf 9s cubic-bezier(0.5, 0.05, 0.35, 1) 2.75s infinite; }
.sh3 { animation: leaf 9s cubic-bezier(0.5, 0.05, 0.35, 1) 3.1s infinite; }

@keyframes leaf {
  0%, 12% { transform: rotateY(0deg); }
  30%, 100% { transform: rotateY(-178deg); }
}

/* The wine bookmark resting across the right page */
.book__bookmark {
  right: 14%;
  top: -4%;
  width: 3.5%;
  height: 58%;
  background: var(--mark);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 92%, 0 100%);
}

.book__caption {
  font-family: var(--font-mark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 50%, transparent);
  opacity: 0;
  animation: fade-in 1s ease 1.7s forwards;
}

@media (max-width: 900px) {
  .hero__book { order: 2; }
  .book { width: min(19rem, 74vw); }
}


/* ---------- Breadcrumbs: the manuscript trail ---------- */

.crumbs {
  padding: 5.2rem var(--gutter) 0;
  max-width: 76rem;
  margin: 0 auto;
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em 0.7em;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.crumbs .crumbs__mark { color: var(--pencil); font-family: var(--font-serif); font-size: 1rem; }
.crumbs li + li:not(.crumbs__mark)::before {
  content: "/";
  margin-inline-end: 0.7em;
  color: var(--rule);
  font-weight: 400;
}
.crumbs li:nth-child(2)::before { content: none; }
.crumbs a { text-decoration: none; color: var(--ink-soft); }
.crumbs a:hover { color: var(--pencil); }
.crumbs li[aria-current="page"] { color: var(--pencil); }
.crumbs + .chapter-opener { padding-top: clamp(2.5rem, 7vh, 5rem); }

/* ---------- Field notes cards: obvious doors, quiet drafts ---------- */

.note-card--live {
  position: relative;
  cursor: pointer;
  transition: background 0.25s ease;
  padding-inline: clamp(0.6rem, 1.5vw, 1.2rem);
}
.note-card--live:hover { background: var(--pencil-ghost); }
.note-card--live h2 a { position: static; }
.note-card--live h2 a::after { content: ""; position: absolute; inset: 0; }
/* The framed cue remains inside the article’s stretched link target. */
.note-card__go { pointer-events: none; }

.note-card--soon { opacity: 0.72; padding-inline: clamp(0.6rem, 1.5vw, 1.2rem); }

/* ---------- 404 helpers (previously inline styles) ---------- */

.chapter-opener--404 {
  border-bottom: none;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.chapter-opener--404 .btn-row { justify-content: center; margin-top: 2.5rem; }
.btn-row--center { justify-content: center; }
.btn--paper-soft { border-color: color-mix(in srgb, var(--cream) 40%, transparent); }

/* ---------- The company: Venture Scalor, set apart from the services ---------- */

.company__intro { margin: 0 0 2.8rem; }
.company__intro p { max-width: 58em; }

.lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-bottom: 2.6rem;
}

.lane {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  background: var(--paper);
  padding: clamp(1.7rem, 3.5vw, 2.6rem);
  margin: 5px;
}

.lane .practice__part { display: block; margin-bottom: 0.9rem; }
.lane h3 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin-bottom: 0.35em; }
.lane__fit { font-family: var(--font-serif-text); font-style: italic; color: var(--ink-soft); font-size: 0.97em; }
.lane .deliverables { grid-template-columns: 1fr; }

.lane__note {
  border-inline-start: 2px solid var(--mark);
  padding-block: 0.35em;
  padding-inline: 1.1em 0;
  font-family: var(--font-serif-text);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95em;
  margin: 0;
}

.company__division { margin: 0 0 2.2rem; }
.company__division p {
  border-inline-start: 2px solid var(--pencil);
  background: var(--pencil-ghost);
  padding: 1em 1.3em;
  margin: 0;
  max-width: 58em;
}

/* ---------- Contact channels: four doors, WhatsApp first ---------- */

.channels {
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  max-width: 76rem;
  margin: 0 auto;
}

.channel {
  background: var(--paper);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  text-decoration: none;
  transition: background 0.25s ease;
}
/* Rounded card grids without clipping (the scroll-in animation stays free).
   Each grid keeps its 4px outer border; only the cards that sit in its corners
   take the matching inner radius. auto-fit decides the column count, so each
   grid is a size container and the corner rules follow its content width
   (thresholds = n tracks + (n - 1) 1px gaps). Logical corners flip for RTL. */
.practices, .ways, .channels {
  container-type: inline-size;
  --cell-radius: calc(var(--radius) - 1px);
}
.practices > :first-child,
.ways > :first-child,
.channels > :first-child { border-start-start-radius: var(--cell-radius); }

/* Services in brief: 8 cards. Business Architecting spans the first row and
   Product Building the last, so the first card owns both upper corners and
   the last card both lower corners at every column count. */
.practices > :first-child { border-start-end-radius: var(--cell-radius); }
.practices > :last-child { border-end-start-radius: var(--cell-radius); border-end-end-radius: var(--cell-radius); }

/* Ways to work: 3 cards (tracks: 19rem) */
@container (width < 38.0625rem) {
  .ways > :first-child { border-start-end-radius: var(--cell-radius); }
  .ways > :last-child { border-end-start-radius: var(--cell-radius); border-end-end-radius: var(--cell-radius); }
}
@container (38.0625rem <= width < 57.125rem) {
  .ways > :nth-child(2) { border-start-end-radius: var(--cell-radius); }
  .ways > :nth-child(3) { border-end-start-radius: var(--cell-radius); }
}
@container (width >= 57.125rem) {
  .ways > :first-child { border-end-start-radius: var(--cell-radius); }
  .ways > :nth-child(3) { border-start-end-radius: var(--cell-radius); border-end-end-radius: var(--cell-radius); }
}

/* Contact channels: 4 cards (tracks: 17rem) */
@container (width < 34.0625rem) {
  .channels > :first-child { border-start-end-radius: var(--cell-radius); }
  .channels > :last-child { border-end-start-radius: var(--cell-radius); border-end-end-radius: var(--cell-radius); }
}
@container (34.0625rem <= width < 51.125rem) {
  .channels > :nth-child(2) { border-start-end-radius: var(--cell-radius); }
  .channels > :nth-child(3) { border-end-start-radius: var(--cell-radius); }
  .channels > :nth-child(4) { border-end-end-radius: var(--cell-radius); }
}
@container (51.125rem <= width < 68.1875rem) {
  .channels > :nth-child(3) { border-start-end-radius: var(--cell-radius); }
  .channels > :nth-child(4) { border-end-start-radius: var(--cell-radius); }
}
@container (width >= 68.1875rem) {
  .channels > :first-child { border-end-start-radius: var(--cell-radius); }
  .channels > :nth-child(4) { border-start-end-radius: var(--cell-radius); border-end-end-radius: var(--cell-radius); }
}
.channel:hover { background: var(--pencil-ghost); color: inherit; }

.channel .practice__part { color: var(--pencil); }
.channel h3 { font-size: 1.4rem; margin: 0; }
.channel p { margin: 0; color: var(--ink-soft); font-size: 0.96em; }

.channel__go { margin-top: auto; align-self: start; }

.channel--lead { box-shadow: inset 0 3px 0 var(--pencil); }
.channel--lead .practice__part { color: var(--mark); }

/* ---------- Blog index group headings ---------- */

.note-cards__head {
  max-width: 72rem;
  margin: 0 auto 1.6rem;
}
.note-cards__head .mark-label { display: block; margin-bottom: 0.4rem; }
.note-cards__hint {
  color: var(--ink-soft);
  font-family: var(--font-serif-text);
  font-style: italic;
  font-size: 0.98em;
  margin: 0;
  max-width: 52em;
}

/* ============================================================
   English type system: Alegreya headlines, Manrope text.
   Scoped to lang="en" so the Arabic edition keeps its own scale.
   Scale: hero statement > page title (H1) > section (H2) >
   card / step title (H3) > body > labels.
   ============================================================ */

html[lang="en"] { font-synthesis-weight: none; }

/* Base heading voice (zero-specificity scope, so component rules still win) */
:where(html[lang="en"]) :is(h1, h2, h3, h4) {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
:where(html[lang="en"]) :is(h3, h4) { line-height: 1.14; letter-spacing: -0.01em; }

/* 1. Hero statement */
html[lang="en"] .hero__statement {
  font-size: clamp(2.25rem, 1.75rem + 2.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

@media (min-width: 1100px) {
  html[lang="en"] .hero__statement { font-size: clamp(3.25rem, 4.6vw, 4.2rem); }
}

/* Home's headline follows the section H2 scale, exactly 5px larger on desktop. */
@media (min-width: 901px) {
  html .home-hero .hero__statement { font-size: calc(clamp(2rem, 1rem + 2.8vw, 3.3rem) + 5px); }
  html[dir="rtl"] .home-hero .hero__statement { font-size: calc(clamp(1.9rem, 4.5vw, 2.9rem) + 5px); }
}

/* Intentional exception: the hero name keeps its editorial serif signature */
html[lang="en"] .hero__name {
  font-family: var(--font-serif);
  font-weight: 430;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0;
}

/* 2. Page titles */
html[lang="en"] .chapter-opener__title {
  font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

/* 3. Section headings */
html[lang="en"] :is(.section__title, .next-chapter h2) {
  font-size: clamp(2rem, 1rem + 2.8vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
html[lang="en"] :is(.service-part__head h2, .booking__title) {
  font-size: clamp(1.85rem, 1rem + 2.3vw, 2.9rem);
  letter-spacing: -0.018em;
}
html[lang="en"] .note-card h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); }

/* 4. Card, step and service titles */
html[lang="en"] .lane h3 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
html[lang="en"] :is(.reader h3, .step h3) { font-size: clamp(1.5rem, 2.8vw, 1.95rem); }
html[lang="en"] .way h3 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); }
html[lang="en"] .practice h3 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); }
html[lang="en"] .principle h3 { font-size: clamp(1.4rem, 2.2vw, 1.65rem); }
html[lang="en"] .channel h3 { font-size: clamp(1.4rem, 2vw, 1.6rem); }
html[lang="en"] .faq summary { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 600; line-height: 1.35; }

/* Other Alegreya display pieces: only one weight is loaded */
html[lang="en"] :is(.toc-entry__title, .email-link) { font-weight: 600; }
html[lang="en"] .dropcap::first-letter { font-weight: 600; }

/* Labels and metadata in Manrope: steadier weight, less typewriter tracking */
html[lang="en"] :is(.mark-label, .practice__part, .practice__link, .step__meta, .note-card__meta,
  .note-card__soon, .post-meta, .toc-close, .hero__edition) { font-weight: 600; }
html[lang="en"] :is(.mark-label, .practice__part, .hero__edition) { letter-spacing: 0.16em; }
html[lang="en"] :is(.step__meta, .note-card__meta, .post-meta) { letter-spacing: 0.14em; }
html[lang="en"] .cover__open { letter-spacing: 0.18em; }

/* ============================================================
   Arabic edition: same book, opened from the other side.
   ============================================================ */

[dir="rtl"] {
  --font-display: "TheYearofHandicrafts", "Noto Naskh Arabic", serif;
  --font-body: "Noto Naskh Arabic", serif;
  --font-mark: "TheYearofHandicrafts", "IBM Plex Sans Arabic", sans-serif;
  --font-ui: "IBM Plex Sans Arabic", "Archivo", sans-serif;
  /* the English accent roles map back onto the Arabic fonts */
  --font-label: "TheYearofHandicrafts", "IBM Plex Sans Arabic", sans-serif;
  /* Fraunces' editorial role: names, quotes, numerals, the live edit. Drawn
     in Thmanyah Serif Display by the build (see "Thmanyah outlines"); this is
     the fallback for anything not drawn, such as the CMS preview. */
  --font-serif: "Noto Naskh Arabic", serif;
  --font-serif-text: "Noto Naskh Arabic", serif;
}

/* Thmanyah has no italic: the Fraunces italics stand upright rather than slanted by the browser. */
[dir="rtl"] :is(.chapter-opener__num, .hero__name, .pullquote blockquote, .pullquote .accent,
  .step__num, .step h3 .verb) { font-style: normal; }

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-weight: 600; }
[dir="rtl"] .btn, [dir="rtl"] .toc-toggle, [dir="rtl"] .lang-toggle { font-weight: 700; font-size: 0.85rem; }

[dir="rtl"] { --reading-body-line-height: 1.95; }
[dir="rtl"] body { line-height: var(--reading-body-line-height); }

/* Arabic script has no uppercase and dislikes tracking */
[dir="rtl"] :is(.mark-label, .toc-toggle, .lang-toggle, .btn, .runhead__brand, .runhead,
  .practice__part, .practice__link, .step__meta, .note-card__meta span, .note-card__go,
  .note-card__soon, .channel__go, .hero__eyebrow, .hero__edition, .hero__more, .book__caption,
  .chapter-opener__label, .chapter-opener__epigraph cite, .post-meta, .crumbs ol,
  .colophon__foot, .plate__ph, .anno-note, .edit-fix, .edit-note, .post-end) {
  letter-spacing: 0;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.45; }
[dir="rtl"] .hero__name { font-weight: 600; line-height: 1.45; }

/* Connected script: no drop caps */
[dir="rtl"] .dropcap::first-letter {
  float: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}

[dir="rtl"] .toc-entry:hover .toc-entry__title { transform: translateX(-6px); }
[dir="rtl"] .brand-name { letter-spacing: 0; --thm-lh: 1.25em; }
[dir="rtl"] .brand-name:has(.thm),
[dir="rtl"] .brand-name:has(.thm) * { line-height: 0; }
[dir="rtl"] .ribbon { right: auto; left: clamp(0.9rem, 2.5vw, 2.2rem); }
[dir="rtl"] .turner { transform: translateX(-104%); box-shadow: 18px 0 40px rgba(28, 26, 21, 0.22); }
html[dir="rtl"].exiting .turner { transform: translateX(0); }
[dir="rtl"] .skip-link { left: auto; right: -999px; }
[dir="rtl"] .skip-link:focus { left: auto; right: 0.75rem; }

@media (max-width: 720px) {
  [dir="rtl"] .ribbon { left: 0.4rem; }
}

/* ---------- Thmanyah outlines ----------
   server/thmanyah.js turns Arabic display text into
     <span class="thm"><span class="visually-hidden">text</span><span aria-hidden="true"><svg class="thm-w">…</svg> <svg class="thm-w">…</svg></span></span>
   one SVG per word, with the content's real spaces between them, so the
   words flow, wrap and hang their spaces like text. Browsers may break
   between any two SVGs, so words that touch without a space (a closing
   quote after a styled phrase) are grouped in a .thm-nb that never wraps.

   - Each SVG is an inline replaced element: the reset's `svg { display:
     block; max-width: 100% }` would put every word on its own line.
   - Its viewBox is Thmanyah's own line (ascender 1000, descender 250 per
     1000 units), so 1.25em tall with the baseline 1em from its top. Its
     margins and vertical-align give it exactly the inline box a Thmanyah
     word has in a line of height --thm-lh (the element's line-height,
     repeated below). The element's own text boxes are flattened
     (line-height 0) so the fallback font's different metrics (Noto Naskh
     Arabic: ascender 1.069, descender 0.634) do not move the lines.
   - Spaces are Noto Naskh spaces (0.221em) widened to Thmanyah's 0.25em.
   Applies only where outlines are present (:has(.thm)), so the CMS preview,
   which shows plain text, keeps the normal line height. */

.thm-w {
  display: inline;
  max-width: none;
  height: 1.25em;
  margin-block: calc((var(--thm-lh, 1.25em) - 1.25em) / 2);
  vertical-align: calc((0.75em - var(--thm-lh, 1.25em)) / 2);
  overflow: visible;
  fill: currentColor;
}
[dir="rtl"] .thm { word-spacing: 0.029em; }
.thm-nb { white-space: nowrap; }

[dir="rtl"] :is(.chapter-opener__num, .step__num, .about-portrait__first, .about-portrait__last):has(.thm) { --thm-lh: 1em; }
[dir="rtl"] .edit-line:has(.thm) { --thm-lh: 1.28em; }
[dir="rtl"] .edit-fix:has(.thm) { --thm-lh: 1.18em; }
[dir="rtl"] .svc-figures__value:has(.thm) { --thm-lh: 1.15em; }
[dir="rtl"] .pullquote blockquote:has(.thm) { --thm-lh: 1.3em; }
[dir="rtl"] :is(.hero__name, .step h3 .verb):has(.thm) { --thm-lh: 1.45em; }
[dir="rtl"] .crumbs__mark:has(.thm) { --thm-lh: 1.95em; }
[dir="rtl"] :is(.chapter-opener__num, .step__num, .about-portrait__first, .about-portrait__last,
  .edit-line, .edit-fix, .pullquote blockquote, .hero__name, .step h3 .verb, .crumbs__mark):has(.thm),
[dir="rtl"] :is(.chapter-opener__num, .step__num, .about-portrait__first, .about-portrait__last,
  .edit-line, .edit-fix, .pullquote blockquote, .hero__name, .step h3 .verb, .crumbs__mark):has(.thm) * {
  line-height: 0;
}

/* The live edit keeps its own strike (a background sweeping along the
   span, across line breaks) and underline (drawn as a background, since
   text-decoration skips the SVGs), placed where they fall on Thmanyah text:
   the strike 58% down Thmanyah's 1.25em line, the underline 0.14em under the
   baseline. Inline backgrounds follow the span's font box, which is Noto
   Naskh's 1.703em with the baseline 1.069em from the top: 46% and 1.209em. */
[dir="rtl"] .strike:has(.thm) { background-position: 100% 46%; }
[dir="rtl"] .edit-fix .u-pencil:has(.thm) {
  text-decoration: none;
  background: linear-gradient(var(--pencil), var(--pencil)) no-repeat 0 1.209em / 100% 0.06em;
}

/* ---------- Motion respect for new pieces ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero__text > *, .book .piece, .book__caption { animation: none; opacity: 1; transform: none; }
  .book-float, [dir="rtl"] .book-float { animation: none; }
  [dir="rtl"] .book-float { transform: scaleX(-1); }
  .book__sheet { animation: none; transform: rotateY(-178deg); }
  .hero__media, .hero-system { animation: none; opacity: 1; }
}

/* ---------- Work: shared pieces used by Work, Services and the case pages ---------- */
.text-link { display: inline-flex; align-items: center; gap: .6em; max-width: 100%; min-height: 44px; }
.case-study__links { display: flex; gap: 1.5rem 2rem; align-items: center; flex-wrap: wrap; padding: 0 0 5rem; }
.service-proof { margin: 2.2rem 0; padding: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.service-proof > p { font-size: var(--aside-text-size); line-height: 1.6; color: var(--ink-soft); margin: .4rem 0 1.1rem; max-width: 62ch; }
.service-proof__items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin-bottom: 1.1rem; }
.service-proof__items a { text-decoration: none; min-width: 0; }
.service-proof__items img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border: 1px solid var(--rule); }
.service-proof__items strong { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.2; margin-top: .4rem; }
.service-proof__items small { display: block; font-size: var(--aside-text-size); line-height: 1.5; color: var(--ink-soft); margin-top: .25rem; }
.case-index__group-head { margin: 0 0 2rem; }
.case-index__group-head h2 { margin: .3rem 0 0; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.case-index__group-head p { max-width: var(--measure); color: var(--ink-soft); }
@media (max-width: 550px) {
  .case-study__links .btn { width: 100%; justify-content: center; text-align: center; }
  .service-proof__items { grid-template-columns: 1fr; }
  .service-proof__items a { display: grid; grid-template-columns: 7rem minmax(0,1fr); grid-template-rows: min-content min-content; align-content: start; gap: .2rem .7rem; align-items: start; }
  .service-proof__items img { grid-column: 1; grid-row: 1 / 3; width: 7rem; height: 5.25rem; aspect-ratio: auto; }
  .service-proof__items strong { grid-column: 2; grid-row: 1; margin-top: 0; }
  .service-proof__items small { grid-column: 2; grid-row: 2; }
}

/* Work owns portfolio discovery. A featured opening project gives way to
   paired image studies; existing product and writing proof follows. */
.work-intro.section { padding-bottom: clamp(2rem, 4vw, 3rem); }
.work-projects { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.work-project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.work-project { min-width: 0; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.work-project:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.work-project__image { display: block; padding: .5rem; border: 1px solid var(--rule); background: var(--paper-deep); }
.work-project__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.work-project:nth-child(3) .work-project__image img, .work-project:nth-child(4) .work-project__image img { aspect-ratio: 16 / 11; }
.work-project__copy { padding-top: 1.5rem; min-width: 0; }
.work-project__copy .practice__part { display: block; margin-bottom: .65rem; }
.work-project h3 { font-size: var(--work-h2); margin-bottom: .4rem; }
.work-project__copy > p { font-size: min(var(--reading-body-size), var(--aside-text-size)); line-height: var(--reading-body-line-height); color: var(--ink-soft); max-width: 52ch; }
.work-project__overview { margin-top: .5rem; }
.work-business { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: 2rem; align-items: center; border-inline-start: 2px solid var(--pencil); padding: 1.5rem 0 1.5rem clamp(1rem, 3vw, 2rem); margin-top: 3rem; scroll-margin-top: 6rem; }
[dir="rtl"] .work-business { padding-inline: clamp(1rem, 3vw, 2rem) 0; }
.work-business h2 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); margin-top: .5rem; }
.work-business p { color: var(--ink-soft); margin-bottom: 0; }
.work-business > a { justify-self: start; }
.work-other > .case-index__group-head { max-width: 66rem; margin: 0 auto 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
@media (max-width: 760px) {
  .work-project-grid, .work-project:first-child, .work-business { grid-template-columns: 1fr; }
  .work-project:first-child { grid-column: auto; gap: 0; }
  .work-project__image img { aspect-ratio: 16 / 11; }
  .work-business { gap: 1rem; }
}

/* Section introductions are an editorial voice, distinct from metadata.
   Arabic needs more optical presence in The Year of Handicrafts. */
:root { --section-label-size: 1rem; --section-label-leading: 1.5; }
[dir="rtl"] { --section-label-size: 1.25rem; --section-label-leading: 1.8; }
.section-label { font-size: var(--section-label-size); line-height: var(--section-label-leading); }

/* Readable secondary text: notes that explain (descriptions under links,
   attributions under epigraphs, margin notes, captions beside work). One
   role, sized as text rather than metadata; Arabic gets more optical size.
   Navigation, breadcrumbs, page numbers and facts labels keep their own sizes. */
:root { --aside-text-size: 1rem; --attribution-size: .875rem; --margin-note-size: .875rem; }
[dir="rtl"] { --aside-text-size: 1.125rem; --attribution-size: 1.125rem; --margin-note-size: 1.0625rem; }
.chapter-opener__epigraph cite { font-size: var(--attribution-size); letter-spacing: .14em; line-height: 1.5; }
[dir="rtl"] .chapter-opener__epigraph cite { letter-spacing: 0; line-height: 1.7; }
/* Arabic is never slanted; Noto Naskh also needs a little more size to match the Latin epigraph. */
[dir="rtl"] .chapter-opener__epigraph { font-style: normal; font-size: 1.12em; line-height: 1.9; }
.toc-entry__desc { font-size: var(--aside-text-size); line-height: 1.5; }
[dir="rtl"] .toc-entry__desc { font-style: normal; line-height: 1.75; }
.anno-note { font-size: var(--margin-note-size); }
[dir="rtl"] .anno-note { line-height: 1.75; }
[dir="rtl"] .step__meta { font-size: 1rem; }

/* ============================================================
   Work: project overviews and deep case studies
   One type scale for both. The project title stays below the Home
   headline at every width (Home: the section scale + 5px on desktop).
   ============================================================ */
:root {
  --work-h1: clamp(2.125rem, 1.2rem + 2.6vw, 3.25rem);
  --work-h1-article: clamp(2rem, 1.15rem + 2.1vw, 2.875rem);
  --work-h2: clamp(1.625rem, 1.1rem + 1.3vw, 2.125rem);
  --work-h3: clamp(1.25rem, 1.02rem + .55vw, 1.5rem);
  --work-lead: clamp(1.125rem, 1rem + .4vw, 1.3125rem);
  --work-caption: 1rem;
  --work-label: .75rem;
  --work-margin: minmax(10rem, 3fr);
}
[dir="rtl"] {
  /* Arabic Home holds a fixed 1.95rem headline below 901px, so the project title does too. */
  --work-h1: 1.875rem;
  --work-h1-article: clamp(1.875rem, 1.05rem + 1.7vw, 2.5rem);
  --work-h2: clamp(1.5rem, 1.05rem + 1.2vw, 2.125rem);
  --work-h3: clamp(1.3rem, 1.05rem + .6vw, 1.625rem);
  --work-lead: clamp(1.2rem, 1.05rem + .45vw, 1.4rem);
  --work-caption: 1.125rem;
  --work-label: .95rem;
}
@media (min-width: 901px) { [dir="rtl"] { --work-h1: clamp(2rem, .9rem + 2.5vw, 3rem); } }

.page-case-study { overflow-anchor: none; }
.case-study { max-width: 92rem; margin: 0 auto; padding: 0 var(--gutter) 6rem; }
.case-study h2 { font-size: var(--work-h2); font-weight: 600; line-height: 1.16; letter-spacing: -.012em; margin: 0 0 .9rem; }
.case-study h3 { font-size: var(--work-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }

/* Overview hero: the title and its orientation on one side, the project on the other. */
.project-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem); }
.project-hero__text { min-width: 0; }
.project-hero__text > .section-label { display: block; margin-bottom: 1rem; }
.project-hero h1 { font-family: var(--font-display); font-size: var(--work-h1); font-weight: 600; line-height: 1.04; letter-spacing: -.022em; margin: 0 0 .55rem; text-wrap: balance; }
.project-hero__subtitle { font-family: var(--font-serif-text); font-size: var(--work-lead); line-height: 1.38; color: var(--pencil); max-width: 34ch; margin: 0 0 1.35rem; }
.project-hero__intro { font-size: var(--reading-body-size); line-height: var(--reading-body-line-height); max-width: 50ch; margin: 0 0 1.5rem; }
.project-hero__visual { position: relative; min-width: 0; padding-block-end: clamp(2.5rem, 5vw, 4.5rem); padding-inline-start: clamp(2.5rem, 7vw, 6.5rem); }
.project-hero__visual--single { padding: 0; }
.project-plate { position: relative; margin: 0; background: var(--paper-deep); border: 1px solid var(--rule); padding: clamp(.35rem, .7vw, .6rem); }
.project-plate img { display: block; width: 100%; height: auto; object-fit: cover; object-position: top; }
.project-plate--main img { aspect-ratio: 16 / 11; }
/* The Corner Frame from the site's actions marks the lead plate. */
.project-plate--main::before, .project-plate--main::after { content: ""; position: absolute; width: 1.6rem; height: 1.6rem; border-color: var(--pencil); border-style: solid; pointer-events: none; }
.project-plate--main::before { inset-block-start: -.55rem; inset-inline-end: -.55rem; border-width: 2px 2px 0 0; }
.project-plate--main::after { inset-block-end: -.55rem; inset-inline-end: -.55rem; border-width: 0 2px 2px 0; }
[dir="rtl"] .project-plate--main::before { border-width: 2px 0 0 2px; }
[dir="rtl"] .project-plate--main::after { border-width: 0 0 2px 2px; }
.project-plate--inset { position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 36%; box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(23, 32, 24, .5); }
.project-plate--inset img { aspect-ratio: 4 / 5; }
.project-plate--inset img, .project-shot img { object-position: top left; }
[dir="rtl"] :is(.project-plate--inset, .project-shot) img { object-position: top right; }

/* Facts: small labels, values at reading size. */
.project-snapshot { border-block: 1px solid var(--rule); padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.project-snapshot dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem clamp(1.5rem, 3vw, 3rem); margin: 0; }
.project-snapshot dl > div { min-width: 0; }
.project-snapshot__wide { grid-column: span 2; }
.project-snapshot dt, .case-lens__lens { font-family: var(--font-label); font-size: var(--work-label); font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); }
.project-snapshot dt { margin-bottom: .4rem; }
.project-snapshot dd { margin: 0; font-size: var(--reading-body-size); line-height: 1.6; max-width: 48ch; }
.project-snapshot dd a { color: var(--pencil); font-weight: 600; }

/* The story: a margin label beside one reading column. */
.project-story { padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(1rem, 2vw, 2rem); }
.project-chapter, .project-evidence__head, .project-cases__head { display: grid; grid-template-columns: var(--work-margin) minmax(0, 9fr); column-gap: clamp(1.25rem, 4vw, 4rem); }
.project-chapter { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--rule); }
.project-chapter:first-child { border-top: 0; padding-top: 0; }
.project-chapter__label, .project-evidence__head > .section-label, .project-cases__head > .section-label { grid-column: 1; grid-row: 1 / span 2; padding-top: .45em; }
.project-chapter__body, .project-evidence__head > :not(.section-label), .project-cases__head > :not(.section-label) { grid-column: 2; min-width: 0; }
.project-chapter p, .project-evidence__head p { font-size: var(--reading-body-size); line-height: var(--reading-body-line-height); max-width: 64ch; margin: 0; }
.project-made { list-style: none; padding: 0; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(1.5rem, 3vw, 3rem); }
.project-made li { border-top: 2px solid var(--pencil); padding-top: 1rem; min-width: 0; }
.project-made h3 { margin: 0 0 .45rem; }
.project-made p { color: var(--ink-soft); }

/* Selected screens: one composed visual and its reason at a time. */
.project-evidence { padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--rule); }
.project-evidence__head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.project-evidence__group { display: grid; gap: 1.25rem clamp(1.5rem, 3vw, 3rem); margin: 0 0 clamp(2.75rem, 5vw, 4.5rem); }
.project-evidence__group--single { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
.project-evidence__group--single:nth-of-type(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.project-evidence__group--single:nth-of-type(even) figcaption { order: -1; }
.project-evidence__group--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.project-evidence__group--pair .project-shot:nth-of-type(2) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.project-evidence__group--pair figcaption { grid-column: 1 / -1; }
.project-shot { min-width: 0; background: var(--paper-deep); border: 1px solid var(--rule); padding: clamp(.35rem, .7vw, .6rem); }
.project-shot img { display: block; width: 100%; height: auto; max-height: 42rem; object-fit: cover; object-position: top; }
.project-evidence__group--pair .project-shot img { aspect-ratio: 5 / 4; max-height: none; }
.project-evidence__group figcaption { display: flex; gap: 1rem; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 1rem; max-width: 40rem; }
.project-evidence__no { color: var(--mark); font-family: var(--font-mark); font-size: .85rem; }
.project-evidence__group figcaption p { margin: 0; font-size: var(--work-caption); line-height: 1.65; color: var(--ink-soft); }

/* Deeper reading and related projects. */
.project-cases { padding-block: clamp(3rem, 6vw, 5rem) 1rem; border-top: 1px solid var(--rule); }
.project-cases__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.case-lens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; }
.case-lens { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.4rem 1.3rem; border-inline-start: 2px solid var(--pencil); background: var(--paper-deep); text-decoration: none; min-width: 0; }
.case-lens:hover { background: var(--pencil-ghost); }
.case-lens strong { font-family: var(--font-display); font-size: var(--work-h3); font-weight: 600; line-height: 1.25; }
.case-lens > span:not(.case-lens__lens) { color: var(--ink-soft); font-size: var(--aside-text-size); line-height: 1.55; }
.case-lens em { margin-top: auto; width: fit-content; color: var(--ink); }
.case-lens:hover em { color: var(--pencil); }
.case-archive { display: flex; gap: 1.25rem 2rem; flex-wrap: wrap; align-items: center; justify-content: space-between; border-block: 1px solid var(--rule); padding-block: 2rem; margin-block: 2.5rem 3rem; }
.case-archive p { max-width: 54ch; margin: .6rem 0 0; color: var(--ink-soft); font-size: var(--aside-text-size); line-height: 1.6; }
.case-archive > a { flex-shrink: 1; }
.btn.editorial-cta { font-size: .78rem; font-weight: 600; letter-spacing: .14em; color: var(--paper); }
[dir="rtl"] .btn.editorial-cta { letter-spacing: 0; }
.project-related { padding-top: 1rem; }
.project-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 1.5rem; }
.project-related__item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; gap: .35rem 1.25rem; text-decoration: none; align-items: start; }
.project-related__image { grid-row: 1 / -1; display: block; border: 1px solid var(--rule); background: var(--paper-deep); padding: .35rem; }
.project-related__image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.project-related__item strong { font-family: var(--font-display); font-size: var(--work-h3); font-weight: 600; line-height: 1.2; }
.project-related__item:hover strong { color: var(--pencil); }
.project-related__item > span:last-child { color: var(--ink-soft); font-size: var(--aside-text-size); line-height: 1.55; }

/* Deep cases: a readable article with an editorial margin navigation.
   Headings, copy and evidence share one column; the grid follows the
   document direction (EN margin left, AR margin right). */
.case-article .case-article__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 3rem); }
.case-article__opening { min-width: 0; }
.case-article__opening > .editorial-cta { margin-bottom: 1.25rem; }
.case-article__opening > .section-label { display: block; margin-bottom: .9rem; }
.case-article h1 { font-family: var(--font-display); font-size: var(--work-h1-article); font-weight: 600; line-height: 1.1; letter-spacing: -.018em; max-width: 24ch; margin: 0 0 1.1rem; text-wrap: balance; }
.case-article .case-study__lead { font-size: var(--work-lead); line-height: 1.6; max-width: 54ch; margin: 0 0 1.1rem; }
.case-article__byline { font-family: var(--font-ui); font-size: .875rem; color: var(--ink-soft); margin: 0; }
.case-article__hero-visual { min-width: 0; margin: 0; }
.case-article__hero-visual img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.case-article__hero-visual figcaption { margin-top: .75rem; font-size: var(--work-caption); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.case-reading { --rail: 12rem; --reading-gap: clamp(1.25rem, 3vw, 3rem); container-type: inline-size; display: grid; grid-template-columns: minmax(9rem, var(--rail)) minmax(0, 46rem) minmax(9rem, var(--rail)); justify-content: center; gap: var(--reading-gap); align-items: start; padding-top: 3rem; font-size: var(--reading-body-size); }
.case-toc, .case-related { position: sticky; top: 6rem; max-height: calc(100dvh - 8rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; overscroll-behavior-y: contain; }
.case-toc::-webkit-scrollbar, .case-related::-webkit-scrollbar { width: 4px; }
.case-toc::-webkit-scrollbar-thumb, .case-related::-webkit-scrollbar-thumb { background: var(--rule); }
.case-toc summary, .case-related h2 { font-family: var(--font-label); font-size: .9375rem; color: var(--pencil); font-weight: 600; line-height: 1.5; padding-block: .5rem; }
.case-toc summary [data-current-section] { display: none; }
.case-toc ol { list-style: none; padding: 0; margin: .8rem 0 0; }
.case-toc a { display: block; min-height: 44px; padding: .45rem .75rem; margin-block: .15rem; border-inline-start: 2px solid var(--rule); font-family: var(--font-ui); font-size: .8125rem; font-weight: 400; line-height: 1.55; color: var(--ink-soft); text-decoration: none; }
.case-toc a:hover, .case-toc a[aria-current="location"] { color: var(--pencil); border-color: var(--pencil); background: var(--pencil-ghost); }
.case-toc a[aria-current="location"] { font-weight: 600; }
.case-related { padding-inline-start: 1rem; border-inline-start: 1px solid var(--rule); }
.case-related h2 { margin: 0; letter-spacing: .025em; }
.case-related__group + .case-related__group { margin-top: 1.35rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.case-related ul { list-style: none; padding: 0; margin: .25rem 0 0; }
.case-related li + li { border-top: 1px solid var(--rule); }
.case-related a { display: block; padding: .65rem 0; text-decoration: none; min-height: 44px; font-family: var(--font-ui); font-size: .9375rem; line-height: 1.55; transition: color .2s ease; }
.case-related a strong { display: block; font-weight: 650; }
.case-related a span { display: block; color: var(--ink-soft); font-size: .875rem; line-height: 1.6; margin-top: .25rem; }
.case-related a:hover, .case-related a:hover strong { color: var(--pencil); }
.case-related a:focus-visible, .case-toc a:focus-visible { outline: 2px solid var(--pencil); outline-offset: 2px; }
.case-article__content { min-width: 0; }
.case-article__section { margin-bottom: clamp(2.75rem, 5vw, 4rem); scroll-margin-top: 6.5rem; }
.case-article__section + .case-article__section { border-top: 1px solid var(--rule); padding-top: clamp(2rem, 4vw, 2.75rem); }
.case-article__section:focus { outline: none; }
.case-article__section:focus-visible { outline: 2px solid var(--pencil); outline-offset: 8px; }
.case-article__section h2 { max-width: none; margin-bottom: 1.1rem; }
.case-article__section > p { font-size: var(--reading-body-size); line-height: var(--reading-body-line-height); }
.case-callout { border-inline-start: 2px solid var(--pencil); padding: 1.4rem clamp(1.2rem, 2vw, 2rem); margin-block: 2rem; background: var(--paper-deep); }
.case-callout h3 { margin: 0 0 .5rem; }
.case-callout p { margin-bottom: 0; }
.case-evidence { margin: 2rem 0; min-width: 0; }
.case-evidence img { width: 100%; height: auto; border: 1px solid var(--rule); background: var(--paper-deep); }
.case-evidence figcaption { padding-block: .9rem 0; }
.case-evidence figcaption p { font-size: var(--work-caption); line-height: 1.65; color: var(--ink-soft); margin: 0; }
.case-comparison { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-block: 2rem; align-items: start; }
.case-comparison .case-evidence { margin: 0; }
.case-comparison__note { grid-column: 1 / -1; padding-inline-start: 1rem; border-inline-start: 2px solid var(--pencil); color: var(--ink-soft); font-size: var(--work-caption); line-height: 1.65; }
.case-table-wrap { overflow-x: auto; margin-block: 2.5rem; }
.case-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--reading-body-size); line-height: 1.6; }
.case-table-wrap caption { text-align: start; font-family: var(--font-display); font-size: var(--work-h3); font-weight: 600; line-height: 1.25; margin-bottom: 1rem; color: var(--ink); }
.case-table-wrap th, .case-table-wrap td { text-align: start; padding: 1rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.case-table-wrap thead th { background: var(--paper-deep); font-family: var(--font-ui); font-size: .9375rem; }
.case-table-wrap tbody th { font-weight: 600; }
.work-projects, .work-projects .anchor-alias { scroll-margin-top: 6rem; }
.work-projects { position: relative; }

@media (min-width: 1321px) {
  /* The contents rail grows outward only: its inner edge, the article and the
     related rail keep the centred grid, and the spare outer space up to the
     page's content edge (where the hero starts) goes to the contents. */
  .case-toc { margin-inline-start: calc(-1 * max(0px, (100cqw - 2 * var(--rail) - 46rem - 2 * var(--reading-gap)) / 2)); }
  .case-toc summary { list-style: none; pointer-events: none; }
  .case-toc summary::-webkit-details-marker { display: none; }
}
@media (max-width: 1320px) {
  .case-reading { grid-template-columns: minmax(0, 46rem); gap: 2rem; padding-top: 1.5rem; }
  .case-reading { justify-content: center; }
  .case-toc, .case-related { position: static; max-height: none; overflow: visible; overscroll-behavior-y: auto; }
  .case-toc { padding: .25rem .75rem; background: var(--paper); border-block: 1px solid var(--rule); }
  .case-related { border-inline-start: 0; border-top: 1px solid var(--rule); padding: 1.25rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
  .case-related__group + .case-related__group { margin: 0; padding: 0; border: 0; }
  .case-toc summary { cursor: pointer; min-height: 44px; }
  .case-toc summary [data-current-section] { display: inline; margin-inline-start: .8rem; color: var(--ink-soft); font-size: .85em; font-weight: 400; }
  .case-toc ol { margin: 0 0 .5rem; }
}
@media (max-width: 960px) {
  .project-hero { grid-template-columns: 1fr; }
  .project-hero__visual { max-width: 44rem; }
  .project-snapshot dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-chapter, .project-evidence__head, .project-cases__head { grid-template-columns: 1fr; }
  .project-chapter__label, .project-evidence__head > .section-label, .project-cases__head > .section-label { grid-row: auto; padding-top: 0; margin-bottom: .6rem; }
  .project-chapter__body, .project-evidence__head > :not(.section-label), .project-cases__head > :not(.section-label) { grid-column: 1; }
}
@media (max-width: 760px) {
  .case-article .case-article__hero { grid-template-columns: 1fr; }
  .case-article__hero-visual { max-width: 38rem; }
  .project-made { grid-template-columns: 1fr; }
  .project-evidence__group--single, .project-evidence__group--single:nth-of-type(even), .project-evidence__group--pair { grid-template-columns: 1fr; }
  .project-evidence__group--single:nth-of-type(even) figcaption { order: 0; }
  .project-evidence__group--pair .project-shot:nth-of-type(2) { margin-top: 0; }
  .project-related__item { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (max-width: 550px) {
  .project-snapshot dl { gap: 1.25rem 1.25rem; }
  .project-snapshot__long { grid-column: 1 / -1; }
  .project-hero__visual { padding-inline-start: 1.75rem; padding-block-end: 2rem; }
  .project-plate--inset { width: 40%; }
  .project-related__item { grid-template-columns: 1fr; }
  .project-related__image { grid-row: auto; }
  .case-comparison { grid-template-columns: 1fr; }
  .case-table-wrap th, .case-table-wrap td { padding: .75rem .5rem; }
  .case-table-wrap table { min-width: 30rem; }
  .case-toc summary [data-current-section] { display: block; margin-inline-start: 0; }
  .case-related { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-related__group + .case-related__group { padding-top: 1rem; border-top: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Arabic: The Year of Handicrafts sets the headings; labels and notes get optical size, never tracking. */
[dir="rtl"] .case-study :is(h1, h2, h3) { letter-spacing: 0; }
[dir="rtl"] .project-hero h1 { line-height: 1.3; }
[dir="rtl"] .case-article h1 { line-height: 1.45; max-width: 26ch; }
[dir="rtl"] .case-study h2 { line-height: 1.5; }
[dir="rtl"] .case-study h3, [dir="rtl"] .case-lens strong, [dir="rtl"] .project-related__item strong, [dir="rtl"] .case-table-wrap caption { line-height: 1.55; }
[dir="rtl"] :is(.project-snapshot dt, .case-lens__lens, .project-evidence__no) { letter-spacing: 0; text-transform: none; }
[dir="rtl"] .project-hero__subtitle { line-height: 1.7; }
[dir="rtl"] .case-article .case-study__lead { line-height: 1.85; }
[dir="rtl"] .project-snapshot dd { line-height: 1.85; }
[dir="rtl"] .project-evidence__group figcaption p, [dir="rtl"] .case-evidence figcaption p, [dir="rtl"] .case-article__hero-visual figcaption { line-height: 1.85; }
[dir="rtl"] :is(.case-toc summary, .case-related h2) { font-size: 1.125rem; letter-spacing: 0; line-height: 1.5; }
[dir="rtl"] :is(.case-related a, .case-related a span) { font-size: 1.0625rem; letter-spacing: 0; line-height: 1.75; }
[dir="rtl"] .case-toc a { font-size: .9375rem; letter-spacing: 0; line-height: 1.75; }
[dir="rtl"] .case-toc a[aria-current="location"] { font-weight: 500; }
[dir="rtl"] .case-table-wrap thead th { font-size: 1.0625rem; }
[dir="rtl"] .case-article__byline { font-size: 1rem; }

/* ============================================================
   Service pages (/services/<slug>/)
   One page per service. The opener pairs the promise with the
   sentence buyers bring to the first call, struck through and
   edited in green pencil: the home page's live edit, kept as the
   single signature. Everything after it is a quiet reading page:
   situations, explanation with a sticky "what you get" margin,
   the work that shows it, questions, neighbouring services.
   ============================================================ */

.svc { --svc-width: 76rem; padding-inline: var(--gutter); }

.svc-hero {
  max-width: var(--svc-width);
  margin: 0 auto;
  padding-block: clamp(2rem, 6vh, 4rem) clamp(2.5rem, 7vh, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.svc-hero__text > .mark-label { display: block; margin-bottom: 1.1rem; }
.svc-hero h1 { font-size: var(--work-h1); line-height: 1.1; margin-bottom: .55em; max-width: 20ch; text-wrap: balance; }
.svc-hero__lead { font-size: var(--work-lead); line-height: 1.6; max-width: 38em; margin: 0 0 1rem; }
.svc-hero__for { font-family: var(--font-serif-text); font-style: italic; color: var(--ink-soft); max-width: 38em; margin: 0; }
[dir="rtl"] .svc-hero__for { font-style: normal; }

/* The edit slip: a paper note in the margin, slightly off the grid. */
.svc-edit {
  margin: 0;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--pencil);
  border-radius: var(--radius);
  transform: rotate(-.6deg);
  box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--ink) 45%, transparent);
}
[dir="rtl"] .svc-edit { transform: rotate(.6deg); }
.svc-edit__label { display: block; margin-bottom: 1rem; color: var(--ink-soft); }
.svc-edit .edit-line { font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem); margin-bottom: .6em; }
.svc-edit .edit-fix { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); margin-bottom: .55em; }
.svc-edit .edit-note { font-size: var(--margin-note-size); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .svc-edit .edit-fix, .svc-edit .edit-note { opacity: 1; transform: none; transition: none; }
}

/* Situations the service fits */
.svc-signals {
  max-width: var(--svc-width);
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
  border-block: 1px solid var(--rule);
}
.svc-signals h2 { font-size: var(--work-h3); margin-bottom: 1.2rem; }
.svc-signals ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: .9rem 2.5rem; }
.svc-signals li { position: relative; padding-inline-start: 1.4rem; color: var(--ink); max-width: 46ch; }
.svc-signals li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: .5rem; height: .5rem; background: var(--pencil); border-radius: 1px; }

/* Reading column with the "what you get" margin */
.svc-reading {
  max-width: var(--svc-width);
  margin: 0 auto;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 46rem) minmax(15rem, 19rem);
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.svc-section + .svc-section { margin-top: clamp(2.5rem, 6vh, 3.75rem); }
.svc-section h2 { font-size: var(--work-h2); margin-bottom: .7em; text-wrap: balance; }
.svc-section p { max-width: 65ch; }
.svc-list { list-style: none; margin: 1.4rem 0; padding: 0; }
.svc-list li { padding: .85rem 0 .85rem 0; padding-inline-start: 1.4rem; border-top: 1px solid var(--rule); position: relative; }
.svc-list li:last-child { border-bottom: 1px solid var(--rule); }
.svc-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.55em; width: .55rem; height: 1px; background: var(--pencil); }
.svc-list strong { color: var(--ink); font-weight: 650; }
.svc-steps { list-style: none; margin: 1.6rem 0; padding: 0; counter-reset: none; }
.svc-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding-block: 1.1rem; border-top: 1px solid var(--rule); }
.svc-steps li:last-child { border-bottom: 1px solid var(--rule); }
.svc-steps__no { font-family: var(--font-serif); font-size: 1.35rem; color: var(--pencil); line-height: 1.4; }
.svc-steps h3 { font-size: var(--work-h3); margin: 0 0 .3rem; }
.svc-steps p { margin: 0; color: var(--ink-soft); }

.svc-rail { position: sticky; top: 6rem; padding: 1.5rem 0 0; border-top: 2px solid var(--ink); }
.svc-rail h2 { font-family: var(--font-label); font-size: .9375rem; font-weight: 700; letter-spacing: .04em; color: var(--pencil); margin-bottom: .9rem; }
.svc-rail .deliverables { grid-template-columns: 1fr; margin: 0 0 1.4rem; gap: .65rem; }
.svc-rail .deliverables li { font-size: var(--aside-text-size); line-height: 1.55; }
.svc-rail .outcome { font-size: var(--aside-text-size); line-height: 1.6; margin-bottom: 1.4rem; }
[dir="rtl"] .svc-rail h2 { font-size: 1.125rem; letter-spacing: 0; }
[dir="rtl"] .svc-rail .outcome { font-style: normal; }

/* The work that shows it */
.svc-proof { max-width: var(--svc-width); margin: 0 auto; padding-block: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--rule); }
.svc-proof__head { max-width: 46rem; margin-bottom: 1.8rem; }
.svc-proof__head .mark-label { display: block; margin-bottom: .8rem; }
.svc-proof__head h2 { font-size: var(--work-h2); margin-bottom: .5em; }
.svc-proof__head p { color: var(--ink-soft); margin: 0; max-width: 65ch; }
.svc-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.svc-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0 2rem; margin: 0 0 2rem; }
.svc-figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .2rem; padding-block: 1rem; border-top: 1px solid var(--rule); }
.svc-figures dd { margin: 0; font-family: var(--font-serif); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 500; color: var(--pencil); line-height: 1.15; }
.svc-figures dt { font-size: var(--aside-text-size); line-height: 1.5; color: var(--ink-soft); }
.svc-evidence { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 0 2.5rem; }
.svc-evidence li { padding-block: 1rem; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: .3rem; }
.svc-evidence strong { font-family: var(--font-display); font-size: var(--work-h3); font-weight: 600; line-height: 1.25; }
.svc-evidence a { text-decoration: none; }
.svc-evidence a strong { text-decoration: underline; text-decoration-color: var(--pencil); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.svc-evidence a:hover strong { color: var(--pencil); }
.svc-evidence span { color: var(--ink-soft); font-size: var(--aside-text-size); line-height: 1.6; }

/* Questions before hiring */
.svc-faq { max-width: var(--svc-width); margin: 0 auto; padding-block: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--rule); }
.svc-faq h2 { font-size: var(--work-h2); margin-bottom: 1.2rem; }
.svc-faq .faq { max-width: 46rem; margin: 0; }
.svc-faq .faq summary { min-height: 44px; }
.svc-faq .faq details p { max-width: 65ch; }

/* Neighbouring services */
.svc-related { max-width: var(--svc-width); margin: 0 auto; padding-block: clamp(2.5rem, 6vh, 4rem) clamp(3rem, 8vh, 5rem); border-top: 1px solid var(--rule); }
.svc-related h2 { font-size: var(--work-h2); margin-bottom: 1.2rem; }
.svc-related ul { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 0 2.5rem; }
.svc-related li { border-top: 1px solid var(--rule); }
.svc-related li a { display: flex; flex-direction: column; gap: .3rem; padding-block: 1rem; text-decoration: none; min-height: 44px; }
.svc-related strong { font-family: var(--font-display); font-size: var(--work-h3); font-weight: 600; line-height: 1.25; }
.svc-related li a:hover strong { color: var(--pencil); }
.svc-related span { color: var(--ink-soft); font-size: var(--aside-text-size); line-height: 1.6; }

[dir="rtl"] .svc :is(h1, h2, h3) { letter-spacing: 0; }
[dir="rtl"] .svc-hero h1 { line-height: 1.4; }
[dir="rtl"] .svc :is(.svc-section h2, .svc-proof h2, .svc-faq h2, .svc-related h2) { line-height: 1.5; }
[dir="rtl"] .svc :is(.svc-evidence strong, .svc-related strong, .svc-steps h3) { line-height: 1.55; }
[dir="rtl"] .svc-hero__lead { line-height: 1.85; }

@media (max-width: 960px) {
  .svc-hero { grid-template-columns: minmax(0, 1fr); }
  .svc-edit, [dir="rtl"] .svc-edit { transform: none; }
  .svc-reading { grid-template-columns: minmax(0, 1fr); }
  .svc-rail { position: static; }
}

/* Services hub: one entry per service, leading to its page */
.service-part--entry .service-part__head h2 a { color: inherit; text-decoration: none; }
.service-part--entry .service-part__head h2 a:hover { color: var(--pencil); }
.service-part--entry .service-part__body .forwho { font-family: var(--font-serif-text); font-style: italic; color: var(--ink-soft); margin-top: .2em; }
[dir="rtl"] .service-part--entry .service-part__body .forwho { font-style: normal; }
.service-part--entry { padding-block: clamp(2.2rem, 5vh, 3.25rem); }