/* Fonts subset to Latin + Cyrillic (WOFF2, from the .otf/.ttf originals) */
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Thin.woff2?v=2c185e78") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Light.woff2?v=7a85812d") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Regular.woff2?v=a5c09645") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Book.woff2?v=d1a8536c") format("woff2");
  font-weight: 450;
  font-display: swap;
}
@font-face {
  font-family: "Constantine";
  src: url("fonts/Constantine.woff2?v=e85e7505") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #fffbf6;
  --ink: #1b100e;
  --page-w: 1200px;
}

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

/* Native smooth scrolling only when Lenis is off (reduced motion) — the two fight */
html:not(.lenis) {
  scroll-behavior: smooth;
}

/* Lenis smooth scroll (vendor/lenis.min.js) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Suisse Intl", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* Full-width backgrounds and torn edges reach past the window; clip (not
   hidden) so nothing can scroll sideways and body never becomes a scroller. */
html,
body {
  overflow-x: clip;
}

p,
h2,
h3,
figure {
  margin: 0;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

/* Desktop frame — the 1200px artboard, scaled to the window width from
   1024px up (main.js sets --k). */
.page {
  position: relative;
  width: var(--page-w);
  margin: 0 auto;
  zoom: var(--k, 1);
}

/* Full-width background: spans the side margins on wide screens */
.bleed {
  left: calc(-1 * var(--bleed, 0px));
  right: calc(-1 * var(--bleed, 0px));
}

/* Torn paper edges (inline SVG, see index.html) */
.edge {
  position: absolute;
  display: block;
  left: calc(-1 * var(--bleed, 0px) - 8px);
  width: calc(100% + 2 * var(--bleed, 0px) + 16px);
  overflow: visible;
}

.section {
  position: relative;
}

/* Absolutely placed box: --x / --y / --w / --h */
.abs {
  position: absolute;
  left: var(--x, 0);
  top: var(--y, 0);
  width: var(--w, auto);
  height: var(--h, auto);
}


/* ---------- typography ---------- */
.logo {
  font-family: "Constantine", serif;
  font-size: 20.387px;
  line-height: 0.91;
  letter-spacing: 27.9308px;
  text-transform: lowercase;
  color: var(--paper);
  white-space: nowrap;
}

/* Section titles: "обо мне", "проекты" */
.label-lg {
  font-weight: 450;
  font-size: 30.769px;
  line-height: 1.1;
  letter-spacing: -0.6154px;
  opacity: 0.5;
  white-space: nowrap;
}

/* Small titles: "виды услуг", "контакты" */
.label {
  font-weight: 450;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: -0.24px;
  white-space: nowrap;
}

.body-text {
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: -0.26px;
}

.text-thin {
  font-weight: 100;
  font-size: 13px;
  line-height: 1.1;
  letter-spacing: -0.26px;
}

/* ---------- hero ---------- */
/* Two photos side by side (Figma "5 copy 4" and "11 1"); the paper of the
   about block starts at 492 with a torn edge. Pinned while the about block
   (paper, above it) scrolls up over the photos. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 530px;
}

.hero__photos {
  position: absolute;
  z-index: 0; /* keeps the photos' own layering under the menu and quote */
  left: 0;
  top: 0;
  width: 100%;
  height: 497px;
}
.hero__photo {
  position: absolute;
  overflow: hidden;
}
.hero__photo img {
  position: absolute;
  max-width: none;
}
/* Figma crops. The left photo lies over the right one's light border. */
.hero__photo--left {
  z-index: 1;
  left: -2px;
  top: 0;
  width: 799px;
  height: 497px;
}
.hero__photo--left img {
  left: -0.02%;
  top: -11.64%;
  width: 103.81%;
  height: 132.37%;
}
.hero__photo--right {
  left: 788px;
  top: -14px;
  width: 447px;
  height: 511px;
}
.hero__photo--right img {
  left: 0;
  top: 0;
  width: 100%;
  height: 122.74%;
}

.about {
  z-index: 1;
  background: var(--paper);
}
/* Torn top edge of the paper: the paper starts at 492 (38px above the block) */
.about__edge {
  top: -44px;
}

