/* Ruach -- standalone pages (error pages, privacy). Kept separate from styles.css so these pages stay light. */
:root {
  --paper: #f3efe8;
  --ink: #141414;
  --muted: #625a51;
  --line: rgba(20, 20, 20, 0.16);
  --orange: #c24e00;
  --orange-dark: #a84300;
  --on-orange: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d0d0d;
    --ink: #ededeb;
    --muted: #a3a3a3;
    --line: rgba(237, 237, 235, 0.16);
    --orange: #ff7f2a;
    --orange-dark: #ff7f2a;
    --on-orange: #141414;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.page-main p a,
.page-main li a,
.page-footer a {
  color: var(--orange-dark);
  font-weight: 500;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(16px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

/* Logo lockup: the mark is sized from the wordmark's capital height (Inter caps = 0.727em),
   drawn 1.18x that so it holds its own, and centred on the capitals so it overhangs the
   cap line and the baseline equally. The mark files are trimmed to the ink (256 x 247). */
.page-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  min-height: 44px;
  font-family: 'Ruach Wordmark', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  text-decoration: none;
}

.page-brand img {
  flex: none;
  width: calc(0.86em * 1.0364);
  height: 0.86em;
  position: relative;
  top: calc((0.86em - 0.727em) / 2);
}

.page-main {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 10vh, 120px) clamp(16px, 5vw, 32px);
}

.page-eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-code {
  margin: 0 0 8px;
  color: var(--orange-dark);
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-stretch: 72%;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-stretch: 80%;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

h2 {
  margin: 40px 0 10px;
  font-size: 1.3rem;
  font-stretch: 85%;
  font-weight: 650;
}

p,
li {
  color: var(--muted);
  font-size: 1.02rem;
}

.page-main ul {
  padding-left: 20px;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.page-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 20px;
  font-weight: 600;
  text-decoration: none;
}

.page-button--primary {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--on-orange);
}

.page-footer {
  padding: 22px clamp(16px, 5vw, 64px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
}