/* ─────────────────────────────────────────────────────────────────────────────
   About — built around a centred hero: the children of the artwork gather on
   both edges and point inward, the academy's logo stands between them.
   The rest of the page keeps that axis: centred headings, the story of the
   logo, the vision as a manifesto, the two pillars mirrored around the
   academy's seal, milestones and values. Teachers, founder and contact come
   from blocks.css.
   ───────────────────────────────────────────────────────────────────────────── */

@layer page {

  /* ── Hero ────────────────────────────────────────────────────────────────
     Measured on the artwork (16:9): the children and their floating cards
     fill 0–29% and 68–100% of its width; the centre 31–67% is open and light.
     On wide screens the artwork spans the hero and the content column stays
     inside that open centre (36vw). */
  .about-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    display: grid;
    place-items: center;
    min-height: clamp(38rem, 56.25vw, 100svh);
    padding-top: calc(var(--header-h) + var(--s-5));
    padding-bottom: calc(var(--hero-foot) * 1.35 + var(--s-6));
    text-align: center;
  }
  .about-hero__art { position: absolute; inset: 0; z-index: -2; }
  .about-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  /* A soft light behind the centre column and a fade into the page below. */
  .about-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(closest-side at 50% 48%, rgb(255 255 255 / 0.6), transparent),
      linear-gradient(to bottom, transparent 76%, var(--bg));
  }

  .about-hero__content {
    width: min(36vw, 38rem);
    display: grid;
    justify-items: center;
    gap: var(--s-4);
  }
  .about-hero__crumbs ol {
    padding: var(--s-1) var(--s-4);
    border-radius: var(--r-pill);
    background: rgb(255 255 255 / 0.62);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  /* The logo stands on a soft halo and floats gently. */
  .about-hero__emblem {
    position: relative;
    width: min(9.5vw, 18svh, 11rem);
    margin-block: var(--s-2);
  }
  .about-hero__emblem::before {
    content: "";
    position: absolute;
    inset: -28% -46%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 255 255 / 0.95), rgb(255 240 245 / 0.6) 55%, transparent);
  }
  .about-hero__emblem picture { display: block; animation: emblem-float 7s ease-in-out infinite; }
  .about-hero__emblem img { width: 100%; height: auto; filter: drop-shadow(0 16px 26px rgb(204 39 89 / 0.28)); }
  @keyframes emblem-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -7px; }
  }

  .about-hero__eyebrow::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.55; }
  .about-hero__title { font-size: clamp(2.6rem, 1rem + 3.6vw, 4.6rem); line-height: var(--lh-tight); }
  .about-hero__lead { max-width: 34rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.85; text-wrap: balance; }

  /* Round loop around «نحن», fitted as described in components.css (its tail
     rises from the far side of the word). It needs room before «من». */
  .scribble--round { --scribble-inset: -0.253em -0.632em -0.046em -0.753em; --scribble-gap: 0.41em; }
  /* The tail rises above the word toward the eyebrow: keep them apart. */
  .about-hero__title:has(.scribble--round) { margin-top: 0.2em; }
  /* The hero title enters without a reveal, so the loop draws on load. */
  .about-hero .scribble__mark {
    mask-image: conic-gradient(from 200deg, #000 var(--scribble-sweep), transparent 0);
    animation: scribble-draw 0.9s var(--ease-out) 0.7s both;
  }

  /* ── Figures: the panel rises into the hero's foot ──────────────────────── */
  .about-facts { position: relative; z-index: 2; margin-top: calc(var(--hero-foot) * -1.35); }

  /* ── The story of the logo ──────────────────────────────────────────────
     The logo large, its five parts beside it (pages/about.mjs). The part shown
     is the section's data-part: on the logo, a veil of the logo's own pink
     over the other white shapes (multiplied, so their relief still shows) and
     a warm light around the part, each a mask made from the owner's master at
     the logo's own square; the pink is shown by veiling every shape and
     letting the tile glow. The regions over the logo that show a part as the
     pointer passes are the parts' outlines taken from the same master, with a
     margin, in percent of the logo; the parts lie above the tile, the child
     and the lines above the bulb. Beside the logo, the parts' buttons, and one
     card holding every meaning in the same place, so nothing moves as the
     part changes. */
  /* The halo behind the logo reaches past a phone's edges: clipped at the section's sides, so the page never scrolls sideways. */
  .logo-story { isolation: isolate; overflow-x: clip; }
  .logo-story__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    max-width: 66rem;
    margin-inline: auto;
  }
  .logo-story__art { position: relative; justify-self: center; width: min(100%, 26rem); margin: 0; }
  .logo-story__art::before {
    content: "";
    position: absolute;
    inset: -14%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow-blush), rgb(255 240 245 / 0.5) 60%, transparent);
  }
  .logo-story__logo { position: relative; isolation: isolate; aspect-ratio: 1; }
  .logo-story__logo picture, .logo-story__logo img { display: block; width: 100%; height: 100%; }
  .logo-story__logo img {
    filter: drop-shadow(0 22px 34px rgb(204 39 89 / 0.26));
    transition: filter var(--dur-base) var(--ease-out);
  }
  .logo-story__veil, .logo-story__halo {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-mask: var(--mask) center / 100% 100% no-repeat;
    mask: var(--mask) center / 100% 100% no-repeat;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .logo-story__veil { background: rgb(240 72 112); mix-blend-mode: multiply; }
  .logo-story__halo { background: rgb(255 244 222); mix-blend-mode: screen; }
  .logo-story__veil--cap   { --mask: url("../../assets/images/logo-story/cap-veil.webp"); }
  .logo-story__veil--bulb  { --mask: url("../../assets/images/logo-story/bulb-veil.webp"); }
  .logo-story__veil--child { --mask: url("../../assets/images/logo-story/child-veil.webp"); }
  .logo-story__veil--lines { --mask: url("../../assets/images/logo-story/lines-veil.webp"); }
  .logo-story__veil--pink  { --mask: url("../../assets/images/logo-story/pink-veil.webp"); }
  .logo-story__halo--cap   { --mask: url("../../assets/images/logo-story/cap-halo.webp"); }
  .logo-story__halo--bulb  { --mask: url("../../assets/images/logo-story/bulb-halo.webp"); }
  .logo-story__halo--child { --mask: url("../../assets/images/logo-story/child-halo.webp"); }
  .logo-story__halo--lines { --mask: url("../../assets/images/logo-story/lines-halo.webp"); }
  .logo-story[data-part="cap"] .logo-story__veil--cap,
  .logo-story[data-part="bulb"] .logo-story__veil--bulb,
  .logo-story[data-part="child"] .logo-story__veil--child,
  .logo-story[data-part="lines"] .logo-story__veil--lines,
  .logo-story[data-part="pink"] .logo-story__veil--pink { opacity: 0.8; }
  .logo-story[data-part="cap"] .logo-story__halo--cap,
  .logo-story[data-part="bulb"] .logo-story__halo--bulb,
  .logo-story[data-part="child"] .logo-story__halo--child,
  .logo-story[data-part="lines"] .logo-story__halo--lines { opacity: 0.6; }
  .logo-story[data-part="pink"] .logo-story__logo img {
    filter: drop-shadow(0 0 1.6rem rgb(244 63 117 / 0.5)) drop-shadow(0 22px 34px rgb(204 39 89 / 0.3));
  }

  .logo-story__hit { position: absolute; inset: 0; z-index: 2; }
  .logo-story__hit--pink { z-index: 1; clip-path: inset(0.8% round 18%); }
  .logo-story__hit--cap-board  { clip-path: polygon(11.6% 24.5%, 12.7% 22.7%, 48.5% 5.5%, 51.8% 5.4%, 70.2% 14.2%, 87.5% 22.7%, 88.6% 24.9%, 87.4% 26.8%, 71.7% 33.7%, 29.1% 33.6%, 25.1% 32.3%, 12.3% 26.3%); }
  .logo-story__hit--cap-tassel { clip-path: polygon(13.2% 62.1%, 15.5% 37.6%, 17.3% 30.3%, 17.7% 29.6%, 20.3% 29.3%, 21.3% 30.5%, 23.3% 37.3%, 25.5% 62%, 25.3% 63.3%, 23.6% 64.6%, 15.2% 64.7%, 13.4% 63.3%); }
  .logo-story__hit--bulb       { clip-path: polygon(25.7% 51.5%, 26.6% 45.8%, 31% 28.9%, 32.7% 26.3%, 41.5% 22.1%, 47.1% 21.1%, 56.2% 21.5%, 62.7% 23.4%, 69.3% 28.7%, 74.6% 48.4%, 74.6% 55.7%, 71.2% 65.2%, 61.1% 77.1%, 59.5% 77.5%, 40.9% 77.5%, 32.2% 69.5%, 28.3% 63.7%, 26.2% 57.6%); }
  .logo-story__hit--child      { z-index: 3; clip-path: polygon(36.3% 51.8%, 38.1% 50%, 49.7% 47.8%, 50.9% 47.8%, 62.7% 50.1%, 64.3% 51.4%, 64.2% 52.9%, 56.3% 76.2%, 54.5% 77.6%, 45.7% 77.6%, 44.1% 76.2%, 36.4% 53%); }
  .logo-story__hit--lines      { z-index: 3; clip-path: polygon(39.5% 80.1%, 40.1% 78.8%, 42.7% 77.5%, 57.1% 77.5%, 59.7% 78.1%, 60.9% 80.7%, 60.4% 86.9%, 56.5% 93.6%, 54.8% 94.7%, 46.2% 94.9%, 43.8% 93.5%, 40% 86.9%); }

  .logo-story__side { display: grid; gap: var(--s-5); min-width: 0; }
  .logo-story__parts { display: grid; gap: var(--s-2); }
  .logo-part {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    width: 100%;
    min-height: 3.5rem;
    padding: var(--s-2) var(--s-3);
    padding-inline-end: var(--s-5);
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    color: var(--ink-2);
    text-align: start;
    transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast) linear;
  }
  .logo-part:hover { background: rgb(255 255 255 / 0.55); color: var(--ink); }
  .logo-part:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
  .logo-part[aria-pressed="true"] {
    background: var(--white);
    border-color: var(--pink-border);
    box-shadow: var(--shadow-md);
    color: var(--ink);
  }
  .logo-part__index {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--pink-border);
    color: var(--pink-strong);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear;
  }
  .logo-part[aria-pressed="true"] .logo-part__index { background: var(--pink-strong); border-color: var(--pink-strong); color: var(--white); box-shadow: var(--shadow-pink); }
  .logo-part__name { font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); font-weight: 700; line-height: 1.4; }

  /* Every meaning in one cell: the card is as tall as the longest, whichever is shown. */
  .logo-story__meanings {
    display: grid;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.35rem, 1rem + 1.2vw, 2rem);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, var(--pink-soft), var(--white) 70%);
    border: 1px solid var(--pink-border);
    box-shadow: var(--shadow-sm);
  }
  .logo-meaning {
    grid-area: 1 / 1;
    display: grid;
    align-content: start;
    gap: var(--s-2);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .logo-meaning[data-shown] { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; }
  .logo-meaning__name { color: var(--pink-strong); font-size: var(--fs-small); font-weight: 600; }
  .logo-meaning__text { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); font-weight: 600; line-height: 1.8; color: var(--ink); text-wrap: pretty; }

  /* ── Story: the vision as a manifesto, two pillars around the seal ─────── */
  .manifesto {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--s-4);
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
  }
  .manifesto__mark { width: 3.25rem; height: 3.25rem; color: var(--pink); opacity: 0.85; }
  .manifesto__text p {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 1rem + 1.5vw, 2.3rem);
    font-weight: 600;
    line-height: 1.75;
    color: var(--ink);
    text-wrap: balance;
  }

  .pillars {
    --pillars-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--pillars-gap);
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }
  .pillar {
    height: 100%;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--s-3);
    padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    text-align: center;
  }
  .pillar__icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: linear-gradient(150deg, var(--pink-soft), var(--white));
    border: 1px solid var(--pink-border);
    color: var(--pink-strong);
  }
  .pillar__icon svg { width: 1.5rem; height: 1.5rem; }
  .pillar__title { font-size: var(--fs-h3); }
  .pillar__text { color: var(--ink-2); line-height: 2; max-width: 30rem; }
  .pillars__seal {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 6px var(--pink-mist), 0 0 0 7px var(--pink-border), var(--shadow-md);
  }
  .pillars__seal img { width: 3rem; height: 3rem; }
  /* A hairline joins the two pillars through the seal, only across the gaps
     (the cards are translucent, so it must not run behind them). */
  .pillars__seal::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline: calc(var(--pillars-gap) * -1);
    height: 1px;
    background: linear-gradient(to left, var(--pink-border) calc(var(--pillars-gap) - 0.5rem), transparent 0 calc(100% - var(--pillars-gap) + 0.5rem), var(--pink-border) 0);
  }

  .about-motto {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 600;
    color: var(--pink-strong);
    text-align: center;
    text-wrap: balance;
  }
  .about-motto::before,
  .about-motto::after {
    content: "";
    flex: 1 1 3rem;
    height: 1px;
    background: linear-gradient(to var(--line-dir, left), transparent, var(--pink-border));
  }
  .about-motto::after { --line-dir: right; }

  /* ── Milestones ─────────────────────────────────────────────────────────── */
  .journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-6);
  }
  /* The line runs through the nodes, from the first year to the last. */
  .journey::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    inset-inline: 12.5%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--pink), var(--pink-border));
  }
  .journey__step { position: relative; display: grid; justify-items: center; gap: var(--s-5); }
  .journey__node {
    position: relative;
    z-index: 1;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 3px var(--pink), 0 0 0 8px rgb(244 63 117 / 0.12);
  }
  .journey__card {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-6);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    text-align: center;
  }
  .journey__year {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--pink);
  }
  .journey__title { font-size: 1.15rem; }
  .journey__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.9; }

  /* ── Values ─────────────────────────────────────────────────────────────── */
  .about-values { isolation: isolate; }
  .about-values .ambient { --glow-a: 12% 30%; --glow-b: 90% 75%; }
  .values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-6);
  }
  .value {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--s-3);
    padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
    border-radius: var(--r-lg);
    background: var(--glass-solid);
    border: 1px solid var(--white);
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    text-align: center;
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
  }
  .value:hover { transform: translateY(-4px); box-shadow: var(--shadow-inset), var(--shadow-md); }
  .value__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: linear-gradient(150deg, var(--pink-soft), var(--white));
    border: 1px solid var(--pink-border);
    color: var(--pink-strong);
  }
  .value__icon svg { width: 1.5rem; height: 1.5rem; }
  .value__title { font-size: 1.2rem; }
  .value__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.95; }

  /* The founder's section is deep-toned; give the contact panel after it room. */
  .founder + .cta { padding-top: var(--section-y); }

  /* ── Responsive ─────────────────────────────────────────────────────────── */
  @media (max-width: 1080px) {
    .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-10); }
    .journey::before { display: none; }
    .values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Below 900px the open centre is too narrow for the text: the artwork comes
     first, edge to edge, with the logo standing in its centre; the text
     follows below it. The content wrapper steps aside so the logo can share
     the artwork's grid cell. */
  @media (max-width: 899px) {
    .about-hero {
      grid-template-columns: minmax(0, 1fr);
      place-items: stretch;
      min-height: 0;
      padding-top: calc(var(--header-h) + var(--s-2));
      padding-bottom: calc(var(--hero-foot) * 0.72 + var(--s-8));
    }
    .about-hero__art { position: relative; inset: auto; z-index: 0; grid-row: 1; grid-column: 1; aspect-ratio: 16 / 9; }
    .about-hero__art::after { background: radial-gradient(closest-side at 50% 50%, rgb(255 255 255 / 0.55), transparent), linear-gradient(to bottom, transparent 70%, var(--bg)); }
    .about-hero__content { display: contents; }
    .about-hero__emblem { grid-row: 1; grid-column: 1; place-self: center; width: 20vw; z-index: 1; margin: 0; }
    .about-hero__crumbs { grid-row: 2; justify-self: center; margin-top: var(--s-4); }
    .about-hero__eyebrow { grid-row: 3; justify-self: center; margin-top: var(--s-4); }
    .about-hero__title { grid-row: 4; justify-self: center; margin-top: var(--s-4); }
    .about-hero__lead { grid-row: 5; justify-self: center; margin: var(--s-3) var(--gutter) 0; }
    .about-facts { margin-top: calc(var(--hero-foot) * -0.72); }

    /* The logo, then the meaning shown right under it, then the parts as chips. */
    .logo-story__stage { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
    .logo-story__art { width: min(80vw, 22rem); }
    .logo-story__side { gap: var(--s-4); }
    .logo-story__meanings { order: -1; }
    .logo-story__parts { display: flex; flex-wrap: wrap; justify-content: center; }
    .logo-part { width: auto; min-height: 2.75rem; gap: var(--s-2); padding: var(--s-1) var(--s-2); padding-inline-end: var(--s-4); }
    .logo-part__index { width: 2rem; height: 2rem; font-size: 0.95rem; }
    .logo-part__name { font-size: 1rem; }

    .pillars { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .pillars__seal::before { inset-inline: auto; left: 50%; top: calc(var(--pillars-gap) * -1); bottom: calc(var(--pillars-gap) * -1); width: 1px; height: auto; background: linear-gradient(to bottom, var(--pink-border) calc(var(--pillars-gap) - 0.5rem), transparent 0 calc(100% - var(--pillars-gap) + 0.5rem), var(--pink-border) 0); }
  }
  @media (max-width: 720px) {
    .values { grid-template-columns: minmax(0, 1fr); }
    /* Milestones become a vertical line with the nodes on the start side. */
    .journey { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-5); padding-inline-start: var(--s-8); }
    .journey::before { display: block; inset-inline: auto; inset-inline-start: 0.5rem; top: 1.6rem; bottom: 1.6rem; width: 2px; height: auto; background: linear-gradient(180deg, var(--pink), var(--pink-border)); }
    .journey__step { justify-items: stretch; }
    .journey__node { position: absolute; top: 1.6rem; inset-inline-start: calc(var(--s-8) * -1 + 0.4rem - 0.1rem); }
    .journey__card { justify-items: start; text-align: start; }
    .about-motto::before, .about-motto::after { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .about-hero__emblem picture { animation: none; }
    .logo-story__veil, .logo-story__halo, .logo-story__logo img, .logo-part, .logo-part__index, .logo-meaning, .logo-meaning[data-shown] { transition: none; }
    .about-hero .scribble__mark { animation: none; mask-image: none; }
  }
}