/* =====================================================================
   style.css — all the styling for the portfolio
   ---------------------------------------------------------------------
   Theme: dark navy with a violet accent and a bold modern sans-serif.
   To change a colour or font everywhere, edit the variables in :root.
   Sections (top to bottom):
     1. Variables     2. Base            3. Buttons & helpers
     4. Navigation    5. Section layout  6. About
     7. Skills        8. Experience      9. Education
    10. Projects     11. Books          12. Podcasts
    13. Following    14. Contact        15. Footer
    16. Loading skeletons                17. Responsive (tablet / phone)
   ===================================================================== */

/* ---------- 1. VARIABLES ---------- */
:root {
  --bg: #0B0F1E;           /* main background (near-black navy) */
  --bg-alt: #0E1328;       /* alternating section background */
  --footer: #080B17;       /* footer background (darkest) */
  --surface: #121733;      /* cards */
  --surface-hover: #161C3D;
  --ink: #0B0F1E;          /* dark text on light buttons */

  --accent: #7C5CFF;       /* violet: buttons, highlights */
  --accent-2: #6366F1;     /* indigo end of the gradient */
  --accent-light: #A593FF; /* violet for TEXT on dark (readable contrast) */
  --accent-soft: rgba(124, 92, 255, 0.14);
  --accent-border: rgba(124, 92, 255, 0.45);
  --gradient: linear-gradient(135deg, #7C5CFF 0%, #6366F1 100%);

  --text: #F5F6FA;         /* main text */
  --text-soft: #C9CDE3;    /* body copy */
  --text-muted: #9CA3C2;   /* secondary text */
  --placeholder: #1C2350;  /* image placeholder */
  --glow: rgba(124, 92, 255, 0.28); /* soft violet glow behind the hero */

  --card-bg: var(--surface);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  --radius: 16px;
  --radius-lg: 20px;
  --radius-sm: 10px;
  --pill: 999px;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --container: 1200px;
  --gutter: clamp(16px, 5vw, 48px);
  --section-pad: 112px;
  --section-bg: var(--bg); /* changed per section by the .alt class */
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* so the sticky nav doesn't cover section titles */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-light); }
a:hover { color: #C4B8FF; }

h1, h2, h3, h4, p, ul, dl, dd { margin: 0; }

/* Clear keyboard focus ring (accessibility) */
:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Violet gradient text, e.g. the name in the hero headline */
.text-gradient {
  background: linear-gradient(135deg, #A593FF 0%, #7C5CFF 55%, #6366F1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- 3. BUTTONS & HELPERS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font: 600 15.5px/1.2 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* Main action: violet gradient */
.btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 24px -12px rgba(124, 92, 255, 0.8); }
.btn-primary:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(124, 92, 255, 0.95); }
/* Secondary action: outlined */
.btn-outline { border-color: var(--border-strong); color: var(--text); background: rgba(255, 255, 255, 0.02); }
.btn-outline:hover { border-color: var(--accent-light); color: var(--text); }
/* Light button, used on the violet résumé card */
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #F0EDFF; color: var(--ink); }
.btn-small { padding: 11px 18px; font-size: 14.5px; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Section label shown above each heading, e.g. "SKILLS & TOOLS":
   a small violet chip */
.eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.eyebrow:empty { display: none; }

/* Pill-shaped tags / chips */
.chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  color: var(--text-soft);
}
.chip-accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--text);
  font-weight: 500;
}

/* "View →" style text links */
.text-link { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--accent-light); }
.text-link:hover { text-decoration: underline; }

/* Visible only to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--gradient);
  color: #fff;
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* Placeholder shown when an image is missing or fails to load */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--placeholder);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, rgba(255,255,255,.08) 10px 20px);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}
.img-ph.initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--text);
}

/* ---------- 4. NAVIGATION ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 15, 30, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  min-width: 0;
}
.brand:hover { color: var(--text); }
.brand-mark {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
}
.brand-name {
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-menu {
  list-style: none;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}
.nav-menu a:not(.btn) { color: var(--text-soft); text-decoration: none; }
.nav-menu a:not(.btn):hover { color: var(--text); }
.nav-menu [hidden] { display: none; }

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 12px;
  width: 20px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; left: 0; }
.nav-toggle-bar::before { top: -7px; }
.nav-toggle-bar::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. SECTION LAYOUT ---------- */
.section {
  padding: var(--section-pad) 0;
  background: var(--section-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* Every second visible section gets the slightly lighter navy (set by script.js) */
.section.alt { --section-bg: var(--bg-alt); }
.section[hidden] { display: none; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.section-head-text { display: flex; flex-direction: column; gap: 14px; }

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.section-intro {
  max-width: 440px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.section-intro:empty { display: none; }

/* Two-column layout used by Experience and Education (title left, content right) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 80px;
}
.split .section-head-text { align-self: start; }

/* ---------- 6. ABOUT ---------- */
.section-about {
  padding: 88px 0 96px;
  border-top: 0;
  /* a soft violet glow behind the photo */
  background: radial-gradient(760px 520px at 80% 35%, var(--glow), transparent 65%), var(--section-bg);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 72px;
  align-items: center;
}
.about-text { display: flex; flex-direction: column; gap: 26px; }

.about-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(42px, 5.4vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
/* Lines after the first ("I turn data into decisions.") are a little smaller */
.about-title .headline-sub {
  display: block;
  margin-top: 6px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.about-bio {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 540px;
}

/* Quick stats: small cards with a violet icon square */
.stats {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.stat {
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px -10px rgba(124, 92, 255, 0.9);
}
.stat-text { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -0.01em; }
/* A stat with several lines (e.g. focus industries) uses a smaller size */
.stat-list .stat-value { font-size: 14.5px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.stat-label { font-size: 13px; color: var(--text-muted); }

/* Portrait with a violet gradient frame and dot pattern */
.portrait-wrap {
  position: relative;
  justify-self: end;
  width: min(100%, 440px);
  padding: 0 24px 24px 0;
}
.portrait-frame {
  position: absolute;
  left: 24px; top: 24px; right: 0; bottom: 0;
  border-radius: 24px;
  background: var(--gradient);
  box-shadow: 0 30px 80px -30px rgba(124, 92, 255, 0.9);
}
.portrait-wrap::before { /* decorative dot grid, top-right */
  content: "";
  position: absolute;
  top: -28px; right: -20px;
  width: 96px; height: 72px;
  background-image: radial-gradient(rgba(165, 147, 255, 0.55) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--placeholder);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. SKILLS ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.skill-tile {
  min-height: 188px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  transition: border-color .2s ease, transform .2s ease;
}
.skill-tile:hover { border-color: var(--accent-border); transform: translateY(-3px); }
.skill-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.skill-icon img { width: 34px; height: 34px; object-fit: contain; }
.skill-name { display: block; font-weight: 700; font-size: 18px; line-height: 1.3; }
.skill-detail { display: block; margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}
.chip-row-label { font-size: 14px; color: var(--text-muted); margin-right: 8px; }
.chip-row ul { display: contents; list-style: none; }

/* Organisation / institution logo, shown straight on the background.
   Logos use light "reversed" versions so dark text stays readable. */
.org-logo {
  flex-shrink: 0;
  width: 128px; height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* logos line up on their left edge */
}
.org-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.org-logo .img-ph { background: none; color: var(--text-soft); font-family: var(--font-display); font-size: 20px; }

/* Square company mark on a tile (Experience). All marks share one size. */
.org-mark {
  flex-shrink: 0;
  width: 56px; height: 56px;
  padding: 9px;
  border-radius: 14px;
  background: var(--surface-hover);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.org-mark img { width: 100%; height: 100%; object-fit: contain; }
.org-mark .img-ph { background: none; color: var(--text-soft); font-family: var(--font-display); font-size: 18px; padding: 0; }

/* ---------- 8. EXPERIENCE (timeline) ---------- */
.timeline {
  list-style: none;
  padding: 0 0 0 40px;
  border-left: 2px solid rgba(165, 147, 255, 0.22);
}
.job { position: relative; padding-bottom: 48px; display: flex; flex-direction: column; gap: 12px; }
.job:last-child { padding-bottom: 0; }
.job::before { /* the dot on the line */
  content: "";
  position: absolute;
  left: -51px; top: 19px; /* centred on the 56px logo tile */
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text-soft);
  border: 4px solid var(--section-bg);
}
.job:first-child::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* newest job */
.job-head { display: flex; align-items: center; gap: 18px; }
.job-head .job-dates { margin-left: auto; align-self: flex-start; padding-top: 4px; }
.job-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.job-title { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.job-dates { font-family: var(--font-mono); font-size: 13.5px; color: var(--text-muted); white-space: nowrap; }
.job-org { font-size: 16px; font-weight: 500; color: var(--accent-light); }
.job ul { list-style: disc; padding-left: 20px; font-size: 15.5px; line-height: 1.7; color: var(--text-soft); }
.job li::marker { color: var(--accent-light); }
.job li + li { margin-top: 4px; }

/* ---------- 9. EDUCATION ---------- */
.degree-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.degree-card {
  padding: 26px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s ease;
}
.degree-card:hover { border-color: var(--accent-border); }
.degree-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.degree-years { font-family: var(--font-mono); font-size: 13px; color: var(--accent-light); }
.degree-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.degree-inst { font-size: 15.5px; color: var(--text-soft); }
.degree-detail { font-size: 14px; color: var(--text-muted); }

.cert-row {
  margin-top: 18px;
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}
.cert-row h3 { font-size: 15px; font-weight: 700; margin-right: 8px; }
.cert-row ul { display: contents; list-style: none; }

/* ---------- 10. PROJECTS ---------- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.filter-tabs:empty { display: none; }
.filter-btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: 500 15px var(--font-sans);
  cursor: pointer;
}
.filter-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.filter-btn[aria-pressed="true"] { background: var(--gradient); color: #fff; font-weight: 600; }

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.project-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease;
}
.project-card:hover { border-color: var(--accent-border); transform: translateY(-3px); }
.project-card[hidden] { display: none; }
.project-thumb { height: 200px; background: var(--placeholder); }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; } /* keep dashboard titles & KPIs */
.project-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.project-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-light);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.project-title { font-size: 19px; font-weight: 700; line-height: 1.3; }
.project-desc { font-size: 15px; line-height: 1.55; color: var(--text-soft); flex-grow: 1; }

/* ---------- 11-13. COMPACT CARDS: BOOKS, PODCASTS, FOLLOWING ----------
   Small cards, 5 in a row on desktop. Only the first row shows; the
   "Read more" button expands the shelf (smooth height animation in
   script.js). Longer text in each card sits behind a small toggle. */
.shelf {
  overflow: hidden;
  transition: height .55s cubic-bezier(.2, .7, .2, 1);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: start; /* opening one card's details doesn't stretch its neighbours */
}
.card-grid > [hidden] { display: none; }
/* Cards revealed by "Read more" fade and slide in, one after another */
.card-grid > .is-revealing { animation: card-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.book, .podcast, .follow-card {
  padding: 14px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s ease, transform .2s ease;
}
.book:hover, .podcast:hover, .follow-card:hover { border-color: var(--accent-border); transform: translateY(-3px); }

/* text inside every compact card */
.card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.card-category {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.card-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; }
.card-meta { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.card-link { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 4px; font-size: 13.5px; }
.card-more-text { font-size: 13px; line-height: 1.55; color: var(--text-soft); margin-top: 8px; }

/* small "Why I listen / Takeaway" toggle (native <details>: keyboard-accessible) */
.card-more { margin-top: 4px; }
.card-more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-light);
  cursor: pointer;
  list-style: none;
}
.card-more summary::-webkit-details-marker { display: none; }
.card-more summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.card-more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.card-more summary:hover { color: #C4B8FF; }

/* Books: cover on a small "shelf" panel, never stretched or cropped */
.book-cover {
  height: 170px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-cover img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.85);
  transition: transform .2s ease;
}
.book:hover .book-cover img { transform: scale(1.04); }
.book-cover .img-ph { border-radius: 4px; font-size: 11px; }
.book-status {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--pill);
  border: 1px solid var(--border-strong);
  font-size: 11px;
  color: var(--text-soft);
}
.stars { color: #FBBF24; font-size: 13px; letter-spacing: 2px; }

/* Podcasts: square cover art */
.podcast-cover {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--placeholder);
}
.podcast-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.podcast:hover .podcast-cover img { transform: scale(1.04); }

/* "Key takeaway" / "Why follow" box inside the toggles */
.book-takeaway,
.follow-why {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.book-takeaway-label,
.follow-why-label {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
}

/* Following: two groups; people = round photo with violet ring,
   platforms = rounded-square logo with a light ring */
.follow-group + .follow-group { margin-top: 48px; }
.follow-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 19px;
  font-weight: 700;
}
.follow-group-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  color: #fff;
}
.follow-card { padding: 20px 14px 16px; align-items: center; text-align: center; }
.follow-card .card-body { align-items: center; }
.follow-card .card-link { align-self: center; }
.follow-card .card-more { text-align: left; }
.follow-avatar {
  flex-shrink: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent);
  background: var(--placeholder);
}
.follow-avatar.is-logo { border-radius: 16px; border-color: var(--border-strong); }
.follow-avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.follow-card:hover .follow-avatar img { transform: scale(1.05); }
.follow-avatar .img-ph.initials { font-size: 20px; }
.follow-tags { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.follow-tags li {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  font-size: 11px;
  color: var(--text-soft);
}
.follow-credit { font-size: 10.5px; color: var(--text-muted); }
.follow-credit a { color: inherit; }

/* "Read more / Show less" button under a shelf */
.shelf-toggle-row { display: flex; justify-content: center; margin-top: 24px; }
.shelf-toggle .chevron {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s ease;
}
.shelf-toggle[aria-expanded="true"] .chevron { transform: translateY(2px) rotate(-135deg); }

/* ---------- 14. CONTACT ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* Résumé card: violet gradient */
.resume-card {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--gradient);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.resume-card::after { /* soft light circle for depth */
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.resume-card .skeleton { background: rgba(255, 255, 255, 0.18); }
.resume-head { display: flex; flex-direction: column; gap: 14px; }
.resume-title { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; }
.resume-note { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.resume-card .btn { align-self: flex-start; position: relative; z-index: 1; }
.contact-list {
  list-style: none;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
}
.contact-list a { color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.contact-form {
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-title { font-size: 22px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; color: var(--text-soft); }
.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: 16px var(--font-sans);
}
.field input { height: 52px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8189A8; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.field [aria-invalid="true"] { border-color: #FCA5A5; }
.contact-form .btn { align-self: flex-start; }
.honeypot { position: absolute; left: -9999px; }
.form-status { font-size: 15px; min-height: 1.6em; }
.form-status.ok { color: #86EFAC; }
.form-status.error { color: #FCA5A5; }

/* ---------- 15. FOOTER ---------- */
.site-footer {
  background: var(--footer);
  border-top: 1px solid var(--border);
  padding: 36px 0;
  font-size: 14px;
  color: var(--text-muted);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 32px;
  flex-wrap: wrap;
}
.footer-updated { font-family: var(--font-mono); font-size: 13px; }
.back-to-top { font-weight: 600; }

.noscript { padding: 24px; text-align: center; background: var(--gradient); color: #fff; }

/* ---------- 16. LOADING SKELETONS ---------- */
.skeleton {
  display: block;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  animation: pulse 1.4s ease-in-out infinite;
}
.skeleton-line { height: 1em; margin: .35em 0; }
.skeleton-xl { height: .9em; }
.w-70 { width: 70%; } .w-80 { width: 80%; }
.skeleton-card { height: 160px; border-radius: var(--radius); }
.skeleton-card.tall { height: 320px; }
.skeleton-card.short { height: 108px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
@keyframes pulse { 50% { opacity: .45; } }

/* =====================================================================
   17. RESPONSIVE
   ===================================================================== */

/* Large tablets / small laptops */
@media (max-width: 1180px) {
  .skills-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Hamburger menu */
  .nav-toggle { display: block; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a:not(.btn) { display: block; padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 17px; }
  .nav-menu .btn { margin-top: 16px; justify-content: center; width: 100%; }
}

/* Tablets */
@media (max-width: 900px) {
  :root { --section-pad: 80px; }
  .about-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .split { gap: 40px; }
  .portrait-wrap { justify-self: center; width: min(100%, 400px); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones */
@media (max-width: 600px) {
  :root { --section-pad: 64px; }
  body { font-size: 15px; }
  .nav { height: 68px; }
  html { scroll-padding-top: 76px; }
  .section-about { padding: 48px 0 64px; }
  .about-bio { font-size: 16.5px; }
  .about-grid { gap: 40px; }
  .btn { padding: 13px 20px; }
  .stats { gap: 10px; }
  .stat { padding: 12px; gap: 10px; }
  .stat-icon { width: 34px; height: 34px; }
  .stat-value { font-size: 22px; }
  .stat-list .stat-value { font-size: 12.5px; }
  .stat-label { font-size: 12px; }
  .portrait-wrap { padding: 0 16px 16px 0; }
  .portrait-frame { left: 16px; top: 16px; }
  .portrait-wrap::before { right: -8px; }

  .section-head { margin-bottom: 32px; }
  .filter-btn { padding: 9px 14px; font-size: 14px; }

  .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .skill-tile { min-height: 164px; padding: 18px; }
  .degree-grid, .project-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .book, .podcast, .follow-card { padding: 12px; }
  .book-cover { height: 150px; padding: 10px; }
  .card-title { font-size: 14px; }

  .timeline { padding-left: 28px; }
  .job::before { left: -39px; }
  .job-title { font-size: 19px; }
  .job-head { flex-wrap: wrap; align-items: flex-start; gap: 8px 14px; }
  .job-head .job-dates { order: 3; flex-basis: 100%; margin-left: 0; padding-top: 0; }
  .org-logo { width: 100px; height: 48px; }
  .org-mark { width: 48px; height: 48px; padding: 8px; border-radius: 12px; }
  .job::before { top: 15px; }

  .resume-card, .contact-form { padding: 28px 22px; }
  .resume-title { font-size: 27px; }
  .cert-row { padding: 20px; }
  .footer-inner { flex-direction: column; }
}

/* Card grids are lists (good for screen readers) without bullets */
.skills-grid, .degree-grid, .project-grid, .book-grid, .podcast-grid, .follow-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}