/**
 * Display title fonts + user colors (display-text-color.js).
 */

@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Almendra:wght@700&family=Anton&family=Archivo:wght@600;700;800&family=Audiowide&family=Bebas+Neue&family=Cinzel+Decorative:wght@700&family=Cinzel:wght@600;700&family=Cormorant+Garamond:wght@600;700&family=Crimson+Pro:wght@600;700&family=Eagle+Lake&family=Grenze+Gotisch:wght@600&family=IM+Fell+English+SC&family=Libre+Baskerville:wght@700&family=Lobster&family=Lora:wght@600;700&family=MedievalSharp&family=Merriweather:wght@700;900&family=Metal+Mania&family=Montserrat:wght@700;800&family=Orbitron:wght@600;700&family=Oswald:wght@600;700&family=Playfair+Display:wght@700;800&family=Rajdhani:wght@600;700&family=Raleway:wght@700;800&family=Spectral:wght@600;700&family=UnifrakturMaguntia&display=swap");

:root {
    --alysum-display-top: #ffffff;
    --alysum-display-mid: #fbbf24;
    --alysum-display-deep: #b45309;
    --alysum-display-highlight: #fde68a;
    --alysum-display-edge: rgba(253, 224, 71, 0.92);
    --alysum-display-glow: rgba(251, 191, 36, 0.42);
    --alysum-display-shadow: rgba(15, 23, 42, 0.55);
    --alysum-display-solid: #f8fafc;
}

/* stylelint-disable selector-max-type */
html[data-display-text-color] :is(
    .header-center,
    .header-title,
    .brand-name,
    .library-page-title,
    .library-welcome-title,
    .welcome-copy h2,
    #status,
    .section-head-left h2,
    .books-panel > .section-head h2,
    .panel-head h2,
    .ne-page-title,
    .wr-page-title,
    .wd-welcome-title,
    .ov-name,
    .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num,
    .card h2,
    .legal-hero h1,
    .brand-lockup h1
) {
    color: var(--alysum-display-mid);
    text-shadow: 0 1px 3px var(--alysum-display-shadow);
}

html[data-display-text-style] :is(
    .header-center,
    .header-title,
    .brand-name,
    .library-page-title,
    .library-welcome-title,
    .welcome-copy h2,
    #status,
    .section-head-left h2,
    .books-panel > .section-head h2,
    .panel-head h2,
    .ne-page-title,
    .wr-page-title,
    .wd-welcome-title,
    .ov-name,
    .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num,
    .card h2,
    .legal-hero h1,
    .brand-lockup h1
) {
    line-height: 1.12;
    background: none;
    -webkit-text-stroke: 0;
    filter: none;
}

html[data-display-text-style][data-display-text-caps="1"] :is(
    .header-center,
    .header-title,
    .brand-name,
    .library-page-title,
    .library-welcome-title,
    .section-head-left h2,
    .books-panel > .section-head h2,
    .panel-head h2,
    .ne-page-title,
    .wr-page-title,
    .wd-welcome-title,
    .ov-name
) {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html[data-display-text-style] :is(.welcome-copy h2, #status, .wd-welcome-title, .library-welcome-title) {
    text-transform: none;
    letter-spacing: 0.02em;
}

html[data-display-text-color] :is(.wd-welcome-title .wd-name, .library-welcome-title .library-name) {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--alysum-display-highlight);
    -webkit-text-fill-color: currentColor;
}

