/* Signal — production portfolio. */
:root { color-scheme: dark; --bg: #0b100e; --panel: #101813; --text: #e4eae4; --muted: #9aa89f; --accent: #91efbc; --line: #29382e; --mono: "Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace; --sans: "Segoe UI",Arial,sans-serif; --progress: 0%; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 42px; }
body { margin: 0px; background: var(--bg); color: var(--text); font-family: var(--mono); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
button { cursor: pointer; }
svg { display: block; }
h1, h2, h3, p { margin: 0px; }
::selection { background: var(--accent); color: var(--bg); }
.wrap { width: min(1280px, 100% - 112px); margin-inline: auto; }
.accent { color: var(--accent); }
.skip-link { position: fixed; z-index: 100; left: 15px; top: -80px; background: var(--accent); color: var(--bg); padding: 12px 20px; }
.skip-link:focus { top: 10px; }
.reading-progress { position: fixed; top: 0px; left: 0px; height: 2px; width: var(--progress); background: var(--accent); z-index: 90; pointer-events: none; }
.site-nav { height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line); }
.wordmark { display: flex; align-items: center; gap: 12px; letter-spacing: -0.025em; font-size: 16px; font-weight: 600; }
.brand-glyph { color: var(--accent); font-size: 24px; }
.site-nav nav { margin-left: auto; display: flex; gap: 38px; font-size: 12px; }
.site-nav nav a { transition: color 0.2s; }
.site-nav nav a:hover { color: var(--accent); }
.site-nav nav a span { color: var(--accent); margin-left: 9px; }
.motion-toggle { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line); background: transparent; padding: 9px 12px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.motion-toggle:hover { color: var(--text); border-color: var(--accent); }
.motion-toggle:disabled { cursor: default; }
.motion-icon { color: var(--accent); }
.hero-section { position: relative; isolation: isolate; overflow: hidden; }
.skyline { position: absolute; z-index: -2; inset: 0px; background-image: linear-gradient(90deg,var(--bg) 5%,transparent 60%),linear-gradient(0deg,var(--bg),#0b100e6b 60%,var(--bg)),url('/images/hero-skyline.jpg'); background-size: cover; background-position: center center; opacity: 0.12; filter: grayscale(1); }
.hero-section::after { content: ""; position: absolute; z-index: -1; inset: 0px; pointer-events: none; background-image: linear-gradient(rgba(164, 221, 183, 0.016) 1px, transparent 1px), linear-gradient(90deg, rgba(164, 221, 183, 0.016) 1px, transparent 1px); background-size: 80px 80px; }
.hero-layout { display: grid; grid-template-columns: 1fr 1.06fr; gap: 50px; align-items: center; padding-top: 72px; padding-bottom: 67px; min-height: 645px; }
.eyebrow { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); line-height: 1.8; }
.status-dot, .tiny-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 10px; box-shadow: rgba(143, 234, 178, 0.267) 0px 0px 15px; }
.terminal-command { font-size: 12px; color: var(--muted); margin-top: 36px; margin-bottom: 18px; }
.terminal-command > span:first-child { color: var(--accent); }
.command-arrow { color: var(--accent); padding: 0px 12px; }
.hero-copy h1 { font-size: clamp(64px, 7.9vw, 112px); line-height: 1.01; letter-spacing: -0.085em; font-weight: 500; }
.surname { color: var(--accent); }
.title-cursor { font-weight: 300; animation: 2s steps(2) 0s infinite normal none running cursor-breathe; font-size: 0.77em; display: inline-block; transform: translateX(10px); }
.hero-tagline { font-size: 16px; line-height: 1.85; color: var(--muted); max-width: 43ch; margin-top: 27px; text-wrap: pretty; }
.work-link { display: inline-flex; gap: 25px; align-items: center; font-size: 12px; margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--accent); }
.link-arrow { font-size: 20px; color: var(--accent); transition: transform 0.25s; }
.work-link:hover .link-arrow { transform: translate(3px, 3px); }
.hero-art { min-width: 0px; color: var(--accent); }
.terminal-frame { background: rgba(13, 22, 18, 0.7); border: 1px solid rgba(65, 86, 73, 0.44); box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 80px; position: relative; }
.terminal-frame::before, .terminal-frame::after { content: ""; width: 6px; height: 6px; position: absolute; border: 1px solid var(--accent); }
.terminal-frame::before { left: -4px; top: -4px; }
.terminal-frame::after { right: -4px; bottom: -4px; }
.frame-header { height: 42px; display: flex; align-items: center; gap: 20px; padding: 0px 17px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(75, 100, 86); }
.window-dots i:first-child { background: var(--accent); }
.frame-annotation { margin-left: auto; font-size: 9px; opacity: 0.6; }
.diagram { width: 100%; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.frame-footer { display: flex; justify-content: space-between; gap: 12px; padding: 13px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.tiny-dot { width: 4px; height: 4px; margin-right: 7px; }
.art-caption { display: flex; justify-content: space-between; gap: 16px; margin-top: 17px; font-size: 8px; letter-spacing: 0.1em; color: var(--muted); }
.trace-base { stroke: rgb(97, 138, 112); stroke-width: 1; stroke-opacity: 0.38; }
.trace-out { stroke-opacity: 0.7; }
.trace-packet { stroke: rgb(173, 255, 207); stroke-width: 1.6; stroke-dasharray: 9, 540; animation: 5s linear 0s infinite normal none running signal-flow; }
.node-muted { fill: rgb(89, 114, 96); }
.node-pulse { fill: rgb(166, 239, 194); animation: 4s ease-in-out 0s infinite normal none running node-breathe; transform-box: fill-box; transform-origin: center center; }
.frame-ticks { stroke: rgb(101, 133, 113); stroke-width: 1; }
.diagram-label { fill: rgb(156, 174, 170); font-family: var(--mono); font-size: 9px; letter-spacing: 1px; }
.processor-mark { font-family: var(--mono); font-size: 23px; fill: rgb(176, 246, 208); }
.processor-orbit { transform-origin: 328px 235px; animation: 45s linear 0s infinite normal none running orbit-turn; }
.hero-bottom { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 20px; display: flex; justify-content: space-between; gap: 20px; font-size: 9px; color: var(--muted); letter-spacing: 0.08em; }
.hero-bottom a { white-space: nowrap; }
.hero-bottom a span { margin-left: 12px; color: var(--accent); }
.work-section { padding-top: 86px; padding-bottom: 62px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 35px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2 { font-size: 35px; font-weight: 400; letter-spacing: -0.06em; line-height: 1.2; }
.section-count { font-size: 10px; color: var(--muted); padding-bottom: 3px; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 30px 23px; }
.project-card { min-width: 0px; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.3s, transform 0.3s; position: relative; }
.project-card:hover { border-color: rgb(136, 191, 157); transform: translateY(-4px); }
.project-image { aspect-ratio: 1.6 / 1; overflow: hidden; position: relative; background: rgb(225, 227, 223); }
.project-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.65s, filter 0.65s; filter: saturate(0.75); }
.project-card:hover img { transform: scale(1.025); filter: saturate(1); }
.project-image::after { content: ""; position: absolute; inset: 0px; border: 7px solid rgba(7, 17, 11, 0.07); pointer-events: none; }
.image-corner { position: absolute; width: 17px; height: 17px; z-index: 1; opacity: 0; transition: opacity 0.2s; }
.image-corner.tl { top: 10px; left: 10px; border-top: 1px solid white; border-left: 1px solid white; }
.image-corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid white; border-right: 1px solid white; }
.project-card:hover .image-corner { opacity: 1; }
.project-caption { display: flex; align-items: baseline; gap: 13px; padding: 18px 14px; min-height: 90px; border-top: 1px solid var(--line); }
.project-index { font-size: 9px; color: var(--accent); font-variant-numeric: tabular-nums; }
.project-caption h3 { font-size: 12px; line-height: 1.65; font-weight: 400; letter-spacing: -0.025em; flex: 1 1 0%; text-wrap: pretty; }
.card-cross { flex: 0 0 14px; width: 14px; height: 14px; align-self: center; color: rgb(115, 151, 128); opacity: 0.5; }
.end-index { display: flex; justify-content: space-between; gap: 15px; margin-top: 35px; padding-block: 16px; border-top: 1px solid var(--line); font-size: 8px; color: var(--muted); letter-spacing: 0.1em; }
.contact-section { border-top: 1px solid var(--line); padding-top: 58px; padding-bottom: 75px; }
.contact-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 27px; }
.contact-star { font-size: 49px; line-height: 1; color: var(--accent); animation: 60s linear 0s infinite normal none running orbit-turn; }
.contact-section h2 { font-size: clamp(28px, 4.3vw, 57px); font-weight: 400; line-height: 1.3; letter-spacing: -0.065em; }
.contact-section h2 span { color: var(--muted); }
.email-link { display: inline-flex; align-items: center; gap: 55px; margin-top: 32px; font-size: 18px; padding-bottom: 9px; border-bottom: 1px solid var(--accent); color: var(--accent); max-width: 100%; }
.email-link span { transition: transform 0.2s; }
.email-link:hover span { transform: translate(3px, -3px); }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-block: 26px; border-top: 1px solid var(--line); font-size: 9px; color: var(--muted); }
.enhanced .reveal { transition: opacity 0.6s, transform 0.6s; }
.enhanced .reveal:not(.visible) { opacity: 0; transform: translateY(16px); }
[data-motion="paused"] *, [data-motion="paused"] ::before, [data-motion="paused"] ::after { animation-play-state: paused !important; }
[data-motion="paused"] { scroll-behavior: auto; }
[data-motion="paused"] .reveal { transition: none; }
@keyframes signal-flow { 
  100% { stroke-dashoffset: -549; }
}
@keyframes orbit-turn { 
  100% { transform: rotate(360deg); }
}
@keyframes cursor-breathe { 
  50% { opacity: 0.25; }
}
@keyframes node-breathe { 
  50% { opacity: 0.5; transform: scale(0.7); }
}
@media (min-width: 1600px) {
.hero-layout { min-height: 725px; }
}
@media (max-width: 1100px) {
.wrap { width: calc(100% - 64px); }
.hero-layout { gap: 25px; }
.site-nav { gap: 22px; }
.site-nav nav { gap: 24px; }
.hero-copy h1 { font-size: 83px; }
.eyebrow { font-size: 9px; letter-spacing: 0.06em; }
.hero-tagline { font-size: 14px; }
.hero-layout { min-height: 610px; }
.project-caption { padding: 14px 12px; gap: 9px; }
.project-caption h3 { font-size: 11px; }
.project-grid { gap: 22px 16px; }
.art-caption { font-size: 7px; }
.frame-footer { font-size: 8px; }
}
@media (max-width: 800px) {
.site-nav { height: auto; min-height: 98px; flex-wrap: wrap; gap: 16px; padding-block: 22px; }
.site-nav nav { font-size: 11px; gap: 22px; }
.motion-toggle { margin-left: auto; }
.hero-layout { grid-template-columns: 1fr; gap: 40px; padding-top: 50px; padding-bottom: 42px; }
.hero-copy { max-width: 590px; }
.hero-copy h1 { font-size: 88px; }
.hero-copy h1 br { display: none; }
.hero-copy .surname { margin-left: 22px; }
.terminal-command { margin-top: 27px; }
.hero-tagline { font-size: 16px; max-width: 48ch; margin-top: 24px; }
.hero-art { width: min(100%, 550px); margin-inline: auto; }
.hero-bottom { font-size: 8px; align-items: center; }
.hero-bottom > span { max-width: 65%; }
.hero-bottom a { white-space: normal; text-align: right; }
.work-section { padding-top: 59px; }
.section-heading h2 { font-size: 30px; }
.section-count { max-width: 155px; font-size: 9px; }
.project-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px 19px; }
.project-caption h3 { font-size: 12px; }
.project-caption { min-height: 86px; }
.site-footer { font-size: 8px; }
}
@media (max-width: 540px) {
.wrap { width: calc(100% - 36px); }
.site-nav { gap: 17px; padding-block: 21px; min-height: 105px; }
.wordmark { font-size: 14px; gap: 8px; }
.brand-glyph { font-size: 20px; }
.site-nav nav { gap: 15px; order: 3; width: 100%; justify-content: space-between; font-size: 10px; }
.motion-toggle { padding: 7px 9px; font-size: 9px; gap: 6px; }
.hero-layout { padding-top: 35px; gap: 33px; }
.hero-copy h1 { font-size: clamp(65px, 17vw, 86px); }
.hero-copy h1 br { display: block; }
.hero-copy .surname { margin-left: 0px; }
.eyebrow { font-size: 8px; letter-spacing: 0.08em; }
.terminal-command { font-size: 10px; margin-top: 24px; margin-bottom: 18px; }
.hero-tagline { font-size: 14px; line-height: 1.85; margin-top: 20px; }
.work-link { font-size: 11px; margin-top: 24px; }
.hero-art { width: 100%; }
.frame-header { height: 34px; font-size: 9px; padding-inline: 12px; }
.frame-footer { font-size: 7px; padding: 10px 12px; }
.frame-annotation { font-size: 8px; }
.art-caption { font-size: 6.5px; letter-spacing: 0.03em; gap: 8px; margin-top: 13px; }
.hero-bottom { padding-block: 16px; font-size: 7px; gap: 20px; line-height: 1.8; }
.hero-bottom > span { max-width: 65%; }
.hero-bottom a span { margin-left: 4px; }
.work-section { padding-top: 43px; padding-bottom: 38px; }
.section-heading { margin-bottom: 25px; gap: 18px; align-items: flex-end; }
.section-heading h2 { font-size: 26px; }
.section-heading .eyebrow { font-size: 8px; margin-bottom: 7px; }
.section-count { font-size: 8px; max-width: 95px; }
.project-grid { grid-template-columns: 1fr; gap: 23px; }
.project-caption { min-height: 69px; padding: 16px; }
.project-caption h3 { font-size: 12px; }
.project-index { font-size: 9px; }
.end-index { font-size: 6px; margin-top: 25px; letter-spacing: 0.05em; }
.end-index > span:nth-child(2) { display: none; }
.contact-section { padding-top: 31px; padding-bottom: 44px; }
.contact-section h2 { font-size: clamp(25px, 6.8vw, 36px); }
.contact-top { margin-bottom: 20px; }
.contact-star { font-size: 32px; }
.email-link { font-size: 14px; gap: 25px; margin-top: 27px; }
.site-footer { flex-wrap: wrap; gap: 12px; font-size: 7px; padding-block: 21px; }
.site-footer > span:nth-child(2) { display: none; }
.brand-subtitle { font-size: 6px; letter-spacing: 0.12em; }
.contact-orbit { width: 53px; height: 53px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
*, ::before, ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.enhanced .reveal:not(.visible) { opacity: 1; transform: none; }
.project-card:hover, .project-card:hover img { transform: none; }
}