/*
  interiors.css - Aurora BIM review-v2 (team.html, services.html)
  Loaded after styles.css.
  Only page-specific rules live here: styles.css already supplies tokens, reset,
  header/nav/footer chrome, .btn, .eyebrow, .audience-toggle/.audience-panel,
  and .section. Do not redeclare those here.
*/

/* First section on an interior page needs top padding to clear the fixed header,
   the same way styles.css's .hero does on the homepage. */
.page-intro {
  padding-top: calc(var(--header-height) + var(--space-16));
}
.page-intro h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  letter-spacing: -0.03em;
  max-width: 20ch;
  text-wrap: balance;
}
main h2 { letter-spacing: -0.04em; }

/* ---------- Team grid (team.html) ----------
   Everyone on the team gets the same card and the same photo size. Background
   detail lives in the profile dialog, opened from the card. */
.team-grid {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-10) var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  /* Capped narrower than the content column so every card is smaller while three still sit
     on each row (Aaron, 2026-09-26). The smaller type is set after the base card rules below. */
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10) var(--space-6);
    max-width: calc(900 * var(--u));
    margin-inline: auto;
  }
}
/* The heading and the narrowed grid sit centered in the section (Aaron, 2026-09-26). */
#team h2 { text-align: center; }
.person { display: flex; }
.person__trigger {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.person__photo-wrap {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
  background: var(--slate-2);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  transition: box-shadow .25s ease;
}
.person__photo {
  width: 100%;
  aspect-ratio: 1 / 1.1;
  object-fit: cover;
  object-position: center 22%;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.person__name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.person__title {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: var(--space-4);
}
.person__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  color: var(--turquoise);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.person__trigger:hover .person__photo,
.person__trigger:focus-visible .person__photo { transform: scale(1.035); }
.person__trigger:focus-visible .person__photo-wrap { box-shadow: 0 0 0 2px var(--turquoise); }
.person__trigger:focus-visible { outline-offset: calc(6 * var(--u)); }
@media (min-width: 900px) {
  /* Smaller card type to go with the narrower grid; matches the homepage founder cards. */
  .person__photo-wrap { margin-bottom: var(--space-4); }
  .person__name { font-size: calc(19 * var(--u)); margin-bottom: calc(5 * var(--u)); }
  .person__title { font-size: calc(14 * var(--u)); margin-bottom: var(--space-3); }
  .person__more { font-size: calc(15 * var(--u)); }
}

@media (max-width: 560px) {
  .team-grid { gap: var(--space-8) var(--space-4); }
  .person__name { font-size: 1.125rem; }
  .person__title { font-size: 0.9375rem; }
}

/* ---------- Profile dialog ---------- */
body.dialog-open { overflow: hidden; }
.profile-dialog {
  width: min(calc(960 * var(--u)), calc(100vw - 32 * var(--u)));
  max-height: calc(100dvh - 48 * var(--u));
  padding: 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  background: var(--slate);
  color: var(--white);
  box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0,0,0,0.6);
  overflow: auto;
}
.profile-dialog::backdrop {
  background: rgba(4,5,12,0.78);
  backdrop-filter: blur(calc(6 * var(--u)));
}
.profile-dialog[open] { animation: dialog-in .35s cubic-bezier(.16,1,.3,1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(calc(16 * var(--u))) scale(.98); } to { opacity: 1; transform: none; } }
.profile-dialog__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.profile-dialog__photo {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.profile-dialog__body { padding: var(--space-12) var(--space-10) var(--space-10); }
.profile-dialog__name {
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.25rem);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-2);
  padding-right: var(--space-10);
}
/* The same string as .person__title on the card behind it, so the same treatment. */
.profile-dialog__title {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: var(--space-6);
}
.profile__bio { color: var(--muted); font-size: 1.0625rem; line-height: 1.7; margin-bottom: var(--space-6); }
.profile-dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 999px;
  background: rgba(10,10,20,0.7);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.profile-dialog__close:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
@media (max-width: 720px) {
  .profile-dialog__inner { grid-template-columns: 1fr; }
  .profile-dialog__photo { height: auto; aspect-ratio: 4 / 3; }
  .profile-dialog__body { padding: var(--space-8) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .profile-dialog[open] { animation: none; }
  .person__photo { transition: none; }
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  padding: calc(6 * var(--u)) calc(12 * var(--u));
}

/* ---------- Services page ---------- */
/* The page extends the homepage's services idiom rather than inventing a second one:
   the discipline toggle sits right-aligned on the same baseline as the section h2,
   and each service is a numbered row with a mono numeral in --label. The earlier
   bordered-card treatment is gone, along with its five field labels per card: an
   eyebrow is a section kicker, so --label stays reserved for eyebrows and numbers.

   Depth comes from the homepage's own devices, not from new ones: a slow tonal
   drift down the panel instead of one flat slate slab, three very low aurora
   glows, and the same feTurbulence grain the hero uses. Without them ten text
   rows sit on a single unchanging fill for 3,000px and the page reads as flat. */
.audience-panels {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Starts at exactly --slate so the hero's last pixels hand off seamlessly, then
     darkens toward --midnight so the engagement section has no hard edge either. */
  background: linear-gradient(
    to bottom,
    var(--slate) 0,
    #0B0C17 18%,
    #0C0D1A 58%,
    #0A0B15 84%,
    var(--midnight) 100%
  );
}
/* Aurora light. Same treatment and the same order of magnitude as the homepage's
   .why::before (turquoise at .075) and .contact-section::before. */
.audience-panels::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 26% at 86% 6%, rgba(70, 224, 212, 0.075), transparent 70%),
    radial-gradient(58% 24% at 2% 38%, rgba(166, 156, 255, 0.08), transparent 72%),
    radial-gradient(64% 22% at 78% 70%, rgba(153, 214, 234, 0.055), transparent 74%);
  /* The top glow used to switch on at full strength exactly where the hero image
     ends, so the body was measurably LIGHTER than the last pixels of the photo
     (#0B131A against #070811) with a hard edge between them. Fading it in over
     the first 260px removes the step; the hero can then dissolve into the body
     instead of being cut off by it. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(260 * var(--u)));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(260 * var(--u)));
}
/* The homepage hero's grain, carried to the interior page so large dark areas
   have texture rather than reading as flat vector fill. */
.audience-panels::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: calc(180 * var(--u)) calc(180 * var(--u));
}
.audience-panel > .section {
  padding-top: var(--space-12);
  /* The panel's own gradient carries the handoff, so the section does not need
     the 200px dead fade .section--slate used to add before the next section. */
  padding-bottom: var(--space-20);
  background: transparent;
}
.audience-panel[hidden] { display: none; }

/* Same composition as the homepage .services-heading. */
.services-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.services-heading h2 {
  max-width: 17ch;
  margin-bottom: 0;
}
.services-heading .audience-toggle {
  flex: none;
  margin: 0;
}

/* Each service: a facts column (mono numeral, title, software) and a prose column
   held to a readable measure, over an aurora rule that draws itself on entry. */
.service-rows { display: grid; }
/* Two columns that both carry weight. The facts column held a title and nothing
   else before, so every row left a 330px blank rectangle down the page. The
   outcome sits under the facts in that column, which also puts "You receive ..."
   in one fixed column the reader can scan straight down and compare. Source
   order stays situation, what we do, result: the outcome is placed by the grid,
   not moved in the markup. */
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, calc(400 * var(--u))) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--space-6) var(--space-16);
  padding: var(--space-10) 0 var(--space-10) var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.service-row__facts { grid-column: 1; grid-row: 1; }
.service-row__detail { grid-column: 2; grid-row: 1 / span 2; }
.service-row__outcome { grid-column: 1; grid-row: 2; align-self: start; }
.service-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
/* The recurring vertical accent. Aurora gradient, never turquoise alone, so it
   cannot be read as an action. It draws down as the row enters the viewport,
   which is what gives ten otherwise identical rows a rhythm. */
.service-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--logo-teal), var(--label) 70%, rgba(166, 156, 255, 0));
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: top;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.service-row.is-visible::before {
  opacity: 0.75;
  transform: scaleY(1);
}
/* Only the scripted page hides content first, so the rows are readable with no JS. */
.js-reveal .service-row > * {
  opacity: 0;
  transform: translateY(calc(14 * var(--u)));
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.js-reveal .service-row.is-visible > * {
  opacity: 1;
  transform: none;
}
.js-reveal .service-row.is-visible > .service-row__detail { transition-delay: 0.07s; }
.js-reveal .service-row.is-visible > .service-row__outcome { transition-delay: 0.14s; }

/* Same numeral treatment as the homepage .service-number, at the size a page of
   ten of them needs: the numerals are the page's repeating visual anchor. */
.service-row__number {
  display: block;
  margin-bottom: var(--space-4);
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 2.125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}
.service-row__title {
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--white);
  text-wrap: balance;
}
.service-row__software { margin-top: var(--space-6); margin-bottom: 0; }

/* Starts level with the service title, not with the numeral above it (Liz, pin 59):
   the numeral's height and margin, plus the step that puts both first lines of text
   on one baseline. */
.service-row__detail { max-width: 58ch; padding-top: calc(2.125rem + var(--space-4) + 0.0625rem); }
/* Three parts, told apart by typeface and weight rather than by a colored field
   label or by brightness alone: the situation, what Aurora does about it, and the
   result set in the display face under a short rule. */
.service-row__problem {
  margin-bottom: var(--space-5);
  color: var(--white);
  font-size: 1.1875rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.service-row__does {
  margin-bottom: 0;
  color: var(--muted);
  text-wrap: pretty;
}
.service-row__outcome {
  margin-bottom: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.service-row__outcome::before {
  content: "";
  display: block;
  width: calc(40 * var(--u));
  height: 1px;
  margin-bottom: var(--space-5);
  background: linear-gradient(to right, var(--logo-teal), rgba(153, 214, 234, 0));
}

/* ---------- Proof (services.html) ----------
   The site's one testimonial, in the homepage .quote-card treatment exactly: a
   turquoise left rule, an aurora-tinted surface, and the display face. It sits
   where the homepage puts it, between the services and the closing CTA. Copied
   values, not re-derived ones, so the two cannot drift apart. */
.proof {
  overflow: hidden;
  background: var(--midnight);
}
.proof__heading { margin-bottom: var(--space-8); }
.quote-card {
  position: relative;
  max-width: calc(1020 * var(--u));
  padding: clamp(32px, 5vw, calc(64 * var(--u)));
  border: 1px solid rgba(70, 224, 212, 0.18);
  border-left: 3px solid var(--turquoise);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: linear-gradient(110deg, rgba(70, 224, 212, 0.07), rgba(123, 133, 215, 0.045));
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.25vw, calc(32 * var(--u)));
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

/* ---------- Engagement close (services.html) ----------
   The same scene-plus-glow treatment as the homepage contact section, so the page
   ends on the brand rather than on a plain dark block. */
.engagement {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  background: var(--midnight);
}
.engagement::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to bottom, var(--midnight) 0, rgba(10, 10, 20, 0) calc(150 * var(--u))),
    linear-gradient(to top, #06060d 0, rgba(6, 6, 13, 0) calc(190 * var(--u))),
    linear-gradient(rgba(4, 5, 14, 0.52), rgba(4, 5, 14, 0.82)),
    url("assets/engagement-scene.jpg?v=20260912b") center 26% / cover no-repeat;
}
.engagement::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(70, 224, 212, 0.16), transparent 48%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(160 * var(--u)));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(160 * var(--u)));
}
.engagement h2 {
  max-width: 18ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
.engagement__copy {
  max-width: 62ch;
  margin: 0 auto var(--space-8);
  color: var(--muted);
  font-size: 1.1875rem;
  line-height: 1.65;
  text-wrap: pretty;
}

/* Below the homepage's own services breakpoint the toggle goes full width and the
   row collapses to a single column, the same way the homepage list does. */
@media (max-width: 899px) {
  .services-heading {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
  }
  .services-heading h2 { max-width: none; }
  .services-heading .audience-toggle { width: 100%; }
  /* Same as the homepage's mobile toggle: equal halves at 16px. */
  .services-heading .audience-toggle__btn { flex: 1; padding-inline: 12px; font-size: 1rem; }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--space-6) 0;
    padding: var(--space-10) 0 var(--space-10) var(--space-6);
  }
  .service-row__facts { grid-column: 1; grid-row: 1; }
  .service-row__detail { grid-column: 1; grid-row: 2; max-width: none; padding-top: 0; }
  .service-row__outcome { grid-column: 1; grid-row: 3; }
  .service-row__number { font-size: 1.5rem; margin-bottom: var(--space-3); }
  .service-row__title { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  .service-row::before,
  .js-reveal .service-row > * {
    transition: none;
  }
}

/* ---------- Contact page (contact.html) ---------- */
/* One column: the side panel was removed, so the form keeps the page's left edge
   and a comfortable measure instead of sitting in a half-empty grid. */
