:root {
    --bg: #ffffff;
    --bg-alt: #f5f5f5;
    --text: #000000;
    --muted: #555555;
    --dim: #888888;
    --hair: #000000;
    --hair-thin: #cccccc;
    --max-w: 720px;
    --max-w-wide: 1000px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
  }

  ::selection { background: #000; color: #fff; }

  a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  a:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 0 3px;
    margin: 0 -3px;
  }

  /* ===== NAV ===== */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 2px solid var(--hair);
  }
  nav.top .inner {
    max-width: var(--max-w-wide);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  nav.top .brand {
    font-weight: 700;
  }
  nav.top .links {
    display: flex;
    gap: 24px;
  }
  nav.top .links a {
    text-decoration: none;
  }
  nav.top .links a:hover {
    background: #000;
    color: #fff;
    padding: 2px 6px;
    margin: -2px -6px;
  }
  @media (max-width: 720px) {
    nav.top .links { display: none; }
  }

  /* ===== LAYOUT ===== */
  section {
    padding: 64px 24px;
    border-bottom: 2px solid var(--hair);
  }
  .wrap { max-width: var(--max-w); margin: 0 auto; }
  .wrap-wide { max-width: var(--max-w-wide); margin: 0 auto; }

  .eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 24px;
    font-weight: 700;
  }
  .eyebrow::before { content: '## '; }

  h1 {
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
    text-transform: uppercase;
  }
  h2 {
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 28px;
    text-transform: uppercase;
    letter-spacing: -0.005em;
  }
  h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
    text-transform: uppercase;
  }

  /* ===== HERO ===== */
  #hero {
    padding: 80px 24px 64px;
  }
  #hero .meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 36px;
  }
  #hero .meta::before { content: '> '; }
  #hero p.tagline {
    font-size: 15px;
    max-width: 600px;
    margin-bottom: 16px;
  }
  #hero p.tagline.dim { color: var(--muted); margin-bottom: 0; }

  .stats {
    margin-top: 48px;
    border: 2px solid var(--hair);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .stat {
    padding: 24px 16px;
    border-right: 1px solid var(--hair);
    text-align: center;
  }
  .stat:last-child { border-right: none; }
  .stat .num {
    font-size: 22px;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
  }
  .stat .lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    line-height: 1.3;
  }
  @media (max-width: 600px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stat { border-bottom: 1px solid var(--hair); }
    .stat:nth-child(2) { border-right: none; }
    .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; }
  }

  /* clickable stats */
  button.stat {
    background: var(--bg);
    border: none;
    border-right: 1px solid var(--hair);
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .15s, color .15s;
    position: relative;
  }
  button.stat:last-child { border-right: none; }
  button.stat:hover { background: var(--bg-alt); }
  button.stat.active {
    background: var(--text);
    color: var(--bg);
  }
  button.stat.active .lbl { color: rgba(255,255,255,0.75); }
  button.stat.active .hint { color: rgba(255,255,255,0.55); }
  button.stat .hint {
    font-size: 9px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
    transition: color .15s;
  }
  button.stat:hover .hint { color: var(--text); }

  .stat-detail {
    border: 2px solid var(--hair);
    border-top: none;
    padding: 28px 32px 32px;
    background: var(--bg);
    display: none;
    animation: slideDown .25s ease;
  }
  .stat-detail.show { display: block; }
  @keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .stat-detail .detail-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--hair);
    padding-bottom: 14px;
    margin-bottom: 22px;
    gap: 16px;
  }
  .stat-detail .detail-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .stat-detail .detail-title::before { content: '## '; }
  .stat-detail .detail-close {
    background: var(--bg);
    border: 1px solid var(--hair);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--text);
    transition: background .15s, color .15s;
  }
  .stat-detail .detail-close:hover { background: var(--text); color: var(--bg); }
  .stat-detail .detail-body p { font-size: 13px; margin-bottom: 14px; line-height: 1.7; }
  .stat-detail .detail-body p.dim { color: var(--muted); margin-top: 18px; }
  .stat-detail .detail-body ul { list-style: none; padding: 0; margin: 14px 0; }
  .stat-detail .detail-body ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.7;
  }
  .stat-detail .detail-body ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-weight: 700;
  }
  .stat-detail .timeline-mini { list-style: none; padding: 0; margin: 0; }
  .stat-detail .timeline-mini li {
    padding: 14px 0 14px 18px;
    margin-bottom: 0;
    border-left: 2px solid var(--hair);
    margin-left: 4px;
    font-size: 13px;
    line-height: 1.65;
  }
  .stat-detail .timeline-mini li::before { content: ''; }
  .stat-detail .timeline-mini li b { display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.02em; }
  .stat-detail .timeline-mini li .body { color: var(--muted); }
  @media (max-width: 600px) {
    .stat-detail { padding: 20px 18px 24px; }
    .stat-detail .detail-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  }

  /* ===== ABOUT ===== */
  #about p {
    margin-bottom: 18px;
    max-width: 640px;
  }
  #about p.dim { color: var(--muted); }
  .arrow { font-weight: 700; }

  /* ===== NOW ===== */
  .now-card {
    border: 2px solid var(--hair);
    padding: 32px;
    position: relative;
  }
  .now-card .badge {
    display: inline-block;
    background: var(--text);
    color: var(--bg);
    padding: 4px 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .now-card h3 {
    margin-bottom: 8px;
  }
  .now-card .role {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
  }
  .now-card p { margin-bottom: 14px; color: var(--text); }
  .now-card .link-line {
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  @media (max-width: 600px) { .now-card { padding: 24px 20px; } }

  /* ===== WORK / PROJECTS ===== */
  .project {
    border-top: 1px solid var(--hair);
    cursor: pointer;
    transition: background .15s;
  }
  .project:last-child { border-bottom: 1px solid var(--hair); }
  .project:hover { background: var(--bg-alt); }
  .project-head {
    padding: 24px 0;
    display: grid;
    grid-template-columns: 60px 1fr 160px 40px;
    gap: 16px;
    align-items: baseline;
  }
  .project-num {
    font-weight: 700;
    font-size: 13px;
  }
  .project-title {
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    font-size: 15px;
    letter-spacing: -0.005em;
  }
  .project-meta {
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
  .project-meta .stack { display: block; }
  .project-toggle {
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    user-select: none;
  }
  .project-tags {
    grid-column: 2 / -1;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
  }
  .tag {
    font-size: 10px;
    color: var(--muted);
    border: 1px solid var(--hair-thin);
    padding: 2px 8px;
    text-transform: lowercase;
    letter-spacing: 0.03em;
  }
  .project-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
  }
  .project.open .project-body { grid-template-rows: 1fr; }
  .project-body-inner { overflow: hidden; }
  .article {
    padding: 16px 0 36px 76px;
    max-width: 720px;
  }
  .article p {
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.75;
  }
  .article p.dim { color: var(--muted); }
  .article ul {
    list-style: none;
    margin: 16px 0;
    padding: 0;
  }
  .article ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.7;
  }
  .article ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-weight: 700;
  }
  .article .pull {
    border-left: 3px solid var(--hair);
    padding: 8px 0 8px 16px;
    margin: 24px 0;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: -0.005em;
  }
  .article .pull::before { content: '" '; }
  .article .pull::after { content: ' "'; }
  .article .takeaway {
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--hair);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
  }
  .article .takeaway b { color: var(--text); font-weight: 700; }
  @media (max-width: 720px) {
    .project-head { grid-template-columns: 32px 1fr 30px; gap: 12px; }
    .project-meta { display: none; }
    .project-toggle { grid-column: 3 / 4; }
    .project-tags { grid-column: 2 / -1; }
    .article { padding: 0 0 28px 0; }
  }

  /* ===== TIMELINE ===== */
  .role-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--hair-thin);
  }
  .role-row:last-child { border-bottom: none; }
  .role-row .when {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding-top: 4px;
  }
  .role-row .what h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: -0.005em;
  }
  .role-row .what .org {
    font-size: 12px;
    color: var(--text);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
  }
  .role-row .what p { color: var(--muted); font-size: 13px; line-height: 1.7; }
  @media (max-width: 600px) {
    .role-row { grid-template-columns: 1fr; gap: 8px; }
  }

  .sub-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin: 56px 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hair);
  }
  .sub-eyebrow::before { content: '## '; }

  /* ===== WRITING ===== */
  .writing-card {
    border: 2px dashed var(--hair);
    padding: 32px;
    text-align: left;
  }
  .writing-card h4 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  .writing-card p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
  .writing-card .li-link {
    display: inline-block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--hair);
    padding-bottom: 2px;
  }
  .writing-card .li-link:hover {
    background: #000;
    color: #fff;
    border-bottom-color: #000;
    padding: 2px 6px;
  }

  /* ===== CONTACT / FOOTER ===== */
  #contact {
    text-align: left;
    padding: 80px 24px;
  }
  #contact .question {
    color: var(--muted);
    margin-bottom: 36px;
    max-width: 600px;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 24px;
    border: 2px solid var(--hair);
    padding: 24px;
  }
  .contact-grid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 700;
    padding: 6px 0;
  }
  .contact-grid dd {
    font-size: 13px;
    padding: 6px 0;
  }
  .contact-grid dd a { text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 600px) {
    .contact-grid { grid-template-columns: 1fr; gap: 0; }
    .contact-grid dt { padding-top: 12px; padding-bottom: 0; }
  }

  footer {
    border-top: 2px solid var(--hair);
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  /* ===== CHARTS ===== */
  .chart {
    border: 1px solid var(--hair);
    padding: 18px;
    margin: 24px 0;
    background: var(--bg-alt);
  }
  .chart-title {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .chart-title::before { content: '// '; }
  .chart svg { display: block; max-width: 100%; height: auto; }
  .chart .caption {
    color: var(--muted);
    font-size: 10px;
    margin-top: 12px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.5;
  }
  .chart .caption::before { content: '— '; }

  /* ===== DEPTH MAP / SKILLS ===== */
  .depth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 28px;
  }
  .depth-cat {
    border: 1px solid var(--hair);
    padding: 20px 22px;
  }
  .depth-cat-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--hair);
    padding-bottom: 10px;
    margin-bottom: 14px;
  }
  .depth-cat-title::before { content: '## '; }
  .skill-row {
    display: grid;
    grid-template-columns: 1fr 92px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
  }
  .skill-name { line-height: 1.3; }
  .skill-bar { display: flex; gap: 3px; }
  .skill-bar .block {
    width: 14px;
    height: 14px;
    border: 1px solid var(--hair);
    background: var(--bg);
  }
  .skill-bar .block.on { background: var(--text); }
  .skill-tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    text-align: right;
  }
  .depth-legend {
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px solid var(--hair-thin);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .depth-legend .leg-item { display: flex; align-items: center; gap: 6px; }
  .depth-legend .mini-bar { display: inline-flex; gap: 2px; }
  .depth-legend .mini-bar span {
    width: 8px;
    height: 8px;
    border: 1px solid var(--hair);
  }
  .depth-legend .mini-bar span.on { background: var(--text); }
  @media (max-width: 720px) {
    .depth-grid { grid-template-columns: 1fr; gap: 18px; }
    .depth-cat { padding: 16px; }
    .skill-row { grid-template-columns: 1fr 78px; gap: 8px; font-size: 11px; }
    .skill-bar .block { width: 12px; height: 12px; }
  }

  /* AI & LLM chip layout (no ratings, evolving space) */
  .evolving-note {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px dashed var(--hair-thin);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
  .evolving-note::before { content: '> '; font-weight: 700; }
  .skill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .skill-chip {
    font-size: 11px;
    border: 1px solid var(--hair);
    padding: 5px 10px;
    background: var(--bg);
    line-height: 1.3;
  }

  /* ===== ON THE INTERNET (GitHub + LinkedIn) ===== */
  .around-block {
    margin-top: 36px;
    border: 1px solid var(--hair);
    padding: 26px;
  }
  .around-block:first-of-type { margin-top: 24px; }
  .around-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
  }
  .around-sub {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
  .post-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .post-card {
    border: 1px solid var(--hair-thin);
    padding: 18px 20px;
    background: var(--bg-alt);
  }
  .post-card .post-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }
  .post-card .post-excerpt {
    font-size: 13px;
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 12px;
  }
  .post-card .post-meta {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .post-card .post-meta a { font-weight: 700; }
  .repo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .repo-card {
    border: 1px solid var(--hair-thin);
    padding: 16px 18px;
    background: var(--bg-alt);
  }
  .repo-card .repo-name {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: lowercase;
  }
  .repo-card .repo-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 32px;
  }
  .repo-card .repo-meta {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .around-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 2px solid var(--hair);
    padding-bottom: 2px;
    text-decoration: none;
  }
  .around-link:hover {
    background: var(--text);
    color: var(--bg);
    border-bottom-color: var(--text);
    padding: 2px 6px 4px;
  }
  .gh-note {
    font-size: 11px;
    color: var(--muted);
    padding: 10px 12px;
    border: 1px dashed var(--hair-thin);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.55;
  }
  .gh-note::before { content: '> '; font-weight: 700; }
  @media (max-width: 600px) {
    .repo-cards { grid-template-columns: 1fr; }
    .around-block { padding: 20px; }
  }

  /* ===== MENTORSHIP ===== */
  #mentorship .mentor-intro p { font-size: 14px; margin-bottom: 16px; line-height: 1.7; }
  #mentorship .mentor-intro p.lead { font-size: 16px; font-weight: 500; }
  #mentorship .mentor-intro p.dim { color: var(--muted); }
  #mentorship .mentor-intro ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 20px 0;
  }
  #mentorship .mentor-intro ul li {
    padding-left: 24px;
    position: relative;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6;
  }
  #mentorship .mentor-intro ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    font-weight: 700;
  }
  .mentor-photos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin: 32px 0 24px;
  }
  .mentor-photo {
    border: 1px solid var(--hair);
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .mentor-photo img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    filter: grayscale(0.1);
    transition: filter .25s;
  }
  .mentor-photo:hover img { filter: grayscale(0); }
  .mentor-photo .ph-caption {
    font-size: 10px;
    color: var(--muted);
    padding: 8px 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: 1px solid var(--hair-thin);
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
  }
  .mentor-photo .ph-caption .num {
    font-weight: 700;
    color: var(--text);
  }
  .mentor-context {
    margin-top: 24px;
    padding: 16px 20px;
    border: 1px dashed var(--hair-thin);
    font-size: 12px;
    color: var(--muted);
    line-height: 1.65;
  }
  .mentor-context::before { content: '> '; font-weight: 700; }
  .mentor-context b { color: var(--text); font-weight: 700; }
  .mentor-pull {
    margin: 24px 0 8px;
    padding: 14px 20px;
    border-left: 3px solid var(--hair);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: -0.005em;
  }
  .mentor-pull::before { content: '" '; }
  .mentor-pull::after { content: ' "'; }
  @media (max-width: 720px) {
    .mentor-photos { grid-template-columns: 1fr; gap: 10px; }
    .mentor-photo img { height: 240px; }
  }

/* ===== MULTI-PAGE ADDITIONS ===== */

/* Active nav link */
nav.top .links a.active {
  background: var(--text);
  color: var(--bg);
  padding: 2px 6px;
  margin: -2px -6px;
}

/* Page header (top of inner pages) */
.page-header {
  padding: 80px 24px 48px;
  border-bottom: 2px solid var(--hair);
}
.page-header .crumb {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.page-header .crumb::before { content: '> '; font-weight: 700; }
.page-header .crumb a { text-decoration: none; }
.page-header h1 {
  font-size: clamp(32px, 6vw, 56px);
  margin-bottom: 16px;
}
.page-header p.lede {
  font-size: 15px;
  color: var(--muted);
  max-width: 640px;
  line-height: 1.6;
}

/* Featured projects (cards on home page) */
.featured-projects {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--hair);
}
.feat-project {
  display: grid;
  grid-template-columns: 50px 1fr 90px;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
  align-items: baseline;
  transition: background .15s;
}
.feat-project:hover {
  background: var(--accent-soft);
  text-decoration: none;
}
.feat-project .num {
  font-weight: 700;
  font-size: 13px;
}
.feat-project .body .title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.feat-project .body .sub {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.feat-project .arrow-cell {
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.feat-project:hover .arrow-cell { color: var(--text); }
@media (max-width: 600px) {
  .feat-project { grid-template-columns: 30px 1fr; gap: 10px; }
  .feat-project .arrow-cell { display: none; }
}

/* Explore CTA strip (bottom of home) */
.explore-cta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin-top: 24px;
  border: 2px solid var(--hair);
}
.explore-cta a {
  text-decoration: none;
  color: inherit;
  padding: 24px 20px;
  border-right: 1px solid var(--hair);
  transition: background .15s, color .15s;
  text-align: left;
}
.explore-cta a:last-child { border-right: none; }
.explore-cta a:hover {
  background: var(--text);
  color: var(--bg);
  padding: 24px 20px;
  margin: 0;
}
.explore-cta .label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 8px;
}
.explore-cta .label::before { content: '→ '; }
.explore-cta .desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.explore-cta a:hover .desc { color: rgba(255,255,255,0.7); }
@media (max-width: 720px) {
  .explore-cta { grid-template-columns: 1fr; }
  .explore-cta a { border-right: none; border-bottom: 1px solid var(--hair); }
  .explore-cta a:last-child { border-bottom: none; }
}

/* Section: tighter on inner pages (no big top padding since page-header is above) */
section.tight { padding-top: 48px; padding-bottom: 48px; border-bottom: 2px solid var(--hair); }
section.tight:last-of-type { border-bottom: none; }

/* 2-up variant for mentor photos (row of 2) */
.mentor-photos-2up {
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
}
@media (max-width: 720px) {
  .mentor-photos-2up { grid-template-columns: 1fr; }
}

/* ===== V2: WARM TERRACOTTA ACCENTS ===== */
:root {
  --accent: #c75d2e;
  --accent-soft: #fff5ed;
  --accent-medium: #f7d8c5;
  --accent-border: rgba(199, 93, 46, 0.35);
  --bg-warm: #fdf9f2;
  --bg-cool: #f3f5f7;
}

/* Eyebrow markers in accent */
.eyebrow::before,
.depth-cat-title::before,
.stat-detail .detail-title::before,
.sub-eyebrow::before,
.chart-title::before { color: var(--accent); }

/* Hero meta `> ` marker */
#hero .meta::before { color: var(--accent); }

/* Now card: warm cream + accent left bar */
.now-card {
  background: var(--bg-warm);
  border-color: var(--accent-border);
  border-left: 4px solid var(--accent);
}
.now-card .badge {
  background: var(--accent);
  color: #fff;
}

