/* ============================================================================
   MTL STUDENTS · Direction B « Soleil » · À propos
   ----------------------------------------------------------------------------
   Page-specific styles only. soleil.css is the shared system and stays frozen;
   anything here that deserves to be shared is listed in the handback so the
   orchestrator can promote it.

   The section rhythm on this page, since in Direction B the rhythm IS the
   layout system:

     paper (hero) → pink (mission, dome 1) → sand (histoire)
     → oxblood (la série) → ink (le mur) → orange (bénévoles)
     → gold (témoignage, dome 2) → paper (cta) → ink (footer)

   The oxblood block is not a colour choice, it is the same value soleil.css
   sampled from the studio backdrop the portrait series was shot against. The
   frames therefore bleed into their own ground instead of sitting on top of
   it, which is the single move this page makes that no other page can.

   Three components are new here and are the page's whole argument:

     .ap-step  the history as four physical slabs instead of a prose column
     .ap-say   a quote as an object: the sentence is the largest thing in it
               and the person's name is the stamp underneath
     .ap-flag  the honesty note. Used three times, always to say out loud what
               we could not source. It is a component rather than three
               one-offs on purpose: the page has three separate gaps in the
               client's own content and they should look like one policy.

   No blurred shadow appears in this file, same as soleil.css.
   ========================================================================== */

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

.ap-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
}
/* A paper card rather than a second paragraph: it announces the three groups
   the page is built from before the reader has scrolled into any of them. */
.ap-hero__note {
  padding: clamp(.9rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.4rem);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink);
  font-size: .9375rem;
  line-height: 1.45;
  max-width: 34ch;
}

/* -------------------------------------------------------------- mission -- */
/* Dome 1 of 2. Full-bleed pink, the same move the home page makes for its
   manifesto so the two pages read as one site. */

.ap-mission { background: var(--pink); color: var(--ink); }
.ap-mission__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
}
.ap-mission p { max-width: 58ch; }
.ap-mission .lede { font-weight: 600; }
.ap-mission .lede + div { margin-top: 1.2rem; }
.ap-mission p + p { margin-top: 1.2rem; }

/* ------------------------------------------------------------- histoire -- */
/* Direction A gives her history one prose column beside two photographs. Here
   it is four slabs, each with its own colour tab. Every sentence inside them
   is hers; the four labels are ours and are the only editorial addition. */

.ap-story { background: var(--paper-2); }

.ap-steps {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.ap-step {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 5px;
  /* 8px, and the page gutter never drops below 20px, so the offset always has
     somewhere to land instead of pushing the document sideways. */
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
}
.ap-step__tag {
  display: grid;
  align-content: start;
  gap: .25rem;
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border-right: var(--rule) solid var(--ink);
}
.ap-steps > li:nth-child(1) .ap-step__tag { background: var(--gold); }
.ap-steps > li:nth-child(2) .ap-step__tag { background: var(--pink); }
.ap-steps > li:nth-child(3) .ap-step__tag { background: var(--orange); }
.ap-steps > li:nth-child(4) .ap-step__tag { background: var(--oxblood); color: var(--gold); }
.ap-step__n {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: .9;
  letter-spacing: -.03em;
}
.ap-step__l {
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.25;
}
.ap-step__b { padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.75rem); }
.ap-step__b p { max-width: 62ch; }
.ap-step__b p + p { margin-top: .9rem; }
.ap-step__b b { font-weight: 800; }

.ap-story__pull { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

/* ---------------------------------------------------------------- série -- */
/* Oxblood, because oxblood is the backdrop these portraits were shot against.
   The frames bleed into their own ground. */

.ap-series {
  background: var(--oxblood);
  color: var(--paper);
  --focus: var(--gold);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
/* The default kicker is an ink chip and goes muddy on oxblood, same problem
   soleil.css solves for .res. Same solution. */
.ap-series .kicker { background: var(--gold); color: var(--ink); }
.ap-series .h2 { color: var(--paper); }

/* A filmstrip that runs off both edges of the viewport. Full width without a
   single vw unit: it is a block child of the section, so it is already exactly
   as wide as the document, and the gutter is padding rather than margin. */
.ap-rail {
  display: flex;
  gap: 6px;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding: 6px var(--gut);
  background: var(--ink);
  border-block: var(--rule) solid var(--ink);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--berry) var(--ink);
  -webkit-overflow-scrolling: touch;
}
.ap-frame {
  flex: 0 0 clamp(148px, 19vw, 236px);
  scroll-snap-align: center;
}
.ap-frame img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  /* Every frame in this series puts the face in the upper third. */
  object-position: 50% 24%;
}
/* The one landscape frame. Cropping to the strip's 2:3 takes 45% of its width,
   so its horizontal origin is set separately to keep the subject centred. */
