@font-face {
  font-family: "TT Firs Neue";
  src: url("fonts/tt-firs-neue-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TT Firs Neue";
  src: url("fonts/tt-firs-neue-demibold.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #090b10;
  --bg-soft: #0d1017;
  --surface: #11151e;
  --surface-2: #151a25;
  --text: #f3f5f8;
  --muted: #969dac;
  --muted-2: #6f7684;
  --line: #262c37;
  --line-bright: #3b4352;
  --blue: #4c7dff;
  --blue-bright: #6e95ff;
  --violet: #7566ff;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 58px);
  --header-height: 82px;
  --radius: 10px;
  --ease: cubic-bezier(.2,.75,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "TT Firs Neue", Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::selection { background: var(--blue); color: white; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }

.skip-link {
  position: fixed;
  left: 18px;
  top: -100px;
  z-index: 1000;
  padding: 12px 16px;
  background: var(--blue);
  color: white;
  border-radius: 6px;
}
.skip-link:focus { top: 18px; }

.section-shell {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.wordmark { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.site-nav { display: flex; align-self: stretch; align-items: center; gap: clamp(28px, 4vw, 70px); }
.site-nav a {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: #d8dce4;
  font-size: 15px;
  transition: color .25s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  background: var(--blue);
  transition: right .3s var(--ease);
}
.site-nav a:hover, .site-nav a.is-active { color: white; }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }
.nav-toggle { display: none; background: transparent; border: 0; padding: 10px; color: white; }
.nav-toggle span { display: block; width: 24px; height: 1px; margin: 6px 0; background: currentColor; transition: transform .25s ease; }

.hero {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
  align-items: center;
  gap: clamp(28px, 4vw, 74px);
  padding-top: clamp(42px, 6vh, 74px);
  padding-bottom: clamp(46px, 7vh, 88px);
}

.hero-copy { position: relative; z-index: 2; }
.hero h1 {
  max-width: 770px;
  margin: 0;
  font-size: clamp(46px, 5.05vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 600;
}
.hero h1 span { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: .09em; text-underline-offset: .08em; }
.hero-copy > p {
  max-width: 660px;
  margin: 30px 0 0;
  color: #b2b8c4;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.52;
}
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.button {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 17px;
  transition: transform .25s var(--ease), background .25s ease, box-shadow .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: white; box-shadow: 0 12px 38px rgba(76,125,255,.18); }
.button-primary:hover { background: var(--blue-bright); box-shadow: 0 16px 44px rgba(76,125,255,.26); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #dfe4ec; }
.text-link span { color: var(--blue-bright); transition: transform .25s ease; }
.text-link:hover span { transform: translateX(4px); }
.social-row { display: flex; gap: 28px; margin-top: 28px; color: #c6cbd4; font-size: 14px; }
.social-row a { border-bottom: 1px solid transparent; }
.social-row a:hover { color: white; border-color: var(--blue); }
.hero-stats { display: flex; align-items: stretch; gap: 0; margin: 42px 0 0; }
.hero-stats div { min-width: 138px; padding: 0 28px; border-left: 1px solid var(--line-bright); }
.hero-stats div:first-child { padding-left: 0; border-left: 0; }
.hero-stats dt { color: var(--blue); font-size: clamp(27px, 2.3vw, 38px); line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.hero-stats dd { margin: 8px 0 0; color: #b5bbc6; font-size: 14px; }

.hero-visual { position: relative; min-height: min(650px, 72vh); align-self: stretch; isolation: isolate; }
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 16% 1% 4% 12%;
  z-index: -2;
  background: radial-gradient(circle at 50% 45%, rgba(39,63,118,.4), rgba(9,11,16,0) 68%);
}
.hero-photo-wrap {
  position: absolute;
  left: 1%;
  bottom: 0;
  z-index: 3;
  width: 72%;
  aspect-ratio: 1/1.09;
  overflow: hidden;
  border-radius: 48% 48% 10px 10px;
  filter: saturate(.85) contrast(1.03);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.hero-product {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  border: 1px solid var(--line-bright);
  background: #0f1420;
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
.hero-product img { width: 100%; height: 100%; object-fit: cover; }
.hero-product-one { right: 0; top: 18%; width: 54%; aspect-ratio: .84; border-radius: 18px; transform: rotate(2deg); }
.hero-product-two { right: -3%; bottom: 4%; width: 38%; aspect-ratio: .78; border-radius: 24px; transform: rotate(4deg); }
.role-label {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: 6%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border: 1px solid var(--line-bright);
  border-radius: 100px;
  background: rgba(10,13,19,.88);
  backdrop-filter: blur(16px);
  white-space: nowrap;
}
.role-label span { color: var(--blue-bright); }
.role-label i { width: 4px; height: 4px; background: #dce2ee; border-radius: 50%; }

.works, .about, .experience, .contact { padding-top: clamp(90px, 11vw, 170px); padding-bottom: clamp(90px, 11vw, 170px); border-top: 1px solid var(--line); }
.section-index { display: flex; align-items: center; gap: 20px; color: var(--blue-bright); font-size: 13px; }
.section-index i { display: block; width: 110px; height: 1px; background: var(--line-bright); }
.section-heading-row { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin: 24px 0 46px; }
.section-heading-row h2, .about h2, .experience h2, .contact h2 { margin: 0; font-size: clamp(39px, 4.4vw, 67px); line-height: 1.02; letter-spacing: -.05em; font-weight: 600; }

.featured-case { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: clamp(30px, 4.5vw, 70px); align-items: stretch; }
.featured-media { min-height: 560px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #0d1830; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.featured-media:hover img { transform: scale(1.02); }
.featured-copy { padding: 8px 0; display: flex; flex-direction: column; align-items: flex-start; }
.category { margin: 0 0 17px; color: var(--blue-bright); font-size: 14px; }
.featured-copy h3 { margin: 0; font-size: clamp(34px, 3.2vw, 52px); line-height: 1.05; letter-spacing: -.045em; font-weight: 500; }
.featured-copy > p:not(.category) { margin: 24px 0; color: #b5bbc6; font-size: 18px; line-height: 1.55; }
.result-line { width: 100%; padding-bottom: 23px; border-bottom: 1px solid var(--line); }
.result-line span { display: block; color: var(--blue-bright); font-size: 13px; }
.result-line strong { display: block; margin-top: 5px; font-size: 16px; font-weight: 400; }
.case-steps { width: 100%; margin: 0 0 28px; padding: 0; list-style: none; }
.case-steps li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); color: #cbd0d9; }
.case-steps li span { color: var(--blue-bright); font-size: 13px; }
.featured-copy .button { width: 100%; margin-top: auto; }

.project-index { margin-top: 68px; border-top: 1px solid var(--line); }
.project-row { min-height: 132px; display: grid; grid-template-columns: 54px minmax(230px, 330px) minmax(0, 1fr) 32px; align-items: center; gap: clamp(18px, 3vw, 48px); padding: 16px 8px; border-bottom: 1px solid var(--line); transition: background .25s ease, padding .35s var(--ease); }
.project-row:hover { padding-left: 18px; padding-right: 18px; background: var(--bg-soft); }
.project-num { color: var(--muted-2); font-size: 13px; }
.project-thumb { height: 98px; overflow: hidden; border-radius: 5px; background: var(--surface); }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.project-row:hover .project-thumb img { transform: scale(1.035); }
.project-name { font-size: clamp(21px, 2vw, 30px); letter-spacing: -.03em; }
.project-name small { display: block; margin-top: 8px; color: var(--blue-bright); font-size: 13px; letter-spacing: 0; }
.project-arrow { justify-self: end; font-size: 23px; transition: transform .25s ease; }
.project-row:hover .project-arrow { transform: translate(4px,-4px); }
.project-row-media-right { grid-template-columns: 54px minmax(0,1fr) minmax(230px,330px) 32px; }

.about-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(440px,1.2fr); gap: clamp(40px, 7vw, 120px); align-items: center; margin-top: 34px; }
.about-copy h2 { max-width: 650px; }
.about-copy p { max-width: 610px; margin: 30px 0 0; color: #b3b9c5; font-size: clamp(17px,1.35vw,21px); line-height: 1.56; }
.about-copy .text-link { margin-top: 32px; color: var(--blue-bright); }
.about-photo { min-height: 650px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; filter: saturate(.78) contrast(1.08); }

.experience-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(280px,.6fr); gap: 0; margin-top: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.experience-grid > div { padding: 54px 0; }
.tools-panel { padding-left: clamp(38px,5vw,80px) !important; border-left: 1px solid var(--line); }
.experience h2 { font-size: clamp(36px,4vw,56px); }
.timeline { margin: 38px 0 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 28px; padding: 18px 24px 18px 25px; border-left: 1px solid var(--line-bright); }
.timeline li::before { content:""; position:absolute; left:-5px; top:25px; width:9px; height:9px; border-radius:50%; background:var(--blue); }
.timeline time { color: #c4c9d2; }
.timeline strong, .timeline span { display: block; font-size: 18px; font-weight: 400; }
.timeline span { margin-top: 4px; color: var(--muted); font-size: 15px; }
.tools-panel ul { columns: 2; column-gap: 34px; margin: 38px 0 30px; padding: 0; list-style: none; }
.tools-panel li { margin: 0 0 14px; color: #d2d6de; font-size: 18px; break-inside: avoid; }
.tools-panel .text-link { color: var(--blue-bright); }

.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,.72fr); gap: clamp(60px,8vw,140px); margin-top: 34px; }
.contact-callout h2 { font-size: clamp(54px,6.2vw,92px); }
.contact-callout .button { margin-top: 42px; min-width: min(100%,390px); }
.contact-links > a { display:flex; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); font-size:18px; }
.contact-links > a:first-child { border-top:1px solid var(--line); }
.contact-links b { color:var(--blue-bright); font-weight:400; transition:transform .25s ease; }
.contact-links > a:hover b { transform:translate(4px,-4px); }
.contact-secondary { display:flex; flex-direction:column; gap:18px; padding-top:34px; }
.contact-secondary a { color:var(--blue-bright); }
.contact-secondary span { margin-left:10px; }
.site-footer { display:flex; justify-content:space-between; gap:24px; padding-top:30px; padding-bottom:42px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
.site-footer a:hover { color:white; }

/* Shared styling for the original detailed case and utility pages. */
.gradient-bg { display: none !important; }
.page-case, .page-projects, .page-cv, .page-stack, .page-contact { background: var(--bg); }
.page-case .nav-overlay, .page-projects .nav-overlay, .page-cv .nav-overlay, .page-stack .nav-overlay, .page-contact .nav-overlay {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--header-height);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(22px,3vw,50px);
  padding: 0 var(--gutter);
  background: rgba(9,11,16,.9);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.nav-overlay a { color:#d2d7e0; font-size:14px; }
.nav-overlay a:hover { color:white; }
.sidebar-home {
  position: fixed !important;
  z-index: 85;
  top: 0;
  left: var(--gutter);
  width: auto !important;
  height: var(--header-height);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 !important;
}
.profile-link { display:flex; align-items:center; gap:13px; }
.avatar { width:42px; height:42px; overflow:hidden; border-radius:50%; border:1px solid var(--line-bright); flex:none; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.profile-name { display:flex; flex-direction:column; line-height:1.15; }
.profile-name .name { font-size:13px; font-weight:600; }
.profile-name .role { margin-top:4px; color:var(--muted); font-size:10px; letter-spacing:.08em; }
.sidebar-home .social-links { display:none; }
.header-bar { display:none !important; }
.case-root, .projects-root, .cv-root, .stack-root, .contact-root { width:100%; }
.case-main-stack, .projects-main-stack, .cv-main-stack, .stack-main-stack, .contact-main-stack { display:block !important; }
.case-right-stack, .pr-right-stack, .cv-right-stack, .stack-right-stack, .contact-right-stack { width:min(100%, var(--max)); margin:0 auto; padding:calc(var(--header-height) + 70px) var(--gutter) 120px; }
.case-heading, .pr-heading, .cv-heading, .stack-heading { max-width:1050px; margin:0 0 55px; font-size:clamp(48px,6vw,86px); line-height:1; letter-spacing:-.055em; font-weight:600; }
.case-content, .pr-content, .cv-content, .stack-content, .contact-zone { width:100%; }

.case-zone { display:block; }
.case-study-col { width:min(100%, 1080px); margin:0 auto; }
.case-photo-wrapper { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.case-photo-wrapper img { width:100%; height:auto; }
.case-categories { display:flex; gap:14px; margin:22px 0 54px; font-size:14px; }
.case-cat-label { color:var(--muted); }
.case-cat-value { color:var(--blue-bright); }
.case-body-card { padding:0; background:transparent !important; border:0 !important; }
.case-body-inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 70px; }
.case-body-inner section { padding:32px 0; border-top:1px solid var(--line); }
.case-body-inner h3 { margin:0 0 18px; color:var(--text); font-size:26px; line-height:1.15; font-weight:500; letter-spacing:-.03em; }
.case-body-inner p { margin:0 0 16px; color:#adb4c0; font-size:17px; line-height:1.65; }
.case-body-inner b { color:var(--text); font-weight:500; }
.case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:72px; }
.case-gallery img { width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.case-other-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.case-other-heading { grid-column:1/-1; margin:0 0 8px; font-size:34px; font-weight:500; }
.portrait-card, .case-view-all { min-height:260px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.portrait-card { display:grid; grid-template-columns:1fr 1fr; }
.portrait-photo img { width:100%; height:100%; object-fit:cover; }
.portrait-post { padding:24px; display:flex; flex-direction:column; justify-content:flex-end; }
.portrait-post h3 { margin:0 0 8px; font-size:22px; }
.portrait-post p { color:var(--muted); }
.case-view-all { display:flex; align-items:center; justify-content:center; }
.case-view-all-btn { font-size:24px; color:var(--blue-bright); }
.globe-wrap { display:none; }

.pr-projects-zone { display:block; }
.pr-project-list { border-top:1px solid var(--line); }
.pr-card { min-height:150px; display:grid; grid-template-columns:260px minmax(0,1fr) 40px; align-items:center; gap:30px; padding:16px 8px; border-bottom:1px solid var(--line); }
.pr-card-photo { height:116px; overflow:hidden; border-radius:6px; }
.pr-card-photo img { width:100%; height:100%; object-fit:cover; }
.pr-card-post h3 { margin:0; font-size:26px; line-height:1.15; font-weight:500; }
.pr-card-cat { margin:8px 0 0; color:var(--blue-bright); font-size:13px; }
.pr-card-arrow { justify-self:end; font-size:24px; }
.pr-card:hover { background:var(--bg-soft); }
.pr-side-bentos, .pr-bottom-bentos { display:grid; gap:16px; }
.bento-card, .pr-bento-contacts, .cv-bento, .cv-bento-stack, .cv-bento-contacts, .stack-tools-card, .stack-side-bento, .stack-bento-contacts, .stack-bento-video, .contact-card-quote, .contact-card-info { border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.bento-card { min-height:230px; padding:22px; }
.bento-card-title { font-size:22px; }
.qr-wrap { margin-top:24px; }
.pr-stack-icons, .stack-icons-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.pr-tool-icon, .tool-icon { width:48px; height:48px; padding:12px; border-radius:10px; background:#e8ebf1; }
.pr-bottom-bentos { margin-top:16px; grid-template-columns:260px; }

.cv-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.cv-bento { padding:30px; }
.cv-bento-header { display:flex; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.cv-bento-header h2 { margin:0; font-size:26px; font-weight:500; }
.cv-bento-date { color:var(--blue-bright); }
.cv-item, .cv-item-two { padding:18px 0; border-bottom:1px solid var(--line); }
.cv-item-main { margin:0; font-size:17px; }
.cv-item-sub { margin:6px 0 0; color:var(--muted); }
.cv-bottom-bentos { grid-column:1/-1; display:grid; grid-template-columns:1fr; gap:18px; }
.cv-bento-stack, .cv-bento-contacts { min-height:220px; padding:26px; }

.stack-zone { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; }
.stack-tools-card { padding:30px; }
.stack-tools-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; }
.stack-tool-item { display:flex; align-items:center; gap:14px; padding:20px 10px; border-bottom:1px solid var(--line); }
.stack-tool-icon { width:44px; height:44px; padding:11px; border-radius:9px; background:#eef0f4; }
.stack-tool-name { font-size:18px; }
.stack-side-bentos { display:grid; gap:18px; }
.stack-side-bento { min-height:230px; padding:24px; overflow:hidden; }
.mini-mosaic, .projects-mosaic { display:flex; gap:6px; height:170px; overflow:hidden; margin-top:20px; }
.mosaic-col { flex:1; display:flex; flex-direction:column; gap:6px; }
.mosaic-col img { width:100%; height:70px; object-fit:cover; }
.stack-bottom-bentos { display:grid; grid-template-columns:1fr 1.5fr; gap:18px; margin-top:18px; }
.stack-bento-contacts, .stack-bento-video { min-height:300px; padding:25px; overflow:hidden; position:relative; }
.video-inner, .video-inner iframe { width:100%; height:100%; border:0; }
.video-inner { position:absolute; inset:0; }
.video-gradient { position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.75)); }
.bento-label { position:absolute; left:24px; bottom:20px; z-index:2; font-size:24px; }

.contact-cards-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-card-quote, .contact-card-info { padding:30px; min-height:430px; }
.contact-card-quote h4 { margin:0 0 18px; font-size:28px; font-weight:500; }
.contact-gif-wrap { height:320px; overflow:hidden; border-radius:6px; }
.contact-gif-wrap img { width:100%; height:100%; object-fit:cover; }
.contact-card-info { display:flex; flex-direction:column; justify-content:center; gap:60px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .65s var(--ease),transform .65s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr .82fr; }
  .hero h1 { font-size:clamp(48px,6vw,66px); }
  .hero-visual { min-height:560px; }
  .hero-stats div { min-width:118px; padding:0 18px; }
  .featured-case { grid-template-columns:1fr; }
  .featured-media { min-height:unset; aspect-ratio:1.63; }
  .featured-copy .button { width:auto; margin-top:10px; }
  .about-grid { grid-template-columns:1fr 1fr; gap:46px; }
  .about-photo { min-height:560px; }
  .pr-projects-zone { grid-template-columns:1fr; }
  .pr-side-bentos { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  :root { --header-height:68px; --gutter:22px; }
  .site-header { grid-template-columns:1fr auto; }
  .wordmark { font-size:17px; }
  .nav-toggle { display:block; position:relative; z-index:3; }
  .site-nav {
    position:fixed;
    inset:var(--header-height) 0 auto 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:16px var(--gutter) 28px;
    background:rgba(9,11,16,.98);
    border-bottom:1px solid var(--line);
    transform:translateY(-130%);
    opacity:0;
    pointer-events:none;
    transition:transform .35s var(--ease),opacity .25s ease;
  }
  .site-nav.is-open { transform:none; opacity:1; pointer-events:auto; }
  .site-nav a { height:auto; padding:15px 0; border-bottom:1px solid var(--line); font-size:19px; }
  .site-nav a::after { display:none; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform:translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3.5px) rotate(-45deg); }
  .hero { grid-template-columns:1fr; min-height:unset; }
  .hero-visual { order:-1; min-height:460px; }
  .hero-photo-wrap { width:70%; left:7%; }
  .hero-product-one { width:48%; }
  .hero-product-two { width:35%; }
  .hero h1 { font-size:clamp(43px,10.5vw,69px); }
  .project-row, .project-row-media-right { grid-template-columns:42px 160px minmax(0,1fr) 24px; }
  .project-row-media-right .project-name { grid-column:3; grid-row:1; }
  .project-row-media-right .project-thumb { grid-column:2; grid-row:1; }
  .about-grid, .experience-grid, .contact-grid { grid-template-columns:1fr; }
  .about-photo { order:-1; min-height:520px; }
  .tools-panel { padding-left:0 !important; border-left:0; border-top:1px solid var(--line); }
  .contact-grid { gap:60px; }
  .page-case .nav-overlay, .page-projects .nav-overlay, .page-cv .nav-overlay, .page-stack .nav-overlay, .page-contact .nav-overlay { position:static; height:auto; overflow-x:auto; justify-content:flex-start; padding:84px var(--gutter) 18px; white-space:nowrap; }
  .sidebar-home { top:0; width:100% !important; left:0; padding:0 var(--gutter) !important; background:var(--bg); border-bottom:1px solid var(--line); }
  .case-right-stack, .pr-right-stack, .cv-right-stack, .stack-right-stack, .contact-right-stack { padding-top:56px; }
  .case-body-inner, .case-gallery, .case-other-col, .cv-content, .cv-bottom-bentos, .stack-zone, .stack-bottom-bentos, .contact-cards-row { grid-template-columns:1fr; }
  .pr-card { grid-template-columns:180px minmax(0,1fr) 30px; }
  .stack-tools-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .hero { padding-top:24px; }
  .hero-visual { min-height:375px; }
  .hero-photo-wrap { width:79%; left:0; }
  .hero-product-one { width:52%; top:12%; }
  .hero-product-two { width:37%; bottom:2%; }
  .role-label { right:0; bottom:2%; max-width:94%; padding:11px 14px; font-size:12px; }
  .hero-copy > p { margin-top:22px; font-size:17px; }
  .hero-actions { align-items:stretch; flex-direction:column; gap:18px; }
  .button { width:100%; }
  .social-row { gap:18px; flex-wrap:wrap; }
  .hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:24px 0; }
  .hero-stats div { min-width:0; padding:0 14px; }
  .hero-stats div:nth-child(3) { grid-column:1/-1; padding-left:0; border-left:0; }
  .section-heading-row { align-items:flex-start; flex-direction:column; }
  .featured-media { aspect-ratio:1.2; }
  .featured-copy h3 { font-size:35px; }
  .project-index { margin-top:48px; }
  .project-row, .project-row-media-right { min-height:112px; grid-template-columns:32px 95px minmax(0,1fr) 20px; gap:12px; padding:12px 0; }
  .project-thumb { height:74px; }
  .project-name { font-size:17px; line-height:1.2; }
  .project-name small { margin-top:6px; font-size:10px; }
  .about-photo { min-height:430px; }
  .timeline li { grid-template-columns:110px minmax(0,1fr); gap:14px; padding-right:0; }
  .timeline time { font-size:13px; }
  .timeline strong { font-size:16px; }
  .tools-panel ul { columns:2; }
  .contact-callout h2 { font-size:50px; }
  .contact-links > a { font-size:15px; }
  .site-footer { flex-direction:column; }
  .profile-name .role { display:none; }
  .avatar { width:36px; height:36px; }
  .page-case .nav-overlay, .page-projects .nav-overlay, .page-cv .nav-overlay, .page-stack .nav-overlay, .page-contact .nav-overlay { gap:22px; }
  .case-heading, .pr-heading, .cv-heading, .stack-heading { margin-bottom:38px; font-size:42px; overflow-wrap:anywhere; }
  .case-body-inner { display:block; }
  .case-body-inner section { padding:26px 0; }
  .case-body-inner h3 { font-size:23px; }
  .case-body-inner p { font-size:16px; }
  .case-gallery { gap:10px; margin-top:45px; }
  .pr-card { grid-template-columns:100px minmax(0,1fr) 24px; gap:14px; min-height:110px; padding:10px 0; }
  .pr-card-photo { height:84px; }
  .pr-card-post h3 { font-size:17px; }
  .pr-card-cat { font-size:10px; }
  .pr-side-bentos { grid-template-columns:1fr; }
  .stack-tools-list { grid-template-columns:1fr; }
  .contact-card-quote, .contact-card-info { min-height:320px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* Figma reference synthesis — editorial case pages */
:root {
  --bg:#050505;
  --bg-soft:#0a0b0d;
  --surface:#0e1014;
  --surface-2:#12151b;
  --text:#f4f5f7;
  --muted:#9a9fa9;
  --muted-2:#6b7079;
  --line:#282b31;
  --line-bright:#414650;
  --blue:#1266ff;
  --blue-bright:#3d83ff;
  --max:1500px;
  --header-height:62px;
  --radius:16px;
}
body { background:#050505; }
.page-case .nav-overlay,.page-projects .nav-overlay,.page-cv .nav-overlay,.page-stack .nav-overlay,.page-contact .nav-overlay {
  inset:14px var(--gutter) auto auto;
  width:auto;
  height:58px;
  padding:0 22px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  background:rgba(7,8,10,.72);
  box-shadow:0 12px 40px rgba(0,0,0,.2);
  backdrop-filter:blur(22px) saturate(130%);
}
.sidebar-home {
  top:14px;
  left:var(--gutter);
  height:58px;
  padding:0 18px !important;
  border:1px solid rgba(255,255,255,.15);
  border-radius:17px;
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(22px) saturate(130%);
}
.case-right-stack { max-width:1500px; padding-top:150px; }
.case-heading { max-width:1180px; margin-bottom:70px; font-size:clamp(58px,7vw,108px); }
.case-study-col { width:100%; }
.case-photo-wrapper { border-color:var(--line-bright); border-radius:22px; }
.case-categories { margin:24px 0 80px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.case-body-inner { display:block; }
.case-body-inner section {
  display:grid;
  grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);
  gap:clamp(40px,8vw,130px);
  padding:48px 0;
}
.case-body-inner h3 { margin:0; font-size:clamp(30px,3.4vw,48px); }
.case-body-inner p { grid-column:2; max-width:760px; font-size:clamp(17px,1.35vw,21px); line-height:1.58; }
.case-gallery { gap:14px; margin-top:100px; }
.case-gallery img { border-radius:14px; }
.case-other-col { margin-top:130px; }
.case-other-heading { font-size:clamp(38px,4vw,58px); }
.portrait-card { min-height:360px; border-radius:14px; }
.case-view-all { grid-column:1/-1; min-height:120px; }
@media (max-width:820px) {
  .page-case .nav-overlay,.page-projects .nav-overlay,.page-cv .nav-overlay,.page-stack .nav-overlay,.page-contact .nav-overlay {
    position:static;
    width:calc(100% - 24px);
    height:auto;
    margin:10px auto 0;
    padding:70px 16px 16px;
    border-radius:16px;
  }
  .sidebar-home { top:10px; left:12px; width:calc(100% - 24px) !important; height:58px; padding:0 16px !important; }
  .case-right-stack { padding-top:70px; }
  .case-body-inner section { grid-template-columns:1fr; gap:20px; }
  .case-body-inner p { grid-column:1; }
}

@media (max-width:560px) {
  .case-heading { font-size:46px; }
  .case-body-inner section { padding:34px 0; }
  .case-body-inner h3 { font-size:28px; }
  .portrait-card { min-height:270px; grid-template-columns:1fr; }
}

@font-face {
  font-family:"Inter";
  src:url("fonts/inter-regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Inter";
  src:url("fonts/inter-medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:"Inter";
  src:url("fonts/inter-semibold.ttf") format("truetype");
  font-weight:600 800;
  font-style:normal;
  font-display:swap;
}
body { font-family:"Inter",Arial,sans-serif; }

/* Layered glass and slow image depth for the shared case pages. */
.page-case .nav-overlay,.page-projects .nav-overlay,.page-cv .nav-overlay,.page-stack .nav-overlay,.page-contact .nav-overlay,.sidebar-home {
  background:rgba(7,8,10,.44);
  border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 54px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(30px) saturate(170%);
  backdrop-filter:blur(30px) saturate(170%);
}
.case-photo-wrapper { overflow:hidden; }
.case-photo-wrapper img {
  --media-scroll-y:0px;
  transform:translate3d(0,var(--media-scroll-y),0) scale(1.085);
  transition:transform .35s cubic-bezier(.2,.75,.25,1);
  will-change:transform;
}

@media (prefers-reduced-motion:reduce) {
  .case-photo-wrapper img { transform:none !important; will-change:auto; }
}

/* Downloadable CV hand-off. */
.cv-title-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin:0 0 55px;
}
.cv-title-row .cv-heading { margin:0; }
.cv-download {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  padding:0 22px;
  border:1px solid var(--line-bright);
  border-radius:999px;
  color:var(--text);
  font-size:16px;
  font-weight:500;
  line-height:1;
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease;
}
.cv-download:focus-visible {
  outline:2px solid var(--blue-bright);
  outline-offset:4px;
}
@media (hover:hover) and (pointer:fine) {
  .cv-download:hover {
    transform:translateY(-2px);
    background:var(--blue);
    border-color:var(--blue);
  }
}
@media (max-width:560px) {
  .cv-title-row {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-bottom:38px;
  }
  .cv-download { width:100%; }
  .cv-bento-header {
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .cv-download { transition:none; }
}

/* Shared content CTA: the same compact text-and-arrow treatment as “Смотреть кейс”. */
a.content-cta {
  width:auto;
  min-width:0;
  min-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text);
  font:600 15px/20px var(--static-copy,Inter,Arial,sans-serif);
  text-decoration:none;
  transition:color .2s ease;
}
.content-cta-icon {
  width:18px;
  height:18px;
  flex:0 0 18px;
  transition:transform .25s ease;
}
a.content-cta:focus-visible {
  outline:2px solid var(--blue-bright);
  outline-offset:4px;
}
@media (hover:hover) and (pointer:fine) {
  a.content-cta:hover {
    color:var(--blue-bright);
    background:transparent;
    transform:none;
  }
  a.content-cta:hover .content-cta-icon { transform:translate(3px,-3px); }
}
@media (prefers-reduced-motion:reduce) {
  a.content-cta,
  .content-cta-icon { transition:none; }
  a.content-cta:hover .content-cta-icon { transform:none; }
}

/* Compact static-page hierarchy using the portfolio's original type pairing. */
:root {
  --static-display:"TT Firs Neue",Inter,Arial,sans-serif;
  --static-copy:"Inter",Arial,sans-serif;
}

.page-case,
.page-projects,
.page-cv,
.page-contact,
.page-case button,
.page-projects button,
.page-cv button,
.page-contact button {
  font-family:var(--static-copy);
}

.page-case .profile-name .name,
.page-projects .profile-name .name,
.page-case .case-heading,
.page-projects .pr-heading,
.page-case .case-body-inner h3,
.page-case .case-other-heading,
.page-case .portrait-post h3,
.page-case .case-view-all-btn,
.page-projects .pr-card-post h3 {
  font-family:var(--static-display);
}

.page-case .case-right-stack,
.page-projects .pr-right-stack {
  padding-top:clamp(124px,10vw,146px);
  padding-bottom:100px;
}

.page-projects .pr-right-stack { max-width:1400px; }

.page-case .case-heading,
.page-projects .pr-heading {
  max-width:980px;
  margin:0 0 42px;
  font-size:clamp(40px,4.2vw,58px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.page-case .case-categories {
  margin:18px 0 48px;
  padding-bottom:0;
  border-bottom:0;
  font-size:13px;
  line-height:20px;
}

.page-case .case-body-inner section {
  grid-template-columns:minmax(190px,.62fr) minmax(0,1.38fr);
  column-gap:clamp(30px,5vw,76px);
  row-gap:clamp(15px,2.5vw,38px);
  padding:36px 0;
  border-top:0;
}

.page-case .case-body-inner section:first-child { border-top:1px solid var(--line); }

.page-case .case-body-inner h3 {
  margin:0;
  font-size:clamp(24px,2.15vw,30px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.035em;
}

.page-case .case-body-inner p {
  grid-column:2;
  max-width:720px;
  margin:0 0 7px;
  color:#aeb3bd;
  font-size:clamp(16px,1.12vw,18px);
  line-height:1.55;
  letter-spacing:-.015em;
}

.page-case .case-gallery {
  grid-template-columns:1fr;
  gap:clamp(16px,2vw,24px);
  margin-top:72px;
}
.page-case .case-gallery img {
  border:1px solid var(--line-bright);
  border-radius:22px;
}
.page-case .case-other-col { margin-top:96px; gap:16px; }
.page-case .case-other-heading {
  margin-bottom:8px;
  font-size:clamp(28px,2.6vw,36px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.035em;
}
.page-case .portrait-card { min-height:300px; }
.page-case .portrait-post { padding:22px; }
.page-case .portrait-post h3 {
  margin-bottom:7px;
  font-size:clamp(20px,1.7vw,24px);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.03em;
}
.page-case .portrait-post p { margin:0; font-size:14px; line-height:20px; }
.page-case .case-view-all { min-height:96px; }
.page-case .case-view-all-btn { font-size:18px; font-weight:600; line-height:24px; }

.page-projects .pr-heading { margin-bottom:40px; }
.page-projects .pr-card {
  min-height:134px;
  grid-template-columns:clamp(176px,17vw,220px) minmax(0,1fr) 24px;
  gap:clamp(20px,2.4vw,30px);
  padding:14px 8px;
}
.page-projects .pr-card-photo { height:auto; aspect-ratio:16 / 9; }
.page-projects .pr-card-post { min-width:0; }
.page-projects .pr-card-post h3 {
  margin:0;
  font-size:clamp(20px,1.7vw,25px);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}
.page-projects .pr-card-cat { margin-top:7px; font-size:13px; line-height:18px; }
.page-projects .pr-card-arrow { font-size:20px; }
.page-projects .pr-card:focus-visible {
  outline:2px solid var(--blue-bright);
  outline-offset:-2px;
}

@media (max-width:820px) {
  .page-case .case-right-stack,
  .page-projects .pr-right-stack {
    padding-top:54px;
    padding-bottom:88px;
  }
  .page-case .case-heading,
  .page-projects .pr-heading { margin-bottom:36px; font-size:clamp(38px,6.8vw,48px); }
  .page-case .case-body-inner section { grid-template-columns:1fr; column-gap:16px; row-gap:16px; padding:30px 0; }
  .page-case .case-body-inner p { grid-column:1; }
  .page-case .case-body-inner p + p { margin-top:-8px; }
  .page-case .case-other-col { margin-top:76px; }
  .page-case .portrait-card { min-height:260px; }
  .page-projects .pr-card {
    min-height:116px;
    grid-template-columns:156px minmax(0,1fr) 22px;
    gap:18px;
    padding:12px 4px;
  }
  .page-projects .pr-card-post h3 { font-size:20px; }
  .page-projects .pr-card-cat { font-size:12px; }
}

@media (max-width:560px) {
  .page-case .case-right-stack,
  .page-projects .pr-right-stack { padding-top:42px; padding-bottom:72px; }
  .page-case .case-heading,
  .page-projects .pr-heading { margin-bottom:30px; font-size:36px; line-height:1.05; }
  .page-case .case-categories { flex-wrap:wrap; margin:14px 0 36px; }
  .page-case .case-body-inner section { padding:26px 0; }
  .page-case .case-body-inner h3 { font-size:22px; }
  .page-case .case-body-inner p { font-size:16px; line-height:1.5; }
  .page-case .case-other-col { margin-top:62px; gap:12px; }
  .page-case .case-other-heading { font-size:28px; }
  .page-case .portrait-card { min-height:250px; }
  .page-case .portrait-post h3 { font-size:20px; }
  .page-case .case-view-all { min-height:84px; }
  .page-case .case-view-all-btn { font-size:17px; }
  .page-projects .pr-card {
    min-height:100px;
    grid-template-columns:96px minmax(0,1fr) 20px;
    gap:12px;
    padding:10px 0;
  }
  .page-projects .pr-card-photo { height:76px; aspect-ratio:auto; }
  .page-projects .pr-card-post h3 { font-size:17px; line-height:1.18; }
  .page-projects .pr-card-cat { margin-top:5px; font-size:11px; line-height:15px; }
  .page-projects .pr-card-arrow { font-size:18px; }
}

/* Shared navigation material, project-directory motion and contact hand-off. */
:root {
  --static-nav-surface:rgba(5,4,10,.82);
  --static-nav-surface-hover:rgba(12,8,20,.9);
  --static-nav-surface-mobile:rgba(5,4,10,.95);
}

.page-case .nav-overlay,
.page-projects .nav-overlay,
.page-cv .nav-overlay,
.page-contact .nav-overlay,
.page-case .sidebar-home,
.page-projects .sidebar-home,
.page-cv .sidebar-home,
.page-contact .sidebar-home {
  border:0;
  background:var(--static-nav-surface);
  background-image:none;
  box-shadow:none;
  filter:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background-color .42s ease;
}

.nav-overlay a[aria-current="page"] { color:#fff; }

.profile-link:focus-visible,
.nav-overlay a:focus-visible {
  outline:2px solid #93a4ff;
  outline-offset:4px;
}

@media (hover:hover) and (pointer:fine) {
  .page-case .sidebar-home:hover,
  .page-projects .sidebar-home:hover,
  .page-cv .sidebar-home:hover,
  .page-contact .sidebar-home:hover,
  .page-case .nav-overlay:hover,
  .page-projects .nav-overlay:hover,
  .page-cv .nav-overlay:hover,
  .page-contact .nav-overlay:hover {
    background-color:var(--static-nav-surface-hover);
  }
}

.page-projects .pr-right-stack { max-width:var(--max); }

.page-projects .pr-heading {
  max-width:720px;
  margin:0 0 40px;
  font-family:var(--static-display);
  font-size:clamp(40px,3.4vw,48px);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.04em;
}

.page-projects .pr-project-list { border-top:0; }

.page-projects .pr-card {
  --cover-x:0px;
  --cover-y:0px;
  position:relative;
  min-height:142px;
  grid-template-columns:clamp(188px,18vw,232px) minmax(0,1fr) 42px;
  gap:clamp(22px,2.6vw,34px);
  padding:14px 10px;
  border-bottom:0;
  border-radius:14px;
  transition:background-color .28s ease;
}

.page-projects .pr-card-photo {
  position:relative;
  height:auto;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:11px;
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  clip-path:inset(0 round 11px);
  background:#09090d;
  box-shadow:0 10px 30px rgba(0,0,0,.16);
}

.page-projects .pr-card-photo img {
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  transform:translate3d(var(--cover-x),var(--cover-y),0) scale(1.045);
  transition:transform .42s cubic-bezier(.2,.75,.25,1),filter .3s ease;
}

.page-projects .pr-card.is-parallax-active .pr-card-photo img { will-change:transform; }

.page-projects .pr-card-post h3 {
  font-family:var(--static-display);
  font-size:clamp(23px,2vw,28px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.04em;
}

.page-projects .pr-card-cat {
  margin-top:8px;
  color:#8f8998;
  font-family:var(--static-copy);
  font-size:14px;
  line-height:20px;
  letter-spacing:-.01em;
}

.page-projects .pr-card-arrow { justify-self:end; }

.page-projects .pr-arrow-inner {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#8f8998;
  transition:transform .28s cubic-bezier(.2,.75,.25,1),color .22s ease,background-color .22s ease,box-shadow .22s ease;
}

.page-projects .pr-arrow-inner svg { width:21px; height:21px; }
.page-projects .pr-arrow-inner path {
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (hover:hover) and (pointer:fine) {
  .page-projects .pr-card:hover { background:rgba(255,255,255,.025); }
  .page-projects .pr-card:hover .pr-card-photo img {
    transform:translate3d(var(--cover-x),var(--cover-y),0) scale(1.1);
    filter:brightness(1.06) saturate(1.04);
  }
  .page-projects .pr-card:hover .pr-arrow-inner,
  .page-projects .pr-card:focus-visible .pr-arrow-inner {
    color:#07050d;
    background:#93a4ff;
    box-shadow:0 0 30px rgba(147,164,255,.3);
    transform:translate(2px,-2px);
  }
}

.page-projects .pr-card:focus-visible {
  outline:2px solid #93a4ff;
  outline-offset:3px;
  background:rgba(255,255,255,.025);
}

.page-contact .contact-card-quote,
.page-contact .contact-card-info {
  height:clamp(292px,25vw,326px);
  min-height:0;
  padding:clamp(18px,2vw,24px);
}

.page-contact .contact-card-quote {
  position:relative;
  display:block;
  overflow:hidden;
}

.page-contact .contact-card-quote h4 {
  position:relative;
  z-index:2;
}

.page-contact .contact-card-info {
  display:flex;
  justify-content:center;
  gap:0;
}

.page-contact .contact-gif-wrap {
  position:absolute;
  inset:0;
  height:100%;
  min-height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
}

.page-contact .contact-gif-wrap img {
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
}

.contact-page-links {
  width:100%;
  display:grid;
  gap:6px;
}

.contact-page-link {
  width:100%;
  min-height:54px;
  appearance:none;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  padding:5px 10px 5px 5px;
  border:0;
  border-radius:16px;
  background:
    radial-gradient(ellipse 112% 175% at 50% 52%,
      rgba(222,216,232,.09) 0%,
      rgba(146,134,164,.055) 42%,
      rgba(82,68,102,.02) 66%,
      transparent 78%),
    rgba(12,9,20,.58);
  box-shadow:0 14px 38px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter:blur(30px) saturate(112%) brightness(.8);
  backdrop-filter:blur(30px) saturate(112%) brightness(.8);
  color:#f6f3f8;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease;
}

.contact-page-link-icon {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(0,0,0,.2);
}

.contact-page-link-symbol,
.contact-page-link-arrow,
.contact-page-copy-icon { width:22px; height:22px; }

.contact-page-link-symbol:not(.contact-page-link-symbol-telegram) rect,
.contact-page-link-symbol:not(.contact-page-link-symbol-telegram) path,
.contact-page-link-arrow path,
.contact-page-copy-icon rect,
.contact-page-copy-icon path {
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.contact-page-link-copy {
  min-width:0;
  display:flex;
  flex-direction:column;
}

.contact-page-link-copy b {
  font-family:var(--static-copy);
  font-size:16px;
  font-weight:600;
  line-height:20px;
  letter-spacing:.01em;
}

.contact-page-link-copy small {
  margin-top:1px;
  color:rgba(246,243,248,.76);
  font-size:13px;
  line-height:18px;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}

.contact-page-link-arrow,
.contact-page-copy-icon { color:#8f8998; transition:transform .22s ease,color .18s ease; }
.contact-page-copy-check { opacity:0; }
.contact-page-link-monogram { font-size:19px; font-weight:600; }

.contact-page-link:focus-visible {
  outline:2px solid #93a4ff;
  outline-offset:3px;
}

.contact-page-link-copy-email.is-copied {
  background:
    radial-gradient(ellipse 112% 175% at 50% 52%,rgba(195,233,217,.09),rgba(88,150,128,.045) 46%,transparent 78%),
    rgba(14,39,34,.66);
  box-shadow:0 14px 38px rgba(0,0,0,.16),inset 0 0 0 1px rgba(143,224,191,.07);
}
.contact-page-link-copy-email.is-copied .contact-page-copy-icon { color:#8fe0bf; }
.contact-page-link-copy-email.is-copied .contact-page-copy-icon rect,
.contact-page-link-copy-email.is-copied .contact-page-copy-icon path:not(.contact-page-copy-check) { opacity:0; }
.contact-page-link-copy-email.is-copied .contact-page-copy-check { opacity:1; }

@media (hover:hover) and (pointer:fine) {
  .contact-page-link:hover {
    transform:translateY(-1px);
    background:
      radial-gradient(ellipse 112% 175% at 50% 52%,rgba(230,224,238,.105),rgba(150,138,169,.06) 42%,transparent 78%),
      rgba(17,13,27,.64);
    box-shadow:0 18px 44px rgba(0,0,0,.2),inset 0 0 0 1px rgba(255,255,255,.045);
  }
  .contact-page-link:hover .contact-page-link-arrow { transform:translate(2px,-2px); color:#f6f3f8; }
}

.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:820px) {
  .page-case .nav-overlay,
  .page-projects .nav-overlay,
  .page-cv .nav-overlay,
  .page-contact .nav-overlay,
  .page-case .sidebar-home,
  .page-projects .sidebar-home,
  .page-cv .sidebar-home,
  .page-contact .sidebar-home {
    border:0;
    background:var(--static-nav-surface-mobile);
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .page-projects .pr-heading { font-size:clamp(38px,5.4vw,46px); }
  .page-projects .pr-card {
    min-height:118px;
    grid-template-columns:156px minmax(0,1fr) 38px;
    gap:18px;
    padding:12px 6px;
  }
  .page-projects .pr-card-post h3 { font-size:20px; }
  .page-projects .pr-card-cat { font-size:13px; line-height:18px; }

  .page-contact .contact-card-quote { height:292px; }
  .page-contact .contact-card-info { height:auto; min-height:280px; }
}

@media (max-width:560px) {
  .page-projects .pr-heading { font-size:clamp(38px,11vw,44px); }
  .page-projects .pr-card {
    min-height:102px;
    grid-template-columns:96px minmax(0,1fr) 32px;
    gap:12px;
    padding:10px 0;
    border-radius:10px;
  }
  .page-projects .pr-card-photo {
    height:76px;
    aspect-ratio:auto;
    border-radius:8px;
    clip-path:inset(0 round 8px);
  }
  .page-projects .pr-card-photo img { transform:none; }
  .page-projects .pr-card-post h3 { font-size:17px; line-height:1.18; }
  .page-projects .pr-card-cat { margin-top:5px; font-size:12px; line-height:16px; }
  .page-projects .pr-arrow-inner { width:32px; height:32px; }
  .page-projects .pr-arrow-inner svg { width:18px; height:18px; }

  .page-contact .contact-card-quote { height:260px; }
  .page-contact .contact-card-info { min-height:272px; }
  .contact-page-links { width:100%; }
  .contact-page-link {
    min-height:54px;
    grid-template-columns:42px minmax(0,1fr) 22px;
    gap:10px;
    padding:6px 10px 6px 6px;
    border-radius:15px;
    background:
      radial-gradient(ellipse 118% 180% at 50% 52%,rgba(222,216,232,.085),rgba(146,134,164,.05) 44%,transparent 80%),
      rgba(14,10,23,.68);
    box-shadow:0 10px 26px rgba(0,0,0,.14),inset 0 0 0 1px rgba(255,255,255,.03);
    -webkit-backdrop-filter:blur(22px) saturate(108%) brightness(.82);
    backdrop-filter:blur(22px) saturate(108%) brightness(.82);
  }
  .contact-page-link-icon { width:42px; height:42px; border-radius:12px; }
  .contact-page-link-copy b { font-size:15px; line-height:19px; }
  .contact-page-link-copy small { font-size:11px; line-height:15px; }
}

@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  :root {
    --static-nav-surface:#0f0c19;
    --static-nav-surface-hover:#181128;
    --static-nav-surface-mobile:#0f0c19;
  }
  .contact-page-link {
    background:#0f0c19;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .contact-page-link { background:rgba(25,21,35,.96); }
}

@media (forced-colors:active) {
  .page-case .nav-overlay,
  .page-projects .nav-overlay,
  .page-cv .nav-overlay,
  .page-contact .nav-overlay,
  .page-case .sidebar-home,
  .page-projects .sidebar-home,
  .page-cv .sidebar-home,
  .page-contact .sidebar-home,
  .contact-page-link {
    border:1px solid CanvasText;
    background:Canvas;
    color:CanvasText;
  }
}

/* Case navigation, project facts and final hand-off. */
.page-case .case-back-link {
  width:max-content;
  display:inline-flex;
  align-items:center;
  margin:0 0 clamp(24px,3vw,38px);
  color:#d6d0dd;
  font:600 15px/20px var(--static-copy);
  letter-spacing:-.01em;
  transition:color .2s ease;
}

.page-case .case-back-link:focus-visible,
.page-case .case-final-cta:focus-visible {
  outline:2px solid #cfc6ff;
  outline-offset:5px;
}

.page-case .case-meta {
  display:grid;
  grid-template-columns:1.05fr 1.5fr 1fr .7fr;
  gap:clamp(24px,3vw,48px);
  margin:0 0 clamp(54px,6vw,78px);
  padding:clamp(28px,3vw,40px) 0 clamp(34px,4vw,52px);
  border-top:0;
  border-bottom:0;
}

.page-case .case-meta-item { min-width:0; }

.page-case .case-meta dt {
  width:max-content;
  max-width:100%;
  padding:6px 9px;
  border-radius:6px;
  background:rgba(255,255,255,.09);
  color:#c7c1ce;
  font:500 12px/16px var(--static-copy);
  letter-spacing:.01em;
}

.page-case .case-meta dd {
  margin:18px 0 0;
  color:#f4f1f6;
  font:400 clamp(15px,1.15vw,17px)/1.48 var(--static-copy);
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
  text-wrap:pretty;
}

.page-case .case-final-cta {
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 34px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(147,164,255,.62) 0%,rgba(117,102,255,.28) 30%,rgba(255,255,255,.045) 68%,rgba(255,255,255,.018) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 38px rgba(117,102,255,.12);
  transition:border-color .22s ease,background .28s ease,box-shadow .28s ease,color .22s ease;
}

.page-case .case-final-cta .case-view-all-btn {
  color:#fff;
  font:600 clamp(16px,1.25vw,19px)/24px var(--static-display);
  letter-spacing:-.02em;
}

.page-case .case-final-cta-icon {
  display:inline-grid;
  place-items:center;
  width:19px;
  height:19px;
  color:#fff;
  font-size:18px;
  line-height:1;
  transition:transform .25s var(--ease),color .2s ease;
}

.page-projects .pr-arrow-inner {
  width:22px;
  height:22px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#aaa4b1;
  box-shadow:none;
}

@media (hover:hover) and (pointer:fine) {
  .page-case .case-back-link:hover { color:var(--blue-bright); }
  .page-case .case-final-cta:hover {
    border-color:rgba(207,198,255,.68);
    background:
      radial-gradient(ellipse at 50% 50%,rgba(147,164,255,.72) 0%,rgba(117,102,255,.34) 32%,rgba(255,255,255,.055) 70%,rgba(255,255,255,.02) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 0 48px rgba(117,102,255,.2);
  }
  .page-case .case-final-cta:hover .case-view-all-btn,
  .page-case .case-final-cta:hover .case-final-cta-icon { color:#f8f6ff; }
  .page-case .case-final-cta:hover .case-final-cta-icon { transform:translate(3px,-3px); }

  .page-projects .pr-card:hover .pr-arrow-inner,
  .page-projects .pr-card:focus-visible .pr-arrow-inner,
  .page-projects .pr-card.is-interacting .pr-arrow-inner {
    color:var(--blue-bright);
    background:transparent;
    box-shadow:none;
    transform:translate(3px,-3px);
  }
}

@media (max-width:820px) {
  .page-case .case-meta {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px 36px;
    margin-bottom:54px;
    padding:28px 0 38px;
  }

  .page-case .case-final-cta { min-height:88px; }
}

@media (max-width:560px) {
  .page-case .case-back-link {
    margin-bottom:20px;
    font-size:14px;
  }

  .page-case .case-meta {
    gap:24px 18px;
    margin-bottom:44px;
    padding:24px 0 32px;
  }

  .page-case .case-meta dd {
    margin-top:12px;
    font-size:14px;
    line-height:1.45;
  }

  .page-case .case-final-cta {
    min-height:78px;
    padding:20px 24px;
  }

  .page-projects .pr-arrow-inner {
    width:20px;
    height:20px;
  }
}

@media (max-width:380px) {
  .page-case .case-meta { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .page-case .case-back-link,
  .page-case .case-final-cta,
  .page-case .case-final-cta-icon,
  .page-projects .pr-arrow-inner { transition:none; }

  .page-case .case-final-cta:hover .case-final-cta-icon,
  .page-projects .pr-card:hover .pr-arrow-inner,
  .page-projects .pr-card:focus-visible .pr-arrow-inner,
  .page-projects .pr-card.is-interacting .pr-arrow-inner { transform:none; }
}

/* Categories stay editorial text, not blue deep-link affordances. */
.page-projects .pr-card-cat,
.page-case .case-cat-value { color:var(--directory-text,#f6f3f8); }

/* Project-directory and related-work cards share the homepage spring language. */
.page-projects .pr-project-list,
.page-case .case-other-col {
  perspective:1200px;
  overflow:visible;
}

.page-projects .pr-card,
.page-case .portrait-card {
  --tile-x:0px;
  --tile-y:0px;
  --tile-z:0px;
  --tile-scale:1;
  --tile-rx:0deg;
  --tile-ry:0deg;
  --tile-media-x:0px;
  --tile-media-y:0px;
  --media-scroll-y:0px;
  --shine-x:50%;
  --shine-y:50%;
  transform:
    translate3d(var(--tile-x),var(--tile-y),var(--tile-z))
    scale(var(--tile-scale))
    rotateX(var(--tile-rx))
    rotateY(var(--tile-ry));
  transform-style:preserve-3d;
  transform-origin:50% 50%;
}

.page-projects .pr-card {
  isolation:isolate;
  z-index:1;
  background:transparent;
  box-shadow:none;
  transform:none;
  transition:filter .28s ease;
}

.page-projects .pr-card.is-interacting { z-index:8; }
.page-projects .pr-card-post,
.page-projects .pr-card-arrow { transform:none; }

.page-projects .pr-card-photo {
  isolation:isolate;
  transform:
    perspective(900px)
    translate3d(var(--tile-x),var(--tile-y),var(--tile-z))
    scale(var(--tile-scale))
    rotateX(var(--tile-rx))
    rotateY(var(--tile-ry));
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  transition:box-shadow .28s ease,filter .28s ease;
}

.page-projects .pr-card-photo::after {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.3),transparent 38%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .22s ease;
}

.page-projects .pr-card-photo img {
  transform:translate3d(
    var(--tile-media-x),
    calc(var(--tile-media-y) + var(--media-scroll-y)),
    0
  ) scale(1.055);
  transition:filter .28s ease;
  will-change:auto;
}

.page-projects .pr-card.is-interacting .pr-card-photo {
  box-shadow:0 20px 48px rgba(0,0,0,.3);
  will-change:transform;
}

.page-projects .pr-card.is-interacting .pr-card-photo::after { opacity:.72; }
.page-projects .pr-card.is-interacting .pr-card-photo img {
  filter:brightness(1.06) saturate(1.05);
  will-change:transform;
}

.page-projects .pr-card-cat { color:var(--directory-text); }

.page-projects .pr-card.is-interacting .pr-arrow-inner,
.page-projects .pr-card:focus-visible .pr-arrow-inner {
  color:#07050d;
  background:#93a4ff;
  box-shadow:0 0 30px rgba(147,164,255,.3);
  transform:translate(2px,-2px);
}

.page-case .case-cat-value { color:#f6f3f8; }

.page-case .portrait-card {
  position:relative;
  z-index:1;
  min-height:clamp(300px,28vw,380px);
  display:block;
  overflow:hidden;
  border:0;
  border-radius:32px;
  background:#0b0911;
  color:#fff;
  isolation:isolate;
  box-shadow:0 18px 52px rgba(0,0,0,.18);
  transition:box-shadow .28s ease,filter .28s ease;
}

.page-case .portrait-card.is-interacting {
  z-index:15;
  box-shadow:0 38px 88px rgba(0,0,0,.34);
  will-change:transform;
}

.page-case .portrait-card:focus-visible {
  outline:2px solid #9fb0ff;
  outline-offset:4px;
}

.page-case .portrait-photo {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.page-case .portrait-photo img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:translate3d(
    var(--tile-media-x),
    calc(var(--tile-media-y) + var(--media-scroll-y)),
    0
  ) scale(1.1);
  transition:filter .28s ease;
  will-change:auto;
}

.page-case .portrait-card.is-interacting .portrait-photo img {
  filter:brightness(1.06) saturate(1.04);
  will-change:transform;
}

.page-case .portrait-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,0) 24%,rgba(5,5,5,.2) 46%,rgba(5,5,5,.84) 76%,rgba(5,5,5,.98) 100%);
}

.page-case .portrait-card::after {
  content:"";
  position:absolute;
  inset:-1px;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,255,255,.27),transparent 34%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .22s ease;
}

.page-case .portrait-card.is-interacting::after { opacity:.72; }

.page-case .portrait-post {
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  padding:24px;
  transform:translateZ(26px);
  pointer-events:none;
}

.page-case .portrait-post-text {
  position:absolute;
  right:24px;
  bottom:24px;
  left:24px;
}

.page-case .portrait-post h3 {
  max-width:90%;
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(24px,2.25vw,32px);
  line-height:1.05;
}

.page-case .portrait-post p {
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:20px;
}

.page-case .portrait-card .pr-card-arrow {
  position:absolute;
  top:20px;
  right:20px;
  z-index:4;
}

.page-case .portrait-card .pr-arrow-inner {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  background:rgba(12,12,12,.32);
  color:#fff;
  font-size:20px;
  opacity:0;
  transform:translate3d(-5px,7px,32px) scale(.88);
  transition:opacity .2s ease,transform .32s var(--ease),background .2s ease,box-shadow .2s ease;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}

.page-case .portrait-card.is-interacting .pr-arrow-inner,
.page-case .portrait-card:focus-visible .pr-arrow-inner {
  opacity:1;
  transform:translate3d(0,0,32px) scale(1);
  box-shadow:0 0 30px rgba(147,164,255,.3);
}

@media (hover:hover) and (pointer:fine) {
  .page-projects .pr-card:hover .pr-card-photo img {
    transform:translate3d(
      var(--tile-media-x),
      calc(var(--tile-media-y) + var(--media-scroll-y)),
      0
    ) scale(1.1);
    filter:brightness(1.06) saturate(1.05);
  }
  .page-case .portrait-card:hover .pr-arrow-inner {
    opacity:1;
    transform:translate3d(0,0,32px) scale(1);
  }
}

@media (min-width:768px) and (any-pointer:coarse) {
  .page-projects .pr-card,
  .page-case .portrait-card { touch-action:pan-y pinch-zoom; }
}

@media (max-width:767px) {
  .page-projects .pr-card,
  .page-projects .pr-card-photo,
  .page-case .portrait-card { transform:none !important; }
  .page-projects .pr-card-photo::after,
  .page-case .portrait-card::after { display:none; }
  .page-projects .pr-card-photo img {
    transform:translate3d(0,var(--media-scroll-y),0) scale(1.045);
  }
  .page-case .portrait-card {
    min-height:270px;
    border-radius:24px;
  }
  .page-case .portrait-photo img {
    transform:translate3d(0,var(--media-scroll-y),0) scale(1.08);
  }
  .page-case .portrait-post {
    padding:20px;
    transform:none;
  }
  .page-case .portrait-post-text {
    right:20px;
    bottom:20px;
    left:20px;
  }
  .page-case .portrait-card .pr-card-arrow { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .page-projects .pr-card,
  .page-projects .pr-card-photo,
  .page-projects .pr-card-photo img,
  .page-case .portrait-card,
  .page-case .portrait-photo img,
  .page-case .portrait-card .pr-arrow-inner { transition:none !important; }
  .page-projects .pr-card,
  .page-projects .pr-card-photo,
  .page-case .portrait-card { transform:none !important; }
  .page-projects .pr-card-photo img,
  .page-case .portrait-photo img { transform:none !important; will-change:auto; }
  .page-projects .pr-card-photo::after,
  .page-case .portrait-card::after { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .page-case .nav-overlay,
  .page-projects .nav-overlay,
  .page-cv .nav-overlay,
  .page-contact .nav-overlay,
  .page-case .sidebar-home,
  .page-projects .sidebar-home,
  .page-cv .sidebar-home,
  .page-contact .sidebar-home,
  .page-projects .pr-card,
  .page-projects .pr-card-photo img,
  .page-projects .pr-arrow-inner,
  .contact-page-link,
  .contact-page-link-arrow,
  .contact-page-copy-icon {
    transition:none;
  }
  .page-projects .pr-card-photo img { transform:none !important; will-change:auto; }
}

/* Homepage visual system for the Projects and Contacts directories. */
.page-projects,
.page-contact {
  --directory-page:#07050d;
  --directory-text:#f6f3f8;
  --directory-muted:#aaa4b1;
  --directory-tertiary:#827b8d;
  --directory-link:#93a4ff;
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  background:var(--directory-page);
  color:var(--directory-text);
}

.page-projects > .static-page-backdrop,
.page-contact > .static-page-backdrop {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--directory-page);
}

.page-projects > .static-page-backdrop .gradient-bg,
.page-contact > .static-page-backdrop .gradient-bg {
  position:absolute;
  inset:0;
  z-index:0;
  display:block !important;
  overflow:hidden;
  background:
    radial-gradient(ellipse 62% 84% at 8% 24%,rgba(68,43,151,.36),transparent 72%),
    radial-gradient(ellipse 28% 36% at 84% 16%,rgba(62,46,154,.28),transparent 74%),
    radial-gradient(ellipse 46% 30% at 70% 78%,rgba(32,76,145,.24),transparent 76%),
    radial-gradient(ellipse 22% 28% at 38% 64%,rgba(120,40,136,.24),transparent 74%),
    radial-gradient(ellipse 78% 44% at 48% 108%,rgba(48,31,116,.2),transparent 78%),
    var(--directory-page);
}

.page-projects > .static-page-backdrop .gradient-bg canvas,
.page-contact > .static-page-backdrop .gradient-bg canvas {
  width:100%;
  height:100%;
  display:block;
}

.page-projects > .static-page-backdrop .parallax-backdrop-scrim,
.page-contact > .static-page-backdrop .parallax-backdrop-scrim,
.page-projects > .static-page-backdrop .parallax-backdrop-grain,
.page-contact > .static-page-backdrop .parallax-backdrop-grain {
  position:absolute;
  inset:0;
}

.page-projects > .static-page-backdrop .parallax-backdrop-scrim,
.page-contact > .static-page-backdrop .parallax-backdrop-scrim {
  z-index:1;
  background:
    radial-gradient(circle at 50% 42%,rgba(7,5,13,.04) 0 24%,rgba(7,5,13,.24) 72%),
    linear-gradient(180deg,rgba(7,5,13,.02),rgba(7,5,13,.2));
}

.page-projects > .static-page-backdrop .parallax-backdrop-grain,
.page-contact > .static-page-backdrop .parallax-backdrop-grain {
  z-index:2;
  opacity:.12;
  background-image:
    radial-gradient(circle at 17% 23%,rgba(255,255,255,.16) 0 1px,transparent 1.4px),
    radial-gradient(circle at 72% 68%,rgba(255,255,255,.11) 0 1px,transparent 1.3px);
  background-size:13px 13px,17px 17px;
  mix-blend-mode:soft-light;
}

.page-projects .projects-root,
.page-contact .contact-root {
  position:relative;
  z-index:1;
  min-height:100svh;
  background:transparent;
}

.page-projects .pr-right-stack,
.page-projects .pr-project-list,
.page-contact .contact-right-stack,
.page-contact .contact-zone {
  background:transparent;
}

.page-projects .pr-heading,
.page-contact .contact-card-quote h4,
.page-contact .contact-page-link-copy b {
  color:var(--directory-text);
}

.page-projects .pr-card {
  background:transparent;
  box-shadow:none;
}

.page-projects .pr-card:focus-visible {
  background:transparent;
}

.page-projects .pr-card-cat { color:var(--directory-text); }

.page-contact .contact-page-link-copy small,
.page-contact .profile-name .role {
  color:var(--directory-muted);
}

.page-projects .pr-arrow-inner,
.page-contact .contact-page-link-arrow,
.page-contact .contact-page-copy-icon {
  color:var(--directory-tertiary);
}

.page-contact .contact-card-quote,
.page-contact .contact-card-info {
  border:0;
  border-radius:26px;
  background:rgba(12,9,20,.56);
  box-shadow:
    0 24px 80px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(24px) saturate(115%);
  backdrop-filter:blur(24px) saturate(115%);
}

.page-contact .contact-page-link {
  background:rgba(5,4,10,.58);
}

@media (hover:hover) and (pointer:fine) {
  .page-projects .pr-card:hover {
    background:transparent;
    box-shadow:none;
  }
}

@media (max-width:560px) {
  .page-projects .pr-card { background:transparent; }
  .page-contact .contact-card-quote,
  .page-contact .contact-card-info {
    border-radius:22px;
    background:rgba(12,9,20,.66);
    -webkit-backdrop-filter:blur(20px) saturate(110%);
    backdrop-filter:blur(20px) saturate(110%);
  }
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .page-contact .contact-card-quote,
  .page-contact .contact-card-info { background:rgba(18,14,29,.96); }
}

@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .page-contact .contact-card-quote,
  .page-contact .contact-card-info {
    background:#0f0c19;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media (forced-colors:active) {
  .page-projects > .static-page-backdrop,
  .page-contact > .static-page-backdrop { display:none; }

  .page-contact .contact-card-quote,
  .page-contact .contact-card-info {
    border:1px solid CanvasText;
    background:Canvas;
    color:CanvasText;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

/* Keep directory arrows as lightweight deep-link affordances. */
.page-projects .pr-arrow-inner {
  width:22px;
  height:22px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--directory-tertiary);
  box-shadow:none;
}

@media (hover:hover) and (pointer:fine) {
  .page-projects .pr-card:hover .pr-arrow-inner,
  .page-projects .pr-card:focus-visible .pr-arrow-inner,
  .page-projects .pr-card.is-interacting .pr-arrow-inner {
    color:var(--directory-link);
    background:transparent;
    box-shadow:none;
    transform:translate(3px,-3px);
  }
}

@media (max-width:560px) {
  .page-projects .pr-arrow-inner {
    width:20px;
    height:20px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .page-projects .pr-arrow-inner { transition:none; }
  .page-projects .pr-card:hover .pr-arrow-inner,
  .page-projects .pr-card:focus-visible .pr-arrow-inner,
  .page-projects .pr-card.is-interacting .pr-arrow-inner { transform:none; }
}

/* Unified typography hierarchy across static portfolio pages. */
:root {
  --type-page-title:clamp(32px,3.2vw,46px);
  --type-section-title:clamp(24px,2vw,28px);
  --type-subsection-title:clamp(22px,1.9vw,27px);
  --type-card-title:clamp(23px,2vw,28px);
  --type-body:clamp(16px,1.2vw,18px);
  --type-caption:14px;
  --type-label:13px;
}

.page-case .case-heading,
.page-projects .pr-heading,
.page-cv .cv-heading {
  font-size:var(--type-page-title);
  line-height:1.06;
  letter-spacing:-.048em;
}

.page-case .portrait-post h3 {
  font-size:var(--type-page-title);
  line-height:1.06;
  letter-spacing:-.048em;
}

.page-case .case-other-heading {
  font-size:var(--type-section-title);
  line-height:1.25;
}

.page-case .case-body-inner h3 { font-size:var(--type-subsection-title); }
.page-projects .pr-card-post h3 { font-size:var(--type-card-title); }

.page-case .case-body-inner p,
.page-case .case-meta dd { font-size:var(--type-body); }

.page-case .case-categories,
.page-case .portrait-post p,
.page-projects .pr-card-cat { font-size:var(--type-caption); }

.page-case .case-meta dt { font-size:var(--type-label); }

.page-case .case-final-cta {
  margin-top:clamp(24px,2.5vw,32px);
}

@media (max-width:760px) {
  :root {
    --type-page-title:clamp(27px,6.4vw,32px);
    --type-section-title:24px;
    --type-subsection-title:22px;
    --type-card-title:clamp(20px,5.4vw,24px);
  }
}

@media (max-width:560px) {
  :root { --type-caption:13px; }
}

@media (max-width:560px) and (max-height:700px) {
  :root { --type-page-title:clamp(24px,6.6vw,29px); }
}

/* Keep the square Uralsib Bonus cover intact inside landscape project cards. */
.page-projects .pr-card-photo img[src$="uralsib-bonus.webp"],
.page-case .portrait-photo img[src$="uralsib-bonus.webp"] {
  object-fit:contain;
  object-position:50% 50%;
  background:#17151b;
}