/* Shared chrome CSS for the gmorv.com pages (index.html, privacy_policy.html, 404.html):
   fonts, design tokens, base reset, sticky header bar and footer.
   Kept byte-identical logic to what used to be duplicated inline in each page —
   mirrors js/site-chrome.js, which injects the matching <gmorv-header>/<gmorv-footer> markup.
   Page-specific styles (hero, about, cv, portfolio grid, cta, .page, .e404, ...) stay inline
   in each page's own <style> block.
   test/alfa-development.html is intentionally NOT part of this file — it stays fully
   self-contained with its own embedded CSS. */

/* Self-hosted fonts: avoids the fonts.googleapis.com + fonts.gstatic.com round-trip,
   which was slow to reach for some visitors. Same two families as before. */
@font-face{font-family:'Climate Crisis';font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/climate-crisis-latin-400.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Climate Crisis';font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/climate-crisis-cyrillic-400.woff2) format('woff2');
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/ibm-plex-mono-cyrillic-400.woff2) format('woff2');
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
    src:url(/fonts/ibm-plex-mono-latin-700.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
    src:url(/fonts/ibm-plex-mono-cyrillic-700.woff2) format('woff2');
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --bg:#070707; --bg2:#0e0e0e; --bg3:#1C1C1C;
  --line:#262626; --line2:#333333;
  --txt:#C7C7C7; --dim:#8A8A8A; --bright:#F2F2F2;
  --acid:#d2ff00; --blue:#58A6FF; --sos:#ff4438;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:'Climate Crisis','IBM Plex Mono',monospace;
  --bar:60px; --wrap:1510px; --radius-plate:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--mono);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--acid);color:#000;padding:10px 16px}
.skip:focus{left:8px;top:8px}
#main{display:flow-root}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}

/* ---------- sticky bar ---------- */
.bar{position:sticky;top:0;z-index:100;height:var(--bar)}
.bar::after{content:"";position:absolute;left:0;right:0;top:0;height:70px;z-index:-1;pointer-events:none;
     background:linear-gradient(to bottom, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 100%)}
.bar-wrap{max-width:var(--wrap);margin:0 auto;height:100%;padding:10px 20px 0;
     display:flex;align-items:center;gap:18px;
     transition:gap .2s ease,padding .2s ease}
.bar-nav{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.bar-sep{color:var(--line2)}
.bar-nav a{color:var(--dim);font-size:.78rem;text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;transition:color .2s}
.bar-nav a:hover{color:var(--txt);text-decoration:none}
.bar-nav a.active{color:var(--acid)}
.bar-nav a.active:hover{color:var(--acid)}
.bar-side{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.lang-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line2);background:none;color:var(--dim);font-family:inherit;font-size:.66rem;
    font-weight:700;letter-spacing:.02em;cursor:pointer;
    transition:border-color .2s,color .2s,width .2s ease,height .2s ease,font-size .2s ease}
.lang-toggle:hover{border-color:var(--acid);color:var(--acid)}
.sos-btn{display:inline-flex;align-items:center;gap:8px;height:34px;box-sizing:border-box;border:1px solid var(--sos);color:var(--sos);
         border-radius:999px;padding:0 15px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
         text-decoration:none;white-space:nowrap;
         transition:background .2s,color .2s,padding .2s ease,font-size .2s ease,letter-spacing .2s ease,gap .2s ease}
.sos-btn:hover{background:var(--sos);color:#0A0A0A;text-decoration:none}
.beacon{width:7px;height:7px;border-radius:50%;background:var(--sos);flex:none;animation:beat 1.6s ease-in-out infinite;
    transition:width .2s ease,height .2s ease}
.sos-btn:hover .beacon{background:#0A0A0A;animation:none}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- footer ---------- */
.foot{background:var(--bg);padding-top:56px;padding-bottom:32px;margin-top:60px}
.foot-top{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot-brand{flex:1;min-width:200px}
.foot-mark{font-family:var(--disp);font-weight:400;font-size:2rem;color:var(--bright);text-transform:uppercase;
    letter-spacing:-.01em;margin:0;text-decoration:none;display:block}
.foot-mark:hover{color:var(--acid);text-decoration:none}
.foot-tag{color:var(--dim);font-size:.85rem;letter-spacing:.03em;text-transform:uppercase;margin:8px 0 0}
.cv-rule-sm{display:block;width:40px;height:2px;background:var(--acid);margin:16px 0}
.foot-divider{width:1px;align-self:stretch;background:var(--line)}
.foot-social{display:flex;align-items:center;gap:14px;list-style:none;padding:0;margin:0;flex:none;align-self:center}
.foot-social li{display:flex;align-items:center;gap:14px}
.foot-social li:not(:last-child)::after{content:"/";color:var(--line2)}
.foot-social a{color:var(--bright);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    text-decoration:none;transition:color .2s}
.foot-social a:hover{color:var(--acid);text-decoration:none}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.copy{margin:0;font-size:.75rem;color:#6B6B6B}
.foot-bottom-links{display:flex;align-items:center;gap:20px}
.foot-bottom-links a{color:#6B6B6B;font-size:.75rem;text-decoration:none;transition:color .2s}
.foot-bottom-links a:hover{color:var(--acid);text-decoration:none}
gmorv-header,gmorv-footer,gmorv-portfolio{display:contents}

/* ---------- responsive (shared chrome) ---------- */
@media (min-width:1440px){
  .wrap{padding:0 56px}
  .bar-wrap{padding:10px 56px 0}
  .foot .wrap{padding:0 56px}
}
@media (max-width:900px){
  .foot-top{flex-direction:column;align-items:flex-start;gap:24px}
  .foot-divider{display:none}
  .foot-social{flex-wrap:wrap}
}
@media (max-width:760px){
  .bar-nav a:not([data-nav="index"]),
  .bar-nav .bar-sep{display:none}
  .bar-wrap{gap:10px;padding:0 14px}
  .sos-btn{padding:7px 12px;font-size:.68rem}
}
@media (max-width:420px){
  .bar-wrap{gap:8px}
  .lang-toggle{width:30px;height:30px;font-size:.6rem}
  .sos-btn{padding:7px 10px;gap:5px;font-size:.6rem;letter-spacing:.05em}
  .beacon{width:6px;height:6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}