/* ============================================================
   Lena Mikhailova — portfolio v3
   Visual language after specialproduction.agency:
   white bg · heavy condensed black display type · gray subtitles
   hand-drawn ovals · script accents · yellow contacts page
   Fonts: Anton (display) · Oswald (condensed text) · Caveat (script)
   ============================================================ */

:root {
  --bg: #FFFFFF;
  --ink: #0E0E0E;
  --gray: #BDBDBD;
  --gray2: #8C8C8C;
  --yellow: #F2EA7E;
  --rose: #D3ADA5;        /* розовый тюбика курсора */
  --rose-deep: #B07E72;   /* тот же тон, но читаемый на белом */
  --display: "Anton", "Arial Narrow", sans-serif;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --script: "Caveat", cursive;
  --pad: clamp(16px, 1.6vw, 24px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--cond);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ink); color: var(--yellow); }

/* ---------- type helpers ---------- */

.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: 0.005em;
}
.cond-b { font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; }
.gray { color: var(--gray); }
.gray2 { color: var(--gray2); }
.scribble { font-family: var(--script); font-weight: 600; text-transform: none; }

sup.city {
  font-size: 0.34em; letter-spacing: 0.02em;
  vertical-align: super; margin-left: 0.12em;
}

/* ---------- header ---------- */

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 14px var(--pad) 10px;
  pointer-events: none;
}
.hdr > * { pointer-events: auto; }
.hdr a { transition: color 0.25s; }
.hdr a:hover { color: var(--gray2); }
.hdr-l, .hdr-r {
  font-family: var(--display); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.03em; display: flex; gap: 14px;
}
.hdr-r { justify-content: flex-end; }
.hdr a.on { color: var(--gray); }
.hdr .paren { white-space: nowrap; }
.hdr-c {
  font-family: var(--display); font-size: clamp(20px, 2vw, 28px);
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; gap: 0.22em; white-space: nowrap;
}
.hdr-c a:hover { color: var(--ink); }
.hdr.on-dark, .hdr.on-dark a { color: var(--ink); }

/* solid header bg for longread pages */
.hdr.solid { background: var(--bg); }
.contacts-page .hdr.solid { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- hand-drawn oval ---------- */

.oval {
  position: relative; display: inline-block;
}
.oval svg {
  position: absolute; inset: -0.42em -0.6em;
  width: calc(100% + 1.2em); height: calc(100% + 0.84em);
  pointer-events: none;
}
.oval svg ellipse {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.oval-btn {
  display: inline-block;
  font-family: var(--display); font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--ink); border-radius: 50%;
  padding: 0.65em 1.6em;
  transform: rotate(-1deg);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.oval-btn:nth-child(even) { transform: rotate(1.2deg); }
.oval-btn:hover { background: var(--ink); color: var(--bg); transform: rotate(0deg) scale(1.03); }
.contacts-page .oval-btn:hover { color: var(--bg); }

/* ---------- home slider ---------- */

.home-body { overflow-x: hidden; }

.strip-stage { position: fixed; inset: 0; overflow: hidden; }
.strip {
  position: absolute; top: 50%; left: 0;
  display: flex; align-items: center; gap: clamp(48px, 6vw, 110px);
  transform: translateY(-50%);
  will-change: transform;
  padding-left: 52vw;
  padding-right: 58vw;
}
.strip a {
  flex: none; display: block; position: relative;
}
.strip img {
  height: clamp(340px, 62vh, 640px); width: auto;
  user-select: none; -webkit-user-drag: none;
}
.strip a::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bg); opacity: 0; transition: opacity 0.5s;
  pointer-events: none;
}
.strip a.dim::after { opacity: 0.82; }

/* left sticky: numbers + title */
.slider-info {
  position: fixed; left: var(--pad); top: 50%; transform: translateY(-50%);
  z-index: 60; pointer-events: none;
}
.num-list { list-style: none; }
.num-list li {
  font-family: var(--display); font-size: 14px;
  color: var(--gray); line-height: 2.2;
  position: relative; width: 2.4em;
  transition: color 0.3s;
}
.num-list li.on { color: var(--ink); }
.num-list li .oval svg { opacity: 0; transition: opacity 0.3s; }
.num-list li.on .oval svg { opacity: 1; }

.slider-title {
  position: fixed; left: clamp(80px, 8vw, 130px); top: 50%; transform: translateY(-50%);
  z-index: 60; pointer-events: none; max-width: 46vw;
}
.slider-title .t1 {
  font-family: var(--display); font-size: clamp(28px, 3.6vw, 54px);
  text-transform: uppercase; line-height: 1;
  transition: opacity 0.25s;
}
.slider-title .t1 sup { font-size: 0.36em; }
.slider-title .t2 {
  font-family: var(--display); font-size: clamp(20px, 2.6vw, 38px);
  text-transform: uppercase; color: #7A7A76;
  margin-top: 2px; line-height: 1;
  transition: opacity 0.25s;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.55);
}
.slider-title.switching .t1, .slider-title.switching .t2 { opacity: 0; }

.slider-hint {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%);
  z-index: 60; font-family: var(--script); font-size: 20px; color: var(--gray2);
  transform-origin: center; rotate: -2deg;
}

/* bottom brands ticker */
.brands-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: var(--bg); border-top: 1.5px solid var(--ink);
  overflow: hidden; white-space: nowrap;
  padding: 12px 0;
}
.brands-track { display: inline-block; animation: brands-marquee 60s linear infinite; }
.brands-bar:hover .brands-track { animation-play-state: paused; }
.brands-track span, .brands-track a {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.05em; margin-right: 2.6em;
}
.brands-track a { transition: color 0.25s; }
.brands-track a:hover { color: var(--gray2); }
.brands-track span i, .brands-track a i { font-style: normal; color: var(--gray); margin-left: 2.6em; }
.brands-track .blbl { color: var(--gray2); font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; }
@keyframes brands-marquee { to { transform: translateX(-50%); } }

/* ---------- career grid (like /work) ---------- */

.page-wrap { padding: 110px var(--pad) 80px; }

.wgrid { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 110px) clamp(18px, 2vw, 28px); }
.wrow { display: block; position: relative; }
.wrow .whead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.wrow .wt {
  font-family: var(--display); font-size: 17px; text-transform: uppercase; line-height: 1.15;
}
.wrow .wt small { display: block; color: var(--gray); font-size: 15px; }
.wrow .wnum { font-family: var(--display); font-size: 14px; color: var(--gray2); }
.wrow figure { overflow: hidden; }
.wrow img {
  width: 100%; aspect-ratio: var(--ar, 4/3); object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.wrow:hover img { transform: scale(1.025); }
.w-38 { width: calc(38% - 14px); }
.w-58 { width: calc(58% - 14px); }
.w-46 { width: calc(46% - 14px); }
.w-50 { width: calc(50% - 14px); }
.w-100 { width: 100%; }

/* ---------- longread case pages ---------- */

.case-top { padding: clamp(120px, 16vh, 170px) var(--pad) 0; }
.case-top .kick {
  font-family: var(--display); font-size: 13px; color: var(--gray2);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px;
}
.case-top h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(52px, 9.5vw, 150px);
  text-transform: uppercase; line-height: 0.94; letter-spacing: 0.005em;
}
.case-top .sub {
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 60px);
  text-transform: uppercase; color: var(--gray); opacity: 0.8;
  line-height: 1; margin-top: 6px;
}
.case-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px; margin-top: clamp(28px, 4vw, 52px);
}
.case-meta b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 12px; text-transform: uppercase; color: var(--gray2);
  margin-bottom: 4px; letter-spacing: 0.04em;
}
.case-meta span {
  font-family: var(--cond); font-weight: 600; font-size: 14px;
  text-transform: uppercase; line-height: 1.45; display: block; max-width: 30ch;
}

