/* Every page but the front page, in the template's language: the warm #151515 ground and
   cream ink of the reel and the device dossiers, the dossier bar instead of the old header,
   and display headlines in uppercase News Cycle. Loaded last. */
:root {
  --bg: #151515; --surface: #1c1c1b; --ink: #fef9ed; --muted: #a8a397;
  --line: rgba(254, 249, 237, .1); --line-strong: rgba(254, 249, 237, .24); --strong-line: rgba(254, 249, 237, .34);
  --image-stage: #1f1f1d; --feature-bg: #111110; --feature-ink: #fef9ed; --demo-bg: #121211;
  --accent: #fbe154; --accent-soft: rgba(251, 225, 84, .12);
}
body:not(.carousel-mode) { background: #151515; color: var(--ink); }

/* The bar. On device and parts pages it lives inside <main>; elsewhere in .dossier-chrome. */
.dossier-chrome { position: sticky; top: 0; z-index: 40; }
.dossier-chrome .dossier-bar { display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 max(4vw, 20px); background: rgba(21,21,21,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(254,249,237,.12); color: #fef9ed; font-family: 'Instrument Sans', Inter, system-ui, sans-serif; }
.carousel-mode .dossier-chrome { display: none; }
.dossier-saved { position: relative; }
.dossier-saved [data-saved-count]:not(:empty) { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; background: #fbe154; color: #151515; font: 700 11px/1 'Inter Display', Inter, sans-serif; }

/* Headlines in the display face, as on the template. */
body:not([data-page=device]):not([data-page=parts]):not(.carousel-mode) main h1 { font-family: 'News Cycle', Impact, 'Arial Narrow', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; line-height: .92; }

/* Light-theme leftovers that still painted white panels on the dark pages. */
.empty-state { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: 0; color: var(--ink); }
.empty-state h2, .empty-state p { color: var(--ink); }

/* Device cards everywhere show the device lifted off its photo, floating on a soft stage of
   the page's own dark ground: no white product backgrounds. (Legacy card rules still size
   the box; these only decide what fills it.) */
.device-art.has-cutout { position: relative; display: grid !important; place-items: center; background: radial-gradient(80% 70% at 50% 42%, rgba(254,249,237,.07) 0%, rgba(254,249,237,.015) 60%, transparent 100%) !important; }
.device-art.has-cutout > img { position: relative !important; inset: auto !important; width: auto !important; height: auto !important; max-width: 76% !important; max-height: 78% !important; object-fit: contain !important; mix-blend-mode: normal !important; transform: none !important; filter: drop-shadow(0 16px 18px rgba(0,0,0,.5)); transition: transform 420ms cubic-bezier(.23,1,.32,1) !important; }
a:hover .device-art.has-cutout > img, .device-card:hover .device-art.has-cutout > img { transform: translateY(-4px) scale(1.03) !important; }
@media (prefers-reduced-motion: reduce) { .device-art.has-cutout > img { transition: none !important; } }

/* The 404: the same yellow pill as every other primary action. */
body[data-page=notfound] .primary-button { margin-top: 28px; padding: 16px 24px; border-radius: 999px; background: linear-gradient(180deg, #ffe86e 0%, #fbe154 55%, #f3d63f 100%); color: #151515; font: 600 16px/1 "Instrument Sans", Inter, sans-serif; text-decoration: none; box-shadow: 0 16px 36px -14px rgba(251,225,84,.55); }
body[data-page=notfound] .primary-button:hover { transform: translateY(-2px); }