:root {
  --ink: #111411;
  --ink-soft: #1b1f1b;
  --paper: #efeee8;
  --paper-dim: #c4c6bc;
  --line: rgba(239, 238, 232, 0.13);
  --acid: #c8d66d;
  --coral: #c88678;
  --blue: #9dbbc0;
  --display: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --serif: "DM Serif Display", Georgia, serif;
  --pad: clamp(1.1rem, 3vw, 3.75rem);
  --ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

* { box-sizing: border-box; }
html { background: var(--ink); color: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); font-family: var(--display); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.is-loading { overflow: hidden; }
body.is-index-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--acid); color: var(--ink); }
.skip-link { position: fixed; z-index: 110; top: 0.75rem; left: 50%; padding: 0.6rem 0.8rem; color: var(--ink); background: var(--acid); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; transform: translate(-50%, -160%); transition: transform 0.2s; }
.skip-link:focus { transform: translate(-50%, 0); outline: 2px solid var(--paper); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 0.71rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.grain { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0.045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.scroll-line { position: fixed; z-index: 31; top: 0; right: 0; width: 3px; height: 100vh; background: rgba(243,241,234,0.07); }
.scroll-line span { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--acid); }

.site-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ink); transition: opacity 0.6s var(--ease), visibility 0.6s; }
.site-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark { position: relative; display: flex; width: 5.5rem; height: 5.5rem; align-items: center; justify-content: center; gap: 0.3rem; }
.loader-mark::before { position: absolute; inset: 0; border: 1px solid var(--line); border-radius: 50%; content: ""; animation: pulse-ring 1.5s ease-in-out infinite; }
.loader-mark span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--acid); animation: loader-dot 0.9s ease-in-out infinite alternate; }
.loader-mark span:nth-child(2) { animation-delay: 0.18s; background: var(--coral); }
.loader-mark span:nth-child(3) { animation-delay: 0.36s; background: var(--blue); }
.loader-meta { position: absolute; right: var(--pad); bottom: var(--pad); left: var(--pad); display: flex; justify-content: space-between; color: var(--paper-dim); }
.loader-meta span:last-child { color: var(--acid); }
@keyframes loader-dot { to { transform: translateY(-0.8rem); } }
@keyframes pulse-ring { 50% { transform: scale(1.12); opacity: 0.3; } }

.cursor { position: fixed; z-index: 50; width: 2.7rem; height: 2.7rem; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.3s; }
.cursor.is-visible { opacity: 1; }
.cursor::before { position: absolute; inset: 0.35rem; border: 1px solid rgba(200,214,109,0.72); border-radius: 48% 52% 57% 43% / 55% 43% 57% 45%; background: radial-gradient(circle at 30% 25%, rgba(245,240,217,0.75) 0 8%, transparent 26%), radial-gradient(circle at 72% 70%, rgba(157,187,192,0.7) 0 12%, transparent 43%), linear-gradient(135deg, rgba(200,134,120,0.82), rgba(157,187,192,0.72)); box-shadow: 0 0 1rem rgba(200,214,109,0.2); content: ""; transform: rotate(-16deg); animation: cursor-liquid 3.8s ease-in-out infinite alternate; }
.cursor::after { position: absolute; top: 0.72rem; left: 1.08rem; width: 0.42rem; height: 0.42rem; border: 1px solid rgba(239,238,232,0.8); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 0.2rem rgba(239,238,232,0.12); content: ""; animation: cursor-glint 2.6s ease-in-out infinite alternate; }
.cursor span::before { position: absolute; top: 1.35rem; left: 0.72rem; width: 0.52rem; height: 0.52rem; border: 1px solid rgba(239,238,232,0.7); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0.2rem rgba(16,17,14,0.2); content: ""; }
.cursor span::after { position: absolute; top: 0.3rem; right: 0.32rem; width: 0.22rem; height: 0.22rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0.13rem rgba(200,214,109,0.13); content: ""; }
@keyframes cursor-liquid { to { border-radius: 62% 38% 43% 57% / 42% 63% 37% 58%; transform: rotate(16deg) scale(1.08); } }
@keyframes cursor-glint { to { transform: translate(0.16rem, 0.12rem) scale(0.78); opacity: 0.62; } }
@media (pointer: coarse) { .cursor { display: none; } }

.topbar { position: fixed; z-index: 40; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(239,238,232,0.08); padding: 1.1rem var(--pad); color: var(--paper); background: linear-gradient(to bottom, rgba(17,20,17,0.86), rgba(17,20,17,0.58)); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: flex-start; gap: 0.6rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; line-height: 1.05; }
.brand-dot, .status-dot { display: inline-block; width: 0.47rem; height: 0.47rem; margin-top: 0.08rem; border-radius: 50%; background: var(--acid); }
.topbar-center { display: flex; align-items: center; gap: 0.55rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.status-dot { width: 0.34rem; height: 0.34rem; margin-top: 0; background: var(--coral); box-shadow: 0 0 0 0.25rem rgba(200,134,120,0.12); }
.topbar-actions { display: flex; align-items: center; gap: 1.35rem; }
.topbar-year { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.index-trigger { display: flex; align-items: center; gap: 0.75rem; border: 0; border-radius: 2rem; padding: 0.6rem 0.8rem 0.6rem 1rem; background: transparent; cursor: pointer; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.index-trigger:hover, .index-trigger:focus-visible { background: var(--paper); color: var(--ink); outline: none; }
.index-icon { display: grid; width: 1.3rem; height: 1.3rem; place-content: center; gap: 0.24rem; border: 1px solid currentColor; border-radius: 50%; }
.index-icon i { display: block; width: 0.55rem; height: 1px; background: currentColor; }
.index-panel { position: fixed; z-index: 39; inset: 0; display: grid; place-items: center; background: rgba(16,17,14,0.94); opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s; }
.index-panel.is-open { opacity: 1; visibility: visible; }
.index-panel-inner { width: min(75rem, calc(100% - 2 * var(--pad))); }
.index-panel-top, .index-panel-bottom { display: flex; justify-content: space-between; color: var(--paper-dim); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.index-panel-top button { border: 0; padding: 0; background: none; color: inherit; cursor: pointer; }
.index-nav { display: grid; margin: 5rem 0 6rem; border-top: 1px solid var(--line); }
.index-nav a { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line); padding: 1.1rem 0; font-size: clamp(2rem, 6vw, 5.5rem); letter-spacing: -0.06em; transition: color 0.25s, padding 0.35s var(--ease); }
.index-nav a span:first-child { color: var(--acid); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; }
.index-nav a em { font-family: var(--display); font-style: normal; font-size: 1.3rem; letter-spacing: 0; }
.index-nav a:hover, .index-nav a:focus-visible { color: var(--acid); padding-left: 1rem; outline: none; }

.section-shell { position: relative; padding: 8rem var(--pad); }
.section-index { color: var(--paper-dim); }
.section-kicker { margin: 0 0 1.5rem; color: var(--acid); font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.08em; text-transform: uppercase; }

.hero { position: relative; z-index: 2; display: flex; min-height: 100svh; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 8rem; padding-bottom: 3.5rem; isolation: isolate; }
.hero-grid { position: absolute; z-index: -3; inset: 0; opacity: 0.11; background-image: linear-gradient(rgba(239,238,232,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(239,238,232,0.07) 1px, transparent 1px); background-size: clamp(2.75rem, 7vw, 7rem) clamp(2.75rem, 7vw, 7rem); mask-image: linear-gradient(to bottom, transparent, black 28%, black 65%, transparent); }
.attention-field { position: fixed; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.hero-orbit { position: absolute; z-index: 0; top: var(--attention-y, 40%); left: var(--attention-x, 82%); width: min(76vw, 68rem); aspect-ratio: 1; border: 1px dashed rgba(239,238,232,0.13); border-radius: 50%; opacity: var(--attention-orbit-opacity, 0.2); transform: translate(-50%, -50%) rotate(var(--attention-orbit-rotate, 0deg)) scale(var(--attention-orbit-scale, 1)); transition: transform 0.35s var(--ease), opacity 0.35s ease; }
.orbit-two { width: min(50vw, 42rem); border-style: solid; border-color: rgba(239,238,232,0.08); }
.hero-orb { position: absolute; z-index: 0; top: var(--attention-y, 40%); left: var(--attention-x, 82%); width: clamp(32rem, 50vw, 56rem); aspect-ratio: 1; filter: saturate(1.16) contrast(1.06) brightness(1.04); opacity: var(--attention-opacity, 0.72); transform: translate(-50%, -50%) rotate(var(--attention-rotate, -2deg)) scale(var(--attention-scale, 1)); transition: transform 0.55s var(--ease), opacity 0.35s ease, filter 0.8s ease; will-change: transform, filter; animation: orb-breathe 7s ease-in-out infinite alternate; }
.orb-svg { position: absolute; z-index: 1; inset: -3%; display: block; width: 106%; height: 106%; overflow: visible; transform-origin: center; filter: drop-shadow(0 0 4rem rgba(241,139,120,0.28)) drop-shadow(0 0 9rem rgba(143,227,235,0.22)); }
.orb-path { vector-effect: non-scaling-stroke; }
.orb-fill { fill: url(#orb-base-gradient); }
.orb-rim { fill: none; stroke: rgba(243,241,234,0.24); stroke-width: 0.32; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; transform: rotate(var(--attention-rim-rotate, 22deg)) scale(var(--attention-rim-scale, 1)); transition: transform 0.8s var(--ease), opacity 0.5s ease; animation: orb-rim 8s ease-in-out infinite alternate; }
.orb-inner { fill: url(#orb-inner-gradient); stroke: rgba(239,238,232,0.28); stroke-width: 0.34; opacity: 0.7; transform-box: fill-box; transform-origin: center; transform: rotate(var(--attention-inner-rotate, -18deg)) scale(var(--attention-inner-scale, 0.96)); filter: blur(0.2px); transition: transform 0.8s var(--ease), opacity 0.5s ease; animation: orb-inner 9s ease-in-out infinite alternate; }
.orb-core { position: absolute; z-index: 4; top: var(--orb-core-y, 58%); left: var(--orb-core-x, 46%); display: block; width: clamp(1.15rem, 1.7vw, 1.6rem); height: clamp(1.15rem, 1.7vw, 1.6rem); border: 1px solid rgba(243,241,234,0.82); border-radius: 50%; background: transparent; box-shadow: 0 0 0 0.62rem rgba(16,17,14,0.18), 0 0 0 1.05rem rgba(239,238,232,0.08); transform: translate(calc(-50% + var(--orb-core-pointer-x, 0px)), calc(-50% + var(--orb-core-pointer-y, 0px))) scale(var(--orb-core-scale, 1)); transition: top 0.7s var(--ease), left 0.7s var(--ease), transform 0.28s var(--ease), box-shadow 0.7s ease; }
.orb-core > i { position: absolute; inset: 0.24rem; display: block; border-radius: 50%; background: var(--ink); animation: core-wander 6.8s ease-in-out infinite; will-change: transform; }
.orb-core::before { position: absolute; inset: -0.42rem; border: 1px dashed rgba(16,17,14,0.48); border-radius: 50%; content: ""; animation: core-ring 3.6s ease-in-out infinite alternate; }
.orb-glint { position: absolute; z-index: 4; top: var(--orb-glint-y, 35%); left: var(--orb-glint-x, 67%); display: block; width: clamp(0.98rem, 1.35vw, 1.3rem); height: clamp(0.98rem, 1.35vw, 1.3rem); border: 1px solid rgba(16,17,14,0.25); border-radius: 50%; background: transparent; opacity: 0.92; transform: translate(calc(-50% + var(--orb-glint-pointer-x, 0px)), calc(-50% + var(--orb-glint-pointer-y, 0px))) scale(var(--orb-glint-scale, 1)); transition: top 0.75s var(--ease), left 0.75s var(--ease), transform 0.28s var(--ease), opacity 0.5s ease; }
.orb-glint > i { position: absolute; inset: 0.24rem; display: block; border-radius: 50%; background: var(--paper); animation: glint-wander 8.6s ease-in-out infinite; will-change: transform, opacity; }
.orb-glint::before { position: absolute; inset: -0.38rem; border: 1px solid rgba(239,238,232,0.45); border-radius: 50%; content: ""; animation: glint-ring 2.8s ease-in-out infinite alternate; }
@keyframes core-wander { 0% { transform: translate(-0.2rem, 0.12rem) scale(0.86); } 50% { transform: translate(0.2rem, -0.16rem) scale(1.12); } 100% { transform: translate(-0.08rem, 0.22rem) scale(0.92); } }
@keyframes glint-wander { 0% { transform: translate(0.16rem, -0.14rem) scale(0.88); opacity: 0.7; } 50% { transform: translate(-0.16rem, 0.16rem) scale(1.15); opacity: 1; } 100% { transform: translate(0.11rem, 0.2rem) scale(0.92); opacity: 0.8; } }
@keyframes orb-breathe { 0% { filter: saturate(1.02) contrast(1.03) brightness(1); } 100% { filter: saturate(1.3) contrast(1.1) brightness(1.06); } }
@keyframes orb-rim { to { transform: rotate(-18deg) scale(1.035); opacity: 0.68; } }
@keyframes orb-inner { to { transform: rotate(24deg) scale(1.04); opacity: 0.7; } }
@keyframes core-ring { to { transform: scale(1.18); opacity: 0.38; } }
@keyframes glint-ring { to { transform: scale(0.72); opacity: 0.28; } }
.hero-kicker { position: absolute; top: 7.8rem; left: var(--pad); color: var(--paper-dim); }
.hero-title-wrap { position: relative; z-index: 1; width: min(80rem, 100%); }
.hero-eyebrow { margin: 0 0 1.25rem 0.3rem; color: var(--paper-dim); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.hero h1 { margin: 0; font-size: clamp(4.4rem, 11vw, 11rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.84; }
.hero h1 > span { display: inline-block; }
.hero h1 span:first-child { color: var(--paper); }
.hero h1 .serif-word, .hero h1 i { color: var(--acid); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.hero h1 i { color: var(--coral); }
.hero-actions { display: flex; gap: 1.2rem; margin-top: 2.1rem; }
.hero-action { display: inline-flex; align-items: center; gap: 0.7rem; border-bottom: 1px solid rgba(239,238,232,0.35); padding-bottom: 0.4rem; color: var(--paper); transition: color 0.25s, border-color 0.25s, transform 0.25s; }
.hero-action span { color: var(--acid); font-size: 0.95rem; transition: transform 0.25s; }
.hero-action-quiet { border-color: var(--line); color: var(--paper-dim); }
.hero-action:hover, .hero-action:focus-visible { border-color: var(--acid); color: var(--paper); outline: none; }
.hero-action:hover span, .hero-action:focus-visible span { transform: translate(0.15rem, -0.15rem); }
.hero-side-note { position: absolute; top: 50%; right: var(--pad); display: flex; flex-direction: column; gap: 0.45rem; color: var(--paper-dim); writing-mode: vertical-rl; transform: translateY(-50%); }
.hero-side-note span:first-child { color: var(--acid); }
.hero-scroll { position: absolute; right: var(--pad); bottom: var(--pad); display: flex; align-items: center; gap: 1rem; color: var(--paper-dim); transition: color 0.25s; }
.hero-scroll:hover, .hero-scroll:focus-visible { color: var(--acid); outline: none; }
.scroll-arrow { font-size: 1rem; }
.hero-caption { position: absolute; bottom: var(--pad); left: var(--pad); display: flex; align-items: baseline; gap: 1.2rem; color: var(--paper-dim); font-size: 0.75rem; }
.caption-label { color: var(--acid); font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.08em; }
.hero-phrase { position: absolute; right: 17%; bottom: 18%; color: rgba(239,238,232,0.09); font-family: var(--serif); font-size: clamp(1.4rem, 2.7vw, 2.7rem); font-style: italic; transform: rotate(-16deg); }
.hero-phrase span { color: var(--acid); }

.hero-title-wrap, .hero-actions,
.intro-layout, .about-field-note, .capabilities, .signal-strip,
.projects-head, .project-evidence, .project-list, .projects-footer,
.practice-top, .practice-grid, .practice-quote,
.timeline-layout, .contact-content, .contact-bottom { position: relative; z-index: 3; }
.hero-kicker, .hero-side-note, .hero-scroll, .hero-caption, .hero-phrase { z-index: 3; }

.subpage-hero { min-height: 58svh; display: flex; flex-direction: column; justify-content: end; background: #111816; }
.subpage-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 8vw; max-width: 90rem; margin: 6rem auto 0; align-items: end; }
.subpage-hero h1 { margin: 0; font-size: clamp(4.2rem, 9vw, 10rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.84; }
.subpage-hero h1 em { color: var(--acid); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.subpage-hero-copy { max-width: 31rem; padding-bottom: 0.55rem; color: var(--paper-dim); font-size: 1rem; }
.subpage-hero-copy .lede { max-width: 28rem; margin: 0 0 1.6rem; color: var(--paper); font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -0.04em; line-height: 1.08; }
.subpage-hero-copy p:last-of-type { margin-bottom: 1.8rem; }
.subpage-hero .work-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--paper-dim); }
.subpage-hero .work-metrics span { border: 1px solid var(--line); padding: 0.45rem 0.55rem; color: var(--acid); font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.08em; }

.home-overview { background: #111816; color: var(--paper); }
.home-overview-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8vw; max-width: 90rem; margin: 6rem auto 5rem; }
.home-overview h2 { margin: 0; font-size: clamp(3.8rem, 7.5vw, 8rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.9; }
.home-overview h2 em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.home-overview-copy { align-self: end; max-width: 34rem; }
.home-overview-copy .lede { max-width: 29rem; margin: 0 0 1.7rem; color: var(--paper); font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -0.04em; line-height: 1.08; }
.home-overview-copy p:not(.lede) { max-width: 31rem; color: #aebbb2; }
.home-overview-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.home-overview-links .text-link { border-color: rgba(239,238,232,0.3); color: var(--paper); }
.home-overview-links .text-link span { color: var(--acid); }
.home-proof-rail { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 90rem; margin: 0 auto; border-top: 1px solid rgba(239,238,232,0.2); border-bottom: 1px solid rgba(239,238,232,0.2); }
.home-proof { min-height: 14rem; padding: 1.1rem 1.2rem 1.3rem; border-right: 1px solid rgba(239,238,232,0.2); }
.home-proof:first-child { padding-left: 0; }
.home-proof:last-child { border-right: 0; }
.home-proof-number { display: block; color: var(--acid); }
.home-proof h3 { margin: 3.5rem 0 0.55rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.045em; }
.home-proof p { max-width: 16rem; margin: 0; color: #aebbb2; font-size: 0.82rem; line-height: 1.45; }
.home-proof a { display: inline-flex; margin-top: 1.1rem; color: var(--paper-dim); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.home-proof a span { margin-left: 0.4rem; color: var(--acid); }
.home-close { display: flex; justify-content: space-between; align-items: end; gap: 2rem; max-width: 90rem; margin: 5rem auto 0; border-top: 1px solid rgba(239,238,232,0.2); padding-top: 1.1rem; }
.home-close p { max-width: 24rem; margin: 0; color: #aebbb2; font-size: 0.84rem; }
.home-close .mono { color: var(--coral); }
.home-overview .section-index { color: #91a39a; }
.home-overview .section-kicker { color: var(--coral); }
.page-cta { display: flex; justify-content: space-between; align-items: end; gap: 2rem; background: #111816; color: var(--paper); }
.page-cta h2 { margin: 1.3rem 0 0; font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.88; }
.page-cta h2 em { color: var(--blue); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.page-cta > .text-link { border-bottom: 1px solid rgba(239,238,232,0.3); padding-bottom: 0.45rem; color: var(--paper); }
.page-cta > .text-link span { color: var(--acid); }

.intro { min-height: 88svh; background: #e7e7e0; color: var(--ink); }
.intro .section-index, .intro .section-kicker { color: #5d5e56; }
.intro .section-kicker { color: #8b402f; }
.intro-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 8vw; max-width: 90rem; margin: 7rem auto 8rem; }
.intro h2, .projects h2, .practice h2, .timeline h2, .contact h2 { margin: 0; font-size: clamp(3.8rem, 7.5vw, 8rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.9; }
.intro h2 em, .projects h2 em, .practice h2 em, .timeline h2 em, .contact h2 em { color: #b85038; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.intro-copy { align-self: end; max-width: 34rem; padding-bottom: 0.5rem; font-size: 1rem; }
.intro-copy .lede { max-width: 27rem; margin: 0 0 2.2rem; font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -0.04em; line-height: 1.08; }
.intro-copy p:not(.lede) { max-width: 30rem; color: #606057; }
.intro-links { display: flex; gap: 1.4rem; margin-top: 2.5rem; }
.text-link { display: inline-flex; align-items: center; gap: 0.65rem; border-bottom: 1px solid rgba(16,17,14,0.3); padding-bottom: 0.3rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.text-link span { color: #b85038; transition: transform 0.25s; }
.text-link:hover span { transform: translate(0.2rem, -0.2rem); }
.about-field-note { display: grid; grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 7vw, 8rem); max-width: 90rem; margin: 0 auto 6.5rem; border-top: 1px solid rgba(16,17,14,0.2); padding-top: 2rem; }
.about-portrait { width: min(15rem, 100%); margin: 0; }
.about-portrait-media { position: relative; overflow: hidden; aspect-ratio: 2 / 3; border: 1px solid rgba(16,17,14,0.28); border-radius: 1.65rem; background: #c6c9bc; box-shadow: 0 1.2rem 3rem rgba(16,17,14,0.14); }
.about-portrait-media::after { position: absolute; inset: 0.38rem; border: 1px solid rgba(16,17,14,0.28); border-radius: 1.3rem; content: ""; pointer-events: none; }
.about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) contrast(0.94); transform: scale(1.02); }
.about-portrait figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.7rem; color: #77786e; font-size: 0.62rem; }
.about-portrait figcaption span:last-child { text-align: right; }
.about-field-note-copy { align-self: end; max-width: 44rem; }
.about-note-label { color: #9b4b38; }
.about-field-note-copy p { max-width: 39rem; margin: 1.4rem 0 2rem; font-size: clamp(1.65rem, 3.2vw, 3.3rem); letter-spacing: -0.07em; line-height: 0.94; }
.about-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; color: #707168; }
.about-facts span { border: 1px solid rgba(16,17,14,0.22); padding: 0.4rem 0.5rem; font-size: 0.56rem; }
.capabilities { max-width: 90rem; margin: 0 auto 6rem; border-top: 1px solid rgba(16,17,14,0.2); }
.capabilities-head { display: flex; justify-content: space-between; align-items: end; gap: 3rem; padding: 2rem 0 3.5rem; }
.capabilities-head > div > .mono { color: #9b4b38; }
.capabilities h3 { margin: 1.3rem 0 0; font-size: clamp(2.8rem, 5.5vw, 5.8rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.9; }
.capabilities h3 em { color: #527c85; font-family: var(--serif); font-style: italic; font-weight: 400; }
.capabilities-head p { width: min(21rem, 35%); margin: 0; color: #606057; font-size: 0.9rem; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(16,17,14,0.28); border-bottom: 1px solid rgba(16,17,14,0.28); }
.capability { min-height: 13rem; padding: 1.2rem 1.2rem 1.5rem; border-right: 1px solid rgba(16,17,14,0.28); }
.capability:nth-child(3n) { border-right: 0; }
.capability:nth-child(-n+3) { border-bottom: 1px solid rgba(16,17,14,0.28); }
.capability:first-child { padding-left: 0; }
.capability:nth-child(3n) { padding-right: 0; }
.capability-number { display: block; color: #9b4b38; }
.capability h4 { margin: 3.3rem 0 0.65rem; font-size: 1.12rem; font-weight: 500; letter-spacing: -0.04em; }
.capability p { max-width: 17rem; margin: 0; color: #5d5e57; font-size: 0.84rem; }
.signal-strip { position: relative; display: flex; align-items: center; gap: 2rem; overflow: hidden; border-top: 1px solid rgba(16,17,14,0.2); border-bottom: 1px solid rgba(16,17,14,0.2); padding: 1.15rem 0; }
.signal-strip-label { flex: 0 0 auto; color: #9b4b38; }
.signal-marquee { display: flex; min-width: 0; overflow: hidden; white-space: nowrap; color: #6d6d62; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.signal-marquee span { flex: 0 0 auto; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

.projects { background: var(--ink); }
.projects-head { display: flex; justify-content: space-between; gap: 4rem; align-items: end; margin: 0 auto 5.5rem; max-width: 90rem; }
.projects-head h2 { margin-top: 3.3rem; }
.projects-note { width: min(19rem, 35%); border-left: 1px solid var(--line); padding: 0.7rem 0 0.7rem 1rem; color: var(--paper-dim); background: rgba(17,20,17,0.14); text-shadow: 0 1px 0 rgba(17,20,17,0.6); }
.projects-note span { color: var(--acid); }
.projects-note p { margin-bottom: 0; font-size: 0.85rem; }
.work-metrics { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin-top: 1.4rem; color: #95a69d; font-size: 0.62rem; }
.work-metrics span { color: #c8d66d; }
.project-evidence { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr); gap: 1.2rem 2.5rem; max-width: 90rem; margin: 0 auto 5.5rem; border-top: 1px solid var(--line); padding-top: 1.35rem; }
.project-evidence-head { display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 3rem; align-items: end; }
.project-evidence-head > div { min-width: 0; }
.project-evidence-head .mono { color: var(--acid); }
.project-evidence-head h3 { margin: 1.2rem 0 0; font-size: clamp(2.3rem, 4vw, 4.4rem); font-weight: 500; letter-spacing: -0.075em; line-height: 0.9; text-shadow: 0 0 1rem rgba(17,20,17,0.6), 0 1px 0 rgba(17,20,17,0.5); }
.project-evidence-head h3 em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.project-evidence-head p { width: min(22rem, 34%); margin: 0; color: var(--paper-dim); font-size: 0.88rem; }
.evidence-aside { display: flex; grid-column: 1 / -1; min-height: 8rem; flex-direction: row; justify-content: space-between; gap: 3rem; align-items: end; border-left: 1px solid var(--line); padding: 0.4rem 0 0.4rem 1.5rem; background: linear-gradient(90deg, rgba(17,20,17,0.18), rgba(17,20,17,0.02)); text-shadow: 0 1px 0 rgba(17,20,17,0.62); }
.evidence-aside > span { color: var(--acid); }
.evidence-aside p { max-width: 18rem; margin: auto 0; color: var(--paper-dim); font-size: clamp(1.25rem, 2.1vw, 1.9rem); letter-spacing: -0.045em; line-height: 1.04; }
.evidence-aside .text-link { align-self: flex-start; border-color: var(--line); color: var(--paper-dim); }
.evidence-aside .text-link span { color: var(--acid); }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; max-width: 90rem; margin: 0 auto; }
.project-card { display: flex; min-height: 32rem; flex-direction: column; overflow: hidden; isolation: isolate; border: 1px solid var(--line); background: var(--ink-soft); transition: border-color 0.5s, transform 0.5s var(--ease); }
.project-card-feature { grid-column: span 2; min-height: auto; }
.project-card:hover, .project-card:focus-visible { border-color: rgba(200,214,109,0.55); outline: none; transform: translateY(-0.35rem); }
.project-card-case { min-height: 37rem; }
.project-art { position: relative; flex: 1; min-height: 21rem; overflow: hidden; }
.art-label { position: absolute; top: 1rem; left: 1rem; z-index: 2; color: rgba(243,241,234,0.75); }
.art-experiments { background: radial-gradient(circle at 72% 35%, rgba(200,134,120,0.65), transparent 18%), radial-gradient(circle at 20% 78%, rgba(157,187,192,0.66), transparent 21%), linear-gradient(132deg, #30372d, #111411 47%, #1b2930); }
.art-experiments::before { position: absolute; inset: 11% 15%; border: 1px solid rgba(200,214,109,0.42); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(200,214,109,0.04), 0 0 0 4.5rem rgba(200,214,109,0.035), 0 0 0 7rem rgba(200,214,109,0.025); content: ""; transform: rotate(-14deg) scaleY(0.7); }
.art-noise { position: absolute; inset: 0; opacity: 0.26; background-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(243,241,234,0.1) 6px), repeating-linear-gradient(90deg, transparent 0 6px, rgba(243,241,234,0.08) 7px); mix-blend-mode: overlay; }
.art-ring { position: absolute; top: 15%; left: 36%; width: 17rem; height: 17rem; border: 1px dashed rgba(243,241,234,0.6); border-radius: 50%; animation: spin 22s linear infinite; }
.ring-b { top: 30%; left: 48%; width: 9rem; height: 9rem; border-style: solid; animation-direction: reverse; animation-duration: 13s; }
.art-cross { position: absolute; top: 45%; left: 51%; color: var(--acid); font-size: 3rem; font-weight: 300; }
.art-word { position: absolute; right: 7%; bottom: 7%; color: var(--paper); font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 600; letter-spacing: -0.09em; line-height: 0.73; text-align: right; }
.art-word em { color: var(--acid); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
@keyframes spin { to { transform: rotate(360deg); } }
.project-card-moth { background: #151b1b; }
.moth-preview { position: relative; padding: clamp(1rem, 2vw, 1.65rem); background: radial-gradient(circle at 84% 18%, rgba(157,187,192,0.16), transparent 28%), linear-gradient(145deg, #1c2827, #101513 62%, #161d20); }
.moth-window-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; border: 1px solid rgba(239,238,232,0.15); border-bottom: 0; padding: 0.7rem 0.85rem; background: rgba(14,18,17,0.78); }
.window-dots { display: flex; gap: 0.35rem; }
.window-dots span { width: 0.45rem; height: 0.45rem; border: 1px solid rgba(239,238,232,0.36); border-radius: 50%; }
.window-dots span:first-child { background: var(--coral); border-color: var(--coral); }
.moth-window-meta { display: flex; min-width: 0; align-items: center; gap: 0.65rem; color: var(--paper-dim); }
.moth-window-meta .mono { font-size: 0.62rem; }
.moth-status-dot { width: 0.4rem; height: 0.4rem; flex: 0 0 auto; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0.25rem rgba(200,214,109,0.1); }
.moth-window-path { overflow: hidden; color: rgba(239,238,232,0.42); text-overflow: ellipsis; white-space: nowrap; }
.window-open { color: var(--acid); font-size: 0.62rem; letter-spacing: 0.08em; transition: color 0.25s, transform 0.25s; }
.window-open:hover, .window-open:focus-visible { color: var(--paper); outline: none; transform: translate(0.15rem, -0.15rem); }
.moth-viewport { position: relative; overflow: hidden; aspect-ratio: 16 / 8.6; border: 1px solid rgba(239,238,232,0.15); background: #0d1117; }
.moth-viewport::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.04); pointer-events: none; content: ""; }
.moth-viewport iframe { display: block; width: 100%; height: 100%; border: 0; background: #0d1117; }
.moth-preview-note { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.7rem; color: rgba(239,238,232,0.58); font-size: 0.62rem; }
.moth-preview-note span:first-child { color: var(--acid); }
.project-art-image { min-height: 21rem; background: #d9ded6; }
.project-art-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(0.84) contrast(1.04); transition: transform 0.8s var(--ease), filter 0.5s ease; }
.project-card:hover .project-art-image img, .project-card:focus-visible .project-art-image img { filter: saturate(1) contrast(1.06); transform: scale(1.035); }
.project-art-image-wash { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,20,17,0.06), rgba(17,20,17,0.48)); pointer-events: none; }
.project-art-image .case-art-label { right: 1rem; color: var(--paper); text-align: right; text-shadow: 0 1px 1rem rgba(0,0,0,0.38); }
.art-photo { background: linear-gradient(145deg, #c88678 0%, #8d5a50 38%, #162d30 39%, #223c3d 100%); }
.photo-sun { position: absolute; top: 10%; right: 9%; width: 10rem; height: 10rem; border-radius: 50%; background: var(--acid); box-shadow: -3rem 3rem 0 rgba(200,134,120,0.2); }
.photo-frame { position: absolute; top: 18%; left: 16%; display: flex; width: 58%; height: 67%; flex-direction: column; justify-content: space-between; border: 1px solid rgba(243,241,234,0.7); padding: 1rem; color: var(--paper); transform: rotate(-7deg); }
.photo-frame span, .photo-frame small { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; }
.photo-frame b { font-size: clamp(2.7rem, 6vw, 6rem); letter-spacing: -0.1em; line-height: 0.7; }
.project-info { position: relative; display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem 1.4rem 1.25rem; background: var(--ink-soft); }
.project-info-feature { align-items: flex-end; padding-top: 1.75rem; padding-bottom: 1.65rem; }
.project-info-case { align-items: flex-start; min-height: 17rem; }
.project-card-copy { min-width: 0; flex: 1 1 auto; }
.project-number { display: block; margin-bottom: 0.7rem; color: var(--acid); }
.project-info h3 { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 500; letter-spacing: -0.04em; }
.project-info h3 span { color: var(--paper-dim); font-size: 0.72em; font-weight: 400; letter-spacing: 0; }
.project-info p { max-width: 30rem; margin: 0; color: var(--paper-dim); font-size: 0.86rem; }
.project-bullets { max-width: 35rem; margin: 1rem 0 0; padding-left: 1.05rem; color: #aebbb2; font-size: 0.76rem; line-height: 1.48; }
.project-bullets li { margin: 0.42rem 0; padding-left: 0.12rem; }
.project-bullets li::marker { color: var(--acid); }
.project-info .project-origin { display: flex; max-width: 34rem; align-items: baseline; gap: 0.5rem; margin-top: 0.85rem; color: #d1d6ad; font-family: var(--serif); font-size: 1.08rem; line-height: 1.05; }
.project-origin-label { flex: 0 0 auto; color: var(--acid); font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.08em; }
.project-info-side { display: flex; flex: 0 0 auto; align-items: flex-end; flex-direction: column; gap: 1.2rem; }
.project-stack { display: flex; max-width: 17rem; align-items: flex-end; flex-direction: column; gap: 0.35rem; color: var(--paper-dim); font-size: 0.61rem; letter-spacing: 0.07em; line-height: 1.45; text-align: right; }
.project-stack span:first-child { color: var(--acid); }
.project-tags { display: flex; align-self: end; gap: 0.45rem; color: var(--paper-dim); }
.project-tags span { border: 1px solid var(--line); padding: 0.35rem 0.45rem; font-size: 0.61rem; }
.project-actions { display: flex; gap: 1rem; }
.project-actions .text-link { border-color: var(--line); color: var(--paper-dim); }
.project-actions .text-link span { color: var(--acid); }
.project-actions .text-link:hover, .project-actions .text-link:focus-visible { color: var(--paper); outline: none; }
.project-arrow { position: absolute; top: 1.3rem; right: 1.35rem; color: var(--acid); font-size: 1.3rem; opacity: 0; transition: opacity 0.25s, transform 0.25s; }
.project-card:hover .project-arrow, .project-card:focus-visible .project-arrow { opacity: 1; transform: translate(0.2rem, -0.2rem); }
.case-art { min-height: 17rem; isolation: isolate; background: #172322; }
.case-art::before { position: absolute; inset: 0; z-index: -2; content: ""; opacity: 0.7; }
.case-art::after { position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(239,238,232,0.08); content: ""; }
.case-art-grid { position: absolute; inset: 0; opacity: 0.32; background-image: linear-gradient(rgba(239,238,232,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(239,238,232,0.08) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(to bottom right, black, transparent 82%); }
.case-art-label { position: absolute; top: 1rem; left: 1rem; z-index: 2; color: rgba(239,238,232,0.72); }
.case-art-mark { position: absolute; top: 42%; left: 8%; color: var(--acid); font-size: clamp(5rem, 12vw, 10rem); font-weight: 500; letter-spacing: -0.1em; line-height: 0.75; }
.case-art-metric { position: absolute; right: 1.2rem; bottom: 1rem; z-index: 2; display: flex; align-items: baseline; gap: 0.55rem; color: var(--paper); font-family: var(--mono); text-align: right; }
.case-art-metric strong { color: var(--acid); font-family: var(--display); font-size: clamp(2.2rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -0.09em; line-height: 0.8; }
.case-art-metric span { color: rgba(239,238,232,0.62); font-size: 0.57rem; letter-spacing: 0.08em; line-height: 1.3; }
.case-art-wave { position: absolute; right: 8%; bottom: 27%; width: 66%; height: 27%; border-top: 1px solid rgba(200,214,109,0.7); border-radius: 50%; transform: rotate(-8deg) skewX(-22deg); box-shadow: 0 -1.3rem 0 rgba(157,187,192,0.42), 0 -2.6rem 0 rgba(200,134,120,0.22); }
.case-art-ryuo::before { background: radial-gradient(circle at 70% 22%, rgba(157,187,192,0.5), transparent 26%), radial-gradient(circle at 35% 82%, rgba(200,134,120,0.48), transparent 29%), linear-gradient(135deg, #263b39, #121817 66%); }
.case-art-ryuo .case-art-mark { color: #c8d66d; }
.case-art-latent::before { background: radial-gradient(circle at 74% 42%, rgba(157,187,192,0.6), transparent 25%), linear-gradient(145deg, #2c3a44, #161b21 58%, #2d242b); }
.case-art-latent .case-art-mark { color: #9dbbc0; }
.case-art-transfer { position: absolute; top: 31%; right: 12%; display: flex; width: 49%; justify-content: space-between; align-items: center; transform: rotate(-7deg); }
.case-art-transfer::before { position: absolute; top: 50%; right: 0; left: 0; border-top: 1px dashed rgba(239,238,232,0.52); content: ""; }
.case-art-transfer i { position: relative; z-index: 1; width: 0.8rem; height: 0.8rem; border: 1px solid var(--paper); border-radius: 50%; background: #1d292c; }
.case-art-transfer i:nth-child(2) { background: var(--coral); }
.case-art-transfer i:nth-child(3) { background: var(--blue); }
.case-art-transfer i:nth-child(4) { background: var(--acid); }
.case-art-sharper::before { background: radial-gradient(circle at 82% 24%, rgba(200,214,109,0.34), transparent 22%), linear-gradient(135deg, #26332c, #111512 62%, #1d2a2b); }
.case-art-sharper .case-art-mark { color: #d4de9a; }
.case-art-board { position: absolute; top: 24%; right: 10%; display: grid; width: 45%; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(239,238,232,0.25); transform: rotate(6deg); }
.case-art-board span { min-height: 3.8rem; border-right: 1px solid rgba(239,238,232,0.18); padding: 0.65rem 0.45rem; color: rgba(239,238,232,0.7); font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; }
.case-art-board span:last-child { border-right: 0; color: var(--acid); }
.case-art-cursor { position: absolute; top: 49%; right: 27%; color: var(--coral); font-size: 3rem; transform: rotate(16deg); }
.case-art-jobhunt::before { background: radial-gradient(circle at 75% 30%, rgba(200,134,120,0.58), transparent 23%), radial-gradient(circle at 20% 76%, rgba(157,187,192,0.34), transparent 25%), linear-gradient(145deg, #302c3b, #121518 63%); }
.case-art-jobhunt .case-art-mark { color: #d5c8e0; }
.case-art-pipeline { position: absolute; right: 9%; bottom: 29%; display: flex; width: 56%; justify-content: space-between; align-items: center; }
.case-art-pipeline::before { position: absolute; right: 0; left: 0; border-top: 1px solid rgba(239,238,232,0.36); content: ""; }
.case-art-pipeline span { position: relative; width: 0.7rem; height: 0.7rem; border: 1px solid var(--paper); border-radius: 50%; background: #1e1b28; }
.case-art-pipeline span:nth-child(2), .case-art-pipeline span:nth-child(4) { background: var(--coral); }
.case-art-pipeline span:last-child { background: var(--acid); }
.case-art-research::before { background: radial-gradient(circle at 74% 25%, rgba(157,187,192,0.52), transparent 26%), linear-gradient(145deg, #1b3030, #121817 64%, #252c24); }
.case-art-research .case-art-mark { color: #9dbbc0; font-size: clamp(3.7rem, 8vw, 7rem); }
.case-art-research .case-art-wave { border-color: rgba(157,187,192,0.8); box-shadow: 0 -1.3rem 0 rgba(200,214,109,0.46), 0 -2.6rem 0 rgba(200,134,120,0.2); }
.projects-footer { display: flex; align-items: center; gap: 1rem; max-width: 90rem; margin: 2.5rem auto 0; color: var(--paper-dim); }
.projects-footer span:last-child { color: var(--acid); }
.footer-rule { flex: 1; height: 1px; background: var(--line); }

@media (max-width: 1100px) {
  .project-info-case { flex-direction: column; gap: 1.5rem; }
  .project-card-copy { width: 100%; }
  .project-info-case .project-info-side { width: 100%; align-items: flex-start; }
  .project-info-case .project-stack { max-width: 100%; align-items: flex-start; text-align: left; }
  .project-info-case .project-tags { position: static; align-self: flex-start; }
}

.practice { background: #c8d1b8; color: var(--ink); }
.practice .section-index { color: #67711d; }
.practice .section-kicker { color: #4f5c13; }
.practice-top { display: flex; justify-content: space-between; gap: 3rem; align-items: end; max-width: 90rem; margin: 5rem auto 5.5rem; }
.practice-top p { width: min(21rem, 35%); margin: 0; color: #4c5615; font-size: 0.95rem; }
.practice h2 em { color: #a24e3c; }
.practice-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(16,17,14,0.45); border-bottom: 1px solid rgba(16,17,14,0.45); max-width: 90rem; margin: 0 auto; }
.practice-step { min-height: 22rem; padding: 1.2rem 1.2rem 1.4rem; border-right: 1px solid rgba(16,17,14,0.45); }
.practice-step:first-child { padding-left: 0; }
.practice-step:last-child { border-right: 0; }
.step-number { display: block; color: #67711d; font-family: var(--mono); font-size: 0.7rem; }
.step-symbol { display: block; margin: 4.7rem 0 2.6rem; color: #a24e3c; font-family: var(--serif); font-size: 4rem; line-height: 0.6; }
.practice-step h3 { margin: 0 0 0.65rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.05em; }
.practice-step p { max-width: 15rem; margin: 0; color: #4b5417; font-size: 0.86rem; }
.practice-quote { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 1rem; max-width: 90rem; margin: 7rem auto 0; }
.quote-mark { color: #a24e3c; font-family: var(--serif); font-size: 6rem; line-height: 0.4; }
.practice-quote p { max-width: 44rem; margin: 0; font-size: clamp(1.5rem, 3.5vw, 3.5rem); letter-spacing: -0.05em; line-height: 0.98; }
.quote-attribution { color: #67711d; }

.timeline { background: var(--paper); color: var(--ink); }
.timeline .section-index { color: #6d6d62; }
.timeline-layout { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 8vw; max-width: 90rem; margin: 7rem auto 0; }
.timeline h2 em { color: #527c85; }
.timeline-list { border-top: 1px solid rgba(16,17,14,0.25); }
.timeline-item { display: grid; grid-template-columns: 7rem 1fr; gap: 2rem; border-bottom: 1px solid rgba(16,17,14,0.25); padding: 1.4rem 0 1.5rem; }
.timeline-date { color: #7a7b70; }
.timeline-item h3 { margin: 0 0 0.3rem; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.04em; }
.timeline-item p { margin: 0 0 1.15rem; color: #527c85; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; }
.timeline-item span:last-child { color: #62635d; font-size: 0.84rem; }

.contact { display: flex; min-height: 95svh; flex-direction: column; overflow: hidden; background: #d7ded9; color: var(--ink); }
.contact .section-index { color: #5c6e68; }
.contact .section-kicker { color: #527c85; }
.contact-content { position: relative; z-index: 1; margin: auto 0; }
.contact h2 em { color: #527c85; }
.contact-copy { max-width: 23rem; margin: 2.4rem 0 2rem; color: #52645e; font-size: 0.95rem; }
.contact-email { display: inline-flex; gap: 1.2rem; align-items: center; border-bottom: 1px solid rgba(16,17,14,0.5); padding-bottom: 0.45rem; font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.5rem); letter-spacing: 0.02em; }
.contact-email span { color: #527c85; font-size: 1.3rem; transition: transform 0.25s; }
.contact-email:hover span { transform: translate(0.2rem, -0.2rem); }
.contact-bottom { display: flex; justify-content: space-between; align-items: center; color: #52645e; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; }
.contact-bottom div { display: flex; flex-wrap: wrap; gap: 1.2rem; border: 1px solid rgba(239,238,232,0.2); padding: 0.5rem 0.7rem; background: rgba(17,20,17,0.42); backdrop-filter: blur(8px); }
.contact-bottom a:hover, .contact-bottom a:focus-visible { color: var(--paper); outline: none; }

/* The portfolio stays mostly dark; lightness comes from tonal panels and signal colors. */
.intro { background: #111816; color: var(--paper); }
.intro .section-index { color: #91a39a; }
.intro .section-kicker { color: var(--coral); }
.intro h2 em { color: #d98673; }
.intro-copy p:not(.lede) { color: #aebbb2; }
.about-field-note, .capabilities, .signal-strip { border-color: rgba(239,238,232,0.18); }
.about-portrait-media { border-color: rgba(239,238,232,0.3); box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.22); }
.about-portrait-media::after { border-color: rgba(239,238,232,0.34); }
.about-portrait figcaption { color: #91a39a; }
.about-note-label, .capabilities-head > div > .mono, .signal-strip-label { color: var(--coral); }
.about-facts { color: #aebbb2; }
.about-facts span { border-color: rgba(239,238,232,0.22); }
.capabilities, .capability { background: #111816; }
.capabilities-head p, .capability p { color: #aebbb2; }
.capabilities h3 em { color: #9dbbc0; }
.capability-grid, .intro .capability, .signal-strip { border-color: rgba(239,238,232,0.2); }
.capability-number { color: var(--acid); }
.intro .text-link { border-color: rgba(239,238,232,0.3); color: var(--paper); }
.intro .text-link span { color: var(--coral); }
.intro .signal-marquee { color: #91a39a; }

.practice { background: #151d19; color: var(--paper); }
.practice .section-index { color: #c8d66d; }
.practice .section-kicker { color: #d98673; }
.practice h2 em, .step-symbol, .quote-mark { color: #d98673; }
.practice-top p, .practice-step p { color: #aebbb2; }
.practice-grid, .practice-step { border-color: rgba(239,238,232,0.24); }
.step-number, .quote-attribution { color: #c8d66d; }

.timeline { background: #0f1516; color: var(--paper); }
.timeline .section-index { color: #91a39a; }
.timeline h2 em { color: #9dbbc0; }
.timeline-list, .timeline-item { border-color: rgba(239,238,232,0.2); }
.timeline-date { color: #91a39a; }
.timeline-item p { color: #9dbbc0; }
.timeline-item span:last-child { color: #aebbb2; }

.contact { background: #172523; color: var(--paper); }
.contact .section-index { color: #9dbbc0; }
.contact .section-kicker { color: #c8d66d; }
.contact h2 em { color: #9dbbc0; }
.contact-copy, .contact-bottom { color: #aebbb2; }
.contact-email { border-color: rgba(239,238,232,0.55); }
.contact-email span { color: #9dbbc0; }

.footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--pad); color: var(--paper-dim); background: var(--ink); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em; }
.footer a:hover, .footer a:focus-visible { color: var(--acid); outline: none; }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .topbar-center, .topbar-year { display: none; }
  .hero-orb { width: 23rem; }
  .hero-orbit { width: 48rem; }
  .hero h1 { font-size: clamp(4rem, 14vw, 8rem); }
  .subpage-hero-grid, .home-overview-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .subpage-hero-copy { max-width: 34rem; }
  .intro-layout, .timeline-layout { grid-template-columns: 1fr; gap: 4rem; }
  .intro-copy { max-width: 32rem; }
  .about-field-note { grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.45fr); gap: 3rem; }
  .capabilities-head { align-items: start; flex-direction: column; }
  .capabilities-head p { width: min(22rem, 100%); }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .capability:nth-child(3n) { border-right: 1px solid rgba(16,17,14,0.28); padding-right: 1.2rem; }
  .capability:nth-child(2n) { border-right: 0; padding-right: 0; }
  .capability:nth-child(-n+3) { border-bottom: 0; }
  .capability:nth-child(-n+4) { border-bottom: 1px solid rgba(16,17,14,0.28); }
  .capability:nth-child(3) { padding-left: 0; }
  .projects-head { align-items: start; flex-direction: column; }
  .projects-note { width: min(22rem, 100%); }
  .project-evidence-head { align-items: start; flex-direction: column; gap: 1rem; }
  .project-evidence-head p { width: min(22rem, 100%); }
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .practice-step:nth-child(2) { border-right: 0; }
  .practice-step:nth-child(-n+2) { border-bottom: 1px solid rgba(16,17,14,0.45); }
  .practice-step:nth-child(3) { padding-left: 0; }
  .practice-top { align-items: start; flex-direction: column; }
  .practice-top p { width: min(22rem, 100%); }
}

@media (max-width: 620px) {
  :root { --pad: 1.1rem; }
  .section-shell { padding-top: 5.5rem; padding-bottom: 5.5rem; }
  .topbar { padding-top: 0.85rem; }
  .brand { font-size: 0.62rem; }
  .hero { min-height: 94svh; padding-top: 6rem; }
  .hero-kicker { top: 5.6rem; font-size: 0.62rem; }
  .hero h1 { font-size: clamp(3.7rem, 18vw, 6rem); line-height: 0.86; }
.hero h1 .serif-word, .hero h1 i { letter-spacing: -0.025em; }
  .hero-orb { width: 18rem; }
  .hero-orbit { width: 30rem; }
  .hero-side-note { display: none; }
  .hero-actions { gap: 0.85rem; margin-top: 1.6rem; }
  .hero-caption { bottom: 4.2rem; font-size: 0.67rem; }
  .hero-scroll { right: auto; bottom: 1.1rem; left: var(--pad); }
  .hero-phrase { right: 8%; bottom: 23%; font-size: 1.3rem; }
  .subpage-hero { min-height: 72svh; padding-top: 7rem; }
  .subpage-hero-grid { gap: 2.5rem; margin-top: 4rem; }
  .subpage-hero h1 { font-size: clamp(3.7rem, 17vw, 6.2rem); }
  .home-overview-grid { gap: 3rem; margin-top: 4rem; margin-bottom: 4rem; }
  .home-overview h2 { font-size: clamp(3.6rem, 17vw, 6.2rem); }
  .home-proof-rail { grid-template-columns: 1fr; }
  .home-proof, .home-proof:first-child { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(239,238,232,0.2); padding: 1.2rem 0 1.6rem; }
  .home-proof:last-child { border-bottom: 0; }
  .home-proof h3 { margin-top: 2.2rem; }
  .home-close { align-items: flex-start; flex-direction: column; gap: 1rem; margin-top: 4rem; }
  .page-cta { align-items: flex-start; flex-direction: column; gap: 2.2rem; }
  .intro-layout { margin-top: 4rem; margin-bottom: 5rem; }
  .intro h2, .projects h2, .practice h2, .timeline h2, .contact h2 { font-size: clamp(3.6rem, 17vw, 6.2rem); }
  .about-field-note { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 5rem; }
  .about-portrait { width: min(11rem, 55vw); }
  .about-portrait figcaption { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .about-portrait figcaption span:last-child { text-align: left; }
  .about-field-note-copy p { font-size: clamp(1.7rem, 8vw, 2.6rem); }
  .capabilities { margin-bottom: 5rem; }
  .capabilities-head { padding-bottom: 2.5rem; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability, .capability:nth-child(3n), .capability:nth-child(2n) { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(16,17,14,0.28); padding: 1.2rem 0 1.6rem; }
  .capability:first-child, .capability:nth-child(3) { padding-left: 0; }
  .capability:last-child { border-bottom: 0; }
  .capability h4 { margin-top: 2.2rem; }
  .project-evidence { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 4rem; }
  .evidence-aside { min-height: 15rem; flex-direction: column; align-items: stretch; border-top: 1px solid var(--line); border-left: 0; padding: 1.1rem 0 0; }
  .project-list { grid-template-columns: 1fr; }
  .project-card-feature { grid-column: auto; }
  .project-card { min-height: 30rem; }
  .project-art { min-height: 19rem; }
  .project-info { min-height: 9rem; padding: 1.1rem; }
  .project-info-feature { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .project-info-case { flex-direction: column; gap: 1.5rem; }
  .project-card-copy { width: 100%; }
  .project-info-side { width: 100%; align-items: flex-start; }
  .project-stack { align-items: flex-start; text-align: left; }
  .project-info-case .project-stack { max-width: 100%; align-items: flex-start; text-align: left; }
  .project-info-case .project-tags { position: static; align-self: flex-start; }
  .project-actions { gap: 0.8rem; }
  .project-info h3 { padding-right: 1.5rem; font-size: 1rem; }
  .project-tags { position: absolute; right: 1.1rem; bottom: 1.1rem; }
  .project-tags span { font-size: 0.56rem; }
  .project-info-feature .project-tags { position: static; }
  .moth-viewport { aspect-ratio: auto; height: clamp(22rem, 92vw, 27rem); }
  .moth-window-path { display: none; }
  .moth-preview-note { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-step, .practice-step:nth-child(3) { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(16,17,14,0.45); padding: 1.2rem 0 1.6rem; }
  .practice-step:last-child { border-bottom: 0; }
  .step-symbol { margin: 2.2rem 0 1.3rem; }
  .practice-quote { grid-template-columns: auto 1fr; margin-top: 4rem; }
  .quote-attribution { grid-column: 2; }
  .timeline-layout { margin-top: 4rem; }
  .timeline-item { grid-template-columns: 1fr; gap: 0.6rem; }
  .timeline-date { font-size: 0.65rem; }
  .contact { min-height: 88svh; }
  .contact-bottom { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
  .footer { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .index-nav { margin: 4rem 0; }
  .index-nav a { grid-template-columns: 2rem 1fr auto; font-size: 2.6rem; }
}

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

/* Concise homepage: identity, proof, context, contact. */
.compact-topnav { display: flex; align-items: center; gap: 0.9rem; color: var(--paper-dim); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em; }
.compact-topnav a { transition: color 0.2s; }
.compact-topnav a:hover, .compact-topnav a:focus-visible { color: var(--acid); outline: none; }
.hero-hero-layout { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.72fr); align-items: center; gap: 7vw; width: min(92rem, 100%); margin: 0 auto; }
.hero-summary { max-width: 31rem; margin: 1.8rem 0 0; color: var(--paper-dim); font-size: clamp(1.02rem, 1.45vw, 1.35rem); letter-spacing: -0.025em; line-height: 1.25; }
.hero-profile { width: min(22rem, 100%); margin: 0 0 0 auto; }
.hero-profile-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(239,238,232,0.34); border-radius: 2rem; background: #182222; box-shadow: 0 1.7rem 4rem rgba(0,0,0,0.28); }
.hero-profile-frame::before { position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(239,238,232,0.18); border-radius: 1.7rem; content: ""; pointer-events: none; }
.hero-profile-frame::after { position: absolute; z-index: 1; right: 0.9rem; bottom: 0.9rem; width: 0.62rem; height: 0.62rem; border: 1px solid var(--paper); border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 0.35rem rgba(200,214,109,0.14); content: ""; }
.hero-profile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.76) contrast(1.02); transform: scale(1.02); }
.hero-profile figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.7rem; color: #91a39a; font-size: 0.57rem; }
.hero-profile figcaption span:last-child { color: var(--acid); text-align: right; }
.quick-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-top: 1px solid rgba(239,238,232,0.2); border-bottom: 1px solid rgba(239,238,232,0.2); padding-top: 1.1rem; padding-bottom: 1.25rem; background: #111816; color: var(--paper); }
.quick-proof-item { display: flex; align-items: baseline; gap: 0.65rem; border-right: 1px solid rgba(239,238,232,0.16); padding-right: 1rem; }
.quick-proof-item:last-child { border-right: 0; }
.quick-proof-item strong { color: var(--acid); font-size: clamp(1.5rem, 3vw, 2.7rem); font-weight: 500; letter-spacing: -0.09em; line-height: 0.85; }
.quick-proof-item span { color: #91a39a; font-size: 0.57rem; line-height: 1.2; }
.compact-work { background: #111816; color: var(--paper); }
.compact-work-head { display: flex; position: relative; z-index: 3; justify-content: space-between; gap: 4rem; align-items: end; max-width: 92rem; margin: 0 auto 4rem; }
.compact-work h2, .compact-about h2, .compact-contact h2 { margin: 1.3rem 0 0; font-size: clamp(3.7rem, 7vw, 7.4rem); font-weight: 500; letter-spacing: -0.08em; line-height: 0.86; }
.compact-work h2 em, .compact-about h2 em, .compact-contact h2 em { color: var(--coral); font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.025em; }
.compact-work .section-index { color: #91a39a; }
.compact-work-intro { width: min(24rem, 37%); color: var(--paper-dim); font-size: 0.88rem; }
.compact-work-intro p { margin: 0 0 1.3rem; }
.compact-work-intro .text-link { border-color: rgba(239,238,232,0.28); color: var(--paper); }
.compact-work-intro .text-link span { color: var(--acid); }
.compact-project-grid { display: grid; position: relative; z-index: 3; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; max-width: 92rem; margin: 0 auto; }
.compact-project { position: relative; display: flex; min-height: 25rem; flex-direction: column; overflow: hidden; border: 1px solid rgba(239,238,232,0.16); background: #172120; transition: border-color 0.35s, transform 0.35s var(--ease); }
.compact-project:hover, .compact-project:focus-within { border-color: rgba(200,214,109,0.58); transform: translateY(-0.3rem); }
.compact-project-feature { grid-column: span 8; display: grid; grid-template-columns: 1.05fr 0.95fr; min-height: 25rem; }
.compact-project-research, .compact-project-systems, .compact-project-platform { grid-column: span 4; }
.compact-project-art { min-height: 100%; background: #101819; }
.compact-window-bar { display: flex; align-items: center; gap: 0.65rem; border-bottom: 1px solid rgba(239,238,232,0.14); padding: 0.75rem 0.85rem; color: #91a39a; }
.compact-window-bar > span:last-child { margin-left: auto; color: var(--acid); }
.window-dots { display: flex; gap: 0.25rem; }
.window-dots i { display: block; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--coral); }
.window-dots i:nth-child(2) { background: var(--acid); }
.window-dots i:nth-child(3) { background: var(--blue); }
.compact-moth-screen { display: flex; min-height: 20rem; flex-direction: column; justify-content: end; padding: 1.3rem; background: radial-gradient(circle at 72% 25%, rgba(213,227,111,0.16), transparent 24%), radial-gradient(circle at 22% 78%, rgba(143,216,220,0.18), transparent 30%), linear-gradient(145deg, #263b37, #0d1415 64%); }
.compact-moth-screen > span { color: var(--acid); }
.compact-moth-screen strong { margin-top: auto; color: var(--paper); font-size: clamp(2.4rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -0.09em; line-height: 0.8; }
.compact-moth-screen small { margin-top: 1.5rem; color: #aebbb2; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.07em; }
.compact-project-copy { display: flex; position: relative; z-index: 1; flex: 1; flex-direction: column; padding: 1.2rem; }
.compact-project-feature .compact-project-copy { min-width: 0; }
.compact-project-copy .project-number { color: var(--acid); }
.compact-project-copy h3 { margin: 0.85rem 0 0.5rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.055em; }
.compact-project-copy h3 span { display: block; color: var(--paper-dim); font-size: 0.7em; letter-spacing: -0.02em; }
.compact-project-copy p { margin: 0; color: #aebbb2; font-size: 0.8rem; line-height: 1.42; }
.compact-project-copy ul { margin: 1rem 0 0; padding-left: 1rem; color: #aebbb2; font-size: 0.72rem; line-height: 1.45; }
.compact-project-copy li { margin: 0.35rem 0; }
.compact-project-copy li::marker { color: var(--coral); }
.compact-project-footer { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-top: auto; padding-top: 1rem; color: #91a39a; font-size: 0.55rem; }
.compact-project-footer .text-link, .compact-project-copy > .text-link { border-bottom: 1px solid rgba(239,238,232,0.27); padding-bottom: 0.25rem; color: var(--paper); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.compact-project-footer .text-link span, .compact-project-copy > .text-link span { color: var(--acid); }
.compact-project-research { min-height: 25rem; background: radial-gradient(circle at 77% 22%, rgba(143,216,220,0.25), transparent 30%), linear-gradient(145deg, #1b3030, #101819 67%); }
.compact-card-label { position: absolute; z-index: 1; top: 1rem; left: 1rem; color: #91a39a; }
.compact-art-mark { position: absolute; top: 4.2rem; left: 1rem; color: var(--blue); font-family: var(--serif); font-size: clamp(4rem, 7vw, 6.5rem); font-style: italic; letter-spacing: -0.1em; line-height: 0.7; }
.compact-project-research > strong { position: absolute; top: 5.2rem; right: 1.1rem; color: var(--acid); font-size: clamp(2.5rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -0.1em; line-height: 0.8; }
.compact-art-meta { position: absolute; top: 10.2rem; right: 1.1rem; color: #aebbb2; font-size: 0.55rem; line-height: 1.3; text-align: right; }
.compact-wave { position: absolute; top: 13.3rem; right: 12%; width: 72%; height: 2.5rem; border-top: 1px solid var(--acid); border-radius: 50%; transform: rotate(-8deg) skewX(-24deg); box-shadow: 0 -1rem 0 rgba(143,216,220,0.38), 0 -2rem 0 rgba(237,150,126,0.2); }
.compact-project-research .compact-project-copy { margin-top: 13.5rem; background: rgba(16,24,25,0.76); }
.compact-project-systems { background: radial-gradient(circle at 72% 22%, rgba(143,216,220,0.25), transparent 25%), linear-gradient(145deg, #263b39, #101718 65%); }
.compact-system-mark { margin: 5rem 1.1rem 1rem; color: var(--acid); font-family: var(--serif); font-size: clamp(4.5rem, 8vw, 7rem); font-style: italic; letter-spacing: -0.12em; line-height: 0.7; }
.compact-system-line { display: flex; position: relative; justify-content: space-between; align-items: center; margin: 1rem 1.1rem 0; }
.compact-system-line::before { position: absolute; right: 0; left: 0; border-top: 1px dashed rgba(239,238,232,0.35); content: ""; }
.compact-system-line i { position: relative; width: 0.7rem; height: 0.7rem; border: 1px solid var(--paper); border-radius: 50%; background: var(--coral); }
.compact-system-line i:nth-child(2) { background: var(--blue); }
.compact-system-line i:nth-child(3) { background: var(--acid); }
.compact-project-platform { background: radial-gradient(circle at 77% 24%, rgba(200,214,109,0.22), transparent 27%), linear-gradient(145deg, #26332c, #101615 65%); }
.compact-platform-mark { margin: 5rem 1.1rem 0.8rem; color: #d5df9b; font-size: clamp(4.3rem, 8vw, 6.8rem); font-weight: 500; letter-spacing: -0.12em; line-height: 0.7; }
.compact-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: 56%; margin: 1rem 1.1rem 0 auto; border: 1px solid rgba(239,238,232,0.24); transform: rotate(5deg); }
.compact-platform-grid i { min-height: 2rem; border-right: 1px solid rgba(239,238,232,0.16); background: rgba(143,216,220,0.12); }
.compact-platform-grid i:nth-child(2) { background: rgba(237,150,126,0.2); }
.compact-platform-grid i:nth-child(3) { background: rgba(200,214,109,0.28); }
.compact-platform-grid i:last-child { border-right: 0; }
.compact-stack { display: block; margin-top: auto; color: #91a39a; font-size: 0.55rem; line-height: 1.4; }
.compact-work-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 92rem; margin: 1.6rem auto 0; color: #91a39a; }
.compact-work-foot .text-link { border-bottom: 1px solid rgba(239,238,232,0.25); padding-bottom: 0.3rem; color: var(--paper); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.compact-work-foot .text-link span { color: var(--acid); }
.compact-about { background: #d7ded9; color: var(--ink); }
.compact-about .section-index { color: #527c85; }
.compact-about h2 em { color: #527c85; }
.compact-about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 8vw; max-width: 92rem; margin: 5rem auto 5.5rem; align-items: end; }
.compact-about-copy { max-width: 37rem; border: 1px solid rgba(16,17,14,0.16); border-radius: 1rem; padding: 1.15rem 1.2rem 1.2rem; }
.compact-about-copy .lede { max-width: 31rem; margin: 0 0 1.2rem; color: var(--ink); font-size: clamp(1.3rem, 2.2vw, 2rem); letter-spacing: -0.05em; line-height: 1.06; }
.compact-about-copy > p:not(.lede) { max-width: 33rem; color: #536660; font-size: 0.92rem; }
.capability-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.8rem; color: #527c85; }
.capability-chips span { border: 1px solid rgba(16,17,14,0.23); padding: 0.4rem 0.5rem; font-size: 0.57rem; }
.compact-about-bottom { display: grid; grid-template-columns: 1fr auto; gap: 3rem; max-width: 92rem; margin: 0 auto; border-top: 1px solid rgba(16,17,14,0.25); padding-top: 1.1rem; }
.compact-about-bottom > div:first-child { max-width: 32rem; }
.compact-about-bottom .mono { color: #527c85; }
.compact-about-bottom p { margin: 0.8rem 0 0; color: #536660; font-size: 1rem; }
.compact-education { display: grid; gap: 0.25rem; min-width: 15rem; color: #536660; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-align: right; }
.compact-education strong { color: var(--ink); font-family: var(--display); font-size: 1.1rem; font-weight: 500; letter-spacing: -0.04em; }
.compact-contact { display: grid; align-content: center; min-height: 70svh; background: #172523; color: var(--paper); }
.compact-contact .section-index { color: var(--blue); }
.compact-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8vw; max-width: 92rem; margin: 5rem auto 0; align-items: end; }
.compact-contact h2 em { color: var(--blue); }
.compact-contact .section-kicker { color: var(--acid); }
.compact-contact-copy { max-width: 30rem; }
.compact-contact-copy > p { margin: 0 0 1.6rem; color: #aebbb2; font-size: 0.94rem; }
.compact-socials { display: flex; flex-wrap: wrap; gap: 1rem 1.3rem; margin-top: 1.6rem; color: #aebbb2; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; }
.compact-socials a:hover, .compact-socials a:focus-visible { color: var(--acid); outline: none; }

@media (max-width: 1100px) {
  .compact-topnav { display: none; }
  .hero-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.55fr); }
  .compact-project-feature { grid-column: span 12; }
  .compact-project-research, .compact-project-systems, .compact-project-platform { grid-column: span 4; }
}
@media (max-width: 900px) {
  .hero-hero-layout { grid-template-columns: 1fr; align-items: start; gap: 3rem; }
  .hero-profile { width: min(17rem, 58vw); margin: 0; }
  .quick-proof { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .quick-proof-item:nth-child(2) { border-right: 0; }
  .quick-proof-item:nth-child(-n+2) { border-bottom: 1px solid rgba(239,238,232,0.16); padding-bottom: 1rem; }
  .compact-work-head { align-items: start; flex-direction: column; gap: 2rem; }
  .compact-work-intro { width: min(25rem, 100%); }
  .compact-project-research, .compact-project-systems, .compact-project-platform { grid-column: span 4; }
  .compact-about-grid, .compact-contact-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 620px) {
  .hero-hero-layout { gap: 2.5rem; }
  .hero-profile { width: min(14rem, 68vw); }
  .hero-summary { font-size: 0.98rem; }
  .quick-proof-item { align-items: flex-start; flex-direction: column; gap: 0.45rem; }
  .compact-project-feature { display: flex; }
  .compact-moth-screen { min-height: 15rem; }
  .compact-project-research, .compact-project-systems, .compact-project-platform { grid-column: span 12; min-height: 22rem; }
  .compact-project-research .compact-project-copy { margin-top: 12rem; }
  .compact-work-foot, .compact-about-bottom { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .compact-education { min-width: 0; text-align: left; }
  .compact-contact { min-height: 75svh; }
}

/* Keep the attention field atmospheric, never on top of the reading layer. */
main, .footer { position: relative; z-index: 1; }
.attention-field { z-index: 0; }
.hero-title-wrap { width: min(48rem, 100%); border: 1px solid rgba(239,238,232,0.2); border-radius: 1.5rem; padding: clamp(1.25rem, 2.5vw, 2.25rem); background: rgba(17,24,21,0.78); box-shadow: 0 1.4rem 4rem rgba(0,0,0,0.14); backdrop-filter: blur(16px); }
.hero-kicker, .hero-side-note, .hero-scroll, .hero-caption { border: 1px solid rgba(239,238,232,0.14); border-radius: 999px; padding: 0.5rem 0.72rem; background: rgba(17,24,21,0.58); backdrop-filter: blur(12px); }
.hero-kicker { max-width: calc(100% - 2 * var(--pad)); }
.hero-side-note { padding: 0.75rem 0.55rem; }
.hero-caption { padding-right: 0.9rem; padding-left: 0.9rem; }

/* Live portals turn the two most important projects into working surfaces. */
.compact-portal-strip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; border-top: 1px solid rgba(239,238,232,0.18); padding-top: 0.75rem; }
.compact-portal-strip > span { color: #91a39a; font-size: 0.54rem; }
.portal-trigger, .portal-text-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.55rem; border: 1px solid rgba(239,238,232,0.28); padding: 0.5rem 0.65rem; background: rgba(17,24,21,0.34); color: var(--paper); cursor: pointer; font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s; }
.portal-trigger span, .portal-text-trigger span { color: var(--acid); }
.portal-trigger:hover, .portal-trigger:focus-visible, .portal-text-trigger:hover, .portal-text-trigger:focus-visible { border-color: var(--acid); background: var(--acid); color: var(--ink); outline: none; transform: translateY(-0.1rem); }
.portal-trigger:hover span, .portal-trigger:focus-visible span, .portal-text-trigger:hover span, .portal-text-trigger:focus-visible span { color: var(--ink); }
.compact-project-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: auto; padding-top: 1rem; }
.compact-project-actions .text-link { border-bottom: 1px solid rgba(239,238,232,0.27); padding-bottom: 0.25rem; color: var(--paper); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; }
.compact-project-actions .text-link span { color: var(--acid); }

.portal-dialog { width: min(92vw, 78rem); max-width: none; max-height: 90vh; overflow: hidden; border: 1px solid rgba(239,238,232,0.25); padding: 0; background: #111816; color: var(--paper); box-shadow: 0 2rem 8rem rgba(0,0,0,0.45); }
.portal-dialog::backdrop { background: rgba(10,13,12,0.78); backdrop-filter: blur(10px); }
.portal-dialog-shell { display: grid; max-height: 90vh; grid-template-rows: auto auto minmax(0, 1fr); }
.portal-dialog-head, .portal-dialog-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; border-bottom: 1px solid rgba(239,238,232,0.15); padding: 1rem 1.2rem; }
.portal-dialog-head [data-portal-kicker] { color: var(--acid); }
.portal-dialog-head h2 { margin: 0.5rem 0 0; font-size: clamp(1.45rem, 3vw, 2.8rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.95; }
.portal-dialog-close { border: 1px solid rgba(239,238,232,0.2); padding: 0.5rem 0.65rem; background: transparent; color: var(--paper-dim); cursor: pointer; }
.portal-dialog-close:hover, .portal-dialog-close:focus-visible { border-color: var(--acid); color: var(--acid); outline: none; }
.portal-dialog-meta { align-items: center; color: #aebbb2; font-size: 0.78rem; }
.portal-dialog-meta p { max-width: 38rem; margin: 0; }
.portal-dialog-meta a { flex: 0 0 auto; border-bottom: 1px solid rgba(239,238,232,0.25); padding-bottom: 0.25rem; color: var(--paper); }
.portal-dialog-meta a:hover, .portal-dialog-meta a:focus-visible { border-color: var(--acid); color: var(--acid); outline: none; }
.portal-dialog-frame { position: relative; min-height: min(62vh, 42rem); background: #0d1415; }
.portal-dialog-frame iframe { display: block; width: 100%; height: min(62vh, 42rem); border: 0; background: #fff; }
.portal-dialog-fallback { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; width: fit-content; max-width: calc(100% - 2rem); border: 1px solid rgba(239,238,232,0.2); padding: 0.55rem 0.7rem; background: rgba(17,24,21,0.9); color: #aebbb2; font-family: var(--mono); font-size: 0.57rem; letter-spacing: 0.03em; }
.portal-dialog-fallback a { color: var(--acid); }

@media (max-width: 620px) {
  .hero-title-wrap { border-radius: 1.1rem; padding: 1rem; }
  .hero-kicker { max-width: calc(100% - 1.5rem); }
  .portal-dialog { width: calc(100vw - 1rem); }
  .portal-dialog-head, .portal-dialog-meta { gap: 1rem; padding: 0.85rem; }
  .portal-dialog-meta { align-items: flex-start; flex-direction: column; }
  .portal-dialog-frame, .portal-dialog-frame iframe { min-height: 70vh; height: 70vh; }
}

/* Refined blur treatment: protect short blurbs, not the whole title card. */
.hero-title-wrap { width: min(80rem, 100%); border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.hero-kicker, .hero-side-note, .hero-scroll, .hero-caption { border: 0; border-radius: 0; padding: 0; background: transparent; backdrop-filter: none; }
.hero-summary { width: fit-content; max-width: 31rem; border: 1px solid rgba(239,238,232,0.16); border-radius: 0.8rem; padding: 0.62rem 0.78rem; background: rgba(17,24,21,0.5); box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.08); backdrop-filter: blur(10px); }
.hero-caption > span:last-child { border-radius: 0.65rem; padding: 0.42rem 0.58rem; background: rgba(17,24,21,0.42); backdrop-filter: blur(8px); }
.compact-work-intro > p { width: fit-content; max-width: 100%; border: 1px solid rgba(239,238,232,0.12); border-radius: 0.72rem; padding: 0.52rem 0.64rem; background: rgba(17,24,21,0.36); backdrop-filter: blur(8px); }

@media (max-width: 620px) {
  .hero-title-wrap { padding: 0; }
  .hero-kicker { display: none; }
}

/* Scroll-visible attention field and fluid type system. */
main, .footer { z-index: auto; }
.attention-field { z-index: 2; }
.hero { z-index: auto; isolation: auto; }
main > section > * { position: relative; z-index: 3; }
main > section > .hero-grid { z-index: 0; }
.footer > * { position: relative; z-index: 3; }
.hero h1 { max-width: 100%; font-size: clamp(3rem, 7.8vw, 8rem); line-height: 0.88; }
.hero h1 > span { max-width: 100%; min-width: 0; overflow-wrap: normal; white-space: normal; }
.hero-hero-layout { gap: clamp(1.5rem, 7vw, 7rem); }
.hero-title-wrap { min-width: 0; }
.hero-profile { max-width: 100%; }
.hero-actions { flex-wrap: wrap; }
.hero-kicker { top: 6rem; }

@media (max-width: 900px) {
  .hero h1 { font-size: clamp(3.2rem, 10.2vw, 6.8rem); }
  .hero-summary { max-width: min(31rem, 100%); }
}

@media (max-width: 620px) {
  .hero h1 { font-size: clamp(2.95rem, 11.8vw, 5rem); line-height: 0.9; }
  .hero-hero-layout { gap: 2.25rem; }
  .hero-profile { width: min(15rem, 74vw); }
  .hero-summary { max-width: 100%; font-size: 0.98rem; line-height: 1.3; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 0.85rem; }
  .hero-action { width: fit-content; }
}

/* Keep project cards readable between phone and desktop layouts. */
@media (max-width: 1100px) {
  .compact-project-research, .compact-project-systems, .compact-project-platform { grid-column: span 6; }
}

@media (max-width: 700px) {
  .compact-project-research, .compact-project-systems, .compact-project-platform { grid-column: span 12; }
}

@media (max-width: 620px) {
  .compact-about-copy { border-radius: 0.8rem; padding: 0.9rem; }
}