/* V2 Builder Theme — pixel-perfect modules */

:root {
  --v2-bg: #ffffff;
  --v2-bg-rgb: 255,255,255;
  --v2-bg-card: #f7f7f8;
  --v2-text: #0a0a0a;
  --v2-text-rgb: 10,10,10;
  --v2-muted: rgba(10,10,10,0.55);
  --v2-border: rgba(0,0,0,0.10);
  --v2-accent: var(--ghost-accent-color, #64748b);
  --v2-accent-rgb: 100,116,139;
  --v2-display: 'Inter', system-ui, sans-serif;
  --v2-body: 'Inter', system-ui, sans-serif;
  --v2-radius: 6px;
  --v2-btn-radius: 6px;
  --v2-btn-bg: var(--ghost-accent-color, #64748b);
  --v2-btn-color: #ffffff;
  --v2-btn-border: none;
  --v2-image-radius: 6px;
  --v2-spacing-scale: 1;
  --v2-content-max-width: 1280px;
  --v2-gutter: clamp(16px, 4vw, 40px);
  --v2-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
  --v2-canvas-color: #ececef;
  --v2-canvas-inset: 32px;
  --v2-canvas-radius: 12px;
  --v2-canvas-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
  --v2-img-overlay-color: #6366f1;
  --v2-img-overlay-opacity: 0.30;
  --v2-img-overlay-blend: multiply;
  --v2-tag-radius: 999px;
  font-size: 18px;
  --v2-header-h: 68px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Anchor-link scroll behavior. Two pieces working together:
   1. scroll-padding-top tells the browser to offset the scroll target by the
      sticky header height, so clicking /#features lands the section BELOW
      the header rather than behind it.
   2. scroll-behavior:smooth animates the scroll instead of jump-snapping.
      Wrapped in a prefers-reduced-motion guard so users who disable motion
      get an instant jump (accessibility — smooth scroll can be nauseating).
      IMPORTANT: no backtick characters in this comment — the entire CSS
      string is a JS template literal delimited by backticks. */
html {
  scroll-padding-top: var(--v2-header-h, 68px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--v2-body);
  color: var(--v2-text);
  background: var(--v2-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Full-bleed sections (.kg-width-full) use width:100vw, which includes the
     scrollbar width and can produce a 1-15px sliver of horizontal scroll.
     Clip it here. clip (NOT hidden) does not create a scroll container, so
     position:sticky headers keep working. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }

/* Shape & spacing base classes — modules opt into these for buttons/cards so
   the global Shape & spacing settings (radius, button shape, density,
   container width) flow through without each module repeating its own rules.
   — .v2-btn         primary CTA, uses --v2-btn-* triple (bg/color/border/radius)
   — .v2-btn--ghost  secondary CTA, transparent w/ text-color border
   — .v2-card        any elevated/bordered card surface
   — .v2-container   page-width wrapper, respects --v2-content-max-width */
.v2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-weight: 600; font-size: 0.95rem;
  background: var(--v2-btn-bg, var(--v2-accent));
  color: var(--v2-btn-color, #fff);
  border: var(--v2-btn-border, none);
  border-radius: var(--v2-btn-radius, 8px);
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.v2-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.v2-btn--ghost {
  background: transparent; color: var(--v2-text);
  border: 1px solid var(--v2-border);
}
.v2-card {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 12px);
}
.v2-container {
  max-width: var(--v2-content-max-width, 1080px);
  margin: 0 auto; padding-left: 24px; padding-right: 24px;
}

/* ── Per-section spacing wrapper ──────────────────────────────────────────────
   Every module on the page is wrapped in a .v2-section div (see renderModule
   in theme-zip.ts). The wrapper carries an additional .v2-section--<spacing>
   class derived from the per-instance ModuleInstance.spacing field. Padding
   here STACKS on top of each module's intrinsic internal padding, so adjacent
   sections get a visible gap equal to the sum of their two halves. Default
   ('flush') is 0 — sections butt directly together, preserving the
   pre-existing visual for canvases saved before per-section spacing existed. */
.v2-section { padding-block: 0; /* will be overridden by the specific class */ }
.v2-section--flush       { padding-block: 0; }
.v2-section--compact     { padding-block: 16px; }
.v2-section--comfortable { padding-block: 40px; }
.v2-section--spacious    { padding-block: 80px; }

/* ── Post + page styles ──────────────────────────────────────────────── */
.v2-post, .v2-page { padding: calc(80px * var(--v2-spacing-scale, 1)) 40px; }
.v2-post__inner, .v2-page__inner { max-width: min(720px, var(--v2-content-max-width, 720px)); margin: 0 auto; }
.v2-post__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-accent); margin-bottom: 14px;
}
.v2-post__title, .v2-page__title {
  font-family: var(--v2-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 20px;
}
.v2-post__excerpt { font-size: 1.15rem; opacity: 0.6; margin: 0 0 28px; line-height: 1.6; }
.v2-post__meta {
  display: flex; gap: 16px; font-size: 0.85rem; opacity: 0.4; margin-bottom: 40px;
}
.v2-post__image, .v2-page__image {
  margin: 0 0 40px; border-radius: var(--v2-radius, 12px); width: 100%; height: auto;
}
.v2-post__content, .v2-page__content { font-size: 1.05rem; line-height: 1.8; }
.v2-post__content p, .v2-page__content p { margin: 0 0 1.4em; }
.v2-post__content h2, .v2-post__content h3 {
  font-family: var(--v2-display); margin: 2.5em 0 0.6em;
  letter-spacing: -0.02em; font-weight: 700;
}
.v2-post__content a, .v2-page__content a { color: var(--v2-accent); }
.v2-post__content img { border-radius: var(--v2-radius, 12px); margin: 2em 0; }
.v2-post__content blockquote {
  border-left: 2px solid var(--v2-accent); padding-left: 24px;
  margin: 2em 0; font-style: italic; opacity: 0.7;
}

/* Ghost required classes */
.kg-width-wide { max-width: 1040px; margin-left: auto; margin-right: auto; }
.kg-width-full {
  max-width: none; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw;
}
.kg-width-wide img, .kg-width-full img { width: 100%; height: auto; }

/* ── Blog archive (index.hbs) + baseline post-card styles ─────────────── */
.v2-archive { padding: calc(80px * var(--v2-spacing-scale, 1)) 40px; }
.v2-archive__inner { max-width: var(--v2-content-max-width, 1280px); margin: 0 auto; }
.v2-archive__head { margin-bottom: 40px; }
.v2-archive__title {
  font-family: var(--v2-display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--v2-text);
}
/* Tag / author archive lead-in header (tag.hbs, author.hbs) */
.v2-archive__taxhead {
  max-width: var(--v2-content-max-width, 1280px);
  margin: 0 auto;
  padding: calc(60px * var(--v2-spacing-scale, 1)) 0 0;
}
/* Wrap taxhead in section with side padding so max-width isn't reduced by padding */
.v2-archive__taxwrap {
  padding: 0 40px;
}
.v2-archive__taxlabel {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-accent); margin: 0 0 8px;
}
.v2-archive__taxtitle {
  font-family: var(--v2-display); font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--v2-text);
}
.v2-archive__taxdesc { font-size: 1.05rem; opacity: 0.6; margin: 12px 0 0; max-width: 640px; line-height: 1.6; }
@media (max-width: 600px) { .v2-archive__taxwrap { padding: 0 20px; } .v2-archive__taxhead { padding: 44px 0 0; } }
.v2-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .v2-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v2-archive { padding: 56px 20px; } .v2-archive__grid { grid-template-columns: 1fr; } }

/* Baseline card styles — shared by the archive and the Post Feed module so the
   archive looks right even when no Post Feed module is on the canvas. The Post
   Feed module ships layout variants (list/scroll) on top of these. */
.v2-posts__card {
  display: flex; flex-direction: column; text-decoration: none;
  color: var(--v2-text); background: var(--v2-bg-alt, rgba(127,127,127,0.04));
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius, 14px); overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.v2-posts__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.v2-posts__media { aspect-ratio: 16 / 9; overflow: hidden; background: rgba(127,127,127,0.1); }
.v2-posts__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-posts__img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v2-accent) 18%, transparent), transparent);
}
.v2-posts__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v2-posts__tag {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--v2-accent);
}
.v2-posts__title {
  font-family: var(--v2-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0; color: var(--v2-text);
}
.v2-posts__excerpt { font-size: 0.9rem; line-height: 1.55; opacity: 0.6; margin: 0; }
.v2-posts__meta {
  display: flex; gap: 12px; font-size: 0.78rem; opacity: 0.45; margin-top: auto; padding-top: 6px;
}
.v2-posts__empty { opacity: 0.5; font-size: 0.95rem; padding: 20px 0; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 48px; }
.pagination a, .pagination .page-number {
  color: var(--v2-text); opacity: 0.7; text-decoration: none; font-size: 0.9rem;
}
.pagination a:hover { opacity: 1; color: var(--v2-accent); }

/* ── 404 / not-found (default, when no 404 modules are designed) ───────── */
.v2-404 {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px;
}
.v2-404__inner { max-width: 480px; }
.v2-404__code {
  font-family: var(--v2-display); font-size: clamp(5rem, 14vw, 8rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0 0 8px;
  color: var(--v2-text); opacity: 0.15;
}
.v2-404__msg { font-size: 1.1rem; opacity: 0.55; margin: 0 0 24px; color: var(--v2-text); }
.v2-404__home { color: var(--v2-accent); text-decoration: none; font-weight: 600; }
.v2-404__home:hover { opacity: 0.8; }


/* ═══════════════════════════════════════════════════════════════════════
   header-clean -- minimal, airy, no-border header
   ═══════════════════════════════════════════════════════════════════════ */
.v2-hdr {
  position: relative;
  z-index: 100;
  background: var(--v2-bg);
}
/* Floating: becomes sticky with frosted-glass backdrop, a top gap + side
   inset so the page background shows around the bar. Non-floating gets a
   solid background — translucency only makes sense when scrolling over
   content beneath the bar. */
.v2-hdr--floating {
  position: sticky;
  top: 16px;
  padding-inline: 24px;
  background: rgba(var(--v2-bg-rgb, 255,255,255), 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.v2-hdr__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-hdr__brand {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.v2-hdr__logo {
  display: block;
  height: 36px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.v2-hdr__wordmark {
  font-family: var(--v2-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -0.02em;
}
.v2-hdr__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.v2-hdr__nav-list,
.v2-hdr .nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-hdr__nav-item,
.v2-hdr .nav li {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-hdr__link,
.v2-hdr .nav a,
.v2-hdr .nav li a,
.v2-hdr__nav-list a {
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--v2-text) 60%, transparent);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}
.v2-hdr__link:hover,
.v2-hdr .nav a:hover,
.v2-hdr .nav li a:hover,
.v2-hdr__nav-list a:hover {
  color: var(--v2-text);
  text-decoration: none;
}
.v2-hdr .nav li.nav-current a,
.v2-hdr:not(.has-dropdowns) .v2-hdr__nav-item.nav-current .v2-hdr__link {
  color: var(--v2-text);
  font-weight: 600;
}

/* Secondary navigation — bolder weight, acts as action links */
.v2-hdr__nav-list--secondary {
  gap: 20px;
  margin-left: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--v2-border);
}
.v2-hdr__nav-list--secondary a {
  color: var(--v2-text) !important;
  font-weight: 600;
  opacity: 1;
}
.v2-hdr__cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--v2-accent);
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.v2-hdr__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--v2-accent) 35%, transparent);
}
.v2-hdr__cta-outline {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-text);
  background: transparent;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--v2-text) 25%, transparent);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.v2-hdr__cta-outline:hover {
  border-color: var(--v2-text);
  background: color-mix(in srgb, var(--v2-text) 6%, transparent);
}
.v2-hdr__cta-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-text);
  text-decoration: none;
  padding: 8px 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.v2-hdr__cta-text:hover { opacity: 1; }
