/* marko.padjen.dev: a terminal, phosphor on black, with a paper variant.
   Tokens follow muxway's web client; components use var(--*) only. */
@font-face { font-family:"Press Start 2P"; src:url(fonts/PressStart2P-Regular.ttf) format("truetype"); font-display:swap; }

:root {
  color-scheme:dark;
  --bg:#0a0603; --raised:#140b05; --ink:#ffb000; --dim:#a06c00; --faint:#4a3200; --accent:#ffd36b;
  --glow:rgba(255,176,0,.85); --glow-soft:rgba(255,176,0,.35);
  --scan:rgba(0,0,0,.22); --vig:rgba(0,0,0,.55); --bad:#ff3b3b;
  --glow-text:0 0 2px var(--glow), 0 0 8px var(--glow-soft);
  --glow-strong:0 0 2px var(--glow), 0 0 10px var(--glow), 0 0 24px var(--glow-soft);
  --glow-box:0 0 4px var(--glow-soft), inset 0 0 8px rgba(0,0,0,.6);
  --glow-box-strong:0 0 6px var(--glow), 0 0 22px var(--glow-soft);
  --body-glow:0 0 6px var(--glow-soft);
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --pixel:"Press Start 2P", var(--mono);
  --ease-crt:cubic-bezier(.1,1.4,.3,1);
}
:root[data-theme=green] {
  --bg:#050806; --raised:#0a120c; --ink:#39ff14; --dim:#1f8f14; --faint:#0f4a0c; --accent:#b6ff9e;
  --glow:rgba(57,255,20,.85); --glow-soft:rgba(57,255,20,.35);
}
:root[data-theme=paper] {
  color-scheme:light;
  --bg:#f1ead8; --raised:#e8dfc8; --ink:#1f2a1f; --dim:#5a6a5a; --faint:#b9b39f; --accent:#0b5d1e;
  --glow:rgba(31,42,31,.25); --glow-soft:rgba(31,42,31,.12);
  --scan:rgba(0,0,0,.04); --vig:rgba(0,0,0,.08); --bad:#a3161b;
  --glow-text:none; --glow-strong:0 0 1px var(--glow); --body-glow:none;
  --glow-box:2px 2px 0 var(--faint); --glow-box-strong:0 0 0 2px var(--accent);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.55 var(--mono); text-shadow:var(--body-glow); min-height:100vh; }
::selection { background:var(--ink); color:var(--bg); text-shadow:none; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--ink); text-decoration:underline; text-decoration-style:dotted; }
img { display:block; max-width:100%; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.pixel { font-family:var(--pixel); line-height:1.5; }
.dim { color:var(--dim); }

/* the tube: scanlines and a vignette over everything, a power-on when the page lands */
.scanlines { pointer-events:none; position:fixed; inset:0; z-index:50; background:repeating-linear-gradient(to bottom, transparent 0 2px, var(--scan) 2px 3px); mix-blend-mode:multiply; }
.vignette { pointer-events:none; position:fixed; inset:0; z-index:49; background:radial-gradient(ellipse at center, transparent 55%, var(--vig) 100%); }
:root[data-effects=off] .scanlines, :root[data-effects=off] .vignette { display:none; }
@keyframes power-on {
  0% { transform:scale(1,.004); filter:brightness(4); opacity:.6; }
  35% { transform:scale(1,.004); filter:brightness(6); opacity:1; }
  60% { transform:scale(1,1.02); filter:brightness(1.8); }
  100% { transform:none; filter:none; }
}
.power-on { animation:power-on 900ms var(--ease-crt) both; transform-origin:center; }
@keyframes flicker { 0%,100% { opacity:1; } 7% { opacity:.985; } 11% { opacity:1; } 48% { opacity:.99; } 52% { opacity:1; } 83% { opacity:.98; } 86% { opacity:1; } }
.flicker { animation:flicker 4s linear infinite; }
@keyframes blink { 50% { opacity:0; } }
.cursor { display:inline-block; width:.6em; height:1.1em; vertical-align:text-bottom; background:var(--ink); box-shadow:var(--glow-text); animation:blink 1s steps(1) infinite; }
@keyframes type { from { max-width:0; } to { max-width:30ch; } }
.typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; max-width:100%; animation:type 1.2s steps(29) both; animation-delay:.9s; }
:root[data-effects=off] .power-on, :root[data-effects=off] .flicker, :root[data-effects=off] .typed, :root[data-effects=off] .cursor, :root[data-effects=off] .ring { animation:none; }
:root[data-effects=off] .cursor { opacity:1; }

