/* Shared inner-page glass and primary heading typography.
   Existing geometry, radii, secondary typography and motion stay local. */
.site-material {
  --material-cyan: 118,204,210;
  --material-mint: 139,197,170;
  --material-ivory: 248,225,189;
  --material-page-base: #fafaf7;
  --material-page-light:
    radial-gradient(ellipse 48% 28% at 48% 29%,rgba(211,222,215,.09),transparent 80%),
    linear-gradient(170deg,#fcfbf8,#f6f8f6 58%,#fcfaf7);
  --material-ambient-a: radial-gradient(circle at 35% 35%,rgba(var(--material-cyan),.055),rgba(var(--material-mint),.025) 60%,transparent 75%);
  --material-ambient-b: radial-gradient(circle at 60% 40%,rgba(var(--material-mint),.04),rgba(var(--material-ivory),.025) 60%,transparent 75%);
  --material-filter: blur(12px) saturate(108%);
  --material-fill: linear-gradient(135deg,rgba(255,255,253,.20),rgba(255,255,255,.08) 55%,rgba(249,251,250,.14));
  --material-light: radial-gradient(ellipse 80% 55% at 15% 110%,rgba(var(--material-cyan),.025),transparent 80%),linear-gradient(120deg,rgba(255,255,255,.055),transparent 48%);
  --material-edges: inset 0 0 0 1px rgba(255,255,255,.60),inset 0 1px 0 rgba(255,255,255,.42);
  --material-depth: 0 0 0 1px rgba(67,89,94,.065),0 2px 5px -3px rgba(38,64,68,.09),0 8px 18px -13px rgba(38,64,68,.14);
  --material-shadow: var(--material-edges),var(--material-depth);
  --material-raised-shadow: var(--material-edges),0 0 0 1px rgba(67,89,94,.065),0 4px 8px -5px rgba(38,64,68,.10),0 14px 24px -17px rgba(38,64,68,.16);
  --material-rim: linear-gradient(135deg,rgba(255,255,255,.07),transparent 38%,rgba(255,255,255,.02));
  --material-control-fill: linear-gradient(150deg,rgba(255,255,255,.48),rgba(255,255,255,.23) 70%,rgba(241,247,244,.25));
  --material-control-shadow: inset 0 0 0 1px rgba(255,255,255,.65),0 0 0 1px rgba(67,89,94,.055),0 3px 7px -5px rgba(45,62,66,.12);
  background-color: var(--material-page-base);
  background-image: var(--material-page-light);
}
/* Paint stays on existing surfaces; no wrappers, padding or radius overrides. */
.site-material [data-material] {
  --material-accent: linear-gradient(transparent,transparent);
  background: var(--material-light),var(--material-fill),var(--material-accent);
  box-shadow: var(--material-shadow);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
}
/* Keep saturated/dark semantic fills intact. */
.site-material [data-material="accent"],
.site-material [data-material="frame"] {
  background: var(--material-accent);
}
/* Small controls use a thin rim with no additional blur layer. */
.site-material [data-material="control"] {
  background: var(--material-control-fill);
  box-shadow: var(--material-control-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-material [data-material="input"] {
  background: linear-gradient(145deg,rgba(255,255,255,.32),rgba(249,251,250,.18));
  box-shadow: inset 0 0 0 1px rgba(67,89,94,.10),inset 0 1px 2px rgba(62,86,92,.025),0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-material [data-material="frame"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* A nested surface borrows its parent's diffusion; avoid compounding blur. */
.site-material [data-material] [data-material="surface"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-material { --material-fill: linear-gradient(145deg,rgba(255,254,250,.80),rgba(242,247,244,.76)); }
}

/* Match the homepage main headline. Scope only to true page titles;
   section headings, labels, navigation and body typography stay local. */
.site-material main h1 {
  font-size: clamp(19px,1.65vw,24px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
@media (max-width:900px) {
  .site-material main h1 { font-size:19px; }
}