/* ——— Font families ——— */
html[data-display-text-style="cinzel"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Cinzel, Georgia, serif; font-weight: 700; }
html[data-display-text-style="cinzeldec"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Cinzel Decorative", Cinzel, serif; font-weight: 700; }
html[data-display-text-style="medieval"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "MedievalSharp", cursive; font-weight: 400; }
html[data-display-text-style="almendra"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Almendra, Georgia, serif; font-weight: 700; }
html[data-display-text-style="unifraktur"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "UnifrakturMaguntia", serif; font-weight: 400; }
html[data-display-text-style="imfell"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "IM Fell English SC", Georgia, serif; font-weight: 400; }
html[data-display-text-style="metalmania"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Metal Mania", cursive; font-weight: 400; }
html[data-display-text-style="eagle"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Eagle Lake", cursive; font-weight: 400; }
html[data-display-text-style="grenze"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Grenze Gotisch", serif; font-weight: 600; }
html[data-display-text-style="playfair"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
html[data-display-text-style="lora"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Lora, Georgia, serif; font-weight: 700; }
html[data-display-text-style="merriweather"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Merriweather, Georgia, serif; font-weight: 900; }
html[data-display-text-style="cormorant"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; }
html[data-display-text-style="crimson"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Crimson Pro", Georgia, serif; font-weight: 700; }
html[data-display-text-style="spectral"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Spectral, Georgia, serif; font-weight: 700; }
html[data-display-text-style="libre"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; }
html[data-display-text-style="abril"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Abril Fatface", Georgia, serif; font-weight: 400; }
html[data-display-text-style="oswald"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Oswald, sans-serif; font-weight: 700; }
html[data-display-text-style="rajdhani"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Rajdhani, sans-serif; font-weight: 700; }
html[data-display-text-style="archivo"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Archivo, sans-serif; font-weight: 700; }
html[data-display-text-style="raleway"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Raleway, sans-serif; font-weight: 800; }
html[data-display-text-style="montserrat"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Montserrat, sans-serif; font-weight: 800; }
html[data-display-text-style="orbitron"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Orbitron, sans-serif; font-weight: 700; }
html[data-display-text-style="bebas"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: "Bebas Neue", sans-serif; font-weight: 400; }
html[data-display-text-style="anton"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Anton, sans-serif; font-weight: 400; }
html[data-display-text-style="audiowide"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Audiowide, sans-serif; font-weight: 400; }
html[data-display-text-style="lobster"] :is(.header-center, .header-title, .brand-name, .welcome-copy h2, #status, .section-head-left h2, .books-panel > .section-head h2, .panel-head h2, .ne-page-title, .wr-page-title, .wd-welcome-title, .ov-name, .ov-book-title, .studio-section-head h1, .studio-book-title, .studio-stat-num, .card h2, .legal-hero h1, .brand-lockup h1) { font-family: Lobster, cursive; font-weight: 400; }

/* Library header uses its own classes but should honor the same Settings typography choices. */
html[data-display-text-style="cinzel"] :is(.library-page-title, .library-welcome-title) { font-family: Cinzel, Georgia, serif; font-weight: 700; }
html[data-display-text-style="cinzeldec"] :is(.library-page-title, .library-welcome-title) { font-family: "Cinzel Decorative", Cinzel, serif; font-weight: 700; }
html[data-display-text-style="medieval"] :is(.library-page-title, .library-welcome-title) { font-family: "MedievalSharp", cursive; font-weight: 400; }
html[data-display-text-style="almendra"] :is(.library-page-title, .library-welcome-title) { font-family: Almendra, Georgia, serif; font-weight: 700; }
html[data-display-text-style="unifraktur"] :is(.library-page-title, .library-welcome-title) { font-family: "UnifrakturMaguntia", serif; font-weight: 400; }
html[data-display-text-style="imfell"] :is(.library-page-title, .library-welcome-title) { font-family: "IM Fell English SC", Georgia, serif; font-weight: 400; }
html[data-display-text-style="metalmania"] :is(.library-page-title, .library-welcome-title) { font-family: "Metal Mania", cursive; font-weight: 400; }
html[data-display-text-style="eagle"] :is(.library-page-title, .library-welcome-title) { font-family: "Eagle Lake", cursive; font-weight: 400; }
html[data-display-text-style="grenze"] :is(.library-page-title, .library-welcome-title) { font-family: "Grenze Gotisch", serif; font-weight: 600; }
html[data-display-text-style="playfair"] :is(.library-page-title, .library-welcome-title) { font-family: "Playfair Display", Georgia, serif; font-weight: 700; }
html[data-display-text-style="lora"] :is(.library-page-title, .library-welcome-title) { font-family: Lora, Georgia, serif; font-weight: 700; }
html[data-display-text-style="merriweather"] :is(.library-page-title, .library-welcome-title) { font-family: Merriweather, Georgia, serif; font-weight: 900; }
html[data-display-text-style="cormorant"] :is(.library-page-title, .library-welcome-title) { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; }
html[data-display-text-style="crimson"] :is(.library-page-title, .library-welcome-title) { font-family: "Crimson Pro", Georgia, serif; font-weight: 700; }
html[data-display-text-style="spectral"] :is(.library-page-title, .library-welcome-title) { font-family: Spectral, Georgia, serif; font-weight: 700; }
html[data-display-text-style="libre"] :is(.library-page-title, .library-welcome-title) { font-family: "Libre Baskerville", Georgia, serif; font-weight: 700; }
html[data-display-text-style="abril"] :is(.library-page-title, .library-welcome-title) { font-family: "Abril Fatface", Georgia, serif; font-weight: 400; }
html[data-display-text-style="oswald"] :is(.library-page-title, .library-welcome-title) { font-family: Oswald, sans-serif; font-weight: 700; }
html[data-display-text-style="rajdhani"] :is(.library-page-title, .library-welcome-title) { font-family: Rajdhani, sans-serif; font-weight: 700; }
html[data-display-text-style="archivo"] :is(.library-page-title, .library-welcome-title) { font-family: Archivo, sans-serif; font-weight: 700; }
html[data-display-text-style="raleway"] :is(.library-page-title, .library-welcome-title) { font-family: Raleway, sans-serif; font-weight: 800; }
html[data-display-text-style="montserrat"] :is(.library-page-title, .library-welcome-title) { font-family: Montserrat, sans-serif; font-weight: 800; }
html[data-display-text-style="orbitron"] :is(.library-page-title, .library-welcome-title) { font-family: Orbitron, sans-serif; font-weight: 700; }
html[data-display-text-style="bebas"] :is(.library-page-title, .library-welcome-title) { font-family: "Bebas Neue", sans-serif; font-weight: 400; }
html[data-display-text-style="anton"] :is(.library-page-title, .library-welcome-title) { font-family: Anton, sans-serif; font-weight: 400; }
html[data-display-text-style="audiowide"] :is(.library-page-title, .library-welcome-title) { font-family: Audiowide, sans-serif; font-weight: 400; }
html[data-display-text-style="lobster"] :is(.library-page-title, .library-welcome-title) { font-family: Lobster, cursive; font-weight: 400; }

/* ——— Settings ——— */
.text-style-chip-preview {
    display: block;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 6px;
    pointer-events: none;
    color: var(--alysum-display-mid);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.text-style-chip-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
}

.theme-chip[data-ink="white"] .text-style-chip-label,
.theme-chip[data-ink="cream"] .text-style-chip-label {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.theme-chip.text-style-chip,
.theme-chip.title-color-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 10px 8px;
}

#textStyleChipRow .theme-chip[data-style="classic"] .text-style-chip-preview {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 900;
    color: var(--gold, #fbbf24);
}

.font-group-label {
    grid-column: 1 / -1;
    margin: 14px 0 4px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
}

.font-group-label:first-child {
    margin-top: 0;
}

.display-color-custom {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.display-color-custom.is-visible {
    display: grid;
}

.display-color-field label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--muted-2);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.display-color-field input[type="color"] {
    width: 100%;
    height: 52px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.title-color-chip .text-style-chip-preview {
    font-size: 24px;
}

.title-color-chip.has-preview .text-style-chip-label {
    color: inherit;
}