/* ============================================
   POSTER STYLE PRESETS
   ============================================
   Each [data-style="..."] block overrides the design tokens
   defined in poster_page.html's :root. HTML structure does not change.
   ============================================ */

#timeline-wrapper[data-style="classic"] {
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-heading-weight: 900;
    --font-heading-letter-spacing: 2px;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 0;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --card-border: none;
    --header-bg: var(--accent-color);
}

/* Thumbnail styles for the sidebar style picker */
.style-thumbnail {
    width: 56px;
    height: 72px;
    border-radius: 6px;
    border: 2px solid transparent;
    background: white;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px;
    transition: transform 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.style-thumbnail:hover {
    transform: translateY(-2px);
}
.style-thumbnail.active {
    border-color: var(--accent-color);
}
.style-thumbnail-header {
    height: 12px;
    background: var(--accent-color);
    border-radius: 2px;
    margin-bottom: 4px;
}
.style-thumbnail-line {
    height: 4px;
    background: #ccc;
    border-radius: 1px;
    margin-bottom: 3px;
}
.style-thumbnail-line.short { width: 60%; }
.style-thumbnail-label {
    font-size: 9px;
    text-align: center;
    margin-top: 4px;
    color: #2c3e50;
    font-weight: 600;
}
.style-options-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.75rem;
}
.style-options-section h6 {
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.style-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Per-preset thumbnail variants — visual hints of how each style differs */
.style-thumbnail[data-style="magazine"] {
    background: #fdfaf3;
}
.style-thumbnail[data-style="magazine"] .style-thumbnail-header {
    background: transparent;
    border-bottom: 1px solid #2c3e50;
    border-radius: 0;
    height: 10px;
}
.style-thumbnail[data-style="magazine"] .style-thumbnail-line {
    background: #2c3e50;
    opacity: 0.5;
}
.style-thumbnail[data-style="cards"] {
    background: #fafafa;
    box-shadow: inset 0 0 0 0 transparent;
}
.style-thumbnail[data-style="cards"] .style-thumbnail-header {
    border-radius: 999px;
    height: 8px;
    margin: 4px 8px;
}
.style-thumbnail[data-style="cards"] .style-thumbnail-line {
    border-radius: 4px;
    height: 6px;
    background: #ddd;
}
.style-thumbnail[data-style="minimal"] {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
}
.style-thumbnail[data-style="minimal"] .style-thumbnail-header {
    background: transparent;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    border-radius: 0;
    height: 8px;
}
.style-thumbnail[data-style="minimal"] .style-thumbnail-line {
    background: #888;
    height: 2px;
}
.style-thumbnail[data-style="notebook"] {
    background:
        repeating-linear-gradient(transparent, transparent 7px, rgba(0,0,0,0.06) 8px),
        white;
    border-style: dashed;
    transform: rotate(-1deg);
}
.style-thumbnail[data-style="notebook"]:hover {
    transform: translateY(-2px) rotate(-1deg);
}
.style-thumbnail[data-style="notebook"] .style-thumbnail-header {
    border-radius: 1px;
}
.style-thumbnail[data-style="notebook"] .style-thumbnail-label {
    font-family: 'Caveat', cursive;
    font-size: 12px;
}

/* ============================================
   MAGAZINE — Editorial: white banner, serif italic title,
   square images, drop-cap body, thin border, no shadows
   ============================================ */
#timeline-wrapper[data-style="magazine"] {
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-heading-weight: 700;
    --font-heading-letter-spacing: 0;
    --font-heading-text-transform: none;
    --card-border-radius: 0;
    --card-shadow: none;
    --card-border: 1px solid rgba(0, 0, 0, 0.15);
    --header-bg: #f8f6f0;
}
#timeline-wrapper[data-style="magazine"] .page,
#timeline-wrapper[data-style="magazine"] body.gallery-mode .page {
    box-shadow: none !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fdfaf3;
}
#timeline-wrapper[data-style="magazine"] .header-banner {
    background: #fdfaf3 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #2c3e50;
    padding: 12mm 15mm 18mm;
    min-height: calc(50mm * var(--banner-scale, 1));
}
#timeline-wrapper[data-style="magazine"] .mathematician-name {
    color: #1a1a1a !important;
    font-style: italic;
    text-shadow: none !important;
}
#timeline-wrapper[data-style="magazine"] .image-container {
    border-radius: 0;
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 90mm;
    height: 90mm;
}
#timeline-wrapper[data-style="magazine"] .mathematician-year {
    font-family: var(--font-body);
    color: #6b6357;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: calc(var(--year-size) * 0.55);
}
#timeline-wrapper[data-style="magazine"] .mathematician-bio {
    text-align: left;
    line-height: 1.7;
    color: #2a2a2a;
    font-weight: 400;
}
#timeline-wrapper[data-style="magazine"] .mathematician-bio::before {
    background: #fdfaf3 !important;
}
#timeline-wrapper[data-style="magazine"] .mathematician-bio p {
    padding: 8mm 8mm;
}
#timeline-wrapper[data-style="magazine"] .mathematician-bio p::first-letter {
    font-size: 3.2em;
    font-weight: 700;
    float: left;
    line-height: 0.9;
    margin: 0.05em 0.08em 0 0;
    color: var(--accent-color);
}

/* ============================================
   CARDS — Modern friendly: rounded everything, big soft
   shadows, pill title, tinted board behind cards
   ============================================ */
#timeline-wrapper[data-style="cards"] {
    --font-heading: 'Roboto', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --font-heading-weight: 700;
    --font-heading-letter-spacing: 0.5px;
    --font-heading-text-transform: none;
    --card-border-radius: 24px;
    --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    --card-border: none;
    --header-bg: var(--accent-color);

    background:
      radial-gradient(circle at 0% 0%, rgba(0,0,0,0.04), transparent 40%),
      radial-gradient(circle at 100% 100%, rgba(0,0,0,0.04), transparent 40%),
      #f5f5f7;
    padding: 28px;
    border-radius: 16px;
}
#timeline-wrapper[data-style="cards"] .page {
    overflow: hidden;
    border-radius: 24px !important;
}
#timeline-wrapper[data-style="cards"] body.gallery-mode .page,
body.gallery-mode #timeline-wrapper[data-style="cards"] .page {
    border-radius: 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
}
#timeline-wrapper[data-style="cards"] .header-banner {
    border-radius: 24px 24px 60% 60% / 24px 24px 12% 12%;
    box-shadow: none !important;
    padding: 12mm 15mm 28mm;
}
#timeline-wrapper[data-style="cards"] .mathematician-name {
    border-radius: 999px;
    padding: 8px 28px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(2px);
    display: inline-flex;
    margin: 8px auto;
    width: auto;
    text-shadow: none !important;
}
#timeline-wrapper[data-style="cards"] .image-container {
    border: 6px solid white;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}
#timeline-wrapper[data-style="cards"] .mathematician-year {
    background: white;
    color: var(--accent-color);
    border-radius: 999px;
    padding: 4px 18px;
    display: inline-block;
    align-self: center;
    margin: 3mm auto 4mm;
    font-weight: 600;
    font-size: calc(var(--year-size) * 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#timeline-wrapper[data-style="cards"] .mathematician-bio {
    margin: 5mm 8mm 5mm 8mm;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
#timeline-wrapper[data-style="cards"] .mathematician-bio::before {
    background: white !important;
}
#timeline-wrapper[data-style="cards"] .mathematician-bio p {
    color: #2a2a2a;
    padding: 8mm 8mm;
}

/* ============================================
   MINIMAL — Gallery: white everything, hairline borders,
   square images, thin sans, monochrome accents
   ============================================ */
#timeline-wrapper[data-style="minimal"] {
    --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --font-heading-weight: 300;
    --font-heading-letter-spacing: 0;
    --font-heading-text-transform: none;
    --card-border-radius: 0;
    --card-shadow: none;
    --card-border: 1px solid #1a1a1a;
    --header-bg: white;
}
#timeline-wrapper[data-style="minimal"] .page,
#timeline-wrapper[data-style="minimal"] body.gallery-mode .page,
body.gallery-mode #timeline-wrapper[data-style="minimal"] .page {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0 !important;
}
#timeline-wrapper[data-style="minimal"] .header-banner {
    background: white !important;
    box-shadow: none !important;
    border-bottom: 1px solid #1a1a1a;
    padding: 14mm 15mm 14mm;
    min-height: calc(40mm * var(--banner-scale, 1));
}
#timeline-wrapper[data-style="minimal"] .mathematician-name {
    color: #1a1a1a !important;
    font-weight: 300;
    text-shadow: none !important;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding: 10px 0;
    margin: 2mm 12mm;
}
#timeline-wrapper[data-style="minimal"] .image-container {
    border-radius: 0;
    border: 1px solid #1a1a1a;
    box-shadow: none;
    width: 75mm;
    height: 75mm;
}
#timeline-wrapper[data-style="minimal"] .mathematician-year {
    color: #1a1a1a;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: calc(var(--year-size) * 0.45);
    margin: 6mm 0 3mm;
}
#timeline-wrapper[data-style="minimal"] .mathematician-bio::before {
    background: white !important;
}
#timeline-wrapper[data-style="minimal"] .mathematician-bio {
    color: #1a1a1a;
    font-weight: 300;
    text-align: left;
    line-height: 1.7;
}
#timeline-wrapper[data-style="minimal"] .mathematician-bio p {
    padding: 6mm 12mm;
}

/* ============================================
   NOTEBOOK — Handwritten: ruled paper, Polaroid-frame
   images, dashed borders, marker underlines, slight tilt
   ============================================ */
#timeline-wrapper[data-style="notebook"] {
    --font-heading: 'Caveat', cursive;
    --font-body: 'Patrick Hand', cursive;
    --font-heading-weight: 700;
    --font-heading-letter-spacing: 0;
    --font-heading-text-transform: none;
    --card-border-radius: 8px;
    --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    --card-border: 2px dashed rgba(0, 0, 0, 0.35);
    --header-bg: var(--accent-color);
}
#timeline-wrapper[data-style="notebook"] .page,
body.gallery-mode #timeline-wrapper[data-style="notebook"] .page {
    background:
        repeating-linear-gradient(transparent, transparent 23px, rgba(0,0,0,0.05) 24px),
        #fffef9 !important;
    border: 2px dashed rgba(0, 0, 0, 0.35) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}
#timeline-wrapper[data-style="notebook"] .page:nth-child(2n) { transform: rotate(-0.6deg); }
#timeline-wrapper[data-style="notebook"] .page:nth-child(2n+1) { transform: rotate(0.5deg); }
#timeline-wrapper[data-style="notebook"] .header-banner {
    border-bottom: 3px dashed rgba(255, 255, 255, 0.5);
    box-shadow: none !important;
}
#timeline-wrapper[data-style="notebook"] .mathematician-name {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-decoration-color: currentColor;
    text-decoration-style: wavy;
    text-underline-offset: 8px;
    font-size: calc(var(--name-size) * 1.15 * var(--title-scale, 1));
}
#timeline-wrapper[data-style="notebook"] .image-container {
    border-radius: 4px;
    border: 8px solid #fffef9;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: rotate(-2deg);
    width: 80mm;
    height: 80mm;
}
#timeline-wrapper[data-style="notebook"] .mathematician-year {
    font-family: var(--font-heading);
    color: #c0392b;
    font-weight: 700;
    font-size: calc(var(--year-size) * 0.7);
    text-decoration: underline wavy;
    text-decoration-color: rgba(192, 57, 43, 0.4);
    text-underline-offset: 4px;
}
#timeline-wrapper[data-style="notebook"] .mathematician-bio::before {
    background: transparent !important;
}
#timeline-wrapper[data-style="notebook"] .mathematician-bio {
    color: #1a3a5f;
    text-align: left;
    font-weight: 400;
    line-height: 1.5;
    font-size: calc(var(--bio-size) * 1.1);
}
#timeline-wrapper[data-style="notebook"] .mathematician-bio p {
    padding: 6mm 8mm;
}

/* ============================================
   BOLD / DISPLAY — Photo-as-background, massive serif headline
   overlaid; readable from across the room
   ============================================ */
#timeline-wrapper[data-style="bold"] {
    --font-heading: 'Bebas Neue', 'Anton', Impact, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-heading-weight: 400;
    --font-heading-letter-spacing: 2px;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 0;
    --card-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    --card-border: none;
    --header-bg: rgba(0, 0, 0, 0.65);
}
#timeline-wrapper[data-style="bold"] .page,
body.gallery-mode #timeline-wrapper[data-style="bold"] .page {
    background: #111 !important;
    border-radius: 0 !important;
}
#timeline-wrapper[data-style="bold"] .header-banner {
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%),
                var(--accent-color) !important;
    padding: 60mm 15mm 18mm;
    min-height: calc(140mm * var(--banner-scale, 1));
    box-shadow: none !important;
    border-bottom: 6px solid var(--accent-color);
}
#timeline-wrapper[data-style="bold"] .image-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 0;
    opacity: 0.55;
}
#timeline-wrapper[data-style="bold"] .mathematician-name {
    font-size: calc(var(--name-size) * 1.4 * var(--title-scale, 1));
    color: white !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
    line-height: 0.95;
    position: relative;
    z-index: 2;
}
#timeline-wrapper[data-style="bold"] .mathematician-year {
    color: var(--accent-color);
    background: #111;
    padding: 4px 14px;
    align-self: center;
    margin: 6mm auto 4mm;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: calc(var(--year-size) * 0.4);
}
#timeline-wrapper[data-style="bold"] .mathematician-bio::before {
    background: #111 !important;
}
#timeline-wrapper[data-style="bold"] .mathematician-bio {
    color: #f5f5f5;
    font-weight: 400;
    text-align: left;
    line-height: 1.55;
}

/* ============================================
   TRAVEL POSTER — WPA-style art deco, two-tone, italic
   display serif with decorative border
   ============================================ */
