:root {
    /* SVG filter that reads a clipped topography shape's alpha and
       shades an inner rim along its edge — see the <filter
       id="topography-inner-shadow"> defs shipped in each page's markup */
    --topography-shadow: url(#topography-inner-shadow);

    /* Darkening ramp: each layer mixes a little more black into the
       page background, so nested contours read as receding depth */
    --topography-layer-1: color-mix(in srgb, var(--secondary-color) 97.5%, black 2.5%);
    --topography-layer-2: color-mix(in srgb, var(--secondary-color) 95%, black 5%);
    --topography-layer-3: color-mix(in srgb, var(--secondary-color) 92.5%, black 7.5%);
    --topography-layer-4: color-mix(in srgb, var(--secondary-color) 90%, black 10%);

    /* strength of the inner-rim shadow the filter above paints —
       feeds the flood-opacity of the <feFlood> in each page's filter defs */
    --topography-shadow-opacity: 0.28;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* SVG filter that reads a clipped topography shape's alpha and
        shades an inner rim along its edge — see the <filter
        id="topography-inner-shadow"> defs shipped in each page's markup */
        --topography-shadow: url(#topography-inner-shadow);

        /* Darkening ramp: each layer mixes a little more black into the
        page background, so nested contours read as receding depth */
        --topography-layer-1: color-mix(in srgb, var(--secondary-color) 97.5%, black 5%);
        --topography-layer-2: color-mix(in srgb, var(--secondary-color) 95%, black 10%);
        --topography-layer-3: color-mix(in srgb, var(--secondary-color) 92.5%, black 15%);
        --topography-layer-4: color-mix(in srgb, var(--secondary-color) 90%, black 20%);

        --topography-shadow-opacity: 0.38;
    }
}

/* manual override (set via JS from the header's dark-mode toggle) —
   forces dark regardless of the OS preference above */
:root[data-theme="dark"] {
    --topography-shadow: url(#topography-inner-shadow);

    --topography-layer-1: color-mix(in srgb, var(--secondary-color) 97.5%, black 5%);
    --topography-layer-2: color-mix(in srgb, var(--secondary-color) 95%, black 10%);
    --topography-layer-3: color-mix(in srgb, var(--secondary-color) 92.5%, black 15%);
    --topography-layer-4: color-mix(in srgb, var(--secondary-color) 90%, black 20%);

    --topography-shadow-opacity: 0.38;
}

.topography-shadow-flood {
    flood-opacity: var(--topography-shadow-opacity);
}

/* --------------------------------------------------------------------------------- */
/* Home */
/* --------------------------------------------------------------------------------- */

/* Every topography spans the same box: the source SVG's full 1509x851
   frame, anchored to the hero's top-right corner. Height drives
   it (100cqh) and the width is locked to the frame's aspect
   ratio (1509/851 = 1.7732), so the artwork scales with the
   section height and never distorts. Shapes run past the box
   edges exactly as they ran past the SVG viewBox — the element
   bounds crop them the same way. */
/* box-shadow: inset can't work here — it traces the rectangular
   border box, not the topography outline. The SVG filter builds
   the inner shadow from the shape's alpha instead. It sits on
   the parent (which is never clipped) so it can read the
   clipped ::before's real silhouette. */
.hero-topography {
    position: absolute;
    top: 0;
    right: 0;
    height: 100cqh;
    width: 177.32cqh;
    pointer-events: none;
    filter: var(--topography-shadow);
}

/* the clip lives ONLY here — if the parent were clipped too it
   would crop its own drop-shadow away again */
.hero-topography::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--topography-fill);
    clip-path: var(--topography-clip);
}

.hero-topography--1 {
    --topography-fill: var(--topography-layer-1);
    --topography-clip: url(#hero-topography-clip-1);
}

.hero-topography--2 {
    --topography-fill: var(--topography-layer-2);
    --topography-clip: url(#hero-topography-clip-2);
}

.hero-topography--3 {
    --topography-fill: var(--topography-layer-3);
    --topography-clip: url(#hero-topography-clip-3);
}

.hero-topography--4 {
    --topography-fill: var(--topography-layer-4);
    --topography-clip: url(#hero-topography-clip-4);
}

/* --------------------------------------------------------------------------------- */
/* About-Us */
/* --------------------------------------------------------------------------------- */

/* Unlike the hero on home.html this one is NOT locked to the source
   SVG's 1509x851 aspect ratio: every layer just spans the section
   (inset: 0) and the clip paths are in objectBoundingBox units, so
   the whole composition stretches with whatever box the section
   ends up being. */
/* box-shadow: inset can't work here — it traces the rectangular
   border box, not the topography outline. The SVG filter builds
   the inner shadow from the shape's alpha instead. It sits on
   the parent (which is never clipped) so it can read the
   clipped child's real silhouette. */
.us-topography {
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: var(--topography-shadow);
}

/* the clip lives ONLY here — the parent has to stay unclipped so the
   filter above still sees the shape it is supposed to trace */
.us-topography-shape {
    position: absolute;
    inset: 0;
    overflow: hidden;

    background: var(--topography-fill);
    clip-path: var(--topography-clip);
}

/* Two layers per person: an outer ring, then the portrait in the
   inner one. Same darkening ramp as the hero — each layer inward
   mixes a little more black into the section background. */
.us-topography--a1,
.us-topography--b1 {
    --topography-fill: var(--topography-layer-1);
}

/* only shows through where the portrait doesn't reach */
.us-topography--a2,
.us-topography--b2 {
    --topography-fill: var(--topography-layer-2);
}

.us-topography--a1 { --topography-clip: url(#us-topography-clip-a1); }
.us-topography--a2 { --topography-clip: url(#us-topography-clip-a2); }
.us-topography--b1 { --topography-clip: url(#us-topography-clip-b1); }
.us-topography--b2 { --topography-clip: url(#us-topography-clip-b2); }

/* The portrait is laid over its blob's bounding box (measured off the
   source paths, in % of the section) and cropped to `cover`, so it
   fills the shape edge to edge no matter how the section is sized.
   The clip on .us-topography-shape then cuts it to the outline. */
.us-portrait {
    position: absolute;
    left: var(--portrait-left);
    top: var(--portrait-top);
    width: var(--portrait-width);
    height: var(--portrait-height);

    object-fit: cover;
    object-position: center center;
}

.us-topography--a2 .us-portrait {
    --portrait-left: 10.398%;
    --portrait-top: 12.855%;
    --portrait-width: 37.324%;
    --portrait-height: 77.168%;
}

.us-topography--b2 .us-portrait {
    --portrait-left: 59.355%;
    --portrait-top: 10.108%;
    --portrait-width: 33.283%;
    --portrait-height: 76.927%;
}

/* Hover overlay: clipped to the same a2/b2 outline as the portrait it
   covers and painted on top of it, invisible until that person is
   hovered. It lives here next to the rest of the composition rather
   than beside the markup on purpose — as a later stylesheet it would
   re-assert its own `inset: 0` and knock out the mobile positioning
   in the media query below. */
.us-topography-overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    clip-path: var(--topography-clip);
    /*background: rgba(0, 0, 0, 0.4);*/
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    /*box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        inset 0 1px 1px rgba(255, 255, 255, 0.35);
    */

    opacity: 0;
    transition: opacity 0.30s ease;
}

.us-topography-overlay--a2 { --topography-clip: url(#us-topography-clip-a2); }
.us-topography-overlay--b2 { --topography-clip: url(#us-topography-clip-b2); }

/* the layers are pointer-transparent as a whole (see .us-topography), so
   the hover target is the clipped shape inside — that way only the
   contour itself reacts, not its rectangular bounding box */
.us-topography--a1 .us-topography-shape,
.us-topography--a2 .us-topography-shape,
.us-topography--b1 .us-topography-shape,
.us-topography--b2 .us-topography-shape {
    pointer-events: auto;
}

/* fade the overlay in when either that person's ring (1) or
   portrait (2) is hovered — sibling combinator works because
   both overlays are painted last, after every --a1/--a2/--b1/--b2
   layer in the DOM */
.us-topography--a1:has(.us-topography-shape:hover) ~ .us-topography-overlay--a2,
.us-topography--a2:has(.us-topography-shape:hover) ~ .us-topography-overlay--a2 {
    opacity: 1;
}

.us-topography--b1:has(.us-topography-shape:hover) ~ .us-topography-overlay--b2,
.us-topography--b2:has(.us-topography-shape:hover) ~ .us-topography-overlay--b2 {
    opacity: 1;
}

/* The rect is measured at runtime (see the script in about.html): it
   hands over the largest axis-aligned rectangle that fits inside the
   overlay's clip shape as four unitless fractions of the overlay box,
   so the text always sits in the widest part of the blob. */
.us-topography-overlay-inner {
    position: absolute;
    left: calc(var(--rect-left) * 100%);
    top: calc(var(--rect-top) * 100%);
    width: calc(var(--rect-width) * 100%);
    height: calc(var(--rect-height) * 100%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    transform: scale(0.95);

    transition: transform 0.3s ease;
}

.us-topography--a1:has(.us-topography-shape:hover) ~ .us-topography-overlay--a2 .us-topography-overlay-inner,
.us-topography--a2:has(.us-topography-shape:hover) ~ .us-topography-overlay--a2 .us-topography-overlay-inner {
    transform: scale(1);
}

.us-topography--b1:has(.us-topography-shape:hover) ~ .us-topography-overlay--b2 .us-topography-overlay-inner,
.us-topography--b2:has(.us-topography-shape:hover) ~ .us-topography-overlay--b2 .us-topography-overlay-inner {
    transform: scale(1);
}

.us-topography-overlay-name {
    width: 100%;
    text-align: center;
    font-size: clamp(16px, 3vw, 24px);
    font-family: var(--special-font);
    color: var(--primary-color);
    font-weight: bold;
    text-shadow: var(--shadow-blurry);
}

.us-topography-overlay-description {
    width: 100%;
    text-align: center;
    font-size: clamp(12px, 2vw, 18px);
    color: var(--primary-color-light);
}

/* --------------------------------------------------------------------------------- */
/* Size Changes */
/* --------------------------------------------------------------------------------- */

@media (max-width: 750px) {
    /* the source shapes are drawn against a landscape frame, so on a
       narrow phone viewport they get squashed sideways — rotating the
       whole composition 90deg swaps it to a portrait footprint that
       matches the section instead. Width/height are swapped (100cqh
       / 100cqw — container query units, tracking .us-section's own
       box via its `container-type: size`, NOT the raw viewport, so
       this keeps working if .us-section is ever made smaller than the
       viewport) so the box is already the right shape pre-rotation,
       then centered on the section and rotated in place; a plain
       `inset: 0` box can't do this since rotating it would spill
       out of its own (unswapped) bounds. */
    .us-topography,
    .us-topography-overlay {
        inset: auto;
        top: 50%;
        left: 50%;
        width: 100cqh;
        height: 100cqw;
        /* functions apply right-to-left to the point, so listed this
           way the rotate happens first and the flip is applied to the
           already-rotated result — translate stays outermost/last so
           it only recenters the finished shape */
        transform: translate(-50%, -50%) scaleX(-1) rotate(90deg);
    }

    /* the portrait inherits every ancestor transform above, so on its
       own it ends up sideways and mirrored too — this local transform
       is the exact inverse (rotate cancels rotate, flip cancels flip),
       so the pixels inside render upright again. But rotating a
       non-square box in place only spins its content, it doesn't
       resize the box — the box itself stays its original w/h, so once
       spun 90deg it's short on one side and leaves a gap (the "bars").
       Same fix as .us-topography above: pre-swap width/height (per
       variant, since each blob's rect is a different size) and
       recenter on the rect's original midpoint, so the box is already
       the right shape going into the rotation instead of after it. */
    .us-portrait {
        transform: translate(-50%, -50%) rotate(-90deg) scaleX(-1);
    }

    .us-topography--a2 .us-portrait {
        left: 29.06cqh;
        top: 51.439cqw;
        width: 77.168cqw;
        height: 37.324cqh;

        object-position: center 35%;
    }

    .us-topography--b2 .us-portrait {
        left: 75.997cqh;
        top: 48.572cqw;
        width: 76.927cqw;
        height: 33.283cqh;

        /* 0% = top, 50% = center — this sits partway between the two */
        object-position: center 25%;
    }

    /* same story as .us-portrait: the inner box inherits the overlay's
       rotation and flip, so its text renders sideways and mirrored —
       this local transform is the exact inverse. The measured rect
       still describes the UNROTATED overlay box, so (as with the
       portraits) width/height are swapped against it — 100cqw is the
       overlay's height here and 100cqh its width — and the box is
       recentered on the rect's own midpoint, so spinning it in place
       lands it back exactly on the rect. */
    .us-topography-overlay-inner {
        left: calc((var(--rect-left) + var(--rect-width) / 2) * 100cqh);
        top: calc((var(--rect-top) + var(--rect-height) / 2) * 100cqw);
        width: calc(var(--rect-height) * 100cqw);
        height: calc(var(--rect-width) * 100cqh);

        transform: translate(-50%, -50%) rotate(-90deg) scaleX(-1);
    }
}