/* ============================================================================
   MTL STUDENTS · Direction B « Soleil » · Événements
   ----------------------------------------------------------------------------
   Page-local layer only. soleil.css is the shared system and is frozen; every
   override that wants to live there is flagged in the handback instead of
   being written there.

   ------------------------------------------------------------ the idea ----
   Direction A files this page as a dated spine: one row per event, a numeral
   on the left, a hairline underneath, the chronology running top to bottom as
   a single unbroken column.

   Direction B hangs it on a wall. The unit is not a row, it is a TICKET: a
   poster with a torn-off stub under a real perforation. That one object is
   built once and used at two scales, the width of the page for the sortie you
   can still buy, and poster-thumbnail size for the seven already done. Nothing
   on this page is a numeral in a margin and nothing is a hairline.

   The chronology is not a spine either. It is cut where her own calendar cuts,
   into two colour-blocked blocks that follow soleil.css's rule that a change
   of section IS a change of colour:

     paper (head) → pink (le billet) → sand (juin/juillet) →
     oxblood (janvier/février) → orange (les photos) → gold (news) → ink (foot)

   The two halves of the wall also run at different densities, three across
   then four across, so the recent season reads louder than the old one. That
   is the whole ranking mechanism: no dates in a margin, no ordering rule
   spelled out, just bigger posters for the newer block.

   ---------------------------------------------------------- the ticket ----
   .perf is the perforation and it is shared by both scales. A 2px dashed ink
   line across the card, with an 18px circle punched through each side edge in
   whatever colour the section behind the card is. That colour arrives as
   --notch, set once per section, which is why the same component reads
   correctly on pink, on sand and on oxblood without a variant class.

   The circles sit at left/right: -12px against a card whose border is 3px, so
   their centres land exactly on the middle of the border and the border reads
   as punched through rather than as decorated. They protrude 9px past the
   card, which is inside the smallest gutter this page ever has (20px at
   320px), and that is the number to re-check if the gutter ever shrinks.
   ========================================================================== */

/* ------------------------------------------------------------ page head -- */
/* Kept on the shared .hero shell: the sun motif, its scroll drift and the
   z-index handling all come from soleil.css and soleil.js rather than being
   re-derived here. Only what fills it is local. */

.phead .hero__dek { margin-top: 1.25rem; }

/* Three counts as pills rather than as the home page's big numeral blocks.
   Same information A puts in .stats, said at a tenth of the size, because on
   this page the wall is the headline act and the count is a caption. */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
}
.tally li {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .45rem 1rem .4rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tally li:nth-child(1) { background: var(--pink); }
.tally li:nth-child(2) { background: var(--orange); }
.tally li:nth-child(3) { background: var(--gold); }
.tally b { font-size: 1.5rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }

/* ------------------------------------------------------- the perforation -- */
/* Shared by the big ticket and the seven small ones. --notch is the colour of
   whatever sits behind the card and is set per section, never here. */

.perf {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--ink-50);
}
.perf::before,
.perf::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--notch, var(--paper));
}
.perf::before { left: -12px; }
.perf::after  { right: -12px; }

/* ----------------------------------------------------------- le billet --- */
/* The upcoming sortie, as one object the width of the page rather than as the
   first card of a list. Direction A gives it a two-column card; here the
   perforation splits it horizontally into what the day is (top) and what it
   costs and how you get in (the stub), which is how a ticket is actually
   organised. */

.up {
  background: var(--pink);
  color: var(--ink);
  --notch: var(--pink);
}

.billet {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 6px;
  box-shadow: 12px 12px 0 var(--ink);
  /* padding lives on the two halves so .perf can span the full inner width
     without negative margins, which is what keeps the notch arithmetic simple */
  padding: 0;
}

.billet__top {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 2rem);
}

/* Her posters are Canva artwork with their own palettes, so they get a paper
   matte and a hard shadow rather than being bled into the page. */
