/*
 * MolluscaGenes — site styles.
 *
 * Aesthetic: scientific editorial, anchored on UMass Amherst Maroon.
 * Display family: Newsreader (variable serif).
 * Body family: IBM Plex Sans.
 * Mono family: IBM Plex Mono.
 * Decorative motif: logarithmic spiral (mollusc shell whorl).
 */

/* ------------------------------------------------------------------ *
 *  Tokens
 * ------------------------------------------------------------------ */
:root {
    /* UMass Amherst brand-anchored palette */
    --maroon:        #881C1C;          /* primary, PMS 209 */
    --maroon-deep:   #5e1313;          /* hover/active */
    --maroon-soft:   rgba(136, 28, 28, 0.08);
    --maroon-tint:   #f5e9e6;          /* faintest blush for highlights */
    --navy:          #1f3a52;          /* secondary, oxford navy */
    --navy-deep:     #122335;
    --gold:          #c39a3a;          /* low-key tertiary, used sparingly */

    /* Paper */
    --paper:         #faf6f0;          /* warm cream */
    --paper-edge:    #f1ead9;          /* slightly darker for sections */
    --ink:           #1c1817;          /* near-black with warm undertone */
    --ink-soft:      #46413e;
    --ink-faint:     #6e6862;          /* bumped from #8a847d for WCAG AA contrast */
    --rule:          #d8cfbd;          /* hairlines */
    --rule-soft:     #e8e0cc;
    --code-bg:       #f4ecdb;

    /* Type */
    --display: 'Newsreader', 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Rhythm */
    --measure: 68ch;
    --gutter: clamp(1.25rem, 2.5vw, 2rem);
    --section-pad: clamp(3rem, 8vw, 6rem);

    /* Effects */
    --shadow-sm: 0 1px 2px rgba(28, 24, 23, 0.04), 0 2px 6px rgba(28, 24, 23, 0.04);
    --shadow-md: 0 4px 16px rgba(28, 24, 23, 0.08), 0 12px 40px rgba(28, 24, 23, 0.06);
    --shadow-maroon: 0 6px 24px rgba(136, 28, 28, 0.18);
}

/* ------------------------------------------------------------------ *
 *  Base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--body);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    /* Layered atmosphere: subtle vertical gradient + faint grain. */
    background-image:
        radial-gradient(1200px 600px at 88% -8%, rgba(136, 28, 28, 0.08) 0%, transparent 70%),
        radial-gradient(900px 600px at -10% 110%, rgba(31, 58, 82, 0.05) 0%, transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.09 0 0 0 0 0.09 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: auto, auto, 140px 140px;
    background-attachment: fixed, fixed, fixed;
    font-feature-settings: 'kern', 'liga', 'calt';
    text-rendering: optimizeLegibility;
}

/* Container */
.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container-narrow { max-width: 760px; }

/* ------------------------------------------------------------------ *
 *  Navigation
 * ------------------------------------------------------------------ */
.site-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(250, 246, 240, 0.88);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-bottom: 1px solid var(--rule-soft);
}
.site-nav .container {
    display: flex; align-items: center; gap: 1.5rem;
    padding-top: 0.85rem; padding-bottom: 0.85rem;
}
.site-nav .brand {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.18rem;
    letter-spacing: -0.01em;
    color: var(--maroon);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.55rem;
}
.site-nav .brand svg { display: block; }
.site-nav .brand:hover { color: var(--maroon-deep); }
.site-nav nav { margin-left: auto; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.site-nav nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    position: relative;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}
.site-nav nav a::after {
    content: '';
    position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1.5px;
    background: var(--maroon);
    transition: right 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.site-nav nav a:hover, .site-nav nav a.current { color: var(--maroon); }
.site-nav nav a:hover::after, .site-nav nav a.current::after { right: 0; }

/* ------------------------------------------------------------------ *
 *  Sub-navigation (page-level tabs, e.g. HMM Browser / Evaluation)
 * ------------------------------------------------------------------ */
.subnav {
    background: rgba(250, 246, 240, 0.78);
    border-bottom: 1px solid var(--rule-soft);
}
.subnav .container {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.subnav-tab {
    display: inline-block;
    padding: 0.55rem 0.1rem;
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.subnav-tab:hover { color: var(--maroon); border-bottom-color: rgba(136, 28, 28, 0.35); }
.subnav-tab.current {
    color: var(--maroon);
    border-bottom-color: var(--maroon);
}

/* ------------------------------------------------------------------ *
 *  Typography
 * ------------------------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--display);
    color: var(--ink);
    line-height: 1.18;
    letter-spacing: -0.015em;
    font-feature-settings: 'kern', 'liga', 'ss01';
    margin: 0;
}
h1 {
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 500;
    font-variation-settings: 'opsz' 50;
    margin-bottom: 0.75rem;
}
h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 500;
    font-variation-settings: 'opsz' 36;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
    /* Maroon stripe scales with the heading naturally — no fixed-height ::before
       that "floats" next to wrapped lines. */
    padding-left: 1rem;
    border-left: 4px solid var(--maroon);
    border-radius: 1px;
}
h3 {
    font-size: 1.2rem;
    font-weight: 600;
    font-variation-settings: 'opsz' 22;
    margin-top: 2rem;
    margin-bottom: 0.7rem;
    color: var(--navy-deep);
}

p { margin: 0 0 1rem 0; max-width: var(--measure); }
.lead {
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 400;
    font-variation-settings: 'opsz' 24;
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 60ch;
    margin-bottom: 2rem;
}

/* Drop cap utility */
.dropcap::first-letter {
    font-family: var(--display);
    font-weight: 600;
    font-size: 4em;
    line-height: 0.85;
    float: left;
    margin: 0.05em 0.08em -0.05em 0;
    color: var(--maroon);
}

a { color: var(--maroon); text-decoration: none; border-bottom: 1px solid rgba(136, 28, 28, 0.3); transition: border-color 0.2s, color 0.2s; }
a:hover { color: var(--maroon-deep); border-bottom-color: var(--maroon-deep); }

code, pre {
    font-family: var(--mono);
    font-feature-settings: 'liga' 0, 'calt' 0;
}
code {
    background: var(--code-bg);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.88em;
    color: var(--maroon-deep);
    border: 1px solid var(--rule-soft);
}
pre {
    background: var(--ink);
    color: #f5e9e6;
    padding: 1.1rem 1.3rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    box-shadow: var(--shadow-md);
    margin: 1.5rem 0;
    border: none;
    position: relative;
}
pre code { background: transparent; color: inherit; padding: 0; border: 0; font-size: inherit; }
pre::before {
    content: '$';
    position: absolute; top: 0.65rem; left: 0.65rem;
    color: var(--maroon);
    font-size: 0.75rem;
    opacity: 0.6;
}
pre.no-prompt::before { content: ''; }
.muted   { color: var(--ink-soft); }
.faint   { color: var(--ink-faint); font-size: 0.92rem; }
.italic  { font-style: italic; }
.species-binomial { font-style: italic; color: var(--navy); }

/* ------------------------------------------------------------------ *
 *  Hero
 * ------------------------------------------------------------------ */
.hero {
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
}
.hero .container { position: relative; z-index: 1; }
/* Split layout (text + decorative spiral on the right) only when explicitly
   requested via .hero-split — single-column heroes flow normally. */
.hero .container.hero-split { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 980px) {
    .hero .container.hero-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
}
.hero .eyebrow {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 1rem;
    display: inline-block;
}
.hero h1 .accent {
    font-style: italic;
    font-weight: 500;
    color: var(--maroon);
}
.hero .meta {
    margin-top: 1.25rem;
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--ink-soft);
}
.hero .meta dt { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-right: 0.4rem; }
.hero .meta dd { display: inline; margin: 0; }
.hero .meta > div { display: flex; align-items: baseline; }

.spiral-deco {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    color: var(--maroon);
    transition: transform 1.6s cubic-bezier(0.2, 0, 0, 1);
}
.spiral-deco:hover { transform: rotate(45deg); }
/* The hero spiral fades in on first paint; the surrounding .spiral-deco rotates
   gently on hover. Keeping it simple — drawing animations on a multi-arc path
   are finicky across browsers. */
.spiral-deco { opacity: 0; animation: spiralFadeIn 0.9s ease 0.3s forwards; }
@keyframes spiralFadeIn { from { opacity: 0; } to { opacity: 0.9; } }

/* Stat numbers — fade-in baseline; the JS count-up uses .stat-counted to swap value */
.stat .num { opacity: 0; animation: statFadeIn 0.8s ease 0.4s forwards; }
@keyframes statFadeIn { to { opacity: 1; } }
.stat .num.stat-counted { animation: none; opacity: 1; }

/* ------------------------------------------------------------------ *
 *  CTAs
 * ------------------------------------------------------------------ */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.6rem 0 0; }
.cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--maroon);
    color: #fff;
    padding: 0.7rem 1.25rem;
    font-family: var(--body);
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    border: 1px solid var(--maroon);
    border-radius: 2px;
    text-decoration: none;
    box-shadow: var(--shadow-maroon);
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.cta:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(136, 28, 28, 0.25); color: #fff; }
.cta:active { transform: translateY(0); box-shadow: var(--shadow-maroon); }
.cta.secondary {
    background: transparent;
    color: var(--maroon);
    border: 1px solid rgba(136, 28, 28, 0.35);
    box-shadow: none;
}
.cta.secondary:hover { background: var(--maroon-soft); color: var(--maroon-deep); border-color: var(--maroon); transform: translateY(-1px); }
.cta .arrow { transition: transform 0.18s ease; }
.cta:hover .arrow { transform: translateX(2px); }

/* ------------------------------------------------------------------ *
 *  Stat strip
 * ------------------------------------------------------------------ */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin: 2.5rem 0 0.5rem;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.stat {
    padding: 1.6rem 1.4rem;
    border-right: 1px solid var(--rule-soft);
    position: relative;
}
.stat:last-child { border-right: 0; }
.stat .num {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 500;
    font-variation-settings: 'opsz' 50;
    line-height: 1;
    color: var(--maroon);
    letter-spacing: -0.02em;
    display: block;
    margin-bottom: 0.5rem;
}
.stat .num small { font-size: 0.55em; color: var(--ink-faint); margin-left: 0.18em; }
.stat .label {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ------------------------------------------------------------------ *
 *  Metrics strip (evaluation page headline numbers)
 * ------------------------------------------------------------------ */
.metrics-strip {
    padding: 1.25rem 0 2rem;
}
.metrics-strip .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: stretch;
}
.metric-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 1.4rem 1.3rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule-soft);
    border-left: 3px solid var(--maroon);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.metric-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.metric-value {
    font-family: var(--display);
    font-weight: 600;
    font-variation-settings: 'opsz' 50;
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--maroon);
    margin-bottom: 0.45rem;
}
.metric-label {
    font-family: var(--body);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
/* Wrap to 2x2 on tablets, 1x4 on phones */
@media (max-width: 880px) {
    .metric-card { flex-basis: calc(50% - 0.5rem); }
}
@media (max-width: 520px) {
    .metric-card { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ *
 *  Methods section (evaluation page)
 * ------------------------------------------------------------------ */
.methods {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.method-block {
    margin: 1.75rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule-soft);
}
.method-block:first-of-type {
    border-top: 0;
    padding-top: 0.5rem;
}
.method-block h3 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-family: var(--display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--navy-deep);
}
.method-block p {
    max-width: 65ch;
    margin: 0 0 0.85rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
}
.method-block p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 *  Results section (evaluation page) — tables + inline figures
 * ------------------------------------------------------------------ */
.results {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.results h3 {
    margin-top: 2.4rem;
    margin-bottom: 0.4rem;
    font-family: var(--display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--navy-deep);
}
.results .table-caption {
    max-width: 65ch;
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
}

/* Editorial data table — bold header, alternating rows, tabular numerics */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 0 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    overflow: hidden;
}
.data-table thead th {
    background: var(--paper-edge);
    border-bottom: 2px solid var(--maroon);
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
}
.data-table thead th.num { text-align: right; }
.data-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}
.data-table tbody tr:nth-child(even) td {
    background: rgba(241, 234, 217, 0.35);
}
.data-table tbody tr:hover td {
    background: var(--maroon-soft);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.num {
    text-align: right;
    font-family: var(--mono);
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
}
.data-table a {
    font-family: var(--mono);
    font-size: 0.88em;
    border-bottom: 0;
}
.data-table a:hover { text-decoration: underline; }
@media (max-width: 720px) {
    .data-table { display: block; overflow-x: auto; }
}

/* Inline result figure with journal-style caption */
.result-figure {
    margin: 2.25rem 0 2.5rem;
    padding: 0;
}
.result-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    background: transparent;
}
.result-figure figcaption {
    margin: 0.85rem auto 0;
    max-width: 65ch;
    font-family: var(--body);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink-soft);
    text-align: left;
}
.result-figure figcaption b {
    font-family: var(--display);
    font-style: normal;
    font-weight: 600;
    color: var(--ink);
    margin-right: 0.25rem;
}
.result-figure figcaption i {
    font-style: italic;
}

/* ------------------------------------------------------------------ *
 *  Specificity / Net assessment / Limitations / Reproducibility
 *  (evaluation page, sections 6–9)
 * ------------------------------------------------------------------ */
.specificity,
.net-assessment,
.limitations,
.reproducibility {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.specificity h3,
.reproducibility h3 {
    margin-top: 2.4rem;
    margin-bottom: 0.4rem;
    font-family: var(--display);
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--navy-deep);
}
.specificity .table-caption,
.reproducibility .repro-caption {
    max-width: 65ch;
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink-soft);
    font-style: italic;
}
.specificity .data-table tbody tr.emphasis td {
    background: var(--maroon-soft);
    color: var(--ink);
}
.specificity .data-table tbody tr.emphasis:hover td {
    background: rgba(136, 28, 28, 0.16);
}

/* Headline callout — heavier visual weight than the default callout */
.callout.headline {
    margin: 1.75rem 0 2rem;
    padding: 1.2rem 1.4rem;
    border-left-width: 5px;
    border-left-color: var(--maroon);
    background: var(--maroon-soft);
    font-size: 1.02rem;
    line-height: 1.6;
}
.callout.headline strong { color: var(--maroon-deep); }
.callout.headline p { max-width: 70ch; margin: 0; }

/* Side-by-side case-study cards */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0 1.5rem;
}
@media (max-width: 720px) {
    .case-study-grid { grid-template-columns: 1fr; }
}
.case-study {
    margin: 0;
    padding: 1rem 1.15rem 1.05rem;
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--ink);
}
.case-study h4 {
    margin: 0 0 0.5rem;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-deep);
}
.case-study p { margin: 0; max-width: 60ch; }
.case-study a { font-family: var(--mono); font-size: 0.92em; border-bottom: 0; }
.case-study a:hover { text-decoration: underline; }
.case-study strong { color: var(--maroon-deep); }

/* Sub-headings within the Case studies section, grouping the case-study
 * cards by category (sensitivity gains / specificity-driven reductions /
 * genuine reductions). */
.case-study-heading {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 1.75rem 0 0.35rem;
}
.case-study-heading:first-of-type { margin-top: 1rem; }
.case-study-intro {
    font-size: 0.92rem;
    color: var(--ink-soft);
    max-width: 65ch;
    margin: 0 0 0.85rem;
}

/* Evaluation callout — Performance highlight card on the Overview page.
 * Two-column inside a single card: text (eyebrow + headline + body + CTA)
 * paired with a large numeric badge. Collapses to single column on narrow
 * viewports.
 */
.eval-callout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin: 0.5rem 0;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--rule-soft);
    border-left: 5px solid var(--maroon);
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), var(--maroon-soft));
}
@media (max-width: 720px) {
    .eval-callout {
        grid-template-columns: 1fr;
        padding: 1.25rem 1.25rem;
    }
}
.eval-callout-text { min-width: 0; }
.eval-eyebrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 0.5rem;
}
.eval-headline {
    margin: 0 0 0.6rem;
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}
.eval-callout p {
    margin: 0 0 0.9rem;
    max-width: 60ch;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink);
}
.eval-callout-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.6rem 0.5rem;
    border-left: 1px solid var(--rule-soft);
}
@media (max-width: 720px) {
    .eval-callout-stat {
        border-left: 0;
        border-top: 1px solid var(--rule-soft);
        padding-top: 1rem;
    }
}
.eval-stat-num {
    font-family: var(--display);
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--maroon-deep);
    letter-spacing: -0.01em;
}
.eval-stat-num small {
    font-size: 0.55em;
    font-weight: 500;
    margin-left: 0.12em;
    color: var(--maroon);
}
.eval-stat-label {
    margin-top: 0.4rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1.4;
}
.eval-stat-label small {
    display: block;
    font-size: 0.92em;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
    margin-top: 0.15rem;
}

/* Net-assessment ordered list — numbered, generous spacing */
.net-takeaways {
    counter-reset: takeaway;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    max-width: 70ch;
}
.net-takeaways li {
    position: relative;
    padding: 0.15rem 0 1rem 2.6rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    counter-increment: takeaway;
}
.net-takeaways li::before {
    content: counter(takeaway);
    position: absolute; left: 0; top: 0;
    width: 1.85rem; height: 1.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--maroon);
    background: var(--paper);
    border: 1px solid var(--maroon);
    border-radius: 50%;
}
.net-takeaways li:last-child { padding-bottom: 0; }

/* Limitations bullets — plain, compact */
.limitations-list {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    max-width: 70ch;
}
.limitations-list li {
    margin: 0.55rem 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
}

/* Reproducibility — pre blocks scroll horizontally on narrow viewports;
 * checksum and BibTeX blocks use no-prompt so the leading "$" is suppressed.
 */
.reproducibility pre {
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-x: auto;
    white-space: pre;
    word-wrap: normal;
}
@media (max-width: 520px) {
    .reproducibility pre { font-size: 0.74rem; }
}

/* ------------------------------------------------------------------ *
 *  Sections
 * ------------------------------------------------------------------ */
section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
section.alt { background: var(--paper-edge); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }

.section-title {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 0.5rem;
    display: block;
}
.divider {
    margin: 2.5rem auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule), transparent);
    border: 0;
    max-width: 100%;
}
.divider-spiral {
    text-align: center;
    margin: 3rem 0;
    color: var(--maroon);
    opacity: 0.5;
}
.divider-spiral svg { display: inline-block; }

/* Two-column flow */
.two-col {
    display: grid; gap: 2rem;
    grid-template-columns: 1fr;
}
@media (min-width: 880px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Feature list (pipeline / what's in the release) */
.features {
    list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: step;
    display: grid; gap: 1rem;
}
.features li {
    counter-increment: step;
    padding: 1rem 1.2rem 1rem 3.4rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    position: relative;
}
.features li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute; left: 1rem; top: 1rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--maroon);
    letter-spacing: 0.05em;
}
.features li strong { color: var(--ink); font-weight: 600; }

/* Bullet list (no counter) */
ul.plain { list-style: none; padding: 0; margin: 1rem 0; }
ul.plain li { padding-left: 1.4rem; position: relative; margin-bottom: 0.5rem; max-width: var(--measure); }
ul.plain li::before {
    content: ''; position: absolute; left: 0; top: 0.7em;
    width: 8px; height: 1px; background: var(--maroon);
}

/* Pipeline SVG diagram (index "How v0.1 was built" section). The diagram
   lives in the wider .container (1180px max), and the SVG scales down via
   its viewBox so no horizontal scroll is needed at narrower viewport widths.
   Text inside scales proportionally; below ~520px viewport width we let
   horizontal scroll kick in as a last resort. */
.pipeline-diagram {
    margin: 1.5rem auto 0;
    padding: 1.25rem 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--rule-soft);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    max-width: 1080px;
}
.pipeline-diagram svg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
@media (max-width: 520px) {
    .pipeline-diagram { overflow-x: auto; padding: 1rem 0.5rem; }
    .pipeline-diagram svg { min-width: 520px; }
}
.pipeline-diagram figcaption {
    margin-top: 0.9rem;
    padding: 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* Taxonomy table */
.tax-table {
    width: 100%;
    max-width: 480px;
    border-collapse: collapse;
    margin: 1.25rem 0 0;
}
.tax-table th, .tax-table td {
    padding: 0.55rem 0.8rem;
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.95rem;
}
.tax-table th {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--rule);
}
.tax-table td.num {
    text-align: right;
    font-feature-settings: 'tnum';
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
}
.tax-table tbody tr:hover { background: var(--maroon-soft); }

/* ------------------------------------------------------------------ *
 *  Examples / cards
 * ------------------------------------------------------------------ */
.example {
    margin: 2.5rem 0;
    padding: 1.5rem 1.75rem 1.75rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--rule-soft);
    border-left: 4px solid var(--maroon);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
}
.example .tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--maroon);
    margin-bottom: 0.4rem;
}
.example h3 { margin-top: 0.2rem; }
.example p { max-width: 70ch; }
.example .note {
    margin-top: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: var(--maroon-tint);
    border-radius: 3px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    border-left: 2px solid var(--maroon);
    max-width: 70ch;
}

/* ------------------------------------------------------------------ *
 *  Tutorial elements (examples page)
 * ------------------------------------------------------------------ */

/* Compact getting-started panel at the top of the examples page */
.starter {
    margin: 1.75rem 0 2.5rem;
    padding: 1.4rem 1.6rem 1.25rem;
    border: 1px solid var(--rule-soft);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}
.starter h3 { margin-top: 0.2rem; }
.starter ol { padding-left: 1.4rem; margin: 0.6rem 0 0; }
.starter li { margin: 0.35rem 0; max-width: 70ch; }

/* Numbered step within an example */
.step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem 1.2rem;
    margin: 1.25rem 0;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--rule-soft);
}
.step:first-of-type { border-top: 0; padding-top: 0; }
.step-num {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: var(--maroon);
    border-radius: 50%;
    flex-shrink: 0;
}
.step h4 {
    font-family: var(--display);
    font-size: 1.04rem;
    font-weight: 600;
    margin: 0.1rem 0 0.35rem;
    color: var(--ink);
}
.step .body { grid-column: 2; }
.step pre, .step ul { margin: 0.6rem 0; }

/* "Expected output" block — distinguishes results from commands */
pre.output {
    background: var(--paper-edge);
    color: var(--ink);
    border: 1px solid var(--rule);
    box-shadow: none;
    font-size: 0.8rem;
    padding: 0.9rem 1.1rem 0.9rem 2.1rem;
    position: relative;
}
pre.output::before {
    content: '';
    position: absolute; left: 0.7rem; top: 0.65rem;
    width: 0.7rem; height: 0.7rem;
    border: 1px solid var(--maroon);
    border-radius: 50%;
}
pre.output::after {
    content: 'output';
    position: absolute; right: 0.7rem; top: 0.6rem;
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Annotated command — each line of the command can have a comment */
.cmd-annotated {
    background: var(--ink);
    color: #f5e9e6;
    border-radius: 4px;
    padding: 1rem 1.2rem;
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    margin: 1rem 0;
    font-family: var(--mono);
    font-size: 0.84rem;
    line-height: 1.7;
}
.cmd-annotated .arg-comment {
    color: rgba(245, 233, 230, 0.55);
    font-style: italic;
    margin-left: 0.4em;
}
.cmd-annotated .flag { color: #ff9aa2; }
.cmd-annotated .val  { color: #ffd9b3; }

/* Two-column callout for definition / aside */
.callout {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--navy);
    background: rgba(31, 58, 82, 0.06);
    border-radius: 0 3px 3px 0;
    font-size: 0.94rem;
}
.callout strong { color: var(--navy-deep); }
.callout p:last-child { margin-bottom: 0; }
.callout code { background: rgba(255, 255, 255, 0.6); }
.callout.warn { border-left-color: var(--gold); background: rgba(195, 154, 58, 0.08); }
.callout.warn strong { color: #6e5418; }

/* "What you need" inset */
.prereq {
    display: grid; gap: 0.5rem;
    margin: 0 0 1.25rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    background: var(--paper-edge);
    font-size: 0.92rem;
}
.prereq dt {
    font-family: var(--mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--ink-faint); margin-bottom: 0.05rem;
}
.prereq dd { margin: 0; max-width: 70ch; }

/* Troubleshooting list */
.trouble {
    margin: 1.25rem 0;
    padding: 1rem 1.2rem;
    background: rgba(136, 28, 28, 0.04);
    border: 1px solid rgba(136, 28, 28, 0.18);
    border-radius: 3px;
    font-size: 0.92rem;
}
.trouble h5 {
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--maroon);
    font-weight: 600;
}
.trouble ul { margin: 0; padding-left: 1.4rem; }
.trouble li { margin: 0.35rem 0; }
.trouble code { background: rgba(255, 255, 255, 0.65); }

/* Glossary block */
.glossary {
    margin: 2.5rem 0;
    padding: 1.4rem 1.6rem;
    background: var(--paper-edge);
    border: 1px solid var(--rule);
    border-radius: 4px;
}
.glossary dt {
    font-family: var(--display);
    font-weight: 600;
    color: var(--maroon-deep);
    margin-top: 0.85rem;
    font-size: 1rem;
}
.glossary dt:first-of-type { margin-top: 0; }
.glossary dd { margin: 0.15rem 0 0; max-width: 70ch; color: var(--ink-soft); }

/* In-page TOC for the examples page */
.toc {
    position: sticky; top: 5rem;
    align-self: start;
    font-size: 0.92rem;
}
.toc h4 {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0 0 0.6rem;
    color: var(--ink-faint);
}
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0.3rem 0; }
.toc a {
    border-bottom: 0;
    color: var(--ink-soft);
    transition: color 0.15s;
    display: block;
    padding: 0.2rem 0.5rem;
    border-left: 2px solid transparent;
}
.toc a:hover { color: var(--maroon); border-left-color: var(--maroon); }
.examples-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1080px) {
    .examples-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ *
 *  Toolbars + data tables (HMM / species browsers)
 * ------------------------------------------------------------------ */
.toolbar {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
    margin: 1.5rem 0 1rem;
    padding: 0.85rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--rule-soft);
    border-radius: 3px;
    box-shadow: var(--shadow-sm);
}
.toolbar input[type="search"], .toolbar select {
    padding: 0.45rem 0.6rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
    font-family: var(--body);
    font-size: 0.9rem;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.toolbar input[type="search"]:focus, .toolbar select:focus {
    outline: 0;
    border-color: var(--maroon);
    box-shadow: 0 0 0 3px var(--maroon-soft);
}
.toolbar input[type="search"] { min-width: 240px; }
.toolbar button {
    padding: 0.45rem 0.95rem;
    font-family: var(--body);
    font-size: 0.88rem;
    font-weight: 500;
    background: var(--maroon);
    color: #fff;
    border: 1px solid var(--maroon);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.toolbar button:hover:not(:disabled) { background: var(--maroon-deep); border-color: var(--maroon-deep); }
.toolbar button:active:not(:disabled) { transform: translateY(1px); }
.toolbar button:disabled { opacity: 0.45; cursor: not-allowed; }
.toolbar button.secondary { background: transparent; color: var(--maroon); border-color: rgba(136, 28, 28, 0.3); }
.toolbar button.secondary:hover:not(:disabled) { background: var(--maroon-soft); }
.toolbar .stat { padding: 0; margin-left: auto; border: 0; background: transparent; color: var(--ink-soft); font-size: 0.88rem; font-family: var(--mono); }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: rgba(255, 255, 255, 0.65);
}
table.data thead th {
    background: var(--paper-edge);
    border-top: 1px solid var(--rule);
    border-bottom: 2px solid var(--maroon);
    padding: 0.55rem 0.7rem;
    text-align: left;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
    position: sticky; top: 56px;
    white-space: nowrap;
    z-index: 5;
}
table.data thead th:hover { color: var(--maroon); }
table.data thead th.sort-asc::after  { content: ' \25B2'; color: var(--maroon); font-size: 0.7em; margin-left: 0.2em; }
table.data thead th.sort-desc::after { content: ' \25BC'; color: var(--maroon); font-size: 0.7em; margin-left: 0.2em; }
table.data tbody td {
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--rule-soft);
    vertical-align: top;
}
/* Zebra stripes for scan-readability on long tables */
table.data tbody tr:nth-child(even) td { background: rgba(241, 234, 217, 0.35); }
table.data tbody tr:hover td { background: var(--maroon-soft); }
/* Mobile: keep the first column sticky so the Code / pfam_name stays visible */
@media (max-width: 720px) {
    table.data { display: block; overflow-x: auto; }
    table.data thead th:first-child,
    table.data tbody td:first-child {
        position: sticky; left: 0;
        background: var(--paper);
        border-right: 1px solid var(--rule);
    }
    table.data thead th:first-child { background: var(--paper-edge); z-index: 6; }
}
table.data .col-num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
table.data input[type="checkbox"] { accent-color: var(--maroon); cursor: pointer; }
table.data a { border-bottom: 0; }
table.data a:hover { text-decoration: underline; }

/* Modal (download snippet) */
#download-modal {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: rgba(28, 24, 23, 0.45);
    backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    animation: modalIn 0.18s ease both;
}
#download-modal.shown { display: flex; }
#download-modal .modal-body {
    background: var(--paper);
    max-width: 760px; width: 92%;
    padding: 1.6rem 1.8rem 1.4rem;
    border-radius: 4px;
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    max-height: 84vh; overflow-y: auto;
    position: relative;
}
#download-modal h3 { margin-top: 0.2rem; }
#download-modal .close { position: absolute; right: 1rem; top: 0.6rem; cursor: pointer; color: var(--ink-faint); font-size: 1.4rem; line-height: 1; }
#download-modal .close:hover { color: var(--maroon); }
@keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ *
 *  Footer
 * ------------------------------------------------------------------ */
footer {
    margin-top: 4rem;
    padding: 2.5rem 0 3rem;
    background: var(--ink);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
}
footer .container { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { footer .container { grid-template-columns: 2fr 1fr 1fr; align-items: start; } }
footer h4 { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin: 0 0 0.6rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: 0.35rem; }
footer a { color: rgba(255, 255, 255, 0.85); border-bottom: 0; }
footer a:hover { color: var(--maroon-tint); }
footer .colophon { color: rgba(255, 255, 255, 0.5); font-size: 0.82rem; margin-top: 1rem; }

/* ------------------------------------------------------------------ *
 *  Entrance animations
 * ------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(12px); animation: reveal 0.7s cubic-bezier(0.2, 0, 0, 1) forwards; }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.18s; }
.reveal-3 { animation-delay: 0.32s; }
.reveal-4 { animation-delay: 0.46s; }
.reveal-5 { animation-delay: 0.6s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .reveal, .spiral-deco { animation: none !important; opacity: 1 !important; transform: none !important; }
    * { transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ *
 *  Tooltip
 * ------------------------------------------------------------------ */
/* Any element with data-tooltip="..." shows a styled tooltip on hover/focus.
   data-tooltip-pos="bottom" flips the tooltip below the element (useful for
   sticky toolbars whose tooltips would otherwise clip off-screen). */
[data-tooltip] {
    position: relative;
    cursor: help;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ink);
    color: var(--paper);
    padding: 0.5rem 0.7rem;
    border-radius: 4px;
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    white-space: pre-line;
    width: max-content;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
    box-shadow: var(--shadow-md);
}
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--ink);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 200;
}
[data-tooltip][data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 6px);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip][data-tooltip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 1px);
    border-top-color: transparent;
    border-bottom-color: var(--ink);
    transform: translateX(-50%) translateY(-4px);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Buttons & checkboxes shouldn't show a help cursor (override the global one) */
button[data-tooltip], input[data-tooltip], a[data-tooltip] { cursor: pointer; }
input[type="checkbox"][data-tooltip] { cursor: pointer; }

/* Contact form */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
}
@media (min-width: 880px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.contact-info ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.contact-info li { padding: 0.6rem 0; border-top: 1px solid var(--rule-soft); }
.contact-info li:first-child { border-top: 0; }
.contact-info .label {
    font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint); display: block; margin-bottom: 0.15rem;
}
.contact-form { background: rgba(255, 255, 255, 0.6); padding: 1.5rem 1.6rem;
    border: 1px solid var(--rule-soft); border-radius: 4px; box-shadow: var(--shadow-sm); }
.contact-form .field { display: block; margin-bottom: 1rem; }
.contact-form label { display: block; font-weight: 500; font-size: 0.92rem;
    margin-bottom: 0.3rem; color: var(--ink); }
.contact-form label .req { color: var(--maroon); }
.contact-form label .hint { display: block; color: var(--ink-faint); font-size: 0.78rem;
    font-weight: 400; margin-top: 0.1rem; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
    font-family: var(--body);
    font-size: 0.95rem;
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
    outline: 0; border-color: var(--maroon); box-shadow: 0 0 0 3px var(--maroon-soft);
}
.contact-form button[type="submit"] {
    background: var(--maroon); color: #fff; border: 1px solid var(--maroon);
    padding: 0.7rem 1.4rem; font-family: var(--body); font-size: 0.95rem;
    font-weight: 500; border-radius: 3px; cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    box-shadow: var(--shadow-maroon);
}
.contact-form button[type="submit"]:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); }
.contact-form button[type="submit"]:active { transform: translateY(1px); }
.contact-form .hint-block { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* Selection */
::selection { background: var(--maroon); color: #fff; }

/* Skip-link / focus */
:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.skip-link {
    position: absolute; top: -100px; left: 1rem;
    background: var(--maroon); color: #fff;
    padding: 0.6rem 1rem; border-radius: 3px;
    font-family: var(--body); font-size: 0.92rem; font-weight: 500;
    text-decoration: none;
    z-index: 1000;
    transition: top 0.18s ease;
}
.skip-link:focus { top: 0.5rem; }

/* Sticky data-browser toolbar */
.toolbar.sticky-toolbar {
    position: sticky;
    top: 4.2rem;            /* clears the site-nav */
    z-index: 8;
}

/* "Selected count" chip emphasizes selection state in the HMM browser */
.selected-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid var(--maroon);
    border-radius: 999px;
    color: var(--maroon);
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--maroon-soft);
}
.selected-chip.empty { color: var(--ink-faint); border-color: var(--rule); background: transparent; }

/* Copy-to-clipboard button on code blocks */
pre.copyable { padding-right: 3.4rem; }
.copy-btn {
    position: absolute;
    top: 0.5rem; right: 0.6rem;
    background: rgba(245, 233, 230, 0.1);
    color: rgba(245, 233, 230, 0.9);
    border: 1px solid rgba(245, 233, 230, 0.18);
    padding: 0.18rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    opacity: 0.75;
    transition: opacity 0.18s, background 0.18s;
}
pre:hover .copy-btn, .copy-btn:focus { opacity: 1; }
.copy-btn:hover { background: rgba(245, 233, 230, 0.2); }
.copy-btn.copied { background: var(--maroon); color: #fff; border-color: var(--maroon); }

/* Small responsive fixes */
@media (max-width: 640px) {
    .site-nav nav { gap: 1rem; font-size: 0.86rem; }
    .stat { padding: 1.25rem 1rem; }
    table.data thead th { top: 0; }
}

/* Site-wide notice banner (v0.2 yank notice) */
.notice-banner {
  background: linear-gradient(180deg, #fff8e6, #fde9b8);
  border-bottom: 2px solid #c39a3a;
  color: #4a3a10;
  padding: 0.75rem 0;
  font-size: 0.95rem;
}
.notice-banner .container {
  display: block;
}
.notice-banner strong {
  color: #6b4d12;
}
.notice-banner a {
  color: inherit;
  border-bottom: 1px dotted currentColor;
}
@media (max-width: 720px) {
  .notice-banner {
    font-size: 0.85rem;
    padding: 0.6rem 0;
  }
}