/* =============================================================
 * Refined Classic — visual overrides on top of Hugo Blox Tailwind
 * Loaded from layouts/partials/hooks/head-end/fonts.html
 * ============================================================= */

:root {
  --refined-font-body: 'Source Sans 3', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --refined-font-heading: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --refined-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --refined-rule: #b79c5d;       /* burnished sand */
  --refined-rule-soft: #d9c79a;
  --refined-muted: #4a5568;
  --refined-canvas: #fcfbf7;
  --refined-canvas-alt: #f4f1e9;
  --refined-ink: #1a202c;
  --refined-accent: #1f3b5f;     /* deep slate-blue */
}

/* ---------- Typography ---------- */
html, body {
  font-family: var(--refined-font-body);
  font-feature-settings: "kern", "liga", "calt";
  letter-spacing: 0.005em;
  color: var(--refined-ink);
  background: var(--refined-canvas);
}

h1, h2, h3, h4, h5, h6,
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--refined-font-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--refined-ink);
}

code, kbd, pre, samp, .font-mono {
  font-family: var(--refined-font-mono);
}

.prose {
  line-height: 1.75;
}

/* ---------- Section headings ---------- */
section h1.text-3xl,
section h2.text-3xl,
.text-3xl.font-bold,
.text-3xl.font-extrabold {
  position: relative;
  padding-bottom: 0.55rem;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
section h1.text-3xl::after,
section h2.text-3xl::after,
.section-heading h1::after,
.section-heading h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--refined-rule);
  margin-top: 0.6rem;
  border-radius: 2px;
}

/* ---------- Hero / avatar ---------- */
.avatar {
  border: 4px solid #ffffff !important;
  box-shadow:
    0 12px 36px rgba(31, 59, 95, 0.18),
    0 2px 8px rgba(31, 59, 95, 0.10);
}

/* Slightly larger headshot on biography blocks */
@media (min-width: 768px) {
  .avatar.rounded-full {
    width: 11rem !important;
    height: 11rem !important;
  }
}

/* ---------- Bio name typography ---------- */
.text-3xl.font-bold.mb-2.mt-6,
.text-4xl.font-bold {
  font-family: var(--refined-font-heading) !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* ---------- Cards (publications, projects) ---------- */
article.bg-white,
article.bg-gray-50,
.card,
.publication-list-item {
  border: 1px solid rgba(31, 59, 95, 0.10);
  border-radius: 10px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
article.bg-white:hover,
.card:hover,
.publication-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 59, 95, 0.10);
  border-color: rgba(31, 59, 95, 0.20);
}

/* ---------- Links ---------- */
a {
  text-decoration-color: rgba(31, 59, 95, 0.30);
  text-underline-offset: 2px;
  transition: color 120ms ease, text-decoration-color 120ms ease;
}
a:hover {
  text-decoration-color: currentColor;
}

/* ---------- Navbar ---------- */
nav.navbar,
header nav {
  border-bottom: 1px solid rgba(31, 59, 95, 0.08);
  backdrop-filter: saturate(160%) blur(10px);
  background: rgba(252, 251, 247, 0.85) !important;
}

/* Brand text in serif */
.navbar a[href="/"],
nav a[href="/"] strong,
nav .navbar-brand {
  font-family: var(--refined-font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ---------- Buttons ---------- */
.btn,
button,
a.btn,
.hb-attachment-link,
a[class*="bg-primary"] {
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

/* Pill-shaped CTA buttons with hover lift */
a[class*="bg-primary-700"]:hover,
a[class*="bg-primary-600"]:hover,
button[class*="bg-primary"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(31, 59, 95, 0.18);
}

/* ---------- Section alternating backgrounds ---------- */
body main > section:nth-of-type(even) {
  background: var(--refined-canvas-alt);
}
body main > section {
  background: var(--refined-canvas);
}

/* ---------- Publication citation list ---------- */
.prose ol > li,
.prose ul > li {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}

/* ---------- Subtle horizontal rule above section bodies ---------- */
section .max-w-screen-xl > h2 + div,
section .max-w-screen-xl > h2 + p + div {
  padding-top: 0.5rem;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid rgba(31, 59, 95, 0.08);
  background: var(--refined-canvas-alt);
  color: var(--refined-muted);
}

/* ---------- Dark mode ---------- */
.dark {
  --refined-canvas: #14181f;
  --refined-canvas-alt: #1a1f27;
  --refined-ink: #e8ecf2;
  --refined-muted: #98a3b3;
  --refined-rule: #8a7546;
  --refined-rule-soft: #5f5132;
}
.dark body { background: var(--refined-canvas); color: var(--refined-ink); }
.dark article.bg-white,
.dark .card { background: #1b2028 !important; border-color: rgba(255, 255, 255, 0.08); }
.dark nav.navbar,
.dark header nav { background: rgba(20, 24, 31, 0.85) !important; border-bottom-color: rgba(255, 255, 255, 0.06); }
.dark footer { background: var(--refined-canvas-alt); }

/* ---------- Lists with subtle markers ---------- */
.interests li::marker,
ul.list-disc li::marker {
  color: var(--refined-rule);
}

/* ---------- Reduce visual noise on small chips/badges ---------- */
.badge, .tag {
  background: var(--refined-canvas-alt);
  color: var(--refined-muted);
  border: 1px solid rgba(31, 59, 95, 0.08);
}