/* Background video pause/play button */
.bg-video-toggle {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999; /* above page content */
  background: rgba(20,24,32,0.32);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.18);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  opacity: 0.9;
  pointer-events: auto;
}
.bg-video-toggle:hover {
  background: rgba(20,24,32,0.55);
  opacity: 1;
}
@media (max-width:600px){
  .swipe-indicator-glass {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 60vw;
    max-width: 60vw;
    margin-left: auto;
    margin-right: auto;
    z-index: 1003;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.25em 0;
    background: rgba(20,24,32,0.32);
    backdrop-filter: blur(12px) saturate(1.1);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 -2px 16px 0 rgba(0,0,0,0.12);
    font-family: 'Inter', 'JetBrains Mono', monospace;
    font-size: 0.82em;
    color: #bbbbbb93;
    opacity: 0.92;
    pointer-events: none;
    animation: swipePulse 1.5s infinite;
  }
  .swipe-indicator-glass svg {
    margin-top: 0.1em;
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  }
}
@keyframes swipePulse {
  0%, 100% { opacity: 0.92; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(8px); }
}

/* Hide swipe indicator when at end */
@media (max-width:600px){
  .swipe-indicator-glass.is-hidden{
    display: none !important;
    animation: none !important;
  }
}
/* Hide swipe indicator on larger screens */
@media (min-width: 601px) {
  .swipe-indicator-glass {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    width: 0 !important;
    position: fixed !important;
    bottom: -9999px !important;
    left: -9999px !important;
  }
}
#about-side-nav .side-nav-social {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 1.2em 0.5em 1.2em 0.5em;
  gap: 0.8em;
}
#about-side-nav .side-nav-social a {
  color: #bbbbbb93;
  background: transparent;
  border-radius: 50%;
  padding: 0.3em;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: center;
}
#about-side-nav .side-nav-social a:hover {
  background: #8a020233;
  color: #fff;
}
/* Sidebar pseudo-elements disabled (flame glow handled by .ember-flame-container) */
#about-side-nav::before, #about-side-nav::after {
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
}
/* Stacking: nav links and social icons above flame particles */
#about-side-nav ul {
  position: relative;
  z-index: 1;
}
#about-side-nav .side-nav-social {
  position: relative;
  overflow: visible;
  z-index: 1;
}
#about-side-nav .side-nav-social a {
  position: relative;
  z-index: 2;
}
/* Flame container: full-sidebar, clipped, behind all content */
.ember-flame-container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: 0 18px 18px 0;
}
/* Warm base glow at the bottom of the sidebar */
.ember-flame-container::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 5%;
  right: 5%;
  height: 70px;
  background: radial-gradient(ellipse at center bottom,
    rgba(255,80,10,0.38) 0%,
    rgba(255,60,10,0.14) 55%,
    rgba(255,60,10,0) 100%);
  filter: blur(10px);
  pointer-events: none;
  animation: baseGlowPulse 3.5s ease-in-out infinite;
}
/* Flame core particles (large soft blobs) */
.ember-flame-container .flame-core {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: ease-out;
}
/* Ember particles (small rising dots, 3 depth tiers via inline styles) */
.ember-flame-container .ember-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: linear;
}
/* Spark particles (tiny, bright, fast) */
.ember-flame-container .spark-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: ease-out;
}
/* Disable flames when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ember-flame-container { display: none !important; }
}
@media (max-width: 600px) {
  .autograph-painter {
    font-size: 2.27rem !important;
  }
}
@media (max-width: 420px) {
  .autograph-painter {
    font-size: 2.05rem !important;
  }
}
#about-sections {
  overflow: -moz-scrollbars-none !important;
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
#about-sections::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
#about-sections {
  /* Hide scrollbar for all browsers */
  scrollbar-width: none; /* Firefox */
}
#about-sections::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}
/* About page left nav and sections */
#about-main-row {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100vw;
  height: calc(100vh - 64px);
  margin-top: 0;
  box-sizing: border-box;
  overflow: hidden;
}
#about-side-nav {
  position: sticky;
  top: 64px;
  left: 0;
  height: calc(100vh - 64px);
  width: 154px;
  background: rgba(20,24,32,0.32);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.12);
  backdrop-filter: blur(12px) saturate(1.1);
  border-radius: 0 18px 18px 0;
  padding-top: 2.5em;
  font-family: 'Inter', 'JetBrains Mono', monospace;
  overflow: visible; /* allow glow to extend slightly outside */
}

/* ── Flame keyframes ────────────────────────────────────────── */

/* Base glow pulse at the bottom of the sidebar */
@keyframes baseGlowPulse {
  0%, 100% { opacity: 0.45; transform: scaleX(1); }
  50%      { opacity: 0.75; transform: scaleX(1.06); }
}

/* Flame core: slow rise with organic sway and scale morphing */
@keyframes flameRise {
  0%   { transform: translate(0, 0) scaleX(1) scaleY(1); opacity: 0; }
  12%  { opacity: 0.38; }
  35%  { transform:
           translate(var(--ember-sway, 5px), calc(-0.35 * var(--ember-rise, 100px)))
           scaleX(1.1) scaleY(1.05);
         opacity: 0.32; }
  65%  { transform:
           translate(calc(var(--ember-driftX, 0px) * 0.65), calc(-0.65 * var(--ember-rise, 100px)))
           scaleX(0.88) scaleY(1.1);
         opacity: 0.16; }
  100% { transform:
           translate(var(--ember-driftX, 0px), calc(-1 * var(--ember-rise, 100px)))
           scaleX(0.6) scaleY(0.8);
         opacity: 0; }
}

/* Ember: rise with sinusoidal horizontal sway for organic motion */
@keyframes emberRiseSway {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: var(--ember-peak-opacity, 0.55); }
  30%  { transform:
           translate(
             calc(var(--ember-driftX, 6px) * 0.3 + var(--ember-sway, 3px)),
             calc(-0.3 * var(--ember-rise, 80px))
           ); }
  55%  { transform:
           translate(
             calc(var(--ember-driftX, 6px) * 0.55 - var(--ember-sway, 3px) * 0.6),
             calc(-0.55 * var(--ember-rise, 80px))
           );
         opacity: 0.35; }
  80%  { transform:
           translate(
             calc(var(--ember-driftX, 6px) * 0.8 + var(--ember-sway, 3px) * 0.3),
             calc(-0.8 * var(--ember-rise, 80px))
           );
         opacity: 0.18; }
  100% { transform:
           translate(var(--ember-driftX, 6px), calc(-1 * var(--ember-rise, 80px)));
         opacity: 0; }
}

/* Spark: fast rise, bright flash, quick fadeout */
@keyframes sparkRise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 0.9; }
  35%  { transform:
           translate(calc(var(--ember-driftX, 4px) * 0.35), calc(-0.35 * var(--ember-rise, 150px)))
           scale(0.8);
         opacity: 0.65; }
  100% { transform:
           translate(var(--ember-driftX, 4px), calc(-1 * var(--ember-rise, 150px)))
           scale(0.12);
         opacity: 0; }
}
#about-side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
#about-side-nav li {
  margin: 1.2em 0;
  text-align: center;
}
#about-side-nav a {
  color: #bbbbbb93;
  text-decoration: none;
  font-family: 'Inter', 'JetBrains Mono', monospace;
  font-size: 1.05em;
  letter-spacing: 0.01em;
  padding: 0.4em 0.2em;
  border-radius: 6px;
  display: block;
  transition: background 0.2s, color 0.2s;
}
#about-side-nav a:hover, #about-side-nav a.active {
  background: #8a020233;
  color: #fff;
}

#about-sections {
  flex: 1 1 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
.about-section {
  min-height: calc(100vh - 64px);
  height: calc(100vh - 64px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  opacity: 0;
  transform: translateY(40px);
  animation: aboutFadeIn 0.7s cubic-bezier(.4,2,.6,1) forwards;
  margin: 0 auto;
  box-sizing: border-box;
}
.about-section-inner.glass-content {
  max-width: 980px;
  min-width: 320px;
  width: 80vw;
  margin: 0 auto;
  padding: 2.5rem 2vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
}
@media (max-width: 800px) {
  .about-section-inner.glass-content { max-width: 98vw; min-width: 0; width: 98vw; padding: 1.2rem 2vw; }
}
@media (max-width: 600px) {
  .about-section-inner.glass-content { max-width: 99vw; min-width: 0; width: 99vw; padding: 1.2rem 2vw; }
}
@media (max-width: 800px) {
  #about-side-nav { display: none !important; }
  #about-main-row { flex-direction: column !important; }
  #about-sections { margin-left: 0 !important; width: 100vw !important; }
  .about-section.glass-content, .about-section-inner.glass-content { max-width: 98vw; min-width: 0; width: 98vw; padding: 1.2rem 2vw; }
}
@media (max-width: 600px) {
  #about-side-nav { display: none !important; }
  #about-main-row { flex-direction: column !important; }
  #about-sections { margin-left: 0 !important; width: 100vw !important; }
  .about-section.glass-content, .about-section-inner.glass-content { max-width: 99vw; min-width: 0; width: 99vw; padding: 1.2rem 2vw; }
}
.about-section h1 {
  font-size: 2.2em;
  margin-bottom: 0.7em;
  color: #ccccccd3;
  font-family: 'JetBrains Mono', monospace;
  /*#bbbbbb93 #ccccccd3 #ffffff50*/
}
.about-section p {
  color: #ffffffab;
  font-size: medium;
}

/* Experience section */
.experience-entry{
  width: 100%;
  max-width: 820px;
  text-align: left;
}
.experience-title{
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.45em;
  color: #ccccccd3;
  margin: 0 0 0.75rem 0;
}
.experience-meta{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.78;
  margin: -0.35rem 0 0.85rem 0;
}
.experience-bullets{
  margin: 0;
  padding-left: 1.25rem;
}
.experience-bullets li{
  color: #ffffffab;
  margin: 0.45rem 0;
  line-height: 1.5;
}

/* Planned progress */
.planned-title{
  font-family: 'Inter', 'JetBrains Mono', monospace;
  font-size: medium;
  color: #ffffffab;
  margin: 0 0 0.75rem 0;
  text-align: center;
}

.legendary-word{
  color: rgba(255, 140, 60, 0.95);
  font-weight: 600;
}

.planned-progress{
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.planned-progress-legendary{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(255, 140, 60, 0.10);
  border: 1px solid rgba(255, 140, 60, 0.26);
  box-shadow:
    0 10px 28px rgba(0,0,0,0.26),
    0 0 0 1px rgba(255, 140, 60, 0.10) inset;
  box-sizing: border-box;
}

.planned-progress-right{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.planned-progress-track{
  width: 100%;
  height: 12px;
  background: linear-gradient(180deg, rgba(10,12,16,0.70), rgba(20,24,32,0.55));
  border: 1px solid rgba(247, 208, 112, 0.18);
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    0 2px 10px rgba(0,0,0,0.35) inset,
    0 1px 0 rgba(255,255,255,0.06) inset;
}
.planned-progress-fill{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(138, 2, 2, 0.96) 0%,
    rgba(255, 140, 60, 0.96) 40%,
    rgba(247, 208, 112, 0.98) 85%,
    rgba(255, 240, 200, 0.85) 100%
  );
  border-radius: 999px;
  box-shadow:
    0 0 14px rgba(255, 140, 60, 0.26),
    0 0 26px rgba(247, 208, 112, 0.18);
  position: relative;
}

.planned-progress-fill::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0));
  pointer-events: none;
}

