/* =============================================================================
   Revived Organization — design system

   Layer 1 declares the brand tokens verbatim from
   References/Revived Organization Design System/tokens/*.css.

   Layer 2 maps those onto the XUI token layer (--xui-*). That mapping is the whole
   integration: every XuiCard, XuiButton, XuiBadge, XuiAvatar and form control resolves
   its colour, radius, spacing and type against --xui-* custom properties, so redefining
   them here re-skins the entire component library at once instead of overriding
   component classes one at a time.

   This stylesheet loads after xui.tokens.css (see index.html), so equal-specificity
   rules win on source order. The [data-theme] attribute selector is included because
   the theme bootstrap script writes it, and [data-theme="dark"] would otherwise
   out-specify a bare :root.
   ========================================================================== */

/* --- Layer 1: brand tokens ------------------------------------------------ */

:root {
    --ink: #1c1a17;
    --ink-soft: #3a3733;
    --cream: #f9f5ec;
    --cream-dim: #f1ebdd;
    --paper: #ffffff;
    --green: #5f9065;
    --green-dark: #3a5c3e;
    --green-light: #8bbf8e;
    --sage: #9caf8b;
    --sage-dark: #6f8261;
    --sage-light: #c9d4bd;
    --rose: #d7838e;
    --rose-dark: #a85a65;
    --line: #e4dcc9;
    --line-dark: #2c2a26;

    --text-primary: var(--ink);
    --text-muted: #6b6558;
    --text-inverse: var(--cream);
    --surface-page: var(--cream);
    --surface-card: var(--paper);
    --surface-dark: var(--ink);
    --accent-primary: var(--green);
    --accent-secondary: var(--sage);
    --accent-tertiary: var(--rose);
    --focus-ring: var(--green-dark);

    --font-display: 'Nunito', sans-serif;
    --font-body: 'Nunito', sans-serif;
    --font-wordmark: 'Fraunces', serif;

    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 24px;
    --space-6: 32px;  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;  --space-10: 128px;

    --radius-s: 4px; --radius-m: 8px; --radius-l: 16px; --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgba(28,26,23,0.06), 0 8px 24px rgba(28,26,23,0.08);
    --shadow-lifted: 0 16px 40px rgba(28,26,23,0.14);
    --border-hairline: 1px solid var(--line);
    --ease-standard: cubic-bezier(.22,.61,.36,1);
    --duration-fast: 150ms;
    --duration-normal: 240ms;

    --text-display-xl: clamp(2.8rem, 5vw, 4.5rem);
    --text-display-l: clamp(2.2rem, 4vw, 3.2rem);
    --text-display-m: 1.8rem;
    --text-heading: 1.4rem;
    --text-body-l: 1.15rem;
    --text-body: 1rem;
    --text-small: 0.85rem;
    --text-eyebrow: 0.8rem;
    --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.6;
    --tracking-eyebrow: 0.14em;
    --tracking-wordmark: 0.08em;
}

/* --- Layer 2: brand tokens -> XUI tokens ---------------------------------- */

:root,
:root[data-theme],
:root[data-theme="dark"],
:root[data-theme="light"] {
    --xui-bg: var(--surface-page);
    --xui-surface: var(--surface-card);
    --xui-surface-hover: var(--cream-dim);
    --xui-surface-subtle: var(--cream-dim);
    --xui-surface-border: var(--line);
    --xui-border: var(--line);
    --xui-border-active: var(--green);
    --xui-text: var(--text-primary);
    --xui-text-secondary: var(--text-muted);
    --xui-muted: var(--text-muted);

    --xui-primary: var(--green);
    --xui-primary-rgb: 168, 134, 42;
    --xui-primary-subtle: color-mix(in srgb, var(--green) 12%, transparent);
    --xui-accent: var(--green);
    --xui-focus: var(--focus-ring);
    --xui-focus-glow: rgba(124, 99, 29, 0.28);

    --xui-success: var(--sage-dark);
    --xui-success-rgb: 111, 130, 97;
    --xui-success-subtle: color-mix(in srgb, var(--sage) 22%, transparent);
    --xui-valid-glow: rgba(111, 130, 97, 0.25);
    --xui-warning: var(--green-dark);
    --xui-warning-subtle: color-mix(in srgb, var(--green) 18%, transparent);
    --xui-warning-glow: rgba(168, 134, 42, 0.25);
    --xui-danger: var(--rose-dark);
    --xui-danger-rgb: 164, 99, 108;
    --xui-error-subtle: color-mix(in srgb, var(--rose) 20%, transparent);
    --xui-info: var(--ink-soft);
    --xui-info-subtle: color-mix(in srgb, var(--ink) 8%, transparent);

    --xui-font-family: var(--font-body);
    --xui-font-size-xs: var(--text-eyebrow);
    --xui-font-size-sm: var(--text-small);
    --xui-font-size-base: var(--text-body);
    --xui-font-size-lg: var(--text-body-l);
    --xui-font-size-xl: var(--text-heading);
    --xui-font-size-xxl: var(--text-display-m);
    --xui-font-size-xxxl: var(--text-display-l);

    --xui-space-xs: var(--space-1);
    --xui-space-sm: var(--space-2);
    --xui-space-md: var(--space-4);
    --xui-space-lg: var(--space-5);
    --xui-space-xl: var(--space-6);
    --xui-space-xxl: var(--space-8);

    --xui-radius-sm: var(--radius-s);
    --xui-radius-md: var(--radius-m);
    --xui-radius-lg: var(--radius-m);
    --xui-radius-xl: var(--radius-l);
    --xui-radius-full: var(--radius-pill);

    --xui-shadow-sm: 0 1px 2px rgba(28,26,23,0.06);
    --xui-shadow-md: var(--shadow-card);
    --xui-shadow-lg: var(--shadow-card);
    --xui-shadow-xl: var(--shadow-lifted);

    --xui-skeleton-1: var(--cream-dim);
    --xui-skeleton-2: var(--line);
    --xui-tooltip-bg: var(--ink);
    --xui-tooltip-text: var(--cream);
    --xui-surface-glass: rgba(249, 245, 236, 0.82);
}

/* The site ships one warm palette. Neutralise the stylesheet's prefers-color-scheme
   block so an OS dark preference cannot repaint half the page in slate blue. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --xui-bg: var(--surface-page);
        --xui-surface: var(--surface-card);
        --xui-text: var(--text-primary);
        --xui-muted: var(--text-muted);
    }
}

html, body {
    background-color: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    /* Decorative bleed (the hero's radial washes, hover lifts) must not open a sideways
       scroll on narrow screens. */
    overflow-x: hidden;
}

*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; }

/* <figure> ships with margin: 1em 40px. Left in place inside a grid, those 80px are added
   to the item's automatic minimum size — which for an image is its intrinsic width — and
   the track grows past the viewport on a phone. */
figure { margin: 0; }

/* A grid or flex item's automatic minimum size is its content's min-content width, so an
   image-bearing item refuses to shrink below the photo's natural pixel width without this. */
.hero__grid > *,
.gallery-tile { min-width: 0; }

/* =============================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    color: var(--ink);
    letter-spacing: -0.01em;
}

.page h1,
.xui-page-header__title {
    font-size: var(--text-display-l);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-3);
}

.xui-page-header {
    padding-bottom: var(--space-5);
    border-bottom: var(--border-hairline);
}

.xui-page-header__description {
    font-size: var(--text-body-l);
    max-width: 62ch;
    line-height: var(--lh-normal);
}

/* Section titles are gold — guidelines/type-display.html. */
.section__title {
    font-family: var(--font-display);
    font-size: var(--text-display-m);
    font-weight: 800;
    color: var(--green);
    letter-spacing: 0;
    margin: 0 0 var(--space-6);
}

/* Blazor's FocusOnNavigate moves focus to the h1 on every route change, which paints a
   ring around the page title on arrival. h1 is not operable, so the ring communicates
   nothing; the focus styles above still cover everything that is actually interactive. */
h1:focus,
h1[tabindex="-1"]:focus {
    outline: none;
}

.eyebrow {
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--green-dark);
}

.muted { color: var(--text-muted); line-height: var(--lh-normal); }

a { color: var(--green-dark); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Scoped to things you can actually operate. A blanket :focus-visible also paints a ring
   around the h1 that Blazor's FocusOnNavigate focuses on every route change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* =============================================================================
   Shell — header, main, footer
   ========================================================================== */

.site { display: flex; flex-direction: column; min-height: 100dvh; }

.site__skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: var(--cream);
    padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-m) 0;
}
.site__skip-link:focus { left: 0; }

.site__header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(249, 245, 236, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: var(--border-hairline);
}

/* min-width: 0 on the row's children: a nowrap flex row of intrinsically-sized items
   otherwise refuses to shrink below its min-content and spills past the viewport. */
.site__header-row { padding-block: var(--space-3); gap: var(--space-5); }
.site__header-row > * { min-width: 0; }

.site__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--ink);
}

.site__brand-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    /*border-radius: var(--radius-pill);*/
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-wordmark);
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    padding-bottom: 2px;
}

.site__brand-name {
    font-family: var(--font-wordmark);
    font-style: italic;
    font-size: 22px;
    line-height: 1.05;
    letter-spacing: var(--tracking-wordmark);
    color: var(--ink);
}

.site__brand-sub {
    letter-spacing: var(--tracking-eyebrow);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.62rem;
}

.site__nav { display: flex; align-items: center; gap: var(--space-5); }

.site__nav-link {
    position: relative;
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 600;
    font-size: var(--text-small);
    padding-block: var(--space-2);
    transition: color var(--duration-fast) var(--ease-standard);
    white-space: nowrap;
}

.site__nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-normal) var(--ease-standard);
}

.site__nav-link:hover { color: var(--ink); }
.site__nav-link:hover::after,
.site__nav-link.active::after { transform: scaleX(1); }
.site__nav-link.active { color: var(--green-dark); }

/* Three classes: XuiButton sets display from its own scoped rule, which carries an
   attribute selector. Anything shorter ties with it and then loses on source order,
   because the scoped bundle is imported after this file. */
.site .site__header .site__menu-toggle { display: none; }

.site__nav--mobile {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding-block: var(--space-4);
    border-top: var(--border-hairline);
}

.site__main { flex: 1; }

.site__footer {
    background: var(--surface-dark);
    color: var(--text-inverse);
    padding-block: var(--space-8) var(--space-5);
    margin-top: var(--space-9);
}

.site__footer-brand {
    font-family: var(--font-wordmark);
    font-style: italic;
    font-size: 26px;
    letter-spacing: var(--tracking-wordmark);
    color: var(--cream);
}

.site__footer-heading {
    color: var(--green-light);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.site__footer-muted { color: rgba(249, 245, 236, 0.62); }

.site__footer-link {
    color: rgba(249, 245, 236, 0.86);
    text-decoration: none;
    font-size: var(--text-small);
    width: fit-content;
    transition: color var(--duration-fast) var(--ease-standard);
}
.site__footer-link:hover { color: var(--green-light); }

.site__footer-rule {
    background: var(--line-dark);
    margin-block: var(--space-6) var(--space-4);
}

/* =============================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--space-9) var(--space-8);
    background:
        radial-gradient(60% 90% at 82% 12%, color-mix(in srgb, var(--sage-light) 55%, transparent), transparent 70%),
        radial-gradient(50% 70% at 8% 85%, color-mix(in srgb, var(--green-light) 42%, transparent), transparent 70%),
        var(--cream);
}

.hero__grid { align-items: center; }

.hero__copy { max-width: 34rem; }

.hero__eyebrow {
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--green-dark);
}

.hero__title {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.hero__lede {
    font-family: var(--font-wordmark);
    font-style: italic;
    font-size: var(--text-body-l);
    line-height: var(--lh-snug);
    color: var(--green-dark);
}

.hero__summary { color: var(--text-muted); }

.hero__media {
    position: relative;
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: var(--shadow-lifted);
    aspect-ratio: 4 / 5;
    background: var(--cream-dim);
}

/* The supplied photography carries a baked-in white footer strip. Overscaling from the
   top edge crops it off rather than letting a white band sit under every portrait. */
.hero__media img,
.gallery-tile img {
    width: 100%;
    height: 122%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hero__media-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: linear-gradient(to top, rgba(28,26,23,0.78), transparent);
    color: var(--cream);
    font-size: var(--text-small);
}

/* =============================================================================
   Sections and page scaffolding
   ========================================================================== */

.page { padding-block: var(--space-7) var(--space-8); }
.page > * + * { margin-top: var(--space-7); }

/* A .section nested inside a .page already sits in the page's own rhythm; its full band
   padding would double the gap. */
.page .section { padding-block: 0; }

.section { padding-block: var(--space-8); }
.section--tinted { background: var(--cream-dim); }

.section--band {
    background: var(--surface-dark);
    color: var(--text-inverse);
    padding-block: var(--space-8);
}
.band__title {
    font-family: var(--font-display);
    font-size: var(--text-display-m);
    font-weight: 800;
    color: var(--cream);
    margin: 0;
}

.band__copy { max-width: 34rem; }
.band__muted { color: rgba(249, 245, 236, 0.72); }

/* External destinations must be anchors, so this is the button treatment applied to a link
   rather than a XuiButton that cannot navigate off-site. */
.btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-5);
    height: 44px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: var(--text-small);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.btn-link--onDark {
    border: 1px solid rgba(249, 245, 236, 0.35);
    color: var(--cream);
}

.btn-link--onDark:hover {
    background: var(--cream);
    color: var(--ink);
}

.section__cta { margin-top: var(--space-6); }

/* =============================================================================
   Cards
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------- */

/* Pill buttons are a brand decision (tokens/spacing.css ships --radius-pill for exactly
   this), applied on the XUI component class so every button in the app follows without
   any page passing a variant. */
.xui-button {
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}

.xui-button:hover:not(:disabled) { transform: translateY(-1px); }

.xui-button--primary { box-shadow: 0 2px 8px rgba(124, 99, 29, 0.25); }

.xui-button--ghost { color: var(--green-dark); }

/* --- Cards ---------------------------------------------------------------- */

.xui-card {
    border-radius: var(--radius-l);
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
}

.xui-badge { font-family: var(--font-display); font-weight: 700; }

.stat-card,
.designer-card,
.programs-grid .xui-card {
    height: 100%;
}

.section--stats { padding-block: var(--space-7); }

.stat-card {
    text-align: center;
    border-top: 3px solid var(--green);
    box-shadow: var(--shadow-card);
    padding-block: var(--space-2);
}

.stat-card__value {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
    margin: 0;
}

.stat-card svg { color: var(--green); }

.program-card:hover,
.designer-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lifted);
}

/* A gold roundel behind the glyph, so each programme card reads as a badge rather than a
   hairline icon floating beside the title. */
.program-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--green) 16%, transparent);
    color: var(--green-dark);
}

/* XuiCard zeroes its own margin from scoped CSS, which outranks the .page > * + * rhythm
   rule, so a spotlight card following a grid needs the gap stated on the card itself. */
.event-spotlight {
    margin-top: var(--space-7);
    border-left: 4px solid var(--green);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--green-light) 16%, transparent), transparent 240px),
        var(--paper);
}

.event-spotlight__title {
    font-family: var(--font-display);
    font-size: var(--text-display-m);
    font-weight: 800;
    color: var(--ink);
    margin: 0;
}

.event-spotlight__facts {
    padding-left: var(--space-5);
    border-left: var(--border-hairline);
}

/* XuiAvatar's surface token sits a shade off the card it lands on, so initials read as
   ghosted. The wrapper supplies the ink disc and the gold ring instead. */
.avatar-ring {
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--green);
}

/* !important is doing real work here rather than papering over specificity: XuiAvatar
   writes its background as an inline style attribute, which no selector can outrank. */
.avatar-ring .xui-avatar {
    background: transparent !important;
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.avatar-ring .xui-avatar__initials { color: var(--cream); }

.designer-card--compact { text-align: center; }

/* =============================================================================
   Gallery
   ========================================================================== */

.gallery-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-m);
    overflow: hidden;
    background: var(--cream-dim);
    box-shadow: var(--shadow-card);
    transition: transform var(--duration-normal) var(--ease-standard),
                box-shadow var(--duration-normal) var(--ease-standard);
}

.gallery-tile { margin: 0; }
.gallery-tile img { transition: transform 400ms var(--ease-standard); }

.gallery-tile:hover { box-shadow: var(--shadow-lifted); }
.gallery-tile:hover img { transform: scale(1.04); }

/* Captions ride in on hover for pointer users; the alt text already carries the same
   description for everyone else, so nothing is lost when the caption is hidden. */
.gallery-tile__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-6) var(--space-4) var(--space-3);
    background: linear-gradient(to top, rgba(28,26,23,0.82), transparent);
    color: var(--cream);
    font-size: var(--text-small);
    line-height: var(--lh-snug);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--duration-normal) var(--ease-standard),
                transform var(--duration-normal) var(--ease-standard);
}

.gallery-tile:hover .gallery-tile__caption,
.gallery-tile:focus-within .gallery-tile__caption {
    opacity: 1;
    transform: none;
}

.gallery-empty {
    margin-top: var(--space-7);
    padding: var(--space-6);
    border: 1px dashed var(--line);
    border-radius: var(--radius-l);
    background: var(--cream-dim);
}

/* =============================================================================
   Contact
   ========================================================================== */

.contact-social-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: var(--ink-soft);
    font-size: var(--text-small);
    font-weight: 600;
}
.contact-social-link:hover { color: var(--green-dark); }

.contact-form__reset { margin-top: var(--space-4); }

/* Button lookalike for external links, which must be anchors rather than buttons. */
.site__external-btn { text-decoration: none; }

/* =============================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
    .site__nav:not(.site__nav--mobile) { display: none; }
    .site__nav--mobile { display: flex; }
    .site .site__header .site__menu-toggle { display: inline-flex; }

    .site__header-row { gap: var(--space-3); }
    .site__brand-sub { display: none; }
    .site__brand-name { font-size: 19px; }

    .hero { padding-block: var(--space-7) var(--space-6); }
    .hero__title { font-size: clamp(2.1rem, 8vw, 3rem); }
    .hero__copy { max-width: none; }

    .section,
    .section--stats { padding-block: var(--space-7); }

    .page { padding-block: var(--space-6) var(--space-7); }
    .page h1, .xui-page-header__title { font-size: clamp(2rem, 8vw, 2.6rem); }

    .event-spotlight__facts {
        padding-left: 0;
        border-left: none;
        padding-top: var(--space-4);
        border-top: var(--border-hairline);
    }

    .site__footer { margin-top: var(--space-7); padding-block: var(--space-7) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================================
   Blazor framework chrome
   ========================================================================== */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--rose);
    color: var(--ink);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(28, 26, 23, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--rose-dark);
    padding: 1rem;
    color: var(--cream);
    border-radius: var(--radius-m);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--line);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--green);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--ink);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }