/* Copied from pbn.red's skin (Projects/pbn-red-site/skin/assets/css/base.css) by profiles-red/src/build.py. Site changes go in profiles.css. */
/* pbn.red brand base. Shared by every design-round-1 candidate; each candidate adds its own layout CSS.
 * Hallmark · theme: custom · vibe: "red box, white page, heavy black type"
 * paper: oklch(100% 0 0) · accent: oklch(59.63% 0.2414 28.04) (logo red #EE0814, one step darker for text contrast)
 * display: Switzer 800/900 + italics · body: Switzer 400/500 · data: Fragment Mono
 * axes: light / display-heavy / warm · genre: modern-minimal (pure white paper and neutral greys allowed)
 */
@import url("../fonts/fonts.css");

:root {
  /* Color. Paper, ink and red come from the logo kit. */
  --color-paper:    oklch(100% 0 0);               /* #FFFFFF, kit white */
  --color-paper-2:  oklch(96.41% 0.0041 91.45);    /* #F4F3F0, kit sheet ground */
  --color-paper-3:  oklch(93.72% 0.0070 88.64);    /* #ECEAE5 */
  --color-ink:      oklch(17.76% 0 0);             /* #111111, kit one-color ink */
  --color-ink-2:    oklch(28.53% 0.0039 84.58);    /* #2B2A28 */
  --color-muted:    oklch(52.10% 0.0081 88.69);    /* #6B6964, 5.5:1 on white */
  --color-rule:     oklch(87.93% 0.0071 88.65);    /* #D9D7D2 */
  --color-rule-2:   oklch(92.21% 0.0071 88.65);    /* #E7E5E0 */
  --color-red:      oklch(59.63% 0.2414 28.04);    /* #ED0814: the logo red #EE0814 one step darker, so white on it passes 4.5:1 */
  --color-red-deep: oklch(43.96% 0.1796 27.80);    /* #9E0009, pressed state */
  --color-red-wash: oklch(96.91% 0.0151 17.42);    /* #FFF1F1, row tint for flagged rows */
  --color-on-red:   var(--color-paper);
  --color-focus:    var(--color-red);

  /* Type. One grotesque family carries display and body; Fragment Mono carries data. */
  --font-display: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-data:    "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;

  --text-xs:   0.8125rem;   /* 13px, data captions only */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.25rem;     /* 20px */
  --text-lg:   1.5625rem;   /* 25px */
  --text-xl:   1.9531rem;   /* 31px */
  --text-2xl:  2.4414rem;   /* 39px */
  --text-3xl:  3.0518rem;   /* 49px */
  --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 4rem);
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);

  /* Space, 4pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 82rem;

  /* Rules */
  --rule-hair: 1px solid var(--color-rule);
  --rule-ink:  2px solid var(--color-ink);
  --rule-slab: 4px solid var(--color-ink);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Z */
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
p { text-wrap: pretty; }
:where(h1, h2, h3, p, li, td, th, dd, dt, a, span) { overflow-wrap: anywhere; min-width: 0; }

/* Focus: instant, never animated */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.on-red :focus-visible, .on-ink :focus-visible { outline-color: var(--color-paper); }

.skip {
  position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast);
  background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: var(--space-md); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Logo: the kit SVG, never redrawn. Smallest size 80px wide; clear space a quarter of the box height. */
.logo { display: inline-block; line-height: 0; text-decoration: none; }
.logo img { width: var(--logo-w, 124px); height: auto; min-width: 80px; }

/* Data */
.mono { font-family: var(--font-data); font-weight: 400; letter-spacing: 0; }
.num  { font-variant-numeric: tabular-nums; }

/* Verdict box: the logo's own language. Pass wears the red box, Buy the ink box, Buy then test the outlined box. */
.vbox {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
  padding: 0.16em 0.36em 0.2em 0.3em;
}
.vbox--pass { background: var(--color-red); color: var(--color-on-red); }
.vbox--buy  { background: var(--color-ink); color: var(--color-paper); }
.vbox--test { background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 0.11em var(--color-ink); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important; animation-iteration-count: 1 !important;
    transition-duration: 150ms !important; scroll-behavior: auto !important;
  }
}