:root {
  --cream: #e8d8c9;
  --orange: #f3701e;
  --ground: #171716;
  --paper: #f6f1e8;
  --bn-ground: #171716;
  --bn-surface: #292621;
  --bn-surface-hover: #302c27;
  --bn-surface-sunk: #1f1d1a;
  --bn-scrim: rgba(23, 23, 22, .8);
  --bn-ink: #f7f3ee;
  --bn-ink-muted: #c2b8ad;
  --bn-ink-faint: #9a9086;
  --orange-soft: rgba(243, 112, 30, .1);
  --orange-line: rgba(243, 112, 30, .4);
  --cream-soft: rgba(232, 216, 201, .08);
  --cream-line: rgba(232, 216, 201, .24);
  --bn-border-color: rgba(232, 216, 201, .1);
  --bn-border-strong: rgba(232, 216, 201, .18);
  --bn-border-hover: rgba(243, 112, 30, .55);
  --shadow-rest: 0 10px 28px -14px rgba(0, 0, 0, .7);
  --shadow-lift: 0 22px 44px -18px rgba(0, 0, 0, .8);
  --shadow-modal: 0 40px 80px -24px rgba(0, 0, 0, .85);
  --bn-radius-cell: 28px;
  --bn-radius-inner: 16px;
  --bn-radius-tight: 8px;
  --bn-radius-pill: 999px;
  --bn-gap: 20px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-fast: .16s;
  --dur: .24s;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --font-sans: "Josefin Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

.bn-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.15em;
  fill: currentColor;
  flex-shrink: 0;
}

.bn-icon.icon-xs {
  width: 13px;
  height: 13px;
}

.bn-icon.icon-sm {
  width: 16px;
  height: 16px;
}

.bn-icon.icon-md {
  width: 20px;
  height: 20px;
}

.bn-icon.icon-lg {
  width: 24px;
  height: 24px;
}

.bn-icon.icon-xl {
  width: 32px;
  height: 32px;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--bn-ground);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

html.is-locked {
  overflow: hidden;
}

body {
  background-color: var(--bn-ground);
  color: var(--bn-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: clip;
}

a,button,[role=button] {
  touch-action: manipulation;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: calc(20px + var(--safe-top));
  left: 20px;
  transform: translateY(calc(-100% - 40px - var(--safe-top)));
  background: var(--orange);
  color: var(--ground);
  padding: 12px 20px;
  border-radius: var(--bn-radius-inner);
  z-index: 9999;
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 330px;
  padding: calc(44px + var(--safe-top)) 0 calc(44px + var(--safe-bottom)) calc(44px + var(--safe-left));
  display: flex;
  flex-direction: column;
  z-index: 20;
  /* Fixed panel: scroll rather than clip if a short window can't fit it */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* Short desktop windows (e.g. 1366x768 laptops): tighten spacing so the
   buttons, including "Get in touch", stay on screen without scrolling. */
@media (min-width: 901px) and (max-height: 760px) {
  .sidebar {
    padding-top: calc(20px + var(--safe-top));
    padding-bottom: calc(20px + var(--safe-bottom));
  }
  .sidebar-top {
    gap: 6px;
  }
  .sidebar-headline {
    margin-top: 6px;
  }
  .sidebar-nav {
    margin-top: 18px;
    gap: 8px;
  }
  .sidebar-about-btn {
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .sidebar-social {
    padding-top: 14px;
  }
  .sidebar-social a {
    width: 44px;
    height: 44px;
  }
}

.sidebar-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sidebar-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--cream);
  background: var(--cream-soft);
  border: 1px solid var(--cream-line);
  padding: 5px 12px;
  border-radius: var(--bn-radius-pill);
  width: fit-content;
}

.sidebar-title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--bn-ink);
  letter-spacing: -.01em;
  margin-top: 6px;
  text-wrap: balance;
}

.sidebar-role {
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: .01em;
  text-wrap: balance;
}

.sidebar-headline {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--bn-ink);
  margin-top: 10px;
  max-width: 286px;
  text-wrap: balance;
}

.sidebar-tagline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bn-ink-muted);
  margin-top: 2px;
  max-width: 270px;
  text-wrap: pretty;
}

.sidebar-nav {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 286px;
}

.sidebar-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-ink);
  padding: 11px 20px;
  border-radius: var(--bn-radius-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}

.sidebar-about-btn .btn-arrow {
  color: var(--orange);
  transition: transform var(--dur-fast) var(--ease-out);
}

.sidebar-about-btn.resume-btn {
  border-color: var(--orange-line);
  background: var(--orange-soft);
  color: var(--orange);
}

/* Primary call to action: same orange fill as the manifesto "Get in touch" button */
.sidebar-about-btn.contact-btn {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ground);
  font-weight: 700;
}

.sidebar-about-btn.contact-btn .btn-arrow {
  color: var(--ground);
}

.sidebar-about-btn:active {
  transform: scale(.98);
}

.sidebar-social {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sidebar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--bn-radius-inner);
  background: var(--cream-soft);
  border: 1px solid var(--bn-border-color);
  color: var(--bn-ink-muted);
  text-decoration: none;
  transition: background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}

.sidebar-social a .brand-icon {
  width: 22px;
  height: 22px;
}

.sidebar-social a:active {
  transform: scale(.95);
}

.bn-grid.grid {
  position: relative;
  margin-left: 374px;
  padding: calc(44px + var(--safe-top)) calc(44px + var(--safe-right)) calc(80px + var(--safe-bottom)) 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,540px));
  gap: var(--bn-gap);
  max-width: 1480px;
}

@keyframes card-in {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
}

.card {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: var(--bn-radius-cell);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-color);
  position: relative;
  overflow: hidden;
  color: var(--bn-ink);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-rest);
  animation: card-in .56s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 8),8)*45ms);
}

.card.is-interactive,.card.project-video-card {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--dur) var(--ease-out),border-color var(--dur) ease,background-color var(--dur) ease,box-shadow var(--dur) ease;
}

.action-pill:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.card.is-interactive:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-color: var(--bn-border-hover);
}

.card.is-interactive:active,.card.project-video-card:active {
  transform: scale(.99);
  transition-duration: .12s;
}

.card.project-video-card {
  height: 100%;
  background-color: var(--paper);
  background-clip: padding-box;
  padding: 0;
}

.project-video-frame {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background-color: var(--paper);
}

.project-video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease-out);
}

.project-video-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  background: #171716e0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bn-radius-pill);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bn-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  letter-spacing: .04em;
  z-index: 2;
}

.project-video-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-fallback {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bn-surface-sunk);
  color: var(--bn-ink-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  padding: 24px;
}

.video-fallback .bn-icon {
  color: var(--orange);
  opacity: .8;
}

.is-missing .video-fallback {
  display: flex;
}

.is-missing video {
  visibility: hidden;
}

.card.project-photo-card {
  padding: 0;
  background: var(--bn-surface-sunk);
}

.project-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease-out),filter .4s var(--ease-out);
}

.photo-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,#0c0c0b00 52%,#0c0c0bc7),#0c0c0b00;
  transition: background-color .4s var(--ease-out);
}

.photo-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  transition: opacity .3s var(--ease-out),transform .4s var(--ease-out);
}

.photo-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange);
}

.photo-name {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--bn-ink);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

.photo-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.action-pill {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 168px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--bn-radius-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--bn-ink);
  text-decoration: none;
  cursor: pointer;
  background: #1717169e;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(247,243,238,.2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .26s var(--ease-out),transform .38s var(--ease-out),background-color var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}

.action-pill.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ground);
}

.action-pill:nth-child(2) {
  transition-delay: 45ms,45ms,0ms,0ms,0ms;
}

.action-pill:nth-child(3) {
  transition-delay: 90ms,90ms,0ms,0ms,0ms;
}

.action-pill:active {
  transform: scale(.97);
}

.project-photo-card:focus-within .photo-scrim {
  background-color: #0c0c0b94;
}

