/* Post body: long-form prose + Koenig cards. Reference: design readme (Type, Tables), components/prose/*, PostScreen.jsx.
   Ghost injects its own card CSS/JS (card_assets); rules here use .gh-content .kg-* to outrank it. */

/* ---------- Measure + rhythm ---------- */
.gh-content{max-width:calc(var(--measure-reading) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter);font:var(--type-reading);color:var(--fg-2);text-wrap:pretty}
.gh-content>*{margin-top:0;margin-bottom:0}
.gh-content>*+*{margin-top:28px}
.gh-content p{margin:0}
.gh-content a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;text-decoration-thickness:1px}
.gh-content a:hover{text-decoration-color:var(--accent)}
.gh-content em{font-style:italic}
.gh-content strong{color:var(--fg-1);font-weight:var(--fw-semibold)}
.gh-content small{font-size:var(--fs-small)}

/* ---------- Headings ---------- */
.gh-content h1,.gh-content h2,.gh-content h3,.gh-content h4,.gh-content h5,.gh-content h6{font-family:var(--font-display);font-weight:var(--fw-heading);color:var(--fg-1);text-wrap:balance}
.gh-content h2{font-size:36px;line-height:1.08;letter-spacing:-0.035em;margin-top:72px;margin-bottom:24px}
.gh-content h3{font-size:26px;line-height:var(--lh-snug);letter-spacing:var(--tracking-heading);margin-top:56px;margin-bottom:16px}
.gh-content h4{font-size:20px;line-height:var(--lh-snug);letter-spacing:-0.02em;margin-top:40px;margin-bottom:12px}
.gh-content h2+*,.gh-content h3+*,.gh-content h4+*{margin-top:0}
.gh-content h5,.gh-content h6{font-size:16px;letter-spacing:-0.01em;margin-top:32px;margin-bottom:8px}

/* ---------- Lists ---------- */
.gh-content ul,.gh-content ol{padding:0;margin-left:0;list-style:none;display:grid;gap:12px}
.gh-content ul>li{position:relative;padding-left:28px}
.gh-content ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--metal-face);box-shadow:inset 0 0 0 1px var(--border-strong)}
.gh-content ol{counter-reset:rd-n}
.gh-content ol>li{position:relative;padding-left:44px;counter-increment:rd-n}
.gh-content ol>li::before{content:counter(rd-n,decimal-leading-zero);position:absolute;left:0;top:.35em;font:500 13px/1 var(--font-mono);letter-spacing:.04em;color:var(--accent)}
.gh-content li>ul,.gh-content li>ol{margin-top:12px}
.gh-content li p{margin:0}

/* ---------- Rules: a single chrome bead ---------- */
.gh-content hr{border:0;height:0;margin:64px 0;display:flex;justify-content:center;overflow:visible}
.gh-content hr::after{content:"";display:block;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--metal-face);box-shadow:inset 0 0 0 1.5px var(--metal-400),0 0 12px -2px rgba(168,132,255,.6);position:relative;isolation:isolate}

/* ---------- Pull quotes ---------- */
.gh-content blockquote{position:relative;margin:56px 0;padding:40px 0;text-align:center;font:italic 400 36px/1.22 var(--font-serif);letter-spacing:-0.01em;color:var(--fg-1);text-wrap:balance;border:0;box-shadow:none;background:none}
.gh-content blockquote::before{content:"";position:absolute;left:20%;right:20%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ember-500),var(--halo),var(--ember-500),transparent)}
.gh-content blockquote::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--violet-500),transparent)}
.gh-content blockquote p{margin:0}
.gh-content blockquote p+p{margin-top:16px}
.gh-content blockquote cite,.gh-content blockquote footer{display:block;margin-top:20px;font:500 12px/1 var(--font-mono);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-style:normal;color:var(--fg-3)}
.gh-content blockquote.kg-blockquote-alt{font-size:44px;line-height:1.15;padding:48px 0}

