/* Variant 1 — "Папір і золото".
   Warm paper ground, deep navy type, a single muted gold accent. The daylight
   equivalent of a ceremony programme: quiet, expensive, not office-white. */

:root {
  --ground: #f2ede1;
  --ground-2: #e7dfcd;
  --brand: #325390;
  --brand-deep: #243d6e;
  --brand-soft: #5a6b8c;
  --type: #16203a;
  --type-dim: #5f6678;
  --gold: #9a7830;
  --gold-dim: rgba(154, 120, 48, 0.32);

  --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 ink-to-gold duotone is baked into the JPEGs in assets/img/graded, not
   produced with blend modes at runtime: a full-screen blended layer costs a
   recomposite every frame it is animated over. */

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

.display {
  font-family: var(--head);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.03em;
  margin: 0;
  text-transform: uppercase;
}

.display--xl {
  font-size: 172px;
}

.display--m {
  font-size: 76px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 40px;
  font-size: 19px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--type-dim);
}

.eyebrow__rule {
  display: block;
  flex: none;
  width: 96px;
  height: 1px;
  background: var(--gold);
  transform-origin: 0 50%;
}

.section-mark {
  position: absolute;
  top: 96px;
  left: 120px;
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-soft);
}

.section-mark span {
  color: var(--gold);
  margin-right: 18px;
}

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

.title-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(242, 237, 225, 0.97) 0%, rgba(242, 237, 225, 0.66) 44%, rgba(242, 237, 225, 0.24) 100%),
    linear-gradient(to right, rgba(242, 237, 225, 0.9) 0%, rgba(242, 237, 225, 0.14) 68%, rgba(242, 237, 225, 0) 100%);
}

.title-copy {
  position: absolute;
  left: 120px;
  top: 296px;
  width: 1560px;
}

/* Below the heading now, with the speaker under it: the sheet reads title,
   school, who is giving it. */
.title-copy .eyebrow {
  margin: 46px 0 0;
  max-width: 760px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.title-speaker {
  margin: 40px 0 0;
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--type);
}

.title-speaker span {
  display: block;
  margin-top: 12px;
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

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

/* Every ordinary slide hangs its heading from the same line. */
.slide--history .display--m,
.slide--today .display--m,
.slide--international .display--m,
.slide--checklist .display--m {
  position: absolute;
  top: 168px;
  left: 120px;
}

.timeline {
  position: absolute;
  left: 120px;
  top: 470px;
  width: 1680px;
  height: 500px;
}

.timeline__axis {
  position: absolute;
  left: 6px;
  top: 236px;
  width: 1668px;
  height: 2px;
  overflow: visible;
}

.timeline__axis line {
  stroke: var(--gold-dim);
  stroke-width: 1;
}

.epoch {
  position: absolute;
  top: 0;
  width: 372px;
}

.epoch:nth-child(2) { left: 0; }
.epoch:nth-child(3) { left: 436px; }
.epoch:nth-child(4) { left: 872px; }
.epoch:nth-child(5) { left: 1308px; }

.epoch__photo {
  position: relative;
  width: 300px;
  height: 196px;
  overflow: hidden;
}

.epoch__dot {
  position: absolute;
  left: 0;
  top: 230px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ground);
  border: 1px solid var(--gold);
}

.epoch--now .epoch__dot {
  background: var(--gold);
}

.epoch__years {
  margin: 76px 0 0;
  font-family: var(--head);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--type);
}

.epoch__name {
  margin: 16px 0 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--type-dim);
  max-width: 320px;
}

.epoch--now .epoch__years {
  color: var(--gold);
}

.epoch__name span {
  display: block;
  color: var(--type);
}

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

.lede {
  position: absolute;
  top: 150px;
  left: 120px;
  width: 640px;
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--type-dim);
}

.fan {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.fan__hub {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}

.fan__arcs path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.55;
}

.fan__dots circle {
  fill: var(--ground);
  stroke: var(--gold);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* The box is the circle, not the words: it is exactly the ring's diameter,
   placed by plain left/top, and centres its content by flex. Two things follow.
   Change the wording or the type size and the label stays in the middle, with
   nothing to re-tune by hand; and because the centring owes nothing to a CSS
   transform, an animation that writes its own transform cannot knock it out of
   place — which is exactly how these labels drifted before. */
.map-core {
  position: absolute;
  left: 345px;
  top: 385px;
  width: 430px;
  height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.map-core__small {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--type-dim);
}

.map-core__big {
  margin: 0;
  font-family: var(--head);
  font-size: 46px;
  font-weight: 300;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--type);
}

.ways {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The dot is level with the name, not with the middle of the whole block: the
   sub-line is one line for some directions and two for others, so centring the
   box would put every row at a slightly different height. Positioned by top
   alone — a transform here would be overwritten by the entrance animation. */
.ways li {
  position: absolute;
  left: 1230px;
  width: 570px;
  display: grid;
  grid-template-columns: 68px 1fr;
  grid-template-rows: auto auto;
}

/* The number sits on the same row as the name and is centred against it. Tied
   to the baseline instead, it dropped to the foot of the word and the row read
   as two things at two heights rather than one line meeting the dot. */
.ways i {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font-style: normal;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.ways__name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--head);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--gold);
}

.ways__sub {
  grid-column: 2;
  grid-row: 2;
  margin-top: 12px;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--type-dim);
}

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

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

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

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

/* The closing slide carries a photograph along its foot, so the counter is
   lifted off the ink there. */
/* One slide carries a photograph where the counter sits, so it is lifted off
   the ink there. */
.deck[data-slide='life'] .deck-counter {
  color: var(--ground);
}

.deck[data-slide='life'] .deck-counter i {
  color: rgba(242, 237, 225, 0.55);
}

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

.deck-counter {
  position: absolute;
  right: 120px;
  bottom: 76px;
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--type-dim);
}

.deck-counter i {
  font-style: normal;
  color: var(--gold-dim);
  margin: 0 8px;
}

/* =========================================================================
   The rest of the lecture. Everything below keeps the same three ingredients
   as the first four slides: paper, ink and one muted gold — so a slide is
   told apart by its structure, never by a new colour.
   ========================================================================= */

.display--l { font-size: 104px; }
.display--s { font-size: 64px; }

/* ---------------------------------------------------- 2 / 12. Фотоколажі */

.mosaic {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.mosaic--life {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
}

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

/* A plate of bare paper laid over the collage: the phrase is not written on
   the photographs, it is placed on top of them. */
.plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1420px;
  padding: 84px 72px 92px;
  background: var(--ground);
  text-align: center;
}

.plate .display--l { font-size: 68px; }

.plate__mark {
  margin: 0 0 30px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--type-dim);
}

.plate__mark span {
  color: var(--gold);
  margin-right: 16px;
}

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

.portrait {
  position: absolute;
  left: 120px;
  top: 180px;
  width: 740px;
  height: 700px;
  overflow: hidden;
  background: var(--ground-2);
}

.portrait__caption {
  position: absolute;
  left: 120px;
  top: 924px;
  margin: 0;
  font-family: var(--head);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--type);
}

.portrait__caption span {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 19px;
  letter-spacing: 0.24em;
  color: var(--gold);
}

.slide--kuznets .display--m {
  position: absolute;
  left: 960px;
  top: 392px;
  width: 840px;
}

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

.orbit {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.orbit circle[data-orbit-ring] {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.75;
}

.orbit [data-orbit-dots] circle {
  fill: var(--gold);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.orbit__core {
  position: absolute;
  left: 730px;
  top: 420px;
  width: 460px;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0;
  font-family: var(--head);
  font-size: 34px;
  font-weight: 300;
  line-height: 1.24;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--type);
}

.orbit__label {
  position: absolute;
  width: 320px;
  margin: 0;
  font-family: var(--head);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--gold);
}

.orbit__label--n  { left: 800px;  top: 340px; text-align: center; }
.orbit__label--ne { left: 1234px; top: 486px; }
.orbit__label--se { left: 1234px; top: 776px; }
.orbit__label--s  { left: 800px;  top: 920px; text-align: center; }
.orbit__label--sw { left: 366px;  top: 776px; text-align: right; }
.orbit__label--nw { left: 366px;  top: 486px; text-align: right; }

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

.slide--education .display--s,
.slide--career .display--s,
.slide--science .display--s {
  position: absolute;
  top: 160px;
  left: 120px;
}

/* One line of reasoning down the left, one photograph on the right. Two type
   sizes only: the premise is small and grey, the conclusion is large and dark. */
.edu-from {
  position: absolute;
  left: 120px;
  top: 316px;
  margin: 0;
  font-family: var(--head);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--type-dim);
}

.edu-arrow {
  position: absolute;
  left: 108px;
  top: 372px;
  width: 40px;
  height: 120px;
}

.edu-arrow line,
.edu-arrow path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edu-to {
  position: absolute;
  left: 120px;
  top: 516px;
  width: 800px;
  margin: 0;
  font-family: var(--head);
  font-size: 52px;
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--type);
}

.edu-list {
  position: absolute;
  left: 120px;
  top: 676px;
  width: 800px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-dim);
}

/* The column ends level with the photograph beside it and well clear of the
   slide number, rather than running past both. */
.edu-list li {
  padding: 13px 0 12px;
  border-bottom: 1px solid var(--gold-dim);
  font-size: 21px;
  font-weight: 300;
  color: var(--type-dim);
}

.frame {
  position: absolute;
  overflow: hidden;
  background: var(--ground-2);
}

.slide--education .frame {
  left: 1000px;
  top: 316px;
  width: 800px;
  height: 620px;
}

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

.reach {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.reach path {
  fill: none;
  stroke: var(--gold-dim);
  stroke-width: 1.5;
}

.reach circle {
  fill: var(--gold);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.reach__origin {
  position: absolute;
  left: 160px;
  top: 872px;
  margin: 0;
  font-family: var(--head);
  font-size: 26px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--type);
}

.reach__stop {
  position: absolute;
  width: 260px;
  margin: 0;
  text-align: center;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--type-dim);
}

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

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

.shots .frame {
  position: relative;
  height: 300px;
}

.route {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.route line {
  stroke: var(--gold-dim);
  stroke-width: 1;
}

.route circle {
  fill: var(--ground);
  stroke: var(--gold);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.stop {
  position: absolute;
  top: 730px;
  width: 300px;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-family: var(--head);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--type-dim);
}

.stop--last {
  color: var(--gold);
}

.claim {
  position: absolute;
  left: 120px;
  right: 120px;
  top: 890px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--type);
}

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

.band {
  position: absolute;
  left: calc(-1 * var(--bleed-x));
  right: calc(-1 * var(--bleed-x));
  top: 50%;
  transform: translateY(-50%);
  padding: 62px 120px 68px;
  background: var(--ground);
  text-align: center;
}

.band__mark {
  margin: 0 0 26px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--type-dim);
}

.band__mark span {
  color: var(--gold);
  margin-right: 16px;
}

.band__words {
  margin: 0;
  font-family: var(--head);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--type);
}

.band__words i {
  font-style: normal;
  color: var(--gold);
  margin: 0 18px;
}

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

.slide--science .frame--tall {
  left: 120px;
  top: 300px;
  width: 820px;
  height: 560px;
}

.verbs {
/* The list is given the photograph's own box and centres itself inside it, so
   the two columns stay level whatever the number of lines. The top rule moves
   onto the first item, otherwise it would stay pinned to the box while the
   items float in the middle. */
  position: absolute;
  left: 1020px;
  top: 300px;
  width: 780px;
  height: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.verbs li {
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--gold-dim);
}

.verbs li:first-child {
  border-top: 1px solid var(--gold-dim);
}

.verbs b {
  display: block;
  font-family: var(--head);
  font-size: 46px;
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--type);
}

.verbs span {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 300;
  color: var(--type-dim);
}

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

.slide--checklist .display--m {
  position: absolute;
  top: 168px;
  left: 120px;
}

.checklist {
  position: absolute;
  left: 120px;
  top: 396px;
  width: 1240px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gold-dim);
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 22px 0 21px;
  border-bottom: 1px solid var(--gold-dim);
  font-family: var(--head);
  font-size: 33px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--type);
}

.tick {
  flex: none;
  width: 28px;
  height: 28px;
  overflow: visible;
}

.tick path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* Nine frames of people, assembled one at a time. The point of the slide is
   the number of faces, so the grid is what does the talking; the line arrives
   only once the wall is standing. */
.wall {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

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

.legacy__plate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1080px;
  padding: 76px 90px 84px;
  background: var(--ground);
  text-align: center;
}

.legacy__lead {
  margin: 0;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--type-dim);
}

.legacy__now {
  margin: 26px 0 0;
  font-family: var(--head);
  font-size: 92px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--type);
}

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

/* The deck opened on bare paper and closes the same way: the seal and the full
   name of the university on one line, held between two rules. No photograph —
   every earlier attempt had the picture arguing with the words. */
.finale__rule {
  position: absolute;
  left: 660px;
  width: 600px;
  height: 1px;
  background: var(--gold);
  transform-origin: 50% 50%;
}

.finale__rule--top    { top: 200px; }
.finale__rule--bottom { top: 918px; }

/* The seal above, the words centred under it, both rules holding them: the
   closing sheet reads as a plate rather than a line of type with a badge stuck
   beside it. */
/* Placed by plain left/top. A negative margin here was silently cancelled by
   the later .slide--finale rule, and centring by transform is the thing that
   an animation overwrites — both traps we have already been caught by. */
.finale__logo {
  position: absolute;
  left: 876px;
  top: 280px;
  width: 168px;
  height: 168px;
}

.slide--finale .display--s {
  position: absolute;
  left: 240px;
  top: 516px;
  width: 1440px;
  margin: 0;
  text-align: center;
  line-height: 1.14;
}

/* ------------------------------------------------------- логотип на титулі */

.mark-logo {
  position: absolute;
  left: 120px;
  top: 118px;
  width: 132px;
  height: 132px;
}