.project-photo-card:focus-within .photo-caption {
  opacity: 0;
  transform: translateY(8px);
}

.project-photo-card:focus-within .action-pill {
  opacity: 1;
  transform: none;
}

@media not ((hover:hover)and (pointer:fine)) {
  .photo-caption {
    top: 18px;
    bottom: auto;
    left: 18px;
  }
  .photo-scrim {
    background: linear-gradient(180deg,#0c0c0bb8,#0c0c0b00 34%,#0c0c0b00 58%,#0c0c0bb8);
  }
  .photo-actions {
    inset: auto 16px 18px 16px;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .action-pill {
    min-width: 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    opacity: 1;
    transform: none;
  }
  .project-photo-card:focus-within .photo-caption {
    opacity: 1;
    transform: none;
  }
}

.card.highlight-card {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  padding: 14px;
  gap: 20px;
  transition: background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}

.highlight-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--bn-radius-inner);
  overflow: hidden;
  background: var(--bn-surface-sunk);
}

.highlight-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlight-captions {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 48px);
  translate: -50% 0;
  padding: 6px 12px;
  border-radius: var(--bn-radius-tight);
  background: var(--bn-scrim);
  color: var(--bn-ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
}

.highlight-media.is-engaged .highlight-captions {
  bottom: 64px;
}

.highlight-video:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.highlight-sound {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--orange-line);
  border-radius: var(--bn-radius-pill);
  background: var(--bn-scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bn-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}

.highlight-sound .bn-icon {
  color: var(--orange);
  transition: color var(--dur) var(--ease-out);
}

.highlight-sound:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.highlight-sound:active {
  transform: scale(.97);
}

.highlight-media.is-engaged .highlight-sound {
  display: none;
}

.highlight-body {
  display: grid;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 28px;
  align-items: start;
  padding: 4px 16px 16px;
}

.highlight-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kicker-keep-case {
  text-transform: none;
}

.highlight-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--bn-ink);
  text-wrap: balance;
}

.highlight-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.highlight-copy p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bn-ink-muted);
  text-wrap: pretty;
}

.highlight-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--bn-border-strong);
  border-radius: var(--bn-radius-pill);
  background: var(--bn-surface-sunk);
  color: var(--bn-ink-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* "Currently learning": the highlight card shrunk to one grid cell lower on the page */
.card.highlight-card.learning-card {
  grid-column: auto;
  padding: 12px;
  gap: 14px;
}

.learning-card .highlight-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 2px 14px 14px;
}

.learning-card .highlight-title {
  font-size: 20px;
}

.learning-card .highlight-copy {
  gap: 10px;
}

.learning-card .highlight-copy p {
  font-size: 14px;
}

.learning-card .highlight-sound {
  top: 10px;
  right: 10px;
  padding: 8px 12px;
  font-size: 11px;
}

.learning-card .highlight-captions {
  bottom: 8px;
  max-width: calc(100% - 20px);
  padding: 4px 8px;
  font-size: 13px;
}

.learning-card .highlight-media.is-engaged .highlight-captions {
  bottom: 52px;
}

.card.bento-widget {
  overflow: visible;
  padding: 30px 30px 28px;
  justify-content: space-between;
  gap: 14px;
}

.bento-widget-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.widget-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--orange);
  text-transform: uppercase;
}

.widget-kicker .kicker-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bento-widget-header h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cream);
  letter-spacing: -.01em;
}

.bento-widget-header .meta {
  font-size: 15px;
  color: var(--bn-ink-muted);
}

.bento-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  container-type: inline-size;
}

.bento-metric-box {
  background: var(--bn-surface-sunk);
  border: 1px solid var(--bn-border-color);
  padding: 14px;
  border-radius: var(--bn-radius-inner);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bento-metric-box b {
  font-family: var(--font-mono);
  font-size: clamp(17px,5.2cqi,24px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.bento-metric-box span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bn-ink-muted);
  font-weight: 500;
}

/* One line of context under each benchmark: test set, conditions, scope */
.bento-metric-box .metric-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  color: var(--bn-ink-faint);
  margin-top: 2px;
}

.bento-stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bento-stack-chips span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--bn-radius-pill);
  background: var(--bn-surface-sunk);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-ink);
  font-weight: 500;
}

.bento-stack-chips span .chip-icon {
  width: 13px;
  height: 13px;
  opacity: .85;
}

.bento-stack-chips span.chip-orange {
  background: #f3701e0f;
  border-color: var(--orange-line);
  color: var(--orange);
  font-weight: 600;
}

.bento-stack-chips span.chip-cream,.bento-stack-chips span.chip-slate {
  background: var(--cream-soft);
  border-color: var(--cream-line);
  color: var(--cream);
  font-weight: 600;
}

.bento-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
}

.bento-tools-list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--bn-surface-sunk);
  border: 1px solid var(--bn-border-color);
  border-radius: var(--bn-radius-inner);
  text-decoration: none;
  color: var(--bn-ink);
  transition: background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out);
}

.bento-tools-list .t-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  transition: color var(--dur-fast) ease;
}

.bento-tools-list .t-desc {
  font-size: 13px;
  color: var(--bn-ink-muted);
  line-height: 1.35;
}

.bento-widget-footer {
  font-size: 12px;
  line-height: 1.5;
  font-family: var(--font-mono);
  color: var(--bn-ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bento-widget-footer .footer-tags {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card.manifesto-banner {
  grid-column: span 2;
  aspect-ratio: auto;
  min-height: 220px;
  padding: 40px 44px;
  justify-content: center;
}

.manifesto-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manifesto-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--orange);
}

.manifesto-text {
  font-size: 22px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--cream);
  max-width: 62ch;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.manifesto-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 14px;
}

.manifesto-by {
  font-size: 14px;
  color: var(--bn-ink-muted);
  font-weight: 500;
}

.manifesto-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  background: var(--orange);
  color: var(--ground);
  padding: 12px 24px;
  border-radius: var(--bn-radius-pill);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease;
}

.manifesto-cta:active {
  transform: scale(.97);
}

@starting-style {
}

@starting-style {
}

.dialog-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0f0f0e;
  overflow: hidden;
  position: relative;
}

.dialog-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dialog-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dialog-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--orange);
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  padding: 5px 11px;
  border-radius: var(--bn-radius-pill);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bn-ink-muted);
  flex-shrink: 0;
}

.dialog-impact-box {
  background: var(--orange-soft);
  border: 1px solid var(--orange-line);
  padding: 16px 18px;
  border-radius: var(--bn-radius-inner);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}

.impact-summary-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--bn-ink);
  font-weight: 500;
  text-wrap: pretty;
}

.impact-metric-pill {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cream);
  background: var(--cream-soft);
  border: 1px solid var(--cream-line);
  padding: 6px 12px;
  border-radius: var(--bn-radius-tight);
  width: fit-content;
  max-width: 100%;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.dialog-metrics {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  container-type: inline-size;
}

.dialog-metrics li {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--bn-radius-inner);
  background: var(--bn-surface-sunk);
  border: 1px solid var(--bn-border-color);
}

.dialog-metrics b {
  font-family: var(--font-mono);
  font-size: clamp(16px,6cqi,22px);
  line-height: 1.15;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.dialog-metrics span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--bn-ink-muted);
}

.dialog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  list-style: none;
}

.dialog-tags li {
  font-size: 13px;
  padding: 5px 12px;
  border-radius: var(--bn-radius-pill);
  background: var(--bn-surface-sunk);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-ink-muted);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.dialog-actions:empty {
  display: none;
}

.dialog-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--bn-radius-pill);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}

.dialog-btn:active {
  transform: scale(.97);
}

.dialog-btn.primary {
  background: var(--orange);
  color: var(--ground);
}

.dialog-btn.secondary {
  background: var(--bn-surface-sunk);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-ink);
}