.planned-progress-text{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.78;
  text-align: right;
  margin-top: 0;
  white-space: nowrap;
}

.planned-info{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  line-height: 1;
  color: rgba(255, 140, 60, 0.95);
  background: rgba(20,24,32,0.40);
  border: 1px solid rgba(255, 140, 60, 0.26);
  cursor: help;
}

.planned-info::after{
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(320px, 86vw);
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(20,24,32,0.86);
  border: 1px solid rgba(255,255,255,0.10);
  color: #cfd6dc;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 2000;
}

.planned-info:hover::after,
.planned-info:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}

/* About meme (final slide) */
.meme-container.about-section-inner.glass-content{
  padding: 0;
  width: min(760px, 92vw);
  max-width: 760px;
  min-width: 0;
  overflow: hidden;
}

.about-meme{
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 600px){
  .planned-progress{ max-width: 92vw; }
  .planned-progress-track{ height: 10px; }
  .planned-progress-legendary{ flex-wrap: wrap; gap: 0.65rem; padding: 0.7rem 0.8rem; }
  .planned-progress-track{ flex: 1 1 100%; }
  .planned-progress-right{ margin-left: 0; width: 100%; justify-content: flex-end; }
  .planned-progress-text{ font-size: 0.78rem; }
}

/* Notable courses (side-by-side blocks) */
.courses-grid{
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  text-align: left;
}
.courses-block{
  min-width: 0;
}
.courses-block .experience-title{
  font-size: 1.25em;
  margin-bottom: 0.6rem;
}

.courses-external{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.tryhackme-badge{
  width: 420px;
  max-width: 92vw;
  height: 210px;
  border: none;
}

@media (min-width: 601px){
  .tryhackme-badge{ transform: translateX(45px);     justify-content: center;
 }
}
@media (max-width: 599px){
  .tryhackme-badge{ transform: translateX(22px); }
}

@media (max-width: 991px){
  .courses-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px){
  .courses-grid{ grid-template-columns: 1fr; gap: 1rem; }
  .courses-external{ margin-top: 0.75rem; }
  .tryhackme-badge{ width: 92vw; height: 200px; }
}

/* Smaller text on small screens (similar density to index terminal) */
@media (max-width: 600px) {
  .about-section p { font-size: 0.86rem; }
  #about-sections .about-section li { font-size: 0.86rem; }
  .experience-title { font-size: 1.15em; margin-bottom: 0.55rem; }
  .experience-meta { font-size: 0.78rem; margin: -0.25rem 0 0.75rem 0; }
  .experience-bullets li { margin: 0.35rem 0; line-height: 1.45; }
  .dk-legend { font-size: 0.82rem; }
}
/* Certifications grid */
.cert-grid {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  width: 100%;
  padding: 0.5rem 0;
}
.cert-grid img {
  max-width: 160px;
  width: 28.8vw;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.22);
}
@media (max-width: 600px) {
  .cert-grid img { width: 56vw; max-width: 224px; }
}
@keyframes aboutFadeIn {
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 800px) {
  #about-side-nav { width: 64px; }
  #about-sections { margin-left: 64px; }
  .about-section h1 { font-size: 1.3em; }
}
@media (max-width: 600px) {
  #about-side-nav { width: 44px; }
  #about-sections { margin-left: 44px; }
  .about-section h1 { font-size: 1.1em; }
}

