/* ==========================================================================
   KRUMAN HOUSE STYLE  v2.0  (2026-10-12, revised after the stress-test battery)
   The master visual identity for yurikruman.com, inherited later by the other
   individual-side properties.

   Concept: "Paper, Command Blue, one Signal."
   - PAPER: the warm page of a serious book. Light, human, never cold white.
   - MIST: a cool pale blue for alternate panels, so each "room" reads as
     different by hue, not by a few points of lightness (v1 failure).
   - COMMAND BLUE: the anchor for full-bleed panels. Rooted in Yuri's own
     assets: the BYOCIC cover blue, the blue he wears, a 2018 navy-seamless shoot.
   - SIGNAL: one vermilion accent for the primary action and the numbers that
     prove the thesis. Nothing else.
   - No near-black panels anywhere. Yuri's complaint was white on black.

   v2 changes from the stress tests (stress-tests/ folder):
   - Two type families, no monospace (judge: the v1 trio was the default
     AI-builder pairing). Display: Brygada 1918. Text: Schibsted Grotesk.
   - Eyebrows lose the leading rule and the accent color (template tell).
   - The accent italic is gone; the signal color is used upright, once per view.
   - Secondary buttons are ink-filled so every door carries real weight.
   - The Gap Line (25% to 57% to 62%) is the brand mark, not decoration.

   Contrast for every functional pairing: strategy/palette_lab.py (0 failures).
   ========================================================================== */

/* ============ TOKENS ============ */
:root {
  color-scheme: light;

  /* ---- Color ---- */
  --paper:          #F9F5EE;
  --paper-deep:     #EFE9DE;
  --mist:           #E3ECF5;
  --ink:            #0D1729;
  --ink-soft:       #475061;
  --command:        #0C336A;
  --command-deep:   #052451;
  --command-hi:     #A1C1E4;
  --signal:         #D2451A;
  --signal-deep:    #B93415;
  --signal-on-dark: #F18154;
  --rule:           #D6D0C6;
  --rule-mist:      #C6D3E2;
  --rule-dark:      rgba(249, 245, 238, 0.20);

  /* ---- Type families (two only) ---- */
  --font-display: 'Brygada 1918', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Schibsted Grotesk', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Fluid type scale ---- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg:   clamp(1.1875rem, 1.08rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-3xl:  clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);
  --text-hero: clamp(2.6rem, 1.2rem + 5vw, 5.25rem);
  --text-stat: clamp(4rem, 2rem + 9vw, 9.5rem);

  /* ---- Spacing (4px grid) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --space-section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --measure: 62ch;
  --max: 1240px;

  /* ---- Shape and depth: sharp corners, rules not shadows ---- */
  --radius: 2px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-reveal: 700ms;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.005em; }
.signal { color: var(--signal); }
.on-dark .signal { color: var(--signal-on-dark); }
::selection { background: var(--command); color: var(--paper); }
:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 3px; border-radius: var(--radius); }
.on-dark :focus-visible { outline-color: var(--signal-on-dark); }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--space-3) var(--space-4); }
.skip-link:focus { top: var(--space-4); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============ LAYOUT ============ */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.panel { padding-block: var(--space-section); position: relative; }
.panel--paper { background: var(--paper); }
.panel--mist { background: var(--mist); }
.panel--command { background: var(--command); color: var(--paper); }
.on-dark p { color: var(--command-hi); }

/* Eyebrow: names the section's job. Quiet: small caps in ink, no rule, no accent */
.eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 var(--space-5);
}
.on-dark .eyebrow { color: var(--command-hi); }

.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }
.on-dark .lede { color: var(--command-hi); }

/* Ledger: credentials and numbers as one quiet line with a hairline above it */
.ledger {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8);
  border-top: 1px solid var(--rule); padding-top: var(--space-4); margin-top: var(--space-10);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.ledger b { color: var(--ink); font-weight: 700; }

/* ============ BRAND MARK: the Gap Line ============ */
.mark { width: 26px; height: 16px; flex: none; }
.mark polyline { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mark circle { fill: var(--signal); }
.on-dark .mark polyline { stroke: var(--signal-on-dark); }
.on-dark .mark circle { fill: var(--signal-on-dark); }

/* ============ NAVIGATION ============ */
.site-nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(249, 245, 238, 0.9);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.site-nav.scrolled { border-bottom-color: var(--rule); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.nav-links a { text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); padding-block: var(--space-2); }
.nav-links a:hover { color: var(--ink); }
.nav-links .nav-org { color: var(--command); font-weight: 600; }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #FFFFFF; padding: var(--space-2) var(--space-5); min-height: 42px; }
@media (max-width: 960px) { .nav-links .hide-sm { display: none; } }

/* ============ BUTTONS (exactly three variants) ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-6);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); letter-spacing: 0.01em;
  border-radius: var(--radius); border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--signal-deep); color: #FFFFFF; }
.btn-primary:hover { background: #A22D12; transform: translateY(-1px); }
.btn-secondary { background: var(--command); color: var(--paper); }
.btn-secondary:hover { background: var(--command-deep); transform: translateY(-1px); }
.on-dark .btn-secondary { background: var(--paper); color: var(--command); }
.on-dark .btn-secondary:hover { background: #FFFFFF; }
.btn-ghost { background: transparent; color: var(--ink); padding-inline: 0; min-height: 44px; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 6px; }
.btn-ghost:hover { text-decoration-color: currentColor; }
.btn-ghost .arrow { display: inline-block; text-decoration: none; transition: transform var(--dur-fast) var(--ease-out); }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.on-dark .btn-ghost { color: var(--paper); text-decoration-color: var(--rule-dark); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }

/* ============ FORMS ============ */
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); font: inherit; font-size: var(--text-base); color: var(--ink); background: #FFFDF8; border: 1.5px solid var(--ink-soft); border-radius: var(--radius); }
.input:focus { outline: none; border-color: var(--command); box-shadow: 0 0 0 3px rgba(12, 51, 106, 0.18); }

/* ============ MOTION (progressive enhancement, never above the fold) ============
   Content is visible by default. Only once JS has added .js to <html> do
   below-the-fold elements start hidden and reveal on scroll, with a 1.2s
   fail-safe. The hero never uses .reveal (v1 showed an empty portrait). */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}