.about-view {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--bn-ground);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 50;
  padding: calc(40px + var(--safe-top)) calc(24px + var(--safe-right)) calc(100px + var(--safe-bottom)) calc(24px + var(--safe-left));
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease-out),visibility var(--dur);
}

.about-view[hidden] {
  display: block!important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.about-back-wrapper {
  position: fixed;
  top: calc(24px + var(--safe-top));
  left: calc(24px + var(--safe-left));
  z-index: 60;
}

.back-btn {
  width: 48px;
  height: 48px;
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-strong);
  border-radius: 50%;
  color: var(--bn-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) ease,color var(--dur-fast) ease;
}

.back-btn:active {
  transform: scale(.94);
}

.back-btn .back-icon {
  width: 18px;
  height: 18px;
}

.about-container {
  max-width: 720px;
  margin: 0 auto;
}

.about-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 732 / 466;
  border-radius: var(--bn-radius-cell);
  border: 1px solid var(--bn-border-color);
  object-fit: cover;
  margin-bottom: 40px;
  display: block;
  background: var(--bn-surface);
}

.about-headline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--orange);
  margin-bottom: 16px;
}

.about-intro p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--bn-ink-muted);
  margin-bottom: 20px;
  max-width: 65ch;
  text-wrap: pretty;
}

.about-actions-row {
  display: flex;
  gap: 14px;
  margin: 28px 0 10px;
  flex-wrap: wrap;
}

.about-primary-btn,.about-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--bn-radius-pill);
  text-decoration: none;
  font-size: 15px;
  transition: transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) ease,color var(--dur-fast) ease,background-color var(--dur-fast) ease;
}

.about-primary-btn {
  background: var(--orange);
  color: var(--ground);
  font-weight: 700;
}

.about-secondary-btn {
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-ink);
  font-weight: 600;
}

.about-primary-btn:active,.about-secondary-btn:active {
  transform: scale(.97);
}

.about-section {
  margin-top: 56px;
}

.about-section .about-section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 20px;
  letter-spacing: -.01em;
}

.about-section-heading .heading-icon {
  color: var(--orange);
  width: 22px;
  height: 22px;
}

.about-section .subhead {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 24px 0 12px;
}

.xp-item {
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-color);
  padding: 22px 24px;
  border-radius: var(--bn-radius-inner);
  margin-bottom: 14px;
}

.xp-item h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--bn-ink);
  margin-bottom: 4px;
}

.xp-item .xp-org {
  color: var(--orange);
}

.xp-item .xp-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--bn-ink-muted);
  margin-bottom: 10px;
}

.xp-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bn-ink-muted);
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap: 14px;
}

.number-card {
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-color);
  padding: 20px;
  border-radius: var(--bn-radius-inner);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.number-card b {
  font-family: var(--font-mono);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.number-card span {
  font-size: 14px;
  line-height: 1.4;
  color: var(--bn-ink-muted);
}

.creds-list,.builds-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.creds-list li,.builds-list li a.build-link-item {
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-color);
  padding: 16px 20px;
  border-radius: var(--bn-radius-inner);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.builds-list li a.build-link-item {
  min-height: 56px;
  text-decoration: none;
  color: var(--bn-ink);
  transition: border-color var(--dur-fast) ease,background-color var(--dur-fast) ease;
}

.creds-list li b,.builds-list li b {
  font-size: 15px;
  font-weight: 600;
  color: var(--bn-ink);
  transition: color var(--dur-fast) ease;
}

.creds-list li span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream);
  text-align: right;
  flex-shrink: 0;
}

.builds-list li span {
  font-size: 14px;
  color: var(--bn-ink-muted);
  text-align: right;
}

.cursor-pill {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--orange);
  color: var(--ground);
  border-radius: var(--bn-radius-pill);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: .02em;
  opacity: 0;
  scale: .92;
  transition: opacity var(--dur-fast) ease,scale var(--dur-fast) var(--ease-out);
  z-index: 1000;
  box-shadow: 0 8px 20px -8px #0009;
}

.cursor-pill.visible {
  opacity: 1;
  scale: 1;
}

@media not ((hover:hover)and (pointer:fine)) {
  .cursor-pill {
    display: none;
  }
}

@media(hover:hover)and (pointer:fine) {
  .sidebar-about-btn:hover {
    background: var(--bn-surface-hover);
    border-color: var(--orange);
    color: var(--orange);
  }
  .sidebar-about-btn.contact-btn:hover {
    background: #ff7f2e;
    border-color: #ff7f2e;
    color: var(--ground);
  }
  .sidebar-about-btn.resume-btn:hover {
    background: #f3701e29;
  }
  .sidebar-about-btn:hover .btn-arrow {
    transform: translate(2px,-2px);
  }
  .sidebar-social a:hover {
    background: var(--bn-surface-hover);
    border-color: var(--orange);
    color: var(--orange);
  }
  .card.highlight-card:hover {
    background: var(--bn-surface-hover);
    border-color: var(--bn-border-hover);
  }
  .highlight-sound:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--ground);
  }
  .highlight-sound:hover .bn-icon {
    color: var(--ground);
  }
  .card.is-interactive:hover,.card.project-video-card:hover {
    transform: translateY(-3px);
    border-color: var(--bn-border-hover);
    box-shadow: var(--shadow-lift);
  }
  .project-photo-card:hover .project-photo {
    transform: scale(1.04);
    filter: saturate(.85);
  }
  .project-photo-card:hover .photo-scrim {
    background-color: #0c0c0b94;
  }
  .project-photo-card:hover .photo-caption {
    opacity: 0;
    transform: translateY(8px);
  }
  .project-photo-card:hover .action-pill {
    opacity: 1;
    transform: none;
  }
  .action-pill:hover {
    background: var(--bn-ink);
    border-color: var(--bn-ink);
    color: var(--ground);
  }
  .action-pill.primary:hover {
    background: #ff7f2e;
    border-color: #ff7f2e;
  }
  .card.project-video-card:hover .project-video-frame video {
    transform: scale(1.02);
  }
  .bento-tools-list a:hover {
    background: var(--orange-soft);
    border-color: var(--orange);
    transform: translate(2px);
  }
  .bento-tools-list a:hover .t-name {
    color: var(--orange);
  }
  .manifesto-cta:hover,.dialog-btn.primary:hover,.about-primary-btn:hover {
    background: #ff7f2e;
  }
  .dialog-btn.secondary:hover,.about-secondary-btn:hover {
    border-color: var(--cream);
    color: var(--cream);
  }
  .back-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
  }
  .builds-list li a.build-link-item:hover {
    border-color: var(--orange);
  }
  .builds-list li a.build-link-item:hover b {
    color: var(--orange);
  }
}

@media(max-width:900px) {
  .sidebar {
    position: static;
    width: auto;
    padding: calc(32px + var(--safe-top)) calc(20px + var(--safe-right)) 8px calc(20px + var(--safe-left));
  }
  .sidebar-nav {
    max-width: none;
  }
  .sidebar-social {
    margin-top: 24px;
  }
  .bn-grid.grid {
    margin-left: 0;
    padding: 16px calc(16px + var(--safe-right)) calc(60px + var(--safe-bottom)) calc(16px + var(--safe-left));
    grid-template-columns: minmax(0,1fr);
    gap: 16px;
  }
  .bn-grid>.card {
    order: var(--o, 100);
  }
  .card {
    border-radius: 24px;
  }
  .card.project-video-card {
    height: auto;
  }
  .card.bento-widget {
    aspect-ratio: auto;
    padding: 24px 20px;
  }
  .photo-name {
    font-size: 22px;
  }
  .card.highlight-card {
    padding: 10px;
    gap: 16px;
  }
  .highlight-body {
    grid-template-columns: minmax(0,1fr);
    gap: 14px;
    padding: 2px 10px 12px;
  }
  .highlight-title {
    font-size: 24px;
  }
  .highlight-sound {
    top: 8px;
    right: 8px;
    padding: 8px 12px;
    font-size: 11px;
  }
  .highlight-captions {
    bottom: 8px;
    max-width: calc(100% - 20px);
    padding: 4px 8px;
    font-size: 13px;
  }
  .highlight-media.is-engaged .highlight-captions {
    bottom: 52px;
  }
  .card.manifesto-banner {
    grid-column: span 1;
    padding: 28px 22px;
  }
  .manifesto-text {
    font-size: 19px;
  }
  .about-back-wrapper {
    position: static;
    margin-bottom: 20px;
  }
  .about-view {
    padding: calc(20px + var(--safe-top)) calc(16px + var(--safe-right)) calc(60px + var(--safe-bottom)) calc(16px + var(--safe-left));
  }
  .about-hero {
    margin-bottom: 28px;
  }
  .dialog-media {
    aspect-ratio: 1;
    max-height: 46dvh;
  }
}

