:root,
html[data-bs-theme="dark"] {
  /* Softer gray-based dark theme */
  --brand-bg: #2f3642;           /* lighter slate gray */
  --brand-card: #3a4150;         /* slightly lighter for cards */
  --brand-card-rgb: 58, 65, 80; /* add */
  --brand-accent: #66b2ff;       /* softer blue accent */
  --brand-accent-2: #f4c66a;     /* warm secondary accent */
  --brand-text: #e9ecef;         /* off-white text */
  --brand-muted: #adb5bd;        /* muted text */

  /* Keep bootstrap variables aligned (dark) */
  color-scheme: dark;
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);
  --bs-heading-color: var(--brand-text);
  --bs-secondary-color: rgba(var(--bs-emphasis-color-rgb), 0.85);
  --bs-link-color: var(--brand-accent);
  --bs-link-hover-color: color-mix(in oklab, var(--brand-accent), white 12%);
  /* Critical: keep emphasis light so navbar/link defaults are readable */
  --bs-emphasis-color: var(--brand-text);
  --bs-emphasis-color-rgb: 233,236,239;
  /* Scrim tint used for blurred page background */
  --scrim-tint-rgb: 47,54,66;
}

html[data-bs-theme="light"] {
  --brand-bg: #f5f6fa;         /* was #ffffff */
  --brand-card: #eef1f6;       /* was #f8f9fb */
  --brand-card-rgb: 238, 241, 246; /* add */
  /* Force white text even in light mode */
  --brand-text: #e9ecef;       /* light text */
  --brand-muted: #cbd5e1;
  --brand-accent: #0ea5e9;
  --brand-accent-2: #f59e0b;

  /* Keep bootstrap variables aligned (light) */
  color-scheme: light;
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);         /* white-ish text */
  --bs-heading-color: var(--brand-text);      /* white-ish headings */
  --bs-secondary-color: rgba(233,236,239, .78); /* lighter secondary */
  --bs-link-color: var(--brand-accent);
  --bs-link-hover-color: color-mix(in oklab, var(--brand-accent), black 12%);
  --bs-emphasis-color: var(--brand-text);
  --bs-emphasis-color-rgb: 233,236,239;
  /* Scrim tint is dark in light theme to keep contrast over images */
  --scrim-tint-rgb: 17,24,39;
}

/* Ensure navbar uses our palette regardless of Bootstrap defaults */
.topbar .navbar {
  --bs-navbar-color: color-mix(in oklab, var(--brand-text), transparent 20%);
  --bs-navbar-hover-color: var(--brand-text);
  --bs-navbar-active-color: var(--brand-text);
  --bs-navbar-brand-color: var(--brand-text);
  --bs-navbar-brand-hover-color: var(--brand-text);
  --bs-navbar-toggler-border-color: color-mix(in oklab, var(--brand-text), transparent 70%);
}

/* Visible toggler icons in both themes */
html[data-bs-theme="dark"] .topbar .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(233,236,239,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-bs-theme="light"] .topbar .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(233,236,239,0.92)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Larger touch targets for nav links */
.topbar .navbar .nav-link { padding: .75rem .75rem; }

body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a { color: var(--bs-link-color); }

.navbar-brand {
  font-weight: 700;
  letter-spacing: .5px;
}

.topbar {
  backdrop-filter: saturate(180%) blur(8px);
  background: rgba(47,54,66,0.7); /* fallback instead of color-mix */
  border-bottom: 1px solid rgba(233,236,239,.15);
}

.post-card {
  border-radius: 14px;
  /* was: background: linear-gradient(180deg, rgba(0,0,0,.02), var(--brand-card)); */
  background-color: rgba(var(--brand-card-rgb), 0.5); /* 50% alpha */
  backdrop-filter: blur(4px) saturate(108%);          /* keep the image softly blurred behind */
  -webkit-backdrop-filter: blur(4px) saturate(108%);
  border: 1px solid rgba(233,236,239,.15);
  box-shadow: 0 12px 24px rgba(0,0,0,.18); /* softer shadow */
}

/* Prose styles for markdown content */
.prose {
  --prose-h-color: var(--bs-heading-color);
  --prose-text: var(--bs-body-color);
  --prose-muted: var(--bs-secondary-color);
  --prose-hr: color-mix(in oklab, var(--brand-text), transparent 80%);
  --prose-code-bg: color-mix(in oklab, var(--brand-text), transparent 92%);
  --prose-code: color-mix(in oklab, var(--brand-text), white 5%);
  --prose-quote-border: color-mix(in oklab, var(--brand-accent), transparent 60%);
}
.prose h1,.prose h2,.prose h3{ color: var(--prose-h-color); letter-spacing:.2px }
.prose h1{ font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); margin-bottom:.75rem }
.prose h2{ font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); margin-top:1.25rem; margin-bottom:.5rem }
.prose p{ color: var(--prose-text); line-height:1.7; }
.prose ul{ margin-left:1.1rem; }
.prose li{ margin:.25rem 0; }
.prose hr{ border-color: var(--prose-hr); opacity:1; }
.prose img{ border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.25); display:block; margin: .75rem auto; width: min(100%, 720px); height:auto; }
/* Center captions written as italic-only paragraphs (e.g., *Figure: ...*) */
.prose p:has(> em:only-child){
  text-align:center;
  color: var(--prose-muted);
  font-style: italic;
  margin-top:.25rem;
  margin-bottom:.75rem;
}
/* Center captions when the paragraph contains only <em> and <br> children (multi-line italic caption) */
.prose p:has(> em):not(:has(> :not(em, br))){
  text-align:center;
  color: var(--prose-muted);
  font-style: italic;
  margin-top:.25rem;
  margin-bottom:.75rem;
}
/* Keep support for the image-adjacent pattern as well */
.prose p:has(img) + p:has(> em:only-child){
  text-align:center;
  color: var(--prose-muted);
  font-style: italic;
  margin-top:.25rem;
  margin-bottom:.75rem;
}
.prose blockquote{ border-left:3px solid var(--prose-quote-border); padding-left:.75rem; color: var(--prose-muted); }
.prose code{ background: var(--prose-code-bg); color: var(--prose-code); padding:.18rem .35rem; border-radius:6px; font-size: .925em; }
.prose pre code{ display:block; padding: .75rem; border-radius:10px; }

.post-card .badge { opacity: .9; }

.btn-brand {
  --bs-btn-bg: var(--brand-accent);
  --bs-btn-border-color: var(--brand-accent);
  --bs-btn-hover-bg: color-mix(in oklab, var(--brand-accent), #000 10%);
  --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-color: #0b1220;
}

/* Dark mode: improve readability of outline-secondary buttons (incl. disabled) */
html[data-bs-theme="dark"] .btn.btn-outline-secondary{
  --bs-btn-color: rgba(var(--bs-emphasis-color-rgb), 0.92);
  --bs-btn-border-color: rgba(var(--bs-emphasis-color-rgb), 0.55);
  --bs-btn-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-btn-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-btn-hover-border-color: rgba(var(--bs-emphasis-color-rgb), 0.70);
  --bs-btn-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.22);
  --bs-btn-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-btn-active-border-color: rgba(var(--bs-emphasis-color-rgb), 0.75);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.68);
  --bs-btn-disabled-border-color: rgba(var(--bs-emphasis-color-rgb), 0.42);
}
html[data-bs-theme="dark"] .btn.btn-outline-secondary:disabled,
html[data-bs-theme="dark"] .btn.btn-outline-secondary.disabled,
html[data-bs-theme="dark"] fieldset:disabled .btn.btn-outline-secondary{ opacity: .95; }

footer {
  border-top: 1px solid rgba(233,236,239,.15);
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
  /* Reduce horizontal gutters inside Bootstrap containers */
  .container { padding-left: .5rem; padding-right: .5rem; }

  /* Utilities like p-4 use !important; override them explicitly on phones */
  .post-card.p-4 { padding: .75rem !important; }
  .post-card.p-3 { padding: .75rem !important; }

  /* Slightly widen markdown body in project pages */
  .prose-project { margin-left: -.35rem; margin-right: -.35rem; }
}

/* Full-bleed helper: make a child section span the full viewport width even inside a .container */
.full-bleed{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; }
/* Hero canvas background */
.hero-canvas-wrap{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-canvas{ width:100%; height:420px; display:block; filter:saturate(110%) contrast(105%) opacity(.55); }
@media (max-width: 575.98px){ .hero-canvas{ height:300px; } }
/* Hero background image overlay (behind everything, fixed) */
:root{ --hero-overlay: rgba(0,0,0,.24); } /* darker = image less visible */
html[data-bs-theme="light"]{ --hero-overlay: rgba(0,0,0,.14); }
.hero-bg{
  position:fixed; /* full page */
  opacity:75%;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)),
    var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(110%) contrast(105%);
}
@media (max-width: 575.98px){ .hero-bg{ background-position: 50% 30%; } }

/* Subtle scrim behind hero text for readability */
.hero-content{ background: rgba(var(--bs-emphasis-color-rgb), .08); backdrop-filter: blur(6px) saturate(110%); border-radius: 12px; padding: .75rem 1rem; border: 1px solid rgba(233,236,239,.12); box-shadow: 0 10px 28px rgba(0,0,0,.22); }

/* Brand canvas inside navbar */
.brand-logo{ position:relative; display:inline-flex; align-items:center; height: 32px; overflow:visible; /* allow overflow */ }
@media (min-width: 768px){ .brand-logo{ height: 36px; } }
.brand-logo .brand-svg{ height:100%; width:auto; display:block; }
/* enlarge the numbers canvas and let it overflow the header */
.brand-metrics{
  position: absolute;
  left: calc(100% + .25rem);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;     /* increase size */
  height: 96px;     /* increase size */
  z-index: 2;
  pointer-events: none; /* never steal clicks */
}

/* scale up further on md+ screens */
@media (min-width: 768px){
  .brand-metrics{
    width: 240px;
    height: 120px;
  }
}

/* reposition the numbers canvas above and slightly left of the rod,
   and send it behind the nav text */
.brand-metrics{
  position:absolute;
  left:0;           /* anchor at the brand's left edge */
  top:0;            /* anchor at the brand's top edge */
  transform: translate(-32%, -90%); /* up and a bit left */
  width:clamp(180px, 22vw, 280px);
  height:clamp(96px, 12vw, 140px);
  z-index:0;        /* behind links in the navbar */
  pointer-events:none;
}

/* ensure canvas fills the box */
.brand-canvas{
  width:30%;
  height:30%;
  display:block;
  filter:saturate(115%) contrast(105%) opacity(.9);
  pointer-events:none;
}

/* Splash overlay */
.splash-overlay{ position:fixed; inset:0; z-index:1050; background: var(--brand-bg); display:block; opacity:1; transition: opacity .6s ease; }
.splash-overlay.hide{ opacity:0; pointer-events:none; }
.splash-overlay .hero-canvas{ height:100dvh; width:100vw; filter:saturate(115%) contrast(105%) opacity(.75); }
/* Add a dedicated fishing photo under the splash canvas */
.splash-overlay .splash-photo{
 position:absolute; inset:0; z-index:0; pointer-events:none;
 background-image:
 linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)),
 url('/content/pictures/river_fishing.jpg');
 background-size: cover; background-position: center; background-repeat: no-repeat;
 opacity:0; /* will be driven by canvas JS using BgElementSelector */
}

/* Theme toggle icon visibility */
.theme-toggle .theme-icon-sun{ display:inline-flex }
.theme-toggle .theme-icon-moon{ display:none }
html[data-bs-theme="dark"] .theme-toggle .theme-icon-sun{ display:none }
html[data-bs-theme="dark"] .theme-toggle .theme-icon-moon{ display:inline-flex }

/* Navbar link ripple click animation */
.topbar .navbar .nav-link{ position:relative; overflow:hidden; border-radius:8px; }
.nav-ripple{ position:absolute; pointer-events:none; width:8px; height:8px; background: currentColor; opacity:.25; border-radius:9999px; left:0; top:0; transform: translate(-50%,-50%) scale(0); animation: navRipple .5s ease-out; }
@keyframes navRipple{ to{ transform: translate(-50%,-50%) scale(18); opacity:0; } }

/* Page scrim: blur + subtle tint behind all page content for readability */
.page-scrim{
  position: relative;
}
.page-scrim::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(8px) saturate(110%);
  -webkit-backdrop-filter: blur(8px) saturate(110%);
  background-color: rgba(var(--scrim-tint-rgb), 0.35);
  border-radius: 14px;
}

/* reduce intensity on mobile to keep performance decent */
@media (max-width: 575.98px){
  .page-scrim::before{
    backdrop-filter: blur(6px) saturate(108%);
    background-color: rgba(var(--scrim-tint-rgb), 0.30);
  }
}

/* ensure content after the hero doesn't sit under the canvas overlay */
.has-hero-canvas{ padding-bottom: 420px; }
@media (max-width: 575.98px){ .has-hero-canvas{ padding-bottom: 300px; } }
/* Utility: force high-contrast headings over busy backgrounds */
.contrast-heading{ color: var(--bs-emphasis-color) !important; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* Project markdown: compact mobile headings and add section separators */
.prose-project h2{ margin-top:1.1rem; }
.prose-project h2::after{ content:""; display:block; height:1px; margin:.55rem00; background: linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,0)); }
@media (max-width:575.98px){
 .prose-project{ font-size:0.98rem; }
 .prose-project h1{ font-size:1.35rem; }
 /* More separation between sections on phones */
 .prose-project h2{ font-size:1.12rem; margin-top:1.35rem; margin-bottom:.6rem; }
 .prose-project h3{ margin-top:1.1rem; margin-bottom:.45rem; }
 .prose-project p:has(> em:only-child){ margin-bottom:1.05rem; }
 .prose-project pre{ margin:.95rem0; }
 .prose-project blockquote{ margin:.9rem0; }
 .prose-project img, .prose-project table{ margin:.9rem0; }
 .prose-project ul, .prose-project ol{ margin:.6rem0 .6rem1.1rem; }
 /* Keep images full-width on phones */
 .prose-project img{ width:100%; max-width:100%; }
 .prose-project pre code{ font-size:.9rem; }
}

/* Improve code block rendering to avoid vertical seam during horizontal scroll on mobile */
.prose pre{
 background: var(--prose-code-bg);
 border:1px solid rgba(233,236,239,.08);
 border-radius:10px;
 padding: .75rem;
 overflow: auto; /* enable horizontal scroll cleanly */
 -webkit-overflow-scrolling: touch; /* smoother iOS scroll */
 background-clip: padding-box; /* prevent blending seam at edges */
 transform: translateZ(0); /* promote to its own layer to avoid tile seams */
 backface-visibility: hidden;
}
/* Remove extra background on code inside pre; keep inline code styles intact */
.prose pre code{
 background: transparent !important;
 padding:0; /* padding handled by pre */
 display: inline; /* let pre control block layout */
}