/* Base: design tokens, reset, and the pieces every page shares (nav, logo, buttons, search, pager). */

:root {
  --ink: #0D0D0C;
  --cream: #FBF6EF;
  --card: #FFF8EE;
  --muted: rgba(13, 13, 12, .56);
  --line: rgba(13, 13, 12, .12);
  --s: 1px;                 /* base unit; the home page scales it with the viewport */
  --page-max: 1280px;
}

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

body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--s));
  height: calc(48 * var(--s));
  padding: 0 calc(24 * var(--s));
  border: 1.4px solid currentColor;
  border-radius: calc(7 * var(--s));
  background: transparent;
  font-size: calc(17 * var(--s));
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.btn:hover { background: var(--ink); color: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(80 * var(--s));
  padding: 0 clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--s));
  font-size: calc(17 * var(--s));
}
.nav-links a { display: flex; align-items: center; gap: calc(6 * var(--s)); text-decoration: none; }
.nav-links .btn { gap: 0; }

.logo {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--s));
  font-size: calc(25 * var(--s));
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
}
.logo-name {
  display: inline-block;
  font-family: 'Inter Tight', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Malayalam', 'Noto Sans Gujarati',
    'Noto Sans Bengali', 'Noto Sans Gurmukhi', 'Noto Sans Oriya', 'Noto Sans Kannada', 'Noto Sans Telugu',
    'Noto Nastaliq Urdu', system-ui, sans-serif;
  transition: opacity .35s, transform .35s;
}
.logo-name.is-hidden { opacity: 0; transform: translateY(.25em); }
.logo svg { display: block; flex: none; width: auto; height: 1.3em; }
.logo .tone-a { fill: #0D0D0C; }
.logo .tone-b { fill: #4B4B4B; }
.logo .tone-c { fill: #9A9A9A; }

/* Light-on-dark variant, used whenever the header sits on a photo. */
.on-photo { color: #fff; }
.on-photo .nav { border-bottom-color: rgba(255, 255, 255, .3); }
.on-photo .btn:hover { background: #fff; color: var(--ink); }
.on-photo .logo .tone-a { fill: #fff; }
.on-photo .logo .tone-b { fill: #D2D2D2; }
.on-photo .logo .tone-c { fill: #9C9C9C; }

/* ---------- Search / sort controls ---------- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; }
.controls input,
.controls select {
  height: 46px;
  padding: 0 16px;
  border: 1.4px solid var(--ink);
  border-radius: 7px;
  background: transparent;
  font-size: 15px;
}
.controls input { flex: 1; min-width: 220px; }

/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.pager button {
  min-width: 42px;
  height: 42px;
  border: 1.4px solid var(--ink);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
}
.pager button.is-active,
.pager button:hover:not(:disabled) { background: var(--ink); color: #fff; }
.pager button:disabled { opacity: .3; cursor: default; }

.empty { color: var(--muted); }
[data-text] { white-space: pre-line; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .nav { height: 64px; padding: 0 20px; }
  .logo { font-size: 22px; gap: 8px; }
  .nav-links { gap: 16px; font-size: 15px; }
  .nav-links .btn { height: 40px; padding: 0 14px; font-size: 14px; }
  .hide-mobile { display: none !important; }
  .controls input { flex: 1 1 100%; min-width: 0; }
  .controls select { flex: 1 1 100%; }
  .pager { gap: 6px; }
  .pager button { min-width: 38px; height: 38px; }
}

/* ---------- Shared animation ---------- */
@keyframes drift {
  from { transform: translate(-2.2%, -1.6%) scale(1.08); }
  to   { transform: translate(2.2%, 1.6%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px 32px 56px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 14px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
@media (max-width: 760px) { .site-footer { padding: 32px 20px 40px; } }