/* ---------- Code ---------- */
.gh-content code{font-family:var(--font-mono);font-size:.85em}
.gh-content :not(pre)>code{background:var(--surface-raised);color:var(--fg-1);padding:.12em .4em;border-radius:var(--radius-xs);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.gh-content pre{margin:0;padding:20px 24px;font:400 14px/1.6 var(--font-mono);color:var(--fg-2);background:var(--surface-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-raised),inset 0 0 0 1px var(--border-subtle);overflow-x:auto;tab-size:2}
.gh-content pre code{font-size:inherit;background:none;padding:0;box-shadow:none;color:inherit}
.gh-content .kg-code-card{margin-top:40px;margin-bottom:40px}

/* ---------- Figures + captions ---------- */
.gh-content figure{margin:48px 0}
.gh-content figcaption{margin-top:12px;font:italic 400 16px/1.5 var(--font-serif);color:var(--fg-3);text-align:center;text-wrap:pretty}
.gh-content figcaption a{color:inherit}
.gh-content img,.gh-content video,.gh-content iframe{max-width:100%;height:auto;display:block}

/* ---------- Tables ---------- */
.gh-content table{width:100%;border-collapse:collapse;border-spacing:0;font:var(--type-body);color:var(--fg-2)}
.gh-content .table-wrap,.gh-content :is(figure,div):has(>table){overflow-x:auto;overflow-y:hidden;margin-inline:-2px;padding-inline:2px}
.gh-content th{text-align:left;padding:0 16px 14px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;border-bottom:1px solid var(--border-strong)}
.gh-content td{padding:16px;vertical-align:baseline;border-bottom:1px solid var(--border-subtle);font-variant-numeric:tabular-nums;text-wrap:pretty}
.gh-content th:first-child,.gh-content td:first-child{padding-left:0}
.gh-content th:last-child,.gh-content td:last-child{padding-right:0}
.gh-content td:first-child{color:var(--fg-1);font-weight:var(--fw-medium)}
.gh-content th.num,.gh-content td.num{text-align:right;white-space:nowrap;width:1%}
.gh-content td.num{font:500 14px/1.5 var(--font-mono)}
.gh-content tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.gh-content tbody tr:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.03) 12%,rgba(255,255,255,.03) 88%,transparent)}
.gh-content tr.highlight td{color:var(--fg-1);border-bottom:0;background-image:linear-gradient(90deg,transparent,var(--cobalt-500) 15%,var(--violet-500) 45%,var(--ember-500) 75%,transparent);background-repeat:no-repeat;background-size:100% 1px;background-position:bottom}
.gh-content figure:has(>table) figcaption{text-align:left;margin-top:16px}

/* ---------- Koenig: images ---------- */
.gh-content .kg-image-card img,.gh-content .kg-gallery-image img{border-radius:var(--radius-md);filter:none}
.gh-content .kg-image-card{margin:48px 0}
.gh-content .kg-width-wide{position:relative;width:min(1000px,100vw - 2*var(--gutter));left:50%;transform:translateX(-50%)}
.gh-content .kg-width-full{position:relative;width:100vw;left:50%;transform:translateX(-50%)}
.gh-content .kg-width-full img{border-radius:0}
.gh-content .kg-width-full figcaption{padding-inline:var(--gutter)}
.gh-content .kg-width-wide.kg-image-card img,.gh-content .kg-width-full.kg-image-card img{width:100%}

/* ---------- Koenig: gallery (layout from Ghost; we add gap + radius) ---------- */
.gh-content .kg-gallery-row{gap:8px}
.gh-content .kg-gallery-row:not(:first-of-type){margin-top:8px}
.gh-content .kg-gallery-image img{border-radius:var(--radius-sm)}

/* ---------- Koenig: embed ---------- */
.gh-content .kg-embed-card{display:block;margin:48px 0}
.gh-content .kg-embed-card iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:var(--radius-md);background:var(--surface-card)}
.gh-content .kg-embed-card>:not(iframe){max-width:100%}

/* ---------- Koenig: callout ---------- */
.gh-content .kg-callout-card{display:flex;gap:16px;align-items:flex-start;padding:24px 28px;margin:40px 0;border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:inset 0 0 0 1px var(--border-subtle),inset 3px 0 0 var(--callout,var(--metal-400));color:var(--fg-2);font:var(--type-body);font-size:17px;line-height:1.55}
.gh-content .kg-callout-emoji{font-size:22px;line-height:1.3;padding:0}
.gh-content .kg-callout-text{flex:1}
.gh-content .kg-callout-card-grey{--callout:var(--metal-400)}
.gh-content .kg-callout-card-white{--callout:var(--ink-900)}
.gh-content .kg-callout-card-blue{--callout:var(--cobalt-500)}
.gh-content .kg-callout-card-green{--callout:var(--aqua-500)}
.gh-content .kg-callout-card-yellow{--callout:var(--halo)}
.gh-content .kg-callout-card-red{--callout:var(--ember-500)}
.gh-content .kg-callout-card-pink{--callout:var(--ember-300)}
.gh-content .kg-callout-card-purple,.gh-content .kg-callout-card-accent{--callout:var(--violet-500)}

