/* DTI family canopy. Geometry is shared; each institution supplies its palette. */
:root {
  --dti-pattern-size: clamp(960px, 100vw, 1440px) auto;
  --dti-pattern-opacity: 0.24;
  --dti-pattern-fade: linear-gradient(90deg, rgb(0 0 0 / 18%) 0%, rgb(0 0 0 / 34%) 28%, rgb(0 0 0 / 70%) 62%, #000 100%);
  --dti-fade-depth: 200px;
  --dti-canopy-deep: #03333f;
  --dti-canopy-surface: #064b5a;
  --dti-pattern-ink: #f7d899;
  --dti-header-ink: #f7d899;
}

.branch-site {
  --dti-canopy-deep: var(--branch-deep);
  --dti-canopy-surface: var(--branch-tint);
  --dti-pattern-ink: var(--branch-accent);
  --dti-header-ink: color-mix(in srgb, var(--branch-accent) 48%, white);
}

.branch-site--timbuktu {
  --dti-canopy-deep: #4f1715;
  --dti-canopy-surface: #74251f;
  --dti-pattern-ink: #c7a15a;
  --dti-header-ink: #ead8a9;
}

/* Use the same header surface and positioning on the home and inner pages. */
.site-header,
.home-page .site-header,
.branch-site .site-header,
.timbuktu-storefront .site-header {
  --header-top: color-mix(in srgb, var(--dti-canopy-deep) 92%, #03333f);
  --header-edge: color-mix(in srgb, var(--dti-canopy-deep) 58%, var(--dti-canopy-surface));
  position: sticky;
  background: linear-gradient(180deg, var(--header-top), var(--header-edge));
}

.hero,
.page-hero,
.branch-site main > .page-hero:first-child,
.tb-hero {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dti-canopy-deep) 58%, var(--dti-canopy-surface)) 0,
      color-mix(in srgb, var(--dti-canopy-deep) 34%, var(--dti-canopy-surface)) 32px,
      color-mix(in srgb, var(--dti-canopy-deep) 14%, var(--dti-canopy-surface)) 74px,
      color-mix(in srgb, var(--dti-canopy-deep) 4%, var(--dti-canopy-surface)) 132px,
      transparent var(--dti-fade-depth)),
    var(--dti-canopy-surface);
}

/* Start each hero at the same point in the artwork as the header above it.
   The second mask applies one horizontal fade to the full-opacity line art. */
.site-header::before,
.home-page .site-header::before,
.branch-site:not(.branch-site--timbuktu) .site-header::before,
.hero::after,
.page-hero::before,
.branch-site .page-hero::before,
.branch-site:not(.branch-site--timbuktu) .page-hero::before,
.tb-hero::before {
  --dti-pattern-y: calc(-1 * var(--header-height));
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-color: var(--dti-pattern-ink);
  background-image: linear-gradient(180deg, var(--dti-header-ink) var(--header-height), var(--dti-pattern-ink) 100%);
  background-size: 100% calc(var(--header-height) + var(--dti-fade-depth));
  background-position: left var(--dti-pattern-y);
  background-repeat: no-repeat;
  -webkit-mask-image: url("assets/patterns/islamic-girih-canopy.svg"), var(--dti-pattern-fade);
  mask-image: url("assets/patterns/islamic-girih-canopy.svg"), var(--dti-pattern-fade);
  -webkit-mask-size: var(--dti-pattern-size), 100% 100%;
  mask-size: var(--dti-pattern-size), 100% 100%;
  -webkit-mask-position: right var(--dti-pattern-y), left top;
  mask-position: right var(--dti-pattern-y), left top;
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: var(--dti-pattern-opacity);
  filter: none;
}

.site-header::before,
.home-page .site-header::before,
.branch-site:not(.branch-site--timbuktu) .site-header::before {
  --dti-pattern-y: 0px;
}

.site-header .menu-toggle {
  border-radius: 50%;
}

/* Remove competing hero overlays so the shared fade is the only treatment. */
.hero::before,
.page-hero::after,
.branch-site main > .page-hero:first-child::after,
.tb-hero__pattern {
  display: none;
}

.home-page .hero,
.home-page .hero__inner {
  min-height: calc(100svh - var(--header-height));
}

.home-page .hero__inner {
  padding-top: clamp(2.75rem, 5vw, 4.5rem);
}

.tb-hero__inner {
  position: relative;
  z-index: 1;
}

.timbuktu-storefront .tb-hero .eyebrow {
  display: block;
  color: var(--tb-gold-pale);
}

.tb-hero .crumbs a {
  color: #fffaf0;
}

.branch-site--timbuktu .page-hero .eyebrow:not(.eyebrow--light) {
  color: #ead8a9;
}

.branch-site--timbuktu .page-hero .crumbs,
.branch-site--timbuktu .page-hero .crumbs a {
  color: #fffaf0;
}

@media (max-width: 780px) {
  :root {
    --dti-pattern-size: 720px auto;
    --dti-pattern-opacity: 0.22;
  }
}

@media (max-width: 1080px) and (max-height: 600px) {
  .home-page .hero__inner {
    padding-top: 1.5rem;
  }
}