/* Full-width composition requested for v3. Text measure remains local to its role. */
:root { --gutter: 32px; }
.shell { width: calc(100% - var(--gutter) * 2); max-width: none; }
/* Zero radius applies to all visual controls, imagery and dialogs, including states. */
*, *::before, *::after { border-radius: 0 !important; }
.project-cover.cover-concept { background: #fafafa; display: flex; align-items: center; justify-content: center; }
.project-cover.cover-concept img { object-fit: contain; object-position: center; }
.project-card-link:hover .cover-concept>img { transform: none; }
@media(max-width:767px) { .project-cover.cover-concept { aspect-ratio: 1.5; } }

/* Selected projects: one link per row; preview has its own reserved column. */
.work-list { display: flex; flex-direction: column; border: 0; }
.project-row { border-top: 1px solid var(--line); min-width: 0; }
.project-row:first-child { border-top: 0; }
.project-row-link {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 720px) minmax(160px, 1fr) 128px 44px 24px;
  align-items: first baseline;
  gap: 16px;
  min-height: 0;
  padding-block: 24px;
}
.project-row-link:focus-visible { outline: 2px solid black; outline-offset: 8px; }
.project-row-number { align-self: first baseline; color: #636363; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.project-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 12px; transition: transform 180ms ease; }
.project-row-copy h3 { font-size: 28px; line-height: 36px; letter-spacing: 0px; font-weight: 500; overflow-wrap: anywhere; hyphens: auto; transition: color 180ms ease; }
.project-row-copy p { font-size: 16px; line-height: 24px; color: #636363; max-width: 600px; }
.project-row-link:hover .project-row-copy, .project-row-link:focus-visible .project-row-copy { transform: none; }
.project-row-link:hover h3, .project-row-link:focus-visible h3 { color: #164bff; }
.project-row-link:is(:hover, :focus-visible) .project-row-arrow { color: #164bff; }
.project-row-facts { display: contents; }
.project-row-type { grid-column: 4; grid-row: 1; min-width: 0; overflow-wrap: anywhere; hyphens: auto; font-size: 16px; line-height: 24px; }
.project-row-year { grid-column: 5; grid-row: 1; font-size: 16px; line-height: 24px; color: #636363; font-variant-numeric: tabular-nums; }
.project-row-arrow { grid-column: 6; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; }
.project-row-arrow .icon { width: 24px; height: 24px; transition: transform 180ms ease; }
.project-row-link:hover .project-row-arrow .icon, .project-row-link:focus-visible .project-row-arrow .icon { transform: none; }
.project-row-preview { grid-column: 3; grid-row: 1; align-self: center; position: relative; height: 0; min-width: 0; pointer-events: none; }
.project-row-preview .project-cover { position: absolute; top: 50%; left: 0; transform: translateY(-50%); aspect-ratio: 1.5; width: min(100%, 320px); }
@media(min-width:1100px) and (hover:hover) and (pointer:fine) {
  .project-row-preview { opacity: 0; transform: translateY(8px); transition: opacity 120ms ease, transform 120ms ease; }
  .work-list:not(.has-previews) .project-row-link:hover .project-row-preview,
  .work-list:not(.has-previews) .project-row-link:focus-visible .project-row-preview,
  .project-row-link.is-preview-active:not(.preview-dismissed) .project-row-preview { opacity: 1; transform: none; transition-duration: 180ms; }
}
@media(max-width:1099px), (hover:none), (pointer:coarse) {
  .project-row-link { grid-template-columns: 40px minmax(0, 1fr) 32px; gap: 24px; padding-block: 24px; }
  .project-row-number { grid-column: 1; grid-row: 1; }
  .project-row-copy { grid-column: 2; grid-row: 1; }
  .project-row-copy h3 { font-size: 24px; line-height: 32px; }
  .project-row-arrow { grid-column: 3; grid-row: 1; align-self: start; padding-top: 8px; }
  .project-row-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; grid-column: 2 / -1; grid-row: 2; }
  .project-row-preview { display: none; }
}
@media(max-width:767px) {
  .project-row-link { grid-template-columns: 24px minmax(0, 1fr) 24px; gap: 12px; padding-block: 20px; }
  .project-row-number { grid-column: 1; grid-row: 1; }
  .project-row-arrow { grid-column: 3; grid-row: 1; padding-top: 0; }
  .project-row-copy { grid-column: 2; grid-row: 1; gap: 12px; }
  .project-row-copy h3 { font-size: 20px; line-height: 28px; letter-spacing: 0px; }
  .project-row-copy p { font-size: 16px; line-height: 24px; }
  .project-row-facts { grid-column: 2 / -1; grid-row: 2; gap: 8px 16px; }
}

.process { background: #fafafa; color: #000; --process-progress: 0.25; }
.work .section-label .eyebrow, .about .section-number { text-transform: none; letter-spacing: 0; }
.process-stage { padding-block: 80px; display: grid; grid-template-columns: 1fr 1.5fr; align-items: start; gap: 96px; }
.process-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.process-aside .eyebrow { color: #636363; }
.process-aside h2 { font-size: 64px; line-height: 64px; letter-spacing: -2px; }
.process-intro { color: #636363; max-width: 320px; font-size: 18px; line-height: 28px; }
.process-position { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: min(260px, 100%); font-size: 16px; line-height: 24px; font-variant-numeric: tabular-nums; }
.process-position strong { font-weight: 600; }
.process-track { width: 100%; height: 2px; background: #d9d9d9; position: relative; }
.process-track>span { position: absolute; inset: 0; background: #164bff; transform: scaleX(var(--process-progress)); transform-origin: left; transition: transform 900ms ease; }
.process-total { color: #636363; }
.process-step { padding-block: 16px; border-top: 1px solid #d9d9d9; scroll-margin-top: 32px; }
.process-step h3 { font-size: 32px; line-height: 40px; letter-spacing: -1px; font-weight: 500; }
.process-step h3 a { min-height: 48px; display: flex; align-items: baseline; gap: 24px; padding-block: 8px; }
.process-step h3 a:focus-visible { outline-color: black; }
.process-number { font-size: 14px; line-height: 20px; letter-spacing: 0px; min-width: 24px; font-variant-numeric: tabular-nums; color: #636363; }
.process-detail { padding: 8px 0 8px 48px; }
.process-detail p { max-width: 560px; font-size: 18px; line-height: 28px; color: #636363; }
.process-diagram { display: block; width: 360px; max-width: 100%; height: auto; margin-top: 24px; color: #164bff; }
.process-enhanced { height: 360svh; }
.process-enhanced .process-stage { position: sticky; top: 0; min-height: 100svh; align-items: center; padding-block: 48px; }
.process-enhanced .process-step h3 a { color: #636363; transition: color 240ms ease; }
.process-enhanced .process-step h3 a:hover, .process-enhanced .process-step.is-active h3 a { color: black; }
.process-enhanced .is-active .process-diagram>* { animation: draw-diagram 1800ms ease both; stroke-dasharray: 900; }
@keyframes draw-diagram { from { stroke-dashoffset: 900; opacity: 0.4; } to { stroke-dashoffset: 0; opacity: 1; } }

@media(min-width:1600px) { .hero-title { font-size: 96px; line-height: 96px; } .hero-composition { grid-template-columns: minmax(0, 1fr) 360px; } }
@media(max-width:1023px) { :root { --gutter: 24px; } .hero-composition { grid-template-columns: minmax(0, 1fr) 248px; gap: 32px; } .process-stage { gap: 48px; } .process-aside h2 { font-size: 48px; line-height: 48px; letter-spacing: -1px; } .process-step h3 { font-size: 28px; line-height: 36px; } }
@media(max-width: 1023px) {
  .process-stage { grid-template-columns: 1fr; gap: 48px; padding-block: 64px; }
  .process-aside { gap: 24px; }
  .process-aside h2 br { display: none; }
  .process-position { display: none; }
  .process-intro { max-width: 560px; }
  .process-step { padding-block: 24px; }
  .process-detail { padding-left: 48px; }
}
@media(max-width:767px) {
  :root { --gutter: 16px; }
  .hero { min-height: calc(100svh - var(--header-height, 80px)); padding-block: 24px; gap: 32px; }
  .hero-composition { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-topline { align-items: flex-start; gap: 16px; }
  .hero-topline>.eyebrow { max-width: 156px; }
  .hero-controls { flex-direction: column; align-items: flex-end; gap: 8px; }
  .hero-note { white-space: normal; max-width: 128px; }
  .motion-toggle { min-width: 128px; max-width: 144px; }
  .hero-side { max-width: none; width: 100%; }
  .hero-preview { max-width: 440px; }
  .hero-side p { max-width: 440px; }
  .hero-bottom { margin-top: 0; }
  .process-aside h2 { font-size: 40px; line-height: 48px; }
  .process-step h3 { font-size: 24px; line-height: 32px; letter-spacing: 0px; }
  .process-step h3 a { gap: 16px; }
  .process-number { min-width: 24px; }
  .process-detail { padding-left: 40px; }
  .process-detail p, .process-intro { font-size: 16px; line-height: 24px; }
}
@media(prefers-reduced-motion:reduce) {
  .project-row-preview, .project-row-arrow .icon, .project-row-copy { transform: none !important; }
  .process, .process-enhanced { height: auto; }
  .process-enhanced .process-stage { position: static; min-height: 0; }
  .process-diagram>* { animation: none !important; stroke-dashoffset: 0; }
  .process-track>span { transition: none; }
}

/* v8: a large condensed headline above a grounded intro and particle sphere. */
@font-face { font-family: 'Oswald'; src: url('./fonts/oswald.ttf') format('truetype'); font-weight: 200 700; font-style: normal; font-display: swap; }
.hero { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; min-height: calc(100svh - var(--header-height, 96px)); padding-block: 24px 32px; gap: 24px; }
.hero-title { font-family: 'Oswald', 'Golos Text', sans-serif; font-size: 128px; line-height: 128px; font-weight: 700; letter-spacing: -2px; width: 100%; max-width: none; text-shadow: none; text-transform: uppercase; }
.hero-title>span { display: block; }
.hero-lower { display: grid; grid-template-columns: minmax(0, 640px) minmax(320px, 1fr); align-items: end; gap: 64px; }
.hero-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 8px; }
.hero-description { max-width: 560px; font-size: 20px; line-height: 28px; }
.hero-action { align-self: flex-start; }
.hero-sphere { position: relative; width: clamp(320px, 28vw, 440px); aspect-ratio: 1.25; justify-self: end; }
/* The canvas's transparent projection margin does not add empty layout height. */
.hero-particles { position: absolute; left: 0; top: -12.5%; display: block; width: 100%; height: 125%; pointer-events: auto; }
.motion-toggle { position: absolute; right: 0; bottom: 0; min-height: 48px; min-width: 0; max-width: none; padding: 8px; border: 0; background: transparent; font-size: 12px; line-height: 16px; text-decoration: underline; text-underline-offset: 4px; }
.motion-toggle:hover { text-decoration-thickness: 2px; }
@media(min-width:1920px) { .hero-title { font-size: 160px; line-height: 160px; } .hero-sphere { width: 520px; } }
@media(min-width:2560px) { .hero-title { font-size: 224px; line-height: 224px; } .hero-sphere { width: 640px; } }
@media(min-width:3200px) { .hero-title { font-size: 256px; line-height: 256px; } }
@media(max-width:1439px) { .hero-title { font-size: 96px; line-height: 104px; } .hero-lower { gap: 40px; } .hero-sphere { width: 360px; } }
@media(max-width:1023px) { .hero-title { font-size: 80px; line-height: 88px; letter-spacing: -1px; } .hero-lower { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; } .hero-sphere { width: 300px; } }
@media(max-width:767px) { .hero { gap: 32px; padding-block: 24px; } .hero-title { font-size: 48px; line-height: 56px; letter-spacing: -1px; } .hero-title>span { display: inline; } .hero-lower { grid-template-columns: 1fr; gap: 24px; } .hero-description { font-size: 18px; line-height: 28px; } .hero-sphere { width: min(280px, 100%); } }
@media(max-width:359px) { .hero-title { font-size: 40px; line-height: 48px; } .hero-sphere { width: 248px; max-width: 100%; } }
@media(min-width:768px) and (max-height:799px) { .hero { padding-block: 16px; gap: 16px; } .hero-sphere { width: 320px; } }

/* Folder navigation stays in place while the portfolio scrolls beside it. */
@media(min-width: 1024px) {
  html { scroll-padding-top: 24px; }
  :root { --sidebar-width: clamp(300px, 31vw, 520px); --gutter: clamp(24px, 2.2vw, 48px); }
  body { padding-left: var(--sidebar-width); }
  .site-header { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); height: 100svh; z-index: 30; padding: 0; border: 0; border-right: 1px solid #000; background: #f4f4f4; }
  .header-inner.shell { width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: stretch; gap: 0; }
  .brand { min-height: 132px; padding: 28px; border-bottom: 1px solid #000; font-size: 22px; line-height: 28px; }
  .brand small { font-size: 13px; line-height: 20px; }
  .site-nav { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: 0; }
  .site-nav>a, .site-nav .contact-nav { --folder-color: #eee; position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0; min-height: 0; padding: 20px 28px 38px; border: 0; border-top: 1px solid #000; background: var(--folder-color); color: #000; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.1; font-weight: 500; text-decoration: none; transition: color 200ms ease, background 200ms ease; }
  .site-nav>a:nth-child(2) { --folder-color: #e3e3e3; }
  .site-nav>a:nth-child(3) { --folder-color: #eee; }
  .site-nav>a:nth-child(4) { --folder-color: #e3e3e3; }
  .site-nav>a:nth-child(5) { --folder-color: #eee; }
  .site-nav>a::before, .site-nav .folder-tab { position: absolute; top: -29px; left: var(--tab-left, 0%); width: min(70%, 270px); height: 30px; clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%); pointer-events: none; }
  .site-nav>a::before { content: ''; background: #000; }
  .site-nav .folder-tab { z-index: 1; top: -28px; left: calc(var(--tab-left, 0%) + 1px); width: calc(min(70%, 270px) - 2px); height: 29px; background: var(--folder-color); clip-path: polygon(0 0, 84.7% 0, 99.5% 100%, 0 100%); }
  .site-nav>a:nth-child(2) { --tab-left: 11%; }
  .site-nav>a:nth-child(3) { --tab-left: 5%; }
  .site-nav>a:nth-child(4) { --tab-left: 16%; }
  .site-nav>a:nth-child(5) { --tab-left: 8%; }
  .site-nav>a::after { content: '↗'; margin-left: 12px; font-size: 22px; line-height: 1; }
  .site-nav>a:hover, .site-nav .contact-nav:hover, .site-nav>a:focus-visible { --folder-color: #161616; z-index: 4; background: var(--folder-color); color: #fff; text-decoration: none; }
  .site-nav>a[aria-current], .site-nav .contact-nav[aria-current] { --folder-color: #164bff; z-index: 2; background: var(--folder-color); color: #fff; }
  .site-nav>a[aria-current]:hover, .site-nav>a[aria-current]:focus-visible { --folder-color: #161616; z-index: 4; }
  .hero { min-height: 100svh; }
}
@media(max-width: 1023px) {
  .folder-tab { display: none; }
  .has-menu .menu-toggle { display: flex; }
  .has-menu .site-nav { display: none; position: absolute; left: 0; top: 100%; z-index: 20; width: 100%; padding: 16px 24px 24px; background: #fff; border-bottom: 1px solid #000; }
  .has-menu .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .has-menu .site-nav>a { min-height: 48px; padding: 8px 0; justify-content: space-between; font-size: 22px; line-height: 30px; }
  .has-menu .site-nav .contact-nav { padding: 8px 0; background: none; color: #000; border: 0; }
  .site-nav>a[aria-current] { color: #164bff; }
}

/* The sphere now anchors the centre of the content pane. */
.hero { grid-template-rows: auto minmax(320px, 1fr) auto; min-height: 100svh; gap: 16px; padding-bottom: 16px; }
.hero-title { font-size: clamp(64px, 5vw, 160px); line-height: 1.04; }
.hero-stage { min-height: min(52vw, 560px); display: grid; place-items: center; }
.hero-sphere { width: min(60%, 560px); aspect-ratio: 1; justify-self: center; }
.hero-particles { top: 0; height: 100%; }
.hero-bottomline { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero-intro { padding-bottom: 0; gap: 16px; }
.hero-fields { display: flex; flex-direction: column; gap: 4px; flex: none; padding-left: 16px; border-left: 2px solid #164bff; font-size: 13px; line-height: 20px; color: #636363; }
@media(min-width: 1024px) and (max-width:1439px) {
  .hero-title { font-size: clamp(60px, 5vw, 80px); }
  .hero-stage { min-height: 440px; }
  .hero-sphere { width: min(66%, 500px); }
  .hero-description { font-size: 18px; line-height: 26px; }
}
@media(max-width: 1023px) {
  .hero { min-height: calc(100svh - var(--header-height, 81px)); }
  .hero-title { font-size: clamp(48px, 8vw, 80px); }
  .hero-stage { min-height: 360px; }
  .hero-sphere { width: min(78%, 520px); }
}
@media(max-width:767px) {
  .hero { gap: 24px; }
  .hero-title { font-size: 48px; line-height: 56px; }
  .hero-stage { min-height: 300px; }
  .hero-sphere { width: min(92%, 400px); }
  .hero-bottomline { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-fields { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
}
@media(max-width:359px) { .hero-title { font-size: 40px; line-height: 48px; } }
@media(min-width: 1024px) and (max-width:1239px) {
  .project-row-link { grid-template-columns: 24px minmax(0, 1fr) 128px 44px 24px; gap: 16px; }
  .project-row-number { grid-column: 1; grid-row: 1; }
  .project-row-copy { grid-column: 2; grid-row: 1; }
  .project-row-facts { display: contents; }
  .project-row-type { grid-column: 3; grid-row: 1; }
  .project-row-year { grid-column: 4; grid-row: 1; }
  .project-row-arrow { grid-column: 5; grid-row: 1; }
  .project-row-preview { display: none; }
}

/* One editorial rail aligns every content section beside its small label. */
@media(min-width: 1024px) {
  :root { --content-rail: clamp(132px, 17%, 240px); --content-gap: clamp(28px, 3vw, 56px); }
  .work { display: grid; grid-template-columns: var(--content-rail) minmax(0, 1fr); gap: var(--content-gap); align-items: start; padding-block: 96px 112px; }
  .work .section-label { grid-column: 1; padding-top: 24px; }
  .work-list { grid-column: 2; min-width: 0; }
  .process-stage { grid-template-columns: var(--content-rail) minmax(0, 1fr); gap: var(--content-gap); }
  .process-aside { gap: 24px; }
  .process-aside h2 { font-size: clamp(40px, 3vw, 64px); line-height: 1.05; }
  .process-enhanced { height: 240svh; }
  .process-enhanced .process-stage { align-items: start; padding-block: clamp(88px, 12svh, 140px) 48px; }
  .process-aside .eyebrow { text-transform: none; letter-spacing: 0; }
  .editorial-grid, .case-body { grid-template-columns: var(--content-rail) minmax(0, 1fr); gap: var(--content-gap); }
  .contact>.shell { display: grid; grid-template-columns: var(--content-rail) minmax(0, 1fr); column-gap: var(--content-gap); }
  .contact>.shell>.eyebrow { grid-column: 1; align-self: start; }
  .contact-main, .contact-links, .footer-bottom { grid-column: 2; }
}
@media(min-width: 1024px) and (max-width:1699px) {
  .project-row-link { grid-template-columns: 24px minmax(0, 1fr) 128px 44px 24px; gap: 12px; }
  .project-row-number { grid-column: 1; }
  .project-row-copy { grid-column: 2; }
  .project-row-type { grid-column: 3; }
  .project-row-year { grid-column: 4; }
  .project-row-arrow { grid-column: 5; }
  .project-row-preview { display: none; }
}

/* The hero keeps its own open composition and a small rotating focus card. */
.hero-fields { position: relative; display: block; width: clamp(232px, 22vw, 290px); min-height: 190px; padding: 22px 22px 18px; border: 1px solid #181818; background: #f6f6f6; box-shadow: 8px 8px 0 #164bff; color: #151515; }
.hero-fields::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: #164bff; }
.hero-fields-kicker { display: block; margin-bottom: 19px; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.hero-fields ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hero-fields li { display: flex; align-items: center; gap: 11px; font-size: 16px; line-height: 22px; font-weight: 500; color: #111; opacity: .36; animation: focus-cycle 12s linear infinite; }
.hero-fields li::before { content: ''; width: 7px; height: 7px; flex: none; border: 1px solid currentColor; background: currentColor; }
.hero-fields li:nth-child(2) { animation-delay: -8s; }
.hero-fields li:nth-child(3) { animation-delay: -4s; }
.hero-fields-index { display: block; margin-top: 19px; font-size: 11px; letter-spacing: .08em; color: #555; }
@keyframes focus-cycle { 0%, 2%, 26% { opacity: 1; color: #164bff; } 33%, 100% { opacity: .36; color: #111; } }
@media(min-width:1600px) {
  .hero { gap: 8px; padding-block: 16px 8px; }
  .hero-title { font-size: min(5vw, 7.4svh); line-height: 1.04; }
  .hero-stage { min-height: 0; }
  .hero-sphere { width: min(60%, 49svh, 560px); }
  .hero-fields { padding: 18px 20px 14px; }
  .hero-fields-kicker { margin-bottom: 14px; }
  .hero-fields ul { gap: 7px; }
  .hero-fields-index { margin-top: 14px; }
}
@media(max-width:767px) {
  .hero-fields { width: min(100%, 320px); min-height: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-fields li { animation: none; opacity: 1; }
}
.concept-note { margin-top: 24px; color: #636363; font-size: 14px; line-height: 22px; }
.process-aside .eyebrow { text-transform: none; letter-spacing: 0; }

/* Folder tabs occupy the first 30px of their own row, so no active row can cover the next tab. */
@media (min-width: 1024px) {
  .site-nav>a, .site-nav .contact-nav {
    z-index: 1;
    border-top: 0;
    padding-top: 42px;
    background: linear-gradient(to bottom, transparent 0 29px, var(--folder-color) 29px);
  }
  .site-nav>a::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 29px;
    left: min(70%, 270px);
    right: 0;
    width: auto;
    height: 1px;
    background: #000;
    clip-path: none;
  }
  .site-nav .folder-tab {
    display: flex;
    align-items: flex-start;
    top: 0;
    left: 0;
    z-index: 1;
    width: min(70%, 270px);
    height: 30px;
    padding: 4px 0 0 15px;
    background: #000;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
    color: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
  }
  .site-nav .folder-tab::before {
    content: '';
    position: absolute;
    inset: 1px 1px 0;
    background: var(--folder-color);
    clip-path: polygon(0 0, 84.7% 0, 99.5% 100%, 0 100%);
  }
  .site-nav .folder-tab>span { position: relative; z-index: 1; }
  .site-nav>a:nth-child(n) { --tab-left: 0; }
  .site-nav>a:hover, .site-nav .contact-nav:hover,
  .site-nav>a:focus-visible, .site-nav>a[aria-current],
  .site-nav .contact-nav[aria-current] {
    z-index: 1;
    background: linear-gradient(to bottom, transparent 0 29px, var(--folder-color) 29px);
  }
  .site-nav>a:focus-visible { outline: 2px solid #164bff; outline-offset: -3px; }
}

/* The five columns are measured inside the content pane, not across the sidebar. */
@media (min-width: 1400px) {
  .work, .process-stage, .editorial-grid, .contact>.shell {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 24px;
  }
  .work .section-label, .process-aside, .about .section-number,
  .contact>.shell>.eyebrow { grid-column: 1; }
  .work-list { grid-column: 2 / -1; }
  .process-steps, .about-content, .contact-main,
  .contact-links, .footer-bottom { grid-column: 3 / -1; min-width: 0; }
  .process-step h3 a { position: relative; gap: 12px; }
  .process-number { position: static; min-width: 24px; }
  .process-detail { padding-left: 36px; }
  .contact-main { padding-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .work, .process-stage, .editorial-grid, .contact>.shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .work .section-label, .work-list, .process-aside, .process-steps,
  .about .section-number, .about-content, .contact>.shell>.eyebrow,
  .contact-main, .contact-links, .footer-bottom { grid-column: 1; }
  .work .section-label { padding-top: 0; }
}

.work .section-label .eyebrow, .process-aside h2, .about .section-number,
.contact .contact-label, .contact>.shell>.eyebrow {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0;
  font-weight: 500;
  text-transform: none;
}
.about .section-number { display: block; color: #000; }
.process-aside h2 { max-width: 100%; }
.about-title { font-size: clamp(48px, 4vw, 64px); line-height: 1.125; }
.contact-title { font-size: clamp(48px, 4vw, 64px); line-height: 1.125; }
.contact-main { flex-direction: column; align-items: flex-start; gap: 32px; }
.contact .contact-label, .contact>.shell>.eyebrow { color: #fff; }
.hero { padding-bottom: 64px; }
@media (min-width: 1024px) and (max-height: 1000px) {
  .hero { grid-template-rows: auto minmax(0, 1fr) auto; }
  .hero-stage { min-height: min(40svh, 400px); }
  .hero-sphere { width: min(60%, 40svh, 560px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero { grid-template-rows: auto minmax(0, 1fr) auto; }
  .hero-stage { min-height: min(32svh, 320px); }
  .hero-sphere { width: min(60%, 32svh, 400px); }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .work .section-label .eyebrow, .process-aside h2, .about .section-number,
  .contact .contact-label, .contact>.shell>.eyebrow { font-size: 28px; line-height: 36px; }
  .hero { padding-bottom: 48px; }
}
@media (max-width: 767px) {
  .work .section-label .eyebrow, .process-aside h2, .about .section-number,
  .contact .contact-label, .contact>.shell>.eyebrow { font-size: 24px; line-height: 32px; }
  .hero { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* A case has its own project index between the folders and the case itself. */
.case-rail { display: none; }
.case-mobile-back { display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 44px; margin: 16px var(--gutter) 8px; font-size: 16px; line-height: 24px; }
.case-mobile-back .icon { width: 18px; height: 18px; }
.case-mobile-back:focus-visible { outline: 2px solid #164bff; outline-offset: 4px; }
.case-switcher { margin: 0 var(--gutter) 24px; border: 1px solid #000; background: #fff; }
.case-switcher summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 16px; cursor: pointer; font-size: 18px; line-height: 28px; font-weight: 600; list-style: none; }
.case-switcher summary::-webkit-details-marker { display: none; }
.case-switcher summary::after { content: '+'; margin-left: 16px; }
.case-switcher[open] summary::after { content: '−'; }
.case-switcher summary span { margin-left: auto; font-size: 14px; font-weight: 400; }
.case-switcher nav { display: grid; padding: 0 16px 8px; }
.case-switcher nav a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 48px; padding: 8px; border-top: 1px solid #d9d9d9; font-size: 16px; line-height: 24px; }
.case-switcher nav a[aria-current] { background: #164bff; color: #fff; }
.case-switcher a:focus-visible, .case-switcher summary:focus-visible { outline: 2px solid #164bff; outline-offset: -3px; }
.case-switcher .case-rail-back { grid-template-columns: minmax(0, 1fr) 24px; }
.case-rail-back .icon { width: 18px; height: 18px; }

/* A single SVG path draws the entire folder face and outline. The notch inherits the preceding face. */
@media (min-width: 1024px) {
  .site-nav>a, .site-nav .contact-nav {
    isolation: isolate;
    align-items: flex-start;
    padding: 52px 28px 24px;
    background: transparent;
  }
  .site-nav>a:hover, .site-nav .contact-nav:hover,
  .site-nav>a:focus-visible, .site-nav>a[aria-current],
  .site-nav .contact-nav[aria-current] { background: transparent; }
  .site-nav>a::before { display: none; }
  .site-nav .folder-outline { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
  .site-nav .folder-tab { z-index: 1; top: 0; left: 0; width: min(70%, 270px); height: 30px; padding: 4px 0 0 15px; background: none; clip-path: none; }
  .site-nav .folder-tab::before { display: none; }
  .site-nav>a::after { position: relative; z-index: 1; }
}

@media (min-width: 1400px) { .work-list { grid-column: 3 / -1; } }
.process-enhanced { height: auto; }
.process-enhanced .process-stage { position: static; min-height: 0; align-items: start; padding-block: 80px; }
.process-diagram { width: min(100%, 520px); }
@media (max-width: 767px) { .process-enhanced .process-stage { padding-block: 48px; } }
@media (min-width: 1400px) {
  .contact-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; }
  .contact-title { min-width: 0; }
}

.hero-fields { width: min(100%, 320px); min-height: 0; padding: 24px; }
.hero-fields-kicker { margin-bottom: 16px; font-size: 16px; line-height: 24px; letter-spacing: 0; text-transform: none; }
.hero-fields ul { gap: 8px; }
.hero-fields li { font-size: 18px; line-height: 28px; animation: none; opacity: 1; }
.hero-fields-index { margin-top: 16px; }
@keyframes focus-cycle-four { 0%, 2%, 20% { opacity: 1; color: #164bff; } 25%, 100% { opacity: .36; color: #111; } }
@media (max-width: 767px) { .hero-fields li { font-size: 16px; line-height: 24px; } }
@media (prefers-reduced-motion: reduce) { .hero-fields li { animation: none; opacity: 1; } }

/* Keep the enlarged sphere centred in the stage; on short screens the document may grow. */
.hero-stage { min-height: min(52vw, 700px); }
.hero-sphere { width: min(70%, 700px); }
@media (min-width: 1024px) and (max-height: 1000px) {
  .hero-stage { min-height: min(45svh, 450px); }
  .hero-sphere { width: min(65%, 45svh, 700px); }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .hero-stage { min-height: min(37svh, 370px); }
  .hero-sphere { width: min(65%, 37svh, 600px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-stage { min-height: 440px; }
  .hero-sphere { width: min(88%, 500px); }
}
@media (max-width: 767px) {
  .hero-stage { min-height: min(100vw, 440px); }
  .hero-sphere { width: min(100%, 440px); }
}

@media (min-width: 1400px) {
  :root { --sidebar-brand-height: 132px; }
  .brand { min-height: var(--sidebar-brand-height); }
  .case-rail { overflow: hidden; }
  .case-rail .case-rail-back { flex: none; min-height: var(--sidebar-brand-height); height: var(--sidebar-brand-height); padding: 28px 16px; }
  .case-rail-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .case-rail-list>a { width: 100%; margin: 0; }
}
@media (min-width: 1400px) {
  .project-row-link { grid-template-columns: 24px minmax(0, 1fr) minmax(140px, 220px) 128px 44px 24px; gap: 12px; }
  .project-row-number { grid-column: 1; grid-row: 1; }
  .project-row-copy { grid-column: 2; grid-row: 1; }
  .project-row-arrow { grid-column: 6; grid-row: 1; }
  .project-row-facts { display: contents; }
  .project-row-preview { display: block; grid-column: 3; grid-row: 1; }
}
@media (min-width: 1400px) and (max-width: 1899px) {
  .contact-main { display: flex; flex-direction: column; align-items: flex-start; }
}

/* Fixed 36px tabs overlap only the empty end of the previous folder. */
@media (min-width: 1024px) {
  :root { --nav-inset: 28px; }
  .brand { padding-inline: var(--nav-inset); }
  .site-nav { grid-template-rows: repeat(5, minmax(124px, 1fr)); overflow-y: auto; scrollbar-width: thin; }
  .site-nav>a, .site-nav .contact-nav {
    z-index: 1;
    margin-top: -36px;
    align-items: flex-start;
    padding: 52px var(--nav-inset) 16px;
    border: 0;
    background: linear-gradient(to bottom, transparent 0 36px, var(--folder-color) 36px);
  }
  .site-nav>a:first-child { margin-top: 0; }
  .site-nav>a:hover, .site-nav .contact-nav:hover,
  .site-nav>a:focus-visible, .site-nav>a[aria-current],
  .site-nav .contact-nav[aria-current] {
    z-index: 1;
    background: linear-gradient(to bottom, transparent 0 36px, var(--folder-color) 36px);
  }
  .site-nav>a::before {
    display: block;
    content: '';
    position: absolute;
    z-index: 2;
    top: 35px;
    left: 236px;
    right: 0;
    width: auto;
    height: 1px;
    background: #000;
    clip-path: none;
  }
  .site-nav .folder-tab {
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    z-index: 1;
    width: 236px;
    height: 36px;
    padding: 0 0 0 var(--nav-inset);
    background: var(--folder-color);
    clip-path: polygon(0 0, 200px 0, 236px 100%, 0 100%);
    font-size: 14px;
    line-height: 20px;
  }
  .site-nav .folder-outline { display: block; position: absolute; inset: 0 auto auto 0; z-index: 2; width: 236px; height: 36px; pointer-events: none; }
  .site-nav>a::after { margin-left: auto; }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .site-nav>a, .site-nav .contact-nav { font-size: 30px; line-height: 34px; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  :root { --nav-inset: 24px; }
}

/* Compact desktop folders and the latest shared content guide. */
@media (min-width: 1024px) {
  :root { --sidebar-width: clamp(280px, 22vw, 360px); --sidebar-brand-height: 104px; --nav-inset: 24px; }
  .brand { min-height: var(--sidebar-brand-height); padding: 24px var(--nav-inset); border-bottom: 0; font-size: 20px; line-height: 28px; }
  .brand small { font-size: 14px; line-height: 20px; }
  .site-nav { grid-template-rows: repeat(5, minmax(120px, 1fr)); }
  .site-nav>a, .site-nav .contact-nav {
    margin-top: -32px;
    padding: 48px var(--nav-inset) 16px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    background: var(--folder-color);
    clip-path: polygon(0 0, 160px 0, 184px 32px, 100% 32px, 100% 100%, 0 100%);
  }
  .site-nav>a:first-child { margin-top: 0; }
  .site-nav>a:hover, .site-nav .contact-nav:hover,
  .site-nav>a:focus-visible, .site-nav>a[aria-current],
  .site-nav .contact-nav[aria-current] { background: var(--folder-color); }
  .site-nav>a::before { top: 31.5px; left: 184px; }
  .site-nav .folder-tab {
    width: 184px;
    height: 32px;
    font-size: 12px;
    line-height: 16px;
    background: transparent;
    clip-path: none;
  }
  .site-nav .folder-outline { width: 184px; height: 32px; }
  .case-rail .case-rail-back { min-height: var(--sidebar-brand-height); height: var(--sidebar-brand-height); }
}
@media (min-width: 1920px) {
  .site-nav>a, .site-nav .contact-nav { font-size: 28px; line-height: 36px; }
}
/* Match the hero's vertical breathing room to its horizontal gutter. */
.hero { padding-block: var(--gutter); }
@media (min-width: 1024px) {
  .site-nav>a:is(:hover, :focus-visible) { z-index: 3; }
  .site-nav .folder-tab::before { display: none; }
  .hero-stage { position: relative; }
  .hero-stage .hero-sphere { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: 100%; width: auto; height: 100%; aspect-ratio: 1; }
}
@media (min-width: 1600px) {
  .hero-title { font-size: min(5.4vw, 8svh); }
  .hero-stage { min-height: min(38svh, 550px); }
}
@media (min-width: 1400px) {
  .process-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr); gap: 32px; align-items: center; padding-block: 16px 24px; }
  .process-detail[hidden] { display: none; }
  .process-diagram { margin-top: 0; justify-self: end; }
  .about-content { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
  .about-title, .about-prose { grid-column: 1 / 3; }
  .about-prose { grid-template-columns: 1fr; }
  .about-title { grid-row: 1; }
  .about-prose { grid-row: 2; }
  .about-secondary { grid-column: 3; grid-row: 1 / 3; }
}
.about-secondary { display: flex; flex-direction: column; align-items: stretch; gap: 32px; min-width: 0; }
.about-secondary>.text-link { align-self: flex-start; }
@media (min-width: 1400px) {
  .work-list, .process-steps, .about-content, .contact-main,
  .contact-links, .footer-bottom { grid-column: 2 / -1; }
  .contact-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .case-rail-list { display: flex; flex-direction: column; }
  .case-rail-list>a { flex: 1 0 72px; min-height: 72px; align-content: center; }
}
@media (min-width: 1400px) {
  :root { --case-rail-width: clamp(200px, 16vw, 240px); }
  body:has(.case-rail) { padding-left: calc(var(--sidebar-width) + var(--case-rail-width)); }
  .case-switcher, .case-mobile-back { display: none; }
  .case-rail { position: fixed; z-index: 20; inset: 0 auto 0 var(--sidebar-width); display: flex; flex-direction: column; width: var(--case-rail-width); height: 100svh; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid #000; background: #f8f8f8; scrollbar-width: thin; }
  .case-rail a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; min-height: 72px; padding: 16px; border-bottom: 1px solid #c8c8c8; font-size: 15px; line-height: 22px; text-decoration: none; }
  .case-rail a span:first-child { font-size: 13px; color: #636363; }
  .case-rail a[aria-current] { background: #164bff; color: #fff; }
  .case-rail a[aria-current] span:first-child { color: #fff; }
  .case-rail a:hover:not([aria-current]) { background: #e8e8e8; }
  .case-rail a:focus-visible { outline: 2px solid #164bff; outline-offset: -3px; }
  .case-rail .case-rail-back { display: flex; justify-content: flex-start; align-items: center; min-height: 72px; font-weight: 600; }
}

/* Plain project and process labels, without a reserved numbering column. */
.folder-silhouette { display: none; }
@media (min-width: 1024px) {
  .site-nav>a,
  .site-nav>a:is(:hover, :focus-visible),
  .site-nav>a[aria-current] { background: transparent; clip-path: none; z-index: 1; }
  .site-nav>a::before { display: none; }
  .site-nav .folder-silhouette { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: drop-shadow(0 -3px 8px rgb(0 0 0 / 8%)); }
  .site-nav .folder-silhouette>span { display: block; width: 100%; height: 100%; background: var(--folder-color); clip-path: polygon(0 0, 160px 0, 184px 32px, 100% 32px, 100% 100%, 0 100%); }
  .site-nav>a:first-child .folder-silhouette { filter: none; }
}
.project-row-arrow { display: block; height: 24px; line-height: 24px; font-size: 16px; justify-self: end; align-self: first baseline; padding-top: 0; }
.project-row-arrow .icon { display: inline-block; vertical-align: -4px; position: relative; top: 2px; }
.project-row-number, .process-number { display: none; }
.process-step:last-child { border-bottom: 1px solid var(--line); }
.project-row-link { grid-template-columns: minmax(0, 1fr) 24px; }
.project-row-copy { grid-column: 1; }
.project-row-facts { grid-column: 1; }
.project-row-arrow { grid-column: 2; }
.process-detail { padding-left: 0; }
@media (min-width: 1400px) {
  .project-row-link { grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) 128px 44px 24px; }
  .project-row-preview { grid-column: 2; }
  .project-row-type { grid-column: 3; }
  .project-row-year { grid-column: 4; }
  .project-row-arrow { grid-column: 5; }
}

/* Case pages share five columns: project navigation, two text, two image columns. */
body:has(.case-hero) .site-nav>a[aria-current] { --folder-color: #e3e3e3; background: var(--folder-color); color: #164bff; }
body:has(.case-hero) .site-nav>a[aria-current]:hover { --folder-color: #161616; color: #fff; }
.case-cover { margin-top: var(--gutter); margin-bottom: 0; }
.case-cover .project-cover { aspect-ratio: 2.4; }
.case-cover .cover-concept img { width: 100%; height: 100%; object-fit: contain; }
.case-section-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.next-case>a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 320px) auto; gap: 32px; align-items: center; }
.next-case-cover .project-cover { aspect-ratio: 1.5; }
.next-case-cover img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 1400px) {
  body:has(.case-hero) { --case-column: calc((100vw - var(--sidebar-width) - var(--gutter) * 2 - 96px) / 5); --case-rail-width: calc(var(--case-column) + 24px); }
  .case-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-block: 48px 64px; }
  .case-hero>.back-link, .case-hero>.eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
  .case-title { grid-column: 1 / 3; font-size: clamp(36px, 3vw, 64px); line-height: 1.12; letter-spacing: -1px; overflow-wrap: anywhere; }
  .case-intro { display: contents; }
  .case-summary { grid-column: 1 / 3; font-size: 20px; line-height: 30px; }
  .case-facts { grid-column: 1 / 3; align-self: start; }
  .case-body { display: block; }
  .case-toc { display: none; }
  .case-sections { gap: 64px; }
  .case-section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .case-section-copy { grid-column: 1 / 3; }
  .case-section .image-grid { grid-column: 3 / 5; display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 0; }
  .case-section .image-link img { max-height: none; object-fit: contain; }
  .case-section h2 { font-size: 32px; line-height: 40px; }
  .case-section p { max-width: none; }
  .next-case>a { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .next-case>a>div:first-child { grid-column: 1 / 3; }
  .next-case-cover { grid-column: 3; }
  .next-case .round-arrow { grid-column: 4; justify-self: end; }
}
@media (max-width: 767px) {
  .case-cover .project-cover { aspect-ratio: 1.5; }
  .next-case>a { grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
  .next-case-cover { grid-column: 1 / -1; grid-row: 2; width: min(100%, 320px); }
}

/* Current layout: one five-column grid for home, index and case pages. */
:root { --gutter: 32px; --grid-gap: 24px; }
@media (min-width: 768px) and (max-width: 1399px) { :root { --gutter: 24px; } }
@media (max-width: 767px) { :root { --gutter: 16px; } }
.work, .about { padding-block: 80px; }
.contact { padding-block: 80px; }
.projects-index { min-height: 60svh; }
.projects-index .section-label h1 { font-size: 28px; line-height: 36px; font-weight: 500; }
.about-secondary { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
@media (min-width: 1400px) {
  .work, .process-stage, .editorial-grid, .contact>.shell { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .work .section-label, .process-aside, .about .section-number, .contact>.shell>.eyebrow { grid-column: 1; }
  .work-list, .process-steps, .about-content, .contact-main, .contact-links, .footer-bottom { grid-column: 2 / -1; min-width: 0; }
  .about-content { display: grid; grid-template-columns: var(--editorial-photo-width) var(--editorial-bio-width) minmax(0, 1fr); gap: 40px var(--editorial-gap); align-items: start; justify-content: start; }
  .about-title { grid-column: 2; grid-row: 1; max-width: 680px; font-size: 48px; line-height: 56px; }
  .about-prose { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; max-width: 680px; }
  .about-secondary { grid-column: 3; grid-row: 1 / 3; }
  .process-detail { grid-template-columns: calc(var(--editorial-right-start) - var(--editorial-gap)) minmax(0, 1fr); column-gap: var(--editorial-gap); justify-content: start; }
  .process-detail>p { grid-column: 1; }
  .process-diagram { grid-column: 2; justify-self: start; width: min(100%, 520px); }
  .contact-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  .contact-title { grid-column: 1 / 3; font-size: clamp(40px, 3vw, 56px); line-height: 1.14; }
  .contact-link { grid-column: 3 / 5; justify-self: stretch; width: 100%; }
}

/* Selected preview begins at column four of the shared five-column grid. */
@media (min-width: 1800px) and (hover: hover) and (pointer: fine) {
  .work-list .project-row-link { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
  .work-list .project-row-copy { grid-column: 1 / 3; grid-row: 1; }
  .work-list .project-row-preview { display: block; grid-column: 3; grid-row: 1; }
  .work-list .project-row-facts { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 16px; grid-column: 4; grid-row: 1; padding-right: 40px; min-width: 0; }
  .work-list .project-row-type, .work-list .project-row-year { grid-column: auto; grid-row: auto; }
  .work-list .project-row-arrow { grid-column: 4; grid-row: 1; justify-self: end; align-self: first baseline; }
}
@media (min-width: 1100px) and (max-width: 1799px) {
  .work-list .project-row-link { grid-template-columns: minmax(0, 1fr) minmax(128px, 160px) 44px 24px; gap: 16px; }
  .work-list .project-row-copy { grid-column: 1; grid-row: 1; }
  .work-list .project-row-facts { display: contents; }
  .work-list .project-row-type { grid-column: 2; grid-row: 1; }
  .work-list .project-row-year { grid-column: 3; grid-row: 1; }
  .work-list .project-row-arrow { grid-column: 4; grid-row: 1; }
}
@media (max-width: 1799px), (hover: none), (pointer: coarse) {
  .work-list .project-row-preview { display: none; }
}


/* The cover and back link span the case body; text and images have independent heights. */
.case-cover { display: flex; flex-direction: column; gap: 24px; margin-top: var(--gutter); margin-bottom: 64px; }
.case-cover .back-link { align-self: flex-start; margin: 0; }
.case-cover-link { display: block; }
.case-cover .project-cover { aspect-ratio: 16 / 9; }
.case-cover .cover-concept img { object-fit: cover; object-position: center; }
.case-layout { display: flex; flex-direction: column; gap: 48px; align-items: stretch; }
.case-text, .case-gallery { min-width: 0; }
.case-hero { display: flex; flex-direction: column; gap: 24px; padding: 0 0 64px; }
.case-hero>.eyebrow { margin: 0; }
.case-title { font-size: clamp(36px, 3.4vw, 64px); line-height: 1.12; }
.case-intro { display: flex; flex-direction: column; gap: 24px; }
.case-summary { font-size: 20px; line-height: 30px; }
.case-body { display: block; padding: 0; }
.case-sections { display: flex; flex-direction: column; gap: 64px; }
.case-section { display: block; }
.case-section-copy { display: flex; flex-direction: column; gap: 24px; }
.case-section p { max-width: none; }
.case-gallery .image-grid, .case-gallery .image-grid.single { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 0; }
.case-gallery .image-link { aspect-ratio: 16 / 9; }
.case-gallery .image-link img, .case-gallery .image-grid.single img { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top center; }
.case-gallery figcaption { margin-top: 12px; }
.case-gallery--boards .image-link { aspect-ratio: auto; }
.case-gallery--boards .image-link img { height: auto; object-fit: contain; }
.case-source { font-size: 14px; line-height: 22px; }
.case-source a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1400px) {
  body:has(.case-hero) { --case-column: calc((var(--page-width, 100vw) - var(--sidebar-width) - var(--gutter) * 2 - var(--grid-gap) * 4) / 5); --case-rail-width: calc(var(--case-column) + var(--grid-gap)); }
  .case-layout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  .case-text { grid-column: 1 / 3; }
  .case-text[data-sticky="true"] { position: sticky; top: var(--case-sticky-top, 24px); }
  .case-gallery { grid-column: 3 / 5; }
  .case-title, .case-summary, .case-facts, .case-section-copy { grid-column: auto; }
}
@media (max-width: 767px) {
  .work, .about, .contact { padding-block: 48px; }
  .case-cover { margin-bottom: 48px; }
  .case-hero { padding-bottom: 48px; }
  .case-sections { gap: 48px; }
  .case-gallery .image-grid { gap: 24px; }
  .case-summary { font-size: 18px; line-height: 28px; }
}

/* Full image viewer: fit the complete original first, then zoom and pan. */
.image-viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #111; color: #fff; }
.image-viewer[open] { display: flex; flex-direction: column; }
.viewer-toolbar { position: relative; flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 24px; background: #111; color: #fff; border-bottom: 0; }
.viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.viewer-toolbar p { font-size: 16px; line-height: 24px; min-width: 0; }
.viewer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.viewer-controls button, .viewer-close { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 8px 12px; border: 1px solid #666; background: #202020; color: #fff; font-size: 16px; line-height: 24px; cursor: pointer; }
.viewer-controls button:hover, .viewer-close:hover { background: #383838; }
.viewer-controls button:disabled { opacity: .35; cursor: default; }
.viewer-controls button:focus-visible, .viewer-close:focus-visible { outline: 2px solid #74a9ff; outline-offset: 3px; }
.viewer-close { flex: none; width: 44px; }
[data-viewer-status] { margin-left: 8px; font-size: 14px; line-height: 20px; }
.viewer-image { position: relative; display: block; flex: 1; min-height: 0; width: 100%; padding: 0; overflow: hidden; touch-action: none; }
.viewer-image img { position: absolute; left: 50%; top: 50%; max-width: none; max-height: none; align-self: auto; object-fit: contain; transform-origin: center; pointer-events: none; user-select: none; }
.viewer-image.can-pan { cursor: grab; }
.viewer-image.is-dragging { cursor: grabbing; }
@media (max-width: 767px) {
  .viewer-toolbar { padding: 12px 16px; }
  .viewer-heading { gap: 12px; }
  .viewer-toolbar p { font-size: 14px; line-height: 20px; }
  [data-viewer-status] { margin-left: 0; width: 100%; }
}

/* Folder colour always belongs to the silhouette, including Contact hover. */
@media (min-width: 1024px) {
  .site-header, .site-header .header-inner, .site-header .site-nav { border-right: 0; }
  .site-header .site-nav>a,
  .site-header .site-nav>a:is(:hover, :focus-visible, [aria-current]) { background: transparent !important; clip-path: none; z-index: 1 !important; }
  .site-header .site-nav>a::before { display: none; }
}
@media (min-width: 1400px) {
  .about-secondary { align-self: stretch; }
  .about-secondary>.text-link { margin-top: auto; }
}
@media (max-width: 1399px) {
  .about-secondary { gap: 24px; width: 100%; }
  .about-secondary>.text-link { margin-top: auto; }
}

@media (min-width: 1024px) {
  .site-header .header-inner .site-nav>a { color: #000; }
  .site-header .header-inner .site-nav>a:nth-child(odd) { --folder-base: #eee; --folder-color: var(--folder-base); }
  .site-header .header-inner .site-nav>a:nth-child(even) { --folder-base: #d9d9d9; --folder-color: var(--folder-base); }
  .site-header .header-inner .site-nav>a[aria-current] { --folder-color: var(--folder-base); color: #164bff; }
  .site-header .header-inner .site-nav>a:is(:hover, :focus-visible) { --folder-color: #161616; color: #fff; }
}
:root { --case-rail-line: #c8c8c8; --case-media-width: 568px; }
.case-rail { border-right-color: var(--case-rail-line); }
.case-rail a { border-bottom-color: var(--case-rail-line); }
/* The stage controls and the particle form share one animation clock. */




.hero-fields li::before { display: none; }
.hero-fields li button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px; padding: 2px 0; border: 0; background: transparent; color: #777; font: inherit; text-align: left; cursor: pointer; transition: color 180ms ease; }
.hero-fields li button::before { content: ''; width: 7px; height: 7px; flex: none; background: currentColor; }
.hero-fields li button[aria-pressed="true"], .hero-fields li button:hover { color: #164bff; }
.hero-fields button:focus-visible { outline: 2px solid #164bff; outline-offset: 4px; }
.hero-stage-description { min-height: 40px; margin-top: 16px; max-width: 250px; font-size: 13px; line-height: 20px; color: #636363; }
.hero-stage-loader { height: 2px; margin-top: 12px; background: #d9d9d9; overflow: hidden; }
.hero-stage-loader>span { display: block; height: 100%; background: #164bff; transform: scaleX(var(--stage-progress, 0)); transform-origin: left; }
.hero-stage-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.hero-stage-footer .hero-fields-index { margin: 0; font-variant-numeric: tabular-nums; }
.hero-stage-pause { border: 0; background: none; padding: 8px 0 8px 12px; color: #636363; font: inherit; font-size: 12px; cursor: pointer; }
.hero-stage-pause:hover { color: #164bff; }
@media(min-width:1400px) { .hero-title { width: 100%; } }
@media(min-width: 1024px) and (max-width:1399px) { .hero-title { width: 100%; }  }
@media(max-width: 1023px) {  .hero-stage { grid-row: 3; } .hero-bottomline { grid-row: 4; } }
@media(max-width:767px) {  .hero-fields { width: 100%; max-width: 320px; } .hero-fields li button { min-height: 44px; } }
@media(prefers-reduced-motion:reduce) { .hero-stage-pause, .hero-stage-loader { display: none; } }

@media (min-width: 1400px) {
  body:has(.case-hero) .contact>.shell { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body:has(.case-hero) .contact>.shell>.eyebrow,
  body:has(.case-hero) .contact-main,
  body:has(.case-hero) .contact-links,
  body:has(.case-hero) .footer-bottom { grid-column: 1 / -1; }
}
@media(min-width: 1024px) {
  .hero-fields { padding: 18px 22px; }
  .hero-fields-kicker { margin-bottom: 8px; }
  .hero-fields ul { gap: 0; }
  .hero-stage-description { margin-top: 12px; }
  .hero-stage-footer { margin-top: 8px; }
}
@media(max-width: 1023px) { .hero { grid-template-rows: auto auto auto auto; } }

/* The gallery ends before the next case; its text keeps an inner end margin. */
.case-layout { margin-bottom: 48px; }
.next-case { margin-top: 0; padding-block: 32px 40px; min-height: 0; }
.next-case>a { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 24px; align-items: stretch; }
.next-case>a>div:first-child { min-width: 0; grid-column: 1; grid-row: 1; align-self: start; }
.next-case h2 { font-size: clamp(28px, 2.2vw, 40px); line-height: 1.2; margin-top: 24px; }
.next-case-cover { position: relative; grid-column: 1 / -1; grid-row: 2; width: calc(120px * 16 / 9); height: 120px; max-width: 100%; min-height: 0; }
.next-case-cover .project-cover { position: absolute; inset: 0 auto 0 0; width: auto; height: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
.next-case-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.next-case .round-arrow { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
@media (min-width: 1400px) {
  .case-text { margin-bottom: 24px; }
  .next-case>a { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .next-case>a>div:first-child { grid-column: 1 / 3; }
  .next-case-cover { grid-column: 3 / 5; grid-row: 1; margin-right: 0; align-self: stretch; width: auto; height: auto; }
  .next-case .round-arrow { grid-column: 4; grid-row: 1; }
}
@media (max-width: 767px) { .case-layout { margin-bottom: 32px; } }

/* Contact action aligns to the right and its underline follows only the action. */
.contact-main>.contact-link { width: max-content; max-width: 100%; justify-self: end; align-self: end; justify-content: flex-end; flex: none; gap: 24px; }
@media (max-width: 767px) {
  .contact-main>.contact-link { gap: 16px; flex-wrap: nowrap; font-size: 16px; line-height: 24px; }
  .contact-main .contact-link .round-arrow { width: 56px; height: 56px; flex: none; }
}

/* Inline media remains compact; original images and the viewer retain full size. */
.case-cover .project-cover { width: 100%; height: min(360px, 42svh); aspect-ratio: auto; }
.case-cover .cover-concept img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.case-gallery .image-grid { justify-items: start; }
.case-gallery .image-figure { width: min(100%, var(--case-media-width)); }
.project-row-preview .project-cover { width: min(100%, 240px); }
@media (max-width: 1399px) { .case-cover .project-cover { height: 240px; } }
@media (max-width: 767px) { .case-cover .project-cover { height: 200px; } }

/* Route-specific selection and compact actions. */
@media (min-width: 1024px) {
  body:is([data-page="home"], [data-page="projects"]) .site-header .header-inner .site-nav>a[aria-current] { --folder-color: #164bff; color: #fff; }
  body:is([data-page="home"], [data-page="projects"]) .site-header .header-inner .site-nav>a:is(:hover, :focus-visible) { --folder-color: #161616; color: #fff; }
}
.about-secondary>.text-link { width: 100%; max-width: 100%; align-self: flex-end; justify-content: flex-end; gap: 24px; margin-top: auto; }
.work-all { margin-top: 32px; width: max-content; max-width: 100%; }
@media (max-width: 767px) { .about-secondary>.text-link { gap: 16px; } .work-all { margin-top: 24px; } }

.case-gallery .image-grid { justify-items: end; }
.case-gallery .image-figure { margin-inline-start: auto; }
@media (max-width: 1399px) {
  .case-gallery .image-figure { width: 100%; margin-inline-start: 0; }
  .case-gallery .image-grid { justify-items: stretch; }
}
.about-portrait { display: block; margin-top: 0; width: min(100%, 220px); aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center; }
@media (max-width: 767px) { .about-portrait { width: min(100%, 200px); } }

@media (min-width: 1400px) {
  .about-content>.about-portrait { grid-column: 1; grid-row: 1 / 3; }
  .about-secondary .expertise-row { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
  .about-secondary>.text-link { gap: 16px; }
}

/* Native transitions apply only when the folder script selects its main. */
@view-transition { navigation: auto; }
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.case-rail-back { gap: 12px; }
.case-rail-back .icon { flex: none; }

@media (min-width: 1400px) and (max-width: 1799px) {
  :root { --editorial-photo-width: 160px; --editorial-right-min: 320px; --editorial-gap: 24px; }
  .about-title { font-size: 36px; line-height: 44px; }
}

@media (min-width: 1400px) { .next-case-cover .project-cover { left: max(0px, calc(100% - var(--case-media-width))); } }

@media (hover: hover) and (pointer: fine) {
  .case-rail a:hover, .case-rail a:hover:not([aria-current]), .case-switcher nav a:hover { background: #161616; color: #fff; }
  .case-rail a:hover span, .case-rail a:hover span:first-child, .case-switcher nav a:hover span { color: #fff; }
}
.case-rail a:focus-visible, .case-switcher nav a:focus-visible { background: #161616; color: #fff; outline: 2px solid #164bff; outline-offset: -3px; }
.case-rail a:focus-visible span, .case-rail a:focus-visible span:first-child, .case-switcher nav a:focus-visible span { color: #fff; }

/* Each case fact keeps its label and value in a compact surface. */
:root { --case-metadata-surface: #52658a; }
.case-facts { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; align-items: stretch; }
.case-facts>div { display: block; min-width: 0; padding: 24px; min-height: 168px; background: var(--case-metadata-surface); color: #fff; border-radius: 0; box-shadow: none; }
.case-facts dt { margin: 0 0 8px; font-size: 12px; line-height: 16px; color: #fff; }
.case-facts dd { margin: 0; font-size: 16px; line-height: 24px; overflow-wrap: break-word; }
@media (max-width: 767px) { .case-facts { grid-template-columns: 1fr; } .case-facts>div { padding: 16px; min-height: 128px; } .case-facts>.case-fact-empty { display: none; } }

.image-static { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; cursor: default; }
.image-static img { display: block; width: 100%; height: 100%; object-fit: cover; }



/* Oswald Cyrillic accents/descenders need more leading than 1.04em. */
.hero-title { line-height: 1.2; font-variant: normal; font-feature-settings: normal; font-synthesis: none; }

@media (min-width: 1400px) {
  :root { --editorial-photo-width: 220px; --editorial-right-min: 360px; --editorial-gap: 32px; --editorial-bio-width: min(680px, calc(100% - var(--editorial-photo-width) - var(--editorial-gap) * 2 - var(--editorial-right-min))); --editorial-right-start: calc(var(--editorial-photo-width) + var(--editorial-bio-width) + var(--editorial-gap) * 2); }
  .about-secondary .expertise-row h3 { max-width: 328px; }
}
@media (min-width: 1400px) and (max-width: 1799px) { :root { --editorial-photo-width: 160px; --editorial-right-min: 320px; --editorial-gap: 24px; } }

.project-rows { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; width: 100%; }
.project-rows>.project-row { min-width: 0; }
.project-rows .project-row-link { height: 100%; }

/* Static About card shares the visual treatment, not the hero stage behaviour. */
.about-secondary { position: relative; width: 100%; padding: 28px; border: 0; background: #e9e9e9; box-shadow: none; }
.about-secondary::before, .about-secondary::after { content: none; }
.about-secondary .expertise { margin-top: 0; }
@media (max-width: 767px) { .about-secondary { padding: 16px; } }

/* Large decorative particle layer leaves every foreground control clickable. */
@font-face { font-family: 'Sofia Sans Extra Condensed'; src: url('./fonts/sofia-sans-extra-condensed-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
.hero { overflow: clip; grid-template-rows: auto 1fr; align-content: space-between; gap: 32px; }
.hero-title { position: relative; z-index: 1; font-family: 'Sofia Sans Extra Condensed', 'Golos Text', sans-serif; font-weight: 800; font-size: min(10vw, 15svh, 256px); line-height: 1.05; letter-spacing: -1px; font-language-override: 'RUS'; }
.hero-title>span { display: block; white-space: nowrap; }
.hero-bottomline { z-index: 1; }
.hero-bottomline { position: relative; align-self: end; grid-row: 2; }
.hero-stage { position: absolute; inset: 10% 0 10% 15%; min-height: 0; pointer-events: none; z-index: 0; }
.hero-stage .hero-sphere { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; transform: none; }
.hero-particles { pointer-events: none; }
@media (max-width: 1399px) and (min-width: 1024px) { .hero-title { font-size: min(9.2vw, 14svh); } }
@media (max-width: 1023px) { .hero { grid-template-rows: auto auto 1fr; gap: 24px; }  .hero-bottomline { grid-row: 3; } .hero-title { width: 100%; font-size: clamp(40px, 9.4vw, 80px); } .hero-stage { inset: 12% -15% 12% 0; opacity: .7; } }
@media (max-width: 767px) { .hero-title { font-size: clamp(40px, 12.4vw, 64px); letter-spacing: 0; } .hero-stage { inset: 14% -20% 14% -20%; opacity: .55; } }

/* Three directions use space, with the card border as their only separator. */
.about-secondary { min-height: 0; }
.about-secondary .expertise { display: grid; gap: 24px; border: 0; }
.about-secondary .expertise-row { padding: 0; min-height: 0; border: 0; }
.about-secondary .expertise-row h3 { font-size: 24px; line-height: 32px; font-weight: 500; }
.about-secondary .expertise-row>span { font-size: 14px; line-height: 20px; }
@media (max-width: 1399px) { .about-secondary .expertise-row h3 { font-size: 20px; line-height: 28px; } }

.hero { container-type: inline-size; grid-template-columns: minmax(0, 1fr); --hero-display-size: min(10vw, 15svh, 13cqw, 256px); }
.hero-title { width: 100%; min-width: 0; font-size: var(--hero-display-size); }
@media (min-width: 1024px) {  }
@media (max-width: 1023px) { .hero-title { font-size: clamp(36px, 13cqw, 80px); letter-spacing: -.5px; } }
@media (max-width: 767px) { .hero-title { font-size: clamp(36px, 13cqw, 64px); } }
/* Compact neutral facts: two upper tiles and a year below. */
:root { --case-metadata-surface: #f3f3f3; }
.case-facts { max-width: 640px; gap: 16px; }
.case-facts>div { min-height: 112px; padding: 20px 24px; color: #161616; }
.case-facts dt { color: #636363; }
.case-facts dd { color: #161616; }
@media (max-width: 767px) { .case-facts { grid-template-columns: 1fr; } .case-facts>div { min-height: 104px; padding: 16px; } }

:root { --case-metadata-surface: #edf1ff; }
.case-facts { max-width: none; }
.case-facts>div { padding: 20px; }
.case-disclosure { font-size: 14px; line-height: 20px; color: #636363; margin-top: -12px; }
.case-rail a, .case-switcher nav a { border-bottom: 0; }
.case-rail-list>a, .case-switcher nav a:not(.case-rail-back) { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 16px 20px; background: #f3f3f3; box-shadow: 0 -3px 8px rgba(0,0,0,.07); }
.case-rail-list>a[aria-current], .case-switcher nav a[aria-current] { background: #164bff; color: #fff; }
.case-rail-list>a span:first-child, .case-switcher nav a:not(.case-rail-back) span:first-child { font-size: 13px; line-height: 20px; }
@media (hover: hover) and (pointer: fine) { .case-rail-list>a:hover, .case-switcher nav a:not(.case-rail-back):hover { background: #161616; color: #fff; } }
.case-rail-list>a:focus-visible, .case-switcher nav a:not(.case-rail-back):focus-visible { background: #161616; color: #fff; }

/* Smaller display type restores the upper-right approach block. */
@media (min-width: 1024px) { .hero { --hero-display-size: min(8vw, 12svh, 10cqw, 224px); } .hero-title { width: 100%; }  }

.case-project-link { justify-content: flex-end; text-align: right; }
.next-case { padding-block: 48px 56px; }
@media (max-width: 767px) { .next-case { padding-block: 40px 48px; } }

.project-rows>.project-row:first-child { border-top: 1px solid transparent; }
.contact { padding-bottom: 24px; background: var(--ink); }
@media (max-width: 767px) { .contact { padding-bottom: 16px; } }

@media (min-width: 1024px) { .hero-stage { inset: 10% 0; } }

@media (max-width: 767px) { .case-facts>div { min-height: 112px; } }

/* Every main folder now opens its own native document. */
@media (min-width: 1024px) { body:is([data-page="home"], [data-page="projects"], [data-page="process"], [data-page="about"], [data-page="contacts"]) .site-header .header-inner .site-nav>a[aria-current] { --folder-color: #164bff; color: #fff; } body:is([data-page="home"], [data-page="projects"], [data-page="process"], [data-page="about"], [data-page="contacts"]) .site-header .header-inner .site-nav>a:is(:hover,:focus-visible) { --folder-color: #161616; color: #fff; } }
.page-credit { padding-block: 16px 24px; color: #636363; font-size: 12px; line-height: 20px; }
.folder-page .process-aside h1 { font-size: clamp(36px, 3vw, 64px); line-height: 1.05; letter-spacing: -1px; font-weight: 500; }
.contacts-page .contact { min-height: 100svh; }
@media (max-width: 1023px) { .contacts-page .contact { min-height: calc(100svh - 81px); } }
@media (max-width: 767px) { .case-facts>div { padding: 16px; } .folder-page .process-aside h1 { font-size: 36px; line-height: 44px; } }

::view-transition-group(folder-content) { animation-duration: 260ms; }
::view-transition-old(folder-content) { animation: folder-out 160ms ease both; }
::view-transition-new(folder-content) { animation: folder-in 260ms ease both; }
@keyframes folder-out { to { opacity: 0; } }
@keyframes folder-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(folder-content), ::view-transition-old(folder-content), ::view-transition-new(folder-content) { animation: none !important; } }

@media (min-width: 1400px) { .case-rail-list>a { justify-content: space-between; padding: 24px; gap: 12px; flex: 1 0 128px; min-height: 128px; } .case-rail-list>a>span { width: 100%; } }
.case-switcher nav a:not(.case-rail-back) { justify-content: space-between; padding: 16px; gap: 12px; min-height: 112px; }
.case-switcher nav a:not(.case-rail-back)>span { width: 100%; }

/* Standalone folders centre the content ensemble, rather than adding blank rows. */
.folder-page { --folder-stage-height: 100svh; }
@media (max-width: 1023px) { .folder-page { --folder-stage-height: calc(100svh - 81px); } }
.about-page .about { min-height: var(--folder-stage-height); display: grid; align-content: center; padding-block: clamp(32px, 6svh, 96px); }
.about-page .section-number { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; align-self: start; font-size: 28px; line-height: 36px; }
.about-page .about-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.about-page .about-title { grid-column: 1; grid-row: 1; font-size: 56px; line-height: 64px; max-width: 640px; }
.about-page .about-prose { grid-column: 1; grid-row: 2; max-width: 640px; font-size: 18px; line-height: 28px; }
.about-page .about-secondary { grid-column: 2; grid-row: 1 / 3; align-self: start; }
.about-page .expertise-row h3 { max-width: none; }
.process-page .process-stage, .process-page .process-enhanced .process-stage { min-height: var(--folder-stage-height); align-content: center; align-items: start; padding-block: clamp(32px, 6svh, 96px); }
.process-page .process-aside h1 { font-size: 28px; line-height: 36px; letter-spacing: 0; }
@media (min-width: 1400px) { .process-page .process-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.contacts-page .contact { min-height: var(--folder-stage-height); display: grid; align-content: center; padding-block: clamp(32px, 6svh, 96px); }
.contacts-page .contact>.shell>.eyebrow { font-size: 28px; line-height: 36px; }
.contacts-page .contact-title { font-size: 56px; line-height: 64px; }
@media (min-width: 768px) and (max-width: 1399px) { .about-page .about-title { font-size: 48px; line-height: 56px; } }
@media (max-width: 1399px) { .about-page .about-content { display: grid; } }
@media (max-width: 767px) { .about-page .about-content { grid-template-columns: minmax(0,1fr); gap: 24px; } .about-page .about-title { font-size: 36px; line-height: 44px; } .about-page .about-secondary { grid-column: 1; grid-row: 3; } .about-page .about-prose { font-size: 16px; line-height: 24px; } .about-page .about-prose p { font-size: inherit; line-height: inherit; } .contacts-page .contact-title { font-size: 40px; line-height: 48px; } }

.case-switcher nav { min-width: 0; }
.case-switcher nav a { min-width: 0; border-top: 0; overflow-wrap: break-word; }
.case-switcher .case-rail-back { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }

.projects-index { padding-bottom: 48px; }
@media (max-width: 767px) { .projects-index { padding-bottom: 32px; } }

.process-steps { position: relative; }
.process-chooser { display: flex; gap: 8px; }
.process-chooser button { min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #b5b5b5; background: transparent; color: #636363; font: inherit; font-size: 14px; cursor: pointer; }
.process-chooser button[aria-pressed="true"] { background: #164bff; border-color: #164bff; color: #fff; }
.process-chooser button:focus-visible { outline: 2px solid #164bff; outline-offset: 3px; }
@media (max-width: 1023px), (max-height: 899px) { .process-chooser { display: none; } }
@media (prefers-reduced-motion: reduce) { .process-enhanced .is-active .process-diagram>* { animation: none; } }

/* The standalone Contacts folder uses the same light paper as other pages. */
.contacts-page .contact { background: #fff; color: #000; }
.contacts-page .contact::before, .contacts-page .contact::after { display: none; animation: none; }
.contacts-page .contact .eyebrow, .contacts-page .contact-title, .contacts-page .contact-title span, .contacts-page .contact-link, .contacts-page .contact-links a { color: #000; }
.contacts-page .contact-link, .contacts-page .contact-links { border-color: #d9d9d9; }
.contacts-page .contact-link .round-arrow { background: #161616; color: #fff; }
.contacts-page .contact-link:hover .round-arrow { background: #164bff; color: #fff; }
.contacts-page .contact-links a:hover { color: #164bff; }
.contacts-page a:focus-visible { outline: 2px solid #164bff; outline-offset: 4px; }

.process-chooser { flex-wrap: wrap; max-width: 100%; }
@media (min-width: 1024px) and (min-height: 900px) { .process-page .process-aside { align-self: center; } }

.hero-current-stage { display: none; }
@media (max-width: 1100px) {
  .hero { grid-template-rows: auto auto auto; gap: 24px; align-content: start; }
  .hero-title { width: 100%; font-size: clamp(36px, 13cqw, 96px); letter-spacing: -.5px; }
  
  .hero-stage { position: relative; inset: auto; grid-row: 2; width: min(100%, 420px); aspect-ratio: 1; height: auto; min-height: 0; justify-self: center; opacity: 1; }
  .hero-stage .hero-sphere { inset: 0; width: 100%; height: 100%; }
  .hero-bottomline { grid-row: 3; display: grid; grid-template-columns: minmax(0,1fr); align-self: start; gap: 16px; }
  .hero-intro { grid-row: 2; }
  .hero-description { font-size: 18px; line-height: 26px; max-width: 560px; }
  .hero-fields { grid-row: 1; justify-self: center; display: flex; flex-direction: row; align-items: center; gap: 16px; width: auto; max-width: 100%; min-height: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .hero-fields::before, .hero-fields-kicker, .hero-fields ul, .hero-stage-description, .hero-stage-loader, .hero-fields-index { display: none; }
  .hero-current-stage { display: block; font-size: 16px; line-height: 24px; color: #164bff; }
  .hero-stage-footer { display: contents; }
  .hero-stage-pause { min-height: 44px; padding: 8px; font-size: 14px; }
}
@media (max-width: 767px) { .hero-description { font-size: 16px; line-height: 24px; } }
@media (min-width: 1024px) { .projects-index .section-label { position: sticky; top: 80px; align-self: start; } }
@media (min-width: 1101px) {
  .process-page .process-stage { grid-template-columns: 320px minmax(0,1fr); column-gap: 32px; --process-diagram-width: 360px; }
  .process-page .process-aside, .process-page .process-intro, .process-page .process-position { width: 100%; max-width: none; min-width: 0; }
  .process-page .process-aside h1 { white-space: nowrap; }
  .process-page .process-chooser { flex-wrap: nowrap; }
  .process-page .process-detail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,var(--process-diagram-width)); column-gap: 24px; }
  .process-page .process-detail[hidden] { display: none; }
  .process-page .process-detail>p { grid-column: 1; min-width: 0; }
  .process-page .process-diagram { grid-column: 2; width: 100%; max-width: var(--process-diagram-width); margin-top: 0; }
}
@media (min-width: 1101px) and (max-width: 1399px) { .process-page .process-stage { --process-diagram-width: 280px; } }
@media (min-width: 1400px) and (max-width: 1799px) { .process-page .process-stage { --process-diagram-width: 320px; } }
.process-enhanced .process-detail { min-height: var(--process-detail-height,0px); }
@media (min-width: 1024px) and (max-width: 1440px) {
  :root { --sidebar-width: 220px; --nav-inset: 16px; }
  .brand { font-size: 16px; line-height: 24px; padding-inline: 16px; }
  .brand small { font-size: 12px; line-height: 20px; }
  .site-nav>a, .site-nav .contact-nav { font-size: 20px; line-height: 28px; padding-inline: 16px; }
}

@media (min-width: 1101px) { .hero { --hero-display-size: min(8vw, 12svh, calc(100cqw / 7.6), 224px); } }

/* Responsive process: introduction above a normal-flow accordion, without list translation. */
@media (max-width: 1399px), (max-height: 899px) {
  .process-page .process-stage,
  .process-page .process-enhanced .process-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    min-height: 0;
    align-content: start;
    align-items: start;
    padding-block: 32px;
  }
  .process-page .process-aside,
  .process-page .process-steps { grid-column: 1 / -1; min-width: 0; }
  .process-page .process-aside { align-self: start; gap: 16px; width: 100%; }
  .process-page .process-intro { max-width: 640px; }
  .process-page .process-position { width: min(100%, 320px); }
  .process-page .process-chooser { display: flex; flex-wrap: wrap; }
  .process-page .process-steps { top: 0; transform: none; }
  .process-page .process-step { scroll-margin-top: 24px; }
  .process-page .process-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-height: 0; padding-block: 16px 24px; }
  .process-page .process-detail[hidden] { display: none; }
  .process-page .process-diagram { width: min(100%, 360px); margin-top: 0; }
}

/* Keep the project heading in flow when the rail stacks above the list. */
@media (max-width: 1399px) {
  body[data-page="projects"] .work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body[data-page="projects"] .work .section-label { position: static; top: auto; grid-column: 1 / -1; align-self: start; }
  body[data-page="projects"] .work-list { grid-column: 1 / -1; }
}

.hero-stage-arrows { display: flex; align-items: center; gap: 4px; }
.hero-stage-chevron { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; background: transparent; color: #636363; cursor: pointer; }
.hero-stage-chevron svg { width: 24px; height: 24px; }
.hero-stage-chevron:hover { color: #164bff; border-color: #164bff; }
.hero-stage-chevron:focus-visible { outline: 2px solid #164bff; outline-offset: 2px; }
@media (max-width: 1100px) {
  .hero { grid-template-rows: auto auto minmax(0,1fr); }
  .hero-bottomline { align-self: stretch; grid-template-rows: auto minmax(0,1fr); }
  .hero-intro { align-self: end; }
  .hero-fields { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; row-gap: 4px; }
  .hero-current-stage { grid-column: 1; grid-row: 1; }
  .hero-stage-arrows { grid-column: 2; grid-row: 1; }
  .hero-fields .hero-stage-loader { display: block; grid-column: 1/-1; width: 100%; margin: 0; }
}
@media (min-width: 1440px) {
  body[data-page="projects"] .work { min-height: 100svh; align-content: center; }
  body[data-page="projects"] .work .section-label { position: static; top: auto; align-self: center; }
}

.about-page .about-content { grid-template-columns: minmax(0,1fr); }
.about-page .about-secondary { grid-column: 1; grid-row: 3; width: 100%; }
.about-page .section-number { align-self: center; }
@media (min-width: 1400px) {
  .about-page .editorial-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--grid-gap); align-items: center; }
  .about-page .section-number { grid-column: 1; grid-row: 1; }
  .about-page .editorial-grid>.about-portrait { grid-column: 2; grid-row: 1; width: 100%; max-width: 320px; }
  .about-page .about-content { grid-column: 3/-1; grid-row: 1; }
  .process-page .process-stage { grid-template-columns: repeat(5,minmax(0,1fr)); column-gap: var(--grid-gap); }
  .process-page .process-aside { grid-column: 1/3; grid-row: 1; max-width: 320px; }
  .process-page .process-steps { grid-column: 3/-1; grid-row: 1; }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .about-page .editorial-grid { grid-template-columns: minmax(0,1fr) minmax(0,3fr); gap: 32px; }
  .about-page .section-number { grid-column: 1; grid-row: 1; align-self: start; }
  .about-page .editorial-grid>.about-portrait { grid-column: 1; grid-row: 2; align-self: start; }
  .about-page .about-content { grid-column: 2; grid-row: 1/3; }
}
@media (max-width: 767px) {
  .about-page .editorial-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .about-page .section-number, .about-page .editorial-grid>.about-portrait, .about-page .about-content { grid-column: 1; grid-row: auto; }
}
@media (max-width: 1100px) {
  .hero-fields { width: 100%; justify-self: stretch; grid-template-columns: 44px minmax(0,1fr) 44px; column-gap: 8px; }
  .hero-current-stage { grid-column: 2; text-align: center; }
  .hero-stage-arrows { display: contents; }
  .hero-stage-chevron[data-stage-prev] { grid-column: 1; grid-row: 1; }
  .hero-stage-chevron[data-stage-next] { grid-column: 3; grid-row: 1; }
  .hero-fields .hero-stage-loader { grid-row: 2; }
  .hero-action { display: flex; width: 100%; justify-content: space-between; }
}

.about-page .about-content { width: 100%; max-width: 640px; }
.about-profile { min-width: 0; }
.about-domains { margin-top: 24px; font-size: 14px; line-height: 22px; }
.about-domains p { margin: 0 0 12px; color: #636363; }
.about-domains ul { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.about-domains li { padding-left: 12px; border-left: 2px solid #164bff; }
@media (min-width: 1400px) {
  .about-page .about-profile { grid-column: 2; grid-row: 1; align-self: start; }
  .about-page .about-profile .about-portrait { width: 100%; max-width: 320px; }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .about-page .about-profile { grid-column: 1; grid-row: 2; align-self: start; }
}
@media (max-width: 767px) { .about-page .about-profile { grid-column: 1; grid-row: auto; } }
@media (min-width: 1400px) and (max-height: 899px) {
  .process-page .process-stage { grid-template-columns: minmax(0,1fr); }
  .process-page .process-aside, .process-page .process-steps { grid-column: 1; grid-row: auto; }
  .process-page .process-aside { max-width: none; }
}
@media (min-width: 1921px) and (min-height: 900px) {
  .process-page .process-steps { width: 100%; }
  .process-page .process-detail { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: var(--grid-gap); }
  .process-page .process-detail>p { grid-column: 1; max-width: none; }
  .process-page .process-diagram { grid-column: 2/-1; width: 100%; max-width: 640px; justify-self: start; }
}
@media (max-width: 1023px) {
  .site-header { height: var(--concept-header-height); padding-block: 0; }
  .site-header .header-inner { height: 100%; padding-block: 12px; }
  .site-header .brand { padding-block: 0; }
  .site-header .header-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
  .site-header .menu-toggle { align-self: center; margin-block: 0; }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .about-page .about-profile { grid-row: 1/3; margin-top: 60px; }
}
@media (max-width: 1100px) {
  .hero-fields .hero-fields-index { display: block; grid-column: 2; grid-row: 1; margin: 0; text-align: center; color: #767676; font-size: 12px; line-height: 18px; letter-spacing: .06em; }
  .hero-current-stage, .hero-stage-chevron[data-stage-prev], .hero-stage-chevron[data-stage-next] { grid-row: 2; }
  .hero-fields .hero-stage-loader { grid-row: 3; }
}
@media (min-width: 1440px) {
  body[data-page="projects"] .work .section-label { position: sticky; top: calc(50svh - 18px); align-self: start; }
}

/* v74: light directions card and an underline limited to its project link. */
.about-page .about-secondary { gap: 0; min-height: 0; height: auto; align-self: start; }
.about-page .about-secondary>.text-link { width: fit-content; max-width: 100%; min-height: 44px; align-self: flex-end; justify-content: flex-end; gap: 16px; margin-top: 28px; padding-bottom: 10px; border-bottom: 1px solid currentColor; }
.about-page .about-secondary>.text-link:is(:hover,:focus-visible) { color: #164bff; }
@media (min-width: 768px) and (max-width: 1399px) { .about-page .about-secondary { padding: 20px; } }
@media (max-width: 767px) { .about-page .about-secondary { padding: 16px; } .about-page .about-secondary>.text-link { margin-top: 24px; } }

/* v75: the active stage shares the introduction heading's text baseline. */
.process-baseline { display: inline-block; width: 0; height: 0; padding: 0; margin: 0; vertical-align: baseline; }
@media (min-width: 1101px) and (min-height: 900px) {
  .process-page .process-stage, .process-page .process-enhanced .process-stage { grid-template-columns: 320px minmax(0,1fr); grid-template-rows: 1fr; column-gap: 32px; align-items: start; align-content: start; padding-block: 80px; min-height: 100svh; }
  .process-page .process-aside { grid-column: 1; grid-row: 1; align-self: center; }
  .process-page .process-steps { grid-column: 2; grid-row: 1; top: auto; }
}

@font-face { font-family: 'Stadium'; src: url('./fonts/stadium.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
.hero-title { font-family: 'Stadium', 'Sofia Sans Extra Condensed', sans-serif; font-weight: 400; font-size: min(30cqw, 20svh, 300px); line-height: .8; letter-spacing: 2px; color: var(--ink); }

/* Fit the complete first screen; the sphere uses the remaining height. */
@media (max-width: 1100px) {
  body[data-page="home"] .hero { height: 100svh; min-height: 0; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; padding-block: 16px max(16px,env(safe-area-inset-bottom)); overflow: visible; }
  body[data-page="home"] .hero-title { font-size: min(40cqw, 17.5svh, 220px); }
  body[data-page="home"] .hero-stage { width: 100%; height: 100%; min-height: 0; max-height: 440px; aspect-ratio: auto; align-self: center; }
  body[data-page="home"] .hero-bottomline { grid-template-rows: auto auto; align-self: end; gap: 12px; }
  body[data-page="home"] .hero-intro { gap: 12px; }
  body[data-page="home"] .hero-description { font-size: 16px; line-height: 24px; max-width: 680px; }
  body[data-page="home"] .hero-action { min-height: 48px; padding-block: 10px; font-size: 16px; line-height: 24px; }
  body[data-page="home"] .hero-fields { max-width: none; }
}
@media (max-width: 1023px) {
  body[data-page="home"] .site-header { height: var(--concept-header-height); }
  body[data-page="home"] .header-inner { height: 100%; padding-block: 12px; }
  body[data-page="home"] .hero { height: calc(100svh - 80px); }
}
@media (max-width: 767px) {
  body[data-page="home"] .hero-title { font-size: min(calc((100cqw - 34px) / 3.35), 12.5svh, 140px); }
}
@media (max-width: 1100px) and (max-height: 700px) {
  body[data-page="home"] .hero { gap: 8px; padding-block: 12px; }
  body[data-page="home"] .hero-title { font-size: min(calc((100cqw - 34px) / 3.35), 12.5svh, 100px); }
  body[data-page="home"] .hero-bottomline, body[data-page="home"] .hero-intro { gap: 8px; }
  body[data-page="home"] .hero-description { font-size: 14px; line-height: 20px; }
}

@media (min-width: 1101px) and (max-width: 1399px) and (min-height: 900px) {
  .process-page .process-detail { grid-template-columns: minmax(0,1fr); }
  .process-page .process-diagram { grid-column: 1; margin-top: 24px; }
}

/* v76: the active separator shows elapsed time independently of the stage count. */
.process-step { position: relative; }
.process-step.is-active::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: #164bff; transform: scaleX(var(--process-elapsed,0)); transform-origin: left; pointer-events: none; }
.process-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; }
@media (max-width: 1399px), (max-height: 899px) { .process-page .process-controls .process-chooser { display: flex; } }

.process-page .process-position { display: flex; }

/* v77: open directions with visible descriptions and no card surface. */
.about-page .about-secondary { container-name: about-directions; container-type: inline-size; padding: 0; border: 0; background: transparent; box-shadow: none; }
.about-page .about-secondary::before, .about-page .about-secondary::after { content: none; }
.about-directions-title { font-size: 16px; line-height: 24px; font-weight: 500; margin-bottom: 16px; }
.about-page .about-secondary .expertise { gap: 0; }
.about-page .about-secondary .expertise-row { display: grid; grid-template-columns: 24px minmax(0,1fr) minmax(0,1fr); gap: 12px 20px; padding-block: 22px; border-top: 1px solid #e2e2e2; align-items: start; }
.about-page .about-secondary .expertise-row:last-child { border-bottom: 1px solid #e2e2e2; }
.about-page .about-secondary .expertise-row h3 { min-width: 0; font-size: 20px; line-height: 28px; font-weight: 500; }
.about-page .about-secondary .expertise-row>span { padding-top: 4px; color: #636363; }
.about-page .about-secondary .expertise-row p { min-width: 0; margin: 0; font-size: 16px; line-height: 24px; color: #636363; }
.about-page .about-secondary>.text-link { margin-top: 24px; }
@container about-directions (max-width: 559px) {
  .about-page .about-secondary .expertise-row { grid-template-columns: 24px minmax(0,1fr); gap: 8px 12px; }
  .about-page .about-secondary .expertise-row p { grid-column: 2; }
}
@media (max-width: 767px) { .about-page .about-secondary .expertise-row h3 { font-size: 18px; line-height: 26px; } }

/* v79: one blue active heading; playback controls are intentionally absent. */
.process-page .process-step.is-active h3 a, .process-page .process-step.is-active h3 button { color: #164bff; }
.process-page .process-step.is-active h3 :is(a,button)>span { color: inherit; }

/* v80: a single page scrollbar moves the text while the desktop columns stay put. */
@media (min-width: 1400px) {
  .about-page .about { align-content: start; padding-block: 32px 48px; }
  .about-page .editorial-grid { align-items: start; min-height: calc(100svh - 80px); }
  .about-page .section-number { position: sticky; top: calc(50svh - 18px); align-self: start; }
  .about-page .about-profile { align-self: start; margin-top: 0; }
  .about-page .about-profile[data-sticky-fits="true"] { position: sticky; top: 32px; }
  .about-page .about-content { align-self: start; }
}

/* Centred introduction with a portrait and a compact text column. */
.author-about { display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,4fr); gap:32px; min-height:100svh; padding-block:64px; align-items:start; }
.author-about>.dossier-title { position:sticky; top:calc(50svh - 18px); margin:0; font-size:28px; line-height:36px; font-weight:500; letter-spacing:0; }
.author-content { display:grid; grid-template-columns:minmax(220px,360px) minmax(0,560px); grid-template-rows:auto auto auto; align-content:center; justify-content:center; gap:32px clamp(40px,4vw,96px); width:100%; min-width:0; min-height:calc(100svh - 128px); }
.author-introduction { grid-column:2; grid-row:1; }
.author-heading { margin:0 0 24px; font-size:clamp(26px,1.9vw,34px); line-height:1.2; letter-spacing:-.025em; font-weight:500; text-wrap:balance; }
.author-statement { margin:0; font-size:20px; line-height:1.5; text-wrap:pretty; }
.author-portrait { grid-column:1; grid-row:1 / 4; align-self:start; justify-self:center; margin:0; width:320px; max-width:100%; }
.author-portrait img { display:block; width:100%; height:auto; }
.particle-portrait { position:relative; width:100%; }
.author-about { overflow-x:clip; }
.particle-portrait canvas { display:none; position:absolute; left:-30%; top:-40%; width:160%; height:180%; pointer-events:none; }
.particle-portrait.is-particle-ready img { visibility:hidden; }
.particle-portrait.is-particle-ready canvas { display:block; }
.author-role { margin:16px 0 0; color:#636363; font-size:14px; line-height:22px; }
.author-competencies { grid-column:2; grid-row:2; }
.author-competencies h2 { margin:0 0 16px; color:#636363; font-size:14px; line-height:22px; font-weight:400; }
.author-competencies ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.author-competencies li { font-size:18px; line-height:28px; }
.author-contact { grid-column:2; grid-row:3; justify-self:start; display:inline-flex; align-items:center; gap:24px; min-height:44px; font-size:18px; line-height:26px; }
.author-contact .icon { width:20px; height:20px; }
.author-contact:hover { color:#164bff; }
.author-contact:focus-visible { outline:2px solid #164bff; outline-offset:4px; }
@media(min-width:1400px) { .author-content { justify-content:start; } .author-portrait { justify-self:start; } }
@media(min-width:1920px) { .author-about { padding-block:88px; } .author-content { min-height:calc(100svh - 176px); } .author-portrait { width:360px; } }
@media(max-width:1399px) {
  .author-about { grid-template-columns:minmax(0,1fr); padding-block:40px; gap:48px; }
  .author-about>.dossier-title { position:static; }
  .author-content { min-height:calc(100svh - 220px); column-gap:40px; }
}
@media(max-width:767px) {
  .author-about { padding-block:24px 40px; min-height:calc(100svh - 81px); gap:40px; }
  .author-about>.dossier-title { font-size:24px; line-height:32px; }
  .author-content { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; min-height:0; gap:32px; }
  .author-introduction,.author-portrait,.author-competencies,.author-contact { grid-column:1; grid-row:auto; }
  .author-portrait { width:280px; margin-bottom:8px; }
  .author-role { font-size:12px; line-height:20px; }
  .author-heading { font-size:28px; margin-bottom:20px; }
  .author-statement { font-size:18px; line-height:28px; }
}

/* v83: the tab's top and left fields share the current navigation inset. */
:root { --folder-tab-height: calc(var(--nav-inset,16px) + 24px); }
.site-header .site-nav .folder-tab { position: absolute; z-index: 1; display: flex; align-items: flex-start; top: 0; left: 0; width: 184px; height: var(--folder-tab-height); padding: var(--nav-inset,16px) 0 8px var(--nav-inset,16px); font-size: 12px; line-height: 16px; background: transparent; clip-path: none; }
@media (min-width: 1024px) {
  .site-header .site-nav { grid-template-rows: repeat(5,minmax(calc(var(--folder-tab-height) + 80px),1fr)); }
  .site-header .site-nav>a { margin-top: calc(-1 * var(--folder-tab-height)); padding-top: calc(var(--folder-tab-height) + 16px); }
  .site-header .site-nav>a:first-child { margin-top: 0; }
  .site-header .folder-silhouette>span { clip-path: polygon(0 0,160px 0,184px var(--folder-tab-height),100% var(--folder-tab-height),100% 100%,0 100%); }
}
@media (max-width: 1023px) {
  :root { --nav-inset: 16px; }
  .site-header .site-nav.is-open { max-height: calc(100svh - 81px); overflow-y: auto; }
  .site-header .site-nav>a { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: calc(var(--folder-tab-height) + 56px); padding: calc(var(--folder-tab-height) + 8px) var(--nav-inset) 16px; border: 0; background: transparent; --folder-color: #eee; }
  .site-header .site-nav>a:nth-child(even) { --folder-color: #d9d9d9; }
  .site-header .site-nav>a[aria-current] { color: #164bff; }
  .site-header .site-nav>a:is(:hover,:focus-visible) { --folder-color: #161616; color: #fff; text-decoration: none; }
  .site-header .site-nav .folder-silhouette { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .site-header .site-nav .folder-silhouette>span { display: block; width: 100%; height: 100%; background: var(--folder-color); clip-path: polygon(0 0,160px 0,184px var(--folder-tab-height),100% var(--folder-tab-height),100% 100%,0 100%); }
}

/* Resume experience sits with the portrait, leaving the introduction concise. */
.author-profile { grid-column:1; grid-row:1 / 4; align-self:start; justify-self:center; width:320px; max-width:100%; }
.author-profile .author-portrait { width:100%; margin:0; }
.author-experience { margin-top:24px; }
.author-experience h2 { margin:0 0 12px; color:#636363; font-size:14px; line-height:22px; font-weight:400; }
.author-experience ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.author-experience h3 { margin:0 0 2px; font-size:16px; line-height:24px; font-weight:500; }
.author-experience p { margin:0; font-size:14px; line-height:22px; }
.author-experience a { text-decoration:underline; text-decoration-color:#bbb; text-underline-offset:4px; }
.author-experience a:hover { color:#164bff; text-decoration-color:currentColor; }
.author-experience a:focus-visible { outline:2px solid #164bff; outline-offset:4px; }
@media(min-width:1400px) { .author-profile { justify-self:start; } }
@media(min-width:1920px) { .author-profile { width:360px; } }
@media(max-width:767px) { .author-profile { grid-column:1; grid-row:auto; width:280px; } }

/* v84: centre the heading itself, without inherited label padding. */
@media (min-width: 1440px) { body[data-page="projects"] .work .section-label { padding-block: 0; top: calc(50svh - 18px); } body[data-page="projects"] .work .section-label h1 { margin-block: 0; line-height: 36px; } }

@media (max-width: 1023px) { .site-header .site-nav>a { isolation: isolate; } }

@media (max-width: 1023px) { .site-header .header-inner .site-nav>a { padding: calc(var(--folder-tab-height) + 8px) var(--nav-inset) 16px; } .site-header .header-inner .site-nav.is-open { max-height: calc(100svh - 81px); overflow-y: auto; } }
@media (max-width: 1023px) { .site-header .header-inner .site-nav.is-open { flex-wrap: nowrap; } .site-header .header-inner .site-nav>a { flex-shrink: 0; } }

/* v85: equal link sections; only the decorative fill overlaps the next shoulder. */
.site-header .header-inner .site-nav>a { margin-top: 0; }
.site-header .site-nav>a:not(:last-child) .folder-silhouette { bottom: calc(-1 * var(--folder-tab-height)); }
@media (max-width: 1023px) {
  .site-header .header-inner .site-nav.is-open { gap: 0; padding-block: 0; }
  .site-header .header-inner .site-nav>a { height: calc(var(--folder-tab-height) + 56px); min-height: calc(var(--folder-tab-height) + 56px); }
}

/* Match the bottom line of the experience and contact columns. */
@media(min-width:768px) {
  .author-profile { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
  .author-contact { align-self:end; align-items:flex-end; line-height:22px; }
  .author-contact .icon { margin-bottom:1px; }
}

/* Show every case in the rail without a separately scrolling list. */
.case-rail-list>a .case-project-name,.case-switcher nav a .case-project-name { font-size:15px; line-height:22px; color:inherit; }
.case-switcher nav a:not(.case-rail-back) { min-height:56px; justify-content:center; gap:0; }
@media(min-width:1400px) {
  .case-rail { overflow:hidden; }
  .case-rail-list { display:grid; grid-template-rows:repeat(var(--case-count),minmax(0,1fr)); flex:1; min-height:0; overflow:visible; }
  .case-rail-list>a { min-height:0; padding:8px 24px; gap:0; justify-content:center; overflow-wrap:anywhere; }
}
@media(min-width:1400px) and (max-height:600px) {
  .case-rail .case-rail-back { height:64px; min-height:64px; padding:12px 16px; }
  .case-rail-list>a { padding:4px 16px; }
  .case-rail-list>a .case-project-name { font-size:13px; line-height:18px; }
}

/* v86: readable introduction and one dedicated, three-phase particle figure. */
body[data-page="home"] .hero { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows: auto; align-items: center; align-content: center; gap: 48px; min-height: 100svh; height: auto; max-height: none; padding-block: 48px; overflow: visible; }
.hero-copy, .hero-visual { min-width: 0; }
.hero-heading { max-width: 15ch; font-family: var(--font); font-weight: 600; font-size: clamp(44px,4vw,80px); line-height: 1.08; letter-spacing: -.025em; text-transform: none; }
.hero-heading>span { display: block; }
.hero-summary { margin-top: 28px; max-width: 480px; font-size: 18px; line-height: 28px; color: #636363; }
body[data-page="home"] .hero-copy .hero-action { display: inline-flex; width: fit-content; max-width: 100%; margin-top: 24px; gap: 24px; justify-content: space-between; }
.hero-visual { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero-figure { width: min(100%,70svh,640px); aspect-ratio: 1; height: auto; }
.hero-figure .hero-particles { display: block; width: 100%; height: 100%; position: static; opacity: 1; }
.hero-phase { width: min(100%,320px); color: #164bff; }
.hero-phase p { font-size: 18px; line-height: 24px; }
.hero-phase-progress { height: 2px; margin-top: 16px; background: #d9d9d9; }
.hero-phase-progress>span { display: block; width: 100%; height: 100%; background: #164bff; transform: scaleX(var(--stage-progress,0)); transform-origin: left; }
@media (max-width: 1100px) {
  body[data-page="home"] .hero { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; min-height: 0; gap: 32px; padding-block: 32px; }
  .hero-copy { width: 100%; max-width: 600px; justify-self: center; }
  .hero-heading { font-size: 44px; }
  .hero-visual { width: 100%; max-width: 480px; justify-self: center; gap: 20px; }
  .hero-figure { width: min(100%,380px); height: auto; }
}
@media (max-width: 767px) {
  body[data-page="home"] .hero { padding-block: 24px 32px; gap: 28px; }
  .hero-heading { font-size: clamp(32px,9.5vw,40px); }
  .hero-summary { font-size: 16px; line-height: 24px; margin-top: 24px; }
  .hero-figure { width: min(100%,clamp(220px,70vw,300px)); height: auto; }
  .hero-phase { width: min(100%,280px); }
}
@media (prefers-reduced-motion: reduce) { .hero-phase-progress>span { transform: scaleX(0); } }
/* Mobile navigation covers the viewport below the header. */
@media (max-width: 1023px) {
  .site-header { position: sticky; top: 0; background: var(--paper); }
  body.menu-open { overflow: hidden; }
  .has-menu .site-header .header-inner .site-nav.is-open {
    position: fixed; inset: 80px 0 0; width: 100%; height: calc(100dvh - 80px);
    max-height: none; padding: 0; gap: 0; background: #eee;
    overflow-y: auto; overscroll-behavior: contain; box-shadow: none;
  }
  .site-header .header-inner .site-nav.is-open>a { flex: 1 0 96px; }
}
/* A single centred process scene; inactive stages leave no layout footprint. */
.process-story { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 48px; text-align: center; }
.process-story-label { font: 400 14px/20px var(--font); color: #636363; margin: 0 0 28px; }
.process-story-copy { width: 100%; min-height: 152px; }
.process-story-copy article[hidden] { display: none; }
.process-story-copy h2 { font: 600 clamp(32px,3.5vw,56px)/1.12 var(--font); letter-spacing: -.035em; margin: 0 0 20px; }
.process-story-copy p { max-width: 60ch; margin: 0 auto; font-size: 18px; line-height: 28px; color: #636363; text-wrap: pretty; }
.process-art { display: block; width: min(680px,100%); height: auto; aspect-ratio: 1.7; margin: 12px 0 20px; }
.process-story-controls { width: min(320px,100%); }
.process-story-status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; line-height: 20px; color: #636363; }
.process-story-status button { min-height: 44px; padding: 8px 0 8px 20px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.process-story-loader { display: flex; gap: 8px; }
.process-story-loader button { position: relative; flex: 1; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.process-story-loader button::before, .process-story-loader button span { position: absolute; inset: 12px 0 auto; height: 3px; background: #d9d9d9; content: ''; }
.process-story-loader button span { background: #164bff; transform: scaleX(0); transform-origin: left; }
.process-story-loader button[data-state=complete] span { transform: scaleX(1); }
.process-story-loader button[data-state=active] span { transform: scaleX(var(--process-elapsed,0)); }
.process-story-loader button[aria-pressed=true]::before { background: #a5b9ff; }
.process-story-loader button:focus-visible, .process-story-status button:focus-visible { outline: 2px solid #164bff; outline-offset: 2px; }
@media (max-width: 1023px) { .process-story { min-height: calc(100svh - 80px); padding-block: 32px; } }
@media (max-width: 767px) {
  .process-story-label { margin-bottom: 24px; }
  .process-story-copy { min-height: 202px; }
  .process-story-copy h2 { font-size: 32px; max-width: 17ch; margin-inline: auto; }
  .process-story-copy p { font-size: 16px; line-height: 24px; }
  .process-art { margin-block: 12px 20px; aspect-ratio: 1.3; }
}
/* Case stories: an uninterrupted, full-width visual narrative. */
.case-story-shell { width: calc(100% - 64px); margin-inline: auto; }
.case-topnav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; border-bottom: 1px solid #ddd; }
.case-return { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; }
.case-picker { position: relative; z-index: 12; }
.case-picker summary { cursor: pointer; padding: 12px 0 12px 16px; font-size: 14px; }
.case-picker nav { position: absolute; right: 0; top: 100%; width: min(340px,calc(100vw - 32px)); max-height: 65svh; overflow-y: auto; background: #fff; border: 1px solid #ccc; box-shadow: 0 12px 32px #00000014; }
.case-picker nav a { display: block; padding: 16px; font-size: 14px; line-height: 22px; border-bottom: 1px solid #eee; }
.case-picker nav a[aria-current], .case-picker nav a:hover { color: #164bff; background: #f5f5f5; }
.case-story-intro { padding-block: 64px 40px; }
.case-story-intro h1 { margin: 0; font: 600 clamp(36px,4vw,72px)/1.08 var(--font); letter-spacing: -.035em; max-width: 22ch; }
.case-story-summary { font-size: 20px; line-height: 30px; max-width: 65ch; color: #636363; margin: 28px 0 40px; }
.case-story-meta { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.case-story-meta dl { display: flex; flex-wrap: wrap; gap: 24px 48px; margin: 0; }
.case-story-meta dt { font-size: 12px; line-height: 16px; color: #636363; margin-bottom: 8px; }
.case-story-meta dd { font-size: 16px; line-height: 24px; margin: 0; }
.case-story-meta .case-project-link { flex-shrink: 0; margin: 0 0 0 auto; width: auto; font-size: 14px; padding-bottom: 8px; }
.case-story-cover { background: #f4f4f4; }
.case-story-cover>a, .case-story-cover .case-cover-static { display: block; }
.case-story-cover .project-cover { width: 100%; height: clamp(280px,42vw,600px); aspect-ratio: auto; margin: 0; padding: 0; }
.case-story-cover img { width: 100%; height: 100%; object-fit: contain; }
.case-story-context { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-block: 64px; }
.case-story-context h2, .case-story-outcome h2 { font-size: 24px; line-height: 32px; margin: 0 0 16px; font-weight: 600; }
.case-story-context p, .case-story-outcome p, .case-story-disclosure p { font-size: 18px; line-height: 28px; color: #636363; margin: 0; max-width: 65ch; }
.case-story-disclosure { border-top: 1px solid #ddd; padding-block: 24px 40px; }
.case-story-disclosure p+p { margin-top: 16px; }
.case-story-gallery .image-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; margin: 0; }
.case-story-gallery .image-figure { width: 100%; max-width: none; margin: 0; }
.case-story-gallery .image-link, .case-story-gallery .image-static { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; padding: 0; }
.case-story-gallery .image-grid img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; }
.case-story-gallery figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: #636363; }
.case-story-outcome { padding-block: 64px; }
.case-story .next-case { margin-top: 48px; padding-block: 48px 56px; border-top: 1px solid #ddd; }
.case-story .next-case>a { display: grid; grid-template-columns: minmax(0,1fr) minmax(140px,20%) 56px; gap: 32px; }
.case-story .next-case-cover { grid-column: 2; grid-row: 1; width: 100%; height: auto; }
.case-story .next-case-cover .project-cover { left: 0; width: 100%; object-fit: contain; }
.case-story .next-case .round-arrow { grid-column: 3; }
@media (max-width: 1100px) { .case-story-meta { flex-wrap: wrap; } }
@media (max-width: 767px) {
  .case-story-shell { width: calc(100% - 32px); }
  .case-topnav { gap: 12px; padding-block: 12px; }
  .case-return { font-size: 12px; gap: 8px; }
  .case-picker summary { font-size: 12px; }
  .case-story-intro { padding-block: 40px 32px; }
  .case-story-summary { font-size: 18px; line-height: 28px; margin-block: 24px 32px; }
  .case-story-meta dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; width: 100%; }
  .case-story-meta dd { overflow-wrap: break-word; }
  .case-story-cover .project-cover { height: 240px; }
  .case-story-context { grid-template-columns: 1fr; gap: 32px; padding-block: 40px; }
  .case-story-context p, .case-story-outcome p, .case-story-disclosure p { font-size: 16px; line-height: 24px; }
  .case-story-gallery .image-grid { gap: 24px; }
  .case-story-outcome { padding-block: 40px; }
  .case-story .next-case { margin-top: 32px; padding-block: 32px 40px; }
  .case-story .next-case>a { grid-template-columns: minmax(0,1fr) 48px; gap: 24px; }
  .case-story .next-case-cover { grid-column: 1; grid-row: 2; width: 160px; height: 90px; }
  .case-story .next-case .round-arrow { grid-column: 2; }
}
.case-story .next-case>a>div:first-child { grid-column: 1; grid-row: 1; }
.case-story-intro .case-disclosure { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: #636363; }

/* Shared centred folder label; stage explanation follows the progress bars. */
.process-story { display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,4fr); gap:32px; align-items:start; padding-block:48px; text-align:left; }
.process-story-label { position:sticky; top:calc(50svh - 18px); margin:0; padding:0; color:#000; font:500 28px/36px var(--font); }
.process-story-main { width:min(680px,100%); justify-self:center; align-self:center; min-width:0; }
.process-art { width:100%; margin:0 0 16px; }
.process-story-controls { width:100%; }
.process-story-status { margin-top:0; }
.process-story-copy { min-height:168px; margin-top:20px; }
.process-story-copy h2 { font:500 clamp(26px,2vw,34px)/1.2 var(--font); margin:0 0 16px; max-width:none; letter-spacing:-.02em; }
.process-story-copy p { margin:0; max-width:60ch; text-align:left; }
@media(min-width:1400px) { .process-story-main { min-height:calc(100svh - 96px); display:flex; flex-direction:column; justify-content:center; } }
@media(max-width:1399px) { .process-story { grid-template-columns:minmax(0,1fr); gap:32px; } .process-story-label { position:static; } }
@media(max-width:767px) { .process-story { padding-block:24px 40px; gap:24px; } .process-story-label { font-size:24px; line-height:32px; } .process-story-copy h2 { font-size:26px; } .process-story-copy { min-height:190px; } }
/* v88: one text column and two image columns, with a persistent return bar. */
body[data-page=case] { --case-bar-offset: 0px; }
body[data-page=case] .case-topnav { position: sticky; top: var(--case-bar-offset); z-index: 25; width: 100%; margin-inline: 0; padding: 12px 32px; background: #fff; }
.case-story-shell { container-type: inline-size; }
.case-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: start; padding-top: 32px; }
.case-copy { position: sticky; top: var(--case-copy-top,100px); min-width: 0; padding-bottom: 24px; }
.case-story-intro { padding: 0; }
.case-story-intro h1 { font-size: clamp(32px,2.5vw,44px); line-height: 1.12; overflow-wrap: break-word; }
.case-story-summary { font-size: 16px; line-height: 24px; margin: 24px 0; }
.case-story-meta { display: block; }
.case-story-meta dl { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.case-story-meta .case-project-link { display: flex; width: fit-content; margin: 24px 0 0 auto; }
.case-story-context { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; padding-block: 32px; }
.case-story-context h2, .case-story-outcome h2 { font-size: 20px; line-height: 28px; margin-bottom: 12px; }
.case-story-context p, .case-story-outcome p, .case-story-disclosure p { font-size: 16px; line-height: 24px; }
.case-story-outcome { padding: 0; }
.case-story-disclosure { padding-block: 24px; }
.case-visuals { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; min-width: 0; }
.case-story-gallery, .case-story-gallery .image-grid { display: contents; }
.case-story-cover { min-width: 0; }
.case-story-cover>a, .case-story-cover .case-cover-static, .case-story-gallery .image-link, .case-story-gallery .image-static { display: block; width: 100%; aspect-ratio: 16/9; height: auto; overflow: hidden; }
.case-story-cover .project-cover { height: 100%; aspect-ratio: 16/9; }
.case-story-cover img { object-fit: cover; object-position: center; }
.case-story-gallery .image-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case-columns [id] { scroll-margin-top: calc(var(--case-bar-offset) + 100px); }
@container (min-width: 960px) {
  .case-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .case-visuals { grid-column: 2 / 4; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container (max-width: 639px) {
  .case-columns { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .case-copy { position: static; padding-bottom: 0; }
  .case-story-meta dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1023px) { body[data-page=case] { --case-bar-offset: var(--concept-header-height); } }
@media (max-width: 767px) { body[data-page=case] .case-topnav { padding-inline: 16px; } }
.case-story-cover .project-cover img { object-fit: cover; object-position: center; }
.case-visuals>.case-story-cover { align-self: start; }
.case-story a, .case-picker a { scroll-margin-block: calc(var(--case-bar-offset) + 100px) 24px; }
/* v89: the object cover spans the case above the three-column story. */
.case-story-shell>.case-story-cover { margin-top: 24px; background: #f8f8f8; }
.case-story-shell>.case-story-cover>a, .case-story-shell>.case-story-cover .case-cover-static { width: 100%; height: clamp(180px,18vw,280px); aspect-ratio: auto; }
.case-story-shell>.case-story-cover .project-cover { height: 100%; aspect-ratio: auto; background: #f8f8f8; }
.case-story-shell>.case-story-cover .project-cover img { object-fit: contain; }
/* Case typography. */
.case-six .case-heading-title { font: 600 clamp(32px,2.5vw,44px)/1.12 var(--font); letter-spacing: -.035em; margin: 32px 0 40px; }
.case-six .case-row { margin: 0 0 24px; }
.case-six .case-row h2, .case-six .case-inline-facts dt { font-size: 16px; line-height: 24px; font-weight: 500; margin: 0 0 12px; }
.case-six .case-row p, .case-six .case-inline-facts dd { font-size: 16px; line-height: 24px; font-weight: 400; margin: 0; }
.case-six .case-row p { color: #636363; }
.case-six .case-inline-facts { display: grid; gap: 20px; margin: 0 0 24px; }
.case-six .case-project-link { margin: 0 0 32px auto; width: fit-content; font-size: 14px; }
@container (min-width: 960px) {
  .case-six .case-columns { grid-template-columns: repeat(6,minmax(0,1fr)); column-gap: 24px; }
  .case-six .case-copy { grid-column: 1/4; display: grid; grid-template-columns: subgrid; row-gap: 24px; }

  .case-six .case-row, .case-six .case-inline-facts, .case-six .case-inline-facts>div { display: contents; }
  .case-six .case-row h2, .case-six .case-inline-facts dt { grid-column: 1; margin: 0; }
  .case-six .case-row p, .case-six .case-inline-facts dd, .case-six .case-project-link { grid-column: 2/4; margin: 0; }
  .case-six .case-project-link { justify-self: end; }
  .case-six .case-visuals { grid-column: 5/7; grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@container (min-width: 1280px) {
  .case-six .case-columns { column-gap: 32px; }
  .case-six .case-visuals { gap: 32px; }
}

.case-six .case-columns { padding-top: 0; }

.hero-phase .hero-phase-count { margin:12px 0 0; color:#636363; font-size:12px; line-height:20px; font-variant-numeric:tabular-nums; }
/* v92: the trial case's external link shares the title row. */
.case-six .case-heading { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-block: 32px 40px; }
.case-six .case-heading .case-heading-title { margin: 0; min-width: 0; }
.case-six .case-heading .case-project-link { flex-shrink: 0; margin: 0; width: fit-content; }
@container (max-width: 959px) {
  .case-six .case-heading { flex-direction: column; align-items: flex-start; gap: 24px; }
}
/* Shared native modal project drawer; case content layouts are untouched. */
.case-drawer-trigger { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.case-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0; width: clamp(320px,30vw,460px); max-width: 100%; height: 100dvh; max-height: none; background: #fff; color: #111; box-shadow: -12px 0 40px #00000018; overflow: hidden; }
.case-drawer[open] { display: flex; flex-direction: column; animation: case-drawer-enter 220ms cubic-bezier(.22,1,.36,1); }
.case-drawer::backdrop { background: rgb(0 0 0 / 25%); }
.case-drawer-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; border-bottom: 1px solid #ddd; }
.case-drawer-head h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; }
.case-drawer-head button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.case-drawer nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 24px; }
.case-drawer nav a { display: block; padding: 24px 0; border-bottom: 1px solid #e6e6e6; font-size: 18px; line-height: 26px; text-decoration: none; }
.case-drawer nav a[aria-current], .case-drawer nav a:hover { color: #164bff; }
.case-drawer :focus-visible { outline: 2px solid #164bff; outline-offset: -2px; }
@keyframes case-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 767px) { .case-drawer { width: min(100%,400px); } .case-drawer-trigger { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .case-drawer[open] { animation: none; } }
/* v94: next-cover shares the trial gallery's grid line. */
@container (min-width: 960px) {
  .case-six .next-case>a { grid-template-columns: repeat(6,minmax(0,1fr)); column-gap: 24px; }
  .case-six .next-case>a>div:first-child { grid-column: 1/4; }
  .case-six .next-case-cover { grid-column: 5/7; grid-row: 1; }
  .case-six .next-case .round-arrow { grid-column: 6; grid-row: 1; z-index: 1; }
}
@container (min-width: 1280px) { .case-six .next-case>a { column-gap: 32px; } }
@container (min-width: 640px) and (max-width: 959px) {
  .case-six .next-case>a { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
  .case-six .next-case>a>div:first-child { grid-column: 1; }
  .case-six .next-case-cover { grid-column: 2; grid-row: 1; width: 100%; height: auto; }
  .case-six .next-case .round-arrow { grid-column: 2; grid-row: 1; z-index: 1; }
}
@container (min-width: 640px) {
  .case-six .next-case-cover .project-cover { width: auto; max-width: calc(100% - 80px); height: 100%; left: 0; }
}

.case-six .case-heading-copy { min-width: 0; }
.case-six .case-heading .case-disclosure { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: #636363; }

body[data-page="projects"] .projects-index .section-label h1 { font-size: 28px; line-height: 36px; }

/* Contacts: invitation and first-message guidance share one clear composition. */
.connect { position:relative; isolation:isolate; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:56px; padding-block:64px; overflow:hidden; }
.connect-heading { position:relative; text-align:left; z-index:1; }
.connect-eyebrow { margin:0 0 24px; font-size:12px; line-height:20px; letter-spacing:.08em; color:#164bff; }
.connect-label { position:static; margin:0; font-family:var(--font); font-size:clamp(56px,6.5vw,112px); line-height:1.02; font-weight:500; letter-spacing:-.055em; }
.connect-description { max-width:530px; margin:28px 0 0; color:#636363; font-size:18px; line-height:28px; }
.connect-content { position:relative; z-index:1; width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,96px); align-items:start; }
.connect-channels { display:grid; gap:8px; }
.connect-channel { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px; color:#000; transition:background 180ms,color 180ms; }
.connect-channel--primary { background:#164bff; color:#fff; min-height:112px; }
.connect-channel--email { padding-inline:0; border-bottom:1px solid #ccc; }
.connect-channel-copy { display:grid; gap:8px; min-width:0; }
.connect-channel-label { font-size:20px; line-height:28px; font-weight:500; }
.connect-channel-address { font-size:14px; line-height:20px; overflow-wrap:anywhere; }
.connect-arrow { flex:none; }
.connect-arrow .icon { width:28px; height:28px; }
.connect-channel--primary:hover { background:#0034d9; }
.connect-channel--email:hover { color:#164bff; }
.connect-channel:focus-visible { outline:2px solid #164bff; outline-offset:4px; }
.connect-brief { border-top:1px solid #bbb; padding-top:24px; max-width:600px; }
.connect-brief-kicker { font-size:11px; line-height:18px; letter-spacing:.08em; color:#636363; margin-bottom:16px; }
.connect-brief h2 { font-size:clamp(24px,2vw,32px); line-height:1.2; font-weight:500; letter-spacing:-.025em; margin-bottom:16px; }
.connect-brief h2+p { font-size:16px; line-height:25px; max-width:440px; }
.connect-brief-note { margin-top:16px; font-size:14px; line-height:22px; color:#636363; }
@media(min-width:1800px) { .connect { gap:72px; padding-inline:48px; } }
@media(max-width:1023px) { .connect { min-height:calc(100svh - 80px); } }
@media(max-width:767px) {
 .connect { padding-block:40px; gap:32px; }
 .connect-label { font-size:clamp(48px,12vw,80px); }
 .connect-description { font-size:16px; line-height:24px; margin-top:24px; }
 .connect-content { grid-template-columns:minmax(0,1fr); gap:32px; }
  .connect-channel { padding:20px; }
 .connect-channel--email { padding-inline:0; }
 .connect-channel-label { font-size:18px; }
}
.connect { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(32px,5vw,96px); align-content:center; justify-content:normal; }
.connect-heading { grid-column:1; grid-row:1; }
.connect-label { font-size:clamp(48px,5.6vw,104px); }
.connect-planet { grid-column:2; grid-row:1; width:100%; height:100%; min-height:300px; align-self:stretch; pointer-events:none; }
.connect-content { grid-column:1/-1; }
.connect-channel--email { padding-inline:24px; }
@media(max-width:767px) {
 .connect { grid-template-columns:minmax(0,1fr); }
 .connect-label { font-size:clamp(48px,12vw,80px); }
 .connect-planet { grid-column:1; grid-row:2; min-height:0; height:230px; }
 .connect-content { grid-row:3; }
 .connect-channel--email { padding-inline:20px; }
}
@media(prefers-reduced-motion:reduce) { .connect-channel { transition:none; } }

/* Rectangular navigation buttons replace the overlapping folder faces. */
.site-header .header-inner .site-nav > a.nav-button {
  position: relative; isolation: isolate; display: flex; align-items: stretch;
  justify-content: space-between; gap: 12px; margin: 0; padding: 20px;
  min-width: 0; min-height: 88px; height: auto; border: 0; border-radius: 0;
  clip-path: none; overflow: hidden; background: #fff !important;
  color: #000; font-size: 24px; line-height: 32px;
  transition: none;
}
.site-header .header-inner .site-nav > a.nav-button::before,
.site-header .header-inner .site-nav > a.nav-button::after { display: none; }
.site-header .header-inner .site-nav > a.nav-button + a.nav-button { border-top: 1px solid var(--line); }
body .site-header.illustrated-sidebar .header-inner .site-nav > a.nav-button:not([aria-current]):is(:hover,:focus-visible) { background: #f7f9ff !important; color: #164bff; }
.site-header .header-inner .site-nav > a.nav-button[aria-current] { background: #164bff !important; color: #fff; }
body .site-header.illustrated-sidebar .header-inner .site-nav > a.nav-button[aria-current]:is(:hover,:focus-visible) { background: #164bff !important; color: #fff; }
.site-header .header-inner .site-nav > a.nav-button:focus-visible { outline: 2px solid #164bff; outline-offset: -2px; }
.site-header .header-inner .site-nav > a.nav-button[aria-current]:focus-visible { outline-color: #fff; outline-offset: -4px; }
.nav-button-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; }
.nav-button-caption { font-size: 12px; line-height: 16px; opacity: .7; }
.nav-button-title { font-weight: 500; }
.nav-button > .icon { position: relative; z-index: 1; width: 22px; height: 22px; flex: none; align-self: flex-end; margin-bottom: 5px; }
.nav-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
@media (min-width: 1024px) {
  .site-header .header-inner .site-nav { grid-template-rows: repeat(5, minmax(88px, 1fr)); gap: 0; padding: 0; }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .site-header .header-inner .site-nav > a.nav-button { padding: 16px; font-size: 20px; line-height: 28px; }
}
@media (max-width: 1023px) {
  .site-header .header-inner .site-nav,
  .has-menu .site-header .header-inner .site-nav.is-open {
    gap: 0; padding: 0; background: #f4f4f4;
  }
  .site-header .header-inner .site-nav.is-open > a.nav-button { flex: 1 0 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .header-inner .site-nav > a.nav-button { transition: none; }
}

/* Main concept: compact top navigation and a single full-height scene. */
:root{--concept-header-height:112px;--sidebar-width:0px;--gutter:48px}
body,body:has(.case-hero),body:has(.case-rail){padding-left:0}
.site-header.concept-header{position:relative;inset:auto;width:100%;height:var(--concept-header-height);min-height:0;padding:0;border:0;background:#fff}
.site-header.concept-header .header-inner.shell{width:calc(100% - var(--gutter)*2);height:100%;margin-inline:auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:24px;padding:0;border-bottom:1px solid #dedede}
.site-header.concept-header .concept-brand{display:flex;flex-direction:row;align-items:center;gap:20px;width:auto;min-height:0;padding:0;border:0;font-size:15px;line-height:22px;font-weight:500}
.concept-brand>img{width:62px;height:auto;flex:none}
.site-header.concept-header .concept-brand small{display:block;margin-top:3px;font-size:12px;line-height:18px;font-weight:400;color:#636363}
.site-header.concept-header .header-inner .site-nav{display:flex;flex-direction:row;align-items:center;gap:32px;flex:none;grid-template-rows:none;width:auto;height:auto;min-height:0;padding:0;overflow:visible;background:none;border:0}
.site-header.concept-header .header-inner .site-nav>a.concept-link{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:auto;min-height:44px;padding:0;margin:0;border:0;border-radius:0;clip-path:none;background:transparent !important;color:#111;font:400 14px/20px var(--font);text-decoration:none;box-shadow:none}
.site-header.concept-header .header-inner .site-nav>a::before,.site-header.concept-header .header-inner .site-nav>a::after{display:none}
.site-header.concept-header .header-inner .site-nav>a.concept-link[aria-current]{color:#164bff;box-shadow:inset 0 -2px #164bff}
.site-header.concept-header .header-inner .site-nav>a.concept-link:hover{color:#164bff}
.site-header.concept-header .header-inner .site-nav>a.concept-contact{padding-inline:18px;background:#f0f0f0 !important}
.site-header.concept-header .header-inner .site-nav>a.concept-contact:hover{background:#161616 !important;color:#fff}
.site-header.concept-header .site-nav .icon{width:18px;height:18px}
.site-header.concept-header .site-nav>a:focus-visible{outline:2px solid #164bff;outline-offset:4px}
body[data-page="home"] .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:calc(100svh - var(--concept-header-height));height:auto;padding-block:32px;gap:clamp(40px,5vw,96px);align-content:center}
.hero-kicker{margin-bottom:26px;font-size:11px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#636363}
.hero-heading{max-width:none;font-size:clamp(56px,5.8vw,88px);line-height:1.02;font-weight:500;letter-spacing:-.055em}
.hero-heading-accent{color:#164bff}
.hero-summary{max-width:410px;margin-top:28px;font-size:16px;line-height:26px}
.hero-visual{gap:20px}
.hero-figure{width:min(100%,calc(100svh - var(--concept-header-height) - 180px),620px)}
.hero-phase{width:min(100%,320px)}
.hero-phase p{font-size:16px;line-height:24px}
.folder-page{--folder-stage-height:calc(100svh - var(--concept-header-height))}
body[data-page="projects"] .work,.process-story,.connect{min-height:calc(100svh - var(--concept-header-height))}
@media(min-width:1400px){.process-story-main{min-height:calc(100svh - var(--concept-header-height) - 96px)}}
@media(max-width:1100px){.site-header.concept-header .header-inner .site-nav{gap:20px}.hero-heading{font-size:clamp(44px,6vw,64px)}}
@media(min-width:768px) and (max-height:760px){.hero-heading{font-size:clamp(44px,4.8vw,68px)}.hero-kicker{margin-bottom:16px}.hero-summary{margin-top:20px}.hero-figure{width:min(100%,calc(100svh - var(--concept-header-height) - 140px))}}
@media(max-width:1023px){
 :root{--concept-header-height:80px;--gutter:24px}
 .site-header.concept-header .concept-brand{font-size:14px;gap:14px}.concept-brand>img{width:48px}.site-header.concept-header .concept-brand small{font-size:11px}
 .has-menu .site-header.concept-header .header-inner .site-nav{display:none}
 .has-menu .site-header.concept-header .header-inner .site-nav.is-open{display:flex;position:fixed;inset:80px 0 0;width:100%;height:calc(100dvh - 80px);max-height:none;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;padding:24px;background:#fff;overflow:auto}
 .has-menu .site-header.concept-header .header-inner .site-nav.is-open>a.concept-link{flex:0 0 auto;justify-content:space-between;min-height:64px;padding:16px;font-size:24px;line-height:32px}
 .has-menu .site-header.concept-header .header-inner .site-nav.is-open>a.concept-link[aria-current]{background:#164bff !important;color:#fff;box-shadow:none}
}
@media(max-width:767px){
 :root{--gutter:20px}
 body[data-page="home"] .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;min-height:calc(100svh - 80px);height:auto;gap:20px;padding-block:24px;align-content:center}
 .hero-copy{max-width:none}.hero-kicker{margin-bottom:14px;font-size:9px;line-height:14px}.hero-heading{font-size:clamp(36px,10vw,48px)}
 .hero-summary{font-size:13px;line-height:20px;margin-top:16px}
 body[data-page="home"] .hero-copy .hero-action{margin-top:18px;min-height:44px;padding:10px 16px;font-size:13px;line-height:20px}
 .hero-visual{max-width:none;gap:8px}.hero-figure{width:min(100%,clamp(140px,calc(100svh - 490px),300px))}
 .hero-phase{width:min(100%,280px)}.hero-phase p{font-size:14px;line-height:20px}.hero-phase-progress{margin-top:8px}.hero-phase .hero-phase-count{margin-top:6px;font-size:10px;line-height:16px}
}
@media(max-width:359px){:root{--gutter:16px}.hero-heading{font-size:34px}.hero-kicker{font-size:8px}body[data-page="home"] .hero{gap:12px;padding-block:16px}.hero-figure{width:min(100%,max(120px,calc(100svh - 484px)))}}
.author-about{min-height:calc(100svh - var(--concept-header-height))}
@media(min-width:768px){.author-content{min-height:calc(100svh - var(--concept-header-height) - 128px)}}
@media(min-width:1920px){.author-content{min-height:calc(100svh - var(--concept-header-height) - 176px)}}


/* Illustrated left navigation; the active section carries the particle surface. */
:root{--concept-header-height:0px;--sidebar-width:clamp(280px,22vw,360px);--gutter:32px}
.site-header.illustrated-sidebar .sidebar-brand{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:24px 20px;font-size:18px;line-height:24px}
.sidebar-brand>img{width:48px;height:auto;flex:none}
.site-header.illustrated-sidebar .sidebar-brand>span{display:block;min-width:0}
.site-header.illustrated-sidebar .sidebar-brand small{display:block;font-size:12px;line-height:18px;margin-top:4px;font-weight:400}
.site-header.illustrated-sidebar .sidebar-brand{background:#fff;border-bottom-color:var(--line)}
.case-topnav,.case-story-disclosure,.case-story .next-case,
.case-drawer-head,.case-drawer nav a,.connect-brief,
.case-sequential .case-copy .case-inline-facts{border-color:var(--line)}
.site-header.illustrated-sidebar .header-inner .site-nav>a.nav-button{padding:20px;font-size:24px;line-height:32px}
@media(min-width:1024px){
 body,body:has(.case-hero),body:has(.case-rail){padding-left:var(--sidebar-width)}
 .site-header.illustrated-sidebar .sidebar-brand{border-bottom:1px solid var(--line)}
 .site-header.illustrated-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);height:100svh;background:#fff;border-right:1px solid var(--line)}
 .site-header.illustrated-sidebar .header-inner{display:flex;flex-direction:column;align-items:stretch;justify-content:stretch;width:100%;height:100%;margin:0;padding:0;gap:0}
 .site-header.illustrated-sidebar .site-nav{flex:1;display:grid;grid-template-rows:repeat(5,minmax(88px,1fr));gap:0;padding:0;overflow-y:auto}
 body[data-page="home"] .hero{min-height:100svh;gap:40px}
 .hero-heading{font-size:clamp(42px,4.4vw,80px)}
}
@media(min-width:1024px) and (max-width:1399px){:root{--sidebar-width:240px;--gutter:24px}.site-header.illustrated-sidebar .sidebar-brand{gap:10px;padding:24px 16px;font-size:15px}.sidebar-brand>img{width:40px}.site-header.illustrated-sidebar .header-inner .site-nav>a.nav-button{padding:16px;font-size:20px;line-height:28px}.hero-heading{font-size:clamp(38px,4.4vw,60px)}}
@media(max-width:1023px){
 :root{--concept-header-height:64px;--sidebar-width:0px;--gutter:24px}
 .site-header.illustrated-sidebar .sidebar-brand{min-height:0;padding:0;font-size:14px;gap:12px}.sidebar-brand>img{width:40px}.site-header.illustrated-sidebar .sidebar-brand small{font-size:10px;line-height:16px}
 .site-header.illustrated-sidebar .header-inner{height:var(--concept-header-height);padding-block:12px;gap:12px}
 .has-menu .site-header.illustrated-sidebar .header-inner .site-nav.is-open{gap:0;padding:0;justify-content:stretch}
 .site-header.illustrated-sidebar .header-inner .site-nav.is-open>a.nav-button{flex:1 0 100px}
}
@media(max-width:767px){:root{--gutter:20px}}
@media(max-width:359px){:root{--gutter:16px}.site-header.illustrated-sidebar .sidebar-brand{font-size:12px;gap:8px}.sidebar-brand>img{width:34px}}

/* An edge-to-edge landscape, with a quiet area for the introduction. */
body[data-page="home"] .hero.terrain-hero{
 position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;
 min-height:calc(100svh - var(--concept-header-height));padding:clamp(28px,4vw,72px);
 display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;
 align-items:center;background:#fff;
}
.hero-terrain{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none}
.terrain-wash{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 24%,rgba(255,255,255,.82) 43%,rgba(255,255,255,0) 76%)}
.terrain-hero .hero-copy{max-width:640px;padding-block:40px}
.terrain-hero .hero-kicker{color:#596167;font-size:10px;letter-spacing:.1em;margin-bottom:32px}
.terrain-hero .hero-heading{font-size:clamp(44px,4.7vw,88px);line-height:1.04;letter-spacing:-.055em;font-weight:800}
.terrain-hero .hero-summary{max-width:460px;font-size:16px;line-height:1.6;margin-top:28px}
.terrain-hero .hero-phase{position:relative;align-self:end;justify-self:end;width:min(100%,300px);padding:24px 0 0;margin-bottom:12px}
.terrain-hero .hero-phase p{font-size:16px;line-height:24px;color:#164bff}
.terrain-hero .hero-phase .hero-phase-count{font-size:10px;color:#606970;line-height:16px}
.terrain-stage-buttons{display:flex;gap:4px;margin-bottom:24px}
.terrain-stage-buttons button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #cdd3d6;color:#626c77;background:#fff;cursor:pointer;font:inherit;font-size:11px;transition:background .2s,color .2s}
.terrain-stage-buttons button[aria-pressed="true"]{background:#164bff;color:#fff;border-color:#164bff}
.terrain-stage-buttons button:hover{background:#161616;color:white;border-color:#161616}
.terrain-stage-buttons button:focus-visible{outline:2px solid #164bff;outline-offset:4px}
@media(max-width:1399px) and (min-width:1024px){
 body[data-page="home"] .hero.terrain-hero{padding:32px;grid-template-columns:1.45fr 1fr;gap:20px}
 .terrain-hero .hero-heading{font-size:clamp(44px,4.6vw,64px)}
 .terrain-hero .hero-summary{font-size:14px}
}
@media(max-width:1023px){
 body[data-page="home"] .hero.terrain-hero{padding:32px;gap:24px}
 .terrain-hero .hero-heading{font-size:clamp(40px,6vw,64px)}
}
@media(max-width:767px){
 body[data-page="home"] .hero.terrain-hero{padding:28px 24px 24px;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;gap:32px;align-content:stretch}
 .terrain-hero .hero-copy{align-self:start;padding:0}
 .terrain-hero .hero-kicker{font-size:8px;margin-bottom:24px}
 .terrain-hero .hero-heading{font-size:clamp(38px,10.9vw,64px)}
 .terrain-hero .hero-summary{max-width:340px;font-size:13px;line-height:20px;margin-top:20px}
 .terrain-wash{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.95) 28%,rgba(255,255,255,.6) 52%,rgba(255,255,255,0) 82%)}
 .terrain-hero .hero-phase{justify-self:start;width:100%;max-width:300px;margin:0;padding:0}
 .terrain-stage-buttons{margin-bottom:12px}
}
@media(max-width:359px){body[data-page="home"] .hero.terrain-hero{padding:20px 16px;gap:24px}.terrain-hero .hero-heading{font-size:36px}.terrain-hero .hero-kicker{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.terrain-stage-buttons button{transition:none}}

/* The project list fills the right column; covers only appear on hover. */
body[data-page="projects"] .work{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,4fr);align-items:center;align-content:center;gap:32px;padding-block:48px;min-height:calc(100svh - var(--concept-header-height))}
body[data-page="projects"] .work .section-label{position:static;top:auto;grid-column:1;grid-row:1;align-self:center;margin:0;padding:0}
body[data-page="projects"] .work-list{grid-column:2;grid-row:1;width:100%;max-width:none;min-width:0}
.work-list .project-rows{grid-auto-rows:auto}
.work-list .project-row-link{grid-template-columns:minmax(0,1fr) 130px 40px 24px;gap:20px;align-items:center;padding:16px 24px}
.work-list .project-row-link:is(:hover,:focus-visible,.is-preview-active){background:transparent}
.work-list .project-row-link:is(:hover,:focus-visible,.is-preview-active) h3,.work-list .project-row-link:is(:hover,:focus-visible,.is-preview-active) .project-row-arrow{color:#164bff}
.work-list .project-row-copy{grid-column:1;grid-row:1;gap:8px}
.work-list .project-row-copy h3{font-size:22px;line-height:28px}
.work-list .project-row-copy p{font-size:13px;line-height:20px;max-width:500px}
.work-list .project-row-facts{display:contents}
.work-list .project-row-type{grid-column:2;grid-row:1;font-size:13px;line-height:20px}
.work-list .project-row-year{grid-column:3;grid-row:1;font-size:13px}
.work-list .project-row-arrow{grid-column:4;grid-row:1;align-self:center}
.project-cursor-preview{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:clamp(260px,24vw,380px);aspect-ratio:1.5;opacity:0;transition:opacity .18s;will-change:transform;filter:drop-shadow(0 14px 16px rgba(20,30,40,.15))}
.project-cursor-preview.is-visible{opacity:1}
.project-cursor-preview .project-cover{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.94);transition:opacity .2s,transform .35s cubic-bezier(.2,.7,.2,1);background:#fff;overflow:hidden}
.project-cursor-preview .project-cover.is-visible{opacity:1;transform:scale(1)}
.project-cursor-preview img{width:100%;height:100%;object-fit:cover}
@media(min-width:1400px) and (max-width:1599px){
 body[data-page="projects"] .work{padding-block:32px}
 .work-list .project-row-link{grid-template-columns:minmax(0,1fr) 96px 36px 20px;gap:16px;padding-block:12px}
 .work-list .project-row-copy h3{font-size:20px;line-height:26px}
}
@media(max-width:1399px){
 body[data-page="projects"] .work{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:32px}
 body[data-page="projects"] .work .section-label{grid-column:1;grid-row:1;align-self:start}
 body[data-page="projects"] .work-list{grid-column:1;grid-row:2}
 .work-list .project-row-copy h3{font-size:20px;line-height:26px}
}
@media(max-width:767px){
 .work-list .project-row-link{grid-template-columns:minmax(0,1fr) 20px;gap:12px;padding:20px 0}
 .work-list .project-row-copy{grid-column:1;grid-row:1;gap:8px}
 .work-list .project-row-copy h3{font-size:20px;line-height:26px}
 .work-list .project-row-copy p{font-size:13px;line-height:20px}
 .work-list .project-row-facts{display:flex;grid-column:1;grid-row:2;gap:16px}
 .work-list .project-row-type,.work-list .project-row-year{font-size:12px;line-height:18px}
 .work-list .project-row-arrow{grid-column:2;grid-row:1;align-self:start;padding:0}
}
@media(max-width:1023px),(hover:none),(pointer:coarse){.project-cursor-preview{display:none}}
@media(prefers-reduced-motion:reduce){.project-cursor-preview,.project-cursor-preview .project-cover{transition:none}}

/* Shared architectural guides live behind page content and never receive input. */
body:not([data-page="home"]) main{position:relative;isolation:isolate}
.page-grid{--grid-x-first:20%;--grid-x-second:64%;--grid-y-first:10%;--grid-y-second:90%;position:fixed;inset:var(--concept-header-height) 0 0 var(--sidebar-width);z-index:-1;pointer-events:none;user-select:none;overflow:hidden}
.terrain-hero>.page-grid{--grid-x-first:46%;--grid-y-first:28%;--grid-y-second:72%;position:absolute;inset:0}
body:not([data-page="home"]) .page-grid{opacity:.42}
.page-grid-menu-lines{position:absolute;inset:0;display:none}
.page-grid[data-menu-aligned]>.page-grid-line--horizontal{display:none}
.page-grid[data-menu-aligned]>.page-grid-menu-lines{display:block}
.page-grid-line{position:absolute;display:block;background:rgba(84,105,128,.12)}
.page-grid-line--vertical{top:0;bottom:0;width:1px}
.page-grid-line--horizontal{left:0;right:0;height:1px}
.page-grid-line--vertical.page-grid-line--first{left:var(--grid-x-first)}
.page-grid-line--vertical.page-grid-line--second{left:var(--grid-x-second)}
.page-grid-line--horizontal.page-grid-line--first{top:var(--grid-y-first)}
.page-grid-line--horizontal.page-grid-line--second{top:var(--grid-y-second)}
.page-grid-cross{position:absolute;display:block;width:12px;height:12px;transform:translate(-50%,-50%)}
.page-grid-cross::before,.page-grid-cross::after{content:'';position:absolute;background:#164bff}
.page-grid-cross::before{left:0;right:0;top:5px;height:2px}
.page-grid-cross::after{top:0;bottom:0;left:5px;width:2px}
.page-grid-cross--one{left:var(--grid-x-first);top:var(--grid-y-first)}
.page-grid-cross--two{left:var(--grid-x-second);top:var(--grid-y-first)}
.page-grid-cross--three{left:var(--grid-x-first);top:var(--grid-y-second)}
.page-grid-cross--four{left:var(--grid-x-second);top:var(--grid-y-second)}
body[data-page="case"] .page-grid-line--vertical.page-grid-line--first,
body[data-page="case"] .page-grid-cross--one,
body[data-page="case"] .page-grid-cross--three{display:none}
@media(max-width:1399px){body[data-page="case"] .page-grid{--grid-x-second:calc(100% - 12px)}}
@media(max-width:767px){
 .page-grid,.terrain-hero>.page-grid{--grid-x-first:12%;--grid-x-second:calc(100% - 12px);--grid-y-first:30%;--grid-y-second:76%}
 .page-grid-line--vertical.page-grid-line--first,.page-grid-line--horizontal.page-grid-line--first,.page-grid-cross:not(.page-grid-cross--four){display:none}
}

/* A particle sculpture and one clear way back. */
.not-found.shell{min-height:calc(100svh - var(--concept-header-height));padding-block:40px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}
.not-found-art{position:relative;width:min(900px,100%);height:clamp(200px,30vw,360px)}
.not-found-code{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(140px,24vw,320px);font-weight:800;line-height:1;color:#164bff;letter-spacing:-.08em}
.not-found-particles{display:block;width:100%;height:100%;visibility:hidden}
.has-particle-code .not-found-code{visibility:hidden}
.has-particle-code .not-found-particles{visibility:visible}
.not-found-copy{display:flex;align-items:center;flex-direction:column;gap:20px}
.not-found .not-found-copy h1{font-size:clamp(28px,3vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.035em;margin:0}
.not-found-copy p{font-size:16px;line-height:24px;color:#636363;margin:0}
.not-found-copy .pill-link{margin-top:8px;min-width:190px;justify-content:space-between;gap:32px}
@media(max-width:767px){.not-found.shell{padding-block:32px;gap:20px}.not-found-art{height:200px}.not-found-copy{gap:16px}}

/* The page scroll reveals screenshots inside one pinned scene. */
.case-story-gallery,.case-story-gallery .image-grid{display:block}
.case-story-gallery .image-figure{margin:0 0 32px}
.case-story-gallery .image-link,.case-story-gallery .image-static{aspect-ratio:auto}
.case-story-gallery .image-grid img{height:auto;object-fit:contain}
.is-scroll-gallery{position:relative}
.is-scroll-gallery .case-gallery-stage{position:sticky;top:var(--gallery-top);height:var(--gallery-height);display:flex;flex-direction:column;gap:16px}
.case-story-gallery .is-scroll-gallery .image-grid{position:relative;flex:1;min-height:0;isolation:isolate;background:#f7f8fa}
.case-story-gallery .is-scroll-gallery .image-figure{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;will-change:clip-path}
.case-story-gallery .is-scroll-gallery .image-link,.case-story-gallery .is-scroll-gallery .image-static{display:flex;flex:1;min-height:0;align-items:center;justify-content:center;background:#f7f8fa;overflow:hidden}
.case-story-gallery .is-scroll-gallery .image-grid img{width:100%;height:100%;object-fit:contain}
.case-story-gallery .is-scroll-gallery figcaption{flex:none;margin:0;padding:0 12px 12px;font-size:12px;line-height:18px;background:#f7f8fa}
.case-gallery-caption{display:none}
.case-story-gallery .is-scroll-gallery figcaption{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;padding:0}
.is-scroll-gallery .case-gallery-caption{display:block;flex:none;margin:0;padding:0 12px;font-size:12px;line-height:18px;color:#636363}
.case-gallery-controls{display:flex;gap:12px;align-items:center;min-height:44px;flex:none}
.case-gallery-controls[hidden]{display:none}
.case-gallery-controls nav{display:flex;flex:1;min-width:0;gap:4px;overflow-x:auto}
.case-gallery-controls button{display:flex;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;color:#000;min-width:36px;height:44px;padding:0}
.case-gallery-controls nav button{flex:1;min-width:24px}
.case-gallery-controls nav span{display:block;width:100%;height:2px;background:#d9d9d9}
.case-gallery-controls nav button[aria-pressed=true] span{background:#164bff}
.case-gallery-controls button:hover{color:#164bff}
.case-gallery-controls button:focus-visible{outline:2px solid #164bff;outline-offset:2px}
.case-gallery-count{font-size:12px;line-height:18px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#636363}
@container(min-width:960px){.case-six .case-visuals{grid-column:4/7}}
@media(max-width:767px){.case-gallery-controls{gap:8px}.is-scroll-gallery .case-gallery-stage{gap:8px}}

/* First case: read the story, then enter the full-width image sequence. */
.case-sequential .case-heading{width:min(960px,100%);margin:64px auto 72px;align-items:flex-start;flex-direction:column;gap:24px}
.case-sequential .case-heading .case-heading-title{font-size:clamp(36px,4.2vw,64px);font-weight:700;line-height:1.08;letter-spacing:-.045em}
.case-sequential .case-columns{display:block;padding:0}
.case-sequential .case-copy{position:static;display:block;width:min(960px,100%);margin:0 auto 96px;padding:0}
.case-sequential .case-copy .case-row{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:48px;margin:0 0 64px;align-items:start}
.case-sequential .case-copy .case-row h2{grid-column:auto;font-size:18px;font-weight:600;line-height:28px;margin:0}
.case-sequential .case-copy .case-row p{grid-column:auto;max-width:680px;font-size:18px;line-height:28px;margin:0;color:#636363}
.case-sequential .case-copy .case-row:first-child p{font-size:22px;line-height:32px;color:#000}
.case-sequential .case-copy .case-inline-facts{display:grid;grid-template-columns:1.3fr 1.8fr .6fr;gap:32px;margin:0 0 72px 208px;padding-block:28px;border-block:1px solid #e8e8e8}
.case-sequential .case-copy .case-inline-facts>div{display:block}
.case-sequential .case-inline-facts dt{font-size:13px;line-height:20px;color:#636363;margin:0 0 10px;font-weight:400}
.case-sequential .case-inline-facts dd{font-size:16px;line-height:24px;margin:0}
.case-sequential .case-visuals{display:block;width:100%;grid-column:auto}
.case-sequential .case-story-gallery{width:100%}
.case-sequential .is-scroll-gallery .image-grid{overflow:hidden}
.case-sequential .image-figure img{filter:brightness(var(--gallery-brightness,1))}
.case-sequential .is-scroll-gallery .image-grid img{object-position:center}
.case-sequential .case-gallery-controls nav{scrollbar-width:none}
.case-sequential .case-gallery-controls nav::-webkit-scrollbar{display:none}
.gallery-particle-sweep{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.is-scroll-gallery .gallery-particle-sweep{display:block}
@media(max-width:767px){
 .case-sequential .case-heading{margin-block:40px 48px;gap:20px}
 .case-sequential .case-copy{margin-bottom:64px}
 .case-sequential .case-copy .case-row{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:40px}
 .case-sequential .case-copy .case-row p{font-size:16px;line-height:26px}
 .case-sequential .case-copy .case-row:first-child p{font-size:20px;line-height:30px}
.case-sequential .case-copy .case-inline-facts{grid-template-columns:1fr;gap:24px;margin:0 0 48px;padding-block:24px}
}

/* All case stories share six columns from the left content edge. */
.case-sequential .case-heading{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:32px;align-items:center;width:100%;margin:40px 0 56px}
.case-sequential .case-heading-copy{grid-column:1/5}
.case-sequential .case-heading .case-heading-title{font-size:40px;font-weight:600;line-height:48px;letter-spacing:-.035em}
.case-sequential .case-heading .case-project-link{grid-column:5/7;justify-self:end}
.case-sequential .case-columns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:32px;row-gap:64px;align-items:start}
.case-sequential .case-copy{grid-column:1/5;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px;width:100%;margin:0;padding:0}
.case-sequential .case-copy .case-row{grid-column:1/-1;grid-template-columns:subgrid;column-gap:32px;margin:0 0 56px}
.case-sequential .case-copy .case-row:last-child{margin-bottom:0}
.case-sequential .case-copy .case-row h2{grid-column:1}
.case-sequential .case-copy .case-row p{grid-column:2/5;max-width:none}
.case-sequential .case-copy .case-row p+p{margin-top:24px}
.case-sequential .case-copy .case-row:first-child p{font-size:20px;line-height:30px}
.case-sequential .case-copy .case-inline-facts{grid-column:2/5;grid-template-columns:minmax(0,1fr);margin:0 0 64px;gap:24px}
.case-sequential .case-object{grid-column:5/7;position:relative;width:100%;aspect-ratio:1/1.12;align-self:start;pointer-events:none}
.case-object canvas,.case-object-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.case-object canvas{visibility:hidden}
.case-object.has-particle-object canvas{visibility:visible}
.has-particle-object .case-object-fallback{visibility:hidden}
.case-sequential .case-visuals{grid-column:1/-1}
.case-sequential .case-narrative{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;min-width:0}
@media(min-width:1400px){
 .case-sequential .case-object{position:sticky;top:calc(var(--case-bar-offset) + 100px)}
}
@media(max-width:1399px){
 .case-sequential .case-object{display:none}
 .case-sequential .case-copy{grid-column:1/-1}
}
@media(min-width:768px) and (max-width:1399px){
 .case-sequential .case-copy{grid-template-columns:repeat(6,minmax(0,1fr))}
 .case-sequential .case-copy .case-row p{grid-column:2/7}
 .case-sequential .case-copy .case-inline-facts{grid-column:2/7;grid-template-columns:1.3fr 1.8fr .6fr}
}
@media(max-width:767px){
 .case-sequential .case-heading{grid-template-columns:minmax(0,1fr);margin-block:32px 40px;gap:20px}
 .case-sequential .case-heading-copy,.case-sequential .case-heading .case-project-link{grid-column:1;justify-self:start}
 .case-sequential .case-heading .case-heading-title{font-size:30px;line-height:36px}
 .case-sequential .case-columns{grid-template-columns:minmax(0,1fr);gap:48px}
 .case-sequential .case-copy{grid-column:auto;grid-template-columns:minmax(0,1fr)}
 .case-sequential .case-copy .case-row{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:40px}
 .case-sequential .case-copy .case-row h2,.case-sequential .case-copy .case-row p{grid-column:auto}
 .case-sequential .case-copy .case-inline-facts{grid-column:auto;margin:0 0 48px}
 .case-sequential .case-object{grid-column:auto;position:relative;top:auto;width:min(340px,100%);justify-self:center}
}

/* Responsive corrections: four steps, full-width mobile actions and a pinned list heading. */
.home-datetime{display:none}
@media(min-width:1024px){
 .home-datetime{position:absolute;top:clamp(28px,4vw,72px);right:clamp(28px,4vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:8px;width:300px;color:#000;font-variant-numeric:tabular-nums}
 .home-clock,.home-calendar{border:1px solid #cdd3d6;background:rgba(255,255,255,.94);min-width:0;padding:12px;display:flex;flex-direction:column}
 .home-widget-label{font-size:10px;line-height:16px;color:#626c77;text-transform:capitalize;white-space:nowrap}
 .home-clock-face{width:84px;height:84px;margin:4px auto}
 .clock-tick{stroke:#a6afb7;stroke-width:1}
 .clock-hand{transform-origin:50px 50px;stroke:#000;stroke-linecap:round}
 .clock-hand--hour{transform:rotate(var(--clock-hour));stroke-width:3}
 .clock-hand--minute{transform:rotate(var(--clock-minute));stroke-width:2}
 .clock-hand--second{transform:rotate(var(--clock-second));stroke:#164bff;stroke-width:1}
 .home-clock time{font-size:12px;line-height:18px;text-align:center;color:#164bff}
 .home-calendar-week,.home-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;font-size:10px;line-height:18px;gap:2px 0}
 .home-calendar-week{margin-top:12px;color:#626c77;font-size:9px}
 .home-calendar-days span{display:grid;place-items:center;min-height:18px}
 .home-calendar-days .is-today{background:#164bff;color:#fff}
 body[data-page="home"] .hero.terrain-hero{min-height:max(100svh,580px)}
}
@media(min-width:1024px) and (max-width:1399px){
 .home-datetime{top:32px;right:32px;width:264px;gap:6px}
 .home-clock,.home-calendar{padding:10px}
 .home-clock-face{width:76px;height:76px}
 .home-calendar-week,.home-calendar-days{font-size:9px;line-height:16px}
 .home-calendar-days span{min-height:16px}
 .home-calendar-week{margin-top:8px;font-size:8px}
}
.terrain-stage-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.terrain-stage-buttons button{width:100%;min-height:48px;font-size:13px}
.terrain-hero .hero-phase .hero-phase-count{font-size:12px;line-height:18px}
.text-link,.author-contact{border:1px solid currentColor;padding:12px 20px;min-height:48px;align-items:center;justify-content:space-between;text-decoration:none}
.text-link:hover,.author-contact:hover{background:#fff;text-decoration:none}
.case-story-meta .case-project-link,.case-six .case-project-link{padding:12px 20px}
.connect-channel{border:1px solid currentColor}
.connect-channel--primary{border-color:#164bff}
.connect-channel--email{border:1px solid #000}
/* Outline actions use the same blue state for their copy, icon and border. */
.text-link,.pill-link,.author-contact,.connect-channel,.viewer-close,.terrain-stage-buttons button{transition:color .2s,background .2s,border-color .2s}
.text-link:is(:hover,:focus-visible),.author-contact:is(:hover,:focus-visible),
.pill-link:is(:hover,:focus-visible),.pill-link.primary:is(:hover,:focus-visible),
.hero-side .text-link:is(:hover,:focus-visible),.connect-channel--email:is(:hover,:focus-visible),
.viewer-close:is(:hover,:focus-visible){color:#164bff;border-color:#164bff;background:#fff}
.connect-channel--primary:is(:hover,:focus-visible){background:#0034d9;border-color:#0034d9;color:#fff}
.terrain-stage-buttons button:is(:hover,:focus-visible){background:#164bff;border-color:#164bff;color:#fff}
.case-gallery-controls button:is(:hover,:focus-visible),.case-drawer-head button:is(:hover,:focus-visible),.menu-toggle:is(:hover,:focus-visible){color:#164bff}
.process-story-loader button:hover::before{background:#164bff}
.viewer-controls button:not(:disabled):is(:hover,:focus-visible){border-color:#164bff;background:#164bff;color:#fff}
.next-case a:is(:hover,:focus-visible) .round-arrow,.project-card-link:is(:hover,:focus-visible) .round-arrow{border-color:#164bff;background:#164bff;color:#fff}
.image-link:is(:hover,:focus-visible) .image-zoom{background:#164bff;color:#fff}
@media(prefers-reduced-motion:reduce){.text-link,.pill-link,.author-contact,.connect-channel,.viewer-close,.terrain-stage-buttons button{transition:none}}
@media(max-width:1399px){
body[data-page="projects"] .work{display:block;padding-block:0 40px;min-height:calc(100svh - var(--concept-header-height))}
body[data-page="projects"] .work .section-label{position:sticky;top:var(--concept-header-height);z-index:5;margin:0;padding:24px 0;background:#fff;border-bottom:1px solid var(--line)}
body[data-page="projects"] .work-list{max-width:none;width:100%}
}
@media(min-width:1024px) and (max-width:1199px){
 :root{--sidebar-width:208px}
 .site-header.illustrated-sidebar .sidebar-brand{font-size:13px;gap:8px;padding-inline:16px}
 .site-header.illustrated-sidebar .sidebar-brand small{font-size:10px}
 .sidebar-brand>img{width:34px}
 .site-header.illustrated-sidebar .header-inner .site-nav>a.nav-button{font-size:18px}
 body[data-page="home"] .hero.terrain-hero{grid-template-columns:minmax(0,1fr) 216px;gap:40px;padding:32px}
 .terrain-hero .hero-heading{font-size:48px}
 .terrain-hero .hero-phase{width:216px}
 .terrain-hero .hero-summary{font-size:16px}
}
@media(min-width:768px) and (max-width:1023px){
 body[data-page="home"] .hero.terrain-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;align-content:stretch;gap:48px;padding:48px 32px 32px}
 .terrain-hero .hero-copy{padding:0;align-self:center;justify-self:start;max-width:600px}
 .terrain-hero .hero-heading{font-size:clamp(56px,8vw,80px)}
 .terrain-hero .hero-summary{font-size:18px;line-height:28px;max-width:540px}
 .terrain-hero .hero-phase{width:100%;max-width:none;margin:0;padding:0;justify-self:stretch}
 .terrain-stage-buttons{margin-bottom:16px}
 .terrain-wash{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.92) 45%,rgba(255,255,255,.35) 100%)}
}
@media(max-width:767px){
 body[data-page="home"] .hero.terrain-hero{gap:32px;padding:28px 24px max(32px,env(safe-area-inset-bottom,0px))}
 .terrain-hero .hero-heading{font-size:clamp(36px,10.9vw,64px)}
 .terrain-hero .hero-summary{max-width:none;font-size:16px;line-height:24px;margin-top:20px}
 body[data-page="home"] .hero-copy .hero-action{width:100%;min-height:48px;padding:11px 20px;font-size:16px;line-height:24px;margin-top:20px}
 .terrain-hero .hero-phase{width:100%;max-width:none}
 .terrain-hero .hero-phase p{font-size:17px;line-height:24px}
 .terrain-stage-buttons button{height:44px;min-height:44px}
 .author-profile,.author-profile .author-portrait{width:100%;max-width:none;justify-self:stretch}
 .author-contact{width:100%}
 .connect-channel--email{padding-inline:20px}
 body[data-page="projects"] .work .section-label{padding-block:20px}
}

/* Short phone viewports include the space taken by Safari's visible toolbars.
   Keep natural overflow and touch targets instead of squeezing the bottom stage. */
@media(max-width:767px) and (max-height:700px){
 body[data-page="home"] .hero.terrain-hero{gap:28px;padding-top:24px}
 .terrain-hero .hero-heading{font-size:clamp(32px,min(10.5vw,6svh),44px)}
 .terrain-hero .hero-summary{font-size:15px;line-height:22px}
 body[data-page="home"] .hero-copy .hero-action{margin-top:16px}
}

/* Mobile navigation owns its layout independently of desktop folder styles. */
@media(max-width:1023px) {
 .has-menu .site-header.illustrated-sidebar { position:sticky; top:0; z-index:100; background:#fff; border-bottom-color:var(--line); }
 .has-menu .site-header.illustrated-sidebar .header-inner { padding-block:0; }
 .has-menu .site-header.illustrated-sidebar .header-inner .site-nav {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(5,minmax(88px,1fr));
  grid-auto-flow:row; position:fixed; inset:var(--concept-header-height) 0 0; width:100%; height:calc(100dvh - var(--concept-header-height));
  max-height:none; margin:0; padding:0; gap:0; overflow-y:auto; overscroll-behavior:contain; background:#fff;
  visibility:hidden; pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% 0,0 -45%);
  transition:clip-path 620ms cubic-bezier(.65,0,.25,1),visibility 0s 620ms;
 }
 .has-menu .site-header.illustrated-sidebar .header-inner .site-nav.is-open {
  visibility:visible; pointer-events:auto;
  clip-path:polygon(0 0,100% 0,100% 145%,0 100%);
  transition-delay:0s;
 }
 .has-menu .site-header.illustrated-sidebar .header-inner .site-nav>a.nav-button:nth-child(n) {
  grid-column:1; grid-row:auto; order:0; width:100%; height:auto; min-height:88px; margin:0;
  transform:none; clip-path:none; align-self:stretch; padding:16px 24px; font-size:22px; line-height:28px;
 }
 .has-menu .site-header.illustrated-sidebar .site-nav>a:nth-child(1) { --menu-order:0; }
 .has-menu .site-header.illustrated-sidebar .site-nav>a:nth-child(2) { --menu-order:1; }
 .has-menu .site-header.illustrated-sidebar .site-nav>a:nth-child(3) { --menu-order:2; }
 .has-menu .site-header.illustrated-sidebar .site-nav>a:nth-child(4) { --menu-order:3; }
 .has-menu .site-header.illustrated-sidebar .site-nav>a:nth-child(5) { --menu-order:4; }
 .has-menu .site-header.illustrated-sidebar .site-nav .nav-button-copy,
 .has-menu .site-header.illustrated-sidebar .site-nav .nav-button>.icon {
  opacity:0; transform:translateY(12px);
  transition:opacity 180ms ease,transform 300ms cubic-bezier(.2,.7,.2,1);
 }
 .has-menu .site-header.illustrated-sidebar .site-nav.is-open .nav-button-copy,
 .has-menu .site-header.illustrated-sidebar .site-nav.is-open .nav-button>.icon {
  opacity:1; transform:translateY(0);
  transition-delay:calc(160ms + var(--menu-order,0) * 45ms);
 }
 .has-menu .site-header.illustrated-sidebar .menu-toggle {
  flex:none; width:clamp(64px,20vw,80px); height:var(--concept-header-height); align-self:center;
  margin:0 calc(-1 * var(--gutter)) 0 0; padding:0; gap:0;
  border:0; border-left:1px solid var(--line); justify-content:center;
  display:grid; place-items:center;
 }
 .has-menu .site-header.illustrated-sidebar .menu-toggle:focus-visible { outline-offset:-4px; }
 .menu-icon { display:block; overflow:visible; }
 .menu-icon g { transition:transform 140ms ease 140ms; }
 .menu-icon path { transform-origin:12px 12px; transition:transform 180ms ease,opacity 100ms ease; }
 .menu-icon-top { transform:translateY(-7px); }
 .menu-icon-bottom { transform:translateY(7px); }
 .menu-toggle[aria-expanded="true"] .menu-icon g { transform:translateY(0); transition-delay:0s; }
 .menu-toggle[aria-expanded="true"] .menu-icon-top path { transform:rotate(45deg); transition-delay:120ms; }
 .menu-toggle[aria-expanded="true"] .menu-icon-bottom path { transform:rotate(-45deg); transition-delay:120ms; }
 .menu-icon .menu-icon-middle { transition:transform 140ms ease 140ms,opacity 100ms ease 140ms; }
 .menu-toggle[aria-expanded="true"] .menu-icon-middle { transform:scaleX(0); opacity:0; transition-delay:0s; }
 body.menu-open { overflow:hidden; overscroll-behavior:none; }
}

@media(max-width:1023px) and (prefers-reduced-motion:reduce) {
 .has-menu .site-header.illustrated-sidebar .header-inner .site-nav,
 .has-menu .site-header.illustrated-sidebar .site-nav .nav-button-copy,
 .has-menu .site-header.illustrated-sidebar .site-nav .nav-button>.icon,
 .has-menu .site-header.illustrated-sidebar .menu-toggle .menu-icon g,
 .has-menu .site-header.illustrated-sidebar .menu-toggle .menu-icon path { transition:none; }
}

@media(min-width:768px) and (max-width:1399px){.work-list .project-row-link{padding-inline:16px}}

@media(max-width:1023px) {
 .case-story .next-case-cover { display:none; }
 .case-story .next-case>a { grid-template-columns:minmax(0,1fr) 48px; gap:24px; }
 .case-story .next-case>a>div:first-child { grid-column:1; grid-row:1; }
 .case-story .next-case .round-arrow { grid-column:2; grid-row:1; }
 footer.contact .contact-main { display:flex; flex-direction:column; align-items:flex-start; gap:24px; padding-block:24px 32px; }
 footer.contact .contact-title { font-size:clamp(28px,7.5vw,40px); line-height:1.15; letter-spacing:-.025em; }
 footer.contact .contact-main>.contact-link { align-self:flex-start; justify-self:start; justify-content:flex-start; }
}
/* The project gallery is a two-dimensional repeating field. */
body[data-page="projects"]{overflow:hidden}
.projects-field-page{height:calc(100dvh - var(--concept-header-height,0px));display:flex;flex-direction:column;min-width:0}
.projects-field{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto;overflow-anchor:none;scrollbar-width:none;background:#fff;cursor:grab;touch-action:pan-x pan-y pinch-zoom}
.projects-field::-webkit-scrollbar{display:none}
/* Keep the fallback grid out of the first paint until position is restored. */
@media(scripting:enabled){.projects-field:not(.is-ready){visibility:hidden}}
.projects-field:focus-visible{outline:2px solid #164bff;outline-offset:-3px}
.projects-field-cycle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px;padding:48px}
.is-infinite .projects-field-cycle{display:block;position:absolute;padding:0}
.project-field-card{display:block;min-width:0;color:#111;text-decoration:none}
.is-infinite .project-field-card{position:absolute;width:300px}
.project-field-image{aspect-ratio:3/2;background:#fafafa;overflow:hidden}
.project-field-image img{width:100%;height:100%;object-fit:contain;display:block}
.project-field-caption{display:flex;align-items:baseline;gap:20px;margin-top:18px}
.project-field-caption h2{font-size:21px;line-height:1.3;font-weight:500;margin:0;min-width:0}
.project-field-caption>span{font-size:12px;line-height:20px;color:#636363;margin-left:auto;flex:none}
.project-field-card:hover h2{color:#164bff}
.project-field-card:focus-visible{outline:2px solid #164bff;outline-offset:8px}
.projects-field.is-dragging,.projects-field.is-dragging *{cursor:grabbing;user-select:none}
@media(max-width:599px){
 .projects-field-cycle{grid-template-columns:minmax(0,1fr);gap:80px;padding:32px}
 .is-infinite .project-field-card{width:190px}
 .project-field-caption{gap:10px;margin-top:12px}
 .project-field-caption h2{font-size:16px}
 .project-field-caption>span{font-size:11px}
}
/* Language choices remain available in the desktop sidebar and mobile header. */
.language-switch{display:flex;align-items:center;gap:8px;flex:none;font-size:12px;line-height:20px}
.language-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:#777;text-decoration:none}
.language-switch a[aria-current]{color:#164bff}
.language-switch a:hover{color:#164bff}
.language-switch>span{color:#b3b3b3}
@media(min-width:1024px){
 .language-switch{padding:0 24px;min-height:40px;margin-top:-8px;border-bottom:1px solid var(--line)}
}
@media(max-width:1023px){
 .site-header .header-inner .language-switch{margin-left:auto;margin-right:12px;gap:4px;font-size:11px}
 .site-header .header-inner .brand{min-width:0;gap:8px;font-size:13px;line-height:18px;padding-right:8px}
 .site-header .header-inner .brand img{width:32px;height:auto}
 .site-header .header-inner .brand small{font-size:9px;line-height:14px}
 .has-menu .site-header.illustrated-sidebar .menu-toggle{width:48px}
}
html[lang="en"] .terrain-hero .hero-heading{font-size:clamp(56px,7vw,140px)}
@media(max-width:767px){html[lang="en"] .terrain-hero .hero-heading{font-size:clamp(40px,12vw,64px)}}