/* =========================================================
   AC-v2 Section: About (#about)
   Spec: AC-v2-site-architecture-190426.md §5.2
   Theme: dark (cream retired 19.04.26).
   Copy: ported from v1 About, lightly tidied.
   Mobile-first, 1440 golden master.
   ========================================================= */

.section--about {
  /* min-height: 100vh inherited from .section; each section claims its
     own viewport so headings do not leak from below. Updated 19.04.26.
     11.05.26: top buffer reduced from s-6 (32px) to s-3 (12px). The base
     section rule's larger buffer suits visually rich sections; About is
     text-led and the s-6 buffer read as dead space below the nav. */
  /* r56 (21.05.26): top buffer trimmed nav+s-5 (124px) -> nav+s-3 (112px)
     to decrease the gap between the hero's DISCOVER/CONTACT row and the
     "About the Studio" label as About slides up over the hero. Held at
     nav-height + a small buffer so the label still clears the fixed nav
     when About fully covers the hero. */
  padding-top: calc(var(--nav-height) + var(--s-3));
  padding-bottom: var(--s-9);
  /* 15.05.26 PM: override shell.css's nav-height scroll-margin so it
     does not double-count with the padding-top above. With this 0
     value, click-scroll lands section top at viewport y=0; padding-
     top then places the title ~24px below the nav bottom. */
  scroll-margin-top: 0;
}

.about__inner {
  /* Inherits the page column from .section__inner (max-width = --max-content,
     matching nav__inner). Updated 19.04.26 (str-v2-190426-nav-edge-unification).
     Narrow reading measure lives on .about__body below. */
  text-align: center;
}

/* ---------- Title ---------- */
.about__title {
  margin: 0 0 var(--s-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h2);
  line-height: 1.15;
  color: var(--primary-text);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Body copy ---------- */
.about__body {
  text-align: left;              /* body is easier to read left-aligned even when section is centred */
  /* 17.05.26: width matched to .et-card (section-et-card.css) so the About
     section visually aligns with the text cards in each Eternal Tales section.
     Was max-width: 640px with a manual 580px @991px override. */
  max-width: clamp(280px, 92vw, 900px);
  margin: 0 auto;
}

.about__body p {
  margin: 0 0 var(--s-5);
  font-family: var(--font-serif);
  font-weight: 500;
  /* r56 (21.05.26): main reading text 1px smaller per Caoimhin. Titles
     (.about__title, .section-label) + the pullquote are untouched - the
     pullquote p has its own font-size rule, so this only shrinks the
     body paragraphs. */
  font-size: calc(var(--body-lead) - 1px);
  line-height: 1.75;
  /* 18.05.26: main body flipped to primary-text (the darker colour).
     The pullquote p below uses soft-text (off-dark). */
  color: var(--primary-text);
}

.about__body p:last-child {
  margin-bottom: 0;
}

/* ---------- Pullquote ---------- */
.about__pullquote {
  margin: var(--s-7) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 2px solid var(--accent);
}

.about__pullquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  /* 18.05.26: flipped to soft-text (off-dark) per user direction.
     Main body uses primary-text (darker) above. */
  color: var(--soft-text);
  letter-spacing: 0.005em;
}
/* 17.05.26: attribution sits below the quote (Roman, smaller, softer).
   Block-level by default for <footer>; spacing nudged via margin-top.
   Reduced 1px on tablet to step with the body p font-size scale-down. */
.about__pullquote-attribution {
  margin-top: var(--s-3);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: var(--soft-text);
  letter-spacing: 0.01em;
}

/* ---------- Responsive step-downs ----------
   .about__inner no longer carries a max-width; it inherits --max-content
   from .section__inner (which steps down via tokens.css). The .about__body
   width now uses the same clamp(280px, 92vw, 900px) as .et-card so no
   manual breakpoint override is needed for the body: the 92vw lower
   bound scales it fluidly. Updated 17.05.26 (was an @991px → 580px cap). */

@media (max-width: 767px) {
  .section--about {
    padding-top: calc(var(--nav-height) + var(--s-5));   /* 04.05.26 */
    padding-bottom: var(--s-8);
  }
  .about__title { max-width: 20ch; }
  .about__body p { font-size: 16px; line-height: 1.7; }
  .about__pullquote {
    margin: var(--s-6) 0;
    padding-left: var(--s-4);
  }
  .about__pullquote p { font-size: 20px; }
}

@media (max-width: 576px) {
  .section--about {
    padding-top: calc(var(--nav-height) + var(--s-4));   /* 04.05.26 */
    padding-bottom: var(--s-7);
  }
  .about__title {
    font-size: var(--h2);
    margin-bottom: var(--s-5);
  }
  .about__body p { font-size: 15px; line-height: 1.7; }
  .about__pullquote p { font-size: 18px; }
}

@media (max-width: 400px) {
  .about__body p { font-size: 14px; line-height: 1.65; }
  .about__pullquote p { font-size: 17px; }
}

/* =========================================================
   Light studio decoupling (14.05.26)
   About is part of the light studio chrome. It was previously a
   transparent pane over the shared Eternal Tales chamber (UCB
   Phase 2); it is now an opaque light section, and the chamber
   becomes the brand-world backdrop from #our-stories onward.
   et-chamber.js still reads About's offsetTop / offsetHeight for
   its phase maths but never styles About, so an opaque background
   is safe. Pre-decouple recipe preserved in
   AC-v3/archive/str-v3-140526-pre-light-studio.section-about.css;
   the older UCB Phase 1 recipe is in
   AC-v3/archive/str-v3-240426-ucb2-pre.section-about.css.
   ========================================================= */
.section--about {
  background: var(--bg);
}

/* =========================================================
   Frosted glass cover layer (r36, 19.05.26)
   Fixed full-viewport panel sitting UNDER About in z-order
   (About z:7, glass z:6). Does NOT scroll with the document --
   stays at viewport top:0 regardless of scroll. While About is
   in viewport About covers the glass; once About scrolls off
   the glass is the visible layer until it fades, revealing the
   chamber pinned underneath in its starting frame.

   Opacity is driven from section-observers.js: holds at 1 until
   the user has scrolled past About, then ramps 1 -> 0 over a
   short range (nav-height worth of scroll) to reveal the chamber.

   Heavy backdrop-blur + 96% dark alpha so any motion in the
   layers behind during the pre-reveal is fully occluded.

   pointer-events: none so the (invisible after fade) layer never
   eats clicks against the chamber / TEoTE content behind. */
.section--dark-transition.section--dark-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  /* 25.05.26: was rgba(22, 24, 26, 0.96) (paired with backdrop-filter
     blur(40px) -- the blur masked the 4% transparency so nothing behind
     the plate was visible during pre-reveal). When the blur was dropped
     (next comment) the 4% leak exposed itself: ET lockup + intro prose
     showed through the supposedly-opaque pre-reveal plate. Bumped to
     1.0 alpha so the plate fully occludes ET until the fade actually
     reveals it. */
  background-color: rgb(22, 24, 26);
  /* 25.05.26: backdrop-filter blur(40px) dropped universally. The
     22.05.26 change already removed it on coarse pointers with the
     same rationale ("plates sit at ~96% dark, blur barely shows yet
     costs a full-screen re-blur per frame"). The desktop jank on the
     About -> ET fade and the rising ET -> TEoTE curtain traces to the
     browser re-sampling that blur each frame as --glass-opacity (and
     for glass #2, transform) changes. With the plate now fully opaque
     (above) there is nothing for the blur to act on; dropping it is
     pure performance win. */
  pointer-events: none;
  opacity: var(--glass-opacity, 1);
  /* r42 (20.05.26): glass #1 (About -> ET) at z:8, above the chamber
     (z:7) so it reveals ET. Below Hero/About (z:9) which cover it
     while in view.
     r57 (21.05.26): REVERTED the r54 rise (transform: translateY
     --glass-rise) per Caoimhin - glass #1 fades in place again, no
     transform, so the Eternal Tales section no longer climbs over a
     pinned About. */
  z-index: 8;
  isolation: isolate;
}

/* 22.05.26 (session 3, step 2) -> 25.05.26: this rule used to drop the
   blur on coarse-pointer devices only. Superseded: the blur is now off
   for everyone (see the base rule above), so the per-device branch is
   no longer needed. */

/* r43 (20.05.26): glass #2 (ET -> TEoTE) RISES then FADES. Moved to
   z:8 -- ABOVE the chamber (z:7) so it can climb OVER the static ET
   like a curtain (the r42 z:6 sat it below the chamber, which only
   allowed a passive fade-reveal once the chamber had scrolled off).
   section-observers.js drives two custom props:
     --glass-rise: translateY from 100vh (parked below the viewport)
       up to 0 (full cover) over the chamber's 100vh tail, so the
       curtain climbs from the bottom AS the chamber image leaves from
       the top -- together they keep the viewport covered (TEoTE stays
       hidden behind the tall chamber image), while the ET content has
       already scrolled out so the VotF tile + CTA are never covered.
     --glass-opacity: held at 1 through the rise, then eased 1 -> 0 to
       reveal TEoTE settled at its start frame.
   Doubled-class specificity to beat the base rule above. */
.section--dark-transition.section--dark-transition--teote {
  z-index: 8;
  transform: translateY(var(--glass-rise, 100vh));
  will-change: transform, opacity;
}

/* =========================================================
   Transition titles (r44 / r46, 20.05.26)
   Shared eyebrow + display-heading treatment (matching About /
   Get in Touch), used in two transition contexts (r54: both ride a
   rising glass):
     - .about__outro: "Our Stories / ...think we know" now lives at the
       TOP of the glass #1 overlay (top:0, child of .section--dark-
       transition). It rides UP with the rising curtain (inherits glass
       #1's translateY(--glass-rise)) over the now-pinned About, and
       clears as the glass fades to the chamber/ET. (Was anchored to
       About's bottom edge in the old fade model, before About pinned.)
     - .dark-transition__title: "Read more... / Our Stories /
       ...ought to know" pinned to the TOP of the glass #2 overlay.
       It rides UP with the rising curtain (inherits glass #2's
       translateY) and clears as the glass fades to TEoTE.
   Both carry data-theme="dark" so --primary-text resolves to cream
   for the heading; .section-label stays fuchsia (--accent).
   ========================================================= */
/* r54 (21.05.26): About PINS for the rising-curtain transition via a
   scroll-driven transform (section-observers.js), NOT position:sticky.
   (A bottom:0 sticky pins to the viewport bottom from scrollY=0 and,
   with the short hero above it, shoved About up over the hero - wrong.)
   Instead the glass IIFE translates About DOWN by exactly the scroll
   past its pin point, so its bottom edge FREEZES at the viewport bottom
   the instant its last line reaches it; glass #1 (z:8) + the chamber/ET
   (z:7) then RISE OVER the frozen About (About is z:4 - below both, see
   shell.css - so it stays occluded for the rest of the page). Stays
   position:relative (its base), which keeps offsetTop correct for the
   aboutEnd maths (a transform does not move the flow box). */
.section--about { position: relative; }
.about__outro {
  position: absolute;
  /* r57 (21.05.26): REVERTED to top:100% (anchored to the BOTTOM edge of
     About). It is back inside #about as a child, scrolling up and off
     WITH About over the fixed glass #1 - the fade-model behaviour. (r54
     had moved it onto the glass at top:0 to ride the rising curtain.) */
  top: 100%;
  left: 0;
  width: 100%;
  /* r50: started ~200px further down the page per Caoimhin. */
  padding: calc(var(--s-6) + 200px) var(--s-5) 0;
  text-align: center;
  /* r48: scroll-driven parallax drift + entrance/exit fade, driven by
     the transition-title handler in section-observers.js.
     r60 (21.05.26): also multiplied by --about-outro-gate (= glass #1
     opacity, set on #about by section-observers.js) so the title fades
     OUT with the glass and is gone once ET is revealed - it must not
     linger over the Eternal Tales content when that nav link is used. */
  opacity: calc(var(--title-opacity, 1) * var(--about-outro-gate, 1));
  transform: translateY(var(--title-shift, 0px));
  will-change: opacity, transform;
}
.dark-transition__title {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(90vw, var(--max-content));
  /* r50: started ~200px further down (added to the top padding).
     r52 (21.05.26): nav-height dropped so this title sits the SAME
     distance from the top of its glass layer as the glass #1 title
     (.about__outro, padding-top s-6+200) sits from its glass top.
     Per Caoimhin. Still clears the nav (s-6+200 = 232px). */
  padding: calc(var(--s-6) + 200px) var(--s-5) 0;
  text-align: center;
  /* r48: --title-shift adds the parallax drift on top of the -50%
     horizontal centring; the element also rides glass #2's translateY
     from its parent. --title-opacity adds the entrance fade.
     r50: --title-exit slides the heading on UP past full cover so it
     keeps scrolling off (set by section-observers.js) instead of
     freezing at the top and fading in place over TEoTE. */
  opacity: var(--title-opacity, 1);
  transform: translateX(-50%) translateY(calc(var(--title-shift, 0px) + var(--title-exit, 0px)));
  will-change: opacity, transform;
}
.about__outro .section-label,
.dark-transition__title .section-label {
  margin-bottom: var(--s-5);
  font-size: 14px;
  letter-spacing: 0.22em;
}
/* r48: bigger, cinematic transition heading + soft depth glow so it
   reads dramatically over the dark glass.
   r49: scroll-driven "pop" entrance -- scale overshoot + blur sharpen,
   driven by --title-scale / --title-blur from the transition-title
   handler (section-observers.js), so the heading materialises out of
   the dark rather than just sliding in. */
.dark-transition__heading {
  margin: 0;
  margin-inline: auto;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--primary-text);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55),
               0 0 48px rgba(0, 0, 0, 0.35);
  transform: scale(var(--title-scale, 1));
  transform-origin: center;
  filter: blur(var(--title-blur, 0px));
  will-change: transform, filter;
}
/* "Read more at eternaltales.ie" sign-off above the glass #2 title. */
.dark-transition__cta {
  margin: 0 0 var(--s-5);
  font-family: var(--font-sans);
  font-size: clamp(14px, 0.3vw + 13px, 16px);
  letter-spacing: 0.02em;
}
.dark-transition__cta a {
  color: var(--primary-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 63, 209, 0.4);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.dark-transition__cta a:hover,
.dark-transition__cta a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* r51 (21.05.26): on desktop the glass #1 title ("Some worlds we
   think we know") sits WITHIN the ET card's column -- where the card
   comes in -- instead of centred across the full viewport, and the
   heading is a touch smaller so it reads inside that narrower column.
   Per Caoimhin. The card column is 25vw+208 .. (100vw-aboutw)/2+18
   (matches .section__inner in section-our-stories-intro.css). >=992
   only; at narrower widths the card is ~full width so the centred
   title already sits over it. The scroll-driven parallax / pop
   (transform + opacity + filter from section-observers.js) is
   unaffected -- this only changes the static box + type size. */
@media (min-width: 992px) {
  .about__outro {
    left: calc(25vw + 208px);
    right: calc((100vw - clamp(280px, 92vw, 900px)) / 2 + 18px);
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  /* r52 (21.05.26): the glass #2 title ("...ought to know") mirrors
     the glass #1 title about the viewport centre -- same distance
     from centre, opposite side. Glass #1 sits in the ET card column
     (right of centre, x-centre ~800); this sits in the mirrored
     column (left of centre, x-centre ~480). Per Caoimhin. left/right
     now position it, so the base translateX(-50%) centring is dropped
     -- but the scroll-driven translateY (--title-shift / --title-exit)
     is preserved. Heading matched to the glass #1 size below. */
  .dark-transition__title {
    left: calc((100vw - clamp(280px, 92vw, 900px)) / 2 + 18px);
    right: calc(25vw + 208px);
    width: auto;
    padding-left: 0;
    padding-right: 0;
    transform: translateY(calc(var(--title-shift, 0px) + var(--title-exit, 0px)));
  }
  .about__outro .dark-transition__heading,
  .dark-transition__title .dark-transition__heading {
    font-size: clamp(34px, 4.4vw, 56px);
  }
}