/* Floating clinic photography. All styles belong to this one experience scene. */
.experience.depth-experience { padding: 0; color: var(--espresso); background: var(--paper); scroll-margin-top: 0; }
.depth-stage { position: relative; isolation: isolate; height: clamp(620px, 82svh, 780px); overflow: clip; }
.depth-field { position: absolute; inset: 0; perspective: 900px; perspective-origin: 50% 50%; transform-style: preserve-3d; pointer-events: none; }
.depth-plane { --depth-x: 0px; --depth-y: 0px; position: absolute; left: 50%; top: 50%; width: clamp(108px, 12vw, 168px); margin: 0; opacity: 1; transform: translate(-50%, -50%) translate3d(var(--depth-x), var(--depth-y), 0); backface-visibility: hidden; }
.depth-plane img { display: block; width: 100%; height: auto; }
.depth-plane-wide { width: clamp(170px, 18vw, 240px); }
.depth-plane-clinic { width: clamp(100px, 9vw, 132px); }
.depth-plane-instagram { width: clamp(84px, 7.5vw, 110px); }
.depth-plane:nth-child(1) { --depth-x: -29vw; --depth-y: -24svh; }
.depth-plane:nth-child(2) { --depth-x: 30vw; --depth-y: -24svh; }
.depth-plane:nth-child(3) { --depth-x: 31vw; --depth-y: 23svh; }
.depth-plane:nth-child(4) { --depth-x: -28vw; --depth-y: 22svh; }
.depth-plane:nth-child(5) { --depth-x: 2vw; --depth-y: 29svh; }
.depth-plane:nth-child(n+6) { display: none; }
.depth-experience[data-depth-motion="running"] .depth-plane,
.depth-experience[data-depth-motion="paused"] .depth-plane { display: block; }
.depth-title { position: absolute; z-index: 2; left: 50%; top: 48%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 48px); text-align: center; pointer-events: none; }
.depth-label { font: 500 13px/1.5 var(--sans); letter-spacing: .06em; }
.depth-experience .depth-heading { margin-top: 20px; font: 400 clamp(76px, 8vw, 120px)/.93 var(--serif); letter-spacing: -.04em; }
.depth-heading > span { display: block; }
.depth-toggle { position: absolute; z-index: 3; right: max(var(--gutter), env(safe-area-inset-right, 0px)); bottom: 22px; min-width: 106px; min-height: 44px; padding: 10px 8px; border: 0; border-radius: 0; background: var(--paper); color: var(--espresso); font: 500 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 6px; cursor: pointer; }
.depth-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 56px; max-width: 1280px; padding-top: 20px; padding-bottom: 64px; }
.depth-notes h3 { font: 400 clamp(28px, 2.5vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; }
.depth-notes article p { max-width: 32ch; margin-top: 12px; font: 400 16px/1.6 var(--sans); }
@media (hover: hover) and (pointer: fine) {
  .depth-toggle:hover { text-decoration-thickness: 2px; }
}
@media (max-width: 999px) {
  .depth-stage { height: clamp(600px, 78svh, 740px); }
  .depth-experience .depth-heading { font-size: clamp(66px, 9vw, 94px); }
  .depth-notes { column-gap: 26px; padding-bottom: 48px; }
  .depth-notes h3 { font-size: 30px; }
}
@media (max-width: 599px) {
  .depth-stage { --gutter: 22px; height: min(78svh, 660px); min-height: 560px; }
  .depth-title { max-width: calc(100% - 44px); top: 47%; }
  .depth-label { font-size: 12px; }
  .depth-experience .depth-heading { margin-top: 14px; font-size: clamp(54px, 15vw, 76px); }
  .depth-plane { width: clamp(84px, 24vw, 110px); }
  .depth-plane-wide { width: clamp(138px, 38vw, 170px); }
  .depth-plane-clinic { width: 94px; }
  .depth-plane-instagram { width: 84px; }
  .depth-plane:nth-child(1) { --depth-x: -23vw; --depth-y: -24svh; }
  .depth-plane:nth-child(2) { --depth-x: 23vw; --depth-y: -24svh; }
  .depth-plane:nth-child(3) { --depth-x: 24vw; --depth-y: 23svh; }
  .depth-plane:nth-child(4) { --depth-x: -24vw; --depth-y: 23svh; }
  .depth-experience:not([data-depth-motion="running"]):not([data-depth-motion="paused"]) .depth-plane:nth-child(5) { display: none; }
  .depth-toggle { right: 22px; bottom: 10px; }
  .depth-notes { --gutter: 22px; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 24px; padding-bottom: 44px; }
  .depth-notes h3 { font-size: 30px; }
  .depth-notes article p { max-width: 40ch; margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .depth-experience .depth-plane { transform: translate(-50%, -50%) translate3d(var(--depth-x), var(--depth-y), 0) !important; opacity: 1 !important; }
  .depth-experience .depth-plane:nth-child(n+6), .depth-toggle { display: none !important; }
}

/* The mobile notes become a compact editorial index only after enhancement. */
@media (max-width: 599px) {
  .depth-notes[data-mobile-notes] { gap: 0; padding-top: 10px; padding-bottom: 38px; }
  .depth-notes[data-mobile-notes] article + article { border-top:1px solid color-mix(in srgb,var(--espresso) 20%,transparent); } /* taste-skill-ignore: user-requested separators between mobile disclosure rows. */
  .depth-notes[data-mobile-notes] article:last-child { border-bottom:1px solid color-mix(in srgb,var(--espresso) 20%,transparent); } /* taste-skill-ignore: user-requested divider before the personal introduction. */
  .depth-notes[data-mobile-notes] h3 { margin: 0; }
  .depth-note-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px; width: 100%; min-height: 64px; padding: 17px 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
  .depth-note-title { min-width: 0; }
  .depth-note-action { font: 500 12px/1.5 var(--sans); letter-spacing: .01em; white-space: nowrap; }
  .depth-note-toggle:active .depth-note-action { text-decoration: underline; text-underline-offset: 4px; }
  .depth-notes .depth-note-toggle:focus-visible { outline: 2px solid var(--espresso); outline-offset: -2px; }
  .depth-notes[data-mobile-notes] article p { max-width: 34ch; margin: 0 0 20px; padding-right: 26px; }
  .depth-notes[data-mobile-notes] article p[hidden] { display: none; }
}