/* ════════════════════════════════════════════════════════════════════
   Lucas Neves — home
   One column. One type scale. Everything else is content.

   Type scale — 6 steps, used everywhere, nothing in between:
     --text-micro    tags · eyebrows · captions · footnotes
     --text-small    nav · buttons · meta · dense list prose
     --text-body     every reading paragraph
     --text-title    card titles · hero lede
     --text-lead     metric numbers
     --text-display  h1 + every section h2

   Layout — one centered column:
     --col        reading width (headings, prose, highlights, work + app cards)
     --col-wide   media width (closing)
     Grids use auto-fit + minmax, so breakpoints are almost never needed.
   ════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* palette (unchanged — shared with case-study pages) */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-soft: #eeeeea;
  --ink: #090909;
  --ink-soft: #4b4b47;
  --ink-muted: #6b6b64; /* ≥4.5:1 on all light surfaces */
  --line: rgba(9, 9, 9, 0.11);
  --line-strong: rgba(9, 9, 9, 0.22);
  --accent: #d4ff1a;
  --accent-soft: rgba(212, 255, 26, 0.2);
  --focus: var(--accent);

  /* type */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --text-micro: 0.75rem;
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-title: 1.125rem;
  --text-lead: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
  --text-display: clamp(1.8rem, 1.35rem + 2.2vw, 2.6rem);

  /* space — one value drives the whole page rhythm */
  --section: clamp(72px, 10vw, 124px);
  --gap: clamp(12px, 1.8vw, 18px);
  --pad: clamp(18px, 2.6vw, 26px);
  --side: clamp(20px, 4vw, 32px);

  /* geometry + elevation — kept feather-light */
  --radius: 20px;
  --radius-sm: 13px;
  --shadow-card: 0 1px 2px rgba(9, 9, 9, 0.03), 0 8px 24px rgba(9, 9, 9, 0.04);
  --shadow-pop: 0 2px 4px rgba(9, 9, 9, 0.04), 0 14px 36px rgba(9, 9, 9, 0.09);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ─────────────────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* clearance for the fixed pill nav */
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 245, 0.82) 40%, var(--bg)),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

/* display voice: quiet sans — the serif survives only as the italic accent */
h1,
h2 {
  font-size: var(--text-display);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 em,
h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

h3 {
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* the two column widths */
.col,
.col-wide {
  margin-inline: auto;
}

.col {
  width: min(100% - 2 * var(--side), 42rem);
}

.col-wide {
  width: min(100% - 2 * var(--side), 64rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  padding: 10px 14px;
  font-size: var(--text-small);
  font-weight: 650;
  transition: transform 180ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── Page rhythm: one flex gap spaces every section ────────────────── */

main {
  display: flex;
  flex-direction: column;
  gap: var(--section);
  padding-bottom: var(--section);
}

section,
.case,
.apps-list li {
  scroll-margin-top: 100px; /* dock + nav jumps land clear of the fixed pill */
}

/* section header: eyebrow + display h2 + one lede */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section-head p {
  max-width: 38rem;
  color: var(--ink-soft);
}

/* ── Pill nav (fixed, centered, no drawer — it fits every screen) ── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 12px var(--side) 0;
  pointer-events: none;
}

.nav-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: min(100%, 24rem);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6px 22px rgba(9, 9, 9, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  pointer-events: auto;
  overflow: hidden;
  transition:
    background 260ms var(--ease),
    box-shadow 260ms var(--ease);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}

.nav-shell.is-open {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 36px rgba(9, 9, 9, 0.1);
}

.site-header.is-compact .nav-shell {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 28px rgba(9, 9, 9, 0.09);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  padding: 0 4px 0 0;
  border-radius: 999px;
}

.brand-avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.brand-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.nav-links {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-trigger {
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 550;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.nav-trigger:hover,
.nav-trigger:focus-visible,
.nav-trigger.is-active,
.nav-trigger[aria-expanded="true"] {
  background: rgba(9, 9, 9, 0.05);
  color: var(--ink);
  outline: none;
}

/* contact stays a quiet text link — the closing carries the loud CTA */
.nav-cta {
  border-radius: 999px;
  color: var(--ink);
  padding: 8px 12px;
  font-size: var(--text-small);
  font-weight: 650;
  transition: background 180ms var(--ease);
}

.nav-cta:hover {
  background: rgba(9, 9, 9, 0.05);
}

.nav-flyout {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  contain: inline-size;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 220ms var(--ease), opacity 160ms var(--ease);
}

.nav-shell.is-open .nav-flyout {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
}

.nav-flyout-clip {
  min-height: 0;
  overflow: hidden;
}

.nav-flyout-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px 6px;
  border-top: 1px solid var(--line);
}

.nav-flyout-panel.is-active {
  display: flex;
}

.nav-flyout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 14px;
  color: var(--ink);
}

.nav-flyout-row:hover,
.nav-flyout-row:focus-visible {
  background: rgba(9, 9, 9, 0.05);
  outline: none;
}

.nav-flyout-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 9px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.nav-flyout-icon.is-arcade {
  background: #5b21b6;
  background-image:
    radial-gradient(circle at 30% 70%, #ecc9a0 1.6px, transparent 1.8px),
    radial-gradient(circle at 70% 70%, #d4ff1a 1.8px, transparent 2px);
  background-size: 100% 100%;
}

.nav-flyout-icon.is-mark {
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: 0.65rem;
  font-weight: 760;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  border-color: transparent;
}

.nav-flyout-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 1px;
}

.nav-flyout-copy strong {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: var(--text-small);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.nav-flyout-copy strong i {
  font-style: normal;
  font-size: 0.85em;
  color: var(--ink-muted);
}

.nav-flyout-copy span {
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 500;
  line-height: 1.3;
}

.nav-flyout-go {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #090909;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(9, 9, 9, 0.08);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.nav-flyout-go::before {
  content: "→";
}

.nav-flyout-row[target="_blank"] .nav-flyout-go::before {
  content: "↗";
}

.nav-flyout-row:hover .nav-flyout-go,
.nav-flyout-row:focus-visible .nav-flyout-go {
  transform: translate(1px, -1px) scale(1.04);
  box-shadow: 0 2px 6px rgba(9, 9, 9, 0.12);
}

@media (max-width: 560px) {
  .nav-trigger {
    padding: 8px 10px;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-inline: 10px;
  }

  .nav-trigger {
    padding: 8px 8px;
    font-size: 0.8125rem;
  }

  .nav-cta {
    padding: 9px 12px;
    font-size: 0.8125rem;
  }
}

/* ── Hero — centered, one idea at a time ──────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: visible;
  padding-top: clamp(108px, 14vh, 150px);
}

.hero > .col {
  display: flex;
  flex-direction: column;
}

.hero-portrait {
  --portrait-move: cubic-bezier(0.22, 1, 0.32, 1);
  position: relative;
  isolation: isolate;
  align-self: center;
  width: 92px;
  height: 112px;
  margin: 0 auto 20px;
  transform: translateY(0);
  transition: transform 160ms var(--portrait-move);
}

/* Invisible pad so the mouse can travel from the photo to the Polaroids.
   Must sit UNDER the icons (::before, not ::after) or it steals clicks. */
.hero-portrait::before {
  content: "";
  position: absolute;
  top: -48px;
  right: -168px;
  bottom: -72px;
  left: -28px;
  z-index: 0;
}

.hero-portrait:hover,
.hero-portrait:focus-within,
.hero-portrait.is-open {
  z-index: 4;
  transform: translateY(-12px);
}

.hero-socials {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-polaroid {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 42px;
  height: 52px;
  padding: 3px 3px 11px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  pointer-events: none;
  box-shadow:
    0 1px 1px rgba(9, 9, 9, 0.04),
    0 10px 22px rgba(9, 9, 9, 0.14);
  transform:
    translate(-50%, -50%)
    translate(var(--x), var(--y))
    rotate(var(--rot));
  transform-origin: 50% 120%;
  transition: transform 480ms var(--portrait-move), box-shadow 320ms var(--portrait-move);
}

.hero-polaroid-shot {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface-soft);
}

.hero-polaroid-shot svg {
  width: 58%;
  height: 58%;
}

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

.hero-portrait:hover .hero-polaroid,
.hero-portrait:focus-within .hero-polaroid,
.hero-portrait.is-open .hero-polaroid {
  z-index: 3;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    translate(var(--x-open), var(--y-open))
    rotate(var(--rot-open));
  transition-duration: 200ms, 200ms;
}

.hero-polaroid:hover .folder-tip,
.hero-polaroid:focus-visible .folder-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hero-avatar {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 92px;
  height: 112px;
  padding: 5px 5px 18px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(9, 9, 9, 0.06);
  box-shadow:
    0 1px 1px rgba(9, 9, 9, 0.04),
    0 10px 22px rgba(9, 9, 9, 0.14);
  pointer-events: none;
}

.hero-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 7px;
  background: var(--surface-soft);
}

.hero-id {
  font-size: var(--text-small);
  font-weight: 650;
}

.hero-status {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 550;
}

/* inline dot so it flows with the text when the line wraps */
.hero-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 6%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: pulse 2.6s var(--ease) infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(212, 255, 26, 0.08);
  }
}

.hero h1 {
  max-width: 11.6em;
  margin: clamp(18px, 2.6vw, 26px) auto 0;
  font-weight: 650;
  line-height: 1.22;
  letter-spacing: -0.035em;
  overflow: visible;
}

.hero-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.18em;
  white-space: nowrap;
  vertical-align: middle;
}

