/* ==========================================================================
   The Rumanis — front-end stylesheet (EVERGREEN edition)
   Identical to rumanis.css except the PRIMARY HUE block. Regenerate from
   rumanis.css after any change there — do not edit the two files independently.
   Source of truth: RUMA-BrandBoard-SK-260826 (colours, type, marks).

   Structure
   1. Fonts
   2. Tokens        brand palette → primary hue → semantic tokens (light + .dark)
   3. Base          scoped to .ruma (public site) so Flux stays untouched
   4. Typography
   5. Layout        .container, .section, .grid-*
   6. Components    header, nav, buttons, eyebrow, cards, forms, timeline, …
   7. Motion
   8. Members area  overrides for the Flux sidebar shell (.ruma-members)
   9. Utilities
   ========================================================================== */

/* 1. Fonts ------------------------------------------------------------------ */

@font-face {
    font-family: 'DM Serif Display';
    src: url('/fonts/brand/DMSerifDisplay-Regular.woff2') format('woff2'), url('/fonts/brand/DMSerifDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Serif Display';
    src: url('/fonts/brand/DMSerifDisplay-Italic.woff2') format('woff2'), url('/fonts/brand/DMSerifDisplay-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/brand/DMSans-Variable.woff2') format('woff2'), url('/fonts/brand/DMSans-Variable.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/brand/DMSans-Italic-Variable.woff2') format('woff2'), url('/fonts/brand/DMSans-Italic-Variable.ttf') format('truetype-variations');
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}

/* 2. Tokens ----------------------------------------------------------------- */

@layer theme, base, components, utilities;

:root {
    /* Brand palette — fixed, never edit these */
    --ruma-burgundy: #851426;
    --ruma-evergreen: #0e3226;
    --ruma-imperial: #09285e;
    --ruma-orange: #cc4400;
    --ruma-gold: #f5af00;
    --ruma-linen: #ffeddf;
    --ruma-alabaster: #dbdbdb;
    --ruma-black: #000000;
    --ruma-white: #ffffff;

    /* Derived tints (not on the board; used for surfaces and rules only) */
    --ruma-linen-deep: #f3d9c6;
    --ruma-imperial-deep: #061431;
    --ruma-imperial-soft: #0b1f4a;
    --ruma-evergreen-deep: #071d16;
    --ruma-evergreen-soft: #0b2a20;
    --ruma-orange-deep: #a63700;

    /* Type */
    --font-display: 'DM Serif Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
    --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
    --text-3xl: clamp(2.375rem, 1.7rem + 3vw, 3.75rem);
    --text-4xl: clamp(3rem, 1.9rem + 5vw, 5.25rem);
    --text-display: clamp(3rem, 1.5rem + 6.5vw, 7rem);

    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-body: 1.6;
    --tracking-caps: 0.18em;
    --tracking-nav: 0.12em;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --section-y: clamp(4rem, 8vw, 7.5rem);
    --gutter: clamp(1rem, 4vw, 2.5rem);

    /* Shape & elevation — editorial: near-square corners, hairline rules */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;
    --hairline: 1px;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
    --shadow-md: 0 8px 24px -12px rgb(0 0 0 / 0.25);
    --shadow-lg: 0 24px 48px -24px rgb(0 0 0 / 0.35);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;

    /* Layout */
    --container: 75rem;
    --container-wide: 88rem;
    --container-narrow: 44rem;
    --header-h: 4.5rem;

    /* z-index scale */
    --z-header: 40;
    --z-drawer: 50;
    --z-toast: 100;
    /* ------------------------------------------------------------------
       PRIMARY HUE — the only block that differs between rumanis.css (Imperial
       Blue) and rumanis-green.css (Evergreen). Keep the two files in sync
       everywhere else.
       ------------------------------------------------------------------ */
    --primary: var(--ruma-evergreen);
    --primary-deep: var(--ruma-evergreen-deep); /* hover for primary buttons */
    --primary-dark-surface: var(--ruma-evergreen-deep); /* dark-mode page background */
    --primary-dark-surface-2: var(--ruma-evergreen-soft); /* dark-mode cards / sidebar */
    --primary-dark-surface-3: #12402f; /* dark-mode placeholders / avatars */
    --ink: #0f1512; /* body text, tinted toward the primary */
    --ink-muted: #4b5a52;

    /* Semantic tokens (light). Components use only these. */
    --surface: var(--ruma-white);
    --surface-2: var(--ruma-linen);
    --surface-3: var(--ruma-linen-deep);
    --ink-strong: var(--ruma-black);
    --rule: color-mix(in srgb, var(--primary) 18%, transparent);
    --rule-strong: var(--primary);
    --accent: var(--primary);
    --accent-hover: var(--primary-deep);
    --accent-ink: var(--ruma-linen);
    --highlight: var(--ruma-gold);
    --accent-2: var(--ruma-orange); /* warm/secondary accent: labels, links, details */
    --accent-2-ink: var(--ruma-linen);
    --accent-2-hover: var(--ruma-orange-deep);
    --ribbon: linear-gradient(90deg, var(--ruma-orange), var(--ruma-gold)); /* stripe under bands */
    --band: var(--primary);
    --band-ink: var(--ruma-linen);
    --band-muted: color-mix(in srgb, var(--ruma-linen) 65%, transparent);
    --logo: var(--ruma-black);
    --focus: var(--ruma-orange);
    --danger: var(--ruma-orange);
    --success: var(--ruma-evergreen);
    --scheme: light;
}

/* Dark scheme: deep primary surfaces, black bands, gold accents, linen marks */
:root.dark {
    --surface: var(--primary-dark-surface);
    --surface-2: var(--primary-dark-surface-2);
    --surface-3: var(--primary-dark-surface-3);
    --ink: var(--ruma-linen);
    --ink-strong: var(--ruma-white);
    --ink-muted: color-mix(in srgb, var(--ruma-linen) 66%, transparent);
    --rule: color-mix(in srgb, var(--ruma-linen) 16%, transparent);
    --rule-strong: var(--ruma-gold);
    --accent: var(--ruma-gold);
    --accent-hover: #ffc233;
    --accent-ink: var(--ruma-black);
    --accent-2: var(--ruma-gold);
    --accent-2-ink: var(--ruma-black);
    --accent-2-hover: #ffc233;
    --band: var(--ruma-black);
    --band-ink: var(--ruma-linen);
    --logo: var(--ruma-linen);
    --focus: var(--ruma-gold);
    --scheme: dark;
}
/* 3. Base ------------------------------------------------------------------- */

html {
    color-scheme: var(--scheme);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

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

.ruma {
    margin: 0;
    min-height: 100dvh;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
}

:where(.ruma) main {
    flex: 1 0 auto;
}

/* Element resets sit in a low-priority layer so Flux/Tailwind utilities (public forms) can override them. */
@layer base {
    :where(.ruma) img,
    :where(.ruma) svg,
    :where(.ruma) video {
        display: block;
        max-width: 100%;
        height: auto;
    }

    :where(.ruma) a {
        color: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
    }

    :where(.ruma) :focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 3px;
        border-radius: var(--radius-sm);
    }

    :where(.ruma) button {
        font: inherit;
        color: inherit;
        cursor: pointer;
    }

    :where(.ruma) ::selection {
        background: var(--accent);
        color: var(--accent-ink);
    }
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100%;
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-4);
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: var(--space-4);
}

/* 4. Typography ------------------------------------------------------------- */

:where(.ruma) h1,
:where(.ruma) h2,
:where(.ruma) h3,
:where(.ruma) h4,
.display,
.display-italic {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    color: var(--ink-strong);
    margin: 0;
    text-wrap: balance;
}

:where(.ruma) h1 {
    font-size: var(--text-3xl);
}

:where(.ruma) h2 {
    font-size: var(--text-2xl);
}

:where(.ruma) h3 {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
}

:where(.ruma) h4 {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

:where(.ruma) p {
    margin: 0;
}

:where(.ruma) p + p {
    margin-top: 1em;
}

.display {
    font-size: var(--text-4xl);
}

.display--hero {
    font-size: var(--text-display);
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.display-italic,
.italic {
    font-style: italic;
}

/* Uppercase sans label — the brand board's "SUBHEADING" */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
    line-height: 1.4;
}

.eyebrow--accent {
    color: var(--accent-2);
}

.eyebrow--rules {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.eyebrow--rules::before,
.eyebrow--rules::after {
    content: '';
    flex: 1 1 auto;
    height: var(--hairline);
    background: var(--rule-strong);
    opacity: 0.6;
}

.eyebrow--rules.eyebrow--start::before {
    display: none;
}

.eyebrow--dots::before,
.eyebrow--dots::after {
    content: '•';
    margin-inline: var(--space-3);
    opacity: 0.6;
}

.lede {
    font-size: var(--text-md);
    line-height: 1.55;
    color: var(--ink);
    max-width: 62ch;
}

.lede--lg {
    font-size: var(--text-lg);
}

.muted {
    color: var(--ink-muted);
}

.prose {
    max-width: 66ch;
}

.prose > * + * {
    margin-top: 1.1em;
}

.prose h2,
.prose h3 {
    margin-top: 1.8em;
}

.prose blockquote {
    margin: 1.5em 0;
    padding-left: var(--space-6);
    border-left: 2px solid var(--rule-strong);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.35;
}

.drop-cap::first-letter {
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: 0.8;
    float: left;
    padding: 0.08em 0.12em 0 0;
    color: var(--accent-2);
}

/* 5. Layout ----------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-y);
}

.section--tight {
    padding-block: calc(var(--section-y) * 0.6);
}

.section--flush-top {
    padding-top: 0;
}

.section--band {
    background: var(--band);
    color: var(--band-ink);
    --ink: var(--band-ink);
    --ink-strong: var(--band-ink);
    --ink-muted: var(--band-muted);
    --rule: color-mix(in srgb, var(--band-ink) 22%, transparent);
    --rule-strong: var(--ruma-gold);
    --logo: var(--band-ink);
    --accent: var(--ruma-gold);
    --accent-hover: #ffc233;
    --accent-ink: var(--ruma-black);
    --accent-2: var(--ruma-gold);
    --accent-2-ink: var(--ruma-black);
    --accent-2-hover: #ffc233;
    --surface: var(--band);
    --surface-2: color-mix(in srgb, var(--band-ink) 10%, var(--band));
    --surface-3: color-mix(in srgb, var(--band-ink) 20%, var(--band));
    --focus: var(--ruma-gold);
}

/* Home bands with a touch of Burgundy / Imperial Blue. Light: the band takes the colour.
   Dark: the band stays black, with an Imperial Blue wash (stats) or a burgundy glow and a
   burgundy-to-blue hairline on top (tree). Dark tones are softened to sit on the dark page. */
.section--band-imperial,
.section--band-burgundy {
    --band-imperial-dark: #142f63;
    --band-burgundy-dark: #5e1a27;
}

:root:not(.dark) .section--band-imperial {
    --band: var(--ruma-imperial);
}

:root:not(.dark) .section--band-burgundy {
    --band: var(--ruma-burgundy);
}

:root.dark .section--band-imperial {
    background: linear-gradient(100deg, var(--band) 35%, color-mix(in srgb, var(--band-imperial-dark) 85%, var(--band)));
}

:root.dark .section--band-burgundy::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--band-burgundy-dark), var(--band-imperial-dark));
}

:root.dark .section--band-burgundy::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(38rem 26rem at 78% 55%, color-mix(in srgb, var(--band-burgundy-dark) 90%, transparent), transparent 72%);
}

.section--elevated {
    background: var(--surface-2);
}

.section-head {
    display: grid;
    gap: var(--space-4);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    max-width: 52rem;
}

.section-head--center {
    text-align: center;
    margin-inline: auto;
}

.section-head--center .eyebrow--rules {
    justify-content: center;
}

.section-head--center .eyebrow--rules::before,
.section-head--center .eyebrow--rules::after {
    max-width: 6rem;
}

.section-head--split {
    max-width: none;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 48rem) {
    .section-head--split {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--space-10);
    }
}

/* Scoped to the public site: the members area uses Tailwind's `grid` + `gap-*` utilities */
.ruma .grid {
    display: grid;
    gap: var(--space-6);
}

.grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64rem) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.split {
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 56rem) {
    .split {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 6vw, 5rem);
    }

    .split--offset {
        grid-template-columns: 5fr 6fr;
    }

    .split--reverse > :first-child {
        order: 2;
    }

    .split--narrow-end {
        grid-template-columns: 2fr 1fr;
    }
}

.stack {
    display: grid;
    gap: var(--space-4);
}

.stack--lg {
    gap: var(--space-6);
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: center;
}

.rule {
    border: 0;
    height: var(--hairline);
    background: var(--rule);
    margin: 0;
}

.rule--strong {
    background: var(--rule-strong);
}

.rule--gold {
    background: var(--ruma-gold);
}

/* 6. Components ------------------------------------------------------------- */

/* --- Marks --- */
.mark {
    color: var(--logo);
    width: auto;
}

.mark--on-band {
    color: var(--band-ink);
}

.mark--accent {
    color: var(--accent);
}

.mark--gold {
    color: var(--ruma-gold);
}

/* Faint watermark, decorative only */
.watermark {
    position: absolute;
    pointer-events: none;
    color: currentColor;
    opacity: 0.06;
    z-index: 0;
}

/* --- Header & nav --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: var(--hairline) solid var(--rule);
}

.site-header__inner {
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--logo);
    min-height: 44px;
}

.site-header__brand .mark {
    height: 2.25rem;
}

.site-header__brand--stacked .mark {
    height: 3rem;
}

.site-header__brand--monogram .mark {
    height: 2.25rem;
}

/* Centered variant: nav-left | brand | nav-right (Heritage) */
.site-header--centered .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: calc(var(--header-h) + 0.75rem);
}

.site-header--centered .site-nav:first-of-type {
    justify-self: end;
}

.site-header--centered .site-nav:last-of-type {
    justify-self: start;
}

.site-header--centered .site-header__brand {
    grid-column: 2;
    justify-self: center;
}

.site-header--centered .nav-toggle {
    grid-column: 3;
    justify-self: end;
}

/* Band variant: dark bar (Imperial) */
.site-header--band {
    background: color-mix(in srgb, var(--band) 92%, transparent);
    color: var(--band-ink);
    --ink: var(--band-ink);
    --ink-muted: var(--band-muted);
    --logo: var(--band-ink);
    --rule: color-mix(in srgb, var(--band-ink) 18%, transparent);
    border-bottom-color: color-mix(in srgb, var(--ruma-gold) 40%, transparent);
}

.site-nav {
    display: none;
    align-items: center;
    gap: var(--space-2);
}

@media (min-width: 64rem) {
    .site-nav {
        display: flex;
    }
}

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink);
    transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 8px;
    height: 1px;
    background: var(--accent-2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current='page']::after {
    transform: scaleX(1);
}

.site-nav__link[aria-current='page'] {
    color: var(--accent-2);
}

.site-header--band .site-nav__link::after {
    background: var(--ruma-gold);
}

.site-header--band .site-nav__link[aria-current='page'] {
    color: var(--ruma-gold);
}

/* On the Talent pages (album cover or person cover present) the current item becomes a burgundy tab the
   full height of the header, like an album index tab: linen text, gold underline. The phone menu marks
   it with a burgundy bar. */
body:has(.album-cover, .person-cover) .site-nav__link[aria-current='page'] {
    min-height: calc(var(--header-h) + 1px);
    margin-block: calc((44px - var(--header-h)) / 2) calc((44px - var(--header-h)) / 2 - 1px);
    background: var(--ruma-burgundy);
    color: var(--ruma-linen);
}

body:has(.album-cover, .person-cover) .site-nav__link[aria-current='page']::after {
    bottom: 22px;
    background: var(--ruma-gold);
}

body:has(.album-cover, .person-cover) .drawer__link[aria-current='page'] {
    padding-left: var(--space-4);
    box-shadow: inset 4px 0 0 var(--ruma-burgundy);
    color: var(--ruma-burgundy);
}

:root.dark body:has(.album-cover, .person-cover) .drawer__link[aria-current='page'] {
    color: var(--ruma-gold);
}

/* On the About page (hero--about present) the current item is a gold tab the full height of the header,
   like the Talent tab: black text, burgundy underline. The phone menu marks it with a gold bar; the text
   stays dark there (gold text fails on light), gold in dark mode. */
body:has(.hero--about) .site-nav__link[aria-current='page'] {
    min-height: calc(var(--header-h) + 1px);
    margin-block: calc((44px - var(--header-h)) / 2) calc((44px - var(--header-h)) / 2 - 1px);
    background: var(--ruma-gold);
    color: var(--ruma-black);
}

body:has(.hero--about) .site-nav__link[aria-current='page']::after {
    bottom: 22px;
    background: var(--ruma-burgundy);
}

body:has(.hero--about) .drawer__link[aria-current='page'] {
    padding-left: var(--space-4);
    box-shadow: inset 4px 0 0 var(--ruma-gold);
    color: var(--ink-strong);
}

:root.dark body:has(.hero--about) .drawer__link[aria-current='page'] {
    color: var(--ruma-gold);
}

/* On the Contact page (hero--contact present) the current item is an Alabaster Grey tab the full height of
   the header, like the Talent, About and Recipes tabs: black text, burgundy underline. The phone menu marks it
   with an Imperial Blue bar and blue text; an Alabaster Grey bar and grey text in dark mode (blue fails on dark). */
body:has(.hero--contact) .site-nav__link[aria-current='page'] {
    min-height: calc(var(--header-h) + 1px);
    margin-block: calc((44px - var(--header-h)) / 2) calc((44px - var(--header-h)) / 2 - 1px);
    background: var(--ruma-alabaster);
    color: var(--ruma-black);
}

body:has(.hero--contact) .site-nav__link[aria-current='page']::after {
    bottom: 22px;
    background: var(--ruma-burgundy);
}

body:has(.hero--contact) .drawer__link[aria-current='page'] {
    padding-left: var(--space-4);
    box-shadow: inset 4px 0 0 var(--ruma-imperial);
    color: var(--ruma-imperial);
}

:root.dark body:has(.hero--contact) .drawer__link[aria-current='page'] {
    box-shadow: inset 4px 0 0 var(--ruma-alabaster);
    color: var(--ruma-alabaster);
}

/* On the Recipes pages (directory and recipe page) the current item is a Spicy Orange tab the full height of
   the header, like the Talent and About tabs: linen text, gold underline (deep orange in dark mode, matching
   the page's orange fills). The phone menu marks it with an orange bar and orange text; gold text in dark
   mode (orange text fails on dark). */
body:has(.recipes-page) .site-nav__link[aria-current='page'] {
    min-height: calc(var(--header-h) + 1px);
    margin-block: calc((44px - var(--header-h)) / 2) calc((44px - var(--header-h)) / 2 - 1px);
    background: var(--ruma-orange);
    color: var(--ruma-linen);
}

:root.dark body:has(.recipes-page) .site-nav__link[aria-current='page'] {
    background: var(--ruma-orange-deep);
}

body:has(.recipes-page) .site-nav__link[aria-current='page']::after {
    bottom: 22px;
    background: var(--ruma-gold);
}

body:has(.recipes-page) .drawer__link[aria-current='page'] {
    padding-left: var(--space-4);
    box-shadow: inset 4px 0 0 var(--ruma-orange);
    color: var(--ruma-orange);
}

:root.dark body:has(.recipes-page) .drawer__link[aria-current='page'] {
    color: var(--ruma-gold);
}

/* On the Family tree page (ft-page present) the current item is an Imperial Blue tab the full height of
   the header, like the Talent, About, Contact and Recipes tabs: linen text, gold underline. The phone menu
   marks it with an Evergreen bar and Evergreen text; gold text in dark mode (Evergreen fails on dark). */
body:has(.ft-page) .site-nav__link[aria-current='page'] {
    min-height: calc(var(--header-h) + 1px);
    margin-block: calc((44px - var(--header-h)) / 2) calc((44px - var(--header-h)) / 2 - 1px);
    background: var(--ruma-imperial);
    color: var(--ruma-linen);
}

body:has(.ft-page) .site-nav__link[aria-current='page']::after {
    bottom: 22px;
    background: var(--ruma-gold);
}

body:has(.ft-page) .drawer__link[aria-current='page'] {
    padding-left: var(--space-4);
    box-shadow: inset 4px 0 0 var(--ruma-evergreen);
    color: var(--ruma-evergreen);
}

:root.dark body:has(.ft-page) .drawer__link[aria-current='page'] {
    color: var(--ruma-gold);
}

.site-nav__icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.7;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Mobile drawer */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
}

.nav-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

@media (min-width: 64rem) {
    .nav-toggle {
        display: none;
    }
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(22rem, 88vw);
}

.drawer__scrim {
    background: rgb(0 0 0 / 0.5);
    border: 0;
    cursor: pointer;
}

.drawer__panel {
    background: var(--surface);
    color: var(--ink);
    border-left: var(--hairline) solid var(--rule);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    overflow-y: auto;
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer__nav {
    display: grid;
}

.drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: var(--space-2) 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    text-decoration: none;
    border-bottom: var(--hairline) solid var(--rule);
    color: var(--ink-strong);
}

.drawer__link[aria-current='page'] {
    color: var(--accent-2);
}

.drawer__foot {
    margin-top: auto;
    display: grid;
    gap: var(--space-3);
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-6);
    border: var(--hairline) solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.btn:active {
    transform: translateY(1px);
}

.btn svg {
    width: 1rem;
    height: 1rem;
}

/* Icon-only button (header Members / Sign in): a 44px square; the name is its aria-label and tooltip */
.btn.btn--icon {
    width: 44px;
    padding: 0;
}

.btn.btn--icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.btn--primary {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}

.btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn--outline {
    background: transparent;
    color: var(--ink-strong);
    border-color: currentColor;
}

.btn--outline:hover {
    background: var(--ink-strong);
    color: var(--surface);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    padding-inline: var(--space-3);
}

.btn--ghost:hover {
    color: var(--accent-2);
}

/* Warm CTA — Spicy Orange. Light surfaces only; on bands use .btn--gold */
.btn--warm {
    background: var(--accent-2);
    color: var(--accent-2-ink);
    border-color: var(--accent-2);
}

.btn--warm:hover {
    background: var(--accent-2-hover);
    border-color: var(--accent-2-hover);
}

.btn--gold {
    background: var(--ruma-gold);
    color: var(--ruma-black);
    border-color: var(--ruma-gold);
}

.btn--gold:hover {
    background: #ffc233;
    border-color: #ffc233;
}

.btn--linen {
    background: var(--ruma-linen);
    color: var(--ruma-black);
    border-color: var(--ruma-linen);
}

.btn--linen:hover {
    background: var(--ruma-white);
}

.btn--on-band {
    color: var(--band-ink);
    border-color: color-mix(in srgb, var(--band-ink) 60%, transparent);
}

.btn--on-band:hover {
    background: var(--band-ink);
    color: var(--band);
}

.btn--lg {
    min-height: 52px;
    padding-inline: var(--space-8);
    font-size: var(--text-sm);
}

.btn--block {
    width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Text link with arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--accent-2);
}

.link-arrow svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-base) var(--ease-out);
}

.link-arrow:hover svg {
    transform: translateX(4px);
}

/* --- Theme toggle --- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* On the band header the accent (Evergreen / Imperial in light mode) matches the bar, so the hover turns gold,
   like the band's nav underline and the dark-mode hover */
.site-header--band .theme-toggle:hover {
    border-color: var(--ruma-gold);
    color: var(--ruma-gold);
}

.theme-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
}

.theme-toggle__sun {
    display: none;
}

.dark .theme-toggle__sun {
    display: block;
}

.dark .theme-toggle__moon {
    display: none;
}

/* --- Ticket frame (brand-board motif: double rule, corner dots) --- */
.ticket-frame {
    position: relative;
    border: var(--hairline) solid var(--rule-strong);
    outline: var(--hairline) solid var(--rule-strong);
    outline-offset: 6px;
    padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
}

.ticket-frame::before,
.ticket-frame::after {
    content: '';
    position: absolute;
    inset: -14px;
    pointer-events: none;
    background:
        radial-gradient(circle, var(--rule-strong) 2.5px, transparent 3px) left top / 6px 6px no-repeat,
        radial-gradient(circle, var(--rule-strong) 2.5px, transparent 3px) right top / 6px 6px no-repeat,
        radial-gradient(circle, var(--rule-strong) 2.5px, transparent 3px) left bottom / 6px 6px no-repeat,
        radial-gradient(circle, var(--rule-strong) 2.5px, transparent 3px) right bottom / 6px 6px no-repeat;
}

.ticket-frame::after {
    display: none;
}

.ticket-frame--gold {
    --rule-strong: var(--ruma-gold);
}

/* --- Hero patterns --- */
.hero {
    position: relative;
    overflow: hidden;
}

.hero--centered {
    text-align: center;
}

.hero--centered .hero__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
    max-width: 56rem;
    margin-inline: auto;
}

.hero__logo {
    width: min(100%, 34rem);
}

.hero__logo .mark {
    width: 100%;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.hero--band {
    background: var(--band);
    color: var(--band-ink);
    --ink: var(--band-ink);
    --ink-strong: var(--band-ink);
    --ink-muted: var(--band-muted);
    --logo: var(--band-ink);
    --rule-strong: var(--ruma-gold);
    --rule: color-mix(in srgb, var(--band-ink) 20%, transparent);
    --accent: var(--ruma-gold);
    --accent-hover: #ffc233;
    --accent-ink: var(--ruma-black);
    --accent-2: var(--ruma-gold);
    --accent-2-ink: var(--ruma-black);
    --accent-2-hover: #ffc233;
    --focus: var(--ruma-gold);
}

/* Ribbon: orange → gold stripe along the bottom edge of band heroes (Imperial) */
.hero--band::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--ribbon);
    pointer-events: none;
}

/* Curtain-like soft light on band heroes */
.hero--band::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 50% 0%, rgb(255 255 255 / 0.12), transparent 70%),
        linear-gradient(180deg, transparent 60%, rgb(0 0 0 / 0.25));
}

.hero--band > * {
    position: relative;
}

.hero--split .hero__inner {
    display: grid;
    gap: var(--space-8);
    align-items: end;
}

@media (min-width: 56rem) {
    .hero--split .hero__inner {
        grid-template-columns: 7fr 5fr;
        gap: clamp(2rem, 6vw, 5rem);
    }
}

.hero__monogram-bg {
    position: absolute;
    right: -6vw;
    top: -4vw;
    width: clamp(18rem, 42vw, 40rem);
    color: var(--ink-strong);
    opacity: 0.05;
    pointer-events: none;
}

.hero__seal-bg {
    position: absolute;
    right: -8rem;
    bottom: -10rem;
    width: clamp(20rem, 44vw, 38rem);
    opacity: 0.08;
    pointer-events: none;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    padding-top: var(--space-6);
    border-top: var(--hairline) solid var(--rule);
}

/* --- Cards --- */
.card {
    background: var(--surface-2);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.card--link:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.card--flat {
    background: transparent;
    border: 0;
    border-top: var(--hairline) solid var(--rule-strong);
    border-radius: 0;
    padding-inline: 0;
}

.card__num {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--accent-2);
    line-height: 1;
}

.card__icon {
    width: 2rem;
    height: 2rem;
    color: var(--accent-2);
}

.card h3 {
    font-size: var(--text-lg);
}

/* Member / talent card */
.member-card {
    display: grid;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
}

.member-card__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-2);
}

.member-card__media > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform var(--dur-slow) var(--ease-out);
}

.member-card:hover .member-card__media > * {
    transform: scale(1.03);
}

.member-card:hover .member-card__name {
    color: var(--accent-2);
}

.member-card__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.2;
    color: var(--ink-strong);
}

.member-card__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
}

.member-card__role {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 var(--space-3);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.tag--accent {
    border-color: var(--accent-2);
    color: var(--accent-2);
}

.talent-pagination {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
}

/* Talent album (/talent and /talent/{id}): burgundy cover with a pile of portraits, mounted photo cards
   with field-coloured tape (tone 1–5 from App\Support\FieldTones), the person page, the family wall with
   its viewer, and "Missing from the album?". Mounts stay paper-white in both schemes. */
:is(.album-cover, .album, .wall, .missing, .person-cover, .person-talent) {
    --album-burgundy: var(--ruma-burgundy);
    --album-paper: var(--ruma-linen);
    --album-mat: #fffdfb;
    --album-mat-ink: #5b5550;
}

:root.dark :is(.album-cover, .album, .wall, .missing, .person-cover, .person-talent) {
    --album-paper: var(--ruma-evergreen-soft);
}

[data-tone='1'] { --tone: var(--ruma-evergreen); --tone-ink: var(--ruma-linen); }
[data-tone='2'] { --tone: var(--ruma-orange); --tone-ink: var(--ruma-white); }
[data-tone='3'] { --tone: var(--ruma-imperial); --tone-ink: var(--ruma-linen); }
[data-tone='4'] { --tone: var(--ruma-gold); --tone-ink: var(--ruma-black); }
[data-tone='5'] { --tone: var(--ruma-black); --tone-ink: var(--ruma-linen); }

.album-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ruma-gold);
}

.album-eyebrow--dark {
    color: var(--ruma-burgundy);
}

:root.dark .album-eyebrow--dark {
    color: var(--ruma-gold);
}

/* Mounted photo: initials on the field colour until a portrait exists */
.mount {
    position: relative;
    padding: 0.85rem 0.85rem 1.25rem;
    background: var(--album-mat, #fffdfb);
    color: var(--ruma-black);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 16px 30px -20px rgb(0 0 0 / 0.5);
}

.mount__photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--tone, var(--ruma-evergreen));
    color: var(--tone-ink, var(--ruma-linen));
    font-family: var(--font-display);
    line-height: 1;
}

.mount__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mount__tape {
    position: absolute;
    top: -0.85rem;
    left: 50%;
    width: 5.5rem;
    height: 1.6rem;
    transform: translateX(-50%) rotate(-3deg);
    background: color-mix(in srgb, var(--tone) 82%, transparent);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
    clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
}

.field-dot {
    display: inline-block;
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--tone);
}

.field-tape {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    background: color-mix(in srgb, var(--tone) 85%, transparent);
    color: var(--tone-ink);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    transform: rotate(-1.5deg);
    clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 50%);
}

/* Cover */
.album-cover {
    display: grid;
    min-height: min(46rem, 88vh);
    background: var(--album-paper);
}

@media (min-width: 60rem) {
    .album-cover {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

.album-cover__panel,
.person-cover__panel {
    position: relative;
    display: grid;
    align-items: center;
    padding: clamp(3rem, 7vw, 6rem) calc(var(--gutter) + 1.5rem);
    background: var(--album-burgundy);
    color: var(--ruma-linen);
}

.album-cover__panel::after,
.person-cover__panel::after {
    content: '';
    position: absolute;
    inset: 1rem;
    border: var(--hairline) solid rgb(245 175 0 / 0.35);
    pointer-events: none;
}

.album-cover__copy {
    position: relative;
    display: grid;
    gap: var(--space-5);
    max-width: 32rem;
    margin-left: auto;
}

.album-cover__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 1.6rem + 5vw, 5.75rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ruma-linen);
    text-wrap: balance;
}

.album-cover__title em {
    color: var(--ruma-gold);
}

.album-cover__lede {
    font-size: var(--text-md);
    line-height: 1.6;
    color: rgb(255 237 223 / 0.82);
}

.album-cover__count,
.person-cover__facts {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--ruma-gold);
}

.album-cover__jump {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border: var(--hairline) solid var(--ruma-gold);
    border-radius: var(--radius-pill);
    color: var(--ruma-linen);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.album-cover__jump:hover {
    background: var(--ruma-gold);
    color: var(--ruma-black);
}

.album-cover__pile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter);
    background: radial-gradient(70% 60% at 50% 45%, rgb(255 255 255 / 0.65), transparent 70%), var(--album-paper);
}

.album-snap {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-2);
    width: clamp(8.5rem, 13vw, 11rem);
    margin: -0.75rem;
    padding: 0.6rem 0.6rem 0.9rem;
    text-decoration: none;
    transform: rotate(var(--tilt)) translateY(calc(var(--i) * 0.4rem));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
    z-index: calc(10 - var(--i));
}

.album-snap:hover,
.album-snap:focus-visible {
    transform: rotate(0deg) translateY(-0.5rem) scale(1.04);
    z-index: 20;
    box-shadow: 0 30px 50px -24px rgb(0 0 0 / 0.55);
}

.album-snap .mount__photo {
    font-size: clamp(2rem, 4vw, 3rem);
}

.album-snap__name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-sm);
    line-height: 1.2;
    color: var(--ruma-black);
    text-align: center;
    text-wrap: balance;
}

.album-snap__stack {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--album-mat);
    transform: rotate(-6deg) translate(-6px, 4px);
    box-shadow: 0 10px 20px -14px rgb(0 0 0 / 0.5);
}

.album-snap__more {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-1);
    aspect-ratio: 4 / 5;
    padding: var(--space-2);
    border: 2px dashed rgb(133 20 38 / 0.4);
    color: var(--ruma-burgundy);
    text-align: center;
}

.album-snap__more b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1;
}

.album-snap__more span {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 59.99rem) {
    .album-cover__copy {
        margin-left: 0;
    }

    .album-snap {
        width: 7.5rem;
        margin: -0.4rem;
    }
}

/* Album: one card per person, A–Z, 12 per page */
.album {
    padding-block: var(--section-y);
    background: var(--surface);
    scroll-margin-top: var(--header-h);
}

.album__head {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    margin-bottom: var(--space-8);
}

@media (min-width: 56rem) {
    .album__head {
        grid-template-columns: 1fr 22rem;
    }
}

.album__title,
.missing__title,
.wall__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-3xl);
    line-height: 1;
    margin: 0;
    color: var(--ink-strong);
}

.album__title {
    margin-top: var(--space-3);
}

.album__lede {
    color: var(--ink-muted);
}

.album__filters {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-5) 0;
    border-block: var(--hairline) solid var(--rule);
}

@media (min-width: 40rem) {
    .album__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

.album__option {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.album__result {
    padding-block: var(--space-4) var(--space-10);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.album__grid {
    display: grid;
    gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}

.album-card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    text-decoration: none;
    transform: rotate(var(--tilt));
    transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}

.album-card:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 30px 46px -24px rgb(0 0 0 / 0.55);
}

.album-card .mount__photo {
    font-size: 3.5rem;
    margin-bottom: var(--space-3);
}

.album-card__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.08;
    color: var(--ruma-black);
    text-wrap: balance;
}

.album-card__meta {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--album-mat-ink);
}

.album-card__talents {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--hairline) dashed rgb(0 0 0 / 0.18);
}

.album-card__talent {
    display: grid;
    grid-template-columns: 0.625rem 1fr;
    column-gap: var(--space-2);
    align-items: center;
}

.album-card__talent .field-dot {
    grid-row: span 2;
}

.album-card__talent b {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--ruma-black);
}

.album-card__talent small {
    grid-column: 2;
    font-size: var(--text-xs);
    color: var(--album-mat-ink);
}

.album-card__more {
    padding-left: calc(0.625rem + var(--space-2));
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--ruma-burgundy);
}

:is(.album-snap, .album-card):focus-visible {
    outline: 2px solid var(--ruma-burgundy);
    outline-offset: 4px;
}

:root.dark :is(.album-snap, .album-card):focus-visible {
    outline-color: var(--ruma-gold);
}

.album .talent-pagination [aria-current='page'] {
    background: var(--ruma-burgundy);
    border-color: var(--ruma-burgundy);
    color: var(--ruma-linen);
}

:root.dark .album .talent-pagination [aria-current='page'] {
    background: var(--ruma-gold);
    border-color: var(--ruma-gold);
    color: var(--ruma-black);
}

/* Person page: burgundy cover with contents, one section per talent */
.person-cover {
    display: grid;
    background: var(--album-paper);
}

@media (min-width: 60rem) {
    .person-cover {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        min-height: min(44rem, 86vh);
    }
}

