/* ==========================================================
   Tim Yue Li — portfolio · v2 ground-up rewrite
   Profile-hero rail + horizontal product cards + studio profile card
   ========================================================== */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
a { color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Type — restrained fluid scale */
  --fs-100: 0.78125rem;
  --fs-200: clamp(0.84rem, 0.12vw + 0.81rem, 0.92rem);
  --fs-300: clamp(0.95rem, 0.2vw + 0.9rem, 1.075rem);
  --fs-400: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
  --fs-500: clamp(1.2rem, 0.5vw + 1.05rem, 1.5rem);
  --fs-600: clamp(1.35rem, 0.7vw + 1.15rem, 1.7rem);
  --fs-700: clamp(1.85rem, 1.4vw + 1.4rem, 2.65rem);
  --fs-800: clamp(2.4rem, 2vw + 1.8rem, 3.6rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: clamp(0.85rem, 0.5vw + 0.7rem, 1.1rem);
  --sp-5: clamp(1rem, 0.85vw + 0.85rem, 1.5rem);
  --sp-6: clamp(1.5rem, 1.3vw + 1.05rem, 2.25rem);
  --sp-7: clamp(2.25rem, 2vw + 1.5rem, 3.5rem);
  --sp-8: clamp(3rem, 3vw + 1rem, 5rem);

  /* Color — cool-tone gray with a confident blue tilt.
     surface-2 sits close to white so pills/forms feel like clean light
     surfaces. surface-3 (hover) is only ~8 points darker so the state
     change is felt without dropping into muddy dark gray. */
  --bg: #F4F6FA;
  --bg-deep: #EAEDF3;
  --surface: #FFFFFF;
  --surface-2: #F2F4F9;
  --surface-3: #EAEEF5;
  --border: #DEE2EA;
  --border-strong: #B5B9C4;
  --text: #131316;
  --text-strong: #000000;
  --text-muted: #4D4F55;
  --text-dim: #8C8E95;

  /* Lift / chrome */
  --shadow-sm: 0 2px 6px rgba(20, 22, 26, 0.04), 0 0 0 1px rgba(20, 22, 26, 0.04);
  --shadow-md: 0 14px 32px rgba(20, 22, 26, 0.07), 0 0 0 1px rgba(20, 22, 26, 0.05);
  --shadow-lg: 0 28px 70px rgba(20, 22, 26, 0.18), 0 0 0 1px rgba(20, 22, 26, 0.06);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;
}

html {
  background: var(--bg);
}

/* Hide all scrollbars site-wide — Chromium on Windows hands the scrollbar
   chrome (including arrows) to the OS in classic-scrollbar mode, so
   ::-webkit-scrollbar-button styling is unreliable. Universal hide is
   the only consistent fix. Scrolling still works via wheel / trackpad /
   keyboard / touch. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Lock background scroll while any dialog is open. */
body.modal-open {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

/* Push the footer above the cookie banner while it's visible —
   value is set inline by analytics.js to the banner's measured height. */
body.cookie-banner-active {
  padding-bottom: calc(var(--sp-5) + var(--cookie-banner-pad, 0px) + var(--sp-3));
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-300);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11' on, 'ss01' on;

  display: grid;
  grid-template-columns: clamp(20rem, 22vw, 25rem) minmax(0, 1fr);
  gap: var(--sp-5);
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--sp-5);
  min-height: 100vh;
}

/* ============================================================
   PROFILE HERO RAIL
   ============================================================ */

.rail {
  position: sticky;
  top: var(--sp-5);
  align-self: start;
  max-height: calc(100svh - 2 * var(--sp-5));
  overflow: hidden;
  padding-right: 18px;
}

.rail-scroll {
  max-height: calc(100svh - 2 * var(--sp-5));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
/* .rail scrollbar inherits universal hide */

/* Rail card — base for the 3 stacked modules */
.rail-card {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 1.2vw + 1.25rem, 2rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.rail-card--actions {
  padding: clamp(0.5rem, 0.5vw + 0.4rem, 0.75rem) clamp(1.25rem, 1vw + 1rem, 1.75rem);
  gap: 0;
}

/* Container context for the subscribe card — query lives after base rules.
   Tighter base gap to match the Identity card's articulated rhythm. */
.rail-card--subscribe {
  container-type: inline-size;
  gap: var(--sp-3);
}

/* Studio header inside subscribe card */
.subscribe-studio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}

.subscribe-studio-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #1f1f1f 0%, #050505 100%);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 7px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0.5px rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 0 0 0.5px rgba(0, 0, 0, 0.5);
}

.subscribe-studio-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 48%);
  pointer-events: none;
}

.subscribe-studio-mark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
}

.subscribe-studio-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.subscribe-studio-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.subscribe-studio-name {
  font-size: var(--fs-200);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

.subscribe-studio-role {
  font-size: var(--fs-100);
  color: var(--text-dim);
}

.subscribe-visit {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-2);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: background 0.15s, color 0.15s;
}

.subscribe-visit:hover {
  background: var(--surface-3);
  color: var(--text-strong);
}

.subscribe-visit .icon-sm {
  width: 12px;
  height: 12px;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.subscribe-visit:hover .icon-sm {
  transform: rotate(45deg) translateX(1px);
}

.profile-photo {
  width: clamp(116px, 8.5vw, 144px);
  height: auto;
}

/* Tighter rhythm for the Identity card — photo, wordmark, and subtitle
   should feel grouped, not floating. */
.rail-card--identity {
  gap: var(--sp-2);
}
.rail-card--identity .profile-name {
  margin-top: var(--sp-1);
}
.rail-card--identity .profile-name-real {
  margin-top: 0;
}
.rail-card--identity .profile-meta {
  margin-top: var(--sp-2);
}
.rail-card--identity .profile-quote {
  margin-top: var(--sp-2);
}

.profile-name {
  font-size: clamp(1.95rem, 1.3vw + 1.45rem, 2.55rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--text-strong);
}

.profile-name-dot {
  color: var(--text-muted);
}

.profile-name-real {
  font-size: var(--fs-100);
  color: var(--text-dim);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 6px 0 0;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}

.meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  color: var(--text-muted);
  font-weight: 500;
}

.meta-row .icon-sm {
  color: var(--text-dim);
  flex-shrink: 0;
}

.icon-sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tm-tiny {
  font-size: 0.6em;
  vertical-align: super;
  font-weight: 600;
  margin-left: 1px;
  color: var(--text-dim);
}

.profile-quote {
  font-size: var(--fs-200);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 30ch;
}

.profile-cta-line {
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
}

.cta-emph {
  background: linear-gradient(180deg, transparent 60%, var(--bg-deep) 60%);
  font-weight: 700;
  padding: 0 2px;
}

/* Subscribe — bold input + dark button */
.subscribe-bold {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
  margin: 0;
}

.subscribe-bold input {
  flex: 1;
  min-width: 0;
  padding: 0 var(--sp-4);
  font-size: var(--fs-200);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  outline: none;
  transition: background 0.15s, box-shadow 0.15s;
  height: 44px;
}

.subscribe-bold input::placeholder { color: var(--text-dim); }

.subscribe-bold input:focus {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--text);
}

.subscribe-bold button {
  background: var(--text-strong);
  color: var(--bg);
  font-weight: 600;
  font-size: var(--fs-200);
  padding: 0 var(--sp-5);
  border-radius: var(--radius-md);
  height: 44px;
  white-space: nowrap;
  transition:
    box-shadow 0.2s ease,
    transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1),
    filter 0.15s;
}

/* "Ready" cue: when the email input has content, give the button a subtle lift + halo */
.subscribe-bold:has(input:not(:placeholder-shown)) button {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06), 0 6px 14px rgba(0, 0, 0, 0.1);
  transform: translateY(-0.5px);
}

.subscribe-bold button:hover { filter: brightness(1.2); }

/* Press animation — quick scale-down on press, springy release via parent transition */
.subscribe-bold button:active {
  transform: scale(0.95);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04), 0 2px 5px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.08s ease-out,
    box-shadow 0.08s ease-out;
}

/* When input has content AND button is pressed, combine the lift-collapse + scale */
.subscribe-bold:has(input:not(:placeholder-shown)) button:active {
  transform: translateY(0) scale(0.95);
}

.subscribe-success {
  font-size: var(--fs-200);
  color: var(--text-muted);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) 0;
}

.profile-cta-caption {
  font-size: var(--fs-100);
  color: var(--text-dim);
  margin: var(--sp-1) 0 0;
  line-height: 1.5;
}

/* Stack subscribe form vertically when its container narrows.
   Placed AFTER the base .subscribe-bold rules so its gap wins the cascade. */
@container (max-width: 17rem) {
  .subscribe-bold {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .subscribe-bold input,
  .subscribe-bold button {
    flex: 0 0 auto !important;
    width: 100%;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box;
  }
}

/* Rail link rows (Resume + socials) */
.rail-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}

.rail-link:last-child { border-bottom: 0; }

.rail-link:hover { color: var(--text-strong); }

.rail-link span { flex: 1; }

.rail-link .rail-link-icon { color: var(--text-dim); transition: color 0.15s; }
.rail-link:hover .rail-link-icon { color: var(--text-strong); }

.rail-link-arrow {
  width: 14px;
  height: 14px;
  color: var(--text-dim);
  opacity: 0.6;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.rail-link:hover .rail-link-arrow {
  transform: rotate(45deg) translateX(1px);
}

/* ============================================================
   CONTENT
   ============================================================ */

.content {
  padding: 0 0 var(--sp-7) 0;
}

.section {
  margin-bottom: var(--sp-8);
}

.section:last-of-type { margin-bottom: var(--sp-7); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.section-title {
  font-size: var(--fs-100);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  font-weight: 500;
  margin: 0;
}

/* Animated building dots — one dot fades in at a time, then resets.
   Reads as live/active activity. */
.building-dots {
  display: inline-block;
  width: 1.4ch;
  text-align: left;
  letter-spacing: 0.05em;
}
.building-dots::before {
  content: '...';
  animation: building-dots 1.6s steps(4, end) infinite;
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
}
@keyframes building-dots {
  0%   { width: 0; }
  25%  { width: 0.45ch; }
  50%  { width: 0.9ch; }
  75%  { width: 1.35ch; }
  100% { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .building-dots::before {
    animation: none;
    width: 1.35ch;
  }
}

.section-meta {
  font-size: var(--fs-100);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: lowercase;
}

/* ============================================================
   BUILDING GRID + PRODUCT CARDS
   ============================================================ */

.building-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.prod-card--full {
  grid-column: 1 / -1;
}

.prod-card {
  --brand: var(--text);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 1.2vw + 1.25rem, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform 0.2s, box-shadow 0.25s;
}

/* Hover lift only on clickable cards (Pointzerotwo, Hellscape).
   Drasil has no modal so it stays static. */
.prod-card--clickable {
  cursor: pointer;
}
.prod-card--clickable:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.prod-card--clickable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 28%, transparent);
  outline-offset: 3px;
}

.prod-card-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 0;
  margin-bottom: var(--sp-1);
}

.prod-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand) 13%, var(--surface));
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  font-feature-settings: 'tnum' on;
}

.prod-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  white-space: nowrap;
}

.prod-status + .prod-status {
  margin-left: 12px;
  padding-left: 12px;
}

.prod-status + .prod-status::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 10px;
  transform: translateY(-50%);
  background: var(--border);
  opacity: 0.8;
}

.prod-status-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.prod-status--muted {
  color: var(--text-dim);
  opacity: 0.82;
}

.prod-status:has(.status-dot--live) {
  color: var(--text);
}

.prod-meta-static {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
}

.prod-meta-static .icon-sm {
  width: 16px;
  height: 16px;
}

.prod-status-static {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.prod-status-static::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--border);
  opacity: 0.9;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}

.status-dot--live {
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: live-pulse 2.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.06); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot--live { animation: none; }
}

.status-dot--building {
  background: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.prod-title {
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

.prod-title-note {
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0;
  vertical-align: middle;
  margin-left: 6px;
}

.prod-tags {
  font-size: var(--fs-100);
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

.tag-muted { opacity: 0.55; }

.prod-desc {
  font-size: var(--fs-200);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}

.prod-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Project preview image — sits flush against the prod-foot border line.
   Anchored left, ~75% of card width. The container itself does NOT move;
   only the inner img slides up from below, getting clipped by the
   container's overflow:hidden so it visually rises from the divider. */
.prod-preview {
  position: relative;
  width: 70%;
  margin-top: var(--sp-3);
  margin-left: calc(var(--sp-3) * 2);
  margin-right: auto;
  /* Negative bottom margin neutralizes the parent flex gap so the
     preview's bottom edge sits flush against the prod-foot border. */
  margin-bottom: calc(0px - var(--sp-3));
  /* One-sided clip: only the bottom edge clips. Top + sides allow the
     image to grow past the frame on hover, staying flush with the line
     at the bottom. */
  clip-path: inset(-9999px -9999px 0 -9999px);
  aspect-ratio: 16 / 7;
}

/* Wrapper handles hover (lift + scale) so it doesn't fight with the img's
   reveal animation. Two layers, two independent transitions. */
.prod-preview-shift {
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.prod-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* Start fully below the wrapper (clipped by .prod-preview overflow:hidden),
     rise into view when .is-in-view is added. */
  transform: translateY(100%);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  /* Drop shadow — clipped at the bottom by .prod-preview overflow:hidden so
     it never bleeds past the divider line. */
  box-shadow: 0 8px 28px rgba(20, 22, 26, 0.32), 0 3px 8px rgba(20, 22, 26, 0.16);
}

.prod-preview.is-in-view img {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .prod-preview img,
  .prod-preview-shift {
    transform: none;
    transition: none;
  }
}

.prod-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.prod-link:hover { color: var(--text-strong); }
.prod-link .icon-sm {
  color: var(--text-dim);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.prod-link:hover .icon-sm {
  transform: rotate(45deg) translateX(1px);
}

/* Vote button — pill with star + count divider */
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 2px 12px 2px 10px;
  line-height: 1;
  border-radius: var(--radius-pill);
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease;
  letter-spacing: -0.005em;
}

.vote-btn:hover {
  background: var(--surface-3);
  color: var(--text-strong);
}
.vote-btn:active { transform: scale(0.97); }

.vote-btn.voted {
  background: var(--text-strong);
  color: var(--bg);
}

.vote-btn .icon-sm { width: 13px; height: 13px; }

.vote-label { letter-spacing: 0.01em; }

.vote-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding-left: var(--sp-2);
  margin-left: 2px;
  border-left: 1px solid currentColor;
  opacity: 0.75;
}

.vote-btn.voted .vote-count { opacity: 1; }

/* ============================================================
   STUDIO PROFILE CARD (Alex Morrison pattern)
   ============================================================ */

.studio-profile {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1.4vw + 1.1rem, 2rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.studio-profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.studio-avatar {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: var(--text-strong);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.studio-avatar-mark {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.04em;
}

.studio-profile-info {
  flex: 1;
  min-width: 0;
}

.studio-profile-name {
  font-size: var(--fs-600);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}

.studio-profile-name .tm {
  font-size: 0.42em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 2px;
  color: var(--text-dim);
  letter-spacing: 0;
}

.studio-profile-role {
  font-size: var(--fs-200);
  color: var(--text-dim);
  margin: 4px 0 0;
  font-weight: 500;
}

.studio-profile-actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

.btn-link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-2);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease;
}
.btn-link-pill:hover {
  background: var(--surface-3);
  color: var(--text-strong);
}

.btn-pill-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--bg);
  background: var(--text-strong);
  padding: 7px 12px 7px 10px;
  border-radius: var(--radius-pill);
  transition: filter 0.15s, transform 0.1s;
}
.btn-pill-dark:hover { filter: brightness(1.2); }
.btn-pill-dark .vote-count { border-left-color: rgba(255,255,255,0.4); }
.btn-pill-dark .icon-sm { width: 13px; height: 13px; }

/* Stats row */
.studio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.stat-num {
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}

.studio-profile-desc {
  font-size: var(--fs-200);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   SELECTED WORK GRID — image tiles
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.work-card {
  --brand: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: visible;
}

.work-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, var(--brand) 5%, var(--surface)));
  color: var(--brand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.work-card:hover .work-media {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Onboarding thumbnail is a transparent PNG (hand + iPhone) — softened
   blue-gray radial keeps the tile distinctive among the photo-led siblings
   and lets the magenta button on the phone stay the focal accent. */
.work-card[data-modal="onboarding"] .work-media {
  background: radial-gradient(120% 100% at 30% 20%, #EFF2F7 0%, #E4E8F0 100%);
}

.work-media svg,
.work-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.work-media img {
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-card:hover .work-media img {
  transform: scale(1.18);
}

.work-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 var(--sp-2);
}

.work-title {
  font-size: var(--fs-300);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text);
}

.work-sub {
  font-size: var(--fs-100);
  color: var(--text-dim);
}

/* ============================================================
   CLIENT LIST — minimal rows with avatar + arrow
   ============================================================ */

.client-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.client-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  text-align: left;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.2s;
}

.client-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.client-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  color: var(--text-muted);
}

.client-avatar--img {
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: filter 0.3s ease;
}

/* Shooting star — internal looping animation */
.client-avatar--img::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -90%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(208, 228, 255, 0.45) 35%,
    rgba(255, 255, 255, 1) 92%,
    transparent 100%);
  filter: drop-shadow(0 0 4px rgba(160, 196, 255, 1));
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  pointer-events: none;
  opacity: 0;
  animation: client-shoot 5s ease-out infinite;
  animation-delay: 1s;
}

@keyframes client-shoot {
  0%   { top: -50%; left: -90%; opacity: 0; }
  20%  { top: -50%; left: -90%; opacity: 0; }
  26%  { opacity: 1; }
  44%  { opacity: 1; }
  50%  { top: 150%; left: 110%; opacity: 0; }
  100% { top: 150%; left: 110%; opacity: 0; }
}

.client-row:hover .client-avatar--img {
  filter: brightness(1.18) saturate(1.15);
}

.client-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.client-name-alt {
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 4px;
  font-size: 0.92em;
  letter-spacing: 0;
}

.client-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.client-name { font-size: var(--fs-300); font-weight: 600; color: var(--text); }
.client-meta { font-size: var(--fs-100); color: var(--text-dim); }

.client-year {
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum' on;
  align-self: start;
}

.client-arrow {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  display: block;
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
  align-self: start;
  /* Pull the chevron closer to the year — pair them visually */
  margin-left: calc(0px - var(--sp-4) + var(--sp-2));
}
.client-row:hover .client-arrow { transform: translateX(3px); }

/* ============================================================
   PAGE CLOSER — bare text + like + copyright
   ============================================================ */

.page-closer {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.page-closer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.page-closer-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.page-closer-thanks {
  font-size: var(--fs-300);
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.2;
}

.page-closer-stat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-200);
  color: var(--text-muted);
  margin: 0;
}

.page-closer-stat .icon-sm { color: var(--text-dim); }

.page-closer-stat strong {
  color: var(--text-strong);
  font-weight: 700;
  font-feature-settings: 'tnum' on;
  margin-left: 2px;
}

.page-closer-copyright {
  font-size: var(--fs-100);
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.01em;
}

.like-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  padding: 7px 12px 7px 10px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px var(--border);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  letter-spacing: -0.005em;
}

.like-btn:hover {
  background: var(--surface-2);
  color: var(--text-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px var(--border-strong);
}

.like-btn:active { transform: scale(0.97); }

.like-btn.liked {
  background: var(--text-strong);
  color: var(--bg);
}

.like-btn.liked .like-icon {
  fill: currentColor;
}

.like-btn .icon-sm { width: 14px; height: 14px; }

.like-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  padding-left: var(--sp-2);
  margin-left: 2px;
  border-left: 1px solid currentColor;
  opacity: 0.7;
}

.like-btn.liked .like-count { opacity: 1; }

/* page-foot removed — replaced by .page-closer */

/* ============================================================
   MODAL
   ============================================================ */

/* ============================================================
   NOTIFY MODAL — focused signup dialog
   ============================================================ */

dialog.notify-modal {
  --brand: var(--text-strong);
  border: 0;
  padding: 0;
  background: var(--surface);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: min(48ch, 92vw);
  max-height: 90vh;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

dialog.notify-modal::backdrop {
  background: rgba(20, 22, 26, 0.55);
}

.notify-inner {
  padding: clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Header — text + close button */
.notify-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: flex-start;
}

.notify-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.notify-kicker {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 600;
}

.notify-title {
  font-size: clamp(1.3rem, 0.55vw + 1.15rem, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
}

dialog.notify-modal .modal-close {
  position: static;
  margin: 0;
  flex-shrink: 0;
}

.notify-blurb {
  font-size: var(--fs-200);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Form */
.notify-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.notify-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.notify-field-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-weight: 600;
}

.notify-field input[type="email"] {
  padding: 0 var(--sp-4);
  height: 46px;
  font-size: var(--fs-200);
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-md);
  outline: none;
  transition: box-shadow 0.15s, background 0.15s;
}

.notify-field input[type="email"]::placeholder { color: var(--text-dim); }

.notify-field input[type="email"]:focus {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--text);
}

/* Checkbox — visually subordinate per Codex */
.notify-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  padding: 0;
}

.notify-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--text-strong);
  cursor: pointer;
}

.notify-checkbox span {
  font-size: var(--fs-100);
  color: var(--text-dim);
  line-height: 1.55;
}

.notify-checkbox strong {
  color: var(--text-muted);
  font-weight: 600;
}

/* Submit — self-contained CTA */
.notify-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-5);
  background: var(--text-strong);
  color: var(--bg);
  border: 0;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  margin-top: var(--sp-2);
}

.notify-submit:hover { filter: brightness(1.18); }
.notify-submit:active { transform: translateY(1px); }

/* Success state */
.notify-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.notify-success[hidden] {
  display: none;
}

.notify-success-text {
  font-size: var(--fs-400);
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.3;
}

.notify-success-sub {
  font-size: var(--fs-200);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
}

.notify-success-sub strong {
  color: var(--text);
  font-weight: 600;
}

/* notify-dismiss removed — top × is the only close affordance */

/* ============================================================
   CASE STUDY MODAL (separate)
   ============================================================ */

dialog.case-study {
  --brand: var(--text);
  border: 0;
  padding: 0;
  background: var(--surface);
  border-radius: var(--radius-xl);
  max-width: min(80rem, 94vw);
  width: 100%;
  max-height: 92vh;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

/* ============================================================
   CLIENT MODAL — compact factsheet (distinct from case study)
   ============================================================ */

dialog.client-modal {
  --brand: var(--text);
  border: 0;
  padding: 0;
  background: var(--surface);
  border-radius: var(--radius-xl);
  max-width: min(38rem, 92vw);
  width: 100%;
  max-height: 90vh;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

dialog.client-modal::backdrop {
  background: rgba(20, 22, 26, 0.55);
}

.client-scroll {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-xl);
}

.client-inner {
  padding: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.client-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.client-head-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
}

.client-head-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.client-head-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.client-head-meta {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin: 0;
}

.client-head-name {
  font-size: clamp(1.5rem, 0.6vw + 1.3rem, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
}

.client-head-sub {
  font-size: var(--fs-200);
  color: var(--text-muted);
  margin: 2px 0 0;
}

.client-head-sub[hidden] { display: none; }

.client-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* Definition-list facts */
.client-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  font-size: var(--fs-200);
}

.client-facts dt {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  align-self: center;
}

.client-facts dd {
  margin: 0;
  color: var(--text);
  font-weight: 500;
  align-self: center;
}

.client-blurb {
  font-size: var(--fs-200);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

.client-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-2);
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(20, 22, 26, 0.04);
  transition: background 0.15s, color 0.15s;
}

.client-link:hover {
  background: var(--surface-3);
  color: var(--text-strong);
}

.client-link[hidden] { display: none; }

.client-link .icon-sm {
  width: 14px;
  height: 14px;
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.client-link:hover .icon-sm {
  transform: rotate(45deg) translateX(1px);
}

/* Action row — Visit pill + Before/After trigger sit side-by-side, wrap tight */
.client-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  align-self: flex-start;
}

/* Comparison trigger — subtle text-link sits next to the Visit pill */
.client-comparison-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  transition: color 0.15s ease, gap 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.client-comparison-trigger:hover {
  color: var(--text-strong);
  gap: calc(var(--sp-2) + 4px);
}
.client-comparison-trigger[hidden] { display: none; }
.client-comparison-trigger .icon-sm { width: 14px; height: 14px; }

/* Comparison modal — sub-dialog with stacked editorial layout */
dialog.comparison-modal {
  --brand: var(--text-strong);
  border: 0;
  padding: 0;
  margin: auto;
  max-width: min(1100px, 96vw);
  max-height: 96vh;
  width: 100%;
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
dialog.comparison-modal::backdrop {
  background: rgba(20, 22, 26, 0.62);
}
dialog.comparison-modal[open] {
  display: flex;
  flex-direction: column;
}

.comparison-scroll {
  max-height: 96vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(2rem, 3vw + 1rem, 3.5rem) clamp(1.5rem, 2vw + 1rem, 3rem);
}

.comparison-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--sp-4);
}
.comparison-meta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--text-dim);
  margin: 0;
}
.comparison-title {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-strong);
}

.comparison-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0 0 var(--sp-5);
}

.comparison-pane {
  margin: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.comparison-pane:last-of-type { margin-bottom: 0; }

.comparison-pane-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.comparison-pane-eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--text-strong);
}
.comparison-pane-caption {
  font-size: var(--fs-100);
  color: var(--text-muted);
  font-style: italic;
}

.comparison-pane-frame {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comparison-pane-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
}
.comparison-pane-frame--scrollable {
  max-height: 60vh;
  overflow-y: auto;
  align-items: flex-start;
}
.comparison-pane-frame--scrollable img {
  max-height: none;
}

.case-scroll {
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-xl);
  /* Force the scroller onto a single compositor layer so autoplay videos
     (which Chromium auto-promotes) can't drift independently from the
     surrounding text during scroll. */
  transform: translateZ(0);
}

.notify-scroll {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius-xl);
}

dialog.notify-modal {
  overflow: hidden;
  position: relative;
}

/* Custom scrollbar thumb for modals — no native arrows possible */
.modal-scroll-track {
  position: absolute;
  top: 14px;
  right: 8px;
  bottom: 14px;
  width: 5px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s ease;
}

dialog[open]:hover .modal-scroll-track,
.rail:hover .modal-scroll-track,
.modal-scroll-track.active {
  opacity: 1;
}

