/* RexxiClips — site system. Ink ground, bone text, one amber, the eye. */
@font-face { font-family: "Exo 2"; font-weight: 800; font-style: italic; font-display: swap; src: url("/fonts/exo2-800i.woff2") format("woff2"); }
@font-face { font-family: "Exo 2"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/exo2-800.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/rajdhani-500.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --ink: #08090B;
  --ink-deep: #010203;
  --bone: #F2EDE4;
  --amber: #FAA31B;
  --amber-deep: #C97A0A;
  --rail: #2D2F33;
  --rule: #23252A;
  --grey: #8A8A96;
  --body: #B9B6AF;
  --display: "Exo 2", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --label: "Rajdhani", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(20px, 4.2vw, 64px);
  --track: 0.28em;
}

* { box-sizing: border-box; }
html { background: var(--ink); scrollbar-color: var(--rail) var(--ink); }
body {
  margin: 0; min-height: 100svh;
  background: var(--ink);
  color: var(--bone);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--amber); color: var(--ink-deep); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }
a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--amber) 45%, transparent); }
a:hover { text-decoration-color: var(--amber); }
img { max-width: 100%; display: block; }

.label { font-family: var(--label); font-weight: 500; letter-spacing: var(--track); text-transform: uppercase; font-size: 0.8125rem; color: var(--grey); font-variant-numeric: tabular-nums; }

/* Header */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 34px var(--pad) 0; }
.brand { display: flex; align-items: center; gap: 18px; color: var(--bone); text-decoration: none; }
.brand > span { display: grid; }
.brand .eye { width: 96px; height: 96px; flex: none; filter: drop-shadow(0 6px 22px rgba(250, 163, 27, 0.22)); }
.wordmark { font: 800 clamp(2rem, 3.6vw, 3.25rem)/0.9 var(--display); font-style: italic; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.wordmark b { font-weight: inherit; color: var(--amber); }
.tagline { margin-top: 0.55em; }
.tagline::before, .tagline::after { content: "–"; letter-spacing: 0; margin: 0 0.5em; }
.tagline::before { margin-left: 0; }
.site-nav { display: flex; gap: 0; flex-wrap: wrap; align-items: center; }
.site-nav a { color: var(--grey); text-decoration: none; padding: 6px 0; transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1); }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--bone); }
.site-nav a + a::before { content: "•"; color: var(--grey); margin: 0 1.1em; letter-spacing: 0; }

/* Footer */
.site-foot { margin: 72px var(--pad) 0; padding: 26px 0 42px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; }
.site-foot .tagline { grid-column: 2; margin: 0; }
.site-foot .tagline::before, .site-foot .tagline::after { content: none; }
.site-foot .copy { grid-column: 3; text-align: right; font-size: 0.8125rem; color: var(--grey); letter-spacing: 0.02em; }
.site-foot .legal { grid-column: 1; display: flex; gap: 22px; font-size: 0.8125rem; }
.site-foot .legal a { color: var(--grey); text-decoration: none; }
.site-foot .legal a:hover { color: var(--bone); }

/* Read pages (privacy, terms) */
.doc { max-width: calc(68ch + 2 * var(--pad)); padding: 0 var(--pad); margin: 0 auto; }
.doc-head { padding: clamp(48px, 7vw, 96px) var(--pad) 0; max-width: calc(68ch + 2 * var(--pad)); margin: 0 auto; }
.doc-head h1 { font: 800 clamp(2.4rem, 5.4vw, 4.25rem)/1 var(--display); letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; }
.doc-head .label { display: block; }
.doc h2 { font: 800 1.375rem/1.2 var(--display); letter-spacing: -0.005em; margin: 2.6em 0 0.55em; color: var(--bone); }
.doc p, .doc li { color: var(--body); }
.doc p { margin: 0 0 1.05em; }
.doc ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.doc li { margin-bottom: 0.45em; }
.doc li::marker { color: var(--amber); }
.doc strong { color: var(--bone); font-weight: 600; }
.doc .lede { color: var(--bone); font-size: 1.1875rem; line-height: 1.55; margin: 28px 0 0; }

@media (max-width: 720px) {
  .site-head { padding-top: 24px; }
  .brand .eye { width: 64px; height: 64px; }
  .brand { gap: 14px; }
  .site-nav { width: 100%; }
  .site-nav a + a::before { margin: 0 0.8em; }
  .site-foot { grid-template-columns: 1fr; text-align: left; }
  .site-foot .tagline, .site-foot .copy, .site-foot .legal { grid-column: 1; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }