/* Founder Profile — one scrolling page in the card system: ink borders, hard offset shadows, dot-matrix titles. */
.app-profile { background: var(--nb-band); }
.ab { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* sticky section nav */
.ab-nav {
  position: relative; flex: none; display: flex; gap: 8px; padding: 9px 12px 13px; overflow-x: auto; scrollbar-width: none;
  background: var(--nb-head-bg); border-bottom: 2px solid var(--nb-line);
}
.ab-nav::-webkit-scrollbar { display: none; }
.ab-navbtn {
  flex: none; padding: 5px 11px; font: 800 12px/1 var(--font-dot); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--nb-fill); color: var(--nb-fill-ink); border: 2px solid var(--nb-line); box-shadow: 2px 2px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s, color 0.15s;
}
.ab-navbtn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #000; }
.ab-navbtn.is-on { background: var(--nb-head-bg); color: var(--nb-head-fg); border-color: var(--nb-head-fg); }
.ab-cursor {
  position: absolute; left: 0; bottom: 4px; width: 12px; height: 3px; background: var(--nb-head-fg);
  transition: transform 0.35s var(--ease-out); animation: blink 1.06s steps(1) infinite;
}

.ab-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.ab-sec { padding: 28px 0 30px; }
.ab-sec:nth-child(even) { background: var(--nb-band-2); border-top: 2px solid var(--nb-line); border-bottom: 2px solid var(--nb-line); }
.ab-wrap { max-width: 860px; margin: 0 auto; padding: 0 22px; }

/* cards */
.ab-card { background: var(--nb-card); border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow); }
.ab-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  background: var(--nb-head-bg); color: var(--nb-head-fg); border-bottom: 2px solid var(--nb-line);
}
.ab-head h1 { font: 900 clamp(20px, 3.2cqw, 28px)/1 var(--font-dot); letter-spacing: 0.06em; margin: 0; }
.ab-head--sm { padding: 8px 14px; font: 800 12px var(--font-dot); letter-spacing: 0.12em; }
.ab-live { display: inline-flex; align-items: center; gap: 7px; font: 600 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--nb-head-fg); opacity: 0.85; white-space: nowrap; }
.ab-live i { width: 7px; height: 7px; border-radius: 50%; background: #7fd35b; box-shadow: 0 0 8px #7fd35b; animation: pulse 2s infinite; }
.ab-body { padding: 16px 18px 18px; color: var(--text-2); }

/* hero */
.ab-hero-body { display: grid; grid-template-columns: 132px 1fr; gap: 6px 20px; align-items: start; }
.ab-photo { grid-row: span 2; border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow-sm); background: #000; aspect-ratio: 1; overflow: hidden; }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-tagline { font: 800 clamp(16px, 2.4cqw, 20px)/1.25 var(--font-mono); color: var(--text); letter-spacing: -0.01em; }
.ab-lead { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--text); min-height: 3.3em; }
.ab-caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--acc); animation: blink 1.06s steps(1) infinite; }
.ab-thesis { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.ab-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ab-tag {
  display: inline-flex; align-items: center; padding: 4px 9px; font: 700 10.5px/1.3 var(--font-mono);
  background: var(--nb-tag-bg); color: var(--nb-tag-fg); border: 2px solid var(--nb-tag-line); box-shadow: 2px 2px 0 var(--nb-line);
}

/* stats + CTAs */
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ab-stat {
  display: grid; gap: 4px; justify-items: center; text-align: center; padding: 16px 8px 14px;
  background: var(--nb-card); border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow); transition: transform 0.12s, box-shadow 0.12s;
}
.ab-stat:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--nb-line); }
.ab-stat b { font: 900 clamp(24px, 4cqw, 34px)/1.05 var(--font-dot); color: var(--acc); white-space: nowrap; }
.ab-stat span { font-size: 11px; font-weight: 700; color: var(--text); }
.ab-stat small { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.ab-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ab-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font: 800 12px/1 var(--font-dot); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--key-face); color: var(--text); border: 2px solid var(--key-line); box-shadow: 3px 3px 0 var(--key-edge);
  transition: transform 0.1s, box-shadow 0.1s; text-decoration: none !important;
}
.ab-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--key-edge); }
.ab-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--key-edge); }
.ab-btn--dark { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-line); box-shadow: 3px 3px 0 var(--cta-edge); }
.ab-btn--dark:hover { box-shadow: 5px 5px 0 var(--cta-edge); }
.ab-btn--dark:active { box-shadow: 1px 1px 0 var(--cta-edge); }
.ab-btn--ghost { background: transparent; box-shadow: none; border-style: dashed; color: var(--text-2); }
.ab-btn--ghost:hover { box-shadow: none; border-style: solid; color: var(--text); }
.ab-btn--sm { padding: 7px 11px; font-size: 11px; }
.ab-btn .px-icon { width: 14px; height: 14px; }

/* section stamps */
.ab-stamp {
  display: inline-block; margin: 0 0 20px; padding: 10px 16px; font: 900 15px/1 var(--font-dot); letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--nb-head-bg); color: var(--nb-head-fg); border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow);
}

/* journey */
.ab-job { background: var(--nb-card); border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow); margin-bottom: 16px; }
.ab-job-strip { padding: 5px 12px; font: 700 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); background: var(--nb-band-2); border-bottom: 2px solid var(--nb-line); }
.ab-job.is-now .ab-job-strip { background: var(--nb-fill); color: var(--nb-fill-ink); }
.ab-job-main { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 10px; align-items: center; width: 100%; padding: 12px 14px 12px; text-align: left; }
.ab-job-title { font-size: 15px; font-weight: 800; color: var(--text); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ab-job-title .redact { font-size: 0.7em; padding: 0 3px; }
.ab-pill { justify-self: end; padding: 4px 8px; font: 800 11px/1 var(--font-dot); letter-spacing: 0.06em; background: var(--nb-head-bg); color: var(--nb-head-fg); white-space: nowrap; }
.ab-chev { color: var(--muted); transition: transform 0.2s; display: grid; place-items: center; }
.ab-job.is-open .ab-chev { transform: rotate(180deg); }
.ab-job-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-2); }
.ab-job-more { grid-column: 1 / -1; font: 700 10px var(--font-mono); letter-spacing: 0.08em; color: var(--muted); }
.ab-job-list { display: none; padding: 0 14px 14px; border-top: 2px dashed var(--line-2); margin: 0 14px; padding-left: 0; padding-right: 0; }
.ab-job.is-open .ab-job-list { display: block; animation: fade 0.2s; }
.ab-job-list ul { margin: 12px 0 0; display: grid; gap: 7px; }
.ab-job-list li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--text); line-height: 1.55; }
.ab-job-list li::before { content: '■'; position: absolute; left: 0; top: 1px; font-size: 8px; color: var(--acc); }
.ab-job-lessons { display: grid; gap: 6px; margin-top: 12px; }
.ab-job-lessons q { font-size: 12px; font-style: italic; color: var(--text-2); quotes: '“' '”'; }
.ab-job-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ventures grid */
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ab-proj { display: flex; flex-direction: column; }
.ab-proj-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px 9px 12px; background: var(--nb-head-bg); color: var(--nb-head-fg); border-bottom: 2px solid var(--nb-line); font: 800 13px var(--font-dot); letter-spacing: 0.06em; }
.ab-proj-tools { display: flex; gap: 4px; }
.ab-proj-tools button { width: 24px; height: 22px; display: grid; place-items: center; color: var(--nb-head-fg); border: 1px solid transparent; }
.ab-proj-tools button:hover { border-color: var(--nb-head-fg); }
.ab-proj .ab-body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 13px 14px 14px; }
.ab-proj-hl { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.35; }
.ab-proj-sum { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ab-chip { padding: 2px 7px; font: 600 10.5px var(--font-mono); color: var(--text); border: 1.5px solid var(--nb-line); background: var(--nb-band-2); }
.ab-more { font-size: 10.5px; color: var(--muted); }
.ab-proj-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.ab-proj-stat { font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* skills */
.ab-seg { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.ab-segbtn { padding: 8px 13px; font: 800 11px/1 var(--font-dot); letter-spacing: 0.1em; text-transform: uppercase; background: var(--nb-card); color: var(--text); border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow-sm); }
.ab-segbtn.is-on { background: var(--nb-head-bg); color: var(--nb-head-fg); }
.ab-skillgroups { display: grid; gap: 16px; }
.ab-skillgroup { display: grid; gap: 8px; }
.ab-label { font: 700 10px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: left; }
.ab-label--link { color: var(--acc); justify-self: start; }
.ab-label--link:hover { text-decoration: underline; }
.ab-skills { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-skill { padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--nb-card); border: 2px solid var(--nb-line); box-shadow: 2px 2px 0 var(--nb-line); }
.ab-skill--lg { font-size: 13.5px; padding: 10px 16px; }

/* principles */
.ab-prs { display: grid; gap: 12px; }
.ab-pr { display: grid; grid-template-columns: 58px 1fr; background: var(--nb-card); border: 2px solid var(--nb-line); box-shadow: var(--nb-shadow); }
.ab-pr-n { display: grid; place-items: center; font: 900 18px var(--font-dot); background: var(--nb-fill); color: var(--nb-fill-ink); border-right: 2px solid var(--nb-line); }
.ab-pr > div { padding: 12px 16px; }
.ab-pr b { display: block; font-size: 14px; color: var(--text); }
.ab-pr p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }

/* connect */
.ab-links { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-link {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 700;
  background: var(--nb-head-bg); color: var(--nb-head-fg); border: 2px solid var(--key-line); box-shadow: 3px 3px 0 var(--key-edge);
  text-decoration: none !important; transition: transform 0.1s, box-shadow 0.1s;
}
.ab-link:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--key-edge); }
.ab-link .px-icon { width: 18px; height: 18px; }
.ab-open { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0; }
.ab-shelf { margin-bottom: 20px; }
.ab-shelf .ab-head { display: flex; justify-content: space-between; gap: 10px; }
.ab-xp { height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; }
.ab-xp i { display: block; height: 100%; background: var(--acc); }
.ab-shelf-t { margin: 10px 0; font-size: 12.5px; color: var(--text-2); }
.ab-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ab-badge { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--acc-a35); border-radius: 8px; background: var(--acc-a06); }
[data-mode='light'] .ab-badge { border: 2px solid var(--nb-line); background: var(--nb-tag-bg); }
[data-mode='light'] .ab-xp { border: 1px solid var(--nb-line); }
button.ab-tag { cursor: pointer; }
button.ab-tag:hover { border-color: var(--acc); }
.ab-readme { max-width: 560px; }
.ab-readme p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--text); }
.ab-readme code { padding: 1px 6px; font-size: 12px; background: var(--nb-band-2); border: 1px solid var(--nb-line); color: var(--acc); }
.ab-mission { color: var(--acc) !important; font-weight: 700; margin-bottom: 0 !important; }
.ab-foot { margin: 26px 0 0; font-size: 11px; color: var(--muted); }

/* light mode: a paper nav with the active section filled, ink stat numbers, and the halftone face print as the photo */
[data-mode='light'] .ab-nav { background: var(--nb-band); }
[data-mode='light'] .ab-navbtn { background: var(--nb-card); color: var(--text); box-shadow: 2px 2px 0 var(--nb-line); }
[data-mode='light'] .ab-navbtn:hover { box-shadow: 3px 3px 0 var(--nb-line); }
[data-mode='light'] .ab-navbtn.is-on { background: var(--nb-fill); color: var(--nb-fill-ink); border-color: var(--nb-line); }
[data-mode='light'] .ab-stat b { color: var(--text); }

@container (max-width: 760px) {
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
  .ab-wrap { padding: 0 14px; }
  .ab-sec { padding: 22px 0 24px; }
  .ab-grid { grid-template-columns: 1fr; }
  .ab-hero-body { grid-template-columns: 84px 1fr; gap: 6px 14px; }
  .ab-photo { grid-row: span 1; }
  .ab-lead, .ab-thesis { grid-column: 1 / -1; }
  .ab-hero-text { display: contents; }
  .ab-tagline { align-self: center; }
  .ab-job-main { grid-template-columns: 1fr auto; }
  .ab-chev { display: none; }
  .ab-pr { grid-template-columns: 46px 1fr; }
}