/* ============================================================
   miris.bar — Conservatorium Mirabile
   A generative botanical conservatory in Baskerville and gold.
   ============================================================ */

/* ---- Palette tokens (exact hex values from DESIGN.md) ---- */
:root {
    --conservatorium-green: #0F2E1F;   /* dominant ink */
    --bottle-green:         #1B4332;   /* secondary structure */
    --burnished-gold:       #C9A35C;   /* the gold accent */
    --garnet-reserve:       #7A1F2B;   /* the rationed red */
    --cordovan-brown:       #3A2E20;   /* shadow hatching, frames */
    --vellum:               #F4ECDA;   /* dominant background */
    --calendered-paper:     #FBF6E9;   /* inner plate paper */

    --hairline-weight: 0.7px;
    --hairline-weight-bold: 1.1px;

    /* Z-pattern Renaissance proportion 7:5 */
    --z-ratio: 1.4;

    /* Typography */
    --serif: "Libre Baskerville", "Baskerville", "Times New Roman", serif;
    --serif-italic: "Cormorant Garamond", "Libre Baskerville", serif;

    --measure: 66ch;
    --leading-prose: 1.78;
    --leading-display: 1.06;
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    background: var(--vellum);
    color: var(--conservatorium-green);
    font-family: var(--serif);
    font-size: 18.5px;
    line-height: var(--leading-prose);
    letter-spacing: -0.003em;
    overflow-x: hidden;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p { margin: 0 0 1.2em 0; }
em { font-style: italic; }

/* ---- Typography conventions ---- */
.small-caps {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.latin {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.005em;
}

.roman-year {
    font-variant: small-caps;
    letter-spacing: 0.06em;
}

.manicule {
    color: var(--burnished-gold);
    font-size: 1.05em;
    margin-right: 0.4em;
}

/* ---- Links: underline-draw on hover only ---- */
a {
    color: inherit;
    text-decoration: none;
    position: relative;
    display: inline-block;
}
a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--garnet-reserve);
    transition: right 480ms cubic-bezier(0.45, 0, 0.55, 1);
}
a:hover::after { right: 0; }

/* Gold-underline draw for folio titles & specimen names & monogram */
.folio-title,
.frontispiece-title,
.plate-binomial,
.contact-link {
    position: relative;
    display: inline-block;
}
.folio-title::after,
.frontispiece-title::after,
.plate-binomial::after,
.contact-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 1px;
    background: var(--burnished-gold);
    transition: right 480ms cubic-bezier(0.45, 0, 0.55, 1);
}
.folio-title:hover::after,
.frontispiece-title:hover::after,
.plate-binomial:hover::after,
.contact-link:hover::after { right: 0; }

/* Override: contact-link uses garnet (body link convention) */
.contact-link::after { background: var(--garnet-reserve); }

/* ---- Folio architecture ---- */
.folios {
    width: 100%;
    margin: 0;
    padding: 0;
}

.folio {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: clamp(2.4rem, 5vw, 5.5rem) clamp(1.4rem, 5vw, 6rem);
    display: flex;
    flex-direction: column;
    background: var(--vellum);
}

.folio + .folio {
    border-top: none;
}

/* Folio rules — top & bottom hairline doubles, the thresholds */
.folio-rule {
    width: 100%;
    height: 6px;
    margin: 0;
}
.folio-rule-top    { margin-bottom: clamp(2rem, 4vw, 3.6rem); }
.folio-rule-bottom { margin-top: clamp(2rem, 4vw, 3.6rem); }

.hairline-double {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hairline {
    stroke: var(--conservatorium-green);
    fill: none;
}
.hairline-thick { stroke-width: 1.1px; }
.hairline-thin  { stroke-width: 0.5px; }

/* ---- The Z-grid ---- */
.folio-grid {
    position: relative;
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: clamp(2.4rem, 6vw, 5.4rem);
    padding: clamp(1rem, 2vw, 2.2rem) 0;
}

/* z corners (Z-pattern reading) */
.z-corner {
    position: relative;
    z-index: 2;
}

.z-tl { grid-column: 1; grid-row: 1; padding-right: clamp(0.4rem, 1.5vw, 1.6rem); }
.z-tr { grid-column: 2; grid-row: 1; justify-self: end; }
.z-bl { grid-column: 1; grid-row: 2; }
.z-br { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }

/* Diagonal Z hairline — drawn faint gold across the spread */
.z-diagonal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}
.diagonal-line {
    stroke: var(--burnished-gold);
    stroke-width: 0.6px;
    fill: none;
    opacity: 0.08;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 2200ms cubic-bezier(0.45, 0, 0.55, 1);
}
.folio.is-revealed .diagonal-line {
    stroke-dashoffset: 0;
}

/* ---- Reveal choreography ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1200ms cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal[data-revealed="true"] {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger by Z-position */
.reveal[data-reveal="tl"]{ transition-delay: 100ms; }
.reveal[data-reveal="tr"]{ transition-delay: 700ms; }
.reveal[data-reveal="bl"]{ transition-delay: 1400ms; }
.reveal[data-reveal="br"]{ transition-delay: 2000ms; }

/* ---- Frontispiece-title: the establishment name ---- */
.frontispiece-eyebrow,
.folio-eyebrow {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--bottle-green);
    font-size: 0.78rem;
    margin: 0 0 1.4rem 0;
    line-height: 1;
}

.frontispiece-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(3.2rem, 6vw, 5.6rem);
    line-height: var(--leading-display);
    letter-spacing: -0.01em;
    color: var(--conservatorium-green);
    margin: 0 0 1.4rem 0;
}
.frontispiece-title .title-line-1 { display: inline-block; }
.frontispiece-title .title-line-2 { display: inline-block; color: var(--conservatorium-green); }
.frontispiece-title .title-dot {
    color: var(--burnished-gold);
    margin: 0 0.06em;
    font-weight: 700;
}

.frontispiece-motto {
    font-style: italic;
    color: var(--bottle-green);
    font-size: 1.05rem;
    margin: 0 0 1.6rem 0;
    line-height: 1.4;
}
.frontispiece-motto em { font-style: italic; }

.frontispiece-subtitle {
    max-width: 30em;
    color: var(--conservatorium-green);
    font-size: 0.96rem;
    line-height: 1.7;
}

/* ---- Folio titles (II–VII) ---- */
.folio-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.8vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: -0.005em;
    color: var(--conservatorium-green);
    margin: 0 0 1.2rem 0;
}
.folio-subtitle {
    max-width: 30em;
    color: var(--conservatorium-green);
    font-size: 0.96rem;
    line-height: 1.7;
}
.folio-subtitle em { font-style: italic; color: var(--bottle-green); }
.folio-marginalia {
    margin-top: 1.2rem;
    font-size: 0.86rem;
    font-style: italic;
    color: var(--cordovan-brown);
    border-left: 0.5px solid var(--burnished-gold);
    padding-left: 0.9rem;
    max-width: 28em;
}

/* ---- Ordinal roundel ---- */
.ordinal-roundel {
    width: 56px;
    height: 56px;
    margin: 0 0 1.6rem 0;
}
.roundel { width: 100%; height: 100%; }
.roundel-rule {
    stroke: var(--burnished-gold);
    stroke-width: 0.8px;
    fill: none;
}
.roundel-numeral {
    font-family: var(--serif);
    font-weight: 700;
    font-variant: small-caps;
    font-size: 18px;
    fill: var(--burnished-gold);
    letter-spacing: 0.04em;
}

/* ---- Specimen plate frames ---- */
.specimen-frame {
    width: 100%;
    max-width: 380px;
}

.plate-mahogany {
    /* The "mahogany" double-rule */
    background: var(--cordovan-brown);
    padding: 4px;
    border-radius: 1px;
}
.plate-fillet {
    /* The brass fillet (gold inner hairline) plus the calendered paper interior */
    background: var(--calendered-paper);
    border: 1px solid var(--burnished-gold);
    padding: clamp(8px, 2vw, 18px);
    aspect-ratio: 360 / 460;
    position: relative;
    overflow: hidden;
}

.specimen-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- Plate caption ---- */
.plate-caption {
    margin: 1.1rem 0 0 0;
    text-align: right;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--cordovan-brown);
}
.plate-binomial {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 300;
    color: var(--conservatorium-green);
    font-size: 1.02rem;
    display: block;
    margin-bottom: 0.2em;
    letter-spacing: 0.005em;
}
.plate-meta {
    font-style: italic;
    color: var(--cordovan-brown);
    font-size: 0.78rem;
}
.plate-no {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--garnet-reserve);
    font-style: normal;
}

/* ---- Three-column descriptive prose (Z bottom-left of frontispiece) ---- */
.prose-columns {
    column-count: 3;
    column-gap: clamp(1rem, 2.5vw, 2.4rem);
    column-rule: 0.5px solid var(--burnished-gold);
    max-width: 860px;
    font-size: 0.92rem;
    line-height: 1.74;
    color: var(--conservatorium-green);
}
.prose-columns p { margin: 0 0 1em 0; break-inside: avoid; }

.drop-cap {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 3.6em;
    line-height: 0.85;
    float: left;
    padding: 0.05em 0.12em 0 0;
    color: var(--burnished-gold);
}

/* ---- Invitation to next folio ---- */
.invitation {
    max-width: 280px;
    text-align: right;
}
.invitation-text {
    font-style: italic;
    color: var(--bottle-green);
    font-size: 1rem;
    margin: 1rem 0 0.4rem 0;
}
.invitation-text .small-caps {
    font-style: normal;
    margin-right: 0.6em;
    color: var(--conservatorium-green);
}
.invitation-glyph {
    color: var(--burnished-gold);
    font-size: 1.4rem;
    margin: 0;
    line-height: 1;
}

/* ---- Fleurons ---- */
.fleuron {
    width: 80px;
    height: 32px;
    margin-left: auto;
}
.fleuron-path {
    stroke: var(--conservatorium-green);
    stroke-width: 0.7px;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1800ms cubic-bezier(0.45, 0, 0.55, 1);
}
.fleuron-dot {
    fill: var(--burnished-gold);
    opacity: 0;
    transition: opacity 600ms ease 1400ms;
}
.folio.is-revealed .fleuron-path {
    stroke-dashoffset: 0;
}
.folio.is-revealed .fleuron-dot {
    opacity: 1;
}

/* ---- Index list (Folio II) ---- */
.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 36em;
    counter-reset: idx;
}
.index-entry {
    display: grid;
    grid-template-columns: 1.2em 2.4em 1fr auto auto;
    align-items: baseline;
    gap: 0.6em;
    padding: 0.55em 0;
    border-bottom: 0.5px solid rgba(15, 46, 31, 0.18);
    font-size: 1rem;
    line-height: 1.4;
}
.index-entry:last-child { border-bottom: none; }
.index-numeral {
    font-variant: small-caps;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--garnet-reserve);
}
.index-link {
    font-style: italic;
    color: var(--conservatorium-green);
    font-size: 1.04rem;
}
.index-leader {
    border-bottom: 0.5px dotted var(--cordovan-brown);
    height: 0.6em;
    align-self: end;
}
.index-folio-no {
    font-variant: small-caps;
    font-weight: 400;
    color: var(--cordovan-brown);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

/* ---- Margin vine (Folio III) ---- */
.margin-vine {
    position: absolute;
    top: 7rem;
    left: clamp(0.4rem, 2vw, 2rem);
    width: clamp(48px, 5vw, 72px);
    height: calc(100% - 12rem);
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

/* ---- De Materia list ---- */
.materia-list {
    margin: 0;
    padding: 0;
    max-width: 38em;
    border-top: 0.5px solid var(--burnished-gold);
}
.materia-item {
    border-bottom: 0.5px solid rgba(15, 46, 31, 0.18);
    padding: 1.2em 0;
}
.materia-item dt {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--conservatorium-green);
    margin-bottom: 0.3em;
}
.materia-numeral {
    font-variant: small-caps;
    color: var(--garnet-reserve);
    margin-right: 0.5em;
    letter-spacing: 0.06em;
}
.materia-name { font-style: normal; }
.materia-item dd {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--bottle-green);
    font-style: italic;
}
.materia-item dd em { color: var(--cordovan-brown); }