.billet__poster {
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  padding: 8px;
  rotate: -1.8deg;
  box-shadow: 10px 10px 0 var(--gold);
  transition: rotate .5s var(--pop), box-shadow .5s var(--pop);
}
.billet:hover .billet__poster { rotate: 0deg; box-shadow: 14px 14px 0 var(--gold); }
.billet__poster img { width: 100%; }
.billet__poster figcaption {
  margin-top: .55rem;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.billet__poster figcaption b { color: var(--ink); }

.billet__when {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.billet__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 1rem + 3vw, 4rem);
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  margin-block: .5rem .8rem;
}
.billet__info .lede { margin-bottom: 1.3rem; }
.billet__info .chips { margin-block: 0 1.3rem; }
.chip { max-width: 100%; }

/* The stub. Price on the left, the way in on the right. */
.billet__stub {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.1rem, 2.5vw, 2rem);
}
.billet__price {
  display: grid;
  gap: .15rem;
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-72);
}
.billet__price b {
  font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--ink);
}
.billet__act .cta { margin-top: 0; }
.billet__note {
  margin-top: 1rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-72);
  max-width: 52ch;
}

/* ----------------------------------------------------------------- wall -- */

.wall--sand { background: var(--paper-2); --notch: var(--paper-2); }
.wall--dark {
  background: var(--oxblood);
  color: var(--paper);
  --notch: var(--oxblood);
  --focus: var(--gold);
}
.wall__intro { margin-top: 1rem; }

/* The month bar. A colour block with the range in it, which is the label the
   wall hangs under. Ink on sand, gold on oxblood, so it always separates from
   the section rather than sitting quietly on it. */
