/* Shared public page-title stage — theme-aware desk band (light stone / night ink). */

.page-stage,
.page-stage--desk,
.page-stage--photo {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(18dvh, 9.75rem);
  margin-block-start: 0.35rem;
  margin-block-end: 1.35rem;
  margin-inline: 0;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--radius-lg) + 0.15rem);
  background: var(--color-stage-deep);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-accent) 28%, transparent),
    var(--shadow-lift);
}

.page-stage__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--color-stage-deep) 78%, var(--color-accent)) 0%,
      var(--color-stage) 48%,
      color-mix(in srgb, var(--color-stage-deep) 86%, var(--color-spot)) 100%
    ),
    radial-gradient(
      ellipse 70% 80% at 88% 20%,
      color-mix(in srgb, var(--color-accent) 16%, transparent),
      transparent 62%
    ),
    url("/images/patterns/oak-grain.svg");
  background-size: auto, auto, 18rem 12rem;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
  opacity: 1;
}

/* Photo media retired for public page titles — hide if any leftover markup. */
.page-stage__media {
  display: none;
}

/* Shared atelier mark — balances the desk without fighting the title. */
.page-stage__mark {
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: min(44%, 17.5rem);
  padding-inline: 0.75rem;
  pointer-events: none;
  color: var(--color-spot);
  opacity: 0.28;
}

.page-stage__mark-svg {
  display: block;
  width: min(100%, 12rem);
  height: auto;
}

.page-stage__copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  max-width: min(42rem, 100%);
  padding: 1.45rem 1.35rem 1.4rem;
  color: var(--color-stage-ink);
}

.page-stage__eyebrow {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-stage-ink) 68%, var(--color-accent));
}

.page-stage__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--color-spot);
  text-shadow: 0 1px 14px color-mix(in srgb, var(--color-stage-deep) 55%, transparent);
}

.page-stage__rule {
  display: block;
  width: 3.5rem;
  height: 0.15rem;
  margin-block: 0.08rem 0.04rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--color-accent),
    color-mix(in srgb, var(--color-accent) 8%, transparent)
  );
}

.page-stage__lead {
  margin: 0;
  max-width: 34rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-stage-ink) 78%, transparent);
}

/* Breadcrumb under the page title inside the desk band. */
.page-stage__crumb {
  margin-block: 0.1rem 0;
  max-width: 100%;
}

.page-stage__crumb .ui-breadcrumb {
  margin-block-end: 0;
}

.page-stage__crumb .ui-breadcrumb__item,
.page-stage__crumb .ui-breadcrumb__link {
  color: color-mix(in srgb, var(--color-stage-ink) 62%, transparent);
}

.page-stage__crumb .ui-breadcrumb__item--current {
  color: color-mix(in srgb, var(--color-stage-ink) 88%, var(--color-accent));
  font-weight: 600;
}

.page-stage__crumb .ui-breadcrumb__link:hover,
.page-stage__crumb .ui-breadcrumb__link:focus-visible {
  color: var(--color-spot);
}

.page-stage__crumb .ui-breadcrumb__sep {
  color: color-mix(in srgb, var(--color-stage-ink) 32%, transparent);
}

/* Night: deeper ink band (same tokens, richer contrast). */
[data-theme="dark"] .page-stage,
[data-theme="dark"] .page-stage--desk,
[data-theme="dark"] .page-stage--photo {
  background: color-mix(in srgb, var(--color-stage-deep) 92%, #000);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--color-accent) 22%, transparent),
    var(--shadow-lift);
}

[data-theme="dark"] .page-stage__veil {
  background:
    linear-gradient(
      118deg,
      color-mix(in srgb, var(--color-stage-deep) 72%, var(--color-accent)) 0%,
      color-mix(in srgb, var(--color-stage-deep) 88%, #000) 46%,
      color-mix(in srgb, var(--color-stage-deep) 82%, var(--color-spot)) 100%
    ),
    radial-gradient(
      ellipse 70% 80% at 88% 20%,
      color-mix(in srgb, var(--color-accent) 18%, transparent),
      transparent 62%
    ),
    url("/images/patterns/oak-grain.svg");
  background-size: auto, auto, 18rem 12rem;
  background-repeat: no-repeat, no-repeat, repeat;
  background-blend-mode: normal, normal, soft-light;
}

[data-theme="dark"] .page-stage__title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

@media (min-width: 900px) {
  .page-stage,
  .page-stage--desk,
  .page-stage--photo {
    min-height: min(20dvh, 11rem);
  }

  .page-stage__copy {
    padding-inline: clamp(1.65rem, 4vw, 2.5rem);
    padding-block: 1.7rem 1.55rem;
  }

  .page-stage__mark {
    width: min(40%, 19rem);
    opacity: 0.32;
  }

  .page-stage__mark-svg {
    width: min(100%, 13.5rem);
  }
}

@media (max-width: 640px) {
  .page-stage,
  .page-stage--desk,
  .page-stage--photo {
    min-height: min(16dvh, 8.75rem);
    border-radius: var(--radius);
  }

  .page-stage__copy {
    padding: 1.25rem 1.1rem 1.2rem;
    max-width: min(70%, 100%);
  }

  .page-stage__mark {
    width: min(38%, 9.5rem);
    opacity: 0.18;
  }
}