/* Section headers read like a book's table of contents: bold capitals,
   a red number that is true of the section (its years or how many items),
   and black rules around it. Like the book, each header sits at its own
   place in the row; --at is the grid column its text starts on (0 = flush
   left), so the scatter is hand-picked and always lands on the grid. The
   rule is 3px like the strokes of the mark and the chevrons. */
/* Below the header, each section is a 12-column grid. Content sits in
   narrow blocks on it rather than full-width lines, and gets room to breathe
   so the headers don't outweigh it. On a phone everything is one column. */
.section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
}

.section > * {
  grid-column: 1 / -1;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: var(--section-space) 0;
}

/* The hero keeps 2.5rem of padding under its location line (it mirrors the
   space above the mark), so the first header subtracts it to sit exactly
   one section-space below that line. */
.hero + .section .section-head {
  margin-top: calc(var(--section-space) - 2.5rem);
}

.section-head::before,
.section-head::after {
  content: "";
  min-width: 2rem;
  border-top: 3px solid var(--text);
  /* Centre on the capitals, which sit above the line box's middle. */
  margin-top: -0.12em;
}

/* Lead rule: reaches column --at, minus the flex gap before the text. */
.section-head::before {
  flex: 0 1 calc(var(--at) * (100% + var(--gap)) / 12 - 0.4em);
}

.section-head::after {
  flex: 1;
}

#work {
  --at: 4;
}

/* The longest header: flush left so it stays on one line. */
#recognition {
  --at: 0;
}

#recognition .section-head::before {
  content: none;
}

/* Even flush left, the full name needs ~400px at phone size and would wrap,
   so phones get the short one. */
.head-short {
  display: none;
}

@media (max-width: 47.99rem) {
  .head-long {
    display: none;
  }

  .head-short {
    display: inline;
  }
}

/* Flush right: the lead rule takes all the room, no tail. */
#education .section-head::before {
  flex: 1;
}

#education .section-head::after {
  content: none;
}

#languages {
  --at: 3;
}

.section-num {
  color: var(--red);
}

.cell-title,
.cell-note,
.education span {
  display: block;
}

.cell-title {
  font-weight: 700;
}

.cell-note {
  color: var(--muted);
}

.cells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.5rem var(--gap);
}

/* Languages: each written in itself, its size the level, all on one
   baseline like a scale. */
.languages {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 3.5rem 3.5rem;
}

.lang-word {
  display: block;
  margin-bottom: 1.4rem;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.035em;
}

.lang-native .lang-word {
  font-size: clamp(3.5rem, 10vw, 8rem);
}

.lang-fluent .lang-word {
  font-size: clamp(2.5rem, 6.5vw, 5.25rem);
}

.lang-learning .lang-word {
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  color: var(--muted);
}

/* Education: the statement as the image. 3 years became 2. */
.edu-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.12em;
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.05em;
}

.edu-from {
  color: var(--rule-quiet);
}

.edu-arrow {
  font-size: 0.45em;
  font-weight: 400;
  color: var(--rule-quiet);
}

.edu-to {
  color: var(--red);
}

.edu-caption {
  flex-basis: 100%;
  margin-top: 2.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}

.education {
  margin-top: 5.5rem;
}

.education a {
  color: inherit;
}

/* Recognition: the result is the image, set big, like the 45/159 tile.
   Red for a placing against others, black for a certificate earned. All
   marks share one box height so the titles under them line up. */
.award {
  --award-size: clamp(3rem, 7vw, 5.5rem);
}

.award-mark {
  display: flex;
  align-items: flex-end;
  height: calc(var(--award-size) * 0.9);
  margin-bottom: 2.25rem;
  font-size: var(--award-size);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.045em;
  color: var(--red);
}

.award-mark sup {
  align-self: flex-start;
  margin-left: 0.06em;
  font-size: 0.32em;
  line-height: 1;
  letter-spacing: 0;
}

.award-cert .award-mark {
  font-size: calc(var(--award-size) * 0.7);
  color: var(--text);
}

/* Phone: one column leaves everything hugging the left edge, so these
   two sections use the width as a diagonal. Education: the figure on the
   right, the facts below on the left. Languages: a staircase, stepping
   right as the level drops. */
@media (max-width: 47.99rem) {
  .edu-figure {
    justify-content: flex-end;
    font-size: 32vw;
  }

  .edu-caption {
    text-align: right;
  }

  .languages {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
  }

  .lang-fluent {
    margin-left: 30%;
  }

  .lang-learning {
    align-self: flex-end;
    text-align: right;
  }
}

@media (min-width: 48rem) {
  /* Two rows of three, every mark the same size: competitions above,
     a prize and two certificates below. */
  .recognition {
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem 4.5rem;
  }

  /* The figure under the right-flush header, the facts low on the left. */
  .edu-figure {
    grid-column: 6 / -1;
    grid-row: 2;
  }

  .education {
    grid-column: 1 / span 4;
    grid-row: 2;
    align-self: end;
    margin-top: 0;
  }

  /* Spread edge to edge: Eesti starts at the left edge, Deutsch ends
     where the divider ends; the gaps take what's left, and the row wraps
     rather than overflow on a narrow window. */
  .languages {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 3.5rem 2rem;
  }
}