.ap-frame--wide img { object-position: 54% 45%; }

/* ------------------------------------------------------------------ mur -- */
/* The quote wall. A six-column grid so slabs can be sized against each other:
   a two-word quote gets bigger type and less room, a long one gets three
   columns. That relative sizing is the reason this is a grid with explicit
   spans rather than an auto-fit of equal cards. */

.ap-quotes {
  background: var(--ink);
  color: var(--paper);
  --focus: var(--gold);
  --slab-shadow: var(--oxblood);
}
.ap-quotes .kicker { background: var(--gold); color: var(--ink); }
.ap-quotes .h2 { color: var(--paper); }
.ap-quotes__lede { margin-top: 1.1rem; color: var(--paper-72); }

/* Subheads are h3 wearing the kicker chip. Inline-flex, so the margin has to
   come from a block context: hence the explicit display. */
.ap-sub {
  display: inline-flex;
  margin-top: clamp(2.25rem, 5vw, 3.75rem);
}

.ap-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

.ap-say {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  border: var(--rule) solid var(--ink);
  border-radius: 5px;
  box-shadow: 6px 6px 0 var(--slab-shadow, var(--ink));
}
.ap-say--w3 { grid-column: span 3; }
.ap-say--lead {
  grid-column: 1 / -1;
  rotate: -.6deg;
  box-shadow: 10px 10px 0 var(--slab-shadow, var(--ink));
}

.ap-say--pink   { background: var(--pink);    color: var(--ink); }
.ap-say--gold   { background: var(--gold);    color: var(--ink); }
.ap-say--orange { background: var(--orange);  color: var(--ink); }
.ap-say--paper  { background: var(--paper);   color: var(--ink); }
.ap-say--ox     { background: var(--oxblood); color: var(--paper); }

/* The sentence, not uppercased. See the note in the HTML: « le stress, ma
   passion » is lowercase on purpose and « Hamdouli'الله » has no case at all.
   Scale and colour carry the volume instead of a text-transform. */
.ap-say__q {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--q, clamp(1.1rem, .92rem + .95vw, 1.75rem));
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.ap-say--big  { --q: clamp(1.4rem, 1rem + 1.9vw, 2.6rem); }
.ap-say--lead { --q: clamp(1.5rem, 1rem + 2.9vw, 3.2rem); }

.ap-say__who {
  padding-top: clamp(.7rem, 1.6vw, 1rem);
  border-top: 2px dashed currentColor;
}
.ap-say__who b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(.95rem, .9rem + .3vw, 1.15rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.ap-say__who span {
  display: block;
  margin-top: .25rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ------------------------------------------------------- sièges sans nom -- */
/* Dashed, unfilled, and stamped. They read as what they are: a placeholder
   waiting on a name, not a designed card pretending to be finished. The quote,
   where one exists, is labelled as belonging to the post. */

.ap-seats {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.6rem, 1.5vw, 1rem);
}
.ap-seat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 3px dashed var(--paper-48);
  border-radius: 5px;
}
.ap-seat__role {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.1rem, .95rem + .8vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--gold);
}
.ap-seat__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, .95rem + .45vw, 1.25rem);
  line-height: 1.15;
  color: var(--paper);
}
.ap-seat__note {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-72);
}
.ap-seat__stamp {
  margin-top: auto;
  padding: .45em .9em .4em;
  border: 2px solid var(--gold);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ------------------------------------------------------------ coordination -- */
/* Names as stickers. No quotes, because the source cannot tell us which quote
   belongs to which of these five people. */

.ap-roll {
  list-style: none;
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.ap-roll li {
  padding: .6rem 1.15rem .65rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--berry);
}
.ap-roll b {
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.1;
}
.ap-roll span {
  display: block;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-72);
}

/* ----------------------------------------------------------------- flag -- */
/* The honesty note. Three of them on this page, one per gap in the client's
   own content. A gold edge rather than a warning colour: this is not an error
   state, it is a question we are asking the client in public. */

