/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                          ║
   ║   PATENT No. 2026-GSC-001                                                ║
   ║   SPECIFICATION FOR A VISUAL PRESENTATION ENGINE                         ║
   ║   of the VICTORIAN STEAMPUNK ENGINEERING VARIETY                         ║
   ║                                                                          ║
   ║   Filed before the Imperial Analytical Society                           ║
   ║   by the Bureau of Aetheric Computation                                  ║
   ║                                                                          ║
   ║   "From OpenClaw to Homunculus: A Journey in Brass & Ink"                ║
   ║                                                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER I: DECLARATION OF MATERIAL CONSTANTS
   "The Alchemist's Palette & the Engineer's Measures"
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cinzel+Decorative:wght@400;700;900&family=IM+Fell+English+SC&family=IM+Fell+English:ital@0;1&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    /* ─── THE PAPER STOCK ─── */
    --paper:            #f2e6d0;
    --paper-light:      #f7f0e3;
    --paper-dark:       #e8dcc6;
    --paper-edge:       #d4c5a9;

    /* ─── INKS & PIGMENTS ─── */
    --ink:              #1a1410;
    --ink-light:        #2d261e;
    --graphite:         #4a4440;
    --sepia:            #8b7355;
    --sepia-light:      #a08c6e;
    --sepia-dark:       #6b5a42;
    --burnt-umber:      #5e4b3c;
    --red-ink:          #8b2500;
    --red-ink-faded:    rgba(139, 37, 0, 0.6);

    /* ─── METALLURGICAL COMPOUNDS ─── */
    --brass:            #b8860b;
    --brass-light:      #d4a017;
    --brass-dark:       #8b6914;
    --brass-highlight:  #e8c547;
    --copper:           #a0522d;
    --copper-light:     #c47034;
    --copper-dark:      #7a3b1e;
    --iron:             #4a4a4a;
    --iron-dark:        #2d2d2d;
    --iron-light:       #6a6a6a;
    --patina:           #4a7c6f;
    --oxidised-copper:  #2e8b6e;

    /* ─── BRASS GRADIENT FORMULAE ─── */
    --brass-gradient:   linear-gradient(
        135deg,
        #d4a017 0%,
        #b8860b 25%,
        #e8c547 50%,
        #b8860b 75%,
        #8b6914 100%
    );
    --brass-gradient-h: linear-gradient(
        90deg,
        #8b6914 0%,
        #d4a017 15%,
        #e8c547 50%,
        #d4a017 85%,
        #8b6914 100%
    );
    --copper-gradient:  linear-gradient(
        135deg,
        #c47034 0%,
        #a0522d 30%,
        #d4895a 50%,
        #a0522d 70%,
        #7a3b1e 100%
    );
    --iron-gradient:    linear-gradient(
        180deg,
        #6a6a6a 0%,
        #4a4a4a 40%,
        #5a5a5a 60%,
        #3a3a3a 100%
    );

    /* ─── WORKSHOP TIMBER ─── */
    --wood-dark:        #1a1512;
    --wood-medium:      #2d2520;
    --wood-grain:       #352d26;

    /* ─── HATCHING & TEXTURE PATTERNS ─── */
    --hatch-spacing:    4px;
    --pencil-hatch:     repeating-linear-gradient(
        45deg,
        rgba(68, 68, 68, 0.04) 0px,
        rgba(68, 68, 68, 0.04) 1px,
        transparent 1px,
        transparent var(--hatch-spacing)
    );
    --cross-hatch:      repeating-linear-gradient(
        45deg,
        rgba(68, 68, 68, 0.03) 0px,
        rgba(68, 68, 68, 0.03) 1px,
        transparent 1px,
        transparent 4px
    ),
    repeating-linear-gradient(
        -45deg,
        rgba(68, 68, 68, 0.03) 0px,
        rgba(68, 68, 68, 0.03) 1px,
        transparent 1px,
        transparent 4px
    );
    --fine-hatch:       repeating-linear-gradient(
        45deg,
        rgba(68, 68, 68, 0.02) 0px,
        rgba(68, 68, 68, 0.02) 1px,
        transparent 1px,
        transparent 3px
    );

    /* ─── FOXING & AGEING EFFECTS ─── */
    --foxing-spots:
        radial-gradient(ellipse 3px 3px at 15% 25%, rgba(139, 115, 85, 0.15), transparent),
        radial-gradient(ellipse 4px 3px at 75% 15%, rgba(139, 115, 85, 0.12), transparent),
        radial-gradient(ellipse 2px 4px at 45% 80%, rgba(139, 115, 85, 0.10), transparent),
        radial-gradient(ellipse 5px 3px at 85% 65%, rgba(139, 115, 85, 0.13), transparent),
        radial-gradient(ellipse 3px 5px at 25% 55%, rgba(139, 115, 85, 0.08), transparent),
        radial-gradient(ellipse 2px 2px at 60% 40%, rgba(139, 115, 85, 0.14), transparent),
        radial-gradient(ellipse 4px 2px at 35% 10%, rgba(139, 115, 85, 0.09), transparent),
        radial-gradient(ellipse 3px 3px at 90% 90%, rgba(139, 115, 85, 0.11), transparent);

    /* ─── DIMENSIONAL CONSTANTS ─── */
    --border-inset:     16px;
    --corner-size:      80px;
    --ornament-opacity: 0.6;

    /* ─── ANIMATION VELOCITIES ─── */
    --gear-speed:       60s;
    --flutter-speed:    0.6s;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER II: THE WORKSHOP DESK
   "Specification for the Dark Timber Foundation upon which
    Patent Documents are Displayed for Examination"
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
    background:
        /* Wood grain texture via CSS */
        repeating-linear-gradient(
            92deg,
            rgba(45, 37, 32, 0.3) 0px,
            transparent 2px,
            transparent 8px,
            rgba(45, 37, 32, 0.2) 10px,
            transparent 11px,
            transparent 20px
        ),
        repeating-linear-gradient(
            88deg,
            rgba(53, 45, 38, 0.2) 0px,
            transparent 1px,
            transparent 15px,
            rgba(53, 45, 38, 0.15) 16px,
            transparent 17px,
            transparent 35px
        ),
        /* Base wood colour with vignette */
        radial-gradient(
            ellipse at center,
            #2d2520 0%,
            #1a1512 70%,
            #0f0d0b 100%
        );
    color: var(--ink);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER III: THE REVEAL.JS CHASSIS
   "Modifications to the Presentation Engine's Core Assembly"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-size: 22px;
    color: var(--ink);
    width: 1200px;
    height: 700px;
}

.reveal .controls {
    display: none;
}

/* Suppress default theme noise */
.reveal::before {
    display: none !important;
}

.reveal .slides {
    text-shadow: 0.5px 0.5px 0px rgba(0, 0, 0, 0.15);
}

.reveal .slides > section {
    padding: 30px 40px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.reveal .slides {
    width: 1200px;
    height: 700px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER IV: THE PATENT DOCUMENT
   "Specification for the Primary Slide Container, being a Faithful
    Reproduction of an Aged Engineering Patent Manuscript"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal section {
    /* ─── LAYERED PARCHMENT BACKGROUND ─── */
    background:
        /* Layer 1: Foxing spots (age marks) */
        var(--foxing-spots),
        /* Layer 2: Pencil cross-hatch shading */
        var(--fine-hatch),
        /* Layer 3: Aged parchment SVG texture */
        url("../images/parchment-aged.svg"),
        /* Layer 4: Subtle noise via repeating gradient */
        repeating-linear-gradient(
            0deg,
            rgba(139, 115, 85, 0.02) 0px,
            transparent 1px,
            transparent 3px
        ),
        /* Layer 5: Edge darkening / vignette */
        radial-gradient(
            ellipse at center,
            transparent 50%,
            rgba(139, 115, 85, 0.08) 80%,
            rgba(139, 115, 85, 0.15) 100%
        ),
        /* Layer 6: Warm paper base */
        linear-gradient(
            170deg,
            var(--paper-light) 0%,
            var(--paper) 40%,
            var(--paper-dark) 100%
        ) !important;

    /* ─── THE PATENT FRAME: TRIPLE RULED BORDER ─── */
    border: 3px solid var(--sepia-dark) !important;
    outline: 1px solid var(--sepia) !important;
    outline-offset: -10px !important;
    border-radius: 0 !important;

    /* ─── DEPTH & DIMENSIONALITY ─── */
    box-shadow:
        /* Inner shadow: aged paper depth */
        inset 0 0 80px rgba(139, 115, 85, 0.12),
        inset 0 0 20px rgba(0, 0, 0, 0.05),
        /* Middle border glow (brass tint) */
        0 0 0 1px var(--brass-dark),
        0 0 0 4px var(--wood-dark),
        0 0 0 5px var(--brass),
        /* Desk shadow */
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.3) !important;

    position: relative;
    overflow: hidden;
}