/* Tablet / medium desktop sizing (prevents vw-based overflow next to sidebar) */
@media (min-width: 801px) and (max-width: 1450px){
  .about-section-inner.glass-content{ width: 92%; }
  .whoami-slide .about-section-inner.glass-content{ width: 96%; }
}

/* Wider glass container only for whoami slides (desktop) */
@media (min-width: 801px){
  .whoami-slide .about-section-inner.glass-content{
    width: 100%;
    max-width: 1225px;
  }
}


/* Raw CLI bash loader styles */
#loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #101217;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
}
/* Loader CLI layout: fix bar/label rows, allow phrase to expand only downward */
/* Loader CLI layout: bar/label fixed center, phrase at bottom */
.loader-cli {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1em;
  color: #b8e1ff;
  width: 420px;
  max-width: 98vw;
  position: relative;
}
.loader-cli-line {
  width: 100%;
  white-space: pre;
  font-size: 1em;
  color: #b8e1ff;
  margin-bottom: 0.2em;
  text-align: center;
  min-height: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader-phrase.loader-cli-phrase {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5vh;
  margin: 0 auto;
  width: 100vw;
  max-width: 98vw;
  color: #9e9b9b;
  font-size: 1em;
  min-height: 1.2em;
  white-space: pre-line;
  text-align: center;
  word-break: break-word;
  display: block;
  pointer-events: none;
  z-index: 10000;
  padding: 0 2vw;
}
@media (max-width: 600px) {
  .loader-cli { font-size: 0.95em; width: 99vw; }
  .loader-cli-line, #loader-phrase.loader-cli-phrase { font-size: 0.95em; }
  #loader-phrase.loader-cli-phrase { bottom: 2vh; padding: 0 1vw; }
}
@media (max-width: 600px) {
  .loader-cli { font-size: 0.95em; width: 99vw; }
  .loader-cli-line, .loader-cli-phrase { font-size: 0.95em; }
}
.bg-overlay-glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:rgba(20,24,32,0.22);
  backdrop-filter: blur(18px) saturate(1.2);
}
.glass-content{
  background:rgba(20,24,32,0.32);
  border-radius:18px;
  box-shadow:0 4px 32px 0 rgba(0,0,0,0.12);
  backdrop-filter: blur(12px) saturate(1.1);
  position: relative;
  padding:2.5rem 2.5vw 2.5rem 2.5vw;
  margin-top:2.5rem;
}
@media (max-width:767px){
  .glass-content{ padding:1.2rem 2vw 1.2rem 2vw; margin-top:1.2rem; }
}

/* Small info icon + tooltip (used on Projects glass container) */
.glass-info{
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(20,24,32,0.22);
  color: var(--muted);
  padding: 0;
  cursor: help;
}
.glass-info:hover,
.glass-info:focus-visible{
  color: var(--accent);
  outline: none;
}

.glass-tooltip{
  position: absolute;
  right: 14px;
  top: calc(14px + 28px + 10px);
  width: max-content;
  max-width: min(360px, 86vw);
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(20,24,32,0.86);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(180,185,190,0.7);
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(0.78rem * 0.7);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  user-select: text;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 2000;
}
.glass-tooltip a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
/* Show on hover/focus and when pinned open */
.glass-info:hover + .glass-tooltip,
.glass-info:focus-visible + .glass-tooltip,
.glass-info.is-open + .glass-tooltip{
  opacity: 1;
  transform: translateY(0);
}
/* Allow selecting/copying only when pinned open */
.glass-info.is-open + .glass-tooltip{
  pointer-events: auto;
}
@media (max-width: 600px){
  .glass-info{ top: 10px; right: 10px; width: 26px; height: 26px; }
  .glass-tooltip{ right: 10px; top: calc(10px + 26px + 10px); max-width: min(360px, 90vw); }
}
:root{
  --bg:#071019;
  --panel:#0b1220;
  --muted:#9aa7b2;
  --accent:#eef1f3; /* soft white-ish accent */
  --glass: rgba(255,255,255,0.03);
  /* background overlay alpha (0 = transparent, 1 = opaque) */
  --bg-overlay-alpha: 0.35;
}

/* Local painter font (placed in assets/fonts/painter-font.ttf) */
@font-face{
  font-family: 'Painter';
  /* try local names first, then fall back to the TTF in the repo */
  src: local('Painter'), local('Painter-LxXg'), url('../fonts/painter-font/Painter-LxXg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #000;
  color: #dbe7ee;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background video wrapper (fixed behind page content) */
.bg-video-wrapper{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-1; /* behind everything */
  pointer-events:none; /* don't intercept clicks */
}
.bg-video{
  position:absolute;
  left:50%; top:50%;
  width:auto; height:120%;
  min-width:100%; min-height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  filter:brightness(0.95) saturate(1.05);
}
.bg-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,var(--bg-overlay-alpha)), rgba(0,0,0,var(--bg-overlay-alpha)) );
  pointer-events:none; z-index:1;
}

