/* =========================================================================
   0xbartita.com  ·  redesign layer  ·  electric-blue system
   Loaded AFTER style.css + animations.css. Overrides design tokens and adds
   a few bespoke refinements. Everything here is reversible (delete the link).
   ========================================================================= */

/* ---- Palette: electric blue.  Dark is the default; light is opt-in. -------
   redesign.css is the last stylesheet loaded, so it owns the tokens. Each
   block defines the palette in full — a partial block would let the other
   theme's values leak through from style.css. -------------------------- */
:root {
  --bg: #070a10;
  --bg-surface: #0b0f17;
  --bg-card: #0e131d;
  --border: #1a2130;
  --border-glow: #294162;
  --border-glow-rgb: 41, 65, 98;
  --text: #e8eef7;
  --text-muted: #8b99b0;
  --muted-rgb: 139, 153, 176;

  --cyan:    #4cc2ff;   --cyan-rgb: 76, 194, 255;
  --magenta: #3b82f6;   --magenta-rgb: 59, 130, 246;
  --purple:  #2563eb;   --purple-rgb: 37, 99, 235;
  --pink:    #60a5fa;
  --blue:    #3b82f6;   --blue-rgb: 59, 130, 246;
  --sky:     #4cc2ff;   --sky-rgb: 76, 194, 255;
  --danger:  #ff4444;   --danger-rgb: 255, 68, 68;

  --shadow-rgb: 2, 8, 20;
  --tint-rgb: 255, 255, 255;
  --surface-rgb: 7, 10, 16;
  --accent-strong: #9dd6ff;
  --warn: #ff6b35;      --warn-rgb: 255, 107, 53;

  --gradient:      linear-gradient(135deg, #3b82f6, #4cc2ff);
  --gradient-text: linear-gradient(92deg, #9dd6ff, #4cc2ff 45%, #3b82f6);
  --glow-magenta: rgba(59, 130, 246, 0.35);
  --glow-cyan:    rgba(76, 194, 255, 0.30);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f5f8fd;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --border: #dde5f1;
  --border-glow: #b4c8e4;
  --border-glow-rgb: 180, 200, 228;
  --text: #0d1524;
  --text-muted: #55637a;
  --muted-rgb: 85, 99, 122;

  --cyan:    #0369a1;   --cyan-rgb: 3, 105, 161;
  --magenta: #1d4ed8;   --magenta-rgb: 29, 78, 216;
  --purple:  #1e40af;   --purple-rgb: 30, 64, 175;
  --pink:    #2563eb;
  --blue:    #1d4ed8;   --blue-rgb: 29, 78, 216;
  --sky:     #0284c7;   --sky-rgb: 2, 132, 199;
  --danger:  #b91c1c;   --danger-rgb: 185, 28, 28;

  --shadow-rgb: 15, 23, 42;
  --tint-rgb: 15, 23, 42;
  --surface-rgb: 255, 255, 255;
  --accent-strong: #075985;
  --warn: #c2410c;      --warn-rgb: 194, 65, 12;

  --gradient:      linear-gradient(135deg, #1d4ed8, #0284c7);
  --gradient-text: linear-gradient(92deg, #1e40af, #0369a1 45%, #1d4ed8);
  --glow-magenta: rgba(29, 78, 216, 0.18);
  --glow-cyan:    rgba(2, 132, 199, 0.18);

  color-scheme: light;
}

/* ---- Page depth: one soft top glow over a true dark base ---------------- */
body {
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(var(--blue-rgb), 0.12), transparent 62%),
    var(--bg);
}

/* Subtle film grain — a bespoke texture generators never add. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Selection, focus, scrollbar in blue ------------------------------- */
::selection { background: rgba(var(--blue-rgb), 0.28); color: var(--text); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 10px; border: 2px solid var(--bg-surface); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }
html { scrollbar-color: var(--border-glow) var(--bg-surface); }

/* ---- Headings: a touch calmer ------------------------------------------ */
.section-title { letter-spacing: 3px; }

/* ---- Hero: blue grid + a real halo around the photo -------------------- */
.hero-bg-grid {
  background-image:
    linear-gradient(rgba(var(--sky-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--sky-rgb), 0.05) 1px, transparent 1px);
}
.hero-photo-ring { box-shadow: 0 0 60px 6px rgba(var(--blue-rgb), 0.35); }

/* ---- Buttons: cleaner electric-blue with a tasteful glow --------------- */
.btn-primary { box-shadow: 0 2px 18px rgba(var(--blue-rgb), 0.28); }
.btn-primary:hover { box-shadow: 0 8px 34px rgba(var(--blue-rgb), 0.45); }
.btn-glow:hover { box-shadow: 0 8px 34px rgba(var(--sky-rgb), 0.40); }

/* ---- Cards: crisper edge, subtle lift ---------------------------------- */
.pub-card-v2:hover {
  border-color: var(--border-glow);
  box-shadow: 0 10px 34px rgba(var(--shadow-rgb), 0.55);
  transform: translateY(-4px);
}

/* ---- Hall of Fame: clickable award cards ---- */
a.hof-item, .hof-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
a.hof-item:hover, .hof-item-link:hover {
  border-color: var(--border-glow);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.55);
}
.hof-item-link .hof-link-icon { color: var(--cyan); opacity: .85; }

/* ---- Hero particle backdrop ---- */
.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-particles canvas { display: block; }
.hero .hero-bg-grid { z-index: 0; }
.hero .hero-content { position: relative; z-index: 2; }

/* ---- Modern: cursor spotlight, scroll progress, heading shimmer ---- */
.has-spotlight { position: relative; }
.has-spotlight::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--sky-rgb), 0.45), transparent 60%);
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light; z-index: 3;
}
.has-spotlight:hover::after { opacity: 1; }
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.6);
  z-index: 9999; pointer-events: none;
}
.hero-name .gradient-text { background-size: 220% auto; animation: bartitaShimmer 6s linear infinite; }
@keyframes bartitaShimmer { to { background-position: 220% center; } }

/* ---- Slightly larger base scale (modest zoom) ---- */
html { font-size: 106.25%; }  /* ~17px base; scales rem-based type & spacing */

/* ---- Experience role title: clean mono, no italic ---- */
.exp-role {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.2px;
  color: var(--sky);
}
.exp-role em { font-style: normal; }

/* ---- About info: minimal divider list with gradient icon badges ---- */
.about-info-items { display: flex; flex-direction: column; gap: 0; max-width: 560px; margin: 0 auto; }
.about-info-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 0.25rem;
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--border);
  transition: none;
}
.about-info-item:last-child { border-bottom: none; }
.about-info-item:hover { transform: none; box-shadow: none; }
.about-info-item:hover .ai-value { color: #fff; }
.ai-badge {
  flex-shrink: 0; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.18), rgba(var(--sky-rgb), 0.10));
  border: 1px solid rgba(var(--sky-rgb), 0.28);
  color: var(--sky); font-size: 0.95rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ai-badge i, .ai-badge .icon { color: inherit; min-width: auto; }
.about-info-item:hover .ai-badge {
  background: linear-gradient(135deg, var(--blue), var(--sky));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(var(--blue-rgb), 0.4);
  transform: translateY(-2px);
}
.ai-content { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.ai-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); }
.ai-value { font-size: 0.95rem; color: var(--text); font-weight: 500; line-height: 1.35; }

/* ---- Experience card: arranged layout (years badge, handles, classes label) ---- */
.exp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.15rem; }
.exp-head .exp-role { margin-bottom: 0; }
.exp-years {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px;
  color: var(--cyan); background: rgba(var(--blue-rgb), 0.10); border: 1px solid rgba(var(--sky-rgb), 0.30);
  border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.exp-classes-label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border);
}
.skill-tags { margin-top: 0.9rem; }

/* =========================================================
   ACTIVITY — embedded X tips
   Frames X's dark embed in the site's own card chrome so it
   reads as part of the page rather than a pasted-in widget.
   ========================================================= */
.activity-sub {
  text-align: center;
  color: var(--text-muted);
  margin: -0.6rem auto 2.6rem;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.7;
}
.activity-sub a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--sky-rgb), 0.35);
  transition: border-color 0.25s, color 0.25s;
}
.activity-sub a:hover { color: var(--accent-strong); border-bottom-color: var(--cyan); }

/* one bounded window; the feed scrolls inside it instead of growing the page */
.activity-grid {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 600px;
  max-height: min(760px, 80vh);
  margin: 0 auto;
  padding: 1.1rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: inset 0 0 60px -30px rgba(var(--sky-rgb), 0.25);
  scrollbar-width: thin;
  scrollbar-color: var(--border-glow) transparent;
}
.activity-grid::-webkit-scrollbar { width: 10px; }
.activity-grid::-webkit-scrollbar-track { background: transparent; }
.activity-grid::-webkit-scrollbar-thumb {
  background: var(--border-glow);
  border-radius: 8px;
  border: 3px solid var(--bg-surface);
}
.activity-grid::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

.tip-card {
  position: relative;
  /* flex items shrink by default: without this they squash to fit the capped
     panel height instead of overflowing it, and the panel never scrolls. */
  flex: 0 0 auto;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.75rem;
  overflow: hidden;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
/* accent hairline, same language as the writeup headings */
.tip-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.tip-card:hover {
  border-color: var(--border-glow);
  box-shadow: 0 14px 44px -20px var(--glow-cyan);
}
.tip-card:hover::before { opacity: 1; }

/* X centers its own iframe; just soften the corners to match the card */
.tip-card .twitter-tweet { margin: 0 auto !important; }
.tip-card iframe { border-radius: 12px !important; }

/* Fallback + loading state: shown before widgets.js swaps in the iframe,
   and permanently if a visitor blocks X. Keeps the tip reachable. */
.tip-card blockquote.twitter-tweet:not(.twitter-tweet-rendered) {
  margin: 0;
  padding: 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.94rem;
  color: var(--text-muted);
}
.tip-card blockquote.twitter-tweet:not(.twitter-tweet-rendered) a {
  color: var(--cyan);
  text-decoration: none;
}

@media (max-width: 600px) {
  .activity-grid { max-height: 78vh; padding: 0.7rem; gap: 0.9rem; }
  .tip-card { padding: 0.5rem; }
}

/* =========================================================
   SECTION RAIL — Notion-style "where am I" scroll indicator
   ========================================================= */
.section-nav {
  position: fixed;
  right: 1.4rem;
  top: 50%;
  z-index: 60;
  display: none;
  padding: 0.4rem 0.3rem;
  /* idle-hidden; .is-visible is toggled by the scroll handler */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(10px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.section-nav.is-visible,
.section-nav:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .section-nav { transition: opacity 0.2s linear, visibility 0.2s; }
}
@media (min-width: 1280px) { .section-nav { display: block; } }

.section-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.section-nav a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.55rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.76rem;
  letter-spacing: 0.045em;
  white-space: nowrap;
  opacity: 0.45;
  transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.section-nav .sn-dash {
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.section-nav a:hover {
  opacity: 1;
  color: var(--text);
  background: rgba(var(--blue-rgb), 0.08);
}
.section-nav a.is-active { opacity: 1; color: var(--cyan); }
.section-nav a.is-active .sn-dash {
  width: 26px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--glow-cyan);
}
@media (prefers-reduced-motion: reduce) {
  .section-nav a, .section-nav .sn-dash { transition: none; }
}

/* =========================================================
   SECTION DIVIDERS
   Gradient hairline + a small diamond node at centre.
   Uses `~` (not `+`) because a <script> tag sits between the
   activity and experience sections, which would break `+`.
   First section after the hero is intentionally left clean.
   ========================================================= */
.section ~ .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 84%);
  height: 1px;
  background-image:
    linear-gradient(90deg, transparent, rgba(var(--sky-rgb), 0.85), transparent),
    linear-gradient(90deg, transparent, rgba(var(--border-glow-rgb), 0.55) 16%, var(--border-glow) 50%, rgba(var(--border-glow-rgb), 0.55) 84%, transparent);
  background-size: 20% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -25% 0, 0 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.section ~ .section.divider-in::before {
  transform: translateX(-50%) scaleX(1);
  animation: divider-sweep 6s ease-in-out 1.05s infinite;
}
.section ~ .section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--bg);
  border: 1px solid var(--cyan);
  border-radius: 1px;
  box-shadow: 0 0 12px var(--glow-cyan);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
  pointer-events: none;
}
.section ~ .section.divider-in::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  /* animates box-shadow only, so it can't fight the transform transition */
  animation: divider-node 3.4s ease-in-out 1.05s infinite;
}

@keyframes divider-sweep {
  0%        { background-position: -25% 0, 0 0; }
  55%, 100% { background-position: 125% 0, 0 0; }
}
@keyframes divider-node {
  0%, 100% { box-shadow: 0 0 12px var(--glow-cyan); }
  50%      { box-shadow: 0 0 20px var(--glow-cyan), 0 0 34px rgba(var(--sky-rgb), 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .section ~ .section::before,
  .section ~ .section::after { transition: none; }
  .section ~ .section.divider-in::before,
  .section ~ .section.divider-in::after { animation: none; }
}
@media (max-width: 700px) {
  .section ~ .section::before { width: 88%; }
}

/* =========================================================================
   Pass 4 — UI review fixes
   ========================================================================= */

/* ---- Fire line: scroll + reading progress ----------------------------- */
/* Both bars are driven by width (not scaleX) so the ember tip at the
   leading edge is not horizontally stretched along with the bar. */
.scroll-progress,
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  transform: none;
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    90deg,
    #1e40af 0%,
    #2563eb 26%,
    #3b82f6 50%,
    #4cc2ff 76%,
    #9dd6ff 92%,
    #eaf6ff 100%
  );
  background-size: 100vw 100%;
  background-repeat: no-repeat;
  box-shadow:
    0 0 6px rgba(76, 194, 255, 0.85),
    0 0 18px rgba(59, 130, 246, 0.55),
    0 0 34px rgba(37, 99, 235, 0.35);
}
/* the ember: a hot bloom riding the leading edge */
.scroll-progress::after,
.reading-progress::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(234, 246, 255, 0.95) 0%,
    rgba(76, 194, 255, 0.75) 35%,
    rgba(59, 130, 246, 0.45) 60%,
    transparent 75%
  );
  animation: fire-flicker 1.6s ease-in-out infinite;
}
/* a soft heat haze lifting off the line */
.scroll-progress::before,
.reading-progress::before {
  content: "";
  position: absolute;
  inset: -5px 0 auto 0;
  height: 12px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(76, 194, 255, 0.16) 55%,
    rgba(59, 130, 246, 0.24)
  );
  filter: blur(3px);
  pointer-events: none;
}
@keyframes fire-drift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes fire-flicker {
  0%, 100% { opacity: 0.95; transform: translateY(-50%) scale(1); }
  40%      { opacity: 0.72; transform: translateY(-50%) scale(0.86); }
  70%      { opacity: 1;    transform: translateY(-50%) scale(1.1); }
}

/* ---- Hall of Fame: match every other section title -------------------- */
/* .section-title is inline-block, so `margin: auto` never centred this and
   the heading sat 116px left of its own list. */
.hof-title {
  display: block;
  text-align: center;
}

/* ---- Single-item grids should not leave an empty row ----------------- */
/* auto-fill keeps the empty tracks; auto-fit collapses them, and the max
   track size stops one card stretching across the whole container. */
.cve-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 360px));
  justify-content: center;
}
/* four certs fit one row at container width instead of orphaning the last */
.cert-grid-v2 {
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}

/* ---- Project cards: reclaim the space the removed tech tags left ------ */
.project-card .project-desc { margin-bottom: 0; }

/* ---- "Soon" badge contrast (was 3.68:1 on magenta) ------------------- */
/* --magenta is a mid blue in dark, so white on it only reached 3.43:1 */
.cert-soon-badge { background: #0b3a63; color: #cfe9ff; }
:root[data-theme="light"] .cert-soon-badge { background: var(--cyan); color: #ffffff; }

/* ---- /blog page subtitle was left-aligned under a centred title ------- */
.page-subtitle { text-align: center; }

/* ---- Skip link ------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--cyan);
  border-radius: 0 0 10px 0;
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---- Visible focus for keyboard users -------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Activity: the scrolling window, on every screen -------------------
   Kept on mobile at the user's request. The one change from the original is
   `overscroll-behavior: auto` instead of `contain`: with `contain`, a thumb
   swipe that reached the end of the feed stopped the page dead instead of
   carrying on down the section. Chaining restores that without touching how
   the frame looks or scrolls. */
.activity-grid { overscroll-behavior: auto; }

@media (max-width: 900px) {
  .activity-grid {
    max-height: min(640px, 72vh);
    max-width: 560px;
  }
}

/* ---- "View all writeups" CTA under the homepage blog cards ------------ */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.25rem;
}
.section-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--border-glow);
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.06);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.section-cta a:hover {
  border-color: var(--cyan);
  background: rgba(var(--blue-rgb), 0.12);
  color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -14px var(--glow-cyan);
}
.section-cta a .cta-arrow { transition: transform 0.3s; }
.section-cta a:hover .cta-arrow { transform: translateX(4px); }

/* ---- Tag index and tag pages ----------------------------------------- */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.5rem;
  justify-content: center;
  max-width: 760px;
  margin: 1.1rem auto 2.25rem;
}
.tag-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text) !important;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.tag-chip:hover {
  border-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.07);
  transform: translateY(-2px);
}
.tag-chip .tag-count {
  font-size: 0.68rem;
  color: var(--text-muted);
}
.tag-chip.is-current {
  border-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.12);
}


/* ---- Inline icon sprite ---------------------------------------------- */
/* Replaces Font Awesome's stylesheet + three webfonts (~490KB) with ~21KB
   of inline symbols covering only the icons this site actually uses. */
.icon-sprite { display: none; }
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
  flex: none;
}

/* ---- Theme toggle -----------------------------------------------------
   One icon, not two: it shows the theme you would switch TO, and the two
   glyphs cross-rotate through each other on click. Sized to the existing nav
   icons so it does not reflow the header. */
.theme-toggle {
  flex: none;
  order: 99;                 /* always last in the nav row */
  margin-left: 0.9rem;
  margin-right: -0.5rem;   /* nudge a touch toward the right edge */
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.theme-toggle:hover {
  color: var(--cyan);
  border-color: var(--border);
  background: rgba(var(--cyan-rgb), 0.07);
}

.theme-icon {
  position: relative;
  display: block;
  width: 19px;
  height: 19px;
}
.theme-icon .icon {
  position: absolute;
  inset: 0;
  width: 19px;
  height: 19px;
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Icon reflects the CURRENT theme: crescent moon in dark, sun in light.
   (The solid sun glyph read as a settings/gear cog at small size in dark mode.) */
.theme-icon .t-sun  { opacity: 0; transform: rotate(-90deg) scale(0.35); }
.theme-icon .t-moon { opacity: 1; transform: rotate(0deg) scale(1); }

:root[data-theme="light"] .theme-icon .t-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
:root[data-theme="light"] .theme-icon .t-moon { opacity: 0; transform: rotate(90deg) scale(0.35); }

/* a small flourish on the way in */
.theme-toggle:active .theme-icon { transform: scale(0.88); }
.theme-icon { transition: transform 0.18s ease; }

/* Click animation: the icon spins a full turn with a little pop as the theme flips. */
@keyframes theme-toggle-spin {
  0%   { transform: rotate(0deg)   scale(1); }
  45%  { transform: rotate(200deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1); }
}
.theme-toggle.spin .theme-icon { animation: theme-toggle-spin 0.55s cubic-bezier(0.16, 1, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
  .theme-icon .icon, .theme-icon { transition: none; }
  .theme-toggle.spin .theme-icon { animation: none; }
}

@media (max-width: 768px) {
  /* toggle then hamburger, both pinned right — order:99 alone put the
     hamburger in front of the toggle, stranded beside the logo */
  .theme-toggle { margin-left: auto; margin-right: 0.35rem; }
  .nav-toggle { order: 100; }
}

/* ---- 404 --------------------------------------------------------------- */
.error-page {
  min-height: calc(100vh - var(--nav-height) - 6rem);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 5rem) 0 6rem;
}
.error-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 1px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 1.4rem;
}
.error-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 1.5rem;
  color: var(--text);
}
.error-text {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 0 2.4rem;
}
.error-text code {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.08);
  border: 1px solid rgba(var(--cyan-rgb), 0.18);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  word-break: break-all;
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}


/* ---- CVE card: collaborator credit + whole-card link ------------------- */
.cve-card-item.is-linked { cursor: pointer; }
.cve-card-item.is-linked:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cve-title-line { margin: 8px 0 0; font-size: 0.9rem; color: var(--text-muted); font-family: var(--font-mono); }
.cve-collab { margin: 6px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.cve-collab a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(var(--cyan-rgb), 0.4); }
.cve-collab a:hover { color: var(--accent-strong); }


/* ---- Resume: award year + projects list ------------------------------- */
.rv-hof-company { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rv-hof-year { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.rv-proj-list { display: flex; flex-direction: column; gap: 16px; }
.rv-proj-name { margin: 0 0 4px; font-size: 1rem; }
.rv-proj-desc { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }


/* ---- Clickable cards (resume + homepage): the whole card opens its link ---- */
.is-linked[data-href] { cursor: pointer; }
.is-linked[data-href]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@keyframes card-open { 0% { transform: scale(1); } 30% { transform: scale(0.975); } 100% { transform: scale(1); } }
.opening { animation: card-open 0.45s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 0 0 1px rgba(var(--cyan-rgb), .55), 0 12px 36px rgba(var(--cyan-rgb), .22) !important; }
@media (prefers-reduced-motion: reduce) { .opening { animation: none; } }

/* ---- Bug Bounty Profiles: handle tag on each badge ---- */
.platform-badge .platform-handle { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-left: 7px; opacity: .9; }

/* ---- Technical Skills — colour-coded category modules (a fresh look) ---- */
.rv-skills-grid .rv-skill-group { position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 18px 16px; overflow: hidden; }
.rv-skills-grid .rv-skill-group::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgb(var(--sk)); }
.rv-skills-grid .rv-skill-cat { color: rgb(var(--sk)); font-family: var(--font-mono); letter-spacing: .5px;
  display: flex; align-items: center; gap: 8px; margin: 2px 0 14px; }
.rv-skills-grid .rv-skill-cat::before { content: "▹"; opacity: .85; }
.rv-skills-grid .skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-skills-grid .skill-tag { background: rgba(var(--sk), .12); border: 1px solid rgba(var(--sk), .4); color: var(--text);
  border-radius: 9px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.rv-skills-grid .skill-tag:hover { transform: translateY(-2px); background: rgba(var(--sk), .2);
  box-shadow: 0 6px 18px rgba(var(--sk), .3); }
.rv-skills-grid .rv-skill-group:nth-child(1) { --sk: 76, 194, 255; }
.rv-skills-grid .rv-skill-group:nth-child(2) { --sk: 139, 92, 246; }
.rv-skills-grid .rv-skill-group:nth-child(3) { --sk: 74, 222, 128; }
.rv-skills-grid .rv-skill-group:nth-child(4) { --sk: 255, 138, 91; }
.rv-skills-grid .rv-skill-group:nth-child(5) { --sk: 59, 130, 246; }
.rv-skills-grid .rv-skill-group:nth-child(6) { --sk: 236, 72, 153; }