/* Homepage cards stay flexible in Ghost Admin. These styles follow the editor's block order. */
.home-template .home-editorial {
    --home-copy: #ded6e3;
    --home-muted: #bfb3c6;
    width: 100%;
    padding: clamp(2.5rem, 6vw, 6rem) clamp(1.25rem, 8vw, 9rem);
    color: var(--home-copy);
    background:
        radial-gradient(ellipse at 8% 9%, #35213d 0, transparent 36rem),
        radial-gradient(ellipse at 91% 40%, #18284a 0, transparent 40rem),
        var(--night);
    overflow-wrap: anywhere;
}
.home-template .home-editorial > .gh-content {
    width: min(100%, 1160px);
    margin-inline: auto;
}
.home-template .home-editorial .gh-content > * {
    max-width: 860px;
    margin-inline: auto;
}
.home-template .home-editorial .gh-content > h1 {
    max-width: 1040px;
    margin-top: .15em;
    margin-bottom: .2em;
    color: var(--paper);
    font: 600 clamp(3.5rem, 10vw, 8.5rem)/.94 var(--serif);
    letter-spacing: -.07em;
    text-wrap: balance;
}
.home-template .home-editorial .gh-content > h2 {
    max-width: 960px;
    margin-top: clamp(3rem, 8vw, 7rem);
    margin-bottom: 1rem;
    padding-top: .65rem;
    border-top: 1px solid #a88ab555;
    color: var(--paper);
    font: 500 clamp(2rem, 5.2vw, 4.7rem)/1.04 var(--serif);
    letter-spacing: -.045em;
    text-wrap: balance;
}
.home-template .home-editorial .gh-content > h3 {
    margin-top: 2.5rem;
    margin-bottom: .6rem;
    color: var(--pink);
    font: 700 .78rem/1.4 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.home-template .home-editorial .gh-content > p,
.home-template .home-editorial .gh-content > ul,
.home-template .home-editorial .gh-content > ol {
    color: var(--home-copy);
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.8;
}
.home-template .home-editorial .gh-content > p:first-of-type {
    max-width: 760px;
    color: #f0e8f2;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.6;
}
.home-template .home-editorial .gh-content a:not(.kg-btn) {
    color: #ff91cd;
    text-decoration-thickness: .08em;
    text-underline-offset: .2em;
}
.home-template .home-editorial .gh-content a:not(.kg-btn):hover { color: #fff; }
.home-template .home-editorial .gh-content > blockquote {
    max-width: 900px;
    margin-block: clamp(2rem, 5vw, 4rem);
    padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
    border-left: 4px solid var(--pink);
    color: #f0e8f2;
    background: #211a2abb;
    box-shadow: 8px 8px 0 #547aff35;
    font: italic clamp(1.3rem, 3vw, 2.35rem)/1.35 var(--serif);
}
.home-template .home-editorial .gh-content > .kg-callout-card {
    max-width: 900px;
    margin-block: 2rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid #c28bc477;
    border-left: 6px solid var(--pink);
    color: #f3eaf3;
    background: linear-gradient(115deg, #37233d, #1a1c2b 72%);
    box-shadow: 8px 9px 0 #06050a70;
    font: 500 clamp(1.1rem, 2vw, 1.5rem)/1.55 var(--serif);
}
.home-template .home-editorial .gh-content > .kg-callout-card:nth-of-type(even) {
    margin-left: max(0px, calc((100% - 760px) / 2));
    border-left-color: var(--blue);
    transform: rotate(.35deg);
}
.home-template .home-editorial .gh-content > .kg-image-card,
.home-template .home-editorial .gh-content > .kg-gallery-card {
    max-width: 1000px;
    margin-block: clamp(2rem, 5vw, 4.5rem);
    padding: .7rem;
    border: 1px solid #cda8d1;
    background: #17141c;
    box-shadow: 10px 11px 0 #547aff55, -5px -5px 0 #ff5bb642;
    transform: rotate(-.45deg);
}
.home-template .home-editorial .kg-image-card img,
.home-template .home-editorial .kg-gallery-card img {
    max-width: 100%;
    height: auto;
}
.home-template .home-editorial .kg-image-card figcaption,
.home-template .home-editorial .kg-gallery-card figcaption {
    padding: .65rem .35rem .15rem;
    color: var(--home-muted);
    font: .72rem/1.55 var(--mono);
}
.home-template .home-editorial .kg-gallery-card .kg-gallery-container { gap: .55rem; }
.home-template .home-editorial .kg-button-card { margin-block: 1.5rem; }
.home-template .home-editorial .kg-btn {
    min-height: 48px;
    padding: .75rem 1.2rem;
    border: 1px solid var(--pink);
    border-radius: 0;
    color: var(--night);
    background: var(--pink);
    box-shadow: 4px 4px 0 var(--blue);
    font: 700 .78rem/1.4 var(--mono);
    text-decoration: none;
}
.home-template .home-editorial .kg-btn:hover,
.home-template .home-editorial .kg-btn:focus-visible {
    color: #fff;
    background: var(--wine);
}
.home-template .home-editorial .kg-hr-card { margin-block: clamp(2.5rem, 6vw, 5.5rem); }
.home-template .home-editorial .kg-hr-card hr {
    height: 3px;
    border: 0;
    background: linear-gradient(90deg, var(--pink), var(--blue) 48%, var(--acid));
    transform: rotate(-.35deg);
}
.home-template .home-editorial .kg-embed-card,
.home-template .home-editorial .kg-bookmark-card,
.home-template .home-editorial .kg-product-card {
    max-width: 900px;
    margin-block: 2.5rem;
}
.home-template .home-editorial .kg-card iframe { max-width: 100%; }
.home-template .home-editorial .kg-card :focus-visible { outline-offset: 4px; }
.home-template .home-editorial .kg-card figcaption,
.home-template .home-editorial .kg-card small { overflow-wrap: anywhere; }
.home-template .home-editorial .kg-card.kg-toggle-card { color: var(--ink); }

@media (max-width: 760px) {
    .home-template .home-editorial { padding: 2rem 1.1rem 4rem; }
    .home-template .home-editorial .gh-content > h1 { font-size: clamp(3.2rem, 14vw, 5.4rem); }
    .home-template .home-editorial .gh-content > h2 { margin-top: 3rem; }
    .home-template .home-editorial .gh-content > p,
    .home-template .home-editorial .gh-content > ul,
    .home-template .home-editorial .gh-content > ol { font-size: 1rem; }
    .home-template .home-editorial .gh-content > .kg-callout-card { transform: none; }
    .home-template .home-editorial .gh-content > .kg-callout-card:nth-of-type(even) { margin-left: auto; }
    .home-template .home-editorial .gh-content > .kg-image-card,
    .home-template .home-editorial .gh-content > .kg-gallery-card { padding: .45rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .home-template .home-editorial * { scroll-behavior: auto; }
}
@media (forced-colors: active) {
    .home-template .home-editorial .gh-content > .kg-callout-card,
    .home-template .home-editorial .gh-content > .kg-image-card,
    .home-template .home-editorial .gh-content > .kg-gallery-card { border: 2px solid CanvasText; }
}