/* About page entrance: a single "TAISIIA REKHOVA" travels from the
   topbar's nav position down into the name-block, then gets struck
   through there. Mechanism (see js/about-intro.js): the real topbar
   link starts invisible and fades in as the traveler departs; the
   real in-flow name-block text starts invisible too and is only
   revealed once the traveler has landed and struck, at which point
   the traveler (a position:fixed clone, pixel-identical to the real
   text's resting spot) is swapped out — so scrolling afterward
   behaves normally instead of a stray fixed element staying glued to
   the viewport. */
#about-wordmark {
  opacity: 0;
  transition: opacity .4s ease;
}
#about-wordmark.wordmark-visible { opacity: 1; }

.intro {
  display: grid;
  grid-template-columns: 80px calc(50% - 140px) calc(50% - 20px);
  gap: 24px 40px;
  padding: 84px 30px 52px;   /* the caption under the slider takes up the rest of the old 90px */
}
.intro > .name-block { grid-column: 1 / span 2; }
.name-block { padding-top: 4px; }
.name-block .old-name {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.5px;
  color: var(--muted);
  visibility: hidden;
}
.name-block .old-name::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--muted);
}
.name-block .old-name.landed { visibility: visible; }

.name-traveler {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  font-family: 'B612 Mono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), color 1.1s ease, opacity .2s ease;
}
.name-traveler::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width .4s ease;
}
.name-traveler.landed { color: var(--muted); }
.name-traveler.struck::after { width: 100%; }
.name-traveler.done { opacity: 0; }

.name-block .new-name {
  font-size: 12px; letter-spacing: 0.5px; color: var(--ink); margin-bottom: 20px;
  min-height: 14px;
}
.name-block .new-name .typed-cursor {
  display: inline-block;
  width: 6px;
  margin-left: 1px;
  border-right: 1px solid var(--ink);
  animation: about-cursor-blink .8s steps(1) infinite;
}
@keyframes about-cursor-blink { 50% { border-color: transparent; } }

/* one running text as wide as the left side of the page (the years column
   plus the job column) */
.intro-copy-block { grid-column: 1 / span 2; }
.intro-copy {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  text-transform: none;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.2px;
  margin: 0;
}

.body-grid {
  display: grid;
  grid-template-columns: 80px calc(50% - 140px) calc(50% - 20px);
  gap: 32px 40px;
  padding: 0 30px 60px;
}
.col-label { grid-column: 1; white-space: nowrap; font-size: 12px; letter-spacing: 0.5px; color: var(--ink); padding-top: 4px; }
/* every heading sits the same distance above its first item: under WORK
   EXPERIENCE that is the 32px row gap + 4px text offset = 36px, so the other two headings
   (in the right column) get the same 36px */
.edu-col .col-label { margin-bottom: 20px; }
@media (min-width: 768px) { .edu-col .col-label { margin-bottom: 36px; } }
.job-year { grid-column: 1; font-size: 12px; color: var(--muted); letter-spacing: 0.3px; padding-top: 4px; }
.job-desc { grid-column: 2; max-width: 560px; }
/* was an inline style="grid-column:3; grid-row:1/span5" — moved to a
   class because inline styles can never be beaten by an external
   stylesheet's mobile override regardless of selector specificity,
   which silently broke the mobile stacking fix below */
.edu-col { grid-column: 3; grid-row: 1 / span 4; }

.entry { margin-bottom: 32px; }
.entry:last-child { margin-bottom: 0; }
.entry-years { font-size: 12px; color: var(--muted); letter-spacing: 0.3px; }
.entry-org { font-size: 12px; color: var(--ink); letter-spacing: 0.3px; margin-top: 4px; }
.entry-title {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  text-transform: none;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 8px 0 10px;
}
.entry-desc {
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  text-transform: none;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.entry-desc ul { margin: 8px 0 0; padding-left: 18px; }
.entry-desc li { margin-bottom: 6px; }
.entry-loc { font-size: 12px; color: var(--muted); letter-spacing: 0.3px; margin-top: 12px; }

/* education entries: same row layout as a job-experience item — years
   on the left, everything else on the right */
.entry-row { display: flex; gap: 20px; position: relative; }
.entry-row .entry-years { flex: none; width: 100px; padding-top: 4px; }
.entry-row .entry-content { flex: 1; min-width: 0; }
.entry-row .entry-content .entry-org { margin-top: 0; }
.entry-row .entry-content .entry-title { margin: 6px 0; }

/* hover preview image — its own natural aspect ratio, not cropped or
   stretched to the entry's shape, just laid on top of it */
.entry-hover-img {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 380px;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 15;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}
.entry-hover-img img { width: 100%; height: auto; display: block; }
.entry-hoverable:hover .entry-hover-img { opacity: 1; transform: scale(1); }
/* the Smolny gif is portrait (800x1066) — at the same 380px width as
   MS HCI's landscape image it renders over 500px tall, much bigger
   than the others, so it gets a narrower width of its own */
.entry-hover-img--small { width: 220px; }
/* work-experience rows are a year cell + a description cell in the grid,
   not one wrapper: the picture lives in the description and also opens
   when the year beside it is hovered */
.job-desc.entry-hoverable { position: relative; }
/* 100px further right than the education pictures */
.job-desc .entry-hover-img { left: 80px; }
.job-year:hover + .job-desc.entry-hoverable .entry-hover-img { opacity: 1; transform: scale(1); }

.skills-section { margin-top: 50px; }
.skills-group { margin-bottom: 20px; }
.skills-group:last-child { margin-bottom: 0; }
.skills-cat { font-size: 12px; color: var(--muted); letter-spacing: 0.5px; margin-bottom: 10px; }
/* one category per row: label on the left, its tags on the right */
.skills-row { display: flex; align-items: flex-start; gap: 20px; }
.skills-row .skills-cat { flex: none; width: 100px; margin-bottom: 0; padding-top: 6px; }
.skills-row .tags { flex: 1; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 11px; letter-spacing: 0.3px; color: var(--ink); border: 1px solid var(--line); padding: 5px 9px; }

/* Two halves of the page: the left one (years column + job column = 80px +
   40px gap + the rest) and the right one (Education, Skills) are exactly
   50% each of the content width, with the 40px column gap between them.
   A job description starts 120px after its period — the same distance as an
   Education entry (100px years + 20px gap). The WORK EXPERIENCE label is
   wider than the 80px years column but sits in a row of its own, so it
   just runs over the empty gap. */

@media (max-width: 767px) {
  /* header — name-block (names) at the top, both bio
     paragraphs grouped at the bottom, filling exactly one viewport,
     same pattern as the project pages' .overview */
  .intro {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* desktop's align-items:end (for its side-by-side columns) would
       otherwise persist here and, on a column flex axis, push
       name-block to the right edge instead of the left */
    align-items: flex-start;
    padding: 90px 24px 40px;
    gap: 20px;
  }
  /* auto margin on the first paragraph pushes it (and the second,
     which just follows immediately after in normal flow) down to the
     bottom as one group, without needing to wrap them in a container
     that desktop's separate-column layout doesn't want */
  .intro-copy-block { margin-top: auto; }

  /* .job-year/.job-desc pairs share the same inline grid-row on
     desktop (by design, so they sit side by side) — forcing them into
     one mobile column while that inline row assignment is still
     active made every pair land in the exact same cell, overlapping
     on top of each other. Dropping the grid formatting context
     entirely sidesteps that: grid-column/grid-row on children simply
     stop applying outside a grid container, and everything just
     stacks in DOM order instead — which is already the right order
     (label, year, desc, year, desc, ..., education column). */
  .body-grid { display: block; padding: 0 24px 60px; }
  /* consistent rhythm: 56px between sections (WORK EXPERIENCE →
     EDUCATION → SKILLS), 32px between items within a section, 20px
     from a section's label down to its first item */
  .col-label { margin-top: 56px; }
  .col-label:first-child { margin-top: 0; }
  .job-year { margin-top: 32px; }
  .job-year:first-of-type { margin-top: 20px; }
  .job-desc { margin-top: 8px; }
  /* subtle line between the 3 main blocks (WORK EXPERIENCE, EDUCATION,
     SKILLS) — not around the header above them */
  .edu-col { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 32px; }
  .entry { margin-bottom: 32px; }
  .skills-section { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 32px; }
  .skills-group { margin-bottom: 32px; }

  /* rows become stacks: years/label above, content/tags below */
  .entry-row { flex-direction: column; gap: 6px; }
  .entry-row .entry-years { width: auto; padding-top: 0; }
  .skills-row { flex-direction: column; gap: 8px; }
  .skills-row .skills-cat { width: auto; padding-top: 0; }

  /* hover previews don't make sense without hover on touch */
  .entry-hover-img { display: none; }
}

/* BeReal slider in the header, right-aligned in the third column and as
   tall as the whole hero content (name + intro text) (its width follows from the 3:4 shape of
   the photos; contain: size keeps it from making the row taller itself). */
.intro > .bereal-caption {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  margin: -12px 0 0;
  /* same as the other labels on the page: the mono face, capitals from the
     body style, 12px — in the grey used for secondary text (years, places) */
  font-family: 'B612 Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--muted);
}
.intro > .bereal-gallery {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: stretch;
  justify-self: end;
  contain: size;
}
/* one picture at a time (js/bereal-gallery.js): the frame is tall enough
   to hold a whole photo, the track slides from one to the next, rests on
   each, and stays put while the pointer is over the gallery */
.bereal-gallery {
  aspect-ratio: 3 / 4;   /* the shape of the photos */
  overflow: hidden;
  border-radius: 10px;
  background: var(--line);
}
.bereal-track { display: flex; height: 100%; will-change: transform; }
.bereal-track img {
  flex: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* no autoplay for people who asked for less motion: swipe/scroll instead */
@media (prefers-reduced-motion: reduce) {
  .bereal-gallery { overflow-x: auto; scroll-snap-type: x mandatory; }
  .bereal-track img { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .intro > .bereal-gallery { width: 100%; max-width: 360px; height: auto; contain: none; align-self: flex-start; }
  .intro > .bereal-caption { align-self: flex-start; margin: 0; }
}