/* Shared shell. Everything else stays as inline style attributes, exactly as
   the design export wrote them — this file exists only for what cannot be
   expressed inline: font faces, pseudo-classes, media queries. */

@font-face { font-family: Spectral; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/spectral-300.woff2') format('woff2'); }
@font-face { font-family: Spectral; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family: Spectral; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/spectral-400i.woff2') format('woff2'); }
@font-face { font-family: Spectral; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/spectral-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-tight-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-tight-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-tight-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-500.woff2') format('woff2'); }

:root {
  --ink: #F2EFE9;
  --paper: #141210;
  --rubric: #D4483F;
  --muted: #928B81;
  --rule: rgba(242, 239, 233, .15);
  --surface: #1C1917;
  --sunk: rgba(242, 239, 233, .035);
}

* { box-sizing: border-box; }

/* The export writes every rule as an inline style attribute, so any element it
   also marks [hidden] carries an author-level `display` that beats the UA
   stylesheet's `[hidden] { display: none }` unconditionally — the success
   state painted on first load in every browser and toggling the attribute
   could never hide it again. An author rule at the same specificity plus
   !important restores the attribute's meaning without touching the
   transcribed inline styles. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; background: #141210; scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Inter Tight', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration-color: var(--rubric); text-underline-offset: 3px; }
a:hover { color: var(--rubric); }
input::placeholder { color: #6E675E; opacity: 1; }
::selection { background: var(--rubric); color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .001ms !important; }
}

/* The export expressed hover and focus through a style-hover / style-focus
   attribute its runtime interpreted. Static markup needs real selectors. */
[data-hover-invert]:hover { background: var(--ink); color: var(--paper); }
[data-hover-ink]:hover { color: var(--ink); }
[data-hover-border]:hover { border-color: var(--ink); }
input[data-focus-rubric]:focus { border-bottom-color: var(--rubric); }