/* ===========================================================
   mirza.tech v4 — site.css
   Layout + components. Warm-brutalist editorial. Cream paper,
   ink, one electric blue, one acid yellow. Hard offset shadows,
   2px borders, mono labels. Tokens are the single source of
   truth (tokens.css) — never hardcode hexes here except the
   dark contact/footer surface.
   Accent discipline: blue = interactive, yellow = highlight,
   ink hard-shadows = structure.
   =========================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--yellow); color: #16171A; }
a { color: var(--ink); }
img { max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.refsdark a:focus-visible, .contact a:focus-visible, .site-footer a:focus-visible, .topbar--dark a:focus-visible { outline-color: var(--accent-on-dark); }

.shell { max-width: 1240px; margin: 0 auto; padding: 0 56px; }
@media (max-width: 720px) { .shell { padding: 0 22px; } }

/* ===================== TOPBAR ===================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; transition: background var(--dur-base) ease, backdrop-filter var(--dur-base) ease;
}
/* v4: nav stays transparent on scroll (no cream blur background) */
.topbar.is-stuck { background: transparent; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 18px 56px; max-width: 1240px; margin: 0 auto; }   /* same content box as .shell so logo/nav align with the body */
@media (max-width: 720px) { .topbar-inner { padding: 14px 22px; } }
.logo { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.03em; color: var(--ink); text-transform: lowercase; line-height: 1; text-decoration: none; display: inline-flex; align-items: center; }
/* Logo dot — surface variants (design system):
     cream / darker-cream surface → blue dot, ink wordmark   (canonical)
     ink surface                  → blue dot, cream wordmark
     blue surface                 → YELLOW dot, cream wordmark
     yellow surface (decks/print) → blue dot, ink wordmark
   Rule: the dot converts to yellow only where blue would vanish (blue
   surfaces). navInvert() flags the dark topbar twin with .over-blue while
   the band under it is the blue org panel. */
.logo-dot { width: 9px; height: 9px; background: var(--blue); border-radius: 50%; margin: 0 7px; display: inline-block; }
.topbar--dark.over-blue .logo-dot { background: var(--yellow); }
.topbar nav { display: flex; gap: 26px; }
/* nav inverts pixel-by-pixel over dark sections via TWO stacked fixed headers:
   the light one (brand colors on cream) and a dark twin (cream text, same blue
   dot + underlines). main.js clips each with inset() against the dark bands
   (references, contact, footer, org panel) on scroll. clip-path also clips
   hit-testing, so hover/clicks go to whichever header is visible. */
.topbar--dark { z-index: 61; clip-path: inset(0 0 100% 0); }
/* keyboard focus inside the nav un-clips the light bar so the ring is never invisible */
#topbar:focus-within { clip-path: none !important; background: var(--bg); }
.topbar--dark .logo { color: var(--on-dark); }
.topbar nav a { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; cursor: pointer; position: relative; padding: 4px 0; transition: color var(--dur-base) ease; }
.topbar nav a:hover, .topbar nav a.is-active { color: var(--ink); }
.topbar--dark nav a { color: var(--on-dark-muted); }
.topbar--dark nav a:hover, .topbar--dark nav a.is-active { color: #FFFFFF; }
.topbar nav a.is-active::after, .topbar nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--blue); }
@media (max-width: 900px) {
  .topbar { background: var(--bg); border-bottom: 1px solid var(--line); }
  .topbar--dark { background: var(--surface-dark); border-bottom-color: var(--line-on-dark); }
  .topbar-inner { flex-wrap: wrap; row-gap: 4px; padding: 12px 22px; }
  .topbar nav { width: 100%; gap: 20px; }
}

/* ---------- mobile menu (≤720px: link row becomes a hamburger) ---------- */
.nav-toggle { display: none; }
.mobile-menu { display: none; }
html.menu-open { overflow: hidden; }
@media (max-width: 720px) {
  .topbar nav { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 38px; margin: -6px -10px -6px 0; background: none; border: 0; padding: 0; cursor: pointer; }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); }
  .topbar--dark .nav-toggle span { background: var(--on-dark); }
  .mobile-menu.is-open { display: block; position: fixed; inset: 0; z-index: 70; background: var(--bg); }
  .mobile-menu-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
  .mobile-menu-close { background: none; border: 0; padding: 2px 6px; cursor: pointer; font-size: 24px; line-height: 1; color: var(--ink); }
  .mobile-menu nav { display: flex; flex-direction: column; padding: 12px 22px 0; }
  .mobile-menu nav a { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 18px 0; border-bottom: 1px solid var(--line); }
}

/* ===================== HERO ===================== */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center; padding: 120px 0 64px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%; }
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; gap: 8px; } }
.hero-eyebrow { display: block; margin: 0 0 26px; color: var(--blue); }
.hero-copy { isolation: isolate; min-width: 0; }   /* keeps the .hi z-index trick contained */
.hero-copy h1 {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-hero-size); line-height: var(--t-hero-lh); letter-spacing: var(--t-hero-track);
  margin: 0 0 20px;
}
.hero-headline {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(24px, 2.7vw, 38px); line-height: 1.14; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 22px; max-width: 24ch;
}
/* highlight sits BEHIND the heading text (z-index -1 inside the isolated
   container) so descenders from the line above never get painted over —
   keeps the exact acid yellow, unlike a blend mode */
.hero-headline .hi, .section h2 .hi, .advisory-line .hi { position: relative; z-index: -1; }
.hero-headline .hi { background: var(--yellow); color: #16171A; padding: 0.01em 0.08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin: 0 0 18px; }
.hero-visual { position: relative; }
.hero-mount { position: relative; width: 100%; height: clamp(380px, 50vw, 620px); cursor: grab; touch-action: pan-y; background: url("hero-wireframe-fallback-user.webp") center / contain no-repeat; }
.hero-mount.grabbing { cursor: grabbing; }
.hero-mount canvas { display: block; width: 100%; height: 100%; }
.hero-mount.is-ready { background-image: none; }
.hero-visual-hint { position: absolute; bottom: 8px; right: 4px; color: var(--dim); opacity: 0; transition: opacity 400ms ease 200ms; }
.hero-mount.is-ready + .hero-visual-hint { opacity: 1; }
.hero-mount.is-failed { cursor: default; }
@media (max-width: 760px) {
  /* Below 760px the head can't share the hero row — remove it rather
     than stack it. Module + GLB (≈3MB) are never fetched here either. */
  .hero-visual { display: none; }
}

/* text CTAs */
.cta-row { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 38px); align-items: center; }
.cta { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; cursor: pointer; }
.cta .ar { color: var(--blue); transition: transform var(--dur-base) var(--ease-out); }
.cta .label { border-bottom: 2px solid var(--blue); padding-bottom: 3px; transition: border-color var(--dur-base) ease; }
.cta:hover .ar { transform: translateX(5px); }
.cta:hover .label { border-color: var(--ink); }
.cta.muted .label { border-bottom-color: var(--line-strong); }
.cta.muted:hover .label { border-bottom-color: var(--ink); }

/* ===================== SECTIONS ===================== */
.section { padding: clamp(80px, 13vh, 150px) 0; position: relative; scroll-margin-top: 64px; }
h1, h2 { text-wrap: balance; }
.section.alt { background: var(--bg-thesis); }
.section.wipe { background: var(--wipe-bg, var(--bg)); }   /* GSAP scrubs --wipe-bg → bg-thesis */
.section-head { max-width: 62ch; margin-bottom: clamp(40px, 6vh, 64px); isolation: isolate; }
.section-head .mono-label { display: block; margin-bottom: 16px; color: var(--blue); }
.section-head--tight { margin-bottom: clamp(32px, 4vh, 44px); }
.section h2 { font-family: var(--display); font-weight: 700; font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-track); margin: 0 0 22px; max-width: 18ch; }
.section h2 .hi { background: var(--yellow); color: #16171A; padding: 0 0.06em; }
.section-lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.58; color: var(--ink-soft); max-width: 60ch; margin: 0; }
.section-lede em { font-style: normal; font-weight: 600; color: var(--ink); }
.section h3 { font-family: var(--display); font-weight: 700; font-size: var(--t-h3-size); letter-spacing: var(--t-h3-track); line-height: var(--t-h3-lh); margin: 0 0 14px; }

