/* ============================================================================
   MTL STUDENTS · Direction A « Nuit » · page À propos
   ----------------------------------------------------------------------------
   Loaded after nuit.css, which stays frozen. Nothing here redefines a token or
   a shared component: this file adds the four things this page needs that the
   home page did not (a contact-sheet portrait strip, the quote cards, the
   coordinator roll and the testimonial band) and overrides shared components
   only where a class is reused in a new context.

   The organising idea: the quotes are the design. Nearly every person on this
   team chose a line for themselves and the live site renders them as grey
   captions under 120px thumbnails. Here the quote is the largest thing in the
   card and the name sits beneath it.

   The portraits carry no names. We harvested the series and the roster from
   different parts of the live page and never established which face belongs to
   which name; a wrong pairing would put a real person's name on a stranger.
   When Grace confirms the mapping, a <figcaption> goes into each figure in
   .ap-strip and nothing else changes.
   ========================================================================== */

/* --------------------------------------------------------------- hero ---- */

/* No hero photograph on this page: the portrait strip immediately below is the
   image. That leaves the hero shorter than the home page's, so it gets less
   bottom padding rather than a hole. */
.ap-hero { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

/* ---------------------------------------------------- la série (strip) --- */
/* Reuses .gal / .gal__rail from nuit.css, which already gives full-bleed
   overflow-x scrolling, a hidden scrollbar and the native drag-to-pan handler
   in nuit.js. Only the density changes: small frames packed tight read as a
   contact sheet, which is the honest way to show a series you cannot yet
   caption. */

.ap-series { padding-block: clamp(2rem, 4vw, 3rem) 0; }
.ap-strip {
  gap: .5rem;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding-bottom: .25rem;
  scroll-snap-type: x proximity;
}
.ap-strip figure { width: clamp(116px, 14vw, 178px); }
.ap-strip img { border-radius: 2px; }

.ap-cap { margin-top: 1.1rem; }

/* ------------------------------------------------------------ mission ---- */

.ap-mission {
  background: var(--ink-2);
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
}

/* The kicker-left / content-right rhythm of .manifesto__grid, generalised so
   the mission and the closing CTA can both use it. */
.ap-two {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 5rem);
}
.ap-two p { color: var(--cream-70); max-width: 62ch; }
.ap-two p + p { margin-top: 1.35rem; }

/* Her mission sentence, split: the verb clause runs at reading-lead size under
   the heading it completes. */
/* Selector carries .ap-two so it outranks `.ap-two p` without !important. */
.ap-two p.ap-lede {
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.75rem);
  line-height: 1.32;
  color: var(--cream);
  margin-top: 1.75rem;
  max-width: 34ch;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- histoire ---- */

.ap-story { padding-block: clamp(3.5rem, 8vw, 7.5rem); }
.ap-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.ap-prose { margin-top: 1.75rem; }
.ap-prose p { color: var(--cream-70); max-width: 58ch; }
.ap-prose p + p { margin-top: 1.35rem; }
/* The four people who started it are the only bolded words in the passage. */
.ap-prose b { color: var(--cream); font-weight: 600; }

.ap-figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 2vw, 1.15rem);
}
/* A half-step offset so the pair reads as a spread from a contact sheet rather
   than as two database records. */
.ap-figs figure:first-child { margin-top: clamp(1.5rem, 5vw, 3.5rem); }
.ap-figs img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  filter: saturate(.94);
}

.ap-story__pull { max-width: 46ch; }

/* -------------------------------------------------------------- équipe --- */

.ap-team {
  background: var(--ink-2);
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
}
/* .kicker doing duty as an h3. Same rule-and-caps treatment as every other
   label on the site, so the three sub-rosters read as one system. */
.ap-sub {
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--cream-14);
  color: var(--pink);
}
.ap-sub::before { background: var(--pink); }

/* ---- the founder, given the full pull-quote treatment ---- */

.ap-lead {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 44rem;
}
/* The founder's line is the largest quote on the page, ahead of the cards and
   ahead of the pull quote in the history section. That ranking is deliberate. */
.ap-lead__q {
  margin-top: 0;
  font-style: italic;
  font-size: clamp(1.45rem, 1.1rem + 1.55vw, 2.75rem);
}
.ap-lead__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 1.1rem;
  margin-top: 1.1rem;
  padding-left: clamp(1.75rem, 4vw, 2.75rem);
}
.ap-lead__who b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem);
  letter-spacing: -.015em;
}
.ap-lead__who span {
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- the quote cards ---- */

/* Three columns, fixed rather than auto-fit. The rosters are 5, 3 and 6 people:
   auto-fit resolved to four and five columns on a wide screen and left a single
   orphan card on the last row of two of the three grids. minmax(0, 1fr) is what
   keeps a long quote from pushing a column wider than its share. */
.ap-grid {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1rem);
}
.ap-grid--open { margin-top: clamp(.75rem, 1.5vw, 1rem); }

