/* ============================================================
   COMIC BOOK THEME — dark grey background / light text shades
   Loaded after resume.css and tweaks.css; overrides both.
   ============================================================ */

:root,
[data-theme="dark"] {
  --side-nav-width: 17rem;
  --profile-photo-size: 15rem;
  /* Google PhD sketch-box padding (4rem narrower than original 2.8rem horizontal). */
  --tagline-sketch-pad-top: 1.15rem;
  --tagline-sketch-pad-x: 2.4rem;
  --tagline-sketch-pad-bottom: 1.05rem;
  --tagline-font-size: 1.05rem;
  --tagline-title-font-size: 1.42rem;
  --comic-detail-font-size: 1.35rem;
  --black: #0a0a0a;
  --ink: #111111;
  --text-dark: #f0f0f0;
  --text-mid: #d0d0d0;
  --text-soft: #a8a8a8;
  --grey-border: #5a5a5a;
  --grey-light: #6a6a6a;
  --grey-bg: #2d2d2d;
  --grey-panel: #3a3a3a;
  --grey-paper: #242424;
  --white: #ffffff;
  --panel-text: #1a1a1a;
  --panel-text-mid: #333333;
  --panel-text-soft: #555555;
  --pop: #ff5e8e;
  --heading-color: #ffffff;
  --heading-stroke: 1px;
  --heading-shadow-1: 2px 2px 0 var(--black);
  --heading-shadow-2: 4px 4px 0 rgba(0, 0, 0, 0.4);
  --halftone-dot: rgba(255, 255, 255, 0.07);
  --nav-halftone-dot: rgba(255, 255, 255, 0.06);
  --nav-link-hover: #ffffff;
  --nav-shadow: rgba(0, 0, 0, 0.4);
  --profile-decor-color: #ffffff;
  --profile-decor-gap-fill: transparent;
  --font-display: 'Bangers', cursive;
  --font-body: 'Lexend', 'Segoe UI', sans-serif;
  --thought-bubble-z: 10000;
  /* About has no section-title sticker — nav tint tracks section bg, not heading-tint */
  --about-nav-tint: color-mix(in srgb, #263040 32%, #ffffff);
  /* swooping comic tails — border breaks at base, outline continues as one curved horn */
  --balloon-tail-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Cpath d='M 4 6 L 56 6 L 56 12 Q 50 28 22 38 Q 12 42 14 34 Q 17 24 4 12 Z' fill='%23ffffff'/%3E%3Cpath d='M 56 12 Q 50 28 22 38 Q 12 42 14 34 Q 17 24 4 12' fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* bottom-corner tails curving inward toward page centre (long — overlaps panel below) */
  --balloon-tail-bl-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 72'%3E%3Cpath d='M 2 4 L 20 4 L 20 10 Q 38 30 32 62 Q 28 70 24 62 Q 8 32 2 10 Z' fill='%23ffffff'/%3E%3Cpath d='M 20 10 Q 38 30 32 62 Q 28 70 24 62 Q 8 32 2 10' fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --balloon-tail-br-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 72'%3E%3Cpath d='M 30 4 L 48 4 L 48 10 Q 42 32 26 62 Q 22 70 18 62 Q 12 30 30 10 Z' fill='%23ffffff'/%3E%3Cpath d='M 48 10 Q 42 32 26 62 Q 22 70 18 62 Q 12 30 30 10' fill='none' stroke='%23111111' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Theme switch: halftone circular reveal via View Transitions ----
   The new theme snapshot is wiped in over the old one with a circle that grows
   from the toggle button. The leading edge dissolves through a band of comic
   polka dots (halftone hatching) into a soft feather, so the boundary reads as
   a smooth blur rather than a hard line. Origin/radius are set in theme.js. */

/* Registered so the gradient stop radii can actually interpolate in keyframes. */
@property --reveal-r {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

::view-transition-old(root),
::view-transition-new(root) {
  /* Disable the default cross-fade so the masked reveal reads cleanly. */
  animation: none;
  mix-blend-mode: normal;
}

html.theme-transitioning::view-transition-old(root) {
  z-index: 1;
}

html.theme-transitioning::view-transition-new(root) {
  z-index: 9999;

  --band: 90px;       /* width of the dotted / blurred transition zone */
  --dot-tile: 13px;   /* polka-dot grid spacing */
  --dot-fill: 4px;    /* polka-dot radius */
  --feather: 16px;    /* soft fade on the inner edge of the core */

  /* Three composited mask layers (top → bottom):
       core  — fully revealed interior, soft-feathered inner edge
       dots  — repeating polka-dot tile
       band  — ring that confines the dots to the leading edge
     final = core ∪ (dots ∩ band) */
  mask-image:
    radial-gradient(circle at var(--theme-x, 50%) var(--theme-y, 50%),
      #000 calc(var(--reveal-r) - var(--band)),
      transparent calc(var(--reveal-r) - var(--band) + var(--feather))),
    radial-gradient(circle,
      #000 var(--dot-fill),
      transparent calc(var(--dot-fill) + 1px)),
    radial-gradient(circle at var(--theme-x, 50%) var(--theme-y, 50%),
      transparent calc(var(--reveal-r) - var(--band)),
      #000 calc(var(--reveal-r) - var(--band) + 6px),
      #000 calc(var(--reveal-r) - 6px),
      transparent var(--reveal-r));
  mask-size: 100% 100%, var(--dot-tile) var(--dot-tile), 100% 100%;
  mask-repeat: no-repeat, repeat, no-repeat;
  mask-position:
    0 0,
    var(--theme-x, 50%) var(--theme-y, 50%),
    0 0;
  mask-composite: add, intersect, add;

  animation: theme-halftone-reveal 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes theme-halftone-reveal {
  from {
    --reveal-r: 0px;
  }
  to {
    --reveal-r: var(--theme-r, 2000px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning::view-transition-new(root),
  html.theme-transitioning::view-transition-old(root) {
    animation: none;
    mask-image: none;
  }
}

/* Dark/light toggles: peel the button out of the root snapshot so it sits above
   the halftone reveal. Noir intro keeps the button in-root (below the mask). */
html.theme-transitioning.theme-transition-toggle-above #theme-toggle {
  view-transition-name: theme-toggle;
}

html.theme-transitioning.theme-transition-toggle-above ::view-transition-group(theme-toggle) {
  z-index: 10000;
}

html.theme-transitioning.theme-transition-toggle-above ::view-transition-old(theme-toggle),
html.theme-transitioning.theme-transition-toggle-above ::view-transition-new(theme-toggle) {
  animation: none;
  mix-blend-mode: normal;
}

/* During mobile theme transitions, pin sticky nav as fixed so the root
   snapshot captures it at the viewport top (sticky breaks when scrolled). */
@media (max-width: 991.98px) {
  #sideNav.theme-transition-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .theme-transition-nav-spacer {
    pointer-events: none;
  }
}

/* SVG holds only filter <defs>; collapse it so it never occupies layout space
   (an unsized inline SVG otherwise defaults to ~150px tall at the top of body). */
.profile-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Dark grey background with halftone dots ---------- */

.halftone-cursor-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

section.resume-section > .halftone-cursor-canvas {
  z-index: 1;
}

#sideNav > .halftone-cursor-canvas {
  z-index: 0;
}

section.resume-section > :not(.halftone-cursor-canvas) {
  position: relative;
  z-index: 6;
}

html.halftone-cursor-active body {
  background-image: none;
}

html.halftone-cursor-active #sideNav {
  background-image: none;
}

html.halftone-cursor-active section.resume-section {
  background-image: none;
}

html.halftone-cursor-active section.resume-section:not(#about)::before {
  background-image: none;
}

html.halftone-cursor-active section.resume-section:not(#about)::after {
  background-image: none !important;
}

body {
  background-color: var(--grey-bg);
  background-image: radial-gradient(circle, var(--halftone-dot) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  color: var(--text-mid);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.55;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Fluid root font-size: the whole rem-based layout scales down proportionally
   as the window narrows, so elements shrink toward the centre instead of
   reflowing/overflowing on narrow vertical windows. Kicks in below ~560px,
   floored at 10px so text stays legible. */
@media (max-width: 560px) {
  html {
    font-size: clamp(10px, 2.85vw, 16px);
  }
}

/* Fluid root font-size on large screens: two tiers so 1080p stays at 16px.
   QHD ramps gently (1920px+); 4K gets the full cap (2560px+). */
@media (min-width: 1920px) {
  html {
    font-size: clamp(16px, calc(10px + 0.35vw), 20px);
  }
}

@media (min-width: 2560px) {
  html {
    font-size: clamp(18px, calc(11px + 0.38vw), 23px);
  }
}

@media (min-width: 3840px) {
  html {
    font-size: clamp(20px, calc(12px + 0.35vw), 26px);
  }
}

/* Name stays on ONE line at every width — shrinks with the viewport instead of
   wrapping the surname onto a second line, mirroring the wide layout. */
.about-name {
  --name-chroma-x: 2px;
  --name-chroma-y: 0.9px;
  --name-chroma-alpha: 0.72;
  --name-chroma-boil-mx: 0px;
  --name-chroma-boil-my: 0px;
  --name-chroma-boil-cx: 0px;
  --name-chroma-boil-cy: 0px;
  --name-chroma-boil-alpha: 1;
  white-space: nowrap;
}
.about-name .text-primary {
  font-size: min(4rem, 8.5vw);
}

.about-name .name-chroma {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.about-name .name-chroma::before,
.about-name .name-chroma::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  -webkit-text-stroke: inherit;
  text-shadow: none;
  pointer-events: none;
  user-select: none;
}

.about-name .name-chroma::before {
  color: #ff3bd4;
  opacity: calc(var(--name-chroma-alpha) * var(--name-chroma-boil-alpha));
  transform: translate(
    calc(-1 * var(--name-chroma-x) + var(--name-chroma-boil-mx)),
    calc(-1 * var(--name-chroma-y) + var(--name-chroma-boil-my))
  );
  z-index: -1;
}

.about-name .name-chroma::after {
  color: #00e5ff;
  opacity: calc(var(--name-chroma-alpha) * var(--name-chroma-boil-alpha));
  transform: translate(
    calc(var(--name-chroma-x) + var(--name-chroma-boil-cx)),
    calc(var(--name-chroma-y) + var(--name-chroma-boil-cy))
  );
  z-index: -1;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--heading-color);
  letter-spacing: 0.06em;
  -webkit-text-stroke: var(--heading-stroke) var(--ink);
  text-shadow: var(--heading-shadow-1), var(--heading-shadow-2);
}

h1 {
  color: var(--heading-color);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow:
    3px 3px 0 var(--black),
    6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Comic speech balloons ---------- */

section.resume-section h2,
.comic-tagline,
#experience-list .resume-item,
.comic-entry,
.tuning-controls,
.glint-controls,
.comic-controls,
.resume-section blockquote {
  position: relative;
  overflow: visible;
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: 28px;
  /* edge-light shading: black shadow hugging the balloon, pink rim peeking beyond.
     drop-shadow (not box-shadow) so the speech tails cast shadow too. */
  box-shadow: none;
  filter: drop-shadow(5px 5px 0 var(--black)) drop-shadow(4px 4px 0 var(--section-pop, var(--pop)));
}

.comic-tagline,
#experience-list .resume-item,
.comic-entry {
}

/* panels inherit section tint from parent section */
section.resume-section .comic-tagline,
section.resume-section #experience-list .resume-item,
section.resume-section .comic-entry,
section.resume-section blockquote {
  background: var(--section-panel, var(--white));
}

section.resume-section h2::before,
section.resume-section h2::after,
.comic-tagline::before,
.comic-tagline::after,
#experience-list .resume-item::before,
#experience-list .resume-item::after,
.comic-entry::before,
.comic-entry::after,
.tuning-controls::before,
.tuning-controls::after,
.glint-controls::before,
.glint-controls::after,
.comic-controls::before,
.comic-controls::after,
.resume-section blockquote::before,
.resume-section blockquote::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* hide legacy outline layer — single SVG tail handles fill + ink stroke */
section.resume-section h2::before,
.comic-tagline::before,
.tuning-controls::before,
.glint-controls::before,
.comic-controls::before,
.resume-section blockquote::before,
#experience-list .resume-item::before,
.comic-entry::before {
  display: none;
}

/* section headings are sticker boxes — no tail */
section.resume-section h2::after {
  display: none;
}

/* curved tail — default bottom-center (tagline, tuning, quotes) */
.comic-tagline::after,
.tuning-controls::after,
.glint-controls::after,
.comic-controls::after,
.resume-section blockquote::after {
  bottom: -30px;
  left: 34px;
  right: auto;
  top: auto;
  width: 60px;
  height: 44px;
  border: none;
  background: var(--balloon-tail-bottom) center / 100% 100% no-repeat;
}

/* alternating panels: bottom-corner tails curving inward */
#experience-list .resume-item::after,
.comic-entry::after {
  top: auto;
  bottom: -54px;
  width: 50px;
  height: 72px;
  border: none;
  z-index: 2;
}

#experience-list .resume-item:nth-child(odd) {
  width: var(--xp-bubble-width, 94%);
  margin-left: 0;
  margin-right: auto;
  transform: rotate(calc(-1 * var(--xp-alt-tilt, 0.5deg))) translateX(calc(-1 * var(--xp-alt-offset, 16px)));
}

.comic-entry:nth-child(odd) {
  width: 94%;
  margin-left: 0;
  margin-right: auto;
  transform: rotate(-0.5deg) translateX(-16px);
}

#experience-list .resume-item:nth-child(even) {
  width: var(--xp-bubble-width, 94%);
  margin-left: auto;
  margin-right: 0;
  transform: rotate(var(--xp-alt-tilt, 0.5deg)) translateX(var(--xp-alt-offset, 16px));
}

.comic-entry:nth-child(even) {
  width: 94%;
  margin-left: auto;
  margin-right: 0;
  transform: rotate(0.5deg) translateX(16px);
}

/* odd (left): bottom-left corner, curves inward toward centre */
#experience-list .resume-item:nth-child(odd)::after,
.comic-entry:nth-child(odd)::after {
  left: 22px;
  right: auto;
  background: var(--balloon-tail-bl-in) center / 100% 100% no-repeat;
  transform: none;
}

/* even (right): bottom-right corner, curves inward toward centre */
#experience-list .resume-item:nth-child(even)::after,
.comic-entry:nth-child(even)::after {
  right: 22px;
  left: auto;
  background: var(--balloon-tail-br-in) center / 100% 100% no-repeat;
  transform: none;
}

/* section speech balloons: accent rim only by default; black shadow + pop on hover */
section.resume-section .comic-entry,
section.resume-section #experience-list .resume-item {
  filter: drop-shadow(4px 4px 0 var(--section-pop, var(--pop)));
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* hand-drawn emphasis accents that boil on hover */
.bubble-accents {
  position: absolute;
  top: -18px;
  left: -18px;
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.12s ease;
}

[data-theme="light"] .bubble-accents {
  color: #000000;
}

.bubble-accents-on > .bubble-accents {
  opacity: 1;
}

section.resume-section .comic-entry:nth-child(odd):hover,
section.resume-section .comic-entry:nth-child(odd).is-auto-hovered {
  transform: rotate(-0.5deg) translateX(-16px) translate(-4px, -4px);
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(5px 5px 0 var(--section-pop, var(--pop)));
}

section.resume-section #experience-list .resume-item:nth-child(odd):hover,
section.resume-section #experience-list .resume-item:nth-child(odd).is-auto-hovered {
  transform:
    rotate(calc(-1 * var(--xp-alt-tilt, 0.5deg)))
    translateX(calc(-1 * var(--xp-alt-offset, 16px)))
    translate(calc(-1 * var(--xp-hover-lift, 4px)), calc(-1 * var(--xp-hover-lift, 4px)));
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(5px 5px 0 var(--section-pop, var(--pop)));
}

section.resume-section .comic-entry:nth-child(even):hover,
section.resume-section .comic-entry:nth-child(even).is-auto-hovered {
  transform: rotate(0.5deg) translateX(16px) translate(-4px, -4px);
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(5px 5px 0 var(--section-pop, var(--pop)));
}

/* Publications: flat by default; ink + pop rim on hover only */
#publications-list .comic-entry {
  filter: none;
}

section.resume-section #publications-list .comic-entry:nth-child(odd):hover,
section.resume-section #publications-list .comic-entry:nth-child(odd).is-auto-hovered {
  transform: rotate(-0.5deg) translateX(-16px) translate(-4px, -4px);
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(5px 5px 0 var(--section-pop, var(--pop)));
}

section.resume-section #publications-list .comic-entry:nth-child(even):hover,
section.resume-section #publications-list .comic-entry:nth-child(even).is-auto-hovered {
  transform: rotate(0.5deg) translateX(16px) translate(-4px, -4px);
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(5px 5px 0 var(--section-pop, var(--pop)));
}

section.resume-section #experience-list .resume-item:nth-child(even):hover,
section.resume-section #experience-list .resume-item:nth-child(even).is-auto-hovered {
  transform:
    rotate(var(--xp-alt-tilt, 0.5deg))
    translateX(var(--xp-alt-offset, 16px))
    translate(calc(-1 * var(--xp-hover-lift, 4px)), calc(-1 * var(--xp-hover-lift, 4px)));
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(5px 5px 0 var(--section-pop, var(--pop)));
}

/* slanted sticker box: sharp corners, section-tinted offset layer with ink rim */
section.resume-section h2 {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--panel-text);
  background: var(--section-heading-tint, var(--white));
  -webkit-text-stroke: 0.5px var(--ink);
  font-size: 2.1rem;
  padding: 0.21rem 1.02rem 0.33rem;
  border-radius: 4px;
  transform: rotate(-2.5deg) skewX(-6deg);
  text-shadow: 1.2px 1.2px 0 rgba(0, 0, 0, 0.08);
  margin-bottom: var(--panel-gap, 2rem) !important;
  filter:
    drop-shadow(4.8px 4.8px 0 var(--section-heading-tint, var(--white)))
    drop-shadow(3px 3px 0 var(--section-pop, var(--pop)))
    drop-shadow(3px 3px 0 var(--ink));
}

/* uniform gap after section titles and speech balloons */
section.resume-section .comic-entry,
section.resume-section #experience-list > .resume-item {
  margin-bottom: var(--panel-gap, 2rem) !important;
}

/* ============================================================
   EXPERIENCE: rounded speech-bubble chain (experience only)
   ============================================================ */
section.resume-section #experience-list {
  --xp-line: var(--section-pop, var(--pop));
  --xp-line-soft: color-mix(in srgb, var(--section-pop, var(--pop)) 50%, transparent);
  --xp-bubble-gap: 26px;
  --xp-bubble-width: 94%;
  --xp-chain-padding: clamp(2.14rem, 8.55vw, 5.7rem);
  --xp-alt-tilt: 0.5deg;
  --xp-alt-offset: 16px;
  --xp-connector-loc: 26%;
  --xp-hover-lift: 4px;
  transform-origin: center top;
}

/* hand-drawn wobbly border shell (SVG replaces CSS border) */
section.resume-section #experience-list > .resume-item.xp-sketch-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.xp-sketch-box-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  color: var(--ink, #111);
}

.xp-sketch-box-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* the bubble shell */
section.resume-section #experience-list > .resume-item {
  background-color: #ffffff !important;
  border: 3px solid var(--ink, #111) !important;
  border-radius: 48px !important;
  /* invisible drop-shadow forces an anti-aliased render layer so the rotated
     border edges stay smooth (no visible shadow). */
  filter: drop-shadow(0 0 0 transparent) !important;
  box-shadow: none !important;
  background-image: none;
  margin-bottom: var(--xp-bubble-gap, 26px) !important;
}
/* inline boil-animated corner accent SVG (bottom-right only) */
.xp-accent {
  position: absolute;
  width: 24px;
  height: 26px;
  color: var(--section-pop, #50dc96);
  pointer-events: none;
  overflow: visible;
  bottom: 20px;
  z-index: 20;
}
.xp-accent--right { right: 28px; }

section.resume-section #experience-list > .resume-item:last-child {
  margin-bottom: var(--panel-gap, 2rem) !important;
}

/* later bubbles stack above earlier ones so the connector can paint on top */
section.resume-section #experience-list > .resume-item {
  z-index: counter(panel-stack) !important;
}

/* First bubble has no visible ::after connector, so the transparent
   drop-shadow gets optimised away and it never gets its own anti-aliased
   layer. will-change forces a persistent compositing layer to smooth the
   rotated border — scoped to :first-child only, nothing else changes. */
section.resume-section #experience-list > .resume-item:first-child {
  will-change: transform;
}

/* gap notch at the bottom — white stripe that covers the border where the
   connector attaches, creating the "opening" in the reference style. */
section.resume-section #experience-list > .resume-item:not(:last-child)::before {
  display: block !important;
  top: auto;
  bottom: -3px;
  width: 40px;
  height: 9px;
  background: #ffffff;
  border: none;
  border-radius: 0;
  z-index: 10;
}
section.resume-section #experience-list > .resume-item:nth-child(odd):not(:last-child)::before {
  left: auto;
  right: var(--xp-connector-loc, 26%);
}
section.resume-section #experience-list > .resume-item:nth-child(even):not(:last-child)::before {
  right: auto;
  left: var(--xp-connector-loc, 26%);
}
/* last bubble: no gap needed */
section.resume-section #experience-list > .resume-item:last-child::before {
  display: none !important;
}

/* Throat connector on the LOWER bubble (::after at top) so it stacks above
   both bubbles. Single SVG with all layers baked in — white fill, 3px outer
   ring (#50dc96), 1.6px inner ring (50% opacity). */
section.resume-section #experience-list > .resume-item:not(:first-child)::after {
  display: block !important;
  top: -40px;
  bottom: auto;
  width: 32px;
  height: 52px;
  z-index: 100 !important;
  border: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 52'%3E%3Cpath d='M11 1 C11 17 9 35 6 51 L22 51 C21 35 23 17 27 1 Z' fill='%23ffffff'/%3E%3Cpath d='M11 0 C11 17 9 35 6 52' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='butt'/%3E%3Cpath d='M27 0 C23 17 21 35 22 52' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='butt'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}
/* even / odd positions — SVG images injected by experience-tail.js */
section.resume-section #experience-list > .resume-item:nth-child(even)::after {
  right: auto;
  left: var(--xp-connector-loc, 26%);
}
section.resume-section #experience-list > .resume-item:nth-child(odd):not(:first-child)::after {
  left: auto;
  right: var(--xp-connector-loc, 26%);
}
/* first bubble has no connector above it */
section.resume-section #experience-list > .resume-item:first-child::after {
  display: none !important;
}

/* no visible shadow on hover, but keep the smoothing layer */
section.resume-section #experience-list .resume-item:nth-child(odd):hover,
section.resume-section #experience-list .resume-item:nth-child(odd).is-auto-hovered,
section.resume-section #experience-list .resume-item:nth-child(even):hover,
section.resume-section #experience-list .resume-item:nth-child(even).is-auto-hovered {
  filter: drop-shadow(0 0 0 transparent) !important;
}

/* dark, readable text on the white bubble in BOTH themes */
section.resume-section #experience-list > .resume-item h3,
section.resume-section #experience-list > .resume-item .exp-company-title,
section.resume-section #experience-list > .resume-item .exp-company-text,
#experience-list .resume-item h3,
#experience-list .exp-company-title,
#experience-list .exp-company-text {
  color: var(--ink, #111) !important;
  font-weight: 700;
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

section.resume-section #experience-list > .resume-item .subheading {
  color: var(--xp-line, var(--section-pop, var(--pop))) !important;
  font-weight: 700;
}
section.resume-section #experience-list > .resume-item p {
  color: #4a4452 !important;
}

/* date badge restyled to match the section bubble color */
#experience .resume-date .text-primary {
  color: #ffffff !important;
  background: var(--xp-line);
  border-color: var(--xp-line);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--xp-line) 35%, transparent);
}

.subheading {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
  color: var(--text-mid);
  font-size: 1.15rem;
  font-weight: 600;
}

p, span, li {
  color: var(--text-mid);
  font-family: var(--font-body);
}

/* ---------- Sections — each gets its own tone ---------- */

section.resume-section {
  --section-bg: var(--grey-bg);
  --section-dot: rgba(255, 255, 255, 0.07);
  --section-pop: var(--pop);
  --section-panel: var(--white);
  --section-heading-tint: var(--white);
  --panel-gap: 4rem;
  position: relative;
  z-index: 0;
  background-color: var(--section-bg);
  background-image: radial-gradient(circle, var(--section-dot) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  border-bottom: none;
  padding: 3rem 1.5rem !important;
  transition: background-color 0.25s ease;
}

/* ---------- Torn-paper divider between sections ----------
   Each section (except the first) rips upward over the one above:
   ::before = this section's coloured paper flap, masked to a jagged
   torn top edge; ::after = the black ink line drawn along the tear. */
section.resume-section:not(#about)::before,
section.resume-section:not(#about)::after {
  content: "";
  position: absolute;
  top: -34px;
  left: 0;
  right: 0;
  height: 66px;
  pointer-events: none;
}

section.resume-section:not(#about)::before {
  z-index: 2;
  background-color: var(--section-bg);
  background-image: radial-gradient(circle, var(--section-dot) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  -webkit-mask: var(--section-tear-fill) top center / 100% 100% no-repeat;
  mask: var(--section-tear-fill) top center / 100% 100% no-repeat;
}

section.resume-section:not(#about)::after {
  z-index: 3;
  background: var(--section-tear-line) top center / 100% 100% no-repeat;
}

/* Torn-paper edge closing off the very bottom of the page (after Projects).
   Height, overlap and the baked SVG are supplied by section-tear.js so it
   tracks the live tear appearance, theme and viewport width. */
#page-end-tear {
  position: relative;
  z-index: 2;
  left: 0;
  right: 0;
  height: 66px;
  margin-top: -34px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

:root {
  --section-tear-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 58 L22 50 L34 63 L40 41 L69 55 L88 68 L96 47 L121 60 L130 33 L145 57 L176 49 L189 70 L201 44 L223 58 L241 28 L252 61 L270 52 L298 66 L309 39 L332 59 L351 71 L360 46 L388 57 L404 31 L417 60 L443 53 L466 67 L478 43 L501 58 L519 26 L530 62 L556 51 L573 69 L585 45 L611 59 L629 35 L640 58 L668 50 L685 67 L697 42 L722 60 L740 29 L751 57 L778 52 L795 70 L808 46 L833 58 L852 33 L863 61 L889 51 L905 68 L918 44 L944 59 L962 27 L973 60 L1000 52 L1016 67 L1029 41 L1055 58 L1073 36 L1085 59 L1112 50 L1128 69 L1141 45 L1167 58 L1185 31 L1200 56 L1200 120 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  --section-tear-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 58 L22 50 L34 63 L40 41 L69 55 L88 68 L96 47 L121 60 L130 33 L145 57 L176 49 L189 70 L201 44 L223 58 L241 28 L252 61 L270 52 L298 66 L309 39 L332 59 L351 71 L360 46 L388 57 L404 31 L417 60 L443 53 L466 67 L478 43 L501 58 L519 26 L530 62 L556 51 L573 69 L585 45 L611 59 L629 35 L640 58 L668 50 L685 67 L697 42 L722 60 L740 29 L751 57 L778 52 L795 70 L808 46 L833 58 L852 33 L863 61 L889 51 L905 68 L918 44 L944 59 L962 27 L973 60 L1000 52 L1016 67 L1029 41 L1055 58 L1073 36 L1085 59 L1112 50 L1128 69 L1141 45 L1167 58 L1185 31 L1200 56' fill='none' stroke='%23111111' stroke-width='6' stroke-linejoin='miter' stroke-miterlimit='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* about — cool blue */
#about {
  --section-bg: #263040;
  --section-dot: rgba(94, 184, 255, 0.14);
  --section-pop: #4da8ff;
  --section-panel: #f6faff;
  --section-heading-tint: #eef6ff;
  overflow: visible;
}

/* Thought-bubble stacking only — panel boil/pop :hover + .is-auto-hovered rules below are untouched. */
#about.about-thought-bubble-raised {
  z-index: var(--thought-bubble-z) !important;
  overflow: visible;
}

@media (hover: hover) and (pointer: fine) {
  /* Fallback lift via :hover; touch uses .is-auto-hovered + JS about-thought-bubble-raised. */
  #about:has(.about-social-row .list-inline-item:has(.email-thought-bubble):is(:hover, :focus-within, :has(.is-auto-hovered))) {
    z-index: var(--thought-bubble-z) !important;
    overflow: visible;
  }
}

/* achievements — rose gold */
#achievements {
  --section-bg: #342830;
  --section-dot: rgba(255, 130, 160, 0.14);
  --section-pop: #ff82a0;
  --section-panel: #fff5f7;
  --section-heading-tint: #ffe8ed;
  --panel-gap: 1.15rem;
}

#achievements [data-load-reveal="ach-heading"] h2 {
  margin-bottom: var(--ach-heading-gap, 1.35rem) !important;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--ach-list-gap, 0);
  width: 100%;
  max-width: var(--ach-list-max-width, 34rem);
  padding: 0 1rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.achievement-burst-host {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
  box-sizing: border-box;
}

.achievement-burst-host + .achievement-burst-host {
  margin-top: calc(-1 * var(--ach-stack-overlap, 0rem));
}

.achievement-burst-host .pub-burst-accent {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: visible;
}

.achievement-burst-host:nth-child(odd) {
  transform: translateX(calc(-1 * var(--ach-stagger, 0.2rem)));
}

.achievement-burst-host:nth-child(even) {
  transform: translateX(var(--ach-stagger, 0.2rem));
}

#achievements .pub-burst-label {
  font-family: var(--font-body);
  font-weight: 600;
}

#achievements .pub-burst-label__pop,
#achievements .pub-burst-label__ink {
  pointer-events: none;
}

/* publications — violet */
#Publications {
  --section-bg: #2e2838;
  --section-dot: rgba(180, 120, 255, 0.14);
  --section-pop: #b878ff;
  --section-panel: #faf6ff;
  --section-heading-tint: #f3ebff;
  --panel-gap: 1.5rem;
}

#Publications .section-heading-block {
  --pub-subtitle-gap: 15px;
}

#Publications .section-heading-block h2 {
  margin-bottom: var(--pub-subtitle-gap, 15px) !important;
}

#Publications .section-subtitle.pub-subtitle-chroma {
  --pub-sub-chroma-x: 2px;
  --pub-sub-chroma-y: 0.35px;
  --pub-sub-chroma-alpha: 0.72;
  --pub-sub-chroma-boil-mx: 0px;
  --pub-sub-chroma-boil-my: 0px;
  --pub-sub-chroma-boil-cx: 0px;
  --pub-sub-chroma-boil-cy: 0px;
  --pub-sub-chroma-boil-alpha: 1;
  --pub-subtitle-font-size: 1.05rem;
  --pub-subtitle-bg-mix: 90%;
  --pub-subtitle-max-width: 42rem;
  max-width: var(--pub-subtitle-max-width);
  font-size: var(--pub-subtitle-font-size);
  background: color-mix(in srgb, var(--section-heading-tint, #f3ebff) var(--pub-subtitle-bg-mix), transparent);
}

#Publications .pub-subtitle-chroma__text {
  position: relative;
  display: block;
  color: var(--ink, #111);
  text-shadow: none;
}

[data-theme="dark"] #Publications .pub-subtitle-chroma__text,
[data-theme="dark"] #Publications .section-subtitle {
  color: var(--white, #fff);
}

#Publications .pub-subtitle-chroma__text::before,
#Publications .pub-subtitle-chroma__text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: inherit;
  white-space: normal;
  pointer-events: none;
  user-select: none;
}

#Publications .pub-subtitle-chroma__text::before {
  color: #ff2d6e;
  opacity: calc(var(--pub-sub-chroma-alpha) * var(--pub-sub-chroma-boil-alpha));
  transform: translate(
    calc(-1 * var(--pub-sub-chroma-x) + var(--pub-sub-chroma-boil-mx)),
    calc(-1 * var(--pub-sub-chroma-y) + var(--pub-sub-chroma-boil-my))
  );
  z-index: -1;
}

#Publications .pub-subtitle-chroma__text::after {
  color: #2dc3ff;
  opacity: calc(var(--pub-sub-chroma-alpha) * var(--pub-sub-chroma-boil-alpha));
  transform: translate(
    calc(var(--pub-sub-chroma-x) + var(--pub-sub-chroma-boil-cx)),
    calc(var(--pub-sub-chroma-y) + var(--pub-sub-chroma-boil-cy))
  );
  z-index: -1;
}

#Publications .section-subtitle {
  margin: 0 auto var(--panel-gap, 1.5rem);
  padding: 0.35rem 0.85rem;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  border-radius: 4px;
}

/* experience — mint green */
#experience {
  --section-bg: #283830;
  --section-dot: rgba(80, 220, 150, 0.14);
  --section-pop: #50dc96;
  --section-panel: #f4fff8;
  --section-heading-tint: #e8fff0;
}

/* projects — warm amber */
#projects {
  --section-bg: #383028;
  --section-dot: rgba(255, 180, 80, 0.14);
  --section-pop: #ffb450;
  --section-panel: #fffaf2;
  --section-heading-tint: #fff4e0;
}

#experience-content,
#projects-content > .my-auto,
.publication-content {
  background: transparent;
}

#experience-list,
#publications-list,
#projects-list {
  overflow: visible;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  counter-reset: panel-stack;
}

/* experience chain horizontal inset is driven by --xp-chain-padding on #experience-list */
section.resume-section #experience-list {
  padding-left: var(--xp-chain-padding, clamp(2.14rem, 8.55vw, 5.7rem));
  padding-right: var(--xp-chain-padding, clamp(2.14rem, 8.55vw, 5.7rem));
}

#experience-list .resume-item,
.comic-entry {
  counter-increment: panel-stack;
  z-index: calc(120 - counter(panel-stack));
}

/* ============================================================
   PROJECTS: one comic panel split by hand-drawn zig-zag dividers
   ============================================================ */
#projects-list {
  border: none !important;
  background: transparent;
  padding: 0 !important;
  overflow: visible;
}

/* each project is a detached torn sheet — white fill, no balloon/tail/rotation */
#projects-list > .comic-entry {
  border: none !important;
  border-radius: 0 !important;
  background: var(--section-panel, #fff) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 1.3rem 1.7rem !important;
  z-index: auto !important;
}
#projects-list > .comic-entry::before,
#projects-list > .comic-entry::after {
  display: none !important;
}
#projects-list > .comic-entry:hover,
#projects-list > .comic-entry.is-auto-hovered {
  transform: none !important;
}

/* zig-zag divider band between subpanels — the comic gutter */
.project-divider {
  position: relative;
  width: 100%;
  height: 38px;
  line-height: 0;
  pointer-events: none;
  overflow: visible;
}

/* ---------- Side nav ---------- */

.bg-primary {
  background-color: var(--grey-paper) !important;
}

#sideNav {
  --nav-link-max-height: 4rem;
  --nav-item-gap: 0.85rem;
  border-right: 5px solid var(--ink);
  box-shadow: 6px 0 0 var(--nav-shadow);
  background-image: radial-gradient(circle, var(--nav-halftone-dot) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}

#sideNav .navbar-brand,
#sideNav .navbar-brand span {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--white) !important;
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 var(--black);
}

#sideNav .navbar-nav .nav-item .nav-link {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400 !important;
  letter-spacing: 0.1em;
  color: var(--text-soft);
  text-shadow: none;
  -webkit-text-stroke: 0.4px currentColor;
  background: transparent;
  box-shadow: none;
  border: 3px solid transparent;
  border-radius: 6px;
  padding: 0.2rem 0.75rem;
  max-height: var(--nav-link-max-height);
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.12s ease, color 0.12s ease,
              background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

/* hover: brighten only — no highlight box */
#sideNav .navbar-nav .nav-item .nav-link:hover:not(.active),
#sideNav .navbar-nav .nav-item .nav-link:focus:not(.active),
#sideNav .navbar-nav .nav-item .nav-link.is-auto-hovered:not(.active) {
  color: var(--nav-link-hover);
  background: transparent;
  box-shadow: none;
  transform: rotate(-2deg) scale(1.08);
}

/* active section: sticker box tinted to match current section */
#sideNav .navbar-nav .nav-item .nav-link.active,
#sideNav .navbar-nav .nav-item .nav-link.active:hover,
#sideNav .navbar-nav .nav-item .nav-link.active:focus {
  color: var(--panel-text);
  background: var(--white);
  border-color: var(--ink);
  text-shadow: none;
  -webkit-text-stroke: 0;
  transform: rotate(-2deg) skewX(-6deg) scale(1.05);
  filter: drop-shadow(3px 3px 0 var(--ink));
}

#sideNav .navbar-nav .nav-item .nav-link.active[href="#about"],
#sideNav .navbar-nav .nav-item .nav-link.active[href="#about"]:hover,
#sideNav .navbar-nav .nav-item .nav-link.active[href="#about"]:focus {
  background: var(--about-nav-tint);
}

#sideNav .navbar-nav .nav-item .nav-link.active[href="#achievements"],
#sideNav .navbar-nav .nav-item .nav-link.active[href="#achievements"]:hover,
#sideNav .navbar-nav .nav-item .nav-link.active[href="#achievements"]:focus {
  background: #ffe8ed;
}

#sideNav .navbar-nav .nav-item .nav-link.active[href="#Publications"],
#sideNav .navbar-nav .nav-item .nav-link.active[href="#Publications"]:hover,
#sideNav .navbar-nav .nav-item .nav-link.active[href="#Publications"]:focus {
  background: #f3ebff;
}

#sideNav .navbar-nav .nav-item .nav-link.active[href="#experience"],
#sideNav .navbar-nav .nav-item .nav-link.active[href="#experience"]:hover,
#sideNav .navbar-nav .nav-item .nav-link.active[href="#experience"]:focus {
  background: #e8fff0;
}

#sideNav .navbar-nav .nav-item .nav-link.active[href="#projects"],
#sideNav .navbar-nav .nav-item .nav-link.active[href="#projects"]:hover,
#sideNav .navbar-nav .nav-item .nav-link.active[href="#projects"]:focus {
  background: #fff4e0;
}

.navbar-toggler {
  border: 3px solid var(--ink) !important;
  background: var(--white) !important;
}

/* ---------- Headline name ---------- */

.text-primary {
  color: var(--white) !important;
  font-family: var(--font-display);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow:
    3px 3px 0 var(--black),
    6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Links ---------- */

a {
  color: var(--text-dark);
  font-weight: 600;
  font-family: var(--font-body);
}

a:hover, a:focus, a:active {
  color: #9333ea;
  text-decoration: underline;
  background: transparent;
  box-shadow: none;
}

/* side nav opts out of global link highlight */
#sideNav .navbar-nav .nav-item .nav-link:hover,
#sideNav .navbar-nav .nav-item .nav-link:focus,
#sideNav .navbar-nav .nav-item .nav-link:active,
#sideNav .navbar-nav .nav-item .nav-link.is-auto-hovered {
  color: inherit;
  background: transparent;
  box-shadow: none;
}

.comic-link {
  font-size: 1.3rem;
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  color: var(--white);
  text-shadow: 1px 1px 0 var(--black);
}

#Publications .comic-link,
#experience .comic-link,
#projects .comic-link {
  color: var(--panel-text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.comic-text {
  font-size: 1rem;
  color: var(--text-soft);
  font-weight: 400;
  font-family: var(--font-body);
}

.comic-accent {
  color: var(--white);
  font-weight: 600;
  font-family: var(--font-body);
}

/* ---------- About: tagline + details ---------- */

.comic-tagline {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--tagline-font-size, 1.05rem);
  letter-spacing: 0.01em;
  font-weight: 500;
  line-height: 1.45;
  color: var(--panel-text-mid);
  padding: 0.75rem 1.5rem 1.1rem;
  position: relative;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  transform: rotate(-0.5deg);
}

.comic-tagline .tagline-title {
  display: block;
  font-size: var(--tagline-title-font-size, 1.42rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--panel-text);
}

.comic-tagline .google-word {
  font-weight: 700;
  letter-spacing: 0;
}

.comic-tagline .google-letter {
  -webkit-text-stroke: 0;
  text-shadow: none;
}

.comic-tagline .tagline-affiliation {
  color: var(--panel-text);
  display: block;
  margin-top: 0.3rem;
}

.comic-tagline .tagline-affiliation:hover,
.comic-tagline .tagline-affiliation.is-auto-hovered {
  color: #9333ea;
  text-decoration: none;
  background: transparent;
}

/* hand-drawn scribble rectangle (replaces the speech balloon) */
.comic-tagline.sketch-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible;
  padding: var(--tagline-sketch-pad-top) var(--tagline-sketch-pad-x) var(--tagline-sketch-pad-bottom);
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}

.comic-tagline.sketch-box .tagline-title {
  color: var(--panel-text);
  display: block;
}

.comic-tagline.sketch-box .tagline-affiliation {
  color: var(--section-pop, var(--pop));
  font-weight: 600;
  display: block;
  margin-top: 0;
}

.comic-tagline.sketch-box .tagline-affiliation:hover,
.comic-tagline.sketch-box .tagline-affiliation.is-auto-hovered {
  color: #9333ea;
  text-decoration: none;
  background: transparent;
}

.comic-tagline.sketch-box::before,
.comic-tagline.sketch-box::after {
  display: none !important;
}

.sketch-box-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  color: var(--profile-decor-color, var(--ink, #111));
}

.sketch-box-content {
  position: relative;
  z-index: 1;
  display: block;
}

/* Noir intro: sketch box keeps one main stroke; hide any extra border passes */
[data-theme="noir"] .sketch-box-strokes path:nth-of-type(n + 3) {
  opacity: 0;
}

.comic-detail {
  color: var(--text-mid);
  font-size: var(--comic-detail-font-size, 1.35rem);
  font-family: var(--font-body);
  font-weight: 600;
  display: inline-block;
  padding: 0.35rem 0.65rem;
  line-height: 1.35;
  background: color-mix(in srgb, var(--section-bg, var(--grey-bg)) 78%, transparent);
  border-radius: 6px;
}

/* ---------- Social icons ---------- */

.list-social-icons a,
.list-social-icons .social-icon-button {
  display: inline-block;
  --social-shadow-jx: 0px;
  --social-shadow-jy: 0px;
  filter: drop-shadow(
    calc(4px + var(--social-shadow-jx))
    calc(4px + var(--social-shadow-jy))
    0
    var(--section-pop, var(--pop))
  );
  transition: transform 0.1s ease;
}

.list-social-icons .social-icon-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

.list-social-icons .social-icon-button:focus,
.list-social-icons .social-icon-button:focus-visible,
.list-social-icons a:focus,
.list-social-icons a:focus-visible {
  outline: none;
  box-shadow: none;
}

.list-social-icons a .fa-lg,
.list-social-icons .social-icon-button .fa-lg {
  width: 2em;
  height: 2em;
  line-height: 2em;
  font-size: 1.75rem;
}

.list-social-icons a .fa-circle,
.list-social-icons .social-icon-button .fa-circle {
  color: var(--text-soft);
}

.list-social-icons a .fa-inverse,
.list-social-icons .social-icon-button .fa-inverse {
  color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .list-social-icons a:hover .fa-circle,
  .list-social-icons .social-icon-button:hover .fa-circle {
    color: var(--text-dark);
  }

  .list-social-icons a:hover,
  .list-social-icons .social-icon-button:hover {
    background: transparent;
    transform: translate(2px, 2px);
    filter: drop-shadow(
      calc(2px + var(--social-shadow-jx))
      calc(2px + var(--social-shadow-jy))
      0
      var(--section-pop, var(--pop))
    );
  }
}

.list-social-icons a.is-auto-hovered .fa-circle,
.list-social-icons .social-icon-button.is-auto-hovered .fa-circle {
  color: var(--text-dark);
}

.list-social-icons a.is-auto-hovered,
.list-social-icons .social-icon-button.is-auto-hovered {
  background: transparent;
  transform: translate(2px, 2px);
  filter: drop-shadow(
    calc(2px + var(--social-shadow-jx))
    calc(2px + var(--social-shadow-jy))
    0
    var(--section-pop, var(--pop))
  );
}

.list-social-icons a.social-icon-trigger--released .fa-circle,
.list-social-icons .social-icon-button.social-icon-trigger--released .fa-circle {
  color: var(--text-soft) !important;
}

.list-social-icons a.social-icon-trigger--released,
.list-social-icons .social-icon-button.social-icon-trigger--released {
  background: transparent !important;
  transform: none !important;
  filter: drop-shadow(
    calc(4px + var(--social-shadow-jx))
    calc(4px + var(--social-shadow-jy))
    0
    var(--section-pop, var(--pop))
  ) !important;
}

[data-theme="dark"] .list-social-icons a .fa-circle,
[data-theme="dark"] .list-social-icons .social-icon-button .fa-circle {
  color: var(--grey-paper) !important;
}

[data-theme="dark"] .list-social-icons a,
[data-theme="dark"] .list-social-icons .social-icon-button {
  filter: drop-shadow(
    calc(4px + var(--social-shadow-jx))
    calc(4px + var(--social-shadow-jy))
    5px
    rgba(255, 255, 255, 0.35)
  );
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .list-social-icons a:hover,
  [data-theme="dark"] .list-social-icons .social-icon-button:hover {
    filter: drop-shadow(
      calc(2px + var(--social-shadow-jx))
      calc(2px + var(--social-shadow-jy))
      4px
      rgba(255, 255, 255, 0.3)
    );
  }
}

[data-theme="dark"] .list-social-icons a.is-auto-hovered,
[data-theme="dark"] .list-social-icons .social-icon-button.is-auto-hovered {
  filter: drop-shadow(
    calc(2px + var(--social-shadow-jx))
    calc(2px + var(--social-shadow-jy))
    4px
    rgba(255, 255, 255, 0.3)
  );
}

[data-theme="dark"] .list-social-icons a.social-icon-trigger--released,
[data-theme="dark"] .list-social-icons .social-icon-button.social-icon-trigger--released {
  filter: drop-shadow(
    calc(4px + var(--social-shadow-jx))
    calc(4px + var(--social-shadow-jy))
    5px
    rgba(255, 255, 255, 0.35)
  ) !important;
}

.about-social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  overflow: visible;
}

.about-social-row .list-inline-item {
  display: flex;
  align-items: center;
  position: relative;
}

.about-social-row .list-inline-item:has(.email-thought-bubble) > :is(a, button) {
  position: relative;
  z-index: 1;
}

#about.about-thought-bubble-raised .about-social-row .list-inline-item:has(.email-thought-bubble):is(:focus-within, :has(.is-auto-hovered)),
.about-social-row .list-inline-item:has(.email-thought-bubble):is(:focus-within, :has(.is-auto-hovered)) {
  z-index: calc(var(--thought-bubble-z) + 1);
}

@media (hover: hover) and (pointer: fine) {
  #about.about-thought-bubble-raised .about-social-row .list-inline-item:has(.email-thought-bubble):is(:hover, :focus-within, :has(.is-auto-hovered)),
  .about-social-row .list-inline-item:has(.email-thought-bubble):is(:hover, :focus-within, :has(.is-auto-hovered)) {
    z-index: calc(var(--thought-bubble-z) + 1);
  }
}

.email-thought-bubble {
  --email-bubble-shift: 0.45rem;
  position: absolute;
  top: calc(100% + 2.15rem);
  left: calc(50% + var(--email-bubble-shift));
  z-index: calc(var(--thought-bubble-z) + 2);
  width: max-content;
  max-width: min(18rem, 76vw);
  padding: 0.55rem 0.8rem;
  color: var(--panel-text, #111111);
  background: var(--white, #ffffff);
  border: 1.5px solid var(--ink, #111111);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -0.35rem) scale(0.96);
  filter: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Pinned to the viewport while visible so the bubble clears section tears
   and later panels regardless of ancestor stacking contexts. */
#thought-bubble-portal {
  position: fixed;
  inset: 0;
  z-index: var(--thought-bubble-z);
  pointer-events: none;
  overflow: visible;
}

.email-thought-bubble--fixed {
  position: fixed !important;
  top: var(--fixed-top) !important;
  left: var(--fixed-left) !important;
  z-index: var(--thought-bubble-z) !important;
}

.email-thought-bubble--visible,
/* Touch: is-auto-hovered from setupAutoHover (same path as panel boil/pop). */
.list-social-icons a:not(.social-icon-trigger--released).is-auto-hovered + .email-thought-bubble,
.list-social-icons .social-icon-button:not(.social-icon-trigger--released).is-auto-hovered + .email-thought-bubble,
.list-social-icons a:not(.social-icon-trigger--released):focus-visible + .email-thought-bubble,
.social-icon-button:not(.social-icon-trigger--released):focus-visible + .email-thought-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  /* Desktop mouse only — not used for panel animations; avoids sticky touch :hover on bubbles. */
  .about-social-row .list-inline-item:hover:not(:has(.social-icon-trigger--released)) .email-thought-bubble {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
  }
}

.about-social-row .list-inline-item:has(.social-icon-trigger--released) .email-thought-bubble:not(.email-thought-bubble--feedback) {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -0.35rem) scale(0.96) !important;
}

.email-thought-bubble--feedback {
  opacity: 1 !important;
  transform: translate(-50%, 0) scale(1) !important;
  pointer-events: none !important;
  transition: opacity 0.6s ease, transform 0.12s ease;
}

.email-thought-bubble--feedback.email-thought-bubble--fading {
  opacity: 0 !important;
}

.email-thought-trail {
  --puff-gap: 7px;
  --puff1-size: 8px;
  --puff2-size: 11px;
  --puff3-size: 15px;
  --puff3-top: calc(-1 * (var(--puff3-size) + var(--puff-gap)));
  --puff2-top: calc(var(--puff3-top) - var(--puff-gap) - var(--puff2-size));
  --puff1-top: calc(var(--puff2-top) - var(--puff-gap) - var(--puff1-size));
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.email-thought-puff {
  position: absolute;
  display: block;
  inline-size: var(--puff-size);
  block-size: var(--puff-size);
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border: 1.5px solid var(--ink, #111111);
  border-radius: 9999px;
  background: var(--white, #ffffff);
  box-sizing: border-box;
  transform: translateX(-50%);
}

.email-thought-puff--1 {
  --puff-size: var(--puff1-size);
  left: calc(50% - var(--email-bubble-shift));
  top: var(--puff1-top);
  opacity: 0;
}

.email-thought-puff--2 {
  --puff-size: var(--puff2-size);
  left: calc(50% - (var(--email-bubble-shift) / 2));
  top: var(--puff2-top);
}

.email-thought-puff--3 {
  --puff-size: var(--puff3-size);
  left: 50%;
  top: var(--puff3-top);
}

/* ---------- Experience cards ---------- */

#experience-list .resume-item {
  padding: 1.35rem 1.52rem 1.6rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

#experience-list .resume-content {
  width: 100%;
}

#experience-list .resume-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

#experience-list .resume-item h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink, #111);
  -webkit-text-stroke: 0;
  text-shadow: none;
  margin-top: 0;
  padding-right: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  white-space: normal;
}

#experience-list .exp-company-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

#experience-list .exp-company-name {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  min-width: 0;
  flex: 1;
  color: inherit;
}

#experience-list .exp-company-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#experience-list .exp-company-logo {
  width: 1.85rem;
  height: 1.85rem;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
  background: transparent;
}

#experience-list .exp-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.12em;
  width: 1em;
  height: 1em;
  margin-left: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  overflow: visible;
  color: var(--ink, #111);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
}

#experience-list .resume-item:hover .exp-ext-link,
#experience-list .resume-item.is-auto-hovered .exp-ext-link,
#experience-list .resume-item:focus-within .exp-ext-link,
#experience-list .exp-company-title:hover .exp-ext-link,
#experience-list .exp-company-name:hover .exp-ext-link {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

#experience-list .exp-ext-link:hover,
#experience-list .exp-ext-link:focus,
#experience-list .exp-ext-link.is-auto-hovered {
  color: var(--ink, #111);
  text-decoration: none !important;
  background: transparent;
  box-shadow: none;
  transform: scale(1.08);
}

#experience-list .exp-ext-icon {
  width: 100%;
  height: 100%;
  display: block;
}

#experience-list .resume-item p {
  color: var(--panel-text-soft);
  margin-top: 0.8rem;
}

#experience-list .resume-item .subheading {
  color: var(--xp-line, var(--section-pop, var(--pop)));
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: none;
}

#experience-list .resume-date {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
  margin-top: -0.2rem;
  text-align: right;
  display: flex;
  justify-content: flex-end;
}

#experience-list .resume-date .text-primary {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  -webkit-text-stroke: 0;
  color: var(--white) !important;
  background: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.25rem 0.6rem;
  display: inline-block;
  box-shadow: 3px 3px 0 var(--section-pop, var(--pop));
  text-shadow: none;
  transform: rotate(2deg);
}

@media (max-width: 768px) {
  section.resume-section #experience-list {
    --xp-chain-padding: clamp(0.35rem, 2vw, 0.65rem);
  }

  #experience-list .resume-item:nth-child(odd) {
    width: min(98%, calc(var(--xp-bubble-width, 94%) + 4%));
    transform:
      rotate(calc(-1 * var(--xp-alt-tilt, 0.5deg)))
      translateX(calc(-1 * var(--xp-alt-offset, 16px) * 0.375));
  }

  #experience-list .resume-item:nth-child(even) {
    width: min(98%, calc(var(--xp-bubble-width, 94%) + 4%));
    transform:
      rotate(var(--xp-alt-tilt, 0.5deg))
      translateX(calc(var(--xp-alt-offset, 16px) * 0.375));
  }

  section.resume-section #experience-list .resume-item:nth-child(odd):hover,
  section.resume-section #experience-list .resume-item:nth-child(odd).is-auto-hovered {
    transform:
      rotate(calc(-1 * var(--xp-alt-tilt, 0.5deg)))
      translateX(calc(-1 * var(--xp-alt-offset, 16px) * 0.375))
      translate(calc(-1 * var(--xp-hover-lift, 4px)), calc(-1 * var(--xp-hover-lift, 4px)));
  }

  section.resume-section #experience-list .resume-item:nth-child(even):hover,
  section.resume-section #experience-list .resume-item:nth-child(even).is-auto-hovered {
    transform:
      rotate(var(--xp-alt-tilt, 0.5deg))
      translateX(calc(var(--xp-alt-offset, 16px) * 0.375))
      translate(calc(-1 * var(--xp-hover-lift, 4px)), calc(-1 * var(--xp-hover-lift, 4px)));
  }

  #experience-list .resume-title-row {
    align-items: flex-start;
    gap: 0.5rem;
  }

  #experience-list .resume-item h3 {
    font-size: clamp(0.5rem, 3.5vw, 1.1rem);
  }

  #experience-list .exp-company-logo {
    width: clamp(1.1rem, 4vw, 1.65rem);
    height: clamp(1.1rem, 4vw, 1.65rem);
  }

  #experience-list .resume-item .subheading {
    font-size: 0.85rem;
  }

  #experience-list .resume-item p {
    font-size: 0.9rem;
  }
  
  #experience-list .resume-date {
    margin-top: 0;
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }

  #experience-list .resume-date .text-primary {
    font-size: clamp(0.45rem, 2vw, 0.75rem);
    padding: 0.15rem 0.3rem;
    border-width: 2px;
    box-shadow: 3px 3px 0 var(--section-pop, var(--pop));
  }

  #experience-list .resume-item {
    padding: 1.8rem 1.805rem 1.9rem;
  }
}

/* ---------- Publications & Projects entries ---------- */

.comic-entry {
  padding: 1.1rem 1.4rem 1.45rem;
}

@media (max-width: 560px) {
  .comic-entry {
    padding: 1rem 1.1rem 1.2rem;
  }
}

.comic-entry .comic-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(0.65rem, 2.5vw, 1.15rem);
  letter-spacing: normal;
  color: var(--panel-text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.08);
}

.comic-entry .comic-text {
  color: var(--panel-text-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.4rem;
  font-size: clamp(0.55rem, 2vw, 0.95rem);
  line-height: 1.4;
}

/* Glue the final title word + trailing icon so the icon never orphans alone */
.title-icon-glue {
  white-space: nowrap;
  color: inherit;
}

/* Publications: thumbnail left, text right inside the speech bubble */
#publications-list {
  --pub-bubble-max-h: 10vh;
  --pub-thumb-max-w: 4.5rem;
  --pub-thumb-limit-h: 256px;
  --pub-thumb-max-h: min(var(--pub-thumb-limit-h), calc(var(--pub-bubble-max-h) - 1.1rem));
  --pub-thumb-min-h: 100px;
  --pub-thumb-pad: 0.35rem;
  --pub-title-size: calc(var(--pub-thumb-max-h) * 0.19);
  --pub-title-max: 32px;
  --pub-author-size: max(6px, calc(min(var(--pub-title-size), var(--pub-title-max)) - 7px));
  --pub-venue-size: max(6px, calc(min(var(--pub-title-size), var(--pub-title-max)) - 3px));
  --pub-line-height: 1.35;
  --pub-text-gap: 0.3rem;
  --pub-entry-gap: clamp(0.3rem, 0.7vw, 0.5rem);
}

#publications-list .comic-entry {
  display: flex;
  align-items: center;
  max-height: min(
    calc(var(--pub-thumb-limit-h) + (2 * var(--pub-thumb-pad)) + 0.7rem),
    max(
      var(--pub-bubble-max-h),
      calc(var(--pub-thumb-min-h) + (2 * var(--pub-thumb-pad)) + 0.7rem)
    )
  );
  padding: 0.35rem 0.7rem !important;
  margin-bottom: 1.5rem !important;
  overflow: visible;
}

#publications-list .comic-entry:last-child {
  margin-bottom: 0 !important;
}

#publications-list .pub-entry-body {
  display: flex;
  align-items: stretch;
  gap: var(--pub-entry-gap);
  width: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#publications-list .pub-entry-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: var(--pub-text-block-h, var(--pub-thumb-max-h));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: left;
  overflow: hidden;
  gap: var(--pub-text-gap);
}

#publications-list.pub-thumbnails-off .pub-thumbnail-frame {
  display: none;
}

#publications-list .pub-thumbnail-frame {
  flex: 0 0 auto;
  width: auto;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: var(--pub-thumb-pad);
  box-sizing: border-box;
}

#publications-list .pub-thumbnail {
  display: block;
  width: auto;
  height: auto;
  min-height: var(--pub-thumb-min-h);
  max-width: calc(var(--pub-thumb-max-w) - (2 * var(--pub-thumb-pad)));
  max-height: min(
    calc(var(--pub-thumb-limit-h) - (2 * var(--pub-thumb-pad))),
    max(
      var(--pub-thumb-min-h),
      calc(var(--pub-thumb-max-h) - (2 * var(--pub-thumb-pad)))
    )
  );
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 560px) {
  #publications-list {
    --pub-thumb-max-w: 3.75rem;
    --pub-thumb-limit-h: 80px;
    --pub-thumb-min-h: 32px;
    --pub-thumb-pad: 0.28rem;
    --pub-title-max: 10px;
    --pub-entry-gap: 0.35rem;
  }
}

/* Gradual thumbnail scale-up on large screens (fixed px — avoids rem/vh compounding). */
@media (min-width: 1920px) {
  #publications-list {
    --pub-bubble-max-h: 118px;
    --pub-thumb-max-w: 80px;
    --pub-thumb-limit-h: 268px;
    --pub-thumb-min-h: 108px;
    --pub-thumb-pad: 6px;
    --pub-title-max: 34px;
  }
}

@media (min-width: 2560px) {
  #publications-list {
    --pub-bubble-max-h: 128px;
    --pub-thumb-max-w: 88px;
    --pub-thumb-limit-h: 282px;
    --pub-thumb-min-h: 116px;
    --pub-thumb-pad: 6.4px;
    --pub-title-max: 36px;
  }
}

@media (min-width: 3840px) {
  #publications-list {
    --pub-bubble-max-h: 138px;
    --pub-thumb-max-w: 96px;
    --pub-thumb-limit-h: 296px;
    --pub-thumb-min-h: 124px;
    --pub-thumb-pad: 6.8px;
    --pub-title-max: 38px;
  }
}

/* Publications: external-link icon always visible next to the title */
#publications-list .pub-title-row {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: min(var(--pub-title-size), var(--pub-title-max));
  line-height: var(--pub-line-height);
  max-height: calc(2 * var(--pub-line-height) * 1em);
  width: 100%;
  text-align: left;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

#publications-list .pub-title {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
}

#publications-list .pub-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.12em;
  width: 1em;
  height: 1em;
  margin-left: 0.28em;
  overflow: visible;
  color: var(--section-pop, #b878ff);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  text-decoration: none !important;
}

#publications-list .comic-entry:hover .pub-ext-link,
#publications-list .comic-entry.is-auto-hovered .pub-ext-link,
#publications-list .comic-entry:focus-within .pub-ext-link {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

#publications-list .pub-ext-link:hover,
#publications-list .pub-ext-link:focus,
#publications-list .pub-ext-link.is-auto-hovered {
  color: var(--section-pop, #b878ff);
  text-decoration: none !important;
  background: transparent;
  box-shadow: none;
  transform: scale(1.08);
}

#publications-list .pub-ext-icon {
  width: 100%;
  height: 100%;
  display: block;
}

#publications-list .pub-ext-path {
  stroke-width: 2.75;
}

#publications-list .pub-authors {
  width: 100%;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  padding: 0;
  font-size: var(--pub-author-size);
  line-height: var(--pub-line-height);
  max-height: calc(var(--pub-line-height) * 1em);
  flex: 0 0 auto;
  color: var(--panel-text-soft);
}

#publications-list .pub-venue-line {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0 !important;
  padding: 0;
  font-size: var(--pub-venue-size);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}

#publications-list .comic-link:hover,
#publications-list .comic-link.is-auto-hovered,
#publications-list .pub-title:hover,
#publications-list .pub-title.is-auto-hovered {
  text-decoration: none;
  color: var(--panel-text);
}

#publications-list .pub-venue,
#publications-list .pub-venue-char {
  font-weight: 700;
  color: var(--section-pop, #b878ff);
}

#publications-list .pub-venue-char {
  display: inline-block;
  transform-origin: center center;
}

/* ---------- Projects external-link icon ---------- */
#projects-list .proj-title-row {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

#projects-list .proj-title {
  display: inline;
}

#projects-list .proj-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.12em;
  width: 1em;
  height: 1em;
  margin-left: 0.28em;
  overflow: visible;
  color: var(--ink, #111);
  opacity: 1;
  transform: none;
  transition: transform 0.15s ease;
  text-decoration: none !important;
}

#projects-list .proj-ext-link:hover,
#projects-list .proj-ext-link:focus,
#projects-list .proj-ext-link.is-auto-hovered {
  color: var(--ink, #111);
  text-decoration: none !important;
  background: transparent;
  box-shadow: none;
  transform: scale(1.08);
}

#projects-list .proj-ext-icon {
  width: 100%;
  height: 100%;
  display: block;
}

#projects-list .comic-link.proj-title:hover,
#projects-list .comic-link.proj-title.is-auto-hovered {
  text-decoration: none;
  color: var(--panel-text);
}

/* ---------- Tuning panels (glint + comic image) ---------- */

.tuning-controls,
.glint-controls,
.comic-controls {
  max-width: 320px;
  margin: 0.75rem auto 2rem;
  padding: 0.95rem 1.1rem 1.35rem;
  text-align: left;
  transform: rotate(-0.3deg);
}

.tuning-controls-title,
.glint-controls-title {
  color: var(--panel-text);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.65rem;
}

.tuning-control-row,
.glint-control-row {
  display: grid;
  grid-template-columns: 88px 1fr 36px;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.tuning-control-row label,
.glint-control-row label {
  color: var(--panel-text-mid);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0;
  font-family: var(--font-body);
}

.tuning-control-row input[type="range"],
.glint-control-row input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--ink);
}

.tuning-controls-subtitle {
  color: var(--panel-text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0.6rem 0 0.35rem;
}

.tuning-control-row--check {
  grid-template-columns: 1fr auto;
}

.tuning-control-row--check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
  justify-self: end;
  cursor: pointer;
}

.tuning-radio-group {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.tuning-radio-option {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--panel-text-mid);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
}

.tuning-radio-option input[type="radio"] {
  margin: 0;
  accent-color: var(--ink);
}

.tuning-control-value,
.glint-control-value {
  color: var(--panel-text-soft);
  font-size: 0.8rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-body);
}

.tuning-controls-actions,
.glint-controls-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.65rem;
}

.tuning-save-btn,
.glint-save-btn {
  background-color: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}

.tuning-save-status,
.glint-save-status {
  color: var(--panel-text-soft);
  font-size: 0.85rem;
  min-height: 1rem;
  font-family: var(--font-body);
}

.tuning-save-btn:disabled,
.glint-save-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.tuning-save-status.is-success,
.glint-save-status.is-success {
  color: var(--panel-text);
}

.tuning-save-status.is-error,
.glint-save-status.is-error {
  color: #a32b2b;
}

/* ---------- Tags ---------- */

.tag {
  background: var(--grey-paper);
  color: var(--text-dark);
  border: 2px solid var(--ink);
}

.tag::after {
  border-left-color: var(--grey-paper);
}

.tag:hover,
.tag.is-auto-hovered {
  background-color: var(--text-dark);
  color: var(--white);
}

.tag:hover::after,
.tag.is-auto-hovered::after {
  border-left-color: var(--text-dark);
}

/* ---------- Blockquote ---------- */

.resume-section blockquote {
  border-left: none;
  padding: 0.9rem 1.1rem 1.35rem;
  margin-bottom: 1.5rem;
  color: var(--panel-text-mid);
}

/* ---------- Theme toggle ---------- */

.theme-toggle-wrap {
  padding: 0.75rem;
  width: 100%;
  text-align: center;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  --noir-btn: 3rem;
  padding: 0;
  font-size: 1.35rem;
  color: var(--panel-text);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.theme-toggle-btn:hover,
.theme-toggle-btn.is-auto-hovered {
  transform: translate(2px, 2px) rotate(-4deg);
  box-shadow: 2px 2px 0 var(--ink);
}

.theme-toggle-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.theme-toggle-btn > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.theme-toggle-btn > i.fa-sun {
  font-size: 1.35em;
}

/* fa-moon reads smaller than fa-sun at the same font-size */
.theme-toggle-btn > i.fa-moon {
  font-size: 1.12em;
}

@media (min-width: 992px) {
  #navbarSupportedContent {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    min-height: 0;
  }

  #sideNav .navbar-collapse .navbar-nav {
    gap: var(--nav-item-gap, 0.85rem);
  }

  .theme-toggle-wrap {
    margin-top: auto;
    padding-bottom: 1.5rem;
  }
}

/* ---------- Mobile / narrow: horizontal tab menu instead of dropdown ---------- */
@media (max-width: 991.98px) {
  /* Sticky (not fixed) so the bar takes layout space and pushes content down
     instead of floating over the page; still pins to the top on scroll.
     Also zero out the body padding-top resume.css adds for fixed-top navbars. */
  body {
    padding-top: 0 !important;
  }

  #sideNav {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0.5rem 0.85rem;
    border-right: none;
    border-bottom: 5px solid var(--ink);
    box-shadow: 0 6px 0 var(--nav-shadow);
  }

  /* No hamburger — links are always visible */
  #sideNav .navbar-toggler {
    display: none !important;
  }

  /* Hide brand name on mobile — tabs identify the site well enough */
  #sideNav .navbar-brand {
    display: none !important;
  }

  /* Remove halftone dots from the nav bar on mobile — both the CSS gradient
     and the interactive dot canvas that halftone-cursor.js paints inside it. */
  #sideNav {
    background-image: none !important;
  }

  #sideNav > .halftone-cursor-canvas {
    display: none !important;
  }

  /* Force the collapse open and let it wrap below the brand.
     nowrap so the toggle can be pushed to the far right of the row. */
  #sideNav #navbarSupportedContent {
    display: flex !important;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    margin-top: 0.4rem;
  }

  /* Links laid out as a row of tabs (centered, takes remaining space) */
  #sideNav .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.55rem;
    width: auto;
    flex: 1 1 auto;
  }

  #sideNav .navbar-nav .nav-item {
    flex: 0 0 auto;
  }

  #sideNav .navbar-nav .nav-item .nav-link {
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    max-height: 3.5rem;
    white-space: nowrap;
  }

  /* Tame the playful transforms so tabs don't overlap when tight */
  #sideNav .navbar-nav .nav-item .nav-link.active,
  #sideNav .navbar-nav .nav-item .nav-link.active:hover,
  #sideNav .navbar-nav .nav-item .nav-link.active:focus {
    transform: rotate(-2deg) scale(1.02);
  }

  #sideNav .navbar-nav .nav-item .nav-link:hover:not(.active),
  #sideNav .navbar-nav .nav-item .nav-link:focus:not(.active),
  #sideNav .navbar-nav .nav-item .nav-link.is-auto-hovered:not(.active) {
    transform: scale(1.05);
  }

  /* Theme toggle pinned to the extreme right of the nav row */
  .theme-toggle-wrap {
    width: auto;
    padding: 0;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .theme-toggle-btn {
    width: 2.4rem;
    height: 2.4rem;
    --noir-btn: 2.4rem;
    font-size: 1.1rem;
    box-shadow: 3px 3px 0 var(--ink);
  }
}

/* ---------- Noir intro theme (muted light — hero load only) ---------- */

[data-theme="noir"] {
  --about-nav-tint: #dde1e5;
  --text-dark: #2a2a2a;
  --text-mid: #454545;
  --text-soft: #686868;
  --grey-bg: #d8d6d2;
  --grey-panel: #dedcd8;
  --grey-paper: #e8e6e2;
  --section-dot: transparent;
  --heading-color: #2a2a2a;
  --heading-stroke: 0.5px;
  --heading-shadow-1: 2px 2px 0 rgba(255, 255, 255, 0.85);
  --heading-shadow-2: 3px 3px 0 rgba(0, 0, 0, 0.1);
  --halftone-dot: rgba(58, 56, 52, 0.12);
  --nav-halftone-dot: rgba(255, 255, 255, 0.06);
  --nav-link-hover: #ffffff;
  --nav-shadow: rgba(0, 0, 0, 0.4);
  --pop: #8a8580;
  --profile-decor-color: #333333;
  --profile-decor-gap-fill: #f2f1ef;
}

[data-theme="noir"] h1 {
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.9),
    4px 4px 0 rgba(0, 0, 0, 0.08);
}

[data-theme="noir"] .text-primary {
  color: var(--ink) !important;
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.85),
    4px 4px 0 rgba(0, 0, 0, 0.07);
}

[data-theme="noir"] .comic-accent,
[data-theme="noir"] .comic-detail,
[data-theme="noir"] .comic-tagline {
  color: var(--text-mid);
}

[data-theme="noir"] .comic-tagline .google-letter {
  color: var(--text-mid) !important;
}

[data-theme="noir"] .comic-tagline .tagline-affiliation,
[data-theme="noir"] .comic-tagline.sketch-box .tagline-affiliation {
  color: var(--text-mid);
}

[data-theme="noir"] .comic-tagline .tagline-affiliation:hover,
[data-theme="noir"] .comic-tagline .tagline-affiliation.is-auto-hovered,
[data-theme="noir"] .comic-tagline.sketch-box .tagline-affiliation:hover,
[data-theme="noir"] .comic-tagline.sketch-box .tagline-affiliation.is-auto-hovered {
  color: var(--text-mid);
  text-decoration: none;
}

[data-theme="noir"] .comic-link {
  color: var(--panel-text);
  text-shadow: none;
}

[data-theme="noir"] .bubble-accents {
  color: #333333;
}

[data-theme="noir"] section.resume-section:not(#about),
[data-theme="noir"] #page-end-tear {
  filter: saturate(0.76);
}

[data-theme="noir"] #about .about-name,
[data-theme="noir"] #about .comic-tagline,
[data-theme="noir"] #about .comic-detail,
[data-theme="noir"] #about .about-social-row {
  filter: saturate(0.76);
}

[data-theme="noir"] .about-name .name-chroma::before,
[data-theme="noir"] .about-name .name-chroma::after {
  content: none;
}

[data-theme="noir"] .profile-photo-wrap .img-profile,
[data-theme="noir"] .profile-photo-wrap .img-profile-feather {
  filter: none !important;
}

[data-theme="noir"] .profile-photo-wrap .img-profile-feather {
  opacity: 0;
}

[data-theme="noir"] #about {
  --section-bg: #b8c0c8;
  --section-pop: #6a8fa8;
  --section-panel: #eceef0;
  --section-heading-tint: #dde1e5;
}

[data-theme="noir"] #achievements {
  --section-bg: #c4b8bc;
  --section-pop: #a87888;
  --section-panel: #ebe6e8;
  --section-heading-tint: #e4d8dc;
}

[data-theme="noir"] #Publications {
  --section-bg: #bfb8c4;
  --section-pop: #8a7898;
  --section-panel: #ebe9ec;
  --section-heading-tint: #ded8e2;
}

[data-theme="noir"] #experience {
  --section-bg: #b8c2bb;
  --section-pop: #6a9080;
  --section-panel: #e8ebe9;
  --section-heading-tint: #d8deda;
}

[data-theme="noir"] #projects {
  --section-bg: #c8bfb0;
  --section-pop: #a08868;
  --section-panel: #edeae6;
  --section-heading-tint: #e0dcd6;
}

[data-theme="noir"] #sideNav .navbar-brand,
[data-theme="noir"] #sideNav .navbar-brand span {
  color: var(--white) !important;
  text-shadow: 2px 2px 0 var(--black);
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link {
  color: #a8a8a8;
  text-shadow: none;
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link:hover:not(.active),
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link:focus:not(.active),
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.is-auto-hovered:not(.active) {
  color: var(--nav-link-hover);
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#about"],
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#about"]:hover,
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#about"]:focus {
  background: #dde1e5;
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#achievements"],
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#achievements"]:hover,
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#achievements"]:focus {
  background: #e4d8dc;
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#Publications"],
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#Publications"]:hover,
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#Publications"]:focus {
  background: #ded8e2;
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#experience"],
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#experience"]:hover,
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#experience"]:focus {
  background: #d8deda;
}

[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#projects"],
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#projects"]:focus,
[data-theme="noir"] #sideNav .navbar-nav .nav-item .nav-link.active[href="#projects"]:hover {
  background: #e0dcd6;
}

[data-theme="noir"] #sideNav {
  background-color: #2d2d2d !important;
  background-image: radial-gradient(circle, var(--nav-halftone-dot) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  background-repeat: repeat;
}

[data-theme="noir"] #theme-toggle {
  /* Visual is 85% via --noir-btn; layout box stays 3rem so centre matches the real toggle */
  --noir-btn: 2.55rem;
  --noir-btn-scale: 0.85;
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: transparent;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  /* Grid: 18px pitch on a 48px (3rem) reference — tile scales with button so count stays fixed */
  --noir-toggle-tile: calc(var(--noir-btn, 3rem) * 0.375);
  --noir-toggle-dot: calc(var(--noir-btn, 3rem) * 0.0625);
  --noir-toggle-dot-core: calc(var(--noir-btn, 3rem) * 0.048958);
  --noir-toggle-edge: calc(var(--noir-btn, 3rem) * 0.0025);
  --noir-ca-x: calc(var(--noir-btn, 3rem) * 0.015625);
  --noir-ca-y: calc(var(--noir-btn, 3rem) * 0.010417);
  --noir-shadow-ca-x: calc(var(--noir-btn, 3rem) * 0.0625);
  --noir-shadow-ca-y: calc(var(--noir-btn, 3rem) * 0.041667);
  --noir-shadow-blur: calc(var(--noir-btn, 3rem) * 0.03125);
  --noir-grid-shift-y: 7px;
  transition: transform 0.12s ease;
}

[data-theme="noir"] #theme-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--noir-btn);
  height: var(--noir-btn);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
  border: calc(3px * var(--noir-btn-scale, 0.85)) solid #111111;
  border-radius: 50%;
  background-color: #ffffff;
  background-image:
    radial-gradient(circle, #111111 var(--noir-toggle-dot-core), transparent calc(var(--noir-toggle-dot-core) + var(--noir-toggle-edge))),
    radial-gradient(circle, #111111 var(--noir-toggle-dot-core), transparent calc(var(--noir-toggle-dot-core) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(66, 133, 244, 0.92) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(66, 133, 244, 0.92) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(234, 67, 53, 0.92) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(234, 67, 53, 0.92) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(52, 168, 83, 0.72) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(52, 168, 83, 0.72) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(251, 188, 5, 0.62) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge))),
    radial-gradient(circle, rgba(251, 188, 5, 0.62) var(--noir-toggle-dot), transparent calc(var(--noir-toggle-dot) + var(--noir-toggle-edge)));
  background-size: var(--noir-toggle-tile) var(--noir-toggle-tile);
  background-position:
    0 var(--noir-grid-shift-y),
    calc(var(--noir-toggle-tile) / 2) calc(var(--noir-toggle-tile) / 2 + var(--noir-grid-shift-y)),
    var(--noir-ca-x) calc(var(--noir-ca-y) + var(--noir-grid-shift-y)),
    calc(var(--noir-toggle-tile) / 2 + var(--noir-ca-x)) calc(var(--noir-toggle-tile) / 2 + var(--noir-ca-y) + var(--noir-grid-shift-y)),
    calc(-1 * var(--noir-ca-x)) calc(-1 * var(--noir-ca-y) + var(--noir-grid-shift-y)),
    calc(var(--noir-toggle-tile) / 2 - var(--noir-ca-x)) calc(var(--noir-toggle-tile) / 2 - var(--noir-ca-y) + var(--noir-grid-shift-y)),
    calc(-1 * var(--noir-ca-x)) calc(var(--noir-ca-y) + var(--noir-grid-shift-y)),
    calc(var(--noir-toggle-tile) / 2 - var(--noir-ca-x)) calc(var(--noir-toggle-tile) / 2 + var(--noir-ca-y) + var(--noir-grid-shift-y)),
    var(--noir-ca-x) calc(-1 * var(--noir-ca-y) + var(--noir-grid-shift-y)),
    calc(var(--noir-toggle-tile) / 2 + var(--noir-ca-x)) calc(var(--noir-toggle-tile) / 2 - var(--noir-ca-y) + var(--noir-grid-shift-y));
  box-shadow:
    calc(-1 * var(--noir-shadow-ca-x)) calc(-1 * var(--noir-shadow-ca-y)) var(--noir-shadow-blur) rgba(234, 67, 53, 0.82),
    var(--noir-shadow-ca-x) var(--noir-shadow-ca-y) var(--noir-shadow-blur) rgba(66, 133, 244, 0.82),
    calc(-1 * var(--noir-shadow-ca-x)) var(--noir-shadow-ca-y) var(--noir-shadow-blur) rgba(52, 168, 83, 0.58),
    var(--noir-shadow-ca-x) calc(-1 * var(--noir-shadow-ca-y)) var(--noir-shadow-blur) rgba(251, 188, 5, 0.48);
  transition: box-shadow 0.2s ease;
}

[data-theme="noir"] #theme-toggle::after {
  content: none;
}

[data-theme="noir"] #theme-toggle i {
  display: none;
}

[data-theme="noir"] #theme-toggle:hover,
[data-theme="noir"] #theme-toggle.is-auto-hovered {
  --noir-shadow-ca-x: calc(var(--noir-btn, 3rem) * 0.041667);
  --noir-shadow-ca-y: calc(var(--noir-btn, 3rem) * 0.03125);
  --noir-shadow-blur: calc(var(--noir-btn, 3rem) * 0.036458);
  transform: translate(2px, 2px) rotate(-4deg);
  box-shadow: none;
}

[data-theme="noir"] #theme-toggle:hover::before,
[data-theme="noir"] #theme-toggle.is-auto-hovered::before {
  box-shadow:
    calc(-1 * var(--noir-shadow-ca-x)) calc(-1 * var(--noir-shadow-ca-y)) var(--noir-shadow-blur) rgba(234, 67, 53, 0.88),
    var(--noir-shadow-ca-x) var(--noir-shadow-ca-y) var(--noir-shadow-blur) rgba(66, 133, 244, 0.88),
    calc(-1 * var(--noir-shadow-ca-x)) var(--noir-shadow-ca-y) var(--noir-shadow-blur) rgba(52, 168, 83, 0.62),
    var(--noir-shadow-ca-x) calc(-1 * var(--noir-shadow-ca-y)) var(--noir-shadow-blur) rgba(251, 188, 5, 0.52);
}

[data-theme="noir"] #theme-toggle:active {
  --noir-shadow-ca-x: calc(var(--noir-btn, 3rem) * 0.020833);
  --noir-shadow-ca-y: calc(var(--noir-btn, 3rem) * 0.015625);
  --noir-shadow-blur: calc(var(--noir-btn, 3rem) * 0.020833);
  transform: translate(4px, 4px);
  box-shadow: none;
}

[data-theme="noir"] #theme-toggle:active::before {
  box-shadow:
    calc(-1 * var(--noir-shadow-ca-x)) calc(-1 * var(--noir-shadow-ca-y)) var(--noir-shadow-blur) rgba(234, 67, 53, 0.72),
    var(--noir-shadow-ca-x) var(--noir-shadow-ca-y) var(--noir-shadow-blur) rgba(66, 133, 244, 0.72),
    calc(-1 * var(--noir-shadow-ca-x)) var(--noir-shadow-ca-y) var(--noir-shadow-blur) rgba(52, 168, 83, 0.5),
    var(--noir-shadow-ca-x) calc(-1 * var(--noir-shadow-ca-y)) var(--noir-shadow-blur) rgba(251, 188, 5, 0.4);
}

@media (max-width: 991.98px) {
  [data-theme="noir"] #theme-toggle {
    --noir-btn: 2.04rem;
    --noir-btn-scale: 0.85;
  }
}

[data-theme="noir"] .tag:hover,
[data-theme="noir"] .tag.is-auto-hovered {
  background-color: var(--ink);
  color: var(--white);
}

[data-theme="noir"] .tag:hover::after,
[data-theme="noir"] .tag.is-auto-hovered::after {
  border-left-color: var(--ink);
}

[data-theme="noir"] .list-social-icons a,
[data-theme="noir"] .list-social-icons .social-icon-button {
  color: var(--ink);
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="noir"] .list-social-icons a:hover,
  [data-theme="noir"] .list-social-icons .social-icon-button:hover {
    filter: none;
  }
}

[data-theme="noir"] .list-social-icons a.is-auto-hovered,
[data-theme="noir"] .list-social-icons .social-icon-button.is-auto-hovered,
[data-theme="noir"] .list-social-icons a.social-icon-trigger--released,
[data-theme="noir"] .list-social-icons .social-icon-button.social-icon-trigger--released {
  filter: none !important;
}

/* ---------- Light theme ---------- */

[data-theme="light"] {
  --about-nav-tint: #d4e6f8;
  --text-dark: #1a1a1a;
  --text-mid: #333333;
  --text-soft: #555555;
  --grey-bg: #e8e8e8;
  --grey-panel: #f0f0f0;
  --grey-paper: #f7f7f7;
  --heading-color: #1a1a1a;
  --heading-stroke: 0.5px;
  --heading-shadow-1: 2px 2px 0 rgba(255, 255, 255, 0.9);
  --heading-shadow-2: 3px 3px 0 rgba(0, 0, 0, 0.12);
  --halftone-dot: rgba(0, 0, 0, 0.14);
  --nav-halftone-dot: rgba(0, 0, 0, 0.16);
  --nav-link-hover: #111111;
  --nav-shadow: rgba(0, 0, 0, 0.15);
  --profile-decor-color: #111111;
  --profile-decor-gap-fill: #ffffff;
}

[data-theme="light"] h1 {
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.95),
    4px 4px 0 rgba(0, 0, 0, 0.1);
}

[data-theme="light"] #about {
  --section-bg: #d4e6f8;
  --section-dot: rgba(77, 168, 255, 0.34);
  --section-pop: #3d9ae8;
  --section-panel: #ffffff;
  --section-heading-tint: #eef6ff;
}

[data-theme="light"] #achievements {
  --section-bg: #f8e8ee;
  --section-dot: rgba(230, 100, 140, 0.28);
  --section-pop: #e6648c;
  --section-panel: #ffffff;
  --section-heading-tint: #ffe8ed;
}

[data-theme="light"] #Publications {
  --section-bg: #faf8f5;
  --section-dot: rgba(160, 100, 230, 0.32);
  --section-pop: #a064e6;
  --section-panel: #ffffff;
  --section-heading-tint: #f3ebff;
}

[data-theme="light"] #experience {
  --section-bg: #d4f0e0;
  --section-dot: rgba(60, 190, 130, 0.32);
  --section-pop: #3cbe82;
  --section-panel: #ffffff;
  --section-heading-tint: #e8fff0;
}

[data-theme="light"] #projects {
  --section-bg: #f0e2c8;
  --section-dot: rgba(230, 150, 60, 0.34);
  --section-pop: #e6963c;
  --section-panel: #ffffff;
  --section-heading-tint: #fff4e0;
}

[data-theme="light"] #sideNav .navbar-brand,
[data-theme="light"] #sideNav .navbar-brand span {
  color: var(--ink) !important;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] #sideNav .navbar-nav .nav-item .nav-link {
  text-shadow: none;
}

[data-theme="light"] #sideNav {
  background-color: #d4d4d4 !important;
  background-image: radial-gradient(circle, var(--nav-halftone-dot) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  background-repeat: repeat;
}

[data-theme="light"] .text-primary {
  color: var(--ink) !important;
  text-shadow:
    2px 2px 0 rgba(255, 255, 255, 0.9),
    4px 4px 0 rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .comic-accent {
  color: var(--text-mid);
}

[data-theme="light"] .comic-link {
  color: var(--panel-text);
  text-shadow: none;
}

[data-theme="light"] .tag:hover,
[data-theme="light"] .tag.is-auto-hovered {
  background-color: var(--ink);
  color: var(--white);
}

[data-theme="light"] .tag:hover::after,
[data-theme="light"] .tag.is-auto-hovered::after {
  border-left-color: var(--ink);
}

/* ---------- Unified settings panel ---------- */

/* Hold the theme toggle + settings gear side by side. */
.theme-toggle-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#sideNav.settings-open #settings-toggle {
  background: var(--ink);
  color: var(--white);
}

/* When the panel is open, the nav links are swapped out for the controls. */
#sideNav.settings-open #nav-links {
  display: none !important;
}

.settings-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0.25rem 0 0.5rem;
  padding: 0.75rem 0.85rem 0.85rem;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 4px;
  box-shadow: none;
}

.settings-panel[hidden] {
  display: none;
}

.settings-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--panel-text-soft);
  margin-bottom: 0.5rem;
}

.settings-panel-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--panel-text);
}

.settings-close-btn {
  background: var(--white);
  color: var(--panel-text);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow: none;
}

.settings-close-btn:hover,
.settings-close-btn.is-auto-hovered {
  background: var(--grey-panel, #eee);
}

.settings-panel-section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--panel-text-mid);
  margin-bottom: 0.4rem;
}

.settings-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
}

.settings-subpanel {
  margin-bottom: 0.35rem;
}

.settings-subpanel + .settings-subpanel {
  border-top: 2px dashed var(--panel-text-soft);
  padding-top: 0.4rem;
}

/* Strip the comic speech-bubble treatment (border, rounded corners, pink
   drop-shadow rim, and the SVG tail pseudo-elements) so the panels read as a
   plain, flat list of controls. */
.settings-panel .tuning-controls,
.settings-panel .glint-controls,
.settings-panel .comic-controls {
  max-width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  transform: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  overflow: visible;
}

.settings-panel .tuning-controls::before,
.settings-panel .tuning-controls::after,
.settings-panel .glint-controls::before,
.settings-panel .glint-controls::after,
.settings-panel .comic-controls::before,
.settings-panel .comic-controls::after {
  display: none !important;
  content: none !important;
}

.settings-panel .tuning-controls-title,
.settings-panel .glint-controls-title,
.settings-panel .tuning-controls-subtitle {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.settings-panel .tuning-control-row,
.settings-panel .glint-control-row {
  grid-template-columns: 64px 1fr 26px;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.settings-panel .tuning-control-row--check {
  grid-template-columns: 1fr auto;
}

.settings-panel .tuning-control-row label,
.settings-panel .glint-control-row label {
  font-size: 0.72rem;
}

.settings-panel .tuning-control-value,
.settings-panel .glint-control-value {
  font-size: 0.68rem;
}

.settings-panel .tuning-controls-title,
.settings-panel .glint-controls-title {
  font-size: 0.92rem;
  margin-bottom: 0.45rem;
}

/* The unified panel uses a single global Save, so each effect's own save row
   (and any inline status) is hidden in this context. */
.settings-panel .tuning-controls-actions,
.settings-panel .glint-controls-actions {
  display: none !important;
}

.settings-panel-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.55rem;
  margin-top: 0.45rem;
  border-top: 1px solid var(--panel-text-soft);
}

.settings-save-all-btn {
  background-color: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  letter-spacing: 0.03em;
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 0.35rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.settings-save-all-btn:hover {
  opacity: 0.85;
}

.settings-save-all-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.settings-save-all-status {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--panel-text-soft);
  min-height: 1rem;
}

.settings-save-all-status.is-success {
  color: #2e8b57;
}

.settings-save-all-status.is-error {
  color: #c0392b;
}

/* Mobile: the nav is a horizontal row — let the open panel take a full-width
   block beneath it and cap its height so it scrolls instead of overflowing. */
@media (max-width: 991.98px) {
  .settings-panel {
    flex-basis: 100%;
    max-height: 70vh;
    order: 99;
  }
}

/* Large / 4K screens — QHD gets modest padding; 4K drops forced full-viewport
   sections (except #about hero) and scales headings. */
@media (max-width: 576px) {
  :root {
    --tagline-sketch-pad-top: 0.95rem;
    --tagline-sketch-pad-x: 1.9rem;
    --tagline-sketch-pad-bottom: 0.9rem;
    --tagline-font-size: 0.84rem;
    --tagline-title-font-size: 1.14rem;
    --comic-detail-font-size: 1.08rem;
  }
}

@media (min-width: 1920px) {
  :root {
    --side-nav-width: 19rem;
    --tagline-sketch-pad-top: 1.25rem;
    --tagline-sketch-pad-x: 2.5rem;
    --tagline-sketch-pad-bottom: 1.15rem;
    --tagline-font-size: 1.18rem;
    --tagline-title-font-size: 1.59rem;
    --comic-detail-font-size: 1.51rem;
  }

  section.resume-section {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (min-width: 2560px) {
  :root {
    --side-nav-width: 23rem;
    --profile-photo-size: 16.5rem;
    --tagline-sketch-pad-top: 1.3rem;
    --tagline-sketch-pad-x: 2.65rem;
    --tagline-sketch-pad-bottom: 1.2rem;
    --tagline-font-size: 1.16rem;
    --tagline-title-font-size: 1.56rem;
    --comic-detail-font-size: 1.49rem;
  }

  #sideNav {
    --nav-item-gap: 1rem;
  }

  section.resume-section:not(#about) {
    min-height: auto;
  }

  #about {
    min-height: 100vh;
  }

  section.resume-section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
    --panel-gap: 4.25rem;
  }

  #Publications {
    --panel-gap: 2.15rem;
  }

  section.resume-section h2 {
    font-size: 2.65rem;
  }

  .about-name .text-primary {
    font-size: clamp(4.25rem, 4.2vw, 6.5rem);
  }

  #about-section .comic-tagline {
    margin-top: 0.85rem;
    margin-bottom: 1.35rem;
  }

  #about-section .comic-tagline.sketch-box {
    padding: var(--tagline-sketch-pad-top) var(--tagline-sketch-pad-x) var(--tagline-sketch-pad-bottom);
  }

  #about-section .comic-detail {
    padding: 0.45rem 0.75rem;
  }

  #about-section .about-social-row {
    gap: 1.1rem;
    margin-top: 0.4rem;
  }

  #about-section .list-social-icons a .fa-lg,
  #about-section .list-social-icons .social-icon-button .fa-lg {
    font-size: 2rem;
  }

  #sideNav .navbar-brand,
  #sideNav .navbar-brand span {
    font-size: 1.7rem;
  }

  #sideNav .navbar-nav .nav-item .nav-link {
    font-size: 1.55rem;
    padding: 0.28rem 0.85rem;
  }

  #sideNav .navbar-brand .img-profile {
    max-width: 7.5rem;
    max-height: 7.5rem;
  }
}

@media (min-width: 3840px) {
  :root {
    --side-nav-width: 26rem;
    --profile-photo-size: 18.5rem;
    --tagline-sketch-pad-top: 1.45rem;
    --tagline-sketch-pad-x: 2.95rem;
    --tagline-sketch-pad-bottom: 1.35rem;
    --tagline-font-size: 1.29rem;
    --tagline-title-font-size: 1.75rem;
    --comic-detail-font-size: 1.67rem;
  }

  #sideNav {
    --nav-item-gap: 1.1rem;
  }

  section.resume-section h2 {
    font-size: 3rem;
  }

  .about-name .text-primary {
    font-size: clamp(4.75rem, 4vw, 7rem);
  }

  #sideNav .navbar-nav .nav-item .nav-link {
    font-size: 1.7rem;
  }
}