/* Layout idea: a quiet charcoal page lit by one warm light. Glass is reserved for navigation and the few things you operate. */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Instrument Serif";font-style:italic;src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(fonts/press-start-2p-latin-400-normal.woff2) format("woff2");font-display:swap}
:root{
  --bg:#0d0e10; --ink:#efe9dc; --muted:#a8a295; --line:rgba(239,233,220,.14);
  --glass:rgba(46,48,52,.52); --glass-strong:rgba(96,96,98,.5); --edge:rgba(239,233,220,.18); --shade:rgba(0,0,0,.6);
  --accent:#c8a96b; --on-accent:#17130a; --light:rgba(200,169,107,.2);
  --b1:#e6d3a3; --b2:#c8a96b; --b3:#7d6536;
  --display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --pixel:"Press Start 2P",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f3eee3; --ink:#1b1a17; --muted:#5d584e; --line:rgba(27,26,23,.16);
  --glass:rgba(255,252,245,.58); --glass-strong:rgba(255,255,255,.9); --edge:rgba(27,26,23,.14); --shade:rgba(70,52,12,.2);
  --accent:#80601f; --on-accent:#fffaf0; --light:rgba(200,160,80,.34);
  --b1:#d9bf85; --b2:#b08d45; --b3:#6f5622;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{height:100%}
body{min-height:100%;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .6s var(--ease),color .6s var(--ease)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;letter-spacing:-.01em;line-height:1.05}
a{color:var(--accent)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* the one light source, drifting slowly and leaning with the pointer */
.light{position:fixed;z-index:0;top:-30vmax;right:-22vmax;width:90vmax;height:90vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--light),transparent);translate:calc(var(--px,0)*-26px) calc(var(--py,0)*-26px);
  animation:drift 46s ease-in-out infinite alternate;transition:translate 1.2s var(--ease)}
@keyframes drift{to{transform:translate(-16vmax,12vmax) scale(1.12)}}
[data-exp="game"] .light,[data-exp="game"] .top{display:none}

.glass{position:relative;background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 var(--edge),0 22px 50px -28px var(--shade);isolation:isolate;transition:background .6s,border-color .6s}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),var(--glass-strong),transparent 65%)}
.glass:hover::before{opacity:.55}

/* shared top bar */
.top{position:relative;z-index:3;max-width:1080px;margin:0 auto;padding:22px 24px 0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:12px;background:none;border:0;padding:4px 0;font:400 22px var(--display)}
.mono{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent);font:600 11px var(--body);letter-spacing:.08em}
.top-end{display:flex;align-items:center;gap:18px}
.link{background:none;border:0;padding:6px 0;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.link:hover{color:var(--ink);border-color:var(--accent)}
.switch{border-radius:999px;padding:4px;width:66px;display:block}
.knob{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--glass-strong);border:1px solid var(--edge);transition:transform .7s var(--spring)}
.switch:active .knob{transform:scaleX(1.3)}
.switch:not(.is-dark) .knob{transform:translateX(28px)}
.knob svg{width:15px;height:15px}

/* experiences and the hand-over between them */
.exp{position:relative;z-index:1}
.exp-out{animation:expout .45s var(--ease) forwards;pointer-events:none}
.exp-in{animation:expin .8s var(--ease) backwards}
@keyframes expout{to{opacity:0;transform:scale(1.02);filter:blur(10px)}}
@keyframes expin{from{opacity:0;transform:scale(.985);filter:blur(10px)}}

/* opening */
.intro{max-width:1080px;margin:0 auto;padding:clamp(20px,4vh,56px) 24px 32px;min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4vh,44px)}
.ask{font-size:clamp(38px,6vw,76px)}
.ask em{color:var(--accent)}
.ask span{display:inline-block;animation:word .9s var(--ease) both}
.ask span:nth-child(2){animation-delay:.07s}.ask span:nth-child(3){animation-delay:.14s}.ask span:nth-child(4){animation-delay:.21s}.ask span:nth-child(5){animation-delay:.28s}.ask em span{animation-delay:.4s}
@keyframes word{from{opacity:0;transform:translateY(.5em);filter:blur(6px)}}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.choice{display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;padding:20px;justify-items:start;animation:word 1s var(--ease) .55s both;
  transition:transform .6s var(--ease),opacity .5s,translate 1.2s var(--ease)}
.choice h2{font-size:34px;margin-top:8px}
.choice p{color:var(--muted)}
.choice:hover,.choice:focus-within{transform:translateY(-6px)}
.c-pro{border-radius:22px;translate:calc(var(--px,0)*8px) calc(var(--py,0)*8px)}
.c-play{animation-delay:.68s;background:#161a2b;color:#f4f1e6;border:4px solid #f4f1e6;box-shadow:8px 8px 0 #05060c;translate:calc(var(--px,0)*-8px) calc(var(--py,0)*-8px)}
.c-play h2{font:400 18px/1.4 var(--pixel);margin-top:14px}
.c-play p{font:400 10px/1.9 var(--pixel);color:#b9c0dc}
.pick-pro .c-play,.pick-play .c-pro{opacity:0;transform:scale(.96)}
.pick-pro .c-pro,.pick-play .c-play{transform:scale(1.03)}
.mini,.screen{width:100%;aspect-ratio:2/1;overflow:hidden}
.mini{border-radius:12px;border:1px solid var(--line);background:var(--bg);padding:8% 9%;display:flex;flex-direction:column;gap:7%;position:relative}
.mini-eye{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mini-name{font:400 clamp(22px,3.4vw,34px)/1 var(--display)}
.mini-rule{height:1px;background:var(--line);width:100%}.mini-rule.short{width:60%}
.mini-tabs{position:absolute;left:50%;bottom:9%;translate:-50% 0;display:flex;gap:10px;padding:6px 10px;border-radius:99px;background:var(--glass);border:1px solid var(--edge)}
.mini-tabs b{width:16px;height:6px;border-radius:9px;background:var(--line)}
.mini-tabs i{position:absolute;left:6px;top:3px;width:24px;height:12px;border-radius:9px;background:var(--accent);opacity:.75;animation:glide 9s var(--ease) infinite}
@keyframes glide{0%,18%{transform:none}25%,43%{transform:translateX(26px)}50%,68%{transform:translateX(52px)}75%,93%{transform:translateX(78px)}}
.screen{background:#0a0c14;border:3px solid #f4f1e6}
.screen canvas{width:100%;height:100%;display:block;object-fit:cover;image-rendering:pixelated}

.btn{font-weight:600;font-size:15px;padding:12px 22px;border-radius:999px;border:1px solid var(--edge);background:transparent;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:transform .5s var(--spring),background .3s,border-color .3s}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn:active{transform:scale(.95,.92)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.pbtn{font:400 11px/1 var(--pixel);padding:13px 14px;background:#f2c14e;color:#161a2b;border:0;border-radius:0;box-shadow:4px 4px 0 #05060c;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.pbtn:hover,.pbtn:focus-visible{background:#ffe08a}
.pbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 #05060c}
.pbtn.sm{font-size:9px;padding:9px 10px;box-shadow:3px 3px 0 #05060c}
.pbtn.alt{background:#f4f1e6}
.pbtn:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:0}

/* professional */
.shell{max-width:1080px;margin:0 auto;padding:36px 24px 150px}
.view{--dir:1;padding-top:12px}
.out{animation:out .2s ease-in forwards}
.in{animation:in .75s var(--ease) both}
.in>*{animation:in .8s var(--ease) both}
.in>*:nth-child(2){animation-delay:.05s}.in>*:nth-child(3){animation-delay:.1s}.in>*:nth-child(4){animation-delay:.15s}.in>*:nth-child(n+5){animation-delay:.2s}
@keyframes out{to{opacity:0;transform:translateX(calc(var(--dir)*-56px));filter:blur(10px)}}
@keyframes in{from{opacity:0;transform:translateX(calc(var(--dir)*64px));filter:blur(12px)}}

.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;padding:clamp(12px,4vh,44px) 0}
.eyebrow,.tag{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.name{font-size:clamp(52px,9.5vw,124px);margin:14px 0 22px;letter-spacing:-.02em}
.lede{font-size:clamp(18px,2.1vw,21px);color:var(--muted);max-width:40ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0}
.chip{font-size:14px}
.hero .chip{color:var(--ink)}
.hero .chip+.chip::before{content:"·";margin:0 10px 0 2px;color:var(--accent)}
button.chip{padding:7px 16px;border-radius:999px;background:transparent;border:1px solid var(--line);transition:transform .5s var(--spring),background .3s,color .3s,border-color .3s}
button.chip:hover{border-color:var(--accent)}
button.chip:active{transform:scale(.92)}
button.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:transparent}
.row{display:flex;flex-wrap:wrap;gap:12px}
.orb{position:relative;aspect-ratio:1;width:100%;max-width:300px;justify-self:end;cursor:pointer}
.orb svg{width:100%;height:100%;display:block;overflow:visible}
.lens{position:absolute;inset:20%;border-radius:50%;display:grid;place-items:center;font:400 clamp(30px,4.4vw,44px) var(--display);overflow:hidden;animation:float 7s ease-in-out infinite alternate}
.lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes float{to{transform:translateY(-8px)}}

.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:20px}
.fact{background:none;border:0;border-right:1px solid var(--line);padding:22px 18px 6px 0;margin-right:18px;text-align:left;transition:color .3s}
.fact:last-child{border-right:0;margin-right:0}
.fact b{display:block;font:400 clamp(26px,3.2vw,38px)/1.1 var(--display);font-variant-numeric:tabular-nums;transition:color .3s}
.fact:hover b{color:var(--accent)}
.fact span{font-size:14px;color:var(--muted)}

h2{font-size:clamp(38px,5.6vw,64px);margin-bottom:10px}
.sub{color:var(--muted);margin-bottom:30px;max-width:60ch}
details.job{border-top:1px solid var(--line)}
details.job:last-of-type{border-bottom:1px solid var(--line)}
details.job summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;padding:22px 0}
details.job summary::-webkit-details-marker{display:none}
.job h3{font-size:30px}
.org{color:var(--accent);font-weight:600}
.when{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;grid-column:1}
.chev{grid-row:1/4;grid-column:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:transform .6s var(--spring)}
details[open] .chev{transform:rotate(180deg)}
.job .body{padding:0 0 26px}
details[open] .body{animation:in .6s var(--ease) both;--dir:0}
ul{padding-left:1.1em;display:grid;gap:7px;max-width:65ch}
li::marker{color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.card{padding:20px 0 26px;border-top:1px solid var(--line)}
.card.pop{animation:pop .6s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(12px)}}
.card h3{font-size:25px;margin:10px 0 6px}
.card p{font-size:15px;color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.mail{font:400 clamp(26px,3.6vw,40px) var(--display);word-break:break-all;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
dl{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;margin:26px 0;font-size:15px}
dt{color:var(--muted)}dd{font-weight:600}
form{display:grid;gap:14px;padding:24px;border-radius:20px}
label{font-size:13px;font-weight:600;letter-spacing:.04em;display:grid;gap:6px}
input,textarea{width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--edge);background:transparent;resize:vertical}
footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}

/* tab bar: the glass you steer with */
.tabs{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:flex;padding:6px;border-radius:999px;max-width:calc(100vw - 24px);touch-action:none;user-select:none;-webkit-user-select:none}
:root:not([data-exp="pro"]) .tabs{display:none}
[data-exp="pro"] .tabs{animation:tabsin .9s var(--ease) .45s backwards}
@keyframes tabsin{from{opacity:0;translate:0 24px}}
.tabs button{position:relative;z-index:1;font-weight:600;font-size:14px;color:var(--muted);background:none;border:0;padding:12px 18px;border-radius:999px;transition:color .4s,transform .5s var(--spring);white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button:active{transform:scale(.92)}
.drop{position:absolute;top:6px;bottom:6px;left:6px;right:auto;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-strong),var(--glass));border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(8px) saturate(200%) brightness(1.15);backdrop-filter:blur(8px) saturate(200%) brightness(1.15);
  box-shadow:inset 0 1px 1px var(--edge),0 8px 20px -8px var(--shade);transition:transform .5s var(--spring)}
.drop.fwd{transition:right .3s var(--ease),left .62s var(--spring),transform .5s var(--spring)}
.drop.back{transition:left .3s var(--ease),right .62s var(--spring),transform .5s var(--spring)}
.drop.held{transform:scale(1.14,1.22);transition:transform .35s var(--spring)}
.toast{position:fixed;left:50%;bottom:88px;z-index:6;padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;transform:translate(-50%,20px) scale(.9);opacity:0;pointer-events:none;transition:all .6s var(--spring)}
.toast.on{transform:translate(-50%,0) scale(1);opacity:1}

/* game: its own world, untouched by the site theme */
.game{min-height:100svh;background:#0a0c14;color:#f4f1e6;font:400 10px/1.8 var(--pixel);padding:10px 8px}
#g-root{min-height:calc(100svh - 20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.g-bar,.g-frame,.g-help{width:min(960px,100%,calc((100svh - 130px)*1.5))}
.g-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.g-btns{display:flex;gap:10px}
.g-frame{position:relative;aspect-ratio:3/2;border:4px solid #f4f1e6;box-shadow:8px 8px 0 #05060c;background:#000}
.g-frame>canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.g-frame>canvas:focus-visible{outline:2px solid #f2c14e;outline-offset:6px;border-radius:0}
.g-dialog{position:absolute;left:3%;right:3%;bottom:4%;background:#161a2b;border:3px solid #f4f1e6;padding:12px 14px;display:grid;gap:10px}
.g-dialog p{white-space:pre-line;font-size:10px;line-height:1.9}
.g-dialog div,.g-foot{display:flex;flex-wrap:wrap;gap:10px}
.g-panel{position:absolute;inset:0;background:rgba(10,12,20,.95);padding:16px;overflow:auto;display:grid;gap:12px;align-content:start}
.g-panel h2{font:400 14px/1.5 var(--pixel);color:#f2c14e;margin:0}
.g-panel h3{font:400 10px/1.6 var(--pixel);color:#9fd0ff;margin-top:6px}
.g-panel p,.g-panel li{font-size:9px;line-height:2;max-width:70ch}
.g-panel ul{padding-left:1.4em;gap:2px;max-width:none}
.g-panel li::marker{color:#f2c14e}
.g-foot{margin-top:6px}
.g-list{display:grid;gap:8px}
.g-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.g-lab{flex:1 1 9em;font-size:9px}
.g-val{min-width:9em;text-align:center;font-size:9px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.g-sw{width:14px;height:14px;border:2px solid #f4f1e6;display:inline-block}
.g-panel input{border:3px solid #f4f1e6;border-radius:0;background:#05060c;color:#f4f1e6;font:400 10px var(--pixel);padding:10px;max-width:28em}
.g-panel label{font:400 9px/1.8 var(--pixel);letter-spacing:0}
.g-av{width:96px;height:96px;image-rendering:pixelated;background:#263052;border:3px solid #f4f1e6}
.g-map{width:min(100%,504px);height:auto;image-rendering:pixelated;border:3px solid #f4f1e6}
.g-pad{display:none;width:min(960px,100%);justify-content:space-between;align-items:center;padding:0 8px;touch-action:none;user-select:none;-webkit-user-select:none}
.g-pad.on{display:flex}
.dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}
.g-pad button{background:#263052;color:#f4f1e6;border:3px solid #f4f1e6;border-radius:0;font-size:14px}
.g-pad button.down,.g-pad button:active{background:#f2c14e;color:#161a2b}
.dpad [data-key=up]{grid-area:1/2}.dpad [data-key=left]{grid-area:2/1}.dpad [data-key=right]{grid-area:2/3}.dpad [data-key=down]{grid-area:3/2}
.g-pad [data-key=act]{width:64px;height:64px;font:400 14px var(--pixel)}
.g-help{color:#7f88a8;font-size:8px;text-align:center}

@media (max-width:760px){
  .choices{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}.orb{max-width:200px;order:-1;justify-self:start}
  .facts{grid-template-columns:repeat(2,1fr)}.fact:nth-child(2){border-right:0;margin-right:0}
  .grid,.contact{grid-template-columns:1fr}
  .tabs button{padding:11px 12px;font-size:13px}
  .top-end{gap:12px}.brand{font-size:19px}
    .g-help{display:none}
  .g-panel{position:fixed;inset:0;z-index:9;padding:18px 14px}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}
@media print{.light,.tabs,.top-end,.toast,#intro,#game{display:none!important}#pro,.view{display:block!important}}