.case-lead {
  padding: clamp(40px, 6vw, 80px) var(--pad) 0;
  max-width: 880px;
}
.case-lead p {
  font-family: var(--cond); font-weight: 500;
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5;
  color: var(--gray2);
}
.case-lead p b { color: var(--ink); font-weight: 600; }

/* metrics band */
.mrow {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 64px);
  padding: clamp(48px, 7vw, 100px) var(--pad) 0;
}
.mrow div b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 72px); line-height: 1;
}
.mrow div span {
  font-family: var(--cond); font-weight: 600; font-size: 12px;
  text-transform: uppercase; color: var(--gray2); letter-spacing: 0.03em;
  display: block; margin-top: 6px; max-width: 22ch;
}

/* chapters */
.chapter { padding: clamp(70px, 10vw, 140px) var(--pad) 0; }
.chapter:last-of-type { padding-bottom: clamp(70px, 10vw, 120px); }
.ch-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 14px; }
.ch-num {
  font-family: var(--display); font-size: 15px; color: var(--ink);
  position: relative; flex: none;
}
.chapter h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4.6vw, 66px);
  text-transform: uppercase; line-height: 0.98;
}
.chapter .ch-lead {
  font-family: var(--cond); font-weight: 500;
  font-size: clamp(15px, 1.25vw, 18px); color: var(--gray2);
  max-width: 760px; margin-bottom: clamp(26px, 4vw, 48px);
}

/* photo rows inside chapters */
.prow { display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(14px, 1.8vw, 24px); }
.prow figure { overflow: hidden; cursor: zoom-in; flex: 1 1 0; min-width: 0; }
.prow figure.p2 { flex-grow: 2; }
.prow figure.p3 { flex-grow: 3; }
.prow img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: var(--ar, auto);
  transition: transform 0.7s var(--ease);
}
.prow figure:hover img { transform: scale(1.03); }
.prow.h-tall figure img { aspect-ratio: 3 / 4; }
.prow.h-wide figure img { aspect-ratio: 16 / 10; }
.prow.h-sq figure img { aspect-ratio: 1 / 1; }

/* tiles of sub-metrics */
.trow { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px); margin-top: 10px; }
.trow div b { display: block; font-family: var(--display); font-size: clamp(26px, 3vw, 44px); line-height: 1; }
.trow div span { font-family: var(--cond); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--gray2); display: block; margin-top: 5px; max-width: 24ch; }

/* video */
.vrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); }
.yt { position: relative; aspect-ratio: 16/9; background: #000; cursor: pointer; overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 0.3s; }
.yt:hover img { opacity: 1; }
.yt .play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  border: 1.5px solid #fff; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--display); font-size: 12px; text-transform: uppercase;
  background: rgba(0,0,0,0.25);
}
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* next case */
.next {
  padding: clamp(70px, 10vw, 130px) var(--pad) clamp(50px, 7vw, 90px);
}
.next .lbl { font-family: var(--display); font-size: 13px; color: var(--gray2); text-transform: uppercase; margin-bottom: 8px; }
.next a {
  font-family: var(--display); font-size: clamp(40px, 7.5vw, 110px);
  text-transform: uppercase; line-height: 0.96; display: inline-block;
  transition: color 0.3s;
}
.next a:hover { color: var(--gray); }

/* ---------- about me ---------- */

.giant {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(70px, 17.5vw, 300px);
  text-transform: uppercase; line-height: 0.88; letter-spacing: -0.005em;
  text-align: center;
}
.about-cols, .c-cols {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start; text-align: center;
  padding: clamp(40px, 6vw, 80px) var(--pad) 0;
}
.c-col-t {
  font-family: var(--display); font-size: clamp(20px, 2.2vw, 34px);
  text-transform: uppercase; line-height: 1.15; color: var(--gray2);
}
.c-col-mid {
  font-family: var(--cond); font-weight: 600; font-size: clamp(14px, 1.2vw, 17px);
  text-transform: uppercase; line-height: 1.6; color: var(--ink);
}
.c-small {
  font-family: var(--cond); font-weight: 600; font-size: 13px;
  text-transform: uppercase; line-height: 1.6;
}
.c-small b { display: block; font-weight: 700; }

.aport { display: flex; justify-content: center; padding: clamp(36px, 5vw, 64px) var(--pad) 0; }
.aport figure { position: relative; width: min(360px, 74vw); }
.aport img { width: 100%; }
.aport .scribble {
  position: absolute; right: -1.2em; bottom: -0.7em;
  font-size: clamp(22px, 2.4vw, 32px); rotate: -5deg; color: var(--ink);
}

.alist { max-width: 980px; margin: 0 auto; padding: clamp(50px, 7vw, 100px) var(--pad) 0; }
.alist .ch-head { justify-content: flex-start; }
.alist h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.8vw, 40px); text-transform: uppercase; line-height: 1.05;
}
.alist p { font-family: var(--cond); font-weight: 500; color: var(--gray2); font-size: 15px; max-width: 640px; margin-top: 6px; }
.alist > div { padding: 22px 0; border-top: 1.5px solid var(--ink); }
.alist > div:last-child { border-bottom: 1.5px solid var(--ink); }

.edu-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  max-width: 980px; margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) 0;
  text-align: center;
}

/* ---------- contacts (yellow) ---------- */

.contacts-page { background: var(--bg); }
.contacts-page .giant { padding-top: 92px; }
.c-btns {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 10px;
  padding: clamp(30px, 4vw, 50px) var(--pad) 0;
}
.c-btns .scribble { font-size: clamp(22px, 2.2vw, 30px); rotate: -3deg; margin-inline: 6px; }
.c-mail {
  text-align: center; padding: clamp(36px, 5vw, 60px) var(--pad) 0;
}
.c-mail .lbl { font-family: var(--cond); font-weight: 700; font-size: 14px; text-transform: uppercase; }
.c-mail a {
  font-family: var(--cond); font-weight: 700; font-size: clamp(17px, 1.8vw, 24px);
  text-transform: none; border-bottom: 2px solid var(--ink);
}
.c-foot {
  text-align: center; padding: clamp(40px, 6vw, 70px) var(--pad) 24px;
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---------- refined case header (vikiland) ---------- */

.vhead { padding: clamp(130px, 18vh, 190px) var(--pad) 0; text-align: center; }
.vhead .v-kick {
  font-family: var(--cond); font-weight: 600; font-size: 12px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gray2);
}
.vhead h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(48px, 8.5vw, 118px);
  text-transform: uppercase; line-height: 1; margin-top: 16px;
}
.vhead .v-rule { width: 44px; height: 1.5px; background: var(--ink); margin: clamp(20px, 3vw, 34px) auto; }
.vhead .v-meta {
  margin-top: clamp(16px, 2.2vw, 28px);
  font-family: var(--cond); font-weight: 500; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; justify-content: center; gap: 10px 46px; flex-wrap: wrap;
}
.vhead .v-meta b {
  font-weight: 600; color: var(--gray2); margin-right: 8px;
  letter-spacing: 0.22em; font-size: 11px;
}

/* key responsibilities */
.kresp { max-width: 860px; margin: 0 auto; padding: clamp(48px, 7vw, 90px) var(--pad) 0; }
.kresp .k-title {
  text-align: center; font-family: var(--cond); font-weight: 600; font-size: 12px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gray2);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.kresp ul { list-style: none; border-top: 1px solid rgba(14, 14, 14, 0.16); }