/* Stat cards: softer hover */
button.stat:hover { background: var(--accent-soft); }
button.stat:hover .hint { color: var(--accent); }
/* Active stat keeps black-on-white invert for contrast */

/* Stat detail panel */
.stat-detail {
  border-color: var(--accent);
  border-top: none;
  background: var(--bg-warm);
}
.stat-detail .detail-head { border-bottom-color: var(--accent-border); }
.stat-detail .timeline-mini li { border-left-color: var(--accent); }
.stat-detail .detail-body ul li::before { color: var(--accent); }
.stat-detail .detail-close:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Project (work page) hover */
.project:hover { background: var(--accent-soft); }
.project.open .project-toggle { color: var(--accent); }

/* Pull quote: accent left border */
.article .pull,
.mentor-pull {
  border-left-color: var(--accent);
  border-left-width: 3px;
}

/* Takeaway box */
.article .takeaway {
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}

/* Article list bullets in accent */
.article ul li::before,
#mentorship .mentor-intro ul li::before { color: var(--accent); }

/* Charts: cool bg + accent border */
.chart {
  background: var(--bg-cool);
  border-color: var(--accent-border);
}

/* Tags */
.tag {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Skill chips */
.skill-chip { border-color: var(--accent-border); }
.skill-chip:hover { background: var(--accent-soft); }

/* Active nav link: accent bg */
nav.top .links a.active {
  background: var(--accent);
  color: #fff;
}
nav.top .links a:hover {
  background: var(--accent);
  color: #fff;
}

/* Brand dot */
nav.top .brand::after {
  content: '.';
  color: var(--accent);
  font-weight: 700;
}

/* Explore CTA cards — accent on hover */
.explore-cta a:hover {
  background: var(--accent);
  color: #fff;
}
.explore-cta a:hover .desc { color: rgba(255,255,255,0.85); }
.explore-cta .label::before { color: var(--accent); }
.explore-cta a:hover .label::before { color: #fff; }

/* Around blocks (LinkedIn / GitHub) */
.post-card, .repo-card {
  border-color: var(--accent-border);
  background: var(--bg-warm);
}
.post-card .post-meta a { color: var(--accent); }
.repo-card .repo-name { color: var(--accent); }

/* Mentor photo borders + caption num */
.mentor-photo {
  border-color: var(--accent-border);
  background: var(--bg-warm);
}
.mentor-photo .ph-caption { border-top-color: var(--accent-border); }
.mentor-photo .ph-caption .num { color: var(--accent); }

/* Around link */
.around-link {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.around-link:hover {
  background: var(--accent);
  color: #fff;
  border-bottom-color: var(--accent);
}

/* Writing card */
.writing-card {
  border-color: var(--accent);
  background: var(--bg-warm);
}
.writing-card .li-link {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.writing-card .li-link:hover {
  background: var(--accent);
  color: #fff;
  border-bottom-color: var(--accent);
}

/* Notes / context boxes */
.gh-note,
.evolving-note,
.mentor-context {
  background: var(--bg-warm);
  border-color: var(--accent-border);
}

/* Anchor underlines */
a { text-decoration-color: var(--accent-border); }

/* Selection */
::selection { background: var(--accent); color: #fff; }