/* ==========================================================================
   contact.css — the contact page only. Loaded third, after tokens.css and
   site.css.

   The page is one block: the name, one standfirst, the three contact routes
   with the location, and the languages. The ContactFooter below it is shared
   chrome and lives in site.css, and the two carry the same three values on
   purpose (AC-C18).

   Every duration, easing and colour here is a token from tokens.css. The
   reveal delays are multiples of --stagger-line rather than written-out
   millisecond values, for the same reason.
   ========================================================================== */

/* --- The page ------------------------------------------------------------- */
/* Its own padding rather than .section, because the top has to clear the
   fixed navigation as well: AC-5 says the navigation never covers the first
   line of a page's own heading. The bottom is short of a full --section
   because the footer opens with one of its own. */
.contact {
  padding-block: calc(var(--nav-h) + 2rem) calc(var(--section) * .6);
}

.contact__grid { display: grid; gap: 3rem; }

/* Below 640px the page is measured against AC-C8: the three contact routes
   have to be reachable without scrolling at 375px wide. Every length in this
   block is tightened for that, and the measurements are in the commit. */
@media (max-width: 640px) {
  .contact { padding-block: calc(var(--nav-h) + 1rem) calc(var(--section) * .5); }
  .contact__grid { gap: 2rem; }
}

/* Two columns from lg: identity and the onward links on the left, the contact
   routes and the languages down the right. The placement is grid-only — the
   DOM order is identity, routes, onward links at every width, which is what
   keeps the three routes above the onward links on a phone (AC-C8). */
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: 6rem;
    row-gap: 4.5rem;
    align-items: start;
    grid-template-rows: auto 1fr;
  }
  .contact__id { grid-column: 1; grid-row: 1; }
  .contact__reach { grid-column: 2; grid-row: 1 / span 2; }
  .contact__on { grid-column: 1; grid-row: 2; }
}

/* --- The name ------------------------------------------------------------- */
/* Two lines, never one: "MARAT KORNYEV" set on a single line is wider than a
   375px viewport at every size in the scale that reads as a heading. The size
   steps up twice rather than running at --fs-display everywhere, because
   --fs-display computes to 125px at 375px wide and "KORNYEV" alone is then
   399px — wider than the 343px of content width available (AC-16, AC-C19).
   There is no eyebrow above it: the page's own h2s use the eyebrow component,
   the footer below opens with a CONTACT eyebrow of its own, and a third would
   say nothing. The name is the identification a visitor arrives to make. */
.contact__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-heading);
  text-transform: uppercase;
  --rv-dur: var(--t-heading);
}
@media (min-width: 768px) {
  .contact__name { font-size: var(--fs-h1); line-height: var(--lh-h1); }
}
/* One line below 640px rather than two. Below that breakpoint the root size
   is 4.444444vw, so the name is a constant 82vw wide at --fs-h2 whatever the
   screen — it fits at 320px as it fits at 639px — and setting it on one line
   gives back a whole line height to the fold budget AC-C8 is measured
   against. The two lines go inline here; the word space between them is in
   the markup. */
@media (max-width: 640px) {
  .contact__name .rv-line { display: inline-block; }
}
@media (min-width: 1024px) {
  .contact__name { font-size: var(--fs-display); line-height: var(--lh-display); }
}

/* --- The standfirst ------------------------------------------------------- */
/* Lead size from sm up. Below 640px it is body size: --fs-lead computes to
   23px at 375px wide, which runs the sentence to four lines and pushes the
   LINKEDIN row past the fold that AC-C8 requires it to stay above. */
.contact__standfirst {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted);
  --line-delay: calc(var(--stagger-line) * 3);
}
@media (min-width: 640px) {
  .contact__standfirst {
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    margin-top: 2rem;
  }
}

/* --- How to reach me, and Languages -------------------------------------- */
/* Both headings are the eyebrow component: the h1 carries this page's weight,
   and these two label the blocks under them. The casing in the markup is the
   copy's own; the uppercase is the component's. */
.contact__reach {
  --line-delay: calc(var(--stagger-line) * 4);
  --rv-stagger: calc(var(--stagger-word) * 2);
}

/* The label's own bottom margin is the only space between it and its block,
   so nothing under a label carries a top margin of its own. */
.contact__reach .eyebrow { margin-bottom: 1.25rem; }
.contact__aside + .eyebrow { margin-top: 3rem; }

.reach {
  display: grid;
  gap: 1.25rem;
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
  --rv-dur: var(--t-list);
}

/* .detail carries the dt/dd typography the footer uses, so the same four
   values look the same in both places. Only the spacing is this page's — and
   the label's leading, which inherits the body's 1.6 through .detail and is
   loose on a 13px uppercase label. The eyebrow component's own leading is
   what every other small-caps label on the site is set in. */
.reach__row dt { margin-bottom: .5rem; line-height: var(--lh-eyebrow); }

/* The profiles share one row and wrap inside it, so the list is four rows
   whether there are three profiles or five. Horizontal gap first, and larger
   than the vertical one: on a wide screen two or three sit on a line and the
   space is what separates them, with no punctuation to strand at a wrap. On a
   phone the shortest of them is still wider than half the column, so they
   stack — and stack to less height than three labelled rows would, because
   they share one label and one row gap between them. */
.profiles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.75rem;
}
/* These are URLs, which have no spaces to break at. Without this one long
   enough to exceed the column widens the page instead of wrapping — the same
   defect the footer's email address had. */
.profiles a { overflow-wrap: anywhere; }

/* On a phone each profile is its own line, so the body's 1.6 leading is
   buying nothing — these are single-line labels, not prose. Tightened, and
   with the row gap halved, because the budget here is the fold: AC-C8 wants
   every contact action reachable without scrolling at 375px, and a 667px
   screen is the one that decides it. Measured at 375x667 with all five
   entries present, Instagram and Facebook included: the row ended at 679px
   before this rule and ends at 612px after it, against a 667px fold. With the
   three that exist today it ends at 565px. The two that are coming fit.      */
@media (max-width: 640px) {
  .profiles { gap: .15rem 1.75rem; }
  .profiles li { line-height: var(--lh-eyebrow); }
}

/* --fs-lead on a dd is 23px at 375px wide. Four rows of it put the last row
   below the fold on a 667px-tall screen, which AC-C8 forbids, so the values
   are body size there and lead size from 640px up. */
@media (max-width: 640px) {
  .reach .detail dd { font-size: var(--fs-body); line-height: var(--lh-body); }
  .reach .detail dt { margin-bottom: .35rem; }
  .reach { gap: .875rem; padding-top: 1.25rem; }
}

/* A short line after a block of structured detail, with enough air above it
   that it is not read as another row of that block. */
.contact__aside {
  margin-top: 2.25rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
}

.contact__langs {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
@media (min-width: 640px) {
  .contact__langs { font-size: var(--fs-lead); line-height: var(--lh-lead); }
}

/* --- Onward -------------------------------------------------------------- */
.contact__on {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  --line-delay: calc(var(--stagger-line) * 9);
  --rv-stagger: calc(var(--stagger-word) * 2);
}