/* ─── INNER RULE LINE (Second Patent Frame Border) ─── */
.reveal section::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: var(--border-inset);
    left: var(--border-inset);
    right: var(--border-inset);
    bottom: var(--border-inset);
    border: 1px solid rgba(139, 115, 85, 0.4);
    pointer-events: none;
    z-index: 1;
}

/* ─── GEAR WATERMARK BACKGROUND ─── */
.reveal section::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background: url("../images/gear-watermark.svg") no-repeat center center;
    background-size: 60%;
    opacity: 0.03;
    transform: rotate(-8deg);
    pointer-events: none;
    z-index: 0;
    animation: gear-drift var(--gear-speed) linear infinite;
}

/* ─── CORNER ORNAMENTS (Applied via box-shadow on inner border) ─── */
/* Note: Corner SVG ornaments are applied on specific slide types below */


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER V: THE TYPOGRAPHIC FOUNDRY
   "Specification for Letter-Forms, being Cut in the Victorian Manner
    with Appropriate Embossment & Decorative Flourish"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── PRIMARY HEADINGS: CINZEL WITH ENGRAVED EFFECT ─── */
.reveal h1 {
    font-family: "Cinzel Decorative", "Cinzel", serif;
    font-weight: 700;
    font-size: 2em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    text-shadow:
        1px 1px 0 rgba(242, 230, 208, 0.8),
        -0.5px -0.5px 0 rgba(0, 0, 0, 0.15),
        0 0 10px rgba(184, 134, 11, 0.1);
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.reveal h1::after {
    content: "";
    display: block;
    width: 60%;
    height: 20px;
    margin: 10px auto 0;
    background: url("../images/ornate-divider.svg") no-repeat center center;
    background-size: contain;
    opacity: 0.5;
}

.reveal h2 {
    font-family: "Cinzel", serif;
    font-weight: 600;
    font-size: 1.4em;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-shadow:
        1px 1px 0 rgba(242, 230, 208, 0.7),
        -0.5px -0.5px 0 rgba(0, 0, 0, 0.1);
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.reveal h2::after {
    content: "";
    display: block;
    width: 50%;
    height: 14px;
    margin: 8px auto 0;
    background: url("../images/ornate-divider.svg") no-repeat center center;
    background-size: contain;
    opacity: 0.4;
}

.reveal h3 {
    font-family: "Cinzel", serif;
    font-weight: 500;
    font-size: 1.05em;
    letter-spacing: 0.04em;
    color: var(--ink-light);
    text-shadow:
        0.5px 0.5px 0 rgba(242, 230, 208, 0.5);
    border-bottom: 1px solid rgba(139, 115, 85, 0.3);
    padding-bottom: 6px;
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

/* ─── BODY TEXT ─── */
.reveal p {
    font-family: "Libre Baskerville", Georgia, serif;
    line-height: 1.6;
    color: var(--ink-light);
    position: relative;
    z-index: 2;
}

.reveal em {
    font-family: "Libre Baskerville", Georgia, serif;
    font-style: italic;
    color: var(--sepia-dark);
}

.reveal strong {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ─── TECHNICAL LABELS ─── */
.reveal .fig-label {
    font-family: "IM Fell English SC", serif;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    color: var(--sepia);
    text-align: center;
    display: block;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER VI: THE BRASS-FRAMED TECHNICAL PLATE
   "Specification for Inset Diagram Containers of Bevelled Brass,
    with Cross-Hatch Shading & Label Cartouche"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .plate,
.reveal .figure-card,
.reveal .comparison-column,
.reveal .vault-card,
.reveal .meter,
.reveal .signal-card,
.reveal .route-step {
    background:
        var(--cross-hatch),
        linear-gradient(
            175deg,
            rgba(242, 230, 208, 0.5) 0%,
            rgba(232, 220, 198, 0.6) 100%
        ) !important;
    border: 2px solid var(--sepia) !important;
    border-radius: 0 !important;
    padding: 18px 22px !important;
    position: relative;
    z-index: 2;

    /* Bevelled brass frame effect */
    box-shadow:
        /* Outer bevel: light top-left */
        inset 2px 2px 0 rgba(212, 160, 23, 0.3),
        /* Outer bevel: dark bottom-right */
        inset -2px -2px 0 rgba(107, 90, 66, 0.3),
        /* Inner depth */
        inset 0 0 15px rgba(139, 115, 85, 0.08),
        /* Outer shadow */
        1px 2px 4px rgba(0, 0, 0, 0.12) !important;
}

/* ─── PLATE LABEL CARTOUCHE ─── */
.reveal .plate > h3:first-child,
.reveal .figure-card > h3:first-child,
.reveal .comparison-column > h3:first-child {
    font-family: "IM Fell English SC", serif;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-dark);
    background:
        linear-gradient(
            180deg,
            rgba(184, 134, 11, 0.08) 0%,
            rgba(184, 134, 11, 0.03) 100%
        );
    border-bottom: 1px solid rgba(184, 134, 11, 0.3) !important;
    margin: -18px -22px 14px -22px !important;
    padding: 8px 22px !important;
    text-shadow: 0.5px 0.5px 0 rgba(255, 255, 255, 0.4);
}

/* ─── PLATE INNER BORDER ─── */
.reveal .plate::before,
.reveal .figure-card::before,
.reveal .comparison-column::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid rgba(139, 115, 85, 0.2);
    pointer-events: none;
}

/* ─── PLATE SIDE-BY-SIDE LAYOUT ─── */
.reveal .plate-side-by-side {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 18px !important;
}

.reveal .plate-side-by-side .plate-text {
    flex: 1;
}

.reveal .plate-side-by-side .plate-text h3 {
    margin-bottom: 6px;
    padding-bottom: 4px;
}

.reveal .plate-side-by-side .plate-text p {
    margin: 0;
    line-height: 1.4;
    font-size: 0.85em;
}

.reveal .plate-side-by-side .plate-image {
    width: 35%;
    max-width: 220px;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER VII: THE RUBBER STAMP
   "Specification for the Patent Office Certification Stamp,
    being Impressed in Sepia Ink at a Slight Inclination"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .stamp {
    font-family: "IM Fell English SC", serif;
    font-size: 0.8em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-ink-faded);
    border: 3px double var(--red-ink-faded);
    padding: 6px 18px;
    display: inline-block;
    transform: rotate(-2deg);
    position: relative;
    z-index: 2;
    margin: 8px 0;

    /* Rubber stamp roughness effect */
    text-shadow:
        0 0 1px rgba(139, 37, 0, 0.3),
        1px 0 2px rgba(139, 37, 0, 0.1);
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.03' numOctaves='4' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.5'/%3E%3C/filter%3E%3C/svg%3E#r");

    /* Faded ink background */
    background: rgba(139, 37, 0, 0.03);
    box-shadow:
        inset 0 0 10px rgba(139, 37, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.08);
}

.reveal .stamp::before {
    content: "⚙ ";
    font-size: 0.9em;
}

.reveal .stamp::after {
    content: " ⚙";
    font-size: 0.9em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER VIII: THE WATERMARK
   "Specification for the Semi-Transparent Foundry Mark,
    applied Diagonally across the Patent Document"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .watermark {
    font-family: "Cinzel", serif;
    font-size: 1.4em;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(139, 115, 85, 0.12);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    text-shadow: none;
    user-select: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER IX: THE FOLIO NUMBER
   "Specification for Page Numbering in the Victorian Patent Manner,
    with Decorative Dash Adornments"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .folio {
    display: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER X: THE TITLE SLIDE
   "Specification for the Frontispiece, being the Most Ornate Document
    in the Patent Filing, with Cartouche & Enlarged Corner Ornaments"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal section.title-slide {
    /* Extra ornate background */
    background:
        /* Title cartouche frame */
        url("../images/title-cartouche.svg") no-repeat center 10%,
        /* Corner ornaments */
        url("../images/gear-corner-tl.svg") no-repeat top left,
        url("../images/gear-corner-br.svg") no-repeat bottom right,
        /* Foxing */
        var(--foxing-spots),
        /* Parchment */
        url("../images/parchment-aged.svg"),
        /* Warm base */
        radial-gradient(
            ellipse at center,
            var(--paper-light) 0%,
            var(--paper) 50%,
            var(--paper-dark) 100%
        ) !important;
    background-size:
        50% auto,
        var(--corner-size) var(--corner-size),
        var(--corner-size) var(--corner-size),
        auto, auto, auto !important;

    /* More dramatic border */
    border: 4px solid var(--sepia-dark) !important;
    box-shadow:
        inset 0 0 100px rgba(139, 115, 85, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.06),
        0 0 0 2px var(--brass),
        0 0 0 6px var(--wood-dark),
        0 0 0 8px var(--brass-dark),
        0 10px 40px rgba(0, 0, 0, 0.6),
        0 25px 70px rgba(0, 0, 0, 0.35) !important;
}

.reveal section.title-slide::before {
    /* Wider inner border for title */
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    border: 2px solid rgba(139, 115, 85, 0.35) !important;
    box-shadow:
        inset 2px 2px 0 rgba(139, 115, 85, 0.1),
        inset -2px -2px 0 rgba(139, 115, 85, 0.1);
}

.reveal section.title-slide::after {
    /* Larger, more visible gear watermark for title */
    background-size: 80% !important;
    opacity: 0.04 !important;
    transform: rotate(-12deg) !important;
}

.reveal section.title-slide h1 {
    font-size: 2.2em;
    margin-top: 40px;
    letter-spacing: 0.1em;
    text-shadow:
        2px 2px 0 rgba(242, 230, 208, 0.9),
        -1px -1px 0 rgba(0, 0, 0, 0.2),
        0 0 20px rgba(184, 134, 11, 0.15);
}

.reveal section.title-slide h2 {
    font-family: "Cinzel", serif;
    font-size: 1.2em;
    color: var(--sepia-dark);
    letter-spacing: 0.08em;
    font-weight: 400;
}

.reveal section.title-slide p {
    font-size: 0.85em;
}

.reveal section.title-slide .watermark {
    font-size: 2em;
    color: rgba(139, 115, 85, 0.08);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XI: THE HIGHLIGHT STENCIL
   "Specification for Brass-Stencilled Emphasis Markings,
    applied with a Gradient Background & Slight Rotation"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .highlight {
    display: inline-block;
    color: var(--ink);
    background:
        linear-gradient(
            95deg,
            rgba(184, 134, 11, 0.08) 0%,
            rgba(184, 134, 11, 0.15) 50%,
            rgba(184, 134, 11, 0.08) 100%
        );
    padding: 4px 12px;
    margin: 6px 0;
    transform: rotate(-0.3deg);
    border-left: 3px solid var(--brass);
    border-right: 1px solid rgba(184, 134, 11, 0.3);
    position: relative;
    z-index: 2;
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(184, 134, 11, 0.2),
        inset 0 -1px 0 rgba(184, 134, 11, 0.2);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XII: THE SCHEMATIC DRAWING
   "Specification for Blueprint-Style Technical Diagram Areas,
    with Engineering Grid Background & Figure Labels"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .schematic {
    background:
        url("../images/blueprint-grid.svg"),
        linear-gradient(
            180deg,
            rgba(230, 240, 245, 0.3) 0%,
            rgba(220, 230, 238, 0.4) 100%
        ) !important;
    border: 2px solid var(--iron);
    padding: 20px;
    position: relative;
    z-index: 2;
    box-shadow:
        inset 2px 2px 0 rgba(74, 74, 74, 0.15),
        inset -2px -2px 0 rgba(74, 74, 74, 0.15),
        inset 0 0 20px rgba(0, 0, 0, 0.05),
        2px 3px 8px rgba(0, 0, 0, 0.15);
    margin: 10px 0;
}

.reveal .schematic::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(74, 74, 74, 0.25);
    pointer-events: none;
}

.reveal .drawing-canvas {
    text-align: center;
    padding: 10px;
    position: relative;
    z-index: 2;
}

.reveal .drawing-canvas img {
    filter: sepia(0.15) contrast(1.1);
    max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XIII: THE HANDWRITTEN LEDGER
   "Specification for Code Blocks, being Styled as Entries in
    a Ruled Ledger Book with Red Margin Line"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal pre {
    background:
        /* Ruled lines */
        repeating-linear-gradient(
            180deg,
            transparent 0px,
            transparent 27px,
            rgba(139, 115, 85, 0.2) 27px,
            rgba(139, 115, 85, 0.2) 28px
        ),
        /* Paper */
        linear-gradient(
            180deg,
            rgba(242, 233, 217, 0.95),
            rgba(242, 233, 217, 0.95)
        ) !important;
    border: 1px solid var(--sepia) !important;
    /* Red margin line */
    border-left: 3px solid var(--red-ink-faded) !important;
    border-radius: 0 !important;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.04),
        2px 2px 6px rgba(0, 0, 0, 0.1) !important;
    padding: 14px 14px 14px 20px !important;
    position: relative;
    z-index: 2;
    margin: 12px 0;
}

/* Second margin line (like an old ledger) */
.reveal pre::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    width: 1px;
    height: 100%;
    background: rgba(139, 37, 0, 0.15);
}

.reveal pre code {
    font-family: "IM Fell English", "Courier New", monospace !important;
    font-size: 0.95em !important;
    color: var(--graphite) !important;
    line-height: 28px !important;
    background: none !important;
    padding-left: 16px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XIV: THE INVENTORY LIST
   "Specification for Ordered & Unordered Lists, with Gear-Cog
    Markers Replacing Common Bullet Points"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal ul {
    list-style: none;
    padding-left: 1.5em;
    position: relative;
    z-index: 2;
}

.reveal ul li {
    position: relative;
    padding-left: 0.3em;
    margin-bottom: 0.4em;
    line-height: 1.5;
}

.reveal ul li::before {
    content: "⚙";
    position: absolute;
    left: -1.3em;
    color: var(--brass);
    font-size: 0.75em;
    top: 0.15em;
    opacity: 0.7;
}

/* Nested lists: smaller cog */
.reveal ul ul li::before {
    content: "◦";
    color: var(--sepia);
    font-size: 0.9em;
}

.reveal ol {
    position: relative;
    z-index: 2;
    padding-left: 1.5em;
}

.reveal ol li {
    margin-bottom: 0.4em;
    line-height: 1.5;
}