/* Small control to adjust overlay opacity (keeps low visual weight) */
.bg-controls{
  position:fixed; right:12px; top:72px; z-index:9999; background:rgba(0,0,0,0.35); padding:6px 8px; border-radius:6px; backdrop-filter: blur(6px);
}
.bg-controls input[type=range]{ width:120px; }


.hero{min-height:85vh; display:flex; align-items:center; margin-top:12px}
.accent{color:var(--accent);font-family:'Share Tech Mono', monospace}

.terminal-card{border-radius:12px; border:1px solid rgba(255,255,255,0.04); background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.terminal{font-family:'JetBrains Mono', monospace; font-size:0.95rem; min-height:180px;}
.output{max-height:240px; overflow:auto; padding:6px 8px;}
.output .line{white-space:pre-wrap; margin:2px 0; color:#cfd8e3}
.prompt-row{display:flex; gap:8px; align-items:center; padding:6px 8px; border-top:1px solid rgba(255,255,255,0.02);}
.prompt{color:var(--muted); min-width:120px; font-family:'JetBrains Mono', monospace}
.cmd-input{flex:1; background:transparent; border:0; outline:0; color:var(--accent); caret-color:var(--accent); font-family:'JetBrains Mono', monospace}
.cmd-input::placeholder{color:rgba(238,241,243,0.35)}

/* small focus ring */
.cmd-input:focus{box-shadow:0 0 0 2px rgba(238,241,243,0.08);}

.blinker{display:inline-block; width:8px; height:14px; background:var(--accent); margin-left:4px; vertical-align:middle; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Terminal color tokens (bash-like) */
.ps1{ color:#69d84f; font-weight:600 } /* green prompt */
.cmd-text{ color:var(--accent) }
.term-dir{ color:#4da6ff } /* blue for directories */
.term-exec{ color:#7fe77f } /* green for executables */
.term-error{ color:#ff6b6b; font-weight:600 } /* red for errors */
.term-meta{ color:#f7d070 } /* yellow-ish meta fields */

/* other page adjustments */
h1,h2,h3{color:#e6f7ff}
.card{background:transparent}

/* navbar ribbon style on large screens */
#site-navbar{
  border-bottom:1px solid rgba(255,255,255,0.04);
  min-height: 64px;
}
.navbar-brand.autograph{font-family: 'Share Tech Mono', monospace; letter-spacing:1px}

/* make nav links look ribbon-like on large screens */
@media (min-width:992px){
  #site-navbar .navbar-nav .nav-link{padding:1rem 1.25rem; border-radius:6px}
  #site-navbar .navbar-nav .nav-link:hover{background:rgba(255,255,255,0.02)}
}

/* Ensure nav looks correct even if Bootstrap isn't loaded immediately */
#site-navbar .navbar-nav{list-style:none; padding-left:0; margin:0;}
#site-navbar .navbar-nav .nav-item{display:block}
#site-navbar .navbar-nav .nav-link{ text-decoration:none; color:var(--muted); }
#site-navbar .navbar-nav .nav-link:visited{ color:var(--muted); }
#site-navbar .navbar-nav{display:flex; flex-direction:column; gap:6px}

@media(min-width:992px){
  #site-navbar .navbar-nav{flex-direction:row; gap:0}
}

/* Hamburger menu hover glow on small screens */
@media (max-width:991px){
  #site-navbar .navbar-nav .nav-link{
    color: var(--muted);
    border-radius: 0;
    transition: none;
  }
  #site-navbar .navbar-nav .nav-link:hover{
    color: #fff;
    text-decoration: underline;
    text-shadow: none;
    transform: none;
  }
}

/* Terminal wrapper: responsive and ~75% of viewport width */
.terminal-wrapper{
  width:75vw;           /* ~75% of the window */
  max-width:1200px;     /* reasonable cap on very wide screens */
  min-width:320px;      /* avoid being too small on tiny screens */
}

/* Ensure terminal card stretches to wrapper width */
.terminal-wrapper .terminal-card{ width:100%; }

/* Make output area responsive */
.terminal{ width:100%; box-sizing:border-box }
.output{ max-height:60vh; }

/* Glitch effect for brand */
/* Brand: simple, accessible styling (glitch removed) */
.autograph{
  display:inline-block;
  font-family: 'Painter', 'JetBrains Mono', 'Share Tech Mono', monospace;
  color:var(--accent);
  font-weight:600;
  letter-spacing:0.6px;
}



/* explicit class to force Painter font on the brand */
 .autograph-painter{
  font-family: 'Painter', 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-weight:normal;
  font-size:2.65rem;
  line-height:1;
  display:inline-block;
}

/* per-character container used for safe, non-shifting mutations */
.autograph{ white-space:nowrap; }
.autograph-char{
  display:inline-block;
  text-align:center;
  vertical-align:middle;
}


/* responsive tweaks */
@media (max-width:767px){
  .prompt{min-width:80px}
}

/* Mobile-specific adjustments */
@media (max-width:767px){
  /* make terminal area narrower and centered on small phones */
  .terminal-wrapper{ width:92vw; min-width:0; }
  .terminal-wrapper .terminal-card{ margin-left:auto; margin-right:auto; }
  /* reduce terminal font size ~20% for better fit */
  .terminal{ font-size:0.76rem; }
  .output{ max-height:50vh; }
  /* make project cards two per row on small screens, and 1 per row on extra-small */
  .cards{ grid-template-columns:repeat(2,1fr); gap:1.25rem; }
}

@media (max-width:420px){
  .cards{ grid-template-columns:repeat(1,1fr); }
  /* slightly tighter padding on the preview cards for tiny screens */
  .previewCard{ padding:1rem; }
}

.text-muted{color:var(--muted) !important}

/* Dunning–Kruger graph (site-themed) */
.dk-graph{ width:100%; max-width:800px; margin:0.75rem auto 1.25rem auto; position:relative; aspect-ratio: 800 / 420; min-height: 260px; }
.dk-graph canvas{ width:100%; height:100%; display:block; }
.dk-graph-caption{ text-align:center; font-size:0.9em; color:#9aa7b2; margin-top:0.35rem; }

/* Mobile legend (shown on small screens only) */
.dk-legend{ display:none; width:100%; max-width:800px; margin:0.5rem auto 0 auto; color: var(--muted); font-family:'JetBrains Mono', monospace; font-size:0.9em; box-sizing:border-box; }
.dk-legend-item{ display:flex; align-items:center; justify-content:flex-start; gap:0.5rem; margin:0.2rem 0; }
.dk-legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 2px 10px rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.18); }
.dk-legend-dot.dk-peak{ background:#ff6b6b; }
.dk-legend-dot.dk-valley{ background:#f7d070; }
.dk-legend-dot.dk-slope{ background:#69d84f; }
.dk-legend-dot.dk-plateau{ background:#4da6ff; }

.about-section p.dk-disclaimer{ font-size:0.72rem; line-height:1.25; color:var(--muted); margin-bottom:0; }

@media (max-width: 600px){
  .dk-graph{ min-height: 180px; margin:0.5rem auto 0.5rem auto; }
  .dk-graph-caption{ margin-top:0.2rem; }
  .dk-legend{ display:flex; flex-direction:column; align-items:flex-start; padding:0 0.5rem; }
  .about-section p.dk-disclaimer{ font-size:0.68rem; }
}

/* START of Copyrighted snippet */
/*
Copyright (c) 2026 by Robin (https://codepen.io/lessthanthree/pen/LENwGyZ)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

/* Project cards styles */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
}

.previewCard{
  --gutter:1.5rem;
  --brightness:0.85;
  --saturation:1.5;
  --frostRadius:1.5rem;
  padding:var(--gutter);
  border-radius:var(--gutter);
  aspect-ratio:4/3;
  width:100%;
  max-width:32rem;
  display:grid;
  justify-content:start;
  align-content:end;
  position:relative;
  background:#333;
  overflow:hidden;
  cursor:pointer;
  transition:transform 250ms ease-in-out;
}

.previewCard img{
  transition:transform 500ms ease-in-out;
}

.previewCard svg{
  transition:transform 250ms ease-in-out;
}

.previewCard:hover{
  transform:scale(1.05);
}
.previewCard:hover img{
  transform:scale(1.1);
}
.previewCard:hover svg{
  transform:scale(1.5);
}

/* Ensure responsive override placed after default .cards definition so it takes precedence */
@media (max-width:767px){
  .cards{ grid-template-columns:repeat(2,1fr) !important; gap:1.25rem !important; }
}
@media (max-width:420px){
  .cards{ grid-template-columns:repeat(1,1fr) !important; }
}

/* Reduce brand size slightly on smaller screens so the hamburger fits */
@media (max-width:991px){
  .autograph-painter{ font-size: calc(2.65rem * 0.85); }
}

/* Responsive brand size for mobile (defined earlier; duplicate removed) */

.previewCard::after{
  content:"";
  position:absolute;
  inset:-0.5rem;
  z-index:1;
  pointer-events:none;
  backdrop-filter: blur(var(--frostRadius)) saturate(var(--saturation)) brightness(var(--brightness));
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.5) 55%, black 75%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.5) 55%, black 75%);
}

.backdrop{
  position:absolute;
  object-fit:cover;
  pointer-events:none;
  user-select:none;
  width:100%;
  height:100%;
}

.content{
  position:relative;
  z-index:2;
  display:grid;
  bottom:0;
  justify-content:start;
  align-content:end;
  gap:0.5rem;
}

.title{
  font-size:1.7rem;
}

.category{
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:0.1rem;
  opacity:0.45;
}

.description{
  font-size:1.3rem;
  line-height:1.35;
  display:grid;
  grid-template-columns:1fr auto;
  place-content:start;
  gap:0.5rem;
}
.description p{
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.description span{
  transform:translateY(-0.1rem);
  font-size:4rem;
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
}
/* END of Copyrighted snippet */

/* ── Writeup page styles ────────────────────────────────────── */

/* Page layout — full viewport scroll */
.writeup-page{
  width: 100%;
  min-height: 100vh;
  overflow-y: auto;
  padding: 0 0 4rem 0;
  position: relative;
  z-index: 2;
}

html:has(.writeup-page),
html:has(.writeup-page) body{
  overflow: auto;
  height: auto;
}

/* Glass container for the writeup */
.writeup-container.glass-content{
  max-width: 860px;
  margin: 1rem auto 0 auto;
  padding: 2.5rem 3rem 3rem 3rem;
}

/* Back link */
.writeup-back{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  margin-bottom: 1.2rem;
}
.writeup-back:hover{
  color: #fff;
}
.writeup-back svg{
  flex-shrink: 0;
}

/* Header area */
.writeup-header{
  margin-bottom: 0;
}
.writeup-meta{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.writeup-badge{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25em 0.7em;
  border-radius: 4px;
  line-height: 1;
}
.writeup-badge--easy{
  background: rgba(105, 216, 79, 0.15);
  color: #7fe77f;
  border: 1px solid rgba(105, 216, 79, 0.25);
}
.writeup-badge--intermediate{
  background: rgba(247, 208, 112, 0.12);
  color: #f7d070;
  border: 1px solid rgba(247, 208, 112, 0.22);
}
.writeup-badge--hard{
  background: rgba(255, 107, 107, 0.12);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.22);
}
.writeup-badge--insane{
  background: rgba(180, 60, 255, 0.12);
  color: #c77dff;
  border: 1px solid rgba(180, 60, 255, 0.22);
}
.writeup-env{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.8;
}
.writeup-date{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.6;
  margin-left: auto;
}
.writeup-title{
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  color: #e6f7ff;
  margin: 0;
  line-height: 1.2;
}

/* Divider */
.writeup-divider{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 1.5rem 0;
}

/* ── Writeup body (rendered markdown) ───────────────────────── */

.writeup-body{
  color: #ffffffab;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
}

.writeup-body h2{
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  color: #ccccccd3;
  margin: 2rem 0 0.8rem 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.writeup-body h2:first-child{
  margin-top: 0;
}

.writeup-body h3{
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  color: #bbbbbbcc;
  margin: 1.5rem 0 0.5rem 0;
}

.writeup-body p{
  margin: 0.6rem 0;
}

.writeup-body a{
  color: #4da6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.writeup-body a:hover{
  color: #80c4ff;
}

/* Inline code */
.writeup-body code{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 0.15em 0.4em;
  color: #f7d070;
}

/* Code blocks */
.writeup-body pre{
  margin: 1rem 0;
  padding: 1rem 1.2rem;
  background: rgba(10, 12, 16, 0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.writeup-body pre code{
  background: none;
  border: none;
  padding: 0;
  color: #cfd8e3;
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Lists */
.writeup-body ul,
.writeup-body ol{
  padding-left: 1.4rem;
  margin: 0.6rem 0;
}
.writeup-body li{
  margin: 0.35rem 0;
}
.writeup-body li strong{
  color: #ccccccd3;
}

/* Images inside writeups */
.writeup-body img{
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* Blockquotes */
.writeup-body blockquote{
  border-left: 3px solid rgba(255,255,255,0.1);
  margin: 1rem 0;
  padding: 0.6rem 1rem;
  color: var(--muted);
  background: rgba(255,255,255,0.02);
  border-radius: 0 6px 6px 0;
}
.writeup-body blockquote p{
  margin: 0.3rem 0;
}

/* Tables */
.writeup-body table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.88rem;
}
.writeup-body th,
.writeup-body td{
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.writeup-body th{
  background: rgba(255,255,255,0.04);
  color: #ccccccd3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Horizontal rules in body */
.writeup-body hr{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 2rem 0;
}

/* Responsive writeup */
@media (max-width: 900px){
  .writeup-container.glass-content{
    max-width: 96vw;
    padding: 2rem 1.5rem 2rem 1.5rem;
  }
}
@media (max-width: 600px){
  .writeup-container.glass-content{
    max-width: 99vw;
    padding: 1.2rem 1rem 1.5rem 1rem;
    margin-top: 0.5rem;
  }
  .writeup-title{
    font-size: 1.5rem;
  }
  .writeup-body{
    font-size: 0.88rem;
  }
  .writeup-body h2{
    font-size: 1.2rem;
  }
  .writeup-body h3{
    font-size: 1rem;
  }
  .writeup-body pre{
    padding: 0.8rem;
    font-size: 0.78rem;
  }
}

/* Anchor card style — remove default link styling when cards are <a> tags */
a.previewCard{
  text-decoration: none;
  color: inherit;
  display: grid;
}

/* ── Projects page: search, filters, sort ──────────────────── */

.projects-controls{
  margin-bottom: 0.5rem;
}

.projects-search-row{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.projects-search-icon{
  position: absolute;
  left: 12px;
  color: var(--muted);
  opacity: 0.6;
  pointer-events: none;
}

.projects-search::placeholder{
  color: var(--muted);
  opacity: 0.5;
}

/* Sort button */
.projects-sort-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(10, 12, 16, 0.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.projects-sort-btn:hover{
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

/* Difficulty filter pills */
.projects-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.projects-filter-btn{
  padding: 0.3rem 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.projects-filter-btn:hover{
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}
.projects-filter-btn.is-active{
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

/* Difficulty-specific active colors */
.projects-filter-btn[data-difficulty="easy"].is-active{
  color: #7fe77f;
  background: rgba(105, 216, 79, 0.1);
  border-color: rgba(105, 216, 79, 0.25);
}
.projects-filter-btn[data-difficulty="medium"].is-active{
  color: #f7d070;
  background: rgba(247, 208, 112, 0.1);
  border-color: rgba(247, 208, 112, 0.22);
}
.projects-filter-btn[data-difficulty="hard"].is-active{
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.22);
}
.projects-filter-btn[data-difficulty="insane"].is-active{
  color: #c77dff;
  background: rgba(180, 60, 255, 0.1);
  border-color: rgba(180, 60, 255, 0.22);
}

/* No results */
.projects-no-results{
  text-align: center;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  opacity: 0.7;
  margin-top: 2rem;
}

/* Card date */
.card-date{
  position: absolute;
  bottom: var(--gutter, 1.5rem);
  right: var(--gutter, 1.5rem);
  z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
}

/* ── Tag selector ──────────────────────────────────────────── */

.projects-tag-selector-wrap{
  position: relative;
  flex-shrink: 0;
}

.projects-tag-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(10, 12, 16, 0.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.projects-tag-btn:hover{
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}

.tag-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: rgba(10, 12, 16, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  backdrop-filter: blur(14px);
  z-index: 100;
  padding: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.tag-dropdown-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tag-dropdown-item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tag-dropdown-item:hover{
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.tag-dropdown-item.is-selected{
  background: rgba(77, 166, 255, 0.12);
  color: #4da6ff;
}

/* Selected tag pills inside the search bar */
.projects-search-wrap{
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  flex: 1;
  padding-left: 2.2rem;
  background: rgba(10, 12, 16, 0.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.projects-search-wrap:focus-within{
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 2px rgba(238,241,243,0.06);
}

.selected-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.selected-tag-pill{
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15em 0.5em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(77, 166, 255, 0.12);
  color: #4da6ff;
  border: 1px solid rgba(77, 166, 255, 0.2);
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.3;
}

.selected-tag-remove{
  background: none;
  border: none;
  color: rgba(77, 166, 255, 0.6);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.1em;
  transition: color 0.15s;
}
.selected-tag-remove:hover{
  color: #ff6b6b;
}

/* Override search input styles — now inside the flex wrapper */
.projects-search{
  flex: 1;
  min-width: 80px;
  padding: 0.5rem 0.75rem 0.5rem 0.3rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: #dbe7ee;
  background: transparent;
  border: none;
  outline: none;
}

/* Responsive */
@media (max-width: 600px){
  .projects-search-row{
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  /* Search bar takes full width on its own row */
  .projects-search-wrap{
    flex: 1 1 100%;
    order: 1;
    padding-left: 2rem;
  }
  .projects-search-icon{
    left: 10px;
  }
  /* Tags + Sort stay side-by-side on the second row */
  .projects-tag-selector-wrap{
    order: 2;
  }
  .projects-sort-btn{
    order: 3;
    margin-left: auto;
  }
  .projects-filters{
    gap: 0.35rem;
  }
  .projects-filter-btn{
    font-size: 0.68rem;
    padding: 0.25rem 0.6rem;
  }
  /* Tag dropdown anchored left on mobile */
  .tag-dropdown{
    right: auto;
    left: 0;
    width: min(200px, 60vw);
  }
  /* Selected tag pills: smaller on mobile */
  .selected-tag-pill{
    font-size: 0.6rem;
    padding: 0.12em 0.4em;
  }
  /* Card date slightly smaller on mobile */
  .card-date{
    font-size: 0.6rem;
  }
  /* Shrink buttons slightly */
  .projects-tag-btn,
  .projects-sort-btn{
    font-size: 0.72rem;
    padding: 0.4rem 0.65rem;
  }
}

@media (max-width: 420px){
  /* Even tighter spacing on very small screens */
  .projects-search{
    font-size: 0.76rem;
    padding: 0.4rem 0.5rem 0.4rem 0.2rem;
  }
  .selected-tag-pill{
    font-size: 0.56rem;
  }
  .projects-filter-btn{
    font-size: 0.62rem;
    padding: 0.2rem 0.5rem;
  }
}

/* ── Writeup tags ──────────────────────────────────────────── */

.writeup-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.writeup-tag{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  background: rgba(77, 166, 255, 0.1);
  color: #4da6ff;
  border: 1px solid rgba(77, 166, 255, 0.18);
  line-height: 1.3;
}

@media (max-width: 600px){
  .writeup-tag{
    font-size: 0.62rem;
    padding: 0.15em 0.5em;
  }
}