/* Variant 2 — "Монохром".
   The house rules from the veteranhub brandbook applied to a stage: brand
   monochrome on a near-white ground, no warm accent, conservative-modern
   rather than editorial.
   Structure carries the slide; there is no decoration to fall back on.

   Field: 120 / 96 / 1800 / 1010. Every slide is built from the same three
   parts — a heading band at the top left, hairline structure below it, and at
   most one solid brand block per slide. */

:root {
  --brand: #325390;
  --brand-logo: #345491;
  --brand-deep: #243d6e;
  --ground: #f4f6f9;
  --brand-grey: #667c9f;
  --brand-soft: #d8e0e5;
  --type: #16202e;
  --hairline: rgba(22, 32, 46, 0.14);
  --hairline-strong: rgba(22, 32, 46, 0.26);
  --on-brand: #f7f9fc;

  --sans: 'e-Ukraine', system-ui, sans-serif;
  --head: 'e-Ukraine Head', 'e-Ukraine', system-ui, sans-serif;
}

.deck {
  background: var(--ground);
}

.stage {
  background: var(--ground);
  color: var(--type);
  font-family: var(--sans);
}

/* The cool duotone is baked into the JPEGs in assets/img/graded rather than
   blended at runtime — one grade for the whole set, so the photographs read
   as a single series. */

/* ------------------------------------------------------------- typography */

.display {
  font-family: var(--head);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
}

.display--xl { font-size: 148px; }
.display--m  { font-size: 68px; }
.display--s  { font-size: 52px; }

.kicker {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-grey);
}

.kicker span {
  color: var(--type);
  margin-right: 18px;
}

.kicker--light {
  color: var(--brand-soft);
}

.kicker--light span {
  color: var(--on-brand);
}

.head {
  position: absolute;
  top: 96px;
  left: 120px;
}

/* ---------------------------------------------------------------- 1. Титул */

.title-panel {
  position: absolute;
  inset: 0;
  background: var(--brand-deep);
}

/* The copy sits outside the bleeding panel so it keeps the 120px field on any
   aspect ratio — padding on a bleeding box would drift with the overscan. */
/* Top to bottom: who, a rule, what, when — with the seal as a colophon rather
   than a sticker floating in the middle of the field. */
.slide--title { color: var(--on-brand); }

/* The rule now sits under the title and the school and the speaker under the
   rule: what it is, whose it is, who is giving it. */
.wordmark {
  position: absolute;
  left: 120px;
  top: 744px;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.title-rule {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 700px;
  height: 2px;
  background: var(--brand-soft);
  transform-origin: 0 50%;
}

.title-heading {
  position: absolute;
  left: 120px;
  top: 296px;
  width: 1400px;
}

.title-speaker {
  position: absolute;
  left: 120px;
  top: 836px;
  margin: 0;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.01em;
}

.title-speaker span {
  display: block;
  margin-top: 12px;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-soft);
}

.title-seal {
  position: absolute;
  right: 120px;
  top: 96px;
  width: 156px;
  height: 156px;
}

/* ------------------------------------------------- 2. Ви — студенти ХНЕУ */

.opener {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 96px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.opener__line {
  font-size: 104px;
}

.opener__rule {
  display: block;
  margin-top: 64px;
  height: 3px;
  background: var(--brand);
  transform-origin: 0 50%;
}

/* -------------------------------------------------------------- 3. Історія */

.strip {
  position: absolute;
  left: 120px;
  right: 120px;
  bottom: 96px;
  height: 596px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

/* The rule belongs between the photographs, not between the captions: run it
   the whole height and the text underneath sits hard against it with nowhere
   to breathe. */
.era {
  position: relative;
  background: var(--ground);
  display: flex;
  flex-direction: column;
}

.era + .era::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 1px;
  height: 340px;
  background: var(--hairline-strong);
}

.era__photo {
  position: relative;
  height: 340px;
  flex: none;
  overflow: hidden;
}

.era__body {
  padding: 34px 52px 0 0;
}

.era__years {
  margin: 0;
  font-family: var(--head);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--type);
}

.era__years i {
  font-style: normal;
  color: var(--brand-grey);
}

.era__name {
  margin: 14px 0 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--brand-grey);
}

.era--now .era__name {
  color: var(--type);
}

/* ------------------------------------------------------- 4. Семен Кузнець */

