/* burnt melba's own pages (/burntmelba/..., /ai-vtubers/).
   the whole page speaks in magenta, header and footer included: the accent is re-pointed
   on .wrap.burnt, so every shared component (buttons, section heads, callouts, focus
   rings) picks the colour up. the softer steps have no token yet, so they are mixed; a
   browser without color-mix keeps the violet ones. */
.wrap.burnt {
    --accent: var(--magenta);
    --accent-deep: var(--magenta-deep);
    --accent-line: var(--magenta-line);
}
@supports (color: color-mix(in srgb, red, blue)) {
    .wrap.burnt {
        --accent-hi: color-mix(in srgb, var(--magenta) 55%, var(--fg));
        --accent-dim: color-mix(in srgb, var(--magenta) 62%, var(--bg));
        --accent-soft: color-mix(in srgb, var(--magenta) 8%, transparent);
    }
}
.burnt .feat-grid .feat:nth-child(n) { --sheen: var(--accent); }
.burnt .cta-primary:hover { box-shadow: 2px 2px 0 var(--accent-dim); }

/* the name is the headline: set it large, on a hard shadow */
.burnt .proj-title {
    font-size: clamp(2.8rem, 10vw, 4.6rem);
    letter-spacing: -0.055em;
    line-height: 0.95;
    margin-bottom: 0.9rem;
    text-shadow: 3px 3px 0 var(--accent-deep);
}
.burnt .proj-kind { margin-bottom: 0.9rem; }
.burnt .proj-kind .dot { background: var(--accent); box-shadow: 2px 2px 0 var(--accent-deep); }
.burnt .kicker {
    font-size: 1.12rem;
    color: var(--fg);
    margin: 0 0 1.1rem;
    max-width: 52ch;
    text-wrap: balance;
}
.burnt .hero-split { align-items: start; }
.burnt .hero-split .synopsis { margin-bottom: 0; }
.burnt .hero .links-row { margin-top: 1.8rem; }
.burnt h3.row-name, .burnt h3.feat-name { line-height: 1.3; }

/* her avatar, beside the copy */
.burnt .hero-avatar {
    width: 190px;
    height: 190px;
    margin-top: 0.4rem;
    display: block;
    object-fit: cover;
    border: 3px solid var(--accent-line);
    border-radius: var(--radius);
    background: #000;
    box-shadow: 6px 6px 0 var(--accent-deep);
}
@media (max-width: 640px) {
    .burnt .hero-split { grid-template-columns: 1fr; }
    .burnt .hero-avatar { width: 132px; height: 132px; order: -1; margin: 0 0 0.4rem; }
}

/* a label inside a section, one step down from .section-head */
.burnt .sub-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-pixel);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    margin: 2.6rem 0 1rem;
}
.burnt .sub-head::before { content: ''; width: 4px; height: 4px; flex: none; background: var(--accent-dim); }

/* a quiet pointer line under the buttons, not a box */
.burnt .note {
    margin: 1.2rem 0 0;
    font-size: 0.86rem;
    color: var(--fg-subtle);
    max-width: 66ch;
}
.burnt .note a { color: var(--fg-muted); border-bottom: 1px solid var(--accent-line); }
.burnt .note a:hover { color: var(--accent-hi); }

/* links inside rows and callouts read as links, in the page colour */
.burnt .row-name a { color: inherit; border-bottom: 1px solid var(--accent-line); }
.burnt .row-name a:hover { color: var(--accent-hi); }
.burnt .callout a { color: var(--fg); border-bottom: 1px solid var(--accent-line); white-space: nowrap; }
.burnt .callout a:hover { color: var(--accent-hi); }

/* prose pages: a readable column with real paragraphs */
.burnt .prose-block p { color: var(--fg-muted); max-width: 66ch; margin: 0 0 1rem; line-height: 1.7; }
.burnt .prose-block p b, .burnt .prose-block p strong { color: var(--fg); font-weight: 600; }
.burnt .prose-block a, .burnt .row-text a, .burnt .fact-v a, .burnt .faq-a a, .burnt .tl-body a {
    color: var(--fg);
    border-bottom: 1px solid var(--accent-line);
}
.burnt .prose-block a:hover, .burnt .row-text a:hover, .burnt .fact-v a:hover, .burnt .faq-a a:hover, .burnt .tl-body a:hover {
    color: var(--accent-hi);
}

/* featured videos: thumbnail, title, date. plain links: the thumbnails load from i.ytimg.com, the video opens on youtube */
.burnt .clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.85rem; }
.burnt .clip {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.55rem 0.8rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 90ms steps(2), box-shadow 90ms steps(2), border-color 120ms var(--ease);
}
.burnt .clip:hover { border-color: var(--accent-line); transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--accent-deep); }
.burnt .clip img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.burnt .clip-t { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--fg); padding: 0 0.2rem; }
.burnt .clip:hover .clip-t { color: var(--accent-hi); }
.burnt .clip-m { font-family: var(--font-mono); font-size: 0.68rem; color: var(--fg-subtle); padding: 0 0.2rem; }

/* latest posts from her blog */
.burnt .posts { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.burnt .post-row {
    display: grid;
    grid-template-columns: 7.2rem 1fr;
    gap: 0.4rem 1.2rem;
    padding: 0.95rem 0.2rem;
    border-bottom: 1px solid var(--border);
}
.burnt .post-row:hover .post-t { color: var(--accent-hi); }
.burnt .post-d { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-subtle); padding-top: 0.2rem; }
.burnt .post-t { font-weight: 600; letter-spacing: -0.02em; color: var(--fg); }
.burnt .post-x { display: block; margin-top: 0.2rem; font-size: 0.86rem; color: var(--fg-muted); line-height: 1.55; max-width: 62ch; }
@media (max-width: 560px) { .burnt .post-row { grid-template-columns: 1fr; } }

/* timeline: a date column and a body, one row per dated thing */
.burnt .timeline { border-top: 1px solid var(--border); margin: 0; padding: 0; list-style: none; }
.burnt .tl-row {
    display: grid;
    grid-template-columns: 8.4rem 1fr;
    gap: 0.4rem 1.4rem;
    padding: 1rem 0.2rem;
    border-bottom: 1px solid var(--border);
}
.burnt .tl-date {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--accent-hi);
    padding-top: 0.15rem;
    white-space: nowrap;
}
.burnt .tl-body h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.25rem; line-height: 1.3; }
.burnt .tl-body p { margin: 0; color: var(--fg-muted); font-size: 0.9rem; line-height: 1.62; max-width: 64ch; }
.burnt .tl-src { display: block; margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.66rem; color: var(--fg-subtle); }
.burnt .tl-year {
    font-family: var(--font-pixel);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--fg-subtle);
    margin: 2.2rem 0 0.8rem;
}
@media (max-width: 560px) { .burnt .tl-row { grid-template-columns: 1fr; } }

/* the field guide's table scrolls sideways on a phone instead of squashing */
.burnt .tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); }
.burnt table.guide { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.88rem; }
.burnt table.guide caption { text-align: left; padding: 0.8rem 1rem 0.2rem; font-family: var(--font-pixel); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }
.burnt table.guide th, .burnt table.guide td { text-align: left; vertical-align: top; padding: 0.7rem 1rem; border-top: 1px solid var(--border); }
.burnt table.guide th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.burnt table.guide td { color: var(--fg-muted); line-height: 1.5; }
.burnt table.guide td a, .burnt table.guide th a { color: var(--fg); border-bottom: 1px solid var(--accent-line); }
.burnt table.guide td a:hover, .burnt table.guide th a:hover { color: var(--accent-hi); }
.burnt table.guide tr.me th, .burnt table.guide tr.me td { background: var(--accent-soft); }
.burnt .names { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.burnt .names li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.15rem;
    padding: 0 0.7rem;
    font-size: 0.84rem;
    color: var(--fg-muted);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 120ms var(--ease), color 120ms var(--ease);
}
.burnt .names li a:hover { border-color: var(--accent-line); color: var(--accent-hi); }