/* =========================================================
   Systems and Software, Inc. — base tokens & primitives
   Shared by every section. Section styles live in css/sections/*.css
   ========================================================= */

:root {
  /* Color: v2 brushed metal + orange (see design/design-system.md) */
  --alu-50: #F3F4F5;
  --alu-100: #E4E6E8;
  --alu-200: #CDD0D4;
  --alu-400: #9A9EA4;
  --steel-600: #4E5258; /* AA 4.9:1 on the v3 aluminum */
  --gunmetal-800: #26282C;
  --gunmetal-900: #18191C;
  --gunmetal-950: #0E0F11;
  --graphite: #1A1B1E;
  --copper-500: #B87333;
  --ember-500: #FF6600;
  --ember-400: #FF8A3D;
  --ember-glow: rgba(255, 102, 0, .55);
  --ember-ink: #A84300; /* orange for small text on light aluminum (AA 4.8:1 on alu-100) */
  --ink-on-dark: #ECEEF0;
  --muted-on-dark: rgba(236, 238, 240, .72);
  --muted-on-light: rgba(26, 27, 30, .76);
  --rule-dark: rgba(236, 238, 240, .14);
  --rule-light: rgba(26, 27, 30, .16);

  /* v1 aliases (retired palette): kept so older section code maps onto metal */
  --espresso-950: var(--gunmetal-950);
  --espresso-900: var(--gunmetal-900);
  --espresso-800: var(--gunmetal-800);
  --espresso-700: var(--graphite);
  --clay-500: var(--steel-600);
  --cream-50: var(--alu-100);
  --cream-100: var(--alu-200);

  /* Type */
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-h1: clamp(52px, 6.2vw, 104px);
  --fs-h2: clamp(40px, 4.4vw, 76px);
  --fs-h3: 28px;
  --fs-body: clamp(16px, 1.05vw, 17px);
  --fs-small: 13px;
  --fs-eyebrow: 11px;
  --fs-numeral: 52px;

  /* Layout */
  --maxw: 1180px;
  --gutter: 24px;
  --side: clamp(16px, 4.1vw, 64px);
  --section-pad: clamp(96px, 11vw, 168px);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-reveal: 1000ms;
  --dur-hover: 260ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--espresso-950);
  color: var(--ink-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--ember-500); color: var(--espresso-950); }
:focus-visible { outline: 2px solid var(--ember-500); outline-offset: 3px; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 10px 16px; background: var(--ember-500); color: var(--espresso-950);
  transform: translateY(-200%); transition: transform var(--dur-hover) var(--ease-out);
}
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Surfaces ---------- */
.band { position: relative; padding-block: var(--section-pad); isolation: isolate; }
/* Metal bands: brushed texture over base color. .band--alu/.band--gunmetal are the v2 names;
   light/cream/dark/deep are kept as aliases. --sheen-x (0..1) is driven by js/main.js from the pointer. */
.band--gunmetal, .band--dark { background: var(--gunmetal-800) url("../assets/img/tex/brushed-dark.webp") center / 1024px repeat; color: var(--ink-on-dark); }
.band--deep { background: var(--gunmetal-950) url("../assets/img/tex/brushed-dark.webp") center / 1024px repeat; background-blend-mode: multiply; color: var(--ink-on-dark); }
.band--alu, .band--light { background: var(--alu-100) url("../assets/img/tex/brushed-light.webp") center / 1024px repeat; color: var(--graphite); }
.band--cream { background: var(--alu-200) url("../assets/img/tex/brushed-light.webp") center / 1024px repeat; background-blend-mode: multiply; color: var(--graphite); }
.band--gunmetal::before, .band--dark::before, .band--deep::before,
.band--alu::before, .band--light::before, .band--cream::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* broad studio-light falloff, never a hard stripe: wide elliptical gradient that drifts with the pointer */
  background: radial-gradient(120% 90% at calc(var(--sheen-x, .5) * 100%) 0%, rgba(255,255,255,.055), rgba(255,255,255,.02) 45%, transparent 75%);
  mix-blend-mode: screen;
}
.band--alu::before, .band--light::before, .band--cream::before { background: radial-gradient(110% 85% at calc(var(--sheen-x, .5) * 100%) 0%, rgba(255,255,255,.6), rgba(255,255,255,.16) 50%, transparent 82%); mix-blend-mode: soft-light; }
/* Machined edge between bands: light top bevel, dark bottom bevel */
/* bevel edges + studio light falloff (edges darker than the lit centre) */
.band--alu, .band--light, .band--cream { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.18), inset 0 0 260px rgba(26,27,30,.09); }
.band--gunmetal, .band--dark, .band--deep { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.6), inset 0 0 280px rgba(0,0,0,.38); }
.engraved { text-shadow: 0 1px 0 rgba(255,255,255,.65); }
.embossed { text-shadow: 0 -1px 0 rgba(0,0,0,.6); }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ember-500); box-shadow: 0 0 6px 1px var(--ember-glow), 0 0 14px 2px rgba(255,102,0,.25); animation: led 2.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: .55; box-shadow: 0 0 3px 0 var(--ember-glow); } }

.container { width: 100%; max-width: calc(var(--maxw) + var(--side) * 2); margin-inline: auto; padding-inline: var(--side); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- Type primitives ---------- */
.h1, .h2 { font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.h1 em, .h2 em, .h3 em { font-style: italic; font-weight: 400; }
.lede { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; letter-spacing: -0.01em; }
.muted { color: var(--muted-on-dark); }
.band--light .muted, .band--cream .muted, .band--alu .muted { color: var(--muted-on-light); }
.mono { font-family: var(--font-mono); }

/* Section eyebrow: numeral + mono caps label */
.eyebrow { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(40px, 5vw, 72px); }
.eyebrow__num { font-size: var(--fs-numeral); font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: var(--ember-500); font-variant-numeric: tabular-nums; }
.eyebrow__label { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }

/* ---------- Links & buttons ---------- */
.link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 500; padding-bottom: 8px;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .35; transform-origin: left;
  transition: opacity var(--dur-hover) var(--ease-out);
}
.link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ember-500); transform: scaleX(0); transform-origin: left; z-index: 1;
  transition: transform 600ms var(--ease-out);
}
.link:hover::before { transform: scaleX(1); }
.link .arrow { transition: transform var(--dur-hover) var(--ease-out); }
.link:hover .arrow { transform: translate(3px, -3px); }

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px; border-radius: 2px;
  background: var(--ember-500); color: var(--espresso-950);
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  transition: background var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
  will-change: transform;
}
.btn { color: var(--graphite); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 rgba(255,102,0,0); }
.btn:hover { background: var(--ember-400); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 28px rgba(255,102,0,.45); }
.btn .arrow { transition: transform 400ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center;
  border: 1px solid currentColor; border-radius: 0; opacity: .8;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover);
}

.rule { height: 1px; border: 0; background: var(--rule-dark); margin: 0; }
.band--light .rule, .band--cream .rule, .band--alu .rule { background: var(--rule-light); }

/* ---------- Reveal system (driven by js/main.js) ----------
   [data-reveal="lines"] : splits into masked lines, slides up line by line
   [data-reveal="fade"]  : fades + rises 24px
   [data-reveal-delay="200"] : ms delay                                  */
[data-reveal="fade"] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
[data-reveal="fade"].is-in { opacity: 1; transform: none; }
/* room below for descenders (g, y, p) and to the right for italic overhang; negative margins keep the layout */
.line-mask { display: block; overflow: hidden; padding: 0 .12em .24em 0; margin: 0 -.12em -.24em 0; }
.line-mask > .line { padding-bottom: .22em; margin-bottom: -.22em; padding-right: .1em; } /* metallic background-clip fills reach the descenders too */
.line-mask > .line { display: block; transform: translateY(110%); transition: transform 1100ms var(--ease-out); }
[data-reveal="lines"].is-in .line { transform: none; }

/* ---------- Film grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 900; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.6 -.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 900ms steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal="fade"], .line-mask > .line { opacity: 1 !important; transform: none !important; }
  .grain { animation: none; }
}


/* ===== Metal v3 (r8): real anisotropic read — fine micro-grain, a broad vertical light band
   (horizontal brushing throws the highlight perpendicular), and edge falloff. Overrides the band rules above. ===== */
.band--alu, .band--light, .band--cream { background-color: #D9DCDF; background-blend-mode: multiply; }
.band--alu::before, .band--light::before, .band--cream::before {
  /* two soft lobes (key + bounce), never one hard streak */
  background:
    radial-gradient(38% 120% at calc(var(--sheen-x, .5) * 100%) 30%, rgba(255,255,255,.42), rgba(255,255,255,.12) 55%, transparent 80%),
    radial-gradient(30% 110% at calc(var(--sheen-x, .5) * 100% + 34%) 70%, rgba(255,255,255,.18), transparent 75%);
  mix-blend-mode: screen;
}
.band--gunmetal::before, .band--dark::before, .band--deep::before {
  background: linear-gradient(90deg,
    transparent calc(var(--sheen-x, .5) * 100% - 35%),
    rgba(255,255,255,.025) calc(var(--sheen-x, .5) * 100% - 20%),
    rgba(255,255,255,.075) calc(var(--sheen-x, .5) * 100% - 5%),
    rgba(255,255,255,.09) calc(var(--sheen-x, .5) * 100%),
    rgba(255,255,255,.065) calc(var(--sheen-x, .5) * 100% + 8%),
    rgba(255,255,255,.02) calc(var(--sheen-x, .5) * 100% + 22%),
    transparent calc(var(--sheen-x, .5) * 100% + 36%));
  mix-blend-mode: screen;
}
.band--alu::after, .band--light::after, .band--cream::after,
.band--gunmetal::after, .band--dark::after, .band--deep::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 40%, transparent 50%, rgba(0,0,0,.16) 100%);
}
.band--gunmetal::after, .band--dark::after, .band--deep::after { background: radial-gradient(130% 120% at 50% 40%, transparent 50%, rgba(0,0,0,.45) 100%); }
.band--alu, .band--light, .band--cream { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.18); }
.band--gunmetal, .band--dark, .band--deep { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.6); }