/* ---------- ABOUT PAGE ----------
   Loaded after front-page.css + event.css + page.css (see omniva_assets()
   in functions.php), so this reuses .wrap/.eyebrow/.btn/.divider-ring/
   .section-head as-is. */

/* ---------- Hero: compact intro label, not a full visual statement ----------
   Deliberately restrained (project brief update, Aug 2026): this is an
   introductory page label ahead of the first Page Section (typically a Full
   Width Statement), not the page's big visual moment — so no min-height
   viewport-locking here, just enough top padding to clear the fixed header
   (see header{} in style.css) and a small bottom padding. .about-hero-portrait
   is capped well below its old size so a configured Page Hero Image can't
   re-inflate this back into a tall hero via the flex row's align-items:center. */
.about-hero{position:relative;display:flex;align-items:center;padding:150px 0 32px;overflow:hidden;isolation:isolate;}
.about-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 20% 45%, rgba(232,52,42,.16), transparent 70%);}
.about-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;width:100%;}
.about-hero-copy h1{font-size:clamp(22px,2.6vw,30px);font-weight:600;margin-top:10px;}
.about-hero-copy p{margin-top:12px;font-size:16px;line-height:1.7;color:#fff;max-width:480px;}

.about-hero-portrait{position:relative;z-index:2;aspect-ratio:3/4;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-raised);justify-self:end;max-width:260px;width:100%;}
.about-hero-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05);}

/* Gap to the first Page Section — scoped to whatever `<section>` (Text,
   Statement, etc. from template-parts/home/section-*.php) immediately
   follows the About hero in the DOM. Overrides only that one section's
   top padding, via the adjacent-sibling combinator, so the generic
   `section{padding:110px 0;}` rule (front-page.css) stays untouched for
   every other section on every other page — Homepage/Events/Sessions/
   Artist/generic Pages are unaffected. */
.about-hero + section{padding-top:40px;}

/* ---------- Body copy: white, not grey ----------
   The shared Page Section / Page body-copy rules (`.home-section-body` in
   front-page.css, `.page-content p/ul/ol` in page.css) default to
   var(--ink-dim) (#8a8a8a) — fine on Homepage/Events/Sessions where dimmer
   secondary copy sits against imagery, but too muted against About's plain
   black atmospheric backdrop. about.css is enqueued last in the About
   branch of omniva_assets() (functions.php) and only on this template, so
   redeclaring these selectors here overrides them for every Page Section
   body paragraph on the About page (Text, Full Width Statement's
   .statement-supporting, etc.) and for the_content() output, without
   touching either shared rule anywhere else. `.home-section.theme-light
   .home-section-body` (front-page.css) has higher selector specificity, so
   any section an admin sets to the light theme keeps its own readable
   dark-on-light color untouched. */
.home-section-body,
.page-content p,
.page-content ul,
.page-content ol{color:#fff;}

/* ---------- What OMNIVA Is Building ---------- */
.about-building-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.about-building-card{display:block;padding:32px 28px;border:1px solid var(--line);border-radius:18px;background:var(--bg-raised);
  transition:border-color .25s ease, transform .25s ease;}
.about-building-card:hover{border-color:var(--red);transform:translateY(-4px);}
.about-building-card h3{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;}
.about-building-card p{margin-top:10px;color:#fff;font-size:14px;line-height:1.6;}
.about-building-arrow{display:block;margin-top:18px;color:var(--red);font-size:18px;transition:transform .2s ease;}
.about-building-card:hover .about-building-arrow{transform:translateX(4px);}

/* ---------- Atmospheric particles (template-parts/about/particles.php) ----------
   Fixed behind all About content (Hero/Story/Building) so the effect
   reads as continuing down the whole page, not just within the Hero — per
   project brief §12. z-index:-1 (not 0) is deliberate: most About sections
   below the Hero (Building, and the Story Page Section) are plain
   `position:static` blocks, which paint *above* any positioned z-index:0+
   sibling regardless of DOM order — only a negative z-index guarantees this
   fixed layer stays behind that static in-flow content (and still above the
   page's own black background) so it never interferes with text
   readability. Purely decorative marks, not literal snow: three depth
   layers (far/mid/near) vary size, blur, opacity and drift speed for a
   subtle parallax feel. */
.about-particles{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.particle{position:absolute;border-radius:50%;background:#fff;
  animation-name:particle-drift;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  animation-direction:alternate;will-change:transform;}
.particle--far{background:#cfcfcf;}
.particle--mid{background:#e8e8e8;}
.particle--near{background:#fff;box-shadow:0 0 6px rgba(255,255,255,.35);}
@keyframes particle-drift{
  0%{transform:translate(0,0);}
  100%{transform:translate(var(--particle-drift,30px), -34px);}
}
@media (prefers-reduced-motion: reduce){
  .particle{animation:none;}
}

/* ---------- Mobile/tablet breathing room ----------
   Subtle spacing-only refinement (Aug 2026 follow-up): the compact mobile
   feel and left/right .wrap margins are intentional and untouched — these
   overrides only loosen three specific gaps that read as too compressed on
   small screens: eyebrow-to-headline, headline-to-body, and the gap between
   one major section and the next. Desktop (>900px) keeps its original,
   deliberately tight values (see .about-hero-copy h1/p and .section-head
   .eyebrow above) — none of this is redeclared outside these queries.
   `section` and `.section-head .eyebrow`/`.home-section-body` are shared
   classes (front-page.css), but about.css only ever loads on this template
   (see omniva_assets() in functions.php), so overriding them here can't
   leak spacing changes onto the Homepage or any other page. */
@media (max-width:900px){
  .about-hero-grid{grid-template-columns:1fr;}
  .about-hero-portrait{justify-self:stretch;max-width:200px;margin:0 auto;order:-1;}
  .about-hero-copy h1{margin-top:14px;}
  .about-hero-copy p{margin-top:16px;}
  .about-hero + section{padding-top:34px;}
  .about-building-grid{grid-template-columns:1fr;}
  section{padding:82px 0;}
  .section-head .eyebrow{margin-bottom:18px;}
  .home-section-body{margin-top:20px;}
}
@media (max-width:600px){
  .about-hero{padding:110px 0 26px;}
}