@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Merriweather:wght@300;400;700&family=BJCree:wght@400&family=Roboto:wght@400;500;700&display=swap');

:root {
  --font-header: 'Cinzel', Georgia, serif;
  --font-body: 'Merriweather', Georgia, serif;
  --font-copy: 'BJCree', Georgia, serif;
  /* Locked substitute for Trajan Pro (free): Cinzel — already loaded above. */
  --font-trajan: 'Cinzel', 'Times New Roman', Times, serif;

  /* Homepage */
  --color-olive-deep: #4A5533;   /* homepage background */

  /* Interior pages — painted Mediterranean palette */
  --color-marble: #F2E8D2;       /* cream marble — page backgrounds, banners */
  --color-parchment: #E8DCC0;    /* parchment — card backgrounds */
  --color-ink: #3B2A1C;          /* warm dark brown — body text, headings */
  --color-ink-soft: #6B4E3D;     /* secondary text, captions */
  --color-terracotta: #A8521C;   /* accents, hovers */
  --color-olive: #6B7D3E;        /* laurel, botanical accents */
  --color-mediterranean: #3A7CA5; /* sea, sky accents */
  --color-gold: #E6B800;         /* highlights, gold accents */
  --color-gold-deep: #B8860B;    /* hover state for gold */
  --color-shadow: rgba(59, 42, 28, 0.18); /* warm shadow for depth */

  /* Homepage text on olive */
  --color-cream: #E8DCC0;        /* copy text on homepage olive */

  /* Locked intro spec palette (supreme over older tokens where they conflict) */
  --spec-bg: #10130e;
  --spec-bronze: #BB6A3D;
  --spec-bronze-hi: #C9A76A;
  --spec-bronze-dark: #4A381E;
  --spec-patina: #6D7456;
  --spec-text-light: #D6D2C4;
  --spec-copy-muted: #B9B39E;
  --spec-column: 980px;
  --spec-canvas-w: 1536;
  --spec-inset: calc((var(--spec-canvas-w) * 1px - var(--spec-column)) / 2);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Breakpoints (mobile-first) */
  --bp-sm: 640px;   /* large phone / small tablet portrait */
  --bp-md: 1024px;  /* tablet landscape / small laptop */
  --bp-lg: 1280px;  /* desktop */
  --bp-xl: 1536px;  /* large desktop */

  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-quick: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-scene: 900ms;

  /* Type scale (interior + shared) */
  --fs-body: 17px;
  --fs-h3: 20px;
  --fs-h2: 28px;
  --fs-h1: 40px;
  --fs-hero: 56px;
  --lh-body: 1.65;
  --lh-header: 1.2;
}

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

html {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-family: var(--font-body);
  color: var(--color-ink);
  background-color: var(--color-olive-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html:has(body:not(.homepage)) {
  background-color: var(--color-marble);
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-header);
  line-height: var(--lh-header);
  color: var(--color-ink);
  font-weight: 600;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

a {
  color: var(--color-terracotta);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-out-soft);
}

a:hover {
  color: var(--color-gold-deep);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: max(var(--sp-4), env(safe-area-inset-left, 0px));
  background: var(--color-ink);
  color: var(--color-olive);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 4px;
  z-index: 10000;
  transition: top var(--dur-quick) var(--ease-out-soft);
}

.skip-link:focus {
  top: max(var(--sp-4), env(safe-area-inset-top, 0px));
}

.noscript-banner {
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-gold);
  border-bottom: 2px solid var(--color-terracotta);
}

.noscript-banner a {
  color: var(--color-terracotta);
  font-weight: 700;
}

body.homepage .noscript-banner {
  background: var(--spec-bronze);
  color: var(--spec-text-light);
  border-bottom-color: var(--spec-bronze-hi);
}

body.homepage .noscript-banner a {
  color: var(--spec-bronze-hi);
}

.site-footer {
  margin-top: auto;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  background: var(--color-parchment);
}

.site-footer__links {
  display: flex;
  justify-content: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-4);
  font-family: var(--font-header);
  font-size: 14px;
}

.site-footer__links a {
  color: var(--color-ink);
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-terracotta);
  text-decoration: underline;
}

.site-footer__links a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.site-footer__copyright {
  font-size: 13px;
  color: var(--color-ink-soft);
}

/* ===========================
   Homepage (emrAnI)
   =========================== */

html:has(body.homepage) {
  background-color: var(--spec-bg);
}

body.homepage {
  height: 100vh;
  overflow: hidden;
  background-color: var(--spec-bg);
}

/* Interior pages: inset content from display cutouts when viewport-fit=cover is set. */
body:not(.homepage) {
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  background-color: var(--color-marble);
}

.home {
  flex: 1;
  height: 100vh;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* Artboard 1536×1280px — see _dev/opencode/PIXEL_SPEC_LEDGER.md (Option B). */
.home__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --home-scale-boost: 1.2;
  /* Mobile-up: bind to content extents (883px wordmark, 1167px content height) when that gives a larger scale than canvas-contain × boost. */
  --home-scale: max(
    calc(min(100vw / 1536px, 100vh / 1280px) * var(--home-scale-boost)),
    min(100vw / 883px, 100vh / 1167px)
  );
}

@supports (height: 100dvh) {
  .home__viewport {
    /* Closer to mobile visible height when browser chrome shows or hides (pairs with visualViewport in JS). */
    --home-scale: max(
      calc(min(100vw / 1536px, 100dvh / 1280px) * var(--home-scale-boost)),
      min(100vw / 883px, 100dvh / 1167px)
    );
  }
}

/*
 * The canvas uses transform:scale while still occupying 1536×1280 in layout.
 * Without this shell, overflow:hidden on the viewport clips the unscaled box and
 * the bottom of the scene (hands + footer) can disappear off-screen.
 */
.home__scale-shell {
  width: calc(1536px * var(--home-scale, 1));
  height: calc(1280px * var(--home-scale, 1));
  overflow: hidden;
  flex-shrink: 0;
}

.home__canvas {
  --canvas-w: 1536;
  --canvas-h: 1280;
  width: calc(var(--canvas-w) * 1px);
  height: calc(var(--canvas-h) * 1px);
  position: relative;
  /* Fit scaling is set by inline JS on .home__viewport as --home-scale. */
  transform: scale(var(--home-scale, 1));
  transform-origin: top left;
}

/* 980px centered column: coordinates below are in canvas space inside this inset. */
.home__content {
  position: absolute;
  left: var(--spec-inset);
  top: 0;
  width: var(--spec-column);
  height: calc(var(--canvas-h) * 1px);
}

.home__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(0,0,0,0) 55%, rgba(0,0,0,0.22) 100%),
    radial-gradient(circle at 50% 38%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.32) 100%);
  opacity: 0;
}

/* Hero: sole vertical rhythm (flex + gap); canvas anchor + group scale unchanged. */
.home__hero {
  position: absolute;
  left: 0;
  top: 122px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: -47px;
  line-height: 0;
}

.home__hero > * {
  margin: 0;
}

/* Logo — raster wordmark only (no CSS text). */
.home__logo {
  z-index: 10;
  max-width: 100%;
  line-height: 0;
  margin: 0;
  transform: translateX(-19px);
}

.home__logo-img {
  height: 230px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: -43px 0 -88px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.55));
  user-select: none;
  -webkit-user-drag: none;
}

/* Head */
.home__head-wrap {
  position: relative;
  width: 700px;
  height: 641px;
  z-index: 30;
  margin: 0;
}

.home__head-wrap picture {
  display: block;
  line-height: 0;
}

.home__head-wrap::before {
  content: "";
  position: absolute;
  /* Sandbox-approved warm halo behind head (rim light + faint plate). */
  inset: -120px -140px 0 -140px;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%,
      rgba(201, 167, 106, 0.18),
      rgba(187, 106, 61, 0.12) 42%,
      rgba(0, 0, 0, 0) 72%),
    radial-gradient(circle at 50% 36%,
      rgba(201, 167, 106, 0.3),
      rgba(201, 167, 106, 0) 46%);
  filter: blur(18px);
  pointer-events: none;
}

.home__head {
  display: block;
  width: 700px;
  height: 641px;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.55));
  user-select: none;
  -webkit-user-drag: none;
  margin: 0;
}

/* Hands */
.home__hands {
  /* Pulled out of hero flex flow; pinned to canvas y=819 (hero top 122 + 697). */
  position: absolute;
  left: 0;
  top: 697px;
  width: 100%;
  height: max(410px, 413px);
  z-index: 35;
  margin: 0;
}

.home__hands picture {
  display: contents;
}

.home__hand-link {
  position: absolute;
  top: 0;
  display: grid;
  place-items: center;
  text-decoration: none;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
  transition: transform var(--dur-base) var(--ease-out-soft);
  transform-origin: center;
}

.home__hand-link--left {
  width: 410px;
  height: 410px;
  left: calc(50% - 204px - 205px + 0px);
  transform: rotate(-14deg);
}

.home__hand-link--right {
  width: 413px;
  height: 413px;
  left: calc(50% + 204px - 206.5px + 0px);
  transform: rotate(11deg);
}

.home__hand-link--left:hover,
.home__hand-link--left:focus-visible {
  transform: rotate(-14deg) translateY(-12px);
}

.home__hand-link--right:hover,
.home__hand-link--right:focus-visible {
  transform: rotate(11deg) translateY(-12px);
}

.home__hand-link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 6px;
  border-radius: 10px;
}

.home__hand-img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.home__hand-link--left .home__hand-img {
  width: 410px;
  height: 410px;
}
.home__hand-link--right .home__hand-img {
  width: 413px;
  height: 413px;
}

/* Hand labels: visually hidden (kept in DOM as accessible name for the link). */
.home__hand-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer inside canvas */
.home__footer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.home__footer-links {
  position: absolute;
  left: 50%;
  /* Sandbox-tuned 2026-04-24 (was 1230 from ledger; moved up to clear viewport scale clip). */
  top: 1127px;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-trajan);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--spec-text-light);
  z-index: 45;
  display: flex;
  gap: 18px;
  align-items: center;
  line-height: 16px;
  pointer-events: auto;
}

.home__footer-links a {
  color: var(--spec-text-light);
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.home__footer-links a:hover,
.home__footer-links a:focus-visible {
  text-decoration: underline;
}

.home__footer-links a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.home__footer-copy {
  position: absolute;
  left: 50%;
  /* Sandbox-tuned 2026-04-24 (was 1266; moved up to clear viewport scale clip). */
  top: 1153px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-trajan);
  font-size: 14px;
  color: rgba(185, 179, 158, 0.70);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  z-index: 45;
  line-height: 14px;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .home__hand-link {
    transition: none;
  }
  .home__hand-link--left:hover,
  .home__hand-link--left:focus-visible {
    transform: rotate(-14deg);
  }
  .home__hand-link--right:hover,
  .home__hand-link--right:focus-visible {
    transform: rotate(11deg);
  }
}

/* ===========================
   Interior pages (shared)
   =========================== */

body:not(.homepage) main {
  flex: 1;
}

.contact {
  padding-top: var(--sp-10);
}

/* Page transition overlay (main.js) */
.flash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(246, 231, 176, 1);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}

.flash-overlay.active {
  opacity: 1;
}

.flash-overlay.entering {
  opacity: 0;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) max(var(--sp-5), env(safe-area-inset-right, 0px)) var(--sp-4) max(var(--sp-5), env(safe-area-inset-left, 0px));
  padding-top: max(var(--sp-4), env(safe-area-inset-top, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, var(--color-marble) 60%, transparent);
  z-index: 100;
}

.site-header__brand {
  font-family: var(--font-header);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--color-terracotta);
}

.site-header__brand .ai-letter {
  font-style: italic;
  color: var(--color-gold);
}

.site-header__nav {
  display: flex;
  gap: var(--sp-5);
}

.site-header__nav a {
  font-family: var(--font-header);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-decoration: none;
}

.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] {
  color: var(--color-terracotta);
}

.site-header__nav a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Breadcrumb (visible trail; matches BreadcrumbList JSON-LD) */
.breadcrumb {
  margin-bottom: var(--sp-4);
}

.breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-header);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
}

.breadcrumb__list li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.breadcrumb__list li + li::before {
  content: "/";
  font-weight: 400;
  opacity: 0.55;
}

.breadcrumb a {
  color: var(--color-ink-soft);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-terracotta);
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-ink);
  font-weight: 600;
}

.projects .breadcrumb__list {
  justify-content: center;
}

.breadcrumb--contact {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--sp-5);
  margin-bottom: var(--sp-3);
}

.breadcrumb--allie {
  margin-bottom: var(--sp-5);
}

.allie__hero .breadcrumb__list {
  justify-content: center;
}

/* Mute — clear fixed header + notches */
.mute-toggle {
  position: fixed;
  top: max(var(--sp-4), env(safe-area-inset-top, 0px));
  right: max(var(--sp-4), env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 200;
  color: var(--color-ink);
  transition: color var(--dur-quick) var(--ease-out-soft);
}

.mute-toggle:hover {
  color: var(--color-terracotta);
}

.mute-toggle:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.mute-toggle[aria-pressed="true"] .icon-sound {
  display: none;
}

.mute-toggle[aria-pressed="true"] .icon-muted {
  display: block;
}

.mute-toggle[aria-pressed="false"] .icon-sound {
  display: block;
}

.mute-toggle[aria-pressed="false"] .icon-muted {
  display: none;
}

/* Projects index */
.projects {
  padding: var(--sp-10) var(--sp-5) var(--sp-8);
  max-width: 960px;
  margin: 0 auto;
}

.projects h1 {
  text-align: center;
  margin-bottom: var(--sp-7);
}

.projects__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 640px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.project-card {
  background: var(--color-parchment);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--color-shadow);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-soft), box-shadow var(--dur-base) var(--ease-out-soft);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--color-shadow);
}

.project-card > a {
  color: inherit;
  text-decoration: none;
  display: block;
}

.project-card > a:hover {
  color: inherit;
}

.project-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-card__content {
  padding: var(--sp-5);
}

.project-card__title {
  font-family: var(--font-header);
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-2);
  color: var(--color-ink);
}

.project-card__meta {
  font-size: 14px;
  color: var(--color-ink-soft);
  margin-bottom: var(--sp-3);
}

.project-card__outcome {
  font-size: 15px;
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}

.project-card__link {
  font-family: var(--font-header);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--color-terracotta);
}

.project-card__link::after {
  content: " →";
}

/* Allie case study */
.allie {
  padding-bottom: var(--sp-10);
}

.allie__hero {
  padding: var(--sp-10) var(--sp-5) var(--sp-7);
  text-align: center;
}

.allie__hero h1 {
  margin-bottom: var(--sp-3);
}

.allie__hero p {
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
  max-width: 600px;
  margin: 0 auto;
}

.allie__act {
  padding: var(--sp-7) var(--sp-5);
  max-width: 800px;
  margin: 0 auto;
}

.act {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
}

.act.visible {
  opacity: 1;
  transform: translateY(0);
}

.act__sprite {
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin-bottom: var(--sp-5);
}

.act__copy {
  font-size: var(--fs-body);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto;
}

.act__heading {
  font-family: var(--font-header);
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-5);
}

.act__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.act__tool-figure {
  margin: 0;
  flex: 0 1 100px;
  text-align: center;
}

.act__tool-figure figcaption {
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-top: var(--sp-2);
}

.act__tool {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out-soft), transform var(--dur-base) var(--ease-out-soft);
}

.act__tool.visible {
  opacity: 1;
  transform: translateY(0);
}

.act__pantheon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
}

.act__god {
  flex: 0 1 220px;
  margin: 0;
  text-align: center;
}

.act__god .act__tool {
  width: 80px;
  height: 80px;
}

.act__god figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin-top: var(--sp-2);
}

.act h2 {
  margin-bottom: var(--sp-5);
}

/* Cupid bridge → apothecary (allie.js toggles .visible) */
.cupids-bridge {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cupids-bridge__inner {
  position: relative;
  width: 100%;
  max-width: 600px;
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft);
}

.cupids-bridge__inner.visible {
  opacity: 1;
  transform: translateY(0);
}

