@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&family=Geist+Mono:wght@400&display=swap');
/* Demo licence: personal use only. */
@font-face { font-family: 'Neon Goodshine'; src: url('/fonts/neon-goodshine.otf') format('opentype'); font-display: swap; }

:root { color-scheme: dark; font-family: 'Geist', system-ui, sans-serif; color: var(--text); background: #111211; font-synthesis: none; --red: #db4438; --text: #c8f7ff; --muted: #7fbccb; --glow: 0 0 2px #f1ffff, 0 0 14px #57cbe57a, 0 0 42px #31a2c13d;
  --pixel-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cg fill='%23320807'%3E%3Crect x='5' width='6' height='1'/%3E%3Crect x='3' y='1' width='10' height='1'/%3E%3Crect x='2' y='2' width='12' height='1'/%3E%3Crect x='1' y='3' width='14' height='2'/%3E%3Crect y='5' width='16' height='6'/%3E%3Crect x='1' y='11' width='14' height='2'/%3E%3Crect x='2' y='13' width='12' height='1'/%3E%3Crect x='3' y='14' width='10' height='1'/%3E%3Crect x='5' y='15' width='6' height='1'/%3E%3C/g%3E%3Cg fill='%23db4438'%3E%3Crect x='5' y='1' width='6' height='1'/%3E%3Crect x='3' y='2' width='10' height='1'/%3E%3Crect x='2' y='3' width='12' height='2'/%3E%3Crect x='1' y='5' width='14' height='6'/%3E%3Crect x='2' y='11' width='12' height='2'/%3E%3Crect x='3' y='13' width='10' height='1'/%3E%3Crect x='5' y='14' width='6' height='1'/%3E%3C/g%3E%3Cg fill='%239c221b'%3E%3Crect x='12' y='5' width='3' height='5'/%3E%3Crect x='1' y='10' width='14' height='1'/%3E%3Crect x='2' y='11' width='12' height='2'/%3E%3Crect x='3' y='13' width='10' height='1'/%3E%3Crect x='5' y='14' width='6' height='1'/%3E%3C/g%3E%3Cg fill='%23ff8a74'%3E%3Crect x='4' y='2' width='4' height='1'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='2' y='5' width='1' height='2'/%3E%3C/g%3E%3Crect x='4' y='3' width='1' height='1' fill='%23ffe3dc'/%3E%3C/svg%3E");
  --pixel-well: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cg fill='%2346474c'%3E%3Crect x='9' width='6' height='1'/%3E%3Crect x='7' y='1' width='10' height='1'/%3E%3Crect x='5' y='2' width='14' height='1'/%3E%3Crect x='4' y='3' width='16' height='1'/%3E%3Crect x='3' y='4' width='18' height='1'/%3E%3Crect x='2' y='5' width='20' height='2'/%3E%3Crect x='1' y='7' width='22' height='2'/%3E%3Crect y='9' width='24' height='6'/%3E%3Crect x='1' y='15' width='22' height='2'/%3E%3Crect x='2' y='17' width='20' height='2'/%3E%3Crect x='3' y='19' width='18' height='1'/%3E%3Crect x='4' y='20' width='16' height='1'/%3E%3Crect x='5' y='21' width='14' height='1'/%3E%3Crect x='7' y='22' width='10' height='1'/%3E%3Crect x='9' y='23' width='6' height='1'/%3E%3C/g%3E%3Cg fill='%23060708'%3E%3Crect x='9' y='1' width='6' height='1'/%3E%3Crect x='7' y='2' width='10' height='1'/%3E%3Crect x='5' y='3' width='14' height='1'/%3E%3Crect x='4' y='4' width='16' height='1'/%3E%3Crect x='3' y='5' width='18' height='2'/%3E%3Crect x='2' y='7' width='20' height='2'/%3E%3Crect x='1' y='9' width='22' height='3'/%3E%3C/g%3E%3Cg fill='%231f2024'%3E%3Crect x='1' y='12' width='22' height='3'/%3E%3Crect x='2' y='15' width='20' height='2'/%3E%3Crect x='3' y='17' width='18' height='2'/%3E%3Crect x='4' y='19' width='16' height='1'/%3E%3Crect x='5' y='20' width='14' height='1'/%3E%3Crect x='7' y='21' width='10' height='1'/%3E%3Crect x='9' y='22' width='6' height='1'/%3E%3C/g%3E%3Cg fill='%230d0e10'%3E%3Crect x='2' y='12' width='20' height='3'/%3E%3Crect x='3' y='15' width='18' height='2'/%3E%3Crect x='4' y='17' width='16' height='1'/%3E%3Crect x='5' y='18' width='14' height='1'/%3E%3Crect x='6' y='19' width='12' height='1'/%3E%3Crect x='7' y='20' width='10' height='1'/%3E%3Crect x='9' y='21' width='6' height='1'/%3E%3C/g%3E%3C/svg%3E"); }
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 78% 46%, #20221f55, transparent 54%), linear-gradient(110deg, #121411, #141513 48%, #101210); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8; opacity: .035; 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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: none; }
html { cursor: url('/cursors/crosshair.png') 20 20, crosshair; cursor: image-set(url('/cursors/crosshair.png') 1x, url('/cursors/crosshair@2x.png') 2x) 20 20, crosshair; }
button, a, input[type=range] { cursor: url('/cursors/hand.png') 8 6, pointer; cursor: image-set(url('/cursors/hand.png') 1x, url('/cursors/hand@2x.png') 2x) 8 6, pointer; }
button:disabled, [inert] button, .tuning :is(button, a, input):not(.volume-control *) { cursor: inherit; }
[hidden] { display: none !important; }
.room-glow { position: absolute; top: 15%; left: 5%; width: 40%; height: 300px; background: radial-gradient(ellipse, #719ea20b, transparent 65%); pointer-events: none; }
.topbar { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 35px 5%; }
.channel-id, .placeholder-label, #volume-label { font-family: 'Geist Mono', ui-monospace, monospace; }
.location { font-size: 12px; letter-spacing: 1.5px; color: #858780; }
.location span { margin-left: 20px; color: #4e514b; font-size: 9px; letter-spacing: .8px; }
.volume-control { display: flex; align-items: center; height: 56px; background: #000a; border: 2px solid var(--text); color: var(--text); box-shadow: 0 0 12px #57cbe580, inset 0 0 10px #57cbe540; }
.volume { display: grid; place-items: center; width: 64px; height: 100%; padding: 0; border: 0; background: none; color: inherit; }
.volume svg { width: 38px; height: 32px; filter: drop-shadow(0 0 4px #57cbe5b0); }
:is(.volume, .mute-toggle) .mute-x, :is(.volume, .mute-toggle)[data-level='low'] .wave-large, :is(.volume, .mute-toggle)[data-level='off'] :is(.wave-small, .wave-large) { display: none; }
:is(.volume, .mute-toggle)[data-level='off'] .mute-x { display: inline; }
.socials .mute-toggle { display: none; }
.volume:hover { color: #f1ffff; }
.volume-slider { display: flex; align-items: center; gap: 10px; width: 0; overflow: hidden; opacity: 0; transition: width .25s ease, opacity .2s ease, padding .25s ease; }
.volume-control:hover .volume-slider, .volume-control:focus-within .volume-slider { width: 200px; padding-right: 14px; opacity: 1; }
#volume-label { width: 44px; font-size: 15px; text-align: right; }
#volume-range { --fill: 50%; flex: 1; min-width: 0; height: 16px; margin: 0; background: none; appearance: none; -webkit-appearance: none; }
#volume-range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--text) var(--fill), #a6e6f230 var(--fill)); }
#volume-range::-moz-range-track { height: 6px; background: linear-gradient(90deg, var(--text) var(--fill), #a6e6f230 var(--fill)); }
#volume-range::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 16px; margin-top: -5px; border: 0; border-radius: 0; background: var(--text); }
#volume-range::-moz-range-thumb { width: 8px; height: 16px; border: 0; border-radius: 0; background: var(--text); }
#volume-range:focus-visible, .volume:focus-visible { outline: none; }
.volume:focus-visible { color: #f1ffff; }
#volume-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #0009, 0 0 0 4px #bbdfe3; }
#volume-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #0009, 0 0 0 4px #bbdfe3; }
.stage { max-width: 1240px; margin: 0 auto; padding: 30px 48px 36px clamp(48px, 100vw - 1100px, 112px); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 72px; align-items: center; min-height: calc(100svh - 174px); }
.introduction { width: 100%; max-width: 720px; }
.name-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
h1 { font-family: 'Neon Goodshine', 'Geist', sans-serif; font-size: 56px; font-weight: 400; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; margin: 0; color: var(--text); text-shadow: var(--glow); }
h1 { animation: neon 12s ease-in-out infinite; }
.work.surge :is(.section-label, .year, .company, .title, .dates), .volume-control.surge { animation: surge 1.4s ease-out; }
@keyframes surge { 0%, 100% { filter: none; } 18% { filter: brightness(1.35) drop-shadow(0 0 4px #c8f7ff80) drop-shadow(0 0 12px #57cbe566); } }
/* Starts at full glow and decays over the same 2.6s as the light spreading across the room (main.js). */
.work.surge-first :is(.section-label, .year, .company, .title, .dates), .volume-control.surge-first { animation: surge-first 2.6s linear; }
@keyframes surge-first { 0%, 12% { filter: brightness(2.1) drop-shadow(0 0 3px #fff) drop-shadow(0 0 12px #c8f7ff) drop-shadow(0 0 30px #57cbe5cc); } 55% { filter: brightness(1.45) drop-shadow(0 0 2px #fffc) drop-shadow(0 0 8px #c8f7ffb3) drop-shadow(0 0 18px #57cbe588); } 100% { filter: none; } }
@keyframes neon {
  0%, 12.8%, 14.2%, 15.4%, 16%, 50%, 62.8%, 66%, 67%, 85%, 86%, 100% { color: var(--text); text-shadow: var(--glow); }
  6.4%, 56.4% { color: #fff; text-shadow: 0 0 3px #fff, 0 0 10px #fff, 0 0 26px #57cbe5, 0 0 70px #31a2c1b3, 0 0 120px #31a2c166; }
  14.7%, 15.7%, 66.5%, 85.5% { color: #4d6b72; text-shadow: none; }
}
.socials { display: flex; align-items: center; gap: 6px; margin: -8px -8px -8px 0; }
.social { display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; border: 0; background: none; color: var(--muted); transition: color .15s, filter .15s; }
.social svg { width: 24px; height: 24px; }
.name-tag { position: fixed; left: 0; top: 0; z-index: 20; display: grid; gap: 4px; padding: 9px 12px; font: 400 12px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .08em; color: var(--text); background: #05080bea; border: 1px solid #a6e6f259; box-shadow: 0 0 14px #57cbe51f; pointer-events: none; opacity: 0; transition: opacity .12s; }
.name-tag b { font-weight: 400; color: var(--muted); }
.name-tag em { font-style: normal; }
.name-tag .glitch { display: inline-block; width: calc(1ch + .08em); overflow: hidden; text-align: center; vertical-align: bottom; text-shadow: 0 0 6px currentColor; }
.name-tag.visible { opacity: 1; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; background: #5dff8a; box-shadow: 0 0 6px #5dff8a; animation: live-blink 1.2s steps(1) infinite; }
@keyframes live-blink { 50% { opacity: .25; } }
.social:hover, .social:focus-visible { color: var(--text); filter: drop-shadow(0 0 4px #57cbe5aa); }
.work { position: relative; margin-top: 28.5px; }
.section-label { font-size: 28px; line-height: 1; font-weight: 500; margin: 0 0 17.5px; color: var(--text); text-shadow: 0 0 10px #57cbe566; }
.experience { width: 100%; border: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.15fr) 132px 24px; gap: 18px; align-items: center; text-align: left; padding: 16px 0; background: transparent; color: var(--text); }
.year { font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.company { font-weight: 500; font-size: 19px; line-height: 24px; }
.title { font-size: 17px; color: var(--muted); white-space: nowrap; }
.dates { font-size: 16px; color: var(--muted); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.selection, .power { background: var(--pixel-button) center / 100% 100% no-repeat; image-rendering: pixelated; }
.selection { justify-self: end; width: 24px; height: 24px; opacity: .85; transition: opacity .15s, filter .15s; }
.company { transition: text-shadow .15s; }
.experience:hover .company { text-shadow: 0 0 1px #f1ffff, 0 0 10px #57cbe5b0; }
.experience:hover .selection { opacity: 1; filter: brightness(1.15); }
.experience { position: relative; isolation: isolate; }
.experience::before { content: ''; position: absolute; inset: 2px -16px; z-index: -1; background: #57cbe514; box-shadow: inset 3px 0 0 var(--text), 0 0 18px #57cbe51a; opacity: 0; transition: opacity .15s; pointer-events: none; }
.experience:hover::before, .experience:focus-visible::before { opacity: 1; }
.experience:focus-visible { outline: none; }
.experience:active .selection { transform: translateY(1px); }
.tuning .experience:active .selection, .tuning .power:active { transform: none; }
.tuning .power:active { filter: drop-shadow(0 calc(var(--u) * 4.5) 0 #000a); }
.experience[aria-pressed='true'] .selection { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 4px #ef3822aa); }
.section-label, .experience-list { opacity: .12; transition: opacity .45s; }
.powered .section-label, .powered .experience-list { opacity: 1; transition: opacity 500ms ease-out; }
/* TV geometry follows the 460 × 680 "Portrait TV player" Figma frame; --u is one Figma pixel. */
.television-area { position: relative; width: 100%; max-width: 260px; justify-self: end; container-type: inline-size; }
/* --px is one art pixel (matches the 16-px power button sprite); outlines and corner steps snap to it. */
.television { --u: calc(100cqw / 460); --px: calc(var(--u) * 4.5); --step: calc(var(--px) * 2); position: relative; isolation: isolate; aspect-ratio: 460 / 680; display: flex; flex-direction: column; padding: calc(var(--u) * 18); filter: drop-shadow(var(--px) 0 0 #111214) drop-shadow(calc(var(--px) * -1) 0 0 #111214) drop-shadow(0 var(--px) 0 #111214) drop-shadow(0 calc(var(--px) * -1) 0 #111214) drop-shadow(0 calc(var(--px) * 3) 0 #0009); }
.television::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#5a5b61 0 var(--px), #404146 var(--px) 50%, #36373c 50% calc(100% - var(--px) * 2), #27282c calc(100% - var(--px) * 2)); }
.television::before, .television::after, .bezel, .glass { clip-path: polygon(0 calc(var(--step) * 2), var(--step) calc(var(--step) * 2), var(--step) var(--step), calc(var(--step) * 2) var(--step), calc(var(--step) * 2) 0, calc(100% - var(--step) * 2) 0, calc(100% - var(--step) * 2) var(--step), calc(100% - var(--step)) var(--step), calc(100% - var(--step)) calc(var(--step) * 2), 100% calc(var(--step) * 2), 100% calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step)), calc(100% - var(--step) * 2) calc(100% - var(--step)), calc(100% - var(--step) * 2) 100%, calc(var(--step) * 2) 100%, calc(var(--step) * 2) calc(100% - var(--step)), var(--step) calc(100% - var(--step)), var(--step) calc(100% - var(--step) * 2), 0 calc(100% - var(--step) * 2)); }
/* Unpowered, the casing sits in shadow; power-on lifts it to a lighter grey. */
.television::before { transition: filter .9s ease; }
.powered .television::before { filter: brightness(1.18); }
.television::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #050608; opacity: .5; transition: opacity .9s ease; }
.powered .television::after { opacity: 0; }
.bezel { --step: var(--px); position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; padding: calc(var(--u) * 9); background: #1c1d20; box-shadow: inset 0 var(--px) 0 #0b0b0d, inset 0 calc(var(--px) * -1) 0 #2c2d31; }
.glass { --step: calc(var(--px) / 2); position: relative; flex: 1; overflow: hidden; background: #060707; isolation: isolate; }
.glass::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: repeating-linear-gradient(0deg, #00000030 0 calc(var(--px) / 2), transparent calc(var(--px) / 2) var(--px)); }
.off-screen { position: absolute; inset: 0; display: grid; place-items: center; font-family: Georgia, 'Times New Roman', serif; color: #e8eeec; font-size: calc(var(--u) * 34); letter-spacing: .08em; text-shadow: 0 0 2px #ffffffdd, 0 0 calc(var(--u) * 10) #dff6ffd4, 0 0 calc(var(--u) * 26) #bfe9ff99, 0 0 calc(var(--u) * 60) #8fd3ff64; }
.power-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 28); z-index: 1; text-align: center; font: 400 calc(var(--u) * 20)/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; color: var(--text); text-shadow: 0 0 2px #f1ffff, 0 0 calc(var(--u) * 12) #57cbe5b0; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; pointer-events: none; }
body.hinting:not(.powered) .power-hint { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; animation: hint-blink 1.1s steps(1) .4s infinite; }
@keyframes hint-blink { 50% { opacity: .2; } }
.tv-controls { flex: none; height: calc(var(--u) * 136); display: grid; place-items: center; margin-top: calc(var(--u) * 10); background: #2c2d31; box-shadow: inset 0 var(--px) 0 #1b1c1f, inset 0 calc(var(--px) * -1) 0 #3b3c41; }
.power-well { position: relative; z-index: 2; display: grid; place-items: center; width: calc(var(--px) * 24); aspect-ratio: 1; background: var(--pixel-well) center / 100% 100% no-repeat; image-rendering: pixelated; }
.power { position: relative; width: calc(var(--u) * 72); aspect-ratio: 1; padding: 0; border: 0; filter: drop-shadow(0 calc(var(--u) * 4.5) 0 #000a); transition: filter .15s; }
.power:hover, .power:focus-visible { filter: drop-shadow(0 calc(var(--u) * 4.5) 0 #000a) brightness(1.12); }
.power:active { transform: translateY(calc(var(--u) * 4.5)); filter: none; }
body:not(.powered) .power { animation: power-flash 1.1s steps(1) infinite; }
@keyframes power-flash { 0% { filter: drop-shadow(0 calc(var(--u) * 4.5) 0 #000a) brightness(2.2) drop-shadow(0 0 calc(var(--u) * 8) #fff0ea) drop-shadow(0 0 calc(var(--u) * 22) #ff5a48) drop-shadow(0 0 calc(var(--u) * 50) #ff3420) drop-shadow(0 0 calc(var(--u) * 100) #ff2a1acc); } 50%, 100% { filter: drop-shadow(0 calc(var(--u) * 4.5) 0 #000a) brightness(.65); } }
@media (prefers-reduced-motion: reduce) { body:not(.powered) .power { filter: drop-shadow(0 calc(var(--u) * 4.5) 0 #000a) brightness(1.5) drop-shadow(0 0 calc(var(--u) * 6) #ffd2c8) drop-shadow(0 0 calc(var(--u) * 20) #ff4a3a) drop-shadow(0 0 calc(var(--u) * 40) #ff2a1aaa); } }
.thrusters { --px: calc(100cqw / 460 * 4.5); position: absolute; top: 100%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 11%; }
.thruster { display: block; width: calc(var(--px) * 28); height: calc(var(--px) * 32); }
.flame { opacity: 0; }
.flame-b { opacity: 1; }
.thruster { filter: drop-shadow(0 calc(var(--px) * 2) calc(var(--px) * 3) #57cbe566); transition: filter .9s ease; }
body:not(.powered) .thruster { filter: drop-shadow(0 calc(var(--px) * 2) calc(var(--px) * 3) #57cbe566) brightness(.55); }
.flame-a { animation: flame-a .36s steps(1) infinite; }
.flame-b { animation: flame-b .36s steps(1) infinite; }
.flame-c { animation: flame-c .36s steps(1) infinite; }
.thruster:last-child .flame { animation-delay: -.18s; }
.television-area { animation: hover 2.4s ease-in-out infinite; }
@keyframes flame-a { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes flame-b { 0%, 50% { opacity: 0; } 25%, 75%, 100% { opacity: 1; } }
@keyframes flame-c { 0%, 75%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.channel { height: 100%; padding: calc(var(--u) * 20); display: flex; flex-direction: column; gap: calc(var(--u) * 16); background: radial-gradient(ellipse at 50% 40%, #223028, #18221c 75%); }
.channel-id { flex-shrink: 0; margin-bottom: calc(var(--u) * -4); font-size: calc(var(--u) * 14); line-height: 1; color: #d3e2cc; letter-spacing: .14em; text-shadow: 0 0 calc(var(--u) * 8) #b8f0a833; }
.channel-visual { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(ellipse at 50% 35%, #65725d2b, #111a144a); border: 1px solid #aabb9d12; }
.placeholder-mark { font-size: calc(var(--u) * 96); font-weight: 400; letter-spacing: -.08em; color: #a9b69d36; line-height: 1.1; }
.placeholder-label { margin-top: calc(var(--u) * 12); color: #9da993; font-size: calc(var(--u) * 12); letter-spacing: .6px; }
.channel-caption { position: relative; z-index: 7; flex: none; box-sizing: content-box; font-size: calc(var(--u) * 16.5); font-weight: 500; color: #f3f8f0; margin: 0 calc(var(--u) * -4); padding: calc(var(--u) * 10) calc(var(--u) * 14); line-height: 1.4; min-height: calc(var(--u) * 16.5 * 1.4 * 2); letter-spacing: .005em; text-wrap: balance; background: #0a110dd9; box-shadow: inset 0 0 0 1px #ffffff0d; text-shadow: 0 1px 0 #000, 0 0 calc(var(--u) * 6) #8fe39a26; -webkit-font-smoothing: antialiased; }
.channel-caption:empty { display: none; }
.tuning .channel-caption, .tuning .channel-role { visibility: hidden; }
.channel-role { display: none; flex-shrink: 0; margin-top: calc(var(--u) * -10); font-size: calc(var(--u) * 15); line-height: 1.2; color: #b9c8b2; text-shadow: 0 0 calc(var(--u) * 8) #b8f0a833; }
.channel-visual { position: relative; overflow: hidden; }
.channel-visual:has(img) { border: 0; box-shadow: 0 0 0 1px #0008, 0 0 calc(var(--u) * 18) #9fe0a01a; }
.channel-visual:has(img)::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 calc(var(--u) * 40) #000a, inset 0 0 0 1px #ffffff14; transition: background-color .2s, box-shadow .2s; }
a.channel-visual:hover::after, a.channel-visual:focus-visible::after { background-color: #57cbe51f; box-shadow: inset 0 0 calc(var(--u) * 40) #000a, inset 0 0 0 1px #57cbe566; }
.channel-visual img { transition: filter .2s; }
a.channel-visual:hover img, a.channel-visual:focus-visible img { filter: brightness(1.08); }
.channel-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.channel-visual[data-channel='fincapes'] img { object-position: 50% 52%; transform: scale(1.2); transform-origin: 50% 52%; }
.channel-visual[data-channel='home'] img { object-position: 43% 50%; transform: translateY(-10%) scale(1.7); transform-origin: 43% 64%; }
.channel:has(> [data-channel='home']) { padding: 0; gap: 0; }
.channel:has(> [data-channel='home']) .channel-caption { display: none; }
.channel-visual[data-channel='home'] { box-shadow: none; }
.channel-visual[data-channel='statcan'] img { object-position: 50% 50%; transform: none; }
.channel-visual[data-channel='uwaterloo'] img { object-position: 50% 30%; transform: none; }
.channel-link-arrow { position: absolute; top: calc(var(--u) * 14); right: calc(var(--u) * 14); z-index: 1; display: grid; place-items: center; width: calc(var(--u) * 40); height: calc(var(--u) * 40); color: #f4f6f5; filter: drop-shadow(0 0 calc(var(--u) * 4) #000c); transition: transform .25s ease-out; }
.channel-link-arrow svg { width: 100%; height: 100%; }
a.channel-visual:hover .channel-link-arrow, a.channel-visual:focus-visible .channel-link-arrow { transform: translate(calc(var(--u) * 3), calc(var(--u) * -3)) scale(1.05); }
.return-clip { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; }
.static { display: none; position: absolute; inset: 0; z-index: 4; background: #798073; opacity: .9; }
.static.active { display: block; }
.static::before { content: ''; position: absolute; inset: 0; background: url('/static.png') 0 0 / calc(var(--px) * 64) calc(var(--px) * 64); image-rendering: pixelated; animation: noise .24s steps(1) infinite; }
@keyframes noise { 0% { background-position: 0 0; } 25% { background-position: calc(var(--px) * -17) calc(var(--px) * -29); } 50% { background-position: calc(var(--px) * -41) calc(var(--px) * -8); } 75% { background-position: calc(var(--px) * -9) calc(var(--px) * -47); } }
footer { max-width: 1250px; margin: 0 auto; padding: 0 64px 35px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.footer-note { color: #61695c; } footer a { color: #b8beae; text-decoration: none; padding: 8px 0; } footer a span { margin-left: 15px; } footer a:hover { color: #fff; }
.email-dialog { width: min(380px, calc(100% - 32px)); padding: 26px 24px 22px; background: #05080bf2; border: 2px solid var(--text); border-radius: 0; color: var(--text); box-shadow: 0 0 18px #57cbe580, inset 0 0 12px #57cbe533; }
.email-dialog::backdrop { background: #000a; backdrop-filter: blur(4px); }
.email-dialog-label { margin: 0 0 10px; font: 400 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.email-address { margin: 0 0 20px; font-size: 19px; font-weight: 500; user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; text-shadow: 0 0 10px #57cbe566; }
.email-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.email-actions > * { display: grid; place-items: center; height: 40px; padding: 0 8px; border: 1px solid #a6e6f259; background: #57cbe50f; color: var(--text); font: 400 12px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.email-actions > :hover, .email-actions > :focus-visible { background: #57cbe526; border-color: var(--text); }
#copy-email { grid-column: 1 / -1; background: var(--text); border-color: var(--text); color: #05080b; }
#copy-email:hover, #copy-email:focus-visible { background: #f1ffff; }
.email-close { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 24px; line-height: 1; }
.email-close:hover, .email-close:focus-visible { color: var(--text); }
.contact-bar { display: none; }
@media (min-width: 1500px) { .stage { gap: 120px; } }
@media (max-width: 1050px) and (min-width: 761px) { .stage { padding: 50px 40px; gap: 48px; grid-template-columns: minmax(0, 1fr) 220px; } h1 { font-size: min(44px, calc(((100vw - 80px - 48px - 220px) - 190px) / 9)); } .work { margin-top: calc(35.6px - .2 * min(44px, calc(((100vw - 80px - 48px - 220px) - 190px) / 9))); } .section-label { font-size: 26px; margin-bottom: 15px; } .experience { padding: 13px 0; } .year, .dates { font-size: 14px; } .company { font-size: 17px; } .title { font-size: 14px; } }
@media (min-width: 1051px) and (max-width: 1149px) { .experience { padding: 16.25px 0; } }
@media (max-width: 1149px) { .experience { grid-template-columns: 44px minmax(0, 1fr) auto 24px; grid-template-areas: 'year company dates button' 'year title dates button'; gap: 2px 12px; } .title { line-height: 22px; white-space: normal; } .year { grid-area: year; align-self: start; padding-top: 2px; } .company { grid-area: company; } .title { grid-area: title; } .dates { grid-area: dates; } .selection { grid-area: button; } }
@media (max-width: 760px) { .topbar { display: none; } .socials .mute-toggle { display: grid; } .mute-toggle svg { width: 24px; height: 20px; } .stage { padding: 32px 26px 42px; display: flex; flex-direction: column; gap: 40px; min-height: auto; max-width: 560px; } h1 { font-size: min(48px, calc((100vw - 52px) / 9.3)); } .introduction { display: contents; } .television-area { order: 1; } .work { order: 2; margin-top: 0; } .name-row { flex-direction: column; align-items: flex-start; gap: 10px; } .socials { gap: 4px; } .social { width: 40px; height: 40px; padding: 8px; } .socials { margin: 0 0 0 -8px; } .section-label { font-size: 24px; margin-bottom: 12.5px; } .experience { padding: 10px 0; } .experience::before { inset: 2px -12px; } .year, .dates { font-size: 14px; } .company { font-size: 17px; } .title { font-size: 14px; } .television-area { max-width: 260px; align-self: center; } .channel-role { display: block; } .thrusters { position: static; }
  .stage { padding-bottom: 104px; }
  .contact-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 15; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 536px; margin: 0 auto; background: #000c; border: 2px solid var(--text); box-shadow: 0 0 12px #57cbe580, inset 0 0 10px #57cbe540; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transform: translateY(calc(100% + 24px)); transition: transform .3s ease, opacity .2s ease, visibility 0s .3s; }
  .powered .contact-bar.out-of-view { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .contact-link { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 0 8px; color: var(--text); text-decoration: none; font: 400 11px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
  .contact-link + .contact-link { border-left: 1px solid #a6e6f233; }
  .contact-link svg { width: 20px; height: 20px; filter: drop-shadow(0 0 4px #57cbe5b0); }
  .contact-link.mute-toggle { display: flex; border: 0; border-left: 1px solid #a6e6f233; background: none; }
  .contact-link.mute-toggle svg { width: 23px; height: 20px; }
  .contact-link:active { background: #57cbe526; } }
@media (max-width: 380px) { .stage { padding-left: 20px; padding-right: 20px; } .contact-link { font-size: 10px; letter-spacing: .02em; } .experience { grid-template-columns: 44px minmax(0, 1fr) 24px; grid-template-areas: 'year company button' 'year title button' 'year dates button'; } .dates { text-align: left; } .dates:empty { display: none; } h1 { font-size: calc((100vw - 40px) / 9.3); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }