:root {
  /* The persistent top-nav is the one element every page keeps dark, on
     purpose -- see .top-nav below. Its own tokens, isolated from the
     site-wide palette, so flipping that palette to light (below) can't
     accidentally relight the nav bar too. */
  --nav-bg: #1a1e28;
  --nav-surface: #232936;
  --nav-border: #333c4e;
  --nav-ink: #eceff5;
  --nav-ink-2: #b7c0d1;
  --nav-muted: #838da3;

  /* Site-wide palette -- promoted from what used to be the homepage-only
     "hp-" light editorial theme (see the old body.home block this
     replaced) to the default for every page, 2026-09-20. */
  --bg: #f3f4f7;
  --surface: #ffffff;
  --border: #e2e5eb;
  --ink: #161a22;
  --ink-2: #4a5162;
  --muted: #7a8296;
  --accent: #6d9bff;
  --accent-soft: rgba(109,155,255,0.09);
  --accent-soft-2: rgba(109,155,255,0.16);
  --good: #3ecf8e;
  --warn: #e8b34d;
  --shadow: 0 1px 2px rgba(22,26,34,0.04), 0 10px 26px rgba(22,26,34,0.05);

  /* Aliases only -- every var(--hp-*) reference elsewhere in this file
     predates the promotion above and still works unchanged. hp WAS the
     light palette; now it's just the default, under another name. */
  --hp-bg: var(--bg);
  --hp-surface: var(--surface);
  --hp-border: var(--border);
  --hp-ink: var(--ink);
  --hp-ink-2: var(--ink-2);
  --hp-muted: var(--muted);
  --hp-accent: var(--accent);
  --hp-accent-soft: var(--accent-soft);
  --hp-accent-soft-2: var(--accent-soft-2);
  --hp-shadow: var(--shadow);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The top nav is sticky, so a bare #anchor jump would land the target
   underneath it. Reserve the nav's height (two wrapped rows on narrow
   screens) above every anchor target site-wide. */
[id] { scroll-margin-top: 84px; }
@media (max-width: 640px) { [id] { scroll-margin-top: 112px; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}
a { color: inherit; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 56px 24px 100px; }

/* ---------- hub page (homepage) ----------
   The site-wide palette above (promoted from this page's original
   light-editorial theme) already covers plain shared elements everywhere.
   Everything below is still scoped to .hub-grid because it's LAYOUT, not
   color -- the two-column composition, equal-height project cards, the
   compact gateway strip -- verified via grep that hub-grid, identity-banner,
   side-name, role-line/role-title, hero-row, hero-badges, section-highlight,
   glance-cycle, side-stats, glance-dots, side-block, projects/project/
   gateways/gateway, timeline/tl-row, and intro-lede only ever appear in
   index.html. */
.hub-grid {
  max-width: 1180px; margin: 0 auto; padding: 48px 24px 110px;
  display: flex; flex-direction: column; gap: 48px;
}
/* base h2 uses display:flex for the "01"/"02" numeral, which turns the
   long heading text into an unshrinkable anonymous flex item and forces
   horizontal overflow at narrow widths -- rebuild as a wrapping block
   with the numeral inline instead, homepage-scoped only. */
.hub-grid h2 { display: block; color: var(--hp-muted); }
.hub-grid h2 .num { display: inline-block; margin-right: 10px; }
.hub-grid p { color: var(--hp-ink-2); }
.hub-grid p.lede { color: var(--hp-ink); }
.hub-grid a { color: inherit; }
.hub-grid ul.plain li { color: var(--hp-ink-2); }

.identity-banner {
  margin-bottom: 4px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
}
.identity-main { min-width: 0; }
/* jump link in the identity banner's own free space, meant to pop --
   solid accent fill, not another quiet ghost link, since the whole point
   is that a visitor can't miss it. Scrolls to the on-page Experience
   section (id="experience" on .hub-experience), not the separate
   /experience/ page -- this stays a same-page jump. */
.experience-jump {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--hp-accent); border-radius: 999px; padding: 11px 20px;
  margin-top: 6px; box-shadow: 0 6px 16px rgba(109,155,255,0.32);
  transition: transform .15s ease, box-shadow .15s ease;
}
.experience-jump span { font-size: 15px; transition: transform .2s ease; }
.experience-jump:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(109,155,255,0.42); }
.experience-jump:hover span { transform: translateX(3px); }
.side-name {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  font-size: 36px; font-weight: 800; margin: 6px 0 8px; letter-spacing: -0.02em;
  color: var(--hp-ink);
}
.side-name-email { font-size: 12.5px; font-weight: 600; color: var(--hp-muted); text-decoration: none; }
.side-name-email:hover { color: var(--hp-accent); }
.role-title { font-size: 17px; font-weight: 700; color: var(--hp-ink-2); margin: 0 0 4px; }
.role-tags { font-size: 13.5px; font-weight: 600; color: var(--hp-accent); margin: 0; letter-spacing: 0.01em; }

/* two-column editorial composition: left = intro/projects/gateways,
   right = profile-snapshot cards. Grid, not fixed heights, so the columns
   stretch to equal visual height. */
.hub-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.34fr); gap: 40px; align-items: stretch; margin-top: 8px; }
@media (max-width: 1100px) { .hub-columns { grid-template-columns: 1fr; gap: 36px; } }
.hub-main { min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.hub-side { display: flex; flex-direction: column; gap: 22px; }

.intro-lede { font-size: 16.5px; color: var(--hp-ink-2); max-width: none; margin: 0; line-height: 1.7; }
.intro-lede strong { color: var(--hp-ink); }
/* a standalone personal aphorism, not a citation -- styled like a pull-
   quote (left rule, italic, quieter than the intro paragraph above it)
   without attributing it to anyone. */
.intro-block { display: flex; flex-direction: column; gap: 12px; }
.hero-pullquote {
  font-size: 15px; font-style: italic; color: var(--hp-ink-2);
  border-left: 3px solid var(--hp-accent); padding-left: 16px;
  margin: 0; line-height: 1.6;
}

/* profile-snapshot cards (right column): one consistent lightweight card
   language, editorial-sidebar feel rather than a resume dump. */
.side-block {
  background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 14px;
  padding: 22px 24px; box-shadow: var(--hp-shadow);
}
.side-block h2 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--hp-muted); margin: 0 0 12px; border-top: none; padding-top: 0;
}
.side-note { margin: 0; color: var(--hp-ink-2); }
.side-note a { color: var(--hp-accent); text-decoration: underline; text-decoration-color: rgba(109,155,255,0.4); text-underline-offset: 3px; }
.side-note a:hover { text-decoration-color: var(--hp-accent); }

/* "At a glance": fixed footprint so it never jumps height when the fact
   rotates. The number is the visual anchor; dots are near-invisible. */
.glance-block { min-height: 0; }
.glance-cycle { position: relative; min-height: 62px; }
.side-stats { list-style: none; margin: 0; padding: 0; position: relative; min-height: 50px; }
.side-stats li {
  display: flex; flex-direction: column; gap: 3px; position: absolute; inset: 0;
  opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.side-stats li.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.side-stats strong { font-size: 19px; color: var(--hp-ink); font-weight: 800; letter-spacing: -0.01em; }
.side-stats span { font-size: 12px; color: var(--hp-muted); line-height: 1.45; }
.glance-dots { display: flex; gap: 4px; margin-top: 12px; }
.glance-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--hp-border); transition: background .3s ease; }
.glance-dots span.is-active { background: var(--hp-accent); opacity: 0.55; }

