/**
 * Ghada Ataa — About page: "Inside Ghada's World".
 * An editorial journal built from typography, paper, books and abstract shapes — no portraits.
 * Every section uses the shared container edges (same as .ga-navbar / .ga-hero).
 */
.ga-about > section > .ga-container {
  padding-inline: min(var(--ga-page-margin), var(--ga-space-400));
  max-inline-size: calc(var(--ga-layout-max-width-wide) + 2 * var(--ga-space-400));
}
.ga-about > section { padding-block: 0 var(--ga-section-space); }
.ga-about > .ga-ab-hero { padding-block: var(--ga-section-space); }
.ga-ab-world { scroll-margin-block-start: var(--ga-space-300); outline: none; }

/* ── Shared editorial pieces ── */
.ga-ab-eyebrow {
  display: inline-flex; align-items: center; gap: var(--ga-space-100);
  margin: 0;
  font: var(--ga-type-label-default);
  color: var(--ga-color-brand-vivid-purple);
}
.ga-ab-eyebrow--light { color: var(--ga-color-accent-fresh-lime); }
.ga-ab-eyebrow__num {
  display: inline-grid; place-items: center;
  min-inline-size: 32px; block-size: 24px; padding-inline: var(--ga-space-50);
  border: 1.5px solid currentColor; border-radius: var(--ga-radius-pill);
  font-size: 12px; letter-spacing: .04em;
}
.ga-ab-star { color: var(--ga-color-brand-electric-orange); }

.ga-ab-head { container-type: inline-size; display: grid; gap: var(--ga-space-100); margin-block-end: var(--ga-space-500); }
.ga-ab-head--center { justify-items: center; text-align: center; }
.ga-ab-title { margin: 0; font: var(--ga-type-heading-h1); font-size: min(var(--ga-type-heading-h1-font-size), 6.4cqi); white-space: nowrap; }
.ga-ab-lead { margin: 0; font: var(--ga-type-body-large); color: var(--ga-text-muted); max-inline-size: 60ch; }

/* highlighter: draws in from the right when its section is read */
.ga-ab-mark {
  color: inherit;
  background: linear-gradient(var(--ga-color-accent-fresh-lime), var(--ga-color-accent-fresh-lime)) right 88% / 0% 42% no-repeat;
  padding-inline: .08em;
  transition: background-size 900ms cubic-bezier(.2,.7,.2,1) 200ms;
}
.ga-ab-mark--pink { background-image: linear-gradient(color-mix(in srgb, var(--ga-color-accent-pop-pink) 38%, transparent), color-mix(in srgb, var(--ga-color-accent-pop-pink) 38%, transparent)); }
.ga-ab-mark.is-in { background-size: 100% 42%; }

/* ═════════ 01 · Editorial hero ═════════ */
.ga-ab-hero__frame {
  position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--ga-space-400);
  padding: var(--ga-space-800);
  border-radius: var(--ga-radius-hero);
  background-color: color-mix(in srgb, var(--ga-color-surface-warm-paper) 55%, var(--ga-color-functional-white));
  /* very subtle paper grain + faint ruled lines */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .11 0 0 0 0 .19 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom, transparent 0 39px, var(--ga-color-text-deep-ink-06) 39px 40px);
  box-shadow: inset 0 0 0 1px var(--ga-color-text-deep-ink-10);
}
@supports (corner-shape: superellipse(1.5)) { .ga-ab-hero__frame { corner-shape: superellipse(1.5); } }
.ga-ab-hero__ghost {                                  /* oversized typographic cutout behind everything */
  position: absolute; z-index: -1;
  inset-block-end: -.32em; inset-inline-start: -.04em;
  font-weight: 700; font-size: min(300px, 30cqi); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ga-color-brand-vivid-purple) 22%, transparent);
  pointer-events: none; user-select: none;
}
.ga-ab-hero__text { position: relative; z-index: 2; display: grid; justify-items: start; gap: var(--ga-space-300); }
.ga-ab-hero__title {
  margin: 0;
  font: var(--ga-type-display-hero);
  font-size: min(var(--ga-type-display-hero-font-size), 8.4cqi);
  white-space: nowrap;
  inline-size: max-content;                           /* may run over the art's empty top corner: editorial overlap */
}
.ga-ab-hero__title .ga-ab-mark { color: var(--ga-color-brand-vivid-purple); }
.ga-ab-hero__lead { margin: 0; font: var(--ga-type-body-large); color: var(--ga-text-muted); max-inline-size: 44ch; }
.ga-ab-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ga-space-200); margin-block-start: var(--ga-space-100); }

/* the composition */
.ga-ab-hero__art { position: relative; margin: 0; min-block-size: 440px; display: grid; place-items: center; padding-block-start: var(--ga-space-800); }
.ga-ab-shape { position: absolute; pointer-events: none; }
.ga-ab-shape--sun { inline-size: 200px; aspect-ratio: 1; border-radius: 50%; background: var(--ga-color-accent-fresh-lime); inset-block-start: 40px; inset-inline-end: 4%; }
.ga-ab-shape--arch { inline-size: 150px; aspect-ratio: 2 / 1; border-radius: 150px 150px 0 0; background: var(--ga-color-brand-electric-orange); inset-block-end: 6px; inset-inline-start: 2%; }
.ga-ab-shape--dot { inline-size: 28px; aspect-ratio: 1; border-radius: 50%; background: var(--ga-color-brand-vivid-purple); inset-block-end: 34%; inset-inline-end: 0; }
.ga-ab-book { position: relative; inline-size: min(100%, 460px); block-size: auto; filter: drop-shadow(0 24px 32px rgba(38, 29, 48, .18)); }
.ga-ab-book__ribbon { transform-origin: 50% 0; }

.ga-ab-notes { position: absolute; inset: 0; pointer-events: none; }
.ga-ab-note {
  position: absolute; display: grid; gap: 2px;
  max-inline-size: 190px; padding: var(--ga-space-100) var(--ga-space-200);
  border-radius: var(--ga-radius-sm);
  font: var(--ga-type-body-small);
  box-shadow: 0 10px 24px rgba(38, 29, 48, .14);
}
.ga-ab-note b { font: var(--ga-type-heading-h4); }
.ga-ab-note--paper { inset-block-end: 12%; inset-inline-end: 0; rotate: -6deg; background: var(--ga-color-functional-white); color: var(--ga-text-primary); }
.ga-ab-note--purple { inset-block-end: 4%; inset-inline-start: 6%; rotate: 4deg; background: var(--ga-color-brand-vivid-purple); color: var(--ga-color-functional-white); }
.ga-ab-note--purple b { font-size: 16px; letter-spacing: .06em; }
.ga-ab-note--lime { inset-block-start: 6%; inset-inline-end: 30%; rotate: 3deg; background: var(--ga-color-text-deep-ink); color: var(--ga-color-functional-white); }
.ga-ab-note--lime b { color: var(--ga-color-accent-fresh-lime); }
.ga-ab-scribble {
  position: absolute; inset-block-start: 20%; inset-inline-start: 4%;
  display: flex; align-items: flex-start; gap: 4px;
  font-family: "Aref Ruqaa", var(--ga-font-family); font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--ga-color-accent-pop-pink); rotate: -8deg;
}
.ga-ab-scribble { flex-direction: column; align-items: center; }
.ga-ab-scribble svg { inline-size: 56px; block-size: 38px; margin-block-start: 4px; }

/* entrance: the book settles and the notes are pinned, once */
@media (prefers-reduced-motion: no-preference) {
  .ga-ab-book { animation: ga-ab-settle 900ms cubic-bezier(.2,.7,.2,1) both; }
  .ga-ab-note, .ga-ab-scribble { animation: ga-ab-pin 600ms cubic-bezier(.3,1.4,.5,1) both; }
  .ga-ab-note--lime { animation-delay: 350ms; }
  .ga-ab-note--paper { animation-delay: 500ms; }
  .ga-ab-note--purple { animation-delay: 650ms; }
  .ga-ab-scribble { animation-delay: 900ms; }
}
@keyframes ga-ab-settle { from { opacity: 0; translate: 0 24px; rotate: -3deg; } }
@keyframes ga-ab-pin { from { opacity: 0; scale: .8; } }

/* ═════════ 02 · Four doors, magazine spread ═════════ */
.ga-ab-lead--line { max-inline-size: none; }
@media (min-width: 1024px) { .ga-ab-lead--line { white-space: nowrap; font-size: min(var(--ga-type-body-large-font-size), 1.62cqi); } }

.ga-ab-spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ga-space-300); }
.ga-ab-door {
  --_ink: var(--ga-text-primary);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--ga-space-100);
  padding: var(--ga-space-400);
  border-radius: var(--ga-radius-card);
  color: var(--_ink); text-decoration: none;
  transition: translate var(--ga-motion-duration-base) ease, box-shadow var(--ga-motion-duration-base) ease;
}
.ga-ab-door:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(38, 29, 48, .14); }
.ga-ab-door:focus-visible { outline: var(--ga-focus-ring-width) solid var(--ga-border-focus); outline-offset: 4px; }
.ga-ab-door__num { font-size: 12px; font-weight: 700; letter-spacing: .08em; opacity: .7; }
.ga-ab-door__en { position: absolute; inset-block-start: var(--ga-space-400); left: var(--ga-space-400); font-size: 12px; font-weight: 700; letter-spacing: .18em; opacity: .7; }
.ga-ab-door__title { font: var(--ga-type-heading-h2); }
.ga-ab-door__text { font: var(--ga-type-body-default); max-inline-size: 36ch; opacity: .88; }
.ga-ab-door__cta {
  display: inline-flex; align-items: center; gap: var(--ga-space-100);
  margin-block-start: auto; padding-block-start: var(--ga-space-200);
  font: var(--ga-type-label-default); font-weight: 700;
}
.ga-ab-door__cta svg { inline-size: 20px; block-size: 20px; transition: translate var(--ga-motion-duration-base) ease; }
.ga-ab-door:hover .ga-ab-door__cta svg { translate: -6px 0; }

/* 01 books: a journal page, the biggest door, with the real cover of «الشرنقة» */
.ga-ab-door--books {
  grid-column: span 7; grid-row: span 2; min-block-size: 460px;
  padding-inline-end: 44%;
  background: var(--ga-color-functional-white);
  box-shadow: inset 0 0 0 1.5px var(--ga-color-text-deep-ink);
}
.ga-ab-door--books .ga-ab-door__title { font: var(--ga-type-display-hero); }
.ga-ab-door--books .ga-ab-door__en { color: var(--ga-color-brand-electric-orange); opacity: 1; }
.ga-ab-door--books .ga-ab-door__cta { color: var(--ga-color-brand-vivid-purple); }
.ga-ab-door__cover {
  position: absolute; z-index: -1;
  inset-block-end: -28px; inset-inline-end: 7%;
  inline-size: 36%; max-inline-size: 220px;
  rotate: -7deg;
  border-radius: 4px 10px 10px 4px; overflow: hidden;
  box-shadow: -14px 18px 0 var(--ga-color-accent-pop-pink), 0 24px 40px rgba(38, 29, 48, .25);
  transition: rotate var(--ga-motion-duration-base) ease;
}
.ga-ab-door__cover img { display: block; inline-size: 100%; block-size: auto; }
.ga-ab-door--books:hover .ga-ab-door__cover { rotate: -3deg; }
.ga-ab-door--books::before {                          /* orange arch behind the cover */
  content: ""; position: absolute; z-index: -2;
  inset-block-start: 22%; inset-inline-end: -6%;
  inline-size: 46%; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--ga-color-brand-electric-orange) 20%, transparent);
}

/* 02 courses: Vivid Purple, with the real course titles as a typeset list */
.ga-ab-door--courses { --_ink: var(--ga-color-functional-white); grid-column: span 5; background: var(--ga-color-brand-vivid-purple); }
.ga-ab-door__list { display: grid; gap: 2px; margin-block-start: var(--ga-space-100); font: var(--ga-type-body-small); }
.ga-ab-door__list span::before { content: "— "; color: var(--ga-color-accent-fresh-lime); }

/* 03 challenges: Fresh Lime, a week of reading days */
.ga-ab-door--challenges { grid-column: span 5; background: var(--ga-color-accent-fresh-lime); }
.ga-ab-door__ring { display: flex; gap: 6px; margin-block-start: var(--ga-space-100); }
.ga-ab-door__ring i { inline-size: 22px; block-size: 22px; border-radius: 6px; border: 2px solid var(--ga-color-text-deep-ink); }
.ga-ab-door__ring i:nth-child(-n+4) { background: var(--ga-color-text-deep-ink); }
.ga-ab-door__ring i:nth-child(4) { background: var(--ga-color-accent-pop-pink); border-color: var(--ga-color-accent-pop-pink); }