/* ---- Methodus list ---- */
.methodus-h3 {
    margin: 0 0 1.4rem 0;
    font-size: 0.92rem;
    color: var(--bottle-green);
}
.methodus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: meth;
    max-width: 38em;
}
.methodus-list li {
    padding: 1em 0;
    border-bottom: 0.5px solid rgba(15, 46, 31, 0.18);
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--conservatorium-green);
    font-style: italic;
}
.methodus-list li:last-child { border-bottom: none; }
.methodus-num {
    font-variant: small-caps;
    font-weight: 700;
    color: var(--garnet-reserve);
    margin-right: 0.5em;
    letter-spacing: 0.06em;
    font-style: normal;
}
.methodus-name {
    font-weight: 700;
    color: var(--conservatorium-green);
    font-style: normal;
    margin-right: 0.4em;
}

/* ---- Hortus list ---- */
.hortus-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 40em;
    border-top: 0.5px solid var(--burnished-gold);
}
.hortus-entry {
    display: grid;
    grid-template-columns: 2.4em auto 1fr;
    column-gap: 1rem;
    align-items: baseline;
    padding: 0.95em 0;
    border-bottom: 0.5px solid rgba(15, 46, 31, 0.18);
    font-size: 0.95rem;
    line-height: 1.5;
}
.hortus-entry:last-child { border-bottom: none; }
.hortus-numeral {
    font-variant: small-caps;
    font-weight: 700;
    color: var(--garnet-reserve);
    letter-spacing: 0.06em;
}
.hortus-title-text {
    font-style: normal;
    color: var(--conservatorium-green);
    font-weight: 400;
}
.hortus-title-text em { font-style: italic; }
.hortus-gloss {
    color: var(--cordovan-brown);
    font-style: italic;
    font-size: 0.88rem;
}

/* ---- Verba (testimonials as marginalia colonnade) ---- */
.verba-colonnade {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 40em;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.6rem;
}
.verba-quote {
    border-left: 0.5px solid var(--burnished-gold);
    padding: 0.4em 0 0.4em 1.4em;
}
.quote-body {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--conservatorium-green);
    margin: 0 0 0.5em 0;
}
.quote-attribution {
    font-size: 0.82rem;
    color: var(--cordovan-brown);
    margin: 0;
    font-style: italic;
    letter-spacing: 0.02em;
}
.quote-attribution .small-caps {
    font-style: normal;
    color: var(--bottle-green);
}

/* ---- Running colophon (upper-right margin seal) ---- */
.running-colophon {
    position: fixed;
    top: clamp(1rem, 2.5vw, 2.4rem);
    right: clamp(1rem, 2.5vw, 2.4rem);
    width: 64px;
    height: 64px;
    z-index: 50;
    pointer-events: none;
    opacity: 0.85;
}
.running-seal { width: 100%; height: 100%; overflow: visible; }
.seal-leaf {
    fill: transparent;
    stroke: var(--bottle-green);
    stroke-width: 0.5px;
    transition: fill 1200ms cubic-bezier(0.45, 0, 0.55, 1);
}
.seal-leaf[data-tinted="true"] {
    fill: var(--garnet-reserve);
    fill-opacity: 0.55;
}
.seal-monogram .seal-mb {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 11px;
    fill: var(--burnished-gold);
    letter-spacing: 0.04em;
}
.seal-inner-rule {
    stroke: var(--burnished-gold);
    stroke-width: 0.6px;
}
.seal-outer-rule {
    stroke: var(--bottle-green);
    stroke-width: 0.4px;
    opacity: 0.5;
}

/* ---- Colophon block (Folio VII) ---- */
.colophon-seal-block {
    text-align: center;
    max-width: 360px;
    margin-left: 0;
}
.colophon-seal {
    width: 220px;
    height: 220px;
    overflow: visible;
}
.colophon-seal .seal-outer {
    stroke: var(--burnished-gold);
    stroke-width: 1px;
}
.colophon-seal .seal-inner {
    stroke: var(--burnished-gold);
    stroke-width: 0.5px;
    opacity: 0.55;
}
.colophon-leaf {
    fill: transparent;
    stroke: var(--bottle-green);
    stroke-width: 0.7px;
    transition: fill 1400ms cubic-bezier(0.45, 0, 0.55, 1);
}
.colophon-leaf[data-tinted="true"] {
    fill: var(--garnet-reserve);
    fill-opacity: 0.5;
}
.seal-large-mb {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 30px;
    fill: var(--burnished-gold);
    letter-spacing: 0.04em;
}
.colophon-line {
    margin-top: 1.4rem;
    font-size: 0.86rem;
    color: var(--cordovan-brown);
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.colophon-line .small-caps {
    color: var(--conservatorium-green);
    letter-spacing: 0.08em;
}

/* ---- Contact engraving ---- */
.contact-engraving {
    font-style: normal;
    margin-top: 1rem;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--cordovan-brown);
    text-align: right;
}
.contact-line { color: var(--conservatorium-green); margin: 0 0 0.2em 0; }
.contact-detail { margin: 0; }
.contact-detail em { color: var(--bottle-green); font-style: italic; }
.contact-link { color: var(--conservatorium-green); }

