/* ═══════════════════════════════════════════════════════════════════════════
   Ndoh Penn — Personal Website
   Full custom stylesheet (light + dark mode)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables — light ── */
:root {
  --accent:    #1a56db;
  --accent-lt: #e8effe;
  --accent-dk: #1040a8;
  --green:     #0e7a4f;
  --green-lt:  #dcfce7;
  --ink:       #0f1117;
  --ink-mid:   #3a3d4a;
  --ink-soft:  #6b6f80;
  --rule:      #d8dae3;
  --bg:        #f7f8fc;
  --bg-card:   #ffffff;
  --mono:      'IBM Plex Mono', monospace;
  --sans:      'IBM Plex Sans', sans-serif;
  --serif:     'IBM Plex Serif', serif;
}

/* ── Theme toggle button ── */
.theme-toggle {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  color: inherit !important;
  font-size: 12px !important;
  font-family: 'IBM Plex Mono', monospace !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  opacity: 0.75;
  transition: opacity 0.15s, border-color 0.15s;
  box-shadow: none !important;
}
.theme-toggle:hover { opacity: 1; border-color: rgba(255,255,255,0.45) !important; }
.toggle-icon  { font-size: 13px; }
.toggle-label { font-size: 11px; letter-spacing: 0.3px; }

/* ── Shared layout ── */
.content-inner { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 32px;
}

/* ── Buttons ── */
.btn-primary, .btn-ghost {
  display: inline-block; padding: 10px 22px; border-radius: 5px;
  font-size: 13.5px; font-weight: 500; text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  border: 1.5px solid transparent; line-height: 1.4;
}
.btn-primary { background: var(--accent); color: #fff !important; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn-ghost { background: transparent; color: var(--accent) !important; border-color: var(--accent); }
.btn-ghost:hover { background: var(--accent-lt); }

/* ── Hero ── */
.hero-section { padding: 72px 32px 64px; border-bottom: 1px solid var(--rule); background: #ffffff; }
.hero-inner {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 240px; gap: 56px; align-items: center;
}
.hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.hero-name {
  font-family: 'IBM Plex Serif', serif;
  font-size: 44px; font-weight: 600; line-height: 1.12;
  letter-spacing: -0.5px; color: var(--ink); margin-bottom: 18px;
}
.hero-desc { font-size: 16px; color: var(--ink-mid); line-height: 1.75; margin-bottom: 30px; max-width: 500px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero-photo-col { text-align: center; }
.hero-photo {
  width: 180px; height: 180px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--rule);
  display: block; margin: 0 auto 16px;
}
.hero-links { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; color: var(--ink-soft);
  text-decoration: none; transition: color 0.15s;
}
.hero-links a:hover { color: var(--accent); }

/* ── About ── */
.about-section { padding: 64px 32px; border-bottom: 1px solid var(--rule); background: #ffffff; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.about-text { font-size: 14.5px; color: var(--ink-mid); line-height: 1.8; }
.about-text p + p { margin-top: 14px; }
.about-text a { color: var(--accent); text-decoration: none; }
.about-text a:hover { text-decoration: underline; }
.skill-group { margin-bottom: 20px; }
.skill-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--accent-lt); color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; padding: 4px 10px; border-radius: 3px; white-space: nowrap;
}

/* ── Packages ── */
.packages-section { padding: 64px 32px; border-bottom: 1px solid var(--rule); background: var(--bg); }
.pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pkg-card {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 22px 24px; transition: border-color 0.2s, box-shadow 0.2s;
  text-decoration: none !important; color: inherit !important; display: block;
}
.pkg-card:hover { border-color: var(--accent); box-shadow: 0 2px 14px rgba(26,86,219,0.08); }
.pkg-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pkg-name { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.pkg-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px; white-space: nowrap;
}
.badge-cran    { background: var(--green-lt); color: var(--green); }
.badge-pending { background: #fef9c3; color: #854d0e; }
.badge-dev     { background: var(--accent-lt); color: var(--accent); }
.pkg-desc { font-size: 13px; color: var(--ink-mid); line-height: 1.6; margin: 0; }
.pkg-grid-cv { margin: 16px 0 8px; }

/* ── CTA ── */
.cta-section { padding: 64px 32px; background: var(--ink); }
.cta-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-inner h2 {
  font-family: 'IBM Plex Serif', serif;
  font-size: 26px; font-weight: 600; color: #ffffff;
  margin-bottom: 6px; letter-spacing: -0.3px;
}
.cta-inner p { color: rgba(255,255,255,0.58); font-size: 14px; margin: 0; }

/* ── CV page ── */
.cv-actions { margin-bottom: 28px; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo-col { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .pkg-grid { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; text-align: center; }
  .hero-name { font-size: 34px; }
}
@media (max-width: 540px) {
  .hero-section, .about-section, .packages-section, .cta-section { padding-left: 20px; padding-right: 20px; }
  .content-inner { padding: 0 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — index page (custom layout, class-based)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .hero-section    { background: #0f1117 !important; border-color: #242737; }
[data-theme="dark"] .hero-name       { color: #f0f2f8; }
[data-theme="dark"] .hero-desc       { color: #a8adc4; }
[data-theme="dark"] .hero-eyebrow    { color: #4a8af4; }
[data-theme="dark"] .hero-photo      { border-color: #242737; }
[data-theme="dark"] .hero-links a    { color: #5c618a; }
[data-theme="dark"] .hero-links a:hover { color: #4a8af4; }
[data-theme="dark"] .btn-primary { background: #4a8af4 !important; color: #0f1117 !important; border-color: #4a8af4 !important; }
[data-theme="dark"] .btn-ghost { border-color: #4a8af4 !important; color: #4a8af4 !important; background: transparent !important; }
[data-theme="dark"] .btn-ghost:hover { background: #1a2540 !important; }
[data-theme="dark"] .section-label { color: #4a8af4; }
[data-theme="dark"] .about-section  { background: #0f1117 !important; border-color: #242737; }
[data-theme="dark"] .about-text     { color: #a8adc4; }
[data-theme="dark"] .about-text a   { color: #4a8af4; }
[data-theme="dark"] .skill-label    { color: #5c618a; }
[data-theme="dark"] .chip           { background: #1a2540 !important; color: #4a8af4 !important; }
[data-theme="dark"] .packages-section { background: #0d0f14 !important; border-color: #242737; }
[data-theme="dark"] .pkg-card       { background: #141720 !important; border-color: #242737 !important; }
[data-theme="dark"] .pkg-card:hover { border-color: #4a8af4 !important; box-shadow: 0 2px 16px rgba(74,138,244,0.12) !important; }
[data-theme="dark"] .pkg-name       { color: #f0f2f8 !important; }
[data-theme="dark"] .pkg-desc       { color: #a8adc4 !important; }
[data-theme="dark"] .badge-cran     { background: #052e16 !important; color: #34d399 !important; }
[data-theme="dark"] .badge-pending  { background: #2d1f00 !important; color: #fbbf24 !important; }
[data-theme="dark"] .badge-dev      { background: #1a2540 !important; color: #4a8af4 !important; }
[data-theme="dark"] .cta-section    { background: #0a0c11 !important; }
[data-theme="dark"] .cta-inner h2   { color: #f0f2f8 !important; }
[data-theme="dark"] .cta-inner p    { color: rgba(240,242,248,0.5) !important; }
[data-theme="dark"] .theme-toggle   { border-color: rgba(255,255,255,0.15) !important; color: #c8cdde !important; }
[data-theme="dark"] .theme-toggle:hover { border-color: rgba(255,255,255,0.35) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — all Quarto standard pages (cv, projects, contact)
   Uses html[data-theme="dark"] for higher specificity than Bootstrap CSS
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: #0f1117 !important;
  color: #f0f2f8 !important;
}

/* Quarto layout containers */
html[data-theme="dark"] #quarto-content,
html[data-theme="dark"] #quarto-document-content,
html[data-theme="dark"] .quarto-container,
html[data-theme="dark"] .page-columns,
html[data-theme="dark"] .page-rows,
html[data-theme="dark"] .column-body,
html[data-theme="dark"] .column-page,
html[data-theme="dark"] main,
html[data-theme="dark"] main.content,
html[data-theme="dark"] #quarto-sidebar,
html[data-theme="dark"] .sidebar {
  background-color: #0f1117 !important;
  color: #f0f2f8 !important;
}

/* Navbar */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .navbar.navbar-expand-lg {
  background-color: #0d0f14 !important;
  border-bottom: 1px solid #242737 !important;
}
html[data-theme="dark"] .navbar .navbar-brand,
html[data-theme="dark"] .navbar-nav .nav-link { color: #c8cdde !important; }
html[data-theme="dark"] .navbar-nav .nav-link:hover { color: #4a8af4 !important; }

/* Typography */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: #f0f2f8 !important; }
html[data-theme="dark"] p   { color: #a8adc4 !important; }
html[data-theme="dark"] li  { color: #a8adc4 !important; }
html[data-theme="dark"] a   { color: #4a8af4 !important; }
html[data-theme="dark"] strong,
html[data-theme="dark"] b   { color: #e0e3f0 !important; }
html[data-theme="dark"] em  { color: #a8adc4 !important; }

/* Tables */
html[data-theme="dark"] table           { color: #a8adc4 !important; }
html[data-theme="dark"] thead tr        { background-color: #1a1d28 !important; }
html[data-theme="dark"] th              { color: #c8cdde !important; border-color: #242737 !important; }
html[data-theme="dark"] td              { color: #a8adc4 !important; border-color: #242737 !important; }
html[data-theme="dark"] tbody tr:nth-child(odd)  { background-color: #141720 !important; }
html[data-theme="dark"] tbody tr:nth-child(even) { background-color: #0f1117 !important; }

/* Code */
html[data-theme="dark"] code {
  background-color: #1a1d28 !important;
  color: #4a8af4 !important;
  border: none !important;
}
html[data-theme="dark"] pre,
html[data-theme="dark"] pre code {
  background-color: #1a1d28 !important;
  color: #c8cdde !important;
  border: 1px solid #242737 !important;
}

/* Dividers, blockquotes */
html[data-theme="dark"] hr { border-color: #242737 !important; }
html[data-theme="dark"] blockquote {
  border-left-color: #4a8af4 !important;
  color: #a8adc4 !important;
  background-color: #141720 !important;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .nav-footer,
html[data-theme="dark"] #quarto-footer {
  background-color: #0a0c11 !important;
  border-top: 1px solid #242737 !important;
  color: #5c618a !important;
}
html[data-theme="dark"] .nav-footer a { color: #4a8af4 !important; }

/* Package cards on CV page */
html[data-theme="dark"] .pkg-card     { background: #141720 !important; border-color: #242737 !important; }
html[data-theme="dark"] .pkg-name     { color: #f0f2f8 !important; }
html[data-theme="dark"] .pkg-desc     { color: #a8adc4 !important; }
html[data-theme="dark"] .badge-cran   { background: #052e16 !important; color: #34d399 !important; }
html[data-theme="dark"] .badge-pending { background: #2d1f00 !important; color: #fbbf24 !important; }
html[data-theme="dark"] .badge-dev    { background: #1a2540 !important; color: #4a8af4 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE — Projects page
   Targets Bootstrap .card and project-specific elements
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bootstrap cards */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background-color: #141720 !important;
  border-color: #242737 !important;
  color: #a8adc4 !important;
}
html[data-theme="dark"] .card-title   { color: #f0f2f8 !important; }
html[data-theme="dark"] .card-text    { color: #a8adc4 !important; }
html[data-theme="dark"] .card-header  { border-bottom-color: #242737 !important; }

/* Card eyebrow labels (R PACKAGE · SHINY APP etc.) */
html[data-theme="dark"] .card .text-muted,
html[data-theme="dark"] .card small,
html[data-theme="dark"] .card .card-subtitle { color: #5c618a !important; }

/* Tables inside cards */
html[data-theme="dark"] .card table       { background: transparent !important; }
html[data-theme="dark"] .card thead tr    { background-color: #1e2235 !important; }
html[data-theme="dark"] .card thead th    { color: #c8cdde !important; border-color: #2e3248 !important; }
html[data-theme="dark"] .card tbody tr    { background-color: #141720 !important; }
html[data-theme="dark"] .card tbody tr:nth-child(even) { background-color: #111420 !important; }
html[data-theme="dark"] .card td          { color: #a8adc4 !important; border-color: #242737 !important; }
html[data-theme="dark"] .card td strong   { color: #e0e3f0 !important; }

/* Tag/badge pills on project cards */
html[data-theme="dark"] .badge,
html[data-theme="dark"] .project-tag,
html[data-theme="dark"] span.badge {
  background-color: #1e2235 !important;
  color: #a8adc4 !important;
  border: 1px solid #2e3248 !important;
}

/* Coloured Bootstrap badges */
html[data-theme="dark"] .badge.bg-primary,
html[data-theme="dark"] .badge.bg-info    { background-color: #1a2540 !important; color: #4a8af4 !important; }
html[data-theme="dark"] .badge.bg-success { background-color: #052e16 !important; color: #34d399 !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: #2d1f00 !important; color: #fbbf24 !important; }
html[data-theme="dark"] .badge.bg-danger  { background-color: #3b0a0a !important; color: #f87171 !important; }
html[data-theme="dark"] .badge.bg-secondary { background-color: #1e2235 !important; color: #6b7099 !important; }

/* Project card links (Docs →, GitHub →) */
html[data-theme="dark"] .card a:not(.btn) { color: #4a8af4 !important; }
html[data-theme="dark"] .card a:not(.btn):hover { color: #6aa0ff !important; }

/* Live App / green button stays green */
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] a.btn-success {
  background-color: #0e7a4f !important;
  border-color: #0e7a4f !important;
  color: #ffffff !important;
}

/* Bootstrap list groups (if used in project cards) */
html[data-theme="dark"] .list-group-item {
  background-color: #141720 !important;
  border-color: #242737 !important;
  color: #a8adc4 !important;
}

/* Horizontal rules inside cards */
html[data-theme="dark"] .card hr { border-color: #242737 !important; }

/* Project page main content area heading color */
html[data-theme="dark"] .quarto-title-block,
html[data-theme="dark"] #projects-title { color: #f0f2f8 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS PAGE — uses CSS variables so dark mode works automatically
   ═══════════════════════════════════════════════════════════════════════════ */

/* Project page variables — light */
:root {
  --proj-blue:       #1a3a5c;
  --proj-green:      #2e7d60;
  --proj-bg-card:    #ffffff;
  --proj-bg-feat:    #f5f8fb;
  --proj-border:     #e0e6ed;
  --proj-text:       #555555;
  --proj-sub:        #666666;
  --proj-tag-bg:     #f0f4f8;
  --proj-tag-green:  #eef4f0;
  --proj-tag-teal:   #e6f4f1;
  --proj-tag-c-blue: #1a3a5c;
  --proj-tag-c-grn:  #1a5c3a;
  --proj-tag-c-teal: #1a5c52;
  --proj-th-bg:      #1a3a5c;
  --proj-td-border:  #e0e6ed;
  --proj-td-text:    #444444;
  --proj-note-bg:    #f5f8fb;
  --proj-note-bd:    #1a3a5c;
  --proj-note-text:  #555555;
}

body { font-family: 'DM Sans', 'IBM Plex Sans', sans-serif; }

.projects-wrap  { max-width: 960px; margin: 3rem auto; padding: 0 2rem; }

.page-title {
  font-family: 'DM Serif Display', 'IBM Plex Serif', serif;
  font-size: 2.2rem;
  color: var(--proj-blue);
  margin-bottom: 0.4rem;
}

.page-subtitle {
  font-size: 0.97rem;
  color: var(--proj-sub);
  margin-bottom: 2.5rem;
  line-height: 1.7;
  max-width: 680px;
}

.section-heading {
  font-family: 'DM Serif Display', 'IBM Plex Serif', serif;
  font-size: 1.3rem;
  color: var(--proj-blue);
  border-bottom: 2px solid var(--proj-border);
  padding-bottom: 0.3rem;
  margin: 2.8rem 0 1.4rem;
}

/* Cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
}

.project-card {
  border: 1.5px solid var(--proj-border);
  border-radius: 10px;
  padding: 1.5rem;
  background: var(--proj-bg-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.project-card:hover {
  box-shadow: 0 6px 24px rgba(26,58,92,0.1);
  border-color: var(--proj-blue);
}

.project-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
  border-color: var(--proj-blue);
  background: var(--proj-bg-feat);
}

.featured-body { flex: 1; }

.project-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--proj-green);
  margin-bottom: 0.45rem;
}

.project-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--proj-blue);
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.project-card p {
  font-size: 0.88rem;
  color: var(--proj-text);
  line-height: 1.75;
  margin: 0 0 1rem;
  flex: 1;
}

/* Tags */
.project-tags  { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.tag {
  background: var(--proj-tag-bg);
  color: var(--proj-tag-c-blue);
  border-radius: 2rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
}
.tag-green { background: var(--proj-tag-green); color: var(--proj-tag-c-grn); }
.tag-teal  { background: var(--proj-tag-teal);  color: var(--proj-tag-c-teal); }

/* Links */
.project-links { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: auto; }

.project-link {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--proj-blue);
  text-decoration: none;
  border-bottom: 1.5px solid var(--proj-blue);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.project-link:hover { color: var(--proj-green); border-color: var(--proj-green); }

.project-link.live {
  background: var(--proj-green);
  color: #fff !important;
  border: none;
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
}
.project-link.live:hover { background: #235f49; }

/* Module table */
.module-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.6rem; }

.module-table th {
  background: var(--proj-th-bg);
  color: #ffffff;
  padding: 0.4rem 0.7rem;
  text-align: left;
  font-weight: 500;
}

.module-table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--proj-td-border);
  color: var(--proj-td-text);
  vertical-align: top;
}
.module-table tr:last-child td { border-bottom: none; }

/* Tier badge */
.tier-badge {
  display: inline-block;
  background: var(--proj-th-bg);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.1rem 0.5rem;
  margin-right: 0.3rem;
}

/* Note box */
.note-box {
  background: var(--proj-note-bg);
  border-left: 4px solid var(--proj-note-bd);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  color: var(--proj-note-text);
  line-height: 1.7;
  margin-top: 2.5rem;
}
.note-box a { color: var(--proj-blue); font-weight: 500; }

@media (max-width: 680px) {
  .project-card.featured { flex-direction: column; }
}


/* ── Projects dark mode ─────────────────────────────────────────────────── */

[data-theme="dark"] {
  --proj-blue:       #4a8af4;
  --proj-green:      #34d399;
  --proj-bg-card:    #141720;
  --proj-bg-feat:    #1a1d28;
  --proj-border:     #2a2d3a;
  --proj-text:       #a8adc4;
  --proj-sub:        #6b7099;
  --proj-tag-bg:     #1e2235;
  --proj-tag-green:  #052e16;
  --proj-tag-teal:   #0a2a24;
  --proj-tag-c-blue: #4a8af4;
  --proj-tag-c-grn:  #34d399;
  --proj-tag-c-teal: #2dd4bf;
  --proj-th-bg:      #1e2a45;
  --proj-td-border:  #2a2d3a;
  --proj-td-text:    #a8adc4;
  --proj-note-bg:    #141720;
  --proj-note-bd:    #4a8af4;
  --proj-note-text:  #a8adc4;
}

[data-theme="dark"] .project-card:hover {
  box-shadow: 0 6px 24px rgba(74,138,244,0.15);
}
[data-theme="dark"] .project-link.live { background: #0e7a4f; }
[data-theme="dark"] .project-link.live:hover { background: #0b6040; }
[data-theme="dark"] .module-table th { color: #c8cdde; }
[data-theme="dark"] .note-box a { color: #4a8af4; }
[data-theme="dark"] .project-card p code,
[data-theme="dark"] .project-card code { background: #1e2a45 !important; color: #4a8af4 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS PAGE — original design, CSS via variables for dark mode
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --p-blue:      #1a3a5c;
  --p-green:     #2e7d60;
  --p-bg-card:   #ffffff;
  --p-bg-feat:   #f5f8fb;
  --p-border:    #e0e6ed;
  --p-text:      #555;
  --p-sub:       #666;
  --p-tag-bg:    #f0f4f8;
  --p-tag-c:     #1a3a5c;
  --p-tag-g-bg:  #eef4f0;
  --p-tag-g-c:   #1a5c3a;
  --p-tag-t-bg:  #e6f4f1;
  --p-tag-t-c:   #1a5c52;
  --p-th-bg:     #1a3a5c;
  --p-td-bd:     #e0e6ed;
  --p-td-text:   #444;
  --p-note-bg:   #f5f8fb;
  --p-note-bd:   #1a3a5c;
  --p-link-c:    #1a3a5c;
  --p-link-h:    #2e7d60;
  --p-sec-bd:    #e0e6ed;
}

[data-theme="dark"] {
  --p-blue:      #4a8af4;
  --p-green:     #34d399;
  --p-bg-card:   #141720;
  --p-bg-feat:   #1a1d28;
  --p-border:    #2a2d3a;
  --p-text:      #a8adc4;
  --p-sub:       #6b7099;
  --p-tag-bg:    #1e2235;
  --p-tag-c:     #4a8af4;
  --p-tag-g-bg:  #052e16;
  --p-tag-g-c:   #34d399;
  --p-tag-t-bg:  #0a2a24;
  --p-tag-t-c:   #2dd4bf;
  --p-th-bg:     #1e2a45;
  --p-td-bd:     #2a2d3a;
  --p-td-text:   #a8adc4;
  --p-note-bg:   #141720;
  --p-note-bd:   #4a8af4;
  --p-link-c:    #4a8af4;
  --p-link-h:    #34d399;
  --p-sec-bd:    #2a2d3a;
}

body { font-family: 'DM Sans', 'IBM Plex Sans', sans-serif; }

.projects-wrap { max-width: 960px; margin: 3rem auto; padding: 0 2rem; }

.page-title {
  font-family: 'DM Serif Display', 'IBM Plex Serif', serif;
  font-size: 2.2rem;
  color: var(--p-blue);
  margin-bottom: 0.4rem;
}

.page-subtitle {
  font-size: 0.97rem;
  color: var(--p-sub);
  margin-bottom: 2.5rem;
  line-height: 1.7;
  max-width: 680px;
}

.section-heading {
  font-family: 'DM Serif Display', 'IBM Plex Serif', serif;
  font-size: 1.3rem;
  color: var(--p-blue);
  border-bottom: 2px solid var(--p-sec-bd);
  padding-bottom: 0.3rem;
  margin: 2.8rem 0 1.4rem;
}

/* Cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.4rem;
}

.project-card {
  border: 1.5px solid var(--p-border);
  border-radius: 10px;
  padding: 1.5rem;
  background: var(--p-bg-card);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.project-card:hover {
  box-shadow: 0 6px 24px rgba(26,58,92,0.1);
  border-color: var(--p-blue);
}

.project-card.featured {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start;
  border-color: var(--p-blue);
  background: var(--p-bg-feat);
}
.featured-body { flex: 1; }

.project-type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-green);
  margin-bottom: 0.45rem;
}

.project-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--p-blue);
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.project-card p {
  font-size: 0.88rem;
  color: var(--p-text);
  line-height: 1.75;
  margin: 0 0 1rem;
  flex: 1;
}
.project-card p code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  background: var(--p-tag-bg);
  color: var(--p-blue);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Tags */
.project-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }

.tag {
  background: var(--p-tag-bg);
  color: var(--p-tag-c);
  border-radius: 2rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
}
.tag-green { background: var(--p-tag-g-bg); color: var(--p-tag-g-c); }
.tag-teal  { background: var(--p-tag-t-bg); color: var(--p-tag-t-c); }

/* Links */
.project-links { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: auto; }

.project-link {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--p-link-c);
  text-decoration: none;
  border-bottom: 1.5px solid var(--p-link-c);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.project-link:hover { color: var(--p-link-h); border-color: var(--p-link-h); }

.project-link.live {
  background: var(--p-green);
  color: #fff !important;
  border: none;
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
}
.project-link.live:hover { opacity: 0.85; }

/* Module table */
.module-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 0.6rem; }

.module-table th {
  background: var(--p-th-bg);
  color: #ffffff;
  padding: 0.4rem 0.7rem;
  text-align: left;
  font-weight: 500;
}
.module-table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--p-td-bd);
  color: var(--p-td-text);
  vertical-align: top;
}
.module-table td strong { color: var(--p-blue); }
.module-table td code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  background: var(--p-tag-bg);
  color: var(--p-blue);
  padding: 1px 5px;
  border-radius: 3px;
}
.module-table tr:last-child td { border-bottom: none; }

/* Tier badge */
.tier-badge {
  display: inline-block;
  background: var(--p-th-bg);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 2rem;
  padding: 0.1rem 0.5rem;
  margin-right: 0.3rem;
}

/* Note box */
.note-box {
  background: var(--p-note-bg);
  border-left: 4px solid var(--p-note-bd);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  font-size: 0.9rem;
  color: var(--p-text);
  line-height: 1.7;
  margin-top: 2.5rem;
}
.note-box a { color: var(--p-blue); font-weight: 500; }

@media (max-width: 680px) {
  .project-card.featured { flex-direction: column; }
}