@font-face { font-family: "Inter"; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 400; font-display: swap; } :root { --paper: #FBFAF8; --surface: #FFFFFF; --ink: #14161A; --muted: #6E7076; --rule: #E5E2DC; --accent: #A8431E; color-scheme: light; --space: 8px; --measure: 62ch; --font-sans: "Inter", "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --motion: 180ms; } :root[data-theme="dark"] { --paper: #0E0F11; --surface: #16181B; --ink: #E9E7E2; --muted: #94989F; --rule: #25282D; --accent: #E0764A; color-scheme: dark; } /* Easter egg: Konami-code CRT mode (static/crt.js toggles data-crt on ; Escape exits). Equal specificity with the dark block above, so this must stay after it — source order is what lets CRT win over an explicitly-dark theme. */ :root[data-crt] { --paper: #050805; --surface: #0B140C; --ink: #33FF66; --muted: #2EBF5A; --rule: #175A2B; --accent: #FFB84D; color-scheme: dark; } :root[data-crt] body { font-family: var(--font-mono); text-shadow: 0 0 2px rgba(51, 255, 102, 0.55), 1px 0 0 rgba(255, 60, 60, 0.22), -1px 0 0 rgba(60, 120, 255, 0.22); animation: crt-enter 0.55s steps(2, end), crt-flicker 4s step-end 0.55s infinite; } :root[data-crt] body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35) 100%); } @keyframes crt-enter { 0% { transform: translateX(-6px) skewX(2deg); opacity: 0.4; } 25% { transform: translateX(5px) skewX(-1.5deg); opacity: 0.9; } 50% { transform: translateX(-3px); opacity: 0.6; } 75% { transform: translateX(2px); opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes crt-flicker { 0%, 91% { opacity: 1; } 93% { opacity: 0.82; } 94% { opacity: 1; } 97% { opacity: 0.93; } 98%, 100% { opacity: 1; } } /* Easter egg: space shooter (static/ship.js, launched by clicking #pm-mark). Shot words hide via visibility so the layout — and every other word's hitbox — stays put; the canvas overlays everything but never eats input, the game listens on the document instead. */ .ship-hit { visibility: hidden; } #pm-mark { width: fit-content; } /* The launch-pose gag is pointer-only: on a touchscreen `:hover` latches after a tap, leaving the monogram stuck mid-launch, and a crosshair cursor means nothing without a cursor. */ @media (hover: hover) and (pointer: fine) { #pm-mark { cursor: crosshair; transition: transform var(--motion) ease; } #pm-mark:hover { transform: rotate(-15deg) translateY(-2px); } #pm-mark:hover::after { content: ""; display: inline-block; margin-left: 4px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 6px solid var(--accent); } } /* The game's own exit, so leaving never depends on knowing about Escape. */ .ship-quit { position: fixed; top: calc(var(--space) * 1.5); right: calc(var(--space) * 1.5); z-index: 10001; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 8px 12px; cursor: pointer; } .ship-quit:hover { border-color: var(--accent); } #ship-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10000; pointer-events: none; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 350; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* Composition A: persistent left rail, content off-centre. */ .layout { display: grid; grid-template-columns: 132px 1fr; min-height: 100vh; } .rail { border-right: 1px solid var(--rule); padding: calc(var(--space) * 4) calc(var(--space) * 2.5); display: flex; flex-direction: column; gap: calc(var(--space) * 3.5); } .rail nav { display: flex; flex-direction: column; gap: 9px; } .rail nav a { font-size: 13px; color: var(--muted); transition: color var(--motion) ease; } .rail nav a[aria-current="page"] { color: var(--ink); font-weight: 500; } .rail nav a[aria-current="page"]::before { content: "— "; color: var(--accent); } .rail-foot { margin-top: auto; } .rail-links { display: flex; flex-direction: column; gap: 4px; margin-top: calc(var(--space) * 1.5); } .rail-links a { font-size: 12px; color: var(--muted); transition: color var(--motion) ease; } .rail-links a:hover { color: var(--ink); text-decoration: none; } .theme-toggle { margin-top: calc(var(--space) * 1.5); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 5px 9px; cursor: pointer; transition: color var(--motion) ease, border-color var(--motion) ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--accent); } main { padding: calc(var(--space) * 6.5) calc(var(--space) * 7) calc(var(--space) * 5); } h1 { font-size: 54px; line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; margin: 0 0 calc(var(--space) * 3.25); } .name-line { display: block; } h2 { font-size: 24px; letter-spacing: -0.02em; font-weight: 600; } .lede { font-size: 17px; line-height: 1.62; max-width: var(--measure); margin: 0 0 calc(var(--space) * 1.75); } .prose { font-size: 14.5px; line-height: 1.65; max-width: var(--measure); color: var(--muted); } .role-line { margin-top: 2rem; } .section-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 11px; border-bottom: 1px solid var(--ink); margin: calc(var(--space) * 5.5) 0 0; } .section-head .mono { color: var(--ink); } .item { display: grid; grid-template-columns: 1fr 74px; gap: calc(var(--space) * 2.25); padding: calc(var(--space) * 2.125) 0; border-bottom: 1px solid var(--rule); align-items: start; } .item h3 { margin: 0 0 5px; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; } .item p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: var(--measure); } .item .year { text-align: right; } .org { color: var(--accent); } .work-detail { font-size: 13.5px; line-height: 1.6; color: var(--ink); max-width: var(--measure); margin: 6px 0 0; } .resume-page { display: block; width: 100%; max-width: 780px; height: auto; margin: calc(var(--space) * 3) 0; border: 1px solid var(--rule); background: #FFFFFF; } .ask-log { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; max-width: 660px; display: flex; flex-direction: column; gap: calc(var(--space) * 2); margin: calc(var(--space) * 3) 0; } .ask-card { border-left: 2px solid var(--rule); padding-left: calc(var(--space) * 1.5); } .ask-q { color: var(--muted); } .ask-src { color: var(--muted); font-size: 11px; } .ask-src a { color: var(--accent); } .ask-also { color: var(--muted); font-size: 12px; } .ask-form { display: flex; gap: var(--space); align-items: center; max-width: 660px; } .ask-form input { flex: 1; } .ask-prompt { font-family: var(--font-mono); color: var(--accent); } /* The rail becomes a top bar before the grid gets cramped. */ @media (max-width: 640px) { .layout { grid-template-columns: 1fr; } .rail { border-right: 0; border-bottom: 1px solid var(--rule); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--space) * 2); padding: calc(var(--space) * 2); } .rail nav { flex-direction: row; gap: calc(var(--space) * 2); flex-wrap: wrap; } .rail-foot { margin-top: 0; min-width: 0; } .rail-links { flex-direction: row; flex-wrap: wrap; gap: calc(var(--space) * 1.5); margin-top: 0; } main { padding: calc(var(--space) * 4) calc(var(--space) * 2.5); } h1 { font-size: 38px; } .item { grid-template-columns: 1fr; gap: 4px; } .item .year { text-align: left; } } /* Touch targets. The desktop rail is deliberately tight — 21px nav links, 25px buttons — which is fine for a cursor and too small for a thumb, so these only apply where the primary pointer is coarse. 44px is the WCAG 2.5.8 minimum. */ @media (pointer: coarse) { .rail nav a, .rail-links a { display: inline-flex; align-items: center; min-height: 44px; } .theme-toggle, .demo-input { min-height: 44px; padding: 10px 14px; } .rail nav { gap: 0 calc(var(--space) * 2); } .rail-links { gap: 0 calc(var(--space) * 1.5); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .rd-canvas { width: 100%; max-width: 660px; aspect-ratio: 220 / 140; display: block; border: 1px solid var(--rule); image-rendering: pixelated; cursor: crosshair; touch-action: none; margin: calc(var(--space) * 3) 0; } .rd-controls { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; max-width: 660px; } .ac-canvas { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; display: block; border: 1px solid var(--rule); background: var(--surface); margin: calc(var(--space) * 3) 0; } .ac-controls { display: flex; flex-wrap: wrap; gap: var(--space); align-items: center; max-width: 720px; margin-bottom: calc(var(--space) * 2); } .demo-input { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 5px 9px; } #ac-scan { font-family: var(--font-mono); font-size: 14px; line-height: 1.9; max-width: 720px; margin: calc(var(--space) * 2.5) 0; white-space: pre-wrap; word-break: break-word; } #ac-scan .consumed { color: var(--muted); } #ac-scan .current { background: var(--accent); color: var(--surface); border-radius: 2px; } #ac-scan .matched { background: var(--rule); color: var(--ink); border-bottom: 2px solid var(--accent); } .demo-status { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }