:root {
  --ink: #eeeae2;
  --muted: #96938d;
  --red: #ff2b22;
  --black: #070707;
  --line: rgba(238, 234, 226, .2);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--black);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; }

#signal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  opacity: .68;
}
.grain, .scanlines { position: fixed; inset: 0; pointer-events: none; }
.grain {
  z-index: 20;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.scanlines {
  z-index: 19;
  opacity: .11;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #000 3px 4px);
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px 32px;
  mix-blend-mode: difference;
}
.wordmark { font-size: 22px; font-weight: 900; text-decoration: none; letter-spacing: -.08em; }
.wordmark span { color: var(--red); }
nav { display: flex; gap: 28px; }
nav a, .signal-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.signal-toggle { justify-self: end; padding: 0; color: inherit; border: 0; background: none; cursor: pointer; }
.status-light { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 9px var(--red); }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 110px 6vw 65px; }
.camera-data { position: absolute; top: 105px; left: 6vw; right: 6vw; display: flex; justify-content: space-between; color: #bbb; font: 10px monospace; letter-spacing: .12em; }
.rec { color: var(--ink); }
.rec i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--red); animation: blink 1s step-end infinite; }
.hero-copy { width: 100%; }
.eyebrow { margin: 0 0 20px; color: var(--red); font: 700 11px monospace; letter-spacing: .18em; text-transform: uppercase; }
h1, h2 { margin: 0; font-weight: 900; line-height: .77; letter-spacing: -.075em; text-transform: uppercase; }
h1 { max-width: 1250px; font-size: clamp(78px, 16vw, 230px); }
.statement { margin: 38px 0 0 52%; font-size: clamp(19px, 2vw, 31px); line-height: 1.15; letter-spacing: -.04em; }
.enter-frame { position: absolute; right: 6vw; bottom: 35px; display: flex; gap: 18px; align-items: center; font: 700 10px monospace; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; }
.enter-frame i { color: var(--red); font-size: 22px; font-style: normal; }

.glitch.is-glitching { animation: shake .16s steps(2) 2; text-shadow: -7px 0 #00e5ff, 7px 0 var(--red); }
.content-section { position: relative; min-height: 90vh; padding: 130px 6vw 90px; border-top: 1px solid var(--line); background: rgba(7, 7, 7, .86); }
.section-index { margin-bottom: 80px; color: var(--muted); font: 10px monospace; letter-spacing: .15em; }
.profile-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 7vw; }
.profile h2 { font-size: clamp(55px, 8vw, 122px); }
.profile-copy { max-width: 520px; align-self: end; font-size: clamp(19px, 2vw, 29px); line-height: 1.32; letter-spacing: -.025em; }
.profile-copy .small { margin-top: 32px; color: var(--muted); font: 11px/1.5 monospace; letter-spacing: .1em; text-transform: uppercase; }
.monitor { position: relative; grid-column: 2; aspect-ratio: 16/10; overflow: hidden; border: 1px solid #343434; background: #101010; display: grid; place-items: center; font: 10px monospace; letter-spacing: .2em; }
.monitor-noise { position: absolute; inset: 0; opacity: .3; background: repeating-radial-gradient(ellipse at center, #aaa 0 1px, #111 1px 3px); animation: noise-shift .12s steps(2) infinite; }
.monitor span, .monitor small { z-index: 1; }
.monitor small { position: absolute; right: 12px; bottom: 10px; color: var(--muted); }

.location { min-height: auto; overflow: hidden; }
.location-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 6vw; align-items: center; }
.location h2 { font-size: clamp(54px, 7vw, 110px); color: var(--red); }
.location-note { max-width: 230px; margin-top: 25px; color: var(--muted); font: 9px/1.5 monospace; letter-spacing: .13em; text-transform: uppercase; }
.signal-map { position: relative; margin: 0; overflow: hidden; border: 1px solid var(--line); background: rgba(255, 255, 255, .018); }
.signal-map::before, .signal-map::after { content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 2px; pointer-events: none; }
.signal-map::before { top: 28%; background: rgba(0, 229, 255, .3); animation: map-tear 4.3s steps(1) infinite; }
.signal-map::after { top: 67%; background: rgba(255, 43, 34, .35); animation: map-tear 5.7s steps(1) reverse infinite; }
.signal-map svg { display: block; width: 100%; height: auto; }
.land { fill: rgba(238, 234, 226, .07); stroke: rgba(238, 234, 226, .44); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.map-marker line { stroke: rgba(255, 43, 34, .48); stroke-width: 1; }
.marker-core { fill: var(--red); filter: drop-shadow(0 0 7px var(--red)); }
.marker-pulse { fill: none; stroke: var(--red); stroke-width: 2; transform-origin: center; animation: marker-pulse 1.8s ease-out infinite; }
.signal-map figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 10px 13px; border-top: 1px solid var(--line); color: var(--muted); font: 8px monospace; letter-spacing: .13em; text-transform: uppercase; }

.works { min-height: auto; }
.work-list { border-top: 1px solid var(--line); }
.work { display: grid; grid-template-columns: 90px 1fr auto; align-items: baseline; gap: 25px; padding: 25px 0; border-bottom: 1px solid var(--line); transition: padding .25s, color .25s; }
.work:hover { padding-left: 12px; color: var(--red); }
.work-year, .work-role { color: var(--muted); font: 10px monospace; letter-spacing: .12em; text-transform: uppercase; }
.work-title { font-size: clamp(30px, 5vw, 72px); font-weight: 900; letter-spacing: -.055em; text-transform: uppercase; }

.contact { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.contact .section-index { position: absolute; top: 130px; }
.contact h2 { font-size: clamp(90px, 19vw, 270px); }
.contact h2 span { color: var(--red); }
.contact-link { width: fit-content; margin-top: 60px; font-size: clamp(20px, 3vw, 42px); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 44px; }
.social-links a { font: 700 11px monospace; letter-spacing: .12em; text-transform: uppercase; text-underline-offset: 5px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 6vw; border-top: 1px solid var(--line); background: var(--black); color: var(--muted); font: 9px monospace; letter-spacing: .12em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.signal-off #signal, .signal-off .grain, .signal-off .scanlines, .signal-off .monitor-noise { display: none; }

@keyframes blink { 50% { opacity: .2; } }
@keyframes shake { 25% { transform: translate(-5px, 2px); } 75% { transform: translate(5px, -2px); } }
@keyframes noise-shift { to { transform: translate(3px, -2px) scale(1.02); } }
@keyframes marker-pulse { 0% { opacity: .9; transform: scale(.25); } 75%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes map-tear { 0%, 88%, 100% { transform: translateX(0); opacity: .2; } 89% { transform: translateX(22px); opacity: 1; } 91% { transform: translateX(-13px); } }

@media (max-width: 720px) {
  .site-header { grid-template-columns: 1fr auto; padding: 20px; }
  nav { display: none; }
  .hero { padding-inline: 20px; }
  .camera-data { left: 20px; right: 20px; }
  .statement { margin-left: 0; }
  .profile-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .monitor { grid-column: 1; }
  .content-section { padding-inline: 20px; }
  .work { grid-template-columns: 50px 1fr; }
  .work-role { grid-column: 2; }
  footer { flex-direction: column; padding-inline: 20px; }
}

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