/* Editor cards on top of Ghost's cards.min.css (card_assets: true). Kit tokens only, logical properties only, no new hex.
   Every selector starts with `main` so it beats Ghost's own rule whatever the stylesheet order is.
   !important appears only where Ghost writes an inline style (author-picked hex stays; defaults and Accent turn into the kit look). */

/* Accent: Ghost prints :root{--ghost-accent-color:#FF1A75} in {{ghost_head}}. Specificity (0,2,0) beats that (0,1,0) in any order,
   and the kit token switches by theme on :root, so the accent follows light and dark. */
:root:root { --ghost-accent-color: var(--jp-color-background-brand-default); }

/* ---- width classes: prose width in the normal template; zero specificity so B3's custom-wide breakout wins ---- */
:where(.kg-width-wide, .kg-width-full) { inline-size: 100%; }

/* ---- shared: rhythm, captions, surface ---- */
main .kg-card, main .kg-card + .kg-card { margin-block: var(--jp-size-space-800); margin-inline: 0; }
main .kg-card figcaption, main .kg-card .kg-file-card-caption + .x { color: var(--jp-tx2); }
main .kg-card figcaption { margin-block-start: var(--jp-size-space-200); text-wrap: pretty; text-align: start; font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
main .kg-card figcaption a { color: var(--jp-color-text-link-default); text-decoration: none; }
main .kg-card :is(button, a):focus-visible, main .kg-card input:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }
main .kg-audio-card, main .kg-bookmark-card a.kg-bookmark-container, main .kg-bookmark-card a.kg-bookmark-container:hover, main .kg-file-card a.kg-file-card-container, main .kg-file-card a.kg-file-card-container:hover,
main .kg-product-card-container, main .kg-toggle-card, main .kg-callout-card, main .kg-cta-card {
  border: 0; border-radius: var(--jp-size-radius-200); color: var(--jp-tx);
  background: var(--jp-color-background-default-secondary);
  box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line);
  font-family: var(--jp-font-body);
}
main .kg-toggle-card { background: transparent; }

/* ---- Image, Gallery ---- */
main .kg-gallery-card, main .kg-image-card { --gap: var(--jp-size-space-200); }
main .kg-image-card img, main .kg-gallery-image img { display: block; inline-size: 100%; block-size: auto; border-radius: var(--jp-size-radius-200); background: var(--jp-color-background-default-secondary); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
main .kg-gallery-image img { block-size: 100%; object-fit: cover; }
main .kg-gallery-image:not(:first-of-type) { margin: 0; margin-inline-start: var(--gap); }
main .kg-gallery-row:not(:first-of-type) { margin-block-start: var(--gap); } /* rows keep the same gap as images */
main .kg-card.kg-card-hascaption > img + figcaption, main .kg-card.kg-card-hascaption > .kg-gallery-container + figcaption { margin-block-start: var(--jp-size-space-200); }

/* ---- Callout (§6.2): white = hairline only; every other colour incl. accent = kit secondary surface ---- */
main .kg-callout-card { padding: var(--jp-size-space-400) var(--jp-size-space-600); gap: var(--jp-size-space-300); }
main .kg-callout-card:not(.kg-callout-card-white) { background: var(--jp-color-background-default-secondary); }
main .kg-callout-card.kg-callout-card-white { background: transparent; }
main .kg-callout-card div.kg-callout-emoji { padding: 0; font-size: 1em; line-height: var(--jp-lh-body-x); }
main .kg-callout-card div.kg-callout-text { font-size: inherit; line-height: var(--jp-lh-body-x); min-inline-size: 0; }
main .kg-callout-card a, main .kg-callout-card.kg-callout-card-accent a { color: var(--jp-color-text-link-default); text-decoration: none; }

/* ---- Toggle ---- */
main .kg-toggle-card { padding: var(--jp-size-space-400) var(--jp-size-space-600); }
main .kg-toggle-card h4.kg-toggle-heading-text { font: var(--jp-typography-weight-heading) var(--jp-typography-scale-04)/var(--jp-lh-heading-x) var(--jp-font-heading); }
main .kg-toggle-card .kg-toggle-heading-text > p { margin: 0; }
main .kg-toggle-card .kg-toggle-content > :is(p, ul, ol) { margin-block: var(--jp-size-space-300) 0; font-size: inherit; line-height: var(--jp-lh-body-x); }
main .kg-toggle-card .kg-toggle-card-icon { margin: 0; margin-inline-start: var(--jp-size-space-400); flex: none; color: var(--jp-tx2); }
main .kg-toggle-heading svg { color: var(--jp-tx2); }

/* ---- Code card: same block as the mockup's .code, always LTR, monochrome ---- */
main .kg-code-card pre { margin: 0; padding: var(--jp-size-space-400) var(--jp-size-space-600); overflow-x: auto; white-space: pre; tab-size: 2; direction: ltr; text-align: left;
  border-radius: var(--jp-size-radius-200); background: var(--jp-color-background-default-secondary); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line);
  font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/1.7 var(--jp-typography-family-mono); }
main .kg-code-card pre code { font: inherit; background: none; padding: 0; border-radius: 0; white-space: inherit; overflow-wrap: normal; }
main .kg-code-card pre:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }

/* ---- Bookmark ---- */
main .kg-bookmark-card a.kg-bookmark-container { overflow: hidden; }
main .kg-bookmark-content { padding: var(--jp-size-space-400); min-inline-size: 0; font-family: inherit; }
main .kg-bookmark-title { font: var(--jp-typography-weight-heading) var(--jp-typography-scale-04)/var(--jp-lh-heading-x) var(--jp-font-heading); }
main .kg-bookmark-description { margin-block-start: var(--jp-size-space-100); font-size: var(--jp-typography-scale-02); line-height: var(--jp-lh-body-x); max-block-size: none; color: var(--jp-tx2); opacity: 1; }
main .kg-bookmark-metadata { margin-block-start: var(--jp-size-space-400); gap: var(--jp-size-space-200); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/var(--jp-lh-label-x) var(--jp-font-ui); color: var(--jp-tx2); }
main .kg-bookmark-metadata > *:not(img) { opacity: 1; }
main :is(.kg-bookmark-author, .kg-bookmark-publisher) { font-weight: inherit; color: inherit; } /* metadata line sets the kit UI type */
main .kg-bookmark-metadata .kg-bookmark-icon { inline-size: 20px; block-size: 20px; margin: 0; flex: none; border-radius: var(--jp-size-radius-100); box-shadow: none; background: none; } /* beats entry.css .prose img */
main .kg-bookmark-thumbnail img { inset: 0; left: auto; border-radius: 0; } /* Ghost sets left:0; logical inset has no effect while left is set */
main .kg-bookmark-thumbnail img { inset-inline-start: 0; inset-block-start: 0; }

/* ---- Embed: YouTube / Vimeo at 16:9, text width ---- */
main .kg-embed-card iframe { display: block; max-inline-size: 100%; border: 0; border-radius: var(--jp-size-radius-200); }
main .kg-embed-card iframe:is([src*="youtube"], [src*="vimeo"]) { inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; }

/* ---- Button (always accent = kit primary, pill) ---- */
main .kg-button-card a.kg-btn, main .kg-cta-card a.kg-cta-button, main .kg-header-card .kg-header-card-button[class][class][class], main .kg-signup-card-button, main .kg-product-card a.kg-product-card-button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; block-size: var(--jp-size-control-medium); min-block-size: var(--jp-size-control-medium); margin: 0; padding: 0 var(--jp-size-space-400);
  border: 0; border-radius: var(--jp-size-radius-full); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); letter-spacing: 0; text-decoration: none; white-space: nowrap; opacity: 1;
  transition: background-color var(--jp-t-hover), color var(--jp-t-hover);
}
main .kg-button-card a.kg-btn-accent, main .kg-cta-card a.kg-cta-button.kg-style-accent, main .kg-cta-card a.kg-cta-button:is([style*="#000000" i], [style*="rgb(0, 0, 0)"]),
main .kg-header-card .kg-header-card-button.kg-style-accent[class][class], main .kg-signup-card-button.kg-style-accent, main .kg-product-card a.kg-product-card-btn-accent {
  background: var(--jp-color-background-brand-default) !important; color: var(--jp-color-text-brand-on-brand) !important; /* !important: Ghost inlines default hex on the CTA, header and signup buttons */
}
@media (hover: hover) {
  main .kg-button-card a.kg-btn-accent:hover, main .kg-cta-card a.kg-cta-button.kg-style-accent:hover, main .kg-cta-card a.kg-cta-button:is([style*="#000000" i], [style*="rgb(0, 0, 0)"]):hover,
  main .kg-header-card-button.kg-style-accent:hover, main .kg-signup-card-button.kg-style-accent:hover, main .kg-product-card a.kg-product-card-btn-accent:hover { background: var(--jp-color-background-brand-hover) !important; opacity: 1; }
}
main .kg-button-card a.kg-btn:active { transform: scale(.97); }

/* ---- Call to action: same surface rule as Callout; grey/blue/green/... = secondary, white = hairline, none = no box ---- */
main .kg-cta-card:is(.kg-cta-bg-grey, .kg-cta-bg-blue, .kg-cta-bg-green, .kg-cta-bg-yellow, .kg-cta-bg-red, .kg-cta-bg-pink, .kg-cta-bg-purple) { background: var(--jp-color-background-default-secondary); }
main .kg-cta-card.kg-cta-bg-white { background: transparent; }
main .kg-cta-card.kg-cta-bg-none { background: none; box-shadow: none; border-radius: 0; }
main .kg-cta-sponsor-label-wrapper, main .kg-cta-bg-none .kg-cta-content, main .kg-cta-bg-none:not(.kg-cta-no-dividers) .kg-cta-content:not(.kg-cta-sponsor-label-wrapper + .kg-cta-content) { border-color: var(--jp-line); }
main .kg-cta-sponsor-label { font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/var(--jp-lh-label-x) var(--jp-font-ui); }
main .kg-cta-sponsor-label span:not(a span) { color: var(--jp-tx2); }
main .kg-cta-text p { font-size: inherit; line-height: var(--jp-lh-body-x); margin: 0; }
main .kg-cta-text a, main .kg-cta-link-accent .kg-cta-text a { color: var(--jp-color-text-link-default); text-decoration: none; }
main .kg-cta-image-container img { border-radius: var(--jp-size-radius-200); max-block-size: 24rem; object-fit: cover; }
main .kg-cta-content-inner { align-items: flex-start; }
main .kg-cta-immersive.kg-cta-centered .kg-cta-content-inner { align-items: center; }
main .kg-cta-immersive.kg-cta-has-img a.kg-cta-button { inline-size: 100%; }

