/* Shared surface contract.
   The intro, layered SVG and following content share their surface tokens.
   Important declarations in this named layer outrank historical unlayered
   page overrides, regardless of their specificity or stylesheet order.
   Change the tokens, not the SVG colors or individual section backgrounds. */
@layer site-surfaces {
  :root {
    /* Neutral reading canvas; the six brand primitives remain unchanged. */
    --dt-page-surface: color-mix(in srgb, var(--dt-color-cream) 30%, white);
    --dt-intro-surface: var(--dt-page-surface);
    --dt-reading-surface: var(--dt-color-cream);
    --dt-content-surface: var(--dt-reading-surface);
    --dt-editorial-surface: #FCFAF6;
    --dt-reading-entry-depth: clamp(12rem, 32vw, 30rem);
    --dt-home-editorial-surface: var(--dt-editorial-surface);
    --dt-home-doctors-surface: var(--dt-home-editorial-surface);
    --dt-home-story-surface: var(--dt-home-editorial-surface);
    --dt-footer-surface: var(--dt-color-cream);
    --dt-divider-height: clamp(40px, 4.8vw, 90px);
  }

  html,
  body {
    background: var(--dt-page-surface) !important;
  }

  main {
    background: transparent !important;
  }

  /* Warm white alternates with brand cream for quieter long-form reading. */
  .ts-cream,
  .ts-value-card,
  .ts-service-card,
  .site-location-section:not(.site-transition-surface),
  .info-card,
  .contact-card,
  .membership-card,
  .membership-benefit-card {
    background: var(--dt-page-surface) !important;
  }

  /* Patient values and other reading sections retain the cream surface. */
  .ts-mike-section,
  .ts-soft {
    background: var(--dt-content-surface) !important;
  }

  /* The user selected a separate warm-white homepage doctor section. */
  html body.page-home .home-doctors-section {
    background: var(--dt-home-doctors-surface) !important;
  }

  html body.page-home .home-story-section {
    background: var(--dt-home-story-surface) !important;
  }

  /* Reading rows share a continuous canvas. Only a distinct chapter changes
     surface; photos and diagrams do not create new color boundaries. */
  html body.page-interior main .site-reading-story,
  html body.page-interior main .site-legal-reading-stack {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--dt-content-surface) !important;
  }

  .site-reading-story.site-reading-stack,
  .site-reading-story .service-story-section.site-reading-stack {
    display: grid !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .site-reading-band {
    --dt-reading-band-surface: var(--dt-editorial-surface);
    width: 100%;
    min-width: 0;
    padding-block: clamp(3rem, 5vw, 5rem) !important;
    background: var(--dt-reading-band-surface) !important;
  }

  .site-reading-band--warm {
    --dt-reading-band-surface: var(--dt-editorial-surface);
  }

  .site-reading-band--cream,
  .site-reading-band--chapter {
    --dt-reading-band-surface: var(--dt-content-surface);
    position: relative;
  }

  /* Continuous reading begins on cream beneath the fold, then settles into
     warm white. Short prefaces finish the fade at their own lower edge.
     Independent modules keep their explicit flat cream/warm surfaces. */
  .site-reading-band.site-reading-band--entry,
  html body.page-contact .site-location-section {
    background: linear-gradient(
      180deg,
      var(--dt-content-surface) 0%,
      var(--dt-editorial-surface) min(100%, var(--dt-reading-entry-depth))
    ) !important;
  }

  .site-reading-story > .site-reading-band {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }

  .site-reading-band .doctor-spotlight-list {
    gap: clamp(2rem, 3.5vw, 3rem) !important;
  }

  .site-reading-band .doctor-spotlight {
    margin-block: 0 !important;
  }

  .site-reading-story > .site-reading-band.site-stack {
    row-gap: clamp(2.5rem, 4vw, 4rem) !important;
  }

  .site-reading-band .bridge-restoration-section {
    gap: clamp(2.5rem, 4vw, 4rem) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-legal-reading-stack .site-reading-band {
    padding-block: clamp(2rem, 3.5vw, 3rem) !important;
  }

  .site-legal-reading-stack .legal-card {
    width: min(900px, calc(100% - 40px)) !important;
    max-width: 900px !important;
    margin-inline: auto !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .site-footer {
    background: var(--dt-footer-surface) !important;
  }

  @media (max-width: 720px) {
    .site-reading-band { padding-block: 2rem !important; }
    .site-legal-reading-stack .site-reading-band { padding-block: 1.75rem !important; }
  }

  .site-intro-band {
    background: var(--dt-intro-surface) !important;
    margin-bottom: 0 !important;
  }

  .site-intro-divider,
  .site-reading-divider {
    display: block;
    width: 100% !important;
    height: var(--dt-divider-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--dt-content-surface) !important;
    overflow: hidden;
    pointer-events: none;
    line-height: 0;
  }

  .site-intro-divider {
    --dt-section-fold-fill: var(--dt-intro-surface);
    position: relative;
  }

  /* A chapter fold occupies existing top padding, without adding a spacer.
     Its upper fill continues the preceding warm-white reading canvas. */
  .site-reading-divider {
    --dt-section-fold-fill: var(--dt-editorial-surface);
    position: absolute;
    inset: 0 0 auto;
  }

  .site-section-curve {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .site-section-curve-fill,
  .site-section-curve-layer {
    fill: var(--dt-section-fold-fill);
    stroke: none;
  }

  /* A soft straight-sided fold between the surfaces replaces the hairline.
     Both paths arrive in the initial HTML, with no delayed drawing effect. */
  .site-section-curve-layer {
    fill-opacity: 0.5;
  }

  /* The pre-rendered SVG and this sibling selector cover first paint without JS.
     The class also survives shell mounts and any later DOM moves. */
  .site-intro-divider + *,
  .site-transition-surface {
    --dt-accent-copy: var(--dt-color-ink);
    --dt-muted: var(--dt-color-ink);
    background: var(--dt-content-surface) !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  :is(.site-intro-divider + *, .site-transition-surface)
    .site-waitlist-help {
    color: var(--dt-color-ink) !important;
  }

  /* Service/doctor pages nest the content surface one level deeper. */
  :is(.site-intro-divider + *, .site-transition-surface) .service-story-section {
    background: transparent !important;
  }

  /* These layers are decorative section textures, not content photographs.
     Keeping them would reintroduce a different color along the SVG seam. */
  :is(.site-intro-divider + *, .site-transition-surface) > .absolute.inset-0 {
    display: none !important;
  }


}