.hero-chip {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  transform-origin: 50% 60%;
  transition: transform 480ms var(--ease);
}

.hero-chip.is-window {
  width: 1.62em;
  height: 1.12em;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.26em;
  background: var(--surface);
  box-shadow: 0 0.06em 0.18em rgba(9, 9, 9, 0.12);
  transform: rotate(-8deg);
}

.hero-chip.is-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 12% 18%;
}

.hero-chip-bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.09em;
  height: 0.24em;
  padding: 0 0.14em;
  background: rgba(247, 247, 245, 0.92);
}

.hero-chip-bar i {
  width: 0.11em;
  height: 0.11em;
  border-radius: 50%;
  background: #d2d2cc;
}

.hero-chip-bar i:first-child {
  background: #ff5f57;
}

.hero-chip-pointer {
  position: absolute;
  right: 14%;
  bottom: 16%;
  z-index: 2;
  width: 0.28em;
  height: 0.28em;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 62%, 52% 62%, 72% 100%, 0 0);
  filter: drop-shadow(0 1px 1px rgba(9, 9, 9, 0.25));
}

.hero-chip.is-phones {
  width: 1.72em;
  height: 1.22em;
}

.hero-chip.is-phones img {
  position: absolute;
  top: 0;
  width: 0.74em;
  height: 1.18em;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(9, 9, 9, 0.12);
  border-radius: 0.22em;
  background: var(--surface);
  box-shadow: 0 0.07em 0.2em rgba(9, 9, 9, 0.16);
  transition: transform 480ms var(--ease);
}

.hero-chip.is-phones img:first-child {
  left: 0.06em;
  transform: rotate(-14deg);
  z-index: 1;
}

.hero-chip.is-phones img:last-child {
  right: 0.04em;
  transform: rotate(12deg);
}

.hero-inline:hover .hero-chip.is-window {
  transform: rotate(-4deg) translateY(-0.06em) scale(1.06);
}

.hero-inline:hover .hero-chip.is-phones img:first-child {
  transform: rotate(-18deg) translateY(-0.05em);
}

.hero-inline:hover .hero-chip.is-phones img:last-child {
  transform: rotate(16deg) translateY(-0.05em);
}

.hero-lede {
  max-width: 30rem;
  margin: 16px auto 0;
  color: var(--ink-muted);
  font-size: var(--text-body);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Dock — two glass folders group the work. Hover to fan the Polaroids. */

.dock {
  --folder-move: cubic-bezier(0.22, 1, 0.32, 1);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 76px;
  margin-top: clamp(36px, 5.5vw, 52px);
  overflow: visible;
}

.folder {
  --folder-w: 152px;
  --folder-h: 94px;
  --tab-h: 18px;
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: var(--folder-w);
  padding-top: 70px;
  transform: translateY(0);
  transform-origin: 50% 80%;
  transition: transform 160ms var(--folder-move);
}

/* Invisible pad covering the fan so hover does not drop in the gaps. */
.folder::before {
  content: "";
  position: absolute;
  left: -52px;
  right: -52px;
  top: -80px;
  bottom: 4px;
  z-index: 0;
}

.folder:hover,
.folder:focus-within,
.folder.is-open {
  z-index: 4;
  transform: translateY(-14px);
}

.folder-stage {
  position: relative;
  width: 100%;
  height: calc(var(--folder-h) + var(--tab-h));
}

.folder-cards {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.folder-card {
  position: absolute;
  left: 54%;
  bottom: 42px;
  z-index: 0;
  width: 54px;
  height: 68px;
  padding: 3.5px 3.5px 13px;
  border-radius: 8px;
  background: #fff;
  pointer-events: none;
  box-shadow:
    0 1px 1px rgba(9, 9, 9, 0.04),
    0 10px 22px rgba(9, 9, 9, 0.14);
  transform:
    translateX(calc(-50% + var(--x)))
    rotate(var(--rot))
    translateY(var(--y));
  transform-origin: 50% 120%;
  transition: transform 480ms var(--folder-move), box-shadow 320ms var(--folder-move);
}

.folder-card-shot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  background: var(--shot, #d8d8d2);
  animation: polaroid-float 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.38s);
}

.folder-card-shot img,
.folder-card-shot svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.folder-card.is-logo .folder-card-shot {
  display: grid;
  place-items: center;
  padding: 6px;
}

.folder-card.is-logo .folder-card-shot img,
.folder-card.is-logo .folder-card-shot svg {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.folder-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 6px);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: var(--text-micro);
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.folder-shell {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: calc(var(--folder-h) + var(--tab-h));
}

.folder-shell:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 22px;
}

.folder-tab {
  position: absolute;
  left: 10px;
  top: 0;
  width: 34%;
  height: calc(var(--tab-h) + 12px);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-bottom: 0;
  border-radius: 12px 20px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    4px 0 0 -3px rgba(9, 9, 9, 0.04);
}

.folder-face {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: var(--folder-h);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -18px 24px rgba(255, 255, 255, 0.18),
    0 12px 28px rgba(9, 9, 9, 0.1);
  backdrop-filter: blur(18px) saturate(1.45);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
}

.folder-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 64%
  );
  transform: translateX(-120%);
  transition: transform 200ms var(--folder-move);
  pointer-events: none;
}

.folder-sticker {
  position: absolute;
  filter: drop-shadow(0 3px 6px rgba(9, 9, 9, 0.12));
  transition: transform 180ms var(--folder-move);
}

.folder-sticker svg {
  display: block;
  width: 100%;
  height: 100%;
}

.folder-sticker.is-stamp {
  top: 16px;
  left: 14px;
  width: 28px;
  height: 28px;
  transform: rotate(-9deg);
}

.folder-sticker.is-mark {
  top: 22px;
  right: 16px;
  width: 22px;
  height: 22px;
  transform: rotate(11deg);
}

.folder-ridges {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 14px;
  height: 9px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(9, 9, 9, 0.1) 0 1.5px,
    transparent 1.5px 4.5px
  );
  opacity: 0.7;
}

.folder-caption {
  display: block;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-align: center;
}

.folder:hover .folder-card-shot,
.folder:focus-within .folder-card-shot,
.folder.is-open .folder-card-shot {
  animation: none;
}

.folder:hover .folder-card,
.folder:focus-within .folder-card,
.folder.is-open .folder-card {
  z-index: 1;
  pointer-events: auto;
  transform:
    translateX(calc(-50% + var(--x-open)))
    rotate(var(--rot-open))
    translateY(var(--y-open));
  box-shadow:
    0 2px 4px rgba(9, 9, 9, 0.06),
    0 18px 32px rgba(9, 9, 9, 0.16);
  transition-duration: 200ms, 200ms;
}

.folder-card:hover .folder-tip,
.folder-card:focus-visible .folder-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.folder:hover .folder-face::after,
.folder:focus-within .folder-face::after,
.folder.is-open .folder-face::after {
  transform: translateX(120%);
}

.folder:hover .folder-sticker.is-stamp,
.folder:focus-within .folder-sticker.is-stamp,
.folder.is-open .folder-sticker.is-stamp {
  transform: rotate(-14deg) scale(1.06);
}

.folder:hover .folder-sticker.is-mark,
.folder:focus-within .folder-sticker.is-mark,
.folder.is-open .folder-sticker.is-mark {
  transform: rotate(16deg) scale(1.08);
}

@keyframes polaroid-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@media (hover: none) {
  .folder-card-shot {
    animation: none;
  }
}

@media (max-width: 560px) {
  .dock {
    gap: 40px;
  }

  .folder {
    --folder-w: 124px;
    --folder-h: 80px;
    --tab-h: 15px;
    padding-top: 46px;
  }

  .folder-card {
    width: 44px;
    height: 56px;
    padding: 3px 3px 9px;
    bottom: 36px;
  }
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 17px;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  transition: transform 180ms var(--ease), background 180ms var(--ease),
    border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}

.button:active {
  transform: scale(0.97);
}

.button-primary {
  background: var(--ink);
  color: var(--surface);
  box-shadow: 0 8px 22px rgba(9, 9, 9, 0.14);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: #222222;
}

.button-secondary {
  background: var(--surface);
  border: 1px solid var(--line-strong);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: var(--ink);
}

/* ── Metrics — three highlight cards ──────────────────────────────── */

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease),
    border-color 300ms var(--ease);
}

.metric:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  border-color: var(--line-strong);
}

.metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-badge b {
  font-family: var(--font-display);
  font-size: 0.95em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}

.metric span {
  display: block;
  max-width: 28ch;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.45;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .metrics {
    grid-template-columns: 1fr;
  }
}

/* ── Work — one card component for every case ─────────────────────── */

/* every case is its own wrapper in the reading column — cover beside text
   on desktop, cover on top below 720px */
.case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease),
    border-color 300ms var(--ease);
}

.case:hover,
.case:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-pop);
  border-color: var(--line-strong);
}

@media (max-width: 720px) {
  .case {
    grid-template-columns: 1fr;
  }

  .case-media.is-featured-media {
    min-height: 280px;
  }

  .case-featured-phone-2 {
    transform: rotate(7deg) translate(38%, 10%);
  }
}

.case-media {
  --tint: 84 80% 55%;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 32vw, 330px);
  height: 100%;
  overflow: hidden;
  padding: 28px 22px 24px;
  background:
    radial-gradient(120% 90% at 80% 0%, hsl(var(--tint) / 0.28), transparent 56%),
    linear-gradient(165deg, hsl(var(--tint) / 0.2), var(--surface-soft) 72%);
}

.case-media.is-fill {
  padding: 0;
}

.case-media.is-fill img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 700ms var(--ease);
}

.case-media.is-phone img:not(.case-featured-phone-2) {
  width: min(56%, 168px);
  height: 86%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid #fff;
  border-radius: 22px;
  background: #111;
  box-shadow: 0 14px 36px rgba(9, 9, 9, 0.16);
  transform: rotate(-6deg);
  transition: transform 500ms var(--ease);
}

.case-window {
  display: flex;
  flex-direction: column;
  width: 88%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(9, 9, 9, 0.12);
  transform: rotate(4deg);
  transition: transform 500ms var(--ease);
}

.case-window-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.case-window-bar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d2d2cc;
}

.case-window-bar i:first-child {
  background: #ff5f57;
}

.case-window img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: top left;
}

.case:hover .case-media.is-phone:not(.is-featured-media) img {
  transform: rotate(-2deg) translateY(-6px) scale(1.03);
}

.case:hover .case-window {
  transform: rotate(1deg) translateY(-6px) scale(1.03);
}

.case:hover .case-media.is-fill img {
  transform: scale(1.04);
}

/* "open" affordance that answers hover */
.case-go {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  font-size: var(--text-small);
  font-weight: 700;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}

.case:hover .case-go,
.case:focus-visible .case-go {
  opacity: 1;
  transform: translateY(0);
}

.case-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: var(--pad);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--text-small);
}

.case-meta img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.case-meta .case-name {
  font-weight: 650;
}

.case-meta .case-years {
  color: var(--ink-muted);
}

.case-now {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  font-size: var(--text-micro);
  font-weight: 700;
}

.case-featured {
  margin-bottom: var(--gap);
}

.case-featured .case-body {
  gap: 14px;
  padding: clamp(22px, 3.2vw, 34px);
}

