/* ==========================================================================
   BASE
   Reset, typography, layout primitives, and the blueprint grid backdrop.
   Everything here reads from tokens.css. No raw values.
   ========================================================================== */

/* ---------- Reset ---------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;          /* makes [View Projects] glide, not jump */
  scroll-padding-top: var(--nav-height);  /* stops the sticky nav covering anchors */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  background-color: var(--color-bg-base);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

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

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


/* ---------- Blueprint grid backdrop ----------
   In Figma this had to be hand-tiled and kept falling short of the page.
   In CSS it's two repeating gradients, so it covers any viewport at any
   size, forever, on its exact 34px module. This is the piece that simply
   cannot break responsively.                                              */

.grid-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,
      var(--color-grid-line) 0 1px, transparent 1px var(--grid-module)),
    repeating-linear-gradient(to bottom,
      var(--color-grid-line) 0 1px, transparent 1px var(--grid-module));
  background-position: 0 var(--grid-y, 0px);
}

/* M2 - the grid answers the cursor.
   A second copy of the same grid at higher opacity, masked to a soft circle
   that follows the pointer, so lines brighten as it passes like light over
   graph paper. Shares --grid-y with the layer below so the M7 parallax moves
   both as one. No layout work, no scroll dependency. */
.grid-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right,
      var(--color-grid-line-lit) 0 1px, transparent 1px var(--grid-module)),
    repeating-linear-gradient(to bottom,
      var(--color-grid-line-lit) 0 1px, transparent 1px var(--grid-module));
  background-position: 0 var(--grid-y, 0px);
  -webkit-mask-image: radial-gradient(circle var(--cursor-radius) at var(--cursor-x) var(--cursor-y), #000 0%, #000 30%, transparent 100%);
          mask-image: radial-gradient(circle var(--cursor-radius) at var(--cursor-x) var(--cursor-y), #000 0%, #000 30%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.grid-backdrop.is-lit::after { opacity: 1; }

/* Pointer-driven, so it has no business running on touch or under a reduced
   motion preference. */
@media (prefers-reduced-motion: reduce), (hover: none) {
  .grid-backdrop::after { display: none; }
}


/* ---------- Layout ---------- */

.page { position: relative; z-index: 1; }

/* --content-max is the content column with gutters EXCLUDED, the way Figma
   measures it, so the gutters have to be added back into max-width. Setting
   max-width to --content-max directly (with border-box) subtracts them a
   second time and leaves every page 128px narrower than the design. */
.container {
  --gutter: var(--gutter-mobile);
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px)  { .container { --gutter: var(--gutter-tablet); } }
@media (min-width: 1200px) { .container { --gutter: var(--gutter-desktop); } }

.section { padding-block: var(--space-4xl); }


/* ---------- Typography ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  text-wrap: balance;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-title);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

/* Space Mono labels. By far the most-used style in the design: 416 uses. */
.label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.label--accent { color: var(--color-accent-primary); }

/* Tektur eyebrow, the "// CONTACT" treatment */
.eyebrow {
  font-family: var(--font-tech);
  font-weight: 600;
  font-size: var(--text-label);
  letter-spacing: var(--tracking-tech);
  text-transform: uppercase;
  color: var(--color-accent-primary);
}

.lead {
  font-size: var(--text-lead);
  color: var(--color-text-secondary);
}

.body-copy {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 62ch;              /* keeps line length readable at any width */
}


/* ---------- Corner brackets ----------
   The cyan L-shapes on cards and image frames. Two pseudo-elements, so
   no extra markup and they scale with whatever they're attached to.      */

.brackets { position: relative; }

.brackets::before,
.brackets::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--color-accent-primary);
  border-style: solid;
  pointer-events: none;
  transition:
    transform var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out);
}

.brackets::before {
  top: -1px; left: -1px;
  border-width: 2px 0 0 2px;
}

.brackets::after {
  bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0;
}


/* ---------- Accessibility ---------- */

/* Spec item 03: first focusable element on every page. */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: calc(var(--space-md) * -4);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: var(--space-md); }

:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
}

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