/* hawtof-the-press v0.4 — monospace, brutalist, SEO-native, Portal-ready, tag filter UI */
:root {
  /* Slightly wider to accommodate reading time */
  --maxw: 820px;
  --c-bg: #ffffff;
  --c-fg: #000000;
  --c-subtle: #666666;
  --c-muted: #333333;
  --c-border: #e6e6e6;
  --c-link: #0645ad; /* Accessible blue on white */
  --c-link-visited: #b85c1c; /* Dark burnt orange for visited links */
  --c-link-hover: #0b5bd3; /* Slightly brighter for hover */
  --c-surface: #ffffff;
  --c-surface-hover: #f6f6f6;
  --c-surface-alt: #fcfcfc;
  --c-invert: #ffffff;
  --c-icon-sun: #fdb515; /* California Gold */
  --c-icon-moon: #6ea8ff;

  /* Font variables for Ghost custom fonts support */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  /* Defaults applied to body and headings */
  --font-body: var(--font-sans);
  --font-headings: var(--font-body);
  /* Ghost design settings CSS variables (required by gscan GS051) */
  --gh-font-body: var(--font-body);
  --gh-font-heading: var(--font-headings);
}
html,
body {
  margin: 0;
  padding: 0;
  /* Prevent horizontal drag revealing off-canvas UI on mobile */
  overflow-x: hidden;
}
body {
  background: var(--c-bg);
  color: var(--c-fg);
  /* Use Ghost-provided font variables with monospace defaults */
  font: 16px/1.6 var(--gh-font-body, var(--font-body));
}
/* Ensure headings can switch separately from body */
h1,
h2,
h3,
.post-title {
  font-family: var(--gh-font-heading, var(--font-headings));
}
#content,
.site-header,
.site-footer {
  width: min(100% - 2rem, var(--maxw));
  margin: 0 auto;
}
#content {
  padding-block: 2rem;
}

/* Reduce top spacing specifically on tag pages to avoid a large gap
   between the secondary nav and the archive header */
.tag-template #content {
  padding-top: 0.5rem;
}

/* Visually hidden utility for screen reader-only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link styling */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-150%);
  background: #000;
  color: #fff;
  padding: 0.5rem 0.75rem;
  z-index: 1000;
}
.skip-link:focus {
  transform: translateY(0);
}
.site-header {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.brand a {
  color: var(--c-fg);
  text-decoration: none;
}
.brand a:visited {
  color: var(--c-fg);
}
.brand a:hover {
  text-decoration: underline;
}
.site-nav {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  overflow: visible; /* prevent focus outlines on links from being clipped */
  margin-bottom: 0.25rem;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.site-nav li {
  margin: 0;
}
.site-nav a {
  color: var(--c-fg);
  text-decoration: none;
  padding: 0.15rem 0.25rem;
}
.site-nav a:visited {
  color: var(--c-fg);
}
.site-nav a:hover {
  text-decoration: underline;
}
.site-nav .nav-current a,
.site-nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Hide the "Home" page from primary navigation; the logo/title links to home */
.site-nav .nav-home {
  display: none;
}
.header-bottom {
  padding: 0.5rem 0 0 0;
  width: min(100% - 2rem, var(--maxw));
  margin: 0 auto;
}

/* Header actions (search, auth links) */
.actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile menu toggle button (hidden on desktop) */
.menu-btn {
  display: none;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.menu-btn:hover,
.menu-btn:focus {
  border-color: transparent;
  background: transparent;
}
.menu-btn:focus-visible {
  outline: 3px solid #00e;
  outline-offset: 2px;
}

/* Hidden checkbox used to toggle the mobile drawer */
.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 360px);
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  transform: translateX(100%);
  transition: transform 180ms ease;
  z-index: 20;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Prevent keyboard focus when the drawer is closed */
  visibility: hidden;
  pointer-events: none;
}
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}
.mobile-primary ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.mobile-primary a {
  color: var(--c-fg);
  text-decoration: none;
  padding: 0.15rem 0.25rem;
}
.mobile-primary a:visited {
  color: var(--c-fg);
}
.mobile-primary a:hover {
  text-decoration: underline;
}
.mobile-primary .nav-current a,
.mobile-primary a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mobile-auth {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.close-btn {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  cursor: pointer;
}

/* When toggled, reveal the drawer */
.menu-toggle:checked ~ .mobile-menu {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.icon-btn {
  appearance: none;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-fg);
  padding: 0 0.5rem;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
/* Ensure the hamburger is hidden by default even though it shares .icon-btn */
.icon-btn.menu-btn {
  display: none;
}
.icon-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.icon-btn:hover,
.icon-btn:focus {
  border-color: #cfcfcf;
  background: var(--c-surface);
  color: var(--c-fg);
}
/* Search button uses icon only */
.icon-btn .label {
  display: none;
}
/* Improve hit area and subtle hover for search button */
.search-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}
.search-btn:hover,
.search-btn:focus {
  background: var(--c-surface-hover);
  border-color: #cfcfcf;
}
.search-btn:active {
  transform: translateY(1px);
}
/* Make search icon a bit larger than default */
.search-btn svg {
  width: 20px;
  height: 20px;
}

/* Ensure Ghost's built-in {{search}} button is styled and focus-visible */
.actions [data-ghost-search] {
  appearance: none;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-fg);
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 120ms ease, border-color 120ms ease,
    box-shadow 120ms ease;
}
.actions [data-ghost-search]:hover,
.actions [data-ghost-search]:focus {
  background: var(--c-surface-hover);
  border-color: #cfcfcf;
}
.actions [data-ghost-search]:focus-visible {
  outline: none;
}
/* Fallback for browsers without :focus-visible */
.actions [data-ghost-search]:focus {
  outline: none;
}
.actions [data-ghost-search]:focus:not(:focus-visible) {
  outline: none;
}
.actions [data-ghost-search] svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Tag/secondary nav */
.tag-nav {
  border-bottom: 1px solid var(--c-border);
  padding: 0.5rem 0;
}
.tag-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.tag-nav li {
  margin: 0;
}
.tag-nav a {
  margin-right: 0;
  color: var(--c-subtle);
  text-decoration: none;
}
.tag-nav a::before {
  content: "#";
  color: var(--c-muted);
  margin-right: 0.1rem;
}
.tag-nav a:visited {
  color: var(--c-subtle);
}
.tag-nav a:hover {
  text-decoration: underline;
}
.tag-nav .nav-current a,
.tag-nav a[aria-current="page"] {
  color: var(--c-fg);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tag-nav .nav-current a::before,
.tag-nav a[aria-current="page"]::before {
  color: var(--c-fg);
}
.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 0.9rem;
}

