@import url("styles-base.css");
@import url("styles-projects.css");
@import url("styles-details.css");
@import url("styles-responsive.css");
/* Hero reel: a small index of the product worlds inside the opening frame. */
.hero-art-wrap {
  min-width: 0;
}
.hero-reel {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  margin-top: 12px;
}
.hero-reel button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--muted);
  font:
    700 0.68rem/1.2 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.hero-reel button:hover,
.hero-reel button:focus-visible,
.hero-reel button[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
}
.hero-art img {
  transition: opacity 0.24s ease;
}
.hero-art.is-changing .hero-reel-image {
  opacity: 0.35;
}
@media (max-width: 600px) {
  .hero-reel {
    gap: 12px;
  }
  .hero-reel button {
    font-size: 0.64rem;
  }
}

/* Signature interaction: project chapters stay available while the reader explores. */
.project-nav {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.project-nav a {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.project-nav a:hover {
  color: var(--ink);
  transform: translateY(-2px);
}
.project-nav a[aria-current="location"] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.phone-row img[role="button"] {
  cursor: zoom-in;
}
.phone-row img[role="button"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}
.lightbox {
  width: min(92vw, 980px);
  max-height: 90dvh;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(19, 22, 22, 0.96);
  color: var(--ink);
}
.lightbox::backdrop {
  background: rgba(5, 6, 6, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox figure {
  margin: 0;
}
.lightbox img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78dvh;
  margin: auto;
  border-radius: 12px;
  object-fit: contain;
}
.lightbox figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.8rem;
}
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-art {
    perspective: 1200px;
  }
  .hero-art img {
    transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0) scale(1.035);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.project-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8;
  width: 190px;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--preview-x, -240px), var(--preview-y, -240px), 0)
    rotate(3deg) scale(0.94);
  transition:
    opacity 0.2s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-preview.is-visible {
  opacity: 1;
  transform: translate3d(var(--preview-x, -240px), var(--preview-y, -240px), 0)
    rotate(-3deg) scale(1);
}
.project-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
@media (hover: none), (pointer: coarse) {
  .project-preview {
    display: none;
  }
}
@media (min-width: 901px) {
  .project {
    scroll-margin-top: 140px;
  }
  .project:not(:last-child) {
    margin-bottom: clamp(56px, 8vw, 128px);
  }
}

.language-switch { display: inline-flex; gap: 10px; border-left: 1px solid var(--line); padding-left: 16px; }
.site-header .language-switch [aria-current="true"] { color: var(--accent); }
@media (max-width: 600px) {
  .site-header { height: auto; min-height: 66px; flex-wrap: wrap; gap: 12px; padding-block: 14px; }
  .site-header nav { flex-wrap: wrap; gap: 12px; }
  .language-switch { padding-left: 12px; gap: 8px; }
}

/* Additional work follows the existing type, color and disclosure system. */
.project-omada .project-note strong { color: var(--accent); }
.more-work { margin-bottom: clamp(100px, 12vw, 180px); }
.work-index { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-bottom: 60px; }
.work-index a, .store-link { color: var(--muted); font-size: .85rem; text-decoration: underline; text-underline-offset: 5px; }
.work-index a:hover, .store-link:hover { color: var(--accent); }
.coach-suite { padding-bottom: 70px; }
.coach-suite > h3, .project-entry h3 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.7rem); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.suite-intro { max-width: 740px; color: var(--muted); }
.coach-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 50px; }
.coach-app { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; scroll-margin-top: 32px; }
.coach-app .app-heading { align-items: center; gap: 10px; min-height: 56px; }
.coach-app .app-heading img { width: 40px; height: 40px; border-radius: 10px; }
.coach-app h4 { font-size: 1.15rem; line-height: 1.2; font-weight: 500; letter-spacing: -.03em; margin: 0; }
.coach-app p { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 18px 0 26px; }
.coach-screen { display: block; width: 100%; height: auto; border-radius: 12px; margin-top: auto; }
.coach-app .store-link { margin-top: 20px; }
.gallery-caption, .compact-gallery figcaption { font-size: .77rem; color: var(--muted); margin-top: 26px; }
.project-entry { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 8vw, 120px); padding: 64px 0; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
.entry-heading { min-width: 0; }
.entry-heading .app-heading { align-items: flex-start; }
.entry-heading .app-heading img { width: 44px; height: 44px; border-radius: 11px; }
.entry-content > .project-lead { margin-top: 0; }
.entry-content > p:not(.project-lead) { color: var(--muted); margin-bottom: 0; }
.coach-suite details, .project-entry details { margin-top: 32px; border-top: 1px solid var(--line); }
.coach-suite summary, .project-entry summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font-size: .86rem; }
.coach-suite summary::-webkit-details-marker, .project-entry summary::-webkit-details-marker { display: none; }
.coach-suite summary span, .project-entry summary span { font-size: 1.3rem; }
.coach-suite details[open] summary span, .project-entry details[open] summary span { transform: rotate(45deg); }
.project-entry .detail-grid { grid-template-columns: 1fr; gap: 24px; }
.compact-gallery { margin: 30px 0 0; }
.compact-gallery .phone-row { display: block; max-width: 260px; margin-left: 0; }
.compact-gallery figcaption a { text-decoration: underline; text-underline-offset: 3px; }
[data-zoom] { cursor: zoom-in; }
[data-zoom]:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
@media (max-width: 1000px) { .coach-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } }
@media (max-width: 767px) {
  .project-entry { grid-template-columns: 1fr; gap: 26px; padding-block: 42px; }
  .coach-suite .detail-grid { grid-template-columns: 1fr; }
  .work-index { margin-bottom: 42px; gap: 16px 22px; }
  .coach-apps { gap: 34px 18px; }
  .coach-app .app-heading { flex-direction: column; align-items: flex-start; gap: 12px; min-height: 96px; }
  .coach-app h4 { font-size: 1.05rem; }
  .coach-app p { font-size: .82rem; }
  .project-entry h3, .coach-suite > h3 { font-size: 2.35rem; }
}
@media print { .coach-apps { grid-template-columns: repeat(4, 1fr); } .coach-screen, .compact-gallery { display: none; } }

.language-switch a { display: inline-flex; min-width: 32px; min-height: 32px; align-items: center; justify-content: center; }