.figure {
  position: absolute;
  left: 120px;
  top: 268px;
  width: 820px;
}

/* A closed frame on all four sides. The wall behind Kuznets is nearly the
   colour of the page, so without it the top edge of the photograph simply
   dissolved and the picture looked unfinished. */
.figure__photo {
  position: relative;
  box-sizing: border-box;
  height: 626px;
  overflow: hidden;
  border: 1px solid var(--type);
}

.figure__caption {
  margin: 26px 0 0;
  font-family: var(--head);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--type);
}

.figure__caption span {
  margin-left: 26px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--brand-grey);
}

.ask {
  position: absolute;
  left: 1040px;
  top: 500px;
  width: 760px;
}

/* -------------------------------------------------------- 6. ХНЕУ сьогодні */

.core {
  position: absolute;
  left: 120px;
  top: 340px;
  width: 470px;
  bottom: 70px;
  background: var(--brand);
  display: flex;
  align-items: flex-end;
  padding: 44px;
}

.core p {
  margin: 0;
  font-family: var(--head);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--on-brand);
}

.facets {
  position: absolute;
  left: 660px;
  right: 120px;
  top: 340px;
  bottom: 70px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(6, 1fr);
}

.facets li {
  position: relative;
  display: flex;
  align-items: center;
}

.facets__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--hairline);
  transform-origin: 0 50%;
}

.facets b {
  font-family: var(--head);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* ------------------------------------------------- 8. Карта можливостей */

.grid {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 240px;
  bottom: 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

.tile {
  border: 1px solid var(--hairline);
  padding: 44px 44px 40px;
  display: flex;
  flex-direction: column;
}

.tile--statement {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.tile--statement .display {
  margin-bottom: 32px;
}

.tile--statement p {
  margin: auto 0 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--brand-soft);
  max-width: 380px;
}

.tile__no {
  margin: 0 0 auto;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--brand-grey);
}

.tile h3 {
  margin: 0 0 18px;
  font-family: var(--head);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--type);
}

.tile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile li {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--brand-grey);
}

/* --------------------------------------------------------------- 9. Освіта */

.premise {
  position: absolute;
  left: 120px;
  top: 320px;
  width: 760px;
  margin: 0;
  padding: 40px 44px;
  border: 1px solid var(--hairline-strong);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--brand-grey);
}

.edu-arrow {
  position: absolute;
  left: 170px;
  top: 476px;
  width: 40px;
  height: 120px;
  overflow: visible;
}

.edu-arrow line,
.edu-arrow path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: square;
}

.conclusion {
  position: absolute;
  left: 120px;
  top: 700px;
  width: 760px;
  bottom: 70px;
  margin: 0;
  padding: 44px;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--head);
  font-size: 40px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  display: flex;
  align-items: flex-end;
}

.edu-list {
  position: absolute;
  left: 960px;
  right: 120px;
  top: 320px;
  bottom: 70px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.edu-list li {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--hairline);
  font-size: 34px;
  font-weight: 300;
  color: var(--type);
}

.edu-list li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.edu-list i {
  flex: none;
  width: 12px;
  height: 12px;
  margin-right: 30px;
  background: var(--brand);
}

/* -------------------------------------------------------- 10. Міжнародність */

.origin {
  position: absolute;
  left: 120px;
  top: 760px;
  width: 300px;
  bottom: 70px;
  background: var(--brand);
  display: flex;
  align-items: flex-end;
  padding: 32px;
}

.origin p {
  margin: 0;
  font-family: var(--head);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--on-brand);
}

/* Four parallel opportunities, not a ranking: the cells are identical and the
   row simply keeps going past the edge of the screen. The staircase that stood
   here claimed a progression the text never makes. */
.reach {
  position: absolute;
  left: 120px;
  top: 470px;
  height: 300px;
  display: flex;
}

.reach__origin {
  box-sizing: border-box;
  flex: none;
  width: 300px;
  background: var(--brand);
  border: 1px solid var(--brand);
  display: flex;
  align-items: flex-end;
  padding: 34px;
}

.reach__origin p {
  margin: 0;
  font-family: var(--head);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--on-brand);
}

