/* holos.works — opulent botanical dashboard
   Palette: #0e1428 / #0a1f1a / #1a3a5c / #f0d48a / #2ecc71 / #c0392b / #e8dcc8 / #4ecdc4 / #9b59b6 / #8b5e3c
*/

:root {
    --lapis: #0e1428;
    --obsidian: #0a1f1a;
    --sapphire: #1a3a5c;
    --gold: #f0d48a;
    --emerald: #2ecc71;
    --ruby: #c0392b;
    --parchment: #e8dcc8;
    --teal: #4ecdc4;
    --amethyst: #9b59b6;
    --copper: #8b5e3c;
    --midnight-text: #1a1a2e;

    --font-display: 'Bitter', 'Roboto Slab', serif;
    --font-body: 'Alegreya', 'Lora', Georgia, serif;
    --font-mono: 'Roboto Slab', 'Bitter', monospace;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--lapis);
    color: var(--parchment);
    font-family: var(--font-body);
    font-size: 16px;
    overflow-x: hidden;
    min-height: 100vh;
}

body {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(26, 58, 92, 0.25), transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(10, 31, 26, 0.45), transparent 60%),
        var(--lapis);
    position: relative;
}

/* Very subtle engraved paper texture via tiled SVG noise */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(240, 212, 138, 0.015) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(240, 212, 138, 0.012) 0 1px, transparent 1px 3px);
    pointer-events: none;
    z-index: 1;
}

/* ==============================================
   BUBBLE LAYER
   ============================================== */
.bubble-layer {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse at 30% 30%,
        rgba(155, 89, 182, 0.25),
        rgba(78, 205, 196, 0.12) 50%,
        rgba(240, 212, 138, 0.05) 75%,
        transparent 100%);
    border: 1px solid rgba(240, 212, 138, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        inset 0 0 20px rgba(155, 89, 182, 0.15),
        inset -8px -8px 16px rgba(78, 205, 196, 0.08),
        0 0 20px rgba(155, 89, 182, 0.08);
    animation: float-bubble var(--dur, 8s) ease-in-out infinite;
}

.bubble svg {
    position: absolute;
    inset: 20%;
    width: 60%;
    height: 60%;
    opacity: 0.55;
}

.bubble svg path,
.bubble svg circle,
.bubble svg ellipse {
    stroke: var(--emerald);
    stroke-width: 1;
    fill: none;
    stroke-linecap: round;
}

@keyframes float-bubble {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(10px, -15px); }
    50%  { transform: translate(-8px, -22px); }
    75%  { transform: translate(6px, -10px); }
    100% { transform: translate(0, 0); }
}

/* ==============================================
   HERO / GAUGE
   ============================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
    z-index: 2;
}

.gauge-stage {
    position: relative;
    width: min(70vmin, 620px);
    height: min(70vmin, 620px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero.is-ready .gauge-stage {
    opacity: 1;
}

.gauge-dial {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        conic-gradient(
            from 180deg,
            rgba(46, 204, 113, 0.25) 0deg,
            rgba(46, 204, 113, 0.45) 60deg,
            rgba(26, 58, 92, 0.85) 120deg,
            rgba(26, 58, 92, 0.85) 180deg,
            rgba(155, 89, 182, 0.35) 240deg,
            rgba(240, 212, 138, 0.3) 300deg,
            rgba(46, 204, 113, 0.25) 360deg
        );
    box-shadow:
        0 0 0 4px var(--copper),
        0 0 0 6px rgba(240, 212, 138, 0.3),
        0 0 0 12px var(--lapis),
        0 0 0 14px var(--copper),
        inset 0 0 40px rgba(10, 20, 40, 0.8),
        0 30px 80px rgba(0, 0, 0, 0.6);
}

.gauge-face {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1a3a5c 0%, #0e1428 65%, #040812 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.7),
        inset 0 4px 18px rgba(240, 212, 138, 0.08);
}

.gauge-ticks {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    pointer-events: none;
}

.gauge-ticks::before,
.gauge-ticks::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* CSS-drawn tick marks via repeating conic */
.gauge-ticks::before {
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 11deg,
            rgba(240, 212, 138, 0.7) 11deg 12deg
        );
    -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%, #000 49%, transparent 50%);
            mask: radial-gradient(circle, transparent 45%, #000 46%, #000 49%, transparent 50%);
}

.gauge-ticks::after {
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 59deg,
            var(--gold) 59deg 60deg
        );
    -webkit-mask: radial-gradient(circle, transparent 41%, #000 42%, #000 50%, transparent 51%);
            mask: radial-gradient(circle, transparent 41%, #000 42%, #000 50%, transparent 51%);
    opacity: 0.9;
}

.fern-svg {
    position: absolute;
    inset: 18%;
    width: 64%;
    height: 64%;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.45));
}

.gauge-needle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 38%;
    background: linear-gradient(to top, rgba(192, 57, 43, 0.3) 0%, var(--ruby) 40%, #ff6b5c 100%);
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(-120deg);
    border-radius: 2px 2px 0 0;
    z-index: 3;
    box-shadow: 0 0 6px rgba(192, 57, 43, 0.6);
    transition: transform 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}

.gauge-needle.is-spun {
    transform: translate(-50%, -100%) rotate(117deg);
}

.gauge-needle::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 14px solid var(--ruby);
    filter: drop-shadow(0 0 4px rgba(192, 57, 43, 0.8));
}

.gauge-needle:hover {
    animation: needle-wobble 0.6s ease-in-out;
    filter: drop-shadow(0 0 8px rgba(192, 57, 43, 0.8));
}

@keyframes needle-wobble {
    0%, 100% { transform: translate(-50%, -100%) rotate(117deg); }
    25%      { transform: translate(-50%, -100%) rotate(120deg); }
    75%      { transform: translate(-50%, -100%) rotate(114deg); }
}

.gauge-cap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6%;
    height: 6%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold), var(--copper) 70%, #3a2818 100%);
    transform: translate(-50%, -50%);
    z-index: 4;
    box-shadow: 0 0 0 2px var(--copper), 0 2px 6px rgba(0,0,0,0.6);
}

/* Hero label */
.hero-label {
    margin-top: 2.5rem;
    text-align: center;
    position: relative;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1;
    display: inline-flex;
    gap: 0.02em;
}

.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.6s ease;
}

.hero-title .letter.is-in {
    opacity: 1;
    transform: translateY(0);
}

.hero-sub {
    position: relative;
    margin-top: 1rem;
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--parchment);
    letter-spacing: 0.02em;
    padding-bottom: 1.4rem;
    display: inline-block;
}

.underline-svg {
    display: block;
    width: 100%;
    height: 14px;
    overflow: visible;
    margin-top: 0.4rem;
}

.hero-sub .underline-svg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.underline-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 0.8s ease-out;
}

.is-draw .underline-path,
.underline-path.is-draw {
    stroke-dashoffset: 0;
}

.hero-readout {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    font-family: var(--font-mono);
    font-weight: 300;
    letter-spacing: 0.08em;
    font-size: clamp(0.8rem, 1.1vw, 1rem);
    color: var(--teal);
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(139, 94, 60, 0.5);
    background: rgba(10, 20, 40, 0.55);
}

.hero-readout .readout-label {
    color: var(--copper);
    text-transform: uppercase;
    font-size: 0.85em;
}

.hero-readout .readout-value {
    color: var(--teal);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: 1.5em;
    letter-spacing: 0.06em;
}

.hero-readout .readout-unit {
    color: var(--gold);
}

/* ==============================================
   DASHBOARD GRID
   ============================================== */
.dashboard {
    position: relative;
    z-index: 2;
    padding: 2rem clamp(1rem, 3vw, 3rem) 4rem;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-rows: minmax(110px, auto);
    gap: 1.2rem;
    max-width: 1600px;
    margin: 0 auto;
}