.ap-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  border: 1px solid var(--cream-14);
  border-radius: 4px;
  background: linear-gradient(158deg, rgba(74, 8, 16, .42) 0%, rgba(36, 30, 33, 0) 72%);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.ap-card:hover {
  transform: translateY(-3px);
  border-color: rgba(248, 96, 192, .45);
  background: linear-gradient(158deg, var(--oxblood) 0%, rgba(36, 30, 33, 0) 78%);
}
.ap-card__i {
  font-family: var(--quote);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--orange);
}
/* The whole point of the page. */
.ap-card__q {
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + .85vw, 1.95rem);
  line-height: 1.16;
  color: var(--cream);
  text-wrap: pretty;
  /* Arabic sits inside one of these quotes; let the browser resolve it. */
  unicode-bidi: plaintext;
}
.ap-grid--tight .ap-card__q { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem); }
.ap-card__who {
  margin-top: auto;          /* names line up along the bottom of the row */
  padding-top: .9rem;
  border-top: 1px solid var(--cream-14);
}
.ap-card__n {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 110;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.005em;
}
.ap-card__r {
  display: block;
  margin-top: .25rem;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Three executive seats are anonymous on the live site: a role, sometimes a
   quote, no name. Dashed rather than solid, so an open seat is visibly open
   and Grace can see exactly what we still need from her. */
.ap-card--open {
  background: none;
  border-style: dashed;
  border-color: rgba(247, 240, 232, .18);
}
.ap-card--open:hover {
  background: none;
  transform: none;
  border-color: rgba(248, 96, 192, .4);
}
.ap-card--open .ap-card__q { color: var(--cream-70); }
.ap-card__n--open {
  font-family: var(--body);
  font-variation-settings: 'wdth' 100;
  font-weight: 500;
  font-size: .9375rem;
  letter-spacing: .02em;
  color: var(--cream-45);
}

/* ---- coordinators: names only ---- */
/* Five names and five quotes exist on the live page but they are rendered as a
   run of names followed by a run of quotes, so the pairing is unrecoverable.
   Rather than guess, this roster is carried on type: the names run at display
   size, which gives them more presence than a caption ever did. */

.ap-roll {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--cream-14);
}
.ap-roll li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem 1.5rem;
  padding-block: clamp(.9rem, 2vw, 1.3rem);
  border-bottom: 1px solid var(--cream-14);
}
.ap-roll b {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.ap-roll span {
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------------------------------------------------------- témoignage --- */

.ap-testi {
  background: var(--oxblood);
  border-top: 1px solid rgba(248, 96, 192, .25);
  border-bottom: 1px solid rgba(248, 96, 192, .25);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.ap-testi__fig {
  position: relative;
  padding-left: clamp(0px, 4vw, 5.5rem);
}
/* One guillemet, oversized, as a mark rather than as punctuation. It is set
   outside the text column on wide screens and disappears under it on small,
   where there is no room to spare. */
.ap-testi__mark {
  position: absolute;
  left: 0;
  top: -.35em;
  font-family: var(--quote);
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  color: var(--pink);
  opacity: .55;
  pointer-events: none;
}
.ap-testi__q {
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 2.15rem);
  line-height: 1.22;
  max-width: 30ch;
  color: var(--cream);
  text-wrap: pretty;
}
.ap-testi__who {
  margin-top: 1.5rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-45);
}

/* ----------------------------------------------------------------- cta --- */

.ap-cta { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .ap-two,
  .ap-story__grid { grid-template-columns: minmax(0, 1fr); }
  .ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The portraits become a pair under the passage instead of a side column. */
  .ap-figs figure:first-child { margin-top: 0; }
  .ap-testi__mark { display: none; }
  .ap-testi__fig { padding-left: 0; }
}

@media (max-width: 560px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-strip figure { width: 40vw; }
  /* Name over role, always. Left to wrap, a short name like "2B" kept its role
     on the same line while every longer name pushed it to the next one. */
  .ap-roll li { flex-direction: column; align-items: flex-start; }
  .ap-roll b { font-size: 1.25rem; }
  .ap-lead__who { padding-left: 0; }
}