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

:root,[data-theme="blue"]{--bg:#1328A8;--ink:#FFFFFF;--accent:#1DFF5D;--dot:#1DFF5D;--line:#FFFFFF}
[data-theme="white"]{--bg:#FFFFFF;--ink:#1328A8;--accent:#262626;--dot:#1DFF5D;--line:#1328A8}
@media (prefers-color-scheme:light){[data-theme="auto"]{--bg:#FFFFFF;--ink:#1328A8;--accent:#262626;--dot:#1DFF5D;--line:#1328A8}}
@media (prefers-color-scheme:dark){[data-theme="auto"]{--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;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.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}
/* Interactive pull: each letter stretches toward the pointer (JS sets --s). Row 1 grows up, row 2 grows down. */
.ch{display:inline-block;transform:scaleY(var(--s,1));will-change:transform}
[data-pull="up"] .ch{transform-origin:50% 100%}
[data-pull="down"] .ch{transform-origin:50% 0}
.vis{cursor:default;touch-action:none;-webkit-user-select:none;user-select:none}

/* 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}}
@media (max-aspect-ratio:3/4){.mast{--k:2}}
.vis{transform:scaleY(var(--k));transform-origin:50% 50%}
.mast{margin-block:calc((var(--k) - 1) * .78em)}

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