/* ============================================================
   Nietzsche — static site
   Global design system (extracted from the UI components)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --bg:        #0C0B0F;
  --bg-2:      #0A090C;
  --ink:       #ECE6D8;
  --red:       #E24B2C;
  --gold:      #D9B24C;
  --muted:     #C9C4B8;
  --muted-2:   #9A968E;
  --muted-3:   #77736B;
  --muted-4:   #5C594F;
  --line:      rgba(236,230,216,0.10);
  --line-2:    rgba(236,230,216,0.14);
  --serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:      'Manrope', system-ui, sans-serif;
  --mono:      'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--gold); }
::selection { background: var(--red); color: var(--bg); }
button { font-family: var(--sans); }
img { max-width: 100%; }

/* Shared keyframes */
@keyframes revealDetail { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob         { 0%,100% { transform: translateY(0); opacity:.5 } 50% { transform: translateY(8px); opacity:1 } }
@keyframes faceTurn    { 0%,100% { transform: rotateY(-15deg); } 50% { transform: rotateY(15deg); } }
@keyframes faceGlow    { 0%,100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes spin        { to { transform: rotate(360deg); } }

/* ---- Navigation (rendered by nietzsche.js) ---- */
.nm-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(20px,5vw,64px);
  backdrop-filter: blur(14px);
  background: rgba(12,11,15,0.72);
  border-bottom: 1px solid var(--line);
}
.nm-nav__brand { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: .5px; }
.nm-nav__brand span { color: var(--red); }
.nm-nav__links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: clamp(10px,1.6vw,20px);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.nm-nav__links a { color: var(--muted-2); transition: color .15s; }
.nm-nav__links a:hover { color: var(--gold); }
.nm-nav__links a.is-active { color: var(--ink); border-bottom: 1px solid var(--red); padding-bottom: 2px; }
.nm-nav__search { display:inline-flex; align-items:center; gap:6px; }
.nm-nav__search kbd {
  display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 4px;
  border:1px solid rgba(236,230,216,.22); border-radius:4px;
  color:var(--muted-3); font-family:var(--mono); font-size:10px; line-height:1;
  box-shadow:0 1px 0 rgba(236,230,216,.08);
}
.nm-nav__search:hover kbd, .nm-nav__search.is-active kbd { border-color:var(--gold); color:var(--gold); }
.nm-nav :where(a,button):focus-visible { outline:2px solid #f3c969; outline-offset:3px; }
.nm-lang { display: inline-flex; border: 1px solid rgba(236,230,216,0.2); border-radius: 40px; overflow: hidden; margin-left: 4px; }
.nm-lang button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  padding: 5px 10px; border: none; cursor: pointer; background: transparent; color: var(--muted-2);
}
.nm-lang button.is-active { background: var(--red); color: var(--bg); }

/* Published language editions in the works catalogue. */
.work-title-line { display:flex; align-items:center; gap:9px 12px; flex-wrap:wrap; }
.work-edition-flags { display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; }
.work-edition-flag {
  box-sizing:content-box; display:inline-block; flex:0 0 18px; width:18px; min-width:18px; max-width:18px;
  height:12px; min-height:12px; max-height:12px; overflow:hidden;
  border:1px solid rgba(236,230,216,.2); border-radius:2px;
  background:#16151a; box-shadow:0 2px 5px rgba(0,0,0,.35);
  opacity:.78; transition:opacity .15s ease, transform .15s ease, border-color .15s ease;
}
.work-edition-flag svg { display:block; width:18px; min-width:18px; max-width:18px; height:12px; min-height:12px; max-height:12px; }
a:hover .work-edition-flag { border-color:rgba(217,178,76,.5); opacity:1; transform:translateY(-1px); }

@media (max-width: 72rem) {
  .nm-nav__search kbd { display:none; }
}

@media (max-width: 46rem) {
  .nm-nav { align-items:flex-start; }
  .nm-nav__brand { padding-top:2px; }
  .nm-nav__links { gap:9px 12px; font-size:10px; }
}

/* Utility so JS-driven regions don't flash unstyled */
.nm-root { background: var(--bg); }