/* ==========================================================================
   Gradien × Topology-inspired campaign theme (pt- prefix).
   Standalone by design: explores ../../inspiration/topology/DESIGN.md —
   dark monochrome editorial, one generative visual, mono second voice.
   The visual is a 3D gradient-descent surface (surface.js) — wireframe
   gaussian mesh, ink lines, peak tinted Gradien signal blue #3D7BFF.
   Local fonts only: Satoshi subs for Magnetik/LazareGrotesk, IBM Plex Mono
   for Space Mono.
   ========================================================================== */

@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* Primitives — from inspiration/topology/DESIGN.md §2 */
  --dark: #151515; --black: #000; --white: #fff;
  --bone: #e4e2d8; --bone-2: #dbdbdb; --mid: #9b9b9b; --blue-gray: #a7b4ba;
  --edge: rgba(224, 232, 236, 0.3); --edge-soft: rgba(224, 232, 236, 0.15);

  --sans: 'Satoshi', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Two easings, two durations — the complete vocabulary */
  --ease-power: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out3: cubic-bezier(0.33, 1, 0.68, 1);
  --t-micro: 300ms; --t-move: 600ms;

  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--dark); color: var(--white);
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 400; margin: 0; }
h1 { font-size: clamp(44px, 8.5vw, 128px); line-height: 0.92; letter-spacing: -0.01em; }
h2 { font-size: clamp(40px, 9vw, 148px); line-height: 0.9; letter-spacing: -0.008em; color: var(--bone); }
h3 { font-size: clamp(26px, 3.2vw, 46px); line-height: 0.95; letter-spacing: -0.0125em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.mono--caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }
.mono--body { font-size: 13px; line-height: 1.65; letter-spacing: 0; }
.mid { color: var(--mid); }
.bone { color: var(--bone); }

.wrap { max-width: 1536px; margin-inline: auto; padding-inline: var(--gutter); }

/* Native scrollbar suppressed like the reference — the custom idle-hiding thumb
   (.pt-sb) is the only indicator. JS-gated: no-JS and reduced-motion users keep
   the browser scrollbar. */
html.js { scrollbar-width: none; -ms-overflow-style: none; }
html.js::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Hairline with corner brackets — the split-border signature */
.pt-rule { position: relative; border-top: 1px solid var(--edge); }
.pt-rule::before, .pt-rule::after {
  content: ''; position: absolute; top: -3.5px; width: 1px; height: 7px;
  background: var(--bone); transition: opacity var(--t-micro) ease;
}
.pt-rule::before { left: 0; }
.pt-rule::after { right: 0; }

/* Reveal — additive; page complete without JS */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--t-move) var(--ease-out3), transform var(--t-move) var(--ease-out3); }
html.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}