/* ==========================================================
   Moosefuel — minimalist masonry portfolio theme for Ghost
   ========================================================== */

/* ---------- Tokens ---------- */
:root {
  --accent: #d62828;
  --accent-ink: #fff;
  --accent-text: var(--accent);

  /* light */
  --bg: #f4f4f3;
  --card: #fff;
  --ink: #0c0c0c;
  --muted: #6d6d6a;
  --line: rgba(12, 12, 12, .12);

  --radius: 10px;
  --btn-radius: 8px;
  --gap: 20px;
  --tile-d: 14px;
  --wrap: 1840px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --stack-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --stack-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;

  /* heading personality (overridden per font choice) */
  --font-head: "Inter Tight", var(--stack-sans);
  --head-weight: 600;
  --hero-weight: 500;
  --head-track: -.02em;
  --hs: 1; /* size multiplier so each typeface looks balanced */

  --font-body: "Inter", var(--stack-sans);
  color-scheme: light;
}

:root[data-scheme="Dark"] {
  --bg: #0a0a0a; --card: #161616; --ink: #f4f3f0; --muted: #8f8e8a;
  --line: rgba(255, 255, 255, .13);
  --accent-text: color-mix(in srgb, var(--accent) 62%, #fff);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="Auto"] {
    --bg: #0a0a0a; --card: #161616; --ink: #f4f3f0; --muted: #8f8e8a;
    --line: rgba(255, 255, 255, .13);
    --accent-text: color-mix(in srgb, var(--accent) 62%, #fff);
    color-scheme: dark;
  }
}

/* Customizer options */
:root[data-corners="Round"] { --radius: 22px; --btn-radius: 999px; }
:root[data-corners="Sharp"] { --radius: 2px;  --btn-radius: 2px; }
:root[data-density="Tight"] { --tile-d: 6px; }
:root[data-density="Airy"]  { --tile-d: 28px; }

:root[data-heading-font="Geometric sans"] {
  --font-head: "Manrope", var(--stack-sans);
  --head-weight: 700; --hero-weight: 600; --head-track: -.025em;
}
:root[data-heading-font="Editorial serif"] {
  --font-head: "Instrument Serif", var(--stack-serif);
  --head-weight: 400; --hero-weight: 400; --head-track: -.005em; --hs: 1.22;
}
:root[data-text-font="Manrope"] { --font-body: "Manrope", var(--stack-sans); }
:root[data-text-font="System"]  { --font-body: var(--stack-sans); }

@media (min-width: 700px) { :root { --gap: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; }
/* Ghost's comments, Portal and search live in iframes. With color-scheme: dark
   on the page, browsers paint an opaque white canvas behind them, which hides
   light text. Resetting the iframe's own scheme keeps them transparent. */
iframe { color-scheme: normal; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

.hero-title, .card-title, .post-title, .page-head h1, .footer-cta h2, .post-cta h2,
.card--subscribe h2, .md-panel h2, .related h2, .gh-content h2, .gh-content h3, .gh-content h4, .brand {
  font-family: var(--font-head); font-weight: var(--head-weight); letter-spacing: var(--head-track);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--btn-radius); background: var(--ink); color: var(--bg);
}
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--btn-radius);
  font: 500 .9rem/1 var(--font-body); text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--bg);
  transition: filter .2s ease, background-color .2s ease;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(1.12); }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { background: var(--line); }
.btn-lg { min-height: 46px; padding: 0 24px; font-size: .95rem; }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .85;
  transition: opacity .2s ease;
}
.icon-btn:hover { opacity: .5; }

/* ---------- Header (scrolls away with the page) ---------- */
.site-header { position: relative; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 72px; padding-block: 14px; }
.brand { display: flex; align-items: center; font-size: 1.1rem; line-height: 1; text-decoration: none; }
.brand img { display: block; height: 36px; width: auto; }

.site-nav { flex: 1; margin-inline-start: 40px; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.site-nav a { display: block; white-space: nowrap; padding: 6px 0; font-size: .9rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.site-nav a:hover, .site-nav .is-current a { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; }
.link-signin { font-size: .9rem; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s ease; }
.link-signin:hover { color: var(--ink); }

.nav-lang { display: none; }
.menu-toggle { display: none; }
.brand, .header-actions { flex-shrink: 0; }

/* Collapsed (burger) layout. main.js-free: an inline script in default.hbs adds
   .nav-collapsed to <html> only when the full menu does not fit on one row. */
.nav-collapsed .menu-toggle { display: grid; }
.nav-collapsed .site-nav {
  display: none; position: absolute; inset: 100% 0 auto 0; z-index: 60;
  margin: 0; padding: 4px var(--gap) 20px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav-collapsed .site-nav.is-open { display: block; }
.nav-collapsed .site-nav ul { flex-direction: column; gap: 0; }
.nav-collapsed .site-nav a { padding: 12px 0; font-size: 1.05rem; color: var(--ink); }
.nav-collapsed .link-signin { display: none; }

.nav-collapsed .nav-lang { display: block; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.nav-collapsed .nav-lang:empty { display: none; }
.nav-collapsed .nav-lang .gtranslate_wrapper a.glink { padding: 12px 14px 12px 0; font-size: .95rem; }
.nav-collapsed .nav-lang .gtranslate_wrapper a.glink + a.glink::before { margin-right: 14px; height: 14px; }

/* Centered logo option (only while the full menu is showing) */
:root:not(.nav-collapsed)[data-header="Centered"] .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
:root:not(.nav-collapsed)[data-header="Centered"] .brand { order: 2; justify-self: center; }
:root:not(.nav-collapsed)[data-header="Centered"] .site-nav { order: 1; margin: 0; }
:root:not(.nav-collapsed)[data-header="Centered"] .header-actions { order: 3; justify-self: end; }

/* ---------- Language selector (GTranslate "EN FR") ----------
   GTranslate writes plain <a class="glink"> links into .gtranslate_wrapper and
   marks the active one with .gt-current-lang. These selectors are more specific
   than the widget's own injected CSS so these styles win. */
.header-lang { display: flex; align-items: center; }
.header-lang:has(.gtranslate_wrapper:empty) { display: none; }
.gtranslate_wrapper { display: flex; align-items: center; }
.gtranslate_wrapper a.glink {
  display: inline-flex; align-items: center; padding: 8px 6px;
  font-size: .8rem; font-weight: 500; letter-spacing: .06em; line-height: 1;
  color: var(--muted); text-decoration: none; transition: color .2s ease;
}
.gtranslate_wrapper a.glink + a.glink::before {
  content: ""; width: 1px; height: 11px; margin-right: 12px; background: var(--line);
}
.gtranslate_wrapper a.glink:hover { color: var(--ink); }
.gtranslate_wrapper a.glink.gt-current-lang { color: var(--ink); font-weight: 600; }

/* ---------- Intro ---------- */
.hero { display: grid; justify-items: start; gap: 18px; padding: clamp(16px, 3.5vw, 44px) 0 clamp(20px, 3vw, 32px); }
.hero-title {
  max-width: 46ch; margin: 0; font-weight: var(--hero-weight);
  font-size: calc(clamp(1.2rem, .95rem + .8vw, 1.65rem) * var(--hs)); line-height: 1.25; text-wrap: balance;
}
.hero-text { max-width: 56ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.55; }

:root:not([data-reveal="None"]) .hero > * { animation: rise .8s var(--ease) both; }
:root:not([data-reveal="None"]) .hero > :nth-child(2) { animation-delay: .08s; }
:root:not([data-reveal="None"]) .hero > :nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Topic filter (plain text, no pills) ---------- */
.filter { display: flex; gap: 22px; margin: 0; padding: 0 0 22px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
.filter a {
  display: block; white-space: nowrap; padding: 4px 0; font-size: .9rem; font-weight: 500;
  color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.filter a:hover { color: var(--ink); }
.filter a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.page-head { padding: clamp(12px, 3vw, 40px) 0 20px; }
.page-head h1 { margin: 0; font-size: calc(clamp(1.5rem, 1rem + 1.6vw, 2.2rem) * var(--hs)); line-height: 1.15; }
.page-head p { max-width: 60ch; margin: 12px 0 0; color: var(--muted); }
.error-page { padding-block: 12vh; }
.error-page .btn { margin-top: 24px; }

/* ---------- Grid ----------
   Mobile: one tile per row (plain free scrolling, no snapping). Desktop: masonry. main.js sets each tile's
   row span from its height; without JS it falls back to CSS columns. */
.grid { --tile: calc(var(--tile-d) * .8); display: flex; flex-direction: column; gap: var(--tile); }

@media (min-width: 700px) {
  .grid { --tile: var(--tile-d); --cols: 2; display: block; column-count: var(--cols); column-gap: var(--tile); }
  .grid-item { break-inside: avoid; margin-bottom: var(--tile); }
}
@media (min-width: 1000px) { .grid { --cols: 3; } }
@media (min-width: 1300px) { .grid { --cols: 4; } }
@media (min-width: 1900px) { .grid { --cols: 5; } }

@media (min-width: 700px) {
  .js [data-masonry] {
    display: grid; column-count: auto;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: 4px; /* keep in sync with ROW in main.js */
    column-gap: var(--tile); row-gap: 0;
  }
  .js [data-masonry] .grid-item { align-self: start; margin-bottom: 0; }
}
@media (min-width: 1000px) {
  .js [data-masonry] .grid-item.is-featured { grid-column: span 2; }
}

.grid--plain { display: flex; flex-direction: column; }
@media (min-width: 700px) {
  .grid--plain { display: grid; column-count: auto; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
  .grid--plain .grid-item { margin-bottom: 0; }
}

/* ---------- Tiles ---------- */
.card { position: relative; overflow: hidden; background: var(--card); border-radius: var(--radius); }
.card-link { display: block; position: relative; color: inherit; text-decoration: none; }
.card-link:focus-visible { outline-offset: -3px; border-radius: var(--radius); }

.card-media { position: relative; aspect-ratio: var(--ar, 4 / 5); background: var(--card); overflow: hidden; border-radius: var(--radius); }
.card-media img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .7s ease;
}
.js .card-media img:not(.is-loaded) { opacity: 0; animation: failsafe .01s 4s forwards; }

.card-title { margin: 0; font-size: calc(.95rem * var(--hs)); font-weight: 500; line-height: 1.25; }
.card-date { display: block; margin-top: 3px; font-size: .72rem; letter-spacing: .02em; opacity: .72; }

/* Image tiles: a small title always sits in the bottom-left corner */
.card--image .card-body {
  position: absolute; inset: auto 0 0 0; padding: 52px 14px 12px; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
}
@media (hover: hover) and (min-width: 700px) {
  :root[data-titles="On hover"] .card--image .card-body { opacity: 0; transition: opacity .3s ease; }
  :root[data-titles="On hover"] .card--image .card-link:hover .card-body,
  :root[data-titles="On hover"] .card--image .card-link:focus-visible .card-body { opacity: 1; }
}

/* Titles below the image, caption style */
:root[data-titles="Below image"] .card--image { background: transparent; overflow: visible; }
:root[data-titles="Below image"] .card--image .card-body { position: static; padding: 10px 2px 4px; color: var(--ink); background: none; }
:root[data-titles="Below image"] .card--image .card-date { color: var(--muted); opacity: 1; }

/* Text-only posts */
.card--text .card-body { padding: 22px 20px 20px; }
.card--text .card-title { font-size: calc(1.15rem * var(--hs)); line-height: 1.2; }
.card--text .card-date { color: var(--muted); opacity: 1; margin-top: 10px; }
.card--text .card-excerpt { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.card--text .card-link:hover .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--d, 0ms);
}
:root[data-reveal="Fade up"] .reveal { transform: translateY(24px); }
:root[data-reveal="Zoom"] .reveal { transform: scale(.96); }
.js .reveal.is-visible { opacity: 1; transform: none; }
:root[data-reveal="None"] .reveal { opacity: 1; transform: none; transition: none; }
/* Failsafe: if the script never runs, show everything after a moment */
.js .reveal:not(.is-visible) { animation: failsafe .01s 3s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; } }

/* ---------- Signup tile + form ---------- */
.card--subscribe { padding: 24px 22px; background: var(--accent); color: var(--accent-ink); }
.eyebrow { display: block; margin-bottom: 12px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.card--subscribe h2 { margin: 0 0 8px; font-size: calc(1.5rem * var(--hs)); line-height: 1.15; }
.card--subscribe p { margin: 0 0 18px; font-size: .95rem; opacity: .95; }

.signup-form .field { display: flex; flex-direction: column; gap: 8px; }
.signup-form input[type="email"] {
  width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--btn-radius);
  font: inherit; font-size: .95rem; background: #fff; color: #0c0c0c;
}
.signup-form input[type="email"]:focus-visible { outline-color: #fff; }
.card--subscribe .btn { background: #000; color: #fff; min-height: 44px; }
.signup-form.loading .btn { opacity: .6; pointer-events: none; }
.signup-form .msg { display: none; margin: 12px 0 0; font-size: .9rem; }
.signup-form.success .msg-success, .signup-form.error .msg-error { display: block; }
.signup-form.success .field { display: none; }

/* ---------- Sign-up window (translated visitors) ---------- */
.member-dialog {
  width: min(440px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 0;
  border: 0; border-radius: var(--radius); background: var(--card); color: var(--ink); overflow: auto;
}
.member-dialog::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.md-panel { position: relative; padding: 34px 28px 28px; }
.member-dialog-close { position: absolute; top: 8px; right: 8px; }
.md-panel h2 { margin: 0 32px 8px 0; font-size: calc(1.45rem * var(--hs)); line-height: 1.2; }
.md-panel p { margin: 0; color: var(--muted); font-size: .95rem; }
.member-dialog .signup-form { margin-top: 20px; }
.member-dialog .signup-form input[type="email"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.member-dialog .signup-form input[type="email"]:focus-visible { outline-color: var(--accent-text); }
.member-dialog .signup-form .msg { margin: 0; padding: 14px 16px; border-radius: var(--btn-radius); background: var(--bg); color: var(--ink); }
.member-dialog .md-switch { margin-top: 18px; font-size: .9rem; }
.md-switch button { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Pager ---------- */
.pager { display: flex; justify-content: center; padding: 36px 0 16px; }
.pager[aria-busy="true"] .btn { opacity: .6; }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.footer-cta { display: grid; justify-items: start; gap: 12px; padding-block: clamp(36px, 5vw, 64px); }
.footer-cta h2 { max-width: 30ch; margin: 0; font-size: calc(clamp(1.35rem, 1rem + 1.2vw, 1.9rem) * var(--hs)); line-height: 1.2; text-wrap: balance; }
.footer-cta p { max-width: 56ch; margin: 0 0 8px; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.footer-inner:first-child { border-top: 0; }
.footer-inner p { margin: 0; }
.footer-inner ul { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; list-style: none; }
.footer-inner a { text-decoration: none; transition: color .2s ease; }
.footer-inner a:hover { color: var(--ink); }

/* ---------- Posts & pages ----------
   With a featured image: full-width, darkened, fading into the page
   background, with the title sitting on top. Without: a plain header. */
.post-hero {
  position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: clamp(300px, 52vh, 560px); overflow: hidden; color: #fff;
}
.post-hero-img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.post-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .6) 100%);
}
.post-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 150px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.post-hero-inner { padding-block: 56px clamp(80px, 13vh, 130px); }
.post-head { max-width: 700px; margin-inline: auto; }

.post-hero--plain { min-height: 0; color: var(--ink); }
.post-hero--plain::before, .post-hero--plain::after { display: none; }
.post-hero--plain .post-hero-inner { padding-block: clamp(20px, 4vw, 48px) 8px; }

.post-tag { display: inline-block; margin-bottom: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; opacity: .85; }
.post-tag:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.post-title { margin: 0; font-size: calc(clamp(1.5rem, 1rem + 1.8vw, 2.3rem) * var(--hs)); line-height: 1.12; text-wrap: balance; }
.post-excerpt { max-width: 56ch; margin: 14px 0 0; font-size: 1.05rem; line-height: 1.5; opacity: .85; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 0; font-size: .82rem; opacity: .8; }
.post-meta a { font-weight: 600; text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-caption { margin: 0 auto; padding-top: 4px; color: var(--muted); font-size: .8rem; }

.gh-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gap), 1fr)
    [wide-start] minmax(0, 180px)
    [main-start] min(700px, calc(100% - var(--gap) * 2))
    [main-end] minmax(0, 180px)
    [wide-end] minmax(var(--gap), 1fr)
    [full-end];
  margin-top: 24px; font-size: 1.0625rem; line-height: 1.7;
}
.gh-content > * { grid-column: main; margin: 0 0 1.4em; min-width: 0; }
.gh-content > .kg-width-wide { grid-column: wide; }
.gh-content > .kg-width-full { grid-column: full; }
.gh-content > .kg-width-full img { border-radius: 0; width: 100%; }

.gh-content h2, .gh-content h3, .gh-content h4 { line-height: 1.2; margin-top: 2em; }
.gh-content h2 { font-size: calc(1.55rem * var(--hs)); }
.gh-content h3 { font-size: calc(1.25rem * var(--hs)); }
.gh-content a { color: var(--accent-text); text-underline-offset: 3px; }
.gh-content img { border-radius: var(--radius); }
.gh-content blockquote {
  margin-inline: 0; padding-inline-start: 20px; border-inline-start: 2px solid var(--accent);
  font-size: 1.2rem; line-height: 1.4; font-weight: 500;
}
.gh-content hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.gh-content pre { overflow-x: auto; padding: 16px 18px; border-radius: var(--radius); background: var(--card); font-size: .88rem; }
.gh-content :not(pre) > code { padding: 2px 6px; border-radius: 4px; background: var(--card); font-size: .9em; }
.gh-content figure { margin-inline: 0; }
.gh-content figure img { display: block; width: 100%; height: auto; }
.gh-content figcaption { margin-top: 10px; color: var(--muted); font-size: .8rem; text-align: center; }
.gh-content iframe[src*="vimeo"], .gh-content iframe[src*="youtube"],
.gh-content iframe[src*="/videos/embed/"], .gh-content iframe[src*="/video-playlists/embed/"] {
  display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: #000;
}
.gh-content .kg-embed-card { width: 100%; }
.gh-content > .kg-embed-card.kg-width-wide, .gh-content > .kg-embed-card.kg-width-full { margin-block: 2.4em; }
.gh-content > .kg-embed-card.kg-width-full iframe { border-radius: 0; }
.gh-content table { display: block; overflow-x: auto; border-collapse: collapse; }
.gh-content th, .gh-content td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }

.post-cta { max-width: 700px; margin: 56px auto; padding: 32px 28px; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); text-align: center; }
.post-cta h2 { margin: 0 0 8px; font-size: calc(1.5rem * var(--hs)); line-height: 1.15; }
.post-cta p { margin: 0 auto 20px; max-width: 48ch; font-size: .95rem; }
.post-cta .btn { background: #000; color: #fff; }

.related { padding-block: 24px 8px; }
.related h2 { margin: 0 0 18px; font-size: calc(1.25rem * var(--hs)); line-height: 1.2; }
.comments { max-width: 820px; padding-block: 24px 48px; color: var(--ink); }

/* ---------- Theatre posts (tag a post #theatre) ----------
   Dark stage with the video up top and a soft glow from the poster.
   The whole page goes dark for these posts, whatever the site scheme. */
:root:has(.post--theatre) {
  --bg: #0a0a0a; --card: #161616; --ink: #f4f3f0; --muted: #8f8e8a;
  --line: rgba(255, 255, 255, .13);
  --accent-text: color-mix(in srgb, var(--accent) 62%, #fff);
  color-scheme: dark;
}

/* One width shared by the video and the title block so they always line up.
   It is limited by screen height so the video fits on screen, but never drops
   below 640px, and on short screens (phones turned sideways) it simply uses the full width. */
.post--theatre { --stage-w: min(100%, 1280px, max(calc((100svh - 260px) * 16 / 9), 640px)); }
@media (max-height: 560px) { .post--theatre { --stage-w: min(100%, 1280px); } }

.stage { position: relative; isolation: isolate; overflow: hidden; background: #050505; padding-block: clamp(12px, 2.5vw, 32px) clamp(24px, 4vw, 56px); }
.stage-glow {
  position: absolute; inset: -15%; z-index: -1; width: 130%; height: 130%; max-width: none; object-fit: cover;
  filter: blur(90px) saturate(1.5); opacity: .38; pointer-events: none;
}
.stage::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 90px; background: linear-gradient(to bottom, transparent, var(--bg)); }
.stage-frame {
  position: relative; aspect-ratio: 16 / 9; margin-inline: auto; background: #000; overflow: hidden;
  width: var(--stage-w);
  border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.stage-frame iframe, .stage-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; }
.stage-poster { object-fit: cover; }
.stage[hidden] { display: none; }

.theatre-head { padding-block: 28px 8px; }
.theatre-head .post-head { max-width: none; width: var(--stage-w); margin-inline: auto; }
.theatre-head .post-title { font-size: calc(clamp(1.4rem, 1rem + 1.4vw, 2rem) * var(--hs)); }

@media (max-width: 699px) {
  .stage { padding-block: 0 20px; }
  .stage .wrap { padding-inline: 0; }
  .stage-frame { width: 100%; border-radius: 0; box-shadow: none; }
}

/* Play badge on grid tiles for theatre (video) posts */
.card-play {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff; padding-left: 2px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-reveal] .reveal, :root[data-reveal] .hero > * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .card-media img { transition: none !important; animation: none !important; opacity: 1 !important; }
  * { scroll-behavior: auto !important; }
}