/* Refinement layer for the Gaming / Pop Culture cluster (v2).
   Scope per the reviewed handoff v2.1: behavior and additions only — the
   approved center, the black masthead, and the header design are untouched.
   This layer carries the sticky category menu with its compact wordmark,
   the vertical Cover Story rail unit, the article crumb / ink rule / share
   row, Coming soon pages, and the branded utility and author chrome. The
   palette is mirrored at the .layout- level so pages without the gaming
   body class context (author, 404) keep the sector colors. */
.layout-gaming-drop { --ink: #090909; --line: #cfcfcf; --muted: #666666; --warm: #f1f1f1; --accent: var(--sector-accent, #e08a00); color: var(--ink); }

/* Sticky menu (mandatory): the approved category menu stays pinned to the
   top of the screen while a compact wordmark appears beside it once the
   masthead has scrolled away. Colors, fonts, and composition of the header
   are unchanged. The pinned bar sits above content and below the search
   overlay and the mobile menu. */
.layout-gaming-drop .sector-nav[data-gaming-nav] { position: sticky; top: 0; z-index: 40; background: #fff; }
.layout-gaming-drop .gaming-nav-logo { display: none; align-items: center; padding-right: .9rem; margin-right: .35rem; border-right: 1px solid var(--line); text-decoration: none; }
.layout-gaming-drop .gaming-nav-logo strong { font: 800 .82rem var(--sector-head), sans-serif; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.gd-scrolled .layout-gaming-drop .gaming-nav-logo { display: inline-flex; }

/* Cover Story rail unit (the only homepage addition): the vertical magazine
   block lives in the right rail — portrait 3:4 cover of the freshest Cover
   Story, up to two text rows beneath it, and the rubric link; the Coming
   soon state publishes while the desk is empty. Vertical Cover Story art
   never enters a horizontal slot. */
.layout-gaming-drop .gd-cover-story { margin-top: 1rem; padding-top: 1rem; border-top: 3px solid var(--ink); }
.layout-gaming-drop .gd-cover-story h2 { margin: 0 0 .6rem; font: 600 .74rem var(--sector-ui), monospace; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.layout-gaming-drop .gd-cover-story > a { color: var(--ink); }
.layout-gaming-drop .gd-cs-feature { display: block; margin: 0 0 .8rem; text-decoration: none; }
.layout-gaming-drop .gd-cs-feature .sector-media { aspect-ratio: 3 / 4; }
.layout-gaming-drop .gd-cs-feature .sector-kicker { margin: .55rem .4rem .25rem 0; }
.layout-gaming-drop .gd-cs-feature strong { display: block; font: 800 1.02rem/1.15 var(--sector-head), sans-serif; text-transform: uppercase; color: var(--ink); }
.layout-gaming-drop .gd-cs-feature small { display: block; margin-top: .3rem; font: 600 .7rem var(--sector-ui), monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.layout-gaming-drop .gd-cs-empty { margin: 0 0 .6rem; color: #4f4f4f; line-height: 1.5; }
.layout-gaming-drop .gd-cs-all { display: inline-block; padding: .5rem 0 .1rem; border-top: 1px solid var(--line); width: 100%; font: 600 .72rem var(--sector-ui), monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); text-decoration: none; }
.layout-gaming-drop .gd-cs-all:hover { color: var(--ink); }

/* Approved-but-empty rubrics publish a Coming soon page in the standard
   category layout until their first articles land. */
.layout-gaming-drop .gd-coming-soon .sector-kicker { margin-top: 0; }
.layout-gaming-drop .gd-coming-soon h2 { font-size: clamp(1.4rem, 4vw, 2.4rem); }
.layout-gaming-drop .gd-coming-soon p:last-child { max-width: 42rem; margin: .8rem auto 0; color: #4f4f4f; }

/* Article page: mono-caps crumb with the accent Home link, the ink rule
   under the byline, and the sector-voiced share row with canonical URLs.
   The approved article geometry and The Drop module are untouched. */
.layout-gaming-drop .sector-article .sector-crumb { display: block; margin-bottom: 1rem; font: 600 .72rem var(--sector-ui), monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.layout-gaming-drop .sector-article .sector-crumb a { color: var(--accent); }
.layout-gaming-drop .sector-article .sector-article-meta { padding-bottom: .9rem; border-bottom: 3px solid var(--ink); }
.layout-gaming-drop .sector-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.4rem; }
.layout-gaming-drop .sector-share > span { font: 600 .7rem var(--sector-ui), monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.layout-gaming-drop .sector-share a { border: 1px solid var(--line); padding: .45rem .7rem; font: 600 .68rem var(--sector-ui), monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: #fff; text-decoration: none; }
.layout-gaming-drop .sector-share a:hover { border-color: var(--accent); color: var(--accent); }

/* Author page in the sector voice: mono AUTHOR label, portrait photo tile,
   uppercase name over the ink rule, sector-card article grid. */
.layout-gaming-drop .sector-author-page { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-bottom: 1.4rem; border-bottom: 3px solid var(--ink); }
.layout-gaming-drop .sector-author-page-photo { width: 7.5rem; height: 7.5rem; object-fit: cover; background: var(--warm); }
.layout-gaming-drop .sector-author-page .sector-kicker { display: inline-block; margin: 0 0 .5rem; background: var(--accent); }
.layout-gaming-drop .sector-author-page h1 { font: 800 clamp(1.8rem, 4.4vw, 3rem)/0.95 var(--sector-head), sans-serif; text-transform: uppercase; margin: .3rem 0 .7rem; }
.layout-gaming-drop .sector-author-bio { max-width: 44rem; color: #4f4f4f; line-height: 1.6; }
.layout-gaming-drop .sector-author-title, .layout-gaming-drop .sector-author-credentials { margin: .45rem 0 0; font: 600 .78rem var(--sector-ui), monospace; color: var(--muted); }
.layout-gaming-drop .sector-author-articles .sector-card h3 { font: 800 1.04rem/1.2 var(--sector-head), sans-serif; text-transform: uppercase; }

/* Utility pages wear the sector's editorial header: mono crumb, large
   uppercase Schibsted heading, ink rule; the About body reads as text. */
.layout-gaming-drop .sector-utility .sector-crumb { font: 600 .72rem var(--sector-ui), monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.layout-gaming-drop .sector-utility .sector-crumb a { color: var(--accent); }
.layout-gaming-drop .sector-utility > h1 { font: 800 clamp(1.9rem, 5vw, 3.1rem)/0.98 var(--sector-head), sans-serif; text-transform: uppercase; margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 3px solid var(--ink); }
.layout-gaming-drop .sector-utility .sector-utility-intro { font-size: 1.12rem; line-height: 1.6; color: #4f4f4f; max-width: 44rem; }
.layout-gaming-drop .sector-utility--about .sector-about-body { max-width: 52rem; font-size: 1.08rem; line-height: 1.7; }
.layout-gaming-drop .sector-utility--about .sector-about-body p { margin: 0 0 1.4rem; }
.layout-gaming-drop .sector-utility--about .about-team, .layout-gaming-drop .sector-utility--about .about-network { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.layout-gaming-drop .sector-utility--about .about-team h2, .layout-gaming-drop .sector-utility--about .about-network h2 { font-family: var(--sector-head), sans-serif; }
.layout-gaming-drop .sector-utility--about .team-member img { border-radius: 50%; background: var(--warm); }
.layout-gaming-drop .sector-utility--about .team-member .name { font-weight: 800; margin-top: .5rem; }
.layout-gaming-drop .sector-utility--about .team-member .title, .layout-gaming-drop .sector-utility--about .team-member .line { font-size: .85rem; color: var(--muted); }

/* Contact page wears the same header; its form speaks the sector language. */
.layout-gaming-drop .sector-utility #contact-page-title { font: 800 clamp(1.9rem, 5vw, 3.1rem)/0.98 var(--sector-head), sans-serif; text-transform: uppercase; margin: .55rem 0 0; padding-bottom: 1.1rem; border-bottom: 3px solid var(--ink); }
.layout-gaming-drop .vuga-contact-form label { font: 600 .74rem var(--sector-ui), monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.layout-gaming-drop .vuga-contact-form input, .layout-gaming-drop .vuga-contact-form textarea { width: 100%; border: 1px solid var(--line); padding: .7rem .85rem; font: 500 .95rem var(--sector-body), sans-serif; background: #fff; }
.layout-gaming-drop .vuga-contact-form input:focus, .layout-gaming-drop .vuga-contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.layout-gaming-drop .vuga-contact-form button[type="submit"] { border: 0; padding: .8rem 1.4rem; background: var(--ink); color: #fff; font: 600 .78rem var(--sector-ui), monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.layout-gaming-drop .vuga-contact-form button[type="submit"]:hover { background: var(--accent); }

@media (max-width: 760px) {
  .layout-gaming-drop .sector-author-page { grid-template-columns: 1fr; }
  .layout-gaming-drop .sector-author-page-photo { width: 5.5rem; height: 5.5rem; }
}