.person-cover__panel {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.person-cover__copy {
    position: relative;
    display: grid;
    gap: var(--space-5);
    width: 100%;
    max-width: 38rem;
    margin-left: auto;
}

.person-cover__back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: var(--ruma-linen);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
}

.person-cover__back svg {
    transform: rotate(180deg);
    transition: transform var(--dur-base) var(--ease-out);
}

.person-cover__back:hover svg {
    transform: rotate(180deg) translateX(4px);
}

.person-cover__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.75rem, 1.4rem + 4.5vw, 5rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--ruma-linen);
    text-wrap: balance;
}

.person-contents {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--hairline) solid rgb(245 175 0 / 0.35);
}

.person-contents__label {
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(255 237 223 / 0.7);
}

.person-contents ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.person-contents a {
    display: grid;
    grid-template-columns: 2rem 0.625rem minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) 0;
    border-bottom: var(--hairline) dashed rgb(255 237 223 / 0.2);
    color: var(--ruma-linen);
    text-decoration: none;
}

.person-contents .field-dot {
    box-shadow: 0 0 0 1.5px var(--ruma-linen);
}

.person-contents__num {
    font-family: var(--font-display);
    color: var(--ruma-gold);
    font-variant-numeric: tabular-nums;
}

.person-contents__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    transition: color var(--dur-fast) var(--ease-out);
}

.person-contents a:hover .person-contents__title {
    color: var(--ruma-gold);
}

.person-contents__field {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 237 223 / 0.7);
}

.person-cover__portrait {
    display: grid;
    place-items: center;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter);
    background: radial-gradient(70% 60% at 50% 45%, rgb(255 255 255 / 0.65), transparent 70%), var(--album-paper);
}

.person-cover__portrait .mount {
    width: min(100%, 22rem);
    transform: rotate(2deg);
}

.person-cover__portrait .mount__photo {
    font-size: clamp(4rem, 9vw, 6.5rem);
}

.person-cover__caption {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-style: italic;
    text-align: center;
    color: var(--album-mat-ink);
}

.person-talent {
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: var(--surface);
    scroll-margin-top: var(--header-h);
}

.person-talent--paper {
    background: var(--surface-2);
}

.person-talent__grid {
    display: grid;
    gap: var(--space-8);
    align-items: start;
}

.person-talent__head {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
}

@media (min-width: 56rem) {
    .person-talent__grid {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: clamp(3rem, 6vw, 5rem);
    }

    .person-talent__head {
        position: sticky;
        top: calc(var(--header-h) + var(--space-8));
    }
}

.person-talent__count {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.person-talent__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-3xl);
    line-height: 1;
    margin: 0;
    color: var(--ink-strong);
    text-wrap: balance;
}

.person-talent__up {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--text-sm);
    color: var(--ruma-burgundy);
}

:root.dark .person-talent__up {
    color: var(--ruma-gold);
}

.person-talent__body {
    display: grid;
    gap: var(--space-5);
}

.person-talent__lede {
    max-width: 40rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: var(--ink-strong);
}

.person-talent__body .prose {
    font-size: var(--text-md);
    line-height: 1.75;
}

.person-talent__empty {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-muted);
}

@media (max-width: 59.99rem) {
    .person-cover__copy {
        margin-left: 0;
    }
}

/* The family wall: Family work photos framed with brass plaques, filters, 9 to a page, and a viewer */
.wall {
    padding-block: var(--section-y);
    background: var(--album-burgundy);
    background-image: radial-gradient(60% 40% at 50% 0%, rgb(255 255 255 / 0.08), transparent 70%);
    color: var(--ruma-linen);
}

:root.dark .wall {
    background-color: #4a0b15;
}

.wall__head {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}

.wall__title {
    color: var(--ruma-linen);
}

.wall__lede {
    max-width: 40rem;
    color: rgb(255 237 223 / 0.8);
}

.wall__filters {
    display: grid;
    gap: var(--space-4);
    align-items: end;
    padding: var(--space-5) 0;
    border-block: var(--hairline) solid rgb(255 237 223 / 0.25);
}

/* Linen labels on the burgundy in both schemes (beats the site-wide `.ruma [data-flux-label]`) */
.ruma .wall__filters [data-flux-label] {
    color: var(--ruma-linen);
}

@media (min-width: 40rem) {
    .wall__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
    }

    .wall__filters > :last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 64rem) {
    .wall__filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wall__filters > :last-child {
        grid-column: auto;
    }
}

.wall__result {
    padding-block: var(--space-4) var(--space-10);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(255 237 223 / 0.8);
}

/* Flux pagination on the burgundy: linen text and rule; the pages are a plain strip (no box) of linen
   numbers with previous / next, a hovered page is highlighted like a dropdown option (Flux zinc-100 /
   zinc-600) and the current page takes the site accent. */
.ruma .wall-pagination[data-flux-pagination] {
    border-top-color: rgb(255 237 223 / 0.25);
}

.ruma .wall-pagination[data-flux-pagination] > div:first-child {
    color: rgb(255 237 223 / 0.8);
}

.ruma .wall-pagination[data-flux-pagination] > div:not(:first-child) {
    gap: var(--space-1);
    padding: 0;
    background: none;
    border: 0;
}

.ruma .wall-pagination[data-flux-pagination] :is(a, button, div[aria-label]) {
    color: var(--ruma-linen);
}

.ruma .wall-pagination[data-flux-pagination] :is(a, button):hover {
    background: var(--color-zinc-100);
    color: var(--color-zinc-800);
}

:root.dark .ruma .wall-pagination[data-flux-pagination] :is(a, button):hover {
    background: var(--color-zinc-600);
    color: var(--ruma-white);
}

.wall__busy {
    opacity: 0.6;
    transition: opacity var(--dur-base) var(--ease-out);
}

.wall__empty {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding-block: var(--space-10);
    text-align: center;
    color: rgb(255 237 223 / 0.8);
}

/* Rows of up to 3, left to right; each photo keeps its own shape, so frames line up at the top of their row.
   (A grid, not CSS columns: Safari balanced the columns differently and flickered on hover.) */
.wall__hang {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

@media (min-width: 40rem) {
    .wall__hang {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .wall__hang {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wall-frame {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: zoom-in;
}

.wall-frame:focus-visible {
    outline: 3px solid var(--ruma-gold);
    outline-offset: 4px;
}

.wall-frame__mat,
.wall-viewer__mat {
    width: 100%;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    background: var(--ruma-linen);
    border: 6px solid #2a0a10;
    box-shadow: inset 0 0 0 1px rgb(245 175 0 / 0.6), 0 24px 40px -22px rgb(0 0 0 / 0.7);
    transition: transform var(--dur-slow) var(--ease-out);
}

.wall-frame:hover .wall-frame__mat {
    transform: translateY(-4px);
}

:is(.wall-frame__mat, .wall-viewer__mat) .photo {
    background: var(--ruma-alabaster);
    border-radius: 0;
}

.wall-plaque {
    display: grid;
    gap: 0.125rem;
    padding: var(--space-2) var(--space-4);
    background: linear-gradient(180deg, #f9c33a, var(--ruma-gold));
    color: var(--ruma-black);
    text-align: center;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.35);
}

.wall-plaque b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-base);
}

.wall-plaque span {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wall__more {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--space-6);
    border: var(--hairline) solid var(--ruma-gold);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ruma-linen);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.wall__more:hover {
    background: var(--ruma-gold);
    color: var(--ruma-black);
}

.wall-viewer {
    width: min(100% - 2rem, 64rem);
    max-width: none;
    padding: 0 !important;
    background: #1c060b;
    color: var(--ruma-linen);
    border: 0;
    border-radius: var(--radius-sm);
}

.wall-viewer__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
}

.wall-viewer [data-flux-button] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--ruma-linen);
}

.wall-viewer [data-flux-button]:hover {
    background: rgb(255 255 255 / 0.12);
}

.wall-viewer__stage {
    position: relative;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem);
}

.wall-viewer__mat {
    width: min(100%, 40rem);
    border-width: 8px;
}

.wall-viewer__mat img {
    max-height: 60dvh;
}

.wall-viewer__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.wall-viewer__nav--prev {
    left: var(--space-3);
}

.wall-viewer__nav--next {
    right: var(--space-3);
}

.wall-viewer__nav [data-flux-button] {
    border: var(--hairline) solid rgb(245 175 0 / 0.6);
}

.wall-viewer__nav [data-flux-button]:hover {
    background: var(--ruma-gold);
    color: var(--ruma-black);
}

.wall-viewer__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: var(--hairline) solid rgb(245 175 0 / 0.25);
}

.wall-viewer__caption b {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-xl);
}

.wall-viewer__caption span {
    font-size: var(--text-sm);
    color: rgb(255 237 223 / 0.75);
}

/* Missing from the album? */
.missing {
    padding-block: var(--section-y);
    background: var(--surface-2);
}

.missing__inner {
    display: grid;
    gap: var(--space-12);
    align-items: center;
    justify-items: center;
}

@media (min-width: 52rem) {
    .missing__inner {
        grid-template-columns: auto minmax(0, 32rem);
        justify-content: center;
    }
}

.missing__frame {
    display: grid;
    gap: var(--space-3);
    width: 14rem;
    transform: rotate(-4deg);
}

.missing__slot {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    aspect-ratio: 4 / 5;
    border: 2px dashed rgb(133 20 38 / 0.45);
    color: var(--ruma-burgundy);
    font-size: var(--text-sm);
}

.missing__caption {
    font-family: var(--font-display);
    font-style: italic;
    text-align: center;
    color: var(--album-mat-ink);
}

.missing__copy {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
}

.missing__btn {
    --accent: var(--ruma-burgundy);
    --accent-hover: #6a0f1e;
    --accent-ink: var(--ruma-linen);
}

:root.dark .missing__btn {
    --accent: var(--ruma-gold);
    --accent-hover: #ffc233;
    --accent-ink: var(--ruma-black);
}

@media (prefers-reduced-motion: reduce) {
    :is(.album-snap, .album-card, .wall-frame__mat, .person-cover__back svg) {
        transition: none;
    }
}

/* Stat */
.stat {
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-4);
    border-top: var(--hairline) solid var(--rule-strong);
}

.stat__value {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1;
    color: var(--ink-strong);
}

.stat__label {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* Placeholder image block (until real photography arrives) */
.placeholder {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    background: var(--surface-3);
    color: var(--ink-strong);
    overflow: hidden;
    border-radius: var(--radius-md);
}

.placeholder--square {
    aspect-ratio: 1;
}

.placeholder--portrait {
    aspect-ratio: 4 / 5;
}

.placeholder--landscape {
    aspect-ratio: 16 / 10;
}

.placeholder--wide {
    aspect-ratio: 21 / 9;
}

.placeholder--round {
    aspect-ratio: 1;
    border-radius: 50%;
}

.placeholder .mark {
    width: 28%;
    max-width: 8rem;
    opacity: 0.16;
    color: inherit;
}

.placeholder__label {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* Photo (real image in the same aspect boxes as .placeholder) */
.photo {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-3);
}

.photo--square { aspect-ratio: 1; }
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--landscape { aspect-ratio: 16 / 10; }
.photo--wide { aspect-ratio: 21 / 9; }
.photo--round { aspect-ratio: 1; border-radius: 50%; }

.photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo--contain img {
    object-fit: contain;
}

.photo__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(transparent, rgb(0 0 0 / 0.6));
    color: var(--ruma-linen);
    font-size: var(--text-sm);
}

/* Photo carousel (crossfading photos; dots and pause/play bottom right) */
.carousel {
    position: relative;
    border-radius: var(--radius-md);
}

.carousel__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 900ms var(--ease-out), visibility 0s linear 900ms;
}

.carousel__slide.is-current {
    opacity: 1;
    visibility: visible;
    transition: opacity 900ms var(--ease-out), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .carousel__slide,
    .carousel__slide.is-current {
        transition: none;
    }
}

.carousel:has(.carousel__controls) .photo__caption {
    padding-right: calc(var(--space-4) + 10rem);
}

.carousel__controls {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2) 2px 2px;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.carousel__toggle[data-flux-button] {
    border-radius: 50%;
    color: var(--ruma-linen);
}

.carousel__toggle[data-flux-button]:hover {
    background: rgb(255 255 255 / 0.16);
}

.carousel__dots {
    display: flex;
}

.carousel__dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.carousel__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 237 223 / 0.55);
    transition: width var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.carousel__dot:hover::before {
    background: var(--ruma-linen);
}

.carousel__dot[aria-current='true']::before {
    width: 18px;
    background: var(--ruma-gold);
}

.carousel__dot:focus-visible {
    outline: 2px solid var(--ruma-gold);
    outline-offset: -2px;
    border-radius: 999px;
}

/* Timeline */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-8);
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.4375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--rule-strong);
    opacity: 0.5;
}

.timeline__item {
    position: relative;
    padding-left: var(--space-10);
    display: grid;
    gap: var(--space-2);
}

.timeline__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.9375rem;
    height: 0.9375rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent-2);
}

.timeline__year {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--accent-2);
    line-height: 1;
}

/* Filter bar / segmented */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filters__btn {
    min-height: 40px;
    padding: 0 var(--space-4);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    transition: all var(--dur-fast) var(--ease-out);
}

.filters__btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.filters__btn[aria-pressed='true'] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

/* Forms */
.field {
    display: grid;
    gap: var(--space-2);
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-strong);
}

.field__label .req {
    color: var(--danger);
    margin-left: 2px;
}

.field__input,
.field__select,
.field__textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    color: var(--ink);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-sm);
    font: inherit;
    line-height: 1.4;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field__input::placeholder,
.field__textarea::placeholder {
    color: var(--ink-muted);
    opacity: 0.8;
}

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.field__textarea {
    min-height: 9rem;
    resize: vertical;
}

.field__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23777' stroke-width='1.5'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1.25rem;
    padding-right: var(--space-10);
}

.field__help {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.field__error {
    font-size: var(--text-sm);
    color: var(--danger);
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.field__error svg {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.field--invalid .field__input,
.field--invalid .field__select,
.field--invalid .field__textarea {
    border-color: var(--danger);
}

.form-grid {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 40rem) {
    .form-grid--2 {
        grid-template-columns: 1fr 1fr;
    }

    .form-grid--2 > .span-2 {
        grid-column: span 2;
    }
}

.notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    border: var(--hairline) solid var(--rule);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.notice svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--success);
}

.notice--error {
    border-left-color: var(--danger);
}

.notice--error svg {
    color: var(--danger);
}

/* Contact detail list */
.detail-list {
    display: grid;
    gap: var(--space-5);
}

.detail-list__item {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-5);
    border-bottom: var(--hairline) solid var(--rule);
}

.detail-list__item a {
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink-strong);
}

.detail-list__item a:hover {
    color: var(--accent-2);
}

/* Footer */
.site-footer {
    margin-top: auto;
    background: var(--band);
    color: var(--band-ink);
    --ink: var(--band-ink);
    --ink-strong: var(--band-ink);
    --ink-muted: var(--band-muted);
    --rule: color-mix(in srgb, var(--band-ink) 18%, transparent);
    --logo: var(--band-ink);
}

.site-footer::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--ribbon);
}

.site-footer--light {
    background: var(--surface);
    color: var(--ink);
    --ink: initial;
    --ink-strong: initial;
    --ink-muted: initial;
    --logo: initial;
    border-top: 2px solid var(--rule-strong);
}

.site-footer__inner {
    padding-block: clamp(3rem, 6vw, 5rem) var(--space-8);
    display: grid;
    gap: var(--space-10);
}

@media (min-width: 56rem) {
    .site-footer__inner {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--space-8);
    }
}

.site-footer__brand {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.site-footer__brand .mark {
    height: 3.25rem;
    color: var(--logo);
}

.site-footer__brand--seal .mark {
    height: 6rem;
}

.site-footer__col {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.site-footer__col a {
    text-decoration: none;
    font-size: var(--text-sm);
    opacity: 0.85;
}

.site-footer__col a:hover {
    opacity: 1;
    text-decoration: underline;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-5);
    border-top: var(--hairline) solid var(--rule);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
}

/* Palette switch (footer): Flux-style segmented control on a linen track */
.palette-switch {
    display: inline-flex;
    align-items: stretch;
    gap: 2px;
    height: 2.5rem;
    padding: 4px;
    border-radius: var(--radius-lg);
    background: var(--ruma-linen);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ruma-black) 6%, transparent);
}

.palette-switch__segment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    padding: 0 var(--space-4);
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    color: var(--swatch);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.palette-switch__segment:hover {
    background: color-mix(in srgb, var(--swatch) 12%, transparent);
}

.palette-switch__segment[aria-checked='true'] {
    background: var(--swatch);
    color: var(--ruma-linen);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}

.palette-switch__segment:focus-visible {
    outline: 2px solid var(--ruma-gold);
    outline-offset: 2px;
}

.palette-switch__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ruma-black) 10%, transparent);
}

.palette-switch__segment[aria-checked='true'] .palette-switch__dot {
    background: var(--ruma-linen);
    box-shadow: none;
}

/* Family tree (preview canvas) */
.tree {
    --node-w: 8.5rem;
    overflow-x: auto;
    padding: var(--space-6) var(--space-4);
}

.tree ul {
    list-style: none;
    margin: 0;
    padding: var(--space-8) 0 0;
    display: flex;
    justify-content: center;
    position: relative;
}

.tree > ul {
    padding-top: 0;
}

.tree li {
    position: relative;
    padding: var(--space-8) var(--space-2) 0;
    text-align: center;
}

.tree > ul > li {
    padding-top: 0;
}

.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: var(--space-8);
    border-top: 1px solid var(--rule-strong);
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid var(--rule-strong);
}

.tree li:only-child::before,
.tree li:only-child::after {
    display: none;
}

.tree li:only-child {
    padding-top: 0;
}

.tree li:first-child::before,
.tree li:last-child::after {
    border: 0;
}

.tree li:last-child::before {
    border-right: 1px solid var(--rule-strong);
}

.tree > ul > li::before,
.tree > ul > li::after {
    display: none;
}

.tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: var(--space-8);
    border-left: 1px solid var(--rule-strong);
}

.tree__node {
    display: inline-grid;
    justify-items: center;
    gap: var(--space-2);
    width: var(--node-w);
    padding: var(--space-4) var(--space-3);
    background: var(--surface-2);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.tree__node:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.tree__node--root {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-ink);
}

.tree__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--surface-3);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--ink-strong);
}

.tree__avatar {
    overflow: hidden;
}

.tree__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tree__node--root .tree__avatar {
    background: color-mix(in srgb, var(--accent-ink) 20%, transparent);
    color: var(--accent-ink);
}

.tree__avatar > svg {
    width: 1.5rem;
    height: 1.5rem;
}

.tree__name {
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.15;
}

.tree__years {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    opacity: 0.7;
}

/* Family tree (public, /family-tree) — the person-centred view: parents above, the person and spouses
   in the middle, children below, brothers & sisters underneath. */

.ft-page {
    --ft-card-w: 15rem;
    padding-bottom: var(--space-16);
}

.ft-title {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-10) var(--space-6);
}

.ft-title h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    color: var(--ink-strong);
}

.ft-title h1 em {
    color: var(--accent);
}

.ft-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.ft-facts div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.ft-facts dt {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.ft-facts dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-strong);
}

.ft-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.ft-search {
    position: relative;
    flex: 1 1 16rem;
    max-width: 26rem;
}

.ft-results {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + var(--space-1));
    max-height: 18rem;
    overflow-y: auto;
    padding: var(--space-1);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.ft-results button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-align: start;
    color: var(--ink);
    cursor: pointer;
}

.ft-results button:hover,
.ft-results button[aria-selected="true"] {
    background: var(--surface-2);
}

.ft-disc {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--accent);
}

.ft-disc--lg {
    width: 5.5rem;
    height: 5.5rem;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
}

.ft-years {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

.ft-empty {
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--ink-muted);
}

.ft-focus {
    display: grid;
    gap: var(--space-4);
}

.ft-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.ft-trail button {
    min-height: 32px;
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ft-tier {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
}

.ft-tier__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.ft-tier__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
}

.ft-link {
    width: 2px;
    height: var(--space-8);
    margin-inline: auto;
    background: var(--rule-strong);
}

.ft-rel {
    display: flex;
    align-items: stretch;
    width: var(--ft-card-w);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
}

.ft-rel:hover {
    border-color: var(--accent);
}

.ft-rel__main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    text-align: start;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out);
}

.ft-rel__main:active {
    transform: scale(0.98);
}

.ft-rel__main > span:last-child {
    min-width: 0;
}

.ft-rel .ft-disc {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--text-xs);
}

.ft-rel .ft-years {
    font-size: var(--text-xs);
}

.ft-rel__name {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
    color: var(--ink-strong);
}

.ft-rel__more {
    display: grid;
    place-items: center;
    width: 2.75rem;
    border-inline-start: 1px solid var(--rule);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--ink-muted);
    cursor: pointer;
}

.ft-rel__more:hover {
    background: var(--surface-2);
    color: var(--accent);
}

.ft-self {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.ft-hero {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    min-width: 14rem;
    padding: var(--space-5) var(--space-6);
    background: var(--band);
    color: var(--band-ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.ft-hero .ft-disc {
    width: 4.5rem;
    height: 4.5rem;
    font-size: var(--text-xl);
    background: color-mix(in srgb, var(--ruma-white) 12%, transparent);
    border-color: color-mix(in srgb, var(--ruma-white) 25%, transparent);
    color: var(--ruma-gold);
}

.ft-hero [data-flux-button] {
    background: color-mix(in srgb, var(--band-ink) 14%, transparent);
    border-color: color-mix(in srgb, var(--band-ink) 28%, transparent);
    color: var(--band-ink);
}

.ft-hero [data-flux-button]:hover {
    background: color-mix(in srgb, var(--band-ink) 24%, transparent);
}

.ft-hero h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: inherit;
}

.ft-hero .ft-years,
.ft-hero p {
    margin: 0;
    color: var(--band-muted);
}

.ft-hero .ft-years {
    font-size: 0.8125rem;
}

.ft-hero p {
    font-size: var(--text-sm);
}

.ft-wed {
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.ft-wed__ring {
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
}

.ft-siblings {
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

/* Born and died places in the person fly-out, side by side. */
.ft-places {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.ft-places dt {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.ft-places dd {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    overflow-wrap: break-word;
}

.ft-places__none {
    color: var(--ink-muted);
}

@media (max-width: 40rem) {
    .ft-title h1 {
        font-size: var(--text-3xl);
    }

    .ft-hero {
        width: 100%;
        min-width: 0;
        padding: var(--space-5);
    }

    .ft-tier__row,
    .ft-rel {
        width: 100%;
    }

    .ft-wed {
        grid-auto-flow: column;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ft-rel,
    .ft-rel__main {
        transition: none;
    }
}

/* 7. Motion ----------------------------------------------------------------- */

.reveal {
    --reveal-delay: 0ms;
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .reveal {
            animation: reveal-up var(--dur-slow) var(--ease-out) both;
            animation-timeline: view();
            animation-range: entry 0% entry 28%;
        }
    }

    @keyframes reveal-up {
        from {
            opacity: 0;
            transform: translateY(18px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .hero__logo,
    .hero__inner > .eyebrow,
    .hero__inner > .display,
    .hero__inner > .display--hero {
        animation: hero-in 700ms var(--ease-out) both;
    }

    .hero__inner > .lede,
    .hero__actions {
        animation: hero-in 700ms 120ms var(--ease-out) both;
    }

    @keyframes hero-in {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* 7a. Flux neutrals → brand ("Linen warm") ---------------------------------- */
/* Flux draws hovers, tooltips, menus, borders, muted text and dark surfaces from Tailwind's zinc
   scale (plain greys in app.css). On the site and in the members area that scale is re-mixed from
   the brand: Linen at the light end, the primary hue at the dark end. Mixed from --primary, so it
   follows the Evergreen / Imperial edition. Step 500 keeps ~4.7:1 on white for muted text. */

:is(.ruma, .ruma-members) {
    --color-zinc-50: color-mix(in oklab, var(--ruma-linen) 35%, white);
    --color-zinc-100: color-mix(in oklab, var(--ruma-linen) 70%, white);
    --color-zinc-200: color-mix(in oklab, var(--ruma-linen-deep) 85%, white);
    --color-zinc-300: color-mix(in oklab, var(--ruma-linen-deep), var(--primary) 18%);
    --color-zinc-400: color-mix(in oklab, var(--ruma-linen-deep), var(--primary) 45%);
    --color-zinc-500: color-mix(in oklab, var(--ruma-linen-deep), var(--primary) 66%);
    --color-zinc-600: color-mix(in oklab, var(--primary) 76%, white);
    --color-zinc-700: color-mix(in oklab, var(--primary) 85%, white);
    --color-zinc-800: color-mix(in oklab, var(--primary) 93%, white);
    --color-zinc-900: var(--primary);
    --color-zinc-950: var(--primary-deep);
}

/* Dark: Flux's dark surfaces become the primary's dark surfaces; light text steps lean linen */
:root.dark :is(.ruma, .ruma-members) {
    --color-zinc-50: var(--ruma-linen);
    --color-zinc-100: color-mix(in oklab, var(--ruma-linen) 94%, var(--primary));
    --color-zinc-200: color-mix(in oklab, var(--ruma-linen) 86%, var(--primary));
    --color-zinc-300: color-mix(in oklab, var(--ruma-linen) 76%, var(--primary));
    --color-zinc-400: color-mix(in oklab, var(--ruma-linen) 62%, var(--primary));
    --color-zinc-500: color-mix(in oklab, var(--ruma-linen) 46%, var(--primary));
    --color-zinc-600: color-mix(in oklab, var(--primary-dark-surface-3), white 22%);
    --color-zinc-700: color-mix(in oklab, var(--primary-dark-surface-3), white 10%);
    --color-zinc-800: var(--primary-dark-surface-3);
    --color-zinc-900: var(--primary-dark-surface-2);
    --color-zinc-950: var(--primary-dark-surface);
}

/* 7b. Flux controls on the public site ------------------------------------- */
/* Flux inputs, dropdowns and pagination take the brand tokens: accent, surfaces, rules. The site's
   element resets live in `@layer base`, so Flux/Tailwind utilities still work; these rules are
   unlayered and win over them. */

.ruma {
    --color-accent: var(--accent);
    --color-accent-content: var(--accent);
    --color-accent-foreground: var(--accent-ink);
}

.ruma :is(input, textarea)[data-flux-control],
.ruma [data-flux-select-button] {
    min-height: 48px;
    background: var(--surface-2);
    color: var(--ink);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.ruma textarea[data-flux-control] {
    min-height: 9rem;
}

.ruma [data-flux-select-button] ui-selected {
    color: var(--ink);
}

.ruma :is(input, textarea)[data-flux-control]::placeholder {
    color: var(--ink-muted);
    opacity: 0.8;
}

.ruma :is(input, textarea)[data-flux-control]:hover,
.ruma [data-flux-select-button]:hover {
    border-color: var(--rule-strong);
}

.ruma :is(input, textarea)[data-flux-control]:focus,
.ruma [data-flux-select-button][aria-expanded='true'] {
    border-color: var(--accent);
}

.ruma [data-flux-select-button]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ruma [data-flux-label] {
    color: var(--ink-strong);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ruma [data-flux-label] .req {
    color: var(--danger);
    margin-left: 2px;
}

.ruma [data-flux-description] {
    color: var(--ink-muted);
    font-size: var(--text-sm);
}

.ruma [data-flux-error] {
    color: var(--danger);
    font-size: var(--text-sm);
}

/* Dropdown panels and options keep Flux's own colours (the Linen zinc scale, section 7a), so they
   match the members area; only the shape and elevation follow the site. */
.ruma [data-flux-options] {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.ruma [data-flux-option] {
    border-radius: var(--radius-sm);
}

.ruma [data-flux-pagination] {
    border-top: var(--hairline) solid var(--rule);
    color: var(--ink-muted);
}

.ruma [data-flux-pagination] > div:first-child {
    color: var(--ink-muted);
}

.ruma [data-flux-pagination] :is(a, button) {
    color: var(--ink);
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Pager targets: at least 44px */
.ruma [data-flux-pagination] :is(a, button, div[aria-label], [aria-current='page']) {
    min-width: 44px;
    min-height: 44px;
    height: auto;
    font-size: var(--text-sm);
}

.ruma [data-flux-pagination] :is(a, button):hover {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
}

.ruma [data-flux-pagination] [aria-current='page'] {
    background: var(--accent);
    color: var(--accent-ink);
}

.ruma [data-flux-pagination] div[aria-disabled='true'] {
    opacity: 0.4;
}

/* 8. Members area (Flux header shell) -------------------------------------- */

.ruma-members {
    /* Same as .members-main: on wide screens the page beside the width-limited main is one surface */
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-body);
    font-optical-sizing: auto;

    /* Backend headings use Inter (loaded by Vite); the public site keeps DM Serif Display */
    --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Flux accent tokens → brand */
    --color-accent: var(--accent);
    --color-accent-content: var(--accent);
    --color-accent-foreground: var(--accent-ink);

    /* Height of the full logo in the header and the phone menu */
    --members-logo-height: 1.5rem;
}

.ruma-members .members-sidebar {
    background: var(--surface);
    border-right: var(--hairline) solid var(--rule);
    color: var(--ink);
}

/* Header navigation: Flux navbar themed to brand tokens. The current page's group is
   underlined in the accent; the current page inside an open group gets an accent tint. */
.ruma-members .members-header {
    background: var(--surface);
    border-bottom: var(--hairline) solid var(--rule);
    color: var(--ink);
}

/* A fixed bar height at every width: without it the bar is as tall as the desktop navbar
   above lg and as tall as its icon buttons below, so the logo jumps while resizing. */
.ruma-members .members-header > div {
    height: 3.5rem;
    gap: var(--space-2);
}

/* Phones: the standard 16px gutter instead of Flux's 24px, tighter gaps, and no space kept for the
   (hidden) navbar after the logo, so the bar fits a 320px screen */
@media (max-width: 39.99rem) {
    .ruma-members .members-header > div {
        padding-inline: var(--space-4);
        gap: var(--space-1);
    }

    .ruma-members .members-header .members-brand {
        margin-inline-end: 0;
    }
}

.ruma-members .members-header [data-flux-navbar] {
    align-self: stretch;
}

.ruma-members .members-brand {
    display: flex;
    align-items: center;
    flex: none;
    line-height: 0;
}

.ruma-members .members-header .members-brand {
    margin-inline-end: var(--space-4);
}

.ruma-members .members-brand .mark {
    display: block;
    width: auto;
    height: var(--members-logo-height);
    max-width: none;
    color: var(--logo);
}

.ruma-members .members-nav [data-flux-navbar-items] {
    color: var(--ink);
    font-weight: 500;
}

.ruma-members .members-nav [data-flux-navbar-items]:hover {
    color: var(--accent);
}

.ruma-members .members-nav [data-flux-navbar-items][data-current] {
    color: var(--accent);
}

.ruma-members .members-nav [data-flux-navbar-items][data-current]::after {
    background: var(--accent);
}

.ruma-members [data-flux-navmenu] .is-current {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.ruma-members [data-flux-navmenu] .is-current [data-flux-icon] {
    color: var(--accent);
}

/* Command palette (⌘K): group labels and the muted detail after each result */
.ruma-members .command-palette__group {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--ink-muted);
}

.ruma-members .command-palette__meta {
    margin-inline-start: var(--space-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--ink-muted);
}

.ruma-members .command-palette__group:not(:first-child) {
    margin-top: var(--space-1);
    border-top: 1px solid var(--color-zinc-200);
    padding-top: var(--space-3);
}

.ruma-members .command-palette__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-zinc-200);
    background: var(--color-zinc-50);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.ruma-members .command-palette__footer kbd {
    display: inline-flex;
    min-width: 1.25rem;
    justify-content: center;
    margin-inline-end: 0.125rem;
    padding: 0 0.25rem;
    border: 1px solid var(--color-zinc-200);
    border-radius: 0.25rem;
    background: var(--surface);
    font: inherit;
    font-weight: 500;
    color: var(--ink);
}

.dark .ruma-members .command-palette__group:not(:first-child),
.dark .ruma-members .command-palette__footer,
.dark .ruma-members .command-palette__footer kbd {
    border-color: var(--color-zinc-600);
}

.dark .ruma-members .command-palette__footer {
    background: var(--color-zinc-800);
}

.dark .ruma-members .command-palette__footer kbd {
    background: var(--color-zinc-700);
}

/* Touch screens have no arrow keys: the footer's key hints only apply with a keyboard */
@media (hover: none) {
    .ruma-members .command-palette__footer {
        display: none;
    }
}

.ruma-members .members-search {
    min-width: 13rem;
}

.ruma-members .members-sidebar [data-flux-sidebar-item][data-current] {
    background: var(--accent);
    color: var(--accent-ink);
}

.ruma-members .members-main {
    background: var(--surface);
    color: var(--ink);
}

.ruma-members .members-head {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: var(--hairline) solid var(--rule);
}

.ruma-members h1,
.ruma-members h2,
.ruma-members .members-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink-strong);
    margin: 0;
}

.ruma-members .members-title {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
}

.ruma-members h2 {
    font-size: var(--text-xl);
}

.ruma-members .members-eyebrow {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.ruma-members .members-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .ruma-members .members-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ruma-members .members-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .ruma-members .members-grid__span-2 {
        grid-column: span 2;
    }
}

.ruma-members .members-grid__full {
    grid-column: 1 / -1;
}

/* Members-area image placeholders (tables, fly-outs, image fields) share the image-field look: a
   faint accent tint, a dashed accent frame and an accent mark. --accent and --surface-2 follow the
   mode, so placeholders match the Edit Person fly-out in light mode and in dark mode. */
.ruma-members .placeholder {
    background:
        repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent) 0 6px, transparent 6px 12px),
        color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent);
}

.ruma-members .placeholder .mark {
    width: 24%;
    opacity: 0.45;
}

/* Image field preview: the mark sits a little higher to leave room for the "No photo" label. */
.ruma-members .upload-preview .placeholder .mark {
    translate: 0 -0.5rem;
}

.ruma-members .upload-preview .placeholder__label {
    inset: auto 0 var(--space-2);
    text-align: center;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.85;
}

.ruma-members .members-panel {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    color: var(--ink);
    text-decoration: none;
}

a.members-panel:hover {
    border-color: var(--accent);
}

/* System → Roles & permissions: role and module icons, and each role's per-module summary */
.ruma-members .members-role-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}

.ruma-members .members-role-summary {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
}

.ruma-members .members-role-summary > div {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--space-2);
}

.ruma-members .members-role-summary dt {
    font-weight: 500;
}

.ruma-members .members-role-summary dd {
    margin: 0;
    color: var(--ink-muted);
}

/* System → Contact messages: unread dot, one-line message preview, the message in the reader */
.ruma-members .members-unread-dot {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--accent-2);
}

.ruma-members .members-clip {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 36ch;
    color: var(--ink-muted);
    white-space: normal;
}

.ruma-members .members-letter {
    white-space: pre-line;
    line-height: 1.65;
    max-width: 70ch;
    overflow-wrap: anywhere;
}

.ruma-members .members-panel--band {
    background: var(--band);
    color: var(--band-ink);
    border-color: transparent;
    --ink: var(--band-ink);
    --ink-strong: var(--band-ink);
    --ink-muted: var(--band-muted);
}

.ruma-members .members-panel--band .mark {
    color: var(--band-ink);
}

.ruma-members .members-panel__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--accent-2);
}

.ruma-members .members-panel--band .members-panel__icon {
    color: var(--ruma-gold);
}

.ruma-members .members-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
}

.ruma-members .members-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--hairline) solid var(--rule);
    font-size: var(--text-sm);
}

.ruma-members .members-list li:last-child {
    border-bottom: 0;
}

.ruma-members .members-list .tree__avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--text-base);
}

.ruma-members .members-list time {
    margin-left: auto;
    color: var(--ink-muted);
    white-space: nowrap;
}

.ruma-members .btn {
    font-family: var(--font-body);
}

/* Person page: profile column + relatives column */

.ruma-members .members-split {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 64rem) {
    .ruma-members .members-split {
        grid-template-columns: 20rem minmax(0, 1fr);
    }

    .ruma-members .members-split--aside-end {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

.ruma-members .members-list .person-row__text {
    display: grid;
    min-width: 0;
}

.ruma-members .members-list .person-row__actions {
    margin-left: auto;
}

/* Family tree page — outline view (foldable Family::tree()) */

.ruma-members .tree-outline,
.ruma-members .tree-outline ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ruma-members .tree-outline ul {
    margin-left: 1.35rem;
    padding-left: var(--space-4);
    border-left: 1px solid var(--rule-strong);
}

.ruma-members .tree-outline summary {
    list-style: none;
    cursor: pointer;
}

.ruma-members .tree-outline summary::-webkit-details-marker {
    display: none;
}

.ruma-members .tree-outline__row {
    display: flex;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
}

.ruma-members .tree-outline__row:hover {
    background: var(--surface-2);
}

.ruma-members .tree-outline__row--dim {
    opacity: 0.55;
}

.ruma-members .tree-outline__chev {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--ink-muted);
    transition: transform var(--dur-fast) var(--ease-out);
}

.ruma-members .tree-outline details[open] > summary .tree-outline__chev {
    transform: rotate(90deg);
}

.ruma-members .tree-outline__spacer {
    width: 1rem;
    flex: none;
}

.ruma-members .tree-outline .tree__avatar {
    width: 2.25rem;
    height: 2.25rem;
    font-size: var(--text-sm);
    flex: none;
}

.ruma-members .tree-outline__text {
    min-width: 0;
}

.ruma-members .tree-outline__name {
    font-weight: 500;
    color: inherit;
    text-decoration: none;
    margin-right: var(--space-2);
}

.ruma-members .tree-outline__name:hover {
    color: var(--accent-2);
}

.ruma-members .tree-outline__actions {
    margin-left: auto;
    flex: none;
}

/* Tables in panels use flux:table `bleed`: rows reach var(--flux-bleed) into the panel padding so
   the hover highlight has room on both sides while the text stays aligned with the panel. */

.ruma-members .members-panel {
    --flux-bleed: var(--space-3);
}

.ruma-members [data-flux-table-bleed] > [data-flux-pagination] {
    padding-inline: var(--flux-bleed);
}

/* Clickable table rows: pointer and hover highlight (like outline rows); the row's click runs the
   table's default action. */

.ruma-members .members-row {
    cursor: pointer;
}

.ruma-members .members-row:hover > td {
    background: var(--surface-2);
}

/* Gallery: category cards (links) and photo tiles on the members Gallery pages. */

.ruma-members .gallery-card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2);
    border: var(--hairline) solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
}

.ruma-members a.gallery-card:hover,
.ruma-members a.gallery-card:focus-visible {
    border-color: var(--accent);
}

/* Person detail flyout */

.ruma-members .person-detail {
    display: grid;
    gap: var(--space-5);
}

.ruma-members .person-detail__head {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.ruma-members .person-detail__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: var(--text-sm);
}

.ruma-members .person-detail__facts dt {
    color: var(--ink-muted);
}

.ruma-members .person-detail__facts dd {
    margin: 0;
}

.ruma-members .person-detail__group {
    display: grid;
    gap: var(--space-2);
}

.ruma-members .person-detail__link {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 0.2em;
}

.ruma-members .person-detail__link:hover {
    text-decoration-color: var(--accent-2);
}

.ruma-members .person-detail__none {
    color: var(--ink-muted);
}

/* Settings: fixed-width section nav, fluid form column */

.ruma-members .settings {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 48rem) {
    .ruma-members .settings {
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: var(--space-10);
    }
}

.ruma-members .settings__nav {
    position: sticky;
    top: var(--space-6);
}

.ruma-members .settings__content {
    min-width: 0;
}

.ruma-members .settings__form {
    margin-top: var(--space-5);
    max-width: 36rem;
}

/* Branded auth (split) ------------------------------------------------------ */

.auth-split {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 64rem) {
    .auth-split {
        grid-template-columns: 5fr 6fr;
    }
}

.auth-split__brand {
    position: relative;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: var(--space-10);
    background: var(--band);
    color: var(--band-ink);
}

.auth-split__brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 70% at 50% 0%, rgb(255 255 255 / 0.12), transparent 70%),
        linear-gradient(180deg, transparent 55%, rgb(0 0 0 / 0.3));
    pointer-events: none;
}

@media (min-width: 64rem) {
    .auth-split__brand {
        display: flex;
    }
}

.auth-split__seal {
    position: absolute;
    right: -18%;
    bottom: -14%;
    width: 70%;
    color: var(--band-ink);
    opacity: 0.09;
    pointer-events: none;
}

.auth-split__logo {
    position: relative;
    display: inline-block;
}

.auth-split__logo .mark {
    height: 3rem;
    color: var(--band-ink);
}

.auth-split__logo--mobile {
    display: block;
    margin: 0 auto var(--space-8);
}

.auth-split__logo--mobile .mark {
    height: 3.5rem;
    color: var(--logo);
    margin-inline: auto;
}

@media (min-width: 64rem) {
    .auth-split__logo--mobile {
        display: none;
    }
}

.auth-split__foot {
    position: relative;
    display: grid;
    gap: var(--space-3);
    max-width: 30rem;
}

.auth-split__quote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-2xl);
    line-height: 1.15;
    margin: 0;
}

.auth-split__form {
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-6);
    background: var(--surface-2);
}

.auth-split__card {
    width: 100%;
    max-width: 24rem;
}

/* 9. Utilities -------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center {
    text-align: center;
}

.text-accent {
    color: var(--accent);
}

.text-gold {
    color: var(--ruma-gold);
}

.text-warm {
    color: var(--accent-2);
}

.relative {
    position: relative;
}

.z-1 {
    position: relative;
    z-index: 1;
}

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.max-w-prose { max-width: 66ch; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }

.hide-mobile {
    display: none;
}

@media (min-width: 48rem) {
    .hide-mobile {
        display: revert;
    }
}

/* ---------------------------------------------------------------------------
   Members area — printing (recipe page). The sidebar, mobile header and page
   chrome disappear; photos print only when "Include photos when printing" is
   ticked (.recipe-page[data-print-photos="true"]).
   ------------------------------------------------------------------------- */
@media print {
    .ruma-members {
        display: block !important;
        min-height: 0;
        background: #fff;
        color: #000;
    }

    .ruma-members .members-sidebar,
    .ruma-members .members-header,
    .ruma-members [data-flux-sidebar-backdrop] {
        display: none !important;
    }

    .ruma-members .members-main {
        padding: 0;
        background: #fff;
        color: #000;
    }

    .ruma-members .recipe-page {
        max-width: none;
    }

    .ruma-members .recipe-page .members-panel {
        border: 0;
        box-shadow: none;
        padding-inline: 0;
        background: transparent;
    }

    .ruma-members .recipe-page:not([data-print-photos="true"]) .recipe-photo {
        display: none;
    }

    .ruma-members .recipe-page li {
        break-inside: avoid;
    }
}

/* ---------------------------------------------------------------------------
   Recipes (public): the /recipes directory and the recipe page — "The family
   cookbook" (2026-10-25). Linen page; the primary hue for the Contents panel
   and the original-card band; Spicy Orange for labels, step numbers, the
   ingredient panel's buttons and the "Add yours" band; a Sunflower Gold
   filter strip. Dark mode on these pages only is "Ink": warm near-black
   surfaces, the primary hue kept as colour blocks, orange as fills and rules
   (never small orange text on the dark surfaces, which falls below 4.5:1).
   Keep identical in rumanis.css and rumanis-green.css.
   ------------------------------------------------------------------------- */
.recipes-page {
    --rcp-paper: var(--ruma-linen);
    --rcp-card: var(--ruma-white);
    --rcp-block: var(--primary);
    --rcp-orange: var(--ruma-orange);
    background: var(--rcp-paper);
}

:root.dark:has(.recipes-page) {
    --surface: #12100e;
    --surface-2: #1e1b18;
    --surface-3: #2c2824;
    --band: var(--ruma-black);
}

:root.dark .recipes-page {
    --rcp-paper: var(--surface);
    --rcp-card: var(--surface-2);
    --rcp-orange: var(--ruma-orange-deep);
}

.recipes-page em {
    font-style: italic;
}

/* Directory — title page */
.recipes-title {
    padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}

.recipes-title__inner {
    display: grid;
    gap: var(--space-10);
    align-items: stretch;
}

@media (min-width: 900px) {
    .recipes-title__inner {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--space-16);
    }
}

.recipes-title__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.recipes-title__heading {
    font-size: var(--text-4xl);
    line-height: 1;
    margin: var(--space-3) 0 var(--space-5);
}

.recipes-title__heading em {
    color: var(--accent-2);
}

.recipes-title__facts {
    display: flex;
    gap: var(--space-8);
    margin: var(--space-8) 0 0;
    padding-top: var(--space-5);
    border-top: var(--hairline) solid var(--rule);
}

.recipes-title__facts dt {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-muted);
}

.recipes-title__facts dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--ink-strong);
}

/* Contents: fixed to the title's height on wide screens; the list scrolls inside */
.recipes-contents {
    display: flex;
    flex-direction: column;
    background: var(--rcp-block);
    color: var(--ruma-linen);
    padding: var(--space-8) var(--space-8) var(--space-4);
    border-radius: var(--radius-md);
}

@media (min-width: 900px) {
    /* Height 0 keeps the panel out of the row's height; min-height 100% fills the row the title sets. */
    .recipes-contents {
        height: 0;
        min-height: 100%;
    }
}

.recipes-contents .eyebrow {
    color: var(--ruma-gold);
    --rule: color-mix(in srgb, var(--ruma-gold) 50%, transparent);
    margin: 0 0 var(--space-4);
}

.recipes-contents__scroll {
    flex: 1;
    min-height: 0;
    max-height: 20rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ruma-gold) transparent;
    padding-right: var(--space-2);
    --fade-top: #000;
    --fade-end: #000;
    mask-image: linear-gradient(to bottom, var(--fade-top), #000 2.5rem, #000 calc(100% - 2.5rem), var(--fade-end));
}

@media (min-width: 900px) {
    .recipes-contents__scroll {
        max-height: none;
    }
}

.recipes-contents__scroll.is-scrolled {
    --fade-top: transparent;
}

.recipes-contents__scroll.has-more {
    --fade-end: transparent;
}

.recipes-contents ol {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: course;
}

.recipes-contents li {
    counter-increment: course;
}

.recipes-contents a {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-2) 0;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.recipes-contents a::before {
    content: counter(course, upper-roman) '.';
    width: 2.25rem;
    flex: none;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .1em;
    color: var(--ruma-gold);
}

.recipes-contents i {
    flex: 1;
    min-width: 1rem;
    border-bottom: var(--hairline) dotted color-mix(in srgb, var(--ruma-linen) 40%, transparent);
    transform: translateY(-.3em);
}

.recipes-contents b {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-sm);
}

.recipes-contents a:hover span {
    color: var(--ruma-gold);
}

.recipes-contents a:focus-visible {
    outline: 2px solid var(--ruma-gold);
    outline-offset: 2px;
}

/* Directory — search and filters on a Sunflower Gold strip (same in both schemes) */
.recipes-filters {
    background: var(--ruma-gold);
    color: var(--ruma-black);
    padding-block: var(--space-6);
    --focus: var(--primary);
}

/* Light mode: the inputs are light, so their text takes the strip's black. In dark mode they keep their own linen text. */
:root:not(.dark) .recipes-filters {
    --ink: var(--ruma-black);
    --ink-strong: var(--ruma-black);
    --ink-muted: #3a2c00;
}

.recipes-filters [data-flux-label] {
    color: var(--ruma-black);
}

.recipes-filters__grid {
    display: grid;
    gap: var(--space-3) var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recipes-filters__search {
    grid-column: 1 / -1;
}

@media (min-width: 900px) {
    .recipes-filters__grid {
        grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
    }

    .recipes-filters__search {
        grid-column: 1;
        grid-row: 1 / span 2;
        padding-right: var(--space-4);
        border-right: var(--hairline) solid rgb(0 0 0 / .2);
    }
}

/* Directory — the list */
.recipes-list {
    padding-block: var(--space-12) var(--section-y);
    scroll-margin-top: 6rem;
}

.recipes-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    background: var(--rcp-card);
    border-radius: var(--radius-md);
    text-align: center;
}

.recipes-empty h2 {
    font-size: var(--text-2xl);
    margin: 0;
}

.recipes-empty p {
    margin: 0;
}

.recipes-chip {
    display: inline-block;
    padding: .25rem .65rem;
    background: var(--rcp-orange);
    color: var(--ruma-linen);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.recipes-meta {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.recipes-feature {
    display: grid;
    margin-bottom: var(--space-10);
    background: var(--rcp-card);
    border-top: 4px solid var(--rcp-orange);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out);
}

@media (min-width: 800px) {
    .recipes-feature {
        grid-template-columns: 1.4fr 1fr;
    }
}

.recipes-feature:hover {
    box-shadow: var(--shadow-md);
}

.recipes-feature > :first-child {
    border-radius: 0;
}

.recipes-feature__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: clamp(1.5rem, 4vw, 3rem);
}

.recipes-feature__text p {
    margin: 0;
}

.recipes-feature__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.recipes-feature h2 {
    font-size: var(--text-3xl);
    margin: 0;
}

.recipes-feature__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    color: var(--accent-2);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-nav);
    text-transform: uppercase;
}

.recipes-feature__more svg {
    width: 1rem;
    height: 1rem;
}

.recipes-grid {
    display: grid;
    gap: var(--space-10) var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.recipes-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}

.recipes-card > :first-child {
    margin-bottom: var(--space-2);
    border-radius: var(--radius-md);
    border-bottom: 3px solid var(--rcp-orange);
}

.recipes-card .eyebrow,
.recipes-card h3 {
    margin: 0;
}

.recipes-card h3 {
    font-size: var(--text-xl);
}

.recipes-card:hover h3 {
    text-decoration: underline;
    text-decoration-color: var(--accent-2);
    text-underline-offset: .2em;
}

:is(.recipes-card, .recipes-feature):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.recipes-list .talent-pagination [aria-current='page'] {
    background: var(--rcp-orange);
    border-color: var(--rcp-orange);
    color: var(--ruma-linen);
}

/* Directory — "Add yours" on Spicy Orange */
.recipes-add {
    position: relative;
    overflow: hidden;
    background: var(--rcp-orange);
    color: var(--ruma-linen);
    padding-block: var(--section-y);
}

.recipes-add__inner {
    position: relative;
    display: grid;
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 800px) {
    .recipes-add__inner {
        grid-template-columns: 1fr auto;
    }
}

.recipes-add .eyebrow {
    margin: 0;
    color: var(--ruma-linen);
}

.recipes-add h2 {
    margin: var(--space-3) 0;
    font-size: var(--text-3xl);
    color: var(--ruma-linen);
}

.recipes-add h2 em {
    text-decoration: underline;
    text-decoration-color: var(--ruma-gold);
    text-decoration-thickness: 3px;
    text-underline-offset: .15em;
}

.recipes-add p {
    max-width: 36rem;
    margin: 0;
    color: var(--ruma-linen);
}

.recipes-add .btn:focus-visible {
    outline: 3px solid var(--ruma-linen);
    outline-offset: 3px;
}

.recipes-add__seal {
    position: absolute;
    right: -4rem;
    top: 50%;
    width: 22rem;
    transform: translateY(-50%);
    opacity: .08;
    color: var(--ruma-linen);
    pointer-events: none;
}

/* Recipe page — the spread */
.recipe h2 {
    margin: var(--space-2) 0 var(--space-6);
}

.recipe-spread {
    padding-block: clamp(2rem, 5vw, 4rem);
    border-bottom: var(--hairline) solid var(--rule);
}

.recipe-spread__inner {
    display: grid;
    gap: var(--space-10);
    align-items: center;
}

@media (min-width: 900px) {
    .recipe-spread__inner {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-16);
    }
}

.recipe-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.recipe-crumbs a {
    color: var(--accent-2);
    font-weight: 600;
    text-decoration: none;
}

.recipe-crumbs a:hover {
    text-decoration: underline;
}

.recipe-crumbs span {
    color: var(--ink-muted);
}

.recipe-title {
    margin: var(--space-4) 0;
    font-size: var(--text-4xl);
    font-style: italic;
    line-height: 1;
}

.recipe-spread__photo > * {
    border: 10px solid var(--rcp-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transform: rotate(1.2deg);
}

@media (prefers-reduced-motion: no-preference) {
    .recipe-spread__photo > * {
        transition: transform var(--dur-slow) var(--ease-out);
    }

    .recipe-spread__photo:hover > * {
        transform: rotate(0);
    }
}

.recipe-cook {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.recipe-cook__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--rcp-orange);
    color: var(--ruma-linen);
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.recipe-cook small {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.recipe-cook strong {
    margin-right: var(--space-2);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--ink-strong);
}

.recipe-cook > div span {
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.recipe-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    margin: var(--space-8) 0 0;
    border-top: 3px solid var(--rcp-orange);
    border-bottom: var(--hairline) solid var(--rule);
}

.recipe-facts div {
    padding: var(--space-3) var(--space-4);
    border-left: var(--hairline) solid var(--rule);
}

.recipe-facts div:first-child {
    padding-left: 0;
    border-left: 0;
}

.recipe-facts dt {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.recipe-facts dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.2;
    color: var(--ink-strong);
}

.recipe-facts dd small {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.recipe-facts .recipe-facts__word {
    padding-top: .35rem;
    font-size: var(--text-lg);
}

/* Recipe page — ingredient card beside the story and method */
.recipe-body {
    display: grid;
    gap: var(--space-12);
    padding-block: var(--space-16);
}

@media (min-width: 960px) {
    .recipe-body {
        grid-template-columns: 22rem minmax(0, 1fr);
        gap: var(--space-16);
    }

    .recipe-aside {
        position: sticky;
        top: calc(var(--header-h) + var(--space-4));
        align-self: start;
    }
}

.recipe-aside {
    display: grid;
    gap: var(--space-4);
}

.recipe-ing {
    padding: var(--space-6);
    background: var(--rcp-card);
    border-top: 4px solid var(--rcp-orange);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.recipe-ing h2 {
    margin: 0 0 var(--space-4);
    font-size: var(--text-xl);
}

.recipe-serves {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: var(--hairline) solid var(--rule);
}

.recipe-serves span {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.recipe-serves strong {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1;
    color: var(--ink-strong);
}

.recipe-group {
    margin: var(--space-5) 0 var(--space-2);
    padding-left: var(--space-2);
    border-left: 3px solid var(--rcp-orange);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent-2);
}

.recipe-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.recipe-group + .recipe-list {
    margin-top: 0;
}

.recipe-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}

.recipe-list i {
    flex: 1;
    min-width: 1rem;
    border-bottom: var(--hairline) dotted color-mix(in srgb, var(--rcp-orange) 45%, transparent);
}

.recipe-prep {
    color: var(--ink-muted);
    font-style: italic;
}

.recipe-amt {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink-strong);
}

.recipe-scan {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: var(--hairline) solid var(--rule);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    text-decoration: none;
}

.recipe-scan u {
    color: var(--accent-2);
}

:root.dark .recipe-scan u {
    color: var(--ruma-linen);
    text-decoration-color: var(--rcp-orange);
    text-decoration-thickness: 2px;
}

:root.dark .recipe-group {
    color: var(--ruma-linen);
}

.recipe-aside .btn--warm {
    background: var(--rcp-orange);
    border-color: var(--rcp-orange);
    color: var(--ruma-linen);
}

.recipe-aside .btn--warm:hover {
    background: color-mix(in srgb, var(--rcp-orange) 82%, #000);
    border-color: color-mix(in srgb, var(--rcp-orange) 82%, #000);
}

.recipe-main {
    display: grid;
    gap: var(--space-16);
    min-width: 0;
}

/* The story: the opening paragraph reads as a lede, set off by an orange rule */
.recipe-story {
    max-width: 40rem;
    font-size: var(--text-md);
}

.recipe-story > p:first-child {
    padding-left: var(--space-5);
    border-left: 3px solid var(--rcp-orange);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.45;
    color: var(--ink-strong);
}

.recipe-steps {
    list-style: none;
    max-width: 42rem;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.recipe-steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: var(--hairline) solid var(--rule);
}

.recipe-steps li::before {
    content: counter(step, decimal-leading-zero);
    grid-row: span 2;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--accent-2);
}

.recipe-steps p {
    margin: 0;
}

.recipe-gallery {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

@media (min-width: 700px) {
    .recipe-gallery--lead {
        grid-template-columns: 1fr 1fr;
    }

    .recipe-gallery--lead > :first-child {
        grid-row: span 2;
        height: 100%;
    }
}

.recipe-gallery > * {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Recipe page — the handwritten original on a band of the primary hue */
.recipe-original {
    padding-block: var(--section-y);
    background: var(--rcp-block);
    color: var(--ruma-linen);
    scroll-margin-top: 6rem;
}

.recipe-original__head {
    margin-bottom: var(--space-10);
    text-align: center;
}

.recipe-original .eyebrow {
    justify-content: center;
    color: var(--ruma-gold);
    --rule: color-mix(in srgb, var(--ruma-gold) 50%, transparent);
}

.recipe-original h2 {
    font-size: var(--text-3xl);
    color: var(--ruma-linen);
}

.recipe-original h2 em {
    color: var(--ruma-gold);
}

.recipe-original__scans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-8);
}

.recipe-original__mat {
    display: block;
    width: min(100%, 20rem);
    padding: var(--space-4);
    background: var(--ruma-linen);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.recipe-original__mat:nth-child(odd) {
    transform: rotate(-2deg);
}

.recipe-original__mat:nth-child(even) {
    transform: rotate(1.5deg);
}

.recipe-original__mat:focus-visible {
    outline: 2px solid var(--ruma-gold);
    outline-offset: 4px;
}

/* Recipe page — video, more recipes, tags */
.recipe-end {
    display: grid;
    gap: var(--space-16);
    padding-block: var(--section-y);
}

.recipe-video {
    max-width: 56rem;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--band);
}

.recipe-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.recipe-more__heading {
    margin: var(--space-6) 0 var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.recipe-more {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.recipe-more a {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    background: var(--rcp-card);
    border-left: 3px solid var(--rcp-orange);
    border-radius: var(--radius-md);
    color: inherit;
    text-decoration: none;
    transition: box-shadow var(--dur-base) var(--ease-out);
}

.recipe-more a:hover {
    box-shadow: var(--shadow-md);
}

.recipe-more a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.recipe-more strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
}

.recipe-more small {
    color: var(--ink-muted);
}

.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-8);
}

.recipe-tags .tag {
    min-height: 2rem;
    background: var(--rcp-orange);
    border-color: var(--rcp-orange);
    color: var(--ruma-linen);
    text-decoration: none;
}

/* Printing a public recipe: just the words. Photos, video, chrome and controls are left out. */
@media print {
    .ruma .site-header,
    .ruma .site-footer,
    .ruma .skip-link,
    .recipe-noprint,
    .recipe-photo {
        display: none !important;
    }

    .ruma,
    .recipes-page {
        background: #fff;
        color: #000;
        --ink: #000;
        --ink-strong: #000;
        --ink-muted: #333;
        --rule: #999;
        --accent-2: #000;
        --rcp-card: #fff;
        --rcp-orange: #000;
    }

    .recipe-spread {
        padding-block: 0 var(--space-4);
    }

    .recipe-spread__inner,
    .recipe-body {
        display: block;
    }

    .recipe-body {
        padding-block: var(--space-4);
    }

    .recipe-aside {
        position: static;
    }

    .recipe-ing {
        padding: 0;
        box-shadow: none;
        border-top: 0;
    }

    .recipe-main {
        display: block;
        margin-top: var(--space-8);
    }

    .recipe-main > * + * {
        margin-top: var(--space-8);
    }

    .recipe-steps li,
    .recipe-list li {
        break-inside: avoid;
    }
}