/* ============================================================================
   MTL STUDENTS · Direction A « Nuit », page Événements
   ----------------------------------------------------------------------------
   Page-local layer, loaded after nuit.css. nuit.css is the shared system for
   Direction A and is not edited from here: anything below that deserves to be
   shared gets promoted into it later, deliberately.

   The page has one job. Her live site files seven real, ticketed, photographed
   events under a heading that reads "Événements passés", which frames the best
   evidence on the whole site as leftovers. Here the upcoming ticket leads, and
   the archive that follows is built as a body of work on a dated spine.
   ========================================================================== */

/* --------------------------------------------------------- page header --- */
/* Reuses .hero, .hero__grid, .hero__title and .hero__dek so this page and the
   home page are visibly the same construction. Only the vertical rhythm is
   tightened, because the upcoming event, not the header, is the lead. */

.phead { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
/* One step down from the home hero on purpose. This is a page header, not the
   lead: the lead on this page is the ticket you can still buy. */
.phead .hero__title { font-size: clamp(2.5rem, 1.1rem + 5vw, 5.5rem); }
.phead .hero__dek { max-width: 26ch; }
.phead .hero__globe { opacity: .12; }

/* ------------------------------------------------------------- ribbon ---- */
/* Dates are the spine of this page, so the chronology is stated once, at the
   top, before any of it is explained. Scrolls rather than wraps: a timeline
   that folds onto three lines stops being a timeline.

   Note the scrollbar is left visible (thin) rather than hidden. A hidden
   scrollbar on a horizontal rail is a dead end on a desktop machine without a
   trackpad, and this is short enough that it does not need the drag handler
   the gallery rail gets. */

.ribbon {
  display: flex;
  gap: .5rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-bottom: .5rem;
  border-top: 1px solid var(--cream-14);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-14) transparent;
}
/* Date over name, stacked, so eight pills fit one line at desktop width
   instead of running off the edge and turning the timeline into a rail
   nobody notices they can scroll. */
.ribbon a {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  gap: .2em;
  padding: .55rem 1rem;
  border: 1px solid var(--cream-14);
  border-radius: 14px;
  text-decoration: none;
  white-space: nowrap;
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-45);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.ribbon a b {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cream-70);
  transition: color .25s var(--ease);
}
.ribbon a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.ribbon a:hover b { color: var(--ink); }

/* The one date that has not happened yet is the one you can act on. */
.ribbon a[data-up] { border-color: rgba(248, 96, 192, .55); color: rgba(248, 96, 192, .75); }
.ribbon a[data-up] b { color: var(--pink); }
.ribbon a[data-up]:hover { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.ribbon a[data-up]:hover b { color: var(--ink); }

/* ------------------------------------------------------------ upcoming --- */

/* The nav is sticky at 74px. Lenis offsets anchor jumps by -90 when the
   enhancement layer is up; scroll-margin covers the case where it is not. */
.up, .arch { scroll-margin-top: 92px; }

.up { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 6vw, 5rem); }
.up__card {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: linear-gradient(160deg, var(--oxblood) 0%, var(--ink-2) 78%);
  border: 1px solid var(--cream-14);
  border-radius: 6px;
}

/* Her posters are Canva artwork carrying their own palettes: this one is a
   bright cobalt blue that would fight an oxblood-and-cream page if it were
   simply dropped in. Tilted, shadowed and captioned, it reads as an object
   pinned to the page rather than as the page's own colour. */
.up__poster { margin: 0; max-width: 420px; }
.up__poster img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  rotate: -1.8deg;
  transition: rotate .5s var(--ease), scale .5s var(--ease);
}
.up__card:hover .up__poster img { rotate: 0deg; scale: 1.015; }
.up__poster figcaption {
  margin-top: .85rem;
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.up__poster figcaption b { color: var(--cream-70); font-weight: 500; }

.up__flag {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.1rem;
  padding: .4rem .85rem;
  border: 1px solid rgba(248, 96, 192, .4);
  border-radius: 999px;
  background: rgba(248, 96, 192, .12);
  color: var(--pink);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.up__flag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  animation: upPulse 2.6s var(--ease) infinite;
}
@keyframes upPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.up__title {
  font-family: var(--display);
  font-variation-settings: 'wdth' 115;
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
  line-height: .94;
  letter-spacing: -.025em;
  margin-block: .7rem 1rem;
}
.up__dek { color: var(--cream-70); max-width: 46ch; }
.up__note {
  margin-top: 1.1rem;
  font-size: .75rem;
  color: var(--cream-45);
  max-width: 44ch;
}

/* ---------------------------------------------------------------- band --- */
/* One photograph at full width, between the ticket and the archive. Shown
   whole: EXUTOIRE's watermark sits in the lower right of this frame and a
   decorative crop would remove somebody's credit. */

.band { margin: 0; }
.band img { width: 100%; }
.band__cap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ------------------------------------------------------------- archive --- */

.arch {
  background: var(--ink-2);
  padding-block: clamp(4rem, 9vw, 8rem);
}

/* The three measurements the row grid and the spine both depend on. Declaring
   them once means the vertical rule and the dots cannot drift away from the
   column they belong to. */
.arch__list {
  --spine: clamp(4.25rem, 8vw, 6.5rem);
  --evgap: clamp(1rem, 3vw, 2.5rem);
  --evpad: clamp(2rem, 4vw, 3.25rem);
  position: relative;
  margin-top: clamp(1.75rem, 4vw, 3rem);
  border-bottom: 1px solid var(--cream-14);
}
.arch__list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--spine) + var(--evgap) / 2);
  width: 1px;
  background: var(--cream-14);
}

.ev {
  position: relative;
  display: grid;
  grid-template-columns: var(--spine) minmax(0, 1fr) minmax(0, 21rem);
  column-gap: var(--evgap);
  row-gap: 1.25rem;
  /* Centred, not top-aligned. A 600x774 poster and three lines of text are
     never the same height, and hanging both from a top line left 400px of
     dead column under every poster row. */
  align-items: center;
  padding-block: var(--evpad);
  border-top: 1px solid var(--cream-14);
  scroll-margin-top: 92px;
}

/* The dot hangs off the date rather than off the row, so it tracks the date
   wherever vertical centring puts it. It punches through the spine, so its
   ring has to match the section fill rather than the page ground. */
.ev__date { display: block; position: relative; }
.ev__date::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--evgap) / 2 - 4.5px);
  top: .6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px var(--ink-2);
  transition: background .3s var(--ease), scale .3s var(--ease);
}
.ev:hover .ev__date::after { background: var(--pink); scale: 1.4; }
.ev__date b {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 120;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: .9;
  letter-spacing: -.025em;
  color: var(--cream);
}
.ev__date span {
  display: block;
  margin-top: .35rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.ev__date i {
  display: block;
  margin-top: .15rem;
  font-style: normal;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream-45);
}

.ev__name {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
/* A ledger line rather than a stacked label. It carries the entry across the
   full width of its column, which is what stops each row reading as a short
   caption stranded beside a large picture. */
.ev__place {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-top: 1.15rem;
  padding-top: .85rem;
  border-top: 1px solid var(--cream-14);
  color: var(--cream-70);
  font-size: .9375rem;
  transition: border-color .3s var(--ease);
}
.ev:hover .ev__place { border-top-color: rgba(248, 96, 192, .35); }
.ev__place span {
  flex: none;
  min-width: 3.25rem;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cream-45);
}

.ev__art { margin: 0; }
.ev__art img { width: 100%; border-radius: 3px; }
.ev__art figcaption {
  margin-top: .75rem;
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-45);
}
.ev__art figcaption b { color: var(--cream-70); font-weight: 500; }

/* Two kinds of image, and the difference is worth showing. A poster is
   artwork: it tilts, it casts a shadow, it is an artifact. A photograph is a
   record of the evening: it sits square in a plain frame, uncropped, so the
   watermark in its lower right survives the layout. */
.ev__art--poster img {
  rotate: -1.6deg;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  transition: rotate .5s var(--ease), scale .5s var(--ease);
}
.ev:nth-of-type(even) .ev__art--poster img { rotate: 1.4deg; }
.ev:hover .ev__art--poster img { rotate: 0deg; scale: 1.02; }

.ev__art--photo img {
  border: 1px solid var(--cream-14);
  filter: saturate(.96);
  transition: filter .45s var(--ease);
}
.ev:hover .ev__art--photo img { filter: saturate(1.08); }

.arch__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  color: var(--cream-45);
}

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

@media (max-width: 900px) {
  .up__card { grid-template-columns: minmax(0, 1fr); }
  .up__poster { max-width: 22rem; }
}

/* The spine needs three columns to mean anything. Below this the row stacks,
   the rule and the dot are removed rather than left floating, and the date
   turns from a stacked block into one line. */
@media (max-width: 760px) {
  .arch__list::before { display: none; }
  .ev { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; align-items: start; }
  .ev__date::after { display: none; }
  .ev__date { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .6rem; }
  .ev__date b { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); }
  .ev__date span, .ev__date i { margin-top: 0; }
  .ev__art { max-width: 20rem; }
}

@media (max-width: 560px) {
  .phead .hero__dek { max-width: none; }
  .up__card { padding: 1rem; }
}