/* Shared chrome for case studies, About, and CV. Landing and projects use site.css. */

:root {
  --bg: #141413;
  --bg-2: #1a1918;
  --bg-3: #262624;
  --surface: #1c1c1a;
  --ink: #faf9f5;
  --muted: #b0aea5;
  --fg: #faf9f5;
  --fg-2: #b0aea5;
  --fg-3: #87867f;
  --line: #3d3d3a;
  --line-soft: #262624;
  --teal: #7090b5;
  --teal-soft: #243040;
  --teal-dark: #c5d4e4;
  --clay: #7090b5;
  --cactus: #bcd1ca;
  --heather: #cbcadb;
  --peach: #7090b5;
  --nav: rgba(20, 20, 19, 0.92);
  --nav-line: rgba(250, 249, 245, 0.08);
  --btn-bg: #faf9f5;
  --btn-fg: #141413;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-h: 64px;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #faf9f5;
  --bg-2: #ffffff;
  --bg-3: #f0eee6;
  --surface: #ffffff;
  --ink: #141413;
  --muted: #5e5d59;
  --fg: #141413;
  --fg-2: #5e5d59;
  --fg-3: #73726c;
  --line: #d1cfc5;
  --line-soft: #e8e6dc;
  --teal: #49698d;
  --teal-soft: #e6eef6;
  --teal-dark: #3e5a78;
  --clay: #49698d;
  --peach: #7090b5;
  --nav: rgba(250, 249, 245, 0.92);
  --nav-line: rgba(20, 20, 19, 0.08);
  --btn-bg: #141413;
  --btn-fg: #faf9f5;
  --shadow: 0 16px 40px rgba(20, 20, 19, 0.08);
  color-scheme: light;
}

body.has-nav {
  padding-top: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 42% at 50% -12%, color-mix(in srgb, var(--peach) 14%, transparent), transparent 58%),
    radial-gradient(ellipse 42% 36% at 100% 100%, color-mix(in srgb, var(--cactus) 10%, transparent), transparent 62%);
  color: var(--ink);
  font-family: var(--sans);
}

body.has-nav::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 180px 180px;
}

body.has-nav h1,
body.has-nav h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

body.has-nav h1 { max-width: 18em; }

body.has-nav .hero {
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, color-mix(in srgb, var(--peach) 16%, transparent), transparent 60%),
    var(--bg);
}

body.has-nav .eyebrow,
body.has-nav .section-label {
  color: var(--teal);
  text-shadow:
    0 0 1px rgba(250, 249, 245, 0.85),
    0 0 3px rgba(250, 249, 245, 0.35);
}

html[data-theme="light"] body.has-nav .eyebrow,
html[data-theme="light"] body.has-nav .section-label {
  text-shadow:
    0 0 1px rgba(20, 20, 19, 0.5),
    0 0 3px rgba(20, 20, 19, 0.16);
}

body.has-nav .callout {
  background: color-mix(in srgb, var(--teal) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--teal) 32%, var(--line));
}

body.has-nav .callout p {
  color: var(--ink);
}

body.has-nav .lead,
body.has-nav .prose,
body.has-nav .section-intro,
body.has-nav .strength-card p,
body.has-nav .meta-grid dt { color: var(--muted); }

body.has-nav a { color: inherit; }
body.has-nav a:hover { color: var(--clay); }

/* Case studies stay on the blue, a few steps darker so labels and links sit quieter. */
body:has(.project-switch) {
  --teal: #4a6582;
  --teal-soft: #1c2833;
  --teal-dark: #8aa0b5;
  --clay: #4a6582;
  --peach: #4a6582;
}

html[data-theme="light"] body:has(.project-switch) {
  --teal: #2a4460;
  --teal-soft: #e4ebf2;
  --teal-dark: #1e3348;
  --clay: #2a4460;
  --peach: #4a6582;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

.nav {
  position: relative;
  top: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: var(--nav);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-line);
}

.nav-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.nav-brand-mark {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.nav-brand:hover { color: var(--ink); text-decoration: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  color: var(--fg-2);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--fg);
  text-decoration: none;
  background: none;
}

.nav-links a.btn,
.nav-links a.btn:hover,
.nav-links a.btn:focus-visible {
  color: var(--btn-fg);
  text-decoration: none;
}

body.has-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  box-shadow: none;
}

body.has-nav .btn:hover {
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  box-shadow: 0 0 0 2px var(--btn-bg);
}

body.has-nav .btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line);
}

body.has-nav .btn-ghost:hover {
  background: transparent;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--line);
}

.theme-toggle {
  --ink: #6b6b68;
  --paper: #f3f2ee;
  --pad: 3px;
  --knob: 26px;
  --sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b68' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3.15'/%3E%3Cpath d='M12 3.4v2.15M12 18.45v2.15M3.4 12h2.15M18.45 12h2.15M6.05 6.05l1.5 1.5M16.45 16.45l1.5 1.5M17.95 6.05l-1.5 1.5M7.55 16.45l-1.5 1.5'/%3E%3C/svg%3E");
  --moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3f2ee' d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  position: relative;
  width: 58px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(58, 58, 56, 0.2);
  cursor: pointer;
  flex: none;
  outline: none;
  appearance: none;
  line-height: 0;
}

.theme-knob {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background-color: var(--ink);
  background-image: var(--moon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transform: translateX(26px);
  transition: transform 200ms ease;
}

html[data-theme="light"] .theme-toggle { background: var(--ink); }
html[data-theme="light"] .theme-knob {
  transform: translateX(0);
  background-color: var(--paper);
  background-image: var(--sun);
}

.theme-toggle:focus,
.theme-toggle:focus-visible,
.theme-toggle:active { outline: none; }

.project-switch {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
  background: transparent;
  pointer-events: none;
  overflow: visible;
}

.project-switch .portfolio-project-nav {
  position: absolute;
  top: 14px;
  transform: none;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(280px, 38vw);
  padding: 7px 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--fg-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(14px);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease,
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.project-switch .portfolio-project-nav.prev { left: 28px; }
.project-switch .portfolio-project-nav.next { right: 28px; }

.project-switch .portfolio-project-nav:hover {
  color: var(--fg);
  background: var(--bg-3);
  border-color: var(--line);
  text-decoration: none;
}

.project-switch .portfolio-project-nav-icon { color: inherit; }

.project-switch .portfolio-project-nav.is-scroll-hidden {
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
}

html[data-theme="dark"] .tag {
  background: var(--bg-3);
  color: var(--fg-2);
  border-color: var(--line);
}

.about-venn__circle--researcher {
  fill: rgba(62, 88, 116, 0.22);
  stroke: #8eabc6;
}
.about-venn__circle--designer {
  fill: rgba(112, 144, 181, 0.24);
  stroke: #7090b5;
}
.about-venn__circle--founder {
  fill: rgba(73, 105, 141, 0.28);
  stroke: #49698d;
}
.about-venn__label--researcher,
.about-venn__label--designer,
.about-venn__label--founder,
.about-venn__center { fill: var(--ink); }
.about-venn__center {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .nav {
    height: auto;
    min-height: var(--nav-h);
    padding: 10px 14px;
    gap: 10px;
  }
  .nav-brand { font-size: 17px; }
  .nav-links { gap: 12px; }
  .nav-links a:not(.btn) { font-size: 13px; }
  .nav .btn { height: 32px; padding: 0 12px; font-size: 13px; }
  .project-switch .portfolio-project-nav { max-width: 42vw; font-size: 12px; }
  .project-switch .portfolio-project-nav.prev { left: 14px; }
  .project-switch .portfolio-project-nav.next { right: 14px; }
  .project-switch .portfolio-project-nav-text { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-knob { transition: none; }
}