/* ---------- Koenig: bookmark ---------- */
.gh-content .kg-bookmark-card{margin:40px 0}
.gh-content .kg-bookmark-container{display:flex;min-height:148px;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-raised),inset 0 0 0 1px var(--border-subtle);color:var(--fg-2);text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.gh-content .kg-bookmark-container:hover{box-shadow:var(--shadow-raised),inset 0 0 0 1px var(--border-default);transform:translateY(-2px)}
.gh-content .kg-bookmark-content{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:20px 24px;font:var(--type-body)}
.gh-content .kg-bookmark-title{font:var(--fw-heading) 18px/1.25 var(--font-display);letter-spacing:-0.02em;color:var(--fg-1)}
.gh-content .kg-bookmark-description{margin-top:8px;font-size:15px;line-height:1.5;color:var(--fg-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gh-content .kg-bookmark-metadata{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4)}
.gh-content .kg-bookmark-icon{width:16px;height:16px;border-radius:3px}
.gh-content .kg-bookmark-thumbnail{position:relative;flex:0 0 min(38%,260px)}
.gh-content .kg-bookmark-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;filter:var(--img-card);transition:filter var(--dur-slow)}
.gh-content .kg-bookmark-container:hover .kg-bookmark-thumbnail img{filter:var(--img-card-hover)}

/* ---------- Koenig: button ---------- */
.gh-content .kg-button-card{display:flex;margin:40px 0}
.gh-content .kg-button-card.kg-align-center{justify-content:center}
.gh-content .kg-button-card a.kg-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:var(--radius-pill);font:var(--fw-medium) 15px/1 var(--font-sans);letter-spacing:-0.01em;color:var(--fg-1);background:transparent;box-shadow:inset 0 0 0 1px var(--border-default);text-decoration:none;transition:background var(--dur-base) var(--ease-out),box-shadow var(--dur-fast)}
.gh-content .kg-button-card a.kg-btn:hover{background:var(--surface-hover);box-shadow:inset 0 0 0 1px var(--border-strong)}
.gh-content .kg-button-card a.kg-btn-accent{background:transparent;color:var(--fg-1)}

/* ---------- Koenig: toggle ---------- */
.gh-content .kg-toggle-card{margin:32px 0;padding:0;border-radius:var(--radius-md);background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.gh-content .kg-toggle-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer}
.gh-content .kg-toggle-heading-text{margin:0;font:var(--fw-heading) 18px/1.3 var(--font-display);letter-spacing:-0.02em;color:var(--fg-1)}
.gh-content .kg-toggle-card-icon{width:32px;height:32px;border-radius:50%;border:0;padding:8px;background:var(--metal-face);box-shadow:var(--shadow-metal);color:var(--fg-2);cursor:pointer;transition:transform var(--dur-slow) var(--ease-spring),color var(--dur-fast)}
.gh-content .kg-toggle-card-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5}
.gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon{transform:rotate(180deg);color:var(--fg-1)}
.gh-content .kg-toggle-content{padding:0 22px 22px;font:var(--type-body);font-size:17px;line-height:1.55;color:var(--fg-2)}
.gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{display:none}

/* ---------- Koenig: header card ---------- */
.gh-content .kg-header-card{margin:56px 0;padding:72px var(--gutter);background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-subtle);border-radius:var(--radius-lg)}
.gh-content .kg-header-card.kg-width-full{border-radius:0}
.gh-content .kg-header-card-content{max-width:var(--container);margin:0 auto}
.gh-content .kg-header-card-heading{margin:0;font:var(--fw-display) clamp(32px,4vw,52px)/1.02 var(--font-display);letter-spacing:var(--tracking-display);color:var(--fg-1)}
.gh-content .kg-header-card-subheading{margin:16px 0 0;font:var(--type-lead);color:var(--fg-3)}
.gh-content .kg-header-card .kg-align-center{text-align:center}

/* ---------- Koenig: file / audio / video / product (containers only) ---------- */
.gh-content .kg-file-card-container,.gh-content .kg-audio-card,.gh-content .kg-product-card-container{border-radius:var(--radius-md);background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-subtle);color:var(--fg-2)}
.gh-content .kg-file-card-title,.gh-content .kg-audio-title,.gh-content .kg-product-card-title{color:var(--fg-1);font-family:var(--font-display)}
.gh-content .kg-video-card .kg-video-container{border-radius:var(--radius-md);overflow:hidden}

/* ---------- Breakpoints ---------- */
@media (max-width:760px){
  .gh-content{font-size:19px}
  .gh-content h2{font-size:30px;margin-top:56px}
  .gh-content h3{font-size:23px}
  .gh-content blockquote{font-size:28px;padding:32px 0;margin:40px 0}
  .gh-content blockquote.kg-blockquote-alt{font-size:34px}
  .gh-content hr{margin:48px 0}
  .gh-content figure{margin:36px 0}
  .gh-content .kg-callout-card{padding:18px 20px}
  .gh-content .kg-bookmark-container{flex-direction:column-reverse}
  .gh-content .kg-bookmark-thumbnail{flex:none;height:160px}
  .gh-content .kg-header-card{padding:48px var(--gutter)}
}