/* ===== assets/fonts/fonts.css ===== */
/* Self-hosted, unmodified Google Fonts WOFF2 subsets.
 * Cormorant Garamond v21 / Golos Text v7, retrieved 2026-09-10.
 * Licenses: OFL-Cormorant-Garamond.txt and OFL-Golos-Text.txt.
 * Source details: README.md in this directory.
 */

/* Latin display headings. The file supports both requested weights. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cyrillic body text. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Latin body text and shared punctuation. */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== assets/fonts/inter-display.css ===== */
/* Inter v20, unmodified Google Fonts variable WOFF2 subsets.
 * "Inter Display" is a CSS alias, not a modified or renamed font binary.
 * Verified binary axes: wght 100–900; opsz 14–32.
 * Use font-optical-sizing: auto (or font-variation-settings: "opsz" 32)
 * on large headings. Existing Golos/Cormorant font rules are unchanged.
 * License: ./OFL-Inter.txt (SIL Open Font License 1.1).
 * Official source CSS:
 * https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap
 */

/* Cyrillic. */
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-cyrillic-variable.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Latin and shared punctuation. */
@font-face {
  font-family: "Inter Display";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== space.css ===== */
@font-face {
  font-family: "Golos Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("assets/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("assets/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
  --scene: #060606;
  --card: #171717;
  --text: #e9e9e7;
  --muted: #b5b5b2;
  --wine: #3B0603;
  --wine-edge: #8a8a8a;
  --body: "Golos Text", Arial, sans-serif;
  --display: "Golos Display", Arial, sans-serif;
  --identity: "Inter Display", "Golos Display", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--scene); scroll-behavior: smooth; }
body { margin: 0; background: var(--scene); color: var(--text); font: 400 16px/1.4 var(--body); -webkit-font-smoothing: antialiased; isolation: isolate; }
/* Match the reference material: 1px random grain, no enlarged fractal clumps. */
body::after { content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: .08; mix-blend-mode: screen; background-size: 128px 128px; background-image: var(--grain-texture, none); animation: grain-drift 100ms steps(10, end) infinite; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd { margin: 0; }
::selection { background: var(--wine); color: white; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 6px; }
.edge { width: calc(100% - 80px); max-width: 1600px; margin-inline: auto; }
.skip { position: fixed; z-index: 10; top: 12px; left: 12px; color: var(--scene); background: white; padding: 12px 18px; border-radius: 8px; transform: translateY(-160%); }
.skip:focus { transform: none; }
.cover { min-height: 760px; height: 100svh; max-height: 1160px; position: relative; overflow: hidden; isolation: isolate; background: var(--scene); }
.cover-film, .cover-shade { position: absolute; inset: 0; z-index: -2; }
.cover-film video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; filter: grayscale(1) contrast(1.12); }
.cover-shade { z-index: -1; background: linear-gradient(180deg, #06060699 0%, #06060600 24%, #06060600 45%, #06060699 74%, #060606 100%), linear-gradient(90deg, #06060640 0%, #06060600 58%); }
.topbar { position: relative; z-index: 3; display: flex; justify-content: flex-end; align-items: start; padding-top: 30px; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font: 650 14px/1 var(--identity); letter-spacing: -.045em; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.cover-layout { position: absolute; left: 0; right: 0; bottom: 72px; display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.identity { min-width: 0; }
.wordmark { font: 750 clamp(74px, 10.2vw, 170px)/.79 var(--identity); font-optical-sizing: auto; letter-spacing: -.075em; animation: into-focus .85s ease-out both; }
.wordmark span { display: block; }
.wordmark span + span { margin-top: .09em; margin-left: .48em; }
.identity-role { margin-top: 25px; margin-left: clamp(36px, 4.9vw, 82px); font: 500 clamp(13px, 1.1vw, 17px)/1.2 var(--identity); letter-spacing: -.035em; }
.hero-social { display: flex; gap: 28px; padding-bottom: 38px; }
.hero-social a { min-height: 44px; display: inline-flex; align-items: center; font: 650 14px/1 var(--identity); letter-spacing: -.045em; text-underline-offset: 5px; }
.hero-social a:hover { text-decoration: underline; }
.projects { padding: 110px 0 85px; scroll-margin-top: 28px; }
.work-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; padding-bottom: 78px; }
.work-heading h2 { font: 700 clamp(70px, 8.3vw, 142px)/.87 var(--display); letter-spacing: -.055em; }
.work-heading > p { margin-bottom: 8px; max-width: 28ch; font: 500 15px/1.25 var(--display); letter-spacing: -.025em; color: var(--muted); }
.case-grid { width: min(1160px, calc(100% - 144px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: start; column-gap: clamp(52px, 8vw, 132px); row-gap: 60px; }
.case { min-width: 0; background: var(--card); border-radius: 26px; transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.case:hover, .case:focus-within { background: var(--wine); box-shadow: 0 0 0 2px var(--wine-edge), 0 18px 45px #00000066; transform: translateY(-5px); }
.case-link { display: block; border-radius: inherit; overflow: hidden; }
.case-course { margin-top: 160px; }
.case-leads { margin-top: -8px; }
.case-channel { margin-top: 150px; }
.case-visual { position: relative; overflow: hidden; background: #303030; }
.case-visual > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .35s ease, transform .35s ease; }
.case-link:hover .case-visual > img, .case-link:focus-visible .case-visual > img { filter: grayscale(0); transform: scale(1.035); }
.case:hover .case-role, .case:focus-within .case-role, .case:hover .case-results dd, .case:focus-within .case-results dd { color: #dedede; }
.case:hover .case-description, .case:focus-within .case-description { color: #eeeeee; }
.emcd-visual { aspect-ratio: 1.65; }
.emcd-visual > img { object-position: 60% 50%; }
.case-copy { padding: 25px 30px 29px; }
.case-role { color: var(--muted); font-size: 11px; line-height: 1.2; }
.case-title { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-top: 13px; }
.case-title h3 { font: 700 clamp(28px, 2.6vw, 40px)/1.01 var(--display); letter-spacing: -.05em; }
.case-title > span { font-size: 23px; line-height: 1.1; }
.case-description { color: #cdcdca; font-size: 14px; line-height: 1.3; letter-spacing: -.015em; margin-top: 18px; }
.case-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 25px; }
.case-results dt { font: 700 34px/1 var(--display); letter-spacing: -.06em; }
.case-results dd { margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.2; }
.case-destination { display: inline-block; margin-top: 26px; font: 500 12px/1.1 var(--display); text-decoration: underline; text-underline-offset: 4px; }
.course-visual { container-type: inline-size; aspect-ratio: 1.26; background: var(--wine); padding: 6%; }
.course-glass { height: 100%; display: flex; flex-direction: column; padding: 7%; background: linear-gradient(135deg, #ffffff0d 0%, transparent 45%, #00000040 100%), var(--wine); border: 1px solid #ffffff40; box-shadow: inset 0 1px 1px #ffffff26, 0 10px 25px #00000044; border-radius: 18px; color: white; }
.course-caption { font: 500 3cqw/1 var(--display); color: #dedede; }
.course-display { display: block; margin-top: 7cqw; font: 750 14.2cqw/.86 var(--display); letter-spacing: -.065em; }
.course-bottom { display: flex; justify-content: space-between; gap: 16px; align-items: end; margin-top: auto; padding-top: 7cqw; font-size: 2.6cqw; line-height: 1.15; color: #dedede; }
.leads-visual { padding: 26px; background: #d9dbda; color: #222; }
.leads-brand { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.leads-brand img { width: 38%; height: auto; filter: grayscale(1); }
.leads-brand > span { font-size: 10px; color: #575b5b; }
.demo-request { margin-top: 27px; }
.demo-request > span, .demo-reply > span { display: block; font-size: 10px; color: #5b5d5d; margin-bottom: 9px; }
.demo-request > p { font: 750 clamp(20px, 2.3vw, 32px)/.99 var(--display); letter-spacing: -.05em; }
.demo-reply { margin-top: 23px; padding: 18px; background: #f5f5f3; border-radius: 12px; }
.demo-reply > p { font-size: 12px; line-height: 1.25; letter-spacing: -.02em; }
.channel-visual { aspect-ratio: 1.24; }
.channel-visual > img { object-position: 50% 38%; }
.statement { padding-block: 100px 150px; }
.statement p { font: 700 clamp(42px, 5.6vw, 96px)/.94 var(--display); letter-spacing: -.065em; }
.statement span { display: block; }
.statement span:nth-child(2) { margin-left: 16%; }
.statement span:nth-child(3), .statement span:nth-child(4) { margin-left: 42%; }
.contacts { position: relative; z-index: 5; padding-block: 0 72px; scroll-margin-top: 30px; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.contact-links a { display: inline-flex; border-radius: 18px; transition: transform .2s ease, box-shadow .2s ease; }
.contact-links a:hover, .contact-links a:focus-visible { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--wine-edge); }
.social-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: inherit; background: #202020; color: var(--text); }
.social-icon svg { width: 28px; height: 28px; fill: currentColor; }
.social-icon svg[fill="none"] { fill: none; }
.telegram-link .social-icon { width: 80px; background: var(--wine); color: white; }
@keyframes grain-drift { 0%, 100% { background-position: 0 0; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: -5% 25%; } 50% { background-position: -15% 10%; } 60% { background-position: 15% 0%; } 70% { background-position: 0% 15%; } 80% { background-position: 3% 10%; } 90% { background-position: 10% 3%; } }
@keyframes into-focus { from { opacity: .55; filter: blur(10px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@media (max-width: 1100px) {
  .edge { width: calc(100% - 56px); }
  .cover { min-height: 700px; }
  .case-grid { width: calc(100% - 96px); column-gap: 54px; }
  .work-heading { gap: 40px; }
  .work-heading > p { font-size: 13px; }
  .case-copy { padding: 24px; }
  .case-description br { display: none; }
  .case-course { margin-top: 120px; }
  .case-channel { margin-top: 100px; }
  .case-description { font-size: 13px; }
  .hero-social { flex-direction: column; gap: 0; padding-bottom: 28px; }
}
@media (max-width: 760px) {
  .edge { width: calc(100% - 40px); }
  .cover { min-height: 680px; height: 100svh; max-height: 1000px; background: var(--scene); }
  .topbar { padding-top: 20px; }
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 12px; }
  .cover-film { top: 0; }
  .cover-film video { object-position: 48% 50%; }
  .cover-shade { background: linear-gradient(180deg, #060606b3 0%, #06060600 24%, #06060600 40%, #06060699 62%, #060606 100%); }
  .cover-layout { bottom: 30px; display: block; }
  .wordmark { font-size: 16.2vw; line-height: .82; letter-spacing: -.075em; }
  .wordmark span + span { margin-left: .3em; }
  .identity-role { margin-top: 20px; margin-left: 4.86vw; font-size: 12px; }
  .hero-social { flex-direction: row; gap: 24px; padding: 18px 0 0; margin-left: 4.86vw; }
  .hero-social a { font-size: 12px; }
  .projects { padding: 55px 0 50px; }
  .work-heading { display: block; padding-bottom: 36px; }
  .work-heading h2 { font-size: clamp(64px, 12vw, 96px); }
  .work-heading > p { margin: 24px 0 0; font-size: 14px; }
  .case-grid { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 30px; }
  .case-course, .case-channel, .case-leads { margin-top: 0; }
  .case { border-radius: 22px; }
  .case-copy { padding: 25px; }
  .case-title h3 { font-size: 35px; }
  .case-role { font-size: 12px; }
  .case-description { font-size: 15px; max-width: 34ch; }
  .case-results dt { font-size: 37px; }
  .case-results dd { font-size: 11px; }
  .case-destination { font-size: 13px; }
  .course-visual { aspect-ratio: 1.35; }
  .channel-visual { aspect-ratio: 1.7; }
  .demo-request > p { font-size: clamp(27px, 7vw, 42px); }
  .leads-brand > span, .demo-request > span, .demo-reply > span { font-size: 11px; }
  .demo-reply > p { font-size: 13px; }
  .statement { padding-block: 45px 80px; }
  .statement p { font-size: clamp(35px, 7.5vw, 54px); line-height: .98; letter-spacing: -.06em; }
  .statement span:nth-child(2) { margin-left: 0; }
  .statement span:nth-child(3), .statement span:nth-child(4) { margin-left: 10%; }
  .contact-links { justify-content: center; gap: 16px; }
  .social-icon { width: 56px; height: 56px; }
  .social-icon svg { width: 25px; height: 25px; }
  .telegram-link .social-icon { width: 72px; }
  .contacts { padding-bottom: 48px; }
}
@media (max-width: 380px) {
  .edge, .case-grid { width: calc(100% - 32px); }
  .work-heading h2 { font-size: 59px; }
  .case-copy { padding: 23px; }
  .case-title h3 { font-size: 31px; }
  .case-results { gap: 12px; }
  .case-results dt { font-size: 33px; }
  .case-results dd { font-size: 10px; }
  .leads-visual { padding: 22px; }
  .demo-request > p { font-size: 26px; }
  .demo-reply { padding: 15px; }
  .statement p { font-size: 9vw; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .case:hover, .case:focus-within, .case-link:hover .case-visual > img, .case-link:focus-visible .case-visual > img, .contact-links a:hover, .contact-links a:focus-visible { transform: none; }
}

/* ===== space-reference.css ===== */
/* The selected text-first reference treatment; scoped to Projects only. */
.projects-reference { --card-inset: 38px; --card-radius: 40px; --card-gap: 27px; --card-text: #eeeeee; --card-muted: #b4b4b4; }
.projects-reference .case-grid { width: min(1220px, calc(100% - 80px)); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.projects-reference .case { margin-top: 0; color: var(--card-text); border-radius: var(--card-radius); background: #000000; box-shadow: 0 0 0 1px #ffffff12; transition: box-shadow .2s ease; }
.projects-reference .case:hover, .projects-reference .case:focus-within { transform: none; box-shadow: 0 0 0 3px var(--wine), 0 0 0 4px var(--wine-edge); }
.projects-reference .case-link { display: flex; flex-direction: column; gap: var(--card-gap); padding: var(--card-inset); overflow: visible; }
.projects-reference .case-link:focus-visible { outline: 3px solid white; outline-offset: 7px; }
.projects-reference .case-visual { aspect-ratio: 1.6; border-radius: 22px; background: #000000; container-type: inline-size; }
.projects-reference .case-visual > img, .projects-reference .case-link:hover .case-visual > img, .projects-reference .case-link:focus-visible .case-visual > img { filter: none; transform: none; }
.projects-reference .emcd-visual > img { object-position: 68% 50%; }
.projects-reference .channel-visual > img { object-position: 50% 40%; }
.projects-reference .case-copy { padding: 0; }
.projects-reference .case-role, .projects-reference .case:hover .case-role, .projects-reference .case:focus-within .case-role { color: var(--card-muted); font-size: 12px; line-height: 1.3; }
.projects-reference .case-title { display: block; margin-top: 16px; }
.projects-reference .case-title h3 { font: 700 clamp(32px, 3.8vw, 54px)/.99 var(--display); letter-spacing: -.055em; }
.projects-reference .case-title h3 span { border-radius: 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-color .2s ease; }
.projects-reference .case-link:hover .case-title h3 span, .projects-reference .case-link:focus-visible .case-title h3 span { background: var(--wine); color: white; box-shadow: 5px 0 var(--wine), -5px 0 var(--wine); }
.projects-reference .case-description { margin-top: 19px; max-width: 36ch; color: var(--card-muted); font: 500 clamp(14px, 1.4vw, 17px)/1.4 var(--display); letter-spacing: -.015em; }
.projects-reference .case:hover .case-description, .projects-reference .case:focus-within .case-description { color: var(--card-muted); }
.projects-reference .case-description br { display: none; }
.projects-reference .case-results { margin-top: 0; gap: 16px; }
.projects-reference .case-results dt { font: 700 clamp(29px, 3.3vw, 44px)/1 var(--display); letter-spacing: -.045em; }
.projects-reference .case-results dd { margin-top: 8px; color: var(--card-muted); font-size: 11px; line-height: 1.35; }
.projects-reference .case:hover .case-results dd, .projects-reference .case:focus-within .case-results dd { color: var(--card-muted); }
.projects-reference .case-destination { align-self: start; margin-top: 1px; font: 500 13px/1.4 var(--body); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.projects-reference .course-visual { display: flex; padding: 5%; background: var(--wine); }
.projects-reference .course-glass { width: 100%; height: auto; min-height: 0; padding: 7%; border: 1px solid #ffffff38; border-radius: 14px; color: var(--card-text); background: linear-gradient(135deg, #ffffff0d, transparent 40%, #00000040); box-shadow: inset 0 1px 0 #ffffff26; }
.projects-reference .course-caption { font: 500 3cqw/1.2 var(--body); color: var(--card-text); }
.projects-reference .course-display { margin-top: 5cqw; font: 700 15cqw/.93 var(--display); letter-spacing: -.06em; }
.projects-reference .course-bottom { gap: 12px; padding-top: 5cqw; font: 400 2.8cqw/1.3 var(--body); color: #d2d2d2; }
.projects-reference .course-bottom > span:last-child { white-space: nowrap; }
.projects-reference .leads-visual { display: flex; flex-direction: column; min-height: 265px; padding: 6%; color: var(--card-text); background: linear-gradient(145deg, #ffffff0d, transparent), #000000; border: 1px solid #ffffff26; }
.projects-reference .leads-brand { gap: 10px; }
.projects-reference .leads-brand img { filter: grayscale(1) brightness(0) invert(1); }
.projects-reference .leads-brand > span { font: 400 clamp(9px, 2.65cqw, 12px)/1.3 var(--body); color: var(--card-muted); }
.projects-reference .demo-request { margin-top: 5cqw; }
.projects-reference .demo-request > span, .projects-reference .demo-reply > span { margin-bottom: 0; font: 400 clamp(9px, 2.6cqw, 12px)/1.3 var(--body); color: var(--card-muted); }
.projects-reference .demo-request > p { margin-top: 2cqw; font: 600 clamp(19px, 5cqw, 28px)/1.08 var(--display); letter-spacing: -.035em; max-width: 28ch; }
.projects-reference .demo-reply { margin-top: auto; padding: 4cqw 0 0; background: transparent; border-radius: 0; }
.projects-reference .demo-reply > p { margin-top: 2cqw; padding-left: 3cqw; border-left: 2px solid #ffffff50; font: 400 clamp(10px, 3cqw, 14px)/1.3 var(--body); letter-spacing: normal; }
@media (max-width: 980px) {
  .projects-reference { --card-inset: 28px; --card-gap: 23px; }
  .projects-reference .case-grid { width: calc(100% - 48px); gap: 24px; }
  .projects-reference .case-title h3 { font-size: clamp(31px, 4.4vw, 42px); }
  .projects-reference .case-description { font-size: 14px; }
}
@media (max-width: 680px) {
  .projects-reference { --card-inset: clamp(25px, 6.5vw, 38px); --card-radius: 34px; }
  .projects-reference .case-grid { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .projects-reference .case-title h3 { font-size: clamp(34px, 8.5vw, 49px); }
  .projects-reference .case-description { font-size: 15px; }
  .projects-reference .case-visual { border-radius: 18px; }
  .projects-reference .case-results dt { font-size: 36px; }
  .projects-reference .case-results dd { font-size: 10px; }
}
@media (max-width: 360px) {
  .projects-reference { --card-inset: 23px; --card-gap: 23px; }
  .projects-reference .case-title h3 { font-size: 33px; }
  .projects-reference .case-description { font-size: 14px; }
  .projects-reference .case-results { gap: 10px; }
  .projects-reference .case-results dt { font-size: 31px; }
  .projects-reference .case-results dd { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .projects-reference .case, .projects-reference .case-title h3 span { transition: none; }
}

/* ===== wordmark.css ===== */
/* Inter750/opsz32: l and k share the exact vertical outline, x100…419.5/2048em. */
.wordmark-linked {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-template-rows: .88em .79em;
  width: max-content;
  font-variation-settings: "wght" 750, "opsz" 32;
  font-optical-sizing: none;
  line-height: .79;
  letter-spacing: -.055em;
}
.wordmark.wordmark-linked > span { margin: 0; white-space: nowrap; }
.wordmark-linked > .name-prefix { grid-column: 1; grid-row: 1; }
.wordmark-linked > .name-tail { position: relative; grid-column: 2; grid-row: 1; }
.wordmark-linked > .name-surname { grid-column: 2; grid-row: 2; }
.wordmark-linked > .name-tail::after {
  content: "";
  position: absolute;
  left: .048828125em;
  width: .156005859375em;
  top: .75076953125em;
  height: .1684609375em;
  background: currentColor;
  pointer-events: none;
}
@media (max-width: 760px) {
  .wordmark-linked { font-size: 16vw; }
}

/* ===== statement.css ===== */
/* A single centered statement, independent of the saved stepped composition. */
.statement.statement-centered {
  width: calc(100% - 64px);
  max-width: none;
  margin-inline: auto;
  container-type: inline-size;
  display: grid;
  align-content: center;
  min-height: min(760px, 85svh);
  padding-block: clamp(96px, 10vw, 160px);
}
.statement.statement-centered p {
  font: 700 10.4cqw/.92 var(--display);
  letter-spacing: -.055em;
  text-align: center;
}
.statement.statement-centered span { display: block; margin: 0; }
.statement.statement-centered .quote-mobile-break { display: none; }
@media (max-width: 760px) {
  .statement.statement-centered { width: calc(100% - 32px); min-height: 70svh; padding-block: 80px; }
  .statement.statement-centered p { font-size: 14cqw; line-height: .96; }
  .statement.statement-centered .quote-mobile-break { display: initial; }
}

/* ===== space-finish.css ===== */
/* Current page only. The joined name and all saved explorations stay untouched. */
.portfolio-finish { --hover-ink: #afafaf; }
.portfolio-finish .nav-links a,
.portfolio-finish .hero-social a { font: 700 18px/1.1 var(--identity); letter-spacing: -.055em; }
.portfolio-finish .identity-role { font: 700 clamp(15px, 1.4vw, 21px)/1.15 var(--identity); letter-spacing: -.045em; }
.portfolio-finish .case-role { font-family: var(--identity); }
.portfolio-finish .work-heading h2,
.portfolio-finish .case-title h3,
.portfolio-finish .statement p { font-family: var(--identity); font-weight: 700; }

/* One text layer: a left-to-right ink reveal, inspired by the reference links. */
.portfolio-finish .ink-link,
.portfolio-finish .ink-link:is(:hover, :focus-visible),
.portfolio-finish .case-destination { text-decoration: none; }
.portfolio-finish .link-ink { position: relative; display: inline-block; color: var(--text); }
.portfolio-finish .link-ink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.22em;
  border-bottom: 1px dotted var(--text); opacity: 0;
  transform: scaleX(.65); transform-origin: left;
  transition: opacity .25s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.portfolio-finish :is(.ink-link, .case-link):is(:hover, :focus-visible) .link-ink::after { opacity: 1; transform: scaleX(1); }
.portfolio-finish .case-destination .link-ink::after { opacity: .55; transform: none; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .portfolio-finish .link-ink {
    background-image: linear-gradient(90deg, var(--hover-ink) 50%, var(--text) 50%);
    background-size: 200% 100%; background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    transition: background-position .7s cubic-bezier(.22,.61,.36,1);
  }
  .portfolio-finish :is(.ink-link, .case-link):is(:hover, :focus-visible) .link-ink { background-position: 0 0; }
}
.portfolio-finish a:focus-visible { outline: 2px dotted var(--text); outline-offset: 8px; }

/* An offset sequence instead of a uniform two-up gallery. */
.portfolio-finish .case-grid {
  width: min(1240px, calc(100% - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(64px, 9vw, 144px); row-gap: 88px;
}
.portfolio-finish .case:nth-child(even) { margin-top: clamp(130px, 15vw, 220px); }
.portfolio-finish .case { background: #000000; box-shadow: none; transition: background-color .35s ease; }
.portfolio-finish .case:is(:hover, :focus-within) { background: #101010; box-shadow: none; transform: none; }
.portfolio-finish .case-link:focus-visible { outline: 2px dotted var(--text); outline-offset: 8px; }
.portfolio-finish .case-destination { font: 700 15px/1.2 var(--identity); letter-spacing: -.035em; }

/* Broad typography, stepping toward a shared right edge. */
.portfolio-finish .statement-right {
  width: calc(100% - 64px); max-width: none; margin-inline: auto;
  container-type: inline-size; display: grid; align-content: center;
  min-height: min(760px, 85svh); padding-block: clamp(100px, 10vw, 160px);
}
.portfolio-finish .statement-right p { font-size: 10.4cqw; line-height: .94; letter-spacing: -.06em; text-align: right; }
.portfolio-finish .statement-right span { display: block; margin: 0; }
.portfolio-finish .statement-right span:first-child { margin-right: 28%; }
.portfolio-finish .statement-right span:nth-child(2) { margin-right: 8%; }
.portfolio-finish .statement-right .quote-mobile-break { display: none; }

.portfolio-finish .contact-links { gap: 18px; }
.portfolio-finish .contact-links a { align-items: center; border-radius: 14px; }
.portfolio-finish .contact-links a:is(:hover, :focus-visible) { transform: none; box-shadow: none; }
.portfolio-finish .contact-links .social-icon { width: 48px; height: 56px; background: transparent; }
.portfolio-finish .contact-links .social-icon svg { width: 25px; height: 25px; transition: transform .35s ease, opacity .35s ease; }
.portfolio-finish .contact-links a:hover .social-icon svg { opacity: .72; transform: translateY(-2px); }
.portfolio-finish .contact-links .telegram-link { gap: 16px; margin-right: 28px; }
.portfolio-finish .telegram-link .social-icon { width: 80px; height: 64px; background: var(--wine); }
.portfolio-finish .contact-label { font: 700 23px/.95 var(--identity); letter-spacing: -.06em; }
.portfolio-finish .telegram-link:hover .social-icon svg { opacity: 1; transform: translate(2px, -2px); }

@media (max-width: 980px) {
  .portfolio-finish .case-grid { width: calc(100% - 48px); column-gap: 48px; row-gap: 64px; }
}
@media (max-width: 760px) {
  .portfolio-finish .nav-links a, .portfolio-finish .hero-social a { font-size: 16px; }
  .portfolio-finish .case-grid { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .portfolio-finish .case:nth-child(even) { margin-top: 0; }
  .portfolio-finish .statement-right { width: calc(100% - 32px); min-height: 65svh; padding-block: 88px; }
  .portfolio-finish .statement-right p { font-size: 13.8cqw; line-height: .98; letter-spacing: -.055em; }
  .portfolio-finish .statement-right span:first-child,
  .portfolio-finish .statement-right span:nth-child(2) { margin-right: 0; }
  .portfolio-finish .statement-right .quote-mobile-break { display: initial; }
  .portfolio-finish .contact-links { justify-content: flex-end; gap: 6px; }
  .portfolio-finish .contact-links .telegram-link { gap: 12px; margin-right: auto; }
  .portfolio-finish .telegram-link .social-icon { width: 62px; height: 56px; }
  .portfolio-finish .contact-label { font-size: 19px; }
  .portfolio-finish .contact-links a:not(.telegram-link) .social-icon { width: 44px; }
}
@media (max-width: 360px) {
  .portfolio-finish .contact-label { font-size: 17px; }
  .portfolio-finish .telegram-link .social-icon { width: 52px; }
  .portfolio-finish .contact-links .telegram-link { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-finish .link-ink, .portfolio-finish .link-ink::after,
  .portfolio-finish .case, .portfolio-finish .social-icon svg { transition: none; }
  .portfolio-finish .contact-links a:hover .social-icon svg { transform: none; }
}
@media (forced-colors: active) {
  .portfolio-finish .link-ink { background: none; color: LinkText; }
  .portfolio-finish .link-ink::after { border-color: LinkText; }
}

/* ===== space-air.css ===== */
/* Translucent study: only the current page, with earlier iterations frozen. */
.portfolio-air .identity {
  opacity: .8;
  filter: drop-shadow(0 10px 24px #00000040);
}
.portfolio-air .wordmark { text-shadow: 0 1px 0 #ffffff30; }

.portfolio-air .case-grid {
  width: min(1120px, calc(100% - 144px));
  column-gap: clamp(88px, 13vw, 180px); row-gap: 96px; padding-top: 32px;
}
.portfolio-air .case:nth-child(even) { margin-top: clamp(200px, 24vw, 340px); }
.portfolio-air .case,
.portfolio-air .case:is(:hover, :focus-within) { background: transparent; box-shadow: none; transform: none; }
.portfolio-air .case-link { gap: 0; padding: 0; border-radius: 30px; }
.portfolio-air .case-visual { aspect-ratio: 1.25; border-radius: 30px; min-height: 0; }
.portfolio-air .emcd-visual > img { object-position: 65% 50%; }
.portfolio-air .channel-visual > img { object-position: 50% 44%; }

/* The caption straddles the picture edge so real color sits behind the glass. */
.portfolio-air .case-caption {
  position: relative; z-index: 1;
  margin: -72px 18px 0; padding: 28px 26px 26px;
  border: 1px solid #ffffff1c; border-radius: 24px;
  background: #171717;
  box-shadow: inset 0 1px 0 #ffffff12, 0 18px 40px #00000026;
  transition: transform .35s ease, background-color .35s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .portfolio-air .case-caption {
    background: linear-gradient(145deg, #ffffff0a, #00000026), #111111a6;
    -webkit-backdrop-filter: blur(22px) saturate(.8);
    backdrop-filter: blur(22px) saturate(.8);
  }
}
.portfolio-air .case-link:is(:hover, :focus-visible) .case-caption { transform: translateY(-4px); background-color: #202020ba; }
.portfolio-air .case-title { margin-top: 0; }
.portfolio-air .case-title h3 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.02; letter-spacing: -.05em; }
.portfolio-air .case-link:is(:hover, :focus-visible) .case-title h3 span { background: transparent; box-shadow: none; color: var(--text); }
.portfolio-air .case-description { margin-top: 12px; max-width: 32ch; font-size: 14px; line-height: 1.4; color: #cdcdca; }
.portfolio-air .case:is(:hover, :focus-within) .case-description { color: #cdcdca; }
.portfolio-air .case-destination { margin-top: 22px; font-size: 12px; font-weight: 500; letter-spacing: -.02em; }

.portfolio-air .course-visual {
  display: grid; place-items: center; padding: 0 0 40px;
  background: linear-gradient(135deg, #ffffff16, transparent 65%), var(--wine);
}
.portfolio-air .course-monogram {
  font: 750 43cqw/.85 var(--identity); letter-spacing: -.07em;
  color: #e9e9e7b8; text-shadow: 0 1px 0 #ffffff50, 0 18px 30px #00000026;
}
.portfolio-air .leads-visual {
  display: grid; place-items: center; padding: 0 10% 40px; border: 0;
  background: linear-gradient(145deg, #ffffff18, #ffffff00 70%), #171717;
}
.portfolio-air .leads-visual > img,
.portfolio-air .case-link:is(:hover, :focus-visible) .leads-visual > img {
  width: 82%; height: auto; object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1); opacity: .78; transform: none;
}
@media (max-width: 1100px) {
  .portfolio-air .case-grid { width: calc(100% - 80px); column-gap: 64px; }
  .portfolio-air .case-caption { margin-inline: 12px; padding: 25px 22px; }
}
@media (max-width: 760px) {
  .portfolio-air .case-grid { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 16px; }
  .portfolio-air .case:nth-child(even) { margin-top: 0; }
  .portfolio-air .case-visual { aspect-ratio: 1.25; border-radius: 26px; }
  .portfolio-air .case-caption { margin: -64px 12px 0; padding: 24px 22px; border-radius: 22px; }
  .portfolio-air .case-title h3 { font-size: clamp(27px, 7.4vw, 36px); }
  .portfolio-air .case-description { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-air .case-caption { transition: none; }
  .portfolio-air .case-link:is(:hover, :focus-visible) .case-caption { transform: none; }
}
@media (forced-colors: active) {
  .portfolio-air .identity { opacity: 1; filter: none; }
  .portfolio-air .case-caption,
  .portfolio-air .case-link:is(:hover, :focus-visible) .case-caption { background: Canvas; border-color: CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===== depth.css ===== */
@property --caption-lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* A compact stagger: visual offset no longer enlarges both grid rows. */
.portfolio-depth .case-grid {
  --stagger: clamp(100px, 12vw, 170px);
  column-gap: clamp(56px, 8vw, 112px); row-gap: 60px;
  padding-top: 12px; padding-bottom: var(--stagger);
}
.portfolio-depth .case:nth-child(even),
.portfolio-depth .case:nth-child(even):is(:hover, :focus-within) {
  margin-top: 0; transform: translateY(var(--stagger));
}

/* JS only activates these layers for a desktop mouse without reduced motion. */
.portfolio-depth .identity.depth-layer {
  transform: perspective(1100px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 0)
    rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
  transform-origin: 50% 65%;
}
.portfolio-depth .case-caption.depth-layer,
.portfolio-depth .case-link:is(:hover, :focus-visible) .case-caption.depth-layer {
  transform: perspective(900px) translate3d(var(--depth-x, 0px), calc(var(--depth-y, 0px) + var(--caption-lift, 0px)), 0)
    rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
  transition: background-color .35s ease, --caption-lift .35s ease;
}
.portfolio-depth .case-link:is(:hover, :focus-visible) .case-caption { --caption-lift: -4px; }
.portfolio-depth .is-depth-moving { will-change: transform; }
@media (max-width: 760px) {
  .portfolio-depth .case-grid { --stagger: 0px; gap: 40px; padding-block: 8px 0; }
  .portfolio-depth .case:nth-child(even),
  .portfolio-depth .case:nth-child(even):is(:hover, :focus-within) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-depth .identity.depth-layer,
  .portfolio-depth .case-caption.depth-layer,
  .portfolio-depth .case-link:is(:hover, :focus-visible) .case-caption,
  .portfolio-depth .case-link:is(:hover, :focus-visible) .case-caption.depth-layer { transform: none; transition: none; }
  .portfolio-depth .is-depth-moving { will-change: auto; }
}

/* ===== role.css ===== */
/* One finite role preview. Inter, color and position come from the identity. */
.identity-role.role-rotator {
  display: inline-grid;
  grid-template-columns: max-content;
  max-width: 100%;
  min-height: 1.15em;
  vertical-align: top;
}
.role-rotator .role-visible,
.role-rotator .role-sizer {
  grid-area: 1 / 1;
  white-space: nowrap;
}
.role-rotator .role-sizer { display: grid; visibility: hidden; pointer-events: none; }
.role-rotator .role-sizer > span { grid-area: 1 / 1; }
.role-rotator .role-accessible {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}
.role-rotator .role-visible[data-state="leaving"] { animation: role-phrase-out 140ms ease-in both; }
.role-rotator .role-visible[data-state="entering"] { animation: role-phrase-in 220ms ease-out both; }
.role-rotator[data-role-paused="true"] .role-visible { animation-play-state: paused; }
@keyframes role-phrase-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes role-phrase-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .role-rotator .role-visible { animation: none !important; transform: none; opacity: 1; }
}

/* ===== glass-scroll.css ===== */
/* Glass name pass. Scoped to the current page; every earlier study is frozen.
 * Archivo v25, unmodified Google Fonts variable WOFF2 (Latin subset).
 * License: assets/fonts/OFL-Archivo.txt. Cyrillic falls back to Inter/Golos.
 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --display: "Archivo", "Golos Display", Arial, sans-serif;
  --identity: "Archivo", "Inter Display", Arial, sans-serif;
  --body: "Archivo", "Golos Text", Arial, sans-serif;
  --dim: #6f6f6c;
}

/* One dense grotesque everywhere, tighter than the previous mixed setting. */
.portfolio-glass .nav-links a,
.portfolio-glass .hero-social a { font: 600 16px/1.1 var(--identity); letter-spacing: -.03em; }
.portfolio-glass .identity-role { font: 600 clamp(14px, 1.3vw, 19px)/1.15 var(--identity); letter-spacing: -.025em; color: #dcdcd9; }
.portfolio-glass .work-heading h2,
.portfolio-glass .case-title h3,
.portfolio-glass .statement p { letter-spacing: -.05em; }
/* Project copy is Russian: set entirely in Golos so Latin "ai" and Cyrillic share one face. */
.portfolio-glass .work-heading > p { max-width: 30ch; font: 400 clamp(16px, 1.45vw, 19px)/1.32 "Golos Text", Arial, sans-serif; letter-spacing: -.01em; color: #c4c4c0; }
.portfolio-glass .case-description { max-width: 32ch; margin-top: 12px; font: 400 clamp(14px, 1.25vw, 16px)/1.4 "Golos Text", Arial, sans-serif; letter-spacing: -.005em; color: #bdbdb9; }
.portfolio-glass .case:is(:hover, :focus-within) .case-description { color: #e0e0dc; }
.portfolio-glass .case-destination { margin-top: 22px; font: 600 clamp(13px, 1.1vw, 15px)/1.2 var(--identity); letter-spacing: -.02em; }
.portfolio-glass .case-destination .link-ink::after { bottom: -.18em; }
.portfolio-glass .case-caption { padding: 30px 28px 28px; }
/* The company card is a fact, not a link: no pointer, no lift, no highlight. */
.portfolio-glass .case-static { cursor: default; }
.portfolio-glass .case:has(.case-static):is(:hover, :focus-within) { background: transparent; }
.portfolio-glass .case-static:hover .case-caption { transform: none; }
.portfolio-glass .case-static:hover .case-title h3 span { background: transparent; box-shadow: none; }
.portfolio-glass .case-static:hover .case-description { color: #bdbdb9; }
.portfolio-glass .case-static:hover .case-part { color: var(--dim); }

/* Her part in each project: one quiet grey word on the title line, right-aligned. */
.portfolio-glass .case-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.portfolio-glass .case-part { flex: none; font: 600 clamp(12px, 1vw, 14px)/1.2 var(--identity); letter-spacing: -.01em; color: var(--dim); white-space: nowrap; }
.portfolio-glass .case:is(:hover, :focus-within) .case-part { color: #9a9a97; }
.portfolio-glass .case-title h3 { font-size: clamp(30px, 3vw, 44px); }
.portfolio-glass .case-flag { font-family: "Golos Text", Arial, sans-serif; font-weight: 500; letter-spacing: 0; }

/* The measured stem bridge, re-fitted for Archivo at wght 760. The bar runs
 * .03em into both stems: same colour inside one blend group, so the overlap is
 * invisible, while a flush joint would show anti-aliased hairlines. */
.portfolio-glass .wordmark-linked { font-variation-settings: "wght" 760; letter-spacing: -.07em; }
.portfolio-glass .wordmark-linked > .name-tail::after {
  left: .0629em;
  width: .1539em;
  top: .6968em;
  height: .2157em;
}

/* Glass name, as on the reference: near-white letters that take the difference
 * of whatever the film shows behind them. Nothing between the name and the
 * film may isolate a stacking context, or the blend falls back to plain white. */
.portfolio-glass .identity,
.portfolio-glass .identity.depth-layer,
.portfolio-glass .identity.is-depth-moving {
  opacity: 1;
  filter: none;
  transform: none;
  will-change: auto;
  z-index: auto;
}
.portfolio-glass .wordmark {
  color: #e6e6e4;
  mix-blend-mode: difference;
  text-shadow: none;
  animation: none;
  /* Crisp glass, as on the reference: full inversion, sharp edges. The name lifts
   * and dissolves only as the first screen scrolls away. */
  opacity: calc(1 - var(--hero-scroll, 0) * .6);
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -120px), 0) scale(calc(1 - var(--hero-scroll, 0) * .06));
  transform-origin: 0 100%;
}
/* Set by the script before first paint, only while it is about to play the lamp. */
.portfolio-glass .wordmark[data-lamp="dark"] { opacity: 0; }

/* The role: one grey line cycling her three roles, its left edge on the k of the
 * surname. .6148em = the measured second column (.5519em) plus the k's ink offset
 * (.0629em) minus the .02em of extra tightening, against the wordmark's own font size. */
.portfolio-glass .identity-role {
  margin: 22px 0 0 calc(.5948 * clamp(74px, 10.2vw, 170px));
  font: 500 clamp(14px, 1.25vw, 18px)/1.15 var(--identity);
  letter-spacing: -.02em;
  color: #8f8f8c;
}
.portfolio-glass .role-rotator .role-visible,
.portfolio-glass .role-rotator .role-sizer { white-space: nowrap; }
/* Let more of the film reach the name; the page still fades into the black scene. */
.portfolio-glass .cover-shade {
  background:
    linear-gradient(180deg, #06060699 0%, #06060600 24%, #06060600 62%, #06060640 84%, #060606 100%),
    linear-gradient(90deg, #06060633 0%, #06060600 50%);
}
@media (max-width: 760px) {
  .portfolio-glass .identity-role { margin-left: calc(.5948 * 16vw); }
  .portfolio-glass .cover-shade {
    background: linear-gradient(180deg, #060606b3 0%, #06060600 24%, #06060600 58%, #06060650 82%, #060606 100%);
  }
}

/* Nothing on the page follows the mouse any more; the caption keeps only its hover lift. */
.portfolio-glass .case-caption.depth-layer,
.portfolio-glass .case-link:is(:hover, :focus-visible) .case-caption.depth-layer {
  transform: translateY(var(--caption-lift, 0px));
}
.portfolio-glass .is-depth-moving { will-change: auto; }
/* Safari before 16 has no overflow: clip; keep the root itself from ever scrolling sideways. */
html { overflow-x: hidden; }
body.portfolio-glass { overflow-x: clip; }

/* A small lamp on the intensive: it has a start coming. */
.portfolio-glass .case-course .case-link { position: relative; }
.portfolio-glass .case-flag {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px 10px 13px;
  border-radius: 999px;
  border: 1px solid #ffffff2b;
  background: #0a0a0ad9;
  color: #e9e9e7;
  font: 600 13px/1 var(--identity);
  letter-spacing: -.02em;
}
.portfolio-glass .flag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4f4f1;
  box-shadow: 0 0 0 0 #f4f4f180;
  animation: flag-pulse 1.9s ease-out infinite;
}
@keyframes flag-pulse {
  0% { box-shadow: 0 0 0 0 #f4f4f18c; }
  70% { box-shadow: 0 0 0 9px #f4f4f100; }
  100% { box-shadow: 0 0 0 0 #f4f4f100; }
}

/* Reference detail: copy warms from grey to white as the block crosses the screen. */
.portfolio-glass [data-reveal] span.reveal-word { display: inline; margin: 0; }
.portfolio-glass .reveal-word { color: var(--dim); transition: color .12s linear; }
.portfolio-glass .statement .reveal-word { color: #57565a; }
.portfolio-glass [data-reveal] .reveal-word[data-lit="1"] { color: inherit; }

/* A soft light leak behind the work, like the glow under the reference cards. */
.portfolio-glass .projects { position: relative; isolation: isolate; overflow: hidden; }
.portfolio-glass .projects::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 12% 0 5%;
  pointer-events: none;
  background:
    radial-gradient(56% 28% at 6% 22%, #ffffff10, transparent 70%),
    radial-gradient(50% 26% at 94% 62%, #7a1a1421, transparent 72%);
}

/* Closing block. The quote sets left, at a size that always fits, then three
 * contact rows with the destination written out, so nothing has to be guessed. */
.portfolio-glass .statement-right {
  width: calc(100% - 80px);
  max-width: 1600px;
  min-height: 0;
  padding: clamp(96px, 11vw, 180px) 0 clamp(72px, 8vw, 120px);
  display: block;
}
.portfolio-glass .statement-right p {
  max-width: 17ch;
  font-size: clamp(38px, 6.4vw, 112px);
  line-height: .98;
  letter-spacing: -.05em;
  text-align: left;
}
.portfolio-glass .statement-right > p > span { display: block; margin: 0; }
.portfolio-glass .statement-right .quote-mobile-break { display: none; }

.portfolio-glass .contacts { padding-bottom: 88px; }
.portfolio-glass .contacts-label {
  display: block;
  margin-bottom: 18px;
  font: 600 14px/1 var(--identity);
  letter-spacing: -.02em;
  color: var(--dim);
}
.portfolio-glass .contact-links { display: block; }
.portfolio-glass .contact-row,
.portfolio-glass .contact-links a {
  display: grid;
  grid-template-columns: minmax(120px, .28fr) 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid #ffffff1f;
  border-radius: 0;
  transition: none;
}
.portfolio-glass .contact-links a:last-child { border-bottom: 1px solid #ffffff1f; }
.portfolio-glass .contact-links a:is(:hover, :focus-visible) { transform: none; box-shadow: none; }
.portfolio-glass .contact-kind { font: 500 clamp(14px, 1.2vw, 17px)/1.2 var(--identity); letter-spacing: -.02em; color: #9a9a97; }
.portfolio-glass .contact-value { min-width: 0; font: 600 clamp(22px, 2.9vw, 44px)/1.05 var(--identity); letter-spacing: -.045em; overflow-wrap: anywhere; }
.portfolio-glass .contact-arrow {
  font: 500 clamp(20px, 2.2vw, 32px)/1 var(--identity);
  color: #9a9a97;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), color .35s ease;
}
.portfolio-glass .contact-links a:is(:hover, :focus-visible) .contact-arrow { color: var(--text); transform: translate(4px, -4px); }
@media (max-width: 760px) {
  .portfolio-glass .statement-right { width: calc(100% - 40px); padding: 72px 0 56px; }
  .portfolio-glass .statement-right p { max-width: none; font-size: clamp(34px, 9.6vw, 48px); line-height: 1; }
  .portfolio-glass .contact-links a { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 20px 0; }
  .portfolio-glass .contact-kind { grid-column: 1 / -1; }
  .portfolio-glass .contact-value { font-size: clamp(20px, 6vw, 28px); }
  .portfolio-glass .contact-arrow { font-size: 20px; }
  .portfolio-glass .contacts { padding-bottom: 56px; }
  .portfolio-glass .case-flag { top: 14px; left: 14px; padding: 9px 13px 9px 11px; font-size: 12px; }
  /* Phone cards: the title must share its line with the role without breaking. */
  .portfolio-glass .case-title h3 { font-size: clamp(24px, 6.6vw, 28px); }
  .portfolio-glass .case-part { font-size: 12px; }
  .portfolio-glass .case-caption { padding: 22px 20px 24px; }
  .portfolio-glass .case-description { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-glass .wordmark { opacity: 1; }
  .portfolio-glass .reveal-word { color: inherit; transition: none; }
  .portfolio-glass .contact-arrow { transition: none; }
  .portfolio-glass .flag-dot { animation: none; box-shadow: none; }
}
@media (forced-colors: active) {
  .portfolio-glass .wordmark { mix-blend-mode: normal; color: CanvasText; opacity: 1; }
  .portfolio-glass .reveal-word { color: CanvasText; }
  .portfolio-glass .contact-links a { border-color: CanvasText; }
  .portfolio-glass .case-flag { background: Canvas; color: CanvasText; border-color: CanvasText; }
}