.project-index {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(22px,2.6vw,72px);
}
.project-card, .case-intro > div { min-width: 0; }
.project-preview,.case-main-preview { display: block; }
.concept-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1.58;
  border-radius: 7px;
  background: #d7dfac;
}
.stage-phase {
  --edge: #e7eacf;
  --screen: #171a11;
  --phone: #171a11;
  background: radial-gradient(ellipse at 16% 5%,#f1f4ce 0%,transparent 61%), linear-gradient(155deg,#d7dfa7 12%,#b4bb7d 72%,#999e62);
}
.stage-zipmark {
  --edge: #2a2321; --screen: #080e11; --phone: #25201f;
  background: radial-gradient(ellipse at 78% 0%,#f7e2bf,transparent 61%),linear-gradient(132deg,#d1b7a0,#d2a183 65%,#91634e);
}
.stage-relay {
  --edge: #f2e8dd;
  --screen: #282820;
  --phone: #332c26;
  background: radial-gradient(ellipse at 25% 4%,#f4e8dc,transparent 65%),linear-gradient(155deg,#dcc2b0,#b48f78);
}
.stage-batiskaf {
  --edge: #273b42;
  --screen: #101e25;
  --phone: #19292f;
  background: linear-gradient(135deg,#bad1ce,#88a8ac 55%,#597779);
}
.concept-composition {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
}
.concept-window {
  width: 82%;
  position: relative;
  margin: -1% 9% 0 0;
  background: var(--edge);
  border: 1px solid #ffffff9c;
  border-radius: clamp(4px,.45vw,13px);
  box-shadow: 0 1px 0 #0003,0 5px 8px -4px #1116,0 22px 38px -18px #1215109c;
  overflow: hidden;
  transform: rotateY(4deg) rotateX(2deg) rotateZ(-2deg);
}
.stage-relay .concept-window { transform: rotateY(-3deg) rotateX(2deg) rotateZ(1.4deg); }
.window-bar {
  height: clamp(8px,1.2vw,27px); min-height: 8px; display: flex; align-items: center;
  gap: .46%; padding-inline: 1.8%; border-bottom: 1px solid #0002;
}
.window-bar i { display: block; border-radius: 50%; background: #5c605f; opacity: .62; width: .8%; max-width: 8px; aspect-ratio: 1; }
.concept-window img { display: block; width: 100%; height: auto; aspect-ratio: 8/5; }
.concept-handset {
  position: absolute; width: 20%; right: 5.7%; bottom: 7.2%; padding: clamp(2px,.24vw,7px);
  aspect-ratio: 390/844;
  border-radius: 11% / 5.1%;
  background: var(--phone); border: 1px solid #858482;
  box-shadow: 1px 3px 4px #0005, 8px 18px 22px -10px #1f2215a3;
  transform: rotateZ(4deg);
}
.stage-relay .concept-handset { transform: rotateZ(-2.5deg); }
.concept-handset img { width: 100%; height: 100%; border-radius: 9% / 4.2%; }
.project-caption { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(14px,1.55vw,38px); }
.project-caption h2,.project-caption h3 { color: var(--fg); font-family: inherit; font-size: clamp(24px,2.2vw,52px); line-height: 1.12; letter-spacing: var(--heading-tracking); font-weight: var(--heading-weight); margin: 0; }
.project-caption p,.archive-desc,.case-crumb,.case-reading p { color: var(--muted); }
.project-caption p { margin: 5px 0 0; font-size: clamp(13px,1.05vw,23px); line-height: 1.45; }
.case-notes-link { border-bottom: 1px solid var(--line); padding-block: 7px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: clamp(13px,.96vw,21px); }
.case-notes-link:hover,.case-crumb a:hover { border-color: currentColor; }
.project-caption > div { min-width: 0; overflow-wrap: anywhere; }
.project-caption .case-notes-link { flex: none; }
.archive-desc { font-size: clamp(15px,1.14vw,24px); line-height: 1.55; max-width: 49ch; margin: 17px 0 0; }
.user-cover,.project-wordmark { width: 100%; aspect-ratio: 1.58; border-radius: 7px; object-fit: cover; }
.project-wordmark { display: grid; place-items: center; text-align: center; font-size: clamp(28px,4vw,82px); background: var(--panel); }
.concept-case { margin-block: clamp(22px,2.1vw,50px) clamp(58px,7vw,140px); }
.case-crumb { display: flex; align-items: center; gap: 12px; font-size: clamp(13px,.95vw,22px); }
.case-crumb a { border-bottom: 1px solid var(--line); padding-block: 4px; }
.case-intro { display: grid; grid-template-columns: 1fr .92fr; align-items: end; gap: 32px; margin-block: clamp(38px,5.4vw,110px) clamp(28px,3.4vw,76px); }
.case-intro h1 { font-size: clamp(56px,7.1vw,168px); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 1.04; overflow-wrap: anywhere; margin: 12px 0 0; }
.case-intro p { color: var(--muted); }
.case-intro-copy p { font-size: clamp(17px,1.4vw,30px); line-height: 1.5; letter-spacing: -.012em; max-width: 41ch; margin: 0 0 20px; }
.case-main-preview .concept-stage { aspect-ratio: 2.1; }
.case-main-preview .concept-window { width: 64%; margin: 0 5% 0 0; }
.case-main-preview .concept-handset { width: 15%; right: 12%; }
.case-reading { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px,5vw,110px); margin-block: clamp(42px,6vw,132px); }
.case-reading h2,.case-reading h3 { line-height: 1.12; font-weight: var(--heading-weight); margin: 0; letter-spacing: var(--heading-tracking); }
.case-reading h2 { font-size: clamp(29px,2.85vw,64px); }
.case-reading h3 { font-size: clamp(21px,1.8vw,40px); }
.case-reading p { font-size: clamp(15px,1.15vw,25px); line-height: 1.6; margin: 13px 0 0; }
.case-follow { display: grid; grid-template-columns: 1fr auto; align-items: center; border-block: 1px solid var(--line); padding-block: 20px; }
.case-follow span { color: var(--muted); grid-column: 1; font-size: clamp(13px,1vw,21px); }
.case-follow strong { font-size: clamp(25px,3vw,66px); font-weight: 550; letter-spacing: -.045em; }
.case-follow svg { grid-area: 1/2/3/3; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .concept-composition { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
  a:hover .concept-composition, a:focus-visible .concept-composition { transform: translateY(-.85%) scale(1.022); }
}
@media (min-width:2200px) { .concept-case.shell { width: min(88%,3000px); max-width: none; } }
@media (max-width:700px) {
  .project-index,.case-intro,.case-reading { grid-template-columns: 1fr; }
  .project-index { gap: 34px; }
  .case-intro { gap: 24px; }
  .case-reading { gap: 22px; }
  .case-main-preview .concept-stage { aspect-ratio: 1.4; }
  .case-main-preview .concept-window { width: 83%; margin-right: 5%; }
  .case-main-preview .concept-handset { width: 22%; right: 4%; bottom: 7%; }
}

.portfolio-sectors { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 clamp(1.2rem,2.3vw,3.8rem); }
.portfolio-sectors a { display: inline-flex; align-items: center; min-height: 42px; padding: .53em 1.02em; border: 1px solid var(--line); border-radius: 1.4em; text-decoration: none; font-size: clamp(13px,.94vw,21px); line-height: 1.25; }
.portfolio-sectors a[aria-current] { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.portfolio-sectors a:hover, .portfolio-sectors a:focus-visible { border-color: var(--fg); }
.project-card[hidden] { display: none; }
.stage-razlom { --edge:#363334; --screen:#171719; --phone:#212123; background:linear-gradient(128deg,#b8afb1,#85818a 52%,#544d55); }
.stage-prolet { --edge:#eee4d9; --screen:#dacebe; --phone:#4b433b; background:linear-gradient(135deg,#f2e7d7,#cfc3b3 55%,#aa9989); }
.stage-byuro { --edge:#e4e8e8; --screen:#cad4d5; --phone:#303b3b; background:linear-gradient(145deg,#e8e6f7,#c0bcd5 57%,#a39cb6); }
.stage-trassa { --edge:#e3e4da; --screen:#e8e9e1; --phone:#253226; background:linear-gradient(135deg,#dadfce,#bcc8ab 55%,#8c9b82); }
.stage-signal { --edge:#c4d9e0; --screen:#d3e6ee; --phone:#233642; background:linear-gradient(135deg,#dfedf1,#abcad1 57%,#87a6b0); }
.stage-zerno { --edge:#f1e6d1; --screen:#e0cfc0; --phone:#46372e; background:linear-gradient(135deg,#efddc6,#d8b694 57%,#ab8568); }
.stage-umbra { --edge:#353836; --screen:#080c0a; --phone:#1a211d; background:linear-gradient(125deg,#c6cbba,#919985 58%,#6f7965); }
.stage-rezonans { --edge:#ddc8da; --screen:#241825; --phone:#27212a; background:linear-gradient(130deg,#ead3de,#c39db5 55%,#947286); }
.case-reading { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: baseline; }
.case-reading p { margin: 0; max-width: 46ch; font-size: clamp(18px,1.55vw,33px); line-height: 1.48; }
@media (max-width:700px) {
  .case-intro h1 { font-size: clamp(40px,11.5vw,67px); }
  .case-reading { grid-template-columns: 1fr; }
}