.panel {
    position: relative;
    background: linear-gradient(180deg, rgba(26, 58, 92, 0.45) 0%, rgba(14, 20, 40, 0.7) 100%);
    border: 2px solid var(--sapphire);
    padding: 24px;
    opacity: 0;
    filter: brightness(0.3);
    transition: opacity 0.6s ease, filter 0.8s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow:
        inset 0 2px 12px rgba(10, 20, 40, 0.3),
        0 4px 18px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.panel.is-visible {
    opacity: 1;
    filter: brightness(1);
}

.panel:hover {
    border-color: var(--gold);
    box-shadow:
        inset 0 0 20px rgba(240, 212, 138, 0.08),
        inset 0 2px 12px rgba(10, 20, 40, 0.3),
        0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Panel grid placement — desktop (16-col) */
.panel-primary {
    grid-column: 1 / span 9;
    grid-row: 1 / span 3;
    /* subtle overflow — outgrowing the cell */
    margin-right: -8px;
}

.panel-spec {
    grid-column: 10 / span 7;
    grid-row: span 1;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1rem;
    align-items: center;
}

.spec-1 { grid-row: 1 / span 1; }
.spec-2 { grid-row: 2 / span 1; }
.spec-3 { grid-row: 3 / span 1; margin-bottom: -12px; }

.panel-map {
    grid-column: 1 / span 5;
    grid-row: 4 / span 3;
}

.panel-data {
    grid-column: 6 / span 5;
    grid-row: 4 / span 3;
    margin-left: -6px;
}

.panel-tall {
    grid-column: 11 / span 6;
    grid-row: 4 / span 5;
}

.panel-colo {
    grid-column: 1 / span 10;
    grid-row: 7 / span 2;
}

/* Corner ornaments */
.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.panel:hover .corner { opacity: 1; }

.c-tl { top: 4px; left: 4px; border-top: 2px solid var(--copper); border-left: 2px solid var(--copper); }
.c-tr { top: 4px; right: 4px; border-top: 2px solid var(--copper); border-right: 2px solid var(--copper); }
.c-bl { bottom: 4px; left: 4px; border-bottom: 2px solid var(--copper); border-left: 2px solid var(--copper); }
.c-br { bottom: 4px; right: 4px; border-bottom: 2px solid var(--copper); border-right: 2px solid var(--copper); }

.c-tl::before, .c-tr::before, .c-bl::before, .c-br::before {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0.7;
}

.c-tl::before { top: -3px; left: -3px; }
.c-tr::before { top: -3px; right: -3px; }
.c-bl::before { bottom: -3px; left: -3px; }
.c-br::before { bottom: -3px; right: -3px; }

/* Panel header */
.panel-head {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.8rem;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
}

.panel-head .underline-svg {
    grid-column: 1 / span 2;
    margin-top: 0.4rem;
}

.panel-tag {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--copper);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
}

.panel-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
    line-height: 1.1;
}

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

.panel-text {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.65;
    color: var(--parchment);
    margin-top: 0.8rem;
}

/* Primary panel body layout */
.primary-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: center;
}

.mini-gauge {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        conic-gradient(from 200deg,
            rgba(46, 204, 113, 0.4),
            rgba(26, 58, 92, 0.8) 90deg,
            rgba(155, 89, 182, 0.35) 180deg,
            rgba(240, 212, 138, 0.3) 270deg,
            rgba(46, 204, 113, 0.4));
    box-shadow:
        0 0 0 3px var(--copper),
        0 0 0 5px rgba(240, 212, 138, 0.25),
        inset 0 0 20px rgba(0, 0, 0, 0.6);
}

.mg-face {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1a3a5c, #0e1428 70%, #040812);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.mg-needle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 38%;
    background: linear-gradient(to top, transparent, var(--ruby) 40%, #ff6b5c);
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(-120deg);
    border-radius: 1.5px 1.5px 0 0;
    box-shadow: 0 0 4px rgba(192, 57, 43, 0.7);
    transition: transform 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mg-cap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold), var(--copper) 70%);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px var(--copper);
}

.specimen-latin {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--teal);
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.02em;
}

.readings-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    border-top: 1px dashed rgba(139, 94, 60, 0.4);
    border-bottom: 1px dashed rgba(139, 94, 60, 0.4);
    padding: 0.8rem 0;
}

.reading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.r-label {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--copper);
}

.r-val {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.r-unit {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.75rem;
    color: var(--gold);
    letter-spacing: 0.1em;
}

/* Specimen cards */
.panel-spec .spec-illo {
    width: 100%;
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%, rgba(46, 204, 113, 0.05), transparent 70%);
    border: 1px solid rgba(139, 94, 60, 0.4);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-spec .spec-illo svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.35));
}

.panel-spec .spec-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    position: relative;
    padding-bottom: 0.4rem;
    cursor: default;
}

.panel-spec .spec-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, var(--gold), transparent);
}

.panel-spec .spec-meta {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--parchment);
    font-size: 0.95rem;
    margin-top: 0.4rem;
}

.panel-spec .underline-svg {
    grid-column: 2 / span 1;
    height: 10px;
    margin-top: 0.5rem;
}

/* Garden map */
.map-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 4px rgba(46, 204, 113, 0.3));
    border: 1px solid rgba(139, 94, 60, 0.4);
    background: radial-gradient(circle at 50% 50%, rgba(10, 31, 26, 0.6), rgba(14, 20, 40, 0.85));
    padding: 8px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.4rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--parchment);
    letter-spacing: 0.06em;
}

.leg-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.leg-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--copper);
    box-shadow: 0 0 6px currentColor;
}

/* Chlorophyll bars */
.bloom-bars {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 60px;
    align-items: center;
    gap: 0.9rem;
}

.bar-label {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--parchment);
    font-size: 1rem;
}

.bar-track {
    position: relative;
    height: 10px;
    background: rgba(10, 20, 40, 0.7);
    border: 1px solid var(--copper);
    overflow: visible;
}

.bar-fill {
    position: relative;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--emerald), var(--teal) 80%, var(--gold));
    transition: width 1.4s cubic-bezier(0.2, 0.7, 0.3, 1);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
}

/* Flower blooming at bar end */
.bar-fill::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, var(--gold), var(--ruby) 55%, var(--emerald));
    box-shadow: 0 0 8px rgba(240, 212, 138, 0.7);
    opacity: 0;
    transition: opacity 0.4s ease 1.2s;
}

.bar-fill.is-bloomed::after { opacity: 1; }

.bar-val {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    text-align: right;
    font-size: 1rem;
}

.bar-val::after {
    content: "%";
    color: var(--gold);
    margin-left: 2px;
    font-size: 0.8em;
}

/* Tall passiflora panel */
.tall-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.2rem;
    align-items: start;
}

.flower-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(46, 204, 113, 0.4));
}

.catalogue {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 6px;
}

.catalogue::-webkit-scrollbar { width: 6px; }
.catalogue::-webkit-scrollbar-track { background: rgba(10, 20, 40, 0.5); }
.catalogue::-webkit-scrollbar-thumb { background: var(--copper); border-radius: 3px; }

.cat-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 0.8rem;
    align-items: baseline;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px dashed rgba(139, 94, 60, 0.4);
    transition: background 0.25s ease, padding-left 0.25s ease;
}

.cat-item:hover {
    background: rgba(240, 212, 138, 0.06);
    padding-left: 1rem;
}

.cat-no {
    font-family: var(--font-mono);
    font-weight: 300;
    color: var(--copper);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.cat-name {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gold);
    font-size: 1.05rem;
}

.cat-meta {
    font-family: var(--font-body);
    color: var(--parchment);
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Colophon */
.colo-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(139, 94, 60, 0.4);
}

.cm-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cm-k {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--copper);
}

.cm-v {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--teal);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Footer */
.footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem 1rem 3rem;
    font-family: var(--font-body);
    font-style: italic;
    color: var(--copper);
    letter-spacing: 0.1em;
    font-size: 0.95rem;
}

/* Draw-path default (invisible until animated) */
.draw-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.8s ease-out;
}

.draw-path.is-drawn {
    stroke-dashoffset: 0;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1199px) {
    .dashboard {
        grid-template-columns: repeat(8, 1fr);
    }
    .panel-primary { grid-column: 1 / span 8; grid-row: auto; margin-right: 0; }
    .panel-spec    { grid-column: 1 / span 8; grid-row: auto; }
    .spec-1, .spec-2, .spec-3 { grid-row: auto; margin-bottom: 0; }
    .panel-map     { grid-column: 1 / span 4; grid-row: auto; }
    .panel-data    { grid-column: 5 / span 4; grid-row: auto; margin-left: 0; }
    .panel-tall    { grid-column: 1 / span 8; grid-row: auto; }
    .panel-colo    { grid-column: 1 / span 8; grid-row: auto; }
    .primary-body  { grid-template-columns: 160px 1fr; }
    .tall-body     { grid-template-columns: 140px 1fr; }
}

@media (max-width: 767px) {
    .dashboard {
        grid-template-columns: 1fr;
        padding: 1rem;
        gap: 1rem;
    }
    .panel, .panel-primary, .panel-spec, .panel-map, .panel-data, .panel-tall, .panel-colo {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        margin: 0 !important;
    }
    .primary-body { grid-template-columns: 1fr; }
    .mini-gauge { width: 60%; margin: 0 auto; }
    .tall-body { grid-template-columns: 1fr; }
    .flower-svg { max-width: 180px; margin: 0 auto; display: block; }
    .readings-row { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .r-val { font-size: 1.2rem; }
    .colo-meta { grid-template-columns: 1fr 1fr; }
    .panel-spec { grid-template-columns: 80px 1fr; }
    .hero-readout { right: 1rem; bottom: 1rem; padding: 0.4rem 0.7rem; }
    .bar-row { grid-template-columns: 80px 1fr 48px; gap: 0.5rem; }
    .bar-label { font-size: 0.9rem; }
    .catalogue { max-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
    .bubble { animation: none !important; }
    .gauge-needle, .mg-needle { transition: none !important; }
    .draw-path, .underline-path { transition: none !important; stroke-dashoffset: 0 !important; }
    .bar-fill { transition: none !important; }
    .hero-title .letter { opacity: 1 !important; transform: none !important; }
    .gauge-stage { opacity: 1 !important; }
}