.case-featured h3 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.4vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.case-featured-label {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.case-media.is-featured-media {
  min-height: clamp(280px, 38vw, 400px);
  padding: 32px 28px 28px;
}

.case-media.is-featured-media > img:first-of-type {
  width: min(48%, 176px);
  z-index: 1;
  transform: rotate(-8deg) translateX(-10px);
}

.case-featured-phone-2 {
  position: absolute;
  width: min(44%, 158px);
  height: 78%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid #fff;
  border-radius: 22px;
  background: #111;
  box-shadow: 0 14px 36px rgba(9, 9, 9, 0.14);
  transform: rotate(7deg) translate(42%, 8%);
  transition: transform 500ms var(--ease);
  z-index: 0;
}

.case-featured:hover .case-media.is-featured-media > img:first-of-type {
  transform: rotate(-3deg) translate(-6px, -8px) scale(1.03);
}

.case-featured:hover .case-featured-phone-2 {
  transform: rotate(3deg) translate(42%, 2%) scale(1.03);
}

.case p {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.case-tags span {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 650;
}


/* ── About bridge ─────────────────────────────────────────────────── */

.about-bridge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.about-bridge h2 {
  max-width: 22ch;
}

.about-bridge > p:last-child {
  max-width: 38rem;
  color: var(--ink-soft);
}


/* ── Apps — App Store-style compact list ──────────────────────────── */

.apps-list {
  list-style: none;
  margin-block: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.apps-list li {
  display: block;
  margin: 0;
  padding: 0;
  transition: background 180ms var(--ease);
}

.apps-list li + li {
  border-top: 1px solid var(--line);
}

.app-store-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: inherit;
  transition: background 180ms var(--ease);
}

.apps-list li:hover,
.apps-list li:focus-within,
.app-store-row:hover,
.app-store-row:focus-visible {
  background: var(--surface-soft);
}

.app-store-row > img,
.app-store-row > svg {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
  object-fit: cover;
}

.app-store-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.app-store-copy strong {
  font-size: var(--text-body);
  font-weight: 650;
  line-height: 1.25;
}

.app-store-copy span {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-store-get {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.apps-list li:hover .app-store-get,
.apps-list li:focus-within .app-store-get,
.app-store-row:hover .app-store-get,
.app-store-row:focus-visible .app-store-get {
  background: var(--accent);
  color: #090909;
}


/* ── GitHub activity — live public contribution calendar ─────────── */

.github-card {
  padding: var(--pad);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.github-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.github-total {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.github-total strong {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.github-total span,
.github-status,
.github-legend,
.github-months,
.github-weekdays {
  color: var(--ink-muted);
  font-size: var(--text-micro);
}

.github-profile-link {
  display: inline-flex;
  min-height: 44px;
  flex-shrink: 0;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}

.github-profile-link:hover,
.github-profile-link:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.github-profile-link svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.github-status {
  margin: 0;
  line-height: 1.5;
}

.github-status[hidden],
.github-calendar-scroll[hidden] {
  display: none;
}

.github-card.is-error .github-status {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.github-calendar-scroll {
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.github-calendar-plot {
  width: max-content;
  min-width: 612px;
}

.github-months {
  position: relative;
  width: 580px;
  height: 20px;
  margin-left: 30px;
  line-height: 1;
}

.github-months span {
  position: absolute;
  top: 0;
  white-space: nowrap;
}

.github-months span:last-child {
  transform: translateX(-100%);
}

.github-chart-layout {
  display: grid;
  grid-template-columns: 22px auto;
  gap: 8px;
}

.github-weekdays {
  display: grid;
  grid-template-rows: repeat(7, 8px);
  row-gap: 3px;
  line-height: 8px;
}

.github-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 8px;
  grid-template-rows: repeat(7, 8px);
  gap: 3px;
}

.github-day,
.github-legend i {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(9, 9, 9, 0.045);
  border-radius: 2px;
  background: rgba(9, 9, 9, 0.06);
}

.github-day[data-level="1"],
.github-legend i[data-level="1"] {
  background: rgba(9, 9, 9, 0.18);
}

.github-day[data-level="2"],
.github-legend i[data-level="2"] {
  background: rgba(9, 9, 9, 0.38);
}

.github-day[data-level="3"],
.github-legend i[data-level="3"] {
  background: rgba(9, 9, 9, 0.66);
}

.github-day[data-level="4"],
.github-legend i[data-level="4"] {
  background: #090909;
}

.github-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 14px;
}

@media (max-width: 520px) {
  .github-card-head {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .github-profile-link {
    align-self: flex-start;
  }
}


/* ── Chart — the four disciplines, drawn not claimed ──────────────── */

.chart-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: var(--pad);
}

.chart-card > p {
  margin-top: 8px;
  max-width: 34rem;
  color: var(--ink-soft);
}

.strategy-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 2vw, 18px);
  min-height: 280px;
  margin-top: clamp(24px, 3.5vw, 32px);
  padding-top: 8px;
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 55px,
    rgba(9, 9, 9, 0.07) 56px,
    transparent 57px
  );
}

.strategy-bar {
  display: flex;
  min-height: var(--value);
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px 16px 8px 8px;
  background: rgba(9, 9, 9, 0.07);
  padding: 12px 8px;
  text-align: center;
  transition: min-height 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* bars grow when the chart scrolls into view */
.reveal-bars:not(.is-visible) .strategy-bar {
  min-height: 52px;
}

.strategy-bar.is-highlight {
  background: var(--accent);
}

.strategy-bar.is-foundation {
  border: 1px solid rgba(9, 9, 9, 0.06);
  background: rgba(9, 9, 9, 0.05);
}

.strategy-bar-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 750;
  line-height: 1.15;
}

.strategy-bar-note {
  display: block;
  color: var(--ink-soft);
  font-size: var(--text-micro);
  font-weight: 550;
  line-height: 1.3;
}

.chart-foot {
  margin-top: 14px;
  color: var(--ink-muted);
  font-size: var(--text-micro);
}

@media (max-width: 520px) {
  .strategy-bar-note {
    display: none; /* labels stay, detail returns on wider screens */
  }
}

/* ── Method ───────────────────────────────────────────────────────── */

.method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3.2vw, 32px);
}

/* method: no boxes — icon, number, and text on the page itself */
.method-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.method-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.method-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  transition: background 260ms var(--ease), border-color 260ms var(--ease);
}

.method-icon svg {
  width: 20px;
  height: 20px;
}

.method-item:hover .method-icon {
  background: var(--accent);
  border-color: var(--accent);
}

.method-index {
  color: var(--ink-muted);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.method-item p {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.55;
}

/* ── Mobile systems — copy, then the phone itself ─────────────────── */

.systems {
  text-align: center;
}

.systems .section-head {
  align-items: center;
  text-align: center;
}

.systems-phone {
  width: min(100%, 320px);
  margin-inline: auto;
}

.systems-phone img {
  width: 100%;
  border-radius: 34px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}

.systems-cta {
  margin-top: clamp(24px, 3.5vw, 32px);
}

/* ── Closing ──────────────────────────────────────────────────────── */

.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: clamp(40px, 6vw, 64px);
}

.closing h2 {
  max-width: 24ch;
  margin: 14px auto 0;
}

.closing-lede {
  max-width: 36rem;
  margin: 14px auto 0;
  color: var(--ink-soft);
  font-size: var(--text-body);
  line-height: 1.55;
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(26px, 4vw, 36px);
}

.closing-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: clamp(24px, 4vw, 32px);
  border-top: 1px solid var(--line);
  width: min(100% - 2 * var(--side), 42rem);
}

