/* ---------- tokens ---------- */
:root {
  --paper: #eef3f7;
  --ink: #07090d;
  --blue: #1b2bff;
  --ice: #b9d3e8;
  --line: rgba(34, 86, 132, .22);
  --muted: #5d7488;
  --g: clamp(16px, 2.2vw, 32px);
  --display: "Quantum", "Deledda Closed", sans-serif;
  --sans: "Deledda", system-ui, sans-serif;
  --mono: "Feature Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
  overflow-x: clip;
  background-image:
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(150, 196, 232, .45), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 25vh, 12.5vw 100%;
  background-attachment: fixed, scroll, scroll;
}
::selection { background: var(--blue); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.7;
}
.mono b { font-weight: 700; }
.blue { color: var(--blue); }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px var(--g);
  mix-blend-mode: difference; color: #fff;
}
.bar nav { display: flex; gap: 24px; }
.bar a:hover { text-decoration: line-through; }

/* crosshair marks */
.plus { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.plus::before, .plus::after { content: ""; position: absolute; background: var(--ink); }
.plus::before { left: 6px; top: 0; width: 1px; height: 14px; }
.plus::after { top: 6px; left: 0; height: 1px; width: 14px; }

/* ---------- case head ---------- */
.case-head { position: relative; padding: 72px var(--g) 8vh; }
.case-head .no { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 10px; }
.case-title {
  font-family: var(--display);
  font-size: clamp(120px, 46vw, 900px);
  line-height: .78;
  letter-spacing: -.03em;
  margin: 3vw 0 0 -.05em;
}
.case-sub {
  font-weight: 100;
  font-size: clamp(26px, 5.2vw, 100px);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-top: 2vw;
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px var(--g);
  margin-top: 8vh;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}
.case-grid .lead {
  grid-column: span 2;
  font-size: clamp(20px, 2vw, 32px);
  line-height: 1.2;
  font-weight: 300;
}
.case-grid .lead strong { font-weight: 900; }
.case-grid p + p { margin-top: 10px; }

/* ---------- photo flow ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--g); padding: 0 var(--g); }
figure { position: relative; cursor: zoom-in; }
figure img { background: var(--ice); transition: filter .4s; }
figure:hover img { filter: contrast(1.06); }
figcaption {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--ink);
  margin-top: 8px;
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); align-items: start; }
.pair.shift figure:last-child { margin-top: 18vh; }
.narrow { width: 66%; }
.narrow.right { margin-left: auto; }
.bleed { margin: 0 calc(var(--g) * -1); }
.bleed figcaption { padding-inline: var(--g); }

.split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--g); align-items: end; }
.split .txt { padding-bottom: 40px; }
.split .big {
  font-family: var(--sans); font-weight: 900; letter-spacing: -.04em;
  font-size: clamp(40px, 7vw, 140px);
  line-height: .9;
}

/* ---------- interlude ---------- */
.inter {
  position: relative;
  padding: 16vh 0 10vh;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
}
.inter h3 {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(72px, 24vw, 460px);
  line-height: .8;
  letter-spacing: -.03em;
  margin-left: -.05em;
}
.inter h3.out { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.inter .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--ink); padding-top: 10px; }
.inter .row .q { font-weight: 100; font-size: clamp(22px, 3vw, 48px); line-height: 1.05; text-transform: uppercase; max-width: 22ch; }
.inter.r { text-align: right; }
.inter.r h3 { margin: 0 -.05em 0 auto; }

/* ---------- footer ---------- */
footer { padding: 20vh var(--g) var(--g); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
footer .end {
  font-weight: 100;
  font-size: clamp(44px, 11vw, 210px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
footer .end b { font-weight: 900; letter-spacing: -.03em; }
footer .links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--ink); padding-top: 10px; }
footer .links a { font-weight: 900; font-size: clamp(20px, 3vw, 48px); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; }
footer .links a:hover { color: var(--blue); }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(238, 243, 247, .96);
  display: none; place-items: center;
  padding: 48px var(--g);
  cursor: zoom-out;
}
.lb.on { display: grid; }
.lb img { max-width: 100%; max-height: calc(100svh - 96px); width: auto; object-fit: contain; }
.lb .mono { position: absolute; top: 14px; left: var(--g); right: var(--g); display: flex; justify-content: space-between; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  body { background-size: 100% 100%, 100% 25vh, 25vw 100%; }
  .bar nav { display: none; }
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-grid .lead { grid-column: 1 / -1; }
  .pair, .split { grid-template-columns: 1fr; }
  .pair.shift figure:last-child { margin-top: 0; }
  .narrow { width: 100%; }
  figcaption { flex-direction: column; gap: 0; }
  .bar > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 760px) { footer .end { font-size: clamp(32px, 11vw, 60px); overflow-wrap: anywhere; } }

/* следующий кейс */
footer .next { display: grid; gap: 8px; border-top: 1px solid var(--ink); padding-top: 10px; }
footer .next .big { font-weight: 900; font-size: clamp(48px, 11vw, 220px); line-height: .82; letter-spacing: -.05em; text-transform: uppercase; transition: color .3s; }
footer .next:hover .big { color: var(--blue); }