/* ==========================================================================
   winters.page — Kandinsky Bauhaus Minimalist Design System
   Single-column editorial layout (Dario Amodei inspired) + Multi-Page Architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens & Color System
   -------------------------------------------------------------------------- */
:root {
  /* Fonts */
  --font-serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", Courier, monospace;
  --font-active: var(--font-serif);
  
  /* Font Scaling */
  --font-scale: 1;
  --base-size: calc(17px * var(--font-scale));
  --line-height: 1.68;

  /* LIGHT MODE PALETTE (Warm parchment yellow + soft turquoise + Bauhaus accents) */
  --bg-primary: #FAF5E6;              /* warm light yellow parchment */
  --bg-secondary: #F2ECCE;            /* subtle parchment card */
  --bg-tertiary: #E8E0BF;             /* deeper parchment border */
  --bg-popover: #FAF6EB;              /* settings popover background */
  --text-primary: #212527;            /* deep soft charcoal ink */
  --text-secondary: #5C6467;          /* muted graphite */
  --text-tertiary: #879093;           /* light slate */
  
  /* Turquoise / Green Accents */
  --accent-teal: #246B72;             /* rich turquoise ink */
  --accent-teal-hover: #184D52;       /* deep turquoise hover */
  --capsule-bg: #DFEEE9;              /* soft turquoise capsule */
  --capsule-border: #C8DFD8;          /* delicate capsule border */
  --capsule-text: #246B72;            /* capsule text */
  --border-subtle: #E5DFC8;           /* delicate hairline rule */
  
  /* Kandinsky Bauhaus Triad */
  --kandinsky-yellow: #E5B220;        /* cadmium yellow */
  --kandinsky-teal: #246B72;          /* turquoise / prussian teal */
  --kandinsky-red: #C84B31;           /* Bauhaus vermilion */
  --kandinsky-blue: #2E5A88;          /* Bauhaus cobalt */
  
  --shadow-subtle: 0 4px 20px rgba(70, 60, 40, 0.08);
  --shadow-popover: 0 10px 30px rgba(60, 50, 30, 0.14);
  --transition-fast: 0.18s ease;
  --transition-smooth: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* DARK MODE PALETTE (Obsidian night canvas + luminous teal & warm cadmium yellow) */
[data-theme="dark"] {
  --bg-primary: #121516;              /* deep obsidian canvas */
  --bg-secondary: #192022;            /* slate night card */
  --bg-tertiary: #232C2E;             /* border/rule */
  --bg-popover: #1A2224;              /* popover card */
  --text-primary: #E5ECE9;            /* crisp off-white text */
  --text-secondary: #9AA6A3;          /* muted pale slate */
  --text-tertiary: #6E7B78;           /* dim slate */
  
  --accent-teal: #4ED8C2;             /* luminous electric turquoise */
  --accent-teal-hover: #75E8D6;       /* bright teal hover */
  --capsule-bg: #1B2C2E;              /* dark turquoise capsule */
  --capsule-border: #294649;          /* dark capsule border */
  --capsule-text: #4ED8C2;            /* bright turquoise capsule text */
  --border-subtle: #243033;           /* dark hairline rule */
  
  --kandinsky-yellow: #F6D062;
  --kandinsky-teal: #4ED8C2;
  --kandinsky-red: #E76F51;
  --kandinsky-blue: #4A90E2;
  
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.45);
  --shadow-popover: 0 12px 36px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Reset & Base Styles
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--base-size);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-active);
  line-height: var(--line-height);
  padding: 0 1.25rem 5rem 1.25rem;
  position: relative;
  min-height: 100vh;
}

body.font-garamond {
  --font-active: var(--font-serif);
}

body.font-courier {
  --font-active: var(--font-mono);
}

/* Links: Native / Internal Links (default: clean, no dotted lines) */
a,
a:link,
a:visited {
  color: inherit;
  text-decoration: none;
  opacity: 1;
  transition: opacity var(--transition-fast), text-decoration var(--transition-fast);
}

a:hover,
a:focus,
a:active {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

/* External Links Only (Outbound links to external websites): subtle dotted underline */
a[href^="http://"],
a[href^="https://"],
a[target="_blank"],
a[href^="mailto:"] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

a[href^="http://"]:hover,
a[href^="https://"]:hover,
a[target="_blank"]:hover,
a[href^="mailto:"]:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Kandinsky Bauhaus Geometric Backdrop Elements
   -------------------------------------------------------------------------- */
.kandinsky-bg-composition {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.kandinsky-bg-tr {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}

.kandinsky-bg-bl {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
  transform-origin: center center;
}

[data-theme="dark"] .kandinsky-bg-composition {
  opacity: 0.28;
}

/* --------------------------------------------------------------------------
   Dario Amodei Single-Column Layout
   -------------------------------------------------------------------------- */
.page-container {
  max-width: 700px;
  margin: 0 auto;
  padding-top: 2rem;
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Top Bar: Kandinsky Settings Glyph (Left) + Dropdown Headers (Right)
   -------------------------------------------------------------------------- */
.top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.35rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

.brand-settings-container {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  position: relative;
}

/* The Brand Logo & Settings Button */
.settings-glyph-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}

.settings-glyph-btn:hover {
  background: rgba(36, 107, 114, 0.08);
}

[data-theme="dark"] .settings-glyph-btn:hover {
  background: rgba(78, 216, 194, 0.12);
}

.settings-glyph-btn:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

.kandinsky-glyph-svg {
  width: 28px;
  height: 28px;
  display: block;
  overflow: visible;
  transform-origin: 16px 16.5px;
  transition: transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1);
}

/* Hover: subtle feedback on unopened button */
.settings-glyph-btn:not([aria-expanded="true"]):not(.active):hover .kandinsky-glyph-svg {
  transform: scale(1.08);
}

/* Logo Elements */
.glyph-circle {
  stroke: var(--accent-teal);
  stroke-width: 1.4;
  fill: none;
  transition: stroke var(--transition-fast);
}

.glyph-top-bar,
.glyph-mid-bar {
  fill: var(--text-secondary);
  opacity: 0.85;
  transition: fill var(--transition-fast);
}

.glyph-stem {
  stroke: var(--kandinsky-red);
  stroke-width: 1.4;
  stroke-linecap: butt;
  transition: stroke var(--transition-fast);
}

.glyph-wing {
  stroke: var(--kandinsky-red);
  stroke-width: 1.4;
  stroke-linecap: butt;
  transition: transform 0.42s cubic-bezier(0.34, 1.25, 0.64, 1), stroke var(--transition-fast);
}

.glyph-wing-left {
  transform-origin: 12.8px 22.3px;
}

.glyph-wing-right {
  transform-origin: 19.2px 22.3px;
}

/* --------------------------------------------------------------------------
   Settings Button Interaction: Two Settings / States
   1. Normal setting: As drawn (wings separate & spread, 0 deg)
   2. Active / Clicked setting: Wings collapse into middle line & logo turns 90 degrees
   -------------------------------------------------------------------------- */
.settings-glyph-btn[aria-expanded="true"] .kandinsky-glyph-svg,
.settings-glyph-btn.active .kandinsky-glyph-svg {
  transform: rotate(90deg);
}

.settings-glyph-btn[aria-expanded="true"] .glyph-wing-left,
.settings-glyph-btn.active .glyph-wing-left {
  transform: translate(3.2px, 0) rotate(38.2deg);
}

.settings-glyph-btn[aria-expanded="true"] .glyph-wing-right,
.settings-glyph-btn.active .glyph-wing-right {
  transform: translate(-3.2px, 0) rotate(-38.2deg);
}

.site-title {
  font-size: 1.12rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

body.font-courier .site-title {
  font-size: 0.96rem;
}

.title-initial {
  font-weight: 700;
  display: inline;
  transition: color var(--transition-fast);
}

.title-f,
.title-t {
  color: #C88A1A;
}

[data-theme="dark"] .title-f,
[data-theme="dark"] .title-t {
  color: #F0C265;
}

.title-subtle {
  color: #879093;
  font-weight: 400;
  transition: color var(--transition-fast);
}

[data-theme="dark"] .title-subtle {
  color: #8A9693;
}

.title-w {
  color: var(--kandinsky-red);
}

.title-o {
  color: var(--accent-teal);
}

/* --------------------------------------------------------------------------
   Settings Popout Drawer
   -------------------------------------------------------------------------- */
.settings-popover {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--bg-popover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow-popover);
  width: 280px;
  z-index: 100;
  display: none;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.settings-popover.open {
  display: block;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.popover-title {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.popover-close-btn {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 5px;
}

.popover-close-btn:hover {
  color: var(--text-primary);
}

.setting-row {
  margin-bottom: 0.95rem;
}

.setting-row:last-child {
  margin-bottom: 0;
}

.setting-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
}

/* Control Pills inside Popover */
.pill-cluster {
  display: flex;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 2px;
}

.pill-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
}

.pill-btn:hover {
  color: var(--text-primary);
}

.pill-btn.active {
  background: var(--capsule-bg);
  color: var(--capsule-text);
  border: 1px solid var(--capsule-border);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Headers With Dropdowns: CV, Projects, Research, Technology, Philosophy
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Three-Line Bauhaus Navigation Toggle & Popover Menu
   Lines: Gold, Turquoise, Red
   -------------------------------------------------------------------------- */
.nav-menu-container {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-menu-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.nav-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .nav-menu-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}

.nav-menu-btn:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 2px;
}

.nav-lines-svg {
  width: 22px;
  height: 17px;
  display: block;
  overflow: visible;
}

.nav-line {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity var(--transition-fast);
}

.line-gold {
  fill: var(--kandinsky-yellow);
}

.line-teal {
  fill: var(--accent-teal);
}

.line-red {
  fill: var(--kandinsky-red);
}

.nav-menu-btn:hover .line-gold {
  transform: translateX(1px);
}

.nav-menu-btn:hover .line-red {
  transform: translateX(-1px);
}

.nav-menu-btn.active {
  background: rgba(36, 107, 114, 0.08);
}

[data-theme="dark"] .nav-menu-btn.active {
  background: rgba(78, 216, 194, 0.12);
}

/* Popover Navigation Menu */
.nav-menu-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--bg-popover);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.45rem;
  box-shadow: var(--shadow-popover);
  min-width: 180px;
  z-index: 100;
  display: none;
  animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-menu-popover.open {
  display: block;
}

.nav-menu-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-menu-link {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-menu-link:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-menu-link.active {
  color: var(--accent-teal);
  font-weight: 600;
}

.dropdown-nav-cluster {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
  z-index: 90;
  display: none;
}

.nav-dropdown.open .dropdown-menu {
  display: block;
  animation: popoverFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dropdown-item {
  display: block;
  padding: 0.5rem 1.1rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--accent-teal);
}

.dropdown-item-meta {
  display: block;
  font-size: 0.74rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   Super Minimal Logos Strip (Cambridge, Oxford, TU Delft, Leiden, McKinsey, Tesla, ESA, Forze)
   -------------------------------------------------------------------------- */
.minimal-logos-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.9rem 0;
  margin: 1.75rem 0 2.5rem 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.minimal-logo-item {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-family: var(--font-mono);
  opacity: 0.85;
  text-decoration: none;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.minimal-logo-item:hover {
  opacity: 1;
  color: var(--accent-teal);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Introduction & Bio (Dario Amodei editorial style)
   -------------------------------------------------------------------------- */
.bio-section {
  margin-bottom: 2rem;
}

.bio-lead {
  font-size: 1.12rem;
  line-height: 1.68;
  color: var(--text-primary);
}

.more-toggle {
  display: inline;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  margin-left: 0.35rem;
  font-weight: 500;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.more-toggle:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

.bio-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.32s ease, margin-top 0.25s ease;
}

.bio-expanded.open {
  max-height: 600px;
  opacity: 1;
  margin-top: 1rem;
}

.bio-expanded p {
  margin-bottom: 0.85rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.65;
}

.social-links {
  display: flex;
  gap: 1.4rem;
  margin-top: 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px dotted var(--border-subtle);
  flex-wrap: wrap;
}

.social-links a {
  font-size: 0.9rem;
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.social-links a:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

.social-links a[href^="http://"],
.social-links a[href^="https://"],
.social-links a[target="_blank"],
.social-links a[href^="mailto:"] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

.social-links a[href^="http://"]:hover,
.social-links a[href^="https://"]:hover,
.social-links a[target="_blank"]:hover,
.social-links a[href^="mailto:"]:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Ultra-Minimal Home Page: Dario Amodei Bullet-List Sections
   -------------------------------------------------------------------------- */
.dario-section {
  margin-bottom: 2.25rem;
}

.dario-section-heading {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dario-section-heading::before,
.sub-block-title::before {
  display: none !important;
}

/* Kandinsky Element: Header Dot Glyph */
.kandinsky-glyph-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  vertical-align: middle;
}

.kandinsky-dot-svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible;
  transform: rotate(0deg);
  transition: transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Scroll Animation: When scrolled into view, it rotates 90° dynamically (like when pressed) */
.dario-section-heading.in-view .kandinsky-dot-svg,
.sub-block-title.in-view .kandinsky-dot-svg {
  transform: rotate(90deg);
}

/* Interactive Hover / Active on Heading */
.dario-section-heading:hover .kandinsky-dot-svg,
.sub-block-title:hover .kandinsky-dot-svg {
  transform: rotate(180deg) scale(1.15);
}

.dario-section-heading:active .kandinsky-dot-svg,
.sub-block-title:active .kandinsky-dot-svg {
  transform: rotate(270deg) scale(0.95);
}

.kandinsky-glyph-dot.spinning .kandinsky-dot-svg {
  transform: rotate(360deg) scale(1.2) !important;
  transition: transform 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

.dario-bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.dario-bullet-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.35rem 0;
  border-bottom: 1px dotted var(--border-subtle);
}

.dario-bullet-item:last-child {
  border-bottom: none;
}

.dario-bullet-link {
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 1;
}

.dario-bullet-link:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

.dario-bullet-year {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.dario-heading-link {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

.dario-heading-link:hover {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

.dario-more-row {
  margin-top: 0.65rem;
}

.dario-more-link {
  color: inherit;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.dario-more-link:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Dedicated Page Styles (cv.html, projects.html, research.html, etc.)
   -------------------------------------------------------------------------- */
.page-intro-header {
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.back-home-link {
  font-size: 0.85rem;
  color: var(--text-tertiary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
}

.back-home-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.page-headline {
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.35rem;
}

.page-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Sub-blocks on Dedicated Pages */
.sub-block {
  margin-bottom: 2.25rem;
}

.sub-block-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dotted var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* CV Entries */
.cv-entry {
  padding: 0.85rem 0;
  border-bottom: 1px dotted var(--border-subtle);
}

.cv-entry:last-child {
  border-bottom: none;
}

.cv-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.cv-institution {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cv-institution a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.cv-institution a:hover {
  color: inherit;
  text-decoration: underline;
  opacity: 1;
}

.cv-institution a[href^="http://"],
.cv-institution a[href^="https://"],
.cv-institution a[target="_blank"] {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
}

.cv-institution a[href^="http://"]:hover,
.cv-institution a[href^="https://"]:hover,
.cv-institution a[target="_blank"]:hover {
  text-decoration: underline;
}

.cv-period {
  font-size: 0.82rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.cv-degree {
  font-size: 0.96rem;
  color: var(--accent-teal);
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.cv-division {
  font-size: 0.86rem;
  color: var(--text-tertiary);
  margin-bottom: 0.45rem;
}

.cv-bullet-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.4rem;
}

.cv-bullet-list li {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.35rem;
}

.cv-bullet-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-teal);
}

/* Projects Cards */
.project-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1.25rem 1.45rem;
  margin-bottom: 1.25rem;
  transition: border-color var(--transition-fast);
}

.project-box:hover {
  border-color: var(--accent-teal);
}

.project-header-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.45rem;
}

.project-title {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-primary);
}

.project-category-badge {
  font-size: 0.74rem;
  font-family: var(--font-mono);
  background: var(--capsule-bg);
  color: var(--capsule-text);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--capsule-border);
  white-space: nowrap;
}

.project-summary {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.project-highlights {
  list-style: none;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-subtle);
}

.project-highlights li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.35rem;
}

.project-highlights li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-teal);
}

/* Research Pillars */
.research-overview-box {
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-secondary);
  padding: 1.15rem 1.35rem;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent-teal);
  border-radius: 4px;
  margin-bottom: 2rem;
}

.pillar-card {
  padding: 1rem 0;
  border-bottom: 1px dotted var(--border-subtle);
}

.pillar-card:last-child {
  border-bottom: none;
}

.pillar-title {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.pillar-desc {
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.62;
}

/* Technology & Interactive Notebook */
.tech-stack-box {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}

.tech-group-title {
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.tech-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tech-tag {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  background: var(--capsule-bg);
  color: var(--capsule-text);
  border: 1px solid var(--capsule-border);
  padding: 3px 9px;
  border-radius: 6px;
}

/* Interactive Jupyter Notebook Container */
.notebook-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1.35rem 1.5rem;
  margin-top: 1.5rem;
}

.notebook-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.notebook-title {
  font-size: 1.12rem;
  font-weight: 600;
}

.notebook-badge {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--capsule-bg);
  color: var(--capsule-text);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--capsule-border);
}

.nb-cell {
  margin-bottom: 1.35rem;
}

.nb-markdown {
  margin-bottom: 0.85rem;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.nb-markdown h3 {
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
  color: var(--accent-teal);
}

.nb-code-wrapper {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.nb-input-row {
  display: flex;
  padding: 0.65rem 0.95rem;
}

.nb-prompt {
  color: var(--accent-teal);
  font-weight: 600;
  user-select: none;
  min-width: 65px;
  font-size: 0.8rem;
}

.nb-code {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
  color: var(--text-primary);
}

.nb-output-row {
  display: flex;
  border-top: 1px dashed var(--border-subtle);
  padding: 0.6rem 0.95rem;
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-secondary);
  font-size: 0.82rem;
}

[data-theme="dark"] .nb-output-row {
  background: rgba(255, 255, 255, 0.02);
}

.nb-out-prompt {
  color: var(--kandinsky-red);
  min-width: 65px;
  user-select: none;
}

/* Philosophy Essays */
.philo-bg-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 1.25rem 1.45rem;
  margin-bottom: 2rem;
}

.philo-essay {
  margin-bottom: 2rem;
}

.philo-essay:last-child {
  margin-bottom: 0;
}

.philo-essay-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.philo-essay-summary {
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  font-size: 0.94rem;
}

.philo-essay-text {
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.dinkus {
  text-align: center;
  margin: 1.75rem 0;
  color: var(--text-tertiary);
  letter-spacing: 0.5rem;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Footer & Colophon
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 4.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.footer-domain {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Responsive Rules
   -------------------------------------------------------------------------- */
@media (max-width: 680px) {
  html {
    font-size: calc(16px * var(--font-scale));
  }

  .top-nav-bar {
    align-items: center;
    gap: 0.8rem;
  }

  .site-title {
    font-size: 0.95rem;
  }

  .nav-menu-popover {
    right: 0;
  }

  .minimal-logos-bar {
    justify-content: center;
    gap: 0.6rem 1rem;
  }

  .dropdown-menu {
    right: auto;
    left: 0;
  }

  .settings-popover {
    left: 0;
    width: calc(100vw - 2.5rem);
    max-width: 300px;
  }

  .nb-input-row, .nb-output-row {
    flex-direction: column;
    gap: 0.25rem;
  }

  .nb-prompt, .nb-out-prompt {
    min-width: unset;
  }
}