.closing-meta .brand-link {
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 24px rgba(9, 9, 9, 0.07);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 650;
  transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}

.closing-meta .brand-link:hover {
  box-shadow: 0 10px 28px rgba(9, 9, 9, 0.1);
  transform: translateY(-1px);
}

.closing-meta > span {
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* ── Micro-interactions shared plumbing ───────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* light stagger inside grids — no JS required */
.metrics > .reveal:nth-child(2),
.method-grid > .reveal:nth-child(2) {
  --d: 70ms;
}

.metrics > .reveal:nth-child(3),
.method-grid > .reveal:nth-child(3) {
  --d: 140ms;
}

.metrics > .reveal:nth-child(4) {
  --d: 210ms;
}

[data-tilt] {
  will-change: transform;
  transition: transform 200ms var(--ease);
}

.magnetic {
  will-change: transform;
}

/* email tooltip with copy action (built by home.js) */
.email-tip {
  position: fixed;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 36px rgba(9, 9, 9, 0.2);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}

.email-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.email-tip-copy {
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  padding: 6px 11px;
  font-family: inherit;
  font-size: var(--text-micro);
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}

.email-tip-copy:hover,
.email-tip-copy:focus-visible {
  background: #222222;
  outline: none;
}

.email-tip-copy.is-copied {
  background: var(--accent);
  color: var(--ink);
}

/* ── Accessibility ────────────────────────────────────────────────── */

/* outlines follow each element's own border-radius */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.case:focus-visible {
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal,
  .reveal-bars:not(.is-visible) .strategy-bar {
    opacity: 1;
    transform: none;
    min-height: var(--value, auto);
  }

  .folder-card-shot {
    animation: none !important;
  }
}

/* ── Dark mode — follows the system setting, same six-step scale ─── */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121214;
    --surface: #1a1a1e;
    --surface-soft: #232328;
    --ink: #f1f1ec;
    --ink-soft: #b7b7af;
    --ink-muted: #93938c; /* ≥4.5:1 on dark surfaces */
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.24);
    --accent-soft: rgba(212, 255, 26, 0.14);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.3), 0 20px 48px rgba(0, 0, 0, 0.5);
  }

  body {
    background:
      linear-gradient(180deg, #17171b, #131315 40%, var(--bg)),
      var(--bg);
  }

  ::selection {
    background: var(--accent);
    color: #090909;
  }

  .nav-shell {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(26, 26, 30, 0.7);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  }

  .site-header.is-compact .nav-shell {
    background: rgba(26, 26, 30, 0.88);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  }

  .nav-trigger:hover,
  .nav-trigger:focus-visible,
  .nav-trigger.is-active,
  .nav-trigger[aria-expanded="true"],
  .nav-cta:hover,
  .nav-flyout-row:hover,
  .nav-flyout-row:focus-visible {
    background: rgba(255, 255, 255, 0.07);
  }

  .nav-shell.is-open {
    background: rgba(26, 26, 30, 0.94);
  }

  .closing-meta .brand-link {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  /* ink buttons are near-white here — hover toward grey, not #222 */
  .button-primary:hover,
  .button-primary:focus-visible,
  .email-tip-copy:hover,
  .email-tip-copy:focus-visible {
    background: #d9d9d2;
  }

  .button-primary {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  }

  .folder-tab,
  .folder-face {
    border-color: rgba(255, 255, 255, 0.16);
  }

  .folder-tab {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .folder-face {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -18px 24px rgba(255, 255, 255, 0.04),
      0 16px 32px rgba(0, 0, 0, 0.4);
  }

  .hero-chip.is-window,
  .hero-chip.is-phones img {
    border-color: rgba(255, 255, 255, 0.14);
  }

  .hero-chip-bar {
    background: rgba(32, 32, 36, 0.94);
  }

  .hero-chip-bar i {
    background: #5a5a60;
  }

  .case-media.is-phone img:not(.case-featured-phone-2),
  .case-featured-phone-2,
  .case-window {
    border-color: rgba(255, 255, 255, 0.14);
  }

  .case-window-bar {
    background: rgba(32, 32, 36, 0.94);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .case-window-bar i {
    background: #5a5a60;
  }

  .folder-face::after {
    background: linear-gradient(
      115deg,
      transparent 28%,
      rgba(255, 255, 255, 0.18) 48%,
      transparent 64%
    );
  }

  .folder-ridges {
    background: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.18) 0 1.5px,
      transparent 1.5px 4.5px
    );
  }

  .folder-card,
  .hero-polaroid,
  .hero-avatar {
    background: #f4f4f0;
  }

  /* raster marks that are dark-on-transparent get a light plate to stay legible */
  .folder-card img[src*="attaboy"],
  .case-meta img,
  .app-store-row > img {
    background: #f7f7f5;
  }

  .case-go {
    background: rgba(20, 20, 24, 0.92);
    color: var(--ink);
  }

  .metric {
    background: var(--surface);
  }

  .github-day,
  .github-legend i {
    border-color: rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.06);
  }

  .github-day[data-level="1"],
  .github-legend i[data-level="1"] {
    background: rgba(255, 255, 255, 0.18);
  }

  .github-day[data-level="2"],
  .github-legend i[data-level="2"] {
    background: rgba(255, 255, 255, 0.38);
  }

  .github-day[data-level="3"],
  .github-legend i[data-level="3"] {
    background: rgba(255, 255, 255, 0.66);
  }

  .github-day[data-level="4"],
  .github-legend i[data-level="4"] {
    background: #f1f1ec;
  }

  .strategy-bars {
    background-image: repeating-linear-gradient(
      to top,
      transparent 0,
      transparent 55px,
      rgba(255, 255, 255, 0.07) 56px,
      transparent 57px
    );
  }

  .strategy-bar {
    background: rgba(255, 255, 255, 0.08);
  }

  .strategy-bar.is-foundation {
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.06);
  }

  /* anything sitting on the lime accent keeps dark text */
  .strategy-bar.is-highlight {
    --ink: #090909;
    --ink-soft: rgba(9, 9, 9, 0.72);
    color: #090909;
  }

  .case-now,
  .method-item:hover .method-icon {
    color: #090909;
  }

  .systems-phone img {
    background: #f7f7f5;
  }
}

/* ── Work unlock dialog ───────────────────────────────────────────── */

body.is-work-dialog-open {
  overflow: hidden;
}

.work-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.work-dialog[hidden] {
  display: none !important;
}

.work-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(247, 247, 245, 0.52);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.work-dialog-card {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.work-dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.work-dialog-close svg {
  width: 16px;
  height: 16px;
}

.work-dialog-close:hover,
.work-dialog-close:focus-visible {
  background: var(--surface-soft);
}

.work-dialog-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: var(--text-small);
  font-weight: 650;
}

.work-dialog-brand img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.work-dialog-card h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.work-dialog-copy {
  color: var(--ink-soft);
}

.work-dialog-copy a {
  font-weight: 650;
  text-underline-offset: 3px;
  text-decoration: underline;
}

.work-dialog-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}

.work-dialog-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: 650;
}

.work-dialog-field input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.4;
}

.work-dialog-password {
  position: relative;
  display: block;
}

.work-dialog-password input {
  padding-right: 44px;
}

.work-dialog-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-muted);
  transform: translateY(-50%);
  cursor: pointer;
}

.work-dialog-password-toggle:hover,
.work-dialog-password-toggle:focus-visible {
  color: var(--ink);
  background: rgba(9, 9, 9, 0.05);
}

.work-dialog-password-icon {
  width: 18px;
  height: 18px;
}

.work-dialog-password-toggle[aria-pressed="true"] .work-dialog-password-icon--show {
  display: none;
}

.work-dialog-password-toggle[aria-pressed="true"] .work-dialog-password-icon--hide {
  display: block;
}

.work-dialog-password-toggle[aria-pressed="false"] .work-dialog-password-icon--hide {
  display: none;
}

.work-dialog-field input:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.work-dialog-error {
  margin: 0;
  color: #8a1f1f;
  font-size: var(--text-small);
  font-weight: 600;
}

.work-dialog-login {
  border: 0;
  background: var(--accent);
  color: #090909;
  box-shadow: 0 8px 22px rgba(9, 9, 9, 0.08);
  cursor: pointer;
}

.work-dialog-login:hover,
.work-dialog-login:focus-visible {
  background: #c6ef12;
}

@media (prefers-reduced-motion: reduce) {
  .work-dialog-backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247, 247, 245, 0.88);
  }
}

@media (prefers-color-scheme: dark) {
  .work-dialog-backdrop {
    background: rgba(18, 18, 20, 0.58);
  }

  .work-dialog-error {
    color: #ffb4b4;
  }
}

/* ── Print ────────────────────────────────────────────────────────── */

@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .site-header,
  .folder-tip,
  .email-tip,
  .case-go {
    display: none !important;
  }

  .case,
  .apps-list,
  .method-item,
  .work-dialog {
    break-inside: avoid;
  }

  .work-dialog {
    display: none !important;
  }
}