@media(max-width:600px) {
  .creds-list li,.builds-list li a.build-link-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .creds-list li span,.builds-list li span {
    text-align: left;
  }
  .about-intro p {
    font-size: 17px;
  }
  .dialog-actions .dialog-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  @keyframes card-in {
    0% {
      opacity: 0;
    }
  }
  .card,.card:hover,.card:active,.card .project-video-frame video,.project-photo,.photo-caption,.action-pill,.highlight-sound,.btn-arrow,.sidebar-about-btn,.sidebar-social a,.bento-tools-list a,.manifesto-cta,.dialog-btn,.back-btn,.about-primary-btn,.about-secondary-btn {
    transform: none!important;
  }
  @starting-style {
  }
  .cursor-pill {
    scale: 1;
  }
}


/* ---------- Case-study pages (/projects/<id>) ---------- */

.case-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(14px + var(--safe-top)) calc(24px + var(--safe-right)) 14px calc(24px + var(--safe-left));
  background: rgba(23, 23, 22, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bn-border-color);
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--bn-radius-pill);
  background: var(--bn-surface);
  border: 1px solid var(--bn-border-strong);
  color: var(--bn-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}

.case-back:active {
  transform: scale(.97);
}

.case-home {
  font-size: 16px;
  font-weight: 700;
  color: var(--bn-ink-muted);
  text-decoration: none;
}

.case {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px calc(24px + var(--safe-right)) calc(80px + var(--safe-bottom)) calc(24px + var(--safe-left));
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.case-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.case-lede {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bn-ink-muted);
}

.case-media.dialog-media {
  aspect-ratio: 16 / 10;
  max-height: none;
  border-radius: var(--bn-radius-cell);
  border: 1px solid var(--bn-border-color);
}

.case-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.case-section + .case-section {
  padding-top: 32px;
  border-top: 1px solid var(--bn-border-color);
}

.case-step {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream);
  letter-spacing: -.01em;
}

.case-step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--orange);
}

.case-text {
  font-size: 17px;
  line-height: 1.65;
  color: var(--bn-ink-muted);
  max-width: 65ch;
  text-wrap: pretty;
}

.case .dialog-actions {
  margin-top: 0;
}

.case-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--bn-border-color);
}

.case-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 4px;
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .case-back:hover {
    border-color: var(--orange);
    color: var(--orange);
  }
  .case-home:hover {
    color: var(--bn-ink);
  }
  .case-next:hover {
    text-decoration: underline;
  }
}

@media (max-width: 900px) {
  .case {
    padding: 24px calc(16px + var(--safe-right)) calc(60px + var(--safe-bottom)) calc(16px + var(--safe-left));
    gap: 26px;
  }
  .case-topbar {
    padding: calc(10px + var(--safe-top)) calc(16px + var(--safe-right)) 10px calc(16px + var(--safe-left));
  }
  .case-title {
    font-size: 32px;
  }
  .case-step {
    font-size: 22px;
  }
  .case-text {
    font-size: 16px;
  }
  .case-section + .case-section,
  .case-footer {
    padding-top: 26px;
  }
}

@media (max-width: 420px) {
  .case-home {
    display: none;
  }
}