/* ==========================================================================
   Kangastrada — PCB / hardware-engineering visual system (site-wide).

   Look: silkscreen artwork over a dark PCB. Dark charcoal surfaces, thin
   silver linework, gold used sparingly for hover/active/signal highlights.

   Sections
     1  Tokens                        8  Buttons
     2  Base & typography             9  Signal-propagation effects (hover/focus)
     3  Background grid + side traces 10 Cards, sections, content blocks
     4  Links                         11 Forms
     5  Skip link                     12 Dialog (shared component)
     6  Header & navigation           13 Footer
     7  Hero                          14 Responsive & reduced motion

   Page-specific styling for the e-learning module lives in
   elearning/01/css/elearning.css and uses the same tokens.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  color-scheme: dark;

  --pcb-bg: #0B0D10;           /* page */
  --pcb-surface: #101215;      /* cards, containers */
  --pcb-surface-2: #14171B;    /* hover / raised */
  --pcb-text: #C7CCD1;         /* primary text */
  --pcb-text-dim: #8F979E;     /* secondary text */
  --pcb-silver: #D8DDE3;       /* links, controls */
  --pcb-silver-hi: #E5E7EB;    /* headings */
  --pcb-line: #2B3036;         /* fine borders */
  --pcb-line-strong: #4B535B;  /* control borders, emphasised lines */
  --pcb-gold: #D4AF37;         /* hover / active — PCB trace gold */
  --pcb-gold-hi: #E6C35C;      /* signal head */

  --pcb-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --pcb-ease: 200ms ease;
  --max-width: 1180px;
  --gutter: 32px; /* page side margin (20px on phones) */
  --header-h: 77px; /* header height, used to place the fixed top band below it */

  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Registered so the link underline colour can transition (older browsers just snap). */
@property --pcb-underline {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(216, 221, 227, 0.42);
}

/* ---------- 2. Base & typography ---------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--pcb-bg);
  color: var(--pcb-text);
  font-size: 16px;
  line-height: 1.6;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(212, 175, 55, 0.28);
  color: var(--pcb-silver-hi);
}

:focus-visible {
  outline: 2px solid var(--pcb-gold);
  outline-offset: 4px;
}

/* Headings that scripts focus on step changes are not interactive: no ring. */
[tabindex="-1"]:focus-visible {
  outline: none;
}

main {
  min-height: 60vh;
}

site-header,
site-footer {
  display: block;
}

.site-header__inner,
.site-footer__inner,
.container {
  width: min(var(--max-width), calc(100% - 64px));
  margin-inline: auto;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--pcb-silver-hi);
  line-height: 1.12;
}

h1 {
  max-width: 800px;
  margin-bottom: 24px;
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

h2 {
  margin-bottom: 20px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lead {
  max-width: 650px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
}

/* Silkscreen-style labels: small, monospaced, spaced capitals. */
.eyebrow,
.card__number,
.project-row__number,
.split__label {
  font-family: var(--pcb-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pcb-text-dim);
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
}

.notice {
  padding: 18px 20px;
  border: 1px solid var(--pcb-line-strong);
  background: var(--pcb-surface);
  font-size: 14px;
}

.prose {
  max-width: 720px;
}

.prose > :last-child {
  margin-bottom: 0;
}

/* ---------- 3. Background: CAD grid + side PCB traces ---------- */
/* Everything here sits behind the content (negative z-index) and ignores the pointer. */

/* Fine grid, like a PCB/CAD canvas. Static on purpose: no battery cost. */
html::before {
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(199, 204, 209, 0.036) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 204, 209, 0.036) 1px, transparent 1px),
    linear-gradient(rgba(199, 204, 209, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199, 204, 209, 0.018) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* Side PCB zones. Page layout = LEFT PCB zone | CONTENT | RIGHT PCB zone. The artwork
   (images/pcb-left.svg, pcb-right.svg) is a mirrored pair of small, plausible circuits that
   sit only in the empty margin beside the content column; nothing is drawn behind the
   reading area. Wide screens (1400px+) show the full circuits; narrower screens only have
   room for the GND rail (see section 14), and the circuits move to the top and bottom bands. */
body::before,
body::after {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  width: min(160px, calc((100vw - var(--max-width)) / 2 + 16px));
  pointer-events: none;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

body::before {
  left: 0;
  background-image: url("images/pcb-left.svg");
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%);
  mask-image: linear-gradient(to right, #000 78%, transparent 100%);
}

body::after {
  right: 0;
  background-image: url("images/pcb-right.svg");
  -webkit-mask-image: linear-gradient(to left, #000 78%, transparent 100%);
  mask-image: linear-gradient(to left, #000 78%, transparent 100%);
}

/* PCB bands (screens under 1400px). There is no room beside the content for the side
   circuits, so the same two circuits are drawn horizontally in the empty space at the very
   top of the page (left circuit: R1, U1, C1...) and just above the footer (right circuit:
   R2, U2, C2...). They sit in padding, never over text. Hidden on wide screens. */
main::before,
.site-footer::after {
  display: none;
}

/* ---------- 4. Links ---------- */
/* Text links get a thin "trace" underline drawn as a background. Silver by default,
   gold on hover/focus, and a short gold pulse travels along it once. Buttons, cards
   and the brand have their own treatment, so they are excluded here. */

a {
  color: var(--pcb-silver);
  transition: color var(--pcb-ease);
}

a:hover {
  color: var(--pcb-gold);
}

a:not(.button, .card, .site-brand, .skip-link) {
  padding-bottom: 2px;
  text-decoration: none;
  background-image:
    linear-gradient(90deg, transparent, var(--pcb-gold-hi), transparent),
    linear-gradient(var(--pcb-underline), var(--pcb-underline));
  background-repeat: no-repeat;
  background-size: 40px 1px, 100% 1px;
  background-position: -40px 100%, 0 100%;
  transition: color var(--pcb-ease), --pcb-underline var(--pcb-ease);
}

a:not(.button, .card, .site-brand, .skip-link):is(:hover, :focus-visible) {
  --pcb-underline: rgba(212, 175, 55, 0.5);
  animation: pcb-pulse 1.4s ease-in-out 1;
}

/* ---------- 5. Skip link ---------- */

.skip-link {
  position: absolute;
  z-index: 30;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  transform: translateY(-160%);
  border: 1px solid var(--pcb-gold);
  background: var(--pcb-surface);
  color: var(--pcb-gold);
}

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

/* ---------- 6. Header & navigation ---------- */

.site-header {
  position: relative;
  border-bottom: 1px solid var(--pcb-line);
}

/* Ambient signal: every ~14s a short gold packet travels once along the header rule
   (and the footer rule, offset in time). Pure CSS with percentage positions, so it works
   at any width, on touch screens (no hover needed), and keeps working while resizing. */
.site-header::after,
.site-footer::before {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  content: "";
  background-image: linear-gradient(90deg, transparent, var(--pcb-gold) 70%, var(--pcb-gold-hi));
  background-repeat: no-repeat;
  background-size: 90px 100%;
  background-position: -90px 0;
  animation: pcb-rule-signal 14s ease-in-out infinite;
}

.site-header::after {
  bottom: -1px;
}

.site-footer {
  position: relative;
}

.site-footer::before {
  top: -1px;
  animation-delay: -7s;
}

@keyframes pcb-rule-signal {
  0%   { background-position: -90px 0;              opacity: 0; }
  3%   { opacity: 1; }
  38%  { opacity: 1; }
  42%  { background-position: calc(100% + 90px) 0;  opacity: 0; }
  100% { background-position: calc(100% + 90px) 0;  opacity: 0; }
}

.site-header__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pcb-silver-hi);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.site-brand__mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--pcb-silver);
  background: transparent;
  color: var(--pcb-silver);
  font-size: 15px;
  line-height: 1;
  transition: color var(--pcb-ease), border-color var(--pcb-ease);
}

.site-brand:hover .site-brand__mark,
.site-brand:focus-visible .site-brand__mark {
  border-color: var(--pcb-gold);
  color: var(--pcb-gold);
}

/* Keyboard focus on the brand link is shown by the gold K mark and gold wordmark only.
   The LED matrix is not part of that feedback (it stays neutral), and there is no
   focus box around the whole link. */
.site-brand:focus-visible {
  outline: none;
}

.site-brand:is(:hover, :focus-visible) {
  color: var(--pcb-gold);
}

/* LED matrix: 16 x 8 individual LEDs (the layout of two chained 8x8 MAX7219 blocks)
   mounted directly on the board. There is no housing, background, border or frame:
   the gaps between LEDs are transparent, so the PCB grid and traces behind the header
   show through. Rows and columns are perfectly straight. --pitch is the LED spacing
   (whole pixels on desktop so every lens renders identically). Each LED = a dark
   metal-rimmed socket (the span) holding a domed lens (::after). */
.site-brand__matrix {
  --pitch: 6px;
  display: grid;
  width: calc(16 * var(--pitch));
  height: calc(8 * var(--pitch));
  flex: 0 0 auto;
  grid-template-columns: repeat(16, var(--pitch));
  grid-template-rows: repeat(8, var(--pitch));
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none; /* decorative: hover/focus feedback belongs to the link, not the LEDs */
  user-select: none;
}

/* Each LED is a tiny rectangular SMD package (like the 0603-size parts on the Arduino UNO R4
   WiFi matrix) turned 45deg, so it reads as a diamond from the front. Only the package is
   rotated: the cells below keep perfectly straight rows and columns with uniform spacing.
   ::before = the package (metallic solder terminals at both short ends, dark body, bevel);
   ::after  = the light-emitting window on the body. */
.site-brand__led {
  position: relative;
  width: var(--pitch);
  height: var(--pitch);
}

.site-brand__led::before,
.site-brand__led::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-brand__led::before {
  width: calc(var(--pitch) * 0.8);
  height: calc(var(--pitch) * 0.5);
  border-radius: 14%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(90deg, #5A6068 0 17%, #14171A 17% 83%, #5A6068 83% 100%);
  box-shadow: 0 0 0 0.5px #000;
  transition: box-shadow 140ms ease;
}

/* Emitting window. Unlit: dull dark red with a faint reflection. Lit: bright red with a hot
   centre and a short glow (the package picks up a little red light too). */
.site-brand__led::after {
  width: calc(var(--pitch) * 0.34);
  height: calc(var(--pitch) * 0.3);
  border-radius: 18%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 232, 226, 0.32) 0 14%, transparent 50%),
    #2A1210;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.site-brand__led.is-on::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(90deg, #9A5A58 0 17%, #C42A1C 17% 83%, #9A5A58 83% 100%);
  box-shadow: 0 0 0 0.5px #000, 0 0 4px rgba(255, 50, 30, 0.45);
}

.site-brand__led.is-on::after {
  background:
    radial-gradient(circle at 50% 50%, #FFE6DE 0 20%, #FF5B49 50%, #E22C1C 100%);
  box-shadow: 0 0 3px 1px rgba(255, 52, 36, 0.6);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 36px);
}

.site-menu-toggle {
  display: none;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--pcb-line-strong);
  background: var(--pcb-surface);
  color: var(--pcb-silver);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--pcb-ease), border-color var(--pcb-ease);
}

.site-menu-toggle:hover {
  border-color: var(--pcb-gold);
  color: var(--pcb-gold);
}

/* Nav items: no underline at rest; on hover a thin trace appears and a signal runs along it. */
.site-nav a {
  padding-block: 8px 7px;
  background-size: 40px 1px, 0 1px;
  color: var(--pcb-silver);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color var(--pcb-ease), background-size 250ms ease;
}

.site-nav a:is(:hover, :focus-visible) {
  background-size: 40px 1px, 100% 1px;
  color: var(--pcb-gold);
}

.site-nav a[aria-current="page"] {
  --pcb-underline: var(--pcb-silver);
  background-size: 40px 1px, 100% 1px;
  color: var(--pcb-silver-hi);
}

.site-nav a[aria-current="page"]:is(:hover, :focus-visible) {
  --pcb-underline: rgba(212, 175, 55, 0.5);
}

.site-nav .site-nav__contact {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 15px;
  padding: 0 16px;
  border: 1px solid var(--pcb-line-strong);
}

/* ---------- 7. Hero ---------- */

.hero {
  display: grid;
  min-height: 540px;
  align-items: center;
  grid-template-columns: minmax(0, 1.3fr) minmax(270px, 0.7fr);
  gap: clamp(40px, 8vw, 120px);
  padding-block: 84px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* Decorative CAD graphic: grey linework with a single gold-edged element. */
.hero-visual {
  position: relative;
  display: flex;
  min-height: 340px;
  align-items: flex-end;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--pcb-line-strong);
  background-color: var(--pcb-surface);
  background-image:
    linear-gradient(135deg, transparent 49.8%, rgba(199, 204, 209, 0.38) 49.8%, rgba(199, 204, 209, 0.38) 50.2%, transparent 50.2%),
    linear-gradient(0deg, transparent 96.5%, rgba(199, 204, 209, 0.1) 96.5%),
    linear-gradient(90deg, transparent 96.5%, rgba(199, 204, 209, 0.1) 96.5%);
  background-size: auto, 34px 34px, 34px 34px;
}

.hero-visual::before,
.hero-visual::after {
  position: absolute;
  content: "";
}

.hero-visual::before {
  top: 14%;
  left: 18%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(199, 204, 209, 0.4);
  border-radius: 50%;
}

.hero-visual::after {
  top: 29%;
  left: 34%;
  width: 110px;
  height: 110px;
  transform: rotate(45deg);
  border: 1px solid rgba(212, 175, 55, 0.6);
}

.hero-visual__caption {
  position: relative;
  z-index: 1;
  max-width: 210px;
  margin: 0;
  padding: 8px;
  background: var(--pcb-surface);
  color: var(--pcb-text);
  font-family: var(--pcb-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- 8. Buttons ---------- */

.button {
  position: relative;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 19px;
  border: 1px solid var(--pcb-silver);
  background: var(--pcb-surface);
  color: var(--pcb-silver-hi);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color var(--pcb-ease), border-color var(--pcb-ease), background-color var(--pcb-ease);
}

.button--quiet {
  border-color: var(--pcb-line-strong);
  background: transparent;
  color: var(--pcb-text);
}

.button:hover:not(:disabled),
.button:focus-visible:not(:disabled) {
  border-color: var(--pcb-gold);
  background: var(--pcb-surface-2);
  color: var(--pcb-gold);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ---------- 9. Signal propagation (hover / focus) ---------- */
/* A short gold packet runs once around the outline of the element, like a signal
   travelling down a PCB trace (~1.4–2s, no looping). Uses CSS motion paths; browsers
   without support simply keep the plain gold hover state above. */

@keyframes pcb-signal {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* Pulse along a link/nav underline (background layer 1 sweeps left to right). */
@keyframes pcb-pulse {
  from { background-position: -40px 100%, 0 100%; }
  to   { background-position: calc(100% + 40px) 100%, 0 100%; }
}

@supports (offset-path: inset(0)) {
  .button,
  a.card,
  .site-menu-toggle,
  .site-brand__mark,
  .el-option {
    position: relative;
  }

  .button::after,
  a.card::after,
  .site-menu-toggle::after,
  .site-brand__mark::after,
  .el-option::after {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pcb-packet-len, 22px);
    height: 2px;
    offset-path: inset(0.5px); /* centred on the 1px border line */
    offset-anchor: 100% 50%;
    offset-distance: 0%;
    opacity: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, transparent, var(--pcb-gold) 60%, var(--pcb-gold-hi));
    box-shadow: 0 0 5px rgba(230, 195, 92, 0.45);
  }

  .button:not(:disabled):is(:hover, :focus-visible)::after,
  a.card:is(:hover, :focus-visible)::after,
  .site-menu-toggle:is(:hover, :focus-visible)::after,
  .site-brand:is(:hover, :focus-visible) .site-brand__mark::after,
  .el-question:not(.is-locked) .el-option:is(:hover, :has(input:focus-visible))::after {
    animation: pcb-signal var(--pcb-signal-time, 1.4s) ease-in-out 1 both;
  }

  a.card {
    --pcb-signal-time: 2s; /* longer outline, slower packet */
  }

  .site-brand__mark {
    --pcb-packet-len: 12px;
    --pcb-signal-time: 1s;
  }

}

/* ---------- 10. Cards, sections, content blocks ---------- */

.section {
  padding-block: 92px;
  border-top: 1px solid var(--pcb-line);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.section-heading h2 {
  max-width: 660px;
  margin-bottom: 0;
}

.section-heading p {
  max-width: 360px;
  margin-bottom: 4px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Learning Hub: auto-fills as many columns as fit, so any number of module
   cards keeps the same card size and wraps cleanly on every screen width. */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

.module-card {
  min-height: 300px;
}

.module-card__number {
  margin-bottom: auto;
  color: var(--pcb-silver);
  font-family: var(--pcb-mono);
  font-size: clamp(56px, 7vw, 80px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
  transition: color var(--pcb-ease);
}

a.card:is(:hover, :focus-visible) .module-card__number {
  color: var(--pcb-gold);
}

.module-card h3 {
  margin-top: 28px;
}

.module-card__meta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--pcb-line);
  font-family: var(--pcb-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.skills-grid .card {
  min-height: 300px;
}

.card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px;
  border: 1px solid var(--pcb-line);
  background: var(--pcb-surface);
  color: var(--pcb-text);
}

a.card {
  text-decoration: none;
  transition: border-color var(--pcb-ease), background-color var(--pcb-ease);
}

a.card:is(:hover, :focus-visible) {
  border-color: var(--pcb-gold);
  background: var(--pcb-surface-2);
  color: var(--pcb-text);
}

a.card h3 {
  transition: color var(--pcb-ease);
}

a.card:is(:hover, :focus-visible) h3 {
  color: var(--pcb-gold);
}

.card__number {
  margin-bottom: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.card p {
  margin-bottom: 0;
  color: var(--pcb-text-dim);
  font-size: 14px;
}

.feature-band {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 32px;
  padding: clamp(28px, 6vw, 64px);
  border: 1px solid var(--pcb-line);
  background: var(--pcb-surface);
}

.feature-band h2 {
  max-width: 700px;
  margin-bottom: 14px;
  font-size: clamp(26px, 3.4vw, 40px);
}

.feature-band p {
  max-width: 620px;
  margin-bottom: 0;
}

.profile-card {
  max-width: 900px;
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid var(--pcb-line);
  background: var(--pcb-surface);
}

.profile-card h2 {
  font-size: clamp(26px, 3vw, 36px);
}

.profile-card > :last-child {
  margin-bottom: 0;
}

.page-intro {
  max-width: 850px;
  padding-block: 96px 70px;
}

.page-intro h1 {
  font-size: clamp(32px, 4.2vw, 50px);
}

.page-intro__subtitle {
  display: block;
  margin-top: 16px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.page-intro .lead {
  max-width: 720px;
}

.split {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(32px, 8vw, 120px);
}

.split__label {
  font-size: 12px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.tag-list li {
  padding: 7px 10px;
  border: 1px solid var(--pcb-line-strong);
  font-size: 12px;
}

.project-list {
  border-top: 1px solid var(--pcb-line);
}

.project-row {
  display: grid;
  grid-template-columns: 60px minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--pcb-line);
}

.project-row__number,
.project-row p {
  font-size: 13px;
}

.project-row h3 {
  margin: 0;
}

.project-row p {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--pcb-text-dim);
}

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: clamp(26px, 5vw, 52px);
  border: 1px solid var(--pcb-line);
  background: var(--pcb-surface);
}

.contact-card h2 {
  margin-bottom: 12px;
  font-size: clamp(26px, 3vw, 36px);
}

.contact-card p {
  max-width: 530px;
  margin-bottom: 0;
}

/* ---------- 11. Forms ---------- */

.contact-form {
  display: grid;
  max-width: 720px;
  gap: 20px;
}

.form-field {
  display: grid;
  gap: 8px;
  color: var(--pcb-silver);
  font-size: 14px;
  font-weight: 600;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--pcb-line-strong);
  border-radius: 0;
  background: var(--pcb-surface);
  color: var(--pcb-text);
  font: inherit;
  transition: border-color var(--pcb-ease);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--pcb-gold);
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

/* ---------- 12. Dialog (shared component, none in use yet) ---------- */

dialog {
  padding: 28px;
  border: 1px solid var(--pcb-line-strong);
  background: var(--pcb-surface);
  color: var(--pcb-text);
}

dialog::backdrop {
  background: rgba(11, 13, 16, 0.8);
}

/* ---------- 13. Footer ---------- */

.site-footer {
  margin-top: 90px;
  border-top: 1px solid var(--pcb-line);
}

.site-footer__inner {
  display: grid;
  min-height: 150px;
  align-items: center;
  grid-template-columns: 1.2fr 0.8fr auto auto auto auto;
  gap: 24px;
  padding-block: 30px;
}

.site-footer__inner p {
  margin: 0;
  color: var(--pcb-text-dim);
  font-size: 12px;
}

/* Tighter line box so the trace underline sits right under the text. */
.site-footer__inner a:not(.site-brand) {
  line-height: 1.35;
}

.site-footer__email,
.site-footer__copyright {
  font-size: 12px;
}

.site-footer__email {
  overflow-wrap: anywhere;
}

.site-footer__copyright {
  text-align: right;
}

.site-footer__analytics {
  display: block;
  margin-top: 6px;
  font-size: 10px;
}

/* ---------- 14. Responsive & reduced motion ---------- */

/* Under 1400px the margins are too narrow for the circuits. The side strips shrink to the
   empty margin (36px, 20px on phones) and show only the GND rail with its stitching vias.
   The circuits are drawn as two horizontal bands, FIXED to the viewport like wallpaper (one
   near the top, one near the bottom): the page scrolls over them, they never move, and the
   gold packets keep running. They sit behind everything, ignore the pointer, and are faint. */
@media (max-width: 1399px) {
  body::before,
  body::after {
    width: 36px;
  }

  body::before {
    -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%);
    mask-image: linear-gradient(to right, #000 55%, transparent 100%);
  }

  body::after {
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
    mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  }

  main::before,
  .site-footer::after {
    position: fixed;
    z-index: -1;
    display: block;
    width: min(360px, calc(100% - 2 * var(--gutter)));
    height: 48px;
    pointer-events: none;
    content: "";
    background: url("images/pcb-band.svg") no-repeat 0 0 / 720px 48px;
    opacity: 0.7; /* page text scrolls over the bands, so keep them extra faint */
  }

  /* Top band: left half of the artwork, just below where the header sits at the top of the page. */
  main::before {
    top: calc(var(--header-h) + 10px);
    left: max(var(--gutter), calc((100% - var(--max-width)) / 2));
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }

  /* Bottom band: right (mirrored) half, at the bottom edge of the viewport. */
  .site-footer::after {
    right: max(var(--gutter), calc((100% - var(--max-width)) / 2));
    bottom: 10px;
    background-position: right 0;
    -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent);
    mask-image: linear-gradient(270deg, #000 82%, transparent);
  }

  /* While the mobile menu is open, the menu links sit where the top band is: hide the band. */
  body:has(.site-header__inner.is-open) main::before {
    opacity: 0;
  }

  /* Keep the last lines of the footer clear of the fixed bottom band. */
  .site-footer {
    padding-bottom: 64px;
  }
}

@media (max-width: 760px) {
  body::before,
  body::after {
    width: 20px;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 70px;
  }

  .site-header__inner {
    min-height: auto;
    flex-wrap: wrap;
    gap: 0;
    padding-block: 12px;
  }

  /* Matrix is 44px tall, so the collapsed header stays as tall as the Menu button row (70px). */
  .site-brand__matrix {
    --pitch: 5.5px;
  }

  /* Smaller LEDs sit closer together on screen, so keep the glow tight to keep HOLA crisp. */
  .site-brand__led.is-on::after {
    box-shadow: 0 0 2px 0.25px rgba(255, 52, 36, 0.5);
  }

  .site-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .site-nav {
    display: none;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    padding-top: 12px;
  }

  .site-header__inner.is-open .site-nav {
    display: grid;
  }

  /* Stacked menu: a full-width rule between items replaces the trace underline. */
  .site-nav a {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding-block: 0;
    border-top: 1px solid var(--pcb-line);
    background-image: none;
  }

  .site-nav a[aria-current="page"] {
    border-top-color: var(--pcb-gold);
  }

  .card-grid,
  .card-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 20px;
  }

  .site-header__inner,
  .site-footer__inner,
  .container {
    width: min(100% - 40px, var(--max-width));
  }

  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 44px;
    padding-block: 70px;
  }

  .hero-visual {
    min-height: 270px;
  }

  .section {
    padding-block: 66px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .card-grid,
  .card-grid--three,
  .skills-grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 190px;
  }

  .module-card {
    min-height: 260px;
  }

  .feature-band,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-row {
    grid-template-columns: 36px 1fr;
    gap: 8px 16px;
  }

  .project-row p {
    grid-column: 2;
  }

  .page-intro {
    padding-block: 72px 52px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-block: 28px;
  }

  .site-footer__copyright {
    text-align: left;
  }
}

@media (max-width: 420px) {
  .site-brand {
    gap: 6px;
    font-size: 16px;
  }
}

/* Very narrow phones: shrink the matrix a little more so brand + Menu still fit on one row. */
@media (max-width: 340px) {
  .site-brand__matrix {
    --pitch: 4.5px;
  }
}

@media (max-width: 420px) {
  .site-nav {
    gap: 0 12px;
  }

  .site-nav a {
    font-size: 12px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    justify-content: space-between;
  }
}

/* Reduced motion: no smooth scroll, no signal packets or pulses, no transitions. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}