/* Design variants to compare (2026-10-22). Each is switched on by a class on <body>,
 * set with build_modern.py's 5th argument. Remove the ones not chosen afterwards.
 */

/* ===== Hero: making the title readable on the photo (no overlay over the whole image) ===== */

/* hv-halo: stronger, soft dark glow around the letters only */
.hv-halo .hero__title { text-shadow: 0 0 3px rgb(0 0 0 / .95), 0 0 12px rgb(0 0 0 / .9), 0 0 28px rgb(0 0 0 / .8), 0 0 50px rgb(0 0 0 / .6); }

/* hv-glass-light: frosted light glass panel behind the title, dark green text */
.hv-glass-light .hero__title { background: rgb(250 247 241 / .55); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: var(--sage-900); text-shadow: none; padding: 1.1rem 1.8rem 1.3rem; border-radius: var(--radius-lg); box-shadow: 0 8px 30px rgb(0 0 0 / .18); }

/* hv-glass-dark: frosted dark glass panel, white text */
.hv-glass-dark .hero__title { background: rgb(28 38 25 / .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgb(0 0 0 / .5); padding: 1.1rem 1.8rem 1.3rem; border-radius: var(--radius-lg); }

/* hv-ribbon: solid sage band coming in from the right edge */
.hv-ribbon .hero .wrap { padding-right: 0; max-width: none; }
.hv-ribbon .hero__title { background: rgb(44 59 40 / .86); text-shadow: none; padding: 1rem clamp(1.5rem, 6vw, 6rem) 1.2rem 2.2rem; border-radius: 999px 0 0 999px; }

/* hv-vignette: darkening only in the corner behind the text */
.hv-vignette .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 80% 22%, rgb(0 0 0 / .72), rgb(0 0 0 / .35) 45%, rgb(0 0 0 / 0) 75%); }
.hv-vignette .hero .wrap { position: relative; z-index: 1; }

/* hv-dim: the whole photo a little darker (no gradient), text as before */
.hv-dim .hero__img { filter: brightness(.68) saturate(1.05); }

/* hv-card: photo stays clean; the title sits on a linen card overlapping the bottom edge of the photo */
.hv-card .hero { overflow: visible; margin-bottom: 0; }
.hv-card .hero .wrap { align-items: flex-end; }
.hv-card .hero__title { background: var(--linen); color: var(--sage-900); text-shadow: none; margin: 0 0 -1px;
  padding: 1.3rem 2rem 1.1rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hv-card .hero__practice { color: var(--sage-700); }

/* ===== Sections: telling them apart on marble ===== */

/* sv-alternate: marble only on every second section, plain linen in between */
.sv-alternate .marble-2 { background-image: none; background-color: var(--linen); }

/* sv-leaves: the leaf rows of the old site as a divider at the top of each section */
.sv-leaves main > .section { position: relative; padding-top: clamp(5rem, 9vw, 7rem); }
.sv-leaves main > .section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(50px, 7vw, 90px);
  background: url("leaves-left.png") left top / auto 100% no-repeat, url("leaves-right.png") right top / auto 100% no-repeat; opacity: .75; }

/* sv-panels: one marble background behind the whole page; each section is a light panel on it */
.sv-panels main { background: url("marble-1.jpg") center top / 100% auto repeat-y; padding-bottom: 3rem; }
.sv-panels.mv-svg main { background-image: url("marble-1.svg"); background-size: 1600px auto; background-repeat: repeat; }
.sv-panels main > .section { background: none; padding-block: 1.5rem; }
.sv-panels main > .section > .wrap { background: rgb(250 247 241 / .88); border-radius: 32px; padding: clamp(2rem, 5vw, 3.5rem); box-shadow: 0 2px 6px rgb(44 59 40 / .06), 0 18px 40px rgb(44 59 40 / .10); }
.sv-panels main > .section:first-of-type { padding-top: 3rem; }

/* sv-tint: every second section gets a soft sage tint over the marble */
.sv-tint .marble-2 { background-color: var(--sage-100); background-blend-mode: normal, multiply; }
.sv-tint .marble-2 { background-image: linear-gradient(to bottom, var(--linen), rgb(226 233 218 / 0) 12%, rgb(226 233 218 / 0) 88%, var(--linen)), url("marble-2.jpg"); }
.sv-tint.mv-svg .marble-2 { background-image: linear-gradient(to bottom, var(--linen), rgb(226 233 218 / 0) 12%, rgb(226 233 218 / 0) 88%, var(--linen)), url("marble-2.svg"); }

/* ===== Marble: drawn as SVG instead of the photos ===== */
.mv-svg .marble-1 { background-image: linear-gradient(to bottom, var(--linen), rgb(250 247 241 / 0) 18%, rgb(250 247 241 / 0) 82%, var(--linen)), url("marble-1.svg"); }
.mv-svg .marble-2 { background-image: linear-gradient(to bottom, var(--linen), rgb(250 247 241 / 0) 18%, rgb(250 247 241 / 0) 82%, var(--linen)), url("marble-2.svg"); }
.mv-svg .page-head.marble-1 { background-image: linear-gradient(to bottom, rgb(250 247 241 / 0) 70%, var(--linen)), url("marble-1.svg"); }
.mv-svg.sv-alternate .marble-2 { background-image: none; }