/* Shared chrome for /tools/ pages.
 *
 * The three original tool pages each inlined their own <style>, which is why
 * the breadcrumb, FAQ block and cross-link footer had to be written three
 * times to look the same. Everything that appears on more than one tool page
 * lives here; page-specific layout (the poster studio grid, the widget
 * preview) stays inline in its own template.
 */

/* ---- Breadcrumbs ------------------------------------------------------ */

.tl-crumbs {
    max-width: 1240px;
    margin: 110px auto 0;
    padding: 0 1.5rem;
    font-size: .8rem;
    color: #6f6f6f;
}
.tl-crumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
}
.tl-crumbs li::after {
    content: "/";
    margin-left: .45rem;
    color: #3d3d3d;
}
.tl-crumbs li:last-child::after { content: none; }
.tl-crumbs a { color: #9a9a9a; text-decoration: none; }
.tl-crumbs a:hover { color: #ff4d4d; }
.tl-crumbs [aria-current="page"] { color: #d0d0d0; }

/* A page that shows breadcrumbs no longer needs its own top margin to clear
 * the fixed header — the crumb strip has already done it. */
.tl-crumbs + .bnc-page,
.tl-crumbs + .wb-page,
.tl-crumbs + .ps-wrap,
.tl-crumbs + .tl-page { margin-top: 1.5rem; }

/* ---- Generic tool page shell ------------------------------------------ */

.tl-page {
    max-width: 1080px;
    margin: 120px auto 4rem;
    padding: 0 1.5rem;
    color: #ccc;
}
.tl-page h1 {
    font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em;
    color: #fff;
    font-size: 2.6rem;
    margin-bottom: .5rem;
    line-height: 1.15;
}
.tl-lede {
    color: #9a9a9a;
    max-width: 680px;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.tl-section { margin-bottom: 3rem; }
.tl-section h2 {
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-left: 4px solid #ff0000;
    padding-left: .75rem;
    margin-bottom: 1.25rem;
}

/* ---- Tool cards (hub, and the cross-link strip on each tool) ---------- */

.tl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.tl-card {
    display: flex;
    flex-direction: column;
    background: #0f0f0f;
    border: 1px solid #262626;
    border-radius: 6px;
    padding: 1.5rem;
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.tl-card:hover { border-color: #ff0000; transform: translateY(-2px); }
.tl-card .tl-card-icon { color: #ff0000; font-size: 1.35rem; margin-bottom: .9rem; }
.tl-card h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .5rem; }
.tl-card p { color: #8f8f8f; font-size: .9rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; }
.tl-card .tl-card-cta { color: #ff4d4d; font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.tl-card .tl-card-cta::after { content: " \2192"; }

/* ---- Hub sections ------------------------------------------------------ */

/* The hub's grids are ordered lists — the band section is a sequence, and the
 * numbering is drawn from the list itself rather than typed into the cards. */
.tl-hub-intro { color: #8f8f8f; margin: -.5rem 0 1.25rem; font-size: .92rem; }
/* auto-fill rather than the shared auto-fit, so a section holding one or two
 * tools keeps card-sized tracks instead of stretching a single card across the
 * page; and narrower tracks on the steps, so all four fit on one row. */
ol.tl-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    /* min(): a 300px track is wider than a 320px phone's column. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
ol.tl-grid.tl-grid--steps { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
ol.tl-grid > li { display: flex; min-width: 0; }
ol.tl-grid > li > .tl-card { flex: 1; }
.tl-grid--steps { counter-reset: tl-step; }
.tl-grid--steps > li { counter-increment: tl-step; position: relative; }
.tl-grid--steps > li::before {
    content: counter(tl-step);
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 1;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #ff0000;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1.7rem;
    text-align: center;
    pointer-events: none;
}

.tl-card--hub { padding: 0; overflow: hidden; }
.tl-card--hub .tl-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }

/* One fixed height for every preview, so a row of cards lines its titles up
 * whether it holds a poster, a logo, a text sample or an icon. */
.tl-card-preview {
    height: 190px;
    background: #0a0a0a;
    border-bottom: 1px solid #1f1f1f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tl-card-preview img { display: block; max-width: 100%; }
.tl-card-preview--cover img { width: 100%; height: 100%; object-fit: cover; }
.tl-card-preview--contain { padding: .9rem 0; }
.tl-card-preview--contain img { width: auto; height: 100%; object-fit: contain; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
.tl-card-preview-icon { color: #ff0000; font-size: 2.6rem; opacity: .85; }
/* One column on a phone, so there is no row to line up — and an icon alone
 * does not earn 190px of scroll. */
@media (max-width: 600px) {
    .tl-card-preview:has(> .tl-card-preview-icon) { height: 110px; }
}

.tl-sample { list-style: none; margin: 0; padding: 0 1.25rem; width: 100%; }
.tl-sample--names li {
    font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em;
    color: #eee;
    font-size: 1.15rem;
    text-align: center;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-sample--gigs li {
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    column-gap: .6rem;
    padding: .45rem 0;
    border-bottom: 1px solid #1c1c1c;
    font-size: .8rem;
}
.tl-sample--gigs li:last-child { border-bottom: 0; }
.tl-sample--gigs b { color: #ff4d4d; grid-row: span 2; }
.tl-sample--gigs span { color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-sample--gigs em { color: #777; font-style: normal; }

/* ---- Stat strip ------------------------------------------------------- */

.tl-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 1.5rem 0;
}
.tl-stats .tl-stat b {
    display: block;
    color: #fff;
    font-size: 1.7rem;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em;
}
.tl-stats .tl-stat span {
    font-size: .75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ---- FAQ -------------------------------------------------------------- */

.tl-faq { border-top: 1px solid #222; margin-top: 3.5rem; padding-top: 2.5rem; }
.tl-faq h2 {
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.tl-faq details {
    border-bottom: 1px solid #1e1e1e;
    padding: .95rem 0;
}
.tl-faq summary {
    cursor: pointer;
    color: #e6e6e6;
    font-size: .98rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
}
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary::after {
    content: "+";
    color: #ff0000;
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}
.tl-faq details[open] summary::after { content: "\2212"; }
.tl-faq details p,
.tl-faq details li {
    color: #979797;
    line-height: 1.75;
    font-size: .92rem;
}
.tl-faq details p { margin: .85rem 0 0; }
.tl-faq details ul { margin: .85rem 0 0; padding-left: 1.2rem; }
.tl-faq a { color: #ff4d4d; }

/* ---- Prose blocks on tool pages --------------------------------------- */

.tl-prose { border-top: 1px solid #222; margin-top: 3.5rem; padding-top: 2.5rem; }
.tl-prose h2 {
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.tl-prose h3 { color: #eee; font-size: 1rem; margin: 1.8rem 0 .5rem; }
.tl-prose p, .tl-prose li { color: #979797; line-height: 1.75; font-size: .93rem; }
.tl-prose ul, .tl-prose ol { padding-left: 1.2rem; margin: .6rem 0; }
.tl-prose li { margin-bottom: .4rem; }
.tl-prose a { color: #ff4d4d; }

/* ---- Band name generator ---------------------------------------------- */

/* The names.
 *
 * Each one is a card with two doors: check the name is free, or see it set as
 * a logo. They used to be two separate bordered boxes sitting side by side --
 * the second a tall empty rectangle with LOGO in it -- so a row read as two
 * unrelated things, the rows came out at ragged heights as longer names
 * wrapped, and the name itself, which is the entire product of this page, was
 * set smaller than the body text around it. */
.bng-names {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    grid-auto-rows: 1fr;
    gap: .7rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.bng-name {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #0f0f0f;
    border: 1px solid #242424;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .12s, transform .12s, background .12s;
}
.bng-name:hover, .bng-name:focus-within { border-color: #ff0000; background: #131313; transform: translateY(-2px); }

/* The name gets the room. A generator's whole job is to put a word in front of
   you that you might want; it should be the biggest thing on the card. */
.bng-name-check {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: .55rem;
    padding: .95rem 1rem .8rem;
    text-decoration: none;
    color: inherit;
}
.bng-name-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: 1.12rem;
    line-height: 1.25;
    color: #f2f2f2;
    text-wrap: balance;
}
.bng-name:hover .bng-name-text, .bng-name:focus-within .bng-name-text { color: #fff; }

.bng-name-hint {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #656565;
}
.bng-name-check:hover .bng-name-hint, .bng-name-check:focus-visible .bng-name-hint { color: #ff4d4d; }

/* The second door, as a strip along the foot of the same card rather than a
   box of its own beside it. */
.bng-name-logo {
    display: block;
    padding: .5rem 1rem;
    border-top: 1px solid #202020;
    background: rgba(255, 255, 255, .02);
    color: #7c7c7c;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
}
.bng-name-logo:hover, .bng-name-logo:focus-visible { background: rgba(255, 0, 0, .1); color: #ff4d4d; }

@media (prefers-reduced-motion: reduce) {
    .bng-name { transition: border-color .12s, background .12s; }
    .bng-name:hover, .bng-name:focus-within { transform: none; }
}

.bng-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 2.5rem; }
.bng-btn {
    background: #ff0000;
    border: 1px solid #ff0000;
    color: #fff;
    padding: .8rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    font-size: .95rem;
}
.bng-btn:hover { background: #d51007; border-color: #d51007; }
.bng-btn--ghost { background: transparent; color: #ddd; border-color: #333; }
.bng-btn--ghost:hover { background: transparent; border-color: #ff0000; color: #fff; }

.bng-genres { display: flex; flex-wrap: wrap; gap: .5rem; }
.bng-genres a {
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    padding: .45rem .85rem;
    color: #b5b5b5;
    text-decoration: none;
    font-size: .85rem;
}
.bng-genres a:hover { border-color: #ff0000; color: #fff; }

/* ---- EPK tool ---------------------------------------------------------
   The press kit tool page and the pages around it are static/css/epk_tool.css
   since 10 Nov 2026 (epkt-, epkb-, epkx-, epkg-, pkm-), on the tokens in
   epk_ui.css; only those pages load it. */

/* ---- Band logo maker (/tools/band-logo-maker/) ------------------------ */

.lg-wrap { max-width: 1840px; margin: 96px auto 4rem; padding: 0 1.25rem; color: #ccc; }
.tl-crumbs + .lg-wrap { margin-top: 1.5rem; }

/* The masthead. Title, what the tool does and the No-AI note used to be three
   stacked full-width blocks, which pushed the preview off a laptop screen
   before anything had been typed. Laid out in a row instead, like the poster
   studio's, so the editor starts at the top of the window. */
.lg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.5rem; margin-bottom: .9rem; }
.lg-wrap h1 {
    font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em;
    color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; margin: 0;
}
.lg-tagline {
    flex: 1 1 24rem; color: #8f8f8f; line-height: 1.5; margin: 0; font-size: .88rem;
}
.lg-noai {
    flex: 1 1 22rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    color: #bdbdbd; font-size: .82rem; line-height: 1.5; margin: 0;
}
.lg-note-warn { color: #e8a13a; }
.lg-noai-badge {
    flex: none; border: 1px solid #ff0000; color: #ff4d4d; border-radius: 3px;
    padding: .15rem .5rem; font-size: .7rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}

/* Two panes, one window tall: the settings down the left scrolling on their
   own, and the logo beside them at whatever size the window allows. It was two
   half-width columns of ordinary page flow, so the preview -- the only thing
   on the page anyone is actually looking at -- got a third of the screen and
   shared its height with the form that drives it. */
/* The editor is the form (logo.html): the band name on its own over the
   settings, the preview down the right. The height is the window less the
   site header and the masthead; 440px at least keeps the downloads on
   screen down to a 1280x720 laptop, where 560px put them under the fold. */
.lg-editor {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "name stage" "rail stage";
    gap: .9rem;
    height: calc(100vh - 272px);
    min-height: 440px;
    scroll-margin-top: 92px;
}

/* The name, outside the tabs, so it is there whichever one is open. */
.lg-namebar {
    grid-area: name; min-width: 0;
    background: #0d0d0d; border: 1px solid #222; border-radius: 8px; padding: .8rem .9rem;
}
.lg-namebar .lg-field { margin-bottom: .55rem; }
.lg-namebar > :last-child { margin-bottom: 0; }
.lg-namebar .lg-hint { margin: .5rem 0 0; line-height: 1.45; }
.lg-linkish {
    display: block; background: none; border: 0; padding: .1rem 0; margin: 0;
    color: #9a9a9a; font: inherit; font-size: .76rem; cursor: pointer; text-align: left;
}
.lg-linkish:hover { color: #fff; }

.lg-rail {
    grid-area: rail;
    display: flex; flex-direction: column; min-height: 0;
    background: #0d0d0d; border: 1px solid #222; border-radius: 8px;
}
/* The rail's scrolling body: the panels under the tab strip. Positioned, so
   the hidden radios in it (position: absolute) scroll with their labels: held
   by the form instead, they stayed where the rail had them unscrolled, and a
   click on a face low in the list focused a radio far down the page, which
   the browser scrolled the window to (Oct 2026). */
.lg-rail-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .9rem; }

/* Inside the rail the panels are sections of one surface, not cards floating
   on another card. */
.lg-panel { border-bottom: 1px solid #1d1d1d; padding: .2rem 0 1.1rem; }
.lg-panel:last-child { border-bottom: 0; padding-bottom: .2rem; }
.lg-panel + .lg-panel { margin-top: 1rem; }
.lg-panel h2 {
    color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
    border-left: 3px solid #ff0000; padding-left: .6rem; margin: 0 0 .9rem;
}

.lg-field { margin-bottom: 1rem; }
.lg-field:last-child { margin-bottom: 0; }
.lg-field label { display: block; margin-bottom: .35rem; font-size: .74rem; color: #8c8c8c; text-transform: uppercase; letter-spacing: .07em; }
.lg-field label span { text-transform: none; letter-spacing: 0; color: #5f5f5f; }
.lg-field input[type="text"] {
    width: 100%; background: #171717; border: 1px solid #303030; color: #eee;
    padding: .65rem .8rem; border-radius: 4px; font-size: .93rem; font-family: inherit;
}
.lg-field input[type="text"]:focus { outline: none; border-color: #ff0000; }
.lg-hint { font-size: .74rem; color: #6a6a6a; margin-top: .45rem; }

/* Each face is previewed by its own name, set in itself — the only honest way
   to show what a display font looks like without rendering twelve images. */
.lg-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: .6rem; }
.lg-font {
    position: relative; display: block; border: 1px solid #2c2c2c; border-radius: 4px; padding: .7rem .8rem;
    cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0;
    transition: border-color .12s, background .12s;
}
.lg-font input { position: absolute; opacity: 0; pointer-events: none; }
.lg-font:hover { border-color: #4a4a4a; }
.lg-font.is-active { border-color: #ff0000; background: rgba(255,0,0,.08); }
/* The face's own name, pre-rendered white on transparent — see the note in
   logo.py above FONT_CHIP_SIZE. Height is capped rather than set so a wide
   name and a narrow one both sit on the same line of the grid, and dimmed
   until selected so the picker has the same emphasis it had as live text. */
.lg-font-name {
    display: block; width: 100%; height: auto; max-height: 34px;
    object-fit: contain; object-position: left center;
    margin-bottom: .3rem; opacity: .78;
}
.lg-font:hover .lg-font-name,
.lg-font.is-active .lg-font-name { opacity: 1; }
.lg-font-blurb { display: block; color: #7a7a7a; font-size: .72rem; line-height: 1.35; }

/* Ornaments, grouped by where they go. The group headings carry the layout
   information — "Above the name", "Either side" — which is the thing a flat
   list of eleven chips cannot tell you. */
.lg-ornament-group { margin-top: .75rem; margin-bottom: 0; }
.lg-chips--ornament label { font-size: .8rem; padding: .42rem .7rem; }

/* The illegibility slider. Its label is an <output> rather than a number,
   because nobody wants a logo that is 60 illegible — they want the one that
   looks overgrown, and the word is the thing they are actually choosing. */
.lg-spike-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.lg-spike-head label { margin-bottom: .35rem; }
.lg-spike-label,
#lg-spike-label {
    font-size: .82rem; color: #fff; font-weight: 600; letter-spacing: .01em;
}
.lg-range {
    -webkit-appearance: none; appearance: none; width: 100%;
    background: transparent; margin: .2rem 0 0; padding: 0;
}
.lg-range:focus { outline: none; }
.lg-range::-webkit-slider-runnable-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #303030, #ff0000);
}
.lg-range::-moz-range-track {
    height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, #303030, #ff0000);
}
.lg-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 17px; height: 17px; margin-top: -6.5px; border-radius: 50%;
    background: #fff; border: 2px solid #ff0000; cursor: pointer;
}
.lg-range::-moz-range-thumb {
    width: 15px; height: 15px; border-radius: 50%;
    background: #fff; border: 2px solid #ff0000; cursor: pointer;
}
.lg-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255,0,0,.35); }
.lg-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(255,0,0,.35); }
/* The five named settings, spread under the track. `space-between` puts the
   first and last against the ends, which is where their stops actually are. */
.lg-spike-ticks {
    display: flex; justify-content: space-between; gap: .3rem; margin-top: .4rem;
    font-size: .63rem; color: #5f5f5f; text-transform: uppercase; letter-spacing: .05em;
}
.lg-spike-ticks span:first-child { text-align: left; }
.lg-spike-ticks span:last-child { text-align: right; }
@media (max-width: 520px) {
    /* Five labels do not fit a phone. The ends carry the range on their own,
       and the <output> above the track is naming the current one anyway. */
    .lg-spike-ticks span:not(:first-child):not(:last-child) { display: none; }
}

.lg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.lg-chips label {
    position: relative; margin: 0; border: 1px solid #303030; border-radius: 4px; padding: .5rem .85rem;
    cursor: pointer; font-size: .84rem; color: #bbb;
    transition: border-color .12s, color .12s, background .12s;
}
.lg-chips input { position: absolute; opacity: 0; pointer-events: none; }
.lg-chips label:has(input:checked) { border-color: #ff0000; color: #fff; background: rgba(255,0,0,.09); }
.lg-chips label:hover { border-color: #4a4a4a; }
.lg-chips--size label { display: flex; flex-direction: column; gap: .15rem; line-height: 1.25; }
.lg-size-dims { font-size: .68rem; color: #6a6a6a; }

.lg-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.lg-swatch {
    position: relative; width: 38px; height: 38px; border-radius: 4px; cursor: pointer;
    border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    margin: 0;
}
.lg-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.lg-swatch:has(input:checked) { border-color: #fff; }
/* Two-tone: ink over ground, so a swatch shows the actual pairing. */
.lg-swatch--mono-dark  { background: linear-gradient(135deg, #0a0a0a 50%, #f2f2f2 50%); }
.lg-swatch--mono-light { background: linear-gradient(135deg, #f5f3ee 50%, #0e0e0e 50%); }
.lg-swatch--blood      { background: linear-gradient(135deg, #0a0a0a 50%, #c41616 50%); }
.lg-swatch--bone       { background: linear-gradient(135deg, #0a0a0a 50%, #e2d9c4 50%); }
.lg-swatch--acid       { background: linear-gradient(135deg, #0a0a0a 50%, #b2f516 50%); }
.lg-swatch--rust       { background: linear-gradient(135deg, #0a0a0a 50%, #c6601e 50%); }

/* Named on hover and for a screen reader. The swatch itself is the control;
   this is what stops "rust" and "blood" being a guess at 38 pixels. */
.lg-swatch-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* Custom colours. Hidden until the script enables the inputs, because a
   disabled picker that looks live is worse than one that is not there. */
.lg-colours { margin-top: 1rem; }
.lg-colour-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.lg-colour { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: #9a9a9a; margin: 0; }
.lg-colour input[type="color"] {
    width: 40px; height: 30px; padding: 0; border: 1px solid #333; border-radius: 4px;
    background: #0b0b0b; cursor: pointer;
}
.lg-mini {
    background: none; border: 1px solid #333; color: #8a8a8a; font-size: .72rem;
    padding: .35rem .6rem; border-radius: 4px; cursor: pointer; font-family: inherit;
}
.lg-mini:hover { border-color: #666; color: #ddd; }

.lg-toggle { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; color: #bbb; cursor: pointer; margin-top: .9rem; }
.lg-toggle input { margin-top: .2rem; accent-color: #ff0000; }

.lg-stage {
    grid-area: stage;
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: #080808; border: 1px solid #1d1d1d; border-radius: 8px; overflow: hidden;
    background-image: radial-gradient(#161616 1px, transparent 1px); background-size: 18px 18px;
}
.lg-canvas-box {
    position: relative;
    flex: 1 1 0; min-height: 0; padding: 1.2rem;
    display: flex; align-items: center; justify-content: center;
}
/* "Show margins" / "Zoom to logo": the preview is zoomed to the logo
   (logo_studio.js, trim) and this says so from the corner. */
.lg-trim {
    position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
    background: rgba(10, 10, 10, .82); border: 1px solid #333; color: #9a9a9a;
    font: inherit; font-size: .68rem; line-height: 1.2; padding: .3rem .6rem;
    border-radius: 999px; cursor: pointer;
}
.lg-trim:hover { color: #fff; border-color: #666; }
/* Chequerboard behind a transparent logo, so "transparent" is visibly true
   rather than something you find out when you open the file. */
.lg-canvas-box.is-transparent {
    background-color: #141414;
    background-image:
        linear-gradient(45deg, #1e1e1e 25%, transparent 25%, transparent 75%, #1e1e1e 75%),
        linear-gradient(45deg, #1e1e1e 25%, transparent 25%, transparent 75%, #1e1e1e 75%);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
}
.lg-canvas-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }

/* The strip of things the studio says back. It scrolls; the downloads below
   it do not, so however much turns up here they stay where they were. */
.lg-stage-foot {
    flex: 0 1 auto; min-height: 0; overflow-y: auto;
    padding: 0 .6rem; background: #0b0b0b;
}

.lg-downloads {
    flex: 0 0 auto; padding: .6rem; border-top: 1px solid #1d1d1d; background: #0b0b0b;
}
.lg-downloads > :first-child { margin-top: 0; }

.lg-actions { margin-top: .6rem; }
.lg-btn-download {
    display: block; text-align: center; background: #ff0000; border: 1px solid #ff0000;
    color: #fff; padding: .7rem 1rem; border-radius: 4px; font-weight: 700;
    text-decoration: none; font-size: .92rem;
}
.lg-btn-download:hover { background: #d51007; border-color: #d51007; }
/* The download row proper is one loud button; everything else is quiet.
   Vector and print matter enormously to the few people who need them and are
   noise to everyone else, so they sit under the main action rather than
   competing with it. */
.lg-actions { display: flex; gap: .5rem; align-items: stretch; }
.lg-actions .lg-btn-download { flex: 3 1 auto; }
.lg-actions > .lg-btn-ghost { flex: 1 1 0; max-width: 14rem; }
.lg-actions--secondary { margin-top: .5rem; }

/* The editor's downloads: the PNG in one click, the other four files in a
   list behind "More formats". The list is positioned against this box. */
.lg-downloads { position: relative; }
/* The downloads sheet's title on a phone (the phone block below); the
   laptop's download row needs none. */
.lg-downloads-title { display: none; }
.lg-actions .lg-btn-more { flex: 0 0 auto; }
.lg-btn-more {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    background: none; border: 1px solid #333; color: #bbb; border-radius: 4px;
    padding: .55rem 1rem; font: inherit; font-size: .84rem; cursor: pointer; white-space: nowrap;
}
.lg-btn-more:hover, .lg-btn-more[aria-expanded="true"] { border-color: #ff0000; color: #fff; }
.lg-btn-more i { font-size: .68rem; transition: transform .15s; }
.lg-btn-more[aria-expanded="true"] i { transform: rotate(180deg); }

/* Without the script every file shows, in a grid under the button; a
   phone gets one per row. Each says in a line what it is for. */
.lg-formats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .5rem; margin-top: .5rem;
}
.lg-format {
    display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem;
    border: 1px solid #2c2c2c; border-radius: 4px; background: #0d0d0d;
    color: #ddd; text-decoration: none; text-align: left;
}
.lg-format strong { font-size: .86rem; font-weight: 600; color: #eee; }
.lg-format strong i { font-size: .72rem; color: #8a8a8a; margin-right: .15rem; }
.lg-format-note { font-size: .72rem; color: #7a7a7a; line-height: 1.4; }
.lg-format:hover { border-color: #ff0000; }
.lg-format:hover .lg-format-note { color: #9a9a9a; }

/* With the script, folded until asked for, and opening upwards over the
   preview rather than taking height from it. */
.lg-js .lg-formats:not(.is-open) { display: none; }
.lg-js .lg-formats {
    position: absolute; right: .6rem; bottom: 100%; z-index: 20;
    width: min(24rem, calc(100% - 1.2rem)); margin: 0;
    grid-template-columns: 1fr; gap: .35rem; padding: .45rem;
    background: #111; border: 1px solid #333; border-radius: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
}

/* Mouse words for a mouse, finger words for a finger. */
.lg-on-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
    .lg-on-touch { display: inline; }
    .lg-on-mouse { display: none; }
}
.lg-btn-ghost {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .05rem; flex: 1 1 0; text-align: center; background: none;
    border: 1px solid #333; color: #bbb; padding: .5rem .7rem; border-radius: 4px;
    text-decoration: none; font-size: .8rem; font-family: inherit; cursor: pointer;
}
.lg-btn-ghost span { font-size: .68rem; color: #6a6a6a; }
.lg-btn-ghost:hover { border-color: #ff0000; color: #fff; }
.lg-btn-ghost:hover span { color: #9a9a9a; }

.lg-note { font-size: .78rem; color: #6a6a6a; margin-top: .7rem; text-align: center; }
.lg-note a { color: #ff4d4d; }
.lg-note strong { color: #c9c9c9; }

/* Everything under the editor. The wrap is as wide as the studio needs, which
   is far wider than anything anyone should have to read a line of text across. */
.lg-below, .lg-wrap > section { max-width: 1240px; }
.lg-below { margin-top: 1.2rem; }
/* The Adsterra banner (logo.html) keeps to the sections' left edge rather
   than centring itself in the studio's width, and spaces like them. */
.lg-wrap > .ad-slot--adsterra { margin: 3.5rem 0 0; }
.lg-below .lg-note { text-align: left; }

/* The example gallery. Cards rather than a bare grid of images because each
   one is a link into the editor, and it has to look like something you can
   click. */
.lg-examples { margin-top: 3.5rem; }
.lg-example-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .9rem; margin-top: 1.2rem;
}
.lg-example {
    display: block; border: 1px solid #262626; border-radius: 6px; overflow: hidden;
    background: #0b0b0b; text-decoration: none; transition: border-color .15s;
}
.lg-example:hover { border-color: #ff0000; }
.lg-example img { display: block; width: 100%; height: auto; }
.lg-example-look, .lg-example-genre {
    display: block; padding: .45rem .6rem 0; font-size: .72rem; color: #8a8a8a;
}
.lg-example-genre { padding: 0 .6rem .5rem; color: #ff4d4d; text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; }
.lg-example-look:last-child { padding-bottom: .55rem; }

.lg-artists { margin-top: 3.5rem; }
.lg-artists h2, .lg-examples h2 {
    color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em;
    border-left: 4px solid #ff0000; padding-left: .75rem; margin-bottom: .6rem;
}

.lg-siblings { margin-top: 3.5rem; }
.lg-siblings h2 {
    color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em;
    border-left: 4px solid #ff0000; padding-left: .75rem; margin-bottom: 1.1rem;
}

/* A laptop keeps both panes, with a slimmer rail. */
@media (max-width: 1439px) {
    .lg-editor { grid-template-columns: 320px minmax(0, 1fr); gap: .7rem; }
}

/* The editor is a host of the design frame's shell (df-shell, df-rail,
   df-stage, df-stage-box, df-panel; static/js/design/shell.js) for the phone
   layout below. On a laptop the grid above stands, so the shell's own
   stage-box look (a square grey tile for a canvas) is taken off the preview
   box here, and its panels sit flush in the rail. */
.lg-editor .df-panel { margin: 0; }
.lg-editor .lg-canvas-box { aspect-ratio: auto; max-height: none; min-height: 0; border-radius: 0; overflow: visible; }
.lg-editor .lg-canvas-box:not(.is-transparent) { background: none; }
.lg-editor .lg-stage { position: relative; top: auto; }

/* ---- Logo studio (static/js/logo_studio.js) --------------------------- */

/* The attribute has to win over the display rules below. */
.lg-wrap [hidden] { display: none !important; }

.lg-tabs {
    display: flex; flex-wrap: wrap; gap: 0 .1rem; flex: 0 0 auto;
    border-bottom: 1px solid #222;
}
.lg-tabs::-webkit-scrollbar { display: none; }
.lg-tabs button {
    background: none; border: 0; border-bottom: 2px solid transparent; color: #8a8a8a;
    padding: .6rem .55rem .5rem; font: inherit; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; cursor: pointer; white-space: nowrap;
}
.lg-tabs button:hover { color: #ddd; }
.lg-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: #ff0000; }
/* The sections, not everything with data-tab: the shell's own tab-bar
   buttons carry the attribute too (static/js/design/shell.js). */
#lg-form.is-tabbed .lg-tab:not(.is-current) { display: none; }
#lg-form.is-tabbed .lg-panel { margin-top: 0; }
#lg-form.is-tabbed .lg-panel + .lg-panel { margin-top: 1.25rem; }

/* The engine writes width and height on the <svg>, so auto/auto sizes it from
   its own proportions and the two maxima fit it to the stage. */
.lg-canvas-box svg { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
/* The letters are the frame's objects once the studio is running
   (static/js/design/svgobjects.js: .df-object, the selection box and the
   corner handles; design_frame.css has their look). touch-action only on the
   letters, so a finger elsewhere on the preview still scrolls the page. */

.lg-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex: 0 0 auto;
    padding: .55rem .6rem; background: rgba(12,12,12,.92); border-bottom: 1px solid #1d1d1d;
}
.lg-toolbar .lg-mini:disabled { opacity: .35; cursor: default; }
/* "More like this": six alternatives, as a strip of thumbnails.
   Sized by the tile rather than by a column count. Three columns of whatever
   the pane happened to be wide was fine when the stage was half the page; in
   the full-width studio it made each one a 460px picture, so six of them
   filled the space under the preview and pushed the download buttons out of
   sight -- which is the one thing that must never move. */
.lg-variations {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 132px));
    justify-content: start; gap: .4rem; margin-top: .6rem;
}
/* One shape for every tile, so a wide wordmark and a stacked one make a tidy
   row instead of a ragged one. */
.lg-variation {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 4 / 3; background: #0b0b0b; border: 1px solid #262626;
    border-radius: 4px; padding: .2rem; cursor: pointer; overflow: hidden;
}
.lg-variation:hover, .lg-variation:focus-visible { border-color: #ff0000; }
.lg-variation img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

.lg-print-check {
    display: flex; gap: .6rem; align-items: center; justify-content: space-between;
    margin-top: .6rem; font-size: .78rem; color: #e8a13a; line-height: 1.45;
    border: 1px solid rgba(232, 161, 58, .35); border-radius: 4px; padding: .5rem .65rem;
}
.lg-print-check .lg-mini { flex: none; color: #e8a13a; border-color: rgba(232, 161, 58, .5); }

#lg-reroll { margin-top: .7rem; }

.lg-letter-title { color: #bbb; margin: 0 0 .8rem; font-size: .88rem; }
.lg-letter-title strong { color: #ff4d4d; font-size: 1.3rem; margin-left: .3rem; }
.lg-nudge { display: flex; gap: .35rem; flex-wrap: wrap; }
.lg-nudge .lg-mini { min-width: 2.4rem; font-size: .95rem; }
.lg-chip-button {
    background: none; border: 1px solid #303030; border-radius: 4px; color: #bbb;
    padding: .45rem .75rem; font: inherit; font-size: .82rem; cursor: pointer;
}
.lg-chip-button:hover { border-color: #4a4a4a; }
.lg-chip-button[aria-pressed="true"] { border-color: #ff0000; color: #fff; background: rgba(255, 0, 0, .09); }
.lg-letter-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* A phone (the frame's breakpoint, design_frame.css): one column, the name
   first, then the preview, the toolbar and what the studio says back; the
   six tabs are the frame's bar at the bottom of the screen and each panel
   opens as a sheet over the lower half (the shell scrolls the stage up
   under the header first and holds the page). The downloads are the bar's
   red Download tab: a sheet with every file listed, no More formats fold.
   The rail is dissolved so its hidden panels take no room. */
@media (max-width: 899px) {
    .lg-editor {
        display: flex; flex-direction: column; gap: .8rem;
        height: auto; min-height: 0;
    }
    .lg-editor .lg-rail, .lg-editor .lg-rail-body { display: contents; }
    .lg-editor .lg-tabs { display: none; }
    .lg-editor .lg-stage {
        display: flex; flex-direction: column; position: relative; top: auto; z-index: auto;
        margin: 0; padding: 0; background: none; border: 0; border-radius: 0; overflow: visible;
    }
    /* The preview box above the scrim while a sheet is open, so the letters
       can still be tapped and dragged with a panel showing; the toolbar and
       the foot under it stay dimmed behind the sheet (the frame lifts the
       whole stage; here that would put the print check over the sheet). */
    html.df-sheet-open .lg-editor .lg-stage { z-index: auto; }
    html.df-sheet-open .lg-editor .lg-canvas-box { z-index: 1002; }
    /* A fixed height, not the logo's: the preview is zoomed to the logo once
       the script has the SVG, and a box that followed it would jump the page
       under the visitor's thumb. The frame's sum: what is left above a sheet. */
    .lg-editor .lg-canvas-box {
        order: -1; flex: 0 0 auto; min-width: 0; padding: .5rem;
        height: clamp(200px, calc(100vh - var(--df-header) - var(--df-tabbar) - 46vh - 64px), 340px);
        border: 1px solid #1d1d1d; border-radius: 8px;
    }
    .lg-editor .lg-canvas-box:not(.is-transparent) {
        background: #080808 radial-gradient(#161616 1px, transparent 1px); background-size: 18px 18px;
    }
    .lg-canvas-box svg, .lg-canvas-box img { max-height: 100%; }
    .lg-editor .lg-toolbar, .lg-editor .lg-stage-foot {
        max-height: none; overflow: visible; background: none; border: 0; padding: 0;
    }
    .lg-editor .lg-downloads .lg-actions { margin-top: 0; }
    /* In the sheet every file is in reach: the list is inline and the fold is
       gone; a title gives the sheet's close button a row of its own. */
    .lg-editor .df-panel.is-open .lg-downloads-title {
        display: block; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
        border-left: 3px solid #ff0000; padding-left: .6rem; margin: 0 0 .9rem;
    }
    .lg-editor .df-panel.is-open .lg-btn-more { display: none; }
    .lg-js .lg-editor .df-panel.is-open .lg-formats {
        display: grid; position: static; width: auto; margin-top: .6rem; padding: 0;
        background: none; border: 0; box-shadow: none;
    }
    /* Seven tabs across a phone: Ornament and Download have to fit 55px. */
    .lg-editor .df-tab { font-size: .52rem; letter-spacing: 0; }
    .lg-variations { grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: stretch; }
}

/* ---- Saved logos: share page, gallery, My logos (logo_views.py) -------- */

.lg-share { max-width: 1080px; margin: 110px auto 4rem; padding: 0 1.5rem; color: #ccc; }
.lg-share-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.lg-share-art { background: #0b0b0b; border: 1px solid #262626; border-radius: 6px; padding: 1rem; }
.lg-share-art.is-transparent {
    background-color: #141414;
    background-image:
        linear-gradient(45deg, #1e1e1e 25%, transparent 25%, transparent 75%, #1e1e1e 75%),
        linear-gradient(45deg, #1e1e1e 25%, transparent 25%, transparent 75%, #1e1e1e 75%);
    background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.lg-share-art img { display: block; width: 100%; height: auto; }
.lg-share-eyebrow { color: #ff4d4d; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin: 0 0 .3rem; }
.lg-share-side h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.lg-share-title { color: #bbb; margin: 0 0 .3rem; }
.lg-share-look { color: #7a7a7a; font-size: .85rem; margin: 0 0 1.4rem; }
.lg-share-actions { margin-bottom: .6rem; }
.lg-share-owner { font-size: .85rem; color: #8a8a8a; margin: 1rem 0 0; }
.lg-share-owner a, .lg-share-gallery a, .lg-share-credit a { color: #ff4d4d; }
.lg-share-credit {
    margin-top: 1.8rem; font-size: .85rem; line-height: 1.6; color: #9a9a9a;
    border-left: 3px solid #ff0000; background: #101010; padding: .9rem 1rem; border-radius: 4px;
}
.lg-share-credit .lg-noai-badge { margin-right: .4rem; }
.lg-share-gallery { font-size: .85rem; color: #8a8a8a; }
@media (max-width: 860px) { .lg-share-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

.lgg-genres { margin: 1.2rem 0 1.6rem; }
.lgg-genres span { color: #6a6a6a; font-size: .75em; margin-left: .2rem; }
.lgg-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem;
    margin: 1.2rem 0 2rem;
}
.lgg-item {
    display: block; background: #0b0b0b; border: 1px solid #262626; border-radius: 6px;
    overflow: hidden; text-decoration: none; transition: border-color .15s;
}
.lgg-item:hover { border-color: #ff0000; }
.lgg-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.lgg-name { display: block; padding: .45rem .6rem .55rem; font-size: .75rem; color: #9a9a9a; overflow-wrap: anywhere; }

.lgm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.lgm-card { background: #0f0f0f; border: 1px solid #262626; border-radius: 6px; overflow: hidden; }
.lgm-art { display: block; background: #0b0b0b; border-bottom: 1px solid #1e1e1e; }
.lgm-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.lgm-body { padding: .8rem .9rem 1rem; }
.lgm-rename { display: flex; gap: .4rem; }
.lgm-rename input {
    flex: 1; min-width: 0; background: #0b0b0b; border: 1px solid #333; color: #eee;
    border-radius: 4px; padding: .35rem .5rem; font: inherit; font-size: .85rem;
}
.lgm-meta { font-size: .75rem; color: #7a7a7a; margin: .55rem 0 .7rem; }
.lgm-status { color: #bbb; }
.lgm-status--pending { color: #e8a13a; }
.lgm-status--approved { color: #6fcf6f; }
.lgm-status--rejected { color: #ff6b6b; }
.lgm-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.lgm-actions form { margin: 0; }
.lgm-actions a.lg-mini { text-decoration: none; display: inline-block; }
.lgm-danger:hover { border-color: #ff0000; color: #ff6b6b; }
.lgm-band, .lgm-band-on { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .75rem; color: #9a9a9a; }
.lgm-band select { background: #0b0b0b; color: #ddd; border: 1px solid #333; border-radius: 4px; margin-left: .3rem; font: inherit; }
.lgm-band-on a { color: #ff4d4d; }
.lgm-history { margin-top: .8rem; font-size: .78rem; color: #8a8a8a; }
.lgm-history ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.lgm-history li { display: flex; gap: .5rem; align-items: center; padding: .2rem 0; }
.lgm-history li form { margin: 0; }
.lgm-history a { color: #ff4d4d; }

/* ---- My designs, the hub, and its tabs (21 Oct 2026) ------------------ */

.acct-tabs {
    display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid #262626; margin: 0 0 1.6rem;
}
.acct-tabs::-webkit-scrollbar { display: none; }
.acct-tabs a {
    flex: none; padding: .65rem .9rem; margin-bottom: -1px; white-space: nowrap;
    color: #8f8f8f; text-decoration: none; font-size: .88rem; font-weight: 600;
    border-bottom: 2px solid transparent;
}
.acct-tabs a:hover { color: #fff; }
.acct-tabs a[aria-current="page"] { color: #fff; border-bottom-color: #ff0000; }

/* The saved-designs grid. */
.md-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.md-filters a { text-decoration: none; }
.md-filters a[aria-current="page"] { border-color: #ff0000; color: #fff; }
.md-n { color: #6f6f6f; margin-left: .2rem; }
.md-filters a[aria-current="page"] .md-n { color: #ff4d4d; }
.md-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #111; }
.md-blank { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; color: #555; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.md-tool { color: #ff4d4d; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.md-off { font-size: .72rem; color: #7a7a7a; align-self: center; }
.md-starts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.pg-empty p a { color: #ff4d4d; }

/* The hub. */
.mdh-summary { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: -.1rem 0 .6rem; color: #ddd; font-weight: 700; font-size: .95rem; }
.mdh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mdh-head a { color: #ff4d4d; text-decoration: none; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.mdh-head a:hover { text-decoration: underline; }
.mdh-note { color: #8f8f8f; font-size: .85rem; margin: .9rem 0 0; }
.mdh-note a { color: #ff4d4d; }

.mdh-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.mdh-row {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 1rem; align-items: center;
    background: #0f0f0f; border: 1px solid #262626; border-radius: 8px; padding: .9rem 1rem;
}
.mdh-mark {
    width: 76px; height: 76px; border-radius: 6px; background: #0a0a0a; border: 1px solid #1f1f1f;
    display: flex; align-items: center; justify-content: center; overflow: hidden; color: #555;
}
.mdh-mark img { width: 100%; height: 100%; object-fit: contain; }
.mdh-row--kit .mdh-mark img { object-fit: cover; object-position: 50% 30%; }
.mdh-mark > span { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 2rem; color: #ff0000; }
.mdh-mark--date span { display: flex; flex-direction: column; align-items: center; line-height: 1.05; color: #ff4d4d; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.mdh-mark--date b { color: #fff; font-size: 1.7rem; letter-spacing: 0; }
.mdh-mark .fas { font-size: 1.5rem; }
.mdh-row-body h3 { color: #fff; font-size: 1.05rem; margin: 0; }
.mdh-row-body h3 a { color: #fff; text-decoration: none; }
.mdh-row-body h3 a:hover { color: #ff4d4d; }
.mdh-row-sub { color: #8a8a8a; font-size: .84rem; margin: .2rem 0 0; }
.mdh-pending { font-size: .68rem; font-weight: 600; color: #e8a13a; border: 1px solid rgba(232, 161, 58, .45); border-radius: 999px; padding: .05rem .5rem; vertical-align: middle; margin-left: .3rem; }
.mdh-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }
.mdh-link {
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .7rem;
    background: #161616; border: 1px solid #2e2e2e; border-radius: 5px;
    color: #ddd; font-size: .8rem; text-decoration: none;
}
.mdh-link .fas { color: #ff4d4d; font-size: .8rem; }
.mdh-link:hover { border-color: #ff4d4d; color: #fff; }
.mdh-link--main { background: #ff0000; border-color: #ff0000; color: #fff; font-weight: 700; }
.mdh-link--main .fas { color: #fff; }
.mdh-link--main:hover { background: #d51007; border-color: #d51007; }

.mdh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; margin-top: .9rem; }
.mdh-card {
    display: flex; flex-direction: column; min-width: 0; text-decoration: none;
    background: #0f0f0f; border: 1px solid #262626; border-radius: 6px; overflow: hidden;
    transition: border-color .15s, transform .15s;
}
a.mdh-card:hover { border-color: #ff0000; transform: translateY(-2px); }
.mdh-card--off { opacity: .55; }
.mdh-art { display: block; background: #0b0b0b; border-bottom: 1px solid #1e1e1e; line-height: 0; }
.mdh-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.mdh-art.md-art img { object-fit: cover; }
.mdh-art--poster canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; }
.mdh-name { color: #eee; font-size: .88rem; font-weight: 600; padding: .6rem .7rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdh-when { color: #777; font-size: .72rem; padding: .2rem .7rem .7rem; }

.mdh-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.mdh-swatches li { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.mdh-swatch { display: block; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #333; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25); }
.mdh-swatches code { color: #8a8a8a; font-size: .7rem; }
.mdh-faces { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.mdh-faces li { display: flex; flex-direction: column; gap: .3rem; background: #0f0f0f; border: 1px solid #262626; border-radius: 6px; padding: .5rem .7rem; }
.mdh-faces img { display: block; height: 34px; width: auto; }
.mdh-faces span { color: #8a8a8a; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.mdh-promo { display: flex; align-items: center; gap: .7rem; color: #8a8a8a; font-size: .85rem; margin: 1.1rem 0 0; }
.mdh-promo img { height: 44px; width: auto; max-width: 140px; object-fit: contain; background: #0a0a0a; border: 1px solid #262626; border-radius: 4px; padding: .2rem; }
.mdh-claim { color: #9a9a9a; margin: 1.4rem 0 0; }
.mdh-claim a { color: #ff4d4d; font-weight: 700; }
/* Five editors on one row at full width, rather than four and an orphan. */
ol.tl-grid.mdh-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.mdh-tiles .tl-card-preview { height: 150px; }
.mdh-tiles .tl-card--hub .tl-card-body { padding: 1rem 1.1rem 1.2rem; }

@media (max-width: 640px) {
    /* Two to a row and short, not five screens of cards. */
    ol.tl-grid.mdh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .mdh-tiles .tl-card-preview, .mdh-tiles .tl-card-preview:has(> .tl-card-preview-icon) { height: 96px; }
    .mdh-tiles .tl-card--hub .tl-card-body { padding: .7rem .75rem .85rem; }
    .mdh-tiles .tl-card h3 { font-size: .95rem; margin-bottom: .3rem; }
    .mdh-tiles .tl-card p { display: none; }
    .mdh-row { grid-template-columns: 56px minmax(0, 1fr); gap: .8rem; padding: .8rem; }
    .mdh-mark { width: 56px; height: 56px; }
    .mdh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* Logo of the week (partials _logo_of_week.html). */
.lg-otw {
    display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.2rem; align-items: center;
    background: #0f0f0f; border: 1px solid #262626; border-left: 3px solid #ff0000;
    border-radius: 6px; padding: .9rem; margin: 2rem 0;
}
.lg-otw-art { display: block; background: #0b0b0b; border-radius: 4px; overflow: hidden; }
.lg-otw-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.lg-otw-eyebrow { color: #ff4d4d; text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; margin: 0 0 .2rem; }
.lg-otw-name { margin: 0 0 .4rem; font-size: 1.3rem; overflow-wrap: anywhere; }
.lg-otw-name a { color: #fff; text-decoration: none; }
.lg-otw-note { margin: 0; color: #9a9a9a; font-size: .85rem; }
.lg-otw-note a { color: #ff4d4d; }
@media (max-width: 520px) { .lg-otw { grid-template-columns: 110px minmax(0, 1fr); } }

.lg-badge { margin-top: 1.4rem; font-size: .8rem; color: #8a8a8a; }
.lg-badge p { margin: 0 0 .5rem; }
.lg-badge img { display: block; margin-bottom: .5rem; }
.lg-badge textarea {
    width: 100%; background: #0b0b0b; color: #bbb; border: 1px solid #333; border-radius: 4px;
    font: .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .45rem; resize: vertical;
}

/* The animated export panel. */
.lg-animate {
    margin-top: .6rem; border: 1px solid #262626; border-radius: 6px; padding: .8rem .9rem;
    background: #0f0f0f; font-size: .8rem; color: #9a9a9a;
}
.lg-animate-lede { margin: 0 0 .6rem; line-height: 1.5; }
.lg-animate-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.lg-animate canvas { display: block; max-width: 160px; max-height: 240px; margin: .7rem 0 0; border: 1px solid #262626; }
.lg-animate-status { margin: .5rem 0 0; }
.lg-animate-status a { color: #ff4d4d; }

/* The studio's save bar. */
.lg-saved {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem;
    font-size: .78rem; color: #9a9a9a;
}
.lg-saved a { color: #ff4d4d; }
.lg-saved input {
    flex: 1 1 220px; min-width: 0; background: #0b0b0b; border: 1px solid #333; color: #ddd;
    border-radius: 4px; padding: .3rem .45rem; font: inherit; font-size: .75rem;
}
.lg-save-error { color: #ff6b6b; }

/* ---- Poster template gallery (/tools/poster/templates/) --------------- */

.pt-noscript {
    background: #141414; border: 1px solid #333; border-radius: 5px;
    padding: 1rem; color: #aaa; font-size: .9rem; margin-bottom: 2rem;
}
.pt-noscript a { color: #ff4d4d; }

.pt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.4rem;
    margin-bottom: 1rem;
}
/* The family filter (static/js/poster/templates.js), hidden until it runs; a
   card it filters out is [hidden], which the card's own display would win. */
.pt-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.pt-filters[hidden], .pt-card[hidden] { display: none; }
.pt-filter {
    background: #141414; border: 1px solid #2e2e2e; border-radius: 999px;
    padding: .38rem .8rem; color: #bbb; font: inherit; font-size: .8rem; cursor: pointer;
}
.pt-filter span { color: #777; margin-left: .15rem; }
.pt-filter:hover { border-color: #555; color: #fff; }
.pt-filter.is-active { border-color: #ff0000; color: #fff; background: rgba(255,0,0,.08); }
.pt-card {
    display: flex; flex-direction: column;
    background: #0f0f0f; border: 1px solid #242424; border-radius: 6px;
    overflow: hidden; transition: border-color .14s, transform .14s;
}
.pt-card:hover { border-color: #ff0000; transform: translateY(-2px); }

/* A fixed-height stage rather than a fixed aspect ratio: the templates span
   everything from a 1080x1920 story to a 1920x1005 Facebook cover, and a grid
   of cards that each size to their own poster is a mess of ragged rows. */
.pt-card-media {
    display: flex; align-items: center; justify-content: center;
    height: 260px; background: #0a0a0a; border-bottom: 1px solid #1e1e1e;
    padding: 1rem;
}
.pt-thumb {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    display: block; box-shadow: 0 6px 20px rgba(0,0,0,.55);
}

.pt-card-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.pt-card-size {
    display: inline-block; align-self: flex-start; margin-bottom: .6rem;
    background: #1b1b1b; border: 1px solid #2e2e2e; border-radius: 3px;
    padding: .18rem .5rem; font-size: .68rem; letter-spacing: .06em;
    text-transform: uppercase; color: #9a9a9a;
}
.pt-card-body h2 { color: #fff; font-size: 1.08rem; margin: 0 0 .3rem; }
.pt-card-for { color: #ff4d4d; font-size: .78rem; margin: 0 0 .6rem; letter-spacing: .02em; }
.pt-card-blurb { color: #8f8f8f; font-size: .88rem; line-height: 1.6; margin: 0 0 1.1rem; flex: 1; }
.pt-card-cta { color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; }
.pt-card-cta::after { content: " \2192"; }
.pt-card:hover .pt-card-cta { color: #ff4d4d; }

/* ---- Published poster gallery (/posters/) ----------------------------- */

.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.3rem;
    margin-bottom: 2rem;
}
.pg-item {
    display: flex; flex-direction: column; text-decoration: none;
    background: #0f0f0f; border: 1px solid #242424; border-radius: 6px;
    overflow: hidden; transition: border-color .14s, transform .14s;
}
.pg-item:hover { border-color: #ff0000; transform: translateY(-2px); }
.pg-item-media {
    display: flex; align-items: center; justify-content: center;
    height: 240px; background: #0a0a0a; padding: .9rem;
    border-bottom: 1px solid #1e1e1e;
}
.pg-item-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.pg-item-body { padding: .9rem 1rem 1rem; }
.pg-item-body strong { display: block; color: #fff; font-size: .95rem; margin-bottom: .3rem; line-height: 1.35; }
.pg-item-meta { display: block; color: #808080; font-size: .78rem; line-height: 1.5; }

.pg-pages { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.pg-pages a { color: #ff4d4d; text-decoration: none; font-size: .88rem; font-weight: 700; }
.pg-pages a:hover { text-decoration: underline; }
.pg-pages-at { color: #808080; font-size: .82rem; }

.pg-empty {
    background: #0f0f0f; border: 1px solid #242424; border-radius: 6px;
    padding: 2.5rem 1.5rem; text-align: center; margin-bottom: 1rem;
}
.pg-empty p { color: #8f8f8f; font-size: .95rem; margin: 0 0 1.4rem; }

@media (max-width: 640px) {
    .tl-page h1 { font-size: 2rem; }
    .tl-crumbs { margin-top: 95px; }
    .pt-card-media { height: 220px; }
    .pg-item-media { height: 190px; }
}

/* The contact sheet: one rendered image with twenty real links laid over it.
   The overlay is a grid of the same shape as the render, so the cells line up
   by construction rather than by a table of pixel offsets that would have to
   be kept in step with logo_sheet.py. */
.lg-sheet { margin: 2.6rem 0; scroll-margin-top: calc(var(--lg-header, 0px) + 1rem); }
.lg-sheet-frame { position: relative; margin-top: 1rem; }
.lg-sheet-img {
    display: block; width: 100%; height: auto; border-radius: 6px;
    background: #0c0c0c;
}
.lg-sheet-cells {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--sheet-cols), 1fr);
    grid-template-rows: repeat(var(--sheet-rows), 1fr);
}
.lg-sheet-cells a {
    display: block; border: 1px solid transparent; border-radius: 4px;
    transition: border-color .12s, background .12s;
}
.lg-sheet-cells a:hover,
.lg-sheet-cells a:focus-visible {
    border-color: #ff0000; background: rgba(255,0,0,.07); outline: none;
}
/* The caption is for screen readers and for the hover title; drawing twenty of
   them on the sheet would be twenty things to read instead of twenty shapes to
   judge at a glance, which is the whole point of a contact sheet. */
.lg-sheet-cells a span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
.lg-sheet-more { margin-top: 1rem; }

/* The whole folder. Given the accent border because it is the end of the
   journey the rest of the page is arranged around, without becoming a second
   primary button beside Download PNG. */

/* The mockups. Full width and lazily loaded: it is six renders' worth of work
   for something below the fold, and nobody is waiting on it. */
.lg-mockups { margin: 2.6rem 0; }
.lg-mockup-img {
    display: block; width: 100%; height: auto; margin-top: 1rem;
    border-radius: 6px; background: #1f1f1f;
}

/* Merch (docs/logo-maker.md, "Merch"). The block under the drawn shirt that
   hands over to a real one, product cards in the example gallery's style, and
   the merch links on the gallery, the logo of the week and My logos. */
.lg-sell {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem 1.5rem; margin-top: 1rem; padding: 1rem 1.1rem;
    background: #0f0f0f; border: 1px solid #262626; border-left: 3px solid #ff0000;
    border-radius: 6px;
}
.lg-sell-text { flex: 1 1 320px; min-width: 0; }
.lg-sell-text h3 { margin: 0 0 .35rem; color: #fff; font-size: 1rem; }
.lg-sell-text p { margin: 0; color: #9a9a9a; font-size: .85rem; line-height: 1.55; }
.lg-sell-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.lg-sell-actions > * { flex: 0 0 auto; }
.lg-sell button.lg-btn-download { font-family: inherit; cursor: pointer; }
.lg-sell button.lg-btn-download:disabled { opacity: .6; cursor: progress; }
.lg-sell-status { flex: 1 1 100%; margin: 0; color: #ff6b6b; font-size: .8rem; }
@media (max-width: 560px) { .lg-sell-actions, .lg-sell-actions > * { flex: 1 1 100%; } }

.lg-merch-note a { color: #ff4d4d; }
.lg-merch-card img { aspect-ratio: 1; object-fit: cover; background: #e9e9e9; }

.lg-otw-sale { margin-top: .35rem; }

.lgg-cell { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.lgg-merch { font-size: .72rem; color: #ff4d4d; text-decoration: none; padding: 0 .15rem; }
.lgg-merch:hover, .lgg-merch:focus-visible { text-decoration: underline; }

.lgm-merch-note { margin: -1.6rem 0 2rem; max-width: 680px; color: #8a8a8a; font-size: .85rem; line-height: 1.6; }
.lgm-merch-note a { color: #ff4d4d; }

/* ---- Scrollbars on the tool pages ---------------------------------------- */

/* The studio rails, thin and dark like the poster's. Chromium and Safari take
   the ::-webkit- rules; Firefox gets the standard ones, and only Firefox,
   because Chromium drops its own styling the moment those are set. */
.lg-rail-body::-webkit-scrollbar, .lg-stage-foot::-webkit-scrollbar { width: 10px; height: 10px; }
.lg-rail-body::-webkit-scrollbar-track, .lg-stage-foot::-webkit-scrollbar-track { background: transparent; }
.lg-rail-body::-webkit-scrollbar-thumb, .lg-stage-foot::-webkit-scrollbar-thumb {
    background: #2c2c2c; border-radius: 10px; border: 3px solid #0d0d0d;
}
.lg-rail-body::-webkit-scrollbar-thumb:hover, .lg-stage-foot::-webkit-scrollbar-thumb:hover { background: #ff0000; }
@supports not selector(::-webkit-scrollbar) {
    .lg-rail-body, .lg-stage-foot { scrollbar-width: thin; scrollbar-color: #2c2c2c transparent; }
}

/* Thin and dark to match the pages, red on hover. Chromium and Safari take the
   ::-webkit-scrollbar styles; Firefox, which only has the standard properties,
   gets those instead — and only Firefox, because Chromium ignores its own
   styling the moment the standard properties are set. */
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: #070707; }
html::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; border: 3px solid #070707; }
html::-webkit-scrollbar-thumb:hover { background: #ff0000; }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: thin; scrollbar-color: #2a2a2a #070707; }
}

/* The visible "Updated <date>" line the tool pages carry alongside their
   WebApplication dateModified and sitemap lastmod -- one date, three
   surfaces, maintained in seo_dates.py / band_names.UPDATED. */
.tl-updated { color: #666; font-size: .8rem; margin: 2rem 0 0; }

/* Per-name copy button on the generator, and the copy-link button on the
   checker result. data-copied is set by tool_use.js for the moment of
   feedback. */
.tl-copy {
    background: none; border: 1px solid #3a3a3a; border-radius: 4px;
    color: #9a9a9a; font-size: .78rem; font-weight: 600; cursor: pointer;
    padding: .35rem .6rem; transition: border-color .12s, color .12s;
}
.tl-copy:hover { border-color: #ff0000; color: #fff; }
.tl-copy[data-copied] { border-color: #1DB954; color: #7fe0a7; }

/* Foot of a generator name card: the logo door and the copy button share one
   strip. The button posts a copy event through tool_use.js. */
.bng-name-foot { display: flex; border-top: 1px solid #202020; }
.bng-name-foot .bng-name-logo { flex: 1 1 auto; border-top: 0; }
.bng-name-copy {
    border: 0; border-left: 1px solid #202020; background: rgba(255, 255, 255, .02);
    color: #7c7c7c; font-size: .68rem; font-weight: inherit; font-family: inherit;
    text-transform: uppercase; letter-spacing: .1em;
    padding: .5rem .9rem; cursor: pointer;
}
.bng-name-copy:hover, .bng-name-copy:focus-visible { background: rgba(255, 0, 0, .1); color: #ff4d4d; }
.bng-name-copy[data-copied] { color: #7fe0a7; }

/* The EPK tool's real counts under its lede (epk_pages.counts, 29 Oct 2026). */
.tl-proof { margin: -1.75rem 0 2.5rem; color: #8b8b8b; font-size: .9rem; }

/* The press kit leading the hub (views/tools/hub.html, 29 Oct 2026). */
.tl-feature { margin: 0 0 2.5rem; padding: 1.25rem 1.4rem; border: 1px solid #262626; border-left: 4px solid #ff0000; border-radius: 8px; background: #111; }
.tl-feature-eyebrow { margin: 0 0 .35rem; color: #8b8b8b; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.tl-feature h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.tl-feature h2 a { color: #fff; text-decoration: none; }
.tl-feature p { color: #bbb; line-height: 1.6; margin: 0 0 .75rem; max-width: 640px; }
.tl-feature-cta { color: #ff4d4d; font-weight: 700; text-decoration: none; }
.tl-feature-cta:hover, .tl-feature h2 a:hover { text-decoration: underline; }

.tl-draft { border: 1px dashed #ffb300; color: #ffd27a; background: rgba(255, 179, 0, .08); border-radius: 8px; padding: .7rem 1rem; font-size: .9rem; margin: 0 0 1rem; }
/* The draft banner (logo_studio.js): a logo this browser left unfinished,
   offered once on a bare landing. */
.lg-draft {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
    margin: 0 0 .9rem; padding: .65rem .9rem; border: 1px solid #333;
    border-radius: 8px; background: #141414; color: #bbb; font-size: .9rem;
}
.lg-draft p { margin: 0; }
.lg-draft strong { color: #eee; }
.lg-draft-actions { display: flex; align-items: center; gap: .75rem; }

/* The small line's controls (20 Oct 2026), under its field. */
.lg-subline-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; margin-top: .6rem; }
.lg-subline-control { display: block; margin: 0; }
.lg-subline-control > span {
    display: flex; justify-content: space-between; margin-bottom: .25rem;
    font-size: .72rem; color: #8c8c8c; text-transform: uppercase; letter-spacing: .07em;
}
.lg-subline-control output { text-transform: none; letter-spacing: 0; color: #bbb; }
.lg-subline-control select {
    width: 100%; background: #111; color: #ddd; border: 1px solid #333; border-radius: 4px;
    padding: .4rem .5rem; font-family: inherit; font-size: .85rem;
}
.lg-chips--subline { grid-column: 1 / -1; }

/* The growth seed row (20 Oct 2026). */
.lg-seed-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; font-size: .8rem; color: #bbb; }
.lg-seed-row > label { margin: 0; }
.lg-seed-input {
    width: 5.2rem; background: #111; color: #ddd; border: 1px solid #333; border-radius: 4px;
    padding: .3rem .4rem; font-family: inherit; font-size: .85rem;
}
.lg-check { display: inline-flex; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; color: #bbb; font-size: .8rem; }

/* The second ink (20 Oct 2026): a tick beside its picker. */
.lg-colour--second { display: flex; align-items: center; gap: .35rem; }
.lg-colour--second input[type="checkbox"] { margin: 0; }
.lg-colour--second input[type="color"]:disabled { opacity: .35; }

/* The twenty looks as SVG cells (20 Oct 2026): a grid of images rather than
   links laid over one sheet image. */
.lg-sheet-frame.is-svg .lg-sheet-img { display: none; }
.lg-sheet-frame.is-svg .lg-sheet-cells {
    position: static; grid-template-rows: none; gap: 10px; padding: 10px;
    background: #0c0c0c; border-radius: 6px;
}
.lg-sheet-frame.is-svg .lg-sheet-cells a img {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
}

/* The shortlist and the pins (20 Oct 2026). */
.lg-sheet-frame.is-svg .lg-cell { position: relative; }
.lg-sheet-frame.is-svg .lg-cell > a { display: block; }
.lg-pin {
    position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid #333; background: rgba(10,10,10,.82); color: #8a8a8a; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: .78rem;
}
.lg-pin:hover, .lg-pin:focus-visible { border-color: #ff0000; color: #fff; outline: none; }
.lg-pin.is-on { background: #ff0000; border-color: #ff0000; color: #fff; }
.lg-shortlist { margin: 1rem 0; padding: .9rem; border: 1px solid #2a2a2a; border-radius: 8px; background: #0f0f0f; }
.lg-shortlist-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.lg-shortlist-head h3 { margin: 0; font-size: 1rem; color: #eee; }
.lg-shortlist-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; margin-top: .7rem; }
.lg-short-item { position: relative; margin: 0; background: #0b0b0b; border: 1px solid #222; border-radius: 6px; padding: .5rem; }
.lg-short-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.lg-short-item figcaption { font-size: .7rem; color: #8a8a8a; margin: .35rem 0; min-height: 2.2em; }
.lg-short-drop { position: absolute; top: .35rem; right: .35rem; padding: .1rem .45rem; }

/* My logos as the hub (20 Oct 2026). */
.lgm-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; }
.lgm-row a.lg-mini { text-decoration: none; display: inline-block; }
.lgm-label { font-size: .68rem; color: #6f6f6f; text-transform: uppercase; letter-spacing: .07em; margin-right: .2rem; }
.lgm-badge { margin: 0 0 2rem; padding: 1rem; border: 1px solid #262626; border-radius: 6px; background: #0f0f0f; }
.lgm-badge h2 { font-size: 1rem; margin: 0 0 .4rem; color: #eee; }
.lgm-badge h2 span { font-size: .75rem; color: #6f6f6f; font-weight: normal; }
.lgm-badge p { color: #9a9a9a; font-size: .85rem; margin: 0 0 .6rem; }
.lgm-badge textarea { width: 100%; background: #0b0b0b; color: #bbb; border: 1px solid #333; border-radius: 4px; font: .75rem/1.4 monospace; padding: .5rem; }

/* The fonts page (logo_fonts.html, 20 Oct 2026). */
/* The fonts page's name box: one name, carried into every face's link. */
.lgf-try { margin: 1.2rem 0 .4rem; max-width: 34rem; }
.lgf-try label { display: block; font-size: .78rem; color: #bbb; margin-bottom: .35rem; }
.lgf-try-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.lgf-try input { flex: 1 1 14rem; min-width: 0; padding: .6rem .75rem; background: #111; border: 1px solid #333; border-radius: 6px; color: #fff; font: inherit; }
.lgf-try input:focus { outline: none; border-color: #ff0000; }
.lgf-try-note { font-size: .78rem; color: #888; margin: .5rem 0 0; }
.lgf-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.6rem; }
.lgf-jump a { font-size: .78rem; color: #bbb; border: 1px solid #333; border-radius: 999px; padding: .3rem .7rem; text-decoration: none; }
.lgf-jump a:hover { border-color: #ff0000; color: #fff; }
.lgf-group { margin: 0 0 2.2rem; scroll-margin-top: calc(var(--lg-header, 0px) + 1rem); }
.lgf-group h2 { font-size: 1.15rem; margin: 0 0 .8rem; color: #eee; }
.lgf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.lgf-face { background: #0f0f0f; border: 1px solid #262626; border-radius: 6px; overflow: hidden; }
.lgf-sample { display: block; background: #0a0a0a; border-bottom: 1px solid #1e1e1e; }
.lgf-sample img { display: block; width: 100%; height: auto; }
.lgf-body { padding: .7rem .8rem .9rem; }
.lgf-body h3 { margin: 0 0 .3rem; }
.lgf-body h3 img { display: block; height: 30px; width: auto; }
.lgf-blurb { color: #9a9a9a; font-size: .82rem; margin: 0 0 .25rem; }
.lgf-licence { color: #6f6f6f; font-size: .72rem; margin: 0 0 .6rem; }
.lgf-body a.lg-mini { text-decoration: none; display: inline-block; }
.lgf-prose { max-width: 46rem; margin: 2.4rem 0; color: #bbb; line-height: 1.6; }
.lgf-prose h2 { font-size: 1.15rem; color: #eee; margin: 1.6rem 0 .6rem; }
.lgf-more { margin-top: 1.4rem; }

/* The small line's controls fold away (20 Oct 2026). */
.lg-subline-more { margin-top: .45rem; }
.lg-subline-more > summary { font-size: .74rem; color: #8c8c8c; cursor: pointer; }
.lg-subline-more > summary:hover { color: #ddd; }

/* Compose mode (plan A8, static/js/logo_compose.js; on only behind its
   flag): the lockup editor takes the preview's place in the stage and
   scrolls on its own, so the stage keeps its size. */
.lg-canvas-box[hidden] { display: none; }
.lg-compose {
    flex: 1 1 0; min-height: 0; overflow-y: auto; padding: .6rem;
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: .6rem .9rem;
}
.lg-compose[hidden] { display: none; }
.lg-compose-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* The canvas stays in view while the panels beside it scroll. */
.lg-compose-main { position: sticky; top: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
/* While composing, the letters' own download row would download the letters
   alone; on a laptop it steps aside for the lockup's (on a phone it is the
   Download sheet, left as it is). */
@media (min-width: 761px) {
    .lg-stage.is-composing .lg-downloads { display: none; }
}
.lg-compose-field { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: #9a9a9a; margin: 0; }
.lg-compose-select, .lg-compose-input {
    background: #0f0f0f; color: #ddd; border: 1px solid #333; border-radius: 4px;
    padding: .35rem .5rem; font: inherit; font-size: .8rem; max-width: 100%;
}
.lg-compose-input { flex: 1 1 10rem; min-width: 0; }
.lg-compose-colour { width: 36px; height: 28px; padding: 0; border: 1px solid #333; border-radius: 4px; background: #0b0b0b; cursor: pointer; }
.lg-compose-history { margin-left: auto; display: inline-flex; gap: .3rem; }
.lg-compose-history .lg-mini:disabled { opacity: .4; cursor: default; }
.lg-compose-stage { position: relative; }
.lg-compose-canvas {
    display: block; width: min(100%, 62vh); height: auto; margin: 0 auto;
    border-radius: 6px; touch-action: pan-y; outline: none;
}
.lg-compose-canvas:focus-visible { box-shadow: 0 0 0 2px #ff0000; }
.lg-compose-status { margin: 0; min-height: 1.2em; font-size: .78rem; color: #9a9a9a; }
.lg-compose-status.is-error { color: #ff8a65; }
.lg-compose-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.lg-compose-actions .lg-btn-download { flex: 1 1 14rem; cursor: pointer; font-family: inherit; }
.lg-compose-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.lg-compose-col { min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.lg-compose-label { margin: .5rem 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.lg-compose-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.lg-compose-layers { display: grid; gap: 6px; }
.lg-compose-inspector { padding: .5rem; border-radius: 6px; background: rgba(255, 255, 255, .03); }
.lg-compose-inspector:empty { display: none; }
.lg-mini.is-on { border-color: #ff0000; color: #fff; }
@media (max-width: 760px) {
    .lg-compose { grid-template-columns: minmax(0, 1fr); }
    .lg-compose-main { position: static; }
    .lg-compose-select, .lg-compose-input { font-size: 16px; }
}