/* ==========================================================================
   Alicia McKay — post type system
   Plain CSS, loaded after the theme bundle. Nothing here needs a build step,
   so the theme can be rebuilt from source without losing any of it.

   Uses the theme's own colour variables, so dark mode keeps working.
   ========================================================================== */

:root {
  --am-measure: 748px;
  --am-rail: 232px;
  --am-gap: 56px;
  --am-yellow: #FAC300;
}

/* --------------------------------------------------------------- structure */

.am-grid {
  max-width: calc(var(--am-rail) + var(--am-gap) + var(--am-measure));
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--am-rail) minmax(0, var(--am-measure));
  gap: var(--am-gap);
  /* Rail sits at the top by default. It only stretches when there's a
     contents list, which needs a full-height column to travel down. */
  align-items: start;
  padding-top: 2.75rem;
}

/* No rail (book pages) — collapse to a single centred column */
.am-grid:not(:has(.am-rail)) {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--am-measure);
}

/* Below the grid breakpoint the rail sits above the text, horizontally. */
@media (max-width: 1080px) {
  .am-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--am-measure);
    gap: 1.5rem;
  }
}

.am-body { max-width: var(--am-measure); }

/* ------------------------------------------------------------------- marks */

.am-typemark { margin-bottom: 1.35rem; }

.am-mark {
  display: block;
  width: 26px;
  height: 26px;
  color: #FAC300;
  margin-bottom: 0.7rem;
}
.am-mark svg { width: 100%; height: 100%; display: block; }

.am-typemark__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Colour rather than opacity — opacity here washed out the yellow dot,
     because the dot is a child of this element. */
  color: color-mix(in srgb, var(--color-typography) 62%, transparent);
}
.am-typemark--dark .am-typemark__label { color: rgba(255,255,255,0.72); }

.am-dot {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #FAC300;
  display: inline-block;
  flex-shrink: 0;
  opacity: 1;
}

/* ------------------------------------------------------------------- pills */

.am-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

.am-pill {
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--color-typography) 6%, transparent);
  color: color-mix(in srgb, var(--color-typography) 70%, transparent);
  text-decoration: none;
}
.am-pill:hover { color: var(--color-typography); }
.am-pill--dark { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); }
.am-pill--dark:hover { color: #fff; }

/* -------------------------------------------------------------------- rail */

.am-rail { font-size: 0.875rem; }

.am-rail-detail { margin-bottom: 1.75rem; }

@media (max-width: 1080px) {
  .am-rail-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    padding: 0;
    margin-bottom: 1.5rem;
  }
  .am-rail-item { margin-bottom: 0; }
  .am-rail-item--credit { flex-basis: 100%; }
}

.am-rail-item { margin-bottom: 0.85rem; }

.am-rail-label {
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.3rem;
}

.am-rail-value { font-size: 0.9375rem; font-weight: 600; }
.am-rail-value a { text-decoration: none; color: inherit; }
.am-rail-value a:hover { color: var(--am-yellow); }
.am-rail-credit { font-weight: 400; font-size: 0.8125rem; opacity: 0.75; line-height: 1.5; }

/* The contents list is generated client side — hide the shell when it's empty
   so short pieces don't carry an empty heading. */
aside[data-toc]:has([data-toc-content]:empty) { display: none; }
aside[data-toc]:not(:has([data-toc-content] a)) { display: none; }

/* ------------------------------------------------------------- hero: plate */

.am-hero-plate {
  position: relative;
  min-height: min(620px, 68vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #151311;
}
.am-hero-plate--noimage { background: linear-gradient(165deg, #3E3830, #151311 72%); }

.am-hero-plate__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.am-hero-plate__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.88) 100%);
}
.am-hero-plate__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 4rem;
  color: #fff;
}
.am-hero-plate__title {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0;
  color: #fff;
  max-width: 22ch;
}
.am-hero-plate__standfirst {
  font-size: 1.4375rem;
  line-height: 1.45;
  margin-top: 1rem;
  color: rgba(255,255,255,0.82);
  max-width: 54ch;
}

/* ------------------------------------------------------------ hero: flurry */

.am-hero-flurry { background: #0A0A0A; color: #fff; }
.am-hero-flurry__inner {
  max-width: calc(var(--am-rail) + var(--am-gap) + var(--am-measure));
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}
.am-hero-flurry__title {
  font-size: clamp(1.875rem, 4.5vw, 2.875rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0;
  color: #fff;
}
.am-hero-flurry__standfirst {
  font-size: 1.3125rem;
  line-height: 1.45;
  margin-top: 1rem;
  color: rgba(255,255,255,0.78);
  max-width: 48ch;
}

/* ------------------------------------------------------------- hero: cover */

.am-hero-cover {
  max-width: calc(var(--am-rail) + var(--am-gap) + var(--am-measure));
  margin: 0 auto;
  padding: 3.5rem 0 0;
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.am-hero-cover__text { flex: 1 1 340px; min-width: 280px; }
.am-hero-cover__title {
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0;
}
.am-hero-cover__standfirst {
  font-size: 1.25rem;
  line-height: 1.45;
  margin-top: 0.9rem;
  opacity: 0.72;
}
/* Cover artwork. These are often promo renders on their own white
   background, so no border and no crop — let the artwork be the shape it is. */
.am-hero-cover__img {
  flex: 0 1 340px;
  width: 100%;
  max-width: 340px;
}
.am-cover-img {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
}


/* ----------------------------------------------------------- hero: default */

.am-hero-default {
  max-width: calc(var(--am-rail) + var(--am-gap) + var(--am-measure));
  margin: 0 auto;
  padding: 3.5rem 0 0;
}

/* Two columns when there's an image — title left, picture right. Collapses
   to one column on its own when there isn't. */
@media (min-width: 901px) {
  .am-hero-default:has(.am-hero-default__img) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 3rem;
    align-items: center;
  }
}

.am-hero-default__img { margin: 0; }
@media (max-width: 900px) {
  .am-hero-default__img { margin-top: 2rem; }
}

.am-hero-img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
  display: block;
}
.am-hero-default__title {
  font-size: clamp(1.875rem, 4.5vw, 2.875rem);
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.028em;
  margin: 0;
}
.am-hero-default__standfirst {
  font-size: 1.3125rem;
  line-height: 1.45;
  margin-top: 1rem;
  opacity: 0.72;
  max-width: 48ch;
}


/* --------------------------------------------------- body: quote and rules */

/* Ghost's two quote styles, given two jobs rather than two decorations.
   Ghost's card CSS loads after this file via {{ghost_head}} and Tailwind's
   typography plugin adds its own glyphs — hence the !important flags.

   Quote        → someone else's words, cited inside your argument.
   Quote 2      → your own line, amplified. A pull quote.
*/

/* ---- shared reset for both ---- */
.am-body blockquote,
.am-body .kg-blockquote-alt {
  border: 0 !important;
  border-left: 0 !important;
  border-inline-start-width: 0 !important;
  font-style: normal !important;
  text-align: left !important;
  quotes: none !important;
  color: var(--color-typography) !important;
  position: relative;
}

.am-body blockquote p::before,
.am-body blockquote p::after,
.am-body .kg-blockquote-alt p::before,
.am-body .kg-blockquote-alt p::after {
  content: none !important;
}

.ghost-content.am-body blockquote p,
.am-body blockquote p {
  font-style: normal !important;
  text-align: left !important;
  color: var(--color-typography) !important;
  margin: 0 !important;
}

/* ---- Quote: a cited source ---- */
.am-body blockquote:not(.kg-blockquote-alt) {
  background: color-mix(in srgb, var(--color-typography) 4%, transparent) !important;
  padding: 1.9rem 2rem 1.75rem !important;
  margin: 4rem 0 2.5rem !important;
  line-height: 1.34 !important;
}

.am-body blockquote:not(.kg-blockquote-alt)::before {
  content: "" !important;
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 1rem;
  background-color: #FAC300;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 13.2c0-4.2 2.3-7.2 6-8.4v2.5c-2 .9-3.1 2.4-3.3 4.2h2.9V19H3.5v-5.8Zm11 0c0-4.2 2.3-7.2 6-8.4v2.5c-2 .9-3.1 2.4-3.3 4.2h2.9V19h-5.6v-5.8Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 13.2c0-4.2 2.3-7.2 6-8.4v2.5c-2 .9-3.1 2.4-3.3 4.2h2.9V19H3.5v-5.8Zm11 0c0-4.2 2.3-7.2 6-8.4v2.5c-2 .9-3.1 2.4-3.3 4.2h2.9V19h-5.6v-5.8Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.ghost-content.am-body blockquote:not(.kg-blockquote-alt) p,
.am-body blockquote:not(.kg-blockquote-alt) p {
  font-size: 1.1875rem !important;
  line-height: 1.34 !important;
  font-weight: 500 !important;
  letter-spacing: -0.018em;
}

/* ---- Quote 2: your own line, pulled out ---- */
.am-body blockquote.kg-blockquote-alt,
.am-body .kg-blockquote-alt {
  background: transparent !important;
  border-left: 2px solid #FAC300 !important;
  padding: 0.15rem 0 0.15rem 1.25rem !important;
  margin: 2.75rem 0 2.25rem !important;
}

@media (min-width: 768px) {
  .am-body blockquote.kg-blockquote-alt,
  .am-body .kg-blockquote-alt {
    padding-left: 1.75rem !important;
    margin: 3.5rem 0 2.75rem !important;
  }
}

.am-body .kg-blockquote-alt::before { content: none !important; }

.ghost-content.am-body blockquote.kg-blockquote-alt p,
.am-body .kg-blockquote-alt p {
  font-size: 1.375rem !important;
  line-height: 1.26 !important;
  font-weight: 600 !important;
  letter-spacing: -0.028em !important;
  color: #141210 !important;
}

/* ---- attribution, either style ---- */
.am-body blockquote cite,
.am-body blockquote footer {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-style: normal;
  opacity: 0.6;
}

/* Section divider — the one other place yellow appears. */
.am-body hr {
  border: 0;
  border-top: 1px solid var(--am-yellow);
  margin: 2.875rem 0;
}

/* Lead paragraph. Pure CSS, so there is nothing to remember when writing. */
.am-body > p:first-of-type {
  font-size: 1.375rem;
  line-height: 1.55;
  font-weight: 500;
}

/* Subheads sit lighter than the theme default. */
.am-body h2 {
  font-weight: 600;
  letter-spacing: -0.022em;
}

/* ------------------------------------------------- contents list, in rail */
/* The theme's TOC partial is built for a wider centred sidebar. Inside the
   rail it needs to be left aligned, unboxed and quiet. */

.am-rail [data-toc] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.am-rail [data-toc] > div {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.am-rail [data-toc-toggle] {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--color-typography);
  border-radius: 0;
  padding: 0 0 0.55rem;
  margin: 0 0 0.25rem;
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.6;
}
.am-rail [data-toc-toggle]:hover { background: transparent; }

.am-rail [data-toc-content] { font-size: 0.8125rem; line-height: 1.4; }

.am-rail [data-toc-content] a {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
  border-left: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  opacity: 0.72;
}
.am-rail [data-toc-content] a:hover { opacity: 1; }

/* Contents lists only ever hold top-level headings now, so no nesting */
.am-rail [data-toc-content] ol,
.am-rail [data-toc-content] ul { margin: 0; padding: 0; list-style: none; }

/* Active item: a yellow marker rather than a grey box */
.am-rail [data-toc-content] .is-active-link,
.am-rail [data-toc-content] a.is-active-link {
  background: transparent;
  opacity: 1;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--am-yellow);
  padding-left: 0.6rem;
}

/* The rail is a full-height column; its contents sit at the top and the
   contents list sticks as you scroll. */
.am-grid:has([data-toc-content] a) { align-items: stretch; }
.am-grid:has([data-toc-content] a) .am-rail > *:last-child { position: sticky; top: 1.5rem; }
.am-rail [data-toc] .sticky { position: sticky; }

@media (max-width: 1080px) {
  .am-rail > *:last-child { position: static; }
}

/* ------------------------------------------------------ video / webinar */
/* A player needs width. The reading measure is set for prose, so posts that
   are built around an embed get a wider text column to sit it in. */


/* Embeds fill the column and keep their shape at any width. */
.am-body iframe,
.am-body .kg-embed-card iframe,
.am-body .kg-video-card video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}

/* Ghost's own wide setting, honoured inside the grid. Breaks right, into the
   page margin, so it never collides with the sticky rail on the left. */
.am-body .kg-width-wide {
  width: min(calc(100% + 160px), 92vw);
  max-width: none;
}
.am-body .kg-width-full {
  width: min(calc(100% + 220px), 96vw);
  max-width: none;
}

@media (max-width: 1080px) {
  .am-body .kg-width-wide,
  .am-body .kg-width-full { width: 100%; }
}

/* ------------------------------------------------------------------ event */

.am-event { display: block; margin-bottom: 1.75rem; }

.am-btn {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--color-typography);
  color: var(--color-background);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 1.4rem;
  text-decoration: none;
  border-radius: 0;
}
.am-btn:hover { background: #FAC300; color: #0A0A0A; }

@media (max-width: 1080px) {
  .am-event { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
}

/* ------------------------------------------------- separation under a hero */
/* The object types (tool, book, reading log, media) have a short hero and no
   feature image below it, so the body used to just drift into view. A hairline
   gives the page a place to start. */

[data-post-hero="cover"] + [data-post-content] .am-grid,
[data-post-hero="default"] + [data-post-content] .am-grid {
  border-top: 1px solid var(--color-border);
  margin-top: 2.75rem;
  padding-top: 2.75rem;
}

/* The plate and the Flurry block already separate themselves — no rule there. */
[data-post-hero="plate"] + [data-post-content] .am-grid,
[data-post-hero="flurry"] + [data-post-content] .am-grid {
  border-top: 0;
  margin-top: 0;
  padding-top: 2.75rem;
}

/* Player pages: wider text column for the embed, narrower rail to balance it.
   Set on the post wrapper so the hero and the body are sized together — set
   on the grid alone, the hero stayed narrow and the two centred differently. */
.am-post--player { --am-rail: 200px; --am-gap: 48px; --am-measure: 880px; }

/* ------------------------------------------------------------------ links */
/* A link in running text needs to be findable, not loud. Same colour and
   weight as the sentence around it, carried by a thin underline set below
   the baseline so it clears descenders. The accent appears on hover, where
   it's information rather than decoration. */

.am-body a:not(.kg-btn):not(.kg-bookmark-container):not(.kg-card a) {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--color-typography) 32%, transparent);
  transition: text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.am-body a:not(.kg-btn):not(.kg-bookmark-container):not(.kg-card a):hover {
  text-decoration-color: #FAC300;
  text-decoration-thickness: 2px;
}

/* Headings and quotes: no underline, the link is obvious from context */
.am-body h2 a,
.am-body h3 a,
.am-body blockquote a {
  text-decoration-color: color-mix(in srgb, var(--color-typography) 22%, transparent);
}

/* A numbered contents list on book pages — the chapters are a sequence, so
   the numbers carry real information rather than decorating. */
.am-body-book-contents { counter-reset: am-chapter; }

[data-am-type="book"] .am-rail [data-toc-content] { counter-reset: am-chapter; }
[data-am-type="book"] .am-rail [data-toc-content] a::before {
  counter-increment: am-chapter;
  content: counter(am-chapter, decimal-leading-zero);
  display: inline-block;
  width: 1.9em;
  color: #FAC300;
  font-weight: 700;
  font-size: 0.75em;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------- body text */
/* Soft ink rather than grey — nearly black with a touch of warmth, so it
   reads as deliberate rather than faded. Antialiased smoothing overrides the
   theme's subpixel setting, which thickens every stroke on macOS and was
   making Inter feel heavier than it is. No effect on Windows. */

.am-body,
.am-smooth,
.am-rail,
.am-hero-cover,
.am-hero-plate__inner,
.am-hero-flurry__inner {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.am-body p,
.am-body li {
  color: #2B2825;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
}

/* Lead paragraph keeps its size and weight, at full ink */
.am-body > p:first-of-type {
  color: #141210;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
}

/* Fixed sizes above override the theme's own responsive step, so the steps
   have to be restated here. 17px on a phone, 19px from tablet up. */
@media (min-width: 768px) {
  .am-body p,
  .am-body li {
    font-size: 19px;
    line-height: 1.72;
  }
  .am-body > p:first-of-type {
    font-size: 22px;
  }
}

/* Quotes and headings set their own colour, so keep them out of it */
.am-body blockquote p,
.am-body .kg-blockquote-alt p { font-size: inherit; }

/* Quotes scale up from tablet too */
@media (min-width: 768px) {
  .ghost-content.am-body blockquote:not(.kg-blockquote-alt) p,
  .am-body blockquote:not(.kg-blockquote-alt) p { font-size: 1.375rem !important; }

  .ghost-content.am-body blockquote.kg-blockquote-alt p,
  .am-body .kg-blockquote-alt p { font-size: 1.875rem !important; }
}

/* Tighter padding on a phone, where a 2rem inset eats the measure */
@media (max-width: 767px) {
  .am-body blockquote:not(.kg-blockquote-alt) { padding: 1.4rem 1.4rem 1.25rem !important; }
}

/* ========================================================================
   Narrow screens
   Everything above is sized for a wide viewport. This block brings the
   same decisions down to a phone rather than letting desktop values leak.
   ======================================================================== */

@media (max-width: 767px) {

  /* Vertical rhythm: desktop spacing is roughly double what a phone needs */
  .am-grid { padding-top: 1.75rem; }

  [data-post-hero="cover"] + [data-post-content] .am-grid,
  [data-post-hero="default"] + [data-post-content] .am-grid {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }

  [data-post-hero="plate"] + [data-post-content] .am-grid,
  [data-post-hero="flurry"] + [data-post-content] .am-grid {
    padding-top: 1.75rem;
  }

  /* Heroes */
  .am-hero-default,
  .am-hero-cover { padding-top: 2rem; }

  .am-hero-plate { min-height: 380px; }
  .am-hero-plate__inner { padding: 2.5rem 1.25rem 2.25rem; }
  .am-hero-plate__title { max-width: none; }
  .am-hero-plate__standfirst { font-size: 1.125rem; margin-top: 0.75rem; }

  .am-hero-flurry__inner { padding: 2.5rem 1.25rem; }
  .am-hero-flurry__standfirst { font-size: 1.125rem; margin-top: 0.75rem; }

  .am-hero-default__standfirst,
  .am-hero-cover__standfirst { font-size: 1.125rem; margin-top: 0.75rem; }

  .am-hero-cover { gap: 1.5rem; }


  /* Type mark and pills */
  .am-typemark { margin-bottom: 1rem; }
  .am-mark { width: 22px; height: 22px; }
  .am-pills { margin-top: 0.85rem; }

  /* Rail reads as a row of facts, not a sidebar */
  .am-rail { font-size: 0.8125rem; }
  .am-rail-value { font-size: 0.875rem; }

  /* Contents sits above the text, closed by default on the theme's toggle */
  .am-rail [data-toc] { margin-bottom: 1.25rem; }

  /* Body rhythm */
  .am-body p { margin-bottom: 1.15rem; }
  .am-body h2 { margin: 2rem 0 0.6rem; font-size: 1.3125rem; }

  /* Section rule */
  .am-body hr { margin: 2rem 0; }

  /* Members gate */
  .am-body .am-gate { padding-top: 1.5rem; }

  /* Related posts */
  .am-grid + [class] { margin-top: 2rem; }

  /* Buttons go full width — a 13px tap target inset in a column is mean */
  .am-btn { display: block; text-align: center; }
}

/* Very narrow: stop the cover image dominating */
@media (max-width: 400px) {
  .am-hero-plate { min-height: 320px; }
}

/* ===================================================================== */
/* Hero images on narrow screens                                          */
/* On a phone there is no side column to sit in, so an image that was      */
/* 340px beside the text becomes a small box floating in a wide space.     */
/* Below the breakpoint every hero image simply takes the column, with a   */
/* height cap so a portrait cover can't swallow the screen before you      */
/* reach a word of writing.                                               */
/* ===================================================================== */

@media (max-width: 900px) {
  .am-hero-cover {
    flex-direction: column;
    align-items: stretch;
    gap: 1.75rem;
  }

  .am-hero-cover__text { flex: none; min-width: 0; }

  .am-hero-cover__img {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  /* Landscape artwork fills the width. Portrait covers are held by height
     and pinned to the left edge, so they line up with the text above. */
  .am-cover-img,
  .am-hero-img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    object-position: left center;
  }
}

@media (max-width: 480px) {
  .am-cover-img,
  .am-hero-img { max-height: 240px; }
}

/* ------------------------------------------------------- hero action slot */

.am-hero-cover__action:empty { display: none; }
.am-hero-cover__action { margin-top: 1.5rem; }
.am-hero-cover__action .kg-button-card,
.am-hero-cover__action .kg-file-card {
  margin: 0 !important;
  justify-content: flex-start;
}
.am-hero-cover__action .kg-file-card { max-width: 100%; }

/* On a phone the cover comes first — you should see the thing before you're
   asked to buy or download it. */
@media (max-width: 900px) {
  .am-hero-cover__img { order: -1; }
}

/* ===================================================================== */
/* Narrow screens: spacing corrections                                    */
/* The quote and rule margins below were set for a wide column and left    */
/* holes on a phone. The desktop values need !important because the rules  */
/* they override do too.                                                  */
/* ===================================================================== */

@media (max-width: 767px) {

  /* Cited quote: 4rem above was leaving a gap the size of a paragraph */
  .am-body blockquote:not(.kg-blockquote-alt) {
    margin: 2rem 0 1.75rem !important;
  }

  /* Pull quote */
  .am-body blockquote.kg-blockquote-alt,
  .am-body .kg-blockquote-alt {
    margin: 2rem 0 1.75rem !important;
  }

  /* Section rule */
  .am-body hr {
    margin: 2rem 0 !important;
  }

  /* A subhead straight after the rule shouldn't add its own margin on top */
  .am-body hr + h2,
  .am-body hr + h3 { margin-top: 0.5rem !important; }

  /* Nor should the first thing after a quote */
  .am-body blockquote + p,
  .am-body blockquote + h2 { margin-top: 0 !important; }
}

/* Bold text inside a paragraph was picking up the plugin's own bold colour,
   which is lighter than the body — so emphasis read as greyed out. */
.am-body strong,
.am-body b {
  color: inherit;
  font-weight: 600;
}

/* Ghost's own button card, when it lands in the hero, matched to the system:
   square, ink, same size as the generated download button. */
.am-hero-cover__action .kg-btn,
.am-hero-cover__action a.kg-btn {
  background: var(--color-typography) !important;
  color: var(--color-background) !important;
  border-radius: 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.4rem !important;
  min-width: 0 !important;
  height: auto !important;
}
.am-hero-cover__action .kg-btn:hover,
.am-hero-cover__action a.kg-btn:hover {
  background: #FAC300 !important;
  color: #0A0A0A !important;
}