/* Boris Onofrei — portfolio styles. Utility classes live in assets/css/tailwind.css, compiled from assets/js/tailwind.config.js (see README). */

/* Satoshi by Indian Type Foundry — free for commercial use under the ITF Free Font License
   (assets/fonts/Satoshi-License-FFL.txt). One family: the static regular for body text, the variable
   cut for everything from 600 up, so extra-bold headings (800) render at their true weight. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:    #F5F4F1;
  --surface:  #FFFFFF;
  --ink:      #0B0C0E;
  --onink:    #F7F6F3;
  --graphite: #5A6068;
  --mist:     #DCD9D2;
  --accent:   #0085F2;
  --signal:   #F3C77A;

  /* on-dark tints of --graphite */
  --ondim:    #9AA1A9;
  --onquiet:  #7C848D;
  --onmute:   #B7BCC2;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(11, 12, 14, 0.04), 0 6px 16px rgba(11, 12, 14, 0.05);
}

.balance { text-wrap: balance; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Focus ring — every interactive element, 2px accent, 2px offset */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Labels: Satoshi regular, uppercase, 12px, tracking 0.14em */
.label {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

/* Highlight plate — --signal behind text, ink on top, max twice per page */
.plate {
  background: var(--signal);
  color: var(--ink);
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* CTAs — large underlined display-font text links, never filled buttons */
.cta {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 150ms var(--ease);
}
.cta:hover { color: var(--accent); }

.nav-link { transition: color 150ms var(--ease); }
.nav-link:hover { color: var(--accent); }

a { color: var(--accent); }
a:hover { color: var(--ink); }

/* Sticky-nav offset for anchor targets */
[id] { scroll-margin-top: 96px; }
:root { --gut: 24px; }

/* ---------- Hero ---------- */
/* Veil over the portrait so white and 50%-white type stay legible */
.hero-veil {
  background:
    linear-gradient(to top,
      rgba(3, 8, 24, 1.00) 0%,
      rgba(3, 8, 24, 0.93) 7%,
      rgba(3, 8, 24, 0.78) 26%,
      rgba(3, 8, 24, 0.30) 58%,
      rgba(3, 8, 24, 0.06) 100%),
    linear-gradient(to right,
      rgba(3, 8, 24, 0.45) 0%,
      rgba(3, 8, 24, 0.00) 55%);
}

.hero-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.35;
}
@media (min-width: 640px) {
  .hero-tag {
    gap: 6px;
    min-height: 44px;
    padding: 10px 22px;
    font-size: 17px;
    line-height: 1.4;
  }
}
.hero-tag::before {
  content: '/';
  flex: none;
  color: #FFFFFF;
  font-weight: 500;
}

/* Solid pill button — hero only */
.btn-solid {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: 999px;
  background: #0085F2;
  color: #FFFFFF;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition:
    background-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.btn-solid:hover,
.btn-solid:focus-visible {
  background: #1A93F5;
  color: #FFFFFF;
}
.btn-solid__arrow {
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition:
    width 180ms var(--ease),
    margin-left 180ms var(--ease),
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
}
.btn-solid:hover .btn-solid__arrow,
.btn-solid:focus-visible .btn-solid__arrow,
.btn-ghost:hover .btn-solid__arrow,
.btn-ghost:focus-visible .btn-solid__arrow {
  width: 20px;
  margin-left: 10px;
  opacity: 1;
  transform: translateX(0);
}

/* ---------- Nav CV pill ---------- */
.btn-cv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 180ms var(--ease);
}
.btn-cv:hover,
.btn-cv:focus-visible { background: #1A93F5; color: #FFFFFF; }

/* ---------- Work section (dark, bridges hero -> capabilities) ---------- */
.work-dark {
  background: linear-gradient(to bottom, #030818 0%, #070A14 45%, #0B0C0E 100%);
  color: var(--onink);
}

/* ---------- Contact section (dark, closes the page) ---------- */
.contact-dark {
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      color-mix(in srgb, var(--accent) 2%, transparent) 30%,
      transparent 65%),
    linear-gradient(to bottom, #0B0C0E 0%, #070A14 55%, #030818 100%);
  color: var(--onink);
}
.contact-dark .cta { color: #FFFFFF; }
.contact-email {
  display: inline-block;
  transition: color 180ms var(--ease);
}
.contact-email:hover,
.contact-email:focus-visible { color: var(--accent); }
@media (max-width: 767px) {
  .contact-heading__dim { display: block; }
  .contact-email-line { text-align: center; }
}
@media (max-width: 639px) {
  .contact-email {
    font-size: 26px;
    line-height: 1.15;
    overflow-wrap: normal;
  }
  #contact > div { padding-bottom: 48px; }
}
/* contact + footer read as one dark block: no seam, glow continues */
#contact + footer.contact-dark,
footer.contact-dark {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      color-mix(in srgb, var(--accent) 2%, transparent) 55%,
      transparent 100%),
    #030818;
}

/* ---------- Work cards ---------- */
.work-card {
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    transform 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.work-card:hover,
.work-card:focus-within {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

/* No card surface on the dark field — copy sits straight on the black */
.work-dark .work-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.work-dark .work-card:hover,
.work-dark .work-card:focus-within {
  transform: translateY(-4px);
  background: transparent;
  box-shadow: none;
}
.work-dark .work-card .text-ink { color: var(--ink); }
.work-dark .work-card .text-graphite { color: var(--graphite); }
/* info frame: its own white panel, matching the thumbnail */
.work-dark .work-card > div:not([data-image-slot]) {
  border-radius: 16px;
  background: linear-gradient(to top right, color-mix(in srgb, #070A14 25%, #FFFFFF) 0%, #FFFFFF 100%);
}
/* media placeholder: equal radius on all four corners */
.work-dark .work-card [data-image-slot] {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(to top right, color-mix(in srgb, #070A14 6%, #FFFFFF) 0%, #FFFFFF 55%);
  box-shadow: none;
  overflow: hidden;
}
.work-dark .work-card [data-image-slot] .text-graphite { color: var(--graphite); }
/* 12px between the info frame and the thumbnail — same gap as the Capabilities cards */
@media (max-width: 767px) {
  .work-dark .work-card { gap: 12px; }
  .work-dark ul.work-list { gap: 64px; }
}
@media (min-width: 768px) {
  .work-dark .work-card {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Viewport-sized cards: full-bleed width, full viewport height */
.work-list {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}
.work-dark .work-list .work-card {
  min-height: 100vh;
  border-radius: 0;
}
.work-dark .work-list .work-card > div { display: flex; flex-direction: column; justify-content: center; }

/* Tags sit over the media, same treatment as the About portrait */
.work-card__tags .hero-tag::before { color: var(--graphite); }
.work-card__tags .hero-tag {
  border: 1px solid rgba(11, 12, 14, 0.20);
  background: rgba(11, 12, 14, 0.04);
  color: var(--graphite);
  backdrop-filter: none;
}
/* over a real cover image the pills match the About portrait's glass treatment */
[data-image-slot="work-01"] .work-card__tags .hero-tag,
[data-image-slot="work-03"] .work-card__tags .hero-tag {
  border-color: transparent;
  background: rgba(14, 58, 112, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
}
[data-image-slot="work-02"] .work-card__tags .hero-tag {
  border-color: transparent;
  background: rgba(40, 60, 84, 0.315);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
}
[data-image-slot="work-02"] .work-card__tags .hero-tag::before { color: rgba(255, 255, 255, 0.7); }
[data-image-slot="work-03"] .work-card__tags .hero-tag::before,
[data-image-slot="work-01"] .work-card__tags .hero-tag::before { color: rgba(255, 255, 255, 0.7); }
.work-card__tags {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Read-case-study CTA — same solid pill as the hero's "See selected work" */
.work-card__affordance {
  align-self: start;
  min-height: 56px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;
  transition: background-color 180ms var(--ease);
}
.work-card:hover .work-card__affordance,
.work-card:focus-within .work-card__affordance { background: #1A93F5; }

.work-card__arrow {
  width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition:
    width 180ms var(--ease),
    margin-left 180ms var(--ease),
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
}
.work-card:hover .work-card__arrow,
.work-card:focus-within .work-card__arrow {
  width: 20px;
  margin-left: 10px;
  opacity: 1;
  transform: translateX(0);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 8px;
  color: #FFFFFF;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.btn-ghost:hover,
.btn-ghost:focus-visible { color: #FFFFFF; }

/* ---------- Case-study document (work/*.html) ---------- */
.cs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-lede { font-size: 20px; line-height: 1.55; color: var(--ink); max-width: 62ch; }
.cs-foot { margin-top: 16px; font-size: 13px; color: var(--graphite); }
.cs-cover {
  margin-top: 40px; aspect-ratio: 16 / 9; border-radius: 16px;
  background: #EEECE7; overflow: hidden;
}
.cs-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cs-block { margin-top: 96px; }
.cs-eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.cs-h {
  margin-top: 20px; font-family: 'Satoshi', system-ui, sans-serif; font-weight: 800;
  letter-spacing: -0.03em; font-size: clamp(26px, 2.2vw + 18px, 34px); line-height: 1.08; color: var(--ink);
}
.cs-h span { display: block; }
.cs-h__accent { color: var(--accent); }
.cs-h + .cs-p { margin-top: 32px; }
.cs-p { margin-top: 20px; max-width: 68ch; text-wrap: pretty; }

.cs-fig { margin-top: 40px; }
.cs-fig__frame { background: #FFFFFF; border-radius: 16px; padding: 32px; }
.cs-fig__frame img { display: block; width: 100%; height: auto; border-radius: 8px; }
.cs-phones__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 24px; }
.cs-phones__row + .cs-phones__row { margin-top: 24px; }
.cs-phones__row li { width: 300px; max-width: 100%; box-sizing: border-box; padding: 16px; border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(11, 12, 14, 0.10); }
.cs-phones__row img { display: block; width: 100%; height: auto; border-radius: 6px; }
.cs-phones figcaption { text-align: center; margin-top: 16px; }
.cs-cover--empty { display: grid; place-items: center; }
.cs-cover--empty span { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.cs-table--wrap th[scope="row"] { white-space: normal; min-width: 11em; vertical-align: top; padding-right: 24px; }
@media (max-width: 767px) {
  .cs-phones__row { gap: 12px; }
  .cs-phones__row + .cs-phones__row { margin-top: 12px; }
  .cs-phones__row li { width: calc(50% - 6px); padding: 8px; border-radius: 14px; }
}
.cs-fig figcaption { margin-top: 12px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }

.cs-pull {
  margin-top: 36px; font-family: 'Satoshi', system-ui, sans-serif; font-weight: 700;
  letter-spacing: -0.02em; font-size: clamp(22px, 1.4vw + 17px, 26px); line-height: 1.25;
  color: var(--accent); max-width: 30ch;
}
.cs-close {
  margin-top: 40px; font-family: 'Satoshi', system-ui, sans-serif; font-weight: 700;
  letter-spacing: -0.02em; font-size: clamp(20px, 1.2vw + 16px, 24px); line-height: 1.3;
  color: var(--ink); max-width: 44ch;
}
.cs-note { margin-top: 40px; background: #FFFFFF; border-radius: 16px; padding: 24px 28px; color: var(--ink); max-width: 70ch; }

.cs-meta {
  margin-top: 96px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--mist); border: 1px solid var(--mist); border-radius: 12px; overflow: hidden;
}
.cs-meta__cell { background: var(--surface); padding: 20px 24px; }
.cs-meta dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.cs-meta dd { margin: 8px 0 0; font-size: 15px; color: var(--ink); }

.cs-list { margin-top: 32px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; max-width: 68ch; }
.cs-list li { position: relative; padding-left: 22px; }
.cs-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; background: var(--accent); }
.cs-list strong { color: var(--ink); font-weight: 700; }

.cs-steps { margin-top: 32px; list-style: none; padding: 0; max-width: 68ch; }
.cs-steps li { display: flex; gap: 20px; padding: 14px 0; border-top: 1px solid var(--mist); color: var(--ink); }
.cs-steps li:last-child { border-bottom: 1px solid var(--mist); }
.cs-steps__n { font-family: 'Satoshi', system-ui, sans-serif; font-size: 13px; color: var(--graphite); font-variant-numeric: tabular-nums; padding-top: 3px; }

.cs-strip {
  margin-top: 32px; list-style: none; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--mist); border: 1px solid var(--mist); border-radius: 12px; overflow: hidden;
}
.cs-strip li { background: var(--surface); padding: 18px 20px; }
.cs-strip span { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.cs-strip strong { display: block; margin-top: 8px; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }

.cs-sub { margin-top: 56px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.cs-tablewrap { margin-top: 24px; overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cs-table th, .cs-table td { padding: 14px 12px; border-top: 1px solid var(--mist); font-size: 15px; text-align: left; }
.cs-table tbody tr:last-child th, .cs-table tbody tr:last-child td { border-bottom: 1px solid var(--mist); }
.cs-table th[scope="row"] { color: var(--ink); font-weight: 500; padding-left: 0; white-space: nowrap; }
.cs-table thead th { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); font-weight: 400; }
.cs-table td { color: var(--graphite); }
.cs-table .num { text-align: right; color: var(--ink); white-space: nowrap; }

@media (max-width: 767px) {
  .cs-block { margin-top: 64px; }
  .cs-meta { margin-top: 64px; grid-template-columns: 1fr; }
  .cs-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-fig__frame { padding: 16px; }
}

/* ---------- Case-study screenshots: open full size (lightbox) ---------- */
.cs-zoombox { position: relative; }
.cs-fig__frame.cs-zoombox { --zi: 36px; }
.cs-phones__row li.cs-zoombox { --zi: 20px; }
.cs-fig img.is-zoomable { cursor: zoom-in; }
.cs-zoom {
  position: absolute; top: var(--zi); right: var(--zi); z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: #FFFFFF;
  cursor: zoom-in; opacity: 0; transition: opacity 180ms var(--ease);
}
.cs-zoom > span {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px;
  background: rgba(11, 12, 14, 0.66);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: scale(0.9);
  transition: transform 180ms var(--ease), background-color 180ms var(--ease);
}
.cs-zoombox:hover .cs-zoom,
.cs-zoom:focus-visible { opacity: 1; }
.cs-zoombox:hover .cs-zoom > span,
.cs-zoom:focus-visible > span { transform: none; }
.cs-zoom:hover > span { background: var(--accent); }
.cs-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 999px; }
@media (hover: none) {
  .cs-zoom { opacity: 1; }
  .cs-zoom > span, .cs-zoom:hover > span { width: 30px; height: 30px; transform: none; background: rgba(11, 12, 14, 0.5); }
}
@media (max-width: 767px) {
  .cs-fig__frame.cs-zoombox { --zi: 14px; }
  .cs-phones__row li.cs-zoombox { --zi: 2px; }
  .cs-zoom > span, .cs-zoom:hover > span { width: 28px; height: 28px; }
  .cs-zoom svg { width: 14px; height: 14px; }
}

.lb[hidden] { display: none; }
.lb { position: fixed; inset: 0; z-index: 70; color: #FFFFFF; }
.lb__bg { position: absolute; inset: 0; background: rgba(3, 8, 24, 0.95); opacity: 0; transition: opacity 240ms var(--ease); }
.lb__chrome { opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); }
.lb.is-open .lb__bg,
.lb.is-open .lb__chrome { opacity: 1; }
.lb__stage {
  position: absolute; inset: 0; display: flex; overflow: hidden;
  overscroll-behavior: contain; touch-action: manipulation;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.lb.is-zoomed .lb__stage { overflow: auto; }
.lb__frame { flex: none; margin: auto; }
.lb__img {
  display: block; max-width: none; height: auto; box-sizing: content-box;
  padding: 16px; border-radius: 14px; background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 30px 80px rgba(0, 0, 0, 0.45);
  transform-origin: 0 0;
  transition: opacity 200ms var(--ease), transform 300ms var(--ease);
  cursor: zoom-in;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
}
.lb.is-max .lb__img { cursor: zoom-out; }
.lb.is-dragging .lb__img { cursor: grabbing; }
.lb__top {
  position: absolute; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px 0 24px;
}
.lb__count { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.66); }
.lb__tools { display: flex; gap: 8px; }
.lb .lb__btn {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(36, 42, 58, 0.82); color: #FFFFFF;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), opacity 240ms var(--ease);
}
.lb .lb__btn:hover { background: var(--accent); }
.lb .lb__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.lb .lb__btn:disabled { background: rgba(36, 42, 58, 0.4); color: rgba(255, 255, 255, 0.3); cursor: default; }
.lb__nav { position: absolute; top: 50%; margin-top: -24px; }
.lb .lb__nav { width: 48px; height: 48px; }
.lb__nav--prev { left: 20px; }
.lb__nav--next { right: 20px; }
.lb__bottom {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px;
}
.lb__cap { font-size: 13px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); text-wrap: pretty; }
.lb__hint { flex: none; margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.5); white-space: nowrap; }
.lb.is-zoomed .lb__top { background: linear-gradient(to bottom, rgba(3, 8, 24, 0.9), rgba(3, 8, 24, 0)); }
.lb.is-zoomed .lb__bottom { background: linear-gradient(to top, rgba(3, 8, 24, 0.9), rgba(3, 8, 24, 0)); }
@media (hover: none) {
  .lb .lb__btn:hover:not(:disabled) { background: rgba(36, 42, 58, 0.82); }
  .lb__hint { display: none; }
}
@media (max-width: 767px) {
  .lb__top { height: 56px; padding: 0 8px 0 16px; }
  .lb__img { padding: 8px; border-radius: 10px; }
  .lb .lb__nav { top: auto; bottom: 12px; width: 44px; height: 44px; margin-top: 0; }
  .lb__nav--prev { left: 12px; }
  .lb__nav--next { right: 12px; }
  .lb__bottom { justify-content: center; min-height: 68px; padding: 12px 68px; text-align: center; }
  .lb__cap { font-size: 12px; }
  .lb__hint { display: none; }
}

/* ---------- CV overlay header (collapses on scroll) ---------- */
.cv-head {
  border-bottom: 1px solid transparent;
  padding-top: 40px;
  padding-bottom: 28px;
  transition:
    padding 240ms var(--ease),
    border-color 240ms var(--ease);
}
.cv-head__name {
  font-size: 34px;
  line-height: 1.05;
  transition: font-size 240ms var(--ease);
}
.cv-head__role {
  font-size: 17px;
  line-height: 1.5;
  transition: font-size 240ms var(--ease);
}
.cv-head.is-condensed {
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom-color: var(--mist);
}
.cv-head.is-condensed .cv-head__name { font-size: 19px; }
.cv-head.is-condensed .cv-head__role { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cv-head,
  .cv-head__name,
  .cv-head__role { transition: none; }
}

/* ---------- Capabilities (editorial rows + filter) ---------- */
.caps-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.caps-pill {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 0.5%, #F5F4F1) 0%, transparent 45%), var(--surface);
  color: var(--ink);
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease);
}
.caps-pill:hover { border-color: var(--accent); color: var(--ink); }
.caps-pill:hover,
.caps-pill[aria-pressed="true"] { background-image: none; }
.caps-pill[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
.caps-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* equal-height rows: each row is as tall as the tallest name/description
   at the current width, so nothing is guessed or clipped */
#caps-rows {
  grid-auto-rows: 1fr;
  gap: 12px;
}

/* --- stacked full-width rows; hover lifts one into a filled panel --- */
.caps-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  --caps-pad: 30px;
  min-height: 172px;
  padding: var(--caps-pad);
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface);
  box-shadow: 0 1px 2px rgba(11, 12, 14, 0.04), 0 8px 24px rgba(11, 12, 14, 0.05);
  color: var(--ink);
  overflow: hidden;
  cursor: default;
  transition:
    background-color 260ms var(--ease),
    border-color 260ms var(--ease),
    border-radius 260ms var(--ease),
    box-shadow 260ms var(--ease),
    padding 260ms var(--ease),
    opacity 200ms var(--ease);
}
.caps-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.caps-row.is-dim {
  opacity: 0.38;
  pointer-events: none;
}
.caps-row.is-dim .caps-index,
.caps-row.is-dim .caps-name { color: var(--graphite); }

/* --- static face: number + big name --- */
.caps-row__key {
  grid-area: 1 / 1;
  min-width: 0;
}
.caps-index {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--graphite);
  transition: color 260ms var(--ease);
}
.caps-name {
  margin-top: 10px;
  max-width: 26ch;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
  transition:
    color 260ms var(--ease),
    opacity 200ms var(--ease),
    transform 260ms var(--ease);
}

.caps-arrow {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  color: var(--graphite);
  transition: color 260ms var(--ease), opacity 200ms var(--ease);
}
.caps-fingerprint { display: none; }
.caps-arrow > span {
  position: absolute;
  transition: opacity 200ms var(--ease), transform 260ms var(--ease);
}

/* --- hover state: blue panel, full detail unfolds --- */
.caps-detail {
  grid-area: 1 / 1;
  padding-top: 20px;
  padding-right: 56px;
  max-width: 72ch;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 220ms var(--ease),
    transform 260ms var(--ease);
}
.caps-row:hover,
.caps-row:focus-within {
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 16px;
}
.caps-row:hover .caps-index,
.caps-row:focus-within .caps-index { color: rgba(255, 255, 255, 0.72); }
.caps-row:hover .caps-name,
.caps-row:focus-within .caps-name {
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(-6px);
}
.caps-row:hover .caps-arrow,
.caps-row:focus-within .caps-arrow { opacity: 0; }
.caps-row:hover .caps-detail,
.caps-row:focus-within .caps-detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.caps-lead {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #FFFFFF;
}
.caps-core {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: #FFFFFF;
}
.caps-also {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #FFFFFF;
}

@media (max-width: 767px) {
  .caps-lead { font-size: 17px; line-height: 1.45; }
  .caps-core { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .caps-also { font-size: 13px; line-height: 1.5; }
}
@media (max-width: 767px) {
  .caps-name { font-size: clamp(26px, 2.2vw + 18px, 34px); }
  .caps-heading__dim { display: block; }
}
@media (max-width: 767px) {
  /* one height in every state: tall enough for the longest open description */
  .caps-row { min-height: 300px; }
  /* the description takes the name's place, full width, number stays */
  .caps-detail {
    grid-area: 1 / 1 / 2 / -1;
    padding-top: 40px;
    padding-right: 0;
    max-width: none;
  }
  /* touch: the card opens while a finger is held on it */
  .caps-row.is-held {
    background: var(--accent);
    border-color: var(--accent);
    border-radius: 16px;
  }
  .caps-row.is-held .caps-index { color: rgba(255, 255, 255, 0.72); }
  .caps-row.is-held .caps-name {
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(-6px);
  }
  .caps-row.is-held .caps-arrow { opacity: 0; }
  /* mobile: the ↗ glyph gives way to a fingerprint mark in the card's corner */
  .caps-arrow__open { display: none; }
  .caps-row .caps-arrow {
    position: absolute;
    grid-column: auto;
    grid-row: auto;
    right: var(--caps-pad);
    bottom: var(--caps-pad);
    width: 38px;
    height: 38px;
    font-size: 0;
  }
  .caps-fingerprint { display: block; width: 38px; height: 38px; color: inherit; }

  /* mobile: one swipeable row of cards */
  #caps-rows {
    display: flex;
    grid-auto-rows: auto;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    /* full-bleed to the viewport edges; cards still line up with the gutter */
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    /* room above/below so card shadows aren't clipped */
    padding-block: 16px;
    margin-block: -16px;
    margin-top: 24px;
    scroll-padding-inline: var(--gut);
  }
  #caps-rows::-webkit-scrollbar { display: none; }
  #caps-rows .caps-row {
    flex: 0 0 auto;
    width: calc(100vw - var(--gut) - 44px);
    scroll-snap-align: start;
  }
  /* filtering dims cards in place — the row keeps its length */
  #caps-rows .caps-row.is-dim { display: grid; }
  .caps-row.is-held .caps-detail {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}
/* touch: no hover, no focus-open — only a held finger opens a card */
@media (hover: none) and (max-width: 767px) {
  .caps-row {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
  }
  .caps-row:focus-within:not(.is-held) {
    background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface);
    border-color: transparent;
  }
  .caps-row:focus-within:not(.is-held) .caps-index { color: var(--graphite); }
  .caps-row:focus-within:not(.is-held) .caps-name { color: var(--ink); opacity: 1; transform: none; }
  .caps-row:focus-within:not(.is-held) .caps-arrow { opacity: 1; }
  .caps-row:focus-within:not(.is-held) .caps-detail { opacity: 0; transform: translateY(8px); }
}
@media (max-width: 639px) {
  .caps-row { --caps-pad: 22px; min-height: 300px; }
  .caps-row:hover, .caps-row:focus-within { border-radius: 16px; }
  .caps-arrow { width: 28px; height: 28px; font-size: 20px; }
}


/* --- desktop: alternate a full-width row with a row holding two cards --- */
@media (min-width: 900px) {
  #caps-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .caps-row--wide { grid-column: 1 / -1; }
  .caps-row--left,
  .caps-row--right {
    min-height: 268px;
    --caps-pad: 26px;
  }
  .caps-row--left .caps-name,
  .caps-row--right .caps-name { max-width: 18ch; }
  .caps-row--left .caps-detail,
  .caps-row--right .caps-detail { padding-right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .caps-row, .caps-detail, .caps-index, .caps-name, .caps-arrow, .caps-arrow > span { transition: none; }
  .caps-detail { transform: none; }
}

/* ---------- Touch devices: no hover affordances (tap/focus still works) ---------- */
@media (hover: none) {
  .contact-email:hover:not(:focus-visible) { color: #FFFFFF; }
  a:hover { color: var(--accent); }
  .btn-solid:hover:not(:focus-visible) { background: var(--accent); }
  .btn-ghost:hover:not(:focus-visible) { color: #FFFFFF; }
  .btn-cv:hover:not(:focus-visible) { background: var(--accent); color: #FFFFFF; }
  .btn-solid:hover:not(:focus-visible) .btn-solid__arrow,
  .btn-ghost:hover:not(:focus-visible) .btn-solid__arrow {
    width: 0;
    margin-left: 0;
    opacity: 0;
  }
  .caps-pill:hover:not(:focus-visible) { border-color: var(--mist); color: var(--graphite); }
  .work-dark .work-card:hover:not(:focus-visible) { transform: none; }
  .work-card:hover:not(:focus-visible) .work-card__affordance { background: var(--accent); }
  .work-card:hover:not(:focus-visible) .work-card__arrow { width: 0; margin-left: 0; opacity: 0; }
  .about-card:not(.about-card--accent):hover {
    border-color: transparent;
    background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface);
  }
  .about-card:not(.about-card--accent):hover .label { color: var(--graphite); }
  .about-card:not(.about-card--accent):hover p,
  .about-card:not(.about-card--accent):hover .text-ink { color: var(--ink); }
  .about-card:not(.about-card--accent):hover .about-card__minor { color: var(--graphite); }
  .caps-row:hover:not(:focus-within) {
    background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface);
    border-color: transparent;
  }
  .caps-row:hover:not(:focus-within) .caps-index { color: var(--graphite); }
  .caps-row:hover:not(:focus-within) .caps-name {
    color: var(--ink);
    opacity: 1;
    transform: none;
  }
  .caps-row:hover:not(:focus-within) .caps-arrow { opacity: 1; }
  .caps-row:hover:not(:focus-within) .caps-detail {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }
}

/* ---------- Overlay (CV) ---------- */
.overlay[hidden] { display: none; }
.overlay__backdrop {
  background: rgba(11, 12, 14, 0.5);
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.overlay__panel {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 180ms var(--ease),
    transform 180ms var(--ease);
}
.overlay.is-open .overlay__backdrop { opacity: 1; }
.overlay.is-open .overlay__panel { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ---------- About: bento grid ---------- */
.about-bento {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: minmax(0, 35fr) minmax(0, 65fr);
  min-height: 560px;
}
.about-bento__row {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.about-bento__row--tall { grid-row: 2; }
.about-bento__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.45) translateY(-20px);
  transform-origin: 52% 34%;
}
.about-portrait__tags {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-bento__portrait {
  position: relative;
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 4px rgba(11, 12, 14, 0.06), 0 14px 36px rgba(11, 12, 14, 0.10);
  overflow: hidden;
}
.about-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface);
  box-shadow: 0 1px 2px rgba(11, 12, 14, 0.04), 0 8px 24px rgba(11, 12, 14, 0.05);
}
.about-card p { margin: 0; }
.about-card,
.about-card p,
.about-card .label {
  transition:
    background-color 200ms var(--ease),
    border-color 200ms var(--ease),
    color 200ms var(--ease);
}
/* hover swaps the two states: plain cards fill accent, the Focus card empties */
.about-card:not(.about-card--accent):hover {
  border-color: var(--accent);
  background: var(--accent);
}
.about-card:not(.about-card--accent):hover .label,
.about-card:not(.about-card--accent):hover p,
.about-card:not(.about-card--accent):hover .text-ink,
.about-card:not(.about-card--accent):hover .about-card__minor { color: #FFFFFF; }
/* Focus card carries the accent so it takes the eye */
.about-card--accent {
  border-color: var(--accent);
  background: var(--accent);
}
.about-card--accent .label { color: #FFFFFF; font-weight: 600; }
.about-card.about-card--accent p + p:not(.about-card__minor),
.about-card.about-card--accent .about-card__minor,
.about-card.about-card--accent .text-ink { color: #FFFFFF; }

.about-card__minor {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}
/* value set at the work-card title scale (s34), bold */
.about-card p + p:not(.about-card__minor) {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  hyphens: none;
  overflow-wrap: normal;
  color: var(--ink);
}

@media (max-width: 767px) {
  .about-card p + p:not(.about-card__minor) { font-size: clamp(26px, 2.2vw + 18px, 34px); }
}

@media (max-width: 899px) {
  .about-bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .about-bento__row,
  .about-bento__row--tall { grid-column: 1; grid-row: auto; }
  /* portrait leads the section on mobile */
  .about-bento__portrait { order: -1; }
  .about-bento__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.45) translateY(-20px);
  transform-origin: 52% 34%;
}
.about-portrait__tags {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-bento__portrait {
  position: relative; grid-column: 1; }
  .about-bento__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.45) translateY(-20px);
  transform-origin: 52% 34%;
}
.about-portrait__tags {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-bento__portrait {
  position: relative;
    grid-column: 1;
    grid-row: auto;
    min-height: 280px;
  }
}
@media (max-width: 599px) {
  .about-bento__row { grid-template-columns: minmax(0, 1fr); }
}

/* All page headings run caps, like the capability names */
h1, h2, h3 { text-transform: uppercase; }

/* ============================================================
   TWEAKS — three expressive knobs, driven by [data-*] on <html>
   ============================================================ */

/* --- 1. Card surface: how the work + capability cards hold the page --- */

/* Glass: the hero-tag wash, white copy, no border */
[data-card-surface="glass"] .work-dark .work-card {
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: none;
}
[data-card-surface="glass"] .work-dark .work-card:hover,
[data-card-surface="glass"] .work-dark .work-card:focus-within {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
[data-card-surface="glass"] .work-dark .work-card .text-ink { color: #FFFFFF; }
[data-card-surface="glass"] .work-dark .work-card .text-graphite { color: rgba(255, 255, 255, 0.82); }
[data-card-surface="glass"] .work-dark .work-card .border-ink\/20 { border-color: rgba(255, 255, 255, 0.34); }
[data-card-surface="glass"] .work-dark .work-card [data-image-slot] {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14);
}
[data-card-surface="glass"] .work-dark .work-card [data-image-slot] .text-graphite { color: rgba(255, 255, 255, 0.72); }

/* Outline: nothing but a hairline — the field shows through */
[data-card-surface="outline"] .work-dark .work-card {
  border-color: rgba(255, 255, 255, 0.28);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
[data-card-surface="outline"] .work-dark .work-card:hover,
[data-card-surface="outline"] .work-dark .work-card:focus-within {
  border-color: var(--accent);
  background: transparent;
  box-shadow: none;
}
[data-card-surface="outline"] .work-dark .work-card .text-ink { color: #FFFFFF; }
[data-card-surface="outline"] .work-dark .work-card .text-graphite { color: rgba(255, 255, 255, 0.78); }
[data-card-surface="outline"] .work-dark .work-card .border-ink\/20 { border-color: rgba(255, 255, 255, 0.30); }
[data-card-surface="outline"] .work-dark .work-card [data-image-slot] {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.16);
}
[data-card-surface="outline"] .work-dark .work-card [data-image-slot] .text-graphite { color: rgba(255, 255, 255, 0.7); }

/* --- 2. Dark reach: how far the dark field runs down the page --- */

/* pulled back to the hero — Selected work sits on paper */
[data-dark-reach="hero"] .work-dark {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--mist);
}
[data-dark-reach="hero"] .work-dark .text-ondim,
[data-dark-reach="hero"] .work-dark .text-onmute { color: var(--graphite); }
[data-dark-reach="hero"] .work-dark .text-onink { color: var(--ink); }
[data-dark-reach="hero"] .work-dark .work-card {
  border-color: var(--mist);
  background: #FFFFFF;
  box-shadow: var(--shadow-card);
}
[data-dark-reach="hero"] .work-dark .work-card .text-ink { color: var(--ink); }
[data-dark-reach="hero"] .work-dark .work-card .text-graphite { color: var(--graphite); }

/* carried through Capabilities as well */
[data-dark-reach="capabilities"] #capabilities {
  background: linear-gradient(to bottom, #0B0C0E 0%, #07080A 62%, #030818 100%);
  color: var(--onink);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-dark-reach="capabilities"] #capabilities .text-graphite { color: var(--ondim); }
[data-dark-reach="capabilities"] #capabilities .text-ink { color: var(--onink); }
[data-dark-reach="capabilities"] .caps-pill {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}
[data-dark-reach="capabilities"] .caps-pill:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
[data-dark-reach="capabilities"] .caps-pill[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
[data-dark-reach="capabilities"] #caps-rows { border-top-color: rgba(255, 255, 255, 0.16); }
[data-dark-reach="capabilities"] .caps-row { border-bottom-color: rgba(255, 255, 255, 0.16); }
[data-dark-reach="capabilities"] .caps-index,
[data-dark-reach="capabilities"] .caps-arrow { color: rgba(255, 255, 255, 0.66); }
[data-dark-reach="capabilities"] .caps-name { color: #FFFFFF; }

/* --- 3. Card scale: contained rhythm vs full-bleed viewport panels --- */
[data-card-scale="contained"] .work-list {
  width: auto;
  margin-left: 0;
  transform: none;
}
[data-card-scale="contained"] .work-dark .work-list .work-card {
  min-height: 0;
  border-radius: 16px;
}
[data-card-scale="contained"] .work-dark .work-list .work-card > div {
  display: block;
}
@media (min-width: 768px) {
  [data-card-scale="contained"] .work-dark .work-list .work-card { min-height: 660px; }
  [data-card-scale="contained"] .work-dark .work-list .work-card > div:not([data-image-slot]) {
    display: flex;
    flex-direction: column;
  }
  [data-card-scale="contained"] .work-dark .work-list .work-card .work-card__affordance { margin-top: auto; }
  [data-card-scale="contained"] .work-dark .work-list .work-card > div[data-image-slot] { display: flex; }
}

/* ============================================================
   WORK CARDS — open their case-study page (work/*.html)
   ============================================================ */
.work-card { position: relative; }
.work-card__link { text-decoration: none; }
.work-card__link:hover,
.work-card__link:focus-visible { color: #FFFFFF; }

/* ghost button on light sections — same shape as .btn-ghost, ink text */
.btn-ghost--ink { color: var(--ink); }
.btn-ghost--ink:hover,
.btn-ghost--ink:focus-visible { color: var(--accent); }

/* ============================================================
   EXPERIENCE — key points on the page, full CV as PDF
   ============================================================ */
.exp-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.exp-card {
  display: grid;
  gap: 20px 48px;
  padding: 30px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface);
  box-shadow: 0 1px 2px rgba(11, 12, 14, 0.04), 0 8px 24px rgba(11, 12, 14, 0.05);
}
.exp-card,
.exp-card .label,
.exp-card__role,
.exp-card__org,
.exp-card__points li { transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
/* hover fills the card with the accent, like the About cards */
@media (hover: hover) {
  .exp-card:hover { border-color: var(--accent); background: var(--accent); }
  .exp-card:hover .label,
  .exp-card:hover .exp-card__role,
  .exp-card:hover .exp-card__org,
  .exp-card:hover .exp-card__points li { color: #FFFFFF; }
}
@media (min-width: 900px) {
  .exp-card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 36px; }
}
@media (max-width: 639px) { .exp-card { padding: 22px; } }
.exp-card__role {
  margin-top: 12px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(23px, 1.6vw + 17px, 28px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.exp-card__org { margin-top: 8px; font-size: 17px; line-height: 1.5; color: var(--graphite); }
.exp-card__points { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.exp-card__points li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
/* short dash marker, centred on the first line */
.exp-card__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.775em - 1px);
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* ============================================================
   CASE-STUDY PAGES (work/*.html)
   ============================================================ */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

.case-hero { background: linear-gradient(to bottom, #030818 0%, #070A14 70%, #0B0C0E 100%); color: var(--onink); }
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.case-back:hover { color: #FFFFFF; }
.case-back svg { transition: transform 180ms var(--ease); }
.case-back:hover svg { transform: translateX(-3px); }
.case-hero__title {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(44px, 5.6vw + 12px, 96px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}
.case-hero__title span { display: block; }
.case-hero__title .accent { color: rgba(255, 255, 255, 0.5); }
.case-cover-band { position: relative; }
.case-cover-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--paper); }
.case-cover-band > div { position: relative; z-index: 1; }
.case-hero__cover {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #0B0C0E;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 30px 80px rgba(0, 0, 0, 0.35);
}
.case-hero__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.case-body { background: var(--paper); }
.case-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) {
  .case-layout { grid-template-columns: 224px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .case-aside { position: sticky; top: 104px; }
  .case-aside .case-toc { max-height: calc(100vh - 136px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.case-toc__label { padding-left: 16px; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0.06em; color: var(--graphite); }
.case-toc ol { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
.case-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--graphite);
  text-decoration: none;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.case-toc a > span:first-child { flex: none; min-width: 2ch; font-size: 12px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.case-toc a:hover { background: var(--surface); color: var(--ink); }
.case-toc a.is-active { background: var(--accent); color: #FFFFFF; }
.case-toc-m { border-radius: 16px; background: var(--surface); }
.case-toc-m > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}
.case-toc-m > summary::-webkit-details-marker { display: none; }
.case-toc-m > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms var(--ease);
}
.case-toc-m[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.case-toc-m__count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--graphite); }
.case-toc-m .case-toc { padding: 0 8px 12px; }
.case-toc-m .case-toc ol { margin-top: 0; }
.case-toc-m .case-toc a:hover { background: var(--paper); }
.case-article { min-width: 0; font-size: 17px; line-height: 1.6; color: var(--graphite); }
.case-article .cs-meta { margin-top: 48px; }

/* ============================================================
   LEGAL PAGES (impressum.html, datenschutz.html)
   ============================================================ */
.legal-card { max-width: 920px; padding: 28px 24px; border-radius: 16px; background: linear-gradient(to top right, color-mix(in srgb, var(--ink) 1%, #F5F4F1) 0%, transparent 55%), var(--surface); box-shadow: 0 1px 2px rgba(11, 12, 14, 0.04), 0 8px 24px rgba(11, 12, 14, 0.05); }
@media (min-width: 768px) { .legal-card { padding: 48px 56px; } }
.legal h2 {
  margin-top: 48px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: clamp(20px, 0.8vw + 16px, 24px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.legal > div > h2:first-child,
.legal > div > .legal__note + h2 { margin-top: 0; }
.legal p,
.legal ul,
.legal address { margin-top: 12px; max-width: 68ch; font-size: 17px; font-style: normal; line-height: 1.6; color: var(--graphite); }
.legal ul { padding-left: 22px; list-style: disc; }
.legal li + li { margin-top: 4px; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); }
.legal .legal__note { margin: 0 0 32px; font-size: 15px; }
.legal .todo { padding: 0 4px; border-radius: 3px; background: var(--signal); color: var(--ink); }

@media (hover: none) {
  .btn-ghost--ink:hover:not(:focus-visible) { color: var(--ink); }
  .case-toc a:not(.is-active):hover { background: transparent; color: var(--graphite); }
}

/* next case + footer read as one dark block, like Contact + footer on the home page */
.work-dark.next-case {
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--accent) 5%, transparent) 0%,
      color-mix(in srgb, var(--accent) 2%, transparent) 30%,
      transparent 65%),
    linear-gradient(to bottom, #0B0C0E 0%, #070A14 55%, #030818 100%);
}

/* Experience continues About: gap above the CV buttons = gap below them (mt-10 / lg:mt-12) */
#about > div { padding-bottom: 40px; }
#experience > div { padding-top: 0; }
@media (min-width: 1024px) { #about > div { padding-bottom: 48px; } }