/* What Ghost's editor can put in a letter: text formatting and every card, themed to the sky.
   Ghost loads its own card styles (cards.min.css) after the theme's, so these selectors start with ".post .prose"
   to win. Colours come from the --a-* variables the sky clock sets, so every card follows day and night.
   Cards whose colours the writer picks in the editor (header, signup, call to action) keep those colours.
   Checked against /every-card/ (scripts/dev-cards.mjs, tests/e2e/cards.spec.js). */

.post { --ghost-accent-color: var(--a-accent); --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* Text */
.post .prose h3 { font: 500 1.4rem/1.25 var(--serif); margin: 2rem 0 0.7rem; }
.post .prose h4 { font: 600 1.15rem/1.3 var(--serif); margin: 1.8rem 0 0.6rem; }
.post .prose h5, .post .prose h6 { font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-t2); margin: 1.8rem 0 0.6rem; }
.post .prose a { color: var(--a-accent); text-underline-offset: 3px; }
.post .prose ul, .post .prose ol { margin: 0 0 1.05em; padding-left: 1.4em; }
.post .prose li { margin: 0.3em 0; padding-left: 0.25em; }
.post .prose li::marker { color: var(--a-accent); }
.post .prose li > ul, .post .prose li > ol { margin: 0.3em 0 0; }
.post .prose ul ul li { list-style-type: circle; }
.post .prose code { font: 400 0.82em/1 var(--mono); padding: 0.14em 0.36em; border-radius: 5px; background: var(--a-chip); box-shadow: inset 0 0 0 1px var(--a-line); }
.post .prose sup { line-height: 0; }
.post .prose sup a { text-decoration: none; }

/* Quotes: the plain one with a rule; the alternate ("aside") one centred, larger, italic. */
.post .prose blockquote { margin: 1.7rem 0; padding: 0.1rem 0 0.1rem 1.15rem; border-left: 3px solid var(--a-accent); font-style: italic; }
.post .prose blockquote p:last-child { margin-bottom: 0; }
.post .prose blockquote.kg-blockquote-alt { margin: 2.2rem 0; padding: 0 1.5rem; border: 0; text-align: center; font: italic 400 1.3em/1.5 var(--serif); color: var(--a-t1); }

/* A break between sections: three dots rather than a line. */
.post .prose hr { border: 0; height: auto; margin: 2.4rem 0; text-align: center; color: var(--a-t2); }
.post .prose hr::after { content: '·   ·   ·'; white-space: pre; font: 400 1.2rem/1 var(--serif); }

/* Every card sits on the text column's left edge, with even space around it. */
.post .prose figure { margin: 1.9rem 0; }
.post .prose .kg-card { margin-block: 1.9rem; }
.post .prose .kg-card:not(.kg-width-full) { margin-inline: 0; }
.post .prose figcaption { margin-top: 0.65rem; font: 400 0.88rem/1.45 var(--sans); color: var(--a-t2); text-align: left; }
.post .prose figcaption a { color: inherit; }

/* Pictures keep their shape. Tall ones stop at most of a screen and centre in the column. At night they dim a
   little, like every picture on the site, and brighten under the pointer. */
.post .prose img { max-width: 100%; height: auto; }
.post .prose .kg-image-card img, .post .prose .kg-gallery-image img { filter: brightness(var(--a-dim)); transition: filter 0.3s; }
.post .prose .kg-image-card img:hover, .post .prose .kg-gallery-image img:hover { filter: none; }
.post .prose .kg-image-card:not(.kg-width-wide):not(.kg-width-full) img { display: block; width: auto; height: auto; max-width: 100%; max-height: 80vh; margin-inline: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--a-line); }
.post .prose .kg-width-wide img { border-radius: 14px; }
.post .prose .kg-gallery-container { display: flex; flex-direction: column; gap: 0.5rem; }
.post .prose .kg-gallery-row { gap: 0.5rem; }
.post .prose .kg-gallery-row:not(:first-of-type), .post .prose .kg-gallery-image:not(:first-of-type) { margin: 0; }
.post .prose .kg-gallery-image img { border-radius: 10px; }