/* ---- Closing line ---- */
.closing-line {
    text-align: center;
    margin: 2.4rem 0 1.2rem 0;
    font-style: italic;
    color: var(--cordovan-brown);
    letter-spacing: 0.06em;
    font-size: 0.9rem;
}

/* ============================================================
   GENERATIVE SVG STYLING
   The L-system / Bezier engine writes paths into specimen-svg.
   These rules govern their rendering.
   ============================================================ */

.specimen-svg path,
.specimen-svg circle,
.specimen-svg ellipse {
    fill: none;
    stroke: var(--conservatorium-green);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.specimen-svg .stem {
    stroke-width: 1.1px;
}
.specimen-svg .branch {
    stroke-width: 0.85px;
}
.specimen-svg .twig {
    stroke-width: 0.6px;
}
.specimen-svg .leaf,
.specimen-svg .petal,
.specimen-svg .fruit {
    stroke-width: 0.8px;
}
.specimen-svg .stipple {
    stroke-width: 0.4px;
    stroke: var(--cordovan-brown);
    opacity: 0.78;
}
.specimen-svg .hatch {
    stroke-width: 0.45px;
    stroke: var(--cordovan-brown);
    opacity: 0.62;
}
.specimen-svg .label {
    stroke: none;
    fill: var(--conservatorium-green);
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.02em;
}

/* The single illuminated petal in Garnet Reserve */
.specimen-svg .illuminated {
    stroke: var(--garnet-reserve);
    stroke-width: 1px;
    fill: var(--garnet-reserve);
    fill-opacity: 0.18;
}

.specimen-svg .frame-rule {
    stroke: var(--burnished-gold);
    stroke-width: 0.5px;
    opacity: 0.7;
}

/* Drawn-on-scroll: dashoffset trick.
   The script sets stroke-dasharray and dashoffset = length on creation;
   when the folio reveals, dashoffset transitions to 0. */
.specimen-svg path,
.specimen-svg ellipse,
.specimen-svg circle {
    transition: stroke-dashoffset 7000ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* Margin vine */
.margin-vine path {
    fill: none;
    stroke: var(--bottle-green);
    stroke-width: 0.7px;
    stroke-linecap: round;
    transition: stroke-dashoffset 5000ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* ============================================================
   RESPONSIVE
   At narrow widths the Z collapses to a vertical column-stack,
   but folio architecture and the seal/diagonal remain.
   ============================================================ */

@media (max-width: 880px) {
    .folio-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .z-tl, .z-tr, .z-bl, .z-br {
        grid-column: 1;
        justify-self: start;
        text-align: left;
    }
    .z-tl { grid-row: 1; }
    .z-tr { grid-row: 2; justify-self: start; }
    .z-bl { grid-row: 3; }
    .z-br { grid-row: 4; }
    .z-diagonal { display: none; }
    .specimen-frame { max-width: 100%; }
    .prose-columns { column-count: 1; }
    .running-colophon { width: 48px; height: 48px; }
    .invitation { text-align: left; max-width: 100%; }
    .fleuron { margin-left: 0; }
    .plate-caption { text-align: left; }
}

@media (max-width: 540px) {
    body { font-size: 17px; }
    .frontispiece-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
    .folio-title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .folio { padding: 2.2rem 1.1rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 600ms !important;
    }
    .reveal { transform: none; }
    .specimen-svg path,
    .specimen-svg ellipse,
    .specimen-svg circle {
        stroke-dashoffset: 0 !important;
        transition: none !important;
    }
    .diagonal-line { stroke-dashoffset: 0 !important; }
    .fleuron-path { stroke-dashoffset: 0 !important; }
    .margin-vine path { stroke-dashoffset: 0 !important; }
}