@font-face {
  font-family: 'SourceCodePro';
  src: url('assets/fonts/SourceCodePro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SourceCodePro';
  src: url('assets/fonts/SourceCodePro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   AuroraQ - Design System
   Single source of truth. Every page links to this file.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ SELF-HOSTED FONTS ═══ */
@font-face { font-family: 'Merriweather'; src: url('assets/fonts/merriweather-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('assets/fonts/merriweather-latin-300-italic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('assets/fonts/merriweather-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('assets/fonts/merriweather-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; src: url('assets/fonts/jetbrains-mono-v24-latin-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; src: url('assets/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'JetBrains Mono Var'; font-style: normal; font-weight: 100 800; src: url('assets/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2'); }

/* ═══ DARK THEME (default) ═══ */
html { scrollbar-gutter: stable both-edges; }

:root {
  --bg: #0a0a0c;
  --surface: rgba(19,19,24,.94);
  --surface-2: #1a1a22;
  --border: #2a2a35;
  --text: #e8e6e1;
  --text-dim: #8a8890;
  --text-faint: #55535a;
  --accent: #d4a855;
  --accent-dim: #9a7a3a;
  --danger: #c45c4a;
  --serif: 'Merriweather', Georgia, serif;
  --brand: 'JetBrains Mono', monospace;
  --mono: 'JetBrains Mono', monospace;
  --topbar-bg: rgba(10,10,12,.88);
  --toggle-track: #2a2a35;
  --toggle-thumb: rgba(212,168,85,.45);
  --dropdown-bg: rgba(19,19,24,.97);
}

/* ═══ LIGHT THEME (settled gold) ═══ */
html.light {
  --bg: #f8f5ee;
  --surface: rgba(244,240,232,.96);
  --surface-2: #eee9de;
  --border: #d8d0c0;
  --text: #1a1810;
  --text-dim: #4a4438;
  --text-faint: #8a8272;
  --accent: #9a7a3a;
  --accent-dim: #c4a060;
  --danger: #a03828;
  --topbar-bg: rgba(248,245,238,.92);
  --toggle-track: #d8d0c0;
  --toggle-thumb: rgba(154,122,58,.50);
  --dropdown-bg: rgba(248,245,238,.97);
}

/* ═══ RESET ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px);
  transition: background 0.3s, color 0.3s;
}
/* SPA: views handle their own height, body doesn't force extra */
body.body-gate, body.body-content {
  min-height: 0;
}
body > main { flex: 1; }

/* Gate page centering */
body.body-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Content page flow */
body.body-content {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   TOP BAR - shared across all pages
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 44px;
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: none;
  box-shadow: 0 1px 0 0 var(--border);
  transition: background 0.3s, border-color 0.3s, opacity 0.4s;
}

.top-bar-inner {
  width: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Brand */
.brand-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
  margin-right: 12px;
}

.brand-name {
  font-family: var(--brand);
  font-size: 13px;
  letter-spacing: 3px;
  margin-right: -3px;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.brand-sep {
  display: none;
}

.brand-sub {
  font-family: var(--brand);
  font-size: 7.5px;
  letter-spacing: 3px;
  margin-right: -3px;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  line-height: 1;
}

/* Console trigger - subtle >_ next to brand */
.console-trigger {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-faint);
  opacity: .55;
  margin-left: 3px;
  cursor: pointer;
  padding: 4px 6px;
  border: none;
  background: none;
  transition: opacity 0.2s, color 0.2s;
  display: none; /* hidden on public pages */
}

.console-trigger:hover {
  opacity: .9;
  color: var(--accent);
}

/* Show on internal state */
.internal-active .console-trigger { display: inline-block; }

/* Lock icon */
.lock-icon {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  margin-left: 12px;
  opacity: .4;
  transition: color 0.4s, opacity 0.4s;
  flex-shrink: 0;
}

.lock-icon.open {
  color: var(--accent);
  opacity: .85;
}

@keyframes lockPulse {
  0% { opacity: .5; }
  50% { opacity: 1; }
  100% { opacity: .5; }
}

.lock-icon.pulse {
  animation: lockPulse 0.6s ease-out;
}

/* Right controls cluster */
.bar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.bar-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 4px;
}

/* ── Nav links (internal header) ── */
.bar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}

.bar-nav a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  padding: 6px 10px;
  transition: color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.bar-nav a:hover { color: var(--accent); }
.bar-nav a.active {
  color: var(--accent);
  position: relative;
}
.bar-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -12px; left: 0; right: 0;
  height: 2px;
  background: var(--accent-dim);
}
.bar-nav a.coming {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  padding: 4px 0;
}

.theme-toggle-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  min-width: 32px;
  text-align: center;
  transition: color 0.2s;
}

.theme-toggle-label.active { color: var(--text-dim); }

.toggle-track {
  position: relative;
  width: 32px;
  height: 16px;
  background: var(--toggle-track);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: var(--toggle-thumb);
  border-radius: 50%;
  transition: left 0.2s ease, background 0.3s;
}

html.light .toggle-thumb { left: 18px; }

.theme-toggle:hover .toggle-track { border-color: var(--accent-dim); }

/* ═══ LANGUAGE DROPDOWN ═══ */
.lang-dropdown { position: relative; }

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: border-color 0.2s, color 0.2s;
  border-radius: 2px;
}

.lang-trigger:hover {
  border-color: var(--border);
  color: var(--text-dim);
}

.lang-trigger .chevron {
  font-size: 8px;
  color: var(--text-faint);
  margin-left: 2px;
  transition: transform 0.2s;
}

.lang-dropdown.open .chevron { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--dropdown-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 300;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

html.light .lang-menu { box-shadow: 0 8px 24px rgba(0,0,0,.12); }

.lang-dropdown.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
  text-align: left;
}

.lang-option:hover {
  background: rgba(212,168,85,.06);
  color: var(--accent);
}

.lang-option.selected { color: var(--accent); }

.lang-option .lang-code {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 22px;
  color: var(--text-faint);
}

.lang-option.selected .lang-code { color: var(--accent); }

.lang-option .lang-name { flex: 1; font-size: 10px; }

.lang-option .check {
  font-size: 10px;
  color: var(--accent);
  opacity: 0;
}

.lang-option.selected .check { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   GATE PANEL
   ═══════════════════════════════════════════════════════════════ */
.gate {
  text-align: center;
  width: 320px;
  padding: 32px 34px 32px;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 0 0 1px #12100e, 0 2px 12px rgba(0,0,0,.10);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.4s;
}

html.light .gate {
  box-shadow: 0 0 0 1px rgba(154,122,58,.12), 0 2px 14px rgba(0,0,0,.03);
}

.gate-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(212,168,85,.10);
}

html.light .gate-label {
  border-bottom-color: rgba(154,122,58,.12);
}

/* Input + button frames */
.gate-input-wrap {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 22px 0 0;
  transition: background 0.3s, border-color 0.3s;
}

.gate-btn-wrap {
  margin: 0 auto;
  width: 60%;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.gate-input-wrap:hover,
.gate-input-wrap:focus-within {
  background: rgba(212,168,85,.22);
}

html.light .gate-input-wrap:hover,
html.light .gate-input-wrap:focus-within {
  background: rgba(154,122,58,.18);
}

.gate-input {
  background: var(--bg);
  border: none;
  color: var(--text);
  padding: 12px 14px 12px 18px;
  font-family: var(--mono);
  font-size: 13px;
  width: 100%;
  border-radius: 2px;
  outline: none;
  text-align: left;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  caret-color: transparent;
  transition: background 0.3s, color 0.3s;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
}

.gate-input::placeholder {
  color: var(--text-faint);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
  transition: opacity 0.2s;
  opacity: .35;
}

.gate-input:focus::placeholder { opacity: 0; }

/* Custom underscore cursor */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.gate-cursor {
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  display: none;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  opacity: .7;
  pointer-events: none;
  z-index: 2;
  animation: cursorBlink 1s step-end infinite;
}

/* Submit button */
.gate-btn {
  background: var(--surface-2);
  border: none;
  color: var(--accent-dim);
  padding: 9px 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  width: 100%;
  transition: color 0.3s, background 0.3s;
  position: relative;
  z-index: 1;
}

html.light .gate-btn { background: var(--surface-2); }

.gate-btn-wrap:hover {
  background: rgba(212,168,85,.22);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

html.light .gate-btn-wrap:hover {
  background: rgba(154,122,58,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.gate-btn-wrap:hover .gate-btn {
  background: #12100e;
  color: var(--accent);
}

html.light .gate-btn-wrap:hover .gate-btn {
  background: #ece4d4;
  color: var(--accent);
}

/* Gold sweep on submit */
.gate-btn-wrap::after {
  content: '';
  position: absolute;
  top: -40%; left: 0;
  width: 30%; height: 180%;
  background: linear-gradient(75deg,
    transparent 0%, rgba(212,168,85,.25) 30%,
    rgba(212,168,85,.50) 50%, rgba(212,168,85,.25) 70%,
    transparent 100%);
  transform: translateX(-120%) skewX(15deg);
  pointer-events: none;
  z-index: 0;
  transition: none;
}

html.light .gate-btn-wrap::after {
  background: linear-gradient(75deg,
    transparent 0%, rgba(154,122,58,.20) 30%,
    rgba(154,122,58,.40) 50%, rgba(154,122,58,.20) 70%,
    transparent 100%);
}

.gate-btn-wrap:hover::after {
  transform: translateX(420%) skewX(15deg);
  transition: transform 1.4s ease-in-out;
}

/* Consent checkbox */
.gate-consent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 16px;
}

.gate-consent input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px; min-width: 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
  position: relative;
}

.gate-consent input[type="checkbox"]:hover {
  border-color: rgba(212,168,85,.22);
}

html.light .gate-consent input[type="checkbox"] { border-color: #b8a888; }
html.light .gate-consent input[type="checkbox"]:hover { border-color: rgba(154,122,58,.35); }

.gate-consent input[type="checkbox"]:checked {
  border-color: rgba(212,168,85,.30);
  background: transparent;
}

html.light .gate-consent input[type="checkbox"]:checked {
  border-color: rgba(154,122,58,.5);
  background: rgba(154,122,58,.06);
}

.gate-consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 4px;
  width: 4px; height: 7px;
  border: solid rgba(212,168,85,.50);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
html.light .gate-consent input[type="checkbox"]:checked::after {
  border-color: rgba(154,122,58,.85);
}

.gate-consent-text {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.3px;
  color: var(--text-faint);
  line-height: 1.5;
  white-space: nowrap;
}

.gate-consent-text a {
  color: var(--accent-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent-dim);
  transition: color 0.2s;
}

.gate-consent-text a:hover { color: var(--accent); }

/* Error / status messages */
.gate-err {
  color: var(--danger);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  position: absolute;
  top: 68px; left: 0; right: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s;
  z-index: 3;
}

.gate-err.visible { opacity: 1; }

.gate-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 1px;
  position: absolute;
  top: 68px; left: 0; right: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.8s;
  z-index: 3;
}

.gate-status.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   VIEW STATES - gate vs internal
   ═══════════════════════════════════════════════════════════════ */
.view-gate {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh / var(--zoom, 1) - 44px);
  transition: opacity 0.4s ease;
  position: relative;
  z-index: 1;
}

.view-internal {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 44px);
  transition: opacity 0.4s ease;
  position: relative;
  z-index: 1;
}

.view-gate > .site-footer,
.view-gate > footer { align-self: stretch; width: 100%; }

.view-gate.hidden,
.view-internal.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LANDING GRID - entry points after login
   ═══════════════════════════════════════════════════════════════ */
.landing {
  max-width: 840px;
  margin: 0 auto;
  padding: 64px 32px 40px;
}

.landing-mission h1 {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 400;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 8px;
}

.landing-mission h1 .gold {
  color: var(--accent);
  font-style: normal;
}

.landing-mission p {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-faint);
}

/* ═══ LANDING CARD HIERARCHY ═══ */

.landing-primary .landing-card {
  padding: 28px 24px;
}
.landing-primary .landing-card.primary {
  border-color: var(--accent-dim);
  position: relative;
  background: rgba(212,168,85,.02);
}
html.light .landing-primary .landing-card.primary {
  background: rgba(154,122,58,.03);
}
.landing-primary .landing-card.primary:hover {
  border-color: var(--accent);
  background: rgba(212,168,85,.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
html.light .landing-primary .landing-card.primary:hover {
  background: rgba(154,122,58,.06);
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
}

.landing-primary .landing-card.primary:hover .landing-card-plus {
  opacity: 1;
}

.landing-card.small {
  padding: 16px 14px;
}
.landing-card.small .landing-card-title {
  font-size: 10px;
}
.landing-card.small .landing-card-desc {
  font-size: 10px;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .landing-primary { grid-template-columns: 1fr; }
  .landing-secondary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .landing-secondary { grid-template-columns: 1fr; }
}

.landing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.25s ease;
  border-radius: 4px;
  padding: 24px 22px;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-card:hover {
  border-color: rgba(212,168,85,.18);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

html.light .landing-card:hover {
  border-color: rgba(154,122,58,.18);
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}

.landing-card.coming {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.landing-card-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.landing-primary .landing-card-title {
  font-size: 13px;
  letter-spacing: 2.5px;
}

.landing-card.coming .landing-card-title {
  color: var(--text-faint);
}

.landing-card-desc {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
.landing-primary .landing-card-desc {
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT AREA - for decrypted pages
   ═══════════════════════════════════════════════════════════════ */
#content {
  flex: 1;
  transition: opacity 0.4s ease;
}

#content.loading {
  opacity: 0;
}

/* Loading dots */

@keyframes dotPulse {
  0%, 100% { opacity: .2; }
  50% { opacity: .8; }
}

.load-dot:nth-child(2) { animation-delay: 0.2s; }
.load-dot:nth-child(3) { animation-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════════
   MINI CONSOLE
   ═══════════════════════════════════════════════════════════════ */
.console {
  position: fixed;
  top: 44px; left: 0; right: 0;
  height: 0;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 190;
  transition: height 0.2s ease;
}

.console.open { height: 32px; }

.console-inner {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 28px;
  gap: 8px;
}

.console-prompt {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent-dim);
  flex-shrink: 0;
}

.console-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  letter-spacing: 0.5px;
  caret-color: var(--accent);
}

.console-caret {
  display: none;
}
@keyframes blink-us { 0%,100%{opacity:1} 50%{opacity:0} }

.console-input::placeholder {
  color: var(--text-dim);
  opacity: .8;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT PAGES - legal, about, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ GLOBAL CONTENT CLASSES (for encrypted fragments in #content) ═══ */
.content-back {
  position: sticky;
  top: 44px;
  z-index: 50;
  background: var(--bg);
  padding: 8px 0 12px;
  margin-bottom: 20px;
}
.content-back a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-faint);
  text-decoration: none;
}
.content-back a:hover { color: var(--accent); }

.content-header { margin-bottom: 32px; }

.content-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 4px;
}
.content-title {
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}
.content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 32px 40px;
  font-size: 13px;
  flex: 1;
  line-height: 1.7;
}

.content-page h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin: 32px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.content-page a {
  color: var(--accent-dim);
  text-decoration: none;
}
.content-page a:hover {
  color: var(--accent);
}
.content-page .back-link {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  margin-bottom: 40px;
  transition: color 0.2s;
}

.content-page .back-link:hover { color: var(--accent); }

.content-page .page-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 4px;
}
.content-page .page-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 400;
  margin-bottom: 8px;
  line-height: 1.25;
}

.content-page .legal-ref {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 32px;
}

.content-page .addr-card {
  background: var(--surface);
  border-left: 2px solid var(--accent);
  margin: 20px 0;
  padding: 16px 20px;
  transition: background 0.3s;
}

.content-page .addr-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.content-page .addr-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.content-page .addr-text a { color: var(--accent); text-decoration: none; }
.content-page .addr-text a:hover { border-bottom: 1px solid var(--accent); }

.content-page p { margin-bottom: 16px; color: var(--text-dim); }
.content-page p a { color: var(--accent); text-decoration: none; }
.content-page p a:hover { border-bottom: 1px solid var(--accent); }

.content-page .legal-enum {
  padding-left: 24px;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.8;
}

/* Language visibility */
[data-lang-de], [data-lang-en] { display: none; }
html[lang="de"] [data-lang-de] { display: block; }
html[lang="en"] [data-lang-en] { display: block; }
html[lang="de"] span[data-lang-de] { display: inline; }
html[lang="en"] span[data-lang-en] { display: inline; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER - shared across all pages
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: auto;
  position: relative;
  z-index: 10;
}

.site-footer::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 680px;
  height: 0;
  border-top: 1px solid rgba(42,42,53,.45);
  margin-bottom: 12px;
}
html.light .site-footer::before { border-top-color: var(--border); }

.footer-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-style: italic;
  color: var(--text-dim);
  transition: color 0.3s;
  line-height: 1;
  margin-bottom: 10px;
}

.gold { color: var(--accent); }
.footer-title .gold { color: var(--accent); font-style: normal; }

.footer-links {
  display: flex;
  gap: 6px;
  align-items: center;
}

.footer-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--accent); }

.footer-links .sep {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 10px;
  opacity: .4;
}

/* Content page footer (inline, not fixed) */

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ═══ LANDING STORY ═══ */
.story-hero {
  text-align: center;
  padding: 0 0 40px;
}
.story-hero h1 {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
}
.story-hero h1 .gold {
  color: var(--accent);
  font-style: normal;
}
.story-hero .story-brand {
  font-family: var(--mono);
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 300;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  padding-left: 6px;
}



.story-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 0;
  opacity: .6;
}

/* ═══ JOURNEY SLIDESHOW ═══ */
.landing-divider {
  width: 48px;
  height: 1px;
  background: var(--border);
  margin: 56px auto 0;
  opacity: .5;
}
.story-journey {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 32px 28px 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.journey-slides {
  position: relative;
  min-height: 180px;
  display: grid;
  align-items: center;
}
.journey-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s 0.35s;
}
.journey-slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}
.journey-slide h2 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
  line-height: 1.3;
  text-align: center;
}
.journey-slide p {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.story-point {
  color: var(--text-dim) !important;
  font-style: italic;
  font-size: 12px;
}
.journey-slide.intro .intro-hook {
  font-family: var(--serif);
  font-size: clamp(15px, 2vw, 18px);
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.6;
  text-align: center;
  max-width: 460px;
  margin: 0 auto 14px;
}
.journey-slide.intro .intro-lede {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.55;
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.journey-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.journey-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 16px;
  line-height: 1;
  color: var(--accent-dim);
  background: transparent;
  border: 1px solid rgba(212, 168, 85, .16);
  border-radius: 4px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  padding: 0;
}
.journey-nav .journey-arrow:first-child { left: -52px; }
.journey-nav .journey-arrow:last-child { right: -52px; }
.journey-arrow:hover {
  color: var(--accent);
  background: rgba(212, 168, 85, .08);
  border-color: var(--accent-dim);
}
.journey-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.journey-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  cursor: pointer;
  transition: background 0.2s;
}
.journey-dot.sm {
  width: 5px;
  height: 5px;
}
.journey-dot.active {
  background: var(--accent);
}
@media (max-width: 640px) {
  .journey-arrow { position: static; transform: none; }
  .journey-nav .journey-arrow:first-child,
  .journey-nav .journey-arrow:last-child { left: auto; right: auto; }
}


@media (max-width: 580px) {
  .story-hero h1 { font-size: 18px; }
    }

/* ═══ CONTENT PAGE STANDARD ═══ */

/* ═══ PUBLIC TEASE ═══ */
.gate-tease {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 0 24px 0;
}

.tease-hook {
  font-family: var(--serif);
  font-size: clamp(14px, 1.8vw, 17px);
  font-style: italic;
  font-weight: 300;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.tease-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.tease-block {
  padding-left: 16px;
  border-left: 1px solid var(--accent-dim);
  opacity: .85;
}

.tease-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 6px;
}

.tease-block p {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.tease-vision {
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 300;
  color: var(--text-faint);
  line-height: 1.5;
  max-width: 680px;
  margin: 8px auto 0;
}

.tease-line {
  width: 100%;
  max-width: 680px;
  height: 1px;
  background: var(--border);
  margin: 12px auto 0;
}

.tease-key-request {
  text-align: center;
  padding-top: 5px;
  max-width: 320px;
  margin: 0 auto;
}

.tease-request-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-dim);
  text-decoration: none;
  border: none;
  padding: 10px 24px;
  border-radius: 3px;
  display: inline-block;
  transition: all 0.2s;
}
.tease-request-link:hover {
  color: var(--accent);
}

@media (max-width: 420px) {
  .gate-tease { padding: 0 16px 40px; margin-top: 32px; }
  .tease-hook { font-size: 14px; }
}

/* ═══ MOBILE GATE FIX ═══ */
.body-gate .view-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 6vh;
}
@media (max-width: 580px) {
  .body-gate .top-bar .brand-sub {
    display: inline;
  }
}
/* ═══ MOBILE: Gate restricted to workstations ═══ */
.gate-mobile-notice {
  display: none;
  text-align: center;
  padding: 20px 24px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.gate-mobile-notice a {
  color: var(--accent-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(212,168,85,.2);
}
.gate-mobile-notice a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 580px) {
  .gate-desktop-only { display: none !important; }
  .gate-mobile-notice { display: block; }
}

/* ═══ ERROR / NOT FOUND STATE ═══ */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 44px);
  padding: 0 32px;
  text-align: center;
}
.error-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.error-cat {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  opacity: .65;
  margin-bottom: 28px;
}
.error-title {
  font-family: var(--serif);
  font-size: clamp(16px, 2.5vw, 21px);
  font-weight: 400;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.6;
  max-width: 380px;
  letter-spacing: 0.2px;
}
.error-back {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-dim);
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: all 0.2s;
  margin-top: 32px;
}
.error-back:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  background: rgba(212,168,85,.04);
}
html.light .error-back:hover {
  background: rgba(154,122,58,.06);
}

/* ═══ LOGOUT MODAL ═══ */
.logout-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.logout-overlay.open { display: flex; }

html.light .logout-overlay { background: rgba(0,0,0,.4); }

.logout-panel {
  width: 280px;
  padding: 28px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 8px 32px rgba(0,0,0,.5);
  text-align: center;
}
html.light .logout-panel {
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.15);
}

.logout-q {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.4;
}

.logout-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.logout-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 24px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-dim);
}

.logout-btn:hover {
  border-color: var(--accent-dim);
  color: var(--text);
}

.logout-btn.yes {
  color: var(--accent-dim);
  border-color: var(--accent-dim);
}

.logout-btn.yes:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(212,168,85,.06);
}

html.light .logout-btn.yes:hover {
  background: rgba(154,122,58,.08);
}

/* ═══ ACCESSIBILITY ═══ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--accent);
  color: #0a0a0c;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ═══ FOCUS INDICATORS ═══ */
.bar-nav a:focus-visible,
.footer-links a:focus-visible,
.back-link:focus-visible,
.contact-card a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.lang-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gate-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.lock-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══ GEAR SETTINGS ═══ */
.gear-trigger {
  font-size: 12px;
  color: var(--text-faint);
  opacity: .45;
  margin-left: 2px;
  cursor: pointer;
  padding: 2px 4px;
  border: none;
  background: none;
  transition: opacity 0.2s, color 0.2s;
  display: none;
}
.gear-trigger:hover { opacity: .9; color: var(--accent); }
.internal-active .gear-trigger { display: inline-block; }

.gear-overlay {
  position: fixed;
  top: 48px;
  left: 28px;
  z-index: 500;
  transform-origin: top left;
  animation: gearOpen 0.15s ease-out;
}
@keyframes gearOpen {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.gear-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 320px;
  max-width: 90vw;
  padding: 20px 24px;
}
.gear-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.gear-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-dim);
}
.gear-close {
  font-size: 18px;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.gear-close:hover { color: var(--accent); }
.gear-rows { display: flex; flex-direction: column; gap: 10px; }
.gear-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gear-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.gear-value {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
}
.gear-btn {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--accent-dim);
  background: none;
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.gear-btn:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ═══ DESKTOP GATE LAYOUT ═══ */
@media (min-width: 840px) {
  .body-gate .view-gate {
    padding-top: 8vh;
    align-items: center;
  }
  .gate-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    column-gap: 32px;
    row-gap: 0;
    max-width: 740px;
    width: 100%;
    align-items: center;
  }
  .gate-row .gate {
    width: 100%;
    margin: 0;
  }
  .gate-row .gate-tease {
    margin: 0;
    padding: 0;
    max-width: none;
  }
  .gate-row .tease-blocks {
    gap: 16px;
  }
  .gate-row .tease-line {
    grid-column: 1 / -1;
  }
  .gate-row .tease-vision {
    grid-column: 1 / -1;
  }
  .gate-row .tease-key-request {
    grid-column: 1 / -1;
  }
}
@media (max-width: 839px) {
  .gate-row { display: contents; }
}

/* ═══ LANDING GRID + CARD HIERARCHY ═══ */
.landing-primary {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
.landing-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.landing-card-plus {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 300;
  color: var(--accent);
  opacity: .4;
  transition: opacity 0.2s;
}

/* ═══ GLOBAL CONTENT CLASSES (encrypted fragments in #content) ═══ */

/* ═══ RESPONSIVE ═══ */
@media (max-width: 720px) {
  .landing-primary { grid-template-columns: 1fr; }
  .landing-secondary { grid-template-columns: repeat(2, 1fr); }
  .landing-card.small { padding: 16px 14px; }
  .landing-card.small .landing-card-title { font-size: 10px; }
  .landing-card.small .landing-card-desc { font-size: 10px; line-height: 1.4; }
  .bar-nav a { font-size: 9px; padding: 6px 4px; }
  .gate { width: calc(100% - 48px); min-width: 260px; max-width: 320px; padding: 30px 24px 24px; }
  .site-footer { padding: 0 16px 12px; gap: 5px; }
  .site-footer::before { margin-bottom: 8px; }
  .footer-title { font-size: 16px; }
  .footer-links a { font-size: 9px; }
  .landing { padding: 52px 24px 40px; }
}

@media (max-width: 420px) {
  .landing-secondary { grid-template-columns: 1fr; }
  .content-page { padding: 60px 16px 48px; }
  .content-page .addr-card { padding: 22px 20px; }
  .console-inner { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ── Taxonomy overview (manifest appendix) ── */
.tax-overview { margin: 24px 0; }
.tax-section { border-left: 2px solid var(--border); padding: 8px 0 8px 16px; margin-bottom: 12px; }
.tax-section:hover { border-left-color: var(--accent-dim); }
.tax-head { font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); cursor: pointer; margin-bottom: 4px; }
.tax-head:hover { color: var(--accent-dim); }
.tax-desc { font-family: var(--serif); font-size: 13px; color: var(--text-dim); font-style: italic; margin-bottom: 4px; }
.tax-items { font-family: var(--serif); font-size: 12px; color: var(--text-dim); letter-spacing: 0.3px; line-height: 1.7; }
.tax-sub { font-family: var(--serif); font-size: 11px; color: var(--text-faint); padding-left: 12px; margin-top: 2px; letter-spacing: 0.3px; }

/* 2026-06-17: Instrumenta Digitalia inline link in the intro lede.
   Renders identically to the former .gold span (no underline, accent colour),
   only adds pointer affordance. */
.intro-lede a.gold { color: var(--accent); text-decoration: none; cursor: pointer; }

@media print {
  .top-bar, .site-footer, .console { display: none; }
  body { background: #fff; color: #111; }
  .content-page .addr-card { background: #f5f5f5; border-left-color: #333; }
  .content-page p, .content-page .addr-text, .content-page .legal-enum { color: #333; }
  .content-page h3 { color: #111; }
  .content-page .back-link { display: none; }
}

/* ═══ NUCLEUS JOURNEY SEPARATOR ═══ */
.journey-dot-sep {
  width: 1px;
  height: 10px;
  background: var(--text-faint);
  margin: 0 6px;
  align-self: center;
}

/* ═══ MOBILE: Content fragments ═══ */
@media (max-width: 580px) {
  .cf-page { padding: 32px 18px 40px; }
  .cf-page pre { font-size: 10px; padding: 12px 14px; }
  .cf-page h2 { font-size: 10px; }
  .corpus-index { padding: 32px 18px 40px; }
  .papers { padding: 32px 18px 60px; }
  .paper-entry { padding: 8px 0 8px 10px; }
  .sub-menu { padding: 0 12px; }
  .site-footer::before { max-width: 90vw; }
}

/* ═══ ACCESSIBILITY: Global focus ═══ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 2px;
}

/* ── Zoom control ── */
.zoom-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text-faint); transition: color 0.2s; line-height: 0;
}
.zoom-btn:hover { color: var(--accent); }
.zoom-btn svg { display: block; }

/* ── Brand inline tag ── */
.brand-tag {
  font-family: var(--brand);
  color: var(--accent);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85em;
}

/* Glossary tooltips (Latin termini) */
.gloss { border-bottom: 1px dotted var(--accent-dim); cursor: help; position: relative; }
.gloss:hover, .gloss:focus { color: var(--accent); outline: none; }
.gloss .gloss-pop { display: none; position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 3px 14px rgba(0,0,0,.5); color: var(--text); font-family: var(--serif); font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; white-space: normal; z-index: 200; border-radius: 2px; pointer-events: none; }
.gloss:hover .gloss-pop, .gloss:focus .gloss-pop { display: block; }
@media (max-width: 640px) { .gloss .gloss-pop { max-width: 220px; } }