/* DexxFM theme. Tokens come from the "DexxFM Site" design. */

:root {
    --bg: #0F1B31;
    --bg-deep: #060D1B;
    --bg-footer: #0B1528;
    --header: rgba(11, 21, 40, .88);
    --surface-1: #152139;
    --surface-hover: #1A2640;
    --surface-2: #1D2A45;
    /* Raised cards: a navy gradient, an accent top edge and a deep shadow */
    --card-bg: linear-gradient(180deg, #22325A 0%, #1A2745 100%);
    --card-bg-hover: linear-gradient(180deg, #283A66 0%, #1E2D50 100%);
    --card-line: rgba(154, 164, 180, .28);
    --card-line-hover: rgba(154, 164, 180, .5);
    --card-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .2);
    --text: #E7EBF1;
    --text-body: #C9D0DB;
    --text-muted: #9AA4B4;
    --text-faint: #6F7A8C;
    --line: rgba(154, 164, 180, .14);
    --line-soft: rgba(154, 164, 180, .12);
    --line-field: rgba(154, 164, 180, .22);
    --line-strong: rgba(154, 164, 180, .3);
    --line-hover: rgba(154, 164, 180, .4);

    --r-xl: 28px;
    --r-lg: 22px;
    --r-md: 16px;
    --r-sm: 14px;

    /* Ghost's Settings > Design > Typography fonts win when picked */
    --font: var(--gh-font-body, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --font-heading: var(--gh-font-heading, var(--font));
    --mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Ember (coral) until an accent is picked */
    --acc: #FF9377;
    --acc-deep: #C0452A;
    --acc-soft: rgba(255, 147, 119, .14);

    color-scheme: dark;
}

/* Settings > Design > Accent */
[data-accent="Ember"]      { --acc: #FF9377; --acc-deep: #C0452A; --acc-soft: rgba(255, 147, 119, .14); }
[data-accent="Torchlight"] { --acc: #FFB547; --acc-deep: #B8700F; --acc-soft: rgba(255, 181, 71, .14); }
[data-accent="Potion"]     { --acc: #5FE3B4; --acc-deep: #1F8A67; --acc-soft: rgba(95, 227, 180, .14); }
[data-accent="Frostbolt"]  { --acc: #72C6FF; --acc-deep: #2471B3; --acc-soft: rgba(114, 198, 255, .14); }
[data-accent="Arcane"]     { --acc: #B9A2FF; --acc-deep: #6A4BCB; --acc-soft: rgba(185, 162, 255, .14); }
[data-accent="Charm"]      { --acc: #FF7EB8; --acc-deep: #B53572; --acc-soft: rgba(255, 126, 184, .14); }
[data-accent="Poison"]     { --acc: #CDEB5C; --acc-deep: #6C8A12; --acc-soft: rgba(205, 235, 92, .14); }

/* ---------- Base ---------- */

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

html { background: var(--bg); }

/* The page is dark, but embedded frames (Ghost's Portal button, embeds) are not. Chrome paints a
   frame whose color scheme differs from its element's as an opaque white box, so frames stay light. */
iframe { color-scheme: light; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--acc); text-decoration: none; }
a:hover { color: var(--text); }

img { max-width: 100%; }

input, textarea, select, button { font-family: inherit; }
::placeholder { color: var(--text-faint); }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

[hidden] { display: none !important; }

/* clip, not hidden: a 100vw full-width card includes the scrollbar's width, and clip keeps the header sticky */
.site { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
.site-main { flex: 1; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.muted { color: var(--text-muted); }

/* ---------- Shapes ---------- */

.diamond {
    display: inline-block;
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--acc);
    transform: rotate(45deg);
    border-radius: 3px;
}
.diamond-sm { width: 12px; height: 12px; }
.diamond-lg { width: 18px; height: 18px; border-radius: 4px; margin-left: 3px; }

.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--acc); flex: none; }

/* ---------- Backdrop ---------- */

.backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.glow { position: absolute; border-radius: 50%; }
.glow-accent {
    top: -260px; right: -220px; width: 900px; height: 900px;
    background: radial-gradient(circle, var(--acc-soft) 0%, transparent 62%);
}
.glow-cool {
    bottom: -320px; left: -260px; width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(114, 150, 255, .07) 0%, transparent 62%);
}

.backdrop-code {
    position: absolute;
    top: 140px;
    right: -20px;
    width: max-content;
    max-width: 62vw;
    overflow: hidden;
    font: 400 15px/1.95 var(--mono);
    color: rgba(154, 164, 180, .28);
    white-space: pre;
    transform: rotate(-3deg);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}
.backdrop-code > div { min-height: 1.95em; }
.backdrop-code .kw { color: var(--acc); opacity: .7; }
.backdrop-code .str { color: var(--text-body); opacity: .55; }
.backdrop-code .cm { opacity: .6; }

.backdrop-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(154, 164, 180, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 164, 180, .05) 1px, transparent 1px),
        linear-gradient(rgba(154, 164, 180, .1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(154, 164, 180, .1) 1px, transparent 1px);
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 10%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse at 70% 10%, #000 20%, transparent 75%);
}
.backdrop-coords {
    position: absolute;
    top: 128px;
    right: 48px;
    font: 400 12px var(--mono);
    color: rgba(154, 164, 180, .45);
}

.backdrop-branches { position: absolute; top: 0; right: 0; width: 240px; height: 100%; opacity: .55; }

.backdrop-dots {
    background-image: radial-gradient(rgba(154, 164, 180, .09) 1.2px, transparent 1.4px);
    background-size: 24px 24px;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--header);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.site-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    min-height: 72px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}
.site-brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.site-brand:hover { color: var(--text); }
.site-brand-name { font: 700 22px var(--font); letter-spacing: -.02em; }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.site-nav .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    color: var(--text-muted);
    font: 600 15px var(--font);
}
.site-nav .nav-link:hover { color: var(--text); }
.site-nav .nav-link.is-active { color: var(--text); }
.site-nav .nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--acc);
}

/* ---------- Footer ---------- */

.site-footer { background: var(--bg-footer); border-top: 1px solid var(--line-soft); }
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 24px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-col:first-child { gap: 12px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font: 700 20px var(--font); }
.footer-copy { font: 400 14px/1.5 var(--font); color: var(--text-muted); }
.footer-link,
.footer-nav .nav-link { color: var(--text); font: 500 15px var(--font); }
.footer-link:hover,
.footer-nav .nav-link:hover { color: var(--acc); }

/* ---------- Type ---------- */

.eyebrow {
    font: 500 12px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acc);
}
.eyebrow-code { letter-spacing: .02em; text-transform: none; }
.eyebrow-muted { color: var(--text-muted); }