.reach__list {
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

/* Closed on all four sides, and neighbours share one rule rather than sitting
   on a grey strip that ran past the field. */
.reach__list li {
  box-sizing: border-box;
  flex: none;
  width: 380px;
  margin-left: -1px;
  padding: 34px;
  background: var(--ground);
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: flex-end;
  font-size: 26px;
  font-weight: 300;
  line-height: 1.35;
  color: var(--type);
}

/* -------------------------------------------------------------- 11. Кар'єра */

.shots {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 300px;
  height: 340px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.shots__cell {
  position: relative;
  overflow: hidden;
}

.track {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 700px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.track li {
  position: relative;
  padding-top: 26px;
  font-family: var(--head);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--brand-grey);
}

.track__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--hairline-strong);
  transform-origin: 0 50%;
}

.track__last {
  color: var(--brand);
}

.track__last .track__rule {
  background: var(--brand);
}

.claim {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 890px;
  margin: 0;
  font-family: var(--head);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--type);
}

/* --------------------------------------------------- 12. Студентське життя */

.quad {
  position: absolute;
  left: 120px;
  top: 96px;
  width: 940px;
  bottom: 70px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

.quad__cell {
  position: relative;
  overflow: hidden;
}

.panel {
  position: absolute;
  left: 1100px;
  right: 120px;
  top: 96px;
  bottom: 70px;
  background: var(--brand-deep);
  padding: 56px;
  display: flex;
  flex-direction: column;
}

.verbs-list {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.verbs-list li {
  font-family: var(--head);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.03em;
  color: var(--on-brand);
}

/* -------------------------------------------------- 13. Наука та інновації */

.hero {
  position: absolute;
  left: 1000px;
  right: 0;
  top: 0;
  bottom: 0;
}

.verbs {
  position: absolute;
  left: 120px;
  width: 760px;
  top: 320px;
  bottom: 70px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

.verbs li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.verbs__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--hairline);
  transform-origin: 0 50%;
}

.verbs b {
  font-family: var(--head);
  font-size: 58px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--type);
}

.verbs__sub {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--brand-grey);
}

/* ------------------------------------------------------------- 16. Чекліст */

.checklist {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 356px;
  bottom: 70px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column;
  column-gap: 80px;
}

.checklist li {
  display: flex;
  align-items: center;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--type);
}

.box {
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: 28px;
  border: 1px solid var(--hairline-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.box svg {
  width: 26px;
  height: 26px;
}

.box path {
  fill: none;
  stroke: var(--on-brand);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------- 19. Відтепер — це ваша історія */

.ground {
  position: absolute;
  inset: 0;
  background: var(--brand-deep);
}

.reel {
  position: absolute;
  top: calc(-1 * var(--bleed-y));
  height: calc(540px + var(--bleed-y));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.reel__cell {
  position: relative;
  overflow: hidden;
}

.legacy-copy {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 640px;
  bottom: 70px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.legacy-copy__lead {
  margin: 0 0 26px;
  font-size: 34px;
  font-weight: 300;
  color: var(--brand-soft);
}

.legacy-copy__now {
  margin: 0;
  font-family: var(--head);
  font-size: 132px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--on-brand);
}

/* --------------------------------------------------------------- 20. Фінал */

/* The closing sheet mirrors the opening one — same rule, same corners, ground
   and ink swapped. */
.finale-mark {
  position: absolute;
  left: 120px;
  top: 108px;
  max-width: 620px;
  margin: 0;
  color: var(--brand-grey);
}

.finale-rule {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 300px;
  height: 2px;
  background: var(--brand);
  transform-origin: 0 50%;
}

.finale-heading {
  position: absolute;
  left: 120px;
  top: 388px;
  width: 1300px;
  line-height: 1.14;
}

.finale-seal {
  position: absolute;
  right: 120px;
  top: 96px;
  width: 156px;
  height: 156px;
}

/* --------------------------------------------------------- enlarged photo */

.stage {
  --zoom-veil: #f4f6f9;
}

.deck-zoom__years {
  font-family: var(--head);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- chrome */

.deck-progress {
  background: var(--brand);
}

.deck-counter {
  position: absolute;
  right: 120px;
  bottom: 40px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--brand-grey);
}

.deck-counter i {
  font-style: normal;
  opacity: 0.45;
  margin: 0 6px;
}

/* On the two slides that stand on the deep ground the counter would sink into
   it, so it borrows the light half of the palette instead. */
.deck[data-slide='title'] .deck-counter,
.deck[data-slide='science'] .deck-counter,
.deck[data-slide='legacy'] .deck-counter {
  color: var(--brand-soft);
  opacity: 0.7;
}