/* 04 podcast: Deep Ink strip with a sound wave */
.ga-ab-door--podcast {
  --_ink: var(--ga-color-functional-white);
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center;
  column-gap: var(--ga-space-300);
  background: var(--ga-color-text-deep-ink);
}
.ga-ab-door--podcast .ga-ab-door__en { position: static; grid-row: 2; grid-column: 1; color: var(--ga-color-accent-pop-pink); opacity: 1; }
.ga-ab-door--podcast .ga-ab-door__num { grid-row: 1; grid-column: 1; }
.ga-ab-door--podcast .ga-ab-door__title { grid-row: 1 / span 2; grid-column: 2; }
.ga-ab-door--podcast .ga-ab-door__text { grid-row: 3; grid-column: 1 / 3; }
.ga-ab-door--podcast .ga-ab-door__wave { grid-row: 1 / span 3; grid-column: 3; }
.ga-ab-door--podcast .ga-ab-door__cta { grid-row: 1 / span 3; grid-column: 4; margin: 0; padding: 0; color: var(--ga-color-accent-fresh-lime); }
.ga-ab-door__wave { display: flex; align-items: center; gap: 4px; block-size: 72px; }
.ga-ab-door__wave i { flex: 1; max-inline-size: 6px; border-radius: 3px; background: var(--ga-gradient-editorial-pop); block-size: calc(var(--h) * 1%); }

/* ═════════ 03 · The joy of reading ═════════ */
.ga-ab-read__grid {
  container-type: inline-size;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "title title" "text page";
  gap: var(--ga-space-500) var(--ga-space-800);
  align-items: center;
}
.ga-ab-read__head { grid-area: title; display: grid; gap: var(--ga-space-100); }
.ga-ab-read__title { margin: 0; font: var(--ga-type-display-hero); font-size: min(var(--ga-type-display-hero-font-size), 5.3cqi); white-space: nowrap; }
.ga-ab-read__text { grid-area: text; display: grid; justify-items: start; gap: var(--ga-space-300); }
.ga-ab-read__text .ga-ab-lead { font-size: var(--ga-type-heading-h4-font-size); line-height: 1.7; color: var(--ga-text-primary); }

.ga-ab-page { grid-area: page; position: relative; isolation: isolate; padding: var(--ga-space-200); }
.ga-ab-page__sheet { position: absolute; inset: var(--ga-space-200); z-index: -1; border-radius: var(--ga-radius-sm); }
.ga-ab-page__sheet--1 { background: var(--ga-color-accent-pop-pink); rotate: -4deg; }
.ga-ab-page__sheet--2 { background: var(--ga-color-brand-electric-orange); rotate: 2.5deg; }
.ga-ab-page__body {
  padding: var(--ga-space-500);
  padding-inline-start: 64px;                         /* clears the pink margin rule on the reading edge */
  border-radius: var(--ga-radius-sm);
  background:
    linear-gradient(to right, transparent 0 calc(100% - 36px), color-mix(in srgb, var(--ga-color-accent-pop-pink) 45%, transparent) calc(100% - 36px) calc(100% - 35px), transparent calc(100% - 35px)),
    var(--ga-color-functional-white);
  box-shadow: 0 20px 44px rgba(38, 29, 48, .16);
}
.ga-ab-page__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ga-space-200); margin: 0 0 var(--ga-space-200); padding-block-end: var(--ga-space-200); border-block-end: 2px solid var(--ga-color-text-deep-ink); font: var(--ga-type-heading-h3); }
.ga-ab-page__title small { font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ab-index { columns: 2; column-gap: var(--ga-space-400); margin: 0; padding: 0; list-style: none; }
.ga-ab-index__item {
  display: flex; align-items: baseline; gap: var(--ga-space-100);
  break-inside: avoid; padding-block: 5px;
  border-block-end: 1px dashed var(--ga-color-text-deep-ink-10);
  font: var(--ga-type-body-small); font-weight: 600;
}
.ga-ab-index__n { flex: none; inline-size: 20px; font-size: 11px; font-weight: 700; color: var(--ga-color-brand-electric-orange); }
.ga-ab-index__item.is-novel .ga-ab-index__title { text-decoration: underline 3px color-mix(in srgb, var(--ga-color-accent-pop-pink) 55%, transparent); text-underline-offset: 5px; }
.ga-ab-index__link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ga-space-100); color: inherit; text-decoration: none; border-radius: 4px; }
.ga-ab-index__link .ga-ab-index__title { background: var(--ga-color-accent-fresh-lime); padding-inline: 4px; }
.ga-ab-index__tag { font-size: 11px; font-weight: 700; color: var(--ga-color-brand-vivid-purple); }
.ga-ab-index__link:hover .ga-ab-index__tag { text-decoration: underline; }
.ga-ab-page__note { display: flex; align-items: center; gap: var(--ga-space-100); margin: var(--ga-space-200) 0 0; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ab-page__key { inline-size: 24px; block-size: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ga-color-accent-pop-pink) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ga-ab-read .ga-ab-index__item { opacity: 0; translate: 8px 0; transition: opacity 400ms ease, translate 400ms ease; transition-delay: calc(var(--i) * 35ms); }
  .ga-ab-read.is-in .ga-ab-index__item { opacity: 1; translate: 0 0; }
}

