/* ============================================================
   /about/

   Nothing new invented: the eyebrow, the display type, the panels and
   the moon CTA all come from global.css. What this file adds is the
   hero's two columns, the story's hanging heading, the belief cards and
   the team's portrait frames.
   ============================================================ */

.ap-about-section{position:relative; padding:clamp(60px,9vh,110px) 0}
.ap-about-head{max-width:720px; margin-bottom:clamp(30px,5vh,52px)}
.ap-about-head .ap-display{font-size:clamp(30px,4vw,56px); line-height:1.02; margin-top:14px}
.ap-about-lead{
  margin:18px 0 0; font-size:clamp(15px,1.15vw,17.5px); font-weight:300;
  line-height:1.62; color:var(--muted); max-width:60ch; text-wrap:pretty;
}

/* ---------- hero: the orbital window ----------
   Adapted from the delivered hero.css, minus its page resets: that file
   was written for a standalone document and set html/body itself. What
   matters here is the geometry, which is kept exactly: a 1920x1080 canvas
   anchored right, copy in a column on the left. */
.ap-about-hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:min(82vh,820px);
  padding:clamp(120px,16vh,180px) 0 clamp(50px,8vh,90px);
}
.ap-orbital-canvas{
  position:absolute; inset:0; z-index:0; display:block;
  width:100%; height:100%; pointer-events:none;
  /* the artwork is anchored right and never stretched to the section's
     aspect: the panda holds its proportions and the left is left empty */
  object-fit:cover; object-position:right center;
  /* the canvas ground is #020508 and the page is #030305: close, but a
     hard rectangle edge would still show, so it dissolves */
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 76%,transparent 99%);
}
.ap-orbital-copy{position:relative; z-index:1}
.ap-about-hero .ap-display{
  font-size:clamp(36px,5.4vw,80px); line-height:.98; margin-top:16px; max-width:17ch;
}
.ap-about-hero .ap-lead{
  /* .ap-lead centres itself with margin:auto, which is wrong under a
     left-aligned headline */
  margin:22px 0 0; max-width:46ch;
}

@media (max-width:900px){
  /* The delivered fallback: the whole artwork below, contained, with the
     copy above it. Cropping to the centre would cut the panda out. */
  .ap-about-hero{
    display:block; min-height:0;
    padding-bottom:min(58vw,440px);
  }
  .ap-orbital-canvas{
    top:auto; bottom:0; height:min(58vw,440px);
    object-fit:contain; object-position:center bottom;
    /* the canvas ground is a shade off the page's, so the band's top edge
       dissolves instead of drawing a line across the page */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%);
    mask-image:linear-gradient(180deg,transparent 0,#000 18%);
  }
  .ap-about-hero .ap-display,.ap-about-hero .ap-lead{max-width:none}
}

/* ---------- the figures, when there are any ---------- */
.ap-about-facts{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ap-about-facts-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:0;
}
.ap-about-facts-grid > div{padding:26px 0 26px 26px; border-left:1px solid var(--line)}
.ap-about-facts-grid > div:first-child{padding-left:0; border-left:0}
.ap-about-facts-grid dt{
  font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(30px,3.4vw,46px);
  line-height:1; color:var(--orange); font-variant-numeric:tabular-nums;
}
.ap-about-facts-grid dd{
  margin:10px 0 0; font-family:'Space Mono',monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* ---------- the story ---------- */
.ap-about-story{overflow-x:clip}
.ap-about-story-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,70px); align-items:start;
}
.ap-about-story-head .ap-display{font-size:clamp(30px,3.8vw,54px); line-height:1.02; margin-top:14px}
.ap-about-story-body p{
  margin:0 0 20px; font-size:17px; font-weight:300; line-height:1.72;
  color:var(--muted); max-width:62ch; text-wrap:pretty;
}
.ap-about-story-body p:first-child{color:rgba(238,240,246,.9); font-size:18.5px}
.ap-about-story-body p:last-child{margin-bottom:0}
.ap-about-planet{
  top:clamp(40px,8vh,110px); right:clamp(-20px,-1vw,40px);
  width:clamp(130px,15vw,240px); opacity:.8;
  animation:apDriftR 17s ease-in-out infinite;
}
@media (max-width:1024px){ .ap-about-planet{display:none} }
@media (prefers-reduced-motion:reduce){ .ap-about-planet{animation:none} }

/* ---------- what we argue for ---------- */
.ap-about-belief-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px}
.ap-about-belief{
  position:relative; padding:30px 26px 28px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg,rgba(18,20,27,.9),rgba(8,9,13,.9));
  transition:border-color .35s ease, translate .35s ease;
}
.ap-about-belief:hover{border-color:rgba(255,90,20,.42); translate:0 -4px}
.ap-about-belief-n{
  display:block; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.22em; color:var(--orange); margin-bottom:16px;
}
.ap-about-belief h3{margin:0 0 10px; font-size:19px; font-weight:500; line-height:1.3; color:var(--paper)}
.ap-about-belief p{margin:0; font-size:15px; font-weight:300; line-height:1.62; color:var(--muted); text-wrap:pretty}

/* ---------- the team ---------- */
/* 236px rather than 260: the grid was written when the team was three, and
   at 260 a fourth person could not fit on the row inside the shell, so one
   of them sat alone on a second line. */
.ap-about-team-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(236px,1fr)); gap:22px}
.ap-about-person{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#0a0b10; display:flex; flex-direction:column;
  transition:border-color .35s ease, translate .35s ease;
}
.ap-about-person:hover{border-color:rgba(255,90,20,.45); translate:0 -5px}
.ap-about-face{display:block; aspect-ratio:1/1.12; overflow:hidden; background:#07080c}
.ap-about-face img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block}
/* no headshot yet: the panda stands in, sized to sit in the frame rather
   than be cropped by it, over the same glow the hero uses */
.ap-about-face.is-panda{
  display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 40%, rgba(255,90,20,.14), transparent 62%), #07080c;
}
.ap-about-face.is-panda img{
  /* contained, not cropped: the stand-in is a whole figure and half a
     panda in a portrait frame reads as a mistake */
  width:auto; max-width:82%; height:88%; object-fit:contain;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
}
.ap-about-person-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto}
.ap-about-person-body strong{
  font-family:'Anton',sans-serif; font-weight:400; font-size:23px;
  text-transform:uppercase; letter-spacing:.01em; color:var(--paper);
}
.ap-about-role{
  font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--orange);
}
.ap-about-person-body p{margin:6px 0 0; font-size:14.5px; font-weight:300; line-height:1.55; color:var(--muted)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ap-about-story-grid{grid-template-columns:minmax(0,1fr)}
  .ap-about-facts-grid > div{padding:20px 0; border-left:0; border-top:1px solid var(--line)}
  .ap-about-facts-grid > div:first-child{border-top:0}
}

/* ---------- the profile link on a team card ----------
   Last line of the card, so the cards keep their shape whether or not a
   person has one. */
/* Pushed to the bottom of the card, so four cards whose descriptions run to
   different lengths still line their links up with each other. */
.ap-about-person-body{display:flex; flex-direction:column; flex:1}
.ap-about-person-body p{margin-bottom:0}
.ap-about-li{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  margin-top:auto; padding-top:14px;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  transition:color .25s ease;
}
.ap-about-li .ap-ico{width:16px; height:16px; flex:none}
.ap-about-li:hover,
.ap-about-li:focus-visible{color:var(--orange)}

/* ---------- the two CTAs into Contact ----------
   A sentence and a button on one line, wrapping to two when the sentence
   runs out of room. */
.ap-about-cta{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:14px 26px;
  margin:clamp(40px,6vh,68px) 0 0;
  text-align:center;
}
.ap-about-cta > span{
  font-size:16px; font-weight:300; line-height:1.5; color:var(--muted);
  /* No ch cap: these two sentences are short enough to sit on one line
     next to the button, and a cap that broke a 64-character line in half
     read as a paragraph rather than as a lead-in. The flex row still
     wraps the button away, and then the text, as the viewport narrows. */
  max-width:100%;
}

@media (prefers-reduced-motion:reduce){
  .ap-about-li{transition:none}
}

/* ---------- the bench, under the team ----------
   A figure and a sentence, not a fifth card: the four above are people you
   can see, and this is the shape around them. */
.ap-about-bench{
  display:flex; align-items:center; gap:clamp(20px,3vw,38px);
  margin:clamp(34px,5vh,54px) auto 0;
  max-width:860px;
  padding:clamp(22px,3vw,30px) clamp(24px,3.4vw,36px);
  border:1px solid var(--line); border-left:2px solid var(--orange);
  border-radius:14px;
  background:rgba(238,240,246,.02);
}
.ap-about-bench-n{
  flex:none;
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:clamp(34px,4.6vw,56px); line-height:1;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;          /* a figure never breaks across lines */
}
.ap-about-bench-copy{
  font-size:15.5px; font-weight:300; line-height:1.62; color:var(--muted);
  text-wrap:pretty;
}
.ap-about-bench-copy strong{
  display:block; margin-bottom:5px;
  font-weight:500; color:var(--paper);
}

@media (max-width:640px){
  .ap-about-bench{flex-direction:column; align-items:flex-start; gap:12px}
}