/* frames: a box with its label in the top edge, like a tmux pane */
.box { position:relative; border:1px solid var(--dim); background:var(--bg); padding:18px 20px; box-shadow:var(--glow-box); }
.box[data-label]::before { content:attr(data-label); position:absolute; top:-.75em; left:12px; padding:0 6px; background:var(--bg); color:var(--dim); font-size:12px; letter-spacing:.04em; }
.box.raised { background:var(--raised); }
.btn { display:inline-block; font-family:var(--mono); font-size:14px; font-weight:700; padding:10px 14px; border:1px solid var(--ink); color:var(--ink); background:var(--bg); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .12s, color .12s, box-shadow .12s; }
.btn::before { content:"[ "; color:var(--dim); } .btn::after { content:" ]"; color:var(--dim); }
.btn:hover, .btn:focus-visible { background:var(--ink); color:var(--bg); text-shadow:none; text-decoration:none; box-shadow:var(--glow-box-strong); }
.btn:hover::before, .btn:hover::after { color:var(--bg); }
.btn.primary { background:var(--ink); color:var(--bg); text-shadow:none; }
.btn.primary::before, .btn.primary::after { color:var(--bg); }
.btn.primary:hover { background:var(--accent); border-color:var(--accent); }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.tag { display:inline-block; font-size:12px; padding:2px 6px; border:1px solid var(--faint); color:var(--dim); margin:0 4px 6px 0; }
.tag:hover { color:var(--ink); border-color:var(--dim); }

/* the top bar */
header.top { position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--faint); }
header.top .inner { max-width:1020px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
header.top .brand { font-family:var(--pixel); font-size:11px; color:var(--ink); text-shadow:var(--glow-text); text-decoration:none; white-space:nowrap; }
header.top .brand span { color:var(--dim); }
header.top nav { display:flex; gap:16px; flex-wrap:wrap; }
header.top nav a { color:var(--dim); }
header.top nav a::before { content:"/"; color:var(--faint); }
header.top nav a:hover { color:var(--ink); text-decoration:none; text-shadow:var(--glow-text); }
header.top .tools { margin-left:auto; display:flex; gap:8px; }
.key { font-family:var(--mono); font-size:12px; padding:4px 8px; border:1px solid var(--faint); color:var(--dim); background:var(--bg); cursor:pointer; text-shadow:none; }
.key:hover, .key:focus-visible { color:var(--ink); border-color:var(--ink); }
.key b { color:var(--ink); font-weight:700; }

main { max-width:1020px; margin:0 auto; padding:0 20px 72px; }
h2 { font-family:var(--pixel); font-size:clamp(14px, 2.4vw, 20px); line-height:1.5; letter-spacing:.02em; margin:84px 0 28px; text-shadow:var(--glow-text); scroll-margin-top:72px; }
h2::before { content:"# "; color:var(--dim); }
h3 { margin:0 0 8px; font-size:15px; }
p { margin:0 0 12px; }
.lead-in { color:var(--dim); max-width:64ch; margin-bottom:22px; }

/* the first screen: who, in large pixels, with the picture in a frame */
.hero { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:64px 0 32px; }
.hero .prompt { color:var(--dim); margin:0 0 10px; }
.hero .prompt b { color:var(--ink); font-weight:400; }
.hero h1 { font-family:var(--pixel); font-size:clamp(22px, 4.6vw, 44px); line-height:1.35; margin:0 0 18px; text-shadow:var(--glow-strong); letter-spacing:.02em; }
.hero .line { font-size:clamp(16px, 2vw, 19px); font-weight:700; margin:0 0 14px; min-height:1.6em; }
.hero .sub { color:var(--dim); max-width:56ch; margin:0 0 26px; }
.hero .sub b { color:var(--ink); font-weight:400; }
.hero .facts { margin:22px 0 0; color:var(--dim); font-size:13px; }
.hero .facts span + span::before { content:" · "; color:var(--faint); }
.avatar { position:relative; width:220px; height:220px; border:2px solid var(--ink); box-shadow:var(--glow-box-strong); background:var(--raised); overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.25) 2px 3px); pointer-events:none; }
:root[data-effects=off] .avatar::after { display:none; }
.avatar-wrap { text-align:center; }