/* Same width as the homepage and Team forms. */
.contact-form { max-width: calc(640 * var(--u)); }
/* A real section heading, so it uses the sitewide h2 size and tracking. */
.contact-form__title { margin-bottom: var(--space-6); }
.contact-form__topic {
  display: inline-block;
  margin-bottom: var(--space-6);
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
}
.contact-form__topic[hidden] { display: none; }
.contact-form__row { display: grid; column-gap: var(--space-6); }
@media (min-width: 640px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.field label { font-weight: 500; }
.field__optional { color: var(--muted); font-weight: 400; }
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: calc(52 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: calc(7 * var(--u));
  background: rgba(10, 10, 20, 0.6);
  color: var(--white);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* Same message box as the homepage and Team forms. */
.field textarea { min-height: calc(110 * var(--u)); resize: vertical; }
.field select {
  appearance: none;
  padding-right: calc(44 * var(--u));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23B9C2D6' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(16 * var(--u)) center;
}
.field select option { background: var(--slate); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(255, 255, 255, 0.42); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(70, 224, 212, 0.22);
}

/* ---------- Contact band (team.html) ----------
   Matches the homepage contact section: same background, type sizes, widths, and form.
   The image path is rewritten to ../assets/ by publish-to-share.sh. */
.contact-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(88px, 10vw, calc(152 * var(--u)));
  text-align: center;
  background:
    linear-gradient(to bottom, var(--midnight) 0, rgba(10, 10, 20, 0) calc(240 * var(--u))),
    linear-gradient(to top, var(--midnight) 0, rgba(10, 10, 20, 0) calc(180 * var(--u))),
    linear-gradient(rgba(4, 5, 14, 0.58), rgba(4, 5, 14, 0.86)),
    url("./assets/scene-background-clean.png") center 66% / cover no-repeat;
}
.contact-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(70, 224, 212, 0.15), transparent 45%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(280 * var(--u)));
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(280 * var(--u)));
  pointer-events: none;
}
.contact-band__content { position: relative; max-width: calc(944 * var(--u)); }
.contact-band .eyebrow { display: block; margin-bottom: calc(20 * var(--u)); }
.contact-band h2 {
  font-size: var(--h2-size);
  line-height: 1.03;
  letter-spacing: -0.04em;
  text-wrap: balance;
  margin: 0;
}
.contact-band .why-aurora__intro { max-width: calc(780 * var(--u)); margin: calc(22 * var(--u)) auto calc(30 * var(--u)); }
.contact-band__form { max-width: calc(640 * var(--u)); margin: 0 auto; text-align: left; }
.contact-band__form .field { margin-bottom: calc(18 * var(--u)); }
.contact-band__form .field textarea { min-height: calc(110 * var(--u)); }
@media (max-width: 639px) {
  .contact-band { padding-block: 76px; }
  .contact-band__form .btn { width: 100%; justify-content: center; }
}

/* ---------- Resources & Events page (resources.html) ---------- */
.resources-heading { margin-bottom: var(--space-10); }
.video-grid {
  display: grid;
  gap: var(--space-10) var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); }
}
.video-card { display: flex; }
.video-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.video-card__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--slate-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow .25s ease;
}
/* YouTube's hqdefault image is 4:3 with black bars; a 16:9 cover crop removes them.
   height: auto overrides the height attribute, which would otherwise win over aspect-ratio. */
.video-card__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
  margin: calc(-30 * var(--u)) 0 0 calc(-30 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(10, 10, 20, 0.72);
  transition: background .2s ease, border-color .2s ease;
}
.video-card__play::after {
  content: "";
  position: absolute;
  top: calc(18 * var(--u));
  left: calc(23 * var(--u));
  border-style: solid;
  border-width: calc(11 * var(--u)) 0 calc(11 * var(--u)) calc(17 * var(--u));
  border-color: transparent transparent transparent var(--white);
}
/* A date and channel line, not a section kicker: it uses the mono face but not the
   --label color or the uppercase tracking, both of which stay with .eyebrow. */
.video-card__meta {
  margin-bottom: var(--space-2);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.video-card__title {
  margin-bottom: var(--space-4);
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.video-card__cta {
  display: inline-flex;
  gap: var(--space-2);
  margin-top: auto;
  color: var(--turquoise);
  font-family: var(--font-display);
  font-weight: 700;
}
.video-card__link:focus-visible .video-card__thumb { box-shadow: 0 0 0 2px var(--turquoise); }
.video-card__link:hover .video-card__thumb img,
.video-card__link:focus-visible .video-card__thumb img { transform: scale(1.035); }
.video-card__link:hover .video-card__play { border-color: var(--turquoise); background: var(--turquoise); }
.video-card__link:hover .video-card__play::after { border-left-color: var(--midnight); }
.video-card__link:hover .video-card__cta { color: var(--turquoise-hover); }
.video-card__link:focus-visible { outline-offset: calc(6 * var(--u)); }

.events-empty {
  max-width: calc(760 * var(--u));
  padding: var(--space-10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  background: rgba(10, 10, 20, 0.35);
}
.events-empty__title { font-size: 1.375rem; letter-spacing: -0.01em; }
.events-empty p { color: var(--muted); }
.events-empty .btn { margin-top: var(--space-4); }
@media (max-width: 560px) {
  .events-empty { padding: var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .video-card__thumb img { transition: none; }
}