/*
 * Stylesheet for statically published tenant blogs.
 *
 * Modelled on the ScreenSnap Pro blog (screensnap.pro/blog): a dark
 * slate->black gradient shell, frosted "glass" cards, and a single accent
 * colour. Values below were read off the live pages' computed styles rather
 * than re-derived, so published posts match that reference closely.
 *
 * The one deliberate difference: ScreenSnap hardcodes purple, but this is
 * multi-tenant, so the accent is driven by the tenant's own brand colours
 * (--brand-link / --brand-primary) which the layout inlines per site. The
 * fallbacks reproduce ScreenSnap's purple exactly.
 *
 * Hand-authored rather than reusing the dashboard's Tailwind build: this ships
 * to a customer's own domain, so it must be small, self-contained, and unable
 * to collide with their styles. Every class is namespaced `lunroo-`, except the
 * TipTap classes inside .lunroo-prose which the editor bakes into post bodies.
 */

:root {
  --lunroo-bg-from: #020617;   /* slate-950 */
  --lunroo-bg-via: #0f172a;    /* slate-900 */
  --lunroo-bg-to: #000000;
  --lunroo-text: var(--lunroo-text-override, #d4d4d8);      /* zinc-300 */
  --lunroo-text-strong: var(--lunroo-text-override, #ffffff);
  --lunroo-text-muted: var(--lunroo-text-muted-override, #a1a1aa); /* zinc-400 */
  --lunroo-accent: var(--brand-link, #d8b4fe);        /* purple-300 */
  --lunroo-accent-soft: var(--brand-primary, #a855f7); /* purple-500 */
  --lunroo-glass-border: rgba(255, 255, 255, 0.15);
  --lunroo-radius: 16px;

  /* Dark-theme surface tokens. Everything below used to be hardcoded rgba()
     values scattered through the sheet; routing them through variables lets the
     [data-lunroo-theme="light"] block restyle the page without touching rules. */
  --lunroo-nav-link: #d1d5db;
  --lunroo-lede: #d1d5db;                                   /* index description, author bio */
  --lunroo-hairline: rgba(255, 255, 255, 0.08);             /* footer top border, pagination borders */
  --lunroo-glass-from: rgba(255, 255, 255, 0.06);
  --lunroo-glass-to: rgba(255, 255, 255, 0.02);
  --lunroo-glass-strong-from: rgba(255, 255, 255, 0.08);    /* banner */
  --lunroo-glass-strong-to: rgba(255, 255, 255, 0.03);
  --lunroo-glass-strong-border: rgba(255, 255, 255, 0.18);
  --lunroo-border-hover: rgba(255, 255, 255, 0.25);         /* card/featured hover borders */
  --lunroo-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
  --lunroo-shadow-hover: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  --lunroo-shadow-featured: 0 16px 48px 0 rgba(0, 0, 0, 0.5);
  --lunroo-blob-from: rgba(255, 255, 255, 0.08);
  --lunroo-blob-to: rgba(255, 255, 255, 0.04);
  --lunroo-grid-line: rgba(255, 255, 255, 0.02);
  --lunroo-invert-bg: #ffffff;                              /* CTA button / current page pill */
  --lunroo-invert-fg: #000000;
  --lunroo-invert-bg-hover: rgba(255, 255, 255, 0.9);
  --lunroo-invert-shadow-hover: 0 8px 32px 0 rgba(255, 255, 255, 0.3);
  --lunroo-pagination-bg: rgba(255, 255, 255, 0.02);
  --lunroo-pagination-bg-hover: rgba(255, 255, 255, 0.1);
  --lunroo-badge-bg: rgba(168, 85, 247, 0.15);
  --lunroo-avatar-ring: rgba(255, 255, 255, 0.1);
  --lunroo-avatar-from: rgba(255, 255, 255, 0.12);
  --lunroo-avatar-to: rgba(255, 255, 255, 0.04);
  --lunroo-underline-soft: rgba(216, 180, 254, 0.4);        /* author link underlines */
  --lunroo-underline-softer: rgba(216, 180, 254, 0.3);
  --lunroo-bullet-marker: rgba(255, 255, 255, 0.35);
  --lunroo-code-bg: rgba(255, 255, 255, 0.1);
  --lunroo-pre-bg: rgba(0, 0, 0, 0.4);
  --lunroo-pre-border: rgba(255, 255, 255, 0.12);
  --lunroo-pre-text: #e4e4e7;
  --lunroo-rule: rgba(255, 255, 255, 0.12);                 /* hr */
  --lunroo-mark-bg: rgba(216, 180, 254, 0.25);
  --lunroo-table-border: rgba(255, 255, 255, 0.2);
  --lunroo-table-head-bg: rgba(255, 255, 255, 0.04);
  --lunroo-rcard-blank-spot: rgba(255, 255, 255, 0.10);
  --lunroo-rcard-blank-from: rgba(255, 255, 255, 0.07);
  --lunroo-rcard-blank-to: rgba(255, 255, 255, 0.02);

  /* Background override: when the layout sets --lunroo-bg-override the resolved
     stops all collapse to that solid colour, in either theme. */
  --lunroo-bg-resolved-from: var(--lunroo-bg-override, var(--lunroo-bg-from));
  --lunroo-bg-resolved-via: var(--lunroo-bg-override, var(--lunroo-bg-via));
  --lunroo-bg-resolved-to: var(--lunroo-bg-override, var(--lunroo-bg-to));
}

/* --- light theme ---------------------------------------------------------- */

[data-lunroo-theme="light"] {
  --lunroo-bg-from: #f8fafc;   /* slate-50 */
  --lunroo-bg-via: #eef2f7;
  --lunroo-bg-to: #ffffff;
  --lunroo-text: var(--lunroo-text-override, #334155);      /* slate-700 */
  --lunroo-text-strong: var(--lunroo-text-override, #0f172a); /* slate-900 */
  --lunroo-text-muted: var(--lunroo-text-muted-override, #64748b);  /* slate-500 */
  --lunroo-glass-border: rgba(15, 23, 42, 0.12);

  --lunroo-nav-link: #475569;
  --lunroo-lede: #475569;
  --lunroo-hairline: rgba(15, 23, 42, 0.08);
  --lunroo-glass-from: rgba(255, 255, 255, 0.75);
  --lunroo-glass-to: rgba(255, 255, 255, 0.45);
  --lunroo-glass-strong-from: rgba(255, 255, 255, 0.85);
  --lunroo-glass-strong-to: rgba(255, 255, 255, 0.55);
  --lunroo-glass-strong-border: rgba(15, 23, 42, 0.14);
  --lunroo-border-hover: rgba(15, 23, 42, 0.22);
  --lunroo-shadow: 0 4px 20px 0 rgba(15, 23, 42, 0.08);
  --lunroo-shadow-hover: 0 8px 32px 0 rgba(15, 23, 42, 0.12);
  --lunroo-shadow-featured: 0 16px 48px 0 rgba(15, 23, 42, 0.14);
  --lunroo-blob-from: rgba(15, 23, 42, 0.05);
  --lunroo-blob-to: rgba(15, 23, 42, 0.02);
  --lunroo-grid-line: rgba(15, 23, 42, 0.04);
  --lunroo-invert-bg: #0f172a;
  --lunroo-invert-fg: #ffffff;
  --lunroo-invert-bg-hover: rgba(15, 23, 42, 0.88);
  --lunroo-invert-shadow-hover: 0 8px 32px 0 rgba(15, 23, 42, 0.25);
  --lunroo-pagination-bg: rgba(15, 23, 42, 0.02);
  --lunroo-pagination-bg-hover: rgba(15, 23, 42, 0.06);
  --lunroo-badge-bg: rgba(168, 85, 247, 0.12);
  --lunroo-avatar-ring: rgba(15, 23, 42, 0.1);
  --lunroo-avatar-from: rgba(15, 23, 42, 0.10);
  --lunroo-avatar-to: rgba(15, 23, 42, 0.04);
  --lunroo-underline-soft: rgba(126, 34, 206, 0.4);
  --lunroo-underline-softer: rgba(126, 34, 206, 0.3);
  --lunroo-bullet-marker: rgba(15, 23, 42, 0.35);
  --lunroo-code-bg: rgba(15, 23, 42, 0.06);
  --lunroo-pre-bg: rgba(15, 23, 42, 0.04);
  --lunroo-pre-border: rgba(15, 23, 42, 0.12);
  --lunroo-pre-text: #1e293b;
  --lunroo-rule: rgba(15, 23, 42, 0.12);
  --lunroo-mark-bg: rgba(168, 85, 247, 0.18);
  --lunroo-table-border: rgba(15, 23, 42, 0.15);
  --lunroo-table-head-bg: rgba(15, 23, 42, 0.04);
  --lunroo-rcard-blank-spot: rgba(15, 23, 42, 0.06);
  --lunroo-rcard-blank-from: rgba(15, 23, 42, 0.05);
  --lunroo-rcard-blank-to: rgba(15, 23, 42, 0.02);
}

/* --- reset ---------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

/*
 * The base colour lives on <html> as a solid fill, and the gradient is painted
 * by the fixed .lunroo-backdrop layer below. A gradient with
 * `background-attachment: fixed` on <body> propagates to the canvas but only
 * paints over the initial containing block, so anything past the first viewport
 * of a long article renders white.
 */
html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--lunroo-bg-resolved-from);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lunroo-text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--lunroo-accent); text-decoration: none; }
a:hover { color: var(--lunroo-text-strong); }

/*
 * Decorative background: two blurred blobs plus a masked grid, matching the
 * reference. Purely presentational, so it is inert to screen readers and
 * disabled for anyone who prefers reduced motion.
 */
.lunroo-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(to bottom right, var(--lunroo-bg-resolved-from), var(--lunroo-bg-resolved-via), var(--lunroo-bg-resolved-to));
}

.lunroo-backdrop__blob {
  position: absolute;
  border-radius: 9999px;
  background-image: linear-gradient(to bottom right, var(--lunroo-blob-from), var(--lunroo-blob-to));
  filter: blur(100px);
}

.lunroo-backdrop__blob--one { top: -10rem; right: -10rem; width: 500px; height: 500px; }
.lunroo-backdrop__blob--two { bottom: -10rem; left: -10rem; width: 600px; height: 600px; filter: blur(120px); }

.lunroo-backdrop__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--lunroo-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lunroo-grid-line) 1px, transparent 1px);
  background-size: 100px 100px;
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, black, transparent);
  mask-image: radial-gradient(ellipse 80% 50% at 50% 50%, black, transparent);
}

