/* =========================================================================
   Donaus Links — a mobile-only, link-in-bio theme for Ghost
   -------------------------------------------------------------------------
   1.  Tokens & reset
   2.  Layout (mobile-only column)
   3.  Hero
   4.  Card head
   5.  Content typography, contact lines, dot divider
   6.  CTA cards — every state
   7.  Other Koenig cards
   8.  Utilities, motion, print
   ========================================================================= */


/* 1. Tokens & reset
   ========================================================================= */

:root {
    /* These four are re-declared by default.hbs from Ghost Design settings. */
    --bg: #ffffff;
    --fg: #0a0a0a;
    --btn-bg: #111111;
    --btn-fg: #ffffff;

    --accent: #111111;
    --page-w: 480px;
    --btn-radius: 999px;

    /* Font resolution order:
       1. Ghost's own font pickers in Design settings (--gh-font-heading / --gh-font-body)
       2. This theme's font settings, set by default.hbs
       3. The built-in stacks below                                          */
    --font-title: var(--gh-font-heading, var(--theme-title-font, "Playfair Display", "Iowan Old Style", Georgia, serif));
    --font-body: var(--gh-font-body, var(--theme-body-font, "Lora", "Iowan Old Style", Georgia, serif));
    --font-ui: var(--theme-button-font, "Bitter", "Rockwell", Georgia, serif);

    /* Fallbacks first, then the mixed versions for browsers that support
       color-mix() — so an old browser still renders a correct page. */
    --muted: rgba(10, 10, 10, 0.62);
    --hairline: rgba(10, 10, 10, 0.14);
    --surface: rgba(10, 10, 10, 0.05);
    --muted: color-mix(in srgb, var(--fg) 62%, var(--bg));
    --hairline: color-mix(in srgb, var(--fg) 14%, var(--bg));
    --surface: color-mix(in srgb, var(--fg) 5%, var(--bg));

    /* The desktop frame drawn around the phone column */
    --frame-color: var(--hairline);
    --frame-radius: 28px;
    --frame-gap: 40px;

    --gutter: 22px;
    --stack: 18px;
    --card-radius: 20px;
    --btn-minh: 68px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg);
}

body {
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--fg);
    outline-offset: 3px;
    border-radius: 4px;
}


/* 2. Layout — mobile-only column
   -------------------------------------------------------------------------
   The whole site is a phone-width column. On a desktop it is simply centred:
   there is no wide layout to fall through to, by design.
   ========================================================================= */

.viewport {
    width: 100%;
    max-width: var(--page-w);
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100svh;
    background-color: var(--bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
}

.card {
    width: 100%;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

.card--error {
    padding-top: 22vh;
}

/* On a window wider than the widest column setting, draw a thin rounded frame
   around the phone layout so it reads as a device rather than a stranded strip
   of content. On a phone or small tablet there is no border and no radius —
   the layout runs edge to edge exactly as before. 620px clears the Wide
   setting (560px) plus its margins, so the frame only ever appears when there
   is genuinely room for it. */
@media (min-width: 620px) {
    body {
        padding: var(--frame-gap) 20px;
    }

    .viewport {
        border: 1px solid var(--frame-color);
        border-radius: var(--frame-radius);
        min-height: calc(100vh - var(--frame-gap) * 2);
        min-height: calc(100svh - var(--frame-gap) * 2);
    }

    /* Design setting: "Desktop frame" off */
    body.no-frame {
        padding: 0;
    }

    body.no-frame .viewport {
        border: 0;
        border-radius: 0;
        min-height: 100vh;
        min-height: 100svh;
    }
}


/* 3. Hero
   -------------------------------------------------------------------------
   Full-bleed feature image that dissolves into the page background. The fade
   is painted in the background colour rather than with a mask, so it is exact
   on every browser and follows whatever background colour is configured.
   ========================================================================= */

.hero {
    width: 100%;
    margin: 0;
    padding: 0;
}

.hero-frame {
    position: relative;
    width: 100%;
    line-height: 0;
}

.hero-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero-caption {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    text-align: center;
    padding: 12px var(--gutter) 0;
}

.hero-fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Top and bottom only — no side vignette. */
    background: linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 44%, var(--bg) 97%);
    background: linear-gradient(to bottom,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg) 45%, transparent) 6%,
        transparent 15%,
        transparent 46%,
        color-mix(in srgb, var(--bg) 55%, transparent) 76%,
        var(--bg) 97%);
}

/* Bottom fade only, for images that shouldn't lose their top edge. */
.no-top-fade .hero-fade {
    background: linear-gradient(to bottom, transparent 46%, var(--bg) 97%);
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent 46%,
        color-mix(in srgb, var(--bg) 55%, transparent) 76%,
        var(--bg) 97%);
}

/* Pull the title up into the tail of the fade, like the reference layout. */
.hero + .card-head {
    margin-top: -46px;
    position: relative;
    z-index: 1;
}

/* A caption sits between the image and the title, so don't overlap it. */
.hero:has(.hero-caption) + .card-head {
    margin-top: 6px;
}


/* 4. Card head — name, subtitle
   ========================================================================= */

.card-head {
    padding: 28px var(--gutter) 0;
    text-align: center;
}

/* No feature image above it — give the title room to breathe. */
.card-head:first-child {
    padding-top: 54px;
}

/* Title hidden (visually) and no excerpt — collapse the empty header. */
.card-head:has(> .card-title.sr-only:only-child) {
    padding: 0;
}

.hero + .card-head:has(> .card-title.sr-only:only-child) {
    margin-top: 10px;
}

.card-title {
    font-family: var(--font-title);
    font-weight: 500;
    font-size: clamp(38px, 11vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
}

.card-subtitle {
    font-family: var(--font-title);
    font-size: 21px;
    line-height: 1.3;
    color: var(--muted);
    margin: 10px 0 0;
    text-wrap: pretty;
}


/* 5. Content
   ========================================================================= */

.card-content {
    padding: 8px var(--gutter) 0;
    text-align: center;
}

.card-content > * {
    margin-top: var(--stack);
    margin-bottom: 0;
}

.card-content > *:first-child {
    margin-top: 0;
}

.card-content p {
    font-family: var(--font-title);
    font-size: 22px;
    line-height: 1.34;
    margin: 2px 0 0;
}

.card-content p + p {
    margin-top: 2px;
}

/* Contact lines: plain paragraphs that happen to be tappable.
   <p><a href="tel:+17325559876">(732) 555-9876</a></p>
   <p><a href="mailto:phil@donaus.co">phil@donaus.co</a></p>           */
.card-content a[href^="tel:"],
.card-content a[href^="mailto:"],
.card-content a[href^="sms:"] {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

.card-content a[href^="tel:"]:hover,
.card-content a[href^="mailto:"]:hover,
.card-content a[href^="sms:"]:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Everything else that is a link inside prose */
.card-content p > a:not([href^="tel:"]):not([href^="mailto:"]):not([href^="sms:"]),
.card-content li > a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--fg) 45%, var(--bg));
}

.card-content h2,
.card-content h3,
.card-content h4 {
    font-family: var(--font-title);
    font-weight: 600;
    line-height: 1.15;
    margin: 34px 0 0;
    letter-spacing: -0.01em;
}

.card-content h2 { font-size: 30px; }
.card-content h3 { font-size: 24px; }
.card-content h4 { font-size: 20px; }

.card-content ul,
.card-content ol {
    text-align: left;
    padding-left: 1.2em;
    font-size: 18px;
}

.card-content li + li {
    margin-top: 6px;
}

.card-content blockquote {
    margin: 26px 0 0;
    padding: 0 8px;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 21px;
    color: var(--muted);
}

.card-content small {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--muted);
}

/* The three-dot divider from the reference layout. A plain <hr> in the
   Ghost editor renders as this. */
.card-content hr {
    border: 0;
    width: 102px;
    height: 12px;
    margin: 38px auto 34px;
    background-image: radial-gradient(circle at 50% 50%, var(--fg) 0 5px, transparent 5.5px);
    background-size: 34px 100%;
    background-repeat: repeat-x;
    opacity: 0.95;
}

/* Cards that want to escape the gutter */
.card-content .kg-width-wide,
.card-content .kg-width-full {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
}

.card-content .kg-width-full img {
    border-radius: 0;
}


/* 6. CTA cards
   -------------------------------------------------------------------------
   Ghost's native Call-to-action card, restyled for a link-in-bio page.

     .kg-cta-card                      the card
     .kg-cta-bg-{none|white|grey|…}    card background
     .kg-cta-minimal / .kg-cta-immersive   layout
     .kg-cta-has-img                   an image is present
     .kg-cta-sponsor-label             optional label above the card
     .kg-cta-text                      the pretext above the button
     .kg-cta-button                    the button — always full width

   Button colours set in the Ghost editor arrive as an inline style and
   therefore always win over the theme. Every hover/active effect below is
   colour-agnostic so it works with any button colour you pick.
   ========================================================================= */

.kg-card.kg-cta-card {
    --cta-bg: transparent;
    --cta-pad: 0px;

    position: relative;
    width: 100%;
    margin: 26px 0 0;
    padding: var(--cta-pad);
    background-color: var(--cta-bg);
    border-radius: var(--card-radius);
    color: var(--fg);
    text-align: center;
}

.card-content > .kg-card.kg-cta-card:first-child {
    margin-top: 18px;
}

/* --- Backgrounds ------------------------------------------------------- */

.kg-card.kg-cta-card.kg-cta-bg-none {
    --cta-bg: transparent;
    --cta-pad: 0px;
}

.kg-card.kg-cta-card:not(.kg-cta-bg-none) {
    --cta-pad: 22px;
}

.kg-card.kg-cta-card.kg-cta-bg-white  { --cta-bg: #ffffff; box-shadow: inset 0 0 0 1px var(--hairline); }
.kg-card.kg-cta-card.kg-cta-bg-grey   { --cta-bg: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.kg-card.kg-cta-card.kg-cta-bg-blue   { --cta-bg: #e8f1fd; }
.kg-card.kg-cta-card.kg-cta-bg-green  { --cta-bg: #e6f6ea; }
.kg-card.kg-cta-card.kg-cta-bg-yellow { --cta-bg: #fdf3dc; }
.kg-card.kg-cta-card.kg-cta-bg-red    { --cta-bg: #fdecec; }
.kg-card.kg-cta-card.kg-cta-bg-pink   { --cta-bg: #fdecf5; }
.kg-card.kg-cta-card.kg-cta-bg-purple { --cta-bg: #f1ecfd; }

/* Coloured cards always read on a dark text colour */
.kg-card.kg-cta-card.kg-cta-bg-blue,
.kg-card.kg-cta-card.kg-cta-bg-green,
.kg-card.kg-cta-card.kg-cta-bg-yellow,
.kg-card.kg-cta-card.kg-cta-bg-red,
.kg-card.kg-cta-card.kg-cta-bg-pink,
.kg-card.kg-cta-card.kg-cta-bg-purple,
.kg-card.kg-cta-card.kg-cta-bg-white {
    color: #101010;
}

/* --- Sponsor label ----------------------------------------------------- */

.kg-card.kg-cta-card .kg-cta-sponsor-label,
.kg-card.kg-cta-card .kg-cta-sponsor-label-wrapper {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 14px;
    text-align: center;
}

/* Immersive cards carry no padding of their own, so the label needs its own. */
.kg-card.kg-cta-card.kg-cta-immersive:not(.kg-cta-bg-none) .kg-cta-sponsor-label,
.kg-card.kg-cta-card.kg-cta-immersive:not(.kg-cta-bg-none) .kg-cta-sponsor-label-wrapper {
    padding: 18px 22px 0;
    margin-bottom: 6px;
}

.kg-card.kg-cta-card .kg-cta-sponsor-label p {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
}

/* --- Shared inner structure -------------------------------------------- */

.kg-card.kg-cta-card .kg-cta-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.kg-card.kg-cta-card .kg-cta-content-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    min-width: 0;
}

.kg-card.kg-cta-card .kg-cta-text {
    font-family: var(--font-title);
    font-size: 17px;
    line-height: 1.4;
    color: inherit;
}

.kg-card.kg-cta-card .kg-cta-text p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

.kg-card.kg-cta-card .kg-cta-text p + p {
    margin-top: 10px;
}

.kg-card.kg-cta-card .kg-cta-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kg-card.kg-cta-card .kg-cta-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Layout A: minimal, no image --------------------------------------
   The reference layout: a line of pretext, then a full-width button.      */

.kg-card.kg-cta-card.kg-cta-minimal .kg-cta-content {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
}

.kg-card.kg-cta-card.kg-cta-minimal:not(.kg-cta-has-img) .kg-cta-content {
    flex-direction: column;
    gap: 0;
}

.kg-card.kg-cta-card.kg-cta-minimal .kg-cta-text {
    text-align: center;
}

/* --- Layout B: minimal + image ----------------------------------------
   Small square thumbnail on the left, text beside it, button beneath both
   at full width.                                                          */

.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-content {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
        "img text"
        "btn btn";
    align-items: start;
    column-gap: 16px;
    row-gap: 16px;
}

/* No button on the card — collapse the empty button row */
.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img:not(:has(.kg-cta-button)) .kg-cta-content {
    grid-template-areas: "img text";
    row-gap: 0;
}

.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-image-container {
    grid-area: img;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--surface);
}

.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-content-inner {
    grid-area: text;
    display: contents;
}

.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-text {
    grid-area: text;
    text-align: left;
    font-size: 16px;
    padding-top: 2px;
}

.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-button,
.kg-card.kg-cta-card.kg-cta-minimal.kg-cta-has-img .kg-cta-button-wrapper {
    grid-area: btn;
}

/* --- Layout C: immersive ----------------------------------------------
   The wide view: image across the full width of the card, text centred
   below it, then the button.                                              */

.kg-card.kg-cta-card.kg-cta-immersive {
    --cta-pad: 0px;
    overflow: hidden;
}

.kg-card.kg-cta-card.kg-cta-immersive:not(.kg-cta-bg-none) {
    --cta-pad: 0px;
}

.kg-card.kg-cta-card.kg-cta-immersive .kg-cta-content {
    gap: 0;
}

/* The image keeps its own proportions — no forced crop. Add
   `aspect-ratio` here if you'd rather every immersive image be a 16:9 band. */
.kg-card.kg-cta-card.kg-cta-immersive .kg-cta-image-container {
    width: 100%;
    overflow: hidden;
    background-color: var(--surface);
    line-height: 0;
}

.kg-card.kg-cta-card.kg-cta-immersive .kg-cta-content-inner {
    padding: 22px;
    gap: 16px;
}

.kg-card.kg-cta-card.kg-cta-immersive.kg-cta-bg-none .kg-cta-content-inner {
    padding: 20px 0 0;
}

.kg-card.kg-cta-card.kg-cta-immersive.kg-cta-bg-none .kg-cta-image-container {
    border-radius: var(--card-radius);
}

.kg-card.kg-cta-card.kg-cta-immersive .kg-cta-text {
    text-align: center;
    font-size: 18px;
}

/* --- The button --------------------------------------------------------
   Full width, always. Colour comes from the editor (inline style) and falls
   back to the theme defaults when nothing is set.                          */

.kg-card.kg-cta-card .kg-cta-button-wrapper {
    display: block;
    width: 100%;
    margin: 0;
}

.kg-card.kg-cta-card .kg-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--btn-minh);
    margin: 0;
    padding: 18px 26px;

    background-color: var(--btn-bg);
    color: var(--btn-fg);
    border: 0;
    border-radius: var(--btn-radius);

    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 140ms ease, box-shadow 200ms ease, opacity 140ms ease;
    will-change: transform;
}

.kg-card.kg-cta-card .kg-cta-button:visited {
    color: var(--btn-fg);
}

/* Colour-agnostic states, so any per-CTA colour still reads correctly. */
@media (hover: hover) {
    .kg-card.kg-cta-card .kg-cta-button:hover {
        transform: translateY(-1px);
        opacity: 0.93;
        box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--fg) 70%, transparent);
    }
}

.kg-card.kg-cta-card .kg-cta-button:active {
    transform: translateY(0) scale(0.988);
    opacity: 0.88;
    box-shadow: none;
}

.kg-card.kg-cta-card .kg-cta-button:focus-visible {
    outline: 3px solid var(--fg);
    outline-offset: 3px;
}

/* A second button stacked under the first keeps the rhythm of the reference */
.kg-card.kg-cta-card + .kg-card.kg-cta-card {
    margin-top: 20px;
}

/* Two bare buttons in a row (no pretext between them) sit closer together */
.kg-card.kg-cta-card.kg-cta-bg-none.kg-cta-minimal:not(.kg-cta-has-img) + .kg-card.kg-cta-card.kg-cta-bg-none.kg-cta-minimal:not(.kg-cta-has-img) {
    margin-top: 18px;
}

/* Card with no button at all — just image + text */
.kg-card.kg-cta-card:not(:has(.kg-cta-button)) .kg-cta-text {
    font-size: 17px;
}


/* 7. Other Koenig cards
   ========================================================================= */

.card-content .kg-card {
    margin-top: 26px;
}

/* Native button card — matched to the CTA button */
.card-content .kg-card.kg-button-card {
    display: block;
    width: 100%;
}

.card-content .kg-card.kg-button-card .kg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--btn-minh);
    padding: 18px 26px;
    border-radius: var(--btn-radius);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-ui);
    font-size: 21px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 140ms ease, opacity 140ms ease;
}

.card-content .kg-card.kg-button-card .kg-btn:active {
    transform: scale(0.988);
    opacity: 0.88;
}

.card-content .kg-card.kg-button-card .kg-btn-accent {
    background-color: var(--accent);
    color: #fff;
}

/* Image card */
.card-content .kg-image-card img {
    width: 100%;
    border-radius: 16px;
}

.card-content .kg-image-card figcaption,
.card-content .kg-embed-card figcaption,
.card-content .kg-gallery-card figcaption {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    margin-top: 10px;
}

/* Gallery */
.card-content .kg-gallery-row {
    display: flex;
    gap: 6px;
}

.card-content .kg-gallery-image img {
    width: 100%;
    border-radius: 10px;
}

.card-content .kg-gallery-row + .kg-gallery-row {
    margin-top: 6px;
}

/* Bookmark */
.card-content .kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
}

.card-content .kg-bookmark-content {
    padding: 18px;
}

.card-content .kg-bookmark-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
}

.card-content .kg-bookmark-description {
    font-size: 14px;
    color: var(--muted);
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-content .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

.card-content .kg-bookmark-icon {
    width: 18px;
    height: 18px;
}

.card-content .kg-bookmark-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Callout */
.card-content .kg-callout-card {
    display: flex;
    gap: 12px;
    text-align: left;
    padding: 18px;
    border-radius: 16px;
    background-color: var(--surface);
}

.card-content .kg-callout-text {
    font-size: 16px;
}

/* Toggle */
.card-content .kg-toggle-card {
    text-align: left;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 18px;
}

.card-content .kg-toggle-heading-text {
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 700;
}

/* Header card */
.card-content .kg-header-card {
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
}

/* Embeds (YouTube, Spotify, etc.) */
.card-content .kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-content .kg-embed-card iframe {
    width: 100%;
    border-radius: 16px;
    border: 0;
}

/* Audio / video / file */
.card-content .kg-audio-card,
.card-content .kg-video-card,
.card-content .kg-file-card {
    text-align: left;
    border-radius: 16px;
    overflow: hidden;
}

.card-content .kg-file-card-container {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
}

/* Code */
.card-content pre {
    text-align: left;
    overflow-x: auto;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--surface);
    font-size: 13px;
}


/* 8. Utilities, motion, print
   ========================================================================= */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.error-stack {
    font-size: 11px;
    color: var(--muted);
}

/* No members UI on a link page */
.gh-portal-triggerbtn-iframe,
#ghost-portal-root .gh-portal-triggerbtn-wrapper {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .kg-card.kg-cta-card .kg-cta-button {
        box-shadow: none;
    }
}