/* =========================================================================
   Vines: shared by the main site and both microsites (engine: vines.js).
   Vines live at section edges, in empty margins, or wrapped around
   photographs. They never sit behind body text or buttons.
   ========================================================================= */
:root { --leaf: #9c8656; --leaf-dark: #b99a5f; }

.vine { position: absolute; pointer-events: none; z-index: 0; color: var(--leaf); }
.on-dark .vine, .is-dark-page .vine, .surface-umber .vine, .lead .vine, .profile .vine, .rf-hero .vine, .cf-hero .vine { color: var(--leaf-dark); }
.vine svg { display: block; overflow: visible; }
.vine__stem { fill: none; stroke: currentColor; stroke-linecap: round; opacity: 0.5; }
.vine__stem--shoot { opacity: 0.45; }
.vine__stem--twig { opacity: 0.38; }
.vine__leaf path:first-child { fill: currentColor; opacity: 0.36; }
.vine__rib { fill: none; stroke: var(--ink); stroke-width: 0.5; opacity: 0.3; }
.vine__leaf > g { transform-box: fill-box; transform-origin: 0 50%; will-change: transform, opacity; }
@media (max-width: 700px) { .vine--desktop { display: none; } }

/* Section edges: a vine creeps along the top or bottom padding of a section.
   Sections using these keep at least ~70px of padding, so the vine stays
   clear of headings. */
.vine--edge { width: min(46%, 560px); height: 62px; }
.vine--edge.vine--tl { top: 4px; left: 0; }
.vine--edge.vine--tr { top: 4px; right: 0; }
.vine--edge.vine--bl { bottom: 4px; left: 0; }
.vine--edge.vine--br { bottom: 4px; right: 0; }
.vine--edge.vine--short { width: min(30%, 360px); }
@media (max-width: 700px) { .vine--edge { width: 62%; height: 48px; } .vine--edge.vine--short { width: 44%; } }

/* Frames: the host wraps a photograph and the vine climbs its border */
.vine--frame { inset: -12px; z-index: 2; }
.vine-host { position: relative; }

/* Content always stacks above ornament */
.vine ~ .wrap, .vine ~ .wrap--narrow { position: relative; z-index: 1; }

/* Any section holding an edge vine becomes its positioning context */
section:has(> .vine--edge) { position: relative; }

/* Portrait frames: the vine climbs the arch around the photo, not over it */
.lead__vine { inset: -14px -14px calc(2.25rem - 14px) -14px; }
.strenuous__vine { inset: -14px -14px auto -14px; aspect-ratio: 3 / 4; height: auto; }
.profile__vine { inset: -14px -14px 0 -14px; }