/* ==========================================================================
   Gradien × Obsidian-inspired campaign theme (po- prefix).
   Standalone by design: remixes obsidianos.com's architecture — warm
   near-black monolith, centered display type, stone imagery flanking a
   product artifact, status-badged module cards, watermark footer.
   Stones are the brand's painterly register (public-domain romantic
   painting crops from brand-guidelines/imagery/art/ — provenance in
   core-site/docs/artwork-provenance.md). Local fonts only: Satoshi
   display/body, IBM Plex Mono for the provenance register.
   ========================================================================== */

@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 {
  /* Warm near-black world — one gray family, no pure #000 fields */
  --ink: #0b0b09;         /* page body */
  --coal: #16150f;        /* raised surface */
  --coal-2: #1d1b14;      /* surface hover */
  --bone: #e8e4d9;        /* display text */
  --bone-2: #c9c5ba;      /* body text */
  --mid: #8e8a7f;         /* muted */
  --edge: rgba(232, 228, 217, 0.14);
  --edge-soft: rgba(232, 228, 217, 0.07);
  --blue: #3d7bff;        /* signal — ≤5%, verdicts and active states only */

  /* Paper close — the page's single inverse section */
  --paper: #edebe6;
  --dark: #151515;

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

  --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(--ink); color: var(--bone-2);
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; margin: 0; color: var(--bone); }
h1 { font-size: clamp(42px, 6.2vw, 92px); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; }
h2 { font-size: clamp(34px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.018em; text-wrap: balance; }
h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.012em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.mono--caps { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; }
.mid { color: var(--mid); }

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

/* Hairline with corner ticks — carried over from the property's signature */
.po-rule { position: relative; border-top: 1px solid var(--edge); }
.po-rule::before, .po-rule::after {
  content: ''; position: absolute; top: -3.5px; width: 1px; height: 7px; background: var(--mid);
}
.po-rule::before { left: 0; }
.po-rule::after { right: 0; }

/* Grain — breaks the flat dark field; static, pointer-transparent */
.po-grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Reveal — additive; page complete without JS */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-move) var(--ease-out3), transform var(--t-move) var(--ease-out3); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-group > * { opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-move) var(--ease-out3), transform var(--t-move) var(--ease-out3); }
html.js .reveal-group.is-in > * { opacity: 1; transform: none; }
html.js .reveal-group > *:nth-child(2) { transition-delay: 90ms; }
html.js .reveal-group > *:nth-child(3) { transition-delay: 180ms; }
html.js .reveal-group > *:nth-child(n+4) { transition-delay: 270ms; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

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