/* ===================== ABOUT ===================== */
.about-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(36px, 6vw, 84px); align-items: start; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about-body p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.64; color: var(--ink-soft); margin: 0 0 20px; max-width: 60ch; }
.about-body p b { color: var(--ink); font-weight: 700; }
.about-body .k { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin: 34px 0 14px; }
.about-body .k:first-child { margin-top: 0; }
.focus-list { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.focus-list li { position: relative; padding: 12px 0 12px 24px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.focus-list li:last-child { border-bottom: 0; }
.focus-list li::before { content: "→"; position: absolute; left: 0; color: var(--blue); }
.about-facts { border-left: 2px solid var(--ink); padding-left: clamp(24px, 3vw, 40px); }
@media (max-width: 820px) { .about-facts { border-left: 0; border-top: 2px solid var(--ink); padding-left: 0; padding-top: 28px; } }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { font-size: 15px; line-height: 1.5; color: var(--ink-soft); padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts li b { color: var(--ink); font-weight: 700; }

/* ===================== CONTACT (dark) ===================== */
.contact { background: var(--surface-dark); color: var(--on-dark); }
.contact h2 { color: #FFFFFF; }
.contact .section-head .mono-label { color: var(--yellow); }
.contact .section-lede { color: var(--on-dark); }
.contact-links { display: flex; flex-direction: column; }
.contact-link { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line-on-dark); text-decoration: none; color: var(--on-dark); transition: padding-left var(--dur-base) ease; }
.contact-link:first-child { border-top: 1px solid var(--line-on-dark); }
.contact-link:hover { padding-left: 10px; }
.contact-link .cl-label { font-family: var(--display); font-weight: 600; font-size: 21px; color: #FFFFFF; }
.contact-link .cl-val { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.05em; color: var(--yellow); white-space: nowrap; }
/* ===================== FOOTER ===================== */
.site-footer { background: var(--surface-dark); color: var(--on-dark-muted); border-top: 1px solid var(--line-on-dark); padding: 30px 56px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.1em; text-transform: uppercase; flex-wrap: wrap; gap: 12px; }
.site-footer .foot-logo { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.03em; text-transform: lowercase; color: var(--on-dark); display: inline-flex; align-items: center; }
.site-footer a { color: var(--yellow); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }
@media (max-width: 720px) { .site-footer { padding: 30px 22px; } }

/* ===================== LEGAL SUBPAGES ===================== */
.legal { padding: 140px 56px 90px; max-width: 760px; }
@media (max-width: 720px) { .legal { padding: 120px 22px 70px; } }
.legal h1 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.03em; margin: 0 0 10px; }
.legal .mono-label { color: var(--blue); }
.legal h2 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; margin: 34px 0 10px; }
.legal p { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.legal a { color: var(--ink); }
mark.todo { background: var(--yellow); color: #16171A; padding: 0 4px; font-weight: 600; }
.legal .en-note { margin: 18px 0 6px; padding: 14px 18px; border-left: 2px solid var(--blue); background: var(--blue-soft); font-size: 14px; line-height: 1.6; color: var(--ink-soft); font-style: italic; }
.legal-page .topbar nav a { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.1em; text-transform: uppercase; }

/* ===================== REVEAL TRANSITIONS ===================== */
.js .reveal { opacity: 0; transform: translateY(24px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal[data-d="1"].in { transition-delay: 90ms; }
.reveal[data-d="2"].in { transition-delay: 180ms; }
.reveal[data-d="3"].in { transition-delay: 270ms; }
.reveal[data-d="4"].in { transition-delay: 360ms; }
.section:target .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-mount { } /* static frame handled in scene.js */
}

/* ===========================================================
   v4 LEAN COMPONENTS
   Speaking-led business card. Reuses the v3 design system;
   these are the new section styles (credibility, speaking,
   work cards, writing list, advisory, hero name).
   =========================================================== */

.hero-copy .hero-eyebrow { margin: 0 0 22px; }

/* ---------- inline quotes (embedded per section) ---------- */
.inline-quote { max-width: 660px; margin: clamp(36px, 5vh, 56px) 0 0; }
.quote-stack { display: flex; flex-direction: column; gap: 24px; margin: 30px 0 34px; }
.quote-stack .inline-quote { margin: 0; }

/* ---------- speaking ---------- */
.speak-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: clamp(44px, 6vw, 84px); align-items: start; }
.speak-watch { grid-column: 1; grid-row: 1; }
.speak-themes { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) { .speak-grid { grid-template-columns: 1fr; gap: 40px; } .speak-watch, .speak-themes { grid-column: 1; grid-row: auto; } .speak-watch { order: 1; } .speak-themes { order: 2; } }
.speak-grid .k { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin: 0 0 18px; }
.themes { list-style: none; margin: 0; padding: 0; counter-reset: th; }
.themes li { counter-increment: th; position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--line-strong); font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.themes li:last-child { border-bottom: 1px solid var(--line-strong); }
.themes li::before { content: counter(th, decimal-leading-zero); position: absolute; left: 0; top: 17px; font-family: var(--mono); font-size: var(--t-mono-size); color: var(--blue); }
.themes li b { color: var(--ink); font-weight: 700; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 2px solid var(--ink); background: var(--surface-dark); box-shadow: var(--shadow-tile-ink); overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.talk-links { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.talk-links a { font-size: 14px; }
/* more-talks thumbnail cards (below the featured video) */
.more-talks { display: grid; grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 80px); margin-top: clamp(52px, 8vh, 84px); padding: clamp(28px, 4vw, 48px); background: var(--blue); border: 2px solid var(--ink); box-shadow: var(--shadow-tile-ink); }
.more-talks .k { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yellow); margin: 0 0 18px; }
.more-talks-intro > p:last-child { max-width: 28ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--on-dark); }
.more-talks .talk-index { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,0.36); border-bottom: 0; }
.more-talks .talk-index a, .more-talks .talk-index a:first-child, .more-talks .talk-index a:last-child { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 6px 16px; min-height: 0; padding: 18px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.25); color: #FFFFFF; }
.more-talks .talk-index span { grid-column: 1; font-size: 16px; }
.more-talks .talk-index .talk-summary { max-width: 62ch; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.78); }
.more-talks .talk-index small { grid-column: 1; margin-top: 2px; color: rgba(255,255,255,0.6); }
.more-talks .talk-index b { grid-column: 2; grid-row: 1 / 4; align-self: center; color: var(--yellow); }
.speaking-cta { margin-top: clamp(38px, 5vh, 56px); }
@media (max-width: 760px) { .more-talks { grid-template-columns: 1fr; } }
.talk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .talk-cards { grid-template-columns: 1fr; gap: 28px; } }
.talk-card { display: block; text-decoration: none; color: var(--ink); }
.tc-thumb { display: block; aspect-ratio: 16 / 9; border: 2px solid var(--ink); box-shadow: var(--shadow-tile-ink); background: var(--surface-dark); overflow: hidden; transition: transform var(--dur-slow) ease, box-shadow var(--dur-slow) ease; }
.tc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) contrast(1.05); transition: filter var(--dur-slow) ease; }
.talk-card:hover .tc-thumb img { filter: none; }
.talk-card:hover .tc-thumb { transform: translate(-5px, -5px); box-shadow: var(--shadow-lift-blue); }
.talk-card:nth-child(even):hover .tc-thumb { box-shadow: var(--shadow-lift-yellow); }
.tc-title { display: block; margin: 16px 0 6px; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -0.015em; line-height: 1.22; }
.tc-meta { display: block; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.talk-index { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.talk-index a { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; gap: 30px 14px; min-height: 150px; padding: 24px; border-right: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; }
.talk-index a:first-child { padding-left: 0; }
.talk-index a:last-child { border-right: 0; padding-right: 0; }
.talk-index span { font-family: var(--display); font-weight: 700; font-size: 17px; }
.talk-index small { grid-column: 1; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.talk-index b { grid-column: 2; grid-row: 1 / 3; align-self: end; color: var(--blue); transition: transform var(--dur-base) var(--ease-out); }
.talk-index a:hover b { transform: translateX(5px); }
@media (max-width: 760px) { .talk-index { grid-template-columns: 1fr; } .talk-index a, .talk-index a:first-child, .talk-index a:last-child { min-height: 0; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--line-strong); } .talk-index a:last-child { border-bottom: 0; } }

.speak-quote { margin: 0; border-left: 2px solid var(--blue); padding: 6px 0 6px 24px; display: flex; gap: 20px; align-items: flex-start; }
.speak-quote blockquote { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.speak-quote figcaption { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sq-avatar { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--ink); display: block; flex-shrink: 0; filter: grayscale(1); transition: filter var(--dur-base) ease; }
.speak-quote:hover .sq-avatar { filter: none; }
.organizer-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: clamp(52px, 8vh, 84px); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong); }
.organizer-quote { margin: 0; padding: clamp(28px, 4vw, 48px); }
.organizer-quote:first-child { padding-left: 0; border-right: 1px solid var(--line-strong); }
.organizer-quote:last-child { padding-right: 0; }
.organizer-quote blockquote { margin: 0 0 28px; max-width: 38ch; font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.1vw, 29px); line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); }
.organizer-quote figcaption { display: flex; flex-direction: column; gap: 5px; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.organizer-quote figcaption b { color: var(--blue); font-weight: 400; }
@media (max-width: 760px) { .organizer-quotes { grid-template-columns: 1fr; } .organizer-quote, .organizer-quote:first-child, .organizer-quote:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line-strong); } .organizer-quote:last-child { border-bottom: 0; } }
@media (max-width: 520px) { .speak-quote { flex-direction: column; } }

/* ---------- work impact ---------- */
.work-impact { margin: 0 0 clamp(52px, 8vh, 84px); }
.work-impact > .mono-label { margin: 0 0 18px; color: var(--blue); }
.impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(44px, 6vw, 84px); }
.impact-item { display: grid; grid-template-columns: minmax(110px, 0.34fr) 1fr; gap: clamp(20px, 3vw, 42px); align-items: center; padding: 22px 0 24px; border-top: 1px solid var(--line-strong); }
.impact-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-strong); }
.impact-item b { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.impact-item span { max-width: 34ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 820px) { .impact-grid { grid-template-columns: 1fr; } .impact-item { border-bottom: 0; } .impact-item:last-child { border-bottom: 1px solid var(--line-strong); } }
@media (max-width: 480px) { .impact-item { grid-template-columns: 96px 1fr; gap: 18px; } }
.proof-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 820px) { .proof-lines { grid-template-columns: 1fr; gap: 20px; } }
.proof { font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.proof b { color: var(--ink); font-weight: 700; }

/* ---------- selected work: stats + three generations + org panel ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 2px solid var(--ink); padding-top: 30px; }
@media (max-width: 820px) { .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } }
.stat b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.stat span { display: block; margin-top: 11px; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
#work .stat-strip { border-bottom: 2px solid var(--ink); padding-bottom: 34px; margin-bottom: clamp(44px, 6vh, 64px); }

/* ---------- advisory ---------- */
.advisory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 22px; }
.advisory-card { border-top: 2px solid var(--ink); padding: 24px 0 10px; display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.advisory-card .ac-num { display: block; margin-bottom: 34px; font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; color: var(--blue); }
.advisory-card h3 { align-self: start; }
.advisory-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.builder-band { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 6vw, 80px); margin-top: clamp(52px, 8vh, 88px); padding: clamp(28px, 4vw, 48px); background: var(--surface-dark); color: var(--on-dark); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--blue); }
.builder-copy .mono-label { color: var(--yellow); margin: 0 0 18px; }
.builder-copy h3 { color: #FFFFFF; max-width: 22ch; margin-bottom: 30px; }
.builder-copy .cta { color: #FFFFFF; }
.builder-copy .cta .label { border-bottom-color: var(--yellow); }
.builder-copy .cta .ar { color: var(--yellow); }
.builder-quote { margin: 0; padding-left: 28px; border-left: 1px solid var(--line-on-dark); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.builder-quote blockquote { margin: 0 0 22px; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 27px); line-height: 1.3; letter-spacing: -0.02em; color: var(--on-dark); }
.builder-quote figcaption { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); }
#speaking { background: var(--bg-thesis); }
@media (max-width: 820px) { .advisory-grid, .builder-band { grid-template-columns: 1fr; } .advisory-grid { gap: 22px; } .advisory-card { grid-row: auto; grid-template-rows: auto minmax(2.25em, auto) 1fr; } .builder-quote { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--line-on-dark); } }
.gen-strip { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; }
.gen-arrow { align-self: center; font-size: 26px; color: var(--blue); }
.gen-card { border: 2px solid var(--ink); background: var(--bg); padding: 24px 26px 26px; box-shadow: var(--shadow-tile-ink); display: flex; flex-direction: column; }
.gen-card .gk { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.gen-card h4 { font-family: var(--display); font-weight: 700; margin: 0 0 10px; font-size: clamp(18px, 1.7vw, 21px); letter-spacing: -0.018em; color: var(--ink); }
.gen-card.now { background: var(--surface-dark); border-color: var(--surface-dark); box-shadow: 6px 6px 0 var(--yellow); }
.gen-card.now .gk { color: var(--yellow); }
.gen-card.now h4 { color: #FFFFFF; }
.gen-card.now li { color: rgba(240,233,214,0.88); border-bottom-color: rgba(240,233,214,0.16); }
.gen-card.now li::before { color: var(--yellow); }
@media (max-width: 900px) {
  .gen-strip { grid-template-columns: 1fr; }
  .gen-arrow { transform: rotate(90deg); justify-self: center; }
}
/* ---------- portfolio entries ---------- */
.folio { border-top: 2px solid var(--ink); margin-top: clamp(40px, 6vh, 60px); padding-top: clamp(28px, 4vh, 40px); display: grid; grid-template-columns: 170px 1fr; gap: 18px clamp(32px, 4vw, 64px); align-items: start; }
.folio:first-of-type { margin-top: 0; }
@media (max-width: 820px) { .folio { grid-template-columns: 1fr; gap: 10px; } }
.folio-side { position: sticky; top: 90px; }
@media (max-width: 820px) { .folio-side { position: static; display: flex; align-items: baseline; gap: 14px; } }
.fnum { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.fkick { margin: 10px 0 0; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
@media (max-width: 820px) { .fkick { margin: 0; } }
.folio-main h3 { margin: 0 0 12px; }
.folio-body { margin: 0 0 22px; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.folio-facts { margin: 0; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* org-as-product panel — the one blue moment in the portfolio */
.folio-panel { background: var(--blue); border: 2px solid var(--ink); box-shadow: var(--shadow-tile-ink); padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px); }
.folio-list { list-style: none; margin: 0; padding: 0; }
.folio-list li { position: relative; padding: 11px 0 11px 24px; font-size: 15px; line-height: 1.5; color: var(--on-dark); border-bottom: 1px dashed rgba(240,233,214,0.25); }
.folio-list li:last-child { border-bottom: 0; }
.folio-list li::before { content: "→"; position: absolute; left: 0; top: 12px; color: var(--yellow); font-size: 12px; }
html.js .folio-list li { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.folio-panel.in .folio-list li { opacity: 1; transform: none; }
.folio-panel.in .folio-list li:nth-child(2) { transition-delay: 100ms; }
.folio-panel.in .folio-list li:nth-child(3) { transition-delay: 200ms; }
.folio-panel.in .folio-list li:nth-child(4) { transition-delay: 300ms; }
.folio-panel.in .folio-list li:nth-child(5) { transition-delay: 400ms; }

/* pricing flip */
.price-flip { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.pf-row { display: grid; grid-template-columns: 118px 1fr 150px; gap: 14px; align-items: center; }
@media (max-width: 640px) { .pf-row { grid-template-columns: 96px 1fr; } .pf-note { grid-column: 2; } }
.pf-label { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.pf-track { height: 22px; border: 2px solid var(--ink); background: var(--bg); overflow: hidden; }
.pf-fill { height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out); }
.pf-old { background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 9px); }
.pf-new { background: var(--blue); transition-delay: 300ms; }
.price-flip.run .pf-old { transform: scaleX(1); }
.price-flip.run .pf-new { transform: scaleX(0.62); }
.pf-note { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.06em; color: var(--dim); }

.transform-outro { margin: clamp(64px, 9vh, 100px) 0 0; border-top: 2px solid var(--ink); padding-top: clamp(36px, 5vh, 52px); }
.transform-outro .k { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.transform-outro .cta { margin-top: 22px; }
.transform-line { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); max-width: 34ch; }
.transform-line .hi { background: var(--yellow); color: #16171A; padding: 0 0.08em; position: relative; z-index: -1; }
.section#work { isolation: isolate; }
.gen-one { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.gen-card.now .gen-one { color: var(--on-dark); }

/* ---------- selected writing ---------- */
.writing-list { display: flex; flex-direction: column; }
.writing-item { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line-strong); text-decoration: none; color: var(--ink); transition: padding-left var(--dur-base) ease; }
.writing-item:last-child { border-bottom: 1px solid var(--line-strong); }
.writing-item:hover { padding-left: 10px; }
.writing-item { grid-template-columns: auto 1fr auto; }
.writing-item .wnum { font-family: var(--mono); font-size: var(--t-mono-size); color: var(--blue); }
.writing-item .wcopy { display: flex; flex-direction: column; gap: 7px; }
.writing-item .wt { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.9vw, 24px); letter-spacing: -0.02em; line-height: 1.2; }
.writing-item .ws { max-width: 72ch; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.writing-ctas { margin-top: clamp(32px, 5vh, 48px); }
.writing-item .war { color: var(--blue); font-size: 20px; transition: transform var(--dur-base) var(--ease-out); }
.writing-item:hover .war { transform: translateX(5px); }
/* ---------- compact journey spine (about sidebar) ---------- */
.side-journey { margin: 0 0 28px; }
.side-journey .k { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin: 0 0 4px; }
.sj-list { list-style: none; margin: 0; padding: 0; }
.sj-list li { display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.sj-list .jy { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.sj-list b { color: var(--ink); font-weight: 700; }

/* ---------- about photo ---------- */
.about-photo { margin: 0 0 24px; }
.about-photo img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); box-shadow: var(--shadow-tile-ink); }

/* ---------- about editorial layout ---------- */
.about-editorial { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: clamp(44px, 7vw, 96px); align-items: start; }
.about-editorial .about-photo { grid-column: 2; grid-row: 1; margin: 0; }
.about-story { grid-column: 1; grid-row: 1; }
.about-story p { margin: 0 0 22px; max-width: 58ch; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.64; color: var(--ink-soft); }
.photo-quote { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.photo-quote blockquote { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); }
.photo-quote span { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.journey-wide { margin-top: clamp(60px, 9vh, 100px); }
.journey-wide > .k { margin: 0 0 18px; font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); }
.journey-row { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-strong); }
.journey-row li { min-width: 0; padding: 20px 18px 22px; border-left: 1px solid var(--line-strong); }
.journey-row li:first-child { padding-left: 0; border-left: 0; }
.journey-row li:last-child { padding-right: 0; }
.journey-row .jy { display: block; margin-bottom: 28px; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.journey-row .jt b { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 15px; color: var(--ink); }
.journey-row .jt small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.journey-row .jt .jd { margin-top: 6px; font-size: 11.5px; color: var(--dim, var(--muted)); }
.about-meta { display: grid; grid-template-columns: 0.8fr 1.5fr 1fr; gap: 0; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.about-meta li { padding: 18px 24px; border-left: 1px solid var(--line-strong); }
.about-meta li:first-child { padding-left: 0; border-left: 0; }
.about-meta li:last-child { padding-right: 0; }
.about-meta b { display: block; margin-bottom: 5px; font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.about-meta span { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 900px) { .about-editorial { grid-template-columns: 1fr; gap: 36px; } .about-story { grid-column: 1; grid-row: 1; } .about-editorial .about-photo { grid-column: 1; grid-row: 2; max-width: 420px; } .journey-row { grid-template-columns: repeat(3, 1fr); } .journey-row li:nth-child(4) { border-left: 0; } .about-meta { grid-template-columns: 1fr; } .about-meta li, .about-meta li:first-child, .about-meta li:last-child { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); } .about-meta li:first-child { border-top: 0; } }
@media (max-width: 560px) { .journey-row { grid-template-columns: 1fr; } .journey-row li, .journey-row li:first-child, .journey-row li:last-child { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); } .journey-row li:first-child { border-top: 0; } .journey-row .jy { margin: 0; } }

/* ---------- about independent columns ---------- */
.about-columns { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); gap: clamp(52px, 8vw, 108px); align-items: start; }
.about-left, .about-right { min-width: 0; }
.about-right .about-photo { margin: 0; }
.about-quote { margin: clamp(36px, 6vh, 60px) 0 0; padding: 22px 0 0 24px; border-top: 1px solid var(--line-strong); border-left: 3px solid var(--blue); }
.about-quote blockquote { margin: 0 0 14px; max-width: 42ch; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.65vw, 22px); line-height: 1.38; letter-spacing: -0.015em; color: var(--ink); }
.about-quote figcaption { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.about-linkedin { margin-top: 28px; }
@media (max-width: 900px) { .about-columns { grid-template-columns: 1fr; gap: 54px; } .about-right { max-width: 520px; } }

/* ---------- speaker kit ---------- */
.kit-intro { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; margin: 14px 0 40px; }
.kit-block { border-top: 2px solid var(--ink); padding: 24px 0 30px; }
.kit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.kit-head h2 { margin: 0; }
.kit-len { font-family: var(--mono); font-size: var(--t-mono-size-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-left: 10px; }
.copy-btn { font-family: var(--mono); font-size: var(--t-mono-size); letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 16px; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); cursor: pointer; transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.copy-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--blue); }
.kit-copy { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); background: var(--bg-thesis); border: 1px solid var(--line-strong); padding: 18px 22px; white-space: pre-line; max-width: 68ch; }
.kit-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.kit-photo { margin: 0; }
.kit-photo img { display: block; width: 220px; height: 220px; object-fit: cover; border: 2px solid var(--ink); box-shadow: var(--shadow-tile-ink); }
.kit-list { list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.kit-list li { position: relative; padding: 9px 0 9px 24px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.kit-list li:last-child { border-bottom: 0; }
.kit-list li::before { content: "→"; position: absolute; left: 0; color: var(--blue); }

/* ---------- a11y + video facade (2026-07 pass) ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-tile-ink); font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { left: 12px; top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.video-facade { position: absolute; inset: 0; width: 100%; height: 100%; display: block; padding: 0; border: 0; background: var(--surface-dark); cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--yellow); color: #16171A; border: 2px solid #16171A; box-shadow: 4px 4px 0 #16171A; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.video-facade:hover .vf-badge, .video-facade:focus-visible .vf-badge { transform: translate(-50%, -50%) translate(-2px, -2px); box-shadow: 6px 6px 0 #16171A; }
.vf-tri { width: 0; height: 0; border-left: 10px solid #16171A; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }