/* Misbar Medical Team. Page tokens and page-local styles.
   Palette from the logo (petrol + teal) and the skills lab
   (sterile drape, suture practice pad, wound, navy thread). */

:root {
  --drape:   #E9F0EE;
  --paper:   #F6F9F8;
  --white:   #FFFFFF;
  --petrol:  #0B2A33;
  --deep:    #071D24;
  --teal:    #0D6B6C;
  --teal-lt: #6CC9C2;
  --pad:     #F2C9B6;
  --wound:   #B24C3B;
  --edge:    #D9876D;
  --thread:  #0B2A33;

  --sc-canvas: var(--drape);
  --sc-surface: var(--paper);
  --sc-ink: var(--petrol);
  --sc-ink-soft: #46616A;
  --sc-accent: var(--teal);
  --sc-accent-ink: #FFFFFF;
  --sc-shadow-color: 195 60% 10%;

  --font-display: "Archivo", "Noto Naskh Arabic", system-ui, sans-serif;
  --sc-font-display: var(--font-display);
  --sc-font-text: "Outfit", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sc-font-mono: var(--sc-font-text);
  --track-display: -0.022em;

  --r: 6px;
  --rail-w: 40px;
  --gut: var(--sc-gutter);
  --gut-end: max(var(--sc-gutter), 92px);
  --bar-h: 76px;
}
/* Arabic: the kufi face leads, and Arabic is never tracked negative. */
:root[dir="rtl"] { --font-display: "Noto Naskh Arabic", "Archivo", serif; --sc-font-text: "IBM Plex Sans Arabic", "Outfit", system-ui, sans-serif; --track-display: 0; }

html { scroll-padding-top: calc(var(--bar-h) + 8px); }
body { background: var(--drape); line-height: 1.7; }
:root[dir="rtl"] body { line-height: 1.8; }

.ground-light { background: var(--drape); color: var(--petrol); }
.ground-paper { background: var(--paper); color: var(--petrol); }
.ground-dark, .ground-deep, .hero {
  --sc-ink: #EEF4F2; --sc-ink-soft: #A9C2C4;
  --sc-accent: var(--teal-lt); --sc-accent-ink: var(--deep);
  color: var(--sc-ink);
}
.ground-dark { background: var(--petrol); }
.ground-deep { background: var(--deep); }

.wrap {
  width: 100%; max-width: 84rem; margin-inline: auto;
  padding-inline-start: var(--gut);
  padding-inline-end: var(--gut-end);
}
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--petrol); color: #fff; padding: .6rem 1rem; border-radius: var(--r); }
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------- type */
.h-xl, .h-lg, .h-md, .h-sm, .hero__title { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: var(--track-display); }
.h-xl { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.8rem); line-height: 1.06; font-weight: 700; }
.h-lg { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.6rem); line-height: 1.08; font-weight: 700; }
.h-md { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.15; font-weight: 700; }
.h-sm { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.5rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
:root[dir="rtl"] :is(.h-xl, .h-lg, .h-md) { line-height: 1.3; font-weight: 600; }
:root[dir="rtl"] .h-sm { letter-spacing: 0; font-weight: 600; }
.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.32rem); line-height: 1.65; max-width: 44ch; margin: 0; text-wrap: pretty; font-weight: 300; }
.body { max-width: 62ch; margin: 0; color: var(--sc-ink-soft); text-wrap: pretty; }
.small { font-size: .9rem; color: var(--sc-ink-soft); max-width: 56ch; margin: 0; line-height: 1.65; }
.eyebrow { margin: 0 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); }
:root[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: .95rem; }
* + .lede, * + .body { margin-top: 1.25rem; }

.chapter { padding-block: clamp(5rem, 10vw, 9.5rem); position: relative; }

/* ----------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.4rem;
  font-weight: 500; font-size: 1rem; text-decoration: none; white-space: nowrap;
  border-radius: var(--r); border: 1px solid transparent; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn--primary { background: var(--teal); color: #fff; box-shadow: var(--sc-e1); }
.ground-dark .btn--primary, .ground-deep .btn--primary { background: var(--teal-lt); color: var(--deep); }
.btn--dark { background: var(--petrol); color: #EEF4F2; }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--sm { min-height: 42px; padding: .45rem 1rem; font-size: .92rem; }
.btn--lg { min-height: 56px; padding: .85rem 1.8rem; font-size: 1.08rem; }
.btn:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: #0A5A5B; box-shadow: var(--sc-e2); }
  .ground-dark .btn--primary:hover, .ground-deep .btn--primary:hover { background: #8AD8D2; }
  .btn--dark:hover { background: #12404C; }
  .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
}
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--sc-accent); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; }
.link-arrow::after { content: "→"; transition: transform 160ms var(--sc-ease-out); }
:root[dir="rtl"] .link-arrow::after { content: "←"; }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover::after { transform: translateX(4px); } :root[dir="rtl"] .link-arrow:hover::after { transform: translateX(-4px); } }

/* --------------------------------------------------------------- bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--bar-h); color: #EEF4F2;
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out); }
.bar.is-solid { background: var(--petrol); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 24px -12px rgba(7,29,36,.5); }
.bar__inner { height: 100%; display: flex; align-items: center; gap: 1.5rem; padding-inline-end: var(--gut); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand img { width: 42px; height: auto; }
.brand__name { display: grid; line-height: 1.05; }
.brand__en { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; }
.brand__ar { display: none; font-family: "Noto Naskh Arabic", serif; font-weight: 700; font-size: 1.3rem; line-height: 1.3; }
:root[dir="rtl"] .brand__en { display: none; }
:root[dir="rtl"] .brand__ar { display: block; }
.brand__name small { font-size: .62rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--teal-lt); margin-top: .2rem; }
.menu { display: flex; gap: clamp(.8rem, 1.6vw, 1.8rem); margin-inline-start: auto; }
.menu a { color: inherit; text-decoration: none; font-size: .95rem; padding-block: .5rem; position: relative; }
.menu a::after { content: ""; position: absolute; inset-inline: 0; bottom: .15rem; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 180ms var(--sc-ease-out); }
@media (hover: hover) { .menu a:hover::after { transform: scaleX(1); } }
.bar__end { display: flex; align-items: center; gap: .75rem; }
.lang { min-height: 42px; min-width: 64px; padding: .3rem .8rem; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r); cursor: pointer; font-size: .95rem; }
.lang[lang="ar"] { font-family: "IBM Plex Sans Arabic", sans-serif; font-size: 1rem; font-weight: 500; }
.lang:hover { border-color: #fff; }
.bar .btn--primary { background: var(--teal-lt); color: var(--deep); }
.burger { display: none; width: 44px; height: 44px; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: var(--r); cursor: pointer; place-items: center; align-content: center; gap: 6px; }
.burger span { display: block; width: 20px; height: 2px; background: #fff; transition: transform 200ms var(--sc-ease-out); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------ hero */
.hero { position: relative; min-height: max(100svh, 38rem); display: flex; align-items: center; overflow: clip; background: var(--deep); }
.hero__media, .hero__scrim { position: absolute; inset: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  background:
    linear-gradient(to var(--scrim-dir, right), rgba(7,29,36,.9) 0%, rgba(7,29,36,.7) 38%, rgba(7,29,36,.25) 70%, rgba(7,29,36,.1) 100%),
    linear-gradient(to top, rgba(7,29,36,.75) 0%, transparent 35%),
    linear-gradient(to bottom, rgba(7,29,36,.6) 0%, transparent 22%);
}
:root[dir="rtl"] .hero__scrim { --scrim-dir: left; }
.hero__inner { position: relative; z-index: 2; padding-top: calc(var(--bar-h) + 2rem); padding-bottom: 9rem; }
.hero__title { font-size: clamp(3rem, 1.2rem + 6.2vw, 6.8rem); line-height: 1.0; font-weight: 800; color: #fff; }
:root[dir="rtl"] .hero__title { line-height: 1.25; font-weight: 700; }
.hl { display: block; overflow: hidden; padding-block: .04em .1em; margin-block: -.04em -.1em; }
.hl > span { display: inline-block; animation: rise 900ms var(--sc-ease-out) both; }
.hl:nth-child(2) > span { animation-delay: 110ms; color: var(--teal-lt); }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
.hero__cut { display: block; width: min(100%, 26rem); height: 20px; margin-block: 1.6rem 1.6rem; overflow: visible; animation: cut 1100ms 420ms var(--sc-ease-in-out) both; }
@keyframes cut { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
:root[dir="rtl"] .hero__cut { animation-name: cut-rtl; }
@keyframes cut-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.cut__wound { fill: var(--wound); }
.cut__edge { fill: none; stroke: var(--edge); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hero__lede { font-size: clamp(1.08rem, 1rem + .45vw, 1.35rem); line-height: 1.65; max-width: 38ch; margin: 0; font-weight: 300; color: rgba(255,255,255,.92); animation: fade 700ms 600ms var(--sc-ease-out) both; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; margin-top: 2.2rem; animation: fade 700ms 720ms var(--sc-ease-out) both; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero__pause { position: absolute; z-index: 3; bottom: 7rem; inset-inline-end: var(--gut-end); min-height: 40px; padding: .35rem .9rem; font-size: .85rem;
  color: #fff; background: rgba(7,29,36,.55); border: 1px solid rgba(255,255,255,.3); border-radius: var(--r); cursor: pointer; }
.hero__pause:hover { background: rgba(7,29,36,.8); }

/* floating skills strip: six cells, each skill drawn as a live line */
.strip-wrap { position: relative; z-index: 5; margin-top: -5rem; }
.strip {
  background: var(--white); border-radius: calc(var(--r) * 2); box-shadow: var(--sc-e3);
  display: grid; grid-template-columns: minmax(13.5rem, 1fr) minmax(0, 5fr); overflow: hidden; position: relative;
}
.strip::before { /* a sutured seam along the top edge, like the rail */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: repeating-linear-gradient(90deg, var(--edge) 0 22px, transparent 22px 30px); opacity: .9;
}
.strip__head {
  display: grid; align-content: center; gap: .5rem; padding: 1.6rem clamp(1.25rem, 2vw, 1.75rem);
  background: var(--petrol); color: #EEF4F2;
}
.strip__label { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; letter-spacing: var(--track-display); }
.strip__sub { margin: 0; font-size: .8rem; color: var(--teal-lt); line-height: 1.5; }
.strip__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.skill {
  position: relative; display: grid; align-content: start; gap: .3rem; padding: 1.35rem clamp(.8rem, 1.2vw, 1.2rem) 1.3rem;
  transition: background-color 200ms var(--sc-ease-out);
}
.skill + .skill { border-inline-start: 1px solid rgba(11,42,51,.08); }
.skill__icon { width: 34px; height: 34px; margin-bottom: .55rem; overflow: visible; transition: transform 240ms var(--sc-ease-out); }
.skill__icon path { fill: none; stroke: var(--petrol); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.skill__icon .acc { stroke: var(--wound); }
.skill__name { font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--petrol); }
.skill__meta { font-size: .78rem; color: var(--sc-ink-soft); line-height: 1.4; }
.skill:last-child .skill__meta { color: var(--teal); font-weight: 500; }
.skill:last-child .skill__meta::before { /* a live dot for the course running now */
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--teal);
  margin-inline-end: .4rem; vertical-align: .05em; animation: live 1.8s ease-in-out infinite;
}
@keyframes live { 50% { opacity: .3; } }
@media (hover: hover) and (pointer: fine) {
  .skill:hover { background: var(--paper); }
  .skill:hover .skill__icon { transform: translateY(-2px); }
}
/* the icons draw themselves once, in sequence, when the strip arrives */
@media (prefers-reduced-motion: no-preference) {
  .strip .skill__icon path { stroke-dashoffset: 1; }
  .strip.sc-in .skill__icon path { animation: draw 900ms var(--sc-ease-out) forwards; animation-delay: calc(250ms + var(--i) * 120ms); }
  .strip.sc-in .skill__icon .acc { animation-delay: calc(550ms + var(--i) * 120ms); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .skill:last-child .skill__meta::before { animation: none; } }
@media (max-width: 1100px) {
  .strip { grid-template-columns: 1fr; }
  .strip__head { grid-template-columns: auto 1fr; align-items: baseline; gap: .25rem 1rem; padding: 1.1rem 1.4rem; }
  .strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .skill:nth-child(4) { border-inline-start: 0; }
  .skill:nth-child(n+4) { border-top: 1px solid rgba(11,42,51,.08); }
}
@media (max-width: 600px) {
  .strip__head { grid-template-columns: 1fr; }
  .strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill:nth-child(4) { border-inline-start: 1px solid rgba(11,42,51,.08); }
  .skill:nth-child(odd) { border-inline-start: 0; }
  .skill:nth-child(n+3) { border-top: 1px solid rgba(11,42,51,.08); }
  .skill { padding: 1.1rem 1rem; }
  .skill__icon { width: 30px; height: 30px; }
}

/* ----------------------------------------------------------- about */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.about__copy .h-lg { max-width: 15ch; }
.incise { margin: 0; position: sticky; top: calc(var(--bar-h) + 4vh); --o: 0; }
.incise img { width: 100%; height: auto; aspect-ratio: 3 / 2.3; object-fit: cover; border-radius: var(--r);
  clip-path: inset(0 calc((1 - var(--o)) * 50%) round var(--r)); box-shadow: var(--sc-e2); }
.incise::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 2px; translate: -1px 0;
  height: calc(100% - 2.4rem); transform: scaleY(var(--cut, 0)); transform-origin: 50% 0;
  background: var(--wound); opacity: calc(1 - var(--o) * 1.6); border-radius: 2px; z-index: 1;
}
.incise figcaption { margin-top: .8rem; font-size: .85rem; color: var(--sc-ink-soft); }
.name-meaning { margin: 2rem 0; padding: 1.3rem 1.5rem; background: var(--white); border-radius: var(--r); box-shadow: var(--sc-e1); }
.name-meaning p { margin: 0; font-size: 1.08rem; line-height: 1.7; }
.name-meaning strong { font-family: var(--font-display); color: var(--teal); font-size: 1.2rem; }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(4rem, 8vw, 6.5rem); padding-top: 2.5rem; border-top: 1px solid rgba(11,42,51,.14); }
.vm__h { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; margin: 0 0 .7rem; letter-spacing: var(--track-display); }
.vm p { margin: 0; color: var(--sc-ink-soft); max-width: 50ch; }

/* ------------------------------------------------------------- need */
.need__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: end; }
.need__main .h-lg { max-width: 18ch; }
.needs { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: .9rem; max-width: 56ch; }
.needs li { position: relative; padding-inline-start: 1.6rem; color: var(--sc-ink-soft); }
.needs li::before { content: ""; position: absolute; inset-inline-start: 0; top: .85em; width: .8rem; height: 1px; background: var(--edge); }
.need__figures { display: grid; gap: 2.5rem; border-inline-start: 1px solid rgba(233,240,238,.16); padding-inline-start: clamp(1.5rem, 3vw, 3rem); }
.fig { margin: 0; display: grid; gap: .6rem; }
.fig__n { font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(3rem, 2rem + 3vw, 4.8rem); line-height: 1; color: var(--pad); letter-spacing: -.03em; }
.fig__t { color: var(--sc-ink-soft); font-size: .98rem; max-width: 42ch; }

/* ------------------------------------------------------------ focus */
.focus__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.focus__head .body { margin: 0; }
.focus__list { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: clamp(1.25rem, 2.5vw, 2rem); }
.focus__item { background: var(--white); border-radius: calc(var(--r) * 2); overflow: hidden; box-shadow: var(--sc-e1); display: grid; }
.focus__item img { width: 100%; height: 100%; object-fit: cover; }
.focus__item > div { padding: clamp(1.25rem, 2.2vw, 2rem); }
.focus__item p { margin: .6rem 0 0; color: var(--sc-ink-soft); }
.focus__item:first-child { grid-row: span 2; grid-template-rows: minmax(16rem, 1fr) auto; }
.focus__item:not(:first-child) { grid-template-columns: 38% 1fr; }
.focus__item:not(:first-child) img { min-height: 13rem; }

/* ---------------------------------------------------------- programs (course log)
   A horizontal strip with a fixed height: it advances on its own, and the
   reader can pause it, step with the arrows, drag, or swipe. The page itself
   only ever scrolls down. */
.log { background: var(--white); color: var(--petrol); padding-block: clamp(4rem, 8vw, 7rem); --log-gap: clamp(1rem, 1.8vw, 1.5rem); --log-edge: max(var(--gut), calc((100vw - 84rem) / 2 + var(--gut))); }
.log__lead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; }
.log__intro { display: grid; gap: 1rem; max-width: 40rem; }
.log__intro .lede, .log__intro .eyebrow { margin: 0; }
.log__controls { display: flex; align-items: center; gap: .5rem; }
.log__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 48px; height: 48px; padding: 0 .9rem;
  background: var(--white); color: var(--petrol); border: 1px solid rgba(11,42,51,.22); border-radius: var(--r); cursor: pointer; font-size: .92rem; font-weight: 500;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.log__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root[dir="rtl"] .log__btn:not(.log__btn--play) svg { transform: scaleX(-1); }
.log__btn--play { min-width: 7.2rem; background: var(--petrol); color: #EEF4F2; border-color: var(--petrol); }
.log__btn--play .i-play { display: none; }
.log__btn--play[aria-pressed="true"] .i-play { display: block; }
.log__btn--play[aria-pressed="true"] .i-pause { display: none; }
.log__btn:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .log__btn:hover { background: var(--paper); border-color: var(--petrol); }
  .log__btn--play:hover { background: #12404C; }
}
.log__viewport { margin-top: clamp(2rem, 4vw, 3rem); }
.log__list {
  list-style: none; margin: 0; display: flex; gap: var(--log-gap);
  padding-block: .5rem 1.5rem; padding-inline: var(--log-edge) var(--gut-end);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--log-edge);
  scrollbar-width: none; cursor: grab;
}
.log__list::-webkit-scrollbar { display: none; }
.log__list.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.log__list:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.entry { flex: none; width: clamp(17rem, 24vw, 21rem); scroll-snap-align: start; position: relative; padding-top: 1.9rem; }
.entry::before { /* the timeline, running through every card */
  content: ""; position: absolute; top: 7px; inset-inline-start: 0; width: calc(100% + var(--log-gap)); height: 2px; background: var(--edge); opacity: .55;
}
.entry:last-child::before { width: 100%; }
.entry::after { /* a tied knot per course */
  content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--wound);
}
.entry article { height: 100%; display: flex; flex-direction: column; padding: .9rem; background: var(--paper); border-radius: calc(var(--r) * 2); border: 1px solid rgba(11,42,51,.07); }
.entry__plate { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--pad); box-shadow: var(--sc-e1); }
.entry__plate :is(img, video) { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.entry__date { margin: 1rem 0 0; font-size: .86rem; color: var(--teal); font-weight: 600; }
.entry__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; margin: .25rem 0 0; letter-spacing: var(--track-display); min-height: 2.5em; }
:root[dir="rtl"] .entry__title { font-weight: 600; line-height: 1.4; }
.entry__meta { margin: .8rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; border-top: 1px solid rgba(11,42,51,.12); padding-top: .9rem; font-size: .88rem; }
.entry__meta div { display: grid; gap: .1rem; align-content: start; }
.entry__meta div:first-child { grid-column: 1 / -1; }
.entry__meta dt { color: var(--sc-ink-soft); font-size: .76rem; }
.entry__meta dd { margin: 0; font-weight: 500; }
.log__progress { height: 3px; margin-top: .25rem; margin-inline: var(--log-edge) var(--gut-end); background: rgba(11,42,51,.1); border-radius: 3px; overflow: hidden; }
.log__progress span { display: block; height: 100%; width: 100%; background: var(--teal); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(.15); transition: transform 300ms var(--sc-ease-out); }
:root[dir="rtl"] .log__progress span { transform-origin: 100% 50%; }
.log__end { display: grid; gap: .8rem; margin-top: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.log__end .lede { margin: 0; }

/* --------------------------------------------------------- impact */
.impact__h { max-width: 20ch; }
.stats { margin: clamp(3rem, 6vw, 4.5rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(233,240,238,.16); }
.stat { padding: 2rem clamp(1rem, 2vw, 2rem) 0; border-inline-start: 1px solid rgba(233,240,238,.16); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .6rem; }
.stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stat dd { margin: 0; font-family: "Archivo", sans-serif; font-weight: 700; font-size: clamp(2.8rem, 1.8rem + 3.4vw, 5.2rem); line-height: 1; letter-spacing: -.03em; color: var(--pad); direction: ltr; text-align: start; }
:root[dir="rtl"] .stat dd { text-align: right; }
.stat dt { color: var(--sc-ink-soft); font-size: 1rem; }
.impact__foot { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid rgba(233,240,238,.16); }
.impact__foot strong { color: var(--sc-ink); font-weight: 500; }

/* ---------------------------------------------------------- field */
.field__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.field__head { position: sticky; top: calc(var(--bar-h) + 2rem); }
.reel { position: relative; margin: 2.5rem 0 0; max-width: 17rem; }
.reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r); background: #0d252c; box-shadow: var(--sc-e3); }
.reel figcaption { margin-top: .8rem; font-size: .88rem; color: var(--sc-ink-soft); }
.reel__sound { position: absolute; top: .75rem; inset-inline-start: .75rem; min-height: 40px; padding: .4rem .9rem; background: rgba(7,29,36,.78); color: #EEF4F2;
  border: 1px solid rgba(233,240,238,.25); border-radius: var(--r); font-size: .85rem; cursor: pointer; }
.reel__sound[aria-pressed="true"] { background: var(--teal-lt); color: var(--deep); }
.wall { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(4.5rem, 7vw, 7.5rem); gap: .6rem; }
.wall li { min-width: 0; }
.wall button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; border-radius: var(--r); overflow: hidden; }
.wall button:focus-visible { outline: 2px solid var(--teal-lt); outline-offset: 3px; }
.wall img { width: 100%; height: 100%; object-fit: cover; transition: scale 400ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .wall button:hover img { scale: 1.035; } }
.w-a { grid-column: span 2; grid-row: span 3; }
.w-b { grid-column: span 4; grid-row: span 2; }
.w-c { grid-column: span 2; grid-row: span 3; }
.w-d { grid-column: span 2; grid-row: span 2; }
.w-e { grid-column: span 2; grid-row: span 2; }
.w-f { grid-column: span 2; grid-row: span 3; }
.w-g { grid-column: span 4; grid-row: span 2; }
.w-h { grid-column: span 2; grid-row: span 2; }
.w-i { grid-column: span 4; grid-row: span 2; }

/* --------------------------------------------------------- method */
.method__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 2.5rem 0 0; columns: 2; column-gap: 2.5rem; }
.steps li { counter-increment: s; break-inside: avoid; display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; padding-block: .9rem; border-top: 1px solid rgba(11,42,51,.14); }
.steps li::before { content: counter(s); font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--teal); }
.team__photo { margin: 0 0 1.6rem; }
.team__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e2); }
.areas { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; }
.areas li { padding-block: .5rem; border-bottom: 1px dotted rgba(11,42,51,.22); color: var(--sc-ink-soft); }
.principles { margin-top: clamp(4.5rem, 8vw, 7rem); }
.principles__list { margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.principles__list > div { padding-block: 1.1rem; border-top: 1px solid rgba(11,42,51,.14); }
.principles__list dt { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: var(--track-display); }
.principles__list dd, .ways dd { margin: .3rem 0 0; color: var(--sc-ink-soft); }

/* -------------------------------------------------------- support */
.support__head { max-width: 50rem; }
.support__head .h-lg { max-width: 18ch; }
.paths { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.path { display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: var(--white); border-radius: calc(var(--r) * 2); box-shadow: var(--sc-e1); }
.path p { margin: 0 0 .75rem; color: var(--sc-ink-soft); flex: 1; }
.path .btn { align-self: flex-start; }
.path:first-child { background: var(--petrol); color: #EEF4F2; box-shadow: var(--sc-e3); }
.path:first-child p { color: #A9C2C4; }
.path:first-child .btn--primary { background: var(--teal-lt); color: var(--deep); }
.support__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(3rem, 7vw, 7rem); margin-top: clamp(4rem, 8vw, 6.5rem); }
.why { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .8rem; }
.why li { position: relative; padding-inline-start: 1.9rem; }
.why li::before { /* a tied stitch */
  content: ""; position: absolute; inset-inline-start: .15rem; top: .5em; width: .9rem; height: .5rem;
  border-bottom: 2px solid var(--teal); border-left: 2px solid var(--teal); rotate: -45deg;
}
.ways { margin: 1.4rem 0 0; }
.ways > div { padding-block: .95rem; border-top: 1px solid rgba(11,42,51,.14); }
.ways dt { font-weight: 500; font-size: 1.05rem; }

/* ---------------------------------------------------------- close */
.close { min-height: 100svh; display: flex; align-items: center; padding-top: calc(var(--bar-h) + 3rem); padding-bottom: 2.5rem; }
.close__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.close__logo { width: clamp(9rem, 13vw, 11rem); height: auto; margin-bottom: .5rem; }
.close__scar { width: min(100%, 34rem); height: 34px; overflow: visible; opacity: 1 !important; transform: none !important; }
.scar__line { fill: none; stroke: var(--edge); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.scar__stitches path { fill: none; stroke: var(--pad); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 420ms var(--sc-ease-out); }
.close__scar.sc-in .scar__stitches path { stroke-dashoffset: 0; }
.close .h-xl { max-width: 17ch; }
.close .lede { max-width: 40ch; margin: 0; }
.contacts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.contacts li { display: grid; gap: .1rem; }
.contacts span { font-size: .82rem; color: var(--sc-ink-soft); }
.contacts a { font-size: 1.08rem; text-decoration: none; border-bottom: 1px solid rgba(233,240,238,.3); padding-bottom: 2px; min-height: 32px; display: inline-flex; align-items: flex-end; }
.contacts a:hover { border-color: var(--teal-lt); }
.colophon { margin-top: clamp(3rem, 8vw, 5.5rem); padding-top: 1.5rem; border-top: 1px solid rgba(233,240,238,.14); width: 100%; font-size: .85rem; color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; }
.colophon p { margin: 0; }

/* -------------------------------------------------------- lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 70rem); max-height: 92svh; color: #EEF4F2; }
.lightbox::backdrop { background: rgba(7,29,36,.92); }
.lightbox img { max-width: 100%; max-height: 78svh; margin-inline: auto; border-radius: var(--r); }
.lightbox__cap { text-align: center; margin: .8rem 0; color: #A9C2C4; }
.lightbox__nav { display: flex; justify-content: center; gap: .75rem; }
.lightbox__nav button { min-height: 44px; padding: .4rem 1.1rem; border-radius: var(--r); border: 1px solid rgba(233,240,238,.3); background: transparent; color: inherit; cursor: pointer; }
.lightbox__nav button:hover { background: rgba(233,240,238,.1); }

/* =================================================== THE SUTURE RAIL
   A strip of practice pad on the page edge. The incision closes one stitch
   per chapter. It is also the chapter navigation. */
.rail { position: fixed; z-index: 60; inset-inline-end: 18px; top: calc(var(--bar-h) + 8vh); height: calc(84vh - var(--bar-h) - 4vh); width: var(--rail-w); }
.rail__pad { position: relative; width: 100%; height: 100%; background: var(--pad); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(7,29,36,.18), 0 10px 24px -8px rgba(7,29,36,.35); }
.rail__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rail__svg .wound { fill: var(--wound); stroke: var(--edge); stroke-width: 1; }
.rail__svg .st { fill: none; stroke: var(--thread); stroke-width: 1.7; stroke-linecap: round; }
.rail__svg .knot { fill: var(--thread); }
.rail__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rail__list li { position: absolute; left: 0; width: 100%; height: 30px; translate: 0 -50%; }
.rail__list a { position: absolute; inset: 0; display: block; border-radius: 8px; }
.rail__list a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.rail__tip {
  position: absolute; inset-inline-end: calc(100% + 12px); top: 50%; translate: 0 -50%;
  white-space: nowrap; font-size: .82rem; font-weight: 500; line-height: 1;
  padding: .5rem .75rem; border-radius: var(--r); background: var(--petrol); color: #EEF4F2; box-shadow: var(--sc-e2);
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--sc-ease-out);
}
.rail__list a:hover .rail__tip, .rail__list a:focus-visible .rail__tip,
.rail.is-moving .rail__list a[aria-current="true"] .rail__tip { opacity: 1; }
.rail__now { display: none; }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1100px) {
  .menu { display: none; }
  .burger { display: grid; }
  .bar.is-open .menu {
    display: flex; flex-direction: column; gap: 0; position: absolute; top: var(--bar-h); inset-inline: 0;
    background: var(--petrol); padding: .5rem var(--gut) 1.25rem; box-shadow: 0 16px 30px -12px rgba(7,29,36,.6);
  }
  .bar.is-open .menu a { padding-block: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1.05rem; }
  .about__grid, .need__grid, .method__grid, .support__grid, .field__grid { grid-template-columns: 1fr; }
  .incise { position: relative; top: 0; }
  .need__figures { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid rgba(233,240,238,.16); padding-top: 2rem; }
  .field__head { position: static; }
  .paths { grid-template-columns: 1fr 1fr; }
  .path:first-child { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}

/* donate panel (PayPal) */
.donate {
  margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--petrol); color: #EEF4F2; border-radius: calc(var(--r) * 2); box-shadow: var(--sc-e3); position: relative; overflow: hidden;
}
.donate::before { /* a sutured incision along the top edge */
  content: ""; position: absolute; inset-inline: clamp(1.75rem, 3.5vw, 3rem); top: 0; height: 3px; border-radius: 0 0 3px 3px;
  background: repeating-linear-gradient(90deg, var(--edge) 0 26px, transparent 26px 34px);
}
.donate p { margin: .9rem 0 0; color: #A9C2C4; max-width: 46ch; }
.donate__label { margin: 0 0 .8rem !important; font-weight: 500; color: #EEF4F2 !important; }
.donate__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.amount {
  display: grid; place-items: center; min-height: 56px; border-radius: var(--r); text-decoration: none;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--deep); background: var(--teal-lt);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.amount--other { grid-column: 1 / -1; background: transparent; color: #EEF4F2; border: 1px solid rgba(233,240,238,.4); font-family: var(--sc-font-text); font-weight: 500; font-size: 1rem; min-height: 48px; }
.amount:active { transform: translateY(1px) scale(.985); }
.amount:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .amount:hover { background: #8AD8D2; }
  .amount--other:hover { background: rgba(233,240,238,.1); border-color: #fff; }
}
.donate__note { display: flex; align-items: center; gap: .45rem; font-size: .82rem; margin-top: .9rem !important; }
.close__actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; }
@media (max-width: 860px) {
  .donate { grid-template-columns: 1fr; }
  .close__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 600px) {
  .entry { width: 78vw; }
  .log__controls { width: 100%; }
  .log__btn--play { flex: 1; }
}

/* ------------------------------------------------------------ phone */
@media (max-width: 860px) {
  :root { --gut-end: var(--sc-gutter); --bar-h: 64px; }
  body { padding-bottom: 60px; }
  /* the rail moves to the bottom edge and runs along the reading direction */
  .rail { inset: auto 0 0 0; width: auto; height: 60px; top: auto; background: var(--drape); border-top: 1px solid rgba(11,42,51,.12);
    display: flex; align-items: center; gap: .75rem; padding: 0 12px; padding-bottom: env(safe-area-inset-bottom); }
  .rail__pad { height: 34px; flex: 1; border-radius: 10px; }
  .rail__list li { top: 0; height: 100%; width: 34px; translate: -50% 0; }
  .rail__tip { display: none; }
  .rail__now { display: block; margin: 0; font-size: .8rem; font-weight: 600; color: var(--petrol); min-width: 5.6rem; }
  .bar .btn--sm { display: none; }
  .brand img { width: 36px; }
  .brand__en { font-size: 1.15rem; }
  .hero { min-height: 100svh; align-items: flex-end; }
  .hero__scrim { background: linear-gradient(to top, rgba(7,29,36,.95) 0%, rgba(7,29,36,.75) 45%, rgba(7,29,36,.2) 75%, rgba(7,29,36,.5) 100%); }
  .hero__inner { padding-bottom: 7rem; }
  .hero__title { font-size: clamp(2.6rem, 12vw, 4rem); }
  .hero__pause { bottom: auto; top: calc(var(--bar-h) + .75rem); }
  .hero__actions .btn { flex: 1 1 100%; }
  .strip-wrap { margin-top: -3.5rem; }
  .vm, .principles__list, .paths { grid-template-columns: 1fr; }
  .focus__list { grid-template-columns: 1fr; }
  .focus__item:first-child { grid-row: auto; }
  .focus__item:not(:first-child) { grid-template-columns: 1fr; }
  .focus__item:not(:first-child) img { aspect-ratio: 16 / 9; min-height: 0; }
  .steps { columns: 1; }
  .wall { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 22vw; }
  .w-a, .w-c, .w-f, .w-d, .w-e, .w-h { grid-column: span 2; grid-row: span 2; }
  .w-b, .w-g, .w-i { grid-column: span 4; grid-row: span 2; }
  .reel { max-width: 15rem; }
}
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding-inline: .75rem 0; }
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hl > span, .hero__cut, .hero__lede, .hero__actions { animation: none; }
  .incise { --o: 1 !important; --cut: 0 !important; }
}

/* ------------------------------------------------ Arabic (Naskh) metrics
   Naskh carries tall ascenders and deep descenders; give headings room so
   dots and tails are never clipped by the rising-line mask. */
:root[dir="rtl"] :is(.h-xl, .h-lg, .h-md) { line-height: 1.5; font-weight: 700; }
:root[dir="rtl"] .h-sm, :root[dir="rtl"] .vm__h, :root[dir="rtl"] .principles__list dt { font-weight: 700; line-height: 1.55; }
:root[dir="rtl"] .hero__title { line-height: 1.28; font-weight: 700; }
:root[dir="rtl"] .hl { padding-block: .1em .22em; margin-block: -.1em -.22em; }
:root[dir="rtl"] .entry__title { font-weight: 700; line-height: 1.55; min-height: 3.1em; }
:root[dir="rtl"] .name-meaning strong { font-weight: 700; }
:root[dir="rtl"] .lede, :root[dir="rtl"] .hero__lede { font-weight: 400; }

/* ---- photo additions (Oct 2026) ---- */
.impact__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.impact__photo { margin: 0; position: relative; }
.impact__photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 78%; border-radius: var(--r); box-shadow: var(--sc-e3); }
.principles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.6rem clamp(2rem, 5vw, 5rem); align-items: start; }
.principles > .h-sm { grid-column: 1 / -1; }
.principles__photo { margin: 0; }
.principles__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e2); }
.principles .principles__list { margin: 0; }
.donate { grid-template-columns: clamp(9rem, 14vw, 13rem) minmax(0, 1.1fr) minmax(0, 1fr); padding-inline-start: 0; padding-block: 0; }
.donate__photo { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.donate__copy, .donate__action { padding-block: clamp(1.75rem, 3.5vw, 3rem); }
.donate::before { inset-inline-start: clamp(9rem, 14vw, 13rem); }
@media (max-width: 1100px) {
  .impact__top, .principles { grid-template-columns: 1fr; }
  .principles__photo img { aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .donate { grid-template-columns: 1fr; padding: 0 0 1.75rem; }
  .donate__photo { height: 11rem; min-height: 0; object-position: 50% 40%; }
  .donate__copy, .donate__action { padding: 0 1.5rem; }
  .donate__copy { padding-top: 1.5rem; }
  .donate::before { inset-inline: 0; }
}
.focus__item:nth-child(2) img { object-position: 24% 50%; }

/* ---- need: destroyed campus set against training that continues ---- */
.contrast { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.contrast figure { margin: 0; }
.contrast__then { grid-column: 1 / span 8; grid-row: 1; }
.contrast__then img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); filter: grayscale(.55) contrast(1.02); }
.contrast__now { grid-column: 7 / -1; grid-row: 1; z-index: 1; translate: 0 clamp(1.5rem, 4vw, 3.5rem); }
.contrast__now img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e3); outline: 6px solid var(--petrol); }
.contrast figcaption { margin-top: .8rem; font-size: .88rem; color: var(--sc-ink-soft); max-width: 40ch; }
.contrast__now figcaption { color: var(--sc-ink); }
#need { padding-bottom: clamp(7rem, 13vw, 12rem); }

/* ---- close: photographs in the open side ---- */
.close__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); justify-items: start; align-items: start; }
.close__inner > * { grid-column: 1; }
.close__photos { grid-column: 2; grid-row: 1 / span 6; align-self: center; justify-self: stretch; position: relative; aspect-ratio: 1 / 1.08; max-height: 40rem; margin-inline-start: auto; width: 100%; }
.close__photo { position: absolute; object-fit: cover; border-radius: var(--r); box-shadow: var(--sc-e3); }
.close__photo--a { inset-block-start: 0; inset-inline-end: 0; width: 66%; height: 82%; }
.close__photo--b { inset-block-end: 0; inset-inline-start: 0; width: 58%; height: 44%; outline: 6px solid var(--petrol); }
.close__inner > .colophon { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .contrast__then { grid-column: 1 / span 10; }
  .contrast__now { grid-column: 5 / -1; }
  .close__inner { grid-template-columns: 1fr; }
  .close__photos { grid-column: 1; grid-row: auto; max-width: 30rem; margin: 2rem 0 0; aspect-ratio: 1 / .9; }
}
@media (max-width: 600px) {
  .contrast { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
  .contrast__then, .contrast__now { grid-column: 1; grid-row: auto; translate: none; }
  .contrast__now { margin-inline-start: 12%; margin-top: -3.5rem; }
  #need { padding-bottom: clamp(5rem, 10vw, 9.5rem); }
}

/* ---- support paths: hover / focus animation ----
   The card lifts, a sutured seam stitches itself across the top edge, and the
   button nudges forward. Keyboard focus gets the same treatment. */
.path { position: relative; overflow: hidden; transition: transform 320ms var(--sc-ease-out), box-shadow 320ms var(--sc-ease-out), opacity 620ms var(--sc-ease-out); }
.path::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--edge) 0 22px, transparent 22px 30px);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--sc-ease-out);
}
:root[dir="rtl"] .path::before { transform-origin: 100% 50%; }
.path::after { /* a soft light that follows the lift */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 80% at 20% 0%, rgba(108,201,194,.16), transparent 70%);
  transition: opacity 320ms var(--sc-ease-out);
}
.path > * { position: relative; z-index: 1; }
.path .h-sm { transition: transform 320ms var(--sc-ease-out); }
.path .btn { transition: transform 320ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.path .btn::after { content: "→"; display: inline-block; margin-inline-start: 0; width: 0; opacity: 0; overflow: hidden; transition: width 320ms var(--sc-ease-out), opacity 320ms var(--sc-ease-out), margin 320ms var(--sc-ease-out); }
:root[dir="rtl"] .path .btn::after { content: "←"; }
@media (hover: hover) and (pointer: fine) {
  .path.sc-in:hover { transform: translateY(-8px); box-shadow: 0 6px 12px hsl(var(--sc-shadow-color) / .12), 0 26px 50px -12px hsl(var(--sc-shadow-color) / .32); }
  .path:hover::before { transform: scaleX(1); }
  .path:hover::after { opacity: 1; }
  .path:hover .h-sm { transform: translateX(4px); }
  :root[dir="rtl"] .path:hover .h-sm { transform: translateX(-4px); }
  .path:hover .btn::after { width: 1em; opacity: 1; margin-inline-start: .5rem; }
}
.path:focus-within { transform: translateY(-8px); }
.path:focus-within::before { transform: scaleX(1); }
.path:focus-within .btn::after { width: 1em; opacity: 1; margin-inline-start: .5rem; }
@media (prefers-reduced-motion: reduce) {
  .path, .path.sc-in:hover, .path:focus-within { transform: none; }
  .path::before { transition: none; }
}