@font-face{font-family:"Archivo Narrow";src:url("/fonts/ArchivoNarrow-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Therma";src:url("/fonts/ThermaBold-latin.woff2") format("woff2");font-weight:700;font-display:block}

:root,[data-theme="blue"]{color-scheme:dark;--bg:#1328A8;--ink:#FFFFFF;--accent:#1DFF5D;--dot:#1DFF5D;--line:#FFFFFF}
[data-theme="white"]{color-scheme:light;--bg:#FFFFFF;--ink:#1328A8;--accent:#262626;--dot:#1DFF5D;--line:#1328A8}
@media (prefers-color-scheme:light){[data-theme="auto"]{color-scheme:light;--bg:#FFFFFF;--ink:#1328A8;--accent:#262626;--dot:#1DFF5D;--line:#1328A8}}
@media (prefers-color-scheme:dark){[data-theme="auto"]{color-scheme:dark;--bg:#1328A8;--ink:#FFFFFF;--accent:#1DFF5D;--dot:#1DFF5D;--line:#FFFFFF}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--bg);color:var(--ink);
  font:500 16px/1.4 "Archivo Narrow","Arial Narrow",system-ui,sans-serif;transition:background-color .3s,color .3s}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[data-theme="blue"] :focus-visible{outline-color:#1DFF5D}

.skip{position:absolute;left:16px;top:-60px;z-index:10;padding:10px 14px;background:var(--ink);color:var(--bg);text-decoration:none}
.skip:focus{top:16px}

/* Bar: logo left, two square buttons right (design: 48px edge, 40px logo, 46px buttons, 24px gap) */
.bar{--edge:clamp(16px,3.34vw,48px);position:fixed;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:max(var(--edge) - 20px, 12px) var(--edge) 0;padding-left:max(var(--edge),env(safe-area-inset-left));padding-right:max(var(--edge),env(safe-area-inset-right));z-index:5;pointer-events:none}
.bar>*{pointer-events:auto}
.logo{display:block;width:40px;height:40px;color:var(--ink)}
.logo svg{display:block;width:100%;height:100%;fill:currentColor}
.tools{display:flex;gap:24px}
.sq{width:46px;height:46px;display:grid;place-items:center;padding:0;background:transparent;color:var(--ink);
  border:1px solid var(--line);border-radius:0;cursor:pointer;transition:background-color .2s,color .2s}
.sq svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.sq:hover{background:var(--ink);color:var(--bg)}
.dot{width:14px;height:14px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px var(--ink)}
.sq:hover .dot{box-shadow:0 0 0 4px var(--bg)}

/* Accessibility panel */
.panel{position:absolute;top:calc(100% + 12px);right:max(var(--edge),env(safe-area-inset-right));width:min(280px,calc(100vw - 32px));
  padding:20px;background:var(--bg);color:var(--ink);border:1px solid var(--line);max-height:calc(100svh - 90px);overflow:auto}
.panel h2{margin:0 0 12px;font:700 28px/1 "Therma",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.panel fieldset{border:0;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.panel legend{width:100%;padding:0 0 6px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.panel label{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.panel input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.panel .note{margin:4px 0 0;font-size:13px;opacity:.85}

/* Masthead. Therma caps are .70em tall; MILENKOVSKI ink is 3.28em wide.
   Width: same 48px edge as the bar, so the name runs edge to edge. Height cap keeps it inside short screens. */
main{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:96px 0 56px;outline:0;overflow:clip}
.mast{--g:clamp(16px,3.34vw,48px);
  --fs:min(calc((100vw - 2 * var(--g)) / 3.28), calc((100svh - 190px) / (1.48 * var(--k,1))));
  margin:0;font-family:"Therma","Arial Narrow",sans-serif;font-weight:700;font-size:var(--fs);line-height:.78;
  text-transform:uppercase;letter-spacing:0;color:var(--ink);width:max-content;
  opacity:0}
.ready .mast,.no-js .mast{opacity:1}
.vis{display:flex;flex-direction:column}
.sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;text-transform:none}
.ln{display:flex;margin-left:-.05em;margin-right:-.05em}
.row{display:flex;justify-content:space-between;align-items:flex-start}
.soon{display:flex;flex-direction:column;align-items:flex-end;font-size:.352em;line-height:.775;color:var(--accent)}
.ln{white-space:nowrap}
/* Drag the letters (idea from colederochie.com): each name letter can be grabbed, thrown and put back.
   JS sets --x/--y/--r/--z on the letter; transparent buttons sit on top for pointer and keyboard. */
.ch{display:inline-block;transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg)) scale(var(--z,1));transform-origin:50% 50%;will-change:transform}
.ch.lift{position:relative;z-index:2}
.vis{-webkit-user-select:none;user-select:none}
.grab{position:absolute;inset:0;pointer-events:none;z-index:3}
.grab button{position:absolute;left:0;top:0;padding:0;margin:0;border:0;background:transparent;cursor:grab;touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.grab button:active{cursor:grabbing}
.grab button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.foot{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:0 var(--edge,clamp(16px,3.34vw,48px)) max(clamp(14px,2.2vw,28px),env(safe-area-inset-bottom));font-size:14px;letter-spacing:.04em;text-transform:uppercase;z-index:4;pointer-events:none}
.foot>*{pointer-events:auto}
.hint{margin:0;opacity:.85}
.reset{background:var(--bg);font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);border:1px solid var(--line);padding:10px 14px;min-height:44px;cursor:pointer}
.reset:hover{background:var(--ink);color:var(--bg)}
.reset[hidden]{display:none}
.foot-r{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.reset[aria-pressed="true"]{background:var(--ink);color:var(--bg)}


/* Entrance: a short rise, off for reduced motion */
@keyframes rise{from{transform:translateY(.12em);opacity:0}to{transform:none;opacity:1}}
.ready .row1>.ln{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.ready .row2 .ln{animation:rise .7s .08s cubic-bezier(.2,.7,.2,1) both}
.ready .soon .ln{animation:rise .6s .28s cubic-bezier(.2,.7,.2,1) both}
.ready .soon .ln+.ln{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){[data-motion="auto"] *{animation:none!important;transition:none!important}}
[data-motion="off"] *{animation:none!important;transition:none!important}

/* Portrait screens: the name is width-bound and small, so stretch it taller (the same pull the letters do on hover). */
.mast{--k:1}
@media (max-aspect-ratio:1/1){.mast{--k:1.45;--fs:calc((100vw - 2 * var(--g)) / 3.28)}}
@media (max-aspect-ratio:3/4){.mast{--k:2}}
/* (on phones app.js sets --k so the name fills the screen height) */
.vis{transform:scaleY(var(--k));transform-origin:50% 50%}
.mast{margin-block:calc((var(--k) - 1) * .78em)}

/* Mini magic ball: white ball, green ring, blue window, white triangle (portfolio7's 8 ball, smaller) */
.mb{--edge:clamp(16px,3.34vw,48px);width:min(340px,calc(100vw - 32px));margin:88px var(--edge) auto auto;padding:20px;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);text-align:center;
  max-height:calc(100vh - 104px);max-height:calc(100svh - 104px);overflow:auto}
.mb::backdrop{background:rgba(10,18,70,.45)}
.mb[open]{display:grid;justify-items:center;gap:14px}
.mb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;width:100%;text-align:left}
.mb-head h2{margin:0;font:700 34px/.9 "Therma",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.mb-hint{margin:6px 0 0;font-size:15px}
.mb-x{flex:none;width:44px;height:44px}
.mb-ball{position:relative;display:grid;place-items:center;width:168px;height:168px;margin:6px 0 2px;padding:0;border:0;border-radius:50%;
  background:#FFFFFF;box-shadow:0 0 0 4px #1DFF5D;cursor:grab;touch-action:none}
[data-theme="white"] .mb-ball{box-shadow:0 0 0 4px #1328A8}
@media (prefers-color-scheme:light){[data-theme="auto"] .mb-ball{box-shadow:0 0 0 4px #1328A8}}
.mb-ball:active{cursor:grabbing}
.mb-ball:focus-visible{outline:3px solid var(--accent);outline-offset:8px}
.mb-window{display:grid;place-items:center;width:52%;aspect-ratio:1;border-radius:50%;background:#1328A8;overflow:hidden}
.mb-tri{display:grid;place-items:center;width:90%;aspect-ratio:1.15;clip-path:polygon(50% 96%,4% 12%,96% 12%);background:#FFFFFF;padding:2% 10% 36%;translate:0 4%}
#mb-face{display:block;font:700 28px/1 "Therma",sans-serif;text-transform:uppercase;color:#1328A8;letter-spacing:.03em;transition:opacity .25s,transform .45s}
#mb-face.fade{opacity:0;transform:scale(.7) rotate(25deg)}
.mb-ball.shake{animation:mb-shake .7s cubic-bezier(.2,.7,.2,1)}
@keyframes mb-shake{0%,100%{transform:none}15%{transform:translate(-10px,4px) rotate(-7deg)}30%{transform:translate(9px,-6px) rotate(6deg)}45%{transform:translate(-7px,-3px) rotate(-5deg)}60%{transform:translate(5px,4px) rotate(4deg)}80%{transform:translate(-2px,1px) rotate(-1deg)}}
.mb-answer{min-height:2.6em;margin:0;max-width:24ch;font-size:20px;line-height:1.25}
.mb-shake{min-width:120px}
.mb-cap{margin:0;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.mb-x svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Phones: the ball opens full screen */
@media (max-width:720px),(pointer:coarse) and (max-width:900px){
  .mb{width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border:0;overflow:auto;overscroll-behavior:contain;
    padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .mb[open]{grid-template-rows:auto 1fr auto auto auto;align-items:center;gap:18px}
  .mb-head h2{font-size:48px}
  .mb-hint{font-size:17px}
  .mb-ball{width:min(72vw,46vh,320px);height:min(72vw,46vh,320px);align-self:center}
  #mb-face{font-size:40px}
  .mb-answer{font-size:26px}
  .mb-shake{min-width:160px;min-height:52px;font-size:16px}
  .mb::backdrop{background:var(--bg)}
}

@media (forced-colors:active){.sq,.panel{border-color:CanvasText}.dot{background:CanvasText;box-shadow:0 0 0 4px Canvas}.soon{color:Highlight}
  .mb-ball{border:4px solid CanvasText}.mb-window,.mb-tri,#mb-face{forced-color-adjust:none}}
@media (max-width:480px){.tools{gap:12px}.sq{width:44px;height:44px}.logo{width:36px;height:36px}}