:root {
    /* Brand accent: Ghost injects --ghost-accent-color from the site's setting. */
    --accent: var(--ghost-accent-color, #15171a);

    /* Colour tokens (semantic names, the Ghost theme convention). */
    --color-bg: #ffffff;
    --color-text: #15171a;
    --color-secondary-text: rgb(0 0 0 / 0.55);
    --color-border: rgb(0 0 0 / 0.1);

    /* Type tokens. Ghost's font picker exposes --gh-font-heading/--gh-font-body;
       we consume them with a system-font fallback so the design panel just works. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Layout tokens. --content-width is the reading column; --container-width caps
       wide/full breakouts and the post feed; --gap is the responsive edge gutter. */
    --content-width: 720px;
    --container-width: 1200px;
    --gap: clamp(20px, 5vw, 64px);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    font-family: var(--gh-font-body, var(--font-sans));
    line-height: 1.6;
    color: var(--color-text);
}

a {
    color: var(--accent);
}

/* Site chrome is centred on the reading column. */
.site-header,
.site-footer {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 1.5rem var(--gap);
}

.site-main {
    padding: 1.5rem 0;
}

.site-title {
    font-family: var(--gh-font-heading, var(--font-sans));
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.site-description {
    margin: 0.25rem 0 0;
    color: var(--color-secondary-text);
}

/* Post feed (home, tag, author) — a centred reading column. */
.post-feed {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}

.post-card {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.post-card-title a {
    color: var(--color-text);
    text-decoration: none;
}

.post-card-title a:hover {
    color: var(--accent);
}

.post-image,
.post-card-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Single post / page. Header elements sit on the reading column; the content body
   is a grid "canvas" so Koenig wide/full cards can break outward. */
.post > *,
.page > * {
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gap);
    padding-right: var(--gap);
}

.post-title,
.page-title {
    font-family: var(--gh-font-heading, var(--font-sans));
}

/* The content canvas: a grid keyed to named lines. Body elements land in the centre
   "main" column; .kg-width-wide and .kg-width-full break outward toward the edges.
   This is the technique Ghost's own themes use for editor-card width. */
.post-content {
    display: grid;
    max-width: none;
    padding: 0;
    grid-template-columns:
        [full-start] minmax(var(--gap), 1fr)
        [wide-start] minmax(0, calc((var(--container-width) - var(--content-width)) / 2))
        [main-start] min(var(--content-width), 100% - var(--gap) * 2) [main-end]
        minmax(0, calc((var(--container-width) - var(--content-width)) / 2)) [wide-end]
        minmax(var(--gap), 1fr) [full-end];
}

.post-content > * {
    grid-column: main;
}

.post-content > .kg-width-wide {
    grid-column: wide;
}

.post-content > .kg-width-full {
    grid-column: full;
}

.post-content > .kg-width-full img {
    width: 100%;
}


/* ----- custom styles ----- */
:root{
  --sage-900:#1f2e22;--sage-800:#2d4030;--sage-700:#3a5239;--sage-600:#4f6f52;
  --sage-500:#739072;--sage-300:#b8b4a4;--sage-100:#e8e6dc;--sage-50:#f6f5f0;
  --ink:#292524;--ink-soft:#57534e;--ink-faint:#78716c;
  --line:#e7e5e4;--wash:#fafaf9;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-lg:.625rem;--r-xl:.875rem;--r-2xl:1.25rem;
  --shadow:0 18px 50px -28px rgba(31,46,34,.5);--measure:680px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--wash);line-height:1.65;font-size:18px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.18;letter-spacing:-.015em;color:var(--ink)}

.sb-main{width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--sage-600)}
.btn{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:.95rem;padding:.7em 1.4em;border-radius:var(--r-lg);transition:transform .15s ease,background .15s ease;border:none;cursor:pointer}
.btn-primary{background:var(--sage-600);color:#fff}
.btn-primary:hover{background:var(--sage-700);transform:translateY(-1px);text-decoration:none}
.btn-light{background:#fff;color:var(--sage-700)}
.btn-light:hover{background:var(--sage-50);transform:translateY(-1px);text-decoration:none}

/* topbar (in default.hbs) */
.sb-topbar{position:sticky;top:0;z-index:50;background:rgba(250,250,249,.92);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.sb-topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.18rem;letter-spacing:-.02em;color:var(--ink)}
.brand .logo{height:30px;width:auto}
.brand .tag{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--sage-600);border:1px solid var(--sage-100);background:var(--sage-50);padding:.2em .5em;border-radius:5px}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a.link{font-size:.92rem;font-weight:500;color:var(--ink-soft)}
.nav a.link:hover{color:var(--sage-700)}
@media(max-width:760px){.nav .link{display:none}}

/* masthead */
.masthead{background:var(--sage-800);color:#fff;padding:66px 0 140px}
.masthead .eyebrow{color:rgba(255,255,255,.7)}
.masthead h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3rem);max-width:16ch;margin:.5rem 0 .9rem}
.masthead p{color:rgba(255,255,255,.8);font-size:1.1rem;max-width:48ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.chip{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.26);padding:.4em .9em;border-radius:999px}

/* feed */
.section{padding:0 0 72px}
.sb-feed{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:720px){.sb-feed{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dcd9d2}
.card-img{display:block;width:100%;height:168px;object-fit:cover;background:var(--sage-700)}
.card-fallback{background:var(--sage-700)}
.card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.card-title{font-size:1.32rem;line-height:1.25;margin:.55rem 0 .6rem}
.card:hover .card-title{color:var(--sage-700)}
.card-excerpt{color:var(--ink-soft);font-size:.96rem;margin-bottom:1.1rem}

/* featured = first card */
.sb-feed .card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr;margin-top:-86px;position:relative;z-index:2;box-shadow:var(--shadow)}
.sb-feed .card:first-child .card-img{height:100%;min-height:330px}
.sb-feed .card:first-child .card-body{padding:40px 42px;justify-content:center}
.sb-feed .card:first-child .card-title{font-size:1.9rem}
.sb-feed .card:first-child .card-excerpt{font-size:1.02rem}
@media(max-width:720px){.sb-feed .card:first-child{grid-template-columns:1fr}.sb-feed .card:first-child .card-img{min-height:180px}.sb-feed .card:first-child .card-body{padding:26px}}

.meta{display:flex;align-items:center;gap:.7rem;font-size:.82rem;color:var(--ink-faint);margin-top:auto;flex-wrap:wrap}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--sage-300)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--sage-600);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;font-family:var(--sans);flex:none}

.sb-pagination{text-align:center;margin-top:46px}
.sb-pagination a{display:inline-block;color:var(--sage-700);border:1px solid var(--line);background:#fff;border-radius:999px;padding:.55em 1.4em;font-size:.95rem;font-weight:600;margin:0 .3rem}
.sb-pagination a:hover{background:var(--sage-50);text-decoration:none}

/* cta band */
.cta-band{background:var(--sage-800);border-radius:var(--r-2xl);padding:56px 48px;text-align:center;color:#fff;margin-top:8px}
.cta-band h3{color:#fff;font-size:2rem;margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.8);max-width:44ch;margin:0 auto 1.6rem}
.cta-sub{display:block;margin-top:1rem;font-size:.8rem;color:rgba(255,255,255,.6)}

/* article */
.article-head{padding:48px 0 0;max-width:var(--measure);margin:0 auto}
.crumb{font-size:.82rem;color:var(--ink-faint);margin-bottom:1.4rem}
.crumb a:hover{color:var(--sage-700)}
.crumb .sep{margin:0 .5em;opacity:.5}
.article-head h1{font-size:clamp(2.1rem,4.6vw,3.1rem);margin:.8rem 0 .9rem;letter-spacing:-.02em}
.deck{font-size:1.22rem;color:var(--ink-soft);line-height:1.5;margin-bottom:1.8rem}
.byline{display:flex;align-items:center;gap:.8rem;font-size:.9rem;color:var(--ink-faint);padding-bottom:30px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.byline .avatar{width:38px;height:38px;font-size:.85rem}
.byline b{color:var(--ink);font-weight:600}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--sage-300)}
.hero-img{max-width:980px;margin:36px auto 0;width:100%;height:360px;object-fit:cover;border-radius:var(--r-2xl)}

.article{max-width:var(--measure);margin:0 auto;padding:46px 24px 0;font-size:1.16rem;line-height:1.8;color:#36312d}
.article>*{margin:0 0 1.4em}
.article h2{font-size:1.75rem;margin:2.1em 0 .55em;font-family:var(--serif)}
.article h3{font-size:1.32rem;margin:1.7em 0 .45em;font-family:var(--serif)}
.article a{color:var(--sage-700);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.article a:hover{color:var(--sage-800)}
.article ul,.article ol{padding-left:1.3em}
.article li{margin:.5em 0}
.article li::marker{color:var(--sage-500)}
.article strong{color:var(--ink)}
.article img,.article .kg-image{border-radius:var(--r-2xl);margin:1.8em auto}
.article figure{margin:1.8em 0}
.article figcaption{text-align:center;font-size:.85rem;color:var(--ink-soft);margin-top:.7em}
.article blockquote{font-family:var(--serif);font-size:1.5rem;line-height:1.4;color:var(--sage-800);border-left:3px solid var(--sage-500);padding:.2em 0 .2em 1.1em;margin:1.7em 0;letter-spacing:-.01em}
.article :not(pre)>code{background:var(--sage-100);color:#41513f;padding:.12em .42em;border-radius:6px;font-size:.9em}
.article pre{background:#292524;color:#f3f1ec;padding:1.1em 1.3em;border-radius:var(--r-xl);overflow-x:auto;font-size:.92rem;line-height:1.6}
.article hr{border:0;height:1px;background:var(--line);margin:2.2em 0}

.cta{max-width:var(--measure);margin:56px auto 0;background:var(--sage-800);border-radius:var(--r-2xl);padding:40px 38px;text-align:center;color:#fff}
.cta h3{color:#fff;font-size:1.6rem;margin-bottom:.5rem}
.cta p{color:rgba(255,255,255,.82);margin:0 auto 1.4rem;max-width:42ch}

.authorbox{max-width:var(--measure);margin:56px auto 0;display:flex;gap:18px;align-items:flex-start;padding:26px;border:1px solid var(--line);border-radius:var(--r-xl);background:#fff}
.authorbox .avatar{width:52px;height:52px;font-size:1.1rem}
.authorbox h4{font-size:1.05rem;margin-bottom:.25rem}
.authorbox p{font-size:.94rem;color:var(--ink-soft);margin:0;line-height:1.55}

/* static page */
.sb-page{padding:54px 0 0}
.sb-page-title{font-size:2.4rem;margin:0 auto 28px;max-width:var(--measure)}
.sb-page .article{padding-top:0}

/* footer (in default.hbs) */
.sb-footer{background:var(--sage-900);color:rgba(255,255,255,.7);margin-top:80px;padding:54px 0 40px}
.sb-footer .ftop{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}
.sb-footer .brand{color:#fff}
.sb-footer .brand .tag{color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.sb-footer nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.sb-footer nav a{font-size:.9rem;color:rgba(255,255,255,.72)}
.sb-footer nav a:hover{color:#fff}
.sb-footer .copy{margin-top:24px;font-size:.82rem;color:rgba(255,255,255,.45)}

::selection{background:var(--sage-600);color:#fff}
@media(max-width:600px){body{font-size:17px}.article-head h1{font-size:2.1rem}.cta-band{padding:40px 26px}}

/* ----- restyle ----- */
/* ============================================================
   Reading column + table treatment
   ============================================================ */

/* Widens .article, .article-head, .cta, .authorbox and .sb-page-title
   together, since all of them key off --measure. Text column goes from
   632px to 712px once the 24px side padding is accounted for. */
:root {
    --measure: 760px;
}

/* ---------- Tables ----------
   The theme shipped without any table rules, so tables were rendering on
   browser defaults. Comparison posts lean on them heavily, so they break
   out past the reading column and get real editorial styling. */

.article table {
    width: min(960px, calc(100vw - 40px));
    max-width: none;
    margin: 0 0 1.7em 50%;
    transform: translateX(-50%);
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: .95rem;
    line-height: 1.5;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.article thead th {
    text-align: left;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sage-700);
    background: var(--sage-50);
    border-bottom: 2px solid var(--sage-100);
    padding: .8em 1em;
    white-space: nowrap;
}

.article tbody td {
    padding: .85em 1em;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--ink-soft);
}

/* Row-label column: the leftmost cell is the row's name, so it reads as
   a heading rather than data. */
.article tbody td:first-child {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.article tbody tr:last-child td {
    border-bottom: none;
}

.article tbody tr:nth-child(even) {
    background: var(--wash);
}

.article table strong {
    color: var(--ink);
}

/* On phones the breakout is pointless and the overflow guard matters more:
   scroll the table instead of letting it push the page sideways. */
@media (max-width: 640px) {
    .article table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin-left: 0;
        transform: none;
        font-size: .86rem;
    }

    .article thead th,
    .article tbody td {
        padding: .6em .75em;
    }
}