.kresp li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(14, 14, 14, 0.16);
  font-family: var(--cond); font-size: 14.5px; line-height: 1.55; text-align: left;
}
.kresp li i { font-style: normal; font-family: var(--display); font-size: 12px; color: var(--gray2); padding-top: 3px; }
.kresp li b { font-weight: 600; }
.kresp li span { color: var(--gray2); font-weight: 400; }


/* company line under case H1 + clickable title */
.vhead h1 a { transition: color 0.25s; }
.vhead h1 a:hover { color: var(--gray2); }
.vhead .v-company {
  font-family: var(--cond); font-weight: 600; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray2);
  margin-top: clamp(18px, 2.4vw, 32px);
}
.vhead .v-company a {
  color: var(--ink); border-bottom: 1.5px solid var(--ink);
  padding-bottom: 1px; transition: color 0.25s, border-color 0.25s;
}
.vhead .v-company a:hover { color: var(--gray2); border-color: var(--gray2); }

/* key responsibilities + portrait */
.kresp.kresp-wide { max-width: 1180px; }
.kr-grid {
  display: grid; grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(24px, 3.5vw, 56px); align-items: start;
}
.kr-intro {
  font-family: var(--cond); font-weight: 500; font-size: 15px;
  line-height: 1.6; color: var(--gray2); text-align: left;
  margin-bottom: clamp(16px, 2.4vw, 28px); max-width: 62ch;
}
.kr-intro b { color: var(--ink); font-weight: 600; }
.kr-photo { margin: 0; overflow: hidden; }
.kr-photo img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
  .kr-grid { grid-template-columns: 1fr; }
  .kr-photo { order: -1; margin-bottom: 18px; }
}


/* per-item captions inside project galleries */
.proj figure figcaption {
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray2);
  padding-top: 10px;
}
.proj figure figcaption a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; transition: color .25s, border-color .25s; }
.proj figure figcaption a:hover { color: var(--gray2); border-color: var(--gray2); }
.proj .pfull figcaption { padding-left: var(--pad); padding-right: var(--pad); }
.proj figure a { display: block; }
.proj .vlink { cursor: pointer; }

/* ---------- project gallery: demyanceva rhythm ---------- */

.proj { padding: clamp(80px, 11vw, 150px) var(--pad) 0; }
.proj:last-of-type { padding-bottom: clamp(80px, 10vw, 130px); }
.proj-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: clamp(18px, 3vw, 40px); }
.proj-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.6vw, 52px);
  text-transform: uppercase; line-height: 1;
}

.proj figure { cursor: zoom-in; }
.proj figure img, .proj figure video { overflow: hidden; }
.proj figure img { width: 100%; height: auto; display: block; transition: transform 0.8s var(--ease); }
.proj figure:hover img { transform: scale(1.02); }

/* full-bleed, edge to edge */
.proj .pfull {
  width: calc(100% + var(--pad) * 2);
  margin: clamp(30px, 5vw, 72px) calc(var(--pad) * -1) 0;
}
.proj .proj-head + .pfull { margin-top: 0; }
.pfull img { width: 100%; max-height: 88vh; object-fit: cover; }
.pfull.vid { cursor: default; }
.pfull video { width: 100%; max-height: 88vh; display: block; background: #000; object-fit: cover; }
.pfull figcaption {
  font-family: var(--cond); font-weight: 500; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray2);
  padding: 10px var(--pad) 0;
}

/* two-photo rows: one left, one right, air between */
.srow { display: flex; align-items: flex-start; justify-content: space-between; margin-top: clamp(30px, 5vw, 72px); }
.proj .srow .p-l { margin-right: auto; }
.proj .srow .p-r { margin-left: auto; }
.w30 { width: 30%; } .w52 { width: 52%; } .w54 { width: 54%; }
.proj .drop { margin-top: clamp(30px, 6vw, 110px); }
.proj .drop2 { margin-top: clamp(46px, 9vw, 150px); }

/* centred medium */
.proj .pmid { width: 64%; margin: clamp(30px, 5vw, 72px) auto 0; }

@media (max-width: 760px) {
  .srow { display: block; }
  .proj .srow figure, .proj .pfull, .proj .pmid { width: 100% !important; margin: 18px 0 0 !important; }
  .pmid { width: 100%; }
  .pfull img, .pfull video { max-height: none; }
  .vhead .v-meta { flex-direction: column; gap: 8px; }
}

