/* ────────────────────────────────────────────────────────────
   Navigation — top bar
   ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 350ms var(--ease-soft), backdrop-filter 350ms, box-shadow 350ms;
}
.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.85);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 0 var(--navy-line), 0 8px 24px -16px rgba(20, 24, 32, 0.18);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  border: 0;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.nav__brand small {
  font-family: var(--font-meta);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  font-style: normal;
  margin-top: 2px;
}
.nav__links {
  display: flex;
  gap: var(--s-6);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 0;
  color: var(--ink-soft);
  position: relative;
  padding: var(--s-1) 0;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms var(--ease-emph);
}
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

@media (max-width: 720px) {
  .nav__links { gap: var(--s-4); font-size: 0.85rem; }
  .nav__links a { font-size: 0.85rem; letter-spacing: 0.03em; }
  .nav__right { gap: var(--s-3); }
}

/* ────────────────────────────────────────────────────────────
   Buttons — neumorphic raised → pressed-inset on hover
   ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-meta);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-6);
  border: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: var(--r-pill);
  box-shadow: var(--neu-shadow-raised-sm);
  transition:
    box-shadow 280ms var(--ease-emph),
    color 200ms var(--ease-soft),
    transform 200ms var(--ease-emph);
}
.btn:hover {
  box-shadow: var(--neu-shadow-pressed);
  color: var(--vermilion);
}
.btn:active { transform: translateY(1px); }

.btn--vermilion {
  background: var(--vermilion);
  color: var(--paper-light);
  box-shadow:
       4px  4px 10px rgba(140, 40, 20, 0.25),
      -4px -4px 10px rgba(255, 255, 255, 0.6);
}
.btn--vermilion:hover {
  color: var(--paper-light);
  background: var(--vermilion-warm);
  box-shadow:
      inset 3px  3px 8px rgba(120, 30, 15, 0.4),
      inset -3px -3px 8px rgba(255, 200, 180, 0.25);
}

/* ────────────────────────────────────────────────────────────
   Card — used for books, articles
   ──────────────────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.card__cover {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--paper-deep);
  border-radius: var(--r-md);
  box-shadow: var(--neu-shadow-raised-sm);
  transition: box-shadow 350ms var(--ease-soft), transform 350ms var(--ease-soft);
}
.card:hover .card__cover {
  box-shadow: var(--neu-shadow-hover);
  transform: translateY(-2px);
}
.card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-soft);
}
.card:hover .card__cover img { transform: scale(1.04); }
.card__title {
  font-size: 1.1rem;
  line-height: 1.25;
  margin-top: var(--s-4);
  margin-bottom: var(--s-1);
}
.card__meta {
  font-family: var(--font-meta);
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}