/* --- layout --------------------------------------------------------------- */

.lunroo-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lunroo-container--article { max-width: 48rem; }

.lunroo-main { position: relative; z-index: 10; display: block; padding: 4rem 0 5rem; }

/* Scrolls away with the page. Because it never overlaps content, it can stay
   fully transparent -- which is the reference's own at-rest appearance, and the
   state its JS only leaves once the page scrolls. */
.lunroo-header {
  position: relative;
  z-index: 20;
  background: transparent;
  border: 0;
}

/* Constrained to the content width so the brand lines up with the hero and the
   card grid below it, rather than sitting out at the viewport edge. */
.lunroo-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Takes the free space so nav and the CTA are pushed to the right edge. */
.lunroo-header__brand-slot { display: flex; flex: 1 1 0%; min-width: 0; }
.lunroo-header__brand { display: flex; align-items: center; min-width: 0; }
.lunroo-header__logo { display: block; height: 32px; width: 32px; border-radius: 12px; object-fit: cover; }
.lunroo-header__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--lunroo-text-strong);
  margin-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lunroo-nav { display: flex; align-items: center; gap: 3rem; margin: 0 2rem; }
.lunroo-nav__link { color: var(--lunroo-nav-link); font-size: 0.875rem; font-weight: 600; line-height: 1.5rem; }
.lunroo-nav__link:hover { color: var(--lunroo-accent); }

.lunroo-header__actions { display: flex; align-items: center; gap: 1.5rem; }

/* A menu item saved as type "button" renders as a filled call to action. */
.lunroo-nav__button {
  background: var(--lunroo-invert-bg);
  border: 1px solid var(--lunroo-invert-bg);
  border-radius: 10px;
  color: var(--lunroo-invert-fg);
  padding: 0.4375rem 1.0625rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}

.lunroo-nav__button:hover {
  color: var(--lunroo-invert-fg);
  background: var(--lunroo-invert-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--lunroo-invert-shadow-hover);
}

@media (min-width: 1024px) {
  .lunroo-header__inner { padding: 1.5rem 2rem; }
  .lunroo-header__logo { height: 40px; width: 40px; }
  .lunroo-header__name { font-size: 1.125rem; margin-left: 0.75rem; }
}

/* The reference collapses nav into a hamburger below lg, which needs JS.
   Dropping the links keeps the brand and the CTA, which is the part that
   matters on a phone. */
@media (max-width: 1023px) {
  .lunroo-nav { display: none; }
}

.lunroo-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--lunroo-hairline);
  padding: 2.5rem 0;
  margin-top: 4rem;
}

.lunroo-footer__inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; }
.lunroo-footer__name { font-weight: 600; margin: 0 0 0.375rem; color: var(--lunroo-text-strong); }
/* The footer brand is a link home now, so it needs the same inherit-colour and
   hover treatment the header brand has: without it the anchor picks up the
   default link colour and the lock-up stops matching the header. */
.lunroo-footer__brand { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.lunroo-footer__brand:hover { color: var(--lunroo-accent); }
.lunroo-footer__logo { display: block; height: 1.75rem; width: auto; border-radius: 6px; }
.lunroo-footer__description { margin: 0; color: var(--lunroo-text-muted); font-size: 0.9375rem; max-width: 28rem; line-height: 1.6; }
.lunroo-footer__nav,
.lunroo-footer__social { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; margin-top: 1rem; }
.lunroo-footer__link { color: var(--lunroo-text-muted); font-size: 0.9375rem; }
.lunroo-footer__link:hover { color: var(--lunroo-text-strong); }

.lunroo-footer__columns { display: flex; flex-wrap: wrap; gap: 3rem; }
.lunroo-footer__column-title { margin: 0 0 0.75rem; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lunroo-text-strong); }
.lunroo-footer__column-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

/* --- glass surface -------------------------------------------------------- */

.lunroo-glass {
  background-image: linear-gradient(to bottom right, var(--lunroo-glass-from), var(--lunroo-glass-to));
  backdrop-filter: blur(40px);
  border: 1px solid var(--lunroo-glass-border);
  border-radius: var(--lunroo-radius);
  box-shadow: var(--lunroo-shadow);
}

/* --- index ---------------------------------------------------------------- */

.lunroo-index__header { text-align: center; margin-bottom: 4rem; }

.lunroo-index__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--lunroo-text-strong);
  margin: 0 0 1.5rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.lunroo-index__description {
  margin: 0 auto;
  max-width: 42rem;
  color: var(--lunroo-lede);
  font-size: 1.25rem;
  line-height: 1.6;
}

.lunroo-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }

@media (min-width: 640px) { .lunroo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lunroo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lunroo-card { min-width: 0; overflow: hidden; transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s; }
.lunroo-card:hover { transform: scale(1.02); box-shadow: var(--lunroo-shadow-hover); border-color: var(--lunroo-border-hover); }
.lunroo-card__link { display: block; color: inherit; height: 100%; }
.lunroo-card__link:hover { color: inherit; }
.lunroo-card__cover { display: block; width: 100%; height: 10rem; object-fit: cover; border-radius: 0; }
.lunroo-card__body { padding: 1.5rem; }
.lunroo-card__title { font-size: 1.125rem; font-weight: 600; color: var(--lunroo-text-strong); margin: 0 0 0.75rem; line-height: 1.4; transition: color 0.3s; }
.lunroo-card__link:hover .lunroo-card__title { color: var(--lunroo-accent); }
.lunroo-card__description { margin: 0; color: var(--lunroo-text-muted); font-size: 0.875rem; line-height: 1.65; }
.lunroo-card__meta { margin: 0 0 0.75rem; color: var(--lunroo-text-muted); font-size: 0.875rem; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; }

/* Featured (most recent) post gets the wide treatment. */
.lunroo-featured { display: block; margin-bottom: 3rem; border-radius: 24px; overflow: hidden; transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s; }
.lunroo-featured:hover { box-shadow: var(--lunroo-shadow-featured); border-color: var(--lunroo-border-hover); }
.lunroo-featured__inner { display: flex; flex-direction: column; }

/*
  The cover is shown WHOLE -- never cropped. Tenants upload covers at whatever
  aspect ratio they like (16:9, 1.91:1, 4:3), and the panel's own aspect ratio is
  set by the body column's text height, so the two almost never agree. Cropping
  to fit ate the edges of covers whose subject reaches the frame (a logo in the
  corner, a title lockup down one side), which is exactly where cover art puts it.

  So: the foreground image is object-fit: contain, and the leftover space is
  filled by a blurred, scaled copy of the same file rather than by a bar. One
  network fetch -- the browser dedupes the identical src.

  Stacking: .lunroo-featured__media is the containing block, the backdrop is
  absolutely positioned beneath, the foreground sits above on z-index 1.
*/
/*
  The panel reserves its own box via aspect-ratio, NOT via the image. The img's
  width/height attributes are optional (MediaMirror#measure rescues to nil, and
  publish_media.width/height are nullable), so a panel sized by the image collapses
  to 0px on any cover that failed to measure and then jumps on decode. Sizing the
  panel in CSS keeps the reservation independent of that data.

  It also bounds the panel: letting the image drive the height rendered a portrait
  cover at its full intrinsic size on tablets (a 3:4 cover measured 973x1297 at
  1023px wide), pushing the title and the whole body below the fold.
*/
.lunroo-featured__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lunroo-glass-from); }
.lunroo-featured__image,
.lunroo-featured__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.lunroo-featured__backdrop { object-fit: cover; transform: scale(1.25); filter: blur(28px) saturate(1.25); opacity: 0.55; }
.lunroo-featured__image { object-fit: contain; z-index: 1; }
.lunroo-featured__body { flex: 1; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.lunroo-featured__title { font-size: 1.75rem; font-weight: 700; color: var(--lunroo-text-strong); margin: 0 0 1rem; line-height: 1.2; letter-spacing: -0.02em; }
.lunroo-featured__description { margin: 0 0 1.5rem; color: var(--lunroo-text-muted); font-size: 1rem; line-height: 1.65; }
.lunroo-featured__more { color: var(--lunroo-accent); font-weight: 600; font-size: 0.9375rem; }

@media (min-width: 1024px) {
  .lunroo-featured__inner { flex-direction: row; align-items: stretch; }
  /*
    Side by side the flex row supplies the panel height (the body column's text is
    what makes it), so the ratio is dropped and min-height is the floor. The image
    is already absolute + contain from the base rule, so the whole cover stays
    visible and the blurred backdrop takes up the slack above and below.
  */
  .lunroo-featured__media { width: 60%; aspect-ratio: auto; min-height: 22rem; }
  .lunroo-featured__body { padding: 2.5rem; }
}

.lunroo-badge {
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lunroo-accent);
  background: var(--lunroo-badge-bg);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  margin-bottom: 1rem;
}

.lunroo-empty { color: var(--lunroo-text-muted); text-align: center; padding: 3rem 0; }

/* Centred, numbered pagination mirroring the marketing site's control. */
.lunroo-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 3rem;
}

.lunroo-pagination__nav,
.lunroo-pagination__page {
  border: 1px solid var(--lunroo-hairline);
  background: var(--lunroo-pagination-bg);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lunroo-text-muted);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lunroo-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
}

.lunroo-pagination__pages { display: flex; align-items: center; gap: 0.25rem; }

.lunroo-pagination__page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  width: 2.5rem;
}

.lunroo-pagination__nav:hover,
.lunroo-pagination__page:hover {
  background: var(--lunroo-pagination-bg-hover);
  color: var(--lunroo-text-strong);
}

/* The current page inverts, the way the reference control does. */
.lunroo-pagination__page--current,
.lunroo-pagination__page--current:hover {
  background: var(--lunroo-invert-bg);
  border-color: var(--lunroo-invert-bg);
  color: var(--lunroo-invert-fg);
}

.lunroo-pagination__chevron { height: 1rem; width: 1rem; flex: none; }

.lunroo-pagination__gap {
  color: var(--lunroo-text-muted);
  padding: 0 0.125rem;
  font-size: 0.875rem;
}

@media (max-width: 480px) {
  /* Numbers alone stay usable when the prev/next labels would wrap badly. */
  .lunroo-pagination__nav { padding: 0.5rem 0.75rem; }
}

/* --- banner --------------------------------------------------------------- */

.lunroo-banner {
  background-image: linear-gradient(to bottom right, var(--lunroo-glass-strong-from), var(--lunroo-glass-strong-to));
  border: 1px solid var(--lunroo-glass-strong-border);
  backdrop-filter: blur(40px);
  border-radius: 24px;
  padding: 2rem;
  margin-bottom: 3rem;
  text-align: center;
}

.lunroo-banner__title { margin: 0 0 0.75rem; font-size: 1.375rem; font-weight: 700; color: var(--lunroo-text-strong); }
.lunroo-banner__text { margin: 0 0 1.5rem; color: var(--lunroo-text-muted); }

.lunroo-banner__button {
  display: inline-block;
  background: var(--brand-button, var(--lunroo-accent-soft));
  color: #fff;
  border-radius: 10px;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
}

.lunroo-banner__button:hover { color: #fff; opacity: 0.92; }

/* --- post ----------------------------------------------------------------- */

.lunroo-back { display: inline-block; color: var(--lunroo-accent); font-size: 0.875rem; margin-bottom: 2rem; }

.lunroo-post__header { margin-bottom: 3rem; }

.lunroo-post__title {
  font-size: 2.25rem;
  line-height: 1.11;
  font-weight: 700;
  color: var(--lunroo-text-strong);
  /* Tighter than before: the byline now sits directly beneath the title
     rather than after an excerpt, so they read as one block. */
  margin: 0 0 1rem;
  letter-spacing: -0.025em;
}

.lunroo-post__meta {
  margin: 0;
  color: var(--lunroo-text-muted);
  font-size: 0.875rem;
  display: flex;
  gap: 0.375rem 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.lunroo-post__author { color: var(--lunroo-accent); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lunroo-underline-soft); }

.lunroo-author { display: block; margin-top: 3rem; padding: 1.5rem; }

.lunroo-author__kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lunroo-accent);
  margin: 0 0 1rem;
}

.lunroo-author__row { display: flex; align-items: flex-start; gap: 1rem; }
.lunroo-author__body { flex: 1 1 0%; min-width: 0; }

.lunroo-author__avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--lunroo-avatar-ring);
}

/* Initial in place of a portrait, so the row keeps its shape either way. */
.lunroo-author__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--lunroo-text-strong);
  background-image: linear-gradient(to bottom right, var(--lunroo-avatar-from), var(--lunroo-avatar-to));
}

/* Name and role share a baseline row rather than stacking. */
.lunroo-author__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.lunroo-author__name { font-weight: 700; font-size: 1.125rem; color: var(--lunroo-text-strong); }
.lunroo-author__name a { color: inherit; }
.lunroo-author__name a:hover { color: var(--lunroo-accent); }
.lunroo-author__role { font-size: 0.875rem; color: var(--lunroo-text-muted); }

.lunroo-author__bio { margin: 0.5rem 0 0; color: var(--lunroo-lede); font-size: 0.875rem; line-height: 1.65; }
.lunroo-author__more { color: var(--lunroo-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--lunroo-underline-softer); }

.lunroo-author__social { margin: 0.75rem 0 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.875rem; font-weight: 500; }

/* On the author page the header is centred text, but a flex row ignores
   text-align and pins itself to the left edge. */
.lunroo-author__social--centered { justify-content: center; margin: 0.875rem 0 1.25rem; gap: 1.25rem; }

/* The author page header portrait, larger and centred above the name. */
.lunroo-author__avatar--large { width: 6rem; height: 6rem; margin: 0 auto 1rem; font-size: 2.25rem; }

@media (min-width: 640px) {
  .lunroo-author__row { gap: 1.25rem; }
  .lunroo-author__avatar { width: 5rem; height: 5rem; }
  .lunroo-author__avatar--initial { font-size: 1.875rem; }
  .lunroo-author__avatar--large { width: 6rem; height: 6rem; font-size: 2.25rem; }
  .lunroo-author__name { font-size: 1.25rem; }
}

/* Wider than the article column so three cards fit without cramping. */
.lunroo-related {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 64rem;
  margin: 5rem auto 0;
  padding: 0 1.5rem;
}

.lunroo-related__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lunroo-text-strong);
  margin: 0 0 2rem;
}

.lunroo-related__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .lunroo-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lunroo-rcard {
  display: block;
  color: inherit;
  overflow: hidden;
  height: 100%;
  transition: transform 0.5s, box-shadow 0.5s, border-color 0.5s;
}

.lunroo-rcard:hover {
  color: inherit;
  transform: scale(1.02);
  box-shadow: var(--lunroo-shadow-hover);
  border-color: var(--lunroo-border-hover);
}

/* Fixed 16/9 box: titles of different lengths still leave the images aligned. */
.lunroo-rcard__media { aspect-ratio: 16 / 9; overflow: hidden; }

/* Stands in for a missing cover so every card keeps the same proportions. */
.lunroo-rcard__media--blank {
  background-image:
    radial-gradient(circle at 25% 20%, var(--lunroo-rcard-blank-spot), transparent 55%),
    linear-gradient(to bottom right, var(--lunroo-rcard-blank-from), var(--lunroo-rcard-blank-to));
}
.lunroo-rcard__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; transition: transform 0.5s; }
.lunroo-rcard:hover .lunroo-rcard__media img { transform: scale(1.05); }

.lunroo-rcard__body { padding: 1.25rem; }
.lunroo-rcard__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  color: var(--lunroo-text-muted);
  font-size: 0.75rem;
}

.lunroo-rcard__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--lunroo-text-strong);
  transition: color 0.3s;
  /* Clamp to two lines so cards stay the same height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lunroo-rcard:hover .lunroo-rcard__title { color: var(--lunroo-accent); }

.lunroo-notfound { padding: 5rem 1.5rem; text-align: center; }
.lunroo-notfound__title { font-size: 2rem; color: var(--lunroo-text-strong); margin: 0 0 0.75rem; }
.lunroo-notfound__text { color: var(--lunroo-text-muted); margin: 0 0 2rem; }

/* --- prose ---------------------------------------------------------------- */
/*
 * Reproduces Tailwind `prose prose-invert` as the reference renders it, plus
 * the TipTap-specific classes the Lunroo editor emits into post bodies.
 */

.lunroo-prose { font-size: 1rem; line-height: 1.625; color: var(--lunroo-text); }

.lunroo-prose h2 {
  font-size: 1.5rem;
  line-height: 1.333;
  font-weight: 700;
  color: var(--lunroo-text-strong);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  scroll-margin-top: 2rem;
}

.lunroo-prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--lunroo-text-strong);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  scroll-margin-top: 2rem;
}

.lunroo-prose h4 { font-size: 1.125rem; font-weight: 600; color: var(--lunroo-text-strong); margin-top: 1.5rem; margin-bottom: 0.5rem; }
.lunroo-prose h5 { font-size: 1rem; font-weight: 600; color: var(--lunroo-text-strong); margin-top: 1.25rem; margin-bottom: 0.5rem; }
.lunroo-prose h6 { font-size: 0.875rem; font-weight: 600; color: var(--lunroo-text-strong); margin-top: 1rem; margin-bottom: 0.375rem; }

.lunroo-prose p { margin-top: 0; margin-bottom: 1rem; color: var(--lunroo-text); line-height: 1.625; }

.lunroo-prose strong { color: var(--lunroo-text-strong); font-weight: 600; }

.lunroo-prose a,
.lunroo-prose .tiptap-link { color: var(--lunroo-accent); text-decoration: underline; text-underline-offset: 3px; }
.lunroo-prose a:hover,
.lunroo-prose .tiptap-link:hover { color: var(--lunroo-text-strong); }

.lunroo-prose ul, .lunroo-prose ol { margin: 1rem 0; padding-left: 1.5rem; }
.lunroo-prose li { margin: 0.375rem 0; color: var(--lunroo-text); }
.lunroo-prose li > p { margin: 0.25rem 0; }

/* The editor's bullet list uses a custom em-dash marker instead of a disc. */
.lunroo-prose .tiptap-bullet-list { list-style-type: none; padding-left: 0; }
.lunroo-prose .tiptap-bullet-list li { position: relative; padding-left: 1.5em; }
.lunroo-prose .tiptap-bullet-list li::before {
  content: "—";
  color: var(--lunroo-bullet-marker);
  position: absolute;
  left: 0;
  top: 0;
}

.lunroo-prose .tiptap-order-list { padding-left: 1.4em; }

.lunroo-prose blockquote,
.lunroo-prose .tiptap-blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--lunroo-accent);
  color: var(--lunroo-text-muted);
}

/* Inline code renders as a soft accent-coloured pill, matching the reference. */
.lunroo-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lunroo-accent);
  background: var(--lunroo-code-bg);
  border-radius: 4px;
  padding: 2px 6px;
}

.lunroo-prose pre {
  background: var(--lunroo-pre-bg);
  border: 1px solid var(--lunroo-pre-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.lunroo-prose pre code {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: transparent;
  color: var(--lunroo-pre-text);
  font-weight: 400;
  padding: 0;
  border-radius: 0;
}

.lunroo-prose hr { border: 0; border-top: 1px solid var(--lunroo-rule); margin: 2.5rem 0; }

.lunroo-prose mark { background: var(--lunroo-mark-bg); color: var(--lunroo-text-strong); padding: 0.1em 0.2em; border-radius: 2px; }

.lunroo-prose figure { margin: 2rem 0; }
.lunroo-prose figcaption { font-size: 0.875rem; color: var(--lunroo-text-muted); margin-top: 0.625rem; text-align: center; }

.lunroo-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin: 2rem 0; }

/*
 * The TipTap Image extension bakes the literal Tailwind class string
 * "pt-4 pb-6 rounded-lg" into every editor image. Those utilities do not exist
 * here, so the spacing must be reproduced as real CSS or in-body images lose it.
 */
.lunroo-prose img { display: block; border-radius: 10px; margin: 1.5rem auto; }
.lunroo-prose .pt-4 { padding-top: 1rem; }
.lunroo-prose .pb-6 { padding-bottom: 1.5rem; }
.lunroo-prose .rounded-lg { border-radius: 0.5rem; }

/* The wrapper scrolls; the table itself stays a real table so its border box
   tracks the columns. Injected by Publish::ContentProcessor#wrap_tables. */
.lunroo-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--lunroo-table-border);
  border-radius: 10px;
}

.lunroo-prose table,
.lunroo-prose .tiptap-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 1rem;
}

.lunroo-prose table th,
.lunroo-prose table td {
  border: 1px solid var(--lunroo-table-border);
  padding: 0.75rem 1rem;
  vertical-align: top;
  line-height: 1.5;
}

/* Outer edges come from the wrapper, so drop the doubled border. */
.lunroo-prose table tr > *:first-child { border-left: 0; }
.lunroo-prose table tr > *:last-child { border-right: 0; }
.lunroo-prose table tr:first-child > * { border-top: 0; }
.lunroo-prose table tr:last-child > * { border-bottom: 0; }

.lunroo-prose table th { color: var(--lunroo-text-strong); font-weight: 600; text-align: left; background: var(--lunroo-table-head-bg); }
.lunroo-prose table td { color: var(--lunroo-text); }

/* --- responsive ----------------------------------------------------------- */

@media (min-width: 1024px) {
  .lunroo-container { padding: 0 2rem; }
  .lunroo-index__title { font-size: 3rem; }
  .lunroo-post__title { font-size: 2.25rem; }
}

@media (max-width: 640px) {
  .lunroo-post__title { font-size: 1.75rem; }
  .lunroo-index__title { font-size: 1.875rem; }
  .lunroo-index__description { font-size: 1.0625rem; }
  .lunroo-main { padding: 2.5rem 0 3rem; }
  .lunroo-author { flex-direction: column; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}