.v2-hdr__search {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--v2-text); opacity: 0.5;
  cursor: pointer; padding: 0;
  transition: opacity 0.15s, background 0.15s;
}
.v2-hdr__search:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--v2-text) 8%, transparent);
}
/* -- Dropdown submenu ─────────────────────────────────────────────── */
.v2-hdr__nav-item.v2-hdr__item--has-dropdown { position: relative; }
.v2-hdr__link--parent { display: inline-flex; align-items: center; gap: 5px; }
.v2-hdr__chevron { flex-shrink: 0; transition: transform 0.2s; }
.v2-hdr__item--has-dropdown:hover .v2-hdr__chevron,
.v2-hdr__item--has-dropdown:focus-within .v2-hdr__chevron { transform: rotate(180deg); }
.v2-hdr__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 200;
}
.v2-hdr__dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.v2-hdr__item--has-dropdown:hover .v2-hdr__dropdown,
.v2-hdr__item--has-dropdown:focus-within .v2-hdr__dropdown {
  display: block;
}
.v2-hdr__dropdown-item { list-style: none; margin: 0; padding: 0; }
.v2-hdr__dropdown-link {
  display: block;
  padding: 8px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--v2-text);
  text-decoration: none;
  opacity: 0.7;
  border-radius: calc(var(--v2-radius, 10px) - 6px);
  white-space: nowrap;
  transition: background 0.1s, opacity 0.1s;
}
.v2-hdr__dropdown-link:hover {
  background: rgba(var(--v2-text-rgb, 0,0,0), 0.06);
  opacity: 1;
}
@media (max-width: 640px) {
  .v2-hdr__inner    { padding: 16px 20px; }
  .v2-hdr--floating { padding-inline: 12px; top: 10px; }
}

/* ── Hamburger button — hidden on desktop, shown on mobile ───────────────── */
.v2-hdr__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--v2-text); border-radius: 10px;
  transition: background 0.15s;
}
.v2-hdr__burger:hover { background: color-mix(in srgb, var(--v2-text) 8%, transparent); }
.v2-hdr__burger svg { display: block; }

/* ── Mobile: collapse the inline nav into a toggleable panel ─────────────────
   At ≤768px the full nav row (links + CTAs + search) no longer fits beside the
   brand, so we hide it behind the hamburger and drop it as a full-width panel
   below the bar. main.js toggles .js-nav-open on the <header>. With JS off the
   panel simply stays closed — no overflow, graceful degradation. */
@media (max-width: 768px) {
  .v2-hdr__burger { display: inline-flex; }
  .v2-hdr__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 12px 20px 20px;
    background: var(--v2-bg);
    border-top: 1px solid var(--v2-border);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    z-index: 200;
  }
  .v2-hdr.js-nav-open .v2-hdr__nav { display: flex; }
  /* .v2-hdr__nav scope raises specificity above the inline <style> the deployed
     header ships (which pins the list to a centered 28px-gap row). */
  .v2-hdr__nav .v2-hdr__nav-list,
  .v2-hdr .nav {
    flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  }
  .v2-hdr__nav .v2-hdr__nav-item,
  .v2-hdr .nav li { width: 100%; }
  .v2-hdr__link,
  .v2-hdr .nav a,
  .v2-hdr__nav-list a { display: block; width: 100%; padding: 10px 0; font-size: 0.95rem; }
  .v2-hdr__cta,
  .v2-hdr__cta-outline { display: block; width: 100%; text-align: center; margin-top: 6px; }
  .v2-hdr__cta-text { display: block; width: 100%; padding: 10px 0; }
  .v2-hdr__search { align-self: flex-start; margin-top: 4px; }
  /* Submenus render inline (expanded) inside the panel — hover doesn't work on
     touch. Higher specificity (.v2-hdr__nav scope) beats the inline <style>
     display:none the deployed header ships. */
  .v2-hdr__nav .v2-hdr__dropdown {
    position: static; display: block;
    min-width: 0; padding: 0 0 4px 12px;
    background: transparent; border: none; box-shadow: none;
  }
  .v2-hdr__nav .v2-hdr__dropdown::before { display: none; }
}


/* hero-gradient */
.v2-hero-grad {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff;
}

/* Heights */
.v2-hero-grad--h-auto         { min-height: auto; }
.v2-hero-grad--h-auto .v2-hero-grad__inner { padding: 60px 40px; }
.v2-hero-grad--h-half          { min-height: max(50dvh, 400px); }
.v2-hero-grad--h-three-quarter { min-height: max(75dvh, 560px); }
.v2-hero-grad--h-full          { min-height: max(calc(100dvh - var(--v2-header-h, 68px)), 640px); }

