/* About page composition.
   Shared horizontal geometry, typography metrics and header behavior remain
   system-owned. This file owns only About-local section composition and the
   Genesis brand-intro presentation. */
.about-main{
  overflow:hidden;
}

.about-section{
  position:relative;
  align-items:center;
}

.about-section--genesis{
  min-height:100svh;
  padding-top:clamp(10rem,18vh,13rem);
  padding-bottom:clamp(5rem,10vh,8rem);
}

.about-section--julius{
  min-height:100svh;
  padding-top:clamp(7rem,13vh,10rem);
  padding-bottom:clamp(7rem,13vh,10rem);
}

.about-section--network{
  min-height:68svh;
  padding-top:clamp(6rem,11vh,8rem);
  padding-bottom:clamp(6rem,12vh,9rem);
}

.about-copy{
  max-width:34rem;
}

.about-copy--genesis,
.about-copy--network{
  grid-column:1;
}

.about-copy--julius{
  grid-column:2;
}

.about-kicker{
  margin:0 0 1.6rem;
  color:var(--accent);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.23em;
  text-transform:uppercase;
}

.about-headline{
  margin:0;
  font-family:"CHARUS Outfit",Arial,Helvetica,sans-serif;
  font-size:clamp(3.5rem,6vw,6.7rem);
  font-weight:var(--headline-weight);
  line-height:.98;
  letter-spacing:-.038em;
  -webkit-text-stroke:var(--headline-grade-stroke) currentColor;
}

.about-headline--network{
  font-size:clamp(3rem,5vw,5.7rem);
}

.about-dot{
  display:inline-block;
  border-radius:50%;
  background:var(--accent);
}

.about-text{
  margin:2rem 0 0;
  max-width:31rem;
  color:var(--copy);
  font-size:clamp(1rem,1.15vw,1.12rem);
  font-weight:var(--body-copy-weight);
  letter-spacing:var(--body-copy-tracking);
  line-height:1.62;
  -webkit-text-stroke:var(--body-grade-stroke) currentColor;
}

.about-text + .about-text{
  margin-top:1rem;
}

.about-text--umbrella{
  margin-top:1.25rem;
}

.about-genesis-side{
  grid-column:2;
  justify-self:stretch;
  align-self:center;
  width:min(100%,34rem);
  margin-left:auto;
  padding-top:7.5vh;
  display:grid;
  place-items:start center;
  overflow:visible;
}

.about-brand{
  width:min(100%,56rem);
  transform:translateY(-1.8vh);
  pointer-events:none;
}

.about-brand__mark{
  position:relative;
  width:100%;
  aspect-ratio:1225 / 420;
}

.about-brand__wordmark,
.about-brand__beam{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:auto;
  opacity:0;
}

.about-brand__beam{
  z-index:1;
}

.about-brand__wordmark{
  z-index:2;
}

.about-brand__claim{
  position:absolute;
  z-index:3;
  left:17.1%;
  top:70.6%;
  display:block;
  width:72.8%;
  height:auto;
  opacity:0;
  transform-origin:center center;
}

html[data-theme="dark"] .about-brand__wordmark,
html[data-theme="dark"] .about-brand__beam,
html[data-theme="dark"] .about-brand__claim{
  filter:invert(1);
}

.about-genesis-dialogue{
  position:relative;
  width:min(100%,41rem);
  margin-top:clamp(3.8rem,6.6vh,5.2rem);
  color:var(--copy);
  font-size:clamp(.78rem,.88vw,.92rem);
  font-style:italic;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.002em;
}

.about-dialogue-speaker{
  position:absolute;
  bottom:calc(100% + 1.15rem);
  margin:0;
  color:var(--copy);
  font-size:.80em;
  font-style:normal;
  font-weight:500;
  letter-spacing:.01em;
  opacity:0;
  pointer-events:none;
}

.about-dialogue-speaker--left{
  left:0;
}

.about-dialogue-speaker--right{
  right:0;
  text-align:right;
}

#aboutGenesisSpeakerJuliusProximity{
  top:var(--julius-speaker-top,0px);
  bottom:auto;
  transform:translateY(calc(-100% - 1.15rem));
}

/* Proximity attribution is layered over the authored Claude cue so the
   original Genesis speaker fade remains independently owned by intro.js. */
.about-dialogue-speaker--proximity{
  opacity:0;
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  #aboutGenesisDialogue.is-proximity-claude-ready #aboutGenesisSpeakerClaudeProximity{
    opacity:var(--claude-proximity-opacity,0);
  }

  #aboutGenesisDialogue.is-proximity-julius-ready #aboutGenesisSpeakerJuliusProximity{
    opacity:var(--julius-proximity-opacity,0);
  }
}

.about-dialogue-line{
  width:84%;
  margin:1.02rem 0 0;
  opacity:0;
  transform:translateY(.35rem);
}

.about-dialogue-speaker + .about-dialogue-line{
  margin-top:0;
}

.about-dialogue-line--left{
  margin-right:auto;
  text-align:left;
}

.about-dialogue-line--right{
  margin-left:auto;
  text-align:right;
}

#aboutGenesisDialogue3{
  margin-top:.54rem;
}

#aboutGenesisDialogue4{
  margin-top:1.48rem;
}

#aboutGenesisDialogue5{
  margin-top:.72rem;
}

#aboutGenesisDialogue6{
  margin-top:.84rem;
}

.about-dialogue-answer-prefix{
  display:inline;
  opacity:0;
}

.about-dialogue-answer-tail{
  display:block;
  margin-top:.72rem;
  opacity:0;
}

/* The existing reusable WIP graphic remains owned by under-construction.css.
   About only owns its mirrored placement in the Julius section. */
.about-construction-visual--julius{
  grid-column:1;
  justify-self:start;
  margin:0;
}

/* Once the authored compact-header handoff has faded away, About reuses the
   existing wordmark and beam as a restrained Home affordance. The full energy
   runtime stays gone, and the compact claim is removed so only CHARUS + beam
   can return. Fine-pointer opacity follows the established About proximity
   field; keyboard focus and non-motion/coarse-pointer persistence remain
   orchestrated by intro.js. */
html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) :is(
  .energy-layer,
  .travel-beam-layer,
  .pulse-layer
){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) :is(
  #logoWrap,
  #logoBeamWrap
){
  opacity:var(--about-home-proximity-opacity,0) !important;
  visibility:visible !important;
  pointer-events:none !important;
  transition:none;
}

/* Fine-pointer discovery stays intentionally ghosted even at closest approach:
   preserve the existing distance field, but cap its visual result to 18%.
   Keyboard focus is an explicit operability state and remains fully visible. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) :is(
    #logoWrap,
    #logoBeamWrap
  ){
    opacity:calc(var(--about-home-proximity-opacity,0) * .18) !important;
  }

  html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]):has(.logo-home-link:focus) :is(
    #logoWrap,
    #logoBeamWrap
  ){
    opacity:var(--about-home-proximity-opacity,0) !important;
  }
}

html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) #logoBeamWrap{
  filter:blur(0) !important;
}

html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) .logo-wrap::after{
  content:none;
}

html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) .logo-home-link{
  pointer-events:none !important;
}

html.about-home-affordance-ready.about-home-present body:is([data-page="about"],[data-page="about-inwork"]) .logo-home-link{
  pointer-events:auto !important;
  cursor:pointer;
}

@media(min-width:1101px){
  .about-brand{
    margin-left:-2.45rem;
  }

  .about-genesis-dialogue{
    margin-left:-3.25rem;
    width:calc(100% + 3.25rem);
    max-width:44.25rem;
  }
}

@media(min-width:921px){
  .about-section--genesis .about-copy--genesis,
  .about-section--genesis .about-genesis-side{
    transform:translateY(-2.25vh);
  }
}

@media(max-width:1100px){
  .about-genesis-side{
    padding-top:6.5vh;
  }

  .about-brand{
    width:min(100%,51rem);
    transform:translateY(-1vh);
  }
}

@media(max-width:920px){
  .about-section{
    row-gap:clamp(3.5rem,8vh,5rem);
  }

  .about-section--genesis,
  .about-section--julius{
    min-height:auto;
    padding-top:clamp(9rem,16vh,11rem);
    padding-bottom:clamp(5rem,10vh,7rem);
  }

  .about-section--network{
    min-height:auto;
    padding-top:clamp(5rem,10vh,7rem);
    padding-bottom:clamp(5rem,10vh,7rem);
  }

  .about-copy--genesis,
  .about-copy--julius,
  .about-copy--network,
  .about-genesis-side{
    grid-column:1;
  }

  .about-copy--julius{
    grid-row:1;
  }

  .about-construction-visual--julius{
    grid-row:2;
  }

  .about-kicker{
    letter-spacing:.18em;
  }

  .about-headline{
    font-size:clamp(3rem,12vw,5rem);
  }

  .about-headline--network{
    font-size:clamp(2.8rem,11vw,4.7rem);
  }

  .about-text{
    max-width:85%;
  }

  .about-genesis-side{
    justify-self:start;
    width:min(100%,30rem);
    margin:0;
  }
}

@media(max-width:900px){
  .about-genesis-side{
    padding-top:5vh;
  }

  .about-brand{
    width:min(100%,43rem);
    transform:none;
  }

  .about-brand__mark{
    aspect-ratio:1225 / 440;
  }

  .about-brand__claim{
    left:17%;
    top:72.2%;
    width:74%;
  }
}

@media(prefers-reduced-motion:reduce){
  body:is([data-page="about"],[data-page="about-inwork"]) :is(.energy-layer,.travel-beam-layer,.pulse-layer){
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  html.about-home-affordance-ready body:is([data-page="about"],[data-page="about-inwork"]) :is(#logoWrap,#logoBeamWrap){
    transition:none !important;
  }

  .about-brand__wordmark,
  .about-brand__beam,
  .about-brand__claim,
  .about-dialogue-speaker:not(.about-dialogue-speaker--proximity),
  .about-dialogue-line,
  .about-dialogue-answer-prefix,
  .about-dialogue-answer-tail{
    opacity:1 !important;
    transform:none !important;
  }

  .about-dialogue-speaker--proximity{
    opacity:0 !important;
  }
}