.ap-flag {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(.95rem, 2.2vw, 1.35rem) clamp(1.05rem, 2.4vw, 1.5rem);
  border: 2px solid var(--paper-18);
  border-left: var(--rule) solid var(--gold);
  border-radius: 4px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--paper-72);
  max-width: 66ch;
}
.ap-flag b { color: var(--paper); font-weight: 700; }
/* --paper-72, not --paper-48. Measured: 48% of paper over oxblood lands at
   3.6:1, which is under the 4.5:1 floor for 10px type. 72% is 6.7:1. */
.ap-flag__cred {
  display: block;
  margin-top: .7rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-72);
}
.ap-flag__cred b { color: var(--gold); }

/* ------------------------------------------------------------ bénévoles -- */
/* Same slab component, orange ground, ink shadows. The volunteers get exactly
   the billing the committee gets; on the live site they are the smallest type
   on the page. */

.ap-vol {
  background: var(--orange);
  color: var(--ink);
  --slab-shadow: var(--ink);
}
.ap-wall--vol .ap-say { grid-column: span 2; }

/* ----------------------------------------------------------- témoignage -- */
/* Dome 2 of 2, sparkle 2 of 2. One testimonial exists, so it gets one card and
   the card is large. */

.ap-testi {
  background: var(--gold);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
/* Orange on gold is invisible. Same substitution soleil.css makes on .news. */
.ap-testi .spark { left: 42%; top: 16%; width: clamp(40px, 6vw, 84px); color: var(--pink-deep); opacity: .9; }
.ap-testi > .wrap { position: relative; z-index: 1; }
.ap-testi__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.ap-testi__card {
  padding: clamp(1.4rem, 3.2vw, 2.5rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 5px;
  box-shadow: 12px 12px 0 var(--ink);
  rotate: -.7deg;
}
.ap-testi__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, .95rem + 1.05vw, 1.9rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.ap-testi__who {
  display: inline-block;
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  padding: .45em .95em .4em;
  background: var(--ink);
  color: var(--gold);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

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

.ap-cta__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

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

@media (max-width: 1000px) {
  .ap-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ap-say--w3 { grid-column: span 2; }
}

@media (max-width: 900px) {
  .ap-hero__grid,
  .ap-mission__grid,
  .ap-testi__grid,
  .ap-cta__grid { grid-template-columns: minmax(0, 1fr); }
  .ap-hero__note { max-width: none; }
  .ap-seats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The sparkle was placed against the two-column split; once the block is one
     column it has to go back to the corner or it lands on the heading. */
  .ap-testi .spark { left: auto; right: 4%; top: 10%; }
}

/* Every rotation in this direction is switched off below 700px, for the reason
   soleil.css gives: a tilted card inside a 350px column pushes its own bounding
   box past the gutter, and the budget for horizontal overflow here is zero. */
@media (max-width: 700px) {
  .ap-say--lead, .ap-testi__card { rotate: 0deg; }
  .ap-say--lead { box-shadow: 6px 6px 0 var(--slab-shadow, var(--ink)); }
  .ap-testi__card { box-shadow: 8px 8px 0 var(--ink); }

  /* The tab column stops being a column: at this width 8.5rem of tab leaves
     the prose about 20 characters, which is not a measure. */
  .ap-step { grid-template-columns: minmax(0, 1fr); }
  .ap-step__tag {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    border-right: 0;
    border-bottom: var(--rule) solid var(--ink);
  }
}

@media (max-width: 640px) {
  .ap-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-say, .ap-say--w3, .ap-wall--vol .ap-say { grid-column: span 1; }
  .ap-say--lead { grid-column: 1 / -1; }
  .ap-seats { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
  /* One column. Two slabs of display type across 420px is a word per line. */
  .ap-wall { grid-template-columns: minmax(0, 1fr); }
}

.ap-testi.block--dome { --dome-from: var(--orange); }

/* Backfill for the dome below: the section above paints a strip exactly one
   dome-radius tall, which the dome covers everywhere except its cut-away
   corners. Verified by pixel-sampling the corner. */
.ap-vol { position: relative; }
.ap-vol::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc(-1 * clamp(1.5rem, 5vw, 5rem));
  height: clamp(1.5rem, 5vw, 5rem);
  background: var(--orange);
}