/* Animated gradient — oversized to prevent edge visibility during animation */
.v2-hero-grad__bg {
  position: absolute; inset: -80%; width: 360%; height: 360%;
  background: linear-gradient(135deg,
    var(--v2-accent) 0%,
    color-mix(in srgb, var(--v2-accent) 60%, #a855f7) 25%,
    color-mix(in srgb, var(--v2-accent) 40%, #ec4899) 50%,
    color-mix(in srgb, var(--v2-accent) 70%, #3b82f6) 75%,
    var(--v2-accent) 100%);
  animation: v2-grad-shift 12s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes v2-grad-shift {
  0%   { transform: translate(0%,0%) rotate(0deg); }
  100% { transform: translate(-15%,-10%) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero-grad__bg { animation: none; }
}

/* Background image overlay */
.v2-hero-grad__bg-img {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover;
  opacity: 0.3; mix-blend-mode: overlay;
}
.v2-hero-grad__bg-img.v2-focus--center      { background-position: center; }
.v2-hero-grad__bg-img.v2-focus--top         { background-position: top; }
.v2-hero-grad__bg-img.v2-focus--bottom      { background-position: bottom; }
.v2-hero-grad__bg-img.v2-focus--left        { background-position: left center; }
.v2-hero-grad__bg-img.v2-focus--right       { background-position: right center; }
.v2-hero-grad__bg-img.v2-focus--top-left    { background-position: left top; }
.v2-hero-grad__bg-img.v2-focus--top-right   { background-position: right top; }
.v2-hero-grad__bg-img.v2-focus--bottom-left { background-position: left bottom; }
.v2-hero-grad__bg-img.v2-focus--bottom-right{ background-position: right bottom; }

/* Grain */
.v2-hero-grad__grain {
  position: absolute; inset: 0; z-index: 2; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; pointer-events: none;
}

/* Darkening overlay */
.v2-hero-grad__overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.v2-hero-grad--ov-light  .v2-hero-grad__overlay { background: rgba(0,0,0,0.15); }
.v2-hero-grad--ov-medium .v2-hero-grad__overlay { background: rgba(0,0,0,0.30); }
.v2-hero-grad--ov-heavy  .v2-hero-grad__overlay { background: rgba(0,0,0,0.50); }

/* Centered layout (default) */
.v2-hero-grad--centered .v2-hero-grad__inner {
  position: relative; z-index: 4;
  max-width: 780px; text-align: center; padding: 120px 40px;
}
.v2-hero-grad--centered .v2-hero-grad__sub { margin: 0 auto 40px; }

/* Left layout */
.v2-hero-grad--left .v2-hero-grad__inner {
  position: relative; z-index: 4;
  width: 100%; max-width: 1280px; margin: 0 auto;
  text-align: left; padding: 120px 40px;
}
.v2-hero-grad--left .v2-hero-grad__sub { margin: 0 0 40px; }
.v2-hero-grad--left .v2-hero-grad__actions { justify-content: flex-start; }

/* Split layout */
.v2-hero-grad--split { align-items: stretch; }
.v2-hero-grad__split-row {
  position: relative; z-index: 4;
  display: flex; align-items: stretch;
  width: 100%; min-height: inherit;
}
.v2-hero-grad__split-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 48px 80px 64px; text-align: left;
  max-width: 640px; margin-left: auto;
}
.v2-hero-grad__split-text .v2-hero-grad__sub { margin: 0 0 36px; }
.v2-hero-grad__split-text .v2-hero-grad__actions { justify-content: flex-start; }
.v2-hero-grad__split-media {
  background-color: rgba(255,255,255,0.08);
  background-size: cover;
  background-position: center;
  border-radius: 0;
}
.v2-hero-grad--ratio-50-50 .v2-hero-grad__split-text { flex: 1; }
.v2-hero-grad--ratio-50-50 .v2-hero-grad__split-media { flex: 1; }
.v2-hero-grad--ratio-40-60 .v2-hero-grad__split-text { flex: 2; }
.v2-hero-grad--ratio-40-60 .v2-hero-grad__split-media { flex: 3; }
.v2-hero-grad--ratio-60-40 .v2-hero-grad__split-text { flex: 3; }
.v2-hero-grad--ratio-60-40 .v2-hero-grad__split-media { flex: 2; }

/* Badge */
.v2-hero-grad__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 6px 16px; margin-bottom: 28px;
}

/* Headline */
.v2-hero-grad__h1 {
  font-family: var(--v2-display);
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 800; letter-spacing: -0.035em;
  line-height: 1.0; margin: 0 0 24px;
  white-space: pre-line;
}

/* Subheading */
.v2-hero-grad__sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65; opacity: 0.8;
  max-width: 560px; margin: 0 auto 40px;
}

/* Buttons */
.v2-hero-grad__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.v2-hero-grad__btn-primary {
  font-size: 0.9375rem; font-weight: 600;
  color: var(--v2-accent); background: #fff;
  padding: 14px 32px; border-radius: 999px;
  text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
}
.v2-hero-grad__btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.v2-hero-grad__btn-ghost {
  font-size: 0.9375rem; font-weight: 500;
  color: #fff; background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  padding: 13px 28px; border-radius: 999px;
  text-decoration: none; transition: border-color 0.2s, background 0.2s;
}
.v2-hero-grad__btn-ghost:hover {
  border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08);
}

@media (max-width: 768px) {
  .v2-hero-grad__inner { padding: 80px 24px !important; }
  .v2-hero-grad__split-row { flex-direction: column; }
  .v2-hero-grad__split-text { padding: 60px 24px; }
  .v2-hero-grad__split-media { min-height: 280px; }
  .v2-hero-grad__actions { flex-direction: column; }
  .v2-hero-grad__btn-primary,
  .v2-hero-grad__btn-ghost { width: 100%; text-align: center; }
}

/* image fit/focus — object-fit for <img>, background-size for bg elements */
.v2-fit-img { width: 100%; height: 100%; }
.v2-fit-img.v2-fit--fill    { object-fit: cover; }
.v2-fit-img.v2-fit--fit     { object-fit: contain; }
.v2-fit-img.v2-fit--stretch { object-fit: fill; }
.v2-fit-bg.v2-fit--fill     { background-size: cover; }
.v2-fit-bg.v2-fit--fit      { background-size: contain; background-repeat: no-repeat; }
.v2-fit-bg.v2-fit--stretch  { background-size: 100% 100%; }
.v2-fit--fill.v2-focus--center, .v2-fit--fit.v2-focus--center,
.v2-focus--center { object-position: center center; background-position: center center; }
.v2-focus--top    { object-position: center top;    background-position: center top; }
.v2-focus--bottom { object-position: center bottom; background-position: center bottom; }
.v2-focus--left   { object-position: left center;   background-position: left center; }
.v2-focus--right  { object-position: right center;  background-position: right center; }
.v2-focus--top-left     { object-position: left top;     background-position: left top; }
.v2-focus--top-right    { object-position: right top;    background-position: right top; }
.v2-focus--bottom-left  { object-position: left bottom;  background-position: left bottom; }
.v2-focus--bottom-right { object-position: right bottom; background-position: right bottom; }



/* ═══════════════════════════════════════════════════════════════════════
   posts-feed — all layout variants
   ═══════════════════════════════════════════════════════════════════════ */
.v2-posts { padding: 80px 40px; background: var(--v2-bg); }
.v2-posts__inner { max-width: var(--v2-content-max-width, 1280px); margin: 0 auto; }
.v2-posts__heading {
  font-family: var(--v2-display); font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em; color: var(--v2-text); margin: 0 0 8px;
}
.v2-posts__subhead { font-size: 1.05rem; color: var(--v2-text); opacity: 0.55; margin: 0 0 36px; }
.v2-posts__heading ~ .v2-posts__track,
.v2-posts__subhead ~ .v2-posts__track { margin-top: 36px; }

/* ── Base card ───────────────────────────────────────────────────────── */
.v2-posts__card {
  display: flex; flex-direction: column; text-decoration: none;
  color: var(--v2-text); background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 14px);
  overflow: hidden;
  box-shadow: var(--v2-shadow, none);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.v2-posts__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
}
.v2-posts__media {
  position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: rgba(127,127,127,0.1);
}
.v2-posts__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-posts__img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v2-accent) 18%, transparent), transparent);
}
.v2-posts__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v2-posts__title {
  font-family: var(--v2-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0; color: var(--v2-text);
}
.v2-posts__excerpt { font-size: 0.9rem; line-height: 1.55; opacity: 0.6; margin: 0; }
.v2-posts__meta {
  display: flex; gap: 12px; font-size: 0.78rem; opacity: 0.45; margin-top: auto; padding-top: 6px;
  flex-wrap: wrap;
}
.v2-posts__empty { opacity: 0.5; font-size: 0.95rem; padding: 20px 0; }

/* Archive pagination (rendered by {{pagination}} on index/tag/author) */
.v2-posts__pagination { margin-top: 48px; }
.v2-posts__pagination .pagination {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.v2-posts__pagination a, .v2-posts__pagination .page-number {
  color: var(--v2-text); opacity: 0.7; text-decoration: none; font-size: 0.9rem;
}
.v2-posts__pagination a:hover { opacity: 1; color: var(--v2-accent); }

/* ── Tags wrapper ────────────────────────────────────────────────────────
   Multi-tag mode renders 2+ chips in a flex row. Single-tag mode also goes
   through the wrap, so the layout & spacing rules are identical regardless
   of count. The wrap is the thing CSS sizes/positions; individual chips
   inside it stay simple inline-flex pills. */
.v2-posts__tags-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  margin: 0;
}
/* Empty wraps shouldn't reserve space (matters when the user picks 'none'
   for tagDisplay but the wrap div was rendered as a placeholder). */
.v2-posts__tags-wrap:empty { display: none; }
/* On-image wrap is absolute-positioned over the feature image so multiple
   pills stack from top-left without overlapping or pushing the image. */
.v2-posts__tags-wrap--on-image {
  position: absolute; top: 10px; left: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
}
/* text-above / text-below tag chips use display: block individually but
   the wrap puts them inline-row so multiple labels separate cleanly. */
.v2-posts__tags-wrap > .v2-posts__tag--text-above,
.v2-posts__tags-wrap > .v2-posts__tag--text-below {
  display: inline-flex;
}
/* Visual separator dot between multiple text-style tags */
.v2-posts__tags-wrap > .v2-posts__tag--text-above + .v2-posts__tag--text-above::before,
.v2-posts__tags-wrap > .v2-posts__tag--text-below + .v2-posts__tag--text-below::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.4;
}

/* ── Tag display variants ────────────────────────────────────────────── */

/* pill-on-image: badge overlaid on the image — positioning lives on the
   wrap so it can hold multiple pills stacking horizontally; the chip itself
   only needs the visual pill styling. */
.v2-posts__tag--pill-on-image {
  display: inline-flex;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #fff;
  background: var(--tag-color, var(--v2-accent));
  padding: 3px 10px; border-radius: 999px;
}

/* pill-below: accent-tinted pill just above the title (inside .body) */
.v2-posts__tag--pill-below {
  display: inline-flex; align-self: flex-start;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tag-color, var(--v2-accent));
  background: color-mix(in srgb, var(--tag-color, var(--v2-accent)) 12%, transparent);
  padding: 3px 10px; border-radius: 999px;
}

/* text-above: small muted uppercase label above the title */
.v2-posts__tag--text-above {
  display: block;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tag-color, var(--v2-accent)); opacity: 0.85;
}

/* text-below: same as above but sits below the title */
.v2-posts__tag--text-below {
  display: block;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tag-color, var(--v2-text)); opacity: 0.45;
}

/* light variant for overlay cards */
.v2-posts__tag--light {
  display: inline-flex;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.75);
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

/* ── Paid/members badge ──────────────────────────────────────────────── */
/* Icon sized in 1em so it always matches the badge text's font-size exactly
   -- same convention as .v2-posts__tag-icon svg for special tags, rather
   than a hardcoded pixel size that could drift from the surrounding text.
   Solid fill (not a tinted/translucent background) using --v2-accent --
   the site's Ghost Admin → Brand → Accent color -- so the badge reads as
   a clear, high-contrast "Premium" marker matching Ghost's own accent. */
.v2-posts__lock-icon { display: block; position: relative; top: 1px; flex-shrink: 0; width: 1em; height: 1em; }
.v2-posts__paid {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 2px;
}
.v2-posts__paid--icon {
  color: var(--v2-accent);
}
.v2-posts__paid--pill {
  color: #fff;
  background: var(--v2-accent);
  padding: 3px 10px; border-radius: 999px;
}
.v2-posts__paid--text {
  color: var(--v2-accent);
}
.v2-posts__paid-wrap--image {
  position: absolute; top: 10px; right: 10px;
  z-index: 1;
}

/* ── Overlay card ────────────────────────────────────────────────────── */
.v2-posts__card--overlay {
  position: relative; overflow: hidden;
  background-color: #111; background-size: cover; background-position: center;
  border: none; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff;
  transition: transform 0.2s;
}
.v2-posts__card--overlay:hover { transform: scale(1.01); }
.v2-posts__overlay-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.35) 50%, transparent 100%);
  pointer-events: none;
}
.v2-posts__overlay-body {
  position: relative; z-index: 1;
  padding: 28px; display: flex; flex-direction: column; gap: 8px;
}
.v2-posts__title--light { color: #fff; font-size: 1.35rem; }
.v2-posts__excerpt--light { color: rgba(255,255,255,0.7); opacity: 1; font-size: 0.9rem; }
.v2-posts__meta--light  { color: rgba(255,255,255,0.6); opacity: 1; }

/* ── Compact card ────────────────────────────────────────────────────── */
.v2-posts__card--compact {
  display: flex; flex-direction: row; align-items: center;
  border: none; border-radius: 0; background: transparent; box-shadow: none;
  border-bottom: 1px solid var(--v2-border);
  padding: 16px 0; transition: opacity 0.15s;
}
.v2-posts__card--compact:first-child { border-top: 1px solid var(--v2-border); }
.v2-posts__card--compact:hover { opacity: 0.75; transform: none; border-color: var(--v2-border); }
.v2-posts__compact-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.v2-posts__card--compact .v2-posts__title { font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT TRACKS
   ══════════════════════════════════════════════════════════════════════ */

/* ── Grid ─────────────────────────────────────────────────────────────── */
.v2-posts--grid .v2-posts__track { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.v2-posts--grid[data-cols="2"] .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
.v2-posts--grid[data-cols="3"] .v2-posts__track { grid-template-columns: repeat(3, 1fr); }
.v2-posts--grid[data-cols="4"] .v2-posts__track { grid-template-columns: repeat(4, 1fr); }

/* ── List ─────────────────────────────────────────────────────────────── */
.v2-posts--list .v2-posts__track { display: flex; flex-direction: column; gap: 20px; }
.v2-posts--list .v2-posts__card  { flex-direction: row; align-items: stretch; }
.v2-posts--list .v2-posts__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 160px; }
.v2-posts--list .v2-posts__body  { justify-content: center; }
.v2-posts--list .v2-posts__title { font-size: 1.35rem; }

/* ── List compact ─────────────────────────────────────────────────────── */
.v2-posts--list-compact .v2-posts__track { display: flex; flex-direction: column; }

/* ── Horizontal scroll ────────────────────────────────────────────────── */
.v2-posts--scroll .v2-posts__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; -webkit-overflow-scrolling: touch;
}
.v2-posts--scroll .v2-posts__card { flex: 0 0 300px; scroll-snap-align: start; }
.v2-posts--scroll .v2-posts__track::-webkit-scrollbar { height: 6px; }
.v2-posts--scroll .v2-posts__track::-webkit-scrollbar-thumb {
  background: var(--v2-border); border-radius: 999px;
}

/* ── Bento 3: 1 large left (2-row tall) + 2 small right ──────────────── */
.v2-posts--bento-3 .v2-posts__track {
  display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto; gap: 20px;
}
.v2-posts--bento-3 .v2-posts__track > :first-child { grid-row: 1 / 3; min-height: 440px; }

/* ── Bento 4: 1 full-width hero + 3 below ────────────────────────────── */
.v2-posts--bento-4 .v2-posts__track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.v2-posts__card--bento-hero { grid-column: 1 / -1; min-height: 380px; }

/* ── Bento 5: 1 large left + 2×2 right ───────────────────────────────── */
.v2-posts--bento-5 .v2-posts__track {
  display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px;
}
.v2-posts--bento-5 .v2-posts__track > :first-child { grid-row: 1 / 3; min-height: 480px; }
.v2-posts--bento-5 .v2-posts__track > :nth-child(2) { grid-column: 2; grid-row: 1; }
.v2-posts--bento-5 .v2-posts__track > :nth-child(3) { grid-column: 2; grid-row: 2; }

/* ── Magazine ─────────────────────────────────────────────────────────── */
.v2-posts--magazine .v2-posts__track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.v2-posts__card--magazine-lead { grid-column: 1 / -1; min-height: 440px; border-radius: var(--v2-radius, 14px); }
.v2-posts--magazine .v2-posts__card--compact {
  padding: 20px 16px; border-radius: var(--v2-radius, 10px);
  background: var(--v2-bg-card); border: 1px solid var(--v2-border);
  transition: border-color 0.15s;
}
.v2-posts--magazine .v2-posts__card--compact:hover {
  opacity: 1; border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
}

/* ── Masonry ──────────────────────────────────────────────────────────── */
.v2-posts--masonry .v2-posts__track { columns: 3; column-gap: 24px; }
.v2-posts--masonry .v2-posts__card { break-inside: avoid; margin-bottom: 24px; display: inline-flex; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .v2-posts--bento-5 .v2-posts__track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .v2-posts--grid .v2-posts__track,
  .v2-posts--grid[data-cols="3"] .v2-posts__track,
  .v2-posts--grid[data-cols="4"] .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
  .v2-posts--bento-3 .v2-posts__track { grid-template-columns: 1fr 1fr; }
  .v2-posts--bento-3 .v2-posts__track > :first-child { grid-row: auto; min-height: 280px; grid-column: 1 / -1; }
  .v2-posts--bento-4 .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
  .v2-posts__card--bento-hero { min-height: 300px; }
  .v2-posts--bento-5 .v2-posts__track { grid-template-columns: 1fr; grid-template-rows: auto; }
  .v2-posts--bento-5 .v2-posts__track > :first-child { grid-row: auto; min-height: 280px; }
  .v2-posts--bento-5 .v2-posts__track > :nth-child(2),
  .v2-posts--bento-5 .v2-posts__track > :nth-child(3) { grid-column: auto; grid-row: auto; }
  .v2-posts--magazine .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
  .v2-posts--masonry .v2-posts__track { columns: 2; }
}
@media (max-width: 600px) {
  .v2-posts { padding: 56px 20px; }
  .v2-posts--grid .v2-posts__track,
  .v2-posts--grid[data-cols="2"] .v2-posts__track,
  .v2-posts--grid[data-cols="3"] .v2-posts__track,
  .v2-posts--grid[data-cols="4"] .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--list .v2-posts__card  { flex-direction: column; }
  .v2-posts--list .v2-posts__media { flex: auto; aspect-ratio: 16 / 9; }
  .v2-posts--scroll .v2-posts__card { flex: 0 0 260px; }
  .v2-posts--bento-3 .v2-posts__track,
  .v2-posts--bento-4 .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--bento-4 .v2-posts__track > :not(:first-child) { display: none; }
  .v2-posts--magazine .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--magazine .v2-posts__card--compact:nth-child(n+4) { display: none; }
  .v2-posts--masonry .v2-posts__track { columns: 1; }
}

/* ── Special tag badges ────────────────────────────────────────────────── */
/* Special tags inherit .v2-posts__tag pill/text styling. These rules add
   the icon element, size modifiers, and positioned wrappers. */
.v2-posts__tag--special { gap: 4px; }
/* font-size reads --icon-scale, set inline per-badge by specialTagBadgeHbs/
   specialTagBadgePreview from the user's "Tag N icon size" setting. Falls
   back to 0.85em (the old fixed value) for any icon usage that doesn't set
   the variable, e.g. the paid-badge lock icon. */
.v2-posts__tag-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--icon-scale, 0.85em); line-height: 1; flex-shrink: 0;
}
.v2-posts__tag-icon svg { width: 1em; height: 1em; }
/* Size modifiers */
.v2-posts__tag--special-sm { font-size: 0.6rem; padding: 2px 7px; }
.v2-posts__tag--special-lg { font-size: 0.85rem; padding: 5px 14px; }
/* Wrap — positioned container for special tags */
.v2-posts__stag-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  z-index: 2;
}
.v2-posts__stag-wrap:empty { display: none; }
/* Image overlay positions */
.v2-posts__stag-wrap--top-left {
  position: absolute; top: 10px; left: 10px;
}
.v2-posts__stag-wrap--top-right {
  position: absolute; top: 10px; right: 10px;
}
/* Body positions */
.v2-posts__stag-wrap--above-title,
.v2-posts__stag-wrap--below-title {
  position: relative;
}
/* Fallback for image positions on no-image cards */
.v2-posts__body > .v2-posts__stag-wrap--top-left,
.v2-posts__body > .v2-posts__stag-wrap--top-right {
  position: relative; top: auto; left: auto; right: auto;
}


/* cta-band */
.v2-ctaband--plain  { padding: 96px 40px; background: var(--v2-bg); }
.v2-ctaband--card,
.v2-ctaband--filled { padding: 40px 40px; background: var(--v2-bg); }

.v2-ctaband__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 40px;
  flex-wrap: wrap;
}
.v2-ctaband--card .v2-ctaband__inner {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 16px);
  padding: 40px 48px;
}
.v2-ctaband--filled .v2-ctaband__inner {
  background: var(--v2-accent);
  border-radius: var(--v2-radius, 16px);
  padding: 40px 48px;
}
.v2-ctaband--filled .v2-ctaband__heading { color: #fff; }
.v2-ctaband--filled .v2-ctaband__sub     { color: rgba(255,255,255,0.75); }
.v2-ctaband--filled .v2-ctaband__btn-primary {
  background: #fff; color: var(--v2-accent);
}
.v2-ctaband--filled .v2-ctaband__btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.45);
}
.v2-ctaband--filled .v2-ctaband__btn-ghost:hover {
  background: rgba(255,255,255,0.12); border-color: #fff;
}

.v2-ctaband__text { flex: 1; min-width: 0; }
.v2-ctaband__heading {
  font-family: var(--v2-display);
  font-size: clamp(1.35rem, 2.5vw, 1.875rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--v2-text); margin: 0;
}
.v2-ctaband__sub {
  font-size: 0.9375rem; color: var(--v2-text);
  opacity: 0.55; margin: 8px 0 0; line-height: 1.55;
}
.v2-ctaband__actions {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.v2-ctaband__btn-primary {
  display: inline-flex; align-items: center;
  padding: 11px 24px; font-size: 0.9rem; font-weight: 600;
  background: var(--v2-accent); color: #fff;
  border-radius: var(--v2-btn-radius, 8px);
  text-decoration: none; white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.18s;
}
.v2-ctaband__btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--v2-accent) 30%, transparent);
}
.v2-ctaband__btn-ghost {
  display: inline-flex; align-items: center;
  padding: 10px 22px; font-size: 0.9rem; font-weight: 600;
  background: transparent; color: var(--v2-text);
  border: 1.5px solid var(--v2-border);
  border-radius: var(--v2-btn-radius, 8px);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.18s, color 0.18s;
}
.v2-ctaband__btn-ghost:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

@media (max-width: 640px) {
  .v2-ctaband--plain,
  .v2-ctaband--card,
  .v2-ctaband--filled { padding-inline: 20px; }
  .v2-ctaband--card .v2-ctaband__inner,
  .v2-ctaband--filled .v2-ctaband__inner { padding: 28px 24px; }
  .v2-ctaband__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}


