@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/space-grotesk-latin.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:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url(../fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  @font-face { font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/geist-latin.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:'Geist'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/geist-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  @font-face { font-family:'Geist Mono'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/geist-mono-latin.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:'Geist Mono'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
  /* anti-tamper: disable text selection + image drag site-wide (paired with guard.js).
     Inputs/textareas re-enable selection so real form fields still work. */
  * { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, [contenteditable="true"] { -webkit-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; }
  img, svg, canvas { -webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none; }
  html { scroll-behavior:smooth; }
  html, body { overflow-x:hidden; overflow-x:clip; }
  body { margin:0; background:#07080C; color:#AEB6C7; -webkit-font-smoothing:antialiased; }
  ::selection { background:rgba(236,186,77,0.3); color:#F2F4F9; }
  html.sf-nocursor, html.sf-nocursor * { cursor:none !important; }
  @property --tr-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
  @property --tr-b { syntax:'<angle>'; inherits:false; initial-value:180deg; }
  @keyframes sf-trace { from{--tr-a:0deg;--tr-b:180deg} to{--tr-a:360deg;--tr-b:-80deg} }
  @keyframes sf-grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-2%,1.5%)} 40%{transform:translate(1.5%,-2%)} 60%{transform:translate(-1%,-1%)} 80%{transform:translate(2%,1%)} }
  @keyframes sf-beam { 0%{transform:translateY(-160px);opacity:0} 6%{opacity:1} 82%{opacity:1} 92%,100%{transform:translateY(105vh);opacity:0} }
  @keyframes sf-spin { to{transform:rotate(360deg)} }
  @keyframes sf-aur { to{transform:scale(1.06) translateY(-14px)} }
  @keyframes sf-tglitch { 0%,35.9%,39.4%,100%{text-shadow:none;transform:none} 36%{text-shadow:2.5px 0 rgba(0,229,255,0.85),-2.5px 0 rgba(255,43,214,0.85);transform:translateX(1.5px)} 37.5%{text-shadow:-1.5px 0 rgba(0,229,255,0.5),1.5px 0 rgba(255,43,214,0.5);transform:translateX(-1px)} }
  @keyframes sf-tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes sf-blink { 50%{opacity:0} }
  @keyframes sf-rglitch { 0%,55.9%,58.4%,100%{text-shadow:none;transform:none} 56%{text-shadow:2.2px 0 rgba(230,0,24,0.95),-2.2px 0 rgba(0,229,255,0.5);transform:translateX(1px)} 57.2%{text-shadow:-1.6px 0 rgba(230,0,24,0.7);transform:translateX(-0.8px)} }
  @keyframes sf-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
  @keyframes sf-sweep { 0%{transform:translateY(-15px);animation-timing-function:cubic-bezier(0.55,0,0.45,1)} 30%{transform:translateY(0);animation-timing-function:steps(1)} 44%{transform:translateY(0);animation-timing-function:cubic-bezier(0.55,0,0.45,1)} 72%{transform:translateY(17px);animation-timing-function:cubic-bezier(0.55,0,0.45,1)} 100%{transform:translateY(-15px)} }
  @keyframes sf-jolt { 0%,35.9%,39.6%,79.9%,82.1%,100%{transform:translate(0,0)} 36%{transform:translate(-2.6px,0.6px)} 37%{transform:translate(2.2px,-0.5px)} 38%{transform:translate(-1.6px,0.3px)} 39%{transform:translate(2.8px,0)} 80%{transform:translate(2.4px,-0.4px)} 81%{transform:translate(-2px,0.5px)} }
  @keyframes sf-ghC { 0%,35.9%,39.6%,79.9%,82.1%,100%{opacity:0;transform:translate(0,0)} 36%{opacity:0.9;transform:translate(3.8px,-0.6px)} 37.5%{opacity:0.6;transform:translate(-3px,0.4px)} 80%{opacity:0.8;transform:translate(-3.6px,0)} 81%{opacity:0.5;transform:translate(2.8px,-0.5px)} }
  @keyframes sf-ghM { 0%,35.9%,39.6%,79.9%,82.1%,100%{opacity:0;transform:translate(0,0)} 36%{opacity:0.85;transform:translate(-3.8px,0.6px)} 37.5%{opacity:0.55;transform:translate(3.2px,-0.4px)} 80%{opacity:0.75;transform:translate(3.6px,0.4px)} 81%{opacity:0.5;transform:translate(-2.8px,-0.4px)} }
  @keyframes sf-wg { 0%,100%{text-shadow:none;transform:none} 18%{text-shadow:2.2px 0 #00E5FF,-2.2px 0 #FF2BD6;transform:translateX(1.4px)} 38%{text-shadow:-2px 0 #00E5FF,2px 0 #FF2BD6;transform:translateX(-1.2px)} 58%{text-shadow:1.6px 0 #00E5FF,-1.6px 0 #FF2BD6;transform:translateX(0.8px)} 78%{text-shadow:-1px 0 #00E5FF,1px 0 #FF2BD6;transform:translateX(-0.5px)} }
  @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} html{scroll-behavior:auto} }

  /* ===== responsive (tablet / mobile) — !important is required to override the inline style="" attributes ===== */
  @media (max-width: 860px) {
    /* the side section-tracker is a hover/desktop affordance; on narrow screens it floated over the content */
    #sf-rail { display: none !important; }
    /* stack the two-column layouts */
    .hero-grid { grid-template-columns: 1fr !important; gap: 46px !important; padding: 116px 32px 72px !important; }
    .radar-wrap { width: min(380px, 84%) !important; }      /* leave room for the -7% dashed ring */
    .fox-grid  { grid-template-columns: 1fr !important; gap: 44px !important; padding-left: 32px !important; padding-right: 32px !important; }
    /* trim the generous desktop section spacing */
    #manifesto, #fox, #contact { padding-top: 100px !important; padding-bottom: 100px !important; }
    #principles { padding-bottom: 100px !important; }
    #manifesto > div, #principles > div, #contact > div { padding-left: 32px !important; padding-right: 32px !important; }
    /* footer: row -> column */
    .foot-in { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding-left: 32px !important; padding-right: 32px !important; }
    .foot-in > div { margin-left: 0 !important; }
  }
  @media (max-width: 560px) {
    .grid-principles { grid-template-columns: 1fr !important; }
    .principle { padding: 38px 26px 42px !important; }
    #top h1 { font-size: clamp(40px, 12.5vw, 60px) !important; }
    #manifesto p:not(.overline) { font-size: clamp(24px, 6.4vw, 46px) !important; }
    #mailLink { font-size: clamp(22px, 7vw, 60px) !important; }
    .hero-grid { padding: 108px 20px 64px !important; gap: 40px !important; }
    .fox-grid  { padding-left: 20px !important; padding-right: 20px !important; }
    #manifesto, #fox, #contact { padding-top: 84px !important; padding-bottom: 84px !important; }
    #principles { padding-bottom: 84px !important; }
    #manifesto > div, #principles > div, #contact > div { padding-left: 20px !important; padding-right: 20px !important; }
    .foot-in { padding-left: 20px !important; padding-right: 20px !important; }
    .link-quiet { padding-top: 6px !important; padding-bottom: 6px !important; }
    /* compact the floating brand chip + clock so they never collide on small phones */
    #brandChip { left: 16px !important; gap: 9px !important; padding: 7px 13px 7px 10px !important; }
    #wordmark { font-size: 16px !important; }
    .sf-clock { right: 16px !important; padding: 8px 12px !important; }
    .sf-clock #utcClock { font-size: 10px !important; letter-spacing: 0.12em !important; }
  }