/* Footer layout: inline on desktop, stacked on small screens */
.site-footer .footer-line {
  margin: 0;
}
.site-footer .footer-line > span {
  display: inline;
}
.site-footer .footer-built::before,
.site-footer .footer-rss::before {
  content: "·";
  color: #aaa;
  margin: 0 0.4rem;
}

@media (max-width: 420px) {
  .site-footer .footer-line > span {
    display: block;
  }
  .site-footer .footer-built::before,
  .site-footer .footer-rss::before {
    content: none;
  }
}

/* Footer RSS link: align icon with label */
.site-footer .rss-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.site-footer .rss-icon {
  width: 14px;
  height: 14px;
}
/* Generic rss link styles (not just footer) */
.rss-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rss-icon {
  width: 14px;
  height: 14px;
}

a {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:visited {
  color: var(--c-link-visited);
}
a:hover,
a:focus {
  color: var(--c-link-hover);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #00e;
  outline-offset: 2px;
}

.feed {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.feed li {
  display: grid;
  /* Add a middle column for reading time */
  grid-template-columns: 12ch 1fr max-content auto;
  grid-auto-rows: auto;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.6rem 0;
}
.feed li + li {
  border-top: 1px solid var(--c-border);
}
@media (hover: hover) {
  .feed li:hover {
    background: var(--c-surface-hover);
  }
}
/* Gentle zebra striping to improve scan-ability */
.feed li:nth-child(even) {
  background: var(--c-surface-alt);
}
.feed .date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}
.feed .item-link {
  display: inline;
}
/* underline only the title so it doesn't extend under badges */
.feed .item-link .item-title {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feed .item-link .star,
.feed .item-link .badge {
  text-decoration: none;
}

/* Reading time */
.reading {
  color: var(--c-subtle);
  white-space: nowrap;
}
/* Ensure reading time is always in the 4th column so it aligns even without tags */
.feed .reading {
  grid-column: 4;
}
/* Remove clock icon before reading time */
.feed .reading::before,
.post-meta .reading::before {
  content: none;
}
/* Separator dot between tags and reading time in feed (after swap) */
.feed .tags + .reading::before {
  content: "·";
  color: #aaa;
  margin: 0 0.4rem 0 0.5rem;
}

/* Reading time in feed */
.feed .reading {
  color: var(--c-subtle);
  white-space: nowrap;
}

/* Generic badge + outline featured variant */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--c-fg);
  color: var(--c-fg);
  background: transparent;
  margin-left: 0.35rem;
  vertical-align: baseline;
}
.badge-featured {
  border-color: var(--c-fg);
  color: var(--c-fg);
  background: transparent;
  font-weight: 700;
}
.feed .tags {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tags {
  color: var(--c-subtle);
  font-size: 0.9rem;
}
.tags a {
  color: var(--c-subtle);
  text-decoration: none;
}
.tags a:hover {
  text-decoration: underline;
  color: var(--c-link);
}

.star {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.85rem;
  line-height: 1;
}

/* Featured stack box */
.featured-box {
  /* Draw border via overlay to avoid being covered by text decorations */
  position: relative;
  padding: 0.2rem 0.35rem; /* tighter */
  margin-bottom: 1rem;
}
.featured-box::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--c-fg); /* visual border, above children */
  pointer-events: none;
}
.featured > h2 {
  margin: 0 0 0.15rem 0;
}
.featured-stack {
  list-style: none;
  margin: 0.3rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem; /* tighter between rows */
}
.featured-card .card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.featured-row {
  border: 0; /* remove inner borders for density */
}
.featured-row .card-link {
  display: grid;
  grid-template-columns: auto 1fr; /* image left */
  align-items: start; /* align image with first line of text */
  gap: 0.4rem;
  padding: 0.15rem 0.25rem;
}
.featured-row__media {
  width: 46px;
  height: 34px;
  overflow: hidden;
  margin: 0; /* reset default figure margins to fix vertical misalignment */
  align-self: start;
}
.featured-row__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  display: block;
}
.featured-card .card-title {
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.25;
}

/* Make featured rows harmonize with feed items */
.featured-card {
  background: transparent; /* inherit parent background */
}

/* Mobile refinements for Featured section */
@media (max-width: 560px) {
  .featured-box {
    padding: 0.2rem 0.3rem;
  }
  .featured > h2 {
    font-size: 1.25rem;
    margin: 0 0 0.25rem 0;
  }
  .featured-stack {
    gap: 0.15rem;
  }
  .featured-row .card-link {
    grid-template-columns: 36px 1fr;
    gap: 0.4rem;
    padding: 0.15rem 0.2rem;
  }
  .featured-row__media {
    width: 36px;
    height: 26px;
  }
  .featured-card .card-title {
    line-height: 1.25;
  }
}

.post-title {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 0.25rem 0;
}
/* Slightly larger titles on static pages only */
.page-template .post-title {
  font-size: 2.25rem;
}
.post-meta {
  color: var(--c-muted);
  margin: 0.25rem 0 1.25rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.post-meta .reading {
  margin-left: 0; /* handled via separators */
}
.post-meta .tags {
  margin-left: 0; /* handled via separators */
}
/* Dot separators between meta items */
.post-meta .date + .reading::before,
.post-meta .reading + .tags::before,
.post-meta .tags + .post-author::before,
.post-meta .reading + .post-author::before,
.post-meta .date + .post-author::before {
  content: "·";
  color: #aaa;
  margin: 0 0.4rem;
}
/* Compact author block under the title */
.post-author {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-muted);
  margin: 0; /* keep inline with other meta */
}
.post-author__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  filter: grayscale(100%);
}
.post-author__name {
  color: inherit;
  text-decoration: none;
}
.post-author__name:hover {
  text-decoration: underline;
}
.post-content p {
  margin: 0 0 1rem 0;
}
/* Blockquotes and inline quotes */
.post-content blockquote {
  margin: 1.25rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--c-fg);
}
.post-content blockquote p {
  margin: 0; /* prevent extra spacing inside blockquotes */
}
/* Ensure browser-generated curly quotes for inline q elements */
.post-content q {
  quotes: "\201C""\201D""\2018""\2019"; /* “ ” ‘ ’ */
}
.post-content q::before {
  content: open-quote;
}
.post-content q::after {
  content: close-quote;
}
/* Normalize media inside post content */
.post-content figure {
  margin: 1.25rem 0; /* remove UA side margins that misalign wide media */
}
.post-content figcaption,
.feature figcaption {
  color: #666;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 0.35rem;
}
.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* center standard images */
}
.feature {
  /* Reserve common social share aspect ratio to reduce CLS */
  aspect-ratio: 1200 / 630;
  overflow: hidden;
}
.feature img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%);
  border: 0;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem; /* add more space before comments */
  font-size: 0.95rem;
}
.post-nav .prev,
.post-nav .next {
  flex: 1 1 50%;
  max-width: calc(var(--maxw) / 2 - 1rem); /* keep text from crossing center */
  min-width: 0; /* allow shrinking so long titles ellipsize */
}
.post-nav .next {
  text-align: right;
}
.post-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ensure arrows always visible; only the title label truncates */
.post-nav a .arrow {
  flex: 0 0 auto;
}
.post-nav a .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-fg);
}
.pagination a,
.pagination span {
  text-decoration: none;
}
.pagination a:hover {
  text-decoration: underline;
}
.subtle {
  color: var(--c-subtle);
  font-size: 1.05rem;
}

/* Archive header (tag/author pages) */
.archive-header {
  margin: 0.5rem 0 0.75rem 0;
}
.archive-header h1 {
  margin: 0;
}
.archive-header .subtle {
  margin: 0.25rem 0 0 0;
}

/* Social links list */
.social {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 1rem 0;
}
.social a {
  color: var(--c-fg);
  text-decoration: none;
}
.social a:hover {
  text-decoration: underline;
}

/* Author card */
.author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid var(--c-fg);
  margin-bottom: 0.75rem;
}
.author-card h1 {
  margin: 0;
}
.author-card__body .subtle {
  margin: 0.1rem 0 0.15rem 0;
}
.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  -o-object-fit: cover;
  object-fit: cover;
  filter: grayscale(100%);
}
.author-card__actions .social-icons {
  gap: 0.5rem;
}
.social-icons .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}
.social-icons .icon:hover,
.social-icons .icon:focus {
  border-color: #cfcfcf;
}
.author-card .rss-inline {
  margin-top: 0.2rem;
}
/* Make the author/profile RSS link grey like the footer RSS */
.author-card .rss-link,
.author-card .rss-link:link,
.author-card .rss-link:visited {
  color: var(--c-subtle);
  text-decoration-color: #666;
}
.author-card .rss-link:hover,
.author-card .rss-link:focus {
  color: var(--c-fg);
  text-decoration-color: var(--c-fg);
}
/* Reduce vertical space for social links inside author card */
.author-card .social {
  margin: 0.1rem 0 0.15rem 0;
}

/* Subscribe button + CTA */
.sub-btn {
  text-decoration: none;
  border: 1px solid var(--c-fg);
  padding: 0.25rem 0.5rem;
  color: var(--c-fg);
  background: transparent;
  cursor: pointer;
}
.sub-btn:visited {
  color: var(--c-fg);
}
.sub-btn:hover {
  background: var(--c-fg);
  color: var(--c-invert);
}
.sub-btn:focus,
.sub-btn:active {
  background: var(--c-fg);
  color: var(--c-invert);
}
.sub-btn.alt {
  background: transparent;
}
.sub-btn.alt:hover,
.sub-btn.alt:focus,
.sub-btn.alt:active {
  background: transparent;
  color: #000;
}

/* Sign in as a plain link (match Subscribe color, override any Portal styles) */
/* Use higher specificity and !important to defeat generic a[data-open-portal] rules */
a.signin-link,
a.signin-link:link,
a.signin-link:visited,
.actions a.signin-link,
.mobile-auth a.signin-link,
.subscribe-cta a.signin-link {
  color: var(--c-fg) !important;
  text-decoration: none;
}
a.signin-link:hover,
a.signin-link:focus,
.actions a.signin-link:hover,
.actions a.signin-link:focus,
.mobile-auth a.signin-link:hover,
.mobile-auth a.signin-link:focus,
.subscribe-cta a.signin-link:hover,
.subscribe-cta a.signin-link:focus {
  color: var(--c-fg) !important;
  text-decoration: underline;
}
.subscribe-cta {
  margin-top: 2rem;
  color: #666;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Comments spacing */
.comments {
  margin-top: 2.5rem;
}

/* Tag filter UI removed; using a dedicated tags page instead */

/* (Removed custom modal styles; using Ghost Portal for signup/signin) */

/* Ghost cards: default vertical spacing (callouts, audio, embeds, etc.) */
.post-content .kg-card,
.post-content .kg-callout-card {
  margin: 1.25rem 0; /* align with blockquote/figure spacing */
}

/* Ghost cards: required widths */
.kg-width-wide {
  width: min(100%, 1200px);
  margin: 2rem auto;
}
.kg-width-full,
.post-content .kg-width-full {
  /* Full-bleed cards span the viewport and stay centered */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Ensure media inside full-bleed figures scales correctly */
.kg-width-full img,
.kg-width-full video,
.kg-width-full iframe,
.post-content .kg-width-full img,
.post-content .kg-width-full video,
.post-content .kg-width-full iframe {
  width: 100%;
  height: auto;
  display: block;
}

/* Minimal Ghost custom font support: use Ghost CSS variables for body and headings */

/* Footer link style: subtle underline, no blue/purple color */
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #666;
  text-underline-offset: 2px;
}
.site-footer a:hover {
  color: inherit;
  text-decoration-color: var(--c-fg);
}
.site-footer a:visited {
  color: inherit;
}

/* Announcement bar: align with theme and avoid overlap with sticky header */
#announcement-bar-root {
  position: relative;
  z-index: 20;
  font: inherit;
}
#announcement-bar-root a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Error pages */
.error-page {
  margin: 2rem 0 3rem 0;
}
.error-page .code {
  display: inline-block;
  font-weight: 700;
  background: var(--c-fg);
  color: var(--c-invert);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.35rem;
}

/* Dark theme */
:root.theme-dark {
  --c-bg: #14171a; /* updated dark background */
  --c-fg: #dde1e5; /* updated light text on dark */
  --c-subtle: #b0b0b0;
  --c-muted: #d0d0d0;
  --c-border: #2e2e2e;
  --c-link: #ffd166; /* Warm accent */
  --c-link-visited: #7fb3ff; /* Accessible on dark */
  --c-link-hover: #a6c8ff;
  --c-surface: #181818;
  --c-surface-hover: #1f1f1f;
  --c-surface-alt: #151515;
  --c-invert: #0b0b0b;
  --c-icon-sun: #fdb515;
  --c-icon-moon: #9bbcff;
}

/* Theme toggle button visuals */
.theme-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
}
.theme-toggle .sun {
  color: var(--c-icon-sun);
  display: none;
}
.theme-toggle .moon {
  color: var(--c-icon-moon);
  display: inline;
}
html[data-theme="dark"] .theme-toggle .sun {
  display: inline;
}
html[data-theme="dark"] .theme-toggle .moon {
  display: none;
}
.error-page h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.error-page .message {
  margin: 0 0 1rem 0;
  font-size: 1.05rem;
}
.error-page .actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.error-page .actions .sub-btn {
  width: 100%;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile refinements */
@media (max-width: 420px) {
  .header-top {
    gap: 0.5rem;
  }
  .brand {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .actions {
    gap: 0.35rem;
    flex-shrink: 0;
  }
  /* Hide Subscribe button on mobile; available in drawer */
  .actions .sub-btn {
    display: none;
  }
  /* Hide inline primary nav and show menu button */
  .site-nav {
    display: none;
  }
  .icon-btn.menu-btn {
    display: inline-flex;
  }
  /* Hide standalone sign-in text link on very small screens;
     users can still access sign-in via the Portal in Subscribe */
  .actions .signin-link {
    display: none;
  }
}

/* Stack and center post navigation on small screens */
@media (max-width: 560px) {
  .post-nav {
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
  }
  .post-nav .prev,
  .post-nav .next {
    max-width: 100%;
    text-align: center;
  }
}

/* Stack post metadata on small screens for better readability */
@media (max-width: 560px) {
  .post-meta {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.1rem;
  }
  /* Remove inline separators when stacked */
  .post-meta .date + .reading::before,
  .post-meta .reading + .tags::before,
  .post-meta .tags + .post-author::before,
  .post-meta .reading + .post-author::before,
  .post-meta .date + .post-author::before {
    content: none;
    margin: 0;
  }
}

/* Stack feed layout on narrow screens for clarity */
@media (max-width: 560px) {
  .feed li {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.15rem;
  }
  .feed .date {
    font-size: 0.95rem;
    color: #555;
  }
  .feed .reading {
    justify-self: start;
    grid-column: auto; /* reset for stacked layout */
    font-size: 0.9rem;
    color: #333;
  }
  .feed .tags {
    font-size: 0.9rem;
  }
}

/* Stack feed layout on narrow screens for clarity */
@media (max-width: 560px) {
  .feed li {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.15rem;
  }
  .feed .date {
    font-size: 0.95rem;
    color: #555;
  }
  .feed .reading {
    justify-self: start;
    grid-column: auto; /* reset for stacked layout */
    font-size: 0.9rem;
    color: #666;
  }
  .feed .tags {
    font-size: 0.9rem;
  }
}