@font-face {
  font-family: 'Lennon';
  src: url('../TAYLennonRegular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --peach: #FFD5BB;
  --pink: #FFBAEC;
  --orange: #E15304;
  --lavender: #9DA5C5;
  --burgundy: #410016;
  --olive: #775D0F;

  --bg-cream: #FAF8F5;
  --bg-warm: #FFF5EE;
  --text-dark: #2C2B28;
  --text-light: #6B6862;
  --text-muted: #A8A49C;
  --white: #FFFFFF;
  --divider: rgba(44, 43, 40, 0.1);
  --ink: #1A1917;

  --font-primary: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'DM Serif Display', serif;
}

html {
  background: var(--bg-cream);
  color: var(--text-dark);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
}

html.lenis, html.lenis body { height: auto; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }

::selection {
  background: var(--orange);
  color: var(--white);
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 24px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s ease, padding 0.4s ease, border-color 0.5s ease;
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 48px;
  border-bottom-color: rgba(0,0,0,0.06);
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dark);
  opacity: 0;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
  opacity: 0;
}

.nav-right a {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s;
  cursor: pointer;
}

.nav-right a:not(.nav-cta):hover { color: var(--text-dark); }

.nav-cta {
  background: var(--orange);
  color: var(--white) !important;
  padding: 10px 24px;
  border-radius: 50px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background 0.3s;
  margin-left: 8px;
}

.nav-cta:hover { background: #c94800; }

.nav-connect-wrap {
  position: relative;
  margin-left: 8px;
}

.connect-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 8px;
  min-width: 200px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 12px 32px rgba(44, 43, 40, 0.1);
  z-index: 101;
}

.connect-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.connect-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dark) !important;
  transition: background 0.2s;
}

.connect-dropdown a:hover {
  background: var(--bg-warm);
}

.connect-dropdown a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

.connect-dropdown a:hover svg {
  opacity: 1;
}

.connect-dropdown-divider {
  height: 1px;
  background: var(--divider);
  margin: 4px 8px;
}

/* ============ HERO INTRO ============ */
.hero-intro {
  padding: 160px 48px 56px;
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg-cream);
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}

.hero-statement {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  max-width: 52ch;
}

@media (max-width: 700px) {
  .hero-intro { padding: 120px 24px 40px; }
}

/* ============ WORK GRID ============ */
#work-grid {
  padding: 8px 8px 8px;
  background: var(--bg-cream);
  min-height: 100vh;
}

.grid-inner {
  columns: 3;
  column-gap: 8px;
  max-width: 1600px;
  margin: 0 auto;
}

.work-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  break-inside: avoid;
  margin-bottom: 8px;
}

.tile-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-warm);
  aspect-ratio: 4 / 3;
}

.tile-media img,
.tile-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tile-media.contain img,
.tile-media.contain video {
  object-fit: contain;
  padding: 5%;
}

.work-tile:hover .tile-media img,
.work-tile:hover .tile-media video {
  transform: scale(1.02);
}

/* Pre-cropped images keep their base zoom and add a little more on hover */
.tile-media img.zoom-crop { transform: scale(1.17); }
.work-tile:hover .tile-media img.zoom-crop { transform: scale(1.21); }

.tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-tile:hover .tile-placeholder { transform: scale(1.02); }

.ph-name {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-align: center;
  padding: 0 24px;
}

.ph-note {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;
}

.tile-caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 4px 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.work-tile:hover .tile-caption {
  opacity: 1;
  transform: translateY(0);
}

.tc-name {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-dark);
}

.tc-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Pills overlaid on the tile photo · revealed on hover */
.tile-overlay {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-tile:hover .tile-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* When the card's bottom is below the fold, pin pills to the top-left */
.work-tile.pills-top .tile-overlay {
  top: 14px;
  bottom: auto;
}

/* Mobile: keep tile labels pinned at the bottom (no top-jump on scroll) */
@media (max-width: 700px) {
  .work-tile.pills-top .tile-overlay {
    top: auto;
    bottom: 14px;
  }
}

.tile-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}

.tile-pill-name {
  padding: 7px 13px;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.tile-pill-tag {
  padding: 5px 11px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5F594F;
  border-radius: 10px;
}

/* Touch devices have no hover · keep pills visible */
@media (hover: none) {
  .tile-overlay,
  .playground-card-info { opacity: 1; transform: none; }
}

@media (max-width: 1024px) {
  .grid-inner { columns: 2; }
}

@media (max-width: 700px) {
  #work-grid { padding-top: 8px; }
  .grid-inner { columns: 1; }
  .tile-overlay { opacity: 1; transform: none; }
}

/* ============ REVEAL ANIMATION ============ */
.reveal-up {
  opacity: 0.25;
  transform: translateY(16px);
}

/* ============ SECTION SHARED ============ */
.section-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}

.section-heading {
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

/* ============ INFO OVERLAY ============ */
.info-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 140px 48px 100px;
}

.info-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 56px;
  align-items: start;
}

.info-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(44,43,40,0.08);
}

.info-photo img { width: 100%; height: 100%; object-fit: cover; }

.info-lede {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-bottom: 28px;
}

.info-body {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--text-light);
  margin-bottom: 1.2rem;
}

.info-meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 2.2;
  margin-top: 32px;
}