/* ═════════ 04 · From reading to learning ═════════ */
.ga-ab-path__panel {
  --ga-focus-ring-color: var(--ga-color-functional-white);
  position: relative; isolation: isolate; overflow: hidden;
  padding: var(--ga-space-800);
  border-radius: 32px;
  background: var(--ga-color-text-deep-ink);
  color: var(--ga-color-functional-white);
}
.ga-ab-path__panel .ga-ab-lead { color: color-mix(in srgb, var(--ga-color-functional-white) 74%, transparent); }
.ga-ab-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ga-space-400); margin: 0; padding: 0; list-style: none; }
.ga-ab-steps::before {                                 /* the fine connecting line, through every mark */
  content: ""; position: absolute; z-index: -1;
  inset-block-start: 24px; inset-inline: 24px calc(25% - 24px);
  border-block-start: 1.5px dashed color-mix(in srgb, var(--ga-color-functional-white) 40%, transparent);
}
.ga-ab-step { display: grid; justify-items: start; gap: var(--ga-space-100); }
.ga-ab-step__mark { position: relative; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--ga-color-text-deep-ink); box-shadow: 0 0 0 6px var(--ga-color-text-deep-ink); margin-block-end: var(--ga-space-200); }
.ga-ab-step__mark::before { content: ""; }
.ga-ab-step--read .ga-ab-step__mark::before { inline-size: 30px; block-size: 22px; border-radius: 2px 6px 6px 2px; background: linear-gradient(90deg, var(--ga-color-brand-electric-orange) 0 46%, transparent 46% 54%, var(--ga-color-brand-electric-orange) 54%); }
.ga-ab-step--learn .ga-ab-step__mark::before { inline-size: 30px; aspect-ratio: 1; border-radius: 50%; background: var(--ga-color-brand-vivid-purple); box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--ga-color-functional-white) 30%, transparent); }
.ga-ab-step--keep .ga-ab-step__mark::before { inline-size: 26px; aspect-ratio: 1; border-radius: 50%; border: 5px solid var(--ga-color-accent-fresh-lime); border-inline-start-color: transparent; }
.ga-ab-step--listen .ga-ab-step__mark::before { inline-size: 30px; block-size: 24px; background: linear-gradient(90deg, var(--ga-color-accent-pop-pink) 0 4px, transparent 4px 9px, var(--ga-color-accent-pop-pink) 9px 13px, transparent 13px 18px, var(--ga-color-accent-pop-pink) 18px 22px, transparent 22px 26px, var(--ga-color-accent-pop-pink) 26px); mask: linear-gradient(transparent 30%, #000 30% 70%, transparent 70%) 0 0 / 4px 100% no-repeat, linear-gradient(transparent 0, #000 0) 9px 0 / 4px 100% no-repeat, linear-gradient(transparent 20%, #000 20% 80%, transparent 80%) 18px 0 / 4px 100% no-repeat, linear-gradient(transparent 40%, #000 40% 60%, transparent 60%) 26px 0 / 4px 100% no-repeat; }
.ga-ab-step__verb { font: var(--ga-type-heading-h2); }
.ga-ab-step--read .ga-ab-step__verb { color: var(--ga-color-brand-electric-orange); }
.ga-ab-step--learn .ga-ab-step__verb { color: #B9A6FF; }                 /* Vivid Purple lifted for contrast on Deep Ink */
.ga-ab-step--keep .ga-ab-step__verb { color: var(--ga-color-accent-fresh-lime); }
.ga-ab-step--listen .ga-ab-step__verb { color: var(--ga-color-accent-pop-pink); }
.ga-ab-step__text { margin: 0; font: var(--ga-type-body-default); color: color-mix(in srgb, var(--ga-color-functional-white) 80%, transparent); }
.ga-ab-step__link { font: var(--ga-type-label-default); font-weight: 700; color: var(--ga-color-functional-white); text-decoration: underline 1.5px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--ga-color-functional-white) 40%, transparent); border-radius: 4px; }
.ga-ab-step__link:hover { text-decoration-color: currentColor; }
.ga-ab-step__link:focus-visible { outline: 2px solid var(--ga-color-functional-white); outline-offset: 3px; }
.ga-ab-path__cta { display: flex; justify-content: center; margin-block-start: var(--ga-space-600); }

/* ═════════ 05 · Notes, a magazine spread ═════════ */
.ga-ab-mag { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--ga-space-500); align-items: stretch; }
.ga-ab-feature {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: start; gap: var(--ga-space-200); align-content: end;
  block-size: 100%; min-block-size: 380px;
  padding: var(--ga-space-500);
  border-radius: var(--ga-radius-card);
  background: var(--ga-color-functional-white);
  box-shadow: inset 0 0 0 1.5px var(--ga-color-text-deep-ink);
}
.ga-ab-feature__quote { position: absolute; z-index: -1; inset-block-start: -.02em; inset-inline-start: var(--ga-space-300); font-size: 260px; line-height: 1; font-weight: 700; background: var(--ga-gradient-editorial-pop); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; }
.ga-ab-feature__meta { display: flex; align-items: center; gap: var(--ga-space-200); margin: 0; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ab-feature__title { margin: 0; font: var(--ga-type-heading-h2); }
.ga-ab-feature__title a { color: inherit; text-decoration: none; border-radius: 4px; }
.ga-ab-feature__title a:hover { text-decoration: underline 2px; text-underline-offset: 8px; }
.ga-ab-feature__excerpt { margin: 0 0 var(--ga-space-100); padding-inline-start: var(--ga-space-300); border-inline-start: 4px solid var(--ga-color-accent-fresh-lime); font: var(--ga-type-heading-h4); font-weight: 500; line-height: 1.75; max-inline-size: 40ch; }
.ga-ab-feature__excerpt p { margin: 0; }

.ga-ab-label { display: inline-flex; align-items: center; block-size: 26px; padding-inline: 10px; border-radius: var(--ga-radius-pill); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; color: var(--ga-text-primary); }
.ga-ab-label--relationships { background: color-mix(in srgb, var(--ga-color-accent-pop-pink) 22%, transparent); }
.ga-ab-label--positive { background: color-mix(in srgb, var(--ga-color-brand-electric-orange) 26%, transparent); }
.ga-ab-label--spirituals { background: var(--ga-color-brand-vivid-purple-12); color: var(--ga-color-brand-vivid-purple); }
.ga-ab-label--podcast { background: var(--ga-color-text-deep-ink); color: var(--ga-color-accent-fresh-lime); }
a.ga-ab-label:hover { text-decoration: underline; }

.ga-ab-mag__list { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: 2px solid var(--ga-color-text-deep-ink); }
.ga-ab-mag__item { border-block-end: 1px solid var(--ga-color-text-deep-ink-10); }
.ga-ab-mag__link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label arrow" "title arrow" "meta arrow";
  justify-items: start; row-gap: 4px; column-gap: var(--ga-space-200);
  padding-block: var(--ga-space-200); color: inherit; text-decoration: none; border-radius: var(--ga-radius-sm);
}
.ga-ab-mag__link .ga-ab-label { grid-area: label; }
.ga-ab-mag__title { grid-area: title; font: var(--ga-type-heading-h4); }
.ga-ab-mag__meta { grid-area: meta; font: var(--ga-type-body-small); color: var(--ga-text-muted); }
.ga-ab-mag__arrow { grid-area: arrow; align-self: center; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--ga-radius-sm); background: var(--ga-color-text-deep-ink-06); transition: background-color var(--ga-motion-duration-fast) ease, color var(--ga-motion-duration-fast) ease; }
.ga-ab-mag__arrow svg { inline-size: 20px; block-size: 20px; }
.ga-ab-mag__link:hover .ga-ab-mag__arrow { background: var(--ga-color-brand-vivid-purple); color: var(--ga-color-functional-white); }
.ga-ab-mag__link:hover .ga-ab-mag__title { color: var(--ga-color-brand-vivid-purple); }
.ga-ab-mag__empty { margin: 0; font: var(--ga-type-body-large); color: var(--ga-text-muted); }

