/* ==========================================================
   Elizaveta Ismagilova — portfolio
   Rebuilt to match the original Readymag layout.

   HOW SIZING WORKS
   Like Readymag, the page is designed on a 1024-unit-wide canvas
   that scales with the browser window. 1 unit = var(--u).
   So "calc(8 * var(--u))" means "8 units on the canvas".

   Canvas columns (left edges):
     20  = label column      (numbers, titles, section names)
     162 = text column       (intro, descriptions, your name)
     294 = image column      (sliders / images, 568 wide, ends at 862)
   ========================================================== */

:root {
  /* ---- Colours ---- */
  --ink: #000;             /* text */
  --link: #0080ff;         /* blue links, same as Readymag */
  --paper: #fff;           /* page background */
  --slide-bg: #000;        /* slider background */

  /* ---- Font ----
     Original: Helvetica Neue LT Pro 65 Medium (Adobe Fonts).
     Macs have Helvetica Neue built in, so it looks the same there.
     See README to load the exact Adobe font on every computer. */
  --font: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight: 500;

  /* ---- Scale: 1 canvas unit ---- */
  --u: calc(100vw / 1024);

  /* ---- Type sizes (canvas units) ---- */
  --small: calc(8 * var(--u));      /* labels, nav, descriptions */
  --small-lh: calc(10 * var(--u));
  --body: calc(10 * var(--u));      /* CV text */
  --body-lh: calc(10.5 * var(--u));

  /* ---- Columns (canvas units) ---- */
  --col-a: calc(142 * var(--u));    /* 20 → 162 */
  --col-b: calc(132 * var(--u));    /* 162 → 294 */
  --col-c: calc(568 * var(--u));    /* 294 → 862 */
  --edge: calc(20 * var(--u));      /* left page margin */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: var(--small);
  line-height: var(--small-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
/* Readymag link style: no visual change on hover */
p { margin: 0 0 var(--small-lh); }
h1, h2, h3 { margin: 0; font: inherit; }

/* ---------- Header: same positions as the original, plus a white bar ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: calc(36 * var(--u));
  background: var(--paper);
  text-transform: uppercase;
}
.hdr a { position: absolute; top: calc(14 * var(--u)); white-space: nowrap; }
.hdr .nav-name    { left: calc(162 * var(--u)); }
.hdr .nav-cv      { left: calc(365 * var(--u)); }
.hdr .nav-cases   { left: calc(499 * var(--u)); }
.hdr .nav-behance { left: calc(638 * var(--u)); text-transform: none; }
.hdr .nav-email   { right: calc(162 * var(--u)); color: var(--ink); text-transform: none; }

/* Hover "swing" pulse on CV and email: 100% → 105% → 100%, 1.2 s loop */
.pulse { display: inline-block; }
.pulse:hover { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

main { padding-top: calc(45 * var(--u)); }

/* ---------- The 3-column row used on every page ---------- */
.row {
  display: grid;
  grid-template-columns: var(--col-a) var(--col-b) var(--col-c);
  padding-left: var(--edge);
  align-items: start;
}
.a { grid-column: 1; padding-right: calc(10 * var(--u)); }
.b { grid-column: 2; padding-right: calc(12 * var(--u)); }
.c { grid-column: 3; }

/* ---------- Home ---------- */
.intro { margin-bottom: calc(45 * var(--u)); }
.intro p { margin: 0; }
.intro p + p { margin-top: var(--small-lh); }

.section-label { margin: calc(80 * var(--u)) 0 calc(10 * var(--u)); padding-left: calc(499 * var(--u)); }  /* under CASES in the header */
.section-label span { text-transform: uppercase; }

.project { margin-bottom: calc(120 * var(--u)); scroll-margin-top: calc(60 * var(--u)); }
.project .a > * { display: block; }
.project h3 { text-transform: uppercase; }
.reveal { all: unset; cursor: pointer; color: var(--link); text-transform: uppercase; }
.reveal:focus-visible { outline: 1px solid var(--link); }
.project .more { margin-top: calc(10 * var(--u)); }

/* Description: hidden until its trigger is clicked, then fades in (0.5 s) */
.desc { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; }
.desc.open { opacity: 1; visibility: visible; transition: opacity 0.5s ease-in-out, visibility 0s; }
.desc h4 { margin: 0; font: inherit; text-transform: uppercase; }
.project .desc { height: 0; overflow: visible; position: relative; z-index: 2; }  /* like Readymag: doesn't push the layout down */
.desc p { margin: 0 0 var(--small-lh); }

/* ---------- Slider ---------- */
.slider {
  position: relative;
  cursor: grab;
  touch-action: pan-y;
  aspect-ratio: 568 / 340;
  background: var(--slide-bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateX(100%);   /* waiting off to the right */
  pointer-events: none;
}
.slider img:first-of-type { transform: none; }
.slider button {
  all: unset; cursor: pointer;
  position: absolute; top: 50%; z-index: 2;
  width: calc(26 * var(--u)); height: calc(15.6 * var(--u));
  transform: translateY(-50%);
  background: center / contain no-repeat;
}
.slider.dragging { cursor: grabbing; }
.slider .prev { left: calc(16 * var(--u)); background-image: url(images/ui/prev-white.svg); }
.slider .next { right: calc(16 * var(--u)); background-image: url(images/ui/next-white.svg); }
.slider.dark-arrows .prev { background-image: url(images/ui/prev-black.svg); }
.slider.dark-arrows .next { background-image: url(images/ui/next-black.svg); }
/* hover-play sliders (cases): arrows only show while hovering */
.slider[data-play="hover"] button { opacity: 0; transition: opacity 0.3s ease; }
.slider[data-play="hover"]:hover button,
.slider[data-play="hover"]:focus-within button,
.slider.touch button { opacity: 1; }
.slider button:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }

/* ---------- Case page ---------- */
.case { padding-top: calc(25 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.case .a > * { display: block; }
.case h1 { text-transform: uppercase; }
.case .a { position: sticky; top: calc(50 * var(--u)); }
.case .b h2 { text-transform: uppercase; }
.case .images { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.case-nav { padding-bottom: calc(60 * var(--u)); text-transform: uppercase; }
.case-nav .c { display: flex; justify-content: space-between; }

/* ---------- Homepage + CV "slide-in" (CV is uncovered from underneath) ---------- */
.home-page { position: relative; z-index: 1; background: var(--paper); padding-bottom: calc(1 * var(--u)); }
.cv-page { position: relative; z-index: 0; background: var(--paper); }
.cv-page.reveal-on { position: sticky; bottom: 0; }   /* uncover effect; site.js fine-tunes 'bottom' */
#cv { scroll-margin-top: calc(36 * var(--u)); }       /* stop below the fixed header */
.cv-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #000; opacity: var(--dim, 0);
}
.cv-page:not(.reveal-on)::after { display: none; }

/* ---------- CV ---------- */
.cv-title { padding-left: calc(365 * var(--u)); text-transform: uppercase; padding-top: calc(59 * var(--u)); }  /* under CV in the header; top space clears the header */
.cv {
  position: relative;
  padding: calc(20 * var(--u)) 0 0 var(--edge);
  font-size: var(--body);
  line-height: var(--body-lh);
}
.cv .label { font-size: var(--small); line-height: var(--small-lh); text-transform: uppercase; padding-top: calc(1 * var(--u)); }

/* left half: label | role | description (right-aligned) | dates */
.cv-left { width: calc(600 * var(--u)); }
.cv-sec { display: grid; grid-template-columns: calc(142 * var(--u)) 1fr; margin-bottom: calc(28 * var(--u)); }
.cv-item {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) calc(127 * var(--u)) calc(150 * var(--u));
  column-gap: calc(7 * var(--u));
}
.cv-item + .cv-item { margin-top: calc(16 * var(--u)); }
.cv-item .what { text-align: right; }
.cv-langs { display: grid; grid-template-columns: calc(150 * var(--u)) calc(127 * var(--u)); }
.cv-langs span:nth-child(even) { text-align: right; }

/* right half: label (right-aligned) | list (right-aligned, ends at 862) */
.cv-right {
  position: absolute; top: calc(20 * var(--u));
  left: calc(640 * var(--u)); width: calc(222 * var(--u));
}
.cv-rsec { display: grid; grid-template-columns: calc(80 * var(--u)) 1fr; text-align: right; margin-bottom: calc(28 * var(--u)); }
.cv-rsec ul { list-style: none; margin: 0; padding: 0; }

.cv-download { text-align: center; text-transform: uppercase; padding: calc(50 * var(--u)) 0 calc(80 * var(--u)); }

/* ==========================================================
   PHONE (narrower than 700px): one column, readable sizes
   ========================================================== */
@media (max-width: 700px) {
  :root { --u: 1.5px; --edge: 16px; --body-lh: calc(13 * var(--u)); --small-lh: calc(11 * var(--u)); }

  .hdr { position: sticky; height: auto; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .hdr a { position: static; }
  .hdr .nav-email { display: none; }
  .hdr .nav-name { width: 100%; }

  main { padding-top: 24px; }
  .row { display: block; padding: 0 16px; }
  .a, .b { padding-right: 0; margin-bottom: 10px; }
  .intro { margin-bottom: 48px; }
  .section-label { margin: 40px 0 12px; padding-left: 16px; }
  .section-label span { display: block; text-align: left; }
  .project { margin-bottom: 56px; }
  .slider .prev { left: 8px; }
  .slider .next { right: 8px; }

  .case { padding-top: 24px; }
  .case .a { position: static; }
  .case .b { margin-bottom: 20px; }
  .case-nav .c { gap: 16px; }
  .cv-page, .cv-page.reveal-on { position: static; }
  #cv { scroll-margin-top: 70px; }
  .cv-page::after { display: none; }
  .desc, .project .desc { opacity: 1; visibility: visible; height: auto; }   /* phones: descriptions always shown */
  .reveal { display: none; }

  .cv-title { padding: 24px 16px 0; text-align: left; }
  .cv { padding: 16px; }
  .cv-left, .cv-right { position: static; width: auto; }
  .cv-sec, .cv-rsec { grid-template-columns: 1fr; text-align: left; gap: 6px; margin-bottom: 28px; }
  .cv-item { grid-template-columns: 1fr; }
  .cv-item .what { text-align: left; }
  .cv-item .when { order: -1; }
  .cv-langs { grid-template-columns: 1fr auto; max-width: 260px; }
  .cv-download { padding: 32px 16px 56px; text-align: left; }
}