/* ==========================================================================
   GAMMA TECHNOLOGIES — core.css
   Tokens, reset, typography, layout primitives.

   Design system: "SOLDERMASK".
   The site is a printed circuit board. Dark blue soldermask substrate with a
   tinned finish — a single brand-blue ramp does all the work, dim steps for
   structure (rules, frames, traces at rest) and bright steps for live signal
   (pulses, active state, primary pads). Every motif is derived from board
   vocabulary: reference designators, fiducials, vias, test points, routed
   traces with 45-degree corners.

   Every colour descends from #3D7BB5, sampled from the Gamma Technologies
   wordmark and used unaltered as --br-400.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Substrate — dark blue soldermask, cool and slightly desaturated */
  --board-000: #03060c;
  --board-100: #06090f;
  --board-200: #080d17;
  --board-300: #0b1220;
  --board-400: #0e1829;
  --board-500: #122036;

  /* Brand ramp — every step derived from the wordmark blue #3D7BB5.
     The board is blue soldermask with a tinned finish: one metal, one hue,
     and hierarchy carried by lightness rather than a second colour. */
  --br-100: #0b1a28;
  --br-200: #14304a;
  --br-300: #235a8a;
  --br-400: #3d7bb5; /* the logo blue, unaltered */
  --br-500: #61a2de;
  --br-600: #9ccbf5;

  /* Rare alert — reserved for status dots and errors only */
  --alert: #ff6a4d;

  /* Ink */
  --ink-000: #f2f7fd;
  --ink-100: #dde7f4;
  --ink-200: #a4b5cd;
  --ink-300: #6d7f99;
  --ink-400: #47576e;

  /* Hairlines */
  --edge: #141f33;
  --edge-lit: #1e2f4d;
  --edge-cu: rgba(97, 162, 222, 0.22);

  /* Type */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Fluid type scale */
  --t-hero: clamp(2.55rem, 1.3rem + 3.4vw, 5rem);
  --t-h2: clamp(1.8rem, 1.15rem + 2.3vw, 3.05rem);
  --t-h3: clamp(1.28rem, 1.02rem + 0.95vw, 1.85rem);
  --t-h4: clamp(1.05rem, 0.96rem + 0.4vw, 1.25rem);
  --t-lead: clamp(1.02rem, 0.95rem + 0.42vw, 1.28rem);
  --t-body: clamp(0.95rem, 0.92rem + 0.16vw, 1.03rem);
  --t-small: 0.855rem;
  --t-micro: 0.7rem;
  --t-nano: 0.625rem;

  /* Space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: clamp(4.5rem, 2rem + 9vw, 9.5rem);

  /* Layout */
  --shell: 1320px;
  --gutter: clamp(1.15rem, 0.5rem + 2.6vw, 3.25rem);
  --rail: 0px; /* widened on large screens, see site.css */
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.24, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;
  --dur-4: 900ms;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  min-height: 100svh;
  background: var(--board-100);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-variation-settings: "wdth" 100;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video,
canvas { display: block; max-width: 100%; }

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
  background: var(--br-400);
  color: var(--board-000);
}

/* Focus — a copper test-point ring, never removed */
:focus-visible {
  outline: 2px solid var(--br-600);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Scrollbar as a board edge */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--board-000); }
  ::-webkit-scrollbar-thumb {
    background: var(--board-500);
    border: 3px solid var(--board-000);
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--br-300); }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */

/* Display headings use Archivo's width axis — expanded reads as industrial
   signage, which is the point. Tightened tracking keeps it elegant. */
.d-xl {
  font-size: var(--t-hero);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.d-lg {
  font-size: var(--t-h2);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.028em;
  line-height: 1.0;
}

.d-md {
  font-size: var(--t-h3);
  font-weight: 650;
  font-variation-settings: "wdth" 104;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

.d-sm {
  font-size: var(--t-h4);
  font-weight: 620;
  font-variation-settings: "wdth" 102;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

/* The logo is the artwork from the existing brand, recoloured only so the
   lower lockup line reads on a dark ground. Nothing else about it changed. */
.brand { display: inline-flex; align-items: center; flex: none; }

.brand__logo {
  width: auto;
  height: 44px;
  transition: opacity var(--dur-2) var(--ease);
}

.brand:hover .brand__logo { opacity: 0.86; }

@media (max-width: 480px) { .brand__logo { height: 36px; } }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-200);
  max-width: 62ch;
}

.prose p + p { margin-top: 1.05em; }
.prose { color: var(--ink-200); max-width: 68ch; }

/* The mono layer — silkscreen. All labels, designators, metadata. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  font-feature-settings: "tnum" 1;
}

.mono--br { color: var(--br-500); }
.mono--sig { color: var(--br-600); }
.mono--ink { color: var(--ink-200); }
.mono--nano { font-size: var(--t-nano); letter-spacing: 0.2em; }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--s-10);
}

.section--tight { padding-block: clamp(3rem, 1.5rem + 5vw, 6rem); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--gutter); }

@media (min-width: 900px) {
  .grid--12 { grid-template-columns: repeat(12, 1fr); }
  .grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid--aside { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.u-hide { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--br-500);
  color: var(--board-000);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-120%);
  transition: transform var(--dur-2) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. BOARD PRIMITIVES
   The shared vocabulary. Anything decorative on this site must come from
   one of these; if it does not derive from the board metaphor, it is cut.
   -------------------------------------------------------------------------- */

/* 5.1 — Substrate grid. The bare fibreglass weave, barely visible. */
.substrate {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(61, 123, 181, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(61, 123, 181, 0.055) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 120% 85% at 50% 0%, #000 12%, transparent 78%);
}

/* A slow copper bloom behind the fold — the board under power. */
.substrate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 480px at 78% -6%, rgba(61, 123, 181, 0.15), transparent 62%),
    radial-gradient(620px 420px at 6% 8%, rgba(35, 90, 138, 0.16), transparent 60%);
}

/* 5.2 — Reference designator. The silkscreen label on every block. */
.ref {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--br-500);
}

.ref::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid var(--br-500);
  border-radius: 50%;
  flex: none;
}

.ref__sep {
  flex: 1;
  height: 1px;
  min-width: 1.5rem;
  background: linear-gradient(to right, var(--edge-br), transparent);
}

/* 5.3 — Section header block: designator, then title. */
.blockhead {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--s-6);
}

/* 5.4 — Fiducial corners. Optical alignment marks, drawn on framed panels. */
.framed {
  position: relative;
  border: 1px solid var(--edge);
  background:
    linear-gradient(180deg, rgba(18, 32, 54, 0.5), rgba(8, 13, 23, 0.5));
}

.framed::before,
.framed::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--br-300);
  pointer-events: none;
}

.framed::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}

.framed::after {
  bottom: -1px; right: -1px;
  border-left: 0; border-top: 0;
}

/* 5.5 — Via. A plated through-hole: copper ring, dark barrel. */
.via {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--br-500);
  background: var(--board-000);
  flex: none;
}

.via--sig { border-color: var(--br-600); }
.via--sm { width: 6px; height: 6px; border-width: 1px; }

/* 5.6 — Rule: a hairline with a via at each end. */
.rule {
  display: flex;
  align-items: center;
  gap: 0;
}

.rule__line {
  flex: 1;
  height: 1px;
  background: var(--edge);
}

/* 5.7 — Chamfered outline utility.
   A clip-path alone eats the border along the chamfer, which leaves outline
   buttons with open corners. So the shape is drawn as two absolutely
   positioned layers: a fill, and a 1px ring produced by an xor mask. Both
   are clipped to the same routed-board chamfer, so the outline stays
   continuous all the way around the cut corners. */
.chamf,
.pad {
  --chamf: 10px;
  --chamf-fill: transparent;
  --chamf-stroke: var(--br-300);
  --chamf-path: polygon(
    var(--chamf) 0, 100% 0,
    100% calc(100% - var(--chamf)), calc(100% - var(--chamf)) 100%,
    0 100%, 0 var(--chamf)
  );
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
}

.chamf::before,
.chamf::after,
.pad::before,
.pad::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--chamf-path);
  transition: background var(--dur-2) var(--ease);
}

.chamf::before,
.pad::before {
  z-index: -2;
  background: var(--chamf-fill);
}

.chamf::after,
.pad::after {
  z-index: -1;
  background: var(--chamf-stroke);
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.chamf--sm { --chamf: 7px; }

/* 5.7b — Pad. Buttons are copper pads you can solder to. */
.pad {
  --chamf-fill: linear-gradient(170deg, var(--br-600), var(--br-500) 42%, var(--br-400));
  --chamf-stroke: var(--br-600);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--board-000);
  transition: filter var(--dur-2) var(--ease), transform var(--dur-1) var(--ease-snap), color var(--dur-2) var(--ease);
}

.pad:hover { filter: brightness(1.12) saturate(1.04); }
.pad:active { transform: translateY(1px); }

.pad__arrow { transition: transform var(--dur-2) var(--ease-snap); }
.pad:hover .pad__arrow { transform: translateX(3px); }

/* Ghost pad — exposed copper outline only, no fill. */
.pad--ghost {
  --chamf-fill: transparent;
  --chamf-stroke: var(--br-300);
  color: var(--br-500);
  filter: none;
}

.pad--ghost:hover {
  --chamf-fill: rgba(97, 162, 222, 0.08);
  --chamf-stroke: var(--br-500);
  color: var(--br-600);
  filter: none;
}

/* Signal pad — the data-coloured variant. */
.pad--sig {
  --chamf-fill: transparent;
  --chamf-stroke: var(--br-400);
  color: var(--br-600);
  filter: none;
}

.pad--sig:hover {
  --chamf-fill: rgba(61, 123, 181, 0.16);
  --chamf-stroke: var(--br-500);
  filter: none;
}

/* 5.8 — Test point: an inline label tag. */
.tp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem 0.28rem 0.45rem;
  border: 1px solid var(--edge-lit);
  background: rgba(8, 13, 23, 0.72);
  font-family: var(--font-mono);
  font-size: var(--t-nano);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-200);
}

/* 5.9 — Trace link: text underlined by a routed copper trace that
   drops and returns, echoing the descender hook in the Gamma wordmark. */
.tlink {
  position: relative;
  color: var(--br-500);
  transition: color var(--dur-2) var(--ease);
  white-space: nowrap;
}

.tlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--dur-3) var(--ease);
}

.tlink:hover { color: var(--br-600); }
.tlink:hover::after,
.tlink:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   6. MOTION DEFAULTS
   -------------------------------------------------------------------------- */

/* Scroll reveal. Applied by site.js only when JS is available, so the page
   is fully readable with JS off. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-4) var(--ease),
    transform var(--dur-4) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

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

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

@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;
    scroll-behavior: auto !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
}