@charset "UTF-8";

/* =========================================================
   RONNIEVERSE
   COMPONENT SYSTEM

   Purpose:
   Visual component layer for the Ronnieverse publishing
   subsystem.

   Rules:
   - c-rv* namespace owns Ronnieverse-native components.
   - Existing global gallery selectors may be overridden only
     for Ronnieverse publishing surfaces.
   - Existing tokens only.
   - No layout selectors.
   - No utility selectors.
   - No JS selectors.
   - No token declarations.
   - No data-attribute styling.
   - Components own visuals, internal spacing, media
     treatment, interaction feedback, and hierarchy.
========================================================= */


/* =========================================================
   01. RONNIEVERSE ROOT
========================================================= */

.c-rv {
  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-dual),
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-xl),
    var(--texture-blueprint-size-minor),
    var(--background-size-cover);

  background-position:
    var(--aura-position-top-center),
    var(--texture-page-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  background-blend-mode:
    var(--blend-aura),
    var(--blend-texture),
    var(--blend-normal);

  color:
    var(--fg-primary);
}


/* =========================================================
   02. RONNIEVERSE HERO
========================================================= */

.c-rvHero {
  overflow:
    var(--overflow-hidden);

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-dual),
    var(--texture-blueprint-major),
    var(--media-gradient-cinematic),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-xl),
    var(--texture-blueprint-size-major),
    var(--background-size-cover),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center),
    var(--texture-page-position),
    var(--media-position-center),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none),
    var(--background-repeat-none);

  background-blend-mode:
    var(--blend-aura),
    var(--blend-texture),
    var(--blend-normal),
    var(--blend-normal);

  border-block-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-block-end:
    var(--stroke-1)
    solid
    var(--border-light-subtle);

  box-shadow:
    var(--highlight-inset-standard),
    var(--shadow-ambient-md);
}


.c-rvHero--home {
  background-image:
    var(--aura-gradient-dual),
    var(--texture-blueprint-major),
    var(--media-gradient-cinematic),
    var(--background-gradient-brand);

  border-block-start-color:
    var(--brand-primary);
}


.c-rvHero--section {
  background-image:
    var(--aura-gradient-primary-soft),
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);

  border-block-start-color:
    var(--brand-accent);
}


.c-rvHero__eyebrow {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  width:
    max-content;

  padding-block-end:
    var(--space-2);

  border-block-end:
    var(--rail-size-md)
    solid
    var(--rail-primary);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-rvHero__title {
  max-width:
    var(--type-heading-display-measure);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-display-font);

  font-size:
    var(--type-heading-display-size);

  font-weight:
    var(--type-heading-display-weight);

  line-height:
    var(--type-heading-display-leading);

  letter-spacing:
    var(--type-heading-display-tracking);

  text-transform:
    var(--type-heading-display-transform);

  text-wrap:
    balance;

  text-shadow:
    var(--glow-primary-sm);
}


.c-rvHero__description {
  max-width:
    var(--type-lead-measure);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);
}


.c-rvHero__media {
  display:
    grid;

  place-items:
    var(--place-center);

  width:
    min(
      var(--content-full),
      var(--dimension-280)
    );

  max-height:
    var(--dimension-280);

  margin-inline:
    auto;

  aspect-ratio:
    var(--media-ratio-poster);

  overflow:
    var(--overflow-hidden);

  padding:
    var(--inset-0);

  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--aura-gradient-accent),
    var(--texture-blueprint-major),
    var(--background-gradient-raised);

  background-size:
    var(--aura-size-lg),
    var(--texture-blueprint-size-major),
    var(--background-size-cover);

  background-position:
    var(--aura-position-bottom-center),
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  background-blend-mode:
    var(--blend-aura),
    var(--blend-texture),
    var(--blend-normal);

  border:
    var(--stroke-1)
    solid
    var(--border-accent-default);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-accent);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-accent-sm);
}


.c-rvHero__actions {
  padding-block-start:
    var(--space-2);
}


/* =========================================================
   03. RONNIEVERSE NAVIGATION
========================================================= */

.c-rvNav {
  background-color:
    var(--surface-level-0-bg);

  border-block:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-sticky);
}


.c-rvNav__list {
  padding:
    var(--space-2);

  list-style:
    none;
}


.c-rvNav__item {
  margin:
    var(--inset-0);
}


.c-rvNav__link {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  justify-content:
    var(--justify-center);

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  border:
    var(--stroke-1)
    solid
    transparent;

  border-block-end-color:
    var(--border-light-subtle);

  border-radius:
    var(--radius-none);

  background-color:
    transparent;

  color:
    var(--fg-secondary);

  font-family:
    var(--type-nav-font);

  font-size:
    var(--type-nav-size);

  font-weight:
    var(--type-nav-weight);

  line-height:
    var(--type-nav-leading);

  letter-spacing:
    var(--type-nav-tracking);

  text-transform:
    var(--type-nav-transform);

  transition:
    var(--nav-link-transition);
}


.c-rvNav__link:hover {
  background-color:
    var(--surface-light-alpha-04);

  border-block-end-color:
    var(--brand-primary);

  color:
    var(--fg-primary);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-rvNav__link:focus-visible {
  box-shadow:
    var(--focus-ring);
}


.c-rvNav__link.is-active {
  background-color:
    var(--surface-primary-subtle);

  border-block-end-color:
    var(--brand-primary);

  color:
    var(--fg-brand-primary);

  box-shadow:
    var(--highlight-inset-soft);
}


/* =========================================================
   04. SECTION HEADER
========================================================= */

.c-rvSectionHeader {
  display:
    flex;

  flex-direction:
    column;

  max-width:
    var(--content-editorial);

  margin-block-end:
    var(--space-stack-gap-editorial);

  padding-inline-start:
    var(--space-5);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  gap:
    var(--space-stack-gap-compact);
}


.c-rvSectionHeader__eyebrow {
  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-rvSectionHeader__title {
  max-width:
    var(--type-heading-feature-measure);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-rvSectionHeader__description {
  max-width:
    var(--type-body-lg-measure);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);
}


.c-rvSectionHeader__action {
  padding-block-start:
    var(--space-2);
}


/* =========================================================
   05. PRIMARY EDITORIAL FEATURE
========================================================= */

.c-rvFeature {
  overflow:
    var(--overflow-hidden);

  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-lg),
    var(--texture-blueprint-size-minor),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center-end),
    var(--texture-feature-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  background-blend-mode:
    var(--blend-aura),
    var(--blend-texture),
    var(--blend-normal);

  border:
    var(--stroke-1)
    solid
    var(--border-light-subtle);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-radius:
    var(--radius-panel);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-low);

  transition:
    var(--transition-surface);
}


.c-rvFeature:hover {
  border-color:
    var(--border-light-default);

  border-inline-start-color:
    var(--brand-primary);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-primary-sm);
}


.c-rvFeature--primary {
  background-color:
    var(--surface-panel-raised-bg);

  background-image:
    var(--aura-gradient-dual),
    var(--texture-blueprint-major),
    var(--background-gradient-raised);

  border-color:
    var(--border-primary-default);

  border-inline-start-color:
    var(--brand-primary);

  box-shadow:
    var(--surface-panel-raised-highlight),
    var(--surface-panel-raised-shadow),
    var(--glow-primary-md);
}


.c-rvFeature--secondary {
  background-image:
    var(--aura-gradient-accent-soft),
    var(--texture-diagonal-light),
    var(--background-gradient-dark);

  border-color:
    var(--border-accent-subtle);

  border-inline-start-color:
    var(--brand-accent);
}


