/*
 * The press kit sheet, shared by both halves of the EPK tool.
 *
 * views/bands/epk.html renders a kit generated from an Artist row;
 * views/tools/press_kit_detail.html renders one a band typed into the
 * builder. They are the same document to whoever receives the link, so they
 * have to look like the same document.
 *
 * This was an inline <style> on every kit until Sept 2026, which a browser
 * cannot cache and a theme cannot override.
 *
 * How a theme works. Every colour and the heading face is a custom property
 * on .epk-page. The base values below are `sheet`, the kit as it has always
 * looked. A theme is a [data-theme] block that changes the properties and as
 * few rules as it can get away with. The band's own choices -- accent colour
 * and heading face -- arrive in the element's style attribute from epk.look,
 * which also works out a version of the accent that can be read as text on
 * the theme's paper (--epk-accent-text) and what to write on a block of it
 * (--epk-accent-ink).
 *
 * Every theme prints as paper: black on white, no backgrounds. See the end.
 */

/* The poster maker's faces, under names of the kit's own. A browser fetches
   a declared face only when something on the page is set in it. The weight
   range says the one file covers every weight, which is what stops a bold
   heading being faked from a regular face. */
@font-face { font-family: 'EpkAnton'; src: url('../fonts/Anton-Regular.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'EpkCondensed'; src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'EpkBarlow'; src: url('../fonts/Barlow-Bold.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'EpkType'; src: url('../fonts/SpecialElite-Regular.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

.epk-page {
    --epk-accent: #ff0000;
    --epk-accent-ink: #ffffff;
    --epk-accent-text: #ff0000;
    --epk-head: 'Inter', system-ui, sans-serif;
    --epk-paper: #111;
    --epk-edge: #333;
    --epk-ink: #ccc;
    --epk-strong: #fff;
    --epk-soft: #999;
    --epk-muted: #888;
    --epk-faint: #777;
    --epk-line: #222;
    max-width: 900px; margin: 120px auto 4rem; padding: 0 1.5rem; color: var(--epk-ink);
}
.epk-sheet { background: var(--epk-paper); border: 1px solid var(--epk-edge); border-radius: 5px; padding: 3rem; }
.epk-header { display: flex; gap: 2rem; align-items: center; border-bottom: 2px solid var(--epk-accent); padding-bottom: 2rem; margin-bottom: 2rem; flex-wrap: wrap; }
.epk-header img { width: 180px; height: 180px; object-fit: cover; border-radius: 5px; }
/* The words take what room is left and wrap inside it. Without this a
   fourth figure made them too wide to sit beside the photo, and the name
   dropped underneath it. */
.epk-header > div { flex: 1 1 260px; min-width: 0; }
.epk-header h1 { font-family: var(--epk-head); font-weight: 800; letter-spacing: -0.02em; font-size: 3rem; color: var(--epk-strong); margin: 0 0 .5rem; }
.epk-genres { color: var(--epk-accent-text); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.epk-stats { display: flex; gap: 2.5rem; margin-top: 1rem; }
.epk-stats .stat b { display: block; color: var(--epk-strong); font-size: 1.4rem; }
.epk-stats .stat span { font-size: .8rem; color: var(--epk-soft); text-transform: uppercase; letter-spacing: .05em; }
.epk-hometown { color: var(--epk-muted); font-size: .85rem; margin-top: .35rem; }
.epk-quote { border-left: 4px solid var(--epk-accent); margin: 0 0 2.25rem; padding: .25rem 0 .25rem 1.25rem; }
.epk-quote p { font-size: 1.15rem; line-height: 1.6; color: var(--epk-strong); margin: 0 0 .5rem; font-style: italic; }
.epk-quote cite { color: var(--epk-muted); font-size: .85rem; font-style: normal; }
.epk-section { margin-bottom: 2.25rem; }
.epk-section h2 { font-family: var(--epk-head); color: var(--epk-strong); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; border-left: 4px solid var(--epk-accent); padding-left: .75rem; margin-bottom: 1rem; }
.epk-section p { line-height: 1.75; }
.epk-list { list-style: none; padding: 0; }
.epk-list li { padding: .5rem 0; border-bottom: 1px solid var(--epk-line); display: flex; justify-content: space-between; gap: 1rem; }
.epk-list li span.muted { color: var(--epk-muted); font-size: .9rem; }
/* Links in a list keep the site's own colour on the sheet, as they always
   have; on any other paper they take the kit's, which has been checked
   against it. */
.epk-page:not([data-theme="sheet"]) .epk-list a,
.epk-page:not([data-theme="sheet"]) .epk-gigs a { color: var(--epk-accent-text); }
.epk-links a { color: var(--epk-accent-text); text-decoration: none; margin-right: 1.5rem; }
.epk-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.epk-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.epk-embed-btn { background: transparent; border: 1px solid var(--epk-accent-text); color: var(--epk-accent-text); padding: .6rem 1.1rem; border-radius: 4px; cursor: pointer; font: inherit; }
.epk-embed { margin-bottom: .75rem; }
.epk-embed iframe { display: block; width: 100%; border: 0; border-radius: 4px; }
.epk-ffo { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.epk-ffo a, .epk-ffo span { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--epk-edge); border-radius: 999px; color: var(--epk-ink); font-size: .9rem; text-decoration: none; }
.epk-ffo a { border-color: var(--epk-accent); color: var(--epk-accent-text); }
.epk-quote cite a { color: inherit; }
.epk-stats { flex-wrap: wrap; row-gap: 1rem; }
.epk-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--epk-edge); color: var(--epk-faint); font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.epk-footer a { color: var(--epk-soft); }

/* The bar above the sheet is the site's, not the kit's: it sits on the site's
   own background whatever the theme, so it keeps the site's colours. */
.epk-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; }
.epk-toolbar .note { color: #777; font-size: .85rem; }
.epk-toolbar button { background: transparent; border: 1px solid #ff0000; color: #ff0000; padding: .55rem 1.1rem; border-radius: 4px; cursor: pointer; }
.epk-toolbar button:hover { background: rgba(255,0,0,.1); }

/* Above the sheet, to a member looking at their own kit from the studio. */
.epk-preview-note { margin: 0 0 1rem; padding: .6rem .9rem; border: 1px solid #333; border-left: 3px solid #ff0000; border-radius: 4px; background: #141414; color: #bbb; font-size: .85rem; }

/* Read by a screen reader and a search engine, not drawn: the band's name
   when its logo is standing in for it. */
.epk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- What leads the top of the kit (epk.HEADER_STYLES) ------------------- */

.epk-header--cover { display: block; }
.epk-header--cover img.epk-cover { display: block; width: 100%; height: auto; max-height: 380px; margin-bottom: 1.5rem; }
.epk-header--logo { display: block; }
.epk-header--logo img.epk-logo { display: block; width: auto; max-width: 100%; height: auto; max-height: 190px; margin: 0 0 1rem; object-fit: contain; border-radius: 0; }

/* --- Only the standalone kit has these: a wide press shot rather than a
   square Spotify thumbnail, a typed gig history, and an owner-only edit bar. */

.epk-shot { width: 100%; max-height: 380px; object-fit: cover; border-radius: 5px; margin-bottom: 1.5rem; }
.epk-credit { color: var(--epk-faint); font-size: .78rem; margin: -1.15rem 0 1.5rem; }
.epk-gigs { width: 100%; border-collapse: collapse; }
.epk-gigs td { padding: .5rem 0; border-bottom: 1px solid var(--epk-line); vertical-align: top; }
.epk-gigs td.date { color: var(--epk-muted); font-size: .9rem; white-space: nowrap; padding-right: 1.25rem; width: 1%; }
.epk-gigs td.city { color: var(--epk-muted); font-size: .9rem; text-align: right; }
.epk-owner { background: #1a1a1a; border: 1px solid #333; border-left: 3px solid #ff0000; border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.epk-owner p { margin: 0 0 .6rem; color: #ccc; font-size: .9rem; line-height: 1.6; }
.epk-owner a.btn { display: inline-block; background: #ff0000; color: #fff; text-decoration: none; padding: .5rem 1rem; border-radius: 4px; font-weight: 700; font-size: .85rem; }
.epk-share { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.epk-share input { flex: 1; min-width: 220px; background: #000; border: 1px solid #333; color: #7fe0a7; padding: .5rem .7rem; border-radius: 4px; font-family: monospace; font-size: .82rem; }
.epk-share button { background: transparent; border: 1px solid #ff0000; color: #ff0000; padding: .5rem 1rem; border-radius: 4px; cursor: pointer; font-size: .85rem; }

/* ==========================================================================
   Themes
   ========================================================================== */

/* --- paper: white and plain, the way a press office sends one ------------ */

.epk-page[data-theme="paper"] {
    --epk-paper: #fff;
    --epk-edge: #d8d8d8;
    --epk-ink: #333;
    --epk-strong: #111;
    --epk-soft: #666;
    --epk-muted: #666;
    --epk-faint: #777;
    --epk-line: #e6e6e6;
}
.epk-page[data-theme="paper"] .epk-sheet { border-radius: 2px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }

/* --- blackout: the photo across the top, the name over it ---------------- */

.epk-page[data-theme="blackout"] {
    --epk-paper: #000;
    --epk-edge: #1e1e1e;
    --epk-line: #1e1e1e;
}
.epk-page[data-theme="blackout"] .epk-sheet { padding: 0; overflow: hidden; }
.epk-page[data-theme="blackout"] .epk-body { padding: 2.5rem 3rem 3rem; }
.epk-page[data-theme="blackout"] .epk-header { position: relative; margin: 0; padding: 3rem; border-bottom: 4px solid var(--epk-accent); }
.epk-page[data-theme="blackout"] .epk-header h1 { font-size: clamp(2.8rem, 8vw, 5rem); line-height: .95; text-transform: uppercase; letter-spacing: 0; }
.epk-page[data-theme="blackout"] .epk-header--cover { display: flex; align-items: flex-end; min-height: 380px; }
.epk-page[data-theme="blackout"] .epk-header--cover img.epk-cover { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; border-radius: 0; object-fit: cover; filter: grayscale(.35) brightness(.5); }
.epk-page[data-theme="blackout"] .epk-header--cover > div { position: relative; }
.epk-page[data-theme="blackout"] .epk-header--cover .epk-stats .stat span,
.epk-page[data-theme="blackout"] .epk-header--cover .epk-hometown { color: #ddd; }
.epk-page[data-theme="blackout"] .epk-section h2 { font-size: 1.5rem; letter-spacing: .04em; }

/* --- zine: photocopied, typewriter headings, black on off-white ---------- */

.epk-page[data-theme="zine"] {
    --epk-paper: #f2efe6;
    --epk-edge: #111;
    --epk-ink: #1c1c1c;
    --epk-strong: #000;
    --epk-soft: #333;
    --epk-muted: #444;
    --epk-faint: #555;
    --epk-line: #111;
}
.epk-page[data-theme="zine"] .epk-sheet { border: 2px solid #111; border-radius: 0; box-shadow: 8px 8px 0 var(--epk-accent); }
.epk-page[data-theme="zine"] .epk-header { border-bottom: 3px double #111; }
.epk-page[data-theme="zine"] .epk-header h1 { letter-spacing: 0; text-transform: uppercase; }
.epk-page[data-theme="zine"] .epk-header img,
.epk-page[data-theme="zine"] .epk-photos img { border: 2px solid #111; border-radius: 0; filter: grayscale(1) contrast(1.3); }
.epk-page[data-theme="zine"] .epk-header--logo img.epk-logo { border: 0; filter: none; }
.epk-page[data-theme="zine"] .epk-section h2 { display: inline-block; background: #111; color: #f2efe6; border-left: 0; padding: .35rem .7rem; letter-spacing: .04em; transform: rotate(-1deg); }
.epk-page[data-theme="zine"] .epk-list li,
.epk-page[data-theme="zine"] .epk-gigs td { border-bottom: 1px dashed #111; }
.epk-page[data-theme="zine"] .epk-quote { border-left: 0; border-top: 2px solid #111; border-bottom: 2px solid #111; padding: 1rem 0; }
.epk-page[data-theme="zine"] .epk-footer { border-top: 3px double #111; }

/* --- poster: gig-poster type on a block of the band's colour ------------- */

.epk-page[data-theme="poster"] {
    --epk-paper: #0b0b0b;
    --epk-edge: #262626;
    --epk-line: #262626;
}
.epk-page[data-theme="poster"] .epk-sheet { padding: 0; overflow: hidden; border-radius: 0; }
.epk-page[data-theme="poster"] .epk-body { padding: 2.5rem 3rem 3rem; }
.epk-page[data-theme="poster"] .epk-header { margin: 0; padding: 3rem; border-bottom: 0; background: var(--epk-accent); color: var(--epk-accent-ink); }
.epk-page[data-theme="poster"] .epk-header h1 { color: var(--epk-accent-ink); font-size: clamp(3rem, 10vw, 6rem); line-height: .9; text-transform: uppercase; letter-spacing: 0; font-weight: 400; }
.epk-page[data-theme="poster"] .epk-header .epk-genres,
.epk-page[data-theme="poster"] .epk-header .epk-hometown,
.epk-page[data-theme="poster"] .epk-header .epk-stats .stat b,
.epk-page[data-theme="poster"] .epk-header .epk-stats .stat span { color: var(--epk-accent-ink); }
.epk-page[data-theme="poster"] .epk-header .epk-genres { font-weight: 700; }
.epk-page[data-theme="poster"] .epk-header img { border-radius: 0; }
.epk-page[data-theme="poster"] .epk-section h2 { font-size: 1.7rem; letter-spacing: .02em; border-left: 0; border-bottom: 3px solid var(--epk-accent); padding: 0 0 .35rem; font-weight: 400; }

@media (max-width: 600px) {
    .epk-sheet { padding: 1.5rem; }
    .epk-header h1 { font-size: 2.2rem; }
    .epk-page[data-theme="blackout"] .epk-header,
    .epk-page[data-theme="poster"] .epk-header { padding: 1.5rem; }
    .epk-page[data-theme="blackout"] .epk-body,
    .epk-page[data-theme="poster"] .epk-body { padding: 1.5rem; }
    .epk-page[data-theme="blackout"] .epk-header--cover { min-height: 260px; }
}

/* ==========================================================================
   Print. Every theme prints as paper.

   The whole point of the sheet is that a promoter can print it to PDF and it
   still reads. A browser does not print backgrounds unless told to, so a
   theme's white-on-colour heading would come out white on white: the
   properties are forced back to black on white, over the band's own choices
   in the style attribute, which is what !important is for here.
   ========================================================================== */

@media print {
    nav, footer, .epk-toolbar, .epk-owner, .epk-preview-note, #navbar, .footer { display: none !important; }
    body { background: #fff !important; }
    .epk-page {
        --epk-paper: #fff !important;
        --epk-edge: #bbb !important;
        --epk-ink: #222 !important;
        --epk-strong: #000 !important;
        --epk-soft: #444 !important;
        --epk-muted: #555 !important;
        --epk-faint: #555 !important;
        --epk-line: #ccc !important;
        --epk-accent-ink: #000 !important;
        --epk-accent-text: #000 !important;
        margin: 0; max-width: none; padding: 0;
    }
    .epk-page .epk-sheet { background: #fff; border: none; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; color: #222; }
    .epk-page .epk-body { padding: 0 !important; }
    .epk-page .epk-header { position: static; background: none !important; margin: 0 0 1.5rem !important; padding: 0 0 1.5rem !important; min-height: 0 !important; border-bottom: 2px solid #000 !important; }
    .epk-page .epk-header h1 { color: #000 !important; }
    .epk-page .epk-header img.epk-cover { position: static !important; width: 100% !important; height: auto !important; max-height: 300px !important; filter: none !important; margin: 0 0 1rem !important; }
    .epk-page .epk-header .epk-genres,
    .epk-page .epk-header .epk-hometown,
    .epk-page .epk-header .epk-stats .stat b,
    .epk-page .epk-header .epk-stats .stat span { color: #000 !important; }
    .epk-page .epk-section { break-inside: avoid; }
    .epk-page .epk-section h2 { background: none !important; color: #000 !important; transform: none !important; }
    .epk-page .epk-photos img, .epk-page .epk-header img { filter: none !important; }
    .epk-page .dp-embed, .epk-page .epk-embed-btn { display: none !important; }
}