/* The copy's monochrome design. Shared by every existing portfolio page. */
:root, [data-theme="dark"], [data-theme="light"] {
  color-scheme: dark;
  --bg: #000; --bg-2: #080808; --text: #eeeeed; --text-muted: #a7a7a7;
  --surface: #0c0c0c; --surface-strong: #171717; --line: #323232;
  --accent: #dedede; --accent-2: #b9b9b9; --accent-3: #999; --success: #cecece;
  --card-bg: #090909; --card-border: #292929; --header-bg: #050505;
  --shadow-lg: none; --shadow-md: none; --bg-gradient: #000;
  --radius-lg: 2px; --radius-md: 2px; --radius-sm: 2px; --container: 1580px;
  --menu-toggle-fg: #e7e7e7; --scrollbar-track: #000;
  --scrollbar-thumb: #383838; --scrollbar-thumb-hover: #686868;
}
html { background: #000; scroll-padding-top: 100px; }
body { background: #000; font-family: Arial, Helvetica, sans-serif; color: var(--text); }
h1, h2, h3, .brand { font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
h1, h2 { letter-spacing: -.045em; }
p { line-height: 1.6; }
button { font-family: inherit; }
.bg-orb, .bg-grid, .theme-toggle-wrapper, .preview-stack { display: none !important; }
.container { width: min(var(--container), calc(100% - 112px)); }
.site-header { top: 0; width: 100%; margin: 0; padding: 0 max(56px, calc((100% - 1580px) / 2)); min-height: 76px; border: 0; border-bottom: 1px solid #383838; border-radius: 0; background: #030303; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { font-size: 16px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.site-header.container { width: 100%; }
.brand-signature { display: flex; align-items: center; gap: 28px; min-width: 0; }
.brand-role { border-left: 1px solid #757575; padding-left: 28px; color: #aaa; font: 12px/1.5 Consolas, "Courier New", monospace; letter-spacing: .055em; text-transform: uppercase; }
.desktop-nav { display: flex; gap: 28px; margin-left: auto; align-items: center; }
.desktop-nav a, .section-label, .eyebrow, .project-kind, .resource-links, .footer-nav, .site-footer, .lang-btn, .lang-option { font-family: Consolas, "Courier New", monospace; }
.desktop-nav a { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #aaa; }
.desktop-nav a:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: 24px; }
.header-language { position: relative; }
.header-language .lang-dropdown { width: auto; }
.header-language .lang-btn { width: 74px; min-height: 44px; padding: 8px 10px; }
.header-language .lang-options { left: auto; right: 0; width: 172px; max-height: calc(100svh - 100px); overflow-y: auto; }
.header-language .lang-option { min-height: 44px; }
.menu-toggle, .lang-btn { border-color: #333; border-radius: 2px; background: #090909; box-shadow: none; backdrop-filter: none; }
.menu-toggle:hover, .lang-btn:hover { background: #171717; border-color: #777; }
.menu-overlay { position: absolute; top: calc(100% + 12px); right: 0; max-width: calc(100vw - 32px); }
.menu-wrapper { position: relative; }
.menu-card { background: #101010 !important; border: 1px solid #3a3a3a !important; border-radius: 2px; box-shadow: 0 12px 40px #000; backdrop-filter: none; }
.mobile-nav a { font-size: 15px; border-radius: 2px; }
.lang-options { background: #111; border-radius: 2px; border-color: #444; }
.lang-option:hover, .lang-option.is-active { background: #262626; color: #fff; }
.mono-icon { width: 24px; height: 24px; flex: 0 0 auto; filter: invert(1); opacity: .8; }
.mono-home .hero { position: relative; padding: 0; min-height: min(820px, calc(100svh - 76px)); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.wave-background { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--wave-opacity, 1); background: #030303; }
.wave-image, .wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: opacity 700ms ease; }
.wave-image { opacity: 0; animation: wave-drift 24s ease-in-out infinite alternate; transform: scale(1.025); }
.wave-canvas { opacity: 0; }
.wave-background.webgl-ready .wave-canvas { opacity: 1; }
.wave-background.webgl-ready .wave-image { animation: none; opacity: 0; }
.wave-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 64%), linear-gradient(0deg, #000, transparent 12%); }
.wave-background.webgl-ready::after { background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.35) 48%, transparent 80%), linear-gradient(0deg, #000, transparent 16%); }
.mono-home .hero-copy { padding: 65px 0 82px; max-width: 750px; }
.section-label { display: flex; gap: 14px; align-items: center; margin: 0 0 32px; color: #aaa; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.section-label .section-index { color: #777; }
.mono-home .hero h1 { max-width: 24ch; font-size: clamp(42px, 3.7vw, 66px); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }
.hero-identity { margin: 28px 0 3px; color: #ccc; font-size: 14px; }
.mono-home .hero .tagline { max-width: 57ch; font-size: 17px; line-height: 1.65; margin: 0; color: #adadad; }
.mono-home .hero-actions { margin-top: 35px; gap: 44px; flex-direction: row; align-items: flex-start; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 44px; padding: 10px 0; border-bottom: 1px solid #999; font: 13px/1.4 Consolas, "Courier New", monospace; font-weight: 600; }
.text-link .mono-icon { width: 26px; transition: transform .25s ease; }
.text-link:hover .mono-icon { transform: translateX(4px); }
.mono-home .home-section { position: relative; padding: 48px 0 54px; border-top: 1px solid #343434; background: #000; }
.project-list { display: grid; }
.project-row { position: relative; display: grid; grid-template-columns: 60px minmax(230px, 1fr) minmax(260px, 1.1fr) 28px; gap: 26px; align-items: center; min-height: 112px; border-bottom: 1px solid #555; padding: 23px 0; transition: background .25s; }
.project-row:last-child { border-bottom: 0; }
.project-row h3 { color: #eee; font-size: 21px; font-weight: 500; margin-bottom: 5px; letter-spacing: -.02em; }
.project-kind { display: block; color: #aaa; text-transform: uppercase; font-size: 11px; line-height: 1.55; letter-spacing: .02em; }
.project-row p { border-left: 1px solid #626262; margin: 0; padding: 0 34px; font-size: 14px; color: #b8b8b8; line-height: 1.6; }
.project-row:hover { background: #090909; }
.project-row:is(:hover, :focus-visible) > .mono-icon { transform: translateX(2px); opacity: 1; }
.project-row > .mono-icon { transition: transform 440ms cubic-bezier(.25,.1,.25,1), opacity 320ms ease; }
.resource-links { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 30px; color: #bdbdbd; font-size: 12px; }
.resource-links a { padding: 8px 0; border-bottom: 1px solid #393939; }
.about-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; }
.about-copy h2 { font-size: clamp(30px, 3vw, 44px); max-width: 18ch; line-height: 1.15; margin-bottom: 20px; }
.about-copy > p { max-width: 49ch; font-size: 15px; color: #b2b2b2; }
.focus-line { margin: 0 0 18px; color: #ccc; font-family: Consolas, "Courier New", monospace; font-size: 11px; text-transform: uppercase; }
.specialty-notes { display: grid; gap: 15px; margin-top: 26px; }
.specialty-note h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.specialty-note p { margin: 0; color: #999; font-size: 13px; max-width: 52ch; }
.toolkit { border-left: 1px solid #666; padding-left: 50px; }
.toolkit h3 { margin-bottom: 34px; font: 12px Consolas, "Courier New", monospace; text-transform: uppercase; color: #aaa; }
.toolkit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; }
.toolkit-item { display: flex; align-items: flex-start; gap: 20px; padding: 5px 0; }
.toolkit-item .mono-icon { width: 30px; height: 30px; }
.toolkit-item strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.toolkit-item span { display: block; color: #929292; font-size: 12px; }
.toolkit-item:hover strong { text-decoration: underline; text-underline-offset: 6px; }
.process-heading { display: flex; justify-content: space-between; gap: 50px; align-items: flex-start; margin-bottom: 42px; }
.process-heading h2 { margin: 0; font-size: clamp(32px, 3vw, 46px); }
.process-heading p { border-left: 1px solid #666; padding-left: 28px; margin: 0; color: #aaa; font-size: 14px; max-width: 380px; }
.process-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.process-step { border-left: 1px solid #666; padding: 0 18px; }
.process-step > span { font-size: 29px; color: #bdbdbd; }
.process-step h3 { margin: 8px 0; font-size: 17px; }
.process-step p { color: #aaa; margin: 0; font-size: 13px; }
.contact-top { display: flex; gap: 50px; align-items: center; justify-content: space-between; }
.contact-top h2 { font-size: clamp(32px, 3vw, 48px); max-width: 28ch; margin-bottom: 14px; line-height: 1.16; }
.contact-top p { color: #aaa; font-size: 14px; max-width: 66ch; margin: 0; }
.contact-top .btn-primary { min-width: 170px; margin: 0; }
.contact-links { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; }
.contact-links a { font: 12px/1.8 Consolas, "Courier New", monospace; color: #c3c3c3; border-bottom: 1px solid #393939; overflow-wrap: anywhere; }
.site-footer { padding: 28px 0; border-top: 1px solid #343434; font-size: 11px; color: #777; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-nav { display: flex; gap: 28px; color: #aaa; text-transform: uppercase; }
.footer-top .brand { color: #ccc; }
.footer-bottom { border-top: 1px solid #292929; margin-top: 25px; padding-top: 22px; display: flex; justify-content: space-between; gap: 24px; }
/* Mat surfaces replace every old translucent, colored case-study card. */
.glass-card, .hero-metric, .featured-tags span, .contacts-wrap, .contacts-cta, .my-case-block, .preview-window, .social-link, .stack-item, .accordion-item, .qr-modal__dialog { background: #090909 !important; border-color: #303030 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 2px; }
.glass-card::before { display: none; }
.project-card:hover, .site-card:hover, .tech-card:hover, .stack-item:hover, .shot-card:hover { background: #111 !important; border-color: #777 !important; box-shadow: none !important; transform: translateY(-2px); }
.project-index-hero { background: #050505; border: 0; border-bottom: 1px solid #444; border-radius: 0; box-shadow: none; max-width: 100%; width: 100%; margin: 0 0 35px; padding: 70px 0 35px; overflow: visible; }
.project-index-hero::after { display: none; }
.project-index-hero-intro { border-color: #777; }
.status, .badge, .command-label, .network-badge, .net-btn.is-active { color: #d3d3d3 !important; background: #141414 !important; border-color: #484848 !important; box-shadow: none !important; border-radius: 2px; }
.project-tech, .hero-eyebrow, .contacts-kicker, .repo-callout-kicker, .stack-item strong, .workflow-card h3 { color: #ccc !important; text-shadow: none; }
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.stat-item { display: grid; gap: 8px; padding-left: 16px; border-left: 1px solid #555; }
.stat-item strong { font-size: 16px; font-weight: 500; }
.stat-item span { color: #a7a7a7; font-size: 13px; line-height: 1.6; }
.repo-actions { margin-top: 24px; }
.back-link, .project-index-hero .back-link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%; min-height: 44px; margin-bottom: 24px; padding: 10px 16px;
  color: #c3c3c3; background: #090909; border: 1px solid #414141; border-radius: 2px;
  font: 13px/1.5 Consolas, "Courier New", monospace; text-decoration: none; overflow: visible;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.back-link::before, .project-index-hero .back-link::before {
  content: "\2190"; display: inline-block; flex: 0 0 auto; color: currentColor; font-size: 18px; line-height: 1;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.back-link:hover, .project-index-hero .back-link:hover, .back-link:focus-visible {
  color: #fff; background: #191919; border-color: #888; transform: none;
}
.back-link:hover::before, .project-index-hero .back-link:hover::before, .back-link:focus-visible::before { transform: translateX(-3px); }
.library-page .tech-card { flex-direction: column; gap: 8px; align-items: flex-start; }
.library-page .tech-card p { margin: 0 !important; }
.btn-primary, .btn-secondary, .project-link, .social-link, .accordion-copy-btn, .net-btn, .qr-modal__close { background: #080808 !important; color: #e5e5e5 !important; border: 1px solid #606060 !important; border-radius: 2px; box-shadow: none !important; min-height: 44px; font: 13px Consolas, "Courier New", monospace; }
.btn-primary:hover, .btn-secondary:hover, .project-link:hover, .social-link:hover, .accordion-copy-btn:hover, .net-btn:hover { background: #1a1a1a !important; border-color: #b0b0b0 !important; color: #fff !important; box-shadow: 0 0 16px rgba(255,255,255,.045) !important; transform: translateY(-1px); }
a, button { -webkit-tap-highlight-color: rgba(255,255,255,.1); }
:is(.btn-primary, .btn-secondary, .text-link, .project-link, .project-row, button):active { background-color: #292929 !important; transition-duration: 70ms; }
:focus-visible { outline: 2px solid #ddd; outline-offset: 5px; }
.mobile-toc-wrapper { background: #0a0a0a !important; border-radius: 2px; box-shadow: none; backdrop-filter: none; }
.toc-item.active, .toc a.active { color: #fff; background: #222; border-color: #777; box-shadow: none; }
.toc-item::before, .toc a::before { display: none; }
.accordion-icon { background: #151515; border-color: #444; border-radius: 2px; }
.qr-modal__backdrop { background: rgba(0,0,0,.88); }
.accordion-address-row, .qr-modal__address-row { border-radius: 2px; }
.accordion-copy-btn.copied { border-color: #aaa !important; color: #fff; }
.reveal { opacity: 1; transform: none; transition: opacity .55s, transform .55s; }
.motion-ready .reveal { opacity: 0; transform: translateY(12px); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }
.reveal-lite, .scroll-zoom.is-visible { transform: none; }
.section-sheen { animation: section-sheen 1.6s ease-out; }
@keyframes section-sheen { 0%,100% { box-shadow: inset 0 0 0 transparent; } 35% { box-shadow: inset -80px 0 90px -85px rgba(255,255,255,.12); } }
@keyframes wave-drift { from { transform: scale(1.025) translateY(0); } to { transform: scale(1.05) translateY(-7px); } }
/* Hover feedback keeps text, hit areas and card geometry stationary. */
:is(.btn-primary, .btn-secondary, .project-link, .social-link, .accordion-copy-btn, .net-btn, .back-link,
    .project-card, .site-card, .tech-card, .stack-item, .shot-card) {
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out;
}
:is(.btn-primary, .btn-secondary, .project-link, .social-link, .accordion-copy-btn, .net-btn, .back-link,
    .project-card, .site-card, .tech-card, .stack-item, .shot-card):hover { transform: none; }
.mobile-nav a, .mobile-nav a:hover { padding: .5rem; transition: background-color 180ms ease-out, color 180ms ease-out; }
.menu-overlay, .menu-overlay.active { transform: none; transition: opacity 160ms ease-out, visibility 160ms; }
.lang-options { transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 160ms; }
/* Small feedback effects animate decorations; labels and hit areas stay still. */
.menu-toggle:hover { transform: none; }
:is(.desktop-nav a, .footer-nav a, .resource-links a, .contact-links a, .text-link, .toolkit-item strong) { position: relative; }
:is(.desktop-nav a, .footer-nav a, .resource-links a, .contact-links a, .text-link, .toolkit-item strong)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #d3d3d3;
  transform: scaleX(0); transform-origin: right; pointer-events: none;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.toolkit-item strong { width: fit-content; }
.toolkit-item:hover strong { text-decoration: none; }
.toolkit-item .mono-icon { transition: transform 260ms ease-out, opacity 260ms ease-out; }
.process-step { transition: border-color 220ms ease-out; }
:is(.project-card, .site-card, .tech-card, .architecture-card) { position: relative; }
:is(.project-card, .site-card, .tech-card, .architecture-card)::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #929292;
  transform: scaleX(0); transform-origin: left; pointer-events: none; transition: transform 320ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  :is(.desktop-nav a, .footer-nav a, .resource-links a, .contact-links a, .text-link):hover::after,
  .toolkit-item:hover strong::after { transform: scaleX(1); transform-origin: left; }
  .toolkit-item:hover .mono-icon { transform: translateY(-2px) rotate(-4deg); opacity: 1; }
  .process-step:hover { border-color: #d3d3d3; }
  :is(.project-card, .site-card, .tech-card, .architecture-card):hover::after { transform: scaleX(1); }
}
:is(.desktop-nav a, .footer-nav a, .resource-links a, .contact-links a, .text-link):focus-visible::after,
:is(.project-card, .site-card, .tech-card, .architecture-card):focus-within::after { transform: scaleX(1); }
:is(.btn-primary, .btn-secondary, .project-link, .social-link, .accordion-copy-btn, .net-btn, .back-link, .lang-btn) { position: relative; isolation: isolate; }
:is(.btn-primary, .btn-secondary, .project-link, .social-link, .accordion-copy-btn, .net-btn, .back-link, .lang-btn)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255,255,255,.12);
  pointer-events: none; opacity: 0; transition: opacity 280ms ease-out;
}
:is(.btn-primary, .btn-secondary, .project-link, .social-link, .accordion-copy-btn, .net-btn, .back-link, .lang-btn):active::after { opacity: 1; transition-duration: 60ms; }
.project-index-hero .back-link:active, .back-link:active { background: #292929; }
/* Compact identity, calmer inner-page typography, and fine technical markers. */
.site-header .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex-shrink: 0; }
.brand-mark { position: relative; display: inline-flex; width: 36px; height: 36px; flex: 0 0 auto; }
.brand-mark > img, .brand-sheen { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-sheen { pointer-events: none; overflow: hidden; }
.dk-glint { transform: translateX(-420px); }
.brand:hover .dk-glint, .brand:focus-visible .dk-glint { animation: dk-edge-glint 850ms cubic-bezier(.2,.6,.2,1) both; }
@keyframes dk-edge-glint { from { transform: translateX(-420px); } to { transform: translateX(520px); } }
.project-index-hero h1 { font-size: clamp(34px, 3.7vw, 52px); max-width: 25ch; line-height: 1.12; text-wrap: balance; }
.project-index-hero-intro { margin-top: 24px; max-width: 68ch; font-size: 16px; line-height: 1.7; border-left-width: 1px; padding-left: 18px; }
.project-hero h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.12; text-wrap: balance; }
.library-page h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.1; max-width: 25ch; margin-bottom: 22px; }
.project-tech, .site-card-kicker, .status { font-family: Consolas, "Courier New", monospace; letter-spacing: .015em; }
.project-tech { font-size: 12px !important; line-height: 1.65 !important; color: #aaa !important; }
.architecture-card .case-index {
  color: #858585; font: 12px/1.5 Consolas, "Courier New", monospace;
  border-right: 1px solid #444; padding-right: 10px; margin-right: 2px; flex-shrink: 0;
}
.architecture-card .project-meta { gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
.architecture-card .status { margin-left: auto; }
.menu-toggle { min-width: 44px; min-height: 44px; }
:is(.architecture-card, .site-card, .tech-card) { background: linear-gradient(145deg, #101010, #070707 80%) !important; }
.section-label::after { content: ""; display: block; flex: 0 0 34px; height: 1px; background: #626262; order: -1; }
.section-label .section-index { order: -2; }
.label-motion .section-index { transition: opacity 220ms ease-out; }
.label-motion::after { transform-origin: left; transition: transform 320ms cubic-bezier(.2,.7,.2,1) 100ms; }
.label-motion > :not(.section-index) { transition: opacity 300ms ease-out 240ms, transform 300ms ease-out 240ms; }
.label-motion:not(.label-ready) .section-index { opacity: 0; }
.label-motion:not(.label-ready)::after { transform: scaleX(0); }
.label-motion:not(.label-ready) > :not(.section-index) { opacity: 0; transform: translateX(-5px); }
:is(.btn-primary, .btn-secondary, .project-link, .back-link, .lang-btn, .menu-toggle, .accordion-copy-btn, .net-btn) { position: relative; }
.perimeter-pulse { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; z-index: 2; overflow: visible; }
.perimeter-pulse rect { fill: none; stroke: #e2e2e2; stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 18 82; animation: perimeter-travel 620ms cubic-bezier(.2,.5,.3,1) both; }
@keyframes perimeter-travel { 0% { stroke-dashoffset: 100; opacity: 0; } 12%,65% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover .mono-icon { animation: arrow-inertia 430ms cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes arrow-inertia { 0% { transform: translateX(0); } 60% { transform: translateX(6px); } 100% { transform: translateX(4px); } }
@media(max-width: 1100px) {
  .site-header .brand-role { display: none; }
  .container { width: calc(100% - 112px); }
  .site-header { padding-inline: 56px; }
  .brand-role { font-size: 10px; gap: 18px; padding-left: 18px; }
  .brand-role .signature-focus { display: none; }
  .brand-signature { gap: 18px; }
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 10px; }
  .about-layout { gap: 35px; }
  .toolkit { padding-left: 30px; }
  .toolkit-item { gap: 12px; }
  .project-row { grid-template-columns: 42px 1fr 1.1fr 24px; gap: 20px; }
  .project-row p { padding-inline: 22px; }
}
@media(max-width: 800px) {
  .container { width: calc(100% - 40px); }
  .site-header { padding-inline: 20px; min-height: 66px; }
  .desktop-nav { display: none; }
  .brand-role { font-size: 9px; }
  .brand-role .signature-focus { display: none; }
  .brand { font-size: 14px; }
  .header-actions { margin-left: auto; }
  .mono-home .hero { min-height: 680px; min-height: calc(100svh - 66px); }
  .mono-home .hero-copy { padding: 60px 0 65px; max-width: 610px; }
  .mono-home .hero h1 { font-size: clamp(38px, 6.3vw, 54px); max-width: 21ch; }
  .wave-background { opacity: calc(var(--wave-opacity, 1) * .65); }
  .wave-background.webgl-ready::after { background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 75%), linear-gradient(0deg, #000, transparent 16%); }
  .wave-image, .wave-canvas { object-position: 65% center; }
  .mono-home .home-section { padding-block: 35px; }
  .section-label { margin-bottom: 25px; font-size: 11px; }
  .about-layout { grid-template-columns: 1fr; }
  .toolkit { border-left: 0; border-top: 1px solid #444; padding: 28px 0 0; }
  .toolkit-grid { gap: 27px 20px; }
  .process-grid { grid-template-columns: repeat(3, 1fr); gap: 25px 15px; }
  .process-step { padding-left: 15px; padding-right: 0; }
  .process-heading { flex-direction: column; gap: 20px; margin-bottom: 30px; }
  .process-heading p { max-width: 100%; }
  .contact-top { flex-direction: column; align-items: flex-start; gap: 25px; }
  .project-row { grid-template-columns: 35px 1fr 24px; gap: 15px; padding-block: 20px; }
  .project-row h3 { font-size: 19px; }
  .project-row p { grid-column: 2; border: 0; padding: 0; font-size: 13px; }
  .project-row > .mono-icon { grid-column: 3; grid-row: 1; }
  .footer-top { align-items: flex-start; flex-direction: column; }
  .footer-nav { gap: 20px; flex-wrap: wrap; }
  .project-index-hero { padding-top: 42px; }
  .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-index-hero h1 { font-size: clamp(30px, 7vw, 44px); max-width: 100%; }
  .project-panel, .architecture-grid, .full-content { max-width: calc(100% - 40px); }
  .container .architecture-grid, .container .project-panel { max-width: 100%; }
  .long-read-card { padding: 24px; }
  .text-block p { text-align: left; }
}
@media(max-width: 480px) {
  .architecture-card .status { margin-left: 0; }
  .site-header .brand { font-size: 12px; gap: 8px; }
  .brand-mark { width: 27px; height: 27px; }
  .site-header .brand-role { display: none; }
  .header-actions { gap: 10px; }
  .brand-role { max-width: 140px; border-color: #555; }
  .brand-signature { gap: 13px; }
  .brand-role { padding-left: 13px; }
  .mono-home .hero h1 { font-size: 38px; line-height: 1.12; }
  .mono-home .hero .tagline { font-size: 15px; }
  .mono-home .hero-actions { gap: 28px; }
  .text-link { font-size: 12px; gap: 18px; }
  .toolkit-item { gap: 12px; }
  .toolkit-item .mono-icon { width: 25px; height: 25px; }
  .toolkit-item strong { font-size: 13px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .contact-links { flex-direction: column; align-items: flex-start; gap: 15px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .project-hero h1 { overflow-wrap: anywhere; font-size: 36px; }
  .stat-band { grid-template-columns: 1fr; }
}
/* Different rhythms for the collection, toolkit, sequence, and closing invitation. */
.mono-home .home-section { padding-block: 82px; border-top: 0; }
.mono-home #projects { padding-top: 64px; }
.mono-home .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mono-home .project-row { grid-template-columns: 52px minmax(0,1fr) 24px; gap: 16px 20px; min-height: 224px; padding: 30px; border: 0; background: #070707; isolation: isolate; }
.mono-home .project-row::before { content: ""; position: absolute; inset: 0; border: 1px solid #393939; opacity: 0; pointer-events: none; transition: opacity 450ms ease; }
.mono-home .project-row:is(:hover,:focus-visible) { background: #101010; }
.mono-home .project-row:is(:hover,:focus-visible)::before { opacity: 1; }
.mono-home .project-row h3 { font-size: clamp(22px,1.8vw,28px); margin-bottom: 9px; }
.mono-home .project-row p { grid-column: 2 / 4; padding: 0 62px 0 0; border: 0; font-size: 14px; }
.mono-home .project-row > .mono-icon { grid-column: 3; grid-row: 1; align-self: start; }
.mono-home .project-row:first-child { grid-column: 1 / -1; grid-template-columns: 78px minmax(0,1fr) minmax(0,1fr) 24px; min-height: 180px; padding-block: 40px; background: #0b0b0b; }
.mono-home .project-row:first-child h3 { font-size: clamp(28px,2.6vw,40px); }
.mono-home .project-row:first-child p { grid-column: 3; padding-right: 76px; }
.mono-home .project-row:first-child > .mono-icon { grid-column: 4; align-self: center; }
.mono-home .resource-links { gap: 18px 32px; margin-top: 30px; }
.mono-home .resource-links a { border: 0; color: #929292; transition: color 300ms ease; }
.mono-home .resource-links a:first-child { color: #eee; }
.mono-home .resource-links a:hover { color: #fff; }
.mono-home .about-layout { gap: 70px; align-items: start; }
.mono-home .about-copy h2 { font-size: clamp(36px,3.5vw,54px); }
.mono-home .specialty-notes { gap: 24px; }
.mono-home .specialty-note { padding-left: 16px; position: relative; }
.mono-home .specialty-note::before { content: ""; width: 4px; height: 4px; background: #888; position: absolute; left: 0; top: 8px; }
.mono-home .toolkit { border: 0; padding: 32px; background: #070707; }
.mono-home .toolkit h3 { margin-bottom: 24px; }
.mono-home .toolkit-grid { gap: 8px; }
.mono-home .toolkit-item { padding: 20px 12px; min-height: 118px; gap: 14px; border: 0; transition: background-color 450ms ease; }
.mono-home .toolkit-item:is(:hover,:focus-visible) { background: #121212; }
.mono-home .toolkit-item .mono-icon { padding: 9px; box-sizing: content-box; width: 26px; height: 26px; background: #ededed; border-radius: 8px; }
.mono-home .toolkit-item:hover strong { text-decoration: none; color: #fff; }
.mono-home .toolkit-item strong { margin-top: 2px; line-height: 1.4; }
.mono-home .process-heading { gap: 65px; margin-bottom: 56px; }
.mono-home .process-heading h2 { font-size: clamp(36px,3.8vw,58px); }
.mono-home .process-heading p { border: 0; padding: 0; }
.mono-home .process-grid { position: relative; gap: 28px; padding-top: 28px; }
.mono-home .process-grid::before, .mono-home .process-grid::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: #262626; }
.mono-home .process-grid::after { background: linear-gradient(90deg,#999,#333); transform: scaleX(0); transform-origin: left; transition: transform 1400ms cubic-bezier(.25,.1,.25,1); }
.mono-home .process-grid.flow-ready::after { transform: scaleX(1); }
.mono-home .process-step { position: relative; border: 0; padding: 0 12px 0 0; }
.mono-home .process-step::before { content: ""; position: absolute; left: 0; top: -31px; width: 7px; height: 7px; background: #999; border-radius: 50%; box-shadow: 0 0 0 5px #000; z-index: 1; }
.mono-home .process-step > span { font: 18px/1.1 Consolas,"Courier New",monospace; color: #888; -webkit-text-stroke: 0; }
.mono-home .process-step h3 { margin: 20px 0 10px; }
.mono-home #contacts { padding-block: 104px 90px; overflow: hidden; isolation: isolate; }
.contact-emblem { position: absolute; width: min(33vw,440px); aspect-ratio: 1; right: 3%; top: 15%; opacity: .13; z-index: -1; pointer-events: none; }
.contact-emblem img, .contact-emblem canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.contact-emblem canvas { opacity: 0; }
.contact-emblem.is-3d img { opacity: 0; }
.contact-emblem.is-3d canvas { opacity: 1; }
.mono-home .contact-top { align-items: flex-end; gap: 60px; }
.mono-home .contact-top h2 { max-width: 20ch; font-size: clamp(42px,4.8vw,76px); margin-bottom: 24px; }
.mono-home .contact-top p { max-width: 58ch; font-size: 15px; }
.mono-home .contact-top .btn-primary { min-height: 64px; min-width: 205px; padding: 18px 22px; flex: 0 0 auto; }
.mono-home .contact-links { margin-top: 48px; align-items: center; gap: 24px 40px; }
.mono-home .contact-links a { border: 0; color: #999; }
.mono-home .contact-links a:last-child { color: #eee; font-size: 20px; order: -1; margin-right: auto; }
.detail-motion { transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.7,.2,1), background-color 450ms ease !important; }
.detail-motion:not(.detail-ready) { opacity: 0; transform: translateY(12px); }
.detail-motion.detail-ready { opacity: 1; transform: none; }
@media(max-width:1100px) {
  .mono-home .project-row { padding: 24px; grid-template-columns: 40px minmax(0,1fr) 24px; gap: 16px; }
  .mono-home .project-row:first-child { grid-template-columns: 56px minmax(0,1fr) minmax(0,1fr) 24px; }
  .mono-home .about-layout { gap: 35px; }
  .mono-home .toolkit { padding: 24px; }
  .mono-home .toolkit-grid { grid-template-columns: 1fr; }
  .mono-home .toolkit-item { min-height: 80px; }
}
@media(max-width:800px) {
  .mono-home .home-section { padding-block: 56px; }
  .mono-home .project-list { grid-template-columns: 1fr; }
  .mono-home .project-row, .mono-home .project-row:first-child { grid-column: auto; grid-template-columns: 46px minmax(0,1fr) 24px; min-height: 200px; padding: 28px 24px; }
  .mono-home .project-row:first-child h3 { font-size: 28px; }
  .mono-home .project-row p, .mono-home .project-row:first-child p { grid-column: 2 / 4; padding-right: 36px; }
  .mono-home .project-row:first-child > .mono-icon { grid-column: 3; align-self: start; }
  .mono-home .toolkit-grid { grid-template-columns: 1fr 1fr; }
  .mono-home .toolkit-item { flex-direction: column; padding: 16px 8px; }
  .mono-home .process-heading { margin-bottom: 40px; gap: 24px; }
  .mono-home .process-grid { grid-template-columns: 1fr; gap: 32px; padding: 0 0 0 28px; }
  .mono-home .process-grid::before, .mono-home .process-grid::after { top: 8px; bottom: 0; left: 3px; right: auto; height: auto; width: 1px; }
  .mono-home .process-grid::after { transform: scaleY(0); transform-origin: top; }
  .mono-home .process-grid.flow-ready::after { transform: scaleY(1); }
  .mono-home .process-step { padding: 0 0 0 38px; }
  .mono-home .process-step::before { top: 8px; left: -28px; }
  .mono-home .process-step > span { position: absolute; left: 0; top: 0; font-size: 16px; }
  .mono-home .process-step h3 { margin-top: 0; }
  .mono-home .process-step p { max-width: 48ch; }
  .mono-home #contacts { padding-block: 70px; }
  .mono-home .contact-top { align-items: flex-start; gap: 32px; }
  .mono-home .contact-links { align-items: flex-start; gap: 18px; }
  .contact-emblem { width: 250px; top: 30%; right: -60px; opacity: .065; }
}
@media(max-width:480px) {
  .mono-home .project-row, .mono-home .project-row:first-child { padding: 24px 18px; gap: 14px; grid-template-columns: 32px minmax(0,1fr) 20px; }
  .mono-home .project-row h3, .mono-home .project-row:first-child h3 { font-size: 23px; }
  .mono-home .project-row p, .mono-home .project-row:first-child p { padding-right: 0; font-size: 13px; }
  .mono-home .toolkit { padding: 24px 16px; }
  .mono-home .toolkit-item { padding-inline: 4px; }
  .mono-home .contact-links a:last-child { font-size: 18px; }
}
/* Keep project content clear; decoration belongs to the hero and closing brand. */
.mono-home .project-row { grid-template-columns: minmax(0,1fr) 24px; gap: 20px; }
.mono-home .project-row p { grid-column: 1 / -1; padding: 0; max-width: 58ch; }
.mono-home .project-row > .mono-icon { grid-column: 2; }
.mono-home .project-row:first-child { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 24px; }
.mono-home .project-row:first-child p { grid-column: 2; padding: 0 18px 0 0; }
.mono-home .project-row:first-child > .mono-icon { grid-column: 3; }
@media(max-width:800px) {
  .mono-home .project-row, .mono-home .project-row:first-child { grid-template-columns: minmax(0,1fr) 24px; }
  .mono-home .project-row p, .mono-home .project-row:first-child p { grid-column: 1 / -1; padding: 0; }
  .mono-home .project-row:first-child > .mono-icon { grid-column: 2; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .wave-image { transform: none; }
  .back-link::before, .project-index-hero .back-link::before, .toolkit-item .mono-icon,
  .text-link .mono-icon, .project-row > .mono-icon { transform: none !important; }
  .label-motion > *, .label-motion::after { opacity: 1 !important; transform: none !important; }
  .perimeter-pulse, .brand-sheen { display: none; }
  .detail-motion { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mono-home .process-grid::after { display: none; }
}