.v2-ftr { border-top: 1px solid var(--v2-border); padding: 64px 40px 32px; background: var(--v2-bg); }
.v2-ftr__inner { max-width: 1100px; margin: 0 auto; }
.v2-ftr__grid {
  display: grid;
  gap: 56px;
  margin-bottom: 48px;
}
/* Two-column layout (socials toggle OFF): brand takes most of the row,
   secondary nav alongside. */
.v2-ftr__grid--2col { grid-template-columns: 2fr 1fr; }
/* Three-column layout (socials toggle ON): brand + nav + socials. With up to
   nine icons in the socials column, give it slightly more room than the nav
   column so a five-or-more-icon row doesn't wrap awkwardly. */
.v2-ftr__grid--3col { grid-template-columns: 2fr 1fr 1.4fr; }

.v2-ftr__brand { display: flex; flex-direction: column; gap: 16px; }
.v2-ftr__logo {
  display: block;
  height: 32px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.v2-ftr__wordmark { font-family: var(--v2-display); font-size: 1.1rem; font-weight: 700; color: var(--v2-text); }
.v2-ftr__desc { font-size: 0.9rem; line-height: 1.6; color: var(--v2-text); opacity: 0.5; margin: 0; max-width: 300px; }
.v2-ftr__col-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--v2-text); opacity: 0.4; margin: 0 0 18px; }
.v2-ftr__col-links { display: flex; flex-direction: column; gap: 12px; }
.v2-ftr__col-links a { font-size: 0.875rem; color: var(--v2-text); opacity: 0.65; text-decoration: none; transition: opacity 0.2s; }
.v2-ftr__col-links a:hover { opacity: 1; }

/* Socials column: icon row. Each icon is a 36px hit area with the SVG sized
   18px inside, so the touch target is comfortable but the icon stays small.
   With up to 9 icons possible, flex-wrap lets them spill onto a second row
   on narrower columns rather than overflowing. */
.v2-ftr__socials { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-ftr__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--v2-text); opacity: 0.65;
  text-decoration: none;
  border: 1px solid var(--v2-border);
  background: transparent;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.v2-ftr__social:hover {
  opacity: 1;
  color: var(--v2-accent);
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
  background: color-mix(in srgb, var(--v2-accent) 8%, transparent);
}
.v2-ftr__social svg { width: 18px; height: 18px; display: block; fill: currentColor; }

/* Collapse the socials column entirely when the user has no accounts set in
   Ghost. {{#social_accounts @site}} simply yields nothing in that case, so
   .v2-ftr__socials ends up truly empty (no whitespace text node either, as
   long as we keep the iteration helper inline with no surrounding spaces).
   The :has(:empty) combo collapses the surrounding column so the grid track
   disappears. :has() is supported in all modern browsers (Chromium 105+,
   Safari 15.4+, Firefox 121+); on older browsers the worst case is an empty
   Follow header, a cosmetic degradation rather than a functional break. */
.v2-ftr__col--socials:has(.v2-ftr__socials:empty) { display: none; }

.v2-ftr__newsletter { margin-top: 8px; }
.v2-ftr__nl-heading { font-size: 0.8rem; font-weight: 600; color: var(--v2-text); opacity: 0.7; margin: 0 0 10px; }
.v2-ftr__nl-form { display: flex; gap: 6px; max-width: 280px; }
.v2-ftr__nl-input { flex: 1; padding: 9px 14px; font-size: 0.8125rem; border: 1px solid var(--v2-border); border-radius: 8px; background: transparent; color: var(--v2-text); font-family: inherit; outline: none; }
.v2-ftr__nl-input:focus { border-color: var(--v2-accent); }
.v2-ftr__nl-btn {
  padding: 9px 18px;
  font-size: 0.8125rem; font-weight: 600; font-family: inherit;
  border: var(--v2-btn-border, none);
  border-radius: var(--v2-btn-radius, 8px);
  background: var(--v2-btn-bg, var(--v2-accent));
  color: var(--v2-btn-color, #fff);
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}
.v2-ftr__nl-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.v2-ftr__bottom { padding-top: 24px; border-top: 1px solid var(--v2-border); }
.v2-ftr__copy { font-size: 0.775rem; color: var(--v2-text); opacity: 0.35; }
@media (max-width: 768px) {
  .v2-ftr { padding: 48px 20px 24px; }
  .v2-ftr__grid--2col,
  .v2-ftr__grid--3col { grid-template-columns: 1fr; gap: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   post-header — all variants
   ═══════════════════════════════════════════════════════════════════════ */
.v2-ph { background: var(--v2-bg); }
.v2-ph__inner { max-width: var(--v2-content-max-width, 1080px); margin: 0 auto; padding: 40px 40px 40px; }
.v2-ph__inner--centered { text-align: center; display: flex; flex-direction: column; align-items: center; }

.v2-ph__tag {
  display: inline-flex; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-accent); text-decoration: none; margin-bottom: 16px;
}
.v2-ph__tag:hover { opacity: 0.75; }

.v2-ph__title {
  font-family: var(--v2-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
  color: var(--v2-text); margin: 0 0 20px; max-width: 800px;
}
.v2-ph__inner--centered .v2-ph__title { margin-inline: auto; }

.v2-ph__excerpt {
  font-size: 1.125rem; line-height: 1.65;
  color: var(--v2-text); opacity: 0.6;
  margin: 0 0 24px; max-width: 640px;
}
.v2-ph__inner--centered .v2-ph__excerpt { margin-inline: auto; }

.v2-ph__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.875rem; color: var(--v2-text); opacity: 0.5;
}
.v2-ph__inner--centered .v2-ph__meta { justify-content: center; }
.v2-ph__author {
  display: flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none; opacity: 0.7; font-weight: 500;
}
.v2-ph__author:hover { opacity: 1; }
.v2-ph__author-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.v2-ph__author-placeholder {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--v2-accent) 20%, transparent);
}
.v2-ph__date, .v2-ph__reading { font-size: 0.875rem; }

/* ── Cover image (shared) ──────────────────────────────────────────── */
.v2-ph__cover-img {
  display: block; width: 100%; height: auto; max-height: 520px;
  object-fit: cover;
}
/* Shared placeholder for preview */
.v2-ph__cover-placeholder {
  width: 100%; height: 100%;
  min-height: 300px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--v2-accent) 12%, var(--v2-bg-card)),
    color-mix(in srgb, var(--v2-accent) 5%, var(--v2-bg-card)));
  border: 1px dashed var(--v2-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--v2-text);
}

/* ── Variant: Centered ─────────────────────────────────────────────── */
.v2-ph--centered .v2-ph__cover-wrap {
  max-width: var(--v2-content-max-width, 1080px); margin: 0 auto;
  padding: 0 40px 40px; overflow: hidden;
}
.v2-ph--centered .v2-ph__cover-wrap .v2-ph__cover-img { border-radius: var(--v2-radius, 12px); }
.v2-ph--centered .v2-ph__cover-wrap .v2-ph__cover-placeholder { border-radius: var(--v2-radius, 12px); min-height: 380px; }

/* ── Variant: Left / Side-by-side ─────────────────────────────────── */
.v2-ph--left .v2-ph__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 40px;
}
.v2-ph--left .v2-ph__cover-side { overflow: hidden; border-radius: var(--v2-radius, 12px); }
.v2-ph--left .v2-ph__cover-side .v2-ph__cover-img { border-radius: var(--v2-radius, 12px); max-height: 460px; }
.v2-ph--left .v2-ph__cover-side .v2-ph__cover-placeholder { border-radius: var(--v2-radius, 12px); min-height: 360px; }

/* ── Variant: Cover Overlay ────────────────────────────────────────── */
.v2-ph--overlay .v2-ph__hero-wrap {
  position: relative; min-height: 380px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.v2-ph--overlay .v2-ph__hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.v2-ph__hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
}
.v2-ph__hero-gradient--preview {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--v2-accent) 60%, #0a0a14),
    color-mix(in srgb, var(--v2-accent) 25%, #0a0a14));
}
.v2-ph--overlay .v2-ph__hero-content {
  position: relative; z-index: 1;
  max-width: var(--v2-content-max-width, 1080px);
  margin: 0 auto; padding: 48px 40px; width: 100%;
}
.v2-ph--overlay .v2-ph__title { color: #fff; max-width: 720px; }
.v2-ph--overlay .v2-ph__excerpt { color: rgba(255,255,255,0.7); }
.v2-ph--overlay .v2-ph__meta { color: rgba(255,255,255,0.6); opacity: 1; }
.v2-ph--overlay .v2-ph__author { color: rgba(255,255,255,0.75); }
.v2-ph--overlay .v2-ph__tag {
  color: #fff; background: rgba(255,255,255,0.18);
  padding: 4px 12px; border-radius: 999px;
}

/* ── Variant: Cover Above ──────────────────────────────────────────── */
.v2-ph--above .v2-ph__cover-full {
  width: 100%; overflow: hidden; max-height: 460px;
}
.v2-ph--above .v2-ph__cover-full .v2-ph__cover-img { max-height: 460px; border-radius: 0; }
.v2-ph--above .v2-ph__cover-full .v2-ph__cover-placeholder { min-height: 360px; border-radius: 0; border: none; }
.v2-ph--above .v2-ph__inner { padding-top: 48px; }

/* ── Variant: Magazine ─────────────────────────────────────────────── */
.v2-ph--magazine .v2-ph__mag-wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 480px;
}
.v2-ph--magazine .v2-ph__mag-text {
  padding: 56px 48px 56px 40px; display: flex; flex-direction: column;
  justify-content: flex-end; background: var(--v2-bg);
  border-right: 1px solid var(--v2-border);
}
.v2-ph--magazine .v2-ph__title { font-size: clamp(2.2rem, 4.5vw, 4rem); max-width: 100%; }
.v2-ph--magazine .v2-ph__mag-image { overflow: hidden; position: relative; }
.v2-ph--magazine .v2-ph__mag-image .v2-ph__cover-img { height: 100%; object-fit: cover; }
.v2-ph--magazine .v2-ph__mag-image .v2-ph__cover-placeholder {
  height: 100%; min-height: 480px; border-radius: 0; border: none; border-left: 1px dashed var(--v2-border);
  background: color-mix(in srgb, var(--v2-accent) 8%, var(--v2-bg-card));
}
.v2-ph--magazine .v2-ph__tag {
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 20px;
}

@media (max-width: 900px) {
  .v2-ph--left .v2-ph__inner { grid-template-columns: 1fr; gap: 32px; }
  .v2-ph--magazine .v2-ph__mag-wrap { grid-template-columns: 1fr; }
  .v2-ph--magazine .v2-ph__mag-image { display: none; }
  .v2-ph__inner { padding: 40px 20px 32px; }
  .v2-ph--centered .v2-ph__cover-wrap { padding: 0 20px 32px; }
  .v2-ph--overlay .v2-ph__hero-content { padding: 32px 20px; }
  .v2-ph--overlay .v2-ph__hero-wrap { min-height: 280px; }
  .v2-ph--above .v2-ph__inner { padding: 32px 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   article-body
   ═══════════════════════════════════════════════════════════════════════ */

.v2-article { background: var(--v2-bg); }
.v2-article__body { margin: 0 auto; padding: 24px 40px 80px; font-family: var(--v2-body); color: var(--v2-text); line-height: 1.8; }

.v2-article--narrow  .v2-article__body { max-width: 680px; }
.v2-article--default .v2-article__body { max-width: 760px; }
.v2-article--wide    .v2-article__body { max-width: 900px; }

.v2-article--justify .v2-article__body p,
.v2-article--justify .v2-article__body li {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Sidebar layout: both columns get their own top padding via article__body.
   The TOC column also needs matching top padding so it aligns with the text. */
.v2-article--has-sidebar {
  display: grid; gap: 0 60px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
}
.v2-article--has-sidebar .v2-article__body { padding-left: 0; padding-right: 0; }
.v2-toc--aside,
.v2-toc--aside-pinned { margin-top: 24px; }
.v2-article--sidebar-right { grid-template-columns: 1fr 260px; }
.v2-article--sidebar-left  { grid-template-columns: 260px 1fr; }
.v2-article--has-sidebar .v2-article__body { max-width: 100%; margin: 0; }
.v2-article--sidebar-right .v2-toc--aside { grid-column: 2; grid-row: 1; }
.v2-article--sidebar-right .v2-article__body  { grid-column: 1; grid-row: 1; }
.v2-article--sidebar-left  .v2-toc--aside  { grid-column: 1; grid-row: 1; }
.v2-article--sidebar-left  .v2-article__body  { grid-column: 2; grid-row: 1; }
/* In sidebar mode the article body fills its grid column — width variants are not needed */
/* Collapse grid below 900px — sidebar stacks above article on mobile */
@media (max-width: 900px) {
  .v2-article--has-sidebar { display: block; padding: 0; }
  .v2-article--has-sidebar .v2-article__body { padding-left: 40px; padding-right: 40px; }
  .v2-toc--aside { position: static !important; max-height: none !important; margin-bottom: 32px; margin-left: 40px; margin-right: 40px; }
}
@media (max-width: 600px) {
  .v2-article--has-sidebar .v2-article__body { padding-left: 20px; padding-right: 20px; }
  .v2-toc--aside { margin-left: 20px; margin-right: 20px; }
}

/* ── Typography ───────────────────────────────────────────────────── */
.v2-article__body p { margin: 0 0 1.5em; }
.v2-article__body h2, .v2-article__body h3, .v2-article__body h4 {
  font-family: var(--v2-display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--v2-text); margin: 2.5em 0 0.75em; line-height: 1.25;
}
/* The first heading in {{content}} (e.g. "Summary") shouldn't carry its
   own 2.5em top margin on top of .v2-article__body's own padding-top --
   that stacked spacing pushed the article noticeably lower than the TOC
   sidebar, which only has its own (smaller) margin-top with nothing else
   adding to it. Zeroing this makes both columns start flush at the same
   height, governed purely by .v2-article__body's padding-top. */
.v2-article__body > h2:first-child,
.v2-article__body > h3:first-child,
.v2-article__body > h4:first-child {
  margin-top: 0;
}
.v2-article__body h2 { font-size: 1.65em; }
.v2-article__body h3 { font-size: 1.3em; }
.v2-article__body h4 { font-size: 1.1em; }
.v2-article__body a  { color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; }
.v2-article__body a:hover { opacity: 0.8; }
.v2-article__body strong { font-weight: 700; }
.v2-article__body em { font-style: italic; }
.v2-article__body hr { border: none; border-top: 2px solid var(--v2-border); margin: 3em 0; }
.v2-article__body blockquote {
  border-left: 3px solid var(--v2-accent); padding: 4px 0 4px 24px;
  margin: 2em 0; font-style: italic; color: var(--v2-text); opacity: 0.7;
}
.v2-article__body ul, .v2-article__body ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.v2-article__body li { margin-bottom: 0.5em; }
.v2-article__body img { width: 100%; height: auto; display: block; border-radius: var(--v2-radius, 10px); margin: 2em 0; }
.v2-article__body pre {
  background: var(--v2-bg-card); border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 8px); padding: 20px; overflow-x: auto;
  font-size: 0.875em; line-height: 1.6; margin: 2em 0;
}
.v2-article__body code { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 0.875em; }
.v2-article__body :not(pre) > code { background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: 5px; padding: 2px 6px; }

/* Ghost Koenig embed cards — make videos fill container width.
   Ghost's own docs are explicit that .kg-embed-card ships with NO default
   sizing CSS from Ghost itself (unlike bookmark/gallery/audio/video cards,
   which get auto-injected styles via cards.min.css) -- themes are required
   to supply this, and Ghost's real markup is exactly:
     <figure class="kg-card kg-embed-card"><iframe ...></iframe></figure>
   -- no extra wrapper div. Ghost's own recommended pattern is the classic
   "fluid-width-video-wrapper" trick: the CONTAINER gets padding-top as a
   percentage to create the aspect-ratio box via padding, and the iframe is
   taken OUT of normal flow via position:absolute + inset 0 to fill it.
   Since Ghost provides no extra wrapper element, .kg-embed-card itself
   plays that role here. This is deliberately NOT the modern aspect-ratio
   property -- aspect-ratio interacts unreliably with the raw HTML
   width="" height="" attributes that Ghost's oEmbed-generated YouTube/
   Vimeo iframe ships with (computed from the embed's original pixel size
   at insertion time), which was producing a squashed iframe despite
   width:100% !important. Taking the iframe out of flow entirely sidesteps
   that interaction completely, matching Ghost's own reference implementation. */
.v2-article__body .kg-embed-card {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  margin: 2em 0;
  border-radius: var(--v2-radius, 10px);
}
.v2-article__body .kg-embed-card iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.v2-article__body .kg-video-card {
  margin: 2em 0;
}
.v2-article__body .kg-video-card video,
.v2-article__body .kg-video-card .kg-video-container {
  width: 100%;
}
.v2-article__body .kg-video-card video {
  display: block;
  border-radius: var(--v2-radius, 10px);
}
/* Ghost audio card */
.v2-article__body .kg-audio-card {
  margin: 2em 0;
  width: 100%;
}

/* Ghost bookmark card -- the rich link-preview card Ghost generates when a
   plain URL is pasted into the editor (e.g. a YouTube link, an article link).
   This is DIFFERENT from .kg-embed-card -- it has its own markup
   (kg-bookmark-container > kg-bookmark-content + kg-bookmark-thumbnail) and
   without explicit rules it was falling back to the generic
   '.v2-article__body img' width:100% rule above, which stretched the
   thumbnail to the full card width with no height constraint -- producing
   the "wide but squashed" look. Modelled on Ghost's own Casper reference
   implementation, restyled with this theme's tokens. */
.v2-article__body .kg-bookmark-card {
  width: 100%;
  position: relative;
  margin: 2em 0;
}
.v2-article__body .kg-bookmark-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  color: currentColor;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 10px);
  overflow: hidden;
  background: var(--v2-bg-card);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.v2-article__body .kg-bookmark-container:hover {
  text-decoration: none;
  border-color: var(--v2-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.v2-article__body .kg-bookmark-content {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%;
  padding: 20px;
  order: 1;
}
.v2-article__body .kg-bookmark-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--v2-text);
  margin: 0;
}
.v2-article__body .kg-bookmark-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.5em 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--v2-text);
  opacity: 0.6;
}
.v2-article__body .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.75em;
  font-size: 0.8125rem;
  color: var(--v2-text);
  opacity: 0.55;
}
.v2-article__body .kg-bookmark-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: text-bottom;
  margin-right: 0.5em;
  border-radius: 3px;
  flex-shrink: 0;
}
.v2-article__body .kg-bookmark-publisher::before {
  content: '•';
  margin: 0 0.5em;
}
/* Thumbnail column -- the part that was rendering wide+short. flex-basis
   gives it a real target width, and the nested img gets object-fit:cover
   with a fixed min-height instead of inheriting the generic
   '.v2-article__body img' width:100%/height:auto rule. */
.v2-article__body .kg-bookmark-thumbnail {
  display: flex;
  flex-basis: 24rem;
  flex-grow: 1;
  position: relative;
  min-height: 160px;
}
.v2-article__body .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  position: absolute;
  inset: 0;
}
@media (max-width: 600px) {
  .v2-article__body .kg-bookmark-container { flex-direction: column; }
  .v2-article__body .kg-bookmark-thumbnail { flex-basis: auto; height: 200px; min-height: 0; }
}

.v2-article__body .kg-width-wide  { max-width: calc(100% + 160px); margin-left: -80px; margin-right: -80px; }
.v2-article__body .kg-width-full  { max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
.v2-article__body h2[id], .v2-article__body h3[id], .v2-article__body h4[id] {
  scroll-margin-top: calc(var(--v2-header-h, 0px) + 20px);
}

/* ── Magazine variant ─────────────────────────────────────────────── */
.v2-article--magazine .v2-article__body h2 { border-left: 4px solid var(--v2-accent); padding-left: 16px; }
.v2-article--magazine .v2-article__body blockquote {
  background: color-mix(in srgb, var(--v2-accent) 6%, var(--v2-bg-card));
  border-left: 4px solid var(--v2-accent); border-radius: 0 var(--v2-radius, 8px) var(--v2-radius, 8px) 0;
  padding: 16px 20px; opacity: 1;
}

/* ── Minimal variant ──────────────────────────────────────────────── */
.v2-article--minimal .v2-article__body { line-height: 1.7; }
.v2-article--minimal .v2-article__body h2,
.v2-article--minimal .v2-article__body h3 { font-weight: 600; letter-spacing: 0; }
.v2-article--minimal .v2-article__body blockquote {
  border-left: none; padding: 0; margin: 1.5em 0;
  font-size: 1.25em; font-style: normal; font-weight: 600; opacity: 0.65; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS  (BrightThemes pattern)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hidden until JS adds is-rendered (tocbot found enough headings).
   Content hidden until is-active (open state). */
.v2-toc { display: none; font-family: var(--v2-body); font-size: 1rem; }
.v2-toc.is-rendered { display: block; }

/* ── Header ───────────────────────────────────────────────────────── */
.v2-toc__header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.v2-toc.is-active .v2-toc__header { border-bottom-color: var(--v2-border); }
.v2-toc__icon { display: flex; align-items: center; color: var(--v2-accent); opacity: 0.8; flex-shrink: 0; }
.v2-toc__label { flex: 1; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--v2-text); opacity: 0.45; }
.v2-toc__toggle { display: flex; align-items: center; background: none; border: none; cursor: pointer; color: var(--v2-text); opacity: 0.35; padding: 0; transition: opacity 0.15s, transform 0.2s; }
.v2-toc__toggle:hover { opacity: 0.6; }
.v2-toc.is-active .v2-toc__toggle { transform: rotate(180deg); opacity: 0.6; }

/* ── Content ──────────────────────────────────────────────────────── */
.v2-toc__content { display: none; padding: 8px 16px 14px; max-height: 65vh; overflow-y: auto; scrollbar-width: thin; }
.v2-toc.is-active .v2-toc__content { display: block; }

/* ── Tocbot list ──────────────────────────────────────────────────── */
.v2-toc .toc-list { list-style: none; padding: 0; margin: 0; }
.v2-toc .toc-list .toc-list { padding-left: 10px; border-left: 1px solid var(--v2-border); margin: 2px 0 2px 4px; }
.v2-toc .toc-list-item { line-height: 1.2; }
.v2-toc .toc-link {
  display: block; font-size: 0.9375rem; line-height: 1.5;
  color: var(--v2-text); opacity: 0.55; text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.15s, color 0.15s;
}
.v2-toc .toc-list .toc-list .toc-link { font-size: 0.875rem; opacity: 0.4; }
.v2-toc .toc-link:hover { opacity: 0.85; }
.v2-toc .is-active-link { opacity: 1; color: var(--v2-accent); font-weight: 600; }

/* ── Theme: card (default) ────────────────────────────────────────── */
.v2-toc { background: var(--v2-bg-card); border: 1px solid var(--v2-border); }

/* ── Theme: plain ─────────────────────────────────────────────────── */
.v2-toc--plain { background: transparent; border: none; }
.v2-toc--plain .v2-toc__label { opacity: 0.3; }
.v2-toc--plain .v2-toc__header { border-bottom-color: var(--v2-border) !important; }

/* ── Theme: accent ────────────────────────────────────────────────── */
.v2-toc--accent { background: color-mix(in srgb, var(--v2-accent) 5%, var(--v2-bg-card)); border: none; }
.v2-toc--accent .v2-toc__header { border-left: 3px solid var(--v2-accent); padding-left: 13px; }
.v2-toc--accent.is-active .v2-toc__header { border-bottom-color: color-mix(in srgb, var(--v2-accent) 25%, transparent); }
.v2-toc--accent .v2-toc__content { border-left: 3px solid color-mix(in srgb, var(--v2-accent) 25%, transparent); padding-left: 13px; }
.v2-toc--accent .v2-toc__icon { opacity: 1; }
.v2-toc--accent .v2-toc__label { color: var(--v2-accent); opacity: 0.8; }

/* ── Inline: full-width above article ─────────────────────────────── */
.v2-toc:not(.v2-toc--aside) {
  max-width: 760px; margin: 0 auto 32px;
}
.v2-article--narrow  .v2-toc:not(.v2-toc--aside) { max-width: 680px; }
.v2-article--wide    .v2-toc:not(.v2-toc--aside) { max-width: 900px; }

/* ── Sidebar sticky: follows scroll ──────────────────────────────── */
.v2-toc--aside {
  align-self: start;
  position: sticky;
  top: calc(var(--v2-header-h, 0px) + 24px);
  max-height: calc(100vh - var(--v2-header-h, 0px) - 48px);
  overflow-y: auto;
}
.v2-toc--aside .v2-toc__content { max-height: none; }

/* ── Sidebar pinned: stays beside first paragraph ─────────────────── */
/* No sticky — TOC sits statically at the top of its column.
   The article scrolls past it freely. Editorial feel. */
.v2-toc--aside-pinned {
  position: static;
  align-self: start;
}

/* Responsive */
@media (max-width: 768px) {
  .v2-article__body { padding: 20px 20px 56px; }
  .v2-toc--aside, .v2-toc--aside-pinned { margin-top: 40px; }
  .v2-article__body .kg-width-wide { max-width: 100%; margin-left: 0; margin-right: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   recommended-posts
   ═══════════════════════════════════════════════════════════════════════ */
.v2-rec { padding: 0 40px 80px; background: var(--v2-bg); }
.v2-rec__inner { max-width: var(--v2-content-max-width, 1080px); margin: 0 auto; }

.v2-rec__heading {
  font-family: var(--v2-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--v2-text); margin: 0 0 28px;
}

/* ── Cards layout ──────────────────────────────────────────────────── */
.v2-rec--cards .v2-rec__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* ── Minimal layout ────────────────────────────────────────────────── */
.v2-rec--minimal .v2-rec__grid { display: flex; flex-direction: column; gap: 0; }
.v2-rec--minimal .v2-rec__card {
  flex-direction: row; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--v2-border);
  border-radius: 0; padding: 16px 0;
  background: transparent; border-left: none; border-right: none; border-top: none;
}
.v2-rec--minimal .v2-rec__grid > .v2-rec__card:first-child { border-top: 1px solid var(--v2-border); }
.v2-rec--minimal .v2-rec__media { display: none; }
.v2-rec--minimal .v2-rec__body { padding: 0; }
.v2-rec--minimal .v2-rec__title { font-size: 0.9375rem; }

/* ── Magazine layout ───────────────────────────────────────────────── */
.v2-rec--magazine .v2-rec__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}
.v2-rec--magazine .v2-rec__card--lead {
  grid-row: 1 / span 2;
}
.v2-rec--magazine .v2-rec__card--lead .v2-rec__img { height: 280px; }
.v2-rec--magazine .v2-rec__card--lead .v2-rec__title { font-size: 1.2rem; }
.v2-rec--magazine .v2-rec__card:not(.v2-rec__card--lead) .v2-rec__media { display: none; }
.v2-rec--magazine .v2-rec__card:not(.v2-rec__card--lead) { flex-direction: row; gap: 0; }

/* ── Shared card ───────────────────────────────────────────────────── */
.v2-rec__card {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--v2-text);
  border-radius: var(--v2-radius, 12px);
  overflow: hidden;
  border: 1px solid var(--v2-border);
  background: var(--v2-bg-card);
  transition: transform 0.18s, box-shadow 0.18s;
}
.v2-rec__card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.v2-rec--minimal .v2-rec__card:hover { transform: none; box-shadow: none; }

.v2-rec__media { overflow: hidden; }
.v2-rec__img {
  width: 100%; height: 180px; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.v2-rec__card:hover .v2-rec__img { transform: scale(1.03); }
.v2-rec__img--placeholder {
  background: color-mix(in srgb, var(--v2-accent) 8%, var(--v2-bg-card));
}

.v2-rec__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.v2-rec__tag {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--v2-accent);
}
.v2-rec__title {
  font-family: var(--v2-display); font-size: 1rem; font-weight: 700;
  color: var(--v2-text); margin: 0; line-height: 1.35; letter-spacing: -0.01em;
}
.v2-rec__excerpt {
  font-size: 0.875rem; line-height: 1.6;
  color: var(--v2-text); opacity: 0.6; margin: 0;
}
.v2-rec__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.775rem; color: var(--v2-text); opacity: 0.45; margin: 0;
}
.v2-rec__meta > span + span::before { content: '·'; margin-right: 8px; opacity: 0.5; }
.v2-rec__author { font-weight: 600; opacity: 0.7 !important; }

@media (max-width: 900px) {
  .v2-rec--cards .v2-rec__grid { grid-template-columns: repeat(2, 1fr); }
  .v2-rec--magazine .v2-rec__grid { grid-template-columns: 1fr; }
  .v2-rec--magazine .v2-rec__card--lead { grid-row: auto; }
  .v2-rec--magazine .v2-rec__card:not(.v2-rec__card--lead) .v2-rec__media { display: block; }
}
@media (max-width: 600px) {
  .v2-rec { padding: 0 20px 56px; }
  .v2-rec--cards .v2-rec__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   custom-html — freeform HTML block
   ═══════════════════════════════════════════════════════════════════════ */

.v2-custom {
  background: var(--v2-bg);
  /* Horizontal padding is provided by the global gutter override (palette.ts
     outerSectionGutterSelectors). No hardcoded padding-inline here so the
     custom section aligns with every other section at every viewport width. */
}

/* Contained variant: inner div respects the theme's container width */
.v2-custom__inner {
  max-width: var(--v2-content-max-width, 1080px);
  margin-inline: auto;
  /* No extra horizontal padding — gutter is on the outer .v2-custom */
  width: 100%;
}

/* Full-width variant: content reaches the edges */
.v2-custom--full {
  /* No inner wrapper — user HTML can reach viewport edges */
}
.v2-custom--full .v2-custom__inner {
  max-width: 100%;
}

/* Placeholder shown in the builder when no HTML is entered yet */
.v2-custom__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 32px;
  border: 2px dashed var(--v2-border);
  border-radius: var(--v2-radius, 12px);
  color: var(--v2-text);
  text-align: center;
}
.v2-custom__placeholder p {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.4;
}



/* ── Global Shape & spacing overrides (Tier 1) ─────────────────────
   See globalShapeOverridesCss() in palette.ts for rationale. */
.v2-hero-grad__btn-primary, .v2-hero-ct__btn-primary, .v2-hero-vt__btn-primary, .v2-hero-hz__btn-primary, .v2-hdr__cta, .v2-cta__btn {
  background: var(--v2-btn-bg, var(--v2-accent)) !important;
  color: var(--v2-btn-color, #fff) !important;
  border: var(--v2-btn-border, none) !important;
  border-radius: var(--v2-btn-radius, 8px) !important;
}
.v2-hero-grad__btn-ghost, .v2-hero-ct__btn-outline, .v2-hero-vt__btn-outline, .v2-hero-hz__btn-outline, .v2-hero-grad__btn-secondary, .v2-hdr__cta-outline {
  border-radius: var(--v2-btn-radius, 8px) !important;
}
.v2-posts__card {
  border-radius: var(--v2-radius, 12px) !important;
}
.v2-posts__img, .v2-post__image, .v2-page__image, .v2-hero-grad__bg-img, .v2-hero-grad__split-media, .v2-hero-hz__img, .v2-hero-hz__img-placeholder, .v2-hero-vt__image {
  border-radius: var(--v2-image-radius, var(--v2-radius, 12px)) !important;
  overflow: hidden;
}
.v2-posts__card {
  box-shadow: var(--v2-shadow, none) !important;
}
.v2-posts__card:hover {
  box-shadow: var(--v2-shadow, none) !important;
}
.v2-hdr__inner, .v2-hero-grad__inner, .v2-hero-grad__split-row, .v2-hero-hz__inner, .v2-hero-ct__content, .v2-hero-vt__content, .v2-hero-dk__inner, .v2-hero-st__inner, .v2-hero-ss__inner, .v2-hero-ol__inner, .v2-hero-fc__inner, .v2-hero-m__inner, .v2-bento__inner, .v2-fcards__inner, .v2-fgrid__inner, .v2-fsplit__inner, .v2-fsteps__inner, .v2-falt__inner, .v2-showcase__inner, .v2-team__inner, .v2-faq__inner, .v2-pricing__inner, .v2-cgrid__inner, .v2-steps__inner, .v2-logos__inner, .v2-stats__inner, .v2-tfeat__inner, .v2-tgrid__inner, .v2-cta__inner, .v2-cta-band__inner, .v2-cta-cert__inner, .v2-cta-nl__inner, .v2-cta-stmt__inner, .v2-cta-img__inner, .v2-cta-proof__inner, .v2-media__inner, .v2-contact__inner, .v2-video__inner, .v2-mapmod__inner, .v2-posts__inner, .v2-ftr__inner, .v2-archive__inner, .v2-custom__inner {
  /* margin:0 auto keeps the constrained inner centered when the container
     setting is narrower than the section's full bleed. The !important is
     defensive against each module's own __inner having a hardcoded value. */
  max-width: var(--v2-content-max-width, 1100px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.v2-hdr, .v2-hero-grad, .v2-hero-hz, .v2-hero-ct, .v2-hero-vt__content-wrap, .v2-hero-dk, .v2-hero-st, .v2-hero-ss, .v2-hero-ol__inner, .v2-hero-fc, .v2-hero-m, .v2-bento, .v2-fcards, .v2-fgrid, .v2-fsplit, .v2-fsteps, .v2-falt, .v2-showcase, .v2-team, .v2-faq, .v2-pricing, .v2-cgrid, .v2-steps, .v2-logos, .v2-stats, .v2-tfeat, .v2-tgrid, .v2-cta, .v2-media, .v2-contact, .v2-mapmod, .v2-posts, .v2-ftr, .v2-archive, .v2-custom {
  /* Unified horizontal page gutter. See outerSectionGutterSelectors comment
     above for rationale and why padding-inline (not padding-left/right). */
  padding-inline: var(--v2-gutter, clamp(16px, 4vw, 40px)) !important;
}
.v2-hdr__inner, .v2-hero-grad__inner, .v2-hero-grad__split-text, .v2-hero-ct__body, .v2-hero-hz__content, .v2-hero-hz__media {
  /* Kill the per-module hardcoded horizontal padding that was making heroes'
     content edges sit further from the viewport than other sections. The
     outer gutter is now the single source of horizontal layout truth. */
  padding-inline: 0 !important;
}
.v2-hero-grad__split-row {
  /* Split layout: text and media used to be separated by the 48px horizontal
     padding inside __split-text. Now that's killed, so we restore the
     separation via a flex column-gap on the row itself. 64px reads as a
     deliberate gutter without dominating the cells. */
  column-gap: 64px;
}

/* ── Tag chip design (global Tier-1 override) ────────────────────────────────
   All post-card tag variants are overridden here so the Design → Tags
   settings (shape + fill style) flow through without touching every
   individual module's CSS.

   --tag-color is an optional per-tag inline custom property set by HBS
   when Ghost has a color assigned to the tag (accent_color field).
   Falls back to --v2-accent when absent, so tags without an assigned
   color still follow the theme accent.

   For 'solid' fill the text is always #fff for contrast; for 'tint' and
   'outline' the text inherits the tag's own color (or the theme accent). */
.v2-posts__tag--pill-below, .v2-posts__tag--pill-on-image, .v2-posts__tag--light {
  border-radius: var(--v2-tag-radius, 999px) !important;
  background: var(--tag-color, var(--v2-accent)) !important;
  color: #fff !important;
  border: none !important;
}

/* ── Canvas mode (Tier 1) ──────────────────────────────────────────────
   Floating-page effect: body gets a coloured background ("the desk")
   and a padded inset, while the top-level header and footer pick up
   rounded outer corners so the column of sections reads as one unified
   floating card. Scoped to .v2-canvas-on on body so the rules ONLY
   apply when the user has flipped the toggle in Spacing & layout →
   Page canvas — off by default leaves every existing theme visually
   unaffected.

   The header's sticky positioning is forced to static here. A sticky
   header doesn't compose with a floating page: on scroll the sticky
   header would overhang into the canvas inset area, breaking the
   "page resting on a desk" illusion. Print/document-style layouts that
   look like floating pages conventionally have a top-of-document
   header that scrolls away anyway, so this is the expected behaviour.

   overflow:hidden is required on the rounded elements so each section's
   own edge-to-edge background gets clipped to the rounded silhouette;
   without it the rounded corners would show the section's background
   square-edged past the rounded outline.

   The :not(:has(...)) fallbacks handle the rare case where the user
   removed the header or footer from the canvas — main then picks up
   whichever rounding is missing. The builder seeds both by default so
   this is a corner case, but it's free to support. :has() is supported
   in Chromium 105+, Safari 15.4+, Firefox 121+; on older engines the
   fallback simply doesn't apply (graceful degradation: that edge of the
   page renders square-cornered, the canvas effect still works). */
body.v2-canvas-on {
  background: var(--v2-canvas-color) !important;
  padding: var(--v2-canvas-inset) !important;
  min-height: 100vh;
  position: relative;
}
/* Drop shadow under the floating page. A pseudo-element sized to match
   body's padding box (= the page area) carries the shadow, so all
   three page elements (header / main / footer) get a SINGLE continuous
   shadow around the unified page silhouette rather than three separate
   shadows stacked. The pseudo has no fill of its own — only its shadow
   shows — and sits at z-index 0 so the actual page content (z-index 1
   below) paints over it. pointer-events:none so the shadow layer
   doesn't intercept clicks on the page content beneath it. */
body.v2-canvas-on::before {
  content: '';
  position: absolute;
  inset: var(--v2-canvas-inset);
  border-radius: var(--v2-canvas-radius, 12px);
  box-shadow: var(--v2-canvas-shadow, none);
  pointer-events: none;
  z-index: 0;
}
/* Page-area elements sit above the shadow pseudo AND get the page bg as a
   continuous fallback. The bg is the critical fix for visible canvas-color
   leaks: every module (including header and footer) is wrapped in a
   .v2-section div by renderModule, and that wrapper has no background of
   its own — so any gap (per-section padding-block from compact / comfortable
   / spacious spacing, gaps between sibling page elements, places where a
   module doesn't fully paint its box) would otherwise reveal the canvas
   color from body behind. Giving the wrappers and main the page bg makes
   those gaps render as page-coloured, keeping the canvas color visible
   ONLY in the inset area around the page — which is the whole point.

   position:relative also doubles as the override for the header's
   normally-sticky positioning (relative defeats sticky just as static does),
   so we don't need the separate 'position: static' rule we had before.
   NOTE: no backticks in this comment — the entire CSS string is a JS
   template literal delimited by backticks, so an embedded backtick would
   prematurely close it. */
body.v2-canvas-on > .v2-section,
body.v2-canvas-on > main {
  position: relative !important;
  z-index: 1;
  background: var(--v2-bg);
}
/* Top rounded corners on the header wrapper. We target the .v2-section that
   CONTAINS .v2-hdr (via :has) rather than the bare .v2-hdr, because
   renderModule wraps every module in .v2-section — .v2-hdr is never a
   direct child of body. */
body.v2-canvas-on > .v2-section:has(> .v2-hdr) {
  border-top-left-radius: var(--v2-canvas-radius, 12px);
  border-top-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}
body.v2-canvas-on > .v2-section:has(> .v2-ftr) {
  border-bottom-left-radius: var(--v2-canvas-radius, 12px);
  border-bottom-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}
/* No header on canvas? Main picks up the top rounding. Mirror-image of
   the header rule, also accounting for the .v2-section wrapping. */
body.v2-canvas-on:not(:has(> .v2-section > .v2-hdr)) > main {
  border-top-left-radius: var(--v2-canvas-radius, 12px);
  border-top-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}
/* No footer on canvas? Main picks up the bottom rounding. */
body.v2-canvas-on:not(:has(> .v2-section > .v2-ftr)) > main {
  border-bottom-left-radius: var(--v2-canvas-radius, 12px);
  border-bottom-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}