#timeline-wrapper[data-style="travel"] {
    --font-heading: 'Abril Fatface', 'Bodoni Moda', Georgia, serif;
    --font-body: 'Bodoni Moda', Georgia, serif;
    --font-heading-weight: 400;
    --font-heading-letter-spacing: 1px;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 0;
    --card-shadow: 0 6px 20px rgba(80, 60, 40, 0.25);
    --card-border: 4px double #2c1810;
    --header-bg: #d2691e;
}
#timeline-wrapper[data-style="travel"] .page,
body.gallery-mode #timeline-wrapper[data-style="travel"] .page {
    background: #f4ead5 !important;
    border: 4px double #2c1810 !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 20px rgba(80, 60, 40, 0.25) !important;
}
#timeline-wrapper[data-style="travel"] .header-banner {
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgba(0,0,0,0.08) 12px 13px),
        var(--accent-color) !important;
    padding: 14mm 15mm 22mm;
    min-height: calc(80mm * var(--banner-scale, 1));
    border-bottom: 2px solid #2c1810;
    box-shadow: inset 0 -8px 0 rgba(0,0,0,0.15) !important;
}
#timeline-wrapper[data-style="travel"] .header-banner::after {
    content: '';
    position: absolute;
    left: 8mm; right: 8mm; top: 5mm; bottom: 5mm;
    border: 1px solid rgba(255,255,255,0.4);
    pointer-events: none;
}
#timeline-wrapper[data-style="travel"] .mathematician-name {
    font-style: italic;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}
#timeline-wrapper[data-style="travel"] .image-container {
    border-radius: 50%;
    border: 6px double #2c1810;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    background: #f4ead5;
}
#timeline-wrapper[data-style="travel"] .mathematician-year {
    color: #2c1810;
    font-style: italic;
    font-size: calc(var(--year-size) * 0.55);
    letter-spacing: 3px;
}
#timeline-wrapper[data-style="travel"] .mathematician-bio::before {
    background: #f4ead5 !important;
}
#timeline-wrapper[data-style="travel"] .mathematician-bio {
    color: #2c1810;
    text-align: justify;
    font-style: italic;
    line-height: 1.55;
}

/* ============================================
   POLAROID WALL — Photo as Polaroid with washi tape,
   yellow scrap paper, handwritten caption underneath
   ============================================ */
#timeline-wrapper[data-style="polaroid"] {
    --font-heading: 'Permanent Marker', 'Caveat', cursive;
    --font-body: 'Kalam', 'Patrick Hand', cursive;
    --font-heading-weight: 400;
    --font-heading-letter-spacing: 1px;
    --font-heading-text-transform: none;
    --card-border-radius: 4px;
    --card-shadow: 0 4px 14px rgba(0,0,0,0.18);
    --card-border: none;
    --header-bg: transparent;
}
#timeline-wrapper[data-style="polaroid"] .page,
body.gallery-mode #timeline-wrapper[data-style="polaroid"] .page {
    background: #fdf6db !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
    border: none !important;
}
#timeline-wrapper[data-style="polaroid"] .header-banner {
    background: transparent !important;
    box-shadow: none !important;
    padding: 10mm 12mm 12mm;
    min-height: calc(30mm * var(--banner-scale, 1));
    position: relative;
}
#timeline-wrapper[data-style="polaroid"] .header-banner::after {
    content: '';
    position: absolute;
    top: 8mm; left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 40mm; height: 5mm;
    background: rgba(255, 200, 100, 0.6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
#timeline-wrapper[data-style="polaroid"] .image-container {
    background: white;
    border: 10px solid white;
    border-bottom-width: 30px;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    transform: rotate(-3deg);
    width: 90mm;
    height: 90mm;
}
#timeline-wrapper[data-style="polaroid"] .mathematician-name {
    color: #2c1810 !important;
    text-shadow: none !important;
    font-size: calc(var(--name-size) * 1.15 * var(--title-scale, 1));
    transform: rotate(-1deg);
}
#timeline-wrapper[data-style="polaroid"] .mathematician-year {
    font-family: var(--font-body);
    color: #6b4f1e;
    font-style: italic;
    font-size: calc(var(--year-size) * 0.6);
    transform: rotate(1deg);
}
#timeline-wrapper[data-style="polaroid"] .mathematician-bio::before {
    background: transparent !important;
}
#timeline-wrapper[data-style="polaroid"] .mathematician-bio {
    color: #2c1810;
    text-align: left;
    line-height: 1.5;
    font-size: calc(var(--bio-size) * 1.1);
}

/* ============================================
   NEWSPRINT — Broadsheet newspaper, masthead rules,
   big sans headline, two-column bio
   ============================================ */
#timeline-wrapper[data-style="newsprint"] {
    --font-heading: 'Oswald', Impact, sans-serif;
    --font-body: 'Source Serif Pro', 'Source Serif 4', Georgia, serif;
    --font-heading-weight: 700;
    --font-heading-letter-spacing: 0;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 0;
    --card-shadow: none;
    --card-border: 1px solid #1a1a1a;
    --header-bg: #f8f5ec;
}
#timeline-wrapper[data-style="newsprint"] .page,
body.gallery-mode #timeline-wrapper[data-style="newsprint"] .page {
    background: #f8f5ec !important;
    border-radius: 0 !important;
    border: 1px solid #1a1a1a !important;
    box-shadow: none !important;
}
#timeline-wrapper[data-style="newsprint"] .header-banner {
    background: #f8f5ec !important;
    box-shadow: none !important;
    padding: 10mm 15mm 8mm;
    min-height: calc(55mm * var(--banner-scale, 1));
    border-bottom: 4px double #1a1a1a;
}
#timeline-wrapper[data-style="newsprint"] .mathematician-name {
    color: #1a1a1a !important;
    text-shadow: none !important;
    font-size: calc(var(--name-size) * 1.1 * var(--title-scale, 1));
    line-height: 0.95;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 4mm;
    margin-bottom: 3mm;
}
#timeline-wrapper[data-style="newsprint"] .image-container {
    border-radius: 0;
    border: none;
    box-shadow: none;
    filter: grayscale(0.4) contrast(1.05);
    width: 70mm;
    height: 70mm;
}
#timeline-wrapper[data-style="newsprint"] .mathematician-year {
    color: #1a1a1a;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: calc(var(--year-size) * 0.45);
    letter-spacing: 6px;
}
#timeline-wrapper[data-style="newsprint"] .mathematician-bio::before {
    background: #f8f5ec !important;
}
#timeline-wrapper[data-style="newsprint"] .mathematician-bio {
    color: #1a1a1a;
    text-align: justify;
    column-count: 2;
    column-gap: 8mm;
    column-rule: 1px solid #999;
    padding: 0 8mm;
    line-height: 1.5;
}
#timeline-wrapper[data-style="newsprint"] .mathematician-bio p {
    padding: 5mm 0;
}
#timeline-wrapper[data-style="newsprint"] .mathematician-bio p::first-letter {
    font-family: var(--font-heading);
    font-size: 3em;
    float: left;
    line-height: 0.9;
    margin: 0.05em 0.08em 0 0;
}

/* ============================================
   RISOGRAPH — Two-colour riso print, halftone dots,
   slight registration offset, designer-y
   ============================================ */
#timeline-wrapper[data-style="risograph"] {
    --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-body: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-heading-weight: 700;
    --font-heading-letter-spacing: -0.5px;
    --font-heading-text-transform: lowercase;
    --card-border-radius: 0;
    --card-shadow: none;
    --card-border: none;
    --header-bg: #f5e8d3;
}
#timeline-wrapper[data-style="risograph"] .page,
body.gallery-mode #timeline-wrapper[data-style="risograph"] .page {
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.12) 1px, transparent 1.5px) 0 0 / 4px 4px,
        #f5e8d3 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
#timeline-wrapper[data-style="risograph"] .header-banner {
    background: var(--accent-color) !important;
    box-shadow: 4px 4px 0 0 #1a1a1a !important;
    padding: 14mm 12mm 18mm 16mm;
    min-height: calc(60mm * var(--banner-scale, 1));
    margin: 6mm 6mm 0;
    position: relative;
}
#timeline-wrapper[data-style="risograph"] .header-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 2px 2px, rgba(0,0,0,0.15) 1px, transparent 1.5px) 0 0 / 6px 6px;
    mix-blend-mode: multiply;
    pointer-events: none;
}
#timeline-wrapper[data-style="risograph"] .mathematician-name {
    text-shadow: 3px 3px 0 #1a1a1a;
    font-size: calc(var(--name-size) * 1.1 * var(--title-scale, 1));
}
#timeline-wrapper[data-style="risograph"] .image-container {
    border-radius: 0;
    border: 3px solid #1a1a1a;
    box-shadow: 6px 6px 0 0 var(--accent-color);
    filter: contrast(1.1);
    width: 80mm;
    height: 80mm;
}
#timeline-wrapper[data-style="risograph"] .mathematician-year {
    color: #1a1a1a;
    background: var(--accent-color);
    padding: 2px 14px;
    align-self: center;
    margin: 4mm auto 4mm;
    border: 2px solid #1a1a1a;
    box-shadow: 3px 3px 0 0 #1a1a1a;
    font-size: calc(var(--year-size) * 0.5);
}
#timeline-wrapper[data-style="risograph"] .mathematician-bio::before {
    background: transparent !important;
}
#timeline-wrapper[data-style="risograph"] .mathematician-bio {
    color: #1a1a1a;
    text-align: left;
    line-height: 1.45;
}

/* ============================================
   POP COMIC — Heavy black outlines, halftone dots,
   speech-bubble year, primary-colour banner
   ============================================ */
