/* ---------------------------------------------------------------------------
   Kirill Snegur — welcome page
   Ported from Figma: "— Kirill Snegur • site —>" / Development section (52:351).

   The design is authored at two fixed widths:
     mobile   430 x 932  (iPhone 15 Pro Max, clip content OFF, content overflows)
     desktop  1920 x 1080 (clip content ON, content below the fold is hidden)

   Every value below is a Figma design pixel multiplied by --u, so the mobile
   layout scales to fill the viewport width and never re-wraps.
   --------------------------------------------------------------------------- */

:root {
  /* 1 design pixel. Fills the screen up to 430px, then keeps scaling to a
     1.2x cap so the column does not become oversized on small tablets. */
  --u: min(calc(100vw / 430), 1.2px);

  --edge: 0;      /* page left margin, design px */
  --inset: 10;    /* side padding of the project grid, design px */
  --pad-top: 3;
  --pad-bottom: 97; /* NOT in the design — Figma frame ends flush with the last line */

  --ink: #a9a9a9;
  --ink-strong: #000;
  --link: #7eb0ff;
  --stroke: #d9d9d9;
  --paper: #fff;

  /* Both faces self-hosted below. Mirrors the two text styles in the Figma
     typography library:
       Regular-20  Source Sans 3   Regular, wght 420 / 20 / 100% / -4%
       Regular-14  Source Sans Pro Regular          / 14 / AUTO / -5%   */
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-caption: "Source Sans Pro", "Source Sans 3", system-ui,
                  "Helvetica Neue", Arial, sans-serif;

  --fs-body: 20;
  --fs-caption: 14;
  --wt-body: 420;   /* variable wght axis, not a static weight */
  --wt-caption: 400;
  --track-body: -0.04em;
  --track-caption: -0.05em;
}

/* Both faces self-hosted (SIL OFL), no third-party request. Latin and Cyrillic
   are separate subsets with unicode-range, so /ru pulls the Cyrillic files and
   the English page never downloads them. Source Sans 3 is the variable file,
   so wght 420 is a real interpolation, not a synthesised weight. */
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/source-sans-3-latin.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/source-sans-3-cyrillic.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Google's Latin subset carries U+2191 and U+2193 but not U+2192, so the arrow
   in the Russian afterword fell back to a system font. This is a one-glyph
   subset cut for that single character. */
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/source-sans-3-arrow.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+2192;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/source-sans-pro-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/source-sans-pro-cyrillic.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(var(--fs-body) * var(--u));
  line-height: calc(var(--fs-body) * var(--u));   /* Regular-20: 100% */
  font-weight: var(--wt-body);
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
}

p, h2 { margin: 0; font: inherit; }   /* keep body's family/weight/tracking */

/* Even out the rag rather than filling each line to the measure. Chrome only
   balances blocks up to 6 lines; every block here is 2-4, so all qualify. */
.eyebrow,
.lede,
.block__title,
.afterword p,
.project figcaption { text-wrap: balance; }

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }          /* not in the design — affordance only */
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.page {
  width: calc(430 * var(--u));
  margin-inline: auto;
  padding: calc(var(--pad-top) * var(--u)) 0 calc(var(--pad-bottom) * var(--u))
           calc(var(--edge) * var(--u));
}

/* --- masthead ------------------------------------------------------------ */

.signature {
  display: block;
  width: calc(430 * var(--u));
  height: auto;
}

/* The signature and portrait bleed to the page edge, but the intro text is
   inset 10 design px — at both breakpoints (mobile x=10, desktop x=138). */
.eyebrow, .lede {
  margin-left: calc(10 * var(--u));
  max-width: calc(410 * var(--u));
}
.eyebrow { margin-top: calc(100.6 * var(--u)); }
.lede    { margin-top: calc(20 * var(--u)); }

.portrait {
  display: block;
  margin-top: calc(19 * var(--u));
  width: calc(430 * var(--u));
  height: calc(304 * var(--u));
  object-fit: cover;
}

/* --- project blocks ------------------------------------------------------ */

.content { padding-inline: calc(var(--inset) * var(--u)); }

.block__title { margin-top: calc(97 * var(--u)); }
.block + .block { margin-top: calc(99 * var(--u)); }

.grid {
  margin-top: calc(19 * var(--u));
  display: grid;
  grid-template-columns: repeat(2, calc(202 * var(--u)));
  column-gap: calc(6 * var(--u));
  row-gap: calc(34 * var(--u));
}

.project { margin: 0; }

.project img {
  display: block;
  width: 100%;
  height: auto;              /* beats the height attribute's presentational hint */
  aspect-ratio: 202 / 459;
  object-fit: cover;
}

.project figcaption {                    /* Regular-14 */
  font-family: var(--font-caption);
  font-size: calc(var(--fs-caption) * var(--u));
  line-height: normal;                   /* AUTO in Figma */
  font-weight: var(--wt-caption);
  letter-spacing: var(--track-caption);
  margin-top: calc(7 * var(--u));
}

/* The second content block's images carry a 1px inside stroke in the design.
   `outline` with a negative offset is the only inside stroke that paints on top
   of an <img>; an inset box-shadow would sit under the image content. Kept at a
   true hairline rather than scaled with --u. */
.block--outlined .project img {
  outline: 1px solid var(--stroke);
  outline-offset: -1px;
}

/* The design sets a tighter image-to-caption gap on the second row of each
   block (5px vs 12px to the cap height). Kept for fidelity — see the notes in
   README.md; delete this rule to normalise. */
.project--row2 figcaption { margin-top: calc(0 * var(--u)); }

/* --- afterword ----------------------------------------------------------- */

.afterword {
  margin-top: calc(99 * var(--u));
  padding-inline: calc(var(--inset) * var(--u));   /* tracks .content: 10 / 0 */
  /* Same 410px measure as the Hi and Content columns. Without this the
     paragraphs ran the full page width on desktop (1792px lines). */
  max-width: calc((410 + 2 * var(--inset)) * var(--u));
}
.afterword p + p { margin-top: calc(20 * var(--u)); }

/* --- desktop -------------------------------------------------------------
   Same blocks, laid out as 410px columns from a 128px left margin, exactly as
   the 1920 frame does. Design pixels become real pixels (--u: 1px).
   --------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  :root {
    --u: 1px;
    --edge: 128;
    --inset: 0;
    --pad-top: 99;
    --pad-bottom: 96;
  }

  .page { width: auto; margin-inline: 0; }

  .content {
    display: grid;
    grid-template-columns: repeat(2, calc(410 * var(--u)));
    column-gap: calc(32 * var(--u));
    align-items: start;
  }

  .block + .block { margin-top: 0; }
}