.display {
    margin: 0;
    font: 700 clamp(48px, 8vw, 96px)/.95 var(--font);
    letter-spacing: -.04em;
    text-wrap: balance;
}
.display-page { font-size: clamp(44px, 6vw, 72px); }
.display-app { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; }

.lede {
    margin: 0;
    font: 400 20px/1.55 var(--font);
    color: var(--text-muted);
    max-width: 600px;
    text-wrap: pretty;
}
.lede-light { color: var(--text-body); max-width: 540px; }
.lede-sm { font-size: 18px; }

.section-title,
.app-sections h2,
.app-changelog h2,
.support-questions h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 32px var(--font);
    letter-spacing: -.02em;
    color: var(--text);
}
.section-title::before,
.app-sections h2::before,
.app-changelog h2::before,
.support-questions h2::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 13px solid var(--acc);
}
.support-questions h2 { font-size: 28px; }

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font: 600 12px var(--font);
    color: var(--text-muted);
}
.meta-tag { color: var(--acc); letter-spacing: .1em; text-transform: uppercase; }
.meta-lg { font-size: 13px; gap: 12px; }
.meta-lg .meta-tag { letter-spacing: .12em; }

/* ---------- Controls ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font: 600 15px var(--font);
    cursor: pointer;
    white-space: nowrap;
}
.pill-outline { border: 1px solid var(--line-strong); background: transparent; color: var(--text); }
.pill-outline:hover { background: var(--surface-2); border-color: var(--acc); color: var(--text); }
.pill-solid { height: 48px; padding: 0 26px; border: none; background: var(--acc); color: var(--bg); font: 700 16px var(--font); }
.pill-solid:hover { color: var(--bg); filter: brightness(1.06); }

.pagination .pill { border: 1px solid var(--line-strong); color: var(--text); }
.pagination .pill:hover { border-color: var(--acc); }

.text-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: var(--acc);
    font: 600 15px var(--font);
    cursor: pointer;
}
.text-link-muted { color: var(--text-muted); font-size: 14px; }
.text-link-muted:hover { color: var(--text); }

.back-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 32px;
    color: var(--text-muted);
    font: 600 14px var(--font);
}
.back-link:hover { color: var(--text); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(154, 164, 180, .25);
    color: var(--text-body);
    font: 600 14px var(--font);
    white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: var(--line-hover); }
.chip.is-active { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    border-radius: 999px;
    align-self: flex-start;
    margin-top: 8px;
}
.segment {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--text-muted);
    font: 600 14px var(--font);
    white-space: nowrap;
}
.segment:hover { color: var(--text); }
.segment.is-active { background: var(--surface-2); color: var(--text); }

/* ---------- Cards ---------- */

.card,
.h3-card {
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    border-top-color: var(--acc);
    border-radius: var(--r-lg);
    box-shadow: var(--card-shadow);
    color: var(--text);
}
a.card:hover { background: var(--card-bg-hover); border-color: var(--card-line-hover); border-top-color: var(--acc); color: var(--text); }

.panel { border-radius: var(--r-xl); padding: 32px; }

.stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Home ---------- */

.home-hero {
    padding: 96px 0 72px;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    gap: 24px;
    padding-bottom: 96px;
}
.app-card {
    border-radius: var(--r-xl);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.app-card-media {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-2);
}
.app-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-card-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 16px; }
.app-card-title { margin: 0; font: 700 30px/1.1 var(--font); letter-spacing: -.02em; }
.app-card-pitch { margin: 0; font: 400 17px/1.55 var(--font); color: var(--text-body); text-wrap: pretty; }

.app-id { display: flex; align-items: center; gap: 16px; }
.app-id-lg { flex-wrap: wrap; gap: 20px; }
.app-id-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-id-lg .app-id-text { gap: 6px; flex: 1 1 240px; }
.app-tagline { font: 600 13px var(--font); color: var(--text-muted); }

.app-icon {
    display: block;
    flex: none;
    overflow: hidden;
    background: var(--surface-2);
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-icon-88 { width: 88px; height: 88px; border-radius: 22px; }
.app-icon-56 { width: 56px; height: 56px; border-radius: 16px; }
.app-icon-44 { width: 44px; height: 44px; border-radius: 12px; }

.home-devlog { padding-bottom: 112px; display: flex; flex-direction: column; gap: 28px; }
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ---------- Post cards ---------- */

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 20px;
    padding-bottom: 112px;
}
.post-grid-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); padding-bottom: 0; }

.post-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.post-card-cover { padding: 12px; gap: 16px; }
.post-card-image {
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--surface-2);
}
.post-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-body { display: flex; flex-direction: column; gap: 12px; }
.post-card-cover .post-card-body { padding: 12px; gap: 10px; }
/* no feature image: the text keeps the same inset as the cards that have one */
.post-card-image + .post-card-body { padding-top: 0; }
.post-card-title { font: 700 22px/1.2 var(--font); letter-spacing: -.01em; text-wrap: balance; }
.post-card-excerpt { font: 400 15px/1.5 var(--font); color: var(--text-muted); }

.post-row { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px; }
.post-row-title { font: 700 20px/1.25 var(--font); }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: -64px 0 112px;
}
.pagination-count { font: 600 14px var(--font); color: var(--text-muted); }

/* ---------- Page heads (devlog, support, errors) ---------- */

.page-head { padding: 72px 0 40px; display: flex; flex-direction: column; gap: 20px; }
.page-head .lede { max-width: 600px; }
.error-page { padding-bottom: 160px; }

/* ---------- App page ---------- */

.app-hero {
    padding: 48px 0 64px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 48px;
    align-items: center;
}
.app-hero-text { display: flex; flex-direction: column; gap: 24px; }
.app-hero-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--line);
}
.app-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.app-intro { display: flex; flex-direction: column; gap: 24px; }
.app-intro:empty { display: none; }
.app-intro p { margin: 0; font: 400 16px/1.6 var(--font); color: var(--text-muted); max-width: 540px; text-wrap: pretty; }
.app-intro a:not(.kg-btn) { color: var(--acc); }

.app-version { display: flex; align-items: center; gap: 10px; font: 600 13px var(--font); color: var(--text-muted); }

/* Store buttons: Ghost button cards in the page's intro, grouped into a row by site.js */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.store-row .kg-button-card { margin: 0; padding: 0; display: block; width: auto; }
.store-row .kg-btn,
.store-row .kg-btn.kg-btn-accent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 52px;
    padding: 0 20px;
    border-radius: var(--r-sm);
    background: var(--bg-deep);
    border: 1px solid var(--line-strong);
    color: var(--text);
    font: 700 17px/1.1 var(--font);
    text-decoration: none;
    box-shadow: none;
    white-space: nowrap;
}
.store-row .kg-btn:hover { border-color: var(--acc); color: var(--text); }
.store-row .kg-btn::before {
    content: "Get it from";
    font: 500 11px/1.3 var(--font);
    color: var(--text-muted);
}
.store-row .kg-btn[href*="apps.apple.com"]::before,
.store-row .kg-btn[href*="testflight.apple.com"]::before { content: "Download on the"; }
.store-row .kg-btn[href*="play.google.com"]::before { content: "Get it on"; }
.store-row .kg-btn[href*="github.com"]::before { content: "Download from"; }

.app-sections { display: flex; flex-direction: column; }
.app-section { padding-bottom: 80px; display: flex; flex-direction: column; gap: 24px; }
.app-section > p { margin: 0; font: 400 17px/1.6 var(--font); color: var(--text-body); max-width: 760px; }

/* Screenshots: image cards (or a gallery) in a section */
.shot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 20px;
}
.shot-grid .kg-image-card { margin: 0; }
.shot-grid .kg-image-card img,
.app-section .kg-gallery-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--surface-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    display: block;
}
.shot-grid figcaption { margin-top: 10px; font: 500 14px/1.5 var(--font); color: var(--text-muted); text-align: left; }

/* Cards made from a heading-3 and what follows it (features, questions) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}
.h3-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.h3-card > * { margin: 0; }
.h3-card h3 { font: 700 20px/1.2 var(--font); color: var(--text); }
.h3-card p, .h3-card li { font: 400 15px/1.55 var(--font); color: var(--text-muted); text-wrap: pretty; }
.h3-card ul, .h3-card ol { padding-left: 18px; }
.card-grid .h3-card::before {
    content: "";
    width: 14px;
    height: 14px;
    background: var(--acc);
    transform: rotate(45deg);
    border-radius: 3px;
    margin: 4px 0 4px 3px;
}

/* Changelog */
.app-bottom {
    padding-bottom: 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 48px;
    align-items: start;
}
.app-changelog .app-section { padding-bottom: 0; }
.app-devlog { display: flex; flex-direction: column; gap: 24px; }
.app-devlog .text-link-muted { align-self: flex-start; }

.releases { display: flex; flex-direction: column; }
.release { display: grid; grid-template-columns: 24px 1fr; gap: 16px; }
.release-rail { display: flex; flex-direction: column; align-items: center; }
.release-pip {
    width: 12px;
    height: 12px;
    margin-top: 8px;
    transform: rotate(45deg);
    border-radius: 2px;
    border: 2px solid rgba(154, 164, 180, .5);
    background: transparent;
}
.release:first-child .release-pip { border-color: var(--acc); background: var(--acc); }
.release-line { flex: 1; width: 1px; background: rgba(154, 164, 180, .2); margin-top: 8px; }
.release-body { padding-bottom: 28px; display: flex; flex-direction: column; gap: 8px; }
.release-body > * { margin: 0; }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.release-version { font: 700 22px var(--font); }
.release-date { font: 500 13px var(--font); color: var(--text-muted); }
.release-body ul, .release-body ol {
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: 400 15px/1.5 var(--font);
    color: var(--text-body);
}
.release-body p { font: 400 15px/1.5 var(--font); color: var(--text-body); }

/* ---------- Support ---------- */

.support {
    padding-bottom: 112px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 48px;
    align-items: start;
}
/* A long policy (tables, many sections) gets the full width under the questions */
.support.is-wide { grid-template-columns: minmax(0, 1fr); }
.support.is-wide .support-questions { max-width: 760px; }

.support-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.support-contact { margin: 0; font: 400 15px/1.55 var(--font); color: var(--text-muted); }
.support-questions { display: flex; flex-direction: column; gap: 20px; }
.support-questions > * { margin: 0; }
.support-questions > p { font: 400 15px/1.55 var(--font); color: var(--text-muted); }
.support-questions .h3-card { padding: 22px 24px; gap: 8px; }
.support-questions .h3-card h3 { font-size: 18px; line-height: 1.3; }

.support-privacy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.support-privacy > * { margin: 0; }
.support-privacy h2 { font: 700 28px var(--font); color: var(--text); }
.support-privacy h2 + p { margin-top: -18px; font: 500 13px var(--font); color: var(--text-muted); }
.support-privacy h3 {
    font: 700 18px var(--font);
    color: var(--text);
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.support-privacy h4 { font: 700 16px var(--font); color: var(--text); }
.support-privacy p,
.support-privacy li { font: 400 15px/1.6 var(--font); color: var(--text-body); }
.support-privacy ul, .support-privacy ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.support-privacy h3 + p,
.support-privacy h3 + ul { margin-top: -12px; }

/* ---------- About ---------- */

.about {
    padding: 72px 0 112px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 56px;
    align-items: start;
}
.about-portrait {
    aspect-ratio: 4 / 5;
    max-width: 460px;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--line);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text { display: flex; flex-direction: column; gap: 24px; }
.about-body { display: flex; flex-direction: column; gap: 24px; }
.about-body > * { margin: 0; }
.about-body p { font: 400 17px/1.6 var(--font); color: var(--text-muted); text-wrap: pretty; }
.about-body > p:first-child { font-size: 19px; color: var(--text-body); }
.about-apps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 8px;
}
.about-app {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: var(--r-md);
    padding: 12px;
    font: 700 16px var(--font);
}
a.about-app:hover { background: var(--card-bg-hover); }

/* ---------- Contact ---------- */

.split {
    padding: 72px 0 112px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 56px;
    align-items: start;
}
.split-text { display: flex; flex-direction: column; gap: 20px; }
.split-text .lede { max-width: 460px; }
.split-text .gh-content > * { margin: 0 0 16px; font: 400 16px/1.6 var(--font); color: var(--text-muted); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 600 13px var(--font);
    color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
    border-radius: var(--r-sm);
    border: 1px solid var(--line-field);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    outline: none;
}
.field input, .field select { height: 48px; padding: 0 16px; }
.field select { padding: 0 12px; }
.field textarea { padding: 14px 16px; line-height: 1.5; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--acc); }
.contact-form .pill-solid { align-self: flex-start; }
.form-error { margin: 0; font: 500 14px/1.5 var(--font); color: #FF8A8A; }

.contact-done { display: flex; flex-direction: column; gap: 14px; padding: 24px 0; }
.contact-done h2 { margin: 0; font: 700 30px var(--font); }
.contact-done p { margin: 0; font: 400 16px/1.55 var(--font); }
.contact-done .text-link { align-self: flex-start; }

/* ---------- Articles (posts and plain pages) ---------- */

.article {
    max-width: 808px; /* 760 measure + gutters */
    padding-top: 56px;
    padding-bottom: 112px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.article-title {
    margin: 0;
    font: 700 clamp(40px, 5.5vw, 60px)/1 var(--font);
    letter-spacing: -.03em;
    text-wrap: balance;
}
.article-excerpt { margin: 0; font: 400 21px/1.5 var(--font); color: var(--text-body); }
.article-image { margin: 0; }
.article-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-lg);
    display: block;
    background: var(--surface-1);
}
.article-image figcaption { margin-top: 10px; font: 500 14px/1.5 var(--font); color: var(--text-muted); }

/* ---------- Ghost editor content ---------- */

.gh-content { font: 400 18px/1.7 var(--font); color: var(--text-body); }
.article-body { display: flex; flex-direction: column; gap: 20px; }
.article-body > * { margin: 0; }
.gh-content h2 { font: 700 28px/1.2 var(--font); color: var(--text); letter-spacing: -.02em; }
.article-body h2 { margin-top: 12px; }
.gh-content h3 { font: 700 22px/1.25 var(--font); color: var(--text); }
.gh-content h4 { font: 700 18px/1.3 var(--font); color: var(--text); }
.gh-content strong { color: var(--text); }
.gh-content a { color: var(--acc); }
.gh-content a:hover { color: var(--text); }
.gh-content ul, .gh-content ol { padding-left: 22px; }
.gh-content li + li { margin-top: 6px; }
.gh-content hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; width: 100%; }

.gh-content blockquote:not(.kg-blockquote-alt) {
    margin: 8px 0;
    padding: 24px 28px;
    background: var(--card-bg);
    border: 1px solid var(--card-line);
    border-top-color: var(--acc);
    border-radius: var(--r-lg);
    box-shadow: var(--card-shadow);
    font: 600 22px/1.4 var(--font);
    color: var(--text);
}
.gh-content blockquote p { margin: 0; }
.gh-content .kg-blockquote-alt { font: 600 24px/1.4 var(--font); color: var(--text); text-align: center; padding: 0 24px; }

.gh-content code {
    font: 400 .88em var(--mono);
    background: var(--surface-2);
    border-radius: 6px;
    padding: .15em .4em;
    color: var(--text);
}
.gh-content pre {
    font: 400 14px/1.6 var(--mono);
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    overflow-x: auto;
    color: var(--text-body);
}
.gh-content pre code { background: none; padding: 0; font-size: inherit; }

.gh-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
    display: block;
    overflow-x: auto;
}
.gh-content th, .gh-content td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    min-width: 140px;
}
.gh-content th { color: var(--text); font-weight: 700; background: var(--surface-2); }
.gh-content th:first-child { border-top-left-radius: 10px; }
.gh-content th:last-child { border-top-right-radius: 10px; }

.gh-content figure { margin: 0; }
.gh-content figcaption { margin-top: 10px; font: 500 14px/1.5 var(--font); color: var(--text-muted); text-align: center; }
.gh-content .kg-image-card img,
.gh-content .kg-gallery-image img,
.gh-content .kg-embed-card iframe,
.gh-content .kg-video-card video { border-radius: var(--r-lg); }
.gh-content .kg-image { display: block; margin: 0 auto; height: auto; }

/* Wide and full cards break out of the 760 column, centered on it. Margins only, no transform,
   and .gh-content in the selector so it outranks `.gh-content figure { margin: 0 }` above. */
.gh-content .kg-width-wide {
    width: min(1040px, calc(100vw - 48px));
    max-width: none;
    margin-left: calc(50% - min(520px, 50vw - 24px));
    margin-right: calc(50% - min(520px, 50vw - 24px));
}
.gh-content .kg-width-full {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.kg-width-full img { border-radius: 0 !important; width: 100%; }
/* App and support pages lay cards out in their own grids: no breaking out there */
.app-sections .kg-width-wide,
.app-sections .kg-width-full,
.support .kg-width-wide,
.support .kg-width-full { width: 100%; margin-left: 0; margin-right: 0; }

/* Ghost's callout colors are replaced by the raised card, as in theme 1.0.2 */
.gh-content .kg-callout-card { border-radius: var(--r-lg); padding: 24px; background: var(--card-bg) !important; border: 1px solid var(--card-line); border-top-color: var(--acc); box-shadow: var(--card-shadow); }
.gh-content .kg-callout-text { color: var(--text-body); }
.gh-content .kg-toggle-card { background: var(--card-bg); border: 1px solid var(--card-line); border-top-color: var(--acc); border-radius: var(--r-lg); box-shadow: var(--card-shadow); }
.gh-content .kg-toggle-heading-text { color: var(--text); }
.gh-content .kg-bookmark-container { background: var(--card-bg); border: 1px solid var(--card-line); border-top-color: var(--acc); border-radius: var(--r-lg); box-shadow: var(--card-shadow); color: var(--text); }
.gh-content .kg-bookmark-title { color: var(--text); }
.gh-content .kg-bookmark-description, .gh-content .kg-bookmark-metadata { color: var(--text-muted); }
.gh-content .kg-btn-accent { background: var(--acc); color: var(--bg); }
.gh-content .kg-header-card { border-radius: var(--r-lg); }

/* ---------- Heading font ---------- */

.display, .article-title, .section-title, .app-card-title, .post-card-title, .post-row-title,
.site-brand-name, .footer-brand, .gh-content h2, .gh-content h3, .gh-content h4, .release-version,
.contact-done h2 { font-family: var(--font-heading); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
    a, button, .card, .chip, .segment, .pill { transition: color .15s, background-color .15s, border-color .15s; }
}