.span {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.75rem);
  padding: .7rem clamp(1rem, 2.5vw, 1.9rem) .75rem;
  border: var(--rule) solid var(--ink);
  border-radius: 999px;
}
.wall--sand .span { background: var(--ink); color: var(--gold); }
.wall--dark .span { background: var(--gold); color: var(--ink); }
.span__t {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.25rem, .85rem + 1.9vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.span__t i { font-style: normal; color: var(--pink); }
.wall--dark .span__t i { color: var(--berry); }
.span__n {
  font-family: var(--display);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wall--sand .span__n { color: var(--paper-72); }
.wall--dark .span__n { color: var(--ink-72); }

.wall__grid {
  display: grid;
  gap: clamp(1.5rem, 2.6vw, 2rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.wall__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wall__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* -------------------------------------------------------------- le pin --- */
/* One archive event. The same ticket as .billet at a tenth of the size: paper
   card, ink border, poster on top, perforation, stub with the name and the
   place. The date is a chip straddling the top edge, which is where a wall
   sticks its label. No numeral in a margin anywhere. */

.pin {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: var(--rule) solid var(--ink);
  border-radius: 6px;
  padding: 0;
  rotate: -1.3deg;
  transition: rotate .45s var(--pop), box-shadow .45s var(--pop);
}
.pin:nth-child(even) { rotate: 1.1deg; }
.wall--sand .pin { box-shadow: 10px 10px 0 var(--ink); }
.wall--dark .pin { box-shadow: 10px 10px 0 var(--pink); }
.pin:hover { rotate: 0deg; }
.wall--sand .pin:hover { box-shadow: 14px 14px 0 var(--ink); }
.wall--dark .pin:hover { box-shadow: 14px 14px 0 var(--pink); }

.pin__art { padding: 8px; }
.pin__art img { width: 100%; }

.pin__date {
  position: absolute;
  z-index: 2;
  top: -15px;
  left: 14px;
  padding: .32rem .75rem .28rem;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -3deg;
  font-family: var(--display);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
}
.pin:nth-child(even) .pin__date { background: var(--pink); rotate: 2.5deg; }

.pin__stub { padding: .9rem 1rem 1.05rem; }
.pin__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.05rem, .95rem + .65vw, 1.5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.pin__place {
  margin-top: .4rem;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--ink-72);
}
.pin__src {
  margin-top: .7rem;
  font-family: var(--display);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* --------------------------------------------------------------- photos -- */
/* The affiches say what was promised; these say what happened. Every frame is
   shown whole. Three of the four carry a photographer's watermark in the
   lower right, so cropping is not available as a layout tool here and the
   tilt does the work instead. */

.shots { background: var(--orange); color: var(--ink); position: relative; }

/* soleil.css's .block--dome rounds the top of a section, and the two corners
   it cuts away show whatever is BEHIND the section, which is the body ground.
   On the home page every dome happens to follow a paper section, so nobody
   noticed. Here the gold newsletter dome follows this orange block, and the
   corners were showing a paper crescent across the seam.
   The section underneath supplies the missing colour: a strip exactly one
   dome-radius tall, painted below this block and covered by the gold
   everywhere except the two corners. Later in the DOM, both positioned and
   both at z-index auto, so the newsletter paints over this and no z-index
   is needed. Flagged for soleil.css in the handback. */
.shots::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: clamp(1.5rem, 5vw, 5rem);
  background: var(--orange);
  pointer-events: none;
}
.shots__h { margin-top: 1rem; max-width: 20ch; }
.shots__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.9rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.frame {
  background: var(--paper);
  border: var(--rule) solid var(--ink);
  border-radius: 6px;
  padding: 8px;
  rotate: -1.4deg;
  box-shadow: 10px 10px 0 var(--ink);
  transition: rotate .45s var(--pop), box-shadow .45s var(--pop);
}
.frame:nth-child(even) { rotate: 1.4deg; }
.frame:hover { rotate: 0deg; box-shadow: 14px 14px 0 var(--ink); }
.frame img { width: 100%; }
.frame figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  justify-content: space-between;
  margin-top: .6rem;
  padding: .4rem .6rem .35rem;
  background: var(--gold);
  border: 2px solid var(--ink);
  border-radius: 3px;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.35;
}
.frame figcaption b { font-weight: 800; }

/* ------------------------------------------------------------ responsive -- */
/* Every number below was chosen against a gutter, not by eye. The gutter is
   soleil.css's --gut, clamp(1.25rem, 4vw, 4.5rem): 20px at 320px, 28px at
   700px, 40px at 1000px. A card's right edge sits on the content edge, so its
   shadow plus its rotation bulge has to stay under the gutter at every step
   or the page scrolls sideways. */

@media (max-width: 1000px) {
  .billet__top { grid-template-columns: minmax(0, 1fr); }
  .billet__poster { max-width: 420px; }
  .wall__grid--3,
  .wall__grid--4,
  .shots__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .billet__stub { grid-template-columns: minmax(0, 1fr); }
}

/* Rotations off below 700px, exactly as soleil.css does it: a tilted card in a
   350px column pushes its own bounding box past the gutter, and the budget for
   horizontal overflow on this project is zero. Shadows come down with them. */
@media (max-width: 700px) {
  .billet, .billet__poster, .pin, .pin__date, .frame { rotate: 0deg; }
  .billet { box-shadow: 7px 7px 0 var(--ink); }
  .billet__poster { box-shadow: 7px 7px 0 var(--gold); }
  .wall--sand .pin, .frame { box-shadow: 7px 7px 0 var(--ink); }
  .wall--dark .pin { box-shadow: 7px 7px 0 var(--pink); }
  .billet:hover .billet__poster { box-shadow: 7px 7px 0 var(--gold); }
  .wall--sand .pin:hover, .frame:hover { box-shadow: 7px 7px 0 var(--ink); }
  .wall--dark .pin:hover { box-shadow: 7px 7px 0 var(--pink); }
}

@media (max-width: 560px) {
  .wall__grid--3,
  .wall__grid--4,
  .shots__grid { grid-template-columns: minmax(0, 1fr); }
  /* One column means one very tall card per poster, so cap the poster rather
     than let a 400x535 affiche fill a phone screen on its own. */
  .pin, .frame { max-width: 420px; }
  .tally li { padding-inline: .8rem; }
}


/* The .shots::after backfill below predates --dome-from in soleil.css; the
   system rule now covers this seam. Declared here for parity with the other
   pages, and harmless alongside the older strip. */
.news.block--dome { --dome-from: var(--orange); }