/* ---------- first-screen menu (Figma 961:842) ---------- */
.nav__logo {
  position: absolute;
  left: 449px;
  top: 24px;
  color: var(--paper);
  text-shadow: 0 0 10px rgba(27, 16, 14, 0.3);
}

.nav__links,
.site-header__links {
  display: flex;
  justify-content: space-between;
  width: 304px;
  font-weight: 100;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.52px;
  white-space: nowrap;
}
.nav__links {
  position: absolute;
  left: 449px;
  top: 55px;
  color: var(--paper);
  text-shadow: 0 0 10px rgba(27, 16, 14, 0.3);
}

.nav__links a {
  transition: opacity 0.2s ease;
}
.hero-menu a:hover {
  opacity: 0.6;
}

.hero__quote {
  position: absolute;
  left: 0;
  top: 370px;
  width: 100%;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.26px;
  text-align: center;
  white-space: nowrap;
  color: var(--paper);
  text-shadow: 0 0 10px rgba(27, 16, 14, 0.3);
}

/* The hero menu fades with the scroll position (--hero-menu-o from main.js);
   the fixed menu only fades in once it has reached zero. */
.hero-menu {
  opacity: var(--hero-menu-o, 1);
}
.menu-compact .hero-menu {
  pointer-events: none;
}

/* ---------- fixed menu: same layout and place as the hero menu ---------- */
.site-header {
  position: fixed;
  top: 24px;
  left: calc(var(--bleed, 0px) + 449px); /* on the centred artboard */
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--paper);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.menu-compact .site-header {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s linear 0s;
}
.menu-compact .site-header a {
  pointer-events: auto;
}
.site-header a {
  transition: opacity 0.2s ease;
}
.site-header a:hover {
  opacity: 0.6;
}

.site-header__logo {
  align-self: flex-start;
  font-family: "Constantine", serif;
  font-size: 20.387px;
  line-height: 0.91;
  letter-spacing: 27.9308px;
  margin-right: -27.9308px; /* no trailing space after the last letter, so the menu centres on its letters */
  text-transform: lowercase;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}

/* Paper strip behind the fixed menu — below 1024px only (see the end of the file) */
.site-header__backdrop {
  display: none;
}

.footer-logo-visible .site-header .site-header__logo {
  opacity: 0;
  pointer-events: none;
}

/* ---------- opening animation ----------
   html.js-intro  — set in <head>: start states
   html.intro-play — set by main.js once the photos and fonts are ready
   js-intro is removed when it's over, so the regular styles take back over. */
.hero-intro {
  display: none;
}
/* Wider than the screen so the tilt never uncovers a corner; the shadow
   under the lifting edge sells the thickness of the paper. */
.js-intro .hero-intro {
  display: block;
  position: absolute;
  z-index: 2;
  top: -40px;
  left: calc(-1 * var(--bleed, 0px) - 10%);
  right: calc(-1 * var(--bleed, 0px) - 10%);
  height: 800px;
  background: var(--paper);
  transform-origin: 25% 0;
  filter: drop-shadow(0 10px 16px rgba(27, 16, 14, 0.22));
}
.hero-intro__edge {
  position: absolute;
  top: calc(100% - 36px);
  left: -8px;
  width: calc(100% + 16px);
  overflow: visible;
}
/* Torn off: a short tug, then it rips away upwards in one smooth pull */
.intro-play .hero-intro {
  animation: paper-tear 1.05s 0.05s both;
}
@keyframes paper-tear {
  0% {
    transform: none;
    animation-timing-function: cubic-bezier(0.33, 0, 0.4, 1);
  }
  18% {
    transform: translateY(-1.2%) rotate(-0.4deg);
    animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4);
  }
  100% {
    transform: translateY(-122%) rotate(-3deg);
  }
}