/* ═════════ 06 · Closing brand moment ═════════ */
.ga-ab-close__panel {
  --ga-focus-ring-color: var(--ga-color-functional-white);
  position: relative; isolation: isolate; overflow: hidden;
  container-type: inline-size;
  display: grid; justify-items: center; gap: var(--ga-space-200); text-align: center;
  padding: var(--ga-space-1000) var(--ga-space-800);
  border-radius: 32px;
  background: var(--ga-color-brand-vivid-purple);
  color: var(--ga-color-functional-white);
}
.ga-ab-close__shape { position: absolute; z-index: -1; pointer-events: none; }
.ga-ab-close__shape--a { inline-size: 260px; aspect-ratio: 1; border-radius: 50%; background: var(--ga-color-brand-electric-orange); inset-block-start: -110px; inset-inline-start: -70px; }
.ga-ab-close__shape--b { inline-size: 220px; aspect-ratio: 2 / 1; border-radius: 220px 220px 0 0; background: var(--ga-color-accent-pop-pink); inset-block-end: 0; inset-inline-end: 6%; }
.ga-ab-close__title { margin: 0; font: var(--ga-type-display-hero); font-size: min(var(--ga-type-heading-h1-font-size), 5.4cqi); white-space: nowrap; }
.ga-ab-close__title span { color: var(--ga-color-accent-fresh-lime); }
.ga-ab-close__lead { margin: 0; font: var(--ga-type-body-large); color: color-mix(in srgb, var(--ga-color-functional-white) 86%, transparent); }
.ga-ab-close__doors { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ga-space-200); margin-block-start: var(--ga-space-300); }