/* ---------- cream tube cursor · "but first, skincare" along the tube (Playfair, outlined) ---------- */
html, body, a, button, .oval-btn, .dial-item, .proj figure, .prow figure {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2260%22%20height%3D%2242%22%20viewBox%3D%220%200%2060%2042%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22tb%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FCFBFB%22%2F%3E%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22%23F8F3F1%22%2F%3E%3Cstop%20offset%3D%2266%25%22%20stop-color%3D%22%23EBD6D0%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23E0C3BB%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%22translate%287%209%29%20rotate%28-70%29%20scale%281.15%29%22%3E%3Cpath%20d%3D%22M%20-4.8%207.0%20C%20-6.4%2010.4%20-5.2%2013.2%20-6.5%2016.0%20C%20-7.7%2018.7%20-6.1%2021.4%20-7.3%2024.2%20C%20-8.4%2026.8%20-7.0%2029.4%20-8.2%2032.1%20C%20-9.1%2034.2%20-8.4%2036.0%20-9.1%2038.0%20L%209.1%2038.0%20C%208.4%2036.0%209.1%2034.2%208.2%2032.1%20C%207.0%2029.4%208.4%2026.8%207.3%2024.2%20C%206.1%2021.4%207.7%2018.7%206.5%2016.0%20C%205.2%2013.2%206.4%2010.4%204.8%207.0%20Z%22%20fill%3D%22url%28%23tb%29%22%20stroke%3D%22%232B2B2B%22%20stroke-width%3D%221.0%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M%203.2%2021.0%20L%207.2%2022.6%20L%206.6%2027.0%20L%203.4%2025.4%20Z%22%20fill%3D%22%23D3ADA5%22%20opacity%3D%22.32%22%2F%3E%3Cpath%20d%3D%22M%20-6.6%2028.0%20L%20-2.6%2026.6%20L%20-2.2%2030.8%20L%20-6.4%2032.2%20Z%22%20fill%3D%22%23D3ADA5%22%20opacity%3D%22.34%22%2F%3E%3Cpath%20d%3D%22M%20-6.6%2015.6%20L%20-3.6%2016.6%20L%20-4.1%2020.0%20L%20-7.0%2019.0%20Z%22%20fill%3D%22%23CDB8B2%22%20opacity%3D%22.26%22%2F%3E%3Cpath%20d%3D%22M%20-4.0%208.0%20C%20-5.4%2011.0%20-4.4%2013.6%20-5.5%2016.2%20C%20-6.6%2018.8%20-5.3%2021.6%20-6.4%2024.2%20C%20-7.3%2026.6%20-6.3%2029.0%20-7.1%2031.6%20L%20-7.4%2035.6%20L%20-5.6%2035.6%20L%20-5.3%2031.2%20C%20-4.5%2028.8%20-5.6%2026.4%20-4.6%2024.0%20C%20-3.6%2021.4%20-5.0%2018.6%20-4.0%2016.0%20C%20-3.0%2013.4%20-3.8%2010.6%20-2.8%208.0%20Z%22%20fill%3D%22%23FFFFFF%22%20opacity%3D%22.45%22%2F%3E%3Cg%20transform%3D%22translate%280.35%2011.5%29%20rotate%2890%29%22%3E%3Cpath%20d%3D%22M326.0%20-529Q408.0%20-529%20462.0%20-461.5Q516.0%20-394%20516.0%20-257Q516.0%20-167%20485.5%20-106.5Q455.0%20-46%20404.0%20-16.0Q353.0%2014%20293.0%2014Q243.0%2014%20196.5%20-14.5Q150.0%20-43%20127.0%20-99L147.0%20-88Q172.0%20-48%20209.0%20-28.5Q246.0%20-9%20285.0%20-9Q352.0%20-9%20385.5%20-69.5Q419.0%20-130%20419.0%20-257Q419.0%20-338%20406.0%20-392.0Q393.0%20-446%20366.0%20-472.5Q339.0%20-499%20297.0%20-499Q251.0%20-499%20211.5%20-457.5Q172.0%20-416%20163.0%20-336L151.0%20-350Q162.0%20-435%20210.5%20-482.0Q259.0%20-529%20326.0%20-529ZM170.0%20-783V-52Q157.0%20-41%20143.5%20-29.5Q130.0%20-18%20117.0%20-7.0Q104.0%204%2090.0%2016L73.0%209Q77.0%20-5%2078.5%20-19.5Q80.0%20-34%2080.0%20-49V-663Q80.0%20-708%2064.0%20-729.5Q48.0%20-751%204.0%20-751V-772Q36.0%20-769%2066.0%20-769Q95.0%20-769%20121.5%20-772.5Q148.0%20-776%20170.0%20-783ZM1046.0%20-526V-108Q1046.0%20-63%201062.5%20-41.5Q1079.0%20-20%201122.0%20-20V1Q1091.0%20-2%201060.0%20-2Q1031.0%20-2%201004.5%201.0Q978.0%204%20956.0%2012V-106Q931.0%20-41%20885.5%20-13.5Q840.0%2014%20792.0%2014Q757.0%2014%20731.0%204.0Q705.0%20-6%20688.0%20-24Q669.0%20-44%20662.0%20-76.0Q655.0%20-108%20655.0%20-155V-406Q655.0%20-451%20639.0%20-472.5Q623.0%20-494%20579.0%20-494V-515Q611.0%20-512%20641.0%20-512Q670.0%20-512%20696.5%20-515.5Q723.0%20-519%20745.0%20-526V-133Q745.0%20-102%20749.0%20-76.0Q753.0%20-50%20769.0%20-34.0Q785.0%20-18%20821.0%20-18Q860.0%20-18%20890.5%20-42.0Q921.0%20-66%20938.5%20-107.0Q956.0%20-148%20956.0%20-199V-406Q956.0%20-451%20940.0%20-472.5Q924.0%20-494%20880.0%20-494V-515Q912.0%20-512%20942.0%20-512Q971.0%20-512%20997.5%20-515.5Q1024.0%20-519%201046.0%20-526ZM1334.0%20-681V-514H1482.0V-494H1334.0V-107Q1334.0%20-60%201351.0%20-41.0Q1368.0%20-22%201398.0%20-22Q1428.0%20-22%201450.0%20-46.5Q1472.0%20-71%201488.0%20-129L1508.0%20-124Q1498.0%20-66%201468.5%20-26.0Q1439.0%2014%201378.0%2014Q1344.0%2014%201322.0%205.5Q1300.0%20-3%201283.0%20-19Q1261.0%20-42%201252.5%20-74.0Q1244.0%20-106%201244.0%20-159V-494H1148.0V-514H1244.0V-667Q1269.0%20-668%201292.0%20-671.0Q1315.0%20-674%201334.0%20-681ZM2023.0%20-782Q2051.0%20-782%202072.5%20-774.5Q2094.0%20-767%202110.0%20-755Q2125.0%20-743%202133.0%20-727.0Q2141.0%20-711%202141.0%20-693Q2141.0%20-670%202126.0%20-655.0Q2111.0%20-640%202088.0%20-640Q2066.0%20-640%202049.5%20-654.5Q2033.0%20-669%202033.0%20-694Q2033.0%20-715%202044.5%20-728.0Q2056.0%20-741%202075.0%20-745Q2072.0%20-754%202059.5%20-760.5Q2047.0%20-767%202026.0%20-767Q2003.0%20-767%201986.5%20-757.0Q1970.0%20-747%201961.0%20-730Q1949.0%20-709%201946.0%20-667.5Q1943.0%20-626%201943.0%20-540V-514H2050.0V-494H1943.0V-103Q1943.0%20-54%201971.5%20-37.5Q2000.0%20-21%202049.0%20-21V0Q2026.0%20-1%201984.0%20-2.5Q1942.0%20-4%201895.0%20-4Q1861.0%20-4%201827.5%20-2.5Q1794.0%20-1%201777.0%200V-21Q1818.0%20-21%201835.5%20-36.0Q1853.0%20-51%201853.0%20-93V-494H1773.0V-514H1853.0Q1853.0%20-573%201858.0%20-613.0Q1863.0%20-653%201874.0%20-681.5Q1885.0%20-710%201904.0%20-732Q1924.0%20-755%201955.0%20-768.5Q1986.0%20-782%202023.0%20-782ZM2222.0%20-765Q2248.0%20-765%202267.0%20-746.0Q2286.0%20-727%202286.0%20-701Q2286.0%20-675%202267.0%20-656.0Q2248.0%20-637%202222.0%20-637Q2196.0%20-637%202177.0%20-656.0Q2158.0%20-675%202158.0%20-701Q2158.0%20-727%202177.0%20-746.0Q2196.0%20-765%202222.0%20-765ZM2274.0%20-526V-93Q2274.0%20-51%202291.5%20-36.0Q2309.0%20-21%202350.0%20-21V0Q2333.0%20-1%202298.5%20-2.5Q2264.0%20-4%202229.0%20-4Q2195.0%20-4%202160.0%20-2.5Q2125.0%20-1%202108.0%200V-21Q2149.0%20-21%202166.5%20-36.0Q2184.0%20-51%202184.0%20-93V-406Q2184.0%20-451%202168.0%20-472.5Q2152.0%20-494%202108.0%20-494V-515Q2140.0%20-512%202170.0%20-512Q2199.0%20-512%202225.5%20-515.5Q2252.0%20-519%202274.0%20-526ZM2712.0%20-529Q2739.0%20-529%202759.5%20-518.0Q2780.0%20-507%202791.5%20-489.5Q2803.0%20-472%202803.0%20-450Q2803.0%20-425%202787.5%20-406.0Q2772.0%20-387%202746.0%20-387Q2725.0%20-387%202709.0%20-400.5Q2693.0%20-414%202693.0%20-439Q2693.0%20-458%202703.5%20-471.5Q2714.0%20-485%202727.0%20-493Q2720.0%20-503%202706.0%20-503Q2675.0%20-503%202649.0%20-484.5Q2623.0%20-466%202605.0%20-437.0Q2587.0%20-408%202577.0%20-375.5Q2567.0%20-343%202567.0%20-315V-103Q2567.0%20-54%202595.5%20-37.5Q2624.0%20-21%202673.0%20-21V0Q2650.0%20-1%202608.0%20-2.5Q2566.0%20-4%202519.0%20-4Q2485.0%20-4%202451.5%20-2.5Q2418.0%20-1%202401.0%200V-21Q2442.0%20-21%202459.5%20-36.0Q2477.0%20-51%202477.0%20-93V-406Q2477.0%20-451%202461.0%20-472.5Q2445.0%20-494%202401.0%20-494V-515Q2433.0%20-512%202463.0%20-512Q2492.0%20-512%202518.5%20-515.5Q2545.0%20-519%202567.0%20-526V-401Q2578.0%20-430%202598.5%20-459.5Q2619.0%20-489%202648.0%20-509.0Q2677.0%20-529%202712.0%20-529ZM3025.0%20-529Q3065.0%20-529%203093.0%20-516.0Q3121.0%20-503%203134.0%20-492Q3167.0%20-465%203174.0%20-528H3197.0Q3195.0%20-500%203194.0%20-461.5Q3193.0%20-423%203193.0%20-358H3170.0Q3164.0%20-395%203149.5%20-430.0Q3135.0%20-465%203107.0%20-487.5Q3079.0%20-510%203034.0%20-510Q2999.0%20-510%202975.5%20-490.5Q2952.0%20-471%202952.0%20-433Q2952.0%20-403%202970.0%20-381.5Q2988.0%20-360%203017.0%20-341.5Q3046.0%20-323%203080.0%20-301Q3118.0%20-277%203149.0%20-252.0Q3180.0%20-227%203198.5%20-197.0Q3217.0%20-167%203217.0%20-126Q3217.0%20-80%203193.0%20-49.0Q3169.0%20-18%203130.5%20-2.0Q3092.0%2014%203046.0%2014Q3024.0%2014%203004.5%2010.5Q2985.0%207%202967.0%200Q2957.0%20-5%202946.5%20-12.0Q2936.0%20-19%202926.0%20-27Q2916.0%20-35%202908.0%20-26.5Q2900.0%20-18%202896.0%207H2873.0Q2875.0%20-25%202876.0%20-71.0Q2877.0%20-117%202877.0%20-193H2900.0Q2907.0%20-137%202920.0%20-95.0Q2933.0%20-53%202961.0%20-29.5Q2989.0%20-6%203039.0%20-6Q3059.0%20-6%203079.5%20-15.0Q3100.0%20-24%203114.0%20-45.0Q3128.0%20-66%203128.0%20-101Q3128.0%20-145%203096.0%20-173.0Q3064.0%20-201%203015.0%20-232Q2979.0%20-255%202947.5%20-278.0Q2916.0%20-301%202896.5%20-330.0Q2877.0%20-359%202877.0%20-400Q2877.0%20-445%202897.5%20-473.5Q2918.0%20-502%202952.0%20-515.5Q2986.0%20-529%203025.0%20-529ZM3454.0%20-681V-514H3602.0V-494H3454.0V-107Q3454.0%20-60%203471.0%20-41.0Q3488.0%20-22%203518.0%20-22Q3548.0%20-22%203570.0%20-46.5Q3592.0%20-71%203608.0%20-129L3628.0%20-124Q3618.0%20-66%203588.5%20-26.0Q3559.0%2014%203498.0%2014Q3464.0%2014%203442.0%205.5Q3420.0%20-3%203403.0%20-19Q3381.0%20-42%203372.5%20-74.0Q3364.0%20-106%203364.0%20-159V-494H3268.0V-514H3364.0V-667Q3389.0%20-668%203412.0%20-671.0Q3435.0%20-674%203454.0%20-681ZM3744.0%20-114Q3766.0%20-114%203780.0%20-105.0Q3794.0%20-96%203803.0%20-82Q3814.0%20-66%203817.0%20-47.0Q3820.0%20-28%203820.0%20-16Q3820.0%2033%203795.0%2073.0Q3770.0%20113%203717.0%20138L3708.0%20120Q3739.0%20107%203761.5%2079.0Q3784.0%2051%203784.0%2022Q3784.0%2010%203781.0%201Q3765.0%2014%203744.0%2014Q3718.0%2014%203699.0%20-3.0Q3680.0%20-20%203680.0%20-50Q3680.0%20-78%203699.0%20-96.0Q3718.0%20-114%203744.0%20-114Z%22%20transform%3D%22translate%28-0.020%200.000%29%20scale%280.00511%29%22%20fill%3D%22%23141414%22%2F%3E%3Cpath%20d%3D%22M208.0%20-529Q248.0%20-529%20276.0%20-516.0Q304.0%20-503%20317.0%20-492Q350.0%20-465%20357.0%20-528H380.0Q378.0%20-500%20377.0%20-461.5Q376.0%20-423%20376.0%20-358H353.0Q347.0%20-395%20332.5%20-430.0Q318.0%20-465%20290.0%20-487.5Q262.0%20-510%20217.0%20-510Q182.0%20-510%20158.5%20-490.5Q135.0%20-471%20135.0%20-433Q135.0%20-403%20153.0%20-381.5Q171.0%20-360%20200.0%20-341.5Q229.0%20-323%20263.0%20-301Q301.0%20-277%20332.0%20-252.0Q363.0%20-227%20381.5%20-197.0Q400.0%20-167%20400.0%20-126Q400.0%20-80%20376.0%20-49.0Q352.0%20-18%20313.5%20-2.0Q275.0%2014%20229.0%2014Q207.0%2014%20187.5%2010.5Q168.0%207%20150.0%200Q140.0%20-5%20129.5%20-12.0Q119.0%20-19%20109.0%20-27Q99.0%20-35%2091.0%20-26.5Q83.0%20-18%2079.0%207H56.0Q58.0%20-25%2059.0%20-71.0Q60.0%20-117%2060.0%20-193H83.0Q90.0%20-137%20103.0%20-95.0Q116.0%20-53%20144.0%20-29.5Q172.0%20-6%20222.0%20-6Q242.0%20-6%20262.5%20-15.0Q283.0%20-24%20297.0%20-45.0Q311.0%20-66%20311.0%20-101Q311.0%20-145%20279.0%20-173.0Q247.0%20-201%20198.0%20-232Q162.0%20-255%20130.5%20-278.0Q99.0%20-301%2079.5%20-330.0Q60.0%20-359%2060.0%20-400Q60.0%20-445%2080.5%20-473.5Q101.0%20-502%20135.0%20-515.5Q169.0%20-529%20208.0%20-529ZM633.0%20-784V-93Q633.0%20-51%20648.0%20-36.0Q663.0%20-21%20699.0%20-21V0Q683.0%20-1%20651.5%20-2.5Q620.0%20-4%20588.0%20-4Q554.0%20-4%20519.0%20-2.5Q484.0%20-1%20467.0%200V-21Q508.0%20-21%20525.5%20-36.0Q543.0%20-51%20543.0%20-93V-664Q543.0%20-709%20527.0%20-730.5Q511.0%20-752%20467.0%20-752V-773Q499.0%20-770%20529.0%20-770Q558.0%20-770%20584.5%20-773.5Q611.0%20-777%20633.0%20-784ZM951.0%20-515V-495Q926.0%20-493%20904.0%20-481.5Q882.0%20-470%20861.0%20-448L720.0%20-300L734.0%20-328L920.0%20-73Q937.0%20-50%20952.5%20-37.0Q968.0%20-24%20990.0%20-21V0Q979.0%20-1%20955.5%20-2.5Q932.0%20-4%20909.0%20-4Q878.0%20-4%20846.0%20-2.5Q814.0%20-1%20798.0%200V-21Q818.0%20-21%20826.0%20-31.0Q834.0%20-41%20823.0%20-55L708.0%20-223Q689.0%20-250%20673.5%20-258.0Q658.0%20-266%20629.0%20-267V-287Q661.0%20-291%20681.0%20-300.5Q701.0%20-310%20719.0%20-329L793.0%20-406Q825.0%20-439%20825.0%20-458.5Q825.0%20-478%20804.5%20-486.5Q784.0%20-495%20751.0%20-495V-515Q777.0%20-514%20809.5%20-512.5Q842.0%20-511%20864.0%20-511Q881.0%20-511%20897.0%20-511.5Q913.0%20-512%20927.0%20-513.0Q941.0%20-514%20951.0%20-515ZM1140.0%20-765Q1166.0%20-765%201185.0%20-746.0Q1204.0%20-727%201204.0%20-701Q1204.0%20-675%201185.0%20-656.0Q1166.0%20-637%201140.0%20-637Q1114.0%20-637%201095.0%20-656.0Q1076.0%20-675%201076.0%20-701Q1076.0%20-727%201095.0%20-746.0Q1114.0%20-765%201140.0%20-765ZM1192.0%20-526V-93Q1192.0%20-51%201209.5%20-36.0Q1227.0%20-21%201268.0%20-21V0Q1251.0%20-1%201216.5%20-2.5Q1182.0%20-4%201147.0%20-4Q1113.0%20-4%201078.0%20-2.5Q1043.0%20-1%201026.0%200V-21Q1067.0%20-21%201084.5%20-36.0Q1102.0%20-51%201102.0%20-93V-406Q1102.0%20-451%201086.0%20-472.5Q1070.0%20-494%201026.0%20-494V-515Q1058.0%20-512%201088.0%20-512Q1117.0%20-512%201143.5%20-515.5Q1170.0%20-519%201192.0%20-526ZM1655.0%20-529Q1693.0%20-529%201718.5%20-519.0Q1744.0%20-509%201761.0%20-491Q1780.0%20-471%201788.0%20-441.0Q1796.0%20-411%201796.0%20-360V-93Q1796.0%20-51%201813.5%20-36.0Q1831.0%20-21%201872.0%20-21V0Q1855.0%20-1%201820.0%20-2.5Q1785.0%20-4%201752.0%20-4Q1719.0%20-4%201687.5%20-2.5Q1656.0%20-1%201640.0%200V-21Q1676.0%20-21%201691.0%20-36.0Q1706.0%20-51%201706.0%20-93V-382Q1706.0%20-413%201701.0%20-439.0Q1696.0%20-465%201678.5%20-481.0Q1661.0%20-497%201625.0%20-497Q1583.0%20-497%201551.5%20-473.0Q1520.0%20-449%201502.5%20-407.5Q1485.0%20-366%201485.0%20-315V-93Q1485.0%20-51%201500.0%20-36.0Q1515.0%20-21%201551.0%20-21V0Q1535.0%20-1%201503.5%20-2.5Q1472.0%20-4%201439.0%20-4Q1406.0%20-4%201371.0%20-2.5Q1336.0%20-1%201319.0%200V-21Q1360.0%20-21%201377.5%20-36.0Q1395.0%20-51%201395.0%20-93V-406Q1395.0%20-451%201379.0%20-472.5Q1363.0%20-494%201319.0%20-494V-515Q1351.0%20-512%201381.0%20-512Q1410.0%20-512%201436.5%20-515.5Q1463.0%20-519%201485.0%20-526V-408Q1511.0%20-476%201557.5%20-502.5Q1604.0%20-529%201655.0%20-529ZM2166.0%20-529Q2198.0%20-529%202228.0%20-521.0Q2258.0%20-513%202282.0%20-497Q2305.0%20-482%202317.0%20-462.5Q2329.0%20-443%202329.0%20-420Q2329.0%20-393%202314.0%20-378.5Q2299.0%20-364%202276.0%20-364Q2254.0%20-364%202237.5%20-377.0Q2221.0%20-390%202221.0%20-414Q2221.0%20-437%202233.5%20-451.0Q2246.0%20-465%202263.0%20-469Q2253.0%20-487%202227.5%20-499.0Q2202.0%20-511%202173.0%20-511Q2148.0%20-511%202123.0%20-499.0Q2098.0%20-487%202077.0%20-459.5Q2056.0%20-432%202043.0%20-384.5Q2030.0%20-337%202030.0%20-266Q2030.0%20-178%202050.0%20-126.0Q2070.0%20-74%202102.5%20-51.5Q2135.0%20-29%202174.0%20-29Q2200.0%20-29%202227.0%20-39.0Q2254.0%20-49%202278.0%20-71.5Q2302.0%20-94%202319.0%20-132L2338.0%20-125Q2328.0%20-93%202305.0%20-60.5Q2282.0%20-28%202245.0%20-7.0Q2208.0%2014%202154.0%2014Q2092.0%2014%202042.0%20-18.0Q1992.0%20-50%201962.5%20-109.5Q1933.0%20-169%201933.0%20-251Q1933.0%20-333%201962.5%20-395.5Q1992.0%20-458%202045.0%20-493.5Q2098.0%20-529%202166.0%20-529ZM2544.0%207Q2503.0%207%202473.0%20-8.5Q2443.0%20-24%202427.5%20-52.0Q2412.0%20-80%202412.0%20-117Q2412.0%20-161%202432.5%20-189.0Q2453.0%20-217%202485.0%20-234.0Q2517.0%20-251%202552.5%20-262.5Q2588.0%20-274%202620.0%20-284.5Q2652.0%20-295%202672.5%20-309.0Q2693.0%20-323%202693.0%20-346V-408Q2693.0%20-450%202680.5%20-472.0Q2668.0%20-494%202647.0%20-501.5Q2626.0%20-509%202600.0%20-509Q2575.0%20-509%202546.5%20-502.0Q2518.0%20-495%202501.0%20-473Q2520.0%20-469%202534.0%20-453.0Q2548.0%20-437%202548.0%20-412Q2548.0%20-387%202532.0%20-372.5Q2516.0%20-358%202491.0%20-358Q2462.0%20-358%202448.5%20-376.5Q2435.0%20-395%202435.0%20-418Q2435.0%20-444%202448.0%20-460.0Q2461.0%20-476%202481.0%20-490Q2504.0%20-506%202540.5%20-517.5Q2577.0%20-529%202623.0%20-529Q2664.0%20-529%202693.0%20-519.5Q2722.0%20-510%202741.0%20-492Q2767.0%20-468%202775.0%20-433.5Q2783.0%20-399%202783.0%20-351V-73Q2783.0%20-48%202790.5%20-37.0Q2798.0%20-26%202814.0%20-26Q2825.0%20-26%202835.0%20-31.0Q2845.0%20-36%202859.0%20-47L2870.0%20-30Q2849.0%20-14%202830.0%20-3.5Q2811.0%207%202779.0%207Q2750.0%207%202731.0%20-3.0Q2712.0%20-13%202702.5%20-32.5Q2693.0%20-52%202693.0%20-82Q2666.0%20-37%202628.5%20-15.0Q2591.0%207%202544.0%207ZM2580.0%20-33Q2613.0%20-33%202641.5%20-52.0Q2670.0%20-71%202693.0%20-109V-305Q2681.0%20-288%202658.0%20-276.5Q2635.0%20-265%202608.0%20-253.5Q2581.0%20-242%202556.5%20-226.5Q2532.0%20-211%202516.0%20-186.0Q2500.0%20-161%202500.0%20-121Q2500.0%20-81%202521.5%20-57.0Q2543.0%20-33%202580.0%20-33ZM3211.0%20-529Q3238.0%20-529%203258.5%20-518.0Q3279.0%20-507%203290.5%20-489.5Q3302.0%20-472%203302.0%20-450Q3302.0%20-425%203286.5%20-406.0Q3271.0%20-387%203245.0%20-387Q3224.0%20-387%203208.0%20-400.5Q3192.0%20-414%203192.0%20-439Q3192.0%20-458%203202.5%20-471.5Q3213.0%20-485%203226.0%20-493Q3219.0%20-503%203205.0%20-503Q3174.0%20-503%203148.0%20-484.5Q3122.0%20-466%203104.0%20-437.0Q3086.0%20-408%203076.0%20-375.5Q3066.0%20-343%203066.0%20-315V-103Q3066.0%20-54%203094.5%20-37.5Q3123.0%20-21%203172.0%20-21V0Q3149.0%20-1%203107.0%20-2.5Q3065.0%20-4%203018.0%20-4Q2984.0%20-4%202950.5%20-2.5Q2917.0%20-1%202900.0%200V-21Q2941.0%20-21%202958.5%20-36.0Q2976.0%20-51%202976.0%20-93V-406Q2976.0%20-451%202960.0%20-472.5Q2944.0%20-494%202900.0%20-494V-515Q2932.0%20-512%202962.0%20-512Q2991.0%20-512%203017.5%20-515.5Q3044.0%20-519%203066.0%20-526V-401Q3077.0%20-430%203097.5%20-459.5Q3118.0%20-489%203147.0%20-509.0Q3176.0%20-529%203211.0%20-529ZM3588.0%20-529Q3676.0%20-529%203725.5%20-475.5Q3775.0%20-422%203775.0%20-309H3422.0L3421.0%20-328H3679.0Q3681.0%20-377%203671.0%20-418.5Q3661.0%20-460%203639.5%20-485.0Q3618.0%20-510%203584.0%20-510Q3538.0%20-510%203502.5%20-464.0Q3467.0%20-418%203460.0%20-318L3463.0%20-314Q3461.0%20-299%203460.0%20-281.0Q3459.0%20-263%203459.0%20-245Q3459.0%20-177%203481.0%20-128.0Q3503.0%20-79%203538.5%20-53.5Q3574.0%20-28%203612.0%20-28Q3642.0%20-28%203669.0%20-37.5Q3696.0%20-47%203719.0%20-69.0Q3742.0%20-91%203759.0%20-128L3779.0%20-120Q3768.0%20-87%203743.0%20-56.0Q3718.0%20-25%203680.0%20-5.5Q3642.0%2014%203592.0%2014Q3520.0%2014%203468.5%20-19.0Q3417.0%20-52%203389.5%20-110.5Q3362.0%20-169%203362.0%20-245Q3362.0%20-333%203390.0%20-396.5Q3418.0%20-460%203469.0%20-494.5Q3520.0%20-529%203588.0%20-529Z%22%20transform%3D%22translate%281.107%204.250%29%20scale%280.00524%29%22%20fill%3D%22%23141414%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M%20-9.1%2038.0%20L%209.1%2038.0%20L%209.5%2042.6%20L%20-9.5%2042.6%20Z%22%20fill%3D%22%23EAD7D2%22%20stroke%3D%22%232B2B2B%22%20stroke-width%3D%221.0%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20stroke%3D%22%23B99C95%22%20stroke-width%3D%220.6%22%3E%3Cpath%20d%3D%22M%20-7.4%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%20-5.2%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%20-3.0%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%20-0.8%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%201.4%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%203.6%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%205.8%2038.5%20v3.5%22%2F%3E%3Cpath%20d%3D%22M%207.8%2038.5%20v3.5%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M%20-5.0%205.6%20h%2010%20v%201.6%20h%20-10%20z%22%20fill%3D%22%23F2EDEB%22%20stroke%3D%22%232B2B2B%22%20stroke-width%3D%220.9%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M%20-4.3%20-0.6%20h%208.6%20a%201.3%201.3%200%200%201%201.3%201.3%20v%205.0%20h%20-11.2%20v%20-5.0%20a%201.3%201.3%200%200%201%201.3%20-1.3%20z%22%20fill%3D%22%23F4F3F4%22%20stroke%3D%22%232B2B2B%22%20stroke-width%3D%221.0%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cg%20stroke%3D%22%23B9B7BA%22%20stroke-width%3D%220.58%22%3E%3Cpath%20d%3D%22M%20-2.9%200.5%20v4.1%22%2F%3E%3Cpath%20d%3D%22M%20-1.0%200.5%20v4.1%22%2F%3E%3Cpath%20d%3D%22M%200.9%200.5%20v4.1%22%2F%3E%3Cpath%20d%3D%22M%202.8%200.5%20v4.1%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 9, auto;
}
@media (pointer: coarse) {
  html, body, a, button, .proj figure { cursor: auto; }
}

/* ---------- reveal ---------- */

.fade { opacity: 0; transition: opacity 1s ease; }
.fade.in { opacity: 1; }
.rise { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rise.in { opacity: 1; transform: none; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(255, 255, 255, 0.96);
  display: none; align-items: center; justify-content: center;
}
.lightbox.on { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; }
.lightbox button {
  position: absolute; background: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 15px; color: var(--ink);
  text-transform: uppercase; padding: 16px;
}
.lightbox .lb-close { top: 8px; right: 12px; font-size: 24px; }
.lightbox .lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-count {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-size: 12px; color: var(--gray2);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .w-38, .w-58, .w-46, .w-50 { width: 100%; }
  .about-cols, .c-cols { grid-template-columns: 1fr; gap: 28px; }
  .vrow { grid-template-columns: 1fr; }
  .hdr-c { font-size: 15px; }
  .hdr-l, .hdr-r { font-size: 11px; gap: 10px; }
  .slider-title { left: clamp(56px, 14vw, 90px); max-width: 70vw; }
  .strip img { height: clamp(300px, 48vh, 480px); }
  .edu-cols { grid-template-columns: 1fr; }
  .prow { flex-direction: column; }
  .prow figure { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade, .rise { opacity: 1; transform: none; transition: none; }
}

/* ---------- sub-section label inside a case ---------- */
.psub {
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--gray2);
  margin: clamp(46px, 7vw, 96px) 0 0;
  display: flex; align-items: center; gap: 16px;
}
.psub::after { content: ""; flex: 1; height: 1px; background: var(--gray); opacity: .6; }
.proj .psub + .pfull { margin-top: clamp(22px, 3vw, 34px); }

/* ---------- click-to-play video (keeps the page light) ---------- */
.proj figure.vlazy { position: relative; cursor: pointer; }
.proj figure.vlazy video { width: 100%; display: block; background: #000; }
.vplay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: opacity .35s ease;
}
.vplay::before {
  content: ""; width: clamp(54px, 6vw, 82px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 40px rgba(0,0,0,.28);
  transition: transform .35s var(--ease);
}
.vplay::after {
  content: ""; position: absolute;
  border-style: solid; border-width: clamp(9px,1vw,13px) 0 clamp(9px,1vw,13px) clamp(15px,1.7vw,22px);
  border-color: transparent transparent transparent var(--ink);
  margin-left: clamp(4px,.5vw,6px);
}
.proj figure.vlazy:hover .vplay::before { transform: scale(1.08); }
.proj figure.vlazy.playing .vplay { opacity: 0; pointer-events: none; }
.proj figure.vlazy .vhint {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
  font-family: var(--cond); font-weight: 500; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.6); pointer-events: none;
}
.proj figure.vlazy.playing .vhint { opacity: 0; }

/* ---------- lightbox: hi-res viewer ---------- */
.lightbox { background: rgba(255,255,255,.985); cursor: zoom-out; }
.lightbox img { max-width: 94vw; max-height: 84vh; cursor: default; opacity: 1; transition: opacity .25s ease; }
.lightbox.loading img { opacity: .25; }
.lightbox .lb-cap {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gray2);
  max-width: 80vw; text-align: center;
}
.lightbox .lb-spin {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--gray); border-top-color: var(--ink);
  animation: lbspin .7s linear infinite; opacity: 0; transition: opacity .2s;
}
.lightbox.loading .lb-spin { opacity: 1; }
@keyframes lbspin { to { transform: rotate(360deg); } }

/* ---------- two-role key responsibilities ---------- */
.kresp.kresp-two { max-width: 1240px; }
.kr-two {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4.5vw, 76px); align-items: start;
}
.kr-col .kr-role {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(17px, 1.6vw, 23px); text-transform: uppercase;
  line-height: 1.1; text-align: left;
}
.kr-col .kr-period {
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray2);
  margin-top: 7px; text-align: left;
}
.kr-col .kr-intro {
  font-family: var(--cond); font-weight: 400; font-size: 14.5px; line-height: 1.6;
  color: var(--gray2); text-align: left; margin: 16px 0 4px;
}
.kr-col ul { margin-top: 12px; }
.kr-col .kr-nums { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.kr-col .kr-nums div { text-align: left; }
.kr-col .kr-nums b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1;
}
.kr-col .kr-nums span {
  display: block; font-family: var(--cond); font-weight: 500; font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray2);
  margin-top: 6px; max-width: 13em;
}
.kresp-two .kr-photo { max-width: 360px; margin: clamp(44px, 6vw, 80px) auto 0; }
.kresp-two .kr-photo img { width: 100%; height: auto; display: block; }
.kresp-two .kr-photo figcaption {
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gray2);
  padding-top: 10px; text-align: center;
}
@media (max-width: 860px) {
  .kr-two { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- Vimeo facade (video lives on Vimeo, page stays light) ---------- */
.proj figure.vmo { position: relative; cursor: pointer; }
.proj figure.vmo .vmo-frame { position: relative; width: 100%; overflow: hidden; background: #000; }
.proj figure.vmo .vmo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj figure.vmo .vmo-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.proj figure.vmo.playing .vplay, .proj figure.vmo.playing .vhint { opacity: 0; pointer-events: none; }
.proj .pfull.vmo .vmo-frame { max-height: 88vh; }
.proj .pfull.vmo .vmo-frame img { max-height: 88vh; }

/* ---------- do not crop: show the whole frame ---------- */
.proj .nocrop img, .proj .nocrop video, .proj .nocrop .vmo-frame img {
  max-height: none; object-fit: contain; height: auto;
}
.proj .pfull.nocrop .vmo-frame { max-height: none; }

/* ---------- handwritten hint next to a caption ---------- */
.proj figcaption .hint {
  font-family: var(--script); font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 17px; color: var(--gray2);
  margin-left: 12px; border: 0; vertical-align: -1px;
}

/* ---------- две колонки обязанностей: строки выровнены между колонками ---------- */
@media (min-width: 861px) {
  .kr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 4.5vw, 76px); align-items: start; }
  .kr-col { display: contents; }
  .kr-col .kr-role   { grid-row: 1; }
  .kr-col .kr-period { grid-row: 2; }
  .kr-col .kr-intro  { grid-row: 3; }
  .kr-col ul         { grid-row: 4; align-self: stretch; }
  .kr-col .kr-nums   { grid-row: 5; padding-top: 24px; }
}

/* ---------- «press to explore» под видео ---------- */
.proj figure .explore {
  display: block; margin-top: 8px;
  font-family: var(--script); font-weight: 600; font-size: 19px;
  color: var(--gray2); text-transform: none; letter-spacing: 0;
}
.proj .pfull .explore, .proj .pfull figcaption .explore { padding-left: 0; }
.proj figure:hover .explore { color: var(--ink); }

/* ---------- одиночные блоки вне строки: тот же ритм, что у .pmid ---------- */
.proj > figure.w22, .proj > figure.w30, .proj > figure.w52, .proj > figure.w54 {
  margin: clamp(30px, 5vw, 72px) auto 0;
}
.w22 { width: 22%; }
@media (max-width: 760px) { .w22 { width: 100%; } }

/* ---------- About Me: рукописный заголовок вместо гиганта ---------- */
.giant.script {
  font-family: var(--script); font-weight: 600;
  font-size: clamp(52px, 9vw, 130px);
  text-transform: none; line-height: 1; letter-spacing: 0;
}

/* ---------- цифры под обязанностями: ровная сетка 2×2 ---------- */
@media (min-width: 861px) {
  .kr-col .kr-nums {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px clamp(18px, 2vw, 34px);
  }
  .kr-col .kr-nums span { max-width: none; }
}
/* ---------- жёлтый заголовок ---------- */
.giant.yellow { color: var(--yellow); }
.giant.rose   { color: var(--rose); }

/* ---------- contacts: симметрия и вертикальное центрирование ---------- */
.contacts-page main {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(70px, 9vh, 110px) clamp(20px, 4vh, 44px);
}
.contacts-page .c-cols {
  grid-template-columns: 1fr 1.05fr 1fr;
  align-items: center;
  padding-top: 0;
}
.contacts-page .c-col-t {
  font-size: clamp(18px, 1.9vw, 28px);
  line-height: 1.25;
  max-width: 19ch; margin-inline: auto; text-wrap: balance;
}
.contacts-page .c-col-mid { max-width: 46ch; margin-inline: auto; }
.contacts-page .c-cap {
  display: block; margin-top: 10px;
  font-family: var(--cond); font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gray2);
}
.contacts-page .c-foot { padding-bottom: 0; }
@media (max-width: 900px) {
  .contacts-page main { min-height: 0; display: block; padding-block: 110px 40px; }
  .contacts-page .c-col-t { max-width: none; }
}

/* ---------- переходы между кейсами: назад и вперёд ---------- */
.next {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(20px, 4vw, 60px);
}
.next .nav-prev { text-align: left; }
.next .nav-next { text-align: right; margin-left: auto; }
.next a { font-size: clamp(24px, 4.4vw, 62px); }
@media (max-width: 760px) {
  .next { flex-direction: column; gap: 34px; }
  .next .nav-next { text-align: left; margin-left: 0; }
}

/* розовый акцент в тексте (цвет тюбика курсора, затемнён до читаемого) */
.c-accent { color: var(--rose-deep); }

.contacts-page .c-col-mid p + p { margin-top: 1.15em; }
.contacts-page .c-mid-2 { color: var(--gray2); letter-spacing: 0.06em; }

/* ---------- About Me: биография спокойным текстом ---------- */
.bio {
  max-width: 74ch; margin-inline: auto;
  padding: clamp(34px, 5vw, 66px) var(--pad) 0;
  font-family: var(--cond); font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.8; color: var(--ink);
  text-align: left; text-wrap: pretty;
}
.bio p + p { margin-top: 1.2em; }
.bio .lead {
  font-weight: 400; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6;
}
.bio .bio-open { color: var(--rose-deep); font-weight: 400; }

/* блок Education внутри About Me */
.edu-block { max-width: 860px; margin-inline: auto; padding: clamp(46px, 7vw, 86px) var(--pad) 0; }
.edu-block .k-title {
  text-align: center; font-family: var(--cond); font-weight: 600; font-size: 12px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--gray2);
  margin-bottom: clamp(18px, 3vw, 30px);
}
.edu-block .alist { padding-top: 0; }