/* Photos settle from a closer view, each inside its own frame */
.js-intro .hero__photo img {
  scale: 1.14;
  transition: scale 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.intro-play .hero__photo img {
  scale: 1;
}

/* PLATONOV letter by letter (spans from main.js), then the links and the quote */
.nav__logo .ch {
  display: inline-block;
}
.js-intro .nav__logo .ch {
  opacity: 0;
  translate: 0 10px;
  filter: blur(6px);
  transition:
    opacity 0.7s ease,
    translate 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s ease;
  transition-delay: calc(0.7s + var(--i) * 60ms);
}
.js-intro .nav__links a {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.6s ease,
    translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(1.1s + var(--i) * 80ms);
}
.js-intro .hero__quote {
  opacity: 0;
  translate: 0 8px;
  transition:
    opacity 0.8s ease 1.45s,
    translate 1s cubic-bezier(0.16, 1, 0.3, 1) 1.45s;
}
.intro-play .nav__logo .ch,
.intro-play .nav__links a,
.intro-play .hero__quote {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

/* The photo card is on the first screen, so it settles with the opening
   instead of on scroll */
.js-intro .about__card {
  opacity: 0;
  transform: perspective(1100px) translateY(80px) rotateX(35deg) rotateZ(-5deg) skewX(2deg);
  transition:
    opacity 0.7s ease 0.75s,
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.75s;
}
.intro-play .about__card {
  opacity: 1;
  transform: none;
}

/* ---------- about ---------- */
/* Artboard 530–1738 */
.about {
  height: 1208px;
}

.about__label {
  position: absolute;
  left: 20px;
  top: 20px;
}

.about__text {
  position: absolute;
  left: 214px;
  width: 384px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.about__text--1 { top: 86px; }
.about__text--2 { top: 576px; }

.about__motto {
  position: absolute;
  left: 214px;
  top: 798px;
}

/* Collage pieces: Figma renders on the paper colour, darken drops the paper */
.about__piece {
  position: absolute;
  mix-blend-mode: darken;
}
.about__card {
  left: 703px;
  top: 16px;
  width: 480.5px;
  height: 635.5px;
}
.about__sketch {
  left: 0;
  top: 319px;
  width: 643px;
  height: 211px;
}
.about__childhood {
  left: 522px;
  top: 824px;
  width: 232px;
  height: 279px;
}

/* Paper pieces: --p (0 → 1, set by main.js on scroll) takes them from bent and
   tilted back to their resting pose from the design. Without JS --p stays 1. */
.paper {
  --q: calc(1 - var(--p, 1));
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform:
    perspective(1100px)
    translateY(calc(var(--q) * var(--shift, 0px)))
    rotateX(calc(var(--q) * var(--tilt, 0deg)))
    rotateZ(calc(var(--q) * var(--rot, 0deg)))
    skewX(calc(var(--q) * var(--rot, 0deg) * -0.4));
  will-change: transform;
}

/* ---------- projects ---------- */
/* Artboard 1738–4732: "проекты" at 1758, rows of 360 from 1852 */
.projects {
  padding-top: 114px;
}

.projects__label {
  position: absolute;
  left: 19px;
  top: 20px;
}

.project-row {
  position: relative;
  height: 360px;
}

.project-row__title {
  position: absolute;
  left: 21px;
  top: 38px;
  width: var(--tw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.1;
}
/* Figma 970:1312 …: project names in Constantine, 70% ink */
.project-row__name {
  font-family: "Constantine", serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 2.4px;
  opacity: 0.7;
}
.project-row__more {
  font-weight: 100;
  font-size: 13px;
  letter-spacing: -0.26px;
}

.project-row__photos {
  position: absolute;
  left: 405px;
  top: 20px;
  display: flex;
  gap: 10px;
}

/* Two layers: the torn grayscale photo (static SVG filter, rendered once) and
   a clean colour copy on top that fades in while the row is hovered — only
   opacity animates, so it stays smooth on large screens. */
.project-photo {
  position: relative;
  flex: none;
  width: calc(var(--w) * 1px);
  height: 320px;
}
.project-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The selected row straightens out completely: the clean copy fades in and
   the torn one (whose ragged edges stick out past the photo) fades away. */
.project-photo img {
  transition: opacity 0.48s cubic-bezier(0.33, 0, 0.2, 1) var(--d, 0s);
}
.project-photo:nth-child(2) { --d: 0.06s; }
.project-photo:nth-child(3) { --d: 0.12s; }
.project-photo__torn {
  filter: url(#tex-photo) grayscale(1);
}
.project-photo__clean {
  opacity: 0;
}

.project-row:hover .project-photo__clean {
  opacity: 1;
}
.project-row:hover .project-photo__torn {
  opacity: 0;
}

/* ---------- services ---------- */
/* Artboard from 4732: "виды услуг" at 4825, the list at 4974, the paper
   with the chosen service's description at 5062 (Figma 970:1285), the same
   distance above the contacts block as below the list. */
.services {
  /* paper 74px under the list and 74px above the contacts (the card box has
     3px of torn margin around the paper itself) */
  padding: 327px 0 71px;
}

.services__label {
  position: absolute;
  left: 20px;
  top: 93px;
}

.services__list {
  position: absolute;
  top: 242px;
  left: 589px;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  white-space: nowrap;
}

.services__list button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s ease;
}
.services__list button:hover {
  text-decoration-color: rgba(27, 16, 14, 0.35);
}
.services__list button[aria-selected="true"] {
  text-decoration-color: currentColor;
}
.services__list button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Tracing paper (Figma render, 2×): the torn edges and corners stay as they
   are, only the middle stretches. All descriptions share one grid cell, so
   the paper is always as tall as the longest one and nothing below moves.
   It stays hidden (space kept) until a service is chosen. */
.services__card {
  position: relative;
  display: grid;
  width: 530.5px;
  min-height: 156px;
  margin-left: 324px;
  padding: 18px; /* 15px from the paper's edge on every side */
  border: 0 solid transparent;
  border-image: url("assets/home/services-card.jpg?v=3b505de4") 60 fill / 30px stretch;
  mix-blend-mode: darken;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}
.services.has-choice .services__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.services__detail {
  grid-area: 1 / 1;
  line-height: 1.3;
  mix-blend-mode: darken; /* the text sits into the paper */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.services__detail.is-active {
  opacity: 0.75;
  visibility: visible;
  transition: opacity 0.35s ease 0.15s, visibility 0s linear 0s;
}
.services__detail p + p,
.services__detail ul + p {
  margin-top: 10px;
}
.services__subhead {
  margin-top: 14px !important;
}
.services__detail ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.services__detail li {
  position: relative;
  padding-left: 14px;
}
.services__detail li::before {
  content: "—";
  position: absolute;
  left: 0;
}
.services__result {
  margin-top: 14px !important;
}

@media (prefers-reduced-motion: reduce) {
  .services__card,
  .services__detail {
    transition: none;
  }
}

/* ---------- contacts ---------- */
.contacts {
  height: 519px;
  color: var(--paper);
}

.contacts__backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--ink);
}

/* Figma 970:1403: the photo in full colour, a 1359×858 frame from 80px
   left of the block, cropped by it at the bottom */
.contacts__bg {
  position: absolute;
  top: 0;
  left: -80px;
  width: 1359px;
  height: 858px;
  max-width: none;
  object-fit: cover;
}

/* Progressive blur: almost sharp at the top, strongest at the bottom */
.contacts__blur,
.contacts__blur i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.contacts__blur i:nth-child(1) {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 25%);
  mask-image: linear-gradient(transparent 0%, #000 25%);
}
.contacts__blur i:nth-child(2) {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(transparent 20%, #000 50%);
  mask-image: linear-gradient(transparent 20%, #000 50%);
}
.contacts__blur i:nth-child(3) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(transparent 45%, #000 75%);
  mask-image: linear-gradient(transparent 45%, #000 75%);
}
.contacts__blur i:nth-child(4) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(transparent 70%, #000 100%);
  mask-image: linear-gradient(transparent 70%, #000 100%);
}

.contacts__label {
  --x: 20px; --y: 253px;
  opacity: 0.5;
}

/* Letters spread edge to edge over the same width as the email + phone line */
.contacts__logo {
  --x: 448px; --y: 243px; --w: 303px;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0;
  transition: opacity 0.2s ease;
}

.contacts__list {
  --x: 448px; --y: 289px; --w: 303px;
  display: flex;
  gap: 12px;
  font-weight: 100;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.26px;
  white-space: nowrap;
}
.contacts__list a:first-child {
  flex: 1 0 0;
}
.contacts__list a {
  transition: opacity 0.2s ease;
}
.contacts__list a:hover,
.contacts__logo:hover {
  opacity: 0.6;
}

/* "by fridman": small and quiet in the bottom-right corner, brighter on hover */
.contacts__credit {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-weight: 100;
  font-size: 12px;
  line-height: 1.1;
  letter-spacing: -0.24px;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.contacts__credit:hover,
.contacts__credit:focus-visible {
  opacity: 0.9;
}

/* ---------- full-screen photo viewer ---------- */
.project-photo {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90; /* under the grain */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 80px;
  background: rgba(27, 16, 14, 0.96);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
  transform: scale(0.96);
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}
.lightbox.is-open .lightbox__img {
  transform: none;
}
.lightbox__img.is-switching {
  opacity: 0;
}

.lightbox button {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.lightbox button:hover,
.lightbox button:focus-visible {
  opacity: 1;
}
.lightbox button:focus {
  outline: none;
}
.lightbox button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.lightbox__close {
  top: 24px;
  right: 30px;
  font-weight: 100;
  font-size: 13px;
  letter-spacing: -0.26px;
}
.lightbox__nav {
  top: 50%;
  translate: 0 -50%;
  padding: 20px !important;
  font-weight: 100;
  font-size: 28px;
  line-height: 1;
}
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__nav[hidden] {
  display: none;
}

.lightbox__caption {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 100;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.26px;
  opacity: 0.7;
}

@media (max-width: 767px) {
  .lightbox {
    padding: 56px 0;
  }
  .lightbox__nav {
    top: auto;
    bottom: 4px;
    translate: none;
  }
  .lightbox__nav--prev { left: auto; right: 64px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__caption {
    left: 20px;
    right: 130px;
    flex-direction: column;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img {
    transition: none;
  }
}

/* ---------- film grain over the whole site (static) ----------
   One sheet over the full height of the page, so it scrolls together with
   the paper and the content instead of standing still on the screen. */
body {
  position: relative;
}
.grain {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.09;
  background-repeat: repeat;
  background-size: 180px 180px;
}

@media (prefers-reduced-motion: reduce) {
  .project-photo img { transition: none; }
}

/* ================================================================
   Responsive
   ≥1024px   artboard scaled to the window width (main.js --k)
   <1024     stacked layout below: tablet and phone (<768)
   ================================================================ */

/* Touch screens: no hover, so the row at the screen centre gets its colour
   back (main.js .is-active) */
@media (hover: none) {
  .project-row.is-active .project-photo__clean {
    opacity: 1;
  }
  .project-row.is-active .project-photo__torn {
    opacity: 0;
  }
}

@media (max-width: 1023px) {
  .page {
    width: 100%;
    zoom: 1;
  }

  /* ---- menu: centred, same as on the artboard ---- */
  .site-header {
    left: 50%;
    translate: -50% 0;
    top: 24px;
  }

  /* ---- hero ---- */
  .hero {
    --hero-h: clamp(480px, 82svh, 720px);
    height: var(--hero-h);
  }
  .hero__photos {
    height: calc(100% - 33px);
    overflow: hidden;
  }
  .hero__photo--left,
  .hero__photo--right {
    top: 0;
    height: 100%;
  }
  .hero__photo--left {
    left: 0;
    width: 64%;
  }
  .hero__photo--right {
    left: 64%;
    width: 36%;
  }
  .hero__photo img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* The portrait keeps the design crop: its blank lower 18% stays cut off */
  .hero__photo--right img {
    height: 122.74%;
    object-position: 60% 0;
  }

  .js-intro .hero-intro {
    height: calc(var(--hero-h) + 100px);
  }
  .nav__logo,
  .nav__links {
    left: calc(50% - 152px);
  }
  .hero__quote {
    top: auto;
    bottom: 72px;
    left: 20px;
    width: calc(100% - 40px);
    white-space: normal;
  }

  /* ---- about: one column ---- */
  .about {
    height: auto;
    padding: 20px 20px 100px;
  }
  .about__label,
  .about__text,
  .about__motto,
  .about__piece {
    position: relative;
    left: auto;
    top: auto;
  }
  .about__label {
    display: block;
  }
  .about__text,
  .about__motto {
    width: auto;
    max-width: 384px;
    margin-left: 18%;
  }
  .about__text--1 {
    margin-top: 48px;
  }
  .about__motto {
    margin-top: 24px;
  }
  .about__piece {
    width: min(100%, var(--pw));
    height: auto;
    margin: 56px auto;
  }
  .about__card { --pw: 480.5px; }
  .about__sketch { --pw: 643px; }
  .about__childhood { --pw: 232px; margin-bottom: 0; }

  /* ---- projects: title above, the row of photos scaled to the width ---- */
  .projects {
    padding-top: 84px;
  }
  .projects__label {
    left: 20px;
  }
  .project-row {
    height: auto;
    padding: 20px 20px 40px;
  }
  .project-row__title {
    position: static;
    width: auto;
    max-width: var(--tw);
    margin-bottom: 20px;
  }
  .project-row__photos {
    position: static;
  }
  /* Design widths include the 10px gaps (775 = photos + gaps), so each photo
     gets its share of the row plus one gap, minus its own gap */
  .project-photo {
    width: calc((100% + 10px) * (var(--w) + 10) / 785 - 10px);
    height: auto;
    aspect-ratio: var(--w) / 320;
  }

  /* ---- services ---- */
  .services {
    padding: 20px 20px 40px; /* paper 43px from the list and from the contacts */
  }
  .services__label {
    position: static;
    display: block;
    margin-bottom: 48px;
  }
  .services__list {
    position: static;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
    white-space: normal;
  }
  .services__card {
    width: auto;
    max-width: 530.5px;
    margin: 40px auto 0;
  }

  /* ---- contacts ---- */
  .contacts__bg {
    left: 0;
    width: 100%;
    height: 100%;
    object-position: 50% 35%;
  }
  .contacts__logo,
  .contacts__list {
    --x: calc(50% - 151.5px);
  }
}

@media (max-width: 767px) {
  /* Phone: the portrait alone on the first screen */
  .hero__photo--left {
    display: none;
  }
  .hero__photo--right {
    left: 0;
    width: 100%;
  }

  .about__text,
  .about__motto {
    margin-left: 0;
  }
  .about__text br {
    display: none;
  }

  /* Photos as a swipeable strip */
  .project-row__photos {
    margin: -8px -20px;
    padding: 8px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .project-row__photos::-webkit-scrollbar {
    display: none;
  }
  .project-photo {
    width: auto;
    height: 300px;
    scroll-snap-align: start;
  }

  .contacts__label {
    --y: 40px;
  }
}

/* Tablet and phone: the fixed menu sits over the one-column content */
@media (max-width: 1023px) {
  /* Fixed menu on a paper strip, so it doesn't run over the text. Over a
     photo (first screen, contacts) the strip goes and the menu turns light
     on dark again (main.js .menu-on-dark). */
  .site-header__backdrop {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 49;
    height: 92px;
    background: linear-gradient(var(--paper) 76%, rgba(255, 251, 246, 0));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
  }
  .menu-compact:not(.menu-on-dark) .site-header__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
  }
  .menu-compact:not(.menu-on-dark) .site-header {
    mix-blend-mode: normal;
    color: var(--ink);
  }
  .site-header {
    transition: opacity 0.6s ease, visibility 0s linear 0.6s, color 0.4s ease;
  }
  .menu-compact .site-header {
    transition: opacity 0.6s ease, visibility 0s linear 0s, color 0.4s ease;
  }
}

/* Small phones (iPhone SE and the like): the menu scaled down from 304 to
   238px wide, so it keeps a margin at the sides */
@media (max-width: 399px) {
  .nav__logo,
  .site-header__logo {
    font-size: 16px;
    letter-spacing: 21.92px;
  }
  .site-header__logo {
    margin-right: -21.92px;
  }
  .nav__links,
  .site-header__links {
    width: 238px;
    font-size: 12px;
  }
  .site-header {
    gap: 10px;
  }
  .nav__logo,
  .nav__links {
    left: calc(50% - 119px);
  }
  .nav__links {
    top: 50px;
  }

  .contacts__logo {
    font-size: 16px;
  }
  .contacts__logo,
  .contacts__list {
    --x: calc(50% - 119px);
    --w: 238px;
  }
}