.c-rvFeature__media {
  display:
    grid;

  place-items:
    var(--place-center);

  width:
    var(--content-full);

  max-height:
    var(--dimension-540);

  overflow:
    var(--overflow-hidden);

  aspect-ratio:
    var(--feature-media-ratio);

  background-color:
    var(--media-bg-dark);

  background-image:
    var(--media-gradient-cinematic),
    var(--texture-blueprint-minor),
    var(--media-placeholder-gradient);

  background-size:
    var(--background-size-cover),
    var(--texture-blueprint-size-minor),
    var(--background-size-cover);

  background-position:
    var(--media-position-center),
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  border:
    var(--stroke-1)
    solid
    var(--feature-media-border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--feature-media-shadow);
}


.c-rvFeature__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--feature-media-fit);

  object-position:
    var(--feature-media-position);

  filter:
    var(--feature-media-filter);

  transition:
    var(--feature-media-transition);
}


.c-rvFeature:hover .c-rvFeature__image {
  transform:
    scale(
      var(--media-scale-hover)
    );
}


.c-rvFeature__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-stack-gap);

  padding:
    var(--space-card-padding-lg);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);
}


.c-rvFeature__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-badge-gap);
}


.c-rvFeature__title {
  max-width:
    var(--type-heading-feature-measure);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-rvFeature__excerpt {
  max-width:
    var(--measure-reading);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);
}


.c-rvFeature__actions {
  padding-block-start:
    var(--space-2);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  line-height:
    var(--type-body-sm-leading);
}


/* =========================================================
   06. UNIVERSAL CONTENT CARD
========================================================= */

.c-rvCard {
  height:
    var(--content-full);

  overflow:
    var(--overflow-hidden);

  background-color:
    var(--surface-level-1-bg);

  border:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-block-start:
    var(--rail-size-md)
    solid
    var(--rail-muted);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-low);

  transition:
    var(--transition-interactive);
}


.c-rvCard:hover {
  background-color:
    var(--surface-card-bg);

  border-color:
    var(--border-light-default);

  border-block-start-color:
    var(--brand-primary);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-hover-default);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-rvCard:focus-within {
  border-color:
    var(--state-focus-border);

  box-shadow:
    var(--focus-ring);
}


.c-rvCard--feature {
  border-block-start-color:
    var(--brand-primary);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--background-gradient-surface);

  background-size:
    var(--aura-size-md),
    var(--background-size-cover);

  background-position:
    var(--aura-position-top-end),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);
}


.c-rvCard--article {
  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--texture-panel-image);

  background-size:
    var(--texture-panel-size);

  background-position:
    var(--texture-panel-position);

  border-block-start-color:
    var(--rail-neutral);
}


.c-rvCard--cartoon {

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-accent-soft),
    var(--texture-dot-accent),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-sm),
    var(--texture-density-loose),
    var(--background-size-cover);

  background-position:
    var(--aura-position-top-end),
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  border-color:
    var(--border-accent-default);

  border-block-start-color:
    var(--brand-accent);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-accent);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-default),
    var(--glow-accent-sm);
}


.c-rvCard--issue {

  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-sm),
    var(--texture-blueprint-size-minor),
    var(--background-size-cover);

  background-position:
    var(--aura-position-top-end),
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  border-color:
    var(--border-primary-default);

  border-block-start-color:
    var(--brand-primary);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-primary);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-default),
    var(--glow-primary-sm);
}


.c-rvCard--announcement {
  border-color:
    var(--border-accent-default);

  border-block-start-color:
    var(--brand-accent);

  background-image:
    var(--background-transition-accent),
    var(--texture-diagonal-light);

  box-shadow:
    var(--highlight-inset-soft);
}


.c-rvCard--compact {
  background-color:
    transparent;

  border-color:
    var(--border-light-quiet);

  border-block-start-color:
    var(--rail-muted);

  box-shadow:
    none;
}


.c-rvCard__link {
  display:
    flex;

  flex-direction:
    column;

  height:
    var(--content-full);

  color:
    var(--fg-primary);
}


.c-rvCard__link:hover {
  color:
    var(--fg-primary);
}


.c-rvCard__link:focus-visible {
  box-shadow:
    var(--focus-ring);
}


.c-rvCard__media {
  width:
    var(--content-full);

  max-height:
    var(--dimension-180);

  overflow:
    var(--overflow-hidden);

  aspect-ratio:
    var(--card-media-ratio);

  background-color:
    var(--media-placeholder-bg);

  border-block-end:
    var(--stroke-1)
    solid
    var(--card-media-border);
}


.c-rvCard__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--card-media-fit);

  object-position:
    var(--card-media-position);

  filter:
    var(--card-media-filter);

  transition:
    var(--card-media-transition);
}


.c-rvCard:hover .c-rvCard__image {
  filter:
    var(--card-media-filter-hover);

  transform:
    scale(
      var(--media-scale-hover)
    );
}


.c-rvCard__body {
  display:
    flex;

  flex-direction:
    column;

  height:
    var(--content-full);

  gap:
    var(--space-3);

  padding:
    var(--space-card-padding);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);
}


.c-rvCard__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-badge-gap);
}


.c-rvCard__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  text-wrap:
    balance;
}


.c-rvCard__excerpt {
  max-width:
    var(--measure-default);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);
}


.c-rvCard__footer {
  margin-block-start:
    auto;

  padding-block-start:
    var(--space-3);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


/* =========================================================
   06A. EDITORIAL CARD ART DIRECTION
========================================================= */

.c-rvCard--feature .c-rvCard__media {

  max-height:
    var(--dimension-540);

  aspect-ratio:
    var(--media-ratio-feature);
}

.c-rvCard--feature .c-rvCard__title {
  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);
}

.c-rvCard--article .c-rvCard__media {
  max-height:
    var(--dimension-180);

  aspect-ratio:
    var(--media-ratio-card-wide);
}

.c-rvCard--article .c-rvCard__title {
  max-width:
    var(--measure-compact);
}

.c-rvCard--cartoon .c-rvCard__media {

  max-height:
    var(--dimension-540);

  aspect-ratio:
    var(--media-ratio-feature);

  background-color:
    var(--media-bg-dark);

  box-shadow:
    var(--highlight-inset-soft),
    var(--media-shadow-raised);
}

.c-rvCard--cartoon .c-rvCard__image {

  object-fit:
    var(--character-media-fit);

  object-position:
    var(--character-media-position);

  filter:
    var(--character-media-filter);
}

.c-rvCard--cartoon .c-rvCard__title {
  color:
    var(--fg-brand-accent);
}

.c-rvCard--issue .c-rvCard__media {

  max-height:
    var(--dimension-540);

  aspect-ratio:
    var(--media-ratio-poster);

  background-color:
    var(--surface-level-0-bg);

  box-shadow:
    var(--highlight-inset-soft),
    var(--media-shadow-raised);
}

.c-rvCard--issue .c-rvCard__image {

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}

.c-rvCard--issue .c-rvCard__title {

  color:
    var(--fg-primary);

  font-size:
    var(--text-fluid-lg);

  line-height:
    var(--lh-tight);
}

.c-rvCard--announcement .c-rvCard__media {
  max-height:
    var(--dimension-140);

  aspect-ratio:
    var(--media-ratio-banner);
}

.c-rvCard--announcement .c-rvCard__title {
  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-card-size);

  letter-spacing:
    var(--type-heading-feature-tracking);
}

.c-rvCard--compact .c-rvCard__media {
  display:
    none;
}

.c-rvCard--compact .c-rvCard__body {
  gap:
    var(--space-3);

  padding:
    var(--space-card-padding-sm);
}

.c-rvCard--compact .c-rvCard__title {
  font-size:
    var(--text-fluid-lg);

  line-height:
    var(--lh-tight);
}

.c-rvCard--compact .c-rvCard__excerpt {
  display:
    none;
}


/* =========================================================
   06B. FEATURE VARIATION ART DIRECTION
========================================================= */

.c-rvFeature--primary .c-rvFeature__media {

  max-height:
    var(--dimension-540);

  border-color:
    var(--border-primary-default);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-primary-sm);
}

.c-rvFeature--primary .c-rvFeature__title {
  color:
    var(--fg-primary);

  text-shadow:
    var(--glow-primary-sm);
}

.c-rvFeature--secondary .c-rvFeature__media {

  max-height:
    var(--dimension-540);

  border-color:
    var(--border-accent-default);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-accent-sm);
}

.c-rvFeature--secondary .c-rvFeature__title {
  color:
    var(--fg-brand-accent);
}


/* =========================================================
   06C. MEDIA DISCIPLINE
========================================================= */

.c-rvFeature__image,
.c-rvCard__image,
.c-rvCartoon__image,
.c-rvIssue__image,
.c-rvGallery__image,
.c-rvMedia__asset {
  display:
    block;
}

.c-rvFeature__image,
.c-rvCard__image,
.c-rvCartoon__image,
.c-rvIssue__image {

  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}


/* =========================================================
   06D. RESPONSIVE COMPONENT TUNING
========================================================= */

@media (max-width: 64rem) {

  .c-rvHero__media {
    width:
      min(
        var(--content-full),
        var(--dimension-240)
      );

    max-height:
      var(--dimension-240);
  }

  .c-rvFeature__media,
  .c-rvFeature--primary .c-rvFeature__media {
    max-height:
      var(--dimension-540);
  }

  .c-rvCard--feature .c-rvCard__media,
  .c-rvCard--issue .c-rvCard__media {
    max-height:
      var(--dimension-540);
  }

  .c-rvIssue__cover {
    width:
      min(
        var(--content-full),
        var(--dimension-240)
      );
  }

}

@media (max-width: 48rem) {

  .c-rvHero__media {
    width:
      min(
        var(--content-full),
        var(--dimension-220)
      );

    max-height:
      var(--dimension-220);
  }

  .c-rvFeature__media,
  .c-rvFeature--primary .c-rvFeature__media,
  .c-rvFeature--secondary .c-rvFeature__media {
    max-height:
      var(--dimension-280);
  }

  .c-rvCard__media,
  .c-rvCard--article .c-rvCard__media {
    max-height:
      var(--dimension-160);
  }

  .c-rvCard--feature .c-rvCard__media,
  .c-rvCard--cartoon .c-rvCard__media,
  .c-rvCard--issue .c-rvCard__media {
    max-height:
      var(--dimension-280);
  }

  .c-rvCard--announcement .c-rvCard__media {
    max-height:
      var(--dimension-130);
  }

  .c-rvIssue__cover {
    width:
      min(
        var(--content-full),
        var(--dimension-220)
      );
  }

  .c-rvGallery__image {
    max-height:
      var(--dimension-200);
  }

  .c-rvSectionHeader,
  .c-rvArticle__header {
    padding-inline-start:
      var(--space-4);
  }

}

@media (max-width: 36rem) {

  .c-rvHero__media,
  .c-rvIssue__cover {
    width:
      min(
        var(--content-full),
        var(--dimension-200)
      );
  }

  .c-rvFeature__body,
  .c-rvBusinessCTA,
  .c-rvIssue__body {
    padding:
      var(--space-card-padding);
  }

  .c-rvCard__body {
    padding:
      var(--space-card-padding-sm);
  }

}


/* =========================================================
   06E. MAIN PAGE REBUILD ART DIRECTION

   Purpose:
   Final component tuning for the rebuilt Ronnieverse home.

   Rules:
   - Existing selectors only.
   - Existing tokens only.
   - No layout ownership.
   - No new component names.
========================================================= */


/* =========================================================
   ROAD LOG
   PRIMARY FEATURE + SUPPORTING RAIL
========================================================= */

.c-rvFeature--primary {
  border-inline-start-color:
    var(--brand-primary);

  background-image:
    var(--aura-gradient-primary-soft),
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);
}

.c-rvFeature--primary .c-rvFeature__body {
  gap:
    var(--space-stack-gap-relaxed);
}

.c-rvFeature--primary .c-rvFeature__meta {
  padding-block-end:
    var(--space-2);
}

.c-rvFeature--primary .c-rvFeature__title {
  max-width:
    var(--type-heading-feature-measure);

  color:
    var(--fg-primary);

  text-shadow:
    var(--glow-primary-sm);
}

.c-rvFeature--primary .c-rvFeature__excerpt {
  max-width:
    var(--measure-reading);
}

.c-rvCard--compact.c-rvCard--article {
  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--background-transition-primary);

  border-color:
    var(--border-light-quiet);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-muted);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-radius:
    var(--radius-none);

  box-shadow:
    var(--highlight-inset-soft);
}

.c-rvCard--compact.c-rvCard--article:hover {
  background-color:
    var(--surface-primary-subtle);

  border-inline-start-color:
    var(--brand-primary);

  border-color:
    var(--border-primary-subtle);

  box-shadow:
    var(--highlight-inset-standard);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}

.c-rvCard--compact.c-rvCard--article .c-rvCard__title {
  max-width:
    var(--measure-compact);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--text-fluid-xl);

  line-height:
    var(--lh-tight);
}

.c-rvCard--compact.c-rvCard--article .c-rvCard__footer {
  color:
    var(--fg-tertiary);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);
}


/* =========================================================
   CARTOONS
========================================================= */

.c-rvFeature--secondary {
  background-image:
    var(--aura-gradient-accent-soft),
    var(--texture-dot-accent),
    var(--background-gradient-dark);

  border-inline-start-color:
    var(--brand-accent);
}

.c-rvFeature--secondary .c-rvFeature__media {
  background-color:
    var(--media-bg-dark);

  background-image:
    var(--aura-gradient-accent),
    var(--background-gradient-raised);

  border-color:
    var(--border-accent-default);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-accent-sm);
}

.c-rvFeature--secondary .c-rvFeature__image {

  object-fit:
    var(--feature-media-fit);

  object-position:
    var(--feature-media-position);

  filter:
    var(--feature-media-filter);
}

.c-rvFeature--secondary .c-rvFeature__title {
  color:
    var(--fg-brand-accent);

  text-shadow:
    var(--glow-accent-sm);
}

.c-rvCard--cartoon.c-rvCard--compact {

  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--aura-gradient-accent-soft),
    var(--background-transition-accent);

  border:
    var(--stroke-1)
    solid
    var(--border-accent-subtle);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-accent);

  border-radius:
    var(--radius-none);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-low);
}

.c-rvCard--cartoon.c-rvCard--compact:hover {
  background-color:
    var(--surface-accent-subtle);

  border-color:
    var(--border-accent-default);

  border-inline-start-color:
    var(--brand-accent);

  box-shadow:
    var(--highlight-inset-standard),
    var(--glow-accent-sm);
}

.c-rvCard--cartoon.c-rvCard--compact .c-rvCard__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--text-fluid-xl);

  line-height:
    var(--lh-tight);
}

.c-rvCard--cartoon.c-rvCard--compact .c-rvCard__footer {
  color:
    var(--fg-brand-accent);

  border-block-start-color:
    var(--border-accent-subtle);
}


/* =========================================================
   BUILD LOG
========================================================= */

.c-rvCard--article {
  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--texture-blueprint-minor);

  background-size:
    var(--texture-blueprint-size-minor);

  background-position:
    var(--texture-panel-position);

  border-block-start-color:
    var(--rail-neutral);
}

.c-rvCard--article .c-rvCard__body {
  gap:
    var(--space-stack-gap);
}

.c-rvCard--article .c-rvCard__meta {
  margin-block-end:
    var(--space-2);
}

.c-rvCard--article .c-rvCard__footer {
  color:
    var(--fg-tertiary);
}


/* =========================================================
   MILE MARKERS
========================================================= */

.c-rvCard--announcement.c-rvCard--compact {
  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--texture-diagonal-light),
    var(--background-transition-accent);

  border:
    var(--stroke-1)
    solid
    var(--border-accent-subtle);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-primary);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-radius:
    var(--radius-none);

  box-shadow:
    var(--highlight-inset-soft);
}

.c-rvCard--announcement.c-rvCard--compact:hover {
  background-color:
    var(--surface-primary-subtle);

  border-color:
    var(--border-primary-default);

  border-inline-start-color:
    var(--brand-primary);

  box-shadow:
    var(--highlight-inset-standard),
    var(--glow-primary-sm);
}

.c-rvCard--announcement.c-rvCard--compact .c-rvCard__body {
  gap:
    var(--space-stack-gap-compact);

  padding:
    var(--space-card-padding);
}

.c-rvCard--announcement.c-rvCard--compact .c-rvCard__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--text-fluid-xl);

  line-height:
    var(--lh-tight);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);
}

.c-rvCard--announcement.c-rvCard--compact .c-rvCard__footer {
  color:
    var(--fg-secondary);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);
}


/* =========================================================
   EXPLORE
========================================================= */

.c-rvExplore {
  background-color:
    transparent;

  background-image:
    var(--aura-gradient-accent-soft),
    var(--background-gradient-dark);

  border-block:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-radius:
    var(--radius-none);

  box-shadow:
    none;
}

.c-rvExplore__header {
  padding-inline-start:
    var(--space-5);

  padding-block-end:
    var(--space-stack-gap-relaxed);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-accent);

  border-block-end:
    var(--stroke-1)
    solid
    var(--border-light-quiet);
}

.c-rvExplore__list {
  padding-block-start:
    var(--space-stack-gap-relaxed);
}

.c-rvExplore__item {
  min-height:
    var(--control-comfortable-h);

  padding:
    var(--space-card-padding-lg);

  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--background-transition-primary);

  border:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-muted);

  border-radius:
    var(--radius-none);

  box-shadow:
    var(--highlight-inset-soft);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--text-fluid-xl);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);
}

.c-rvExplore__item:hover {
  background-color:
    var(--surface-accent-subtle);

  background-image:
    var(--background-transition-accent);

  border-color:
    var(--border-accent-default);

  border-inline-start-color:
    var(--brand-accent);

  box-shadow:
    var(--highlight-inset-standard),
    var(--glow-accent-sm);

  color:
    var(--fg-primary);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


/* =========================================================
   SECTION RHYTHM
========================================================= */

.c-rvSectionHeader {
  max-width:
    var(--content-editorial);

  padding-inline-start:
    var(--space-5);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);
}

.c-rvSectionHeader__title {
  max-width:
    var(--type-heading-feature-measure);
}

.c-rvSectionHeader__description {
  max-width:
    var(--measure-reading);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 64rem) {

  .c-rvCard--compact.c-rvCard--article .c-rvCard__title,
  .c-rvCard--cartoon.c-rvCard--compact .c-rvCard__title,
  .c-rvCard--announcement.c-rvCard--compact .c-rvCard__title,
  .c-rvExplore__item {
    font-size:
      var(--text-fluid-lg);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 48rem) {

  .c-rvCard--compact.c-rvCard--article,
  .c-rvCard--cartoon.c-rvCard--compact,
  .c-rvCard--announcement.c-rvCard--compact,
  .c-rvExplore__item {
    border-inline-start-width:
      var(--rail-size-md);
  }

  .c-rvExplore__item {
    min-height:
      var(--control-comfortable-h);

    padding:
      var(--space-card-padding);
  }

  .c-rvExplore__header,
  .c-rvSectionHeader {
    padding-inline-start:
      var(--space-4);
  }

}


/* =========================================================
   07. METADATA + TAXONOMY
========================================================= */

.c-rvMeta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-inline-gap);
}


.c-rvMeta__item {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  gap:
    var(--space-inline-gap-xs);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-rvMeta__label {
  color:
    var(--fg-secondary);
}


.c-rvMeta__value {
  color:
    var(--fg-primary);
}


.c-rvBadge {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  min-height:
    var(--badge-h-sm);

  padding-inline:
    var(--badge-padding-x-sm);

  background-color:
    var(--badge-bg);

  border:
    var(--stroke-1)
    solid
    var(--badge-border);

  border-radius:
    var(--badge-radius);

  box-shadow:
    var(--badge-shadow);

  color:
    var(--badge-text);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);

  transition:
    var(--badge-transition);
}


.c-rvBadge--section {
  background-color:
    var(--badge-primary-bg);

  border-color:
    var(--badge-primary-border);

  color:
    var(--badge-primary-text);
}


.c-rvBadge--series {
  background-color:
    var(--badge-accent-bg);

  border-color:
    var(--badge-accent-border);

  color:
    var(--badge-accent-text);
}


.c-rvBadge--character {
  background-color:
    var(--surface-accent-standard);

  border-color:
    var(--border-accent-strong);

  color:
    var(--fg-brand-accent);

  box-shadow:
    var(--glow-accent-sm);
}


.c-rvSeries {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  color:
    var(--fg-tertiary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-rvSeries__label {
  color:
    var(--fg-tertiary);
}


.c-rvSeries__name {
  color:
    var(--fg-brand-primary);
}


/* =========================================================
   08. FILTER SYSTEM
========================================================= */

.c-rvFilter {
  padding:
    var(--space-2);

  background-color:
    var(--surface-recessed-bg);

  border:
    var(--stroke-1)
    solid
    var(--surface-recessed-border);

  border-radius:
    var(--radius-panel);

  box-shadow:
    var(--surface-recessed-shadow);
}


.c-rvFilter__label {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


.c-rvFilter__list {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-filter-gap);

  padding:
    var(--inset-0);

  list-style:
    none;
}


.c-rvFilter__option {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  justify-content:
    var(--justify-center);

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  background-color:
    var(--chip-bg);

  border:
    var(--stroke-1)
    solid
    var(--chip-border);

  border-radius:
    var(--chip-radius);

  color:
    var(--chip-text);

  font-family:
    var(--type-control-font);

  font-size:
    var(--type-control-size);

  font-weight:
    var(--type-control-weight);

  line-height:
    var(--type-control-leading);

  letter-spacing:
    var(--type-control-tracking);

  text-transform:
    var(--type-control-transform);

  transition:
    var(--transition-interactive);
}


.c-rvFilter__option:hover {
  background-color:
    var(--chip-bg-hover);

  border-color:
    var(--chip-border-hover);

  color:
    var(--chip-text-hover);
}


.c-rvFilter__option:focus-visible {
  box-shadow:
    var(--focus-ring);
}


.c-rvFilter__option.is-selected {
  background-color:
    var(--chip-bg-selected);

  border-color:
    var(--chip-border-selected);

  color:
    var(--chip-text-selected);

  box-shadow:
    var(--state-selected-shadow);
}


/* =========================================================
   09. LONG-FORM ARTICLE
========================================================= */

.c-rvArticle {
  color:
    var(--fg-primary);
}


.c-rvArticle__header {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-stack-gap-relaxed);

  padding-inline-start:
    var(--space-6);

  padding-block-end:
    var(--space-stack-gap-editorial);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-default);
}


.c-rvArticle__eyebrow {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-rvArticle__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-display-font);

  font-size:
    var(--type-heading-display-size);

  font-weight:
    var(--type-heading-display-weight);

  line-height:
    var(--type-heading-display-leading);

  letter-spacing:
    var(--type-heading-display-tracking);

  text-transform:
    var(--type-heading-display-transform);

  text-wrap:
    balance;

  text-shadow:
    var(--glow-primary-sm);
}


.c-rvArticle__subtitle {
  max-width:
    var(--type-lead-measure);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);
}


.c-rvArticle__meta {
  color:
    var(--fg-tertiary);
}


.c-rvArticle__hero {
  overflow:
    var(--overflow-hidden);

  max-height:
    var(--dimension-540);

  aspect-ratio:
    var(--hero-media-ratio);

  background-color:
    var(--media-placeholder-bg);

  border:
    var(--stroke-1)
    solid
    var(--hero-media-border);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--hero-media-shadow);
}


.c-rvArticle__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-stack-gap-editorial);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);
}


.c-rvArticle__footer {
  padding-block-start:
    var(--space-stack-gap-editorial);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);
}


/* =========================================================
   10. ARTICLE MEDIA + PULL QUOTE
========================================================= */

.c-rvPullquote {
  padding:
    var(--space-card-padding-lg);

  background-color:
    transparent;

  background-image:
    var(--aura-gradient-primary-soft),
    var(--background-transition-primary);

  background-size:
    var(--aura-size-md),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center-start),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-none);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-block:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-radius:
    var(--radius-none);

  box-shadow:
    var(--highlight-inset-soft);

  color:
    var(--fg-primary);

  font-family:
    var(--type-quote-font);

  font-size:
    var(--type-quote-size);

  font-weight:
    var(--type-quote-weight);

  line-height:
    var(--type-quote-leading);

  letter-spacing:
    var(--type-quote-tracking);
}


.c-rvFigure {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-3);
}


.c-rvFigure__media {
  overflow:
    var(--overflow-hidden);

  max-height:
    var(--dimension-540);

  background-color:
    var(--media-bg-muted);

  border:
    var(--stroke-1)
    solid
    var(--media-border-default);

  border-radius:
    var(--media-radius-md);

  box-shadow:
    var(--media-shadow-default);
}


.c-rvFigure__caption {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);

  letter-spacing:
    var(--type-caption-tracking);
}


.c-rvMedia {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-3);
}


.c-rvMedia__asset {
  width:
    var(--content-full);

  max-height:
    var(--dimension-540);

  object-fit:
    var(--media-fit-cover);

  object-position:
    var(--media-position-center);

  border:
    var(--stroke-1)
    solid
    var(--media-border-default);

  border-radius:
    var(--media-radius-md);

  box-shadow:
    var(--media-shadow-default);
}


.c-rvMedia__caption {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);

  letter-spacing:
    var(--type-caption-tracking);
}


/* =========================================================
   11. CARTOON EXPERIENCE
========================================================= */

.c-rvCartoon {
  overflow:
    var(--overflow-hidden);

  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--aura-gradient-accent),
    var(--texture-dot-accent),
    var(--background-gradient-dark);

  background-size:
    var(--aura-size-lg),
    var(--texture-density-loose),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center-end),
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  border:
    var(--stroke-1)
    solid
    var(--border-accent-default);

  border-block-start:
    var(--rail-size-lg)
    solid
    var(--rail-accent);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-accent-sm);
}


.c-rvCartoon__header {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-stack-gap-compact);

  padding:
    var(--space-card-padding-lg);

  border-block-end:
    var(--divider-size-thin)
    solid
    var(--divider-accent);
}


.c-rvCartoon__media {
  display:
    grid;

  place-items:
    var(--place-center);

  width:
    var(--content-full);

  max-height:
    var(--dimension-280);

  overflow:
    var(--overflow-hidden);

  aspect-ratio:
    var(--character-media-ratio);

  background-color:
    var(--media-bg-dark);
}


.c-rvCartoon__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--character-media-fit);

  object-position:
    var(--character-media-position);

  filter:
    var(--character-media-filter);

  transition:
    var(--media-transition-complete);
}


.c-rvCartoon__caption {
  padding:
    var(--space-card-padding);

  color:
    var(--fg-primary);

  font-family:
    var(--type-callout-font);

  font-size:
    var(--type-callout-size);

  font-weight:
    var(--type-callout-weight);

  line-height:
    var(--type-callout-leading);

  letter-spacing:
    var(--type-callout-tracking);
}


.c-rvCartoon__note {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);
}


.c-rvCartoon__footer {
  padding:
    var(--space-card-padding);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);
}


.c-rvCartoon--panel {
  background-color:
    var(--surface-level-3-bg);

  border-color:
    var(--border-accent-strong);
}


/* =========================================================
   12. MAGAZINE ISSUE
========================================================= */

.c-rvIssue {
  overflow:
    var(--overflow-hidden);

  background-color:
    var(--surface-panel-raised-bg);

  background-image:
    var(--aura-gradient-dual),
    var(--texture-blueprint-major),
    var(--background-gradient-raised);

  background-size:
    var(--aura-size-xl),
    var(--texture-blueprint-size-major),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center),
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none);

  background-blend-mode:
    var(--blend-aura),
    var(--blend-texture),
    var(--blend-normal);

  border:
    var(--stroke-1)
    solid
    var(--border-primary-default);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--surface-panel-raised-highlight),
    var(--surface-panel-raised-shadow),
    var(--glow-primary-md);
}


.c-rvIssue__cover {
  width:
    min(
      var(--content-full),
      var(--dimension-280)
    );

  margin-inline:
    auto;

  aspect-ratio:
    var(--media-ratio-poster);

  overflow:
    var(--overflow-hidden);

  background-color:
    var(--media-placeholder-bg);

  background-image:
    var(--media-gradient-dual-brand),
    var(--texture-blueprint-major),
    var(--media-placeholder-gradient);

  background-size:
    var(--background-size-cover),
    var(--texture-blueprint-size-major),
    var(--background-size-cover);

  background-position:
    var(--media-position-center),
    var(--texture-panel-position),
    var(--media-position-center);

  border:
    var(--stroke-1)
    solid
    var(--feature-media-border);

  border-radius:
    var(--media-radius-lg);

  box-shadow:
    var(--feature-media-shadow);
}


.c-rvIssue__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-feature);
}


.c-rvIssue__body {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-stack-gap-relaxed);

  padding:
    var(--space-card-padding-lg);
}


.c-rvIssue__meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-badge-gap);
}


.c-rvIssue__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;
}


.c-rvIssue__description {
  max-width:
    var(--type-body-lg-measure);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-lg-font);

  font-size:
    var(--type-body-lg-size);

  font-weight:
    var(--type-body-lg-weight);

  line-height:
    var(--type-body-lg-leading);

  letter-spacing:
    var(--type-body-lg-tracking);
}


.c-rvIssue__actions {
  padding-block-start:
    var(--space-2);
}


.c-rvIssue__stories {
  padding-block-start:
    var(--space-stack-gap);
}


/* =========================================================
   13. MAGAZINE SPREAD
========================================================= */

.c-rvSpread {
  display:
    flex;

  flex-direction:
    column;

  gap:
    var(--space-3);

  padding:
    var(--space-card-padding);

  background-color:
    var(--surface-card-bg);

  border:
    var(--stroke-1)
    solid
    var(--surface-card-border);

  border-radius:
    var(--radius-card);

  box-shadow:
    var(--surface-card-highlight),
    var(--surface-card-shadow);
}


.c-rvSpread__media {
  overflow:
    var(--overflow-hidden);

  max-height:
    var(--dimension-280);

  aspect-ratio:
    var(--media-ratio-feature);

  border:
    var(--stroke-1)
    solid
    var(--media-border-default);

  border-radius:
    var(--media-radius-md);

  box-shadow:
    var(--media-shadow-default);
}


.c-rvSpread__caption {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);

  letter-spacing:
    var(--type-caption-tracking);
}


/* =========================================================
   14. GALLERY
========================================================= */

.c-rvGallery {
  background-color:
    var(--surface-section-bg);

  border:
    var(--stroke-1)
    solid
    var(--surface-section-border);

  border-radius:
    var(--radius-panel);

  box-shadow:
    var(--surface-section-shadow);
}


.c-rvGallery__item {
  overflow:
    var(--overflow-hidden);

  background-color:
    var(--surface-card-bg);

  border:
    var(--stroke-1)
    solid
    var(--gallery-media-border);

  border-radius:
    var(--gallery-media-radius);

  box-shadow:
    var(--gallery-media-shadow);

  transition:
    var(--gallery-media-transition);
}


.c-rvGallery__item:hover {
  border-color:
    var(--border-primary-default);

  box-shadow:
    var(--elevation-hover-default);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-rvGallery__button {
  width:
    var(--content-full);

  color:
    var(--fg-primary);
}


.c-rvGallery__button:focus-visible {
  box-shadow:
    var(--focus-ring);
}


.c-rvGallery__image {
  width:
    var(--content-full);

  max-height:
    var(--dimension-240);

  aspect-ratio:
    var(--gallery-media-ratio);

  object-fit:
    var(--gallery-media-fit);

  object-position:
    var(--gallery-media-position);

  filter:
    var(--gallery-media-filter);

  transition:
    var(--gallery-media-transition);
}


.c-rvGallery__item:hover .c-rvGallery__image {
  filter:
    var(--gallery-media-filter-hover);

  transform:
    scale(
      var(--gallery-media-scale-hover)
    );
}


.c-rvGallery__caption {
  padding:
    var(--space-card-padding-sm);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-caption-font);

  font-size:
    var(--type-caption-size);

  font-weight:
    var(--type-caption-weight);

  line-height:
    var(--type-caption-leading);
}


/* =========================================================
   15. RELATED CONTENT
========================================================= */

.c-rvRelated {
  padding:
    var(--space-card-padding-lg);

  background-color:
    transparent;

  border-block:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-radius:
    var(--radius-none);

  box-shadow:
    none;
}


.c-rvRelated__header {
  margin-block-end:
    var(--space-stack-gap-relaxed);
}


.c-rvRelated__list {
  display:
    grid;

  gap:
    var(--gap-grid);
}


.c-rvRelated__item {
  min-width:
    var(--inset-0);
}


/* =========================================================
   16. EXPLORE
========================================================= */

.c-rvExplore {
  padding:
    var(--space-card-padding-lg);

  background-color:
    transparent;

  background-image:
    var(--background-transition-accent);

  background-size:
    var(--background-size-cover);

  background-position:
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none);

  border-block:
    var(--stroke-1)
    solid
    var(--border-accent-subtle);

  border-radius:
    var(--radius-none);

  box-shadow:
    none;
}


.c-rvExplore__header {
  margin-block-end:
    var(--space-stack-gap-relaxed);
}


.c-rvExplore__list {
  padding:
    var(--inset-0);
}


.c-rvExplore__item {
  display:
    flex;

  align-items:
    var(--align-center);

  justify-content:
    var(--justify-between);

  min-height:
    var(--control-comfortable-h);

  padding:
    var(--space-card-padding);

  background-color:
    transparent;

  border:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-muted);

  border-radius:
    var(--radius-none);

  box-shadow:
    none;

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);

  transition:
    var(--transition-interactive);
}


.c-rvExplore__item:hover {
  background-color:
    var(--surface-accent-subtle);

  border-color:
    var(--border-accent-default);

  border-inline-start-color:
    var(--brand-accent);

  box-shadow:
    var(--highlight-inset-soft);

  color:
    var(--fg-primary);

  transform:
    translateY(
      var(--state-hover-translate-y)
    );
}


.c-rvExplore__item:focus-visible {
  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   17. BUSINESS BRIDGE
========================================================= */

.c-rvBusinessCTA {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    var(--align-center);

  gap:
    var(--space-stack-gap-relaxed);

  padding:
    var(--space-card-padding-lg);

  background-color:
    var(--surface-panel-raised-bg);

  background-image:
    var(--aura-gradient-primary),
    var(--texture-blueprint-major),
    var(--media-gradient-cinematic),
    var(--background-gradient-primary);

  background-size:
    var(--aura-size-xl),
    var(--texture-blueprint-size-major),
    var(--background-size-cover),
    var(--background-size-cover);

  background-position:
    var(--aura-position-center),
    var(--texture-panel-position),
    var(--media-position-center),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-none),
    var(--background-repeat-all),
    var(--background-repeat-none),
    var(--background-repeat-none);

  background-blend-mode:
    var(--blend-aura),
    var(--blend-texture),
    var(--blend-normal),
    var(--blend-normal);

  border:
    var(--stroke-1)
    solid
    var(--border-primary-strong);

  border-block-start:
    var(--rail-size-lg)
    solid
    var(--rail-primary);

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--surface-panel-raised-highlight),
    var(--surface-panel-raised-shadow),
    var(--glow-primary-md);

  text-align:
    var(--align-center);
}


.c-rvBusinessCTA__eyebrow {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-eyebrow-font);

  font-size:
    var(--type-eyebrow-size);

  font-weight:
    var(--type-eyebrow-weight);

  line-height:
    var(--type-eyebrow-leading);

  letter-spacing:
    var(--type-eyebrow-tracking);

  text-transform:
    var(--type-eyebrow-transform);
}


.c-rvBusinessCTA__title {
  max-width:
    var(--type-heading-feature-measure);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-feature-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);

  text-wrap:
    balance;

  text-shadow:
    var(--glow-primary-sm);
}


.c-rvBusinessCTA__description {
  max-width:
    var(--type-lead-measure);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-lead-font);

  font-size:
    var(--type-lead-size);

  font-weight:
    var(--type-lead-weight);

  line-height:
    var(--type-lead-leading);

  letter-spacing:
    var(--type-lead-tracking);
}


.c-rvBusinessCTA__actions {
  justify-content:
    var(--justify-center);

  padding-block-start:
    var(--space-2);
}


/* =========================================================
   18. SHARE
========================================================= */

.c-rvShare {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-inline-gap);

  padding:
    var(--space-card-padding-sm);

  background-color:
    var(--surface-recessed-bg);

  border:
    var(--stroke-1)
    solid
    var(--surface-recessed-border);

  border-radius:
    var(--radius-panel);

  box-shadow:
    var(--surface-recessed-shadow);
}


.c-rvShare__label {
  color:
    var(--fg-tertiary);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}


.c-rvShare__actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    var(--align-center);

  gap:
    var(--space-inline-gap-sm);
}


.c-rvShare__action {
  display:
    inline-flex;

  align-items:
    var(--align-center);

  justify-content:
    var(--justify-center);

  min-height:
    var(--chip-h);

  padding-inline:
    var(--chip-padding-x);

  background-color:
    var(--chip-bg);

  border:
    var(--stroke-1)
    solid
    var(--chip-border);

  border-radius:
    var(--chip-radius);

  color:
    var(--chip-text);

  transition:
    var(--transition-interactive);
}


.c-rvShare__action:hover {
  background-color:
    var(--chip-bg-hover);

  border-color:
    var(--chip-border-hover);

  color:
    var(--chip-text-hover);
}


.c-rvShare__action:focus-visible {
  box-shadow:
    var(--focus-ring);
}


.c-rvShare__status {
  color:
    var(--fg-brand-primary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);
}


.c-rvShare__status.is-active {
  color:
    var(--state-valid-text);
}


/* =========================================================
   19. EMPTY + STATUS
========================================================= */

.c-rvEmpty {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    var(--align-center);

  gap:
    var(--space-stack-gap);

  padding:
    var(--space-card-padding-lg);

  background-color:
    var(--state-empty-bg);

  border:
    var(--stroke-1)
    solid
    var(--state-empty-border);

  border-radius:
    var(--radius-panel);

  box-shadow:
    var(--state-empty-shadow);

  text-align:
    var(--align-center);
}


.c-rvEmpty__title {
  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-card-size);

  font-weight:
    var(--type-heading-card-weight);

  line-height:
    var(--type-heading-card-leading);

  letter-spacing:
    var(--type-heading-card-tracking);

  text-transform:
    var(--type-heading-card-transform);
}


.c-rvEmpty__description {
  max-width:
    var(--type-body-measure);

  color:
    var(--state-empty-text);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);
}


.c-rvStatus {
  display:
    flex;

  align-items:
    var(--align-center);

  gap:
    var(--space-inline-gap);

  padding:
    var(--space-card-padding-sm);

  background-color:
    var(--surface-recessed-bg);

  border:
    var(--stroke-1)
    solid
    var(--surface-recessed-border);

  border-radius:
    var(--radius-panel);

  color:
    var(--fg-secondary);
}


.c-rvStatus.is-loading {
  background-color:
    var(--state-loading-bg);

  border-color:
    var(--state-loading-border);

  box-shadow:
    var(--state-loading-shadow);

  color:
    var(--state-loading-text);

  cursor:
    var(--state-loading-cursor);
}


.c-rvStatus__message {
  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);
}


/* =========================================================
   20. HIDDEN STATE
========================================================= */

.c-rvCard.is-hidden,
.c-rvEmpty.is-hidden,
.c-rvStatus.is-hidden {
  display:
    none;
}


/* =========================================================
   21. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .c-rvNav__link,
  .c-rvFeature,
  .c-rvFeature__image,
  .c-rvCard,
  .c-rvCard__image,
  .c-rvFilter__option,
  .c-rvCartoon__image,
  .c-rvGallery__item,
  .c-rvGallery__image,
  .c-rvExplore__item,
  .c-rvShare__action {
    transition:
      var(--transition-reduced);
  }


  .c-rvNav__link:hover,
  .c-rvCard:hover,
  .c-rvGallery__item:hover,
  .c-rvExplore__item:hover {
    transform:
      translateY(
        var(--motion-reduced-distance)
      )
      scale(
        var(--motion-reduced-scale)
      );
  }


  .c-rvFeature:hover .c-rvFeature__image,
  .c-rvCard:hover .c-rvCard__image,
  .c-rvGallery__item:hover .c-rvGallery__image {
    transform:
      scale(
        var(--motion-reduced-scale)
      );
  }

}

/* =========================================================
   19. RONNIEVERSE PUBLISHING SURFACES

   Existing global gallery selector contract only.
   Loaded on Ronnieverse after components.css, so these are
   page-local visual overrides without new selector names.
========================================================= */

.c-gallerySlider {
  background:
    var(--surface-level-0-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-default);

  border-radius:
    var(--radius-panel-raised);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-default),
    var(--glow-primary-sm);

  color:
    var(--fg-primary);

  backdrop-filter:
    blur(
      var(--blur-none)
    );
}


.c-gallerySlider__status {
  color:
    var(--fg-secondary);

  font-family:
    var(--type-meta-font);

  font-size:
    var(--type-meta-size);

  font-weight:
    var(--type-meta-weight);

  line-height:
    var(--type-meta-leading);

  letter-spacing:
    var(--type-meta-tracking);

  text-transform:
    var(--type-meta-transform);
}


.c-galleryLightbox {
  background:
    var(--overlay-modal-bg);

  color:
    var(--fg-primary);
}


.c-galleryLightbox__dialog {
  background:
    var(--surface-level-0-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-default);

  border-radius:
    var(--radius-modal);

  box-shadow:
    var(--surface-floating-highlight),
    var(--elevation-modal),
    var(--glow-primary-md);

  color:
    var(--fg-primary);
}


.c-galleryLightbox__media {
  background:
    var(--surface-level-0-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-subtle);

  border-radius:
    var(--media-radius-xl);

  box-shadow:
    var(--media-shadow-raised),
    var(--glow-primary-sm);
}


.c-galleryLightbox__image {
  max-width:
    var(--content-full);

  max-height:
    var(--viewport-cap-80);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}


.c-galleryLightbox__content {
  padding-block-start:
    var(--space-2);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  color:
    var(--fg-primary);
}


.c-galleryLightbox__category {
  color:
    var(--fg-brand-primary);

  text-shadow:
    var(--glow-primary-sm);
}


.c-galleryLightbox__title {
  color:
    var(--fg-primary);

  font-size:
    var(--type-heading-card-size);

  line-height:
    var(--type-heading-card-leading);
}


.c-galleryLightbox__location {
  color:
    var(--fg-brand-accent);
}


.c-galleryLightbox__description {
  color:
    var(--fg-secondary);

  font-size:
    var(--type-body-sm-size);

  line-height:
    var(--type-body-sm-leading);
}


.c-galleryLightbox__control {
  background:
    var(--surface-card-bg);

  border:
    var(--stroke-control)
    solid
    var(--border-primary-default);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-default),
    var(--glow-primary-sm);

  color:
    var(--fg-brand-primary);
}


.c-galleryLightbox__close {
  background:
    var(--surface-card-bg);

  border-color:
    var(--border-accent-default);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-low),
    var(--glow-accent-sm);

  color:
    var(--fg-brand-accent);
}
/* =========================================================
   RONNIEVERSE
   EDITORIAL VISUAL-CORRECTION COMPONENTS

   ARCHITECTURE MODE

   Focus:
   - Road Log publication feature
   - Long-form Road Log reading surface
   - Readable magazine carousel cards
   - Magazine reader with restrained notes
   - Original cartoon archive treatment

   Existing tokens only.
========================================================= */


/* =========================================================
   ROAD LOG FEATURE
========================================================= */

.c-rvFeature--roadLog {
  border-color:
    var(--border-primary-strong);

  border-inline-start-color:
    var(--brand-primary);

  box-shadow:
    var(--surface-panel-raised-highlight),
    var(--surface-panel-raised-shadow),
    var(--glow-primary-sm);
}


.c-rvFeature--roadLog .c-rvFeature__media {
  max-height:
    var(--dimension-768);

  aspect-ratio:
    var(--media-ratio-poster);

  background-color:
    var(--surface-level-0-bg);

  box-shadow:
    var(--highlight-inset-standard),
    var(--media-shadow-raised),
    var(--glow-primary-sm);
}


.c-rvFeature--roadLog .c-rvIssue__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}


/* =========================================================
   ROAD LOG LONG-FORM READING SURFACE
========================================================= */

.c-rvCard--roadLogStory {
  background-color:
    var(--surface-level-0-bg);

  background-image:
    var(--texture-blueprint-minor),
    var(--background-gradient-dark);

  background-size:
    var(--texture-blueprint-size-minor),
    var(--background-size-cover);

  background-position:
    var(--texture-panel-position),
    var(--media-position-center);

  background-repeat:
    var(--background-repeat-all),
    var(--background-repeat-none);

  border-color:
    var(--border-primary-subtle);

  border-block-start-color:
    var(--brand-primary);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-low);
}


.c-rvCard--roadLogStory:hover {
  background-color:
    var(--surface-level-0-bg);

  border-color:
    var(--border-primary-default);

  border-block-start-color:
    var(--brand-primary);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-low);

  transform:
    var(--transform-none);
}


.c-rvCard--roadLogStory .c-rvCard__body {
  gap:
    var(--space-stack-gap-relaxed);

  padding:
    var(--space-card-padding-lg);
}


.c-rvCard--roadLogStory .c-rvCard__title {
  max-width:
    var(--measure-reading);
}


.c-rvCard--roadLogStory .c-rvCard__excerpt {
  max-width:
    var(--measure-reading);

  color:
    var(--fg-secondary);

  font-size:
    var(--type-body-lg-size);

  line-height:
    var(--type-body-lg-leading);
}


/* =========================================================
   MAGAZINE CAROUSEL
========================================================= */

.c-gallerySlider--magazine {
  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-primary-sm);
}


.c-rvCard--magazinePage {
  border-color:
    var(--border-primary-default);

  border-block-start-color:
    var(--brand-primary);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-default);
}


.c-rvCard--magazinePage .c-rvCard__media {
  max-height:
    var(--dimension-768);

  aspect-ratio:
    var(--media-ratio-poster);

  background-color:
    var(--surface-level-0-bg);

  box-shadow:
    var(--highlight-inset-soft),
    var(--media-shadow-raised);
}


.c-rvCard--magazinePage .c-rvCard__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}


.c-rvCard--magazinePage .c-rvCard__body {
  gap:
    var(--space-stack-gap-compact);

  padding:
    var(--space-card-padding-lg);
}


.c-rvCard--magazinePage .c-rvCard__excerpt {
  display:
    block;

  max-width:
    var(--measure-reading);

  color:
    var(--fg-secondary);

  font-size:
    var(--type-body-size);

  line-height:
    var(--type-body-leading);
}


.c-rvCard--magazinePage .c-rvCard__footer {
  color:
    var(--fg-tertiary);
}


/* =========================================================
   MAGAZINE READER

   The artwork is the hero. Notes remain intentionally small
   and secondary so the user can actually read the page.
========================================================= */

.c-galleryLightbox--magazine .c-galleryLightbox__dialog {
  background:
    var(--surface-level-0-bg);

  border-color:
    var(--border-primary-strong);

  box-shadow:
    var(--surface-floating-highlight),
    var(--elevation-modal),
    var(--glow-primary-md);
}


.c-galleryLightbox--magazine .c-galleryLightbox__media {
  background:
    var(--surface-level-0-bg);

  border-color:
    var(--border-primary-default);

  box-shadow:
    var(--media-shadow-floating),
    var(--glow-primary-sm);
}


.c-galleryLightbox--magazine .c-galleryLightbox__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  max-width:
    var(--content-full);

  max-height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}


.c-galleryLightbox--magazine .c-galleryLightbox__content {
  padding:
    var(--space-5);

  border-block-start:
    none;

  border-inline-start:
    var(--stroke-1)
    solid
    var(--border-primary-subtle);

  border-radius:
    var(--radius-md);

  background-color:
    var(--surface-level-1-bg);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-recessed);
}


.c-galleryLightbox--magazine .c-galleryLightbox__category {
  color:
    var(--fg-brand-primary);
}


.c-galleryLightbox--magazine .c-galleryLightbox__title {
  color:
    var(--fg-primary);

  font-size:
    var(--type-heading-card-size);

  line-height:
    var(--type-heading-card-leading);
}


.c-galleryLightbox--magazine .c-galleryLightbox__location {
  color:
    var(--fg-brand-accent);

  font-size:
    var(--type-meta-size);
}


.c-galleryLightbox--magazine .c-galleryLightbox__description {
  max-width:
    var(--measure-compact);

  color:
    var(--fg-secondary);

  font-size:
    var(--type-body-sm-size);

  line-height:
    var(--type-body-sm-leading);
}


/* =========================================================
   ORIGINAL CARTOON ARCHIVE
========================================================= */

.c-gallerySlider--archive {
  background:
    var(--surface-level-0-bg);

  border-color:
    var(--border-accent-default);

  box-shadow:
    var(--highlight-inset-standard),
    var(--elevation-raised),
    var(--glow-accent-sm);
}


.c-rvCard--archive {
  align-self:
    var(--align-start);

  height:
    auto;

  background-color:
    var(--surface-level-1-bg);

  border-color:
    var(--border-accent-subtle);

  border-block-start-color:
    var(--brand-accent);

  border-inline-start:
    var(--rail-size-md)
    solid
    var(--rail-accent);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-default),
    var(--glow-accent-sm);
}
.c-rvCard--archive .c-rvCard__media {
  max-height:
    var(--dimension-280);

  aspect-ratio:
    var(--media-ratio-gallery-item);

  background-color:
    var(--surface-level-0-bg);

  border-block-end-color:
    var(--border-accent-subtle);

  box-shadow:
    var(--highlight-inset-standard),
    var(--media-shadow-raised);
}


.c-rvCard--archive .c-rvCard__image {
  width:
    var(--content-full);

  height:
    var(--content-full);

  object-fit:
    var(--media-fit-contain);

  object-position:
    var(--media-position-center);

  filter:
    var(--media-filter-none);
}


.c-rvCard--archive .c-rvCard__body {
  height:
    auto;

  gap:
    var(--space-stack-gap-compact);

  padding:
    var(--space-card-padding-lg);

  border-block-start-color:
    var(--border-accent-subtle);
}


.c-rvCard--archive .c-rvCard__excerpt {
  display:
    block;

  color:
    var(--fg-secondary);

  font-size:
    var(--type-body-sm-size);

  line-height:
    var(--type-body-sm-leading);
}


/* =========================================================
   MAGAZINE READER MOBILE
========================================================= */

@media (max-width: 56rem) {

  .c-galleryLightbox--magazine .c-galleryLightbox__content {
    padding:
      var(--space-4);

    border-inline-start:
      none;

    border-block-start:
      var(--stroke-1)
      solid
      var(--border-primary-subtle);
  }

}
/* =========================================================
   RONNIEVERSE
   CARTOON ARCHIVE REBUILD + MAGAZINE COMPACTION
========================================================= */

.c-rvArchiveNotice {
  display:
    flex;

  flex-direction:
    column;

  max-width:
    var(--content-editorial);

  margin-block-start:
    var(--space-stack-gap-relaxed);

  padding:
    var(--space-card-padding-lg);

  gap:
    var(--space-stack-gap-compact);

  background-color:
    var(--surface-level-1-bg);

  background-image:
    var(--background-gradient-dark);

  border:
    var(--stroke-1)
    solid
    var(--border-accent-default);

  border-inline-start:
    var(--rail-size-lg)
    solid
    var(--brand-accent);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--highlight-inset-soft),
    var(--elevation-low),
    var(--glow-accent-sm);
}

.c-rvArchiveNotice__title {
  max-width:
    var(--measure-compact);

  color:
    var(--fg-primary);

  font-family:
    var(--type-heading-card-font);

  font-size:
    var(--type-heading-feature-size);

  font-weight:
    var(--type-heading-feature-weight);

  line-height:
    var(--type-heading-feature-leading);

  letter-spacing:
    var(--type-heading-feature-tracking);

  text-transform:
    var(--type-heading-feature-transform);
}

.c-rvArchiveNotice__text {
  max-width:
    var(--measure-reading);

  color:
    var(--fg-secondary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);
}

.c-rvArchiveNotice__footer {
  padding-block-start:
    var(--space-3);

  border-block-start:
    var(--stroke-1)
    solid
    var(--border-light-quiet);

  color:
    var(--fg-brand-accent);

  font-family:
    var(--type-label-font);

  font-size:
    var(--type-label-size);

  font-weight:
    var(--type-label-weight);

  line-height:
    var(--type-label-leading);

  letter-spacing:
    var(--type-label-tracking);

  text-transform:
    var(--type-label-transform);
}

/* Magazine: stop every card from stretching to the tallest item. */

.c-rvCard--magazinePage {
  align-self:
    var(--align-start);

  height:
    auto;
}

.c-rvCard--magazinePage .c-rvCard__media {
  max-height:
    var(--dimension-540);
}

.c-rvCard--magazinePage .c-rvCard__body {
  height:
    auto;

  padding:
    var(--space-card-padding);

  gap:
    var(--space-3);
}

.c-rvCard--magazinePage .c-rvCard__excerpt,
.c-rvCard--magazinePage .c-rvCard__footer {
  margin-block-start:
    var(--space-2);
}

@media (max-width: 48rem) {

  .c-rvArchiveNotice {
    padding:
      var(--space-card-padding);
  }

  .c-rvCard--magazinePage .c-rvCard__media {
    max-height:
      var(--dimension-280);
  }

}