/* base reset the hosting page would otherwise provide */
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none !important}
/* Layout: no page scroll. Six colour-blocked poster rooms sit side by side on one big wall.
   Hand-drawn arrows point from room to room and the camera flies along them.
   A map button pulls back to show the whole wall at once.
   Single look by choice: each room keeps its own poster colour in both themes. */
:root{
  --ink:#0a0a0a; --paper:#ffffff; --pink:#ff5a00; --blue:#1230c8; --cream:#e4e1d8; --red:#e0220f; --yellow:#ffd000; --rose:#0c5e43;
  --display:"Anybody","Anton","Impact","Arial Narrow",sans-serif;
  --hand:"Permanent Marker","Segoe Print","Bradley Hand",cursive;
  --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cols:3; --rows:2;
  --gl:max(16px, env(safe-area-inset-left, 0px), 5vw); --gr:max(16px, env(safe-area-inset-right, 0px), 5vw);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--ink); color:var(--paper); font-family:var(--body); font-size:16px; line-height:1.45; overflow:hidden}
a{color:inherit} p{margin:0}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:8px}

.stage{position:relative; height:100%; overflow:hidden; background:var(--ink); touch-action:pan-y}
.world{position:absolute; left:0; top:0; width:calc(var(--cols)*100%); height:calc(var(--rows)*100%); transform-origin:0 0; will-change:transform}
.room{position:absolute; width:calc(100%/var(--cols)); height:calc(100%/var(--rows)); background:var(--bg); color:var(--fg);
  display:flex; flex-direction:column; padding:62px var(--gr) calc(150px + env(safe-area-inset-bottom, 0px)) var(--gl); overflow:hidden}
.in{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; scrollbar-width:none}
.in::-webkit-scrollbar{display:none}
.box{margin:auto 0; width:100%; max-width:1040px; align-self:center; position:relative}
#home{--bg:var(--ink); --fg:#fff; --shade:var(--pink)}
#about{--bg:var(--blue); --fg:#fff; --shade:var(--ink)}
#skills{--bg:var(--cream); --fg:var(--ink); --shade:var(--red)}
#cves{--bg:var(--red); --fg:var(--ink); --shade:var(--ink)}
#honours{--bg:var(--yellow); --fg:var(--ink); --shade:var(--blue)}
#contact{--bg:var(--rose); --fg:#fff; --shade:var(--ink)}
#cves{--fg:#fff}
#honours{--shade:var(--ink)}
.room::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background:radial-gradient(circle, var(--fg) 1.1px, transparent 1.6px) 0 0/10px 10px;
  -webkit-mask-image:linear-gradient(135deg,#000 0,transparent 36%,transparent 64%,#000 100%); mask-image:linear-gradient(135deg,#000 0,transparent 36%,transparent 64%,#000 100%)}
.num{position:absolute; right:var(--gr); top:50px; font-family:var(--display); font-size:clamp(5rem, 17vw, 14rem); line-height:1; color:transparent;
  -webkit-text-stroke:2px var(--fg); opacity:.2; pointer-events:none}
.in{position:relative; z-index:1}
.haz{position:absolute; left:-4%; right:-4%; top:78px; height:20px; transform:rotate(2.4deg); z-index:0;
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 16px, var(--ink) 16px 32px); border-block:2px solid var(--ink)}
.ltr{display:inline-block; transform-origin:50% 100%; transition:transform .55s cubic-bezier(.3,1.7,.5,1); cursor:pointer}
.ltr.hit{transform:translateY(var(--dy,8%)) rotate(var(--rot,10deg)); transition:transform .1s ease-out}
#mark{pointer-events:auto; text-shadow:1px 1px 0 #8a3000,2px 2px 0 #8a3000,3px 3px 0 #8a3000,4px 4px 0 #8a3000,5px 5px 0 #8a3000,6px 6px 0 #8a3000,7px 7px 0 #8a3000,8px 8px 0 #8a3000}
#about{--pop:#000} #skills{--pop:var(--red)} #cves{--pop:var(--ink)} #honours{--pop:#fff} #contact{--pop:var(--ink)}
h2,.big{text-shadow:4px 4px 0 var(--pop, transparent)}
@keyframes slam{0%{transform:scale(2.6); opacity:0}60%{transform:scale(.93); opacity:1}100%{transform:scale(1); opacity:1}}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-8px 5px}40%{translate:7px -5px}60%{translate:-5px 3px}80%{translate:3px -2px}}
@keyframes drain{from{width:100%}to{width:0}}
.room.enter h2,.room.enter .big{animation:slam .42s cubic-bezier(.2,.9,.3,1.2) .8s backwards; transform-origin:0 60%}
.room.enter .in{animation:shake .32s linear 1.08s}
.stage.quake{animation:shake .3s linear}
.cve{position:relative}
.hp{grid-column:1; display:flex; align-items:center; gap:8px; margin-top:6px; font-family:var(--display); font-size:11px; letter-spacing:.12em}
.hp span{flex:1; height:9px; border:2px solid var(--ink); border-radius:99px; overflow:hidden; background:#fff}
.hp i{display:block; height:100%; width:0; background:var(--red)}
.room.enter .hp i{animation:drain .8s cubic-bezier(.5,0,.2,1) 1.3s backwards}
.room.enter .cve:nth-child(2) .hp i{animation-delay:1.55s} .room.enter .cve:nth-child(3) .hp i{animation-delay:1.8s}
.stamp{position:absolute; right:52px; top:-13px; font-family:var(--display); font-style:normal; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  border:2.5px solid var(--red); border-radius:6px; padding:1px 8px; background:#fff; transform:rotate(7deg)}
.room.enter .stamp{animation:slam .3s ease-out 2.1s backwards; transform-origin:50% 50%}
.room.enter .cve:nth-child(2) .stamp{animation-delay:2.35s} .room.enter .cve:nth-child(3) .stamp{animation-delay:2.6s}
#ach{position:fixed; z-index:25; right:max(12px, env(safe-area-inset-right, 0px)); top:calc(12px + env(safe-area-inset-top, 0px)); background:var(--ink); color:#fff;
  border:2.5px solid var(--yellow); border-radius:12px; padding:8px 14px; box-shadow:5px 5px 0 var(--yellow); transform:translateX(140%);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1); max-width:min(300px, calc(100% - 24px)); pointer-events:none}
#ach.show{transform:none}
#ach small{display:block; font-weight:700; font-size:10px; letter-spacing:.16em; color:var(--yellow)}
#ach b{font-family:var(--display); font-weight:400; font-size:17px; text-transform:uppercase; letter-spacing:.03em}
/* one stretchable typeface: titles ultra-condensed, room numbers ultra-wide, the name moves between both */
h1,h2,.sticker,.ribbon,.big,.tile .n,.tile h3,.cve b,.list b,.links b,.over,.hp,.stamp,#ach b,.pow,.drop{font-weight:900; font-stretch:58%}
.sticker,.ribbon,.tile h3,.cve b,.links b,#ach b,.stamp,.hp{font-stretch:72%; font-weight:800}
.num{font-weight:900; font-stretch:150%; font-size:clamp(4rem, 13vw, 11rem)}
h1{font-stretch:85%; letter-spacing:-.01em}
.ltr{font-stretch:85%}
@keyframes stretch{0%{font-stretch:150%; opacity:0; letter-spacing:.2em}55%{opacity:1}100%{font-stretch:58%; opacity:1; letter-spacing:.005em}}
.room.enter h2{animation:stretch .55s cubic-bezier(.2,.9,.2,1) .62s backwards}
.room.enter .big{animation-delay:.62s}
.room.enter .in{animation-delay:.9s}
.hud{gap:4px; padding:5px}
.tabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:0 14px; min-height:44px; font-family:var(--display); font-weight:900; font-stretch:68%; font-size:16px; text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap; border:2.5px solid transparent; transition:background .25s, color .25s}
.tabs button:hover{background:#ececec}
.tabs button[aria-current="true"]{background:var(--tb); color:var(--tf); border-color:var(--ink)}
#mapbtn{width:46px; padding:0; justify-content:center; background:var(--yellow); color:var(--ink); border:2.5px solid var(--ink); flex:none}
#mapbtn svg{width:22px; height:22px}
#mapbtn[aria-pressed="true"]{background:var(--ink); color:var(--yellow)}
.hud .nav{flex:none}
@media (max-width:640px){
  .hud .prev,.hud .next{display:none}
  .hud{max-width:calc(100% - 16px)}
  .tabs button{padding:0 6px; font-size:13px; font-stretch:56%; min-height:42px}
  #mapbtn{width:40px}
  #ach{top:calc(44px + env(safe-area-inset-top, 0px))}
}
#fx{position:fixed; inset:0; z-index:24; pointer-events:none; overflow:hidden}
#fx svg{position:absolute; inset:0; width:100%; height:100%; mix-blend-mode:difference}
.crack{fill:none; stroke:#fff; stroke-width:2.4; stroke-linejoin:bevel; stroke-linecap:round; animation:crk 1.5s ease-out forwards}
@keyframes crk{0%{opacity:1; stroke-dashoffset:var(--l)}16%{stroke-dashoffset:0}72%{opacity:1}100%{opacity:0; stroke-dashoffset:0}}
.pow{position:absolute; font-family:var(--display); text-transform:uppercase; font-size:clamp(1.5rem, 5vw, 3.2rem); line-height:1; color:var(--ink); background:var(--yellow);
  border:3px solid var(--ink); padding:6px 16px 4px; box-shadow:6px 6px 0 var(--ink); white-space:nowrap; animation:pow .95s cubic-bezier(.2,1.4,.4,1) forwards}
.pow small{display:block; font-size:.42em; letter-spacing:.14em; color:var(--red)}
@keyframes pow{0%{transform:translate(-50%,-50%) rotate(var(--r)) scale(.2); opacity:0}22%{transform:translate(-50%,-50%) rotate(var(--r)) scale(1.18); opacity:1}
  70%{transform:translate(-50%,-62%) rotate(var(--r)) scale(1); opacity:1}100%{transform:translate(-50%,-95%) rotate(var(--r)) scale(.95); opacity:0}}
.drop{position:absolute; top:-14%; font-family:var(--display); line-height:1; color:var(--yellow); -webkit-text-stroke:2px var(--ink); animation:fall linear forwards}
@keyframes fall{to{transform:translateY(135vh)}}
.stage{--mx:0; --my:0}
.num{translate:calc(var(--mx)*-22px) calc(var(--my)*-14px)}
.row .sticker{translate:calc(var(--mx)*12px) calc(var(--my)*9px)}
#mark{translate:calc(var(--mx)*-9px) calc(var(--my)*-6px)}
.tile,.cve,.links .sticker{translate:calc(var(--mx)*6px) calc(var(--my)*5px)}
.ltr.intro{animation:slam .42s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay:calc(var(--i)*62ms + 250ms)}
.god #mark{color:var(--yellow); filter:drop-shadow(0 0 26px rgba(255,208,0,.55))}
.god .hud{box-shadow:5px 5px 0 var(--yellow)}
@media (prefers-reduced-motion: reduce){ .room.enter *, .stage.quake, .ltr.intro{animation:none !important} }

h1,h2{font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:.88; margin:0; letter-spacing:.005em}
h1{font-size:clamp(3.6rem, min(18.6vw, 30vh), 19rem); color:var(--pink); text-align:center; white-space:nowrap}
h2{font-size:clamp(3rem, min(15vw, 17vh), 9rem)}
.hand{font-family:var(--hand); font-weight:400; line-height:1.15}
.sticker{display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink); border:2.5px solid var(--ink); border-radius:14px;
  padding:9px 16px; font-family:var(--display); font-size:clamp(1rem, 2.4vw, 1.35rem); letter-spacing:.03em; text-transform:uppercase; text-decoration:none;
  box-shadow:5px 5px 0 var(--shade); transform:rotate(var(--r,0deg)); cursor:pointer; transition:transform .18s, box-shadow .18s; white-space:nowrap}
.sticker:hover,.sticker.hot{transform:rotate(0deg) translate(-2px,-2px) scale(1.05); box-shadow:8px 8px 0 var(--shade)}
.lead{font-size:clamp(1rem, 1.9vw, 1.2rem); max-width:36em}

/* home */
.ribbon{position:absolute; left:-4%; right:-4%; top:60px; transform:rotate(-2deg); background:var(--pink); color:var(--ink); border-block:2.5px solid #fff;
  font-family:var(--display); font-size:15px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; overflow:hidden; padding:6px 0; z-index:1}
.ribbon span{display:inline-block; animation:slide 26s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.hub{display:flex; flex-direction:column; align-items:center; gap:clamp(40px, 8.5vh, 90px)}
.row{display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:14px 22px; width:100%}
.mid{display:flex; flex-direction:column; align-items:center; gap:10px}
.tagline{font-size:clamp(1.05rem, 3vw, 1.9rem); text-align:center}
.who{font-size:13px; letter-spacing:.2em; text-transform:uppercase; opacity:.7; text-align:center}
#arrows{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:2}
#arrows path{fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s}
#arrows path.hot{stroke:var(--pink); stroke-width:4.5}

/* content rooms */
.eyebrow{font-size:clamp(.95rem, 2.3vw, 1.4rem); margin-bottom:8px; display:block}
.cols{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px 40px; align-items:center; margin-top:18px}
.stack{display:grid; gap:12px}
.stats{display:flex; flex-wrap:wrap; gap:14px; margin-top:16px}
.big{font-family:var(--display); font-size:clamp(4.5rem, min(26vw, 19vh), 11rem); line-height:.86; margin-bottom:.1em}
.tiles{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:20px}
.tile{position:relative; background:#fff; color:var(--ink); border:2.5px solid var(--ink); border-radius:16px; padding:14px; box-shadow:5px 5px 0 var(--shade); min-width:0}
.tile:nth-child(odd){transform:rotate(-1deg)} .tile:nth-child(even){transform:rotate(1.2deg)}
.tile .n{font-family:var(--display); font-size:13px; letter-spacing:.1em; color:var(--red)}
.tile h3{font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.05rem, 2.2vw, 1.4rem); line-height:1; margin:4px 0 8px}
.tile p{font-size:13.5px; line-height:1.35}
.tile .to{position:absolute; right:-17px; top:50%; width:24px; height:24px; margin-top:-12px; z-index:2; color:var(--ink)}
.tile:last-child .to{display:none}
.cards{display:grid; gap:12px; margin-top:16px}
.cve{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; align-items:center; text-decoration:none; background:#fff; color:var(--ink);
  border:2.5px solid var(--ink); border-radius:16px; padding:12px 16px; box-shadow:5px 5px 0 var(--shade); transition:transform .18s}
.cve:hover{transform:translate(-2px,-2px)}
.cve b{font-family:var(--display); font-weight:800; font-size:clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing:.02em}
.cve b i{font-style:normal; font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; vertical-align:middle; margin-left:8px; padding:2px 8px; border:1.5px solid var(--ink); border-radius:999px}
.cve p{grid-column:1; font-size:14px; line-height:1.35}
.cve svg{grid-row:1/3; grid-column:2; width:30px; height:30px; transform:rotate(-45deg)}
.list{list-style:none; padding:0; margin:18px 0 0; display:grid}
.list li{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 18px; padding:14px 0; border-top:2.5px solid var(--ink)}
.list li:last-child{border-bottom:2.5px solid var(--ink)}
.list b{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(1.25rem, 3.2vw, 2.2rem); line-height:1; min-width:0}
.list a,.list span{font-weight:700; font-size:14px; white-space:nowrap}
.small{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-top:12px; opacity:.75}
.links{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; max-width:760px}
.links a{display:grid; gap:0; white-space:normal; text-transform:none; padding:14px 18px; border-radius:18px; min-width:0}
.links small{font-family:var(--body); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.6}
.links b{font-family:var(--display); font-weight:800; font-size:clamp(1rem, 2.4vw, 1.5rem); letter-spacing:.02em; overflow-wrap:anywhere; line-height:1.1}

/* the hand-drawn "next" arrow in each room */
.go{position:absolute; bottom:calc(86px + env(safe-area-inset-bottom, 0px)); display:inline-flex; align-items:center; gap:10px; background:none; border:0; padding:6px 4px;
  cursor:pointer; font-family:var(--hand); font-weight:400; font-size:clamp(1rem, 2.5vw, 1.45rem); color:var(--fg); z-index:3}
.go.r{right:var(--gr)} .go.l{left:var(--gl); flex-direction:row-reverse} .go.c{left:50%; transform:translateX(-50%)}
.go svg{width:74px; height:40px; overflow:visible; transform:rotate(var(--a,0deg)); animation:wob .5s steps(2) infinite}
.go:hover svg{animation-duration:.2s}
@keyframes wob{0%{translate:0 0}50%{translate:1.5px -1.5px}100%{translate:0 0}}
.draw{fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round}

/* whole-wall map */
.over{position:absolute; inset:0; display:none; place-items:center; border:0; cursor:pointer; z-index:6;
  background:color-mix(in srgb, var(--bg) 60%, transparent); color:var(--fg); font-family:var(--display); text-transform:uppercase; font-size:min(21vw, 30vh); line-height:1}
.stage.map .over{display:grid}
.stage.map .room > :not(.over){pointer-events:none}
.stage.map .room{outline:6px solid var(--ink)}

.logo{position:fixed; z-index:20; left:var(--gl); top:calc(14px + env(safe-area-inset-top, 0px)); font-family:var(--hand); font-weight:400; font-size:19px; color:var(--logo,#fff); transition:color .6s; pointer-events:none}
.hud{position:fixed; z-index:20; left:50%; transform:translateX(-50%); bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; gap:6px; padding:6px; background:#fff; color:var(--ink); border:2.5px solid var(--ink); border-radius:999px; box-shadow:5px 5px 0 var(--pink);
  max-width:calc(100% - 24px)}
.hud button{border:0; background:none; cursor:pointer; min-height:46px; border-radius:999px; display:inline-flex; align-items:center; gap:10px}
.hud .nav{width:46px; justify-content:center; background:var(--ink); color:#fff}
.hud .nav svg{width:24px; height:24px}
.hud .nav.prev svg{transform:rotate(180deg)}
#mapbtn{padding:0 14px 0 10px; font-family:var(--display); font-size:17px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap}
#mini{display:grid; grid-template-columns:repeat(var(--cols), 13px); gap:3px}
#mini i{height:10px; border-radius:3px; border:1.5px solid var(--ink); opacity:.45}
#mini i.on{opacity:1; outline:2px solid var(--ink); outline-offset:1px}
#where{min-width:4.6em; text-align:left}
#mapbtn small{font-family:var(--body); font-weight:700; font-size:10px; letter-spacing:.12em; opacity:.55}

@media (max-width:820px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile .to{display:none}
  .tile p{font-size:12.5px}
  .lead{font-size:.98rem}
  .room{padding-top:56px}
}
@media (max-width:520px){ .links{grid-template-columns:minmax(0,1fr); gap:13px} }
@media (max-height:640px){ .hub{gap:20px} .ribbon{display:none} }
@media (prefers-reduced-motion: reduce){
  .world{transition:none}
  .ribbon span,.go svg{animation:none}
  *{transition:none !important}
}

/* ---- themes: bold night by default, pale day when the viewer prefers light ---- */
:root{ --base:#0a0a0a; --on:#ffffff; --c-about:#1230c8; --c-skills:#e4e1d8; --c-cves:#232a35; --c-hon:#ffd000; --c-con:#0c5e43; --popd:#000000; --ok:#0c7a52; --red:var(--pink); color-scheme:dark }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --base:#f6f3ea; --on:#0a0a0a; --c-about:#d5ddff; --c-skills:#eceae2; --c-cves:#dde2ea; --c-hon:#ffe566; --c-con:#cdebd9; --popd:#ff5a00; color-scheme:light }
}
:root[data-theme="light"]{ --base:#f6f3ea; --on:#0a0a0a; --c-about:#d5ddff; --c-skills:#eceae2; --c-cves:#dde2ea; --c-hon:#ffe566; --c-con:#cdebd9; --popd:#ff5a00; color-scheme:light }
body,.stage{background:var(--base)}
#home{--bg:var(--base); --fg:var(--on)}
#about{--bg:var(--c-about); --fg:var(--on); --pop:var(--popd)}
#skills{--bg:var(--c-skills); --fg:var(--ink); --shade:var(--pink); --pop:var(--pink)}
#cves{--bg:var(--c-cves); --fg:var(--on); --shade:var(--pink); --pop:var(--popd)}
#honours{--bg:var(--c-hon); --fg:var(--ink)}
#contact{--bg:var(--c-con); --fg:var(--on); --pop:var(--popd)}
#arrows path{stroke:var(--fg)}
.ribbon{border-color:var(--on)}
.stamp{color:var(--ok); border-color:var(--ok)}
.tabs button[aria-current="true"]{box-shadow:inset 0 -5px 0 var(--pink)}

/* top-right switches */
.ctl{position:fixed; z-index:26; right:max(12px, env(safe-area-inset-right, 0px)); top:calc(10px + env(safe-area-inset-top, 0px)); display:flex; gap:6px}
.ctl button{min-height:36px; padding:0 12px; border-radius:999px; background:#fff; color:var(--ink); border:2.5px solid var(--ink); cursor:pointer;
  font-family:var(--display); font-weight:800; font-stretch:72%; font-size:13px; letter-spacing:.06em; text-transform:uppercase; box-shadow:3px 3px 0 var(--pink)}
.ctl button[aria-pressed="true"]{background:var(--yellow)}
#ach{top:calc(58px + env(safe-area-inset-top, 0px))}
@media (max-width:640px){ .logo{font-size:14px; top:calc(19px + env(safe-area-inset-top, 0px))} .ctl button{padding:0 9px; font-size:12px} #ach{top:calc(58px + env(safe-area-inset-top, 0px))} }

/* surface: print grain over everything, a soft light that follows the cursor, a custom arrow cursor */
body::after{content:""; position:fixed; inset:0; z-index:23; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(560px circle at var(--px, 50%) var(--py, 38%), rgba(255,255,255,.34), transparent 66%)}
.calm .stage::after{display:none}
body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M4 3v21l6-6 4 9 4-2-4-9h9z' fill='%23ff5a00' stroke='%230a0a0a' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3, auto}
/* giant outlined type drifting behind each room */
.band{position:absolute; left:0; right:0; bottom:0; overflow:hidden; pointer-events:none; white-space:nowrap; line-height:.9; z-index:0;
  font-family:var(--display); font-weight:900; font-stretch:150%; text-transform:uppercase; font-size:clamp(4.5rem, 17vh, 10rem); color:transparent; -webkit-text-stroke:2px var(--fg); opacity:.13}
.band span{display:inline-block; animation:slide 60s linear infinite}
.calm .band span{animation:none}
#home .in{overflow:hidden}
.hub::before{content:"FALCON"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-7deg); z-index:-1; pointer-events:none; white-space:nowrap;
  font-family:var(--display); font-weight:900; font-stretch:150%; font-size:min(25vw, 40vh); line-height:1; color:transparent; -webkit-text-stroke:2px var(--fg); opacity:.08}
@media (prefers-reduced-motion: reduce){ .band span{animation:none} }
/* kill feed on Home: cycles through every CVE like a game scoreboard */
#feed{position:absolute; left:var(--gl); bottom:calc(94px + env(safe-area-inset-bottom, 0px)); z-index:3; display:flex; align-items:center; gap:8px; max-width:calc(100% - 260px);
  font-family:var(--display); font-weight:800; font-stretch:72%; font-size:14px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg); white-space:nowrap}
#feed b{background:var(--pink); color:var(--ink); padding:4px 9px; border-radius:6px; border:2px solid var(--ink); flex:none}
#feed span{overflow:hidden; text-overflow:ellipsis}
#feed.tick{animation:feedin .35s ease-out}
@keyframes feedin{from{transform:translateX(-18px); opacity:0}}
.calm #feed{display:none}
@media (max-width:640px){ #feed{bottom:calc(134px + env(safe-area-inset-bottom, 0px)); max-width:calc(100% - 32px); font-size:12px} }
/* calm mode: same site, no stunts */
.calm .room.enter *, .calm .ribbon span, .calm .go svg, .calm .ltr.intro{animation:none !important}
.calm .hp, .calm .haz, .calm .num, .calm #ach, .calm .room::before{display:none}

/* timeline */
.tl{list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
.tl li{position:relative; border-top:3px solid var(--ink); padding-top:9px; min-width:0}
.tl li::after{content:"→"; position:absolute; right:-12px; top:-16px; font-weight:700; font-size:20px; line-height:1}
.tl li:last-child::after{content:none}
.tl b{display:block; font-family:var(--display); font-weight:900; font-stretch:58%; font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:1}
.tl span{display:block; font-size:13.5px; line-height:1.3; margin-top:4px; font-weight:500}
@media (max-width:820px){ #cves p.hand{display:none} #cves .big{font-size:4.2rem} #cves .cards{gap:9px; margin-top:10px} #cves .stats{margin-top:10px}
  .tl{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px} .tl span{font-size:12.5px} }

/* sheets: longer lists slide up over the wall */
.scrim{position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.6); display:none}
.scrim.open{display:block}
.sheet{position:fixed; z-index:41; left:50%; bottom:0; width:min(940px, 100%); max-height:92%; display:flex; flex-direction:column; background:#fff; color:var(--ink);
  border:3px solid var(--ink); border-bottom:0; border-radius:22px 22px 0 0; box-shadow:0 -8px 0 var(--pink);
  transform:translate(-50%, 106%); visibility:hidden; transition:transform .4s cubic-bezier(.2,.9,.2,1), visibility 0s .4s}
.sheet.open{transform:translate(-50%, 0); visibility:visible; transition:transform .4s cubic-bezier(.2,.9,.2,1), visibility 0s}
.sheet header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:3px solid var(--ink)}
.sheet h3{font-family:var(--display); font-weight:900; font-stretch:60%; text-transform:uppercase; font-size:clamp(1.5rem, 4.4vw, 2.3rem); margin:0; line-height:1}
.sheet .x{width:42px; height:42px; border-radius:50%; background:var(--ink); color:#fff; border:0; cursor:pointer; font-size:20px; line-height:1; flex:none}
.sheet .body{overflow-y:auto; padding:16px 18px calc(26px + env(safe-area-inset-bottom, 0px)); display:grid; gap:14px}
.sheet h4{font-family:var(--display); font-weight:900; font-stretch:68%; text-transform:uppercase; font-size:1.05rem; letter-spacing:.04em; margin:8px 0 0; color:#b23f00}
.sheet p{font-size:15px; line-height:1.45}
.sheet a{color:#0b3fd1; font-weight:700}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips button{min-height:36px; padding:0 12px; border-radius:999px; background:#fff; border:2.5px solid var(--ink); cursor:pointer; font-weight:700; font-size:13px}
.chips button[aria-pressed="true"]{background:var(--ink); color:#fff}
.crow{display:grid; grid-template-columns:9.4em minmax(0,1fr) auto; gap:2px 14px; align-items:baseline; padding:10px 0; border-top:2px solid var(--ink)}
.crow b{font-family:var(--display); font-weight:800; font-stretch:74%; font-size:1.02rem; white-space:nowrap}
.crow small{display:block; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#555}
.crow p{font-size:14.5px}
.crow a{white-space:nowrap; font-size:13.5px}
.rowi{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 16px; padding:10px 0; border-top:2px solid var(--ink)}
.rowi b{font-weight:700} .rowi span{color:#555; font-size:14px}
@media (max-width:600px){ .crow{grid-template-columns:minmax(0,1fr) auto} .crow p{grid-column:1/-1} }
.phone{width:min(340px, 100%); margin:0 auto; border:3px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:6px 6px 0 var(--ink)}
.phone .bar{display:flex; align-items:center; gap:8px; padding:10px 12px; background:#eef0f4; border-bottom:2px solid var(--ink); font-family:ui-monospace,Consolas,monospace; font-size:14px; font-weight:700; white-space:nowrap}
.phone .bar svg{width:13px; height:13px; flex:none; color:var(--ok)}
.phone .bar.bad{background:#ffe9d6}
.phone .pg{padding:18px 16px 20px; display:grid; gap:10px}
.phone .pg strong{font-family:var(--display); font-weight:900; font-stretch:70%; font-size:1.3rem; text-transform:uppercase}
.phone .pg i{display:block; height:38px; border:2px solid #b9bfca; border-radius:8px; font-style:normal; font-size:13px; color:#7a8290; padding:9px 10px}
.phone .pg em{display:block; text-align:center; font-style:normal; font-weight:700; background:var(--ink); color:#fff; border-radius:8px; padding:9px}
.demo-msg{text-align:center; font-weight:700; min-height:3em; max-width:30em; margin:0 auto}
.demo-go{justify-self:center}
.arsenal{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:20px}
.ars{text-align:left; cursor:pointer; font-family:var(--body); transition:transform .18s, box-shadow .18s}
.ars:hover{transform:rotate(0deg) translate(-3px,-3px) !important; box-shadow:9px 9px 0 var(--shade)}
.ars .n{color:var(--ink); opacity:.6}
.ars h3{font-size:clamp(1.05rem, 2vw, 1.35rem)}
.tkgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.tk{border:2.5px solid var(--ink); border-radius:16px; padding:14px; box-shadow:5px 5px 0 var(--c); min-width:0}
.tk h4{margin:0 0 10px; color:var(--ink); display:flex; align-items:center; gap:9px}
.tk h4::before{content:""; width:15px; height:15px; border-radius:4px; background:var(--c); border:2px solid var(--ink); flex:none}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags span{border:2px solid var(--ink); border-radius:999px; padding:3px 10px; font-size:13px; font-weight:600; background:#fff}
.rowi.med{display:grid; grid-template-columns:3.2em minmax(0,1.1fr) minmax(0,1fr); gap:2px 14px; align-items:baseline}
.rowi.med i{font-style:normal; font-family:var(--display); font-weight:900; font-stretch:62%; font-size:1.15rem; color:#b23f00}
.kv{display:grid; grid-template-columns:11em minmax(0,1fr); gap:2px 14px; padding:9px 0; border-top:2px solid var(--ink); align-items:baseline}
.kv b{font-family:var(--display); font-weight:800; font-stretch:72%; text-transform:uppercase; font-size:.92rem; letter-spacing:.03em}
@media (max-width:820px){ .arsenal{grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px} .ars{padding:9px 12px} .ars p{display:none} .ars h3{margin:2px 0 0; font-size:1rem} }
@media (max-width:700px){ .tkgrid{grid-template-columns:minmax(0,1fr)} .rowi.med{grid-template-columns:3em minmax(0,1fr)} .rowi.med span{grid-column:2} .kv{grid-template-columns:minmax(0,1fr)} }
.gstats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.gstats div{border:2.5px solid var(--ink); border-radius:14px; padding:12px; box-shadow:4px 4px 0 var(--pink); min-width:0}
.gstats b{display:block; font-family:var(--display); font-weight:900; font-stretch:62%; font-size:clamp(1.6rem, 5vw, 2.6rem); line-height:1; font-variant-numeric:tabular-nums}
.gstats span{display:block; font-size:12.5px; font-weight:700; color:#555; margin-top:4px; line-height:1.25}
.bars{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; height:190px}
.bars div{display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; text-align:center; min-width:0}
.bars em{font-style:normal; font-size:11px; font-weight:700; margin-bottom:3px; font-variant-numeric:tabular-nums}
.bars i{display:block; height:calc(var(--h) * .72); min-height:3px; background:var(--pink); border:2px solid var(--ink); border-radius:5px 5px 0 0}
.bars small{font-size:11px; font-weight:700; padding-top:4px; border-top:2px solid var(--ink)}
@media (max-width:600px){ .gstats{grid-template-columns:repeat(2,minmax(0,1fr))} .bars em{font-size:9px} .bars small{font-size:9.5px} .bars{gap:3px} }
/* skills as a clean index: one ruled row per field */
.arsenal{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px; margin-top:22px}
.arow{position:relative; overflow:hidden; display:grid; grid-template-columns:16px auto minmax(0,1fr) auto 22px; align-items:center; gap:14px; padding:14px 8px;
  background:none; border:0; border-bottom:2.5px solid var(--fg); color:var(--fg); text-align:left; cursor:pointer; font-family:var(--body); transition:color .2s}
.arow:nth-child(-n+2){border-top:2.5px solid var(--fg)}
.arow::before{content:""; position:absolute; inset:0; background:var(--fg); transform:translateX(-101%); transition:transform .28s cubic-bezier(.2,.9,.2,1)}
.arow:hover::before,.arow:focus-visible::before{transform:none}
.arow:hover,.arow:focus-visible{color:var(--bg)}
.arow > *{position:relative}
.arow i{width:16px; height:16px; border-radius:4px; background:var(--c); border:2px solid currentColor}
.arow b{font-family:var(--display); font-weight:800; font-stretch:68%; text-transform:uppercase; font-size:clamp(1.05rem, 1.8vw, 1.4rem); letter-spacing:.02em; white-space:nowrap}
.arow span{font-size:13px; opacity:.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.arow em{font-style:normal; font-weight:700; font-size:12px; border:2px solid currentColor; border-radius:999px; padding:1px 9px; font-variant-numeric:tabular-nums}
.arow .ar svg{width:20px; height:20px; display:block; transition:transform .2s}
.arow:hover .ar svg{transform:translateX(4px)}
@media (max-width:820px){
  .arsenal{grid-template-columns:minmax(0,1fr); margin-top:12px}
  .arow{grid-template-columns:14px minmax(0,1fr) auto 20px; padding:10px 4px; gap:10px}
  .arow:nth-child(2){border-top:0}
  .arow span{display:none} .arow i{width:14px; height:14px} .arow b{font-size:1.02rem; overflow:hidden; text-overflow:ellipsis}
}
/* intro */
.who{font-family:var(--display); font-weight:800; font-stretch:74%; font-size:clamp(.82rem, 1.7vw, 1.15rem); letter-spacing:.12em; opacity:1; text-wrap:balance}
.who i{font-style:normal; color:var(--pink); padding:0 .35em}
#brk{display:inline-block; min-width:5.6em; text-align:center; color:var(--pink); border-bottom:3px solid var(--pink); line-height:1.05}
#brk.flip{animation:flip .42s cubic-bezier(.2,.9,.3,1.2)}
@keyframes flip{from{transform:translateY(55%) rotate(-5deg); opacity:0}}
.dstrip{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin-top:6px}
.dstrip span{font-size:12.5px; font-weight:500; letter-spacing:.04em; border:2px solid var(--fg); border-radius:999px; padding:3px 12px; white-space:nowrap}
.dstrip b{font-family:var(--display); font-weight:900; font-stretch:68%; font-size:1.15em; color:var(--pink)}
.calm #brk.flip{animation:none}
.tl{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:820px){ .tl{grid-template-columns:repeat(2,minmax(0,1fr))} .hub{gap:clamp(26px, 5vh, 50px)} .dstrip span{font-size:11px; padding:2px 9px} }
/* two more rooms */
:root{ --c-field:#0b3b46; --c-gal:#2a1c5a }
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --c-field:#cfe6ea; --c-gal:#e3dcff } }
:root[data-theme="light"]{ --c-field:#cfe6ea; --c-gal:#e3dcff }
#field{--bg:var(--c-field); --fg:var(--on); --shade:var(--ink); --pop:var(--popd)}
#gallery{--bg:var(--c-gal); --fg:var(--on); --shade:var(--pink); --pop:var(--popd)}
/* photos as duotone halftone posters: ink and orange until you hover or tap, then the real colours */
.posters{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; margin-top:26px}
.poster{position:relative; margin:0; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); transform:rotate(var(--r,0deg)); transition:transform .25s; cursor:pointer; background:var(--pink)}
.poster::before{content:""; position:absolute; top:-13px; left:50%; width:78px; height:22px; margin-left:-39px; z-index:2; transform:rotate(-4deg);
  background:repeating-linear-gradient(-45deg, var(--yellow) 0 8px, var(--ink) 8px 16px); border:2px solid var(--ink)}
.poster .ph{position:relative; overflow:hidden; aspect-ratio:3/4; background:var(--pink)}
.poster img{display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); filter:grayscale(1) contrast(1.5) brightness(1.1); mix-blend-mode:multiply; transition:filter .35s}
.poster .ph::after{content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.6; transition:opacity .35s;
  background:radial-gradient(circle, rgba(10,10,10,.6) 1px, transparent 1.7px) 0 0/6px 6px}
.poster:hover img, .poster:focus-visible img, .poster.on img{filter:none; mix-blend-mode:normal}
.poster:hover .ph::after, .poster:focus-visible .ph::after, .poster.on .ph::after{opacity:0}
.poster:hover, .poster.on{transform:rotate(0deg) scale(1.04); z-index:2}
.poster figcaption{position:absolute; left:-10px; bottom:16px; background:var(--ink); color:#fff; border:2px solid #fff; padding:5px 11px; transform:rotate(-3deg);
  font-family:var(--display); font-weight:800; font-stretch:72%; font-size:13px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
/* avatar badge with turning ring text */
.ava{position:relative; width:min(230px, 28vh); aspect-ratio:1; margin-bottom:14px}
.ava svg{position:absolute; inset:0; width:100%; height:100%; animation:spin 26s linear infinite; overflow:visible}
.ava text{font-family:var(--display); font-weight:800; font-stretch:80%; font-size:12.4px; letter-spacing:.08em; fill:var(--fg)}
.ava span{position:absolute; inset:14%; border-radius:50%; overflow:hidden; background:var(--pink); border:3.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink)}
.ava img{display:block; width:118%; max-width:none; margin:4% 0 0 -9%}
@keyframes spin{to{transform:rotate(360deg)}}
#about .cols > div:last-child{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 22px; align-items:center}
#about .ava{grid-row:1/3; width:min(200px, 25vh); margin:0}
#about .big{font-size:clamp(3.2rem, min(11vw, 15vh), 7.5rem); align-self:end}
#about .cols > div:last-child > .hand{align-self:start}
#about .stats{grid-column:1/-1}
.artwall{max-width:740px}
.calm .ava svg{animation:none}
/* gallery frames */
.artwall{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-top:24px; max-width:690px}
.frame{display:block; padding:6px; background:#fff; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--shade, var(--ink)); cursor:pointer; transform:rotate(var(--r,0deg)); transition:transform .22s}
.frame:hover{transform:rotate(0deg) scale(1.05); z-index:2}
.frame img{display:block; width:100%}
.artwall .frame img{aspect-ratio:1; object-fit:cover}
.artall{columns:3 200px; column-gap:16px}
.artall .frame{width:100%; margin:0 0 16px; transform:none; break-inside:avoid; box-shadow:5px 5px 0 var(--pink)}
.artall .frame:hover{transform:translate(-2px,-2px)}
.lb{position:fixed; inset:0; z-index:60; background:rgba(10,10,10,.92); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:max(14px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px))}
.lb figure{margin:0; display:grid; justify-items:center; gap:10px; min-width:0}
.lb img{max-width:100%; max-height:80vh; border:4px solid #fff; box-shadow:8px 8px 0 var(--pink); background:#fff}
.lb figcaption{color:#fff; font-family:var(--display); font-weight:800; font-stretch:72%; letter-spacing:.08em}
.lbn, .lbx{width:48px; height:48px; border-radius:50%; border:2.5px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; font-size:24px; line-height:1}
.lbn svg{width:24px; height:24px} .lbn.prev svg{transform:rotate(180deg)}
.lbx{position:absolute; right:max(14px, env(safe-area-inset-right, 0px)); top:max(14px, env(safe-area-inset-top, 0px)); background:var(--pink)}
@media (max-width:820px){
  .posters{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px; margin-top:20px}
  .poster .ph{aspect-ratio:1}
  .poster figcaption{font-size:11px; bottom:10px}
  #about .cols > div:last-child{display:block}
  #about .ava{position:absolute; right:0; top:-4px; width:104px; margin:0}
  #about .big{font-size:4rem}
  .ava text{font-size:13px}
  .artwall{gap:11px; margin-top:16px} .frame{padding:4px; border-width:2.5px}
  .lbn{width:40px; height:40px}
}
@media (prefers-reduced-motion: reduce){ .ava svg{animation:none} }
/* tight crops: each photo is zoomed onto one person, the same crop at every screen size */
.poster img{transform:scale(var(--z,1)); transform-origin:var(--o, 50% 50%)}
@media (max-width:820px){ .posters{max-width:310px} .poster .ph{aspect-ratio:3/4} }
/* email tile */
.mail{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:12px; white-space:normal; text-transform:none; padding:14px 18px; border-radius:18px; cursor:default}
.mail > div{display:grid; min-width:0}
.links .mail a{display:inline; padding:0; text-decoration:underline; text-underline-offset:3px}
.mail button{flex:none; min-height:40px; padding:0 16px; border-radius:999px; background:var(--ink); color:#fff; border:0; cursor:pointer; font-weight:700; font-size:14px}