#timeline-wrapper[data-style="comic"] {
    --font-heading: 'Bangers', 'Bowlby One', Impact, sans-serif;
    --font-body: 'Comic Neue', 'Comic Sans MS', sans-serif;
    --font-heading-weight: 400;
    --font-heading-letter-spacing: 2px;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 12px;
    --card-shadow: 6px 6px 0 0 #000;
    --card-border: 4px solid #000;
    --header-bg: var(--accent-color);
}
#timeline-wrapper[data-style="comic"] .page,
body.gallery-mode #timeline-wrapper[data-style="comic"] .page {
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.18) 1px, transparent 1.5px) 0 0 / 5px 5px,
        #fffbe6 !important;
    border: 4px solid #000 !important;
    border-radius: 12px !important;
    box-shadow: 8px 8px 0 0 #000 !important;
}
#timeline-wrapper[data-style="comic"] .header-banner {
    background: var(--accent-color) !important;
    border-bottom: 4px solid #000;
    box-shadow: none !important;
    padding: 14mm 14mm 18mm;
}
#timeline-wrapper[data-style="comic"] .mathematician-name {
    color: #fff200 !important;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    text-shadow: 4px 4px 0 #000;
    font-size: calc(var(--name-size) * 1.2 * var(--title-scale, 1));
}
#timeline-wrapper[data-style="comic"] .image-container {
    border-radius: 50%;
    border: 6px solid #000;
    box-shadow: 6px 6px 0 0 #000;
    filter: saturate(1.15) contrast(1.05);
}
#timeline-wrapper[data-style="comic"] .mathematician-year {
    background: white;
    color: #000;
    font-family: var(--font-heading);
    border: 3px solid #000;
    border-radius: 50% 50% 50% 0;
    padding: 4mm 10mm;
    align-self: center;
    margin: 4mm auto 4mm;
    font-size: calc(var(--year-size) * 0.6);
    transform: rotate(-2deg);
    position: relative;
}
#timeline-wrapper[data-style="comic"] .mathematician-bio::before {
    background: #fffbe6 !important;
}
#timeline-wrapper[data-style="comic"] .mathematician-bio {
    color: #000;
    font-weight: 700;
    text-align: left;
    border: 3px solid #000;
    border-radius: 8px;
    margin: 5mm 8mm;
    background: white;
}
#timeline-wrapper[data-style="comic"] .mathematician-bio::before {
    background: white !important;
}

/* ============================================
   BOTANICAL — Herbarium aesthetic, cream paper, italic
   copperplate, decorative corner ornaments
   ============================================ */
#timeline-wrapper[data-style="botanical"] {
    --font-heading: 'Cormorant Garamond', 'Cinzel', Garamond, serif;
    --font-body: 'Cormorant Garamond', Garamond, serif;
    --font-heading-weight: 500;
    --font-heading-letter-spacing: 3px;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 0;
    --card-shadow: 0 4px 14px rgba(101, 84, 56, 0.18);
    --card-border: 1px solid #8b7355;
    --header-bg: #f5efd9;
}
#timeline-wrapper[data-style="botanical"] .page,
body.gallery-mode #timeline-wrapper[data-style="botanical"] .page {
    background:
        radial-gradient(ellipse at top left, rgba(139, 115, 85, 0.08), transparent 30%),
        radial-gradient(ellipse at bottom right, rgba(139, 115, 85, 0.08), transparent 30%),
        #faf3e0 !important;
    border: 1px solid #8b7355 !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 14px rgba(101, 84, 56, 0.18) !important;
}
#timeline-wrapper[data-style="botanical"] .header-banner {
    background: #faf3e0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #8b7355;
    padding: 12mm 15mm 14mm;
    min-height: calc(50mm * var(--banner-scale, 1));
    position: relative;
}
#timeline-wrapper[data-style="botanical"] .header-banner::after {
    content: '❦';
    position: absolute;
    bottom: 3mm; left: 50%;
    transform: translateX(-50%);
    color: #8b7355;
    font-size: 18px;
}
#timeline-wrapper[data-style="botanical"] .mathematician-name {
    color: #3d2f1f !important;
    text-shadow: none !important;
    font-style: italic;
    font-size: calc(var(--name-size) * 0.85 * var(--title-scale, 1));
}
#timeline-wrapper[data-style="botanical"] .image-container {
    border-radius: 50%;
    border: 3px double #8b7355;
    box-shadow: 0 6px 16px rgba(101, 84, 56, 0.25);
    background: #faf3e0;
    width: 85mm;
    height: 85mm;
}
#timeline-wrapper[data-style="botanical"] .mathematician-year {
    color: #8b7355;
    font-style: italic;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: calc(var(--year-size) * 0.45);
}
#timeline-wrapper[data-style="botanical"] .mathematician-bio::before {
    background: #faf3e0 !important;
}
#timeline-wrapper[data-style="botanical"] .mathematician-bio {
    color: #3d2f1f;
    text-align: justify;
    font-style: normal;
    line-height: 1.6;
    font-size: calc(var(--bio-size) * 1.05);
}

/* ============================================
   BRUTALIST — Raw concrete grey, massive flat black type,
   no decoration, generous negative space
   ============================================ */
#timeline-wrapper[data-style="brutalist"] {
    --font-heading: 'Inter', system-ui, sans-serif;
    --font-body: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    --font-heading-weight: 900;
    --font-heading-letter-spacing: -2px;
    --font-heading-text-transform: uppercase;
    --card-border-radius: 0;
    --card-shadow: none;
    --card-border: none;
    --header-bg: #d5d5d5;
}
#timeline-wrapper[data-style="brutalist"] .page,
body.gallery-mode #timeline-wrapper[data-style="brutalist"] .page {
    background: #d5d5d5 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
#timeline-wrapper[data-style="brutalist"] .header-banner {
    background: #d5d5d5 !important;
    box-shadow: none !important;
    padding: 16mm 18mm 6mm;
    min-height: calc(60mm * var(--banner-scale, 1));
    border-bottom: none;
}
#timeline-wrapper[data-style="brutalist"] .mathematician-name {
    color: #000 !important;
    text-shadow: none !important;
    font-size: calc(var(--name-size) * 1.5 * var(--title-scale, 1));
    line-height: 0.85;
    text-align: left;
    justify-content: flex-start;
    white-space: normal;
}
#timeline-wrapper[data-style="brutalist"] .image-container {
    border-radius: 0;
    border: none;
    box-shadow: none;
    filter: grayscale(1) contrast(1.2);
    width: 70mm;
    height: 70mm;
    margin: 0 0 0 auto;
}
#timeline-wrapper[data-style="brutalist"] .mathematician-year {
    color: #000;
    background: #000;
    color: #fff200;
    padding: 2px 8px;
    align-self: flex-start;
    margin: 4mm 18mm 4mm;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(var(--year-size) * 0.4);
    letter-spacing: 1px;
}
#timeline-wrapper[data-style="brutalist"] .mathematician-bio::before {
    background: #d5d5d5 !important;
}
#timeline-wrapper[data-style="brutalist"] .mathematician-bio {
    color: #000;
    text-align: left;
    font-size: calc(var(--bio-size) * 0.85);
    line-height: 1.6;
}

/* Per-preset thumbnail variants (continued) */
.style-thumbnail[data-style="bold"] {
    background: #111;
}
.style-thumbnail[data-style="bold"] .style-thumbnail-header {
    background: var(--accent-color);
    height: 28px;
    border-radius: 0;
}
.style-thumbnail[data-style="bold"] .style-thumbnail-line {
    background: #666;
}
.style-thumbnail[data-style="bold"] .style-thumbnail-label {
    color: white;
}
.style-thumbnail[data-style="travel"] {
    background: #f4ead5;
    border-color: #2c1810;
    border-style: double;
}
.style-thumbnail[data-style="travel"] .style-thumbnail-header {
    background: #d2691e;
    height: 18px;
    border-radius: 0;
}
.style-thumbnail[data-style="travel"] .style-thumbnail-label {
    font-style: italic;
    color: #2c1810;
}
.style-thumbnail[data-style="polaroid"] {
    background: #fdf6db;
}
.style-thumbnail[data-style="polaroid"] .style-thumbnail-header {
    background: transparent;
    border-bottom: 1px dashed rgba(0,0,0,0.3);
    height: 6px;
    border-radius: 0;
}
.style-thumbnail[data-style="polaroid"] .style-thumbnail-line {
    transform: rotate(-2deg);
    background: rgba(0,0,0,0.4);
}
.style-thumbnail[data-style="polaroid"] .style-thumbnail-label {
    font-family: 'Permanent Marker', cursive;
}
.style-thumbnail[data-style="newsprint"] {
    background: #f8f5ec;
}
.style-thumbnail[data-style="newsprint"] .style-thumbnail-header {
    background: transparent;
    border-bottom: 2px double #1a1a1a;
    border-radius: 0;
    height: 12px;
}
.style-thumbnail[data-style="newsprint"] .style-thumbnail-line {
    background: #1a1a1a;
    height: 2px;
}
.style-thumbnail[data-style="newsprint"] .style-thumbnail-label {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.style-thumbnail[data-style="risograph"] {
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.18) 1px, transparent 1.5px) 0 0 / 3px 3px,
        #f5e8d3;
    border-color: #1a1a1a;
}
.style-thumbnail[data-style="risograph"] .style-thumbnail-header {
    background: var(--accent-color);
    box-shadow: 2px 2px 0 0 #1a1a1a;
    height: 14px;
}
.style-thumbnail[data-style="comic"] {
    background:
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.2) 1px, transparent 1.5px) 0 0 / 4px 4px,
        #fffbe6;
    border: 2px solid #000;
}
.style-thumbnail[data-style="comic"] .style-thumbnail-header {
    background: var(--accent-color);
    border: 2px solid #000;
    border-radius: 0;
}
.style-thumbnail[data-style="comic"] .style-thumbnail-label {
    font-family: 'Bangers', Impact, sans-serif;
    letter-spacing: 1px;
}
.style-thumbnail[data-style="botanical"] {
    background: #faf3e0;
    border-color: #8b7355;
}
.style-thumbnail[data-style="botanical"] .style-thumbnail-header {
    background: transparent;
    border-bottom: 1px solid #8b7355;
    border-radius: 0;
    height: 10px;
}
.style-thumbnail[data-style="botanical"] .style-thumbnail-line {
    background: #8b7355;
}
.style-thumbnail[data-style="botanical"] .style-thumbnail-label {
    font-style: italic;
    color: #3d2f1f;
}
.style-thumbnail[data-style="brutalist"] {
    background: #d5d5d5;
    border-color: #000;
}
.style-thumbnail[data-style="brutalist"] .style-thumbnail-header {
    background: #000;
    border-radius: 0;
    height: 6px;
}
.style-thumbnail[data-style="brutalist"] .style-thumbnail-line {
    background: #000;
    height: 6px;
}
.style-thumbnail[data-style="brutalist"] .style-thumbnail-label {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

/* ============================================
   USER OVERRIDES — banner size + page colour
   These respond to slider/picker changes in the sidebar.
   `--user-page-bg` only applies when the user has set it;
   otherwise presets' own backgrounds win.
   ============================================ */
#timeline-wrapper .header-banner {
    min-height: calc(60mm * var(--banner-scale, 1));
}

#timeline-wrapper[style*="--user-page-bg"] .page {
    background: var(--user-page-bg) !important;
}
body.gallery-mode #timeline-wrapper[style*="--user-page-bg"] .page {
    background: var(--user-page-bg) !important;
}
#timeline-wrapper[style*="--user-bio-bg"] .mathematician-bio::before {
    background: var(--user-bio-bg) !important;
}
#timeline-wrapper[style*="--user-bio-bg"] .mathematician-bio {
    background-color: var(--user-bio-bg);
}
#timeline-wrapper[style*="--user-bio-fg"] .mathematician-bio,
#timeline-wrapper[style*="--user-bio-fg"] .mathematician-bio p {
    color: var(--user-bio-fg) !important;
}

/* Edit mode safety: contenteditable always uses stable font */
#timeline-wrapper [contenteditable="true"],
#timeline-wrapper [contenteditable=""] {
    font-family: 'Roboto', sans-serif !important;
}

/* ============================================
   GALLERY-MODE LAYOUT GUARD
   ============================================
   In gallery mode each .page is scaled to ~35% inside a fixed
   aspect-ratio box. Preset rules that change banner padding,
   min-height, image dimensions, transforms, or column layouts
   break that scaling. We override those layout shifts in
   gallery mode while keeping typography/colour/background.
   ============================================ */
body.gallery-mode #timeline-wrapper {
    /* Gallery cards are fixed aspect-ratio thumbnails — neutralise
       user banner-scale so the colored band never overflows them */
    --banner-scale: 1 !important;
}
body.gallery-mode #timeline-wrapper .header-banner {
    padding: 4mm 10mm 15mm !important;
    min-height: 0 !important;
}
/* Hard cap so banner can never push bio off the page in full view */
#timeline-wrapper .header-banner {
    max-height: 65% !important;
    flex-shrink: 1 !important;
}

/* HARD LOCK the page to A4. Nothing the user does in the sidebar
   (style preset, banner-scale, page colour, etc.) may grow it. */
#timeline-wrapper .page {
    height: var(--page-height) !important;
    max-height: var(--page-height) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
body.gallery-mode #timeline-wrapper .page {
    height: 0 !important;
    max-height: none !important;
    padding-bottom: var(--gallery-aspect-ratio) !important;
}
body.gallery-mode #timeline-wrapper .mathematician-bio {
    column-count: 1 !important;
    column-rule: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.gallery-mode #timeline-wrapper .mathematician-bio p {
    padding: 3mm 3mm 5mm 3mm !important;
}
body.gallery-mode #timeline-wrapper .mathematician-bio p::first-letter {
    font-size: inherit !important;
    float: none !important;
    margin: 0 !important;
    color: inherit !important;
}
body.gallery-mode #timeline-wrapper .image-container {
    width: var(--image-size) !important;
    height: var(--image-size) !important;
    transform: none !important;
    inset: auto !important;
    position: relative !important;
    opacity: 1 !important;
}
body.gallery-mode #timeline-wrapper .page {
    transform: none !important;
}
body.gallery-mode #timeline-wrapper .header-banner::after,
body.gallery-mode #timeline-wrapper .mathematician-name {
    transform: none !important;
}