/* Variant 5 — "Схема".
   The university drawn rather than photographed: crop marks, construction
   lines and nodes joined by leaders. Photographs survive only as small round
   vignettes, so the deck reads as a drawing that happens to have buildings
   in it. */

:root {
  --paper: #f2f4f7;
  --ink: #111827;
  --ink-soft: #626c7d;
  --brand: #325390;
  --brand-soft: rgba(50, 83, 144, 0.42);

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

.deck {
  background-color: var(--paper);
}

.stage {
  color: var(--ink);
  font-family: var(--sans);
}

/* ------------------------------------------------------------- line work */

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

.draw .thin line   { stroke: var(--brand-soft); stroke-width: 1; }
.draw .mark line,
.draw .mark path   { stroke: var(--brand); stroke-width: 2; fill: none; }
.draw .construct   { fill: none; stroke: var(--brand-soft); stroke-width: 1; }
.draw .axis        { stroke: var(--brand-soft); stroke-width: 1; }
.draw .leader path { fill: none; stroke: var(--brand-soft); stroke-width: 1; }
.draw .range path  { fill: none; stroke: var(--brand-soft); stroke-width: 1; }
.draw .hex         { fill: none; stroke: var(--brand); stroke-width: 1.5; }
.draw .dim         { stroke: var(--brand); stroke-width: 1.5; }
.draw .open        { fill: none; stroke: var(--brand); stroke-width: 2; }

.draw .dot circle,
.draw .node circle {
  fill: var(--paper);
  stroke: var(--brand);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

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

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

.display--xl { font-size: 96px; }
.display--m  { font-size: 58px; }
.display--s  { font-size: 44px; }

.kicker {
  position: absolute;
  top: 150px;
  left: 120px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kicker b {
  font-weight: 500;
  color: var(--brand);
  margin-right: 18px;
}

/* Lists that only exist to hold absolutely placed rows: kept at zero size so
   the container itself never counts as an element crossing the field. */
.strip,
.crowd,
.shots,
.words,
.verbs,
.edu-list,
.checklist {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------- round vignettes */

.vignette {
  position: absolute;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--brand-soft);
}

.vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vignette--s   { width: 150px; height: 150px; }
.vignette--m   { width: 220px; height: 220px; }
.vignette--l   { width: 300px; height: 300px; }
.vignette--xl  { width: 320px; height: 320px; }
.vignette--xxl { width: 420px; height: 420px; }
.vignette--xxxl{ width: 540px; height: 540px; }

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

.mark-logo {
  position: absolute;
  left: 912px;
  top: 250px;
  width: 96px;
  height: 96px;
}

.label {
  position: absolute;
  left: 360px;
  width: 1200px;
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Title first, then the school, then who is giving it — all struck on the
   centre line of the sheet. */
.label--top { top: 656px; font-size: 20px; }

.slide--title .display--xl {
  position: absolute;
  left: 260px;
  top: 384px;
  width: 1400px;
  text-align: center;
}

.title-speaker {
  position: absolute;
  left: 360px;
  top: 736px;
  width: 1200px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.title-speaker span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

.slide--intro .display--xl {
  position: absolute;
  font-size: 82px;
  left: 160px;
  top: 330px;
  width: 1600px;
  text-align: center;
}

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

.slide--history .display--m {
  position: absolute;
  top: 214px;
  left: 120px;
}

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

.steps li {
  position: absolute;
  left: 120px;
  width: 1680px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 104px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 44px;
}

.steps__node {
  grid-row: 1 / 3;
  justify-self: start;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--brand-soft);
}

.steps__node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.steps__years {
  align-self: end;
  font-family: var(--head);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.steps__name {
  align-self: start;
  margin-top: 10px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 1080px;
}

.steps .is-now .steps__years { color: var(--brand); }
.steps .is-now .steps__name { color: var(--ink); }

.steps .is-now .steps__node {
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--brand);
}

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

.slide--kuznets .display--m {
  position: absolute;
  top: 478px;
  left: 120px;
}

/* Placed by left/top and centred by text-align, so nothing here depends on a
   transform the timeline could overwrite. */
.plate-caption {
  position: absolute;
  left: 1110px;
  top: 842px;
  width: 500px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.plate-caption span {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}

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

.slide--today .display--m {
  position: absolute;
  top: 214px;
  left: 120px;
}

/* The label of the centre is a box the size of the figure it sits in, so the
   text is centred by construction whatever its length. */
.hex-core {
  position: absolute;
  left: 810px;
  top: 585px;
  width: 300px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hex-label {
  position: absolute;
  width: 300px;
  margin: 0;
  font-family: var(--head);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hex-label--c { text-align: center; }
.hex-label--e { text-align: left; }
.hex-label--w { text-align: right; }

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

.lede {
  position: absolute;
  top: 214px;
  left: 120px;
  width: 440px;
  margin: 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Same rule as the other diagrams: the box is the title block itself and is
   placed by plain left/top, so the label is centred by construction whatever
   its length, and no animated transform can shift it. */
.hub-label {
  position: absolute;
  left: 120px;
  top: 430px;
  width: 440px;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* The number lives inside its node circle: a box the size of the circle. */
.node-no {
  position: absolute;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--head);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--brand);
}

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

/* Level with the name, not with the middle of the block — the sub-lines differ
   in length, so a centred box would set every row at its own height. */
.nodes li {
  position: absolute;
  left: 1130px;
  width: 660px;
  margin-top: -14px;
}

.nodes__name {
  display: block;
  font-family: var(--head);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.nodes__sub {
  display: block;
  margin-top: 12px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-soft);
}

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

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

.edu-from {
  position: absolute;
  left: 120px;
  top: 314px;
  margin: 0;
  font-family: var(--head);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand);
}

.edu-list li {
  position: absolute;
  left: 250px;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink-soft);
}

.edu-to {
  position: absolute;
  left: 1100px;
  top: 770px;
  width: 600px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

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

.slide--international .display--m {
  position: absolute;
  top: 214px;
  left: 120px;
}

.reach-origin {
  position: absolute;
  left: 336px;
  top: 868px;
  margin: 0;
  padding: 4px 12px;
  background: var(--paper);
  font-family: var(--head);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand);
}

.reach-stop {
  position: absolute;
  margin: 0;
  padding: 5px 14px;
  background: var(--paper);
  font-size: 23px;
  font-weight: 300;
  color: var(--ink);
  white-space: nowrap;
}

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

.claim {
  position: absolute;
  left: 260px;
  top: 780px;
  width: 1400px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.stop {
  position: absolute;
  top: 672px;
  width: 260px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

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

.words li {
  position: absolute;
  left: 210px;
}

.words span {
  display: block;
  font-family: var(--head);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- 13. Наука */

.verbs li {
  position: absolute;
  left: 200px;
}

.verbs b {
  display: block;
  font-family: var(--head);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.verbs span {
  display: block;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

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

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

.checklist li {
  position: absolute;
  left: 120px;
  width: 1000px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink);
}

.box {
  flex: none;
  width: 40px;
  height: 40px;
}

.box rect { fill: none; stroke: var(--brand-soft); stroke-width: 1; }
.box path { fill: none; stroke: var(--brand); stroke-width: 2.5;
            stroke-linecap: round; stroke-linejoin: round; }

/* -------------------------------------------------------------- 19. Спадок */

.legacy__lead {
  position: absolute;
  left: 120px;
  top: 350px;
  width: 900px;
  margin: 0;
  font-family: var(--head);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.legacy__now {
  position: absolute;
  left: 1444px;
  top: 764px;
  width: 356px;
  margin: 0;
  text-align: center;
  font-family: var(--head);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--brand);
}

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

.mark-logo--finale {
  left: 920px;
  top: 330px;
  width: 80px;
  height: 80px;
}

.slide--finale .display--s {
  position: absolute;
  left: 260px;
  top: 470px;
  width: 1400px;
  text-align: center;
  line-height: 1.28;
}

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

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

.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: 52px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}

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

/* The range arcs are struck outward from the origin of the plot, so they need
   the origin as their transform origin rather than their own bounding box. */
.draw .range path {
  transform-box: view-box;
  transform-origin: 300px 940px;
}