/* ==========================================================================
   gosuttles.com — design system
   Refined cyberpunk: dark, terminal-accented, built for a security engineer.
   No build step, no frameworks, no external fonts. Plain CSS only.
   ========================================================================== */

:root {
  /* --- surfaces --- */
  --bg:            #05080c;
  --bg-elev:       #0a1017;
  --surface:       rgba(12, 19, 27, 0.72);
  --surface-solid: #0c131b;

  /* --- lines --- */
  --line:        #17222f;
  --line-bright: #23313f;
  --line-accent: rgba(45, 212, 191, 0.32);
  /* Interactive controls need a perceivable boundary: WCAG 1.4.11 wants 3:1
     for non-text UI. --line-bright is only ~1.5:1, fine for decorative
     dividers but not for the edge of an input or button. */
  --line-control: #5b6b7e;               /* ~3.4:1 on the composited backdrop */

  /* --- text: every value below clears WCAG AA on --bg --- */
  --fg:       #dde7f2;   /* ~15.1:1  body + headings */
  --fg-muted: #9fb0c4;   /*  ~8.3:1  secondary copy  */
  --fg-dim:   #8b9fb5;   /*  ~6.6:1  metadata. Was lightened from #7389a0 for
                                     the animated canvas; kept after removing
                                     it, since the extra margin costs nothing */

  /* --- accents --- */
  --accent:        #2dd4bf;
  --accent-bright: #5eead4;              /* ~11.2:1 — safe for text */
  --accent-wash:   rgba(45, 212, 191, 0.10);
  --violet:        #a78bfa;
  --signal:        #4ade80;
  --warn:          #fbbf24;

  --danger: #f87171;

  /* --- type --- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.90rem + 0.25vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.02rem + 0.5vw,  1.35rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1vw,    2rem);
  --step-3:  clamp(1.9rem,  1.5rem  + 2vw,    2.9rem);
  --step-4:  clamp(2.3rem,  1.6rem  + 3.4vw,  4.2rem);

  /* --- space --- */
  --sp-1: 0.375rem;  --sp-2: 0.625rem;  --sp-3: 1rem;
  --sp-4: 1.5rem;    --sp-5: 2.25rem;   --sp-6: 3.5rem;  --sp-7: 5.5rem;

  /* --- form --- */
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 18px 50px rgba(0, 0, 0, 0.55);
  --dur:       180ms;
  --ease:      cubic-bezier(0.2, 0.7, 0.3, 1);

  --measure: 68ch;
  --wrap:    1120px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

img, svg, canvas { display: block; max-width: 100%; }
input, button, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------ background layers --
   No full-screen animated canvas any more. A background effect bright enough
   to actually see is bright enough to hurt text contrast — that tension never
   resolves. The motion now lives in the hero terminal, at full opacity, where
   it belongs. What's left back here is a quiet tint and some scanline grain. */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 70% at 50% -8%,  rgba(45, 212, 191, 0.07) 0%, transparent 62%),
    radial-gradient(ellipse 90%  60% at 85% 105%, rgba(167, 139, 250, 0.06) 0%, transparent 60%);
}

/* faint scanlines — texture, not decoration you can consciously see */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.016) 0 1px,
    transparent 1px 3px
  );
}

/* ------------------------------------------------------------- utilities -- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-4); }

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -100px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-3);
  background: var(--accent);
  color: #04211c;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* terminal-style section label: // section_name */
.label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: var(--sp-3);
}
.label::before { content: "//"; color: var(--fg-dim); }

.mono { font-family: var(--font-mono); }

/* ------------------------------------------------------------------ nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 8, 12, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-3);
}

.brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.brand span { color: var(--accent-bright); }

.nav nav { display: flex; gap: var(--sp-4); margin-right: auto; }

.nav nav a {
  position: relative;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: var(--step-0);
  padding-block: var(--sp-1);
  transition: color var(--dur) var(--ease);
}
.nav nav a:hover { color: var(--fg); }
.nav nav a[aria-current="page"] { color: var(--accent-bright); }
.nav nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
}

/* ------------------------------------------------------- search controls -- */

.searchbar { display: flex; gap: var(--sp-2); align-items: stretch; }

.searchbar input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  color: var(--fg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.searchbar input::placeholder { color: var(--fg-dim); }
.searchbar input:hover { border-color: var(--accent); }
/* Only suppress the ring for pointer focus — keyboard users keep the global
   :focus-visible outline, which this rule would otherwise out-specify. */
.searchbar input:focus:not(:focus-visible) { outline: none; }
.searchbar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.16);
}

.nav .searchbar { width: min(260px, 100%); }

/* ---------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                       /* comfortable tap target */
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:hover { border-color: var(--line-accent); background: var(--surface-solid); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04211c;                          /* ~9.4:1 on --accent */
}
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

/* --------------------------------------------------------------- focus -- */

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------- hero -- */

main { flex: 1 0 auto; }

.hero { padding-block: var(--sp-7) var(--sp-6); }

.hero h1 {
  font-size: var(--step-4);
  line-height: 1.03;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: var(--sp-3);
}
.hero h1 em {
  font-style: normal;
  color: var(--accent-bright);
}

.hero-role {
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}

.hero p.lede {
  max-width: var(--measure);
  font-size: var(--step-1);
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
}

.cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* status chip — "system nominal" flavor, honest about what it reports */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-muted);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  margin-bottom: var(--sp-4);
}
.status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

/* -------------------------------------------------------------- sections -- */

.section { padding-block: var(--sp-6); border-top: 1px solid var(--line); }
.section h2 { font-size: var(--step-3); letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
/* :not(.label) — otherwise this out-specifies .label and the terminal-style
   section labels lose their accent color inside .section. */
.section > p:not(.label) { max-width: var(--measure); color: var(--fg-muted); }

/* ---------------------------------------------------------------- cards -- */

.cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.card {
  position: relative;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-accent); transform: translateY(-2px); }

/* corner bracket — subtle HUD framing */
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius) 0 0 0;
  opacity: 0.5;
}

.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--fg-muted); }

.card .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  color: var(--fg-muted);
  background: var(--bg-elev);
}

/* ------------------------------------------------------------ capability -- */

.caps { list-style: none; display: grid; gap: var(--sp-3); margin-top: var(--sp-4);
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.caps li { padding-left: var(--sp-4); border-left: 2px solid var(--accent); }
.caps strong { display: block; margin-bottom: 2px; }
.caps span { color: var(--fg-muted); font-size: var(--step--1); }

/* ------------------------------------------------------- project detail --
   For work that needs a case study rather than a card.                     */

.project {
  position: relative;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.project + .project { margin-top: var(--sp-4); }
.project--featured {
  border-color: var(--line-accent);
  box-shadow: var(--shadow), 0 0 0 1px rgba(45, 212, 191, 0.05);
}

.project-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.project h3 {
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  margin-block: var(--sp-2) var(--sp-1);
}
.project-sub { color: var(--fg-muted); font-size: var(--step-1); }

/* headline numbers */
.project-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.project-stats div { border-left: 2px solid var(--accent); padding-left: var(--sp-3); }
.project-stats b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step-1);
  color: var(--fg);
}
.project-stats span { font-size: var(--step--1); color: var(--fg-dim); }

.project-block { margin-top: var(--sp-4); }
.project-block h4 {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--sp-2);
}
.project-block p { color: var(--fg-muted); max-width: var(--measure); }

.project-highlights { list-style: none; display: grid; gap: var(--sp-3); }
.project-highlights li { padding-left: var(--sp-3); border-left: 1px solid var(--line-bright); }
.project-highlights strong { display: block; color: var(--fg); margin-bottom: 2px; }
.project-highlights span { color: var(--fg-muted); font-size: var(--step--1); }

.project .meta { margin-top: var(--sp-4); }

/* screenshot frame — ready for when the images land */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.shots figure {
  margin: 0;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elev);
}
.shots img { width: 100%; height: auto; display: block; }
.shots figcaption {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-dim);
  border-top: 1px solid var(--line);
}

/* -------------------------------------------------------- search results -- */

.search-shell { padding-block: var(--sp-6); }
.search-shell h1 { font-size: var(--step-3); margin-bottom: var(--sp-2); }
.search-shell .searchbar { margin-block: var(--sp-4); }
.search-shell .searchbar input { padding: var(--sp-3) var(--sp-4); }

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--step--1);
  color: var(--fg-dim);
  max-width: var(--measure);
}

.results { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

.result {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-bright);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-left-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.result:hover { border-left-color: var(--accent); background: var(--surface-solid); }

/* h2, not h3 — results sit directly under the page h1, so h3 would skip a level */
.result h2 { font-size: var(--step-1); line-height: 1.35; margin-bottom: var(--sp-1); font-weight: 600; }
.result h2 a { color: var(--fg); text-decoration: none; }
.result h2 a:hover { color: var(--accent-bright); text-decoration: underline; }

.result .url {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--accent-bright);
  word-break: break-all;
  margin-bottom: var(--sp-2);
}
.result p { color: var(--fg-muted); }

.result .engines {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin-top: var(--sp-3);
}
.result .engines span {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-dim);
  padding: 1px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.state {
  padding: var(--sp-5);
  text-align: center;
  color: var(--fg-muted);
  border: 1px dashed var(--line-bright);
  border-radius: var(--radius);
}
.state.error { border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; }
.state .mono { display: block; color: var(--fg-dim); font-size: var(--step--1); margin-top: var(--sp-2); }

.result-count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-dim);
  margin-top: var(--sp-4);
}

/* spinner */
.spinner {
  width: 22px; height: 22px;
  margin: 0 auto var(--sp-3);
  border: 2px solid var(--line-bright);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- contact -- */

.contact-links { display: grid; gap: var(--sp-3); margin-top: var(--sp-4);
                 grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.contact-links a {
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.contact-links a:hover { border-color: var(--line-accent); }
.contact-links .k { font-family: var(--font-mono); font-size: var(--step--1);
                    color: var(--fg-dim); display: block; margin-bottom: var(--sp-1); }
.contact-links .v { color: var(--accent-bright); word-break: break-all; }

/* ---------------------------------------------------------------- footer -- */

.footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  padding-block: var(--sp-4);
  margin-top: var(--sp-6);
}
.footer .wrap {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center; justify-content: space-between;
}
.footer small { color: var(--fg-dim); font-family: var(--font-mono); font-size: var(--step--1); }
.footer a { color: var(--fg-muted); text-decoration: none; }
.footer a:hover { color: var(--accent-bright); }

/* ------------------------------------------------- scroll reveal system --
   The hidden state is gated on .js, which assets/head.js adds synchronously
   in <head>. Without that gate, a visitor with JS disabled (or a failed
   script load) would get a permanently invisible page. Gating on a class set
   before <body> parses also avoids a flash of content that then hides.     */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translate3d(-30px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(30px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.96); }
.js [data-reveal="fade"]  { transform: none; }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------- scroll chrome -- */

.scroll-progress-track {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 30;
  background: transparent;
  pointer-events: none;
}
#scroll-progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transition: width 90ms linear;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: opacity var(--dur) var(--ease);
}
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue i {
  display: block;
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* hero gets room to breathe so the first scroll actually reveals something */
.hero--tall { min-height: min(86vh, 760px); display: flex; flex-direction: column; justify-content: center; }
.hero--sub  { padding-block: var(--sp-6) var(--sp-4); }

/* two-column hero: copy left, terminal right (the space that sat empty) */
.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
}
@media (max-width: 940px) {
  .hero--split { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* --------------------------------------------------------------- terminal --
   Full opacity on purpose. This is a UI element, not wallpaper.             */

.terminal {
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  background: rgba(6, 10, 15, 0.94);
  box-shadow: var(--shadow), 0 0 0 1px rgba(45, 212, 191, 0.07);
  overflow: hidden;
  font-family: var(--font-mono);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: #0a1118;
  border-bottom: 1px solid var(--line);
}
.terminal-bar .dots { display: flex; gap: 6px; }
.terminal-bar .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.terminal-bar .dots i:nth-child(1) { background: #f87171; }
.terminal-bar .dots i:nth-child(2) { background: #fbbf24; }
.terminal-bar .dots i:nth-child(3) { background: #4ade80; }
.terminal-bar .title {
  font-size: var(--step--1);
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}

.terminal-body {
  height: clamp(280px, 38vh, 380px);
  overflow: hidden;
  padding: var(--sp-3) var(--sp-4);
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.84rem);
  line-height: 1.75;
}

.t-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.t-gap  { height: 0.7em; }

.t-prompt { color: var(--accent-bright); }
.t-cmd    { color: var(--fg); }
.t-out    { color: var(--fg-muted); }
.t-tag    { font-weight: 600; }
.t-ok     { color: var(--signal); }
.t-warn   { color: var(--warn); }
.t-fail   { color: var(--danger); }

.t-cursor {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 1px;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ------------------------------------------------------------- utilities --
   These exist because Content-Security-Policy: style-src 'self' blocks inline
   style="" attributes. Any one-off spacing needs a class, not an attribute.  */

.h1--sm         { font-size: var(--step-3); }
.u-mt           { margin-top: var(--sp-4); }
.searchbar--wide { max-width: 520px; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 720px) {
  .nav-inner { gap: var(--sp-3); }
  /* Drop the redundant nav search on phones — /search is in the nav itself.
     This takes the sticky header from ~175px (26% of a 667px screen) to ~112px. */
  .nav .searchbar { display: none; }
  .nav nav { order: 2; width: 100%; margin-right: 0; justify-content: space-between; }
  .hero { padding-block: var(--sp-5) var(--sp-5); }
}

/* --------------------------------------------------- reduced motion --------
   Anything that moves must have an off switch. The canvas is disabled in JS;
   these rules cover the CSS animations.                                     */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #matrix { display: none; }
}

@media (prefers-contrast: more) {
  :root { --fg-dim: #9fb0c4; --line: #2b3a4a; }
  #matrix { display: none; }
}