.modal-scroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  /* Translucent glass thumb — adapts to whatever's behind it */
  background: rgba(20, 22, 26, 0.32);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
  will-change: transform, height;
}

dialog[open]:hover .modal-scroll-thumb {
  background: rgba(20, 22, 26, 0.46);
  border-color: rgba(255, 255, 255, 0.26);
}

/* Page scrollbar — fixed-position overlay, doesn't push content */
.page-scroll-track {
  position: fixed;
  top: 14px;
  right: 8px;
  bottom: 14px;
  width: 5px;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.page-scroll-track.active,
.page-scroll-track:hover {
  opacity: 1;
}

.page-scroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(20, 22, 26, 0.32);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  transition: background 0.15s, border-color 0.15s;
  will-change: transform, height;
}

.page-scroll-track:hover .page-scroll-thumb,
.page-scroll-track.active .page-scroll-thumb {
  background: rgba(20, 22, 26, 0.46);
  border-color: rgba(255, 255, 255, 0.26);
}

dialog.case-study::backdrop {
  background: rgba(20, 22, 26, 0.55);
}

/* Hero zone — edge-to-edge */
.case-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  background: var(--surface);
  color: var(--brand);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

/* Brand-tinted gradient only when the hero is showing a placeholder SVG —
   for real photo/video heroes, no flash of brand color before media loads. */
.case-hero:not(:has(img)):not(:has(video)) {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, var(--brand) 5%, var(--surface)));
}

.case-hero[hidden] { display: none; }

.case-hero svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-hero img,
.case-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero pair — two stills side-by-side (e.g. SmartHQ + ROUX title photos) */
.case-hero.case-hero--pair {
  display: flex;
  gap: 1px;
  background: var(--border);
}
.case-hero--pair .case-hero-pair-item {
  flex: 1 1 50%;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.case-hero--pair .case-hero-pair-item img,
.case-hero--pair .case-hero-pair-item video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content padding — capped + centered inside the wide modal */
.case-content {
  padding: clamp(1.75rem, 1.5vw + 1.25rem, 2.75rem) clamp(1.5rem, 2vw + 1rem, 3rem);
  padding-bottom: clamp(4rem, 4vw + 2rem, 6rem);
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

/* Empty hidden containers (gallery, impact, stats) shouldn't take up
   gap space when there's no content. Force display:none on hidden. */
.case-content > [hidden] { display: none !important; }

/* Header */
.case-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.case-meta {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin: 0;
}

.case-title {
  font-size: clamp(1.7rem, 1vw + 1.4rem, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  max-width: 22ch;
  color: var(--text);
}

.case-hook {
  font-size: var(--fs-400);
  line-height: 1.5;
  color: var(--text-muted);
  margin: var(--sp-2) 0 0;
  max-width: 65ch;
}

/* Reading width inside the centered content column — natural fill */
.case-section-body,
.case-insight-body {
  max-width: 100%;
}

.case-hook[hidden] { display: none; }

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.case-tags[hidden] { display: none; }

.case-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(20, 22, 26, 0.04);
}

/* Stats row */
.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.case-stats[hidden] { display: none; }

.case-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.case-stat-num {
  font-size: var(--fs-500);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  line-height: 1.1;
}

.case-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  font-weight: 600;
}

/* Sections */
.case-sections {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.case-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Inline media within a section — sits below the body text */
.case-section-media {
  margin-top: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.case-section-eyebrow {
  font-size: 0.625rem;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.case-section-label {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin: 0;
}

.case-section-body {
  font-size: var(--fs-300);
  line-height: 1.65;
  color: var(--text-muted);
}

.case-section-body p {
  margin: 0 0 var(--sp-3);
}

.case-section-body p:last-child { margin-bottom: 0; }

.case-section-body strong {
  color: var(--text);
  font-weight: 600;
}

/* Impact list */
.impact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.impact-list li {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text-muted);
}

.impact-list li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 0.55em;
}

.impact-list li strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 4px;
}

/* Inline media gallery */
.case-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.case-gallery-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.case-gallery-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.case-gallery-block {
  position: relative;
  background: var(--surface);
  color: var(--brand);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 22, 26, 0.06);
  contain: paint;
}

/* SVG motifs (placeholder fallback) need explicit sizing since they
   replace what was an absolute-positioned element */
.case-gallery-block:not(:has(img)):not(:has(video)) {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, var(--brand) 5%, var(--surface)));
}
.case-gallery-pair .case-gallery-block:not(:has(img)):not(:has(video)) {
  aspect-ratio: 4 / 3;
}

.case-gallery-block svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-gallery-block img,
.case-gallery-block video {
  /* Aspect-ratio on the media itself — no absolute positioning means
     video and parent share the same compositor layer (no scroll lag). */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.case-gallery-pair .case-gallery-block img,
.case-gallery-pair .case-gallery-block video {
  aspect-ratio: 4 / 3;
}

.case-gallery-caption {
  font-size: var(--fs-100);
  color: var(--text-dim);
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.case-gallery-pair-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.case-gallery-pair-item .case-gallery-caption {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-size: 0.6875rem;
}

/* Key Insight — restrained editorial coda */
.case-insight {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  margin-top: calc(0px - var(--sp-4));
}

.case-insight[hidden] { display: none; }

.case-insight-label {
  font-size: 0.6875rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin: 0 0 var(--sp-3);
}

.case-insight-body {
  font-size: var(--fs-400);
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
  margin: 0;
}

dialog.case-study::backdrop {
  background: rgba(20, 22, 26, 0.55);
}

.modal-inner {
  padding: clamp(1.75rem, 1.5vw + 1.25rem, 3rem);
  overflow-y: auto;
  max-height: 90vh;
}

.modal-close {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.15s;
}
.modal-close:hover {
  background: rgba(20, 22, 26, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
}

.modal-meta {
  font-size: var(--fs-100);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin: 0 0 var(--sp-3);
}

.modal-title {
  font-size: var(--fs-700);
  font-weight: 700;
  margin: 0 0 var(--sp-6);
  letter-spacing: -0.025em;
  line-height: 1.05;
  max-width: 22ch;
}

.modal-body p {
  font-size: var(--fs-300);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}

.modal-body p:last-child { margin-bottom: 0; }

.modal-body strong { color: var(--text); font-weight: 600; }

.modal-todo {
  font-size: var(--fs-100) !important;
  color: var(--text-dim) !important;
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-5) !important;
}

.modal-todo code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

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

@media (max-width: 960px) {
  body {
    grid-template-columns: 1fr;
    padding: var(--sp-3);
  }
  /* Rail stays first in DOM and at the top of the page on smaller widths —
     reads as a business-card / studio introduction before the work below.
     (Earlier swap to order: 1/2 was reverted on user feedback.) */
  .rail {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .rail-scroll {
    max-height: none;
    overflow-y: visible;
  }
  .content { padding: 0 var(--sp-2) var(--sp-7); }

  /* Drasil preview image: anchored to the left on desktop for the
     "screenshot pinned to the corner" feel. Once the page collapses to
     single column, center it so the preview reads as the focal element
     of the card rather than off-balance to one side. Width stays 70%
     and auto margins compute equal symmetric gutters on both sides. */
  .prod-preview {
    margin-left: auto;
    margin-right: auto;
  }

  /* Inner scroll containers carry their own border-radius. With the
     dialog at zero radius, those rounded inner corners read as a
     "cropped frame" against the square dialog. Match the dialog. */
  .case-scroll,
  .client-scroll,
  .notify-scroll {
    border-radius: 0;
  }
}

@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
  .studio-stats { grid-template-columns: 1fr; gap: var(--sp-3); }
  .studio-profile-actions { width: 100%; }
}

/* In the rail-on-top zone (<=960px), the page is single-column and modals
   should match that "sheet" aesthetic rather than pretending to be a small
   floating card. Especially the comparison modal at 96vw lands within
   ~14-22px of the side edges — the 16px corner radius reads as cropping
   instead of an intentional card edge. Going full-bleed with no radius
   resolves that across all four modals at once. */
@media (max-width: 960px) {
  /* Case-study: editorial, scroll-heavy, hero video. Forced full-screen
     with 100svh so mobile browser chrome (URL bar) doesn't clip the
     bottom. */
  dialog.case-study {
    max-width: 100vw;
    width: 100vw;
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
    margin: 0;
  }

  /* Building / client / comparison: short-content modals. Stay auto-height
     so short content doesn't leave dead space, but go full-bleed
     horizontally with no radius. `margin: auto 0` keeps short modals
     vertically centered in the viewport. */
  dialog.building-modal,
  dialog.client-modal,
  dialog.comparison-modal {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 100svh;
    margin: auto 0;
    border-radius: 0;
  }
}

@media (max-width: 700px) {
  .client-row { grid-template-columns: auto 1fr auto; gap: var(--sp-3); }
  .client-arrow { display: none; }
}

/* ============================================================
   COOKIE CONSENT BANNER — strict opt-in
   bottom-center pillowy card, equal-weight Only-necessary / Accept-all
   ============================================================ */
.cookie-banner {
  --enter-y: 14px;
  /* Anchor to the right content column: mirror the body grid math.
     body: max-width 1500px, centered, padding sp-5,
     grid: clamp(20rem, 22vw, 25rem) [rail] + sp-5 [gap] + 1fr [content].   */
  --page-edge: max(0px, calc((100vw - 1500px) / 2));
  --rail-w: clamp(20rem, 22vw, 25rem);
  position: fixed;
  left: calc(var(--page-edge) + var(--sp-5) + var(--rail-w) + var(--sp-5));
  right: calc(var(--page-edge) + var(--sp-5));
  bottom: var(--sp-5);
  margin: 0 auto;
  width: auto;
  max-width: 840px;
  z-index: 1200;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.65) 100%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  display: grid;
  gap: 0.8rem;
  opacity: 0;
  transform: translateY(var(--enter-y));
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms ease;
}

.cookie-banner.is-visible {
  --enter-y: 0px;
  opacity: 1;
  pointer-events: auto;
}

.cookie-banner__eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}

.cookie-banner__copy {
  margin: 0;
  font-size: var(--fs-200);
  line-height: 1.5;
  color: var(--text-muted);
}

.cookie-banner__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cookie-banner__btn {
  min-height: 40px;
  padding: 0 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.cookie-banner__btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

.cookie-banner__btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--text) 24%, transparent);
  outline-offset: 2px;
}

/* Banner positioning aligns with the body's structural collapse at 960px:
   the default `left` formula anchors the banner to the right of the rail,
   so once the rail moves to the top of the page the formula points into
   empty space. Reposition full-width edge-to-edge as soon as the rail
   moves out of the side. */
@media (max-width: 960px) {
  .cookie-banner {
    left: var(--sp-3);
    right: var(--sp-3);
    bottom: var(--sp-3);
    width: auto;
    transform: translateY(var(--enter-y));
  }
}

/* Actions go from right-aligned row to a stacked equal-width grid only
   on true phone widths — at 700–960px the row still has plenty of room. */
@media (max-width: 700px) {
  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cookie-banner__btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* ============================================================
   BUILDING MODAL — content-first, no hero, max 2 images at bottom
   Distinct from case-study modal: no big imagery up top, no insight
   quote, no stats. Just title → hook → description sections → images.
   ============================================================ */
dialog.building-modal {
  --brand: var(--text);
  border: 0;
  padding: 0;
  background: var(--surface);
  border-radius: var(--radius-xl);
  max-width: min(48rem, 94vw);
  width: 100%;
  max-height: 90vh;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  overflow: hidden;
  position: relative;
}

dialog.building-modal::backdrop {
  background: rgba(20, 22, 26, 0.55);
}

.building-scroll {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.building-inner {
  padding: clamp(2rem, 1.5vw + 1.5rem, 2.75rem) clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.building-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.building-meta {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.building-title {
  margin: 0;
  font-size: var(--fs-700);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text);
}

.building-hook {
  margin: 0;
  font-size: var(--fs-300);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
}

.building-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.building-tag {
  font-size: var(--fs-100);
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.building-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.building-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.building-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0;
}

.building-section-body {
  font-size: var(--fs-200);
  line-height: 1.65;
  color: var(--text-muted);
}

.building-section-body p { margin: 0 0 0.7em; }
.building-section-body p:last-child { margin-bottom: 0; }
.building-section-body strong { color: var(--text); font-weight: 600; }

.building-images {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.building-images.has-one { grid-template-columns: 1fr; }
.building-images.has-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.building-image-block {
  background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  position: relative;
  color: var(--brand);
}

.building-image-block img,
.building-image-block video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stacked layout — overrides has-two side-by-side grid.
   Larger gap between figures so each (image + its caption) reads as a unit
   clearly separated from the next. */
.building-images.stacked {
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

/* Framed-image treatment — image sits at its natural size on a tinted field
   with a drop shadow. Container grows to fit the image + padding, so there's
   no aspect-ratio mismatch. Per-case bg color set via theme-* below. */
.building-images.theme-hellscape .building-image-block,
.building-images.theme-pointzerotwo .building-image-block {
  aspect-ratio: auto;
  padding: 7%;
}
.building-images.theme-hellscape .building-image-block img,
.building-images.theme-hellscape .building-image-block video,
.building-images.theme-pointzerotwo .building-image-block img,
.building-images.theme-pointzerotwo .building-image-block video {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: initial;
  display: block;
  border-radius: 6px;
  box-shadow:
    0 18px 40px rgba(22, 27, 38, 0.20),
    0 6px 16px rgba(22, 27, 38, 0.12);
}

/* Hellscape — light lavender-slate field */
.building-images.theme-hellscape .building-image-block {
  background:
    radial-gradient(120% 100% at 18% 14%, #F3ECFF 0%, rgba(243,236,255,0) 42%),
    linear-gradient(145deg, #EEF2FF 0%, #E7ECF8 52%, #DDE5F4 100%);
  border: 1px solid #D7DEEE;
}

/* Pointzerotwo — cool blue-gray field (sibling to Hellscape, different hue) */
.building-images.theme-pointzerotwo .building-image-block {
  background:
    radial-gradient(120% 100% at 18% 14%, #E8F0FF 0%, rgba(232,240,255,0) 40%),
    linear-gradient(145deg, #F3F7FD 0%, #E8EEF7 54%, #D9E2EE 100%);
  border: 1px solid #CCD7E6;
}

.building-image-block svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Figure wrapper — image block + caption sibling.
   Tight gap so the caption visually hugs the image it describes. */
.building-image-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Caption sits OUTSIDE the colored block, left-aligned and flush with the
   block's left edge. Editorial small italic, no divider line. */
.building-image-caption {
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.005em;
  text-align: left;
  color: color-mix(in srgb, var(--text-muted) 78%, transparent);
}

@media (max-width: 700px) {
  /* Modal sizing for these dialogs is handled in the 960px block above
     (rail-on-top zone goes full-bleed). Phone-only refinements below. */
  .building-images.has-two { grid-template-columns: 1fr; }

  /* Framed building images: tighten padding so the tinted field doesn't
     swallow the limited phone width, and pull stacked figures closer
     together (2.25rem reads airy once they're single-column). */
  .building-images.theme-hellscape .building-image-block,
  .building-images.theme-pointzerotwo .building-image-block {
    padding: 5%;
  }
  .building-images.stacked { gap: 1.5rem; }

  /* Captions stay 0.8125rem on phone (a bump would compete with the image)
     but contrast lifts so they're easier to read on smaller screens. */
  .building-image-caption {
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
  }

  /* Comparison sub-modal: let the dialog's main scroller own the whole
     experience on phone. Nested pane scroll feels sticky on touch, and
     the 60vh caps make landscape Before images look small while leaving
     dead width unused. Lift the caps, drop the inner overflow. */
  .comparison-pane-frame--scrollable {
    max-height: none;
    overflow: visible;
  }
  .comparison-pane-frame img {
    max-height: none;
  }
  .comparison-scroll {
    padding: 1.25rem 1rem;
  }
  .comparison-pane-row {
    gap: 0.5rem 0.75rem;
  }
}