/* ═════════ Tablet ═════════ */
@media (max-width: 1199px) {
  .ga-ab-hero__frame { grid-template-columns: minmax(0, 1fr); padding: var(--ga-space-600) var(--ga-space-500); border-radius: 32px; }
  .ga-ab-hero__title { inline-size: auto; }
  .ga-ab-hero__lead { max-inline-size: 56ch; }
  .ga-ab-hero__art { min-block-size: 400px; padding-block-start: var(--ga-space-300); }
  .ga-ab-door--books { grid-column: 1 / -1; grid-row: auto; min-block-size: 380px; }
  .ga-ab-door--courses, .ga-ab-door--challenges { grid-column: span 6; }
  .ga-ab-door--podcast { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ga-ab-door--podcast .ga-ab-door__wave { grid-row: 4; grid-column: 1 / -1; margin-block-start: var(--ga-space-200); }
  .ga-ab-door--podcast .ga-ab-door__cta { grid-column: 3; }
  .ga-ab-read__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "page"; gap: var(--ga-space-400); }
  .ga-ab-path__panel, .ga-ab-close__panel { padding: var(--ga-space-600) var(--ga-space-500); border-radius: 28px; }
  .ga-ab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ga-space-500); }
  .ga-ab-steps::before { display: none; }
  .ga-ab-mag { grid-template-columns: minmax(0, 1fr); }
  .ga-ab-feature { min-block-size: 320px; }
}

/* ═════════ Mobile: recomposed, not shrunk ═════════ */
@media (max-width: 767px) {
  .ga-ab-hero__frame { padding: var(--ga-space-500) var(--ga-space-300) var(--ga-space-300); border-radius: 24px; gap: var(--ga-space-300); }
  .ga-ab-hero__title { white-space: normal; font-size: var(--ga-type-heading-h1-font-size); line-height: var(--ga-type-heading-h1-line-height); }
  .ga-ab-hero__lead { font: var(--ga-type-body-default); }
  .ga-ab-hero__actions { inline-size: 100%; }
  .ga-ab-hero__actions .ga-btn { flex: 1 1 100%; }
  .ga-ab-hero__ghost { font-size: 160px; inset-block-end: auto; inset-block-start: 52%; }   /* sits behind the book, clear of the CTAs */
  /* the art becomes a column: the book, then the notes laid out like pinned slips */
  .ga-ab-hero__art { min-block-size: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ga-space-200); }
  .ga-ab-shape--sun { inline-size: 120px; inset-block-start: 0; }
  .ga-ab-shape--arch { inline-size: 100px; inset-block-end: auto; inset-block-start: 150px; }
  .ga-ab-shape--dot { inset-block-start: 10px; }
  .ga-ab-book { margin-block-start: var(--ga-space-300); }
  .ga-ab-notes { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ga-space-100); }
  .ga-ab-note { position: static; max-inline-size: none; }
  .ga-ab-note--paper { rotate: -2deg; box-shadow: 0 8px 18px rgba(38, 29, 48, .12), inset 0 0 0 1px var(--ga-color-text-deep-ink-10); }
  .ga-ab-note--purple { rotate: 1.5deg; }
  .ga-ab-note--lime { rotate: 2deg; }
  .ga-ab-scribble { display: none; }

  .ga-ab-head { margin-block-end: var(--ga-space-300); }
  .ga-ab-title { white-space: normal; font: var(--ga-type-heading-h2); }
  .ga-ab-lead { font: var(--ga-type-body-default); }
  .ga-ab-spread { gap: var(--ga-space-200); }
  .ga-ab-door { padding: var(--ga-space-300); }
  .ga-ab-door__en { inset-block-start: var(--ga-space-300); left: var(--ga-space-300); }
  .ga-ab-door--books { min-block-size: 0; padding-inline-end: var(--ga-space-300); padding-block-end: 220px; }
  .ga-ab-door--books .ga-ab-door__title { font: var(--ga-type-heading-h1); }
  .ga-ab-door__cover { inline-size: 132px; inset-inline: 0; margin-inline: auto; inset-block-end: -36px; }
  .ga-ab-door--books::before { inset-block-start: auto; inset-block-end: -20%; inset-inline-end: 20%; inline-size: 70%; }
  .ga-ab-door--courses, .ga-ab-door--challenges { grid-column: 1 / -1; }
  .ga-ab-door--podcast { grid-template-columns: minmax(0, 1fr) auto; }
  .ga-ab-door--podcast .ga-ab-door__title { grid-row: 2; grid-column: 1; }
  .ga-ab-door--podcast .ga-ab-door__en { grid-row: 1; grid-column: 2; justify-self: end; }
  .ga-ab-door--podcast .ga-ab-door__text { grid-row: 3; grid-column: 1 / -1; }
  .ga-ab-door--podcast .ga-ab-door__cta { grid-row: 5; grid-column: 1 / -1; margin-block-start: var(--ga-space-200); }

  .ga-ab-read__title { white-space: normal; font: var(--ga-type-heading-h1); }
  .ga-ab-read__text .ga-ab-lead { font: var(--ga-type-body-large); }
  .ga-ab-read__text .ga-btn { inline-size: 100%; }
  .ga-ab-page { padding: var(--ga-space-100); }
  .ga-ab-page__sheet { inset: var(--ga-space-100); }
  .ga-ab-page__sheet--1 { rotate: -1.6deg; }          /* the list is tall here: smaller tilts keep the corners inside the gutter */
  .ga-ab-page__sheet--2 { rotate: 1deg; }
  .ga-ab-page__body { padding: var(--ga-space-300) var(--ga-space-200); padding-inline-start: 52px; }
  .ga-ab-page__title { flex-direction: column; gap: 0; }
  .ga-ab-index { columns: 1; }

  /* the journey turns into a vertical narrative along a line on the reading edge */
  .ga-ab-path__panel, .ga-ab-close__panel { padding: var(--ga-space-500) var(--ga-space-300); border-radius: 24px; }
  .ga-ab-head--center { justify-items: start; text-align: start; }
  .ga-ab-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--ga-space-400); }
  .ga-ab-steps::before { display: block; inset-block: 24px 24px; inset-inline: 23px auto; border-block-start: 0; border-inline-start: 1.5px dashed color-mix(in srgb, var(--ga-color-functional-white) 40%, transparent); }
  .ga-ab-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--ga-space-200); row-gap: 4px; }
  .ga-ab-step__mark { grid-row: 1 / span 3; margin: 0; }
  .ga-ab-step__verb { font: var(--ga-type-heading-h3); }
  .ga-ab-path__cta { justify-content: stretch; margin-block-start: var(--ga-space-400); }
  .ga-ab-path__cta .ga-btn { inline-size: 100%; }

  .ga-ab-feature { min-block-size: 0; padding: var(--ga-space-300); padding-block-start: var(--ga-space-800); }
  .ga-ab-feature__quote { font-size: 180px; }
  .ga-ab-feature__title { font: var(--ga-type-heading-h3); }
  .ga-ab-feature__excerpt { font: var(--ga-type-body-large); }
  .ga-ab-feature .ga-btn { inline-size: 100%; }

  .ga-ab-close__panel { justify-items: stretch; text-align: start; }
  .ga-ab-close__title { white-space: normal; font: var(--ga-type-heading-h1); }
  .ga-ab-close__doors { flex-direction: column; }
  .ga-ab-close__shape--a { inline-size: 160px; inset-block-start: -70px; inset-inline-start: -50px; }
  .ga-ab-close__shape--b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ga-ab-mark { transition: none; }
  .ga-ab-door, .ga-ab-door__cover, .ga-ab-door__cta svg { transition: none; }
  .ga-ab-door:hover { translate: none; }
}