.info-links { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

.info-links a {
  padding: 12px 28px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.info-links a.primary { background: var(--orange); color: var(--white); }
.info-links a.primary:hover { background: #c94700; }
.info-links a.outline { border: 1px solid rgba(44,43,40,0.2); color: var(--text-dark); }
.info-links a.outline:hover { background: rgba(44,43,40,0.06); }

@media (max-width: 700px) {
  .info-inner { padding: 110px 24px 80px; }
  .info-grid { grid-template-columns: 1fr; gap: 32px; }
  .info-photo { width: 120px; height: 120px; }
}

.playground-page {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 200;
}

.playground-page.active {
  opacity: 1;
  pointer-events: auto;
}

.playground-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 201;
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.playground-topnav .pg-logo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dark);
  cursor: pointer;
}

.pg-topnav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.pg-topnav-right a {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s;
  cursor: pointer;
}

.pg-topnav-right a:hover { color: var(--text-dark); }
.pg-topnav-right a.active { color: var(--text-dark); }

@media (max-width: 768px) {
  .playground-topnav { padding: 14px 24px; }
  .pg-topnav-right { gap: 18px; }
}

/* Tennis card in masonry */
.playground-card.tennis-card {
  cursor: none;
}

.tennis-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: #C75A4A;
  overflow: hidden;
}

.tennis-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.tennis-score {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
}

.tennis-pause {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.tennis-pause:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.4);
}

.tennis-pause svg {
  width: 10px;
  height: 10px;
  fill: rgba(255,255,255,0.8);
}

/* Fullscreen tennis overlay */
.tennis-fullscreen-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #C75A4A;
  z-index: 200;
  display: none;
  cursor: none;
}

.tennis-fullscreen-overlay.active {
  display: block;
}

.tennis-fullscreen-overlay canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.tennis-fullscreen-overlay .tennis-score {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  top: 24px;
}

.tennis-fullscreen-overlay .tennis-pause {
  width: 36px;
  height: 36px;
  top: 24px;
  right: 48px;
}

.tennis-fullscreen-overlay .tennis-pause svg {
  width: 14px;
  height: 14px;
}

.tennis-close {
  position: absolute;
  top: 24px;
  left: 48px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}

.tennis-close:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.5);
}

.playground-body {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 8px 120px;
}

.playground-grid {
  columns: 3;
  column-gap: 8px;
}

.playground-card {
  break-inside: avoid;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  background: #f0efec;
}

.playground-card-image {
  width: 100%;
  display: block;
  overflow: hidden;
}

.playground-card-image img,
.playground-card-image video {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.playground-card:hover .playground-card-image img,
.playground-card:hover .playground-card-image video {
  transform: scale(1.03);
}

.playground-card-image.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.playground-card-image.placeholder span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
}

/* Playground captions as frosted pills, revealed on hover */
.playground-card-info {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.playground-card:hover .playground-card-info {
  opacity: 1;
  transform: translateY(0);
}

/* When the card's bottom is below the fold, pin pills to the top-left */
.playground-card.pills-top .playground-card-info {
  top: 14px;
  bottom: auto;
}

/* Mobile: keep playground labels pinned at the bottom (no top-jump on scroll) */
@media (max-width: 700px) {
  .playground-card.pills-top .playground-card-info {
    top: auto;
    bottom: 14px;
  }
}

.playground-card-title,
.playground-card-tag {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
}

.playground-card-title {
  padding: 7px 13px;
  border-radius: 12px;
  font-family: var(--font-primary);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-dark);
}

.playground-card-tag {
  padding: 5px 11px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5F594F;
}

/* ---- Photography tile · stack of prints that toss out on hover ---- */
.photo-toss-card .photo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(155deg, #F4EDE5 0%, #E9DDD0 100%);
  /* contain the prints in their own stacking layer so none can ever
     climb above the Photography / Stills pills */
  isolation: isolate;
}
.photo-toss-card .photo-deck {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-toss-card .photo-print {
  position: absolute;
  width: 46%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: 5px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(44, 43, 40, 0.28);
  transform: rotate(var(--rest, 0deg));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 0.4s ease;
  will-change: transform;
}
.photo-toss-card .photo-print.portrait {
  width: 33%;
  aspect-ratio: 2 / 3;
}
/* on hover the deck spills — pill (.playground-card-info, z-index 2) stays above */
.photo-toss-card:hover .photo-print {
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg));
  box-shadow: 0 16px 34px rgba(44, 43, 40, 0.34);
}
/* Photography + Stills pills behave like every other card (hidden at rest,
   fade in on hover) — but always sit above the spilling prints */
.photo-toss-card .playground-card-info {
  z-index: 5;
}
@media (hover: none) {
  /* touch: show a gentle resting fan, no toss */
  .photo-toss-card .photo-print { transform: rotate(var(--rest, 0deg)); }
}

/* ============ PHOTOGRAPHY GALLERY PAGE ============ */
.photo-gallery-page {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 260;
}
.photo-gallery-page.active { opacity: 1; pointer-events: auto; }

.pgal-topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 261;
  padding: 16px 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pgal-back {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dark);
  cursor: pointer;
  padding: 8px 20px;
  border: 1px solid var(--divider);
  border-radius: 50px;
  transition: all 0.3s ease;
}
.pgal-back:hover { color: var(--orange); border-color: var(--orange); }
.pgal-title {
  margin-left: 8px;
  font-family: var(--font-primary);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dark);
}
.pgal-tag {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pgal-body {
  max-width: 1400px;
  margin: 0 auto;
  padding: 110px 16px 100px;
}
.pgal-grid { columns: 3; column-gap: 12px; }
.pgal-item {
  break-inside: avoid;
  margin: 0 0 12px;
  border-radius: 4px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-warm);
}
.pgal-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pgal-item:hover img { transform: scale(1.03); }

@media (max-width: 900px) { .pgal-grid { columns: 2; } }
@media (max-width: 600px) {
  .pgal-grid { columns: 1; }
  .pgal-topnav { padding: 14px 24px; }
  .pgal-body { padding: 96px 12px 80px; }
}

/* lightbox */
.pgal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 270;
  background: rgba(26, 24, 21, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
}
.pgal-lightbox.active { display: flex; }
.pgal-lb-img {
  max-width: 88vw;
  max-height: 86vh;
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  user-select: none;
}
.pgal-lb-close {
  position: absolute;
  top: 24px; right: 32px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.pgal-lb-close:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.pgal-lb-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease;
}
.pgal-lb-nav:hover { background: rgba(255,255,255,0.22); }
.pgal-lb-nav.prev { left: 32px; }
.pgal-lb-nav.next { right: 32px; }
.pgal-lb-count {
  position: absolute;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 600px) {
  .pgal-lb-nav { width: 40px; height: 40px; }
  .pgal-lb-nav.prev { left: 12px; }
  .pgal-lb-nav.next { right: 12px; }
}

@media (max-width: 900px) {
  .playground-grid { columns: 2; }
}

@media (max-width: 600px) {
  .playground-grid { columns: 1; }
  .playground-body { padding: 32px 8px 80px; }
  .playground-card-info { opacity: 1; transform: translateY(0); }
}

/* ============ CASE STUDY PAGES ============ */
.case-study-page {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg-cream);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 200;
}

.case-study-page.active {
  opacity: 1;
  pointer-events: auto;
}

.cs-nav {
  position: fixed;
  top: 24px;
  left: 48px;
  z-index: 201;
}

.cs-nav button, .cs-nav .cs-back {text-decoration:none;
  background: var(--bg-cream);
  border: 1px solid var(--divider);
  padding: 10px 24px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dark);
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-nav button:hover, .cs-nav .cs-back:hover {
  color: var(--orange);
  border-color: var(--orange);
}

.cs-header {
  padding: 140px 48px 28px;
  max-width: 800px;
  margin: 0 auto;
}

.cs-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}

.cs-title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 16px;
}

.cs-subtitle {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-light);
  max-width: 640px;
}

.cs-meta-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 40px;
  padding: 20px 0 16px;
  margin-top: 22px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

/* Two lines, not three. Row 1 is the four short fields (Role, Type, Duration,
   Tools). Row 2 is the two long ones (Methods, Deliverables) at half width
   each. Keep the HTML in that order or the rows break. */
.cs-meta-item.half { grid-column: span 2; }
.cs-meta-item.wide { grid-column: 1 / -1; }

/* a field I could not fill from the existing copy */
.cs-meta-value.todo { color: #B4ADA3; font-style: italic; }

@media (max-width: 700px) {
  .cs-meta-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
  .cs-meta-item.half { grid-column: 1 / -1; }
}

.cs-meta-item { display: flex; flex-direction: column; gap: 6px; }

.cs-meta-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-meta-value {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-dark);
}

.cs-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 34px 48px 100px;
}

.cs-section { margin-bottom: 64px; }

.cs-section-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--divider);
}

.cs-tldr {
  border-left: 2px solid var(--orange);
  padding: 4px 0 6px 32px;
  margin-bottom: 52px;
}

.cs-tldr-row { padding: 14px 0; }
.cs-tldr-row:first-of-type { padding-top: 0; }
.cs-tldr-row:last-of-type { padding-bottom: 0; }

.cs-tldr-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 7px;
}

.cs-tldr-text {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-dark);
}

.cs-tldr-text strong { font-weight: 600; }

@media (max-width: 640px) {
  .cs-tldr { padding-left: 24px; }
}


.cs-section p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-light);
  margin-bottom: 1rem;
  font-weight: 300;
}

.cs-section p strong { color: var(--text-dark); font-weight: 500; }

.cs-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-warm);
  border: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px 0;
}

.cs-image-placeholder span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-image {
  width: 100%;
  margin: 32px 0;
  border-radius: 4px;
  overflow: hidden;
}

.cs-image img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-image-caption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
  text-align: center;
}

.cs-image-wide {
  width: calc(100% + 200px);
  margin-left: -100px;
  margin-top: 32px;
  margin-bottom: 32px;
  border-radius: 4px;
  overflow: hidden;
}

.cs-image-wide img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-phone-grid {
  display: flex;
  gap: 16px;
  margin: 32px 0;
  padding: 40px 32px;
  background: #1C1C1E;
  border-radius: 8px;
  overflow-x: auto;
  justify-content: center;
  align-items: flex-start;
}

.cs-phone-grid img {
  height: 480px;
  width: auto;
  border-radius: 12px;
  flex-shrink: 0;
}

.cs-phone-grid.small img {
  height: 360px;
}

.cs-phone-mockup {
  display: flex;
  justify-content: center;
  margin: 32px 0;
}

.cs-phone-frame {
  position: relative;
  width: 280px;
  background: #000;
  border-radius: 40px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), inset 0 0 0 2px #333;
}

.cs-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #000;
  border-radius: 0 0 16px 16px;
  z-index: 2;
}

.cs-phone-frame img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  display: block;
}

.cs-prototype-embed {
  margin-top: 32px;
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}

.cs-prototype-embed iframe {
  max-width: 480px;
  border-radius: 16px;
}

.cs-phone-showcase {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: #1C1C1E;
  padding: 60px 40px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.cs-phone-showcase-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.cs-phone-showcase-row:last-child {
  margin-bottom: 0;
}

.cs-phone-showcase-row img {
  width: 220px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
}

.cs-phone-showcase-row img:hover {
  transform: scale(1.03);
}

.cs-image-grid {
  display: grid;
  gap: 16px;
  margin: 32px 0;
}

.cs-image-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.cs-image-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.cs-image-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Hand Tetris live demo */
.tetris-demo {
  margin: 32px 0;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0a0a;
}

.tetris-launch {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: none;
  cursor: pointer;
  background: #0a0a0a;
  line-height: 0;
}

.tetris-launch img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.78;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.tetris-launch:hover img { opacity: 0.95; transform: scale(1.01); }

.tetris-launch-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark);
  white-space: nowrap;
}

.tetris-demo iframe {
  width: 100%;
  height: min(860px, 82vh);
  border: none;
  display: block;
}

.tetris-demo-note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 12px;
}

.cs-watch-grid {
  display: flex;
  gap: 32px;
  margin: 32px 0;
  justify-content: center;
  align-items: center;
}

.cs-watch-grid img {
  width: 180px;
  height: auto;
  border-radius: 50%;
}

.highlight {
  color: var(--orange);
  font-weight: 400;
}

@media (max-width: 768px) {
  .cs-image-wide { width: 100%; margin-left: 0; }
  .cs-phone-grid { padding: 24px 16px; gap: 12px; }
  .cs-phone-grid img { height: 340px; }
  .cs-phone-grid.small img { height: 260px; }
  .cs-phone-showcase { padding: 32px 16px; }
  .cs-phone-showcase-row { flex-wrap: wrap; gap: 16px; }
  .cs-phone-showcase-row img { width: 160px; }
  .cs-image-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .cs-image-grid.cols-2 { grid-template-columns: 1fr; }
  .cs-watch-grid img { width: 140px; }
}

.quote-block {
  border-left: 3px solid var(--orange);
  padding: 24px 32px;
  margin: 32px 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.1rem;
  line-height: 1.7;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1000px) {
}

/* ============ MOBILE MENU ============ */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.mobile-menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-dark);
  transition: transform 0.3s, opacity 0.3s;
}

.mobile-menu-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-menu-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-cream);
  z-index: 99;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-overlay.open {
  display: flex;
  opacity: 1;
}

.mobile-nav-overlay a {
  font-family: var(--font-primary);
  font-size: 1.8rem;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  text-transform: uppercase;
  transition: color 0.3s;
}

.mobile-nav-overlay a:hover { color: var(--orange); }

.mobile-nav-overlay .mobile-connect-links {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}

.mobile-nav-overlay .mobile-connect-links a {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}


/* ============ COROS case study: wide Figma layout ============ */
#cs-coros .cs-header{max-width:1240px;padding:140px 80px 28px;}
#cs-coros .cs-body{max-width:1240px;padding:34px 80px 100px;}
#cs-coros .cs-subtitle{max-width:620px;}
#cs-coros .cs-tldr{max-width:1610px;}
#cs-coros .cs-section p{max-width:none;}

/* sticky sections: pinned text beside a scrolling collage */
.cs-sticky{display:grid;gap:64px;margin-bottom:64px;}
.cs-sticky.left-text{grid-template-columns:1.3fr 1fr;width:calc(100% + 160px);margin-left:-80px;}  /* The Problem   */
.cs-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;}
.cs-pin-inner{display:grid;width:100%;}
.cs-step{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease;pointer-events:none;}
.cs-step.on,.cs-step.solo{opacity:1;transform:none;pointer-events:auto;}
.cs-step p{font-size:0.95rem;line-height:1.85;color:var(--text-light);font-weight:300;margin-bottom:1rem;}
.cs-step p:last-child{margin-bottom:0;}
.cs-step p strong{color:var(--text-dark);font-weight:500;}

/* collages, geometry taken from the Figma frames */
.cs-collage{position:relative;width:100%;}
.cs-collage img{position:absolute;}
.cs-collage.old{padding-bottom:232.7%;margin:52vh 0 18vh;}   /* Figma 54:327; big top offset so the copy lands first */

/* Copy beside a live prototype. .center parks the copy at the vertical middle
   of the embed. Tried sticky first; it made the end of the page feel cramped
   because the copy tracked you all the way down into Final Designs. */
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:0;}
.cs-split.center{align-items:center;}
.cs-split .cs-prototype-embed{margin:0;}

@media (max-width:1024px){
  .cs-sticky{grid-template-columns:1fr !important;gap:0;width:100% !important;margin-left:0 !important;}
  .cs-pin{position:static;height:auto;display:block;}
  .cs-pin-inner{display:block;}
  .cs-step{grid-area:auto;opacity:1;transform:none;pointer-events:auto;margin-bottom:28px;}
  .cs-collage{padding-bottom:0 !important;margin:0 0 24px !important;}
  .cs-collage img{position:static;left:auto !important;top:auto !important;}
  .cs-sticky.left-text .cs-collage{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
  .cs-sticky.left-text .cs-collage img{width:46% !important;}
  .cs-sticky.left-media .cs-sticky-media,.cs-sticky.left-media .cs-sticky-text,
  .cs-sticky.left-media .cs-pin,.cs-sticky.left-media .cs-pin-inner,
  .cs-sticky.left-media .cs-collage{display:contents;}
  .cs-sticky.left-media .cs-collage img{order:var(--o,0);width:74% !important;max-width:290px;margin:0 auto 24px;}
  .cs-sticky.left-media .cs-step{order:var(--o,0);}
  .cs-split{grid-template-columns:1fr;gap:32px;}
}
@media (max-width:768px){
  #cs-coros .cs-header{padding:100px 24px 20px;}
  #cs-coros .cs-body{padding:24px 24px 80px;}
}

@media (max-width: 768px) {
  .nav { padding: 16px 24px; }
  .nav.scrolled { padding: 12px 24px; }
  .nav-right { display: none; }
  .mobile-menu-toggle { display: flex; }
  .cs-meta-bar { flex-wrap: wrap; gap: 24px; }
  .cs-header { padding: 100px 24px 20px; }
  .cs-body { padding: 24px 24px 80px; }
  .cs-nav { left: 24px; top: 16px; }
}


/* ============ standalone case study pages ============ */
/* the overlay becomes an ordinary document; everything else is inherited */
.case-study-page{position:static;width:auto;height:auto;opacity:1;pointer-events:auto;overflow:visible;z-index:auto;}
.cs-nav{position:fixed;top:24px;left:48px;z-index:100;}
@media (max-width:768px){.cs-nav{left:24px;top:16px;}}

.cs-nav .cs-back{display:inline-flex;text-decoration:none;}

/* back link sits in the header flow on standalone pages, clear of the site nav */
.cs-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;
  background:var(--bg-cream);border:1px solid var(--divider);border-radius:50px;padding:10px 24px;
  font-family:var(--font-mono);font-size:0.65rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--text-dark);text-decoration:none;transition:all .3s ease;}
.cs-back:hover{border-color:var(--orange);color:var(--orange);}
.cs-nav{display:none;}

/* full site nav on standalone case study pages (the logo waits on a GSAP intro that only runs on index) */
.nav-logo{opacity:1 !important;}
.cs-back{display:none;}

/* ---- label variant that hugs the copy under it (rule spans its own column only) ---- */
.cs-section-label.tight{margin-bottom:20px;padding-bottom:14px;}

/* ---- The Problem: two photo columns drifting at different rates ---- */
.cs-collage.old{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;padding-bottom:0;margin:34vh 0 20vh;}
.cs-collage.old .pcol{display:flex;flex-direction:column;gap:20px;will-change:transform;}
.cs-collage.old .pcol:nth-child(2){padding-top:16%;}
.cs-collage.old img{position:static;width:100%;}


@media (max-width:1024px){
  .cs-collage.old{margin:0 0 24px;}
  .cs-collage.old .pcol{transform:none !important;}
  .cs-collage.old .pcol:nth-child(2){padding-top:0;}
}

/* ---- cursor tilt, same feel as the About hero photo ---- */
.tiltwrap{perspective:900px;position:relative;}

/* Label for an artefact that is NOT Emma's work: a competitor's shipping UI, a
   before-shot, someone else's screen. Sits on the image so it travels with it
   however the column drifts. Never let another company's UI go unlabelled. */
/* Two lines: the attribution first, because that is the thing a reader must not
   get wrong, then the date it was captured. One line would run wider than the
   screenshot it sits on. */
.cs-shot-tag{position:absolute;top:8px;left:8px;z-index:3;pointer-events:none;
  font-family:var(--font-mono);font-size:0.5rem;font-weight:600;letter-spacing:.13em;
  line-height:1.5;text-transform:uppercase;background:rgba(20,19,17,.88);
  color:var(--orange,#E15304);padding:5px 8px;border-radius:3px;
  backdrop-filter:blur(4px);}
.cs-shot-tag b{display:block;font-weight:600;}
.cs-shot-tag i{display:block;font-style:normal;font-weight:500;
  color:#B8B2A8;letter-spacing:.11em;}
@media (max-width:1024px){ .cs-shot-tag{font-size:0.46rem;padding:3px 6px;} }
.tilt{transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform;display:block;width:100%;}

/* ---- Final Designs: one proportional canvas so it scales at every width ---- */
/* --fd-head-offset is the ONE number that drops both the "Final Designs"
   heading and the whole figure canvas by the same amount, so the top of the
   first phone stays level with the heading at any viewport. Change it here,
   never in one place only. */
.cs-fd{display:grid;grid-template-columns:1.7fr 1fr;gap:56px;align-items:start;
  width:calc(100% + 260px);margin-left:-130px;margin-bottom:64px;overflow-x:clip;
  --fd-head-offset:6vh;}
.cs-fd-media{position:relative;width:100%;
  padding-bottom:calc(195.24% + var(--fd-head-offset));}
.cs-fd-media .pcol{position:absolute;inset:0;will-change:transform;pointer-events:none;}
/* only the figures take the cursor; the transparent column layer must not, or
   the upper .pcol eats every hover meant for the one beneath it. */
.cs-fd-media .tiltwrap{pointer-events:auto;}
.cs-fd-media .tiltwrap{position:absolute;left:var(--l);top:var(--t);width:var(--w);
  transform:translate(var(--dx,0),var(--dy,0))
            translateY(var(--fd-head-offset))
            rotate(var(--rot,0deg));}
.cs-fd-media .tiltwrap img{width:100%;margin-left:0;}
.cs-fd-text{display:flex;flex-direction:column;justify-content:flex-start;gap:40px;
  align-self:start;padding:var(--fd-head-offset) 0 0;}
.cs-fd-block{margin:0;}

@media (max-width:1240px){
  .cs-fd{grid-template-columns:1.5fr 1fr;gap:36px;width:calc(100% + 120px);margin-left:-60px;}
}
@media (max-width:1024px){
  .cs-fd{grid-template-columns:1fr;gap:0;width:100%;margin-left:0;}
  /* single column now, so there is no heading to line up with */
  .cs-fd{--fd-head-offset:0px;}
  .cs-fd-media{padding-bottom:195.24%;margin-bottom:24px;}
  .cs-fd-media .pcol{transform:none !important;}
  .cs-fd-text{display:block;padding:0;}
  .cs-fd-block{margin-bottom:30px;}
}

/* ================= layout editor (only with ?edit=1) ================= */
body.fd-edit .cs-fd-media .tiltwrap{outline:1px dashed rgba(225,83,4,.55);outline-offset:6px;cursor:grab;}
body.fd-edit .cs-fd-media .tiltwrap.dragging{outline-style:solid;cursor:grabbing;}
body.fd-edit .cs-fd-media .tilt{pointer-events:none;}
body.fd-edit .cs-fd-media .tiltwrap::after{content:attr(data-readout);position:absolute;z-index:5;
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:.08em;color:#fff;background:var(--orange);
  padding:3px 7px;border-radius:3px;white-space:nowrap;transform:translateY(-100%);}
#fd-panel{position:fixed;right:20px;bottom:20px;z-index:9999;background:var(--ink);color:#F4EFE9;
  border-radius:12px;padding:16px 18px;font-family:var(--font-mono);font-size:0.62rem;letter-spacing:.06em;
  box-shadow:0 18px 50px rgba(0,0,0,.35);max-width:280px;line-height:1.7;}
#fd-panel b{color:var(--orange);font-weight:500;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:8px;}
#fd-panel button{display:block;width:100%;margin-top:8px;background:var(--orange);color:#fff;border:0;
  border-radius:50px;padding:9px 14px;font-family:inherit;font-size:0.62rem;letter-spacing:.12em;
  text-transform:uppercase;cursor:pointer;}
#fd-panel button.ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#F4EFE9;}
#fd-panel .hint{color:#A8A49C;}
#fd-out{display:block;width:100%;height:110px;margin-top:10px;background:#0E0D0C;color:#F4EFE9;
  border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:8px;font-family:var(--font-mono);
  font-size:0.55rem;line-height:1.5;resize:vertical;}

/* ---- full-bleed sections never exceed the viewport, at any width ---- */
.cs-fd, .cs-sticky, .cs-image-wide{
  --bleed:max(0px, min(var(--bleed-max, 130px), calc((100vw - 100%) / 2 - 18px)));
}
.cs-fd{--bleed-max:130px;width:calc(100% + var(--bleed) * 2) !important;margin-left:calc(var(--bleed) * -1) !important;}
.cs-sticky{--bleed-max:80px;width:calc(100% + var(--bleed) * 2) !important;margin-left:calc(var(--bleed) * -1) !important;}
.cs-image-wide{--bleed-max:100px;width:calc(100% + var(--bleed) * 2) !important;margin-left:calc(var(--bleed) * -1) !important;}

/* the two-column scroll sections stack a little earlier so neither column gets cramped */
@media (max-width:1100px){
  /* stacked: the heading no longer sits beside the canvas, so drop the offset */
  .cs-fd{grid-template-columns:1fr !important;gap:0 !important;--fd-head-offset:0px;}
  .cs-fd-media{margin-bottom:24px;}
  .cs-fd-media .pcol{transform:none !important;}
  .cs-fd-text{padding:0;}
}

/* ================= Final Designs: progressive disclosure =================
   All four titles stay visible at every scroll position; only the body copy
   under 01/02/03 opens and closes. The column pins so the sequence happens in
   view. Titles are clickable — that is the guarantee that nothing is ever
   missed by scrolling too fast. */
.cs-fd-text{position:sticky;top:clamp(96px,15vh,180px);}
.cs-fd-block[data-fd-step] > .cs-section-label{cursor:pointer;transition:color .25s ease,opacity .25s ease;opacity:.55;}
.cs-fd-block[data-fd-step] > .cs-section-label:hover{color:var(--orange,#E15304);opacity:1;}
.cs-fd-block[data-fd-step] > .cs-section-label:focus-visible{outline:2px solid var(--orange,#E15304);outline-offset:4px;opacity:1;}
.cs-fd-block[data-fd-step].is-open > .cs-section-label{opacity:1;}
.cs-fd-body{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1),opacity .35s ease;}
.cs-fd-body > div{overflow:hidden;}
.cs-fd-block.is-open > .cs-fd-body{grid-template-rows:1fr;opacity:1;}

/* stacked layout, and anyone who asked for less motion, just get everything open */
@media (max-width:1100px){
  .cs-fd-text{position:static;}
  .cs-fd-block[data-fd-step] > .cs-section-label{opacity:1;cursor:default;}
  .cs-fd-body{grid-template-rows:1fr;opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .cs-fd-body{transition:none;}
}

/* =====================================================================
   CASE STUDY TEMPLATE  ·  shared structure across all six studies
   ---------------------------------------------------------------------
   Every study runs the same seven beats:
     1  summary            .cs-tldr
     2  the problem        .cs-sticky        (pinned copy, media drifts)
     3  what I found       .cs-section
     4  the decision       .cs-section
     5  the road not taken .cs-alt
     6  final designs      .cs-fd            (columns drift, copy pins)
     7  reflection         .cs-section
   The two scroll anchors are 2 and 6. Everything between them is static
   so the motion stays an accent, not a gimmick.
   ===================================================================== */

/* ---------- 2 · generic sticky opener media ----------
   COROS uses .cs-collage.old, an absolutely positioned canvas with
   percentages hand-tuned against its Figma frame. Every other study uses
   .stack, which lays the same two drifting columns out in normal flow so
   a study only has to drop its own images in. */
.cs-collage.stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 0;
  margin: 44vh 0 16vh;
}
.cs-collage.stack img { position: static; width: 100%; height: auto; }
.cs-collage.stack .pcol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  will-change: transform;
}
.cs-collage.stack .pcol:nth-child(2) { padding-top: 18%; }
.cs-collage.stack .tiltwrap { border-radius: 6px; overflow: hidden; }

/* one wide artefact instead of a phone cluster, for the studies whose
   problem is best shown as a map or a timeline rather than screens */
.cs-collage.stack.wide { grid-template-columns: 1fr; }
.cs-collage.stack.wide .pcol:nth-child(2) { padding-top: 0; }

@media (max-width: 1024px) {
  .cs-collage.stack { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px !important; }
  .cs-collage.stack .pcol {
    flex: 1 1 100%;
    flex-direction: row;
    gap: 12px;
    padding-top: 0 !important;
    transform: none !important;
  }
  .cs-collage.stack .tiltwrap { flex: 1; }
  .cs-collage.stack img { width: 100% !important; }
}

/* ---------- 6 · generic drifting finale ----------
   Same idea: .cs-fd-media keeps COROS's hand-placed canvas, .flow gives
   every other study two drifting columns in normal flow. */
.cs-fd-media.flow {
  padding-bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.cs-fd-media.flow .pcol {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cs-fd-media.flow .pcol:nth-child(2) { padding-top: 14%; }
.cs-fd-media.flow .tiltwrap {
  position: static;
  left: auto; top: auto; width: auto;
  transform: none;
  border-radius: 6px;
  overflow: hidden;
}
.cs-fd-media.flow .tiltwrap img { width: 100%; height: auto; display: block; }

/* one column, for a study whose final assets are a couple of large artefacts
   rather than a wall of phone screens. Keeps the canvas tall enough that the
   pinned copy beside it still has runway to open all three steps. */
.cs-fd-media.flow.wide { grid-template-columns: 1fr; }
.cs-fd-media.flow.wide .pcol:nth-child(2) { padding-top: 0; }
.cs-fd-media.flow { min-height: 90vh; }

@media (max-width: 1100px) {
  .cs-fd-media.flow { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cs-fd-media.flow .pcol { padding-top: 0 !important; gap: 12px; }
}

/* ---------- 5 · the road not taken ----------
   The iteration that lost. Artefact on one side, the reasoning on the
   other in three fixed rows: what I tried, why it lost, what replaced
   it. The image sits desaturated and comes back to colour on hover,
   so it reads as history rather than as part of the final work. */
.cs-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px 76px;
  align-items: start;
  margin-bottom: 64px;
}

/* a study can have more than one thing it tried and dropped: add another
   .cs-alt-media + .cs-alt-copy pair and the grid rows on its own. Number the
   entries so the pairing between artefact and reasoning stays obvious. */
.cs-alt-entry-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.cs-alt > .cs-section-label { grid-column: 1 / -1; margin-bottom: 8px; }

.cs-alt-media {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-warm);
  border: 1px solid var(--divider);
}
.cs-alt-media img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.82;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

/* a small or dark artefact (a watch face, a single component) sits centred with
   room around it instead of being blown up to the full column width */
.cs-alt-media.contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.cs-alt-media.contain img { width: auto; max-width: 100%; max-height: 320px; }
.cs-alt-media:hover img { filter: none; opacity: 1; }

.cs-alt-media.empty {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B4ADA3;
  text-align: center;
  padding: 24px;
}

.cs-alt-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: #F4EFE9;
  padding: 5px 9px;
  border-radius: 3px;
  pointer-events: none;
}

.cs-alt-row { margin-bottom: 26px; }
.cs-alt-row:last-child { margin-bottom: 0; }
.cs-alt-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 7px;
}
.cs-alt-row p {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--text-light);
  font-weight: 300;
  margin: 0;
}
.cs-alt-row p strong { color: var(--text-dark); font-weight: 500; }

@media (max-width: 900px) {
  .cs-alt { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- copy that still needs writing ----------
   Delete the data-placeholder attribute once the real words go in;
   grep the repo for "data-placeholder" to find what is still open. */
[data-placeholder] p { opacity: 0.62; font-style: italic; }
[data-placeholder]::before {
  content: attr(data-placeholder);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: #B4ADA3;
  padding: 3px 7px;
  border-radius: 3px;
  margin-bottom: 12px;
}


/* ============ before/after comparison slider ============
   Two images the same size, stacked. The base layer is what shipped; the
   overlay is the version that lost, clipped from the left edge to the handle.
   Drag, click, or arrow-key it. The cursor-tilt binding is deliberately not
   applied here: tilting a thing you're trying to drag fights the gesture. */
.cs-compare{position:relative;overflow:hidden;border-radius:10px;
  max-width:var(--compare-max,100%);margin-inline:auto;
  background:var(--paper-warm,#FBF7F2);cursor:ew-resize;touch-action:pan-y;
  --x:50%;}
.cs-compare:focus-visible{outline:2px solid var(--orange,#E15304);outline-offset:4px;}
.cs-compare img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;}
.cs-compare .cs-compare-over{position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--x)) 0 0);}
.cs-compare .cs-compare-over img{height:100%;object-fit:contain;object-position:center;}

/* the handle */
.cs-compare-bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;
  background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(26,25,23,.25);
  transform:translateX(-1px);pointer-events:none;}
.cs-compare-grip{position:absolute;top:50%;left:var(--x);width:34px;height:34px;
  margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 2px 10px rgba(26,25,23,.28);pointer-events:none;
  display:flex;align-items:center;justify-content:center;}
.cs-compare-grip::before{content:'';width:13px;height:7px;
  background:var(--text-dark,#1A1917);
  clip-path:polygon(0 50%,34% 0,34% 100%, 100% 50%,66% 0,66% 100%);}

/* the two side labels, same language as the Cut tag */
.cs-compare-tag{position:absolute;top:10px;z-index:2;pointer-events:none;
  font-family:var(--font-mono);font-size:0.5rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 7px;border-radius:3px;
  background:rgba(26,25,23,.82);color:#F4EFE9;backdrop-filter:blur(4px);}
.cs-compare-tag.is-left{left:10px;}
.cs-compare-tag.is-right{right:10px;}

.cs-compare-hint{margin-top:10px;font-family:var(--font-mono);font-size:0.55rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}

@media (max-width:1024px){
  .cs-compare-grip{width:40px;height:40px;margin:-20px 0 0 -20px;}
}

/* A comparison slider inside the First Pass slot: no chrome, no desaturation.
   The point here is to read both versions truthfully against each other, so
   the greyed-out "this was cut" treatment would work against the section. */
.cs-alt-media.is-compare{border:none;background:none;padding:0;overflow:visible;border-radius:0;}
.cs-alt-media.is-compare img{filter:none;opacity:1;}

/* ============ filmstrip ============
   For a SEQUENCE of screens, where the length of the sequence is part of the
   point. Scrolls horizontally with snap points; click any frame to open it
   full height in the lightbox, because these screens carry more detail than a
   thumbnail can show. */
.cs-filmstrip-wrap{position:relative;}
.cs-filmstrip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 12px;scrollbar-width:thin;
  scrollbar-color:var(--divider) transparent;overscroll-behavior-x:contain;}
.cs-filmstrip::-webkit-scrollbar{height:5px;}
.cs-filmstrip::-webkit-scrollbar-thumb{background:var(--divider);border-radius:3px;}
.cs-filmstrip::-webkit-scrollbar-track{background:transparent;}

.cs-frame{flex:0 0 auto;scroll-snap-align:start;margin:0;cursor:zoom-in;
  width:var(--frame-w,200px);}
.cs-frame img{display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--divider);background:#111;
  filter:grayscale(1) contrast(1.05);opacity:.82;
  transition:filter .45s ease,opacity .45s ease,transform .45s ease;}
.cs-frame:hover img,.cs-frame:focus-visible img{filter:none;opacity:1;transform:translateY(-3px);}
.cs-frame:focus-visible{outline:2px solid var(--orange,#E15304);outline-offset:4px;border-radius:8px;}
.cs-frame figcaption{margin-top:7px;font-family:var(--font-mono);font-size:0.5rem;
  font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);
  display:flex;gap:7px;}
.cs-frame figcaption b{color:var(--text-dark);font-weight:600;}

/* nudge buttons, hidden when there is nothing to scroll to */
.cs-strip-btn{position:absolute;top:calc(50% - 26px);width:34px;height:34px;border:none;
  border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(26,25,23,.26);
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;
  transition:opacity .2s ease;color:var(--text-dark);font-size:15px;line-height:1;padding:0;}
.cs-strip-btn[disabled]{opacity:0;pointer-events:none;}
.cs-strip-btn.is-prev{left:-10px;}
.cs-strip-btn.is-next{right:-10px;}

.cs-strip-hint{margin-top:2px;font-family:var(--font-mono);font-size:0.55rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);}

/* ============ lightbox ============ */
.cs-lightbox{position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;background:rgba(20,19,17,.93);
  backdrop-filter:blur(6px);padding:36px 64px;}
.cs-lightbox.is-open{display:flex;}
.cs-lightbox img{max-width:100%;max-height:calc(100vh - 108px);width:auto;height:auto;
  border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.cs-lightbox-cap{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:0.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,239,233,.72);}
.cs-lightbox-btn{position:absolute;background:none;border:none;cursor:pointer;
  color:#F4EFE9;font-size:26px;line-height:1;padding:12px;opacity:.75;}
.cs-lightbox-btn:hover{opacity:1;}
.cs-lightbox-btn.is-close{top:10px;right:14px;font-size:30px;}
.cs-lightbox-btn.is-prev{left:8px;top:50%;transform:translateY(-50%);}
.cs-lightbox-btn.is-next{right:8px;top:50%;transform:translateY(-50%);}
body.cs-lightbox-open{overflow:hidden;}

@media (max-width:1024px){
  .cs-frame{width:var(--frame-w-sm,164px);}
  .cs-strip-btn{display:none;}
  .cs-lightbox{padding:24px 12px 44px;}
}

/* filmstrip in a First Pass slot: no card border, the frames carry their own */
.cs-alt-media.is-strip{border:none;background:none;overflow:visible;border-radius:0;}

/* The First Pass ends in artefacts and Final Designs opens in artefacts, so
   without this the watch comparison collides with the first phone. */
.cs-alt + .cs-section.cs-fd,
.cs-alt + .cs-section{margin-top:168px;}
@media (max-width:1024px){ .cs-alt + .cs-section{margin-top:88px;} }

/* A horizontally-scrolling flex row inside a grid track will size the track to
   its full scroll width unless the track is allowed to shrink below min-content.
   Without this the filmstrip blows the First Pass grid apart. */
.cs-alt > *{min-width:0;}
.cs-filmstrip-wrap,.cs-filmstrip{min-width:0;max-width:100%;}

/* The Figma embed is a third-party iframe: it can be blocked, rate-limited, or
   slow. Give it a visible frame and an escape hatch so a failure reads as
   "prototype didn't load" instead of an empty column. */
.cs-proto-frame{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:stretch;}
.cs-proto-frame iframe{width:100%;border-radius:16px;background:var(--bg-warm);
  border:1px solid var(--divider);min-height:520px;display:block;}
.cs-proto-fallback{margin-top:12px;align-self:flex-start;
  font-family:var(--font-mono);font-size:0.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);text-decoration:none;
  border-bottom:1px solid var(--divider);padding-bottom:2px;}
.cs-proto-fallback:hover{color:var(--orange,#E15304);border-bottom-color:currentColor;}