/* Refinement layer for the Marketing / Social Media cluster (2026-08-24).
   The approved rail center — vertical sidebar masthead, poster lead, Signal
   rail, Work Worth Watching grid — stays in marketing-rail.css untouched.
   This layer carries only the v2.1 mandate: sticky nav with a compact
   wordmark, the vertical Cover Story unit, Coming soon for empty desks, and
   the article/author/utility chrome. The palette is mirrored at the
   .layout- level so pages without the base body wrapper keep sector colors. */
.layout-marketing-rail { --ink: #111; --line: #d9d5cd; --muted: #6b6862; --warm: #f5f2ec; --paper: #fff; --gold: #b4872e; --accent: var(--vuga-color-accent, #b4872e); --sector-accent: var(--vuga-color-accent, #b4872e); --sector-ink: #111; --sector-line: #d9d5cd; --sector-muted: #6b6862; --sector-warm: #f5f2ec; --mk-head: 'League Gothic', 'Arial Narrow', sans-serif; --mk-ui: Geist, Arial, sans-serif; }

/* The screen-reader homepage H1 needs a local rule: the base bundle is not
   loaded by every marketing page. */
.layout-marketing-rail .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 🔒 Sticky menu: the category nav stays pinned to the top of the screen;
   the compact wordmark rides inside it once the page scrolls. The fixed
   left rail masthead keeps its own place beside the pinned bar. */
.layout-marketing-rail .sector-nav[data-marketing-nav] { position: sticky; top: 0; z-index: 40; background: #fff; }
.layout-marketing-rail .marketing-nav-logo { display: none; align-items: center; padding-right: .9rem; margin-right: .35rem; border-right: 2px solid var(--ink); }
.layout-marketing-rail .marketing-nav-logo strong { font: 400 1.15rem/1 var(--mk-head); letter-spacing: .02em; text-transform: uppercase; }
.layout-marketing-rail .marketing-nav-logo strong:after { content: '.'; color: var(--sector-accent); }
.mk-scrolled .layout-marketing-rail .marketing-nav-logo { display: inline-flex; }
@media (max-width: 58rem) {
  .mk-scrolled .layout-marketing-rail .marketing-nav-logo { display: none; }
}

/* 🔒 Cover Story sidebar unit (the only homepage addition): vertical 3:4
   cover, up to two text lines, closing link; Coming soon while empty. The
   block heading is the single "Cover Story" label — no kickers below it. */
.layout-marketing-rail .mk-cs-side { margin-top: 2rem; border-top: 3px solid var(--ink); padding-top: 1.4rem; }
.layout-marketing-rail .mk-cs-side h2 { font: 400 2.6rem/.9 var(--mk-head); text-transform: uppercase; margin: 0; }
.layout-marketing-rail .mk-cs-side > p { color: var(--muted); margin: .6rem 0 0; line-height: 1.5; }
.layout-marketing-rail .mk-cs-side > a { color: var(--sector-accent); font: 700 11px/1.2 var(--mk-ui); letter-spacing: .12em; text-transform: uppercase; }
.layout-marketing-rail .mk-cs-feature { display: block; margin-top: 1rem; }
.layout-marketing-rail .mk-cs-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-marketing-rail .mk-cs-feature h3 { font: 400 1.9rem/.95 var(--mk-head); text-transform: uppercase; margin: .6rem 0 .3rem; }
.layout-marketing-rail .mk-cs-feature h3 a, .layout-marketing-rail .mk-cs-more, .layout-marketing-rail .mk-cs-feature > a { text-decoration: none; }
.layout-marketing-rail .mk-cs-feature h3 a:hover, .layout-marketing-rail .mk-cs-more:hover h4 { color: var(--sector-accent); }
.layout-marketing-rail .mk-cs-feature p { margin: .4rem 0 0; color: #3f3f3f; line-height: 1.45; }
.layout-marketing-rail .mk-cs-more { display: block; padding: 1rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.layout-marketing-rail .mk-cs-more h4 { font: 400 1.45rem/1 var(--mk-head); text-transform: uppercase; margin: 0; }
.layout-marketing-rail .mk-cs-all { display: block; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }

/* 🔒 Empty approved rubrics publish a Coming soon card instead of a bare
   grid. */
.layout-marketing-rail .mk-coming-soon { margin-top: 3rem; padding: 2rem 1.6rem; border: 3px dashed var(--line); background: var(--warm); }
.layout-marketing-rail .mk-coming-soon .mk-coming-title { margin: 0; font: 400 clamp(3rem, 7vw, 5.5rem)/.85 var(--mk-head); text-transform: uppercase; }
.layout-marketing-rail .mk-coming-soon p { margin: .6rem 0 1rem; color: #3f3f3f; line-height: 1.5; }
.layout-marketing-rail .mk-coming-soon a { color: var(--sector-accent); font: 700 11px/1.2 var(--mk-ui); letter-spacing: .12em; text-transform: uppercase; }

/* 🔒 Cover Story category pages keep portrait art portrait: a 3:4 magazine
   grid instead of the horizontal stack rows. */
.layout-marketing-rail .marketing-stack--portrait { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
.layout-marketing-rail .marketing-stack--portrait .sector-media { aspect-ratio: 3 / 4; }
.layout-marketing-rail .marketing-stack--portrait .mk-cs-card { border-bottom: 1px solid var(--line); padding-bottom: 1.2rem; }
.layout-marketing-rail .marketing-stack--portrait .mk-cs-card h2 { font: 400 2rem/.95 var(--mk-head); text-transform: uppercase; margin: .5rem 0 0; }
.layout-marketing-rail .marketing-stack--portrait .mk-cs-card h2 a { text-decoration: none; }
.layout-marketing-rail .marketing-stack--portrait .mk-cs-card h2 a:hover { color: var(--sector-accent); }
.layout-marketing-rail .marketing-stack--portrait .mk-cs-card p { color: var(--muted); line-height: 1.45; margin: .4rem 0 0; }
@media (max-width: 58rem) { .layout-marketing-rail .marketing-stack--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 🔒 Article chrome: caps crumb with an accent Home, ink rule under the
   byline, and the share row in the sector voice. */
.layout-marketing-rail .sector-crumb { font: 700 11px/1.2 var(--mk-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.layout-marketing-rail .sector-crumb a:first-child { color: var(--sector-accent); }
.layout-marketing-rail .sector-article-meta { border-bottom: 3px solid var(--ink); padding-bottom: 1.1rem; }
.layout-marketing-rail .mk-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; }
.layout-marketing-rail .mk-share > span { font: 700 11px/1.2 var(--mk-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.layout-marketing-rail .mk-share a { border: 2px solid var(--ink); background: #fff; padding: .5rem .75rem; font: 700 11px/1 var(--mk-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.layout-marketing-rail .mk-share a:hover { background: var(--sector-accent); color: #fff; }

/* Author page in the sector voice: caps Author label, League Gothic name
   over an ink rule, square photo tile, card grid below. */
.layout-marketing-rail .sector-author-page { border-bottom: 3px solid var(--ink); }
.layout-marketing-rail .sector-author-page-photo { border-radius: 0; border: 3px solid var(--ink); }
.layout-marketing-rail .sector-author-page .sector-kicker { font: 700 11px/1.2 var(--mk-ui); letter-spacing: .14em; }
.layout-marketing-rail .sector-author-page-content h1 { font: 400 clamp(3rem, 7vw, 5.5rem)/.85 var(--mk-head); text-transform: uppercase; letter-spacing: 0; }
.layout-marketing-rail .sector-author-title { color: var(--sector-accent); }
.layout-marketing-rail .sector-author-articles .sector-section-head { border-bottom: 3px solid var(--ink); }

/* Utility pages wear the sector header: caps crumb, League Gothic heading
   over an ink rule; contact shares the same title treatment. */
.layout-marketing-rail .sector-utility-wrap .sector-crumb, .layout-marketing-rail .sector-utility .sector-crumb { font: 700 11px/1.2 var(--mk-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.layout-marketing-rail .sector-utility .sector-crumb a { color: var(--sector-accent); }
.layout-marketing-rail .sector-utility > h1 { font: 400 clamp(3rem, 7vw, 5.5rem)/.9 var(--mk-head); text-transform: uppercase; border-bottom: 3px solid var(--ink); padding-bottom: 1.1rem; }
.layout-marketing-rail .sector-utility #contact-page-title { font: 400 clamp(3rem, 7vw, 5.5rem)/.9 var(--mk-head); text-transform: uppercase; border-bottom: 3px solid var(--ink); padding-bottom: 1.1rem; }