.cupids-banner {
  width: 100%;
  height: auto;
}

.cupids-bridge__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-header);
  font-size: var(--fs-h3);
  color: var(--color-ink);
  width: 100%;
  padding: 0 var(--sp-5);
  box-sizing: border-box;
  line-height: var(--lh-header);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft);
  pointer-events: none;
}

.cupids-bridge__text.visible {
  opacity: 1;
}

.marble-threshold {
  line-height: 0;
}

.marble-threshold svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   /contact/ page — painted chat-thread layout (locked 2026-04-27)
   ============================================================ */

/* Ensure HTML `hidden` attribute always wins over author display rules */
[hidden] { display: none !important; }

body.contact-page {
  background: var(--color-parchment);
  margin: 0;
  min-height: 100vh;
  /* Hide site chrome on contact page only */
}
body.contact-page .site-header,
body.contact-page .site-footer,
body.contact-page .breadcrumb,
body.contact-page .skip-btn,
body.contact-page .scrolly-cta {
  display: none !important;
}

.contact {
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  width: 100vw;
  padding: 0;
  background: var(--color-parchment);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.contact::-webkit-scrollbar { width: 8px; }
.contact::-webkit-scrollbar-thumb { background: rgba(59, 42, 28, 0.4); border-radius: 4px; }
.contact::-webkit-scrollbar-track { background: transparent; }

.contact__frame {
  background-image: url('/assets/scenes/contact-painted-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1023 / 1537;
  max-width: 1024px;
  position: relative;
  width: min(100vw, calc(100dvh * 1023 / 1537));
  height: auto;
  margin: 0 auto;
  flex-shrink: 0;
}

.contact__form {
  position: relative;
}

.contact__input--headache {
  position: absolute;
  top: 25.3%;
  left: 46.3%;
  width: 39%;
  height: 8.2%;
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 1.6vh;
  color: #3b2a1c;
  padding: 0;
  box-sizing: border-box;
  resize: none;
  overflow: auto;
}

.contact__input {
  position: absolute;
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 1.6vh;
  color: #3b2a1c;
  padding: 0;
  box-sizing: border-box;
}

.contact__input:-webkit-autofill,
.contact__input:-webkit-autofill:hover,
.contact__input:-webkit-autofill:focus,
.contact__input:-webkit-autofill:active,
.contact__input--headache:-webkit-autofill,
.contact__input--headache:-webkit-autofill:hover,
.contact__input--headache:-webkit-autofill:focus,
.contact__input--headache:-webkit-autofill:active,
.contact__select:-webkit-autofill,
.contact__select:-webkit-autofill:hover,
.contact__select:-webkit-autofill:focus,
.contact__select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #3b2a1c !important;
  caret-color: #3b2a1c;
  transition: background-color 5000s ease-in-out 0s;
}

.contact__input:autofill,
.contact__input--headache:autofill,
.contact__select:autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: #3b2a1c !important;
  caret-color: #3b2a1c;
  transition: background-color 5000s ease-in-out 0s;
}

#f-name    { top: 39.3%; left: 47.1%; width: 38.2%; height: 1.4%; }
#f-email   { top: 45.8%; left: 45%;   width: 39.6%; height: 1.8%; }
#f-phone   { top: 52.8%; left: 46.8%; width: 35.7%; height: 1.8%; }
#f-website { top: 59.9%; left: 46.8%; width: 36.2%; height: 1.6%; }

