/*
 * The press kit tool page (/tools/epk/), the pages around it
 * (/tools/epk/<guide>/) and My press kits (10 Nov 2026).
 *
 * These rules were the "EPK tool" part of tools.css; they moved here so
 * only the pages that use them load them, and were redrawn on the tokens
 * in epk_ui.css (linked before this file). Prefixes: epkt- the tool page
 * and what the guides share with it, epkb- words to copy, epkx- the
 * examples page, epkg- the checklist guide, pkm- My press kits.
 *
 * The page's shell is still tools.css (.tl-page, .tl-section, .tl-faq,
 * .tl-prose): .epkt-page on the same element is what turns it into this.
 *
 * One primary action a page: the filled red button starts a kit. Everything
 * else is an outline or a link.
 */

/* --- the page -------------------------------------------------------------- */

.epkt-page { max-width: 1180px; color: var(--eu-text); }
.epkt-page--guide { max-width: 980px; }
.epkt-page--narrow { max-width: 640px; }
@media (prefers-reduced-motion: no-preference) {
    html:has(.epkt-page) { scroll-behavior: smooth; }
}
.epkt-page :is(a, button, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--eu-focus); outline-offset: 2px; border-radius: 4px;
}

.epkt-page h1 {
    font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 900; line-height: 1.02; letter-spacing: -.035em;
    margin: 0 0 1rem; text-wrap: balance;
}
.epkt-page--guide h1, .epkt-page--narrow h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.06; }
.epkt-page .tl-lede { color: var(--eu-muted); font-size: 1.06rem; line-height: 1.65; max-width: 62ch; }
.epkt-page .tl-lede a, .epkt-sub a, .epkt-note a { color: var(--eu-accent-text); }
.epkt-page .tl-proof { color: var(--eu-faint); }

/* A section's heading: sentence case under a short red rule, where the
   other tool pages have small capitals. The page reads as one thing told in
   order, so its headings are the size of what they introduce. */
.epkt-page .tl-section { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.epkt-page .tl-section > h2,
.epkt-page .tl-section > .epkt-find-copy > h2 {
    border-left: 0; padding: 0; margin: 0 0 1.25rem; text-transform: none;
    font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
    text-wrap: balance;
}
.epkt-page .tl-section > h2::before,
.epkt-page .tl-section > .epkt-find-copy > h2::before {
    content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--eu-accent);
    margin-bottom: .8rem;
}
.epkt-page .tl-hub-intro { color: var(--eu-muted); margin: -.6rem 0 1.25rem; font-size: .98rem; }
.epkt-sub { color: var(--eu-muted); font-size: .95rem; line-height: 1.65; margin: 0 0 1rem; max-width: 68ch; }
.epkt-sub--after { margin: .9rem 0 0; font-size: .9rem; }
.epkt-note { color: var(--eu-faint); font-size: .86rem; line-height: 1.6; margin: .8rem 0 0; }

/* --- buttons ---------------------------------------------------------------- */

.epkt-build, .epkt-ghost, .epkt-start button, .epkt-search button {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px;
    padding: .7rem 1.3rem; border-radius: var(--eu-r); border: 1px solid transparent;
    font: inherit; font-size: .98rem; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background var(--eu-fast), border-color var(--eu-fast), transform var(--eu-fast);
}
.epkt-build, .epkt-start button, .epkt-search button { background: var(--eu-accent-fill); color: #fff; }
.epkt-build:hover, .epkt-start button:hover, .epkt-search button:hover { background: var(--eu-accent-fill-hover); color: #fff; }
.epkt-ghost { background: transparent; border-color: var(--eu-line-2); color: #fff; }
.epkt-ghost:hover { border-color: #fff; color: #fff; }
.epkt-build:active, .epkt-ghost:active, .epkt-start button:active, .epkt-search button:active { transform: translateY(1px); }
.epkt-build i, .epkt-start button i { font-size: .85em; }

/* --- the opening ------------------------------------------------------------ */

.epkt-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin: .75rem 0 clamp(3rem, 6vw, 4.5rem);
}
/* A red light behind the picture; under everything, and gone on paper. */
.epkt-hero::before {
    content: ""; position: absolute; z-index: 0; right: 0; top: -12%; width: 56%; height: 124%;
    background: radial-gradient(closest-side, rgba(255, 0, 0, .2), rgba(255, 0, 0, 0) 72%); pointer-events: none;
}
.epkt-hero-copy, .epkt-hero-art { position: relative; z-index: 1; min-width: 0; }
.epkt-eyebrow { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.epkt-eyebrow span {
    padding: .3rem .7rem; border: 1px solid var(--eu-line-2); border-radius: 999px; color: var(--eu-muted);
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.epkt-eyebrow span:first-child { color: #fff; border-color: rgba(255, 0, 0, .6); background: var(--eu-accent-wash); }
.epkt-hero .tl-lede { margin-bottom: 1.6rem; }
.epkt-hero .tl-proof { margin: -.8rem 0 1.6rem; }

/* The quick start: a card, because it is the thing to do here. */
.epkt-startcard {
    position: relative; scroll-margin-top: 110px; padding: 1.25rem 1.25rem 1.1rem; background: var(--eu-surface);
    border: 1px solid var(--eu-line-2); border-radius: var(--eu-r-l); box-shadow: var(--eu-shadow);
}
.epkt-page--guide .epkt-startcard { max-width: 640px; }
.epkt-startcard::before {
    content: ""; position: absolute; left: 1.25rem; right: 40%; top: -1px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--eu-accent), rgba(255, 0, 0, 0));
}
.epkt-startcard h2, .epkt-page .tl-section > .epkt-startcard h2 {
    margin: 0 0 .9rem; padding: 0; border: 0; color: var(--eu-muted);
    font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
}
.epkt-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: end; }
.epkt-start label { display: grid; gap: .4rem; min-width: 0; color: var(--eu-text); font-size: .84rem; font-weight: 600; }
.epkt-start em { color: var(--eu-faint); font-style: normal; font-weight: 400; }
.epkt-start-name, .epkt-start button, .epkt-start-name + .epkt-start-photo { grid-column: 1 / -1; }
.epkt-start button { min-height: 54px; font-size: 1.04rem; }
.epkt-start input[type="text"], .epkt-start select, .epkt-search input {
    width: 100%; min-height: 48px; box-sizing: border-box; padding: .7rem .9rem; background: var(--eu-well);
    border: 1px solid var(--eu-line-2); border-radius: var(--eu-r); color: #fff; font: inherit; font-size: 1rem;
    transition: border-color var(--eu-fast), box-shadow var(--eu-fast);
}
.epkt-start select { cursor: pointer; }
.epkt-start input::placeholder, .epkt-search input::placeholder { color: #6f6f6f; }
.epkt-start input[type="file"] {
    width: 100%; min-height: 48px; box-sizing: border-box; padding: .4rem; background: var(--eu-well);
    border: 1px dashed var(--eu-line-2); border-radius: var(--eu-r); color: var(--eu-muted);
    font: inherit; font-size: .84rem; cursor: pointer;
}
.epkt-start input[type="file"]::file-selector-button {
    margin-right: .7rem; padding: .5rem .8rem; background: var(--eu-surface-3); border: 1px solid var(--eu-line-2);
    border-radius: var(--eu-r-s); color: #fff; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.epkt-start input:hover, .epkt-start select:hover, .epkt-search input:hover { border-color: #555; }
.epkt-start input:focus-visible, .epkt-start select:focus-visible, .epkt-search input:focus-visible {
    outline: none; border-color: var(--eu-accent); box-shadow: 0 0 0 3px var(--eu-accent-ring);
}

/* The picture: three looks as real sheets (_epk_hero_kit.html), each the
   kit's own markup drawn 760px wide by epk.css and scaled to its card
   (2.5 x .4 = 1, so the paper fills it whatever the column's width). */
.epkt-hero-art { height: clamp(380px, 44vw, 540px); }
.epkt-shot {
    position: absolute; width: 58%; aspect-ratio: 3 / 4; overflow: hidden; container-type: inline-size;
    background: #111; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; box-shadow: var(--eu-shadow-l);
}
.epkt-shot .epk-page {
    width: 760px; width: calc(100cqw * 2.5); max-width: none; margin: 0; padding: 0;
    transform: scale(.4); transform-origin: top left; pointer-events: none;
}
.epkt-shot .epk-sheet { min-height: 1040px; border: 0; border-radius: 0; box-shadow: none !important; }
/* Inset by what turning them adds, so nothing reaches past the page. */
.epkt-shot--paper { left: 4%; top: 9%; transform: rotate(-7deg); }
.epkt-shot--zine { right: 4%; top: 0; transform: rotate(6deg); }
.epkt-shot--poster { left: 21%; top: 13%; z-index: 2; transform: rotate(-1.5deg); }
.epkt-ping {
    position: absolute; z-index: 3; left: 2%; bottom: 5%; display: inline-flex; align-items: center; gap: .6rem;
    padding: .55rem .95rem .55rem .6rem; background: #111; border: 1px solid var(--eu-line-2); border-radius: 999px;
    box-shadow: var(--eu-shadow); color: var(--eu-muted); font-size: .84rem; white-space: nowrap;
}
.epkt-ping i {
    display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--eu-ok-wash); color: var(--eu-ok); font-size: .8rem;
}
.epkt-ping b { color: #fff; margin-right: .3rem; }

@media (max-width: 960px) {
    .epkt-hero { grid-template-columns: minmax(0, 1fr); }
    .epkt-hero::before { left: 0; right: 0; top: 45%; width: auto; height: 70%; }
    .epkt-hero-art { height: clamp(300px, 78vw, 460px); max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 560px) {
    /* The words and the start first; the looks have their own section below. */
    .epkt-hero-art, .epkt-hero::before { display: none; }
    .epkt-start { grid-template-columns: minmax(0, 1fr); }
    .epkt-start > * { grid-column: 1 / -1; }
}

/* --- kits made in this browser ---------------------------------------------- */

.epkt-mine {
    margin: 0 0 2.5rem; padding: 1.1rem 1.25rem; background: var(--eu-surface); border: 1px solid var(--eu-line);
    border-left: 3px solid var(--eu-accent); border-radius: var(--eu-r);
}
.epkt-mine h3 { margin: 0 0 .5rem; color: #fff; font-size: 1rem; }
.epkt-mine ul { list-style: none; margin: 0; padding: 0; }
.epkt-mine li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .55rem 0; border-top: 1px solid var(--eu-line); }
.epkt-mine li:first-child { border-top: 0; }
.epkt-mine a { color: #fff; font-weight: 600; text-decoration: none; }
.epkt-mine a:hover { color: var(--eu-accent-text); }
.epkt-mine .meta { color: var(--eu-faint); font-size: .84rem; }
.epkt-mine .epkt-mine-edit {
    margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .8rem;
    border: 1px solid var(--eu-line-2); border-radius: var(--eu-r-s); font-size: .84rem;
}
.epkt-mine .epkt-mine-edit:hover { border-color: var(--eu-accent); color: #fff; }

/* --- find the kit we built ---------------------------------------------------- */

.epkt-find {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem 2.5rem; align-items: center;
    scroll-margin-top: 110px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--eu-surface);
    border: 1px solid var(--eu-line); border-radius: var(--eu-r-l);
}
.epkt-find .epkt-sub { margin: 0; }
.epkt-search { display: flex; gap: .5rem; margin: 0; }
.epkt-search input { flex: 1 1 auto; min-width: 0; }
.epkt-search button { flex: 0 0 auto; }
.epkt-find .epkt-results { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--eu-line); }
.epkt-find .epkt-results > .epkt-sub { margin-bottom: 1rem; }
@media (max-width: 760px) {
    .epkt-find { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .epkt-search { flex-wrap: wrap; }
    .epkt-search button { flex: 1 1 100%; }
}

.epkt-result {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 1rem;
    padding: .35rem 0; border-bottom: 1px solid var(--eu-line);
}
.epkt-results .epkt-result:last-child { border-bottom: 0; }
.epkt-result > a { display: inline-flex; align-items: center; min-height: var(--eu-tap); color: #fff; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.epkt-result > a:hover { color: var(--eu-accent-text); }
.epkt-result > a::after { content: "\2192"; margin-left: .45rem; color: var(--eu-accent-text); transition: margin-left var(--eu-fast); }
.epkt-result > a:hover::after { margin-left: .7rem; }
.epkt-result .meta { color: var(--eu-faint); font-size: .86rem; text-align: right; }
.epkt-result .meta a { color: var(--eu-accent-text); }

/* --- how it works ------------------------------------------------------------- */

.epkt-steps {
    list-style: none; margin: 0; padding: 0; counter-reset: epkt-step;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem;
}
.epkt-steps li {
    counter-increment: epkt-step; padding: 1.2rem 1.2rem 1.3rem; background: var(--eu-surface);
    border: 1px solid var(--eu-line); border-radius: var(--eu-r);
}
.epkt-steps li::before {
    content: counter(epkt-step); display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .9rem;
    border: 1px solid rgba(255, 0, 0, .45); border-radius: 50%; background: var(--eu-accent-wash);
    color: #fff; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.epkt-steps b { display: block; margin-bottom: .4rem; color: #fff; font-size: 1.02rem; line-height: 1.3; }
.epkt-steps span { color: var(--eu-muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 960px) { .epkt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .epkt-steps { grid-template-columns: minmax(0, 1fr); } }

/* --- what is in it, and what is free ------------------------------------------ */

.epkt-includes {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.epkt-includes--lead { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.epkt-includes li {
    padding: 1.2rem 1.2rem 1.3rem; background: var(--eu-surface); border: 1px solid var(--eu-line);
    border-radius: var(--eu-r);
}
.epkt-includes--lead li { background: linear-gradient(180deg, #171717, var(--eu-surface)); border-color: var(--eu-line-2); }
.epkt-includes li > i {
    display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .9rem; border-radius: 8px;
    background: var(--eu-accent-wash); color: var(--eu-accent-text); font-size: 1rem;
}
.epkt-includes b { display: block; margin-bottom: .4rem; color: #fff; font-size: 1.02rem; line-height: 1.3; }
.epkt-includes span { color: var(--eu-muted); font-size: .9rem; line-height: 1.6; }
@media (max-width: 960px) {
    .epkt-includes, .epkt-includes--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .epkt-includes, .epkt-includes--lead { grid-template-columns: minmax(0, 1fr); }
}

/* --- the looks: each a miniature of the real sheet (_epk_look_mini.html),
   the kit drawn at the card's width times 4.2373 and scaled by .236 ------------ */

.epkt-looks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .epkt-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.epkt-look { margin: 0; min-width: 0; }
.epkt-mini {
    position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: inline-size;
    background: #0d0d0d; border: 1px solid var(--eu-line-2); border-radius: var(--eu-r);
}
.epkt-mini .epk-page {
    width: 760px; width: calc(100cqw * 4.2373); max-width: none; margin: 0; padding: 0;
    transform: scale(.236); transform-origin: top left; pointer-events: none;
}
/* The paper fills its card: 5 / 4 of the card's width, at the page's scale. */
.epkt-mini .epk-sheet { min-height: 1000px; min-height: calc(100cqw * 5.3); padding: 2.2rem 2.4rem; border: 0; border-radius: 0; box-shadow: none !important; }
@media (min-width: 900px) {
    /* Six of them (the ready-made styles): two rows of three, not five and
       one. The cards are wider, so the kit is drawn at 2.5 times the card
       and scaled by .4, which keeps it near the 760px it was drawn for. */
    .epkt-looks:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .epkt-looks:has(> :nth-child(6):last-child) .epkt-mini .epk-page { width: calc(100cqw * 2.5); transform: scale(.4); }
    .epkt-looks:has(> :nth-child(6):last-child) .epkt-mini .epk-sheet { min-height: calc(100cqw * 3.15); }
}
.epkt-look figcaption { display: grid; gap: .15rem; margin-top: .7rem; font-size: .95rem; }
.epkt-look figcaption strong { color: #fff; }
.epkt-look figcaption .meta { color: var(--eu-muted); font-size: .86rem; line-height: 1.5; }
.epkt-look figcaption a { display: inline-flex; align-items: center; min-height: 36px; color: var(--eu-accent-text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.epkt-look figcaption a:hover { text-decoration: underline; }
@media (max-width: 560px) { .epkt-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 900px) { .epkt-look figcaption a { min-height: var(--eu-tap); } }

/* --- what each step up adds ------------------------------------------------------ */

.epkt-compare-wrap { overflow-x: auto; background: var(--eu-surface); border: 1px solid var(--eu-line); border-radius: var(--eu-r-l); }
.epkt-compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .93rem; }
.epkt-compare th, .epkt-compare td { padding: .85rem 1rem; border-bottom: 1px solid var(--eu-line); text-align: center; }
.epkt-compare tbody tr:last-child > * { border-bottom: 0; }
.epkt-compare thead th {
    background: var(--eu-surface-2); color: var(--eu-muted); font-size: .74rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; vertical-align: bottom;
}
.epkt-compare tbody th { color: var(--eu-text); font-weight: 500; text-align: left; }
.epkt-compare td { color: var(--eu-ok); font-weight: 700; font-variant-numeric: tabular-nums; }
.epkt-compare td.is-no { color: var(--eu-faint); font-weight: 400; }
/* The step that has everything. */
.epkt-compare :is(th, td):last-child { background: rgba(255, 0, 0, .05); }
.epkt-compare thead th:last-child { color: #fff; box-shadow: inset 0 2px 0 var(--eu-accent); }
.epkt-compare tbody tr:hover > * { background-color: rgba(255, 255, 255, .025); }
/* On a phone the whole table fits the screen: what each column says is the
   point, and a table that scrolls sideways hides two of the three. */
@media (max-width: 640px) {
    .epkt-compare { min-width: 0; table-layout: fixed; font-size: .82rem; }
    .epkt-compare th, .epkt-compare td { padding: .7rem .35rem; overflow-wrap: anywhere; }
    .epkt-compare tbody th, .epkt-compare thead th:first-child { width: 40%; padding-left: .8rem; }
    .epkt-compare thead th { font-size: .6rem; letter-spacing: .02em; line-height: 1.3; }
    .epkt-compare td { font-size: .8rem; line-height: 1.3; }
}

/* --- prose, guides, the questions ------------------------------------------------ */

.epkt-page .tl-prose { border-top-color: var(--eu-line); }
.epkt-page .tl-prose > * { max-width: 72ch; }
.epkt-page .tl-prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.epkt-page .tl-prose h3 { color: #fff; font-size: 1.1rem; margin: 2rem 0 .5rem; }
.epkt-page .tl-prose p, .epkt-page .tl-prose li { color: var(--eu-muted); font-size: 1rem; line-height: 1.75; }
.epkt-page .tl-prose strong { color: var(--eu-strong); }
.epkt-page .tl-prose a, .epkt-page .tl-faq a { color: var(--eu-accent-text); }
.epkt-page .tl-faq { border-top-color: var(--eu-line); }
.epkt-page .tl-faq > * { max-width: 820px; }
.epkt-page .tl-faq summary { min-height: var(--eu-tap); }
.epkt-page .tl-faq details p { color: var(--eu-muted); }

.epkt-guides {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem;
}
.epkt-guides li { display: flex; min-width: 0; }
.epkt-guides a {
    flex: 1; display: grid; align-content: start; gap: .3rem; padding: 1rem 1.1rem; background: var(--eu-surface);
    border: 1px solid var(--eu-line); border-radius: var(--eu-r); color: var(--eu-muted); text-decoration: none;
    transition: border-color var(--eu-fast), background var(--eu-fast);
}
.epkt-guides a:hover { border-color: var(--eu-accent); background: var(--eu-surface-2); }
.epkt-guides b { color: #fff; font-size: .98rem; line-height: 1.3; }
.epkt-guides b::after { content: "\2192"; display: inline-block; margin-left: .4rem; color: var(--eu-accent-text); transition: transform var(--eu-fast); }
.epkt-guides a:hover b::after { transform: translateX(3px); }
.epkt-guides span { display: block; font-size: .87rem; line-height: 1.5; }
.epkt-guides span::first-letter { text-transform: uppercase; }
.epkt-page .tl-faq + .epkt-guides-section, .epkt-page .tl-prose + .epkt-guides-section { margin-top: 3.5rem; }

/* --- the start again, at the foot -------------------------------------------- */

.epkt-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
    margin: 3.5rem 0 0; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(255, 0, 0, .4);
    border-radius: var(--eu-r-l);
    background: radial-gradient(120% 160% at 0% 0%, rgba(255, 0, 0, .22), rgba(255, 0, 0, 0) 58%), var(--eu-surface);
}
.epkt-cta h2 { margin: 0 0 .35rem; color: #fff; font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.1; }
.epkt-cta p { margin: 0; max-width: 52ch; color: var(--eu-text); line-height: 1.6; }
.epkt-cta-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.epkt-cta--guide { margin: 2.5rem 0 0; }
@media (max-width: 520px) {
    .epkt-cta-actions, .epkt-cta-actions > a { width: 100%; }
}

/* --- words to copy on the guides: the bio template, the booking emails ------- */

.epkb-template {
    margin: 0 0 1rem; padding: 1.1rem 1.2rem; white-space: pre-wrap; overflow-wrap: anywhere;
    background: var(--eu-surface); border: 1px solid var(--eu-line); border-left: 3px solid var(--eu-line-2);
    border-radius: var(--eu-r); color: var(--eu-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.65;
}
.epkb-template strong { color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: .95rem; }

/* --- the examples page ----------------------------------------------------------- */

.epkx-list { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; }
.epkx-item {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.1rem; align-items: start; padding: 1rem;
    background: var(--eu-surface); border: 1px solid var(--eu-line); border-radius: var(--eu-r);
}
.epkx-photo { display: block; width: 120px; height: 120px; overflow: hidden; background: var(--eu-surface-3); border-radius: 8px; }
.epkx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.epkx-photo span { display: grid; place-items: center; height: 100%; color: #fff; font-size: 2.4rem; font-weight: 800; }
.epkx-item h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.epkx-item h2 a { color: #fff; text-decoration: none; }
.epkx-item h2 a:hover { color: var(--eu-accent-text); }
.epkx-item p { margin: 0 0 .5rem; color: var(--eu-muted); line-height: 1.6; }
.epkx-open { display: inline-flex; align-items: center; min-height: 36px; color: var(--eu-accent-text); font-size: .92rem; font-weight: 700; text-decoration: none; }
.epkx-open:hover { text-decoration: underline; }
@media (max-width: 520px) {
    .epkx-item { grid-template-columns: 72px minmax(0, 1fr); }
    .epkx-photo { width: 72px; height: 72px; }
}

/* --- "What to put in an EPK": a heading per part --------------------------------- */

.epkg-prose { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
.epkt-page .epkg-prose h2 { margin: 2.4rem 0 .5rem; font-size: 1.3rem; letter-spacing: -.01em; }
.epkt-page .epkg-prose h2:first-child { margin-top: 0; }

/* --- My press kits (/account/press-kits/) ----------------------------------------- */

.pkm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: .5rem; }
.pkm-head h1 { margin: 0 0 .6rem; }
.pkm-head .tl-lede { margin: 0; }
.pkm-head .epkt-build { flex: 0 0 auto; }
.pkm-h { margin: 2.25rem 0 0; color: var(--eu-muted); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pkm-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.pkm-h + .pkm-list { margin-top: .9rem; }
.pkm-item {
    display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 1.1rem; align-items: center;
    padding: .9rem 1.1rem .9rem .9rem; background: var(--eu-surface); border: 1px solid var(--eu-line);
    border-radius: var(--eu-r); transition: border-color var(--eu-fast);
}
.pkm-item:hover { border-color: var(--eu-line-2); }
.pkm-thumb {
    display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 8px;
    background: var(--eu-surface-3); color: var(--eu-faint); font-size: 1.4rem; object-fit: cover; object-position: 50% 30%;
}
.pkm-thumb--logo { object-fit: contain; padding: .3rem; }
.pkm-name { color: #fff; font-size: 1.08rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.pkm-name:hover { color: var(--eu-accent-text); }
.pkm-sub { margin-top: .2rem; color: var(--eu-faint); font-size: .86rem; line-height: 1.5; }
.pkm-sub a { color: var(--eu-accent-text); }
.pkm-sub button {
    margin-left: .3rem; padding: .25rem .6rem; background: none; border: 1px solid var(--eu-line-2);
    border-radius: var(--eu-r-s); color: var(--eu-text); font: inherit; font-size: .8rem; cursor: pointer;
}
.pkm-sub button:hover { border-color: var(--eu-accent); color: #fff; }
.pkm-figures { margin-top: .4rem; color: var(--eu-text); font-size: .9rem; font-variant-numeric: tabular-nums; }
.pkm-figures strong { color: var(--eu-ok); }
.pkm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.pkm-actions form { margin: 0; }
.pkm-actions a, .pkm-actions button {
    display: inline-flex; align-items: center; min-height: var(--eu-control); padding: 0 .9rem; background: transparent;
    border: 1px solid var(--eu-line-2); border-radius: var(--eu-r-s); color: var(--eu-text);
    font: inherit; font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: border-color var(--eu-fast), color var(--eu-fast), background var(--eu-fast);
}
.pkm-actions a:hover, .pkm-actions button:hover { border-color: #fff; color: #fff; }
.pkm-actions .pkm-primary { background: var(--eu-accent-fill); border-color: var(--eu-accent-fill); color: #fff; font-weight: 800; }
.pkm-actions .pkm-primary:hover { background: var(--eu-accent-fill-hover); border-color: var(--eu-accent-fill-hover); }
.pkm-actions .pkm-danger:hover { border-color: var(--eu-danger); color: var(--eu-danger); }
.pkm-empty { margin-top: 1.5rem; padding: 2rem 1.5rem; border: 1px dashed var(--eu-line-2); border-radius: var(--eu-r-l); color: var(--eu-muted); text-align: center; }
.pkm-empty p { margin: 0 0 1rem; }
.pkm-empty p:last-child { margin: 0; }
.pkm-foot { margin-top: 1.5rem; color: var(--eu-faint); font-size: .88rem; }
.pkm-foot a { color: var(--eu-accent-text); }
@media (max-width: 720px) {
    .pkm-item { grid-template-columns: 64px minmax(0, 1fr); }
    .pkm-thumb { width: 64px; height: 64px; }
    .pkm-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .pkm-actions a, .pkm-actions button { min-height: var(--eu-tap); }
}

/* Deleting a kit (press_kit_delete.html): the dangerous button is the plain
   one, and keeping it is as easy to hit. */
.pkm-confirm { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* --- motion, for whoever asked for less ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .epkt-page *, .epkt-page *::before, .epkt-page *::after { transition: none !important; }
}

@media print {
    .epkt-hero::before, .epkt-hero-art { display: none; }
}