.reveal ol li::marker {
    font-family: "IM Fell English SC", serif;
    color: var(--brass-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XV: THE PRESSURE GAUGE
   "Specification for Progress Bar & Meter Elements, being Fashioned
    as Brass Pipes & Steam Pressure Indicators"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── REVEAL.JS PROGRESS BAR AS BRASS PIPE ─── */
.reveal .progress {
    height: 6px !important;
    background:
        linear-gradient(
            180deg,
            #3a3a3a 0%,
            #2a2a2a 40%,
            #3a3a3a 100%
        ) !important;
    border-top: 1px solid #555;
}

.reveal .progress span {
    background: var(--brass-gradient-h) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 0 8px rgba(184, 134, 11, 0.3) !important;
}

/* ─── IN-SLIDE METERS ─── */
.reveal .meter {
    height: auto;
    padding: 12px 18px !important;
}

.reveal .meter .meter-fill,
.reveal .meter.good .meter-fill {
    background: var(--brass-gradient-h) !important;
    height: 8px;
    border-radius: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    position: relative;
}

.reveal .meter.bad .meter-fill {
    background: var(--copper-gradient) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XVI: IMAGES & ETCHINGS
   "Specification for Illustrative Figures, treated with the
    Sepia Wash & Multiply Blend of a Copper Plate Engraving"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .hero-emblem,
.reveal .etched-figure {
    filter: grayscale(0.8) contrast(1.15) sepia(0.25) brightness(1.05);
    mix-blend-mode: multiply;
    position: relative;
    z-index: 2;
}

.reveal img {
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XVII: ROUTE ARROWS & FLOW CONNECTORS
   "Specification for Process Flow Indicators, in the Manner
    of Hand-Inked Engineering Diagrams"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .route-arrow {
    font-family: "Cinzel", serif;
    color: var(--brass-dark);
    font-size: 1.4em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XVIII: THE KICKER LINE
   "Specification for Introductory Caption Text, in the
    Victorian Manner of an Engineering Patent Sub-Heading"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .kicker {
    font-family: "IM Fell English SC", serif;
    font-size: 0.75em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-dark);
    position: relative;
    z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XIX: THE TWO-COLUMN LAYOUT
   "Specification for Side-by-Side Comparison Apparatus"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .two-column {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.reveal .two-column > * {
    flex: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XX: THE SLIDE NUMBER CARTOUCHE
   "Specification for Slide Numbering, Positioned within a
    Decorative Frame of Roman Numeral Character"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .slide-number {
    font-family: "IM Fell English SC", serif !important;
    font-size: 0.65em !important;
    letter-spacing: 0.1em;
    color: rgba(139, 115, 85, 0.45) !important;
    background: transparent !important;
    border: none !important;
    padding: 3px 10px !important;
    bottom: 22px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-shadow: none !important;
}

.reveal .slide-number::before {
    content: "— ";
}

.reveal .slide-number::after {
    content: " —";
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXI: CLOCKWORK ANIMATIONS
   "Specification for Subtle Mechanical Movements, being
    the Rotation of Gears & the Flutter of Patent Documents"
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── GEAR DRIFT: Slow background rotation ─── */
@keyframes gear-drift {
    0%   { transform: rotate(-8deg); }
    50%  { transform: rotate(-5deg); }
    100% { transform: rotate(-8deg); }
}

/* ─── PAPER FLUTTER: Slide entry animation ─── */
@keyframes paper-flutter {
    0% {
        opacity: 0;
        transform: perspective(800px) rotateY(-1deg) translateY(5px);
    }
    60% {
        opacity: 1;
        transform: perspective(800px) rotateY(0.3deg) translateY(-1px);
    }
    100% {
        opacity: 1;
        transform: perspective(800px) rotateY(0deg) translateY(0);
    }
}

/* ─── STAMP PRESS: For stamp elements ─── */
@keyframes stamp-press {
    0% {
        opacity: 0;
        transform: rotate(-2deg) scale(1.3);
    }
    70% {
        opacity: 0.9;
        transform: rotate(-2deg) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: rotate(-2deg) scale(1);
    }
}

/* Apply flutter to present slides */
.reveal .slides section.present {
    animation: paper-flutter var(--flutter-speed) ease-out;
}

/* Apply stamp press to stamps on visible slides */
.reveal section.present .stamp {
    animation: stamp-press 0.5s ease-out;
}

/* ─── GEAR COG ROTATION (for decorative use) ─── */
@keyframes gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes gear-spin-reverse {
    from { transform: rotate(360deg); }
    to   { transform: rotate(0deg); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXII: SPECIAL TREATMENTS FOR THE VAULT CARD
   "Specification for Security Compartment Display Elements"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .vault-card {
    border-color: var(--iron) !important;
    box-shadow:
        inset 2px 2px 0 rgba(74, 74, 74, 0.2),
        inset -2px -2px 0 rgba(74, 74, 74, 0.2),
        inset 0 0 20px rgba(0, 0, 0, 0.06),
        2px 3px 8px rgba(0, 0, 0, 0.15) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXIII: THE SIGNAL CARD
   "Specification for Status & Warning Indicator Panels"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .signal-card {
    border-left: 4px solid var(--copper) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXIV: THE ROUTE STEP
   "Specification for Process Flow Step Indicators, resembling
    Brass Plaques Riveted to the Patent Document"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal .route-step {
    text-align: center;
    padding: 14px 18px !important;
    background:
        var(--pencil-hatch),
        linear-gradient(
            180deg,
            rgba(184, 134, 11, 0.05) 0%,
            rgba(184, 134, 11, 0.02) 100%
        ) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXV: RESPONSIVE ADJUSTMENTS
   "Specification for Accommodating Various Viewing Apertures"
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (max-width: 900px) {
    :root {
        --corner-size: 50px;
        --border-inset: 10px;
    }

    .reveal { font-size: 18px; }
    .reveal h1 { font-size: 1.6em; }
    .reveal h2 { font-size: 1.2em; }

    .reveal .two-column {
        flex-direction: column;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXVI: PRINT SPECIFICATION
   "For the Production of Hard-Copy Patent Filings"
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
    html, body {
        background: white !important;
    }

    .reveal section {
        box-shadow: none !important;
        border: 2px solid #333 !important;
        page-break-inside: avoid;
    }

    .reveal section::after {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXVII: LINK STYLING
   "Specification for Hypertext References in the Brass Ink"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal a {
    color: var(--brass-dark);
    text-decoration: none;
    border-bottom: 1px dotted var(--brass);
    transition: color 0.3s, border-color 0.3s;
    position: relative;
    z-index: 2;
}

.reveal a:hover {
    color: var(--brass);
    border-bottom-style: solid;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXVIII: BLOCKQUOTE STYLING
   "Specification for Quoted Passages, adorned with
    Victorian Flourish Decoration"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal blockquote {
    background:
        url("../images/victorian-flourish.svg") no-repeat top left,
        rgba(184, 134, 11, 0.03);
    background-size: 30px auto;
    border-left: 3px solid var(--brass);
    padding: 15px 20px 15px 45px;
    font-style: italic;
    color: var(--sepia-dark);
    position: relative;
    z-index: 2;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.03);
    margin: 15px 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXIX: TABLE STYLING
   "Specification for Tabulated Data, in the Manner of
    an Engineering Specification Ledger"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal table {
    border-collapse: collapse;
    width: 100%;
    position: relative;
    z-index: 2;
    margin: 15px 0;
}

.reveal table th {
    font-family: "IM Fell English SC", serif;
    letter-spacing: 0.05em;
    background: linear-gradient(
        180deg,
        rgba(184, 134, 11, 0.1) 0%,
        rgba(184, 134, 11, 0.05) 100%
    );
    border-bottom: 2px solid var(--sepia);
    padding: 8px 12px;
    text-align: left;
    color: var(--ink);
}

.reveal table td {
    border-bottom: 1px solid rgba(139, 115, 85, 0.2);
    padding: 6px 12px;
    color: var(--ink-light);
}

.reveal table tr:hover td {
    background: rgba(184, 134, 11, 0.03);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CHAPTER XXX: RIVET LINE DECORATION
   "Specification for Horizontal Rule Elements, fashioned
    as Brass Rivet Strips between Sections"
   ═══════════════════════════════════════════════════════════════════════════ */

.reveal hr {
    border: none;
    height: 12px;
    background: url("../images/rivet-line-h.svg") repeat-x center center;
    background-size: auto 100%;
    opacity: 0.4;
    margin: 20px 0;
    position: relative;
    z-index: 2;
}


/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                          ║
   ║   END OF SPECIFICATION                                                   ║
   ║                                                                          ║
   ║   Certified by the Bureau of Aetheric Computation                        ║
   ║   Sealed this day under the authority of the                             ║
   ║   Imperial Analytical Society                                            ║
   ║                                                                          ║
   ║   "Mind the steam."                                                      ║
   ║                                                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */