/* ============================================================
 *  trey-heath theme — DESIGN.md overrides
 *  Loaded AFTER Casper's screen.css. Wins the cascade.
 *  Source of truth for every visual decision: ../../DESIGN.md
 * ============================================================ */

:root {
  /* Design tokens — light mode (default) */
  --th-bg: #FAFAF7;
  --th-surface: #FFFFFF;
  --th-text: #0F0F0F;
  --th-muted: #525252;
  --th-border: #E5E5E0;
  --th-accent: #7A1A1A;
  --th-accent-quiet: #2A4858;
  --th-code-bg: #F4F4F0;

  --th-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --th-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --th-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  --th-col-essay: 680px;
  --th-col-note: 720px;
  --th-col-news: 600px;
  --th-col-index: 960px;
  --th-col-page: 720px;

  --th-radius: 0;
  --th-radius-img: 2px;

  --th-dur-micro: 100ms;
  --th-dur-short: 200ms;
  --th-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Override Casper variables to use our palette + fonts */
  --background-color: var(--th-bg);
  --color-darkgrey: var(--th-text);
  --color-midgrey: var(--th-muted);
  --color-lightgrey: var(--th-border);
  --color-secondary-text: var(--th-muted);
  --color-border: var(--th-border);
  --color-bg-secondary: var(--th-code-bg);
  --color-link: var(--th-accent);
  --color-primary: var(--th-accent);

  --font-sans: var(--th-sans);
  --font-serif: var(--th-serif);
  --font-mono: var(--th-mono);

  --container-width: var(--th-col-index);
}

html.dark-mode,
html.auto-color {
  --th-bg: #0F0F0F;
  --th-surface: #1A1A1A;
  --th-text: #FAFAF7;
  --th-muted: #A1A1A1;
  --th-border: #2A2A2A;
  --th-accent: #E08585;
  --th-accent-quiet: #6D9BB5;
  --th-code-bg: #1A1A1A;
}

@media (prefers-color-scheme: dark) {
  html.auto-color {
    --th-bg: #0F0F0F;
    --th-surface: #1A1A1A;
    --th-text: #FAFAF7;
    --th-muted: #A1A1A1;
    --th-border: #2A2A2A;
    --th-accent: #E08585;
    --th-accent-quiet: #6D9BB5;
    --th-code-bg: #1A1A1A;
  }
}

/* ---------- Reset Casper's font assumptions ---------- */

html,
body,
body.has-sans-body {
  background: var(--th-bg) !important;
  color: var(--th-text) !important;
  font-family: var(--th-sans) !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 720px) {
  body { font-size: 18px; }
}

/* All headings use serif by default */
h1, h2, h3, h4, h5, h6,
.gh-canvas h1, .gh-canvas h2, .gh-canvas h3,
.article-title,
.gh-feature-title,
body.has-serif-title h1,
body.has-serif-title h2,
body.has-serif-title h3 {
  font-family: var(--th-serif) !important;
  color: var(--th-text);
  letter-spacing: -0.005em;
}

h1 { font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-weight: 600; line-height: 1.25; }
h3 { font-weight: 600; line-height: 1.3; }

/* Monospace for code */
code, pre, kbd, samp,
.gh-content code, .gh-content pre {
  font-family: var(--th-mono) !important;
}

code, .gh-content :not(pre) > code {
  background: var(--th-code-bg);
  color: var(--th-text);
  padding: 2px 6px;
  border-radius: var(--th-radius-img);
  font-size: 0.92em;
}

.gh-content pre {
  background: var(--th-code-bg) !important;
  color: var(--th-text) !important;
  border: 1px solid var(--th-border);
  border-radius: var(--th-radius-img);
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Links ---------- */

a, .gh-content a {
  color: var(--th-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity var(--th-dur-micro) var(--th-ease-out);
}

a:hover { opacity: 0.7; }

/* Nav links are not accent-colored, just muted text in caps */
.gh-head-menu a,
.gh-head-actions a,
.site-footer-nav a {
  color: var(--th-muted) !important;
  text-decoration: none !important;
  font-family: var(--th-sans) !important;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gh-head-menu a:hover,
.gh-head-actions a:hover {
  color: var(--th-accent) !important;
  opacity: 1;
}

/* ---------- Site header ---------- */

.gh-head {
  background: var(--th-bg);
  border-bottom: 1px solid var(--th-border);
  padding: 16px 0;
  margin-bottom: 0;
}

.gh-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--th-col-index);
  margin: 0 auto;
  padding: 0 32px;
}

.gh-head-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gh-head-logo {
  font-family: var(--th-serif) !important;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--th-text) !important;
  text-decoration: none !important;
}

/* Cover image / "has-cover" gets hidden — we don't use feature publication covers */
.gh-head-cover, .has-cover .gh-head-cover {
  display: none !important;
}

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

.site-archive-header {
  max-width: var(--th-col-index);
  margin: 0 auto;
  padding: 24px 32px 16px;
}
.site-archive-header .site-description {
  font-family: var(--th-sans);
  font-size: 16px;
  color: var(--th-muted);
  margin: 0;
  max-width: 60ch;
}

.site-footer {
  background: var(--th-bg);
  border-top: 1px solid var(--th-border);
  color: var(--th-muted);
  padding: 48px 0;
  margin-top: 96px;
  font-size: 14px;
}

.site-footer .inner {
  max-width: var(--th-col-index);
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.gh-powered-by { font-family: var(--th-sans); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.gh-powered-by a { color: var(--th-muted); text-decoration: none; }

/* ---------- Post (default + essay treatment) ---------- */

.gh-canvas,
.gh-content,
article.post,
article.gh-article {
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 32px 0;
}

/* Casper uses a CSS grid for .gh-canvas — we override the column widths */
.gh-canvas > * {
  grid-column: main-start / main-end;
}

@supports (display: grid) {
  .gh-canvas {
    display: grid;
    grid-template-columns:
      [full-start]
      minmax(24px, auto)
      [wide-start]
      minmax(auto, 100px)
      [main-start]
      min(var(--th-col-essay), 100% - 48px)
      [main-end]
      minmax(auto, 100px)
      [wide-end]
      minmax(24px, auto)
      [full-end];
  }
  .gh-canvas .kg-width-wide {
    grid-column: wide-start / wide-end;
  }
  .gh-canvas .kg-width-full {
    grid-column: full-start / full-end;
  }
}

/* Article hero block */
.article-header {
  padding: 48px 0 24px;
}

.article-meta, .article-byline-meta,
.article-tag {
  font-family: var(--th-sans) !important;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-muted) !important;
  margin-bottom: 12px;
}

.article-tag a { color: var(--th-accent) !important; text-decoration: none !important; }

.article-title {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .article-title { font-size: 32px; }
}

.article-excerpt,
.article-meta, .article-byline-meta {
  font-family: var(--th-sans);
}

.article-meta, .article-byline-meta-item,
.article-meta, .article-byline-meta time {
  color: var(--th-muted);
}

/* Body content */
.gh-content {
  font-family: var(--th-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--th-text);
}

.gh-content > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > blockquote {
  margin: 0 0 32px;
}

.gh-content > h2 {
  margin: 56px 0 16px;
  font-size: 32px;
}

.gh-content > h3 {
  margin: 40px 0 12px;
  font-size: 22px;
}

@media (max-width: 720px) {
  .gh-content { font-size: 17px; }
  .gh-content > p { margin-bottom: 24px; }
  .gh-content > h2 { font-size: 26px; margin: 40px 0 12px; }
  .gh-content > h3 { font-size: 20px; margin: 32px 0 10px; }
}

/* Blockquote — editorial pull-quote treatment */
.gh-content blockquote {
  border-left: 3px solid var(--th-accent);
  padding: 4px 0 4px 20px;
  margin-left: 0;
  font-family: var(--th-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.45;
  color: var(--th-text);
}

/* Horizontal rule */
.gh-content hr {
  border: 0;
  text-align: center;
  margin: 56px 0;
  color: var(--th-muted);
  font-family: var(--th-serif);
  letter-spacing: 0.5em;
}
.gh-content hr::before {
  content: '⁂';
}

/* Images */
.gh-content img,
.kg-image,
.kg-card img {
  border-radius: var(--th-radius-img);
}

/* Feature image — hidden by default per DESIGN.md (essay default) */
.article-image, .gh-feature-image,
.article-image {
  display: none;
}

/* Show feature image only if post explicitly opts in (via the post.html post-image-style setting) */
body.post-template[data-feature-image="show"] .article-image, .gh-feature-image,
.article-image.is-shown {
  display: block;
  margin: 32px 0;
  border-radius: var(--th-radius-img);
}

/* Bylines + author bio */
.article-byline {
  border-top: 1px solid var(--th-border);
  border-bottom: 1px solid var(--th-border);
  padding: 16px 0;
  margin: 32px 0;
  font-family: var(--th-sans);
  font-size: 14px;
  color: var(--th-muted);
}

/* Read next / recent posts */
.gh-read-next {
  border-top: 1px solid var(--th-border);
  margin-top: 64px;
  padding-top: 48px;
}

/* ---------- Index / homepage / archive ---------- */

.gh-feed,
.gh-container {
  max-width: var(--th-col-index);
  margin: 0 auto;
  padding: 48px 32px;
}

/* Override Casper's feed layouts — we want a publication archive list */
.gh-feed,
.gh-postfeed,
.feed.feed-list,
.gh-feed.gh-feed-list {
  display: flex !important;
  flex-direction: column;
  gap: 0;
}

.gh-card,
.gh-post-card,
.post-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--th-border);
  background: transparent !important;
  border-radius: 0;
}

.gh-card:last-child,
.post-card:last-child {
  border-bottom: 0;
}

/* Date column on the left */
.gh-card-date,
.post-card-meta-date,
.post-card-meta-date-wrap {
  font-family: var(--th-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-muted);
  padding-top: 4px;
}

.gh-card-content,
.post-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gh-card-title,
.post-card-title {
  font-family: var(--th-serif) !important;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin: 0;
  color: var(--th-text);
}

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

.gh-card-excerpt,
.post-card-excerpt {
  font-family: var(--th-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--th-muted);
  margin: 0;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kill thumbnail images in the feed — pure list, no images */
.gh-card-image,
.post-card-image-link,
.post-card-image {
  display: none !important;
}

/* Tag pills in the feed */
.gh-card-tags,
.post-card-primary-tag {
  font-family: var(--th-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-accent) !important;
  margin: 0 0 4px;
}

.gh-card-tags a,
.post-card-primary-tag a {
  color: var(--th-accent) !important;
  text-decoration: none;
}

@media (max-width: 720px) {
  .gh-card, .post-card {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 20px 0;
  }
  .gh-card-date { padding-top: 0; }
  .gh-card-title, .post-card-title { font-size: 20px; }
}

/* Hide Casper's homepage hero "Latest" header treatment */
.gh-home-intro,
.gh-feed-heading,
.gh-home-featured {
  display: none;
}

/* ---------- Subscribe / newsletter CTAs ---------- */

.gh-subscribe,
.gh-subscribe-form,
form[data-members-form] {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  padding: 32px;
  margin: 48px 0;
  text-align: left;
}

.gh-subscribe-title,
.gh-subscribe h3,
.gh-subscribe h4 {
  font-family: var(--th-serif) !important;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--th-text);
}

.gh-subscribe-input,
input[type="email"],
input[type="text"] {
  font-family: var(--th-sans) !important;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--th-border);
  background: var(--th-bg);
  color: var(--th-text);
  border-radius: 0;
}

.gh-subscribe-input:focus,
input[type="email"]:focus,
input[type="text"]:focus {
  outline: 1px solid var(--th-accent);
  outline-offset: 1px;
}

button,
.gh-button,
input[type="submit"] {
  font-family: var(--th-sans) !important;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border: 1px solid var(--th-text);
  background: var(--th-text);
  color: var(--th-bg);
  border-radius: 0;
  cursor: pointer;
  transition: opacity var(--th-dur-micro) var(--th-ease-out);
}

button:hover, .gh-button:hover, input[type="submit"]:hover { opacity: 0.85; }

.gh-button.is-accent,
.gh-subscribe button[type="submit"] {
  background: var(--th-accent);
  border-color: var(--th-accent);
  color: #FFFFFF;
}

/* ---------- AI-slop guardrails ---------- */

/* No rounded buttons, no rounded cards, no gradients */
* {
  background-image: none;
}
.gh-button, button, .post-card, .gh-card, .gh-subscribe {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* No big colored hero feature cards */
.gh-home-featured,
.gh-card-feature,
.post-card-featured {
  display: none !important;
}

/* ---------- Custom template body classes (set by hbs files) ---------- */

/* Essay variant — drop-cap on first paragraph */
.is-essay .gh-content > p:first-of-type::first-letter,
body.post-template-custom-essay .gh-content > p:first-of-type::first-letter {
  font-family: var(--th-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  float: left;
  line-height: 0.85;
  padding: 8px 8px 0 0;
  color: var(--th-accent);
}

.is-essay .gh-canvas,
body.post-template-custom-essay .gh-canvas {
  /* Already 680px from default */
}

/* Note variant — narrower vertical rhythm, no drop-cap, slightly wider column */
.is-note .gh-content,
body.post-template-custom-note .gh-content {
  font-size: 17px;
}

.is-note .gh-content > p,
body.post-template-custom-note .gh-content > p {
  margin-bottom: 24px;
}

.is-note .article-title,
body.post-template-custom-note .article-title {
  font-size: 36px;
}

@supports (display: grid) {
  .is-note .gh-canvas,
  body.post-template-custom-note .gh-canvas {
    grid-template-columns:
      [full-start]
      minmax(24px, auto)
      [wide-start]
      minmax(auto, 100px)
      [main-start]
      min(var(--th-col-note), 100% - 48px)
      [main-end]
      minmax(auto, 100px)
      [wide-end]
      minmax(24px, auto)
      [full-end];
  }
}

/* Newsletter variant — centered header, narrower column, signature treatment */
@supports (display: grid) {
  .is-newsletter .gh-canvas,
  body.post-template-custom-newsletter .gh-canvas {
    grid-template-columns:
      [full-start]
      minmax(24px, auto)
      [wide-start]
      minmax(auto, 100px)
      [main-start]
      min(var(--th-col-news), 100% - 48px)
      [main-end]
      minmax(auto, 100px)
      [wide-end]
      minmax(24px, auto)
      [full-end];
  }
}

.is-newsletter .article-header,
body.post-template-custom-newsletter .article-header {
  text-align: center;
}

.is-newsletter .article-title,
body.post-template-custom-newsletter .article-title {
  font-size: 32px;
}

.is-newsletter .gh-content > p,
body.post-template-custom-newsletter .gh-content > p {
  margin-bottom: 20px;
}

/* Page template — same as essay but no drop-cap, no meta line */
body.page-template .article-header,
body.page-template .article-meta,
body.page-template .article-byline-meta {
  display: none;
}
body.page-template .gh-content > p:first-of-type::first-letter { all: unset; }

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

body { animation: th-fade-in var(--th-dur-short) var(--th-ease-out); }
@keyframes th-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Strip any motion Casper adds that we don't want */
.kg-card,
.gh-content > * {
  animation: none !important;
  transform: none !important;
}

/* ---------- Search button + burger (keep functional, restyle) ---------- */

.gh-search,
.gh-burger {
  background: transparent;
  border: 1px solid var(--th-border);
  color: var(--th-text);
  border-radius: 0;
  width: 36px;
  height: 36px;
}

.gh-search:hover, .gh-burger:hover {
  border-color: var(--th-text);
  background: transparent;
}

/* ---------- Print ---------- */

@media print {
  .gh-head, .site-footer, .gh-subscribe, .gh-read-next { display: none; }
  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
}

/* ============================================================
 *  v0.2.0 polish overrides — fixes after first live deploy
 *  Header chunkiness, site-description sizing, post-feed gap,
 *  Subscribe button pill, post-card link underline propagation.
 * ============================================================ */

/* Header: tighter, no fixed 88px height */
.gh-head, header.gh-head {
  height: auto !important;
  min-height: 0 !important;
  padding: 12px max(4vmin, 20px) !important;
  background: var(--th-bg) !important;
}
.gh-head-inner {
  height: auto !important;
  min-height: 0 !important;
}

/* Site description (homepage subtitle) — small, sans, muted */
.site-description,
.site-archive-header .site-description,
:is(.site-logo, .site-title) + .site-description {
  font-family: var(--th-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--th-muted) !important;
  margin: 0 !important;
  max-width: 60ch !important;
  display: block !important;
  letter-spacing: 0 !important;
}

/* Site-archive-header positioning */
.site-archive-header {
  padding: 32px max(4vmin, 20px) 24px !important;
  max-width: var(--th-col-index) !important;
  margin: 0 auto !important;
}

/* Post-feed — remove Casper's chunky padding */
.post-feed {
  padding: 0 max(4vmin, 20px) !important;
  margin: 0 auto !important;
  max-width: var(--th-col-index) !important;
  display: flex !important;
  flex-direction: column;
  gap: 0;
}

/* Site-main wrapper — no extra spacing */
.site-main, main#site-main {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Post-card-content-link — kill underline propagation */
.post-card-content-link,
.post-card-content-link:hover,
.post-card-content-link:visited,
.post-card-content-link:active {
  text-decoration: none !important;
  color: var(--th-text) !important;
}
.post-card-content-link:hover .post-card-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.post-card-excerpt,
.post-card-content-link .post-card-excerpt {
  text-decoration: none !important;
  color: var(--th-muted) !important;
}

/* Subscribe + Sign in buttons in header — sharp corners, brand */
.gh-head-button,
#gh-head .gh-head-button {
  border-radius: 0 !important;
  background: var(--th-text) !important;
  color: var(--th-bg) !important;
  font-family: var(--th-sans) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  height: auto !important;
  line-height: 1 !important;
  border: 1px solid var(--th-text) !important;
  box-shadow: none !important;
}
.gh-head-link,
#gh-head .gh-head-link {
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--th-text) !important;
  font-family: var(--th-sans) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  text-decoration: none !important;
}
.gh-head-button:hover {
  background: var(--th-accent) !important;
  border-color: var(--th-accent) !important;
}
.gh-head-link:hover {
  color: var(--th-accent) !important;
  background: transparent !important;
}

/* Header logo — handle uploaded logo image (circular) by default */
.gh-head-logo img {
  max-height: 32px !important;
  border-radius: 0 !important;
}

/* Search icon button — sharp corners */
.gh-search,
#gh-head .gh-search {
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  width: auto;
  height: auto;
  padding: 6px;
}
.gh-search:hover {
  color: var(--th-accent) !important;
}

/* Post card — tighter row spacing, no extra padding */
.post-card {
  padding: 20px 0 !important;
}
.post-card-content-link {
  padding: 0 !important;
}
.post-card-header {
  margin-top: 0 !important;
}
.post-card-tags {
  margin: 0 0 6px !important;
}

/* Kill any cover image styles since we don't use covers */
.has-cover .site-header-content,
.site-header,
.site-header-cover,
.site-header-content {
  display: none !important;
}

/* Footer adjustments */
.site-footer {
  margin-top: 64px !important;
  padding: 32px max(4vmin, 20px) !important;
}
.site-footer .inner {
  max-width: var(--th-col-index) !important;
  padding: 0 !important;
}

/* ============================================================
 *  v0.3.0 layout fixes
 *  - Post-card stretches to full container width (kill margin: 0 auto)
 *  - Header forced to single row regardless of nav_layout choice
 * ============================================================ */

/* Post-card: fill its container, no auto-centering */
.post-card,
article.post-card,
.post-feed .post-card {
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Post-card excerpt — allow wider, not Casper's 720px cap */
.post-card-excerpt {
  max-width: 60ch !important;
}

/* Force single-row header layout regardless of navigation_layout setting */
#gh-head .gh-head-inner,
.gh-head-inner,
.is-head-stacked .gh-head-inner,
.is-head-left-logo .gh-head-inner,
.is-head-middle-logo .gh-head-inner {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  column-gap: 32px !important;
  row-gap: 0 !important;
  align-items: center !important;
}

.is-head-stacked .gh-head-brand,
.is-head-stacked .gh-head-menu,
.is-head-stacked .gh-head-actions {
  grid-row: 1 !important;
}
.is-head-stacked .gh-head-brand { grid-column: 1 !important; }
.is-head-stacked .gh-head-menu { grid-column: 2 !important; }
.is-head-stacked .gh-head-actions { grid-column: 3 !important; }

/* Hide burger button on desktop — search + buttons are enough */
@media (min-width: 720px) {
  .gh-burger { display: none !important; }
}

/* Tighten header padding more */
.gh-head, header.gh-head {
  padding: 10px max(4vmin, 20px) !important;
}

/* ============================================================
 *  v0.4.0 — keep logo in header on homepage
 *  Casper hides .gh-head-logo on home in "Logo on cover" mode
 *  (it expects the logo to render in a hero section we removed).
 * ============================================================ */

.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-logo,
.is-head-stacked .gh-head .gh-head-logo,
.is-head-middle-logo .gh-head .gh-head-logo,
.gh-head .gh-head-logo {
  display: flex !important;
  align-items: center !important;
}

/* If user hasn't set a logo image, render their name as text logo */
.gh-head-logo.no-image {
  font-family: var(--th-serif) !important;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--th-text) !important;
}

/* Logo image: cap height, no rounding */
.gh-head-logo img {
  display: block !important;
  max-height: 32px !important;
  width: auto !important;
  border-radius: 0 !important;
}

/* ============================================================
 *  v0.5.0 — kill Casper's negative margin on header menu
 *  Casper does margin-left: -40px on .gh-head-menu to "tuck" it
 *  under their big logo. Our compact logo doesn't want this.
 * ============================================================ */

.gh-head-menu,
.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-menu,
.is-head-left-logo .gh-head-menu,
.is-head-middle-logo .gh-head-menu,
#gh-head .gh-head-menu {
  margin: 0 !important;
}

/* Restore a clean gap between logo and menu */
.gh-head-brand {
  margin-right: 32px !important;
}

/* And between menu items themselves */
.gh-head-menu ul,
.gh-head-menu .nav {
  display: flex !important;
  gap: 28px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
 *  v0.6.0 — restore + style the post byline
 *  Prior bug accidentally hid .article-byline-meta site-wide.
 *  Now style the author name + date row to caps-small spec.
 * ============================================================ */

/* Author name + date row — caps small, single line */
.article-byline-meta {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.article-byline-meta .author-name {
  font-family: var(--th-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--th-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.article-byline-meta .author-name a {
  color: var(--th-text) !important;
  text-decoration: none !important;
}
.article-byline-meta .byline-meta-content {
  font-family: var(--th-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-muted);
}
.article-byline-meta time,
.article-byline-meta .byline-reading-time {
  color: var(--th-muted);
}

/* Author avatar — keep it small + circular (Casper default is huge) */
.author-list-item .author-avatar img,
.author-profile-image {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1px solid var(--th-border);
}

/* Tighten article-byline row */
.article-byline {
  border-top: 1px solid var(--th-border);
  border-bottom: 1px solid var(--th-border);
  padding: 14px 0 !important;
  margin: 24px 0 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article-byline-content {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

/* Share button — match brand */
.gh-button-share {
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--th-text) !important;
  border: 1px solid var(--th-border) !important;
  font-family: var(--th-sans) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
}
.gh-button-share:hover {
  border-color: var(--th-text) !important;
}

/* Drop-cap was rendering on default post.hbs via .is-essay class — good */
/* But also support posts that load via post.hbs with no template */
article.post.is-essay .gh-content > p:first-of-type::first-letter,
.post-template .is-essay .gh-content > p:first-of-type::first-letter {
  font-family: var(--th-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  float: left;
  line-height: 0.85;
  padding: 8px 8px 0 0;
  color: var(--th-accent);
}

/* ============================================================
 *  v0.7.0 — clean up footer
 *  - Hide auto "Sign up" item that Ghost adds when members enabled
 *  - Hide "Powered by Ghost" (allowed on Creator+ tier)
 *  - If secondary nav becomes empty, collapse its space cleanly
 * ============================================================ */

/* Hide the auto-injected "Sign up" link in the secondary nav.
   Ghost generates the .nav-sign-up class from the menu item slug,
   AND injects the link automatically when members are enabled.
   Any future secondary nav items (privacy, terms, contact) will
   still show because they get a different .nav-<slug> class. */
.site-footer-nav .nav-sign-up,
.site-footer-nav li.nav-sign-up,
.site-footer-nav a[href="#/portal/"],
.site-footer-nav a[href="#/portal/signup"] {
  display: none !important;
}

/* Hide "Powered by Ghost" — Ghost(Pro) Creator tier allows this */
.gh-powered-by,
.site-footer .gh-powered-by {
  display: none !important;
}

/* When secondary nav is empty (or only has hidden items), center
   the copyright across the footer width instead of pinning left */
.site-footer .inner {
  justify-content: space-between;
}
.site-footer-nav:empty,
.site-footer-nav ul:empty {
  display: none;
}
.site-footer-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}
.site-footer-nav a {
  font-family: var(--th-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-muted) !important;
  text-decoration: none !important;
}
.site-footer-nav a:hover { color: var(--th-accent) !important; }

/* Make the copyright the only required footer element. Style it. */
.site-footer .copyright,
.site-footer .copyright a {
  font-family: var(--th-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--th-muted) !important;
  text-decoration: none !important;
}