/* project cards: bigger, accented, front-and-center */
.projects { display: flex; flex-direction: column; gap: 16px; }
.project { position: relative; border-left-width: 4px; border-left-style: solid; padding-left: 24px; }
.project-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}
.accent-tourney { border-left-color: #e0a940; }
/* "Live product" is Tourney's actual current status, so its tag keeps the
   shared --good "live" color. Runway moved back to SIT (2026-09-20, off
   its own live production status until further notice) -- it gets its
   own app-specific accent instead of reusing --good, so the border color
   doesn't keep implying "live" after the status changed. */
.accent-tourney .project-tag { color: var(--good); }
.accent-tourney .name { color: #f0c674; }
.accent-runway { border-left-color: #2f9d86; }
.accent-runway .project-tag { color: #2f9d86; }
.accent-getseen { border-left-color: #b98bff; }
.accent-getseen .project-tag { color: #b98bff; }
.accent-control-tower { border-left-color: var(--accent); }
.accent-control-tower .project-tag { color: var(--accent); }

/* top nav - persistent across every page, so you can jump sideways
   (Tourney -> Runway, say) without a round trip through the hub */
.top-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
  padding: 14px 24px;
  background: rgba(26, 30, 40, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--nav-border);
}
.top-nav-identity { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.top-nav-brand { font-size: 13.5px; font-weight: 800; text-decoration: none; color: var(--nav-ink); letter-spacing: -0.01em; }
.top-nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
/* A plain visual label, not a menu -- says where you are, sits between
   the identity block and the real dropdown menus, never clickable, never
   a substitute for "About" as the actual menu category. Hidden below
   640px rather than fighting the identity/links groups for room on a
   narrow, already-wrapping nav. */
.top-nav-page-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--nav-ink-2); order: 1; margin: 0 auto;
}
.top-nav-links { order: 2; }
@media (max-width: 640px) { .top-nav-page-label { display: none; } }
.top-nav-links a {
  font-size: 12px; font-weight: 600; text-decoration: none; color: var(--nav-ink-2);
  padding: 5px 10px; border-radius: 6px; transition: color .15s, background .15s;
}
.top-nav-links a:hover { color: var(--nav-ink); background: var(--nav-surface); }
.top-nav-links a.is-active { color: var(--accent); background: rgba(109,155,255,0.12); }

/* compact contact links, right side of the nav - reachable from every
   page without repeating the sidebar's full name/title/location block */
.top-nav-contact { display: flex; gap: 4px; flex-wrap: wrap; }
.top-nav-contact a {
  font-size: 12px; font-weight: 600; color: var(--nav-ink-2); text-decoration: none;
  padding: 5px 10px; border-radius: 6px; transition: color .15s, background .15s;
}
.top-nav-contact a:hover { color: var(--accent); background: var(--nav-surface); }

/* "My Apps" dropdown - native <details>/<summary>, no JS needed */
.nav-dropdown { position: relative; }
.nav-dropdown-label {
  font-size: 12px; font-weight: 600; color: var(--nav-ink-2); cursor: pointer;
  padding: 5px 10px; border-radius: 6px; list-style: none; display: inline-block;
  user-select: none; transition: color .15s, background .15s;
}
.nav-dropdown-label::-webkit-details-marker { display: none; }
.nav-dropdown-label::after { content: "\25BE"; margin-left: 5px; font-size: 9px; display: inline-block; }
.nav-dropdown-label:hover { color: var(--nav-ink); background: var(--nav-surface); }
.nav-dropdown.is-active > .nav-dropdown-label { color: var(--accent); background: rgba(109,155,255,0.12); }
.nav-dropdown[open] > .nav-dropdown-label { color: var(--accent); background: var(--nav-surface); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 150px;
  background: var(--nav-surface); border: 1px solid var(--nav-border); border-radius: 10px;
  padding: 6px; box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.nav-dropdown-menu a {
  font-size: 12.5px; font-weight: 600; color: var(--nav-ink-2); text-decoration: none;
  padding: 7px 10px; border-radius: 6px;
}
.nav-dropdown-menu a:hover { color: var(--nav-ink); background: var(--nav-bg); }
.nav-dropdown-menu a.is-active { color: var(--accent); background: rgba(109,155,255,0.12); }

/* multi-line code example blocks -- overflow-x:auto contains a long line
   to a scrollbar *inside* the block, so it can't force the page's own
   layout viewport wider on mobile the way an unconstrained <pre> does
   (found live, 2026-09-20: auth_kit's example block pushed the whole
   page to 617px on a 390px device). max-width:100% is the actual fix --
   width alone doesn't stop a block from growing past its container. */
pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; margin: 14px 0; overflow-x: auto; max-width: 100%;
  font-size: 12.5px; line-height: 1.6;
}
pre code { font-family: ui-monospace, monospace; color: var(--ink); white-space: pre; }

/* crumbs (subpages only, sits below the top nav) */
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 32px; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* hero */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
/* "Live production app" reads as the same status color as the homepage's
   "LIVE PRODUCT" tag (Tourney, Runway) -- a modifier, not a base-rule
   change, so Control Tower's/GetSeen's own eyebrows stay their own color. */
.eyebrow-live { color: var(--good); }
h1 { font-size: 40px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.015em; line-height: 1.1; }
.role-line { font-size: 18px; font-weight: 600; color: var(--accent); margin: 0 0 14px; }
.tagline { font-size: 16px; color: var(--ink-2); max-width: none; margin: 0; }
.hero-links { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btn {
  font-size: 13px; font-weight: 700; text-decoration: none; border-radius: 8px;
  padding: 10px 16px; display: inline-block;
}
.btn.primary { background: var(--accent); color: #06101f; }
.btn.ghost { border: 1px solid var(--border); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
/* "Run the AI" reads as its own distinct action, not a second primary --
   the existing warm --warn token, unused elsewhere as a button fill. */
.btn.warn { background: var(--warn); color: #241a04; }
.btn.warn:hover { background: #f0c060; }

/* "See the engineering deep dive" pill -- a fully-rounded, filled-on-hover
   pill reads as more obviously clickable than a plain bordered rectangle
   (Derek, 2026-09-21). Same visual language as architecture/index.html's
   .pmd-deepdive-link, translated to the site's main --accent token since
   these live on regular pages, not inside the diagram's own light-palette
   scope. */
.deepdive-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--accent); background: transparent;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--accent); text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.deepdive-pill:hover {
  background: var(--accent); color: #06101f;
  transform: translateY(-1px); box-shadow: 0 4px 10px rgba(109,155,255,0.35);
}

/* sections */
section { margin: 40px 0; }
.section-highlight {
  background: linear-gradient(160deg, rgba(109,155,255,0.08), transparent 60%);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 28px 28px 24px; margin-left: -28px; margin-right: -28px;
}
.section-highlight h2 { color: var(--accent); }
/* homepage-only: section-highlight becomes a plain white contained zone
   for the projects, on the light palette, not the dark gradient card */
.hub-grid .section-highlight {
  background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 18px;
  padding: 30px 30px 28px; margin: 0; box-shadow: var(--hp-shadow);
}
.hub-grid .section-highlight h2 { color: var(--hp-accent); }
.hub-grid .section-intro { margin: 0 0 10px; max-width: none; }
.section-intro-list { margin: 0 0 24px; padding-left: 20px; color: var(--hp-ink-2); font-size: 15px; line-height: 1.6; }
.section-intro-list li { margin-bottom: 4px; }
.section-intro-list li:last-child { margin-bottom: 0; }
.section-intro-list strong { color: var(--hp-ink); }
.section-intro-followup { margin: 0 0 18px; color: var(--hp-muted); font-size: 13.5px; }
.hub-grid section { margin: 0; }
.hub-experience { margin: 0; padding-top: 44px; border-top: 1px solid var(--hp-border); }
.hub-experience h2 { color: var(--hp-muted); }
.hub-grid .see-more { margin-top: 14px; }
.hub-grid .see-more a { color: var(--hp-accent); font-size: 13px; font-weight: 600; text-decoration: none; }
.hub-grid .see-more a:hover { text-decoration: underline; }

/* first-viewport proof: three compact cards right under the intro
   paragraph, answering "what proves it" before any project detail. */
.proof-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
@media (max-width: 720px) { .proof-cards { grid-template-columns: 1fr; } }
.proof-card {
  background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--hp-shadow);
}
.proof-card h3 { font-size: 13.5px; font-weight: 800; color: var(--hp-ink); margin: 0 0 6px; }
.proof-card p { font-size: 13px; color: var(--hp-ink-2); margin: 0; line-height: 1.55; }

/* "Where I add value" -- a continuous upward crawl, ~2 items visible at
   once (2026-09-21, Derek's direction: moved into the sidebar above
   Technical stack; no h3 titles, plain lines, scrolling rather than
   flashing). The track holds the 5 real lines plus one aria-hidden
   duplicate set immediately after, then animates exactly -50% -- since
   the duplicate set is pixel-identical, the loop point is invisible. */
.value-scroll {
  height: 226px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.value-scroll-track { display: flex; flex-direction: column; animation: value-crawl 36s linear infinite; }
.value-scroll:hover .value-scroll-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .value-scroll-track { animation: none; } }
@keyframes value-crawl { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.value-scroll-track p {
  font-size: 12px; color: var(--hp-ink-2); line-height: 1.5; margin: 0;
  padding: 10px 2px; border-top: 1px solid var(--hp-border);
}
.value-scroll-track p:first-child { border-top: none; }
.value-scroll-track p strong { color: var(--hp-accent); font-weight: 700; }
/* display:block + an inline-block numeral, not display:flex -- flex would
   turn the heading text into an unshrinkable anonymous flex item and force
   horizontal overflow at narrow widths whenever a heading is long (found on
   the homepage, 2026-09-19; fixed here at the base rule since every page's
   numbered section headings share this same markup pattern). */
h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px; display: block;
}
h2 .num { color: var(--accent); font-family: ui-monospace, monospace; display: inline-block; margin-right: 10px; }
h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 22px 0 10px; }
p { font-size: 14.5px; color: var(--ink-2); max-width: none; margin: 0 0 14px; line-height: 1.65; }
p.lede { font-size: 15.5px; color: var(--ink); }
ul.plain, ol.plain { padding-left: 18px; margin: 10px 0 0; }
ul.plain li, ol.plain li { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; line-height: 1.6; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(3, 1fr); } }
/* below 420px, two columns of the bigger num-big text (27px, bold) wraps
   mid-phrase ("1 AWS box" breaking after "AWS") -- one column reads
   cleanly at that width instead. */
@media (max-width: 420px) { .stats { grid-template-columns: 1fr; } }
.stat {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 45%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.18);
}
/* Bumped from 18px, 2026-09-20: the brief wants these to read as the big
   numeric proof (30+ years, 1,500 tests, 40+ participants), not just
   another label -- the surrounding label text does the explaining, the
   number itself should be the thing your eye lands on first. */
.stat .num-big { font-size: 27px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
.stat .label { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.4; }

/* timeline (hub page experience section) */
.timeline { display: flex; flex-direction: column; }
.tl-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  padding: 13px 6px; border-top: 1px solid var(--border);
  text-decoration: none; color: inherit; border-radius: 6px;
  transition: background .15s;
}
.tl-row:hover { background: var(--surface); }
.tl-row:hover .tl-what strong { color: var(--accent); }
.tl-row:last-child { border-bottom: 1px solid var(--border); }
.tl-when { font-size: 12.5px; color: var(--muted); font-family: ui-monospace, monospace; white-space: nowrap; }
.tl-what { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.tl-what strong { color: var(--ink); }
@media (max-width: 480px) { .tl-row { grid-template-columns: 1fr; gap: 3px; } }
/* homepage-only: muted date column, subtle separators, quieter than the
   project cards above it -- an executive timeline, not a competing block */
.hub-grid .tl-row { border-top: 1px solid var(--hp-border); border-radius: 8px; padding: 14px 8px; }
.hub-grid .tl-row:last-child { border-bottom: 1px solid var(--hp-border); }
.hub-grid .tl-row:hover { background: var(--hp-accent-soft); }
.hub-grid .tl-when { color: var(--hp-muted); }
.hub-grid .tl-what { color: var(--hp-ink-2); }
.hub-grid .tl-what strong { color: var(--hp-ink); }
.hub-grid .tl-row:hover .tl-what strong { color: var(--hp-accent); }

/* app thumbnails (2026-09-21) -- pick one, see it below. Tourney shown by
   default; switching is a class toggle only, no navigation, so a project's
   own case-study/engineering links still work exactly as before once
   you're looking at it. */
.app-thumbs { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.app-thumb {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--hp-ink-2); background: var(--hp-bg); border: 1px solid var(--hp-border);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.app-thumb-icon { font-size: 14px; }
.app-thumb:hover { border-color: var(--hp-accent); color: var(--hp-ink); }
.app-thumb.is-active { background: var(--hp-accent-soft); border-color: var(--hp-accent); color: var(--hp-accent); }

/* cards / projects (used on the hub page) */
.projects { display: flex; flex-direction: column; gap: 18px; }
/* Fixed to the tallest real panel (Tourney/GetSeen, ~253px at 1440px) so
   switching apps never shifts the page underneath the thumbnail row. */
.hub-grid .projects { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; margin-top: 14px; min-height: 256px; }
.project {
  display: block; text-decoration: none; color: inherit; position: relative;
  /* a faint top-light on the surface so the card reads as a raised object, not a flat fill */
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%), var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 22px 26px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 18px rgba(0,0,0,0.22);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.project:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 28px rgba(0,0,0,0.38), 0 0 0 1px rgba(109,155,255,0.25);
}
/* A card can carry two real destinations (case study + engineering deep
   dive) without nesting an <a> inside an <a> -- the whole-card click stays
   a transparent link filling the card (z-index:1), and any real, visible
   link inside the card (z-index:2, its own stacking context) wins hit
   -testing within its own box, the same "stretched-link" pattern used
   everywhere a card needs more than one click target. */
.project-cover-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.project-cover-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* homepage-only: project cards are the primary visual focus -- product-card
   feel (status label small / name prominent / badges secondary), every card
   in a row stretched to the same height via grid, internal flex column so
   the badge row always sits flush at the bottom regardless of description
   line-wrap. */
.hub-grid .project {
  background: var(--hp-surface); border: 1px solid var(--hp-border); border-radius: 16px;
  padding: 24px 26px; box-shadow: var(--hp-shadow);
  display: flex; flex-direction: column; height: 100%;
}
.hub-grid .project:hover {
  border-color: var(--hp-accent); transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(22,26,34,0.05), 0 16px 32px rgba(22,26,34,0.08);
}
.hub-grid .project { display: none; }
.hub-grid .project.is-active { display: flex; }
/* Real product screenshot, not an icon/emoji placeholder -- the single
   highest-leverage visual change on the homepage (Derek, 2026-09-21):
   proof this is a working app before a single word of description is
   read. Fixed aspect-ratio + object-fit:cover so every card's image
   crops consistently regardless of the source screenshot's own
   dimensions; z-index:2 keeps it above .project-cover-link's full-card
   overlay without needing its own separate link. */
.project-shot {
  display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--hp-border);
  background: var(--hp-border-light, var(--hp-border));
}
.project-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* Hero preview of the Architecture Map -- Derek's own call (2026-09-21):
   the single most visually compelling asset on the site was three clicks
   deep (How I Think > Architecture Map), reachable only via a small
   gateway card near the page bottom. A real screenshot of the live
   diagram, not a re-embedded copy of its SVG+JS, so the interactive
   version has exactly one home. */
.hero-map-preview {
  display: block; margin-top: 18px; text-decoration: none; color: inherit;
  border: 1px solid var(--hp-border); border-radius: 14px; overflow: hidden;
  background: var(--hp-surface); box-shadow: var(--hp-shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.hero-map-preview:hover { border-color: var(--hp-accent); transform: translateY(-2px); }
.hero-map-title {
  display: block; padding: 10px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--hp-surface);
  background: var(--hp-ink); border-bottom: 1px solid var(--hp-border);
}
.hero-map-preview img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--hp-border); }
.hero-map-caption { display: block; padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: var(--hp-ink-2); }
.hero-map-caption strong { color: var(--hp-accent); }
.hero-map-caption code { background: var(--hp-border); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; color: var(--hp-ink); }
.hub-grid .project-tag {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 12px; opacity: 0.85;
}
.hub-grid .project-head { margin-bottom: 10px; }
.hub-grid .project .name { font-size: 22px; font-weight: 800; color: var(--hp-ink); letter-spacing: -0.01em; }
.hub-grid .project .card-icon { font-size: 21px; }
.hub-grid .project .visit { color: var(--hp-accent); }
/* max-width:62ch further down (.project .desc, shared with non-hub pages)
   would otherwise cap this at less than the card's real width -- fine for
   a narrow case-study page, wrong here where the card is the full column. */
.hub-grid .project .desc { color: var(--hp-ink-2); flex: 1; margin-bottom: 16px; max-width: none; }
.hub-grid .project .badge-row { margin-top: auto; padding-top: 2px; }
/* two classes, not one -- ".hub-grid a { color: inherit; }" above outranks
   a single-class selector (class+type beats a bare class), which silently
   turned this link black instead of accent blue. Found live, 2026-09-20.
   Styled as a pill, same visual language as the tech badges beside it
   (AI-Powered, Cloud (AWS)) rather than a plain underlined link -- it sits
   inside .badge-row as that row's last item, colored per app to match
   each card's own accent rather than one flat blue everywhere. */
.hub-grid .project-deepdive {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; text-decoration: none;
  padding: 3px 9px; border-radius: 5px; border: 1px solid rgba(109,155,255,0.35);
  color: var(--hp-accent); background: var(--hp-accent-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hub-grid .project-deepdive:hover, .hub-grid .project-deepdive:focus-visible {
  transform: translateY(-1px); box-shadow: 0 4px 10px rgba(22,26,34,0.14);
}
.accent-tourney .project-deepdive { color: #9c6b13; background: rgba(224,169,64,0.16); border-color: rgba(224,169,64,0.4); }
.accent-runway .project-deepdive { color: #1f8a5b; background: rgba(62,207,142,0.16); border-color: rgba(62,207,142,0.4); }
.accent-getseen .project-deepdive { color: #7c4fd1; background: rgba(185,139,255,0.18); border-color: rgba(185,139,255,0.45); }
.accent-control-tower .project-deepdive { color: var(--hp-accent); background: var(--hp-accent-soft); border-color: rgba(109,155,255,0.35); }

/* gateways: the links from the product cards into the platform and the
   architecture map. Smaller and more horizontal than the project cards --
   an invitation to explore further, not another major content section. */
.gateways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 980px) { .gateways { grid-template-columns: 1fr; } }
.gateway {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
  padding: 16px 52px 16px 20px; border-radius: 10px;
  background: rgba(109,155,255,0.06);
  border: 1px solid rgba(109,155,255,0.35);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.gateway:hover, .gateway:focus-visible {
  background: rgba(109,155,255,0.12);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(109,155,255,0.22), 0 10px 24px rgba(0,0,0,0.3);
  outline: none;
}
.gateway-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.gateway-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.gateway-title em { font-style: normal; color: var(--accent); }
.gateway-list {
  display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 6px 0 0; padding: 0; list-style: none;
}
.gateway-list li {
  font-size: 12px; font-weight: 600; color: var(--accent); padding-left: 12px; position: relative;
}
.gateway-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.gateway-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; display: block; }
.gateway-arrow {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 700; color: var(--accent);
  transition: transform .2s ease;
}
.gateway:hover .gateway-arrow { transform: translate(5px, -50%); }

/* homepage-only: gateways read as quieter, more horizontal navigation --
   smaller type, subtle tint, consistent right-aligned arrow -- so they never
   compete with the project cards above them. */
.hub-grid .gateways { margin-top: 24px; gap: 12px; grid-template-columns: 1fr; }
.hub-grid .gateway {
  background: rgba(109,155,255,0.15); border: 1px solid rgba(109,155,255,0.32);
  padding: 14px 44px 14px 18px; border-radius: 10px; gap: 4px;
}
.hub-grid .gateway:hover, .hub-grid .gateway:focus-visible {
  background: rgba(109,155,255,0.22); border-color: var(--hp-accent);
  box-shadow: 0 8px 20px rgba(22,26,34,0.06); transform: translateY(-1px);
}
.hub-grid .gateway-eyebrow { color: var(--hp-accent); font-size: 10px; }
.hub-grid .gateway-title { color: var(--hp-ink); font-size: 13.5px; }
.hub-grid .gateway-title em { color: var(--hp-accent); }
.hub-grid .gateway-list li { color: var(--hp-accent); }
.hub-grid .gateway-list li::before { background: var(--hp-accent); }
.hub-grid .gateway-sub { color: var(--hp-ink-2); font-size: 12px; }
.hub-grid .gateway-arrow { color: var(--hp-accent); right: 16px; font-size: 18px; }

/* inline links inside dark blocks announce themselves without a hover */
.main-col p a:not(.btn), .side-block p a, .callout a, .compare-card a {
  color: var(--accent); text-decoration: underline; text-decoration-color: rgba(109,155,255,0.45);
  text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .15s ease;
}
.main-col p a:not(.btn):hover, .side-block p a:hover, .callout a:hover, .compare-card a:hover { text-decoration-color: var(--accent); }
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn.primary:hover { background: #86adff; }
.project-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

/* screenshot figure (used on app case-study pages) */
.app-shot { margin: 28px 0 8px; }
.app-shot img {
  width: 100%; display: block; border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.28);
}
.app-shot figcaption { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* small, clickable thumbnail variant -- a screenshot meant as a quick
   "get the feel of it" glance, not a full-width hero image. Expands via
   the native <dialog> lightbox below rather than a new tab, so the
   reader never loses their place on the page. */
.app-shot--thumb { max-width: 340px; margin-left: auto; margin-right: auto; }
.app-shot-trigger {
  display: block; width: 100%; padding: 0; margin: 0; border: none; background: none;
  cursor: zoom-in; position: relative; text-align: left;
}
.app-shot-trigger img {
  width: 100%; display: block; border-radius: 12px; border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.28);
  transition: border-color .15s ease;
}
.app-shot-trigger:hover img, .app-shot-trigger:focus-visible img { border-color: var(--accent); }
.app-shot-expand {
  position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 600;
  color: #fff; background: rgba(10,12,18,0.72); padding: 5px 10px; border-radius: 999px;
  opacity: 0; transition: opacity .15s ease;
}
.app-shot-trigger:hover .app-shot-expand, .app-shot-trigger:focus-visible .app-shot-expand { opacity: 1; }

.app-shot-dialog {
  border: none; border-radius: 14px; padding: 0; background: transparent;
  max-width: min(92vw, 1100px); max-height: 90vh;
}
.app-shot-dialog::backdrop { background: rgba(8,10,16,0.78); }
.app-shot-dialog img { width: 100%; display: block; border-radius: 12px; }
.app-shot-dialog-close {
  position: absolute; top: -14px; right: -14px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.app-shot-dialog-close:hover { border-color: var(--accent); color: var(--accent); }
.project .name-wrap { display: inline-flex; align-items: baseline; }
.project .card-icon { display: inline-block; font-size: 19px; margin-right: 6px; }
.project .name { font-size: 19px; font-weight: 700; }
.project .visit { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.project .desc { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; max-width: 62ch; }
.project.soon { opacity: 0.55; }

/* badges */
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
/* Darker text + bolder weight than the original (2026-09-21, still metadata
   not buttons -- .highlight stays the only accent-colored variant -- just
   legible at a glance instead of near-invisible grey-on-grey). */
.badge { font-size: 11px; font-weight: 700; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; }
.hub-grid .badge {
  color: var(--hp-ink); background: var(--hp-bg); border: 1px solid var(--hp-border);
  border-radius: 5px; padding: 4px 9px; font-weight: 700; font-size: 10.5px;
}
.hub-grid .badge.highlight {
  color: var(--hp-accent); background: var(--hp-accent-soft); border-color: rgba(109,155,255,0.35);
  font-weight: 700;
}
.badge.highlight { color: var(--accent); background: var(--accent-soft, rgba(109,155,255,0.14)); border-color: var(--accent); font-weight: 700; }

/* callouts */
.callout {
  border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin: 18px 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
}
.callout strong { color: var(--ink); }

/* comparison rows (AI section) */
.compare { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 620px) { .compare { grid-template-columns: 1fr 1fr; } }
@media (min-width: 780px) { .compare.compare-3 { grid-template-columns: repeat(3, 1fr); } }
.compare-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 45%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.18);
}
.compare-card .who { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.compare-card .what { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* stage cards -- "go deeper" / "reusable platform code" style grids
   (used on /tourney/engineering/, /platform/, and other deep-dive pages).
   Was completely unstyled before (2026-09-21); same card language as
   .compare-card above, so a "select to go into more" row actually reads
   as clickable cards instead of plain stacked text. */
.stage-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 45%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.12);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.stage-card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 24px rgba(22,26,34,0.1);
}
/* a wide table scrolls inside its own box instead of widening the page */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 10px 0; }
.table-scroll table { margin: 0; }

/* .row = a grid of stage cards. auto-fit, not a fixed column count: the
   old inline repeat(3, 1fr) on Tourney's "Go deeper" row forced three
   columns at phone width and made the whole page scroll sideways. */
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 14px; }
.stage-card .stage-label { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.stage-card p { font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ---------- experience page: career arc ---------- */
/* Developer -> Architect -> Manager -> Enterprise Owner -> Solutions
   Architect, matched to the actual role boundaries in the tab data below
   (not evenly-spaced decades) -- each stage jumps to its first role. */
.career-arc { margin-top: 4px; }
.arc-track { display: flex; gap: 0; margin-top: 8px; }
@media (max-width: 900px) { .arc-track { flex-direction: column; gap: 16px; } }
.arc-stage {
  flex: 1 1 0; min-width: 0; position: relative; text-decoration: none; color: inherit;
  padding: 22px 16px 4px 0; transition: transform .15s ease;
}
.arc-stage::before {
  content: ''; position: absolute; top: 6px; left: 0; right: 16px; height: 3px; background: var(--border);
}
.arc-stage:last-child { padding-right: 0; }
.arc-stage:last-child::before { right: 0; }
.arc-stage::after {
  content: ''; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--muted);
}
.arc-stage.is-current::after { border-color: var(--accent); }
.arc-stage:hover { transform: translateY(-2px); }
.arc-stage:hover::after { border-color: var(--accent); }
.arc-years { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.arc-stage h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 6px 0 6px; }
.arc-stage p { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 0; max-width: none; }
@media (max-width: 900px) {
  .arc-stage { padding: 0 0 0 22px; }
  .arc-stage::before { top: 3px; left: 4px; right: auto; width: 3px; height: calc(100% + 16px); }
  .arc-stage:last-child::before { display: none; }
  .arc-stage::after { top: 0; left: 0; }
}

/* ---------- experience page: role picker ---------- */
.exp-wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px 100px; }
.exp-grid { display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: start; margin-top: 28px; }
@media (max-width: 820px) { .exp-grid { grid-template-columns: 1fr; } }

.exp-list {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
}
@media (max-width: 820px) { .exp-list { position: static; } }
.exp-item {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding: 10px 12px; border-radius: 8px; border-left: 3px solid transparent;
}
.exp-item:hover { background: var(--bg); }
.exp-item.is-active { background: var(--bg); border-left-color: var(--accent); }
.exp-role { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.exp-item.is-active .exp-role { color: var(--accent); }
.exp-meta { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.exp-divider {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px 3px; border-top: 1px solid var(--border); margin-top: 4px;
}

.exp-detail { min-width: 0; }
.exp-panel { display: none; }
.exp-panel.is-active { display: block; animation: exp-fade .25s ease; }
.exp-panel h2 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 10px; text-transform: none; letter-spacing: normal; }
.exp-dates { font-size: 13px; font-weight: 400; color: var(--muted); }
.exp-company { font-size: 15px; font-weight: 400; color: var(--muted); }
.exp-panel p, .exp-panel .plain { max-width: none; }
@keyframes exp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

footer.page-footer {
  border-top: 1px solid var(--border); padding-top: 24px; margin-top: 56px;
  font-size: 12.5px; color: var(--muted);
}
.hub-grid footer.page-footer { border-top: 1px solid var(--hp-border); color: var(--hp-muted); margin-top: 0; }

/* ---------- two-layer IA (2026-09-26) ---------- */
/* Layer 1 = the business/leadership story (home, /start/, /how-i-think/,
   experience, app overviews). Layer 2 = technical proof (architecture map,
   engineering platform, module deep dives). These rules carry the shared
   pieces that tie the two layers together. */

/* "Hiring manager? Start here" - one pill in the nav, on every page */
.top-nav-cta {
  font-size: 12px; font-weight: 700; text-decoration: none; color: var(--nav-bg);
  background: var(--accent); padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  transition: filter .15s;
}
.top-nav-cta:hover { filter: brightness(1.08); }
.top-nav-links .top-nav-cta { color: var(--nav-bg); }
.top-nav-links .top-nav-cta:hover { color: var(--nav-bg); background: var(--accent); }
.top-nav-links .top-nav-cta.is-active { color: var(--nav-bg); background: var(--accent); }

/* small sub-label inside a dropdown (APPLICATIONS / PLATFORM) */
.nav-dropdown-heading {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--nav-ink-2); opacity: 0.85; padding: 8px 10px 4px;
}
/* dropdowns are absolutely positioned from their left edge; the last one
   (Platform) sits at the right end of the nav, so it opens off the
   viewport edge on narrower screens. Anchor it to the right instead, and
   give every menu enough width that no item wraps. */
.nav-dropdown-menu { min-width: 190px; }
.nav-dropdown-menu a { white-space: nowrap; }
.nav-dropdown:last-child > .nav-dropdown-menu { left: auto; right: 0; }
.nav-dropdown-heading + .nav-dropdown-heading,
.nav-dropdown-menu a + .nav-dropdown-heading { border-top: 1px solid var(--nav-border); margin-top: 4px; }

/* Problem / Decision / Built / Result / Where AI stops / Proves - the
   fixed six-row story block every application and Control Tower carries,
   always before the tech-stack badges */
.proof-rows { display: grid; grid-template-columns: 1fr; gap: 0; margin: 14px 0 0; }
.proof-rows > div {
  display: grid; grid-template-columns: 118px 1fr; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.proof-rows > div:first-child { border-top: 0; }
.proof-rows dt {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); padding-top: 3px;
}
.proof-rows dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: none; }
.proof-rows dd strong { color: var(--ink); }
.proof-rows dd a { color: var(--accent); text-decoration: none; }
.proof-rows dd a:hover { text-decoration: underline; }
.proof-rows.proof-rows--tight > div { padding: 6px 0; }
.proof-rows.proof-rows--tight dd { font-size: 13px; }
@media (max-width: 560px) {
  .proof-rows > div { grid-template-columns: 1fr; gap: 3px; }
}
.hub-grid .proof-rows > div { border-top-color: var(--hp-border); }
.hub-grid .proof-rows dt { color: var(--hp-accent); }
.hub-grid .proof-rows dd { color: var(--hp-ink-2); }
.hub-grid .proof-rows dd strong { color: var(--hp-ink); }

/* the platform block on the home page - visually distinct from the three
   application cards, because Control Tower and the shared modules are the
   operating model those applications run on, not a fourth peer */
.platform-block {
  margin-top: 26px; padding: 22px 24px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--accent); box-shadow: var(--shadow);
}
.platform-block .eyebrow { margin-bottom: 6px; }
.platform-block h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.01em; color: var(--ink); }
.platform-block > p { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; max-width: none; }
.platform-block .platform-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 720px) { .platform-block .platform-parts { grid-template-columns: 1fr; } }
.platform-block .platform-parts li { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.platform-block .platform-parts li a { font-weight: 700; color: var(--ink); text-decoration: none; }
.platform-block .platform-parts li a:hover { color: var(--accent); }
.platform-block .platform-close { font-size: 13.5px; color: var(--ink); font-weight: 600; margin: 16px 0 0; border-top: 1px solid var(--border); padding-top: 14px; }
.hub-grid .platform-block { background: var(--hp-surface); border-color: var(--hp-border); border-top-color: var(--hp-accent); box-shadow: var(--hp-shadow); }
.hub-grid .platform-block h3, .hub-grid .platform-block .platform-parts li a, .hub-grid .platform-block .platform-close { color: var(--hp-ink); }
.hub-grid .platform-block > p, .hub-grid .platform-block .platform-parts li { color: var(--hp-ink-2); }

/* one-line status strip: honest about what is live and what is not */
.status-strip {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 18px; padding: 0; list-style: none;
  font-size: 12.5px; color: var(--ink-2);
}
.status-strip li strong { color: var(--ink); font-weight: 700; }
.status-strip li .st { font-family: ui-monospace, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-left: 4px; }
.status-strip li .st.st-live { color: var(--good); }

/* career arc, compact five-word version (home page) */
.arc-compact .arc-stage h3 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.arc-compact .arc-stage p { font-size: 12px; }

/* Layer-2 pointer: the last line on every Layer-1 page, the breadcrumb
   up on every Layer-2 page */
.layer2-footer {
  margin-top: 40px; padding: 14px 18px; border: 1px dashed var(--border); border-radius: 12px;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
.layer2-footer strong { color: var(--ink); }
.layer2-footer a { color: var(--accent); font-weight: 600; text-decoration: none; }
.layer2-footer a:hover { text-decoration: underline; }
.hub-grid .layer2-footer { border-color: var(--hp-border); color: var(--hp-ink-2); }
.hub-grid .layer2-footer strong { color: var(--hp-ink); }
.hub-grid .layer2-footer a { color: var(--hp-accent); }

/* I define / AI agents perform / I own */
.ai-split .compare-card ul { margin: 0; padding-left: 16px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.hub-grid .ai-split .compare-card { background: var(--hp-surface); border-color: var(--hp-border); box-shadow: var(--hp-shadow); }
.hub-grid .ai-split .compare-card .who { color: var(--hp-ink); }
.hub-grid .ai-split .compare-card .what, .hub-grid .ai-split .compare-card ul { color: var(--hp-ink-2); }

/* "What I bring": every capability card carries its evidence link */
.proof-card .proof-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--hp-accent); text-decoration: none; }
.proof-card .proof-link:hover { text-decoration: underline; }
.hub-grid .project .proof-rows { flex: 1; margin: 0 0 16px; }
.hub-grid .project .proof-rows > div { grid-template-columns: 104px 1fr; padding: 7px 0; }
.hub-grid .project .proof-rows dd { font-size: 13px; }
@media (max-width: 560px) { .hub-grid .project .proof-rows > div { grid-template-columns: 1fr; } }

/* two static "at a glance" lists replace the auto-cycling carousel */
.glance-group { margin-bottom: 14px; }
.glance-group:last-child { margin-bottom: 0; }
.glance-group h3 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hp-muted); margin: 0 0 6px; }
.glance-group ul { margin: 0; padding: 0; list-style: none; }
.glance-group li { font-size: 12.5px; color: var(--hp-ink-2); line-height: 1.5; padding: 3px 0; }
.glance-group li strong { color: var(--hp-ink); font-weight: 700; }

/* ---------- roles page: one card per hat ---------- */
/* Grid, not a list -- ten seats read as breadth at a glance, one sentence
   + one proof line each; the original full case (what I do + full proof)
   moves into a <details> per card so nothing is lost, just collapsed
   (brief: "not ten mini-resumes" -- see PORTFOLIO_HIRING_MANAGER_BRIEF). */
.roles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 1200px) { .roles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .roles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .roles { grid-template-columns: 1fr; } }
.role-card {
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 45%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 14px rgba(0,0,0,0.18);
}
.role-head { display: flex; flex-direction: column; gap: 3px; }
.role-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.role-tag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); }
.role-card p { margin: 0; font-size: 13px; line-height: 1.55; }
.role-card .role-what { color: var(--ink-2); }
.role-card .role-proof {
  color: var(--ink-2); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px;
}
.role-card .role-proof strong { color: var(--ink); }
.role-card .role-proof em { color: var(--warn); font-style: normal; font-weight: 600; }
.role-card code { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.role-card a, .tagline a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(109,155,255,0.45); text-underline-offset: 3px; }
.role-card a:hover, .tagline a:hover { text-decoration-color: var(--accent); }

/* compact default view: one summary sentence */
.role-summary { color: var(--ink-2); }

/* the full case, collapsed by default -- native <details>, no JS */
.role-more { margin-top: 2px; }
.role-more summary {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--accent);
  list-style: none; padding-top: 2px;
}
.role-more summary::-webkit-details-marker { display: none; }
.role-more summary::after { content: " \2192"; }
.role-more[open] summary::after { content: " \2193"; }
.role-more .role-more-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }