/* ==========================================================================
   events.css — /events and /events/<slug>.

   Loaded third, after tokens.css and site.css (FOUNDATION.md §3). It holds only
   what belongs to these two pages. Every duration, easing and colour is a token:
   there is no raw ms and no raw colour below.

   ONE DELIBERATE DUPLICATION. `.section__title` and `.section__link` live in
   home.css, not site.css, so a page that does not load home.css does not have
   them. They are repeated here under the same names, which is safe because two
   page stylesheets never load together — but they are shared furniture and the
   right home for them is site.css. Flagged for whoever consolidates: About, Work
   and Contact will each have hit this.

   FRAMING (AC-E35). All five committed photographs render 3:4 portrait — the
   Amsterdam set carried EXIF Orientation 6 and has since been rotated in the
   pixels and renamed to its true widths, so all five render 3:4. Every slot
   here is 3/4 and nothing is cropped at all: `object-position` has nothing to
   correct, and Marat is visible presenting in the whole of every frame. The
   files were resized and never cut, and nothing here cuts them either.
   ========================================================================== */

/* --- The opening --------------------------------------------------------- */
.events-intro { padding-bottom: calc(var(--section) * .4); }

.events-intro__standfirst {
  max-width: 48rem;
  margin-top: 3rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* --- What I talk about ---------------------------------------------------- */
.subjects__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--track-eyebrow-tight);
  text-transform: uppercase;
  color: var(--muted);
  --rv-dur: var(--t-heading);
}

.subjects__grid {
  margin-top: 3rem;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --rv-dur: var(--t-list);
  --rv-stagger: 110ms;
}
@media (min-width: 768px) { .subjects__grid { grid-template-columns: repeat(3, 1fr); } }

.subject {
  background: var(--background);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.subject__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.subject p { color: var(--muted); }

.subjects__links {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

/* --- The list ------------------------------------------------------------- */
/* Rules are borders on the rows, not a 1px grid gap over a tinted background. A row
   waiting to reveal is at opacity 0, which would make a tinted parent show through as
   a slab the height of the whole list — four rows of it, and most visible in the
   light theme. Borders belong to the rows, so they fade in with them. */
.events {
  margin-top: 4rem;
  display: grid;
  border-top: 1px solid var(--line);
  --rv-dur: var(--t-card);
  --rv-stagger: 110ms;
}

/* Stacked on a phone and side by side from 640px. Two columns at 375px leave the
   text about 175px wide, which breaks a long title across four lines and turns the
   summary into a ribbon — so below 640px the picture sits above the text at a size
   that does not take the whole screen, and the text gets the full width. */
.event {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding-block: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 640px) { .event { grid-template-columns: 11rem 1fr; gap: 2rem; } }
@media (min-width: 1024px) { .event { grid-template-columns: 14rem 1fr; gap: 2.5rem; } }

.event__media { aspect-ratio: 3 / 4; }
@media (max-width: 639px) { .event__media { max-width: 10rem; } }
.event__media .liquid__label { inset-inline: 1rem; bottom: 1rem; }

.event__text { display: flex; flex-direction: column; gap: 1rem; }

.event__meta {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--track-eyebrow-tight);
  text-transform: uppercase;
  color: var(--muted);
}

.event__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }

/* The whole row is the link's hit area, so a visitor does not have to find the
   title. One link, so one thing in the tab order and one accessible name. */
.event__link { transition: color var(--t-hover) var(--ease-out); }
.event__link::after { content: ""; position: absolute; inset: 0; }
.event:hover .event__link, .event__link:focus-visible { color: var(--accent); }

.event__summary { color: var(--muted); max-width: 46rem; }

.event__billing {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow-tight);
  text-transform: uppercase;
  color: var(--muted);
}

.events-empty {
  margin-top: 1rem;
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--muted);
}

/* --- Topic chips ---------------------------------------------------------- */
.topics { display: flex; flex-wrap: wrap; gap: .5rem; }

.topic {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--track-eyebrow-tight);
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: .4rem .9rem;
}

/* --- Invite me ------------------------------------------------------------ */
.invite__body {
  max-width: 40rem;
  margin-top: 2.5rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* --- An entry page -------------------------------------------------------- */
.entry__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  max-width: 24ch;
  --rv-dur: var(--t-heading);
}
@media (min-width: 1024px) {
  .entry__title { font-size: var(--fs-h1); line-height: var(--lh-h1); }
}

.entry__layout {
  margin-top: 4rem;
  display: grid;
  gap: 3.5rem;
  align-items: start;
  --rv-dur: var(--t-body);
  --rv-stagger: 90ms;
}
@media (min-width: 1024px) {
  .entry__layout { grid-template-columns: minmax(0, 1fr) 26rem; gap: 5rem; }
}

.entry__lead {
  max-width: 46rem;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.entry__cover { aspect-ratio: 3 / 4; }
@media (max-width: 1023px) { .entry__cover { max-width: 26rem; order: -1; } }

/* --- The fact list -------------------------------------------------------- */
/* A row exists only when its field does, so an absent field leaves no label and
   no separator behind (AC-E10). */
/* A row per field, label beside value — not a two-up grid. With an odd number of
   rows a grid leaves a cell that reads as an empty field, which is exactly the
   "empty label" AC-E10 rules out; a list has no such cell at any count. */
.facts {
  margin-top: 3rem;
  border-top: 1px solid var(--line);
}

.fact {
  display: grid;
  gap: .35rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .fact { grid-template-columns: 10rem 1fr; gap: 1.5rem; align-items: baseline; }
}

.fact dt {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--muted);
}
.fact dd { font-size: var(--fs-body); line-height: var(--lh-body); }

.entry .topics { margin-top: 2rem; }

/* --- The body ------------------------------------------------------------- */
.entry__body {
  margin-top: 3.5rem;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.entry__body h2 {
  margin-top: 1.5rem;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}
.entry__body h2:first-child { margin-top: 0; }

.entry__body h3 {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow-tight);
}

.entry__body p { color: var(--muted); }
.entry__body em { color: var(--foreground); font-style: normal; font-weight: 500; }
.entry__body strong { font-weight: 600; }

.entry__body a { color: var(--accent); border-bottom: 1px solid var(--line-strong); }
.entry__body a:hover { border-color: var(--accent); }

.entry__body ul, .entry__body ol {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: var(--muted);
  padding-left: 1.25rem;
  list-style: disc;
}
.entry__body ol { list-style: decimal; }

/* A photograph inside an entry's own markdown. It carries its own alt text and its
   own width and height, and it is never cropped: the slot is the picture's own.
   Full colour, unlike the cover: in the body the picture is the evidence, and the
   slide in it is the thing being described. */
.event-figure {
  margin-block: .5rem;
  max-width: 24rem;
  border: 1px solid var(--line);
}
.event-figure img { display: block; width: 100%; height: auto; }

.entry__links {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.entry__more {
  margin-top: 4rem;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--muted);
}
.entry__more + .section__link { margin-top: 1.25rem; }