/**
 * Perspectives — Montserrat on black with coral accents, matching the Client
 * Showcase / Portfolio Grid / Speakers plugins.
 */

/*
 * Paint the page itself black, not just the .kcp block.
 *
 * Collapsing an issue removes several thousand pixels of document in one go. The
 * browser then clamps the scroll position, and for a frame the area past the
 * shortened document is painted with the canvas background — which on a light
 * theme is white, and reads as a flash. Colouring the body (and the root, which
 * some themes paint themselves) makes that area black instead.
 */
html.kc-perspectives-root,
body.kc-perspectives-page {
    background-color: #000;
}

.kcp {
    --kcp-bg: #000;
    --kcp-panel: #1a1a1a;
    --kcp-panel-alt: #111;
    --kcp-border: #222;
    --kcp-border-strong: #333;
    --kcp-border-item: #636363;

    --kcp-text: #fff;
    --kcp-text-soft: #f6f6f6;
    --kcp-text-muted: #aaa;

    --kcp-accent: #e8735a;
    --kcp-accent-hover: #d4624b;
    --kcp-title: #f66b71;

    --kcp-page-pad: 64px;
    --kcp-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    background: var(--kcp-bg);
    color: var(--kcp-text);
    font-family: var(--kcp-font);
    font-size: 16px;
    /*
     * Explicit, because Jupiter sets `body { font-weight: 500 }` and everything
     * in here without a weight of its own would otherwise inherit it — which is
     * how weight 500 kept reappearing after the rules that declared it were
     * changed. No 500 anywhere on these pages, per the client.
     */
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.kcp *,
.kcp *::before,
.kcp *::after {
    box-sizing: border-box;
}

.kcp img {
    max-width: 100%;
    display: block;
}

/* Escape a block theme's constrained layout so the page goes edge to edge. */
.has-global-padding > .kcp {
    margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px)) !important;
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px)) !important;
    width: auto;
}

.is-layout-constrained > .kcp {
    max-width: none !important;
}

.kcp-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-inline: var(--kcp-page-pad);
}

/* ---------- Type ---------- */

/*
 * HOUSE STANDARD — the client's hero type for every page we build. Same values
 * as .kcs-title in kc-speakers; keep the two in step.
 */
.kcp-title {
    font-family: var(--kcp-font);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--kcp-title);
    margin: 0;
}

.kcp-heading {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--kcp-text);
    margin: 0;
}

.kcp-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kcp-text-soft);
    margin: 0;
}

/* HOUSE STANDARD — mirrored on .kcs-lede in kc-speakers. */
.kcp-lede {
    font-size: 20px;
    font-weight: 400;
    line-height: 29px;
    color: var(--kcp-text);
    margin: 0;
}

.kcp-body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--kcp-text-muted);
    margin: 0;
}

.kcp-divider {
    width: 60px;
    height: 2px;
    background: var(--kcp-accent);
    border: 0;
    margin: 0;
}

/* ---------- Hero ---------- */

.kcp-hero {
    position: relative;
    overflow: hidden;
    padding-block: 96px 72px;
    text-align: center;
    background: var(--kcp-panel-alt);
}

.kcp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 120% at 50% 0%, rgba(232, 115, 90, 0.2), transparent 62%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2) 45%, var(--kcp-bg));
    pointer-events: none;
}

.kcp-hero .kcp-wrap {
    position: relative;
    z-index: 1;
}

.kcp-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
    justify-items: center;
}

.kcp-hero .kcp-lede {
    max-width: none;
    padding-block: 2rem;
}

/* Two balanced columns rather than a 2x2 grid: with paragraphs this uneven, a
   grid strands the short ones beside the long ones. break-inside keeps each
   paragraph whole. Ranged left — centred text reads badly in narrow columns. */
.kcp-hero__body {
    display: block;
    width: 100%;
    max-width: 880px;
    columns: 2;
    column-gap: 44px;
    text-align: left;
    /* Sits on top of the hero's 20px grid gap, setting the intro apart from the
       subscribe form below it. */
    margin-bottom: 18px;
}

.kcp-hero__body .kcp-body {
    line-height: 1.5;
}

.kcp-hero__body > p {
    break-inside: avoid;
    margin-bottom: 14px;
}

.kcp-hero__body > p:last-child {
    margin-bottom: 0;
}

@media (max-width: 820px) {
    .kcp-hero__body {
        columns: 1;
        max-width: 620px;
        text-align: center;
    }
}

/* ---------- Fixed side nav ---------- */

.kcp-sidenav {
    position: fixed;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
}

.kcp-sidenav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kcp-sidenav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    text-decoration: none;
    background: rgba(26, 26, 26, 0.88);
    border: 1px solid var(--kcp-border-strong);
    color: var(--kcp-text-muted);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.kcp-sidenav__item:hover,
.kcp-sidenav__item:focus-visible {
    color: var(--kcp-text);
    border-color: var(--kcp-accent);
}

.kcp-sidenav__item.is-active {
    color: var(--kcp-accent);
    border-color: var(--kcp-accent);
    background: var(--kcp-panel);
}

.kcp-sidenav__num {
    flex: 0 0 auto;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    width: 22px;
    text-align: center;
}

/* Collapsed to the number; the label unfurls on hover or keyboard focus so the
   nav stays a slim rail without truncating issue names. */
.kcp-sidenav__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: 0;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.2s ease;
}

.kcp-sidenav__item:hover .kcp-sidenav__label,
.kcp-sidenav__item:focus-visible .kcp-sidenav__label,
.kcp-sidenav__item.is-active .kcp-sidenav__label {
    max-width: 160px;
    opacity: 1;
}

/* Always visible, unlike the label — at rest it's the only thing telling you the
   rail is clickable. Points down to open, flips up on the issue that's showing,
   matching the chevron on the issue header. */
.kcp-sidenav__chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kcp-accent);
    opacity: 0.75;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.kcp-sidenav__item:hover .kcp-sidenav__chevron,
.kcp-sidenav__item:focus-visible .kcp-sidenav__chevron {
    opacity: 1;
}

.kcp-sidenav__item.is-active .kcp-sidenav__chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* The nav would sit on top of the content once the viewport narrows. */
@media (max-width: 1180px) {
    .kcp-sidenav {
        display: none;
    }
}

/* ---------- The issue list ---------- */

.kcp-list {
    padding-block: 72px 96px;
}

.kcp-list .kcp-divider {
    margin: 16px 0 40px;
}

.kcp-empty {
    max-width: 560px;
}

.kcp-item {
    /* Same border open or closed — only the fill changes. overflow keeps the
       header's hover fill and the panel inside the rounded corners. */
    overflow: hidden;
    border: 2px solid var(--kcp-border-item);
    border-radius: 2rem;
    background: var(--kcp-panel-alt);
    margin-bottom: 16px;
    scroll-margin-top: 24px;
}

.kcp-item.is-open {
    background: var(--kcp-bg);
}

.kcp-item__headwrap {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.kcp-item__head {
    position: relative;
    display: block;
    width: 100%;
    padding: 32px 88px 32px 36px;
    text-align: left;
    background: transparent;
    border: 0;
    color: inherit;
    font-family: var(--kcp-font);
    cursor: pointer;
    transition: background 0.2s ease;
}

.kcp-item__head:hover {
    background: rgba(255, 255, 255, 0.02);
}

.kcp-item__meta {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kcp-accent);
}

.kcp-item__dot {
    opacity: 0.6;
    margin-inline: 4px;
}

.kcp-item__title {
    display: block;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;
    color: var(--kcp-text);
}

.kcp-item__teaser {
    display: block;
    overflow: hidden;
    margin-top: 8px;
    max-height: 8em;
    opacity: 1;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--kcp-text-muted);
    max-width: 62ch;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.22s ease,
                margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Once open the teaser is redundant — the article itself is right there. It
   collapses rather than vanishing, so opening and closing stay continuous. */
.kcp-item.is-open .kcp-item__teaser {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

.kcp-item__chevron {
    position: absolute;
    top: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--kcp-panel);
    border: 1px solid var(--kcp-border-strong);
    color: var(--kcp-accent);
    transition: transform 0.3s ease, border-color 0.2s ease;
}

.kcp-item.is-open .kcp-item__chevron {
    transform: rotate(180deg);
    border-color: var(--kcp-accent);
}

.kcp-item__panel {
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.kcp-item__panel[hidden] {
    display: none;
}

.kcp-item__inner {
    padding: 0 36px 36px;
}

.kcp-item__hero {
    margin: 0 0 32px;
}

.kcp-item__hero img {
    width: 100%;
    height: auto;
}

/* ---------- The newsletter's own HTML ---------- */

/*
 * The issue itself renders inside a shadow root (kcp_render_issue() in
 * includes/render.php), so nothing in this sheet — or the theme's — reaches
 * it; assets/newsletter.css is the stylesheet inside. This element is just the
 * host: it sets the column, and that's all it may set.
 *
 * Don't add rules for .kcp-html's descendants here: they can't match through
 * the shadow boundary, so they'd be dead code that looks live. The overrides
 * this block used to carry (one face, 1.45 line-height, 5px cells, zeroed
 * table margins) are gone for good — the client wants the export to look on
 * the page exactly as it does in a browser tab, and the shadow root is what
 * makes that true against any theme.
 */
.kcp-html {
    max-width: 860px;
    margin: 0 auto;
}

/* ---------- Share ---------- */

.kcp-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--kcp-border-strong);
}

.kcp-share__label {
    color: var(--kcp-text-muted);
    margin-right: 4px;
}

.kcp-share__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--kcp-panel);
    border: 0;
    color: var(--kcp-accent);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.kcp-share__btn:hover,
.kcp-share__btn:focus-visible {
    background: #222;
    color: var(--kcp-title);
}

.kcp-share__copy.is-copied::after {
    content: "Copied";
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--kcp-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Closing CTA ---------- */

/* ---------- Closing band ---------- */

/*
 * The page's own sign-up, edge to edge. Deliberately a different shape to the
 * card inside each article: wider, lit, copy beside the field rather than above
 * it — so reaching the end of the archive doesn't just repeat the last thing you
 * read.
 */
/* Flat black, matching the hero — the tonal panel and the coral radial wash
   were dropped at the client's request. */
.kcp-band {
    position: relative;
    overflow: hidden;
    padding-block: 88px;
    background: var(--kcp-bg);
    border-top: 1px solid var(--kcp-border);
}

.kcp-band .kcp-wrap {
    position: relative;
    z-index: 1;
}

.kcp-band__inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

.kcp-band__eyebrow {
    color: var(--kcp-accent);
    letter-spacing: 3px;
    margin-bottom: 14px;
}

.kcp-band__title {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--kcp-text);
    margin: 0 0 12px;
}

.kcp-band__body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--kcp-text-muted);
    margin: 0;
    max-width: 46ch;
}

.kcp-band__form .kcp-subscribe {
    max-width: none;
}

/* Roomier than the in-article field, and stacked so the button reads as its own
   action rather than a tail on the input. */
.kcp-band__form .kcp-subscribe__row {
    flex-direction: column;
    gap: 12px;
}

.kcp-band__form input[type="email"] {
    padding: 18px 18px;
    font-size: 16px;
}

.kcp-band__form .kcp-btn {
    width: 100%;
    padding: 18px 28px;
}

@media (max-width: 900px) {
    .kcp-band {
        padding-block: 56px;
    }

    .kcp-band__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .kcp-band__body {
        margin-inline: auto;
    }

    .kcp-band__title {
        font-size: 26px;
    }
}


.kcp-cta {
    margin-top: 40px;
    padding: 40px 32px;
    text-align: center;
    background: var(--kcp-panel-alt);
    border: 1px solid var(--kcp-border);
}

.kcp-cta__icon {
    display: block;
    margin: 0 auto 16px;
    color: var(--kcp-accent);
}

.kcp-cta__title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--kcp-text);
    margin: 0 0 8px;
}

.kcp-cta__body {
    font-size: 15px;
    font-weight: 300;
    color: var(--kcp-text-muted);
    margin: 0 0 24px;
}

/* ---------- Subscribe ---------- */

.kcp-subscribe {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

.kcp-subscribe--hero {
    margin-top: 12px;
}

.kcp-subscribe__row {
    display: flex;
    gap: 10px;
}

/*
 * One full name, not first + last: the client asked for a single field, and
 * Copper's first/last are derived from it in includes/copper.php.
 *
 * This lives here rather than in perspective-v2.css because kcp_subscribe_form()
 * is shared — v1's accordion renders the same field and never loads the v2
 * stylesheet, so the input was appearing unstyled there.
 */
.kcp-subscribe__name {
    margin: 0 0 10px;
}

.kcp-subscribe input[type="text"],
.kcp-subscribe input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    background-color: var(--kcp-panel) !important;
    border: 1px solid var(--kcp-border-strong);
    color: var(--kcp-text) !important;
    font-family: var(--kcp-font);
    font-size: 15px;
    font-weight: 300;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.kcp-subscribe__name input {
    width: 100%;
    flex: none;
}

/*
 * The focus colours have to be restated, not just the border.
 *
 * Jupiter ships `input[type="text"]:focus { background: #fff }` — specificity
 * 0,2,1, which *ties* our base `.kcp-subscribe input[type="text"]` rule, and the
 * theme's stylesheet loads after this one, so it won every focus. The field went
 * white while our white text stayed white: invisible the moment you typed into
 * it, with only the spellcheck squiggle visible. Unfocused was fine because the
 * theme's base rule is a weaker 0,1,1.
 *
 * !important as well as the extra specificity: this is a theme we don't control
 * and can't stop reordering its own stylesheets.
 */
.kcp-subscribe input[type="text"]:focus,
.kcp-subscribe input[type="email"]:focus {
    outline: none;
    background-color: var(--kcp-panel) !important;
    color: var(--kcp-text) !important;
    -webkit-text-fill-color: var(--kcp-text);
    border-color: var(--kcp-accent);
}

/*
 * Autofill. Chrome paints its own near-white background on an autofilled input
 * and `background-color` cannot override it — the only lever is a huge inset
 * box-shadow. The text needs `-webkit-text-fill-color` for the same reason:
 * left alone it stays our white and vanishes against Chrome's white fill, which
 * is what made the field unreadable the moment it was filled.
 *
 * The absurd transition delay is the standard trick for the repaint Chrome runs
 * on fill: it animates its background in, and parking that transition ~3000
 * years out means the box-shadow is never handed back.
 */
.kcp-subscribe input:-webkit-autofill,
.kcp-subscribe input:-webkit-autofill:hover,
.kcp-subscribe input:-webkit-autofill:focus,
.kcp-subscribe input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    -webkit-text-fill-color: var(--kcp-text) !important;
    caret-color: var(--kcp-text);
    border-color: var(--kcp-border-strong);
    transition: background-color 100000s ease-in-out 0s;
}

/*
 * The same again for the states :-webkit-autofill does NOT cover. Chrome has
 * three: filled, "selected" (chosen from the dropdown) and "previewed" (the
 * greyed value shown while you arrow over a suggestion) — the last is what
 * renders as faint masked text on a pale ground, which is what the field was
 * doing. Each gets its **own rule block on purpose**: an unrecognised selector
 * invalidates the entire comma-separated list, so putting these next to the
 * -webkit- one would silently drop all of it in any browser that doesn't know
 * these internal pseudo-classes.
 */
.kcp-subscribe input:autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    -webkit-text-fill-color: var(--kcp-text) !important;
    caret-color: var(--kcp-text);
}

.kcp-subscribe input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    -webkit-text-fill-color: var(--kcp-text) !important;
    background-color: var(--kcp-panel) !important;
    background-image: none !important;
    color: var(--kcp-text) !important;
}

.kcp-subscribe input:-internal-autofill-previewed {
    -webkit-box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    box-shadow: 0 0 0 1000px var(--kcp-panel) inset !important;
    -webkit-text-fill-color: var(--kcp-text) !important;
    background-color: var(--kcp-panel) !important;
    background-image: none !important;
    color: var(--kcp-text) !important;
}

.kcp-subscribe input:-webkit-autofill:focus {
    border-color: var(--kcp-accent);
}

/* Firefox and Safari take the hint from color-scheme instead. */
.kcp-subscribe input,
.kcp-subscribe button {
    color-scheme: dark;
}

/* Highlighting the text you've typed shouldn't wash the field out either. */
.kcp-subscribe input::selection {
    background: var(--kcp-accent);
    color: #fff;
}

/* The flat dark tile used for buttons across the K&C plugins. */
.kcp-btn {
    flex: 0 0 auto;
    font-family: var(--kcp-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--kcp-accent);
    background: var(--kcp-panel);
    border: 0;
    padding: 14px 28px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.kcp-btn:hover,
.kcp-btn:focus-visible {
    background: #222;
    color: var(--kcp-title);
}

.kcp-subscribe__note {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--kcp-text);
}

.kcp-subscribe__note--bad {
    color: var(--kcp-title);
}

.kcp-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
    .kcp {
        --kcp-page-pad: 20px;
    }

    .kcp-hero {
        padding-block: 64px 48px;
    }

    .kcp-title {
        font-size: 34px;
    }

    .kcp-lede {
        font-size: 18px;
        line-height: 28px;
    }

    .kcp-item__head {
        padding: 24px 64px 24px 20px;
    }

    .kcp-item__title {
        font-size: 22px;
    }

    .kcp-item__chevron {
        top: 22px;
        right: 16px;
    }

    .kcp-item__inner {
        padding: 0 20px 28px;
    }

    .kcp-subscribe__row {
        flex-direction: column;
    }

    .kcp-cta {
        padding: 32px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kcp *,
    .kcp *::before,
    .kcp *::after {
        transition-duration: 0.01ms !important;
    }
}