/* Bookmarks, products, audio and files: raised cards in the page's own colours. */
.post .prose .kg-bookmark-container,
.post .prose .kg-product-card-container,
.post .prose .kg-audio-card,
.post .prose .kg-file-card-container {
  background: var(--a-raised); color: var(--a-t1); border: 0; border-radius: 14px; box-shadow: 0 0 0 1px var(--a-line); text-decoration: none; overflow: hidden;
}
.post .prose .kg-bookmark-container:hover, .post .prose .kg-file-card-container:hover { box-shadow: 0 0 0 1px var(--a-accent); }
.post .prose .kg-bookmark-content { padding: 1.05rem 1.2rem; }
.post .prose .kg-bookmark-title { font: 500 1.08rem/1.3 var(--serif); color: var(--a-t1); }
.post .prose .kg-bookmark-description { font: 400 0.9rem/1.45 var(--sans); color: var(--a-t2); margin-top: 0.35rem; }
.post .prose .kg-bookmark-metadata { font: 400 0.82rem/1.3 var(--sans); color: var(--a-t2); margin-top: 0.9rem; }
.post .prose .kg-bookmark-publisher, .post .prose .kg-bookmark-author { color: var(--a-t2); }
.post .prose .kg-bookmark-icon { border-radius: 4px; }
/* Ghost fades cards' small print to 60–70% opacity, which takes the page's second text colour under 4.5:1 on a
   white card. That colour is already the quieter one, so the fade goes. */
.post .prose :is(.kg-bookmark-description, .kg-bookmark-metadata > :not(img), .kg-file-card-caption, .kg-file-card-filesize,
  .kg-product-card-description, .kg-collection-card-post-meta, .kg-transistor-description) { opacity: 1; color: var(--a-t2); }
.post .prose .kg-bookmark-thumbnail img { border-radius: 0; filter: brightness(var(--a-dim)); }

.post .prose .kg-product-card-container { padding: 1.1rem; gap: 0.7rem; }
.post .prose .kg-product-card { margin-inline: 0; }
.post .prose .kg-product-card-title { font: 500 1.25rem/1.25 var(--serif); color: var(--a-t1); }
.post .prose .kg-product-card-description { font: 400 0.95rem/1.5 var(--sans); color: var(--a-t2); }
.post .prose .kg-product-card-description p { margin: 0 0 0.6em; }
.post .prose .kg-product-card-rating-star svg { fill: var(--a-t1); }
.post .prose .kg-product-card-rating-star.kg-product-card-rating-active svg { fill: var(--a-accent); }
.post .prose .kg-product-card-image { border-radius: 10px; filter: brightness(var(--a-dim)); }

.post .prose .kg-audio-card { min-height: 0; padding: 0.8rem; }
.post .prose .kg-audio-title { font: 600 1rem/1.3 var(--sans); color: var(--a-t1); }
.post .prose .kg-audio-thumbnail { border-radius: 8px; }
.post .prose .kg-audio-card svg, .post .prose .kg-audio-current-time, .post .prose .kg-audio-time, .post .prose .kg-audio-playback-rate { color: var(--a-t1); fill: var(--a-t1); }
.post .prose .kg-file-card-container { padding: 0.9rem 1rem; }
.post .prose .kg-file-card-title { font: 600 1rem/1.3 var(--sans); color: var(--a-t1); }
.post .prose .kg-file-card-caption, .post .prose .kg-file-card-metadata, .post .prose .kg-file-card-filesize { font-family: var(--sans); color: var(--a-t2); }
.post .prose .kg-file-card-icon { color: var(--a-accent); }
.post .prose .kg-file-card-icon::before { background: var(--a-chip); }

/* Callouts and toggles */
.post .prose .kg-callout-card { border-radius: 14px; padding: 1.1rem 1.3rem; gap: 0.7rem; font: 400 1.05rem/1.6 var(--serif); }
.post .prose .kg-callout-card-accent { background: var(--a-accent); color: var(--a-paper); }
.post .prose .kg-callout-card-accent a { color: inherit; }
.post .prose .kg-callout-text p { margin: 0; }
.post .prose .kg-toggle-card { background: var(--a-chip); border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--a-line); padding: 1rem 1.2rem; }
.post .prose .kg-toggle-heading-text { font: 500 1.1rem/1.35 var(--serif); color: var(--a-t1); margin: 0; }
.post .prose .kg-toggle-card-icon { color: var(--a-t2); }
.post .prose .kg-toggle-content { font-size: 1.05rem; color: var(--a-t1); }

/* Buttons: the theme's pill, in the accent. */
.post .prose .kg-btn, .post .prose .kg-product-card-button {
  border-radius: 99px; font: 600 0.95rem/1 var(--sans); padding: 0.75rem 1.25rem; height: auto; text-decoration: none;
  background: var(--a-accent); color: var(--a-paper);
}
.post .prose .kg-button-card.kg-align-left { justify-content: flex-start; }
/* Ghost writes white text on accent-coloured card buttons; at night the accent is light, so use the page colour
   instead. Only Ghost's default white is replaced: a text colour chosen in the editor stays. */
.post .prose .kg-style-accent[style*="color: #FFFFFF"], .post .prose .kg-style-accent[style*="color: #ffffff"] { color: var(--a-paper) !important; }

/* Embeds: video players fill the column at 16:9; anything else centres. */
.post .prose .kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.post .prose .kg-embed-card iframe { max-width: 100%; border-radius: 12px; }
.post .prose .kg-embed-card iframe[src*="youtube"], .post .prose .kg-embed-card iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.post .prose .kg-embed-card figcaption { align-self: stretch; }
.post .prose .kg-video-container { border-radius: 14px; overflow: hidden; }

/* Code and tables scroll inside themselves on narrow screens. */
.post .prose pre { margin: 1.7rem 0; padding: 1rem 1.2rem; overflow-x: auto; border-radius: 12px; background: var(--a-chip); box-shadow: inset 0 0 0 1px var(--a-line); font: 400 0.84rem/1.6 var(--mono); color: var(--a-t1); }
.post .prose pre code { font: inherit; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.post .prose .kg-code-card { min-width: 0; }
.post .prose .kg-code-card pre { margin: 0; }
.post .prose table { display: block; max-width: 100%; overflow-x: auto; margin: 1.7rem 0; border-collapse: collapse; font: 400 0.95rem/1.45 var(--sans); background: transparent; }
.post .prose th, .post .prose td { padding: 0.55rem 0.9rem 0.55rem 0; border-bottom: 1px solid var(--a-line); text-align: left; vertical-align: top; }
.post .prose th { font-weight: 600; color: var(--a-t2); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.post .prose .footnotes { font: 400 0.9rem/1.5 var(--sans); color: var(--a-t2); }
.post .prose .footnotes-sep { margin: 2rem 0 1rem; }
.post .prose .footnotes ol { padding-left: 1.2em; }

/* Cards the writer colours in the editor still get the theme's corners and type. */
.post .prose .kg-header-card, .post .prose .kg-signup-card, .post .prose .kg-cta-card { border-radius: 14px; overflow: hidden; }
.post .prose .kg-signup-card:not(.kg-width-wide):not(.kg-width-full) { width: 100%; }
.post .prose .kg-header-card h2, .post .prose .kg-signup-card h2 { font-family: var(--serif); }

/* The cover: the picture at its own shape, at most most of a screen tall, with the credit beneath it. */
.post .cover { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.post .cover .cover-img { position: static; display: block; width: 100%; height: auto; max-height: 75vh; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 1px var(--a-line); }
.post .cover figcaption { position: static; margin-top: 0.65rem; padding: 0; border-radius: 0; background: none; backdrop-filter: none; color: var(--a-t2); font: 400 0.85rem/1.4 var(--sans); }
.post .cover figcaption a { color: inherit; }
@container (max-width: 640px) {
  .post .cover { aspect-ratio: auto; }
  .post .cover .cover-img { border-radius: 0; box-shadow: none; }
  .post .cover figcaption { padding-inline: clamp(1.1rem, 4vw, 2.5rem); }
}