/* Intro: reusable speaker-intro slides. Host-specific lines are said in the
   room, never put on a slide.
   Loaded after _shared/deck-styles.css, which owns the light and accent themes.
   The career row stays local: the shared year-line is a three-stop dashed track,
   this is six stops on one solid rule with a hand note above it. */

/* Shared title treatment. Ladder: cover and close 128, title 88. */
.deck-title,
.cover-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--cream);
}
.deck-title  { font-size: 88px; }
.cover-title { font-size: 128px; line-height: 0.98; }

.slide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

/* ── 01 Cover: green panel bleeds to the right edge under the head bar, and
   the portrait stands in it. 600 is the portrait's width at 90% of the panel
   plus a margin, so narrow frames take the space from the title, not the arms ── */
.cover-panel {
  position: absolute;
  top: calc(50 * var(--px, 1px));
  right: 0;
  bottom: 0;
  width: max(37.5%, 600px);
  background: #D3FA9D;
  overflow: hidden;
}
.cover-panel img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 90%;
  width: auto;
}
/* The content width less the panel's share of it: 1000 on 16:9 */
.cover-body {
  flex: 1;
  width: calc(100cqw - max(37.5cqw + 75px, 600px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.cover-role {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 52px;
  letter-spacing: var(--tracking-tight);
  color: var(--green);
}
.cover-place {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  color: rgb(var(--cream-ch) / 0.62);
}

/* ── 02 Background: five stops on one rule ── */
.career {
  display: grid;
  /* Six stops in 1720px: each column is its widest line plus the same gap,
     so the stops read evenly spaced. Re-balance when a name or role changes */
  grid-template-columns: 1.3fr 1.13fr 0.99fr 0.88fr 0.9fr 0.8fr;
  margin-top: 24px;
}
.stop {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 44px 32px 0 0;
  border-top: 2px solid rgb(var(--cream-ch) / 0.22);
}
.stop::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--cream);
}
.stop.now { border-top-color: var(--cream); }

/* The year off before Aline: a hand note with an arrow down to the line, not a
   stop of its own. Anchored to the Aline node, so it moves with that column. */
@font-face {
  font-family: "Caveat";
  font-weight: 600;
  font-display: swap;
  src: url("../_shared/fonts/caveat-latin-600-normal.woff2") format("woff2");
}
.gap-note {
  position: absolute;
  left: -420px;
  bottom: calc(100% + 1px);
  width: 420px;
  height: 180px;
  pointer-events: none;
}
.gap-note svg { position: absolute; inset: 0; overflow: visible; }
.hand {
  position: absolute;
  right: 140px;
  bottom: 91px;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  white-space: nowrap;
  color: var(--green);
  transform: rotate(-3deg);
  transform-origin: right bottom;
}
.hand-arrow {
  fill: none;
  stroke: var(--green);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stop-year {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: rgb(var(--cream-ch) / 0.55);
}
.stop-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 48px;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--cream);
}
.stop-role {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.4;
  color: rgb(var(--cream-ch) / 0.72);
}

/* ── 03 Skills: four words joined by a rule ── */
.skills {
  display: flex;
  align-items: center;
  gap: 36px;
}
.skill {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 104px;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
}
/* Square node at each end, so the link reads as a connection and not a dash */
.link {
  position: relative;
  flex: 1;
  min-width: 96px;
  height: 3px;
  margin: 0 8px;
  background: var(--cream);
}
.link::before,
.link::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 15px;
  height: 15px;
  background: var(--cream);
}
.link::before { left: -8px; }
.link::after  { right: -8px; }
.skills-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 56px;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
}

/* ── 04 Now: shared three-up, mirroring the services page ── */
.services { margin-top: 32px; }
.services > .cell { min-height: 0; }
/* Shared cell-label carries no colour and a lighter weight than this deck's titles */
.services .cell-label {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
}

/* ── 05 Close: contact row ── */
.contact {
  display: flex;
  gap: 64px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 32px;
  color: var(--cream);
}
.contact a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: text-decoration-color 160ms ease;
}
.contact a:hover,
.contact a:focus-visible { text-decoration-color: currentColor; }

/* ── Fluid frame (_shared/frame.js): slides are 1080 high and as wide as the
   screen, 1280 at the narrowest, 1920 on 16:9. The section is the query
   container, so the rules follow the frame, not the browser window. Content
   width is the frame less 200: 1599 catches 16:10, 4:3 and 5:4, and 1199
   catches frames under 1400. ── */
@container (max-width: 1599px) {
  .stop { padding-right: 24px; }
  .stop-year { font-size: 22px; }
  .stop-name { font-size: 44px; }
  .stop-role { font-size: 24px; text-wrap: balance; }
  .skills { gap: 24px; }
  .skill { font-size: 80px; }
  .link { min-width: 56px; }
}
@container (max-width: 1199px) {
  .cover-body .cover-title { font-size: 96px; }
  .stop { padding-right: 20px; }
  .stop-year { font-size: 20px; }
  .stop-name { font-size: 40px; }
  .stop-role { font-size: 22px; }
  .skills { gap: 20px; }
  .skill { font-size: 76px; }
  .link { min-width: 48px; }
  .skills-line { font-size: 48px; }
}