/* what I build: a screen that stays while the cards scroll past it */
.uc { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.uc-media { container-type:inline-size; position:sticky; top:84px; height:72vh; border:1px solid var(--dim); background:var(--raised); box-shadow:var(--glow-box); }
.uc-media::before { content:"screen"; position:absolute; top:-.75em; left:12px; padding:0 6px; background:var(--bg); color:var(--dim); font-size:12px; z-index:2; }
.scene { position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; transform:scale(1,.004); transition:opacity .4s, transform .45s var(--ease-crt); }
.scene.active { opacity:1; transform:none; }
.scene img.shot { max-width:100%; max-height:100%; object-fit:contain; border:1px solid var(--faint); }
.scene pre { margin:0; font-size:min(13px, calc((100cqw - 48px) / 37)); line-height:1.35; color:var(--ink); text-shadow:var(--glow-text); white-space:pre; max-width:100%; overflow:hidden; }
.scene pre .d { color:var(--dim); } .scene pre .a { color:var(--accent); }
.scene pre .warn { background:var(--ink); color:var(--bg); text-shadow:none; font-weight:700; animation:blink 1.4s steps(1) infinite; }
.scene pre .bad { color:var(--bad); }
.scene pre .ok { color:var(--accent); }
.scene .devices { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; width:100%; height:100%; }
.scene .devices img.phone { height:60vh; width:auto; border:1px solid var(--faint); }
.scene .devices .side { display:grid; gap:16px; }
.scene .devices .side img { width:100%; height:auto; border:1px solid var(--faint); background:#000; }
.scene .devices .side .nokia { justify-self:start; }
.uc-steps .step { min-height:78vh; display:flex; align-items:center; }
.uc-steps .step:last-child { min-height:60vh; }
.step .card { opacity:0; transform:translateY(40px); transition:opacity .5s, transform .5s; }
.step.active .card { opacity:1; transform:none; }
.card { border:1px solid var(--dim); background:var(--bg); padding:22px 24px; box-shadow:var(--glow-box); }
.card .num { font-family:var(--pixel); font-size:10px; color:var(--accent); display:block; margin-bottom:12px; }
.card h3 { font-family:var(--pixel); font-size:12px; line-height:1.6; margin:0 0 12px; text-shadow:var(--glow-text); }
.card p { color:var(--dim); margin:0; }
.card p b { color:var(--ink); font-weight:400; }
.card p a { white-space:nowrap; }
.card .more { margin-top:12px; font-size:13px; }

/* the background: four cards with a number and a glyph */
.grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.how.grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
.how .card { transition:box-shadow .12s, border-color .12s; }
.how .card:hover { border-color:var(--ink); box-shadow:var(--glow-box-strong); }
.how .lead { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.how .lead .num { margin:0; }
.how .lead svg { width:28px; height:28px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; shape-rendering:crispEdges; filter:drop-shadow(0 0 3px var(--glow-soft)); }
.how .card h3 { font-size:11px; }

/* the stack and the work */
.stack .box h3 { font-family:var(--pixel); font-size:10px; line-height:1.6; margin:0 0 12px; color:var(--accent); }
.stack .box { padding-top:22px; }
.work { display:grid; gap:14px; }
.work .box { padding:20px 22px; }
.work h3 { font-size:15px; margin:0 0 8px; }
.work h3 .role { color:var(--dim); font-weight:400; font-style:italic; }
.work h3 .role::before { content:" // "; font-style:normal; color:var(--faint); }
.work p { color:var(--dim); font-size:14px; }
.work p b { color:var(--ink); font-weight:400; }
.work .tags { margin-top:8px; }
.work .box.featured { border-color:var(--ink); box-shadow:var(--glow-box-strong); }
.work .box.featured[data-label]::before { color:var(--ink); }
.ghlist { margin:0; padding:0; list-style:none; }
.ghlist li { padding:8px 0; border-bottom:1px dotted var(--faint); display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:baseline; }
.ghlist li:last-child { border-bottom:0; }
.ghlist .lang { color:var(--dim); font-size:12px; white-space:nowrap; }
.ghlist .lang::before { content:"● "; color:var(--faint); }

/* the career: one line per role, the years in a column */
.tlbox { padding:22px 24px 14px; }
.tl { list-style:none; margin:0; padding:0; }
.tl li { display:grid; grid-template-columns:11ch 1fr; gap:4px 16px; padding:10px 0; border-bottom:1px dotted var(--faint); }
.tl li:last-child { border-bottom:0; }
.tl .when { color:var(--accent); white-space:nowrap; font-size:13px; padding-top:1px; }
.tl .what { min-width:0; }
.tl .what b { font-weight:700; }
.tl .what .d { font-size:13px; line-height:1.5; }
.tlnote { margin:12px 0 0; font-size:13px; }
.ghlist li > span:first-child { font-weight:700; }
@media (max-width:560px) { .tl li { grid-template-columns:1fr; gap:2px; } }

/* the agent: text beside a mark that pulses */
.call { display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; margin-top:84px; }
.call > div { min-width:0; }
.call h2 { margin-top:0; font-size:clamp(13px, 1.9vw, 17px); }
.call .big { font-size:clamp(17px, 2.2vw, 21px); font-weight:700; max-width:40ch; margin:0 0 18px; }
.call .big b { color:var(--accent); font-weight:700; }
.endpoint { margin:0 0 10px; padding:10px 14px; border:1px solid var(--faint); background:var(--raised); font-size:13px; overflow-wrap:anywhere; }
.endpoint .k { color:var(--dim); display:inline-block; min-width:12ch; }
.endpoint a { color:var(--ink); }
.call .row { margin-top:16px; }
.call-art { position:relative; aspect-ratio:1; width:min(100%, 340px); justify-self:end; border:1px solid var(--dim); background:var(--raised); box-shadow:var(--glow-box); }
.call-art .clip { position:absolute; inset:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.call-art::before { content:"mile"; position:absolute; top:-.75em; left:12px; padding:0 6px; background:var(--bg); color:var(--dim); font-size:12px; }
.call-art svg { width:70%; height:auto; overflow:visible; }
.call-art .ring { fill:none; stroke:var(--ink); stroke-width:2; transform-origin:center; animation:pulse 2.2s ease-out infinite; }
.call-art .ring.r2 { animation-delay:.7s; }
@keyframes pulse { 0% { transform:scale(.55); opacity:.9; } 100% { transform:scale(1.45); opacity:0; } }
.call-art .m { font-family:var(--pixel); font-size:64px; fill:var(--ink); filter:drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 18px var(--glow-soft)); }
.call-art .mbox { fill:none; stroke:var(--ink); stroke-width:3; }
.call-art .led { fill:var(--ink); animation:blink 1.4s steps(1) infinite; }
:root[data-effects=off] .call-art .ring { animation:none; opacity:.35; }

/* questions */
details.faq { border-bottom:1px dotted var(--faint); padding:14px 0; }
details.faq summary { cursor:pointer; font-weight:700; list-style:none; }
details.faq summary::-webkit-details-marker { display:none; }
details.faq summary::before { content:"> "; color:var(--dim); }
details.faq[open] summary::before { content:"v "; }
details.faq summary:hover { text-shadow:var(--glow-text); }
details.faq p { color:var(--dim); margin:10px 0 0 2ch; max-width:70ch; }
details.faq p b { color:var(--ink); font-weight:400; }

/* the bottom */
footer { border-top:1px solid var(--faint); padding:28px 20px 20px; }
footer .inner { max-width:1020px; margin:0 auto; display:flex; gap:20px; flex-wrap:wrap; color:var(--dim); font-size:13px; align-items:center; }
footer .inner a { color:var(--dim); } footer .inner a:hover { color:var(--ink); }
footer .tools { margin-left:auto; display:flex; gap:8px; }
.status { max-width:1020px; margin:14px auto 0; font-size:12px; color:var(--dim); display:flex; gap:16px; flex-wrap:wrap; }
.status b { color:var(--ink); font-weight:700; }
.status .theme-name::before { content:"theme "; } 

@media (max-width:900px) { .how.grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:820px) {
  .uc { display:block; }
  .uc-media { position:sticky; top:0; height:100vh; height:100svh; opacity:.35; border:0; box-shadow:none; margin:0 -20px; z-index:0; }
  .uc-media::before { display:none; }
  .uc-steps { position:relative; z-index:1; margin-top:-100vh; margin-top:-100svh; }
  .uc-steps .step { min-height:92vh; min-height:92svh; align-items:flex-end; padding-bottom:10vh; }
  .uc-steps .step:last-child { min-height:164vh; min-height:164svh; padding-bottom:calc(10vh + 72svh); }
  .step .card { box-shadow:0 0 0 1px var(--bg), var(--glow-box-strong); }
}
@media (max-width:720px) {
  .hero { grid-template-columns:1fr; gap:24px; padding:36px 0 24px; }
  .avatar-wrap { order:-1; }
  .avatar { width:160px; height:160px; margin:0 auto; }
  .call { grid-template-columns:1fr; gap:24px; margin-top:60px; }
  .call-art { width:min(100%, 240px); justify-self:start; order:-1; }
  header.top nav { display:none; }
  h2 { margin-top:60px; }
}
@media (max-width:560px) { .how.grid { grid-template-columns:1fr; } .ghlist li { grid-template-columns:1fr auto; } .ghlist .dim { grid-column:1 / -1; } }
@media (prefers-reduced-motion: reduce) {
  .power-on, .flicker, .typed, .cursor, .ring, .scene pre .warn, .call-art .led { animation:none !important; }
  .step .card, .scene { transition:none; }
  .step .card { opacity:1; transform:none; }
  .ring { opacity:.35; }
}