/* ---- Header (v2) and Signup: author-picked hex stays; Accent or the Ghost default colours = kit surface ---- */
main .kg-header-card.kg-v2, main .kg-signup-card { border-radius: var(--jp-size-radius-200); overflow: hidden; font-family: var(--jp-font-body); }
main .kg-header-card-text, main .kg-signup-card-text { padding: var(--jp-size-space-800) var(--jp-size-space-600); text-align: start; }
main .kg-header-card-text.kg-align-center, main .kg-signup-card-text.kg-align-center { text-align: center; align-items: center; }
main :is(.kg-width-wide, .kg-width-full) :is(.kg-header-card-text, .kg-signup-card-text) { padding: var(--jp-size-space-800) var(--jp-size-space-600); }
main .kg-header-card h2.kg-header-card-heading, main .kg-signup-card h2.kg-signup-card-heading { font: var(--jp-typography-weight-heading) var(--jp-typography-scale-06)/var(--jp-lh-heading-x) var(--jp-font-heading); letter-spacing: 0; margin: 0; text-wrap: balance; }
main .kg-header-card .kg-header-card-subheading, main .kg-signup-card .kg-signup-card-subheading { max-inline-size: none; margin: var(--jp-size-space-300) 0 0; font: var(--jp-typography-weight-regular) var(--jp-typography-scale-04)/var(--jp-lh-body-x) var(--jp-font-body); }
main .kg-header-card .kg-header-card-button[class][class][class] { margin-block: var(--jp-size-space-600) 0; }
/* defaults + Accent -> kit look */
main .kg-header-card:is(.kg-style-accent, [data-background-color="#000000" i]) { background: var(--jp-color-background-default-secondary) !important; box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
main .kg-header-card:is(.kg-style-accent, [data-background-color="#000000" i]) :is(.kg-header-card-heading, .kg-header-card-subheading) { color: var(--jp-tx) !important; }
main .kg-header-card:is(.kg-style-accent, [data-background-color="#000000" i]) .kg-header-card-button[class][class] { background: var(--jp-color-background-brand-default) !important; color: var(--jp-color-text-brand-on-brand) !important; }
main .kg-signup-card:is(.kg-style-accent, [style*="#F0F0F0" i], [style*="rgb(240, 240, 240)"]) { background: var(--jp-color-background-default-secondary) !important; box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
main .kg-signup-card:is(.kg-style-accent, [style*="#F0F0F0" i], [style*="rgb(240, 240, 240)"]) :is(.kg-signup-card-heading, .kg-signup-card-subheading, .kg-signup-card-disclaimer, .kg-signup-card-success, .kg-signup-card-error) { color: var(--jp-tx) !important; }
main .kg-signup-card-disclaimer { margin: var(--jp-size-space-300) 0 0; font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
main .kg-signup-card-form { gap: 0; }
main .kg-signup-card-heading + .kg-signup-card-form, main .kg-signup-card-subheading + .kg-signup-card-form, main :is(.kg-width-wide, .kg-width-full) :is(.kg-signup-card-heading, .kg-signup-card-subheading) + .kg-signup-card-form { margin: var(--jp-size-space-600) 0 0; }
main .kg-signup-card-fields { gap: var(--jp-size-space-200); padding: 0; background: none; border: 0; max-inline-size: 28rem; }
main .kg-signup-card-input { box-sizing: border-box; flex: 1; min-inline-size: 0; block-size: var(--jp-size-control-medium); min-block-size: var(--jp-size-control-medium); margin: 0; padding: 0 var(--jp-size-space-400);
  border: 0; border-radius: var(--jp-size-radius-full); background: var(--jp-bg); color: var(--jp-tx); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line-ctl);
  font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
main .kg-signup-card-input::placeholder { color: var(--jp-tx2); opacity: 1; }
main .kg-signup-card-input:focus-visible { outline: var(--jp-size-stroke-focus-ring) solid var(--jp-ring); outline-offset: var(--jp-size-stroke-focus-offset); }
main .kg-signup-card-form.error .kg-signup-card-fields { border: 0; box-shadow: none; }
main .kg-signup-card-form.error .kg-signup-card-input { box-shadow: inset 0 0 0 var(--jp-size-stroke-border-strong) var(--jp-color-border-danger-default); }
main .kg-signup-card-form.error .kg-signup-card-error { color: var(--jp-color-text-danger-default) !important; inset-block-end: calc(-1 * var(--jp-size-space-800)); font: var(--jp-typography-weight-ui) var(--jp-typography-scale-02)/var(--jp-lh-label-x) var(--jp-font-ui); }
main .kg-signup-card-form.success .kg-signup-card-success { font: var(--jp-typography-weight-ui) var(--jp-typography-scale-03)/var(--jp-lh-label-x) var(--jp-font-ui); }

/* ---- Product ---- */
main .kg-product-card-container { max-inline-size: none; padding: var(--jp-size-space-600); font-family: inherit; }
main .kg-product-card-image { max-inline-size: 100%; border-radius: var(--jp-size-radius-200); }
main .kg-product-card h4.kg-product-card-title { font: var(--jp-typography-weight-heading) var(--jp-typography-scale-05)/var(--jp-lh-heading-x) var(--jp-font-heading); }
main .kg-product-card .kg-product-card-description :is(p, ul, ol) { font-size: var(--jp-typography-scale-03); line-height: var(--jp-lh-body-x); opacity: 1; color: var(--jp-tx2); margin-block: 0; }
main .kg-product-card .kg-product-card-description p:first-of-type { margin-block-start: 0; }
main .kg-product-card-rating { padding: 0; padding-inline-start: var(--jp-size-space-400); color: var(--jp-tx); }
@media (max-width: 400px) { main .kg-product-card-rating { padding-inline-start: 0; } }

/* ---- File ---- */
main .kg-file-card a.kg-file-card-container { padding: var(--jp-size-space-300); text-decoration: none; }
main .kg-file-card-title { font: var(--jp-typography-weight-heading) var(--jp-typography-scale-04)/var(--jp-lh-heading-x) var(--jp-font-heading); }
main .kg-file-card-caption { font-size: var(--jp-typography-scale-03); line-height: var(--jp-lh-body-x); color: var(--jp-tx2); opacity: 1; }
main .kg-file-card-metadata { font: var(--jp-typography-weight-ui) var(--jp-typography-scale-01)/var(--jp-lh-label-x) var(--jp-font-ui); color: var(--jp-tx2); }
main .kg-file-card-filename { font-weight: var(--jp-typography-weight-ui); }
main .kg-file-card-filesize { font-size: inherit; opacity: 1; }
main .kg-file-card-icon svg { color: var(--jp-color-icon-default-default); }

/* ---- Audio, Video: media controls never mirror (kit rule), colours from the kit ---- */
main .kg-audio-card { padding: var(--jp-size-space-100); }
main .kg-audio-card .kg-audio-thumbnail.placeholder { background: var(--jp-color-background-default-tertiary); }
main .kg-audio-card .kg-audio-thumbnail.placeholder svg { fill: var(--jp-tx); }
main .kg-audio-title { font: var(--jp-typography-weight-heading) var(--jp-typography-scale-04)/var(--jp-lh-heading-x) var(--jp-font-heading); text-align: start; }
main .kg-audio-player, main .kg-video-player { direction: ltr; }
main :is(.kg-audio-current-time, .kg-audio-playback-rate, .kg-video-current-time, .kg-video-playback-rate) { font-family: var(--jp-font-ui); font-weight: var(--jp-typography-weight-ui); text-align: start; }
main :is(.kg-audio-time, .kg-video-time) { color: var(--jp-tx2); font-family: var(--jp-font-ui); font-weight: var(--jp-typography-weight-ui); }
main .kg-audio-player-container input[type=range]::-webkit-slider-runnable-track { background: var(--jp-line); }
main .kg-audio-player-container input[type=range]::-webkit-slider-thumb { background: var(--jp-tx); box-shadow: none; }
main .kg-audio-player-container input[type=range]::-moz-range-track { background: var(--jp-line); }
main .kg-audio-player-container input[type=range]::-moz-range-thumb { background: var(--jp-tx); box-shadow: none; }
main .kg-video-container { border-radius: var(--jp-size-radius-200); background: var(--jp-color-background-default-secondary); box-shadow: inset 0 0 0 var(--jp-size-stroke-border) var(--jp-line); }
/* Ghost darkens the controls with a gradient; the kit has none, so flat void scrims (video content is dark, so Void/Bone are fixed here) */
main .kg-video-overlay { background: none; }
main .kg-video-player-container { background: rgba(var(--jp-rgb-void), .72); }
main .kg-video-large-play-icon { background: rgba(var(--jp-rgb-void), .72); }
main :is(.kg-video-player-container, .kg-video-overlay) { color: var(--jp-color-bone); }
main .kg-video-card :is(.kg-video-large-play-icon svg, .kg-video-player svg) { fill: var(--jp-color-bone); }

/* ---- Quotes (Ghost's "Quote 2"): no italics (brief 7) ---- */
main .kg-blockquote-alt { font-style: normal; text-align: start; padding-inline: 0; font-size: var(--jp-typography-scale-05); line-height: var(--jp-lh-heading-x); }

/* ---- phone: ---- */
@media (max-width: 640px) {
  main .kg-callout-card, main .kg-toggle-card { padding-inline: var(--jp-size-space-400); }
  main .kg-bookmark-card a.kg-bookmark-container { flex-direction: column-reverse; }
  main .kg-bookmark-thumbnail { min-block-size: 8rem; }
  main .kg-signup-card-fields { flex-direction: column; max-inline-size: none; }
  main .kg-signup-card-input, main .kg-signup-card-button { inline-size: 100%; justify-content: center; }
}