.contact__dropdown {
  position: absolute;
  background-image: url('/assets/icons/parchment-dropdown.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

#dd-budget { top: 51.5%; left: 32.4%; width: 67.6%; height: 35.7%; }
#dd-when   { top: 57.8%; left: 32.4%; width: 67.6%; height: 35.7%; }

.contact__select {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border: 0;
  margin: 0;
  padding: 0 12% 0 8%;
  background: transparent;
  color: #3b2a1c;
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 1.6vh;
  line-height: 1;
  box-sizing: border-box;
}

.contact__send {
  position: absolute;
  top: 88%;
  left: 50.3%;
  transform: translateX(-50%);
  width: 12%;
  height: 9%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

#f-budget  { top: 65.7%; left: 43.1%; width: 46.3%; height: 4.6%; }
#f-when    { top: 73.3%; left: 42.5%; width: 46.3%; height: 2.7%; }

/* Turnstile must remain DOM-mounted but visually hidden */
.contact__form .cf-turnstile {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.contact__send {
  outline: none;
}
.contact__send:focus-visible {
  outline: 1px dashed rgba(91, 42, 42, 0.4);
  outline-offset: 4px;
}

/* Success state — replaces chat thread, page sits static (no auto-redirect per locked spec) */
.contact__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--color-parchment);
  text-align: center;
  font-family: var(--bubble-font-family, system-ui, sans-serif);
  color: var(--bubble-text-color, #3b2a1c);
  z-index: 100;
}
.contact__success h2 {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  margin: 0 0 12px 0;
}
.contact__success p { margin: 6px 0; font-size: 17px; }
.contact__success-spam { font-size: 14px; color: rgba(59,42,28,0.65); margin-top: 16px; }

/* General error message */
.contact__error {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: color-mix(in srgb, #c44 90%, transparent);
  color: white;
  border-radius: 12px;
  font-family: var(--bubble-font-family, system-ui, sans-serif);
  font-size: 14px;
  z-index: 11;
}

.contact__input--headache::-webkit-scrollbar { width: 10px; }
.contact__input--headache::-webkit-scrollbar-track { background: transparent; }
.contact__input--headache::-webkit-scrollbar-thumb { background-color: #7a4a2a; border-radius: 4px; opacity: 0.6; }
.contact__input--headache { scrollbar-width: thin; scrollbar-color: #7a4a2a transparent; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-header);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: var(--sp-3) var(--sp-6);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--dur-quick) var(--ease-out-soft), color var(--dur-quick) var(--ease-out-soft);
  border: none;
}

.btn--primary {
  background: var(--color-gold);
  color: var(--color-ink);
}

.btn--primary:hover {
  background: var(--color-gold-deep);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border: 2px solid var(--color-ink);
  color: var(--color-ink);
}

.btn--ghost:hover {
  background: var(--color-ink);
  color: var(--color-marble);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Allie — skip scrolly controls */
.skip-btn {
  position: fixed;
  top: max(var(--sp-4), env(safe-area-inset-top, 0px));
  right: max(
    calc(env(safe-area-inset-right, 0px) + 44px + var(--sp-4) + var(--sp-3)),
    5.5rem
  );
  font-family: var(--font-header);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--color-ink);
  background: var(--color-marble);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 4px;
  z-index: 200;
  border: 1px solid var(--color-parchment);
  transition: background-color var(--dur-quick) var(--ease-out-soft), color var(--dur-quick) var(--ease-out-soft);
}

.skip-btn:hover {
  background: var(--color-parchment);
  color: var(--color-terracotta);
}

.scrolly-cta {
  position: fixed;
  bottom: max(var(--sp-5), env(safe-area-inset-bottom, 0px));
  right: max(var(--sp-5), env(safe-area-inset-right, 0px));
  background: var(--color-gold);
  color: var(--color-ink);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 6px;
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
  box-shadow: 0 4px 12px var(--color-shadow);
  transition: background-color var(--dur-base) var(--ease-out-soft), color var(--dur-base) var(--ease-out-soft);
  display: none;
}

.scrolly-cta.visible {
  display: inline-block;
}

.scrolly-cta:hover {
  background: var(--color-gold-deep);
  color: #fff;
}

/* Colophon */
.colophon {
  padding: var(--sp-10) var(--sp-5) var(--sp-8);
  max-width: 700px;
  margin: 0 auto;
}

.colophon h1 {
  margin-bottom: var(--sp-3);
}

.colophon__subtitle {
  font-family: var(--font-header);
  font-size: var(--fs-h3);
  color: var(--color-ink-soft);
  margin-bottom: var(--sp-6);
}

.colophon p {
  margin-bottom: var(--sp-5);
  line-height: 1.7;
}

.colophon__cta {
  margin-top: var(--sp-6);
}

/* Privacy */
.privacy {
  padding: var(--sp-10) var(--sp-5) var(--sp-8);
  max-width: 700px;
  margin: 0 auto;
}

.privacy h1 {
  margin-bottom: var(--sp-6);
}

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

.privacy h2 {
  margin-bottom: var(--sp-3);
}

.privacy p,
.privacy ul {
  line-height: 1.7;
  color: var(--color-ink-soft);
}

.privacy ul {
  padding-left: var(--sp-5);
}

.privacy li {
  margin-bottom: var(--sp-2);
}

/* 404 */
.error-404 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--sp-10) var(--sp-5) var(--sp-8);
}

.error-404__breadcrumb {
  flex-shrink: 0;
  align-self: stretch;
  margin-bottom: var(--sp-4);
}

.error-404__breadcrumb .breadcrumb__list {
  justify-content: center;
}

.error-404__content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.error-404__img {
  width: 100%;
  max-width: 400px;
  margin-bottom: var(--sp-5);
  border-radius: 8px;
}

.error-404 h1 {
  margin-bottom: var(--sp-3);
}

.error-404 p {
  font-size: var(--fs-body);
  color: var(--color-ink-soft);
  margin-bottom: var(--sp-5);
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .act,
  .act__tool,
  .cupids-bridge__inner,
  .cupids-bridge__text {
    transition: none;
  }

  .project-card:hover {
    transform: none;
  }
}

/* Projects cinematic — locked 3-act spec */
.cinematic-main {
  background: var(--color-marble);
  min-height: 100vh;
}

.cutscene-stage {
  --stage-w: 100vw;
  --stage-h: calc(var(--stage-w) * 9 / 16);

  /* Layer 1 sizing chain — universal 0.80 step-down ratio */
  --giant-doll-h: calc(var(--stage-h) * 0.60);
  --human-h:      calc(var(--stage-h) * 0.48);   /* Allie / Payam = 0.80 × giant */
  --tool-h:       calc(var(--stage-h) * 0.384);  /* programs + AI gods = 0.80 × human */
  --doll-1-h:     calc(var(--stage-h) * 0.384);  /* same as tool */
  --doll-2-h:     calc(var(--stage-h) * 0.307);
  --doll-3-h:     calc(var(--stage-h) * 0.246);
  --doll-4-h:     calc(var(--stage-h) * 0.197);
  --doll-5-h:     calc(var(--stage-h) * 0.157);
  --doll-6-h:     calc(var(--stage-h) * 0.126);

  /* Layer 2 positioning math */
  --char-baseline-y:   calc(var(--stage-h) * 0.90); /* character feet 10% above stage bottom */
  --stage-left-x:      calc(var(--stage-w) * 0.25);
  --center-x:          calc(var(--stage-w) * 0.50);
  --paired-offset:     calc(var(--stage-w) * 0.15);
  --paired-left-x:     calc(var(--center-x) - var(--paired-offset));
  --paired-right-x:    calc(var(--center-x) + var(--paired-offset));
  --bubble-gap-y:      calc(var(--stage-h) * 0.03);
  --label-gap-y:       calc(var(--stage-h) * 0.015);

  /* Bubble specs (locked from Act I) */
  --bubble-max-width:  480px;
  --bubble-padding:    36px;
  --bubble-bg:         var(--color-parchment);
  --bubble-text-color: #3b2a1c;
  --bubble-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --bubble-font-size:  19px;
  --bubble-line-height: 1.5;

  /* Animation durations (locked Layer 3) */
  --fade-duration:        300ms;
  --bubble-lag:           100ms;
  --text-swap-duration:   150ms;
  --doll-scale-duration:  250ms;
  --slide-duration:       600ms;
  --curtain-duration:     1500ms;
  --curtain-hold:         300ms;

  /* Animation easings */
  --ease-fade:    ease-out;
  --ease-slide:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-curtain: cubic-bezier(0.55, 0.0, 0.55, 0.95);

  /* Image aspect ratio (measured from chibi PNGs) */
  --char-aspect: 0.6;

  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
}

.cutscene-act {
  position: absolute;
  inset: 0;
}

.cutscene-character {
  position: absolute;
  bottom: calc(var(--stage-h) - var(--char-baseline-y));
  width: auto;
  opacity: 0;
  user-select: none;
  -webkit-user-drag: none;
}

.cutscene-bubble {
  position: absolute;
  display: inline-block;
  max-width: var(--bubble-max-width);
  padding: var(--bubble-padding);
  background: color-mix(in srgb, var(--color-parchment) 75%, transparent);
  color: var(--bubble-text-color);
  font-family: var(--bubble-font-family);
  font-size: var(--bubble-font-size);
  line-height: var(--bubble-line-height);
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  opacity: 0;
}

.cutscene-bubble--small {
  padding: 18px 22px;
  font-size: 16px;
  border-radius: 26px;
}

.cutscene-doll-label {
  position: absolute;
  left: var(--center-x);
  transform: translateX(-50%);
  max-width: min(640px, 92vw);
  padding: 14px 18px;
  background: color-mix(in srgb, var(--color-parchment) 75%, transparent);
  color: var(--bubble-text-color);
  font-family: var(--bubble-font-family);
  font-size: 16px;
  line-height: 1.45;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  opacity: 0;
}

.cutscene-curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(-100%);
  z-index: 50;
}

@keyframes fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out   { from { opacity: 1; } to { opacity: 0; } }
@keyframes scale-in   { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
/* Mobile: preserve translateX(-50%) centering during scale-in. */
@keyframes scale-in-mobile {
  from { opacity: 0; transform: translateX(-50%) scale(0.8); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes curtain-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes text-crossfade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes text-crossfade-in  { from { opacity: 0; } to { opacity: 1; } }

.cutscene-character.is-fading-in   { animation: fade-in var(--fade-duration) var(--ease-fade) forwards; }
.cutscene-character.is-fading-out  { animation: fade-out var(--fade-duration) var(--ease-fade) forwards; }
.cutscene-bubble.is-fading-in      { animation: fade-in var(--fade-duration) var(--ease-fade) forwards; animation-delay: var(--bubble-lag); }
.cutscene-bubble.is-fading-out     { animation: fade-out var(--fade-duration) var(--ease-fade) forwards; }
.cutscene-character.is-visible,
.cutscene-bubble.is-visible {
  opacity: 1;
}
.cutscene-doll.is-scaling-in       { animation: scale-in var(--doll-scale-duration) var(--ease-fade) forwards; }
.cutscene-character.slide-to-paired-left {
  transition: left var(--slide-duration) var(--ease-slide);
  left: var(--paired-left-x);
}
.cutscene-curtain.is-dropping {
  animation: curtain-drop var(--curtain-duration) var(--ease-curtain) forwards;
}

.skip-cinematic-btn {
  position: fixed;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px));
  right: 24px;
  z-index: 100;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--color-parchment) 75%, transparent);
  color: var(--bubble-text-color);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 24px;
  font-family: var(--bubble-font-family);
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 200ms ease;
}
.skip-cinematic-btn:hover { transform: translateY(-2px); }

/* Breakpoint #1 — narrow desktop / large tablet */
@media (max-width: 1023px) {
  .cutscene-stage {
    --bubble-max-width: 360px;            /* shrink from 480 */
  }
  .cutscene-stage[data-paired="true"] .cutscene-character.tool-tier {
    transform: scale(0.70);               /* shrink paired chars to 0.70× */
    transform-origin: bottom center;
  }
}

/* Breakpoint #2 — mobile + tablet (≤1023px). Stage geometry, character centering, doll scale-in keyframe identical for both. JS reads per-viewport
constants for character/font sizing. */
@media (max-width: 1023px) {
  .cutscene-stage {
    --bubble-max-width: 80vw;
    --stage-h: 100dvh;
    --stage-left-x: var(--center-x);
    --char-baseline-y: calc(var(--stage-h) * 0.94);
  }
  /* Center every cutscene character around its inline left value (was sitting with left edge at center, appearing stage-right). Applies from frame 1 so fade-in starts at true center. */
  .cutscene-character {
    transform: translateX(-50%);
  }
  .cutscene-doll.is-scaling-in {
    animation: scale-in-mobile var(--doll-scale-duration) var(--ease-fade) forwards;
  }
}