/*
 * RetroBrowser+ Theme — site stylesheet v3.0.0
 * Design system: charcoal / warm greige / fluorescent yellow / two electric-blue accents.
 * Architecture: tokens → base → navigation → hero art → console → content sections → footer → responsive.
 * Every visible component has one canonical definition. No legacy selectors or !important overrides.
 */

/* 01. Design tokens and foundations ---------------------------------------- */
:root {
  --black: #151515;
  --ink: #292824;
  --paper: #f1ede4;
  --greige: #d9d4c8;
  --greige-dark: #bfb9ab;
  --acid: var(--accent, #e8ff32);
  --electric: #24baff;
  --muted: #6a675f;
  --wide: 1480px;
  --display: 'Barlow Condensed', Impact, sans-serif;
  --text: 'DM Sans', Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --rbp-nav-font: var(--mono);
  --rbp-button-font: var(--mono);
  --rbp-list-title-font: var(--display);
  --rbp-list-text-font: var(--text);
  --radius: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font: 400 16px/1.6 var(--text); background: var(--paper); color: var(--black); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; }
.rbp-wide { width: min(calc(100% - 96px), var(--wide)); margin-inline: auto; }
.rbp-container { width: min(calc(100% - 96px), 1150px); margin-inline: auto; }
.rbp-skip { position: absolute; left: 15px; top: -100px; z-index: 999; background: var(--acid); padding: 10px 20px; font-weight: 700; }
.rbp-skip:focus { top: 15px; }
.rbp-chapter { position: relative; padding-block: 112px; overflow: hidden; }
.rbp-ui-icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; fill: none; stroke: currentColor; }
.rbp-minimark, .rbp-systems-stamp, .rbp-engine-asterisk, .rbp-burst, .rbp-finale-mark, .rbp-feature-icon, .rbp-hero-object-note { display: none; }

/* 02. Global header and menu ----------------------------------------------- */
.rbp-header { background: var(--black); color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.1); position: relative; z-index: 50; }
.rbp-header-inner { min-height: 86px; display: flex; align-items: center; gap: 24px; }
.rbp-brand { display: flex; align-items: center; flex: none; width: clamp(168px, 15vw, 210px); text-decoration: none; }
.rbp-brand img { display: block; width: 100%; max-height: 66px; object-fit: contain; }
.rbp-main-nav { margin-left: auto; }
.rbp-menu { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; gap: 28px; }
.rbp-menu a { color: var(--paper); text-decoration: none; text-transform: uppercase; letter-spacing: .09em; font: 700 11px/1.3 var(--rbp-nav-font); }
.rbp-menu a:hover { color: var(--acid); }
.rbp-header-tools { display: flex; align-items: center; gap: 10px; }
.rbp-language { position: relative; }
.rbp-language-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ffffff40; background: transparent; color: var(--paper); border-radius: 50px; padding: 11px 12px; font: 700 11px var(--mono); }
.rbp-language-list { position: absolute; top: calc(100% + 10px); right: 0; width: 185px; padding: 8px; border: 1px solid #ffffff2a; border-radius: 14px; background: #232322; box-shadow: 0 12px 35px #0005; z-index: 70; }
.rbp-language-list button { display: block; padding: 9px 11px; background: transparent; border: 0; color: var(--paper); border-radius: 7px; width: 100%; text-align: left; font: 600 12px var(--text); }
.rbp-language-list button:hover { background: #ffffff12; }
.rbp-nav-cta { display: inline-flex; gap: 10px; align-items: center; justify-content: center; white-space: nowrap; border-radius: 999px; padding: 14px 19px; min-height: 45px; text-decoration: none; color: var(--black); background: var(--acid); font: 800 11px/1.1 var(--rbp-button-font); text-transform: uppercase; transition: background-color .18s; }
.rbp-nav-cta:hover { background: var(--paper); }
.rbp-nav-cta-alt { background: transparent; color: var(--paper); border: 1px solid #ffffff40; }
.rbp-nav-cta-alt:hover { background: #ffffff14; color: var(--paper); }
.rbp-chrome-icon { display: block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.rbp-burger { display: none; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; border: 1px solid #ffffff60; border-radius: 12px; background: transparent; }
.rbp-burger span { display: block; height: 2px; background: #fff; }
.rbp-mobile-nav { display: none; }

/* 03. Shared ORIGINAL ornaments: hero and article section ------------------ */
/* The two sections literally output the same PHP artwork markup. */
.rbp-hero, .rbp-news { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--paper); }
.rbp-original-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.rbp-original-art-lines, .rbp-original-art-circles, .rbp-original-art-grain { position: absolute; pointer-events: none; }
.rbp-original-art-lines {
  inset: 0;
  background: radial-gradient(ellipse at 93% 26%, #292824 0, transparent 47%),
              repeating-linear-gradient(90deg, transparent 0 99px, rgba(247,243,235,.12) 100px 101px);
}
.rbp-original-art-circles {
  bottom: -215px; left: -240px; width: 560px; height: 560px;
  border: 1px solid rgba(247,243,235,.28); border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(247,243,235,.09),
              0 0 0 140px rgba(247,243,235,.08),
              0 0 0 210px rgba(247,243,235,.07);
}
.rbp-original-art-grain {
  inset: 0; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
.rbp-hero > .rbp-wide, .rbp-news > .rbp-wide { position: relative; z-index: 1; }

/* 04. Hero editorial content ----------------------------------------------- */
.rbp-hero { padding: 68px 0 32px; min-height: 705px; }
.rbp-hero-inner { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr); align-items: center; gap: 20px; }
.rbp-hero-copy { min-width: 0; }
.rbp-broadcast { color: var(--acid); text-transform: uppercase; font: 700 10px/1.5 var(--mono); letter-spacing: .11em; margin-bottom: 28px; }
.rbp-broadcast .rbp-ui-icon { display: none; }
.rbp-giant { margin: 0 0 35px; max-width: 800px; font: 900 clamp(70px, 7.45vw, 129px)/.91 var(--display); letter-spacing: -.025em; white-space: pre-line; text-transform: uppercase; text-wrap: balance; }
.rbp-giant::first-line { color: var(--acid); }
.rbp-hero-intro p { font: 500 18px/1.65 var(--text); max-width: 510px; margin: 0 0 27px; color: #dedbd3; }
.rbp-hero-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.rbp-primary-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; border: 1px solid transparent; border-radius: 999px; color: var(--black); background: var(--acid); text-decoration: none; white-space: nowrap; text-transform: uppercase; font: 800 11px/1.2 var(--rbp-button-font); transition: background-color .2s; }
.rbp-primary-button:hover { background: var(--paper); }
.rbp-secondary-button { background: transparent; color: var(--paper); border-color: #ffffff29; text-transform: none; }
.rbp-secondary-button:hover { background: #ffffff16; color: var(--paper); }
.rbp-text-button { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 2px; color: var(--paper); text-decoration: none; font: 700 10px var(--rbp-button-font); text-transform: uppercase; }
.rbp-text-button:hover { color: var(--acid); }
.rbp-hero-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 60px; color: #bbb8b0; font: 600 9px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.rbp-hero-foot span:last-child { color: var(--acid); }

/* 05. One canonical GREY deck component ----------------------------------- */
/* The full deck, including its screen and controls, has a fixed gentle 7.5-degree angle. */
.rbp-hero-machine { min-width: 0; width: 100%; padding: 88px 52px 92px; }
.rbp-deck {
  width: 100%; max-width: 680px; margin-inline: auto; position: relative; isolation: isolate;
  padding: 17px 21px 23px;
  background: linear-gradient(155deg, #f1f0ed 0%, #d5d3cd 40%, #aaa9a3 100%);
  color: var(--black); border: 6px solid #191919; border-radius: 49px 49px 76px 39px;
  box-shadow: 8px 11px 0 #979a94, 17px 21px 0 #151515, 25px 31px 40px #0007,
              inset 0 3px 0 #ffffff91, inset -9px -11px 22px #0000000d;
  transform: rotate(7.5deg);
  transform-origin: center center;
  /* Fixed tilt: no hover/active animation on the console itself. */
}
.rbp-deck::before { content: ''; position: absolute; inset: 8px; pointer-events: none; border: 1px solid #34343426; border-radius: 39px 39px 69px 32px; }
.rbp-deck-edge { position: absolute; inset: 3px; border: 1px solid #ffffff7a; border-radius: inherit; pointer-events: none; }
.rbp-deck-header { display: flex; align-items: center; justify-content: flex-end; min-height: 30px; padding: 1px 10px 12px; }
.rbp-deck-brand-spacer { display: none; }
.rbp-deck-lamp { display: inline-flex; align-items: center; gap: 8px; font: 700 8px var(--mono); letter-spacing: .12em; }
.rbp-deck-lamp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acid); border: 2px solid #292929; }
.rbp-deck-bezel { position: relative; padding: 13px 15px 12px; border: 5px solid var(--black); border-radius: 29px 29px 41px 31px; background: #191919; box-shadow: inset 0 0 0 2px #454545, 0 7px 0 #0003, 0 15px 25px #0003; color: var(--paper); }
.rbp-deck-bezel-label, .rbp-deck-screen-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 8px/1.3 var(--mono); letter-spacing: .09em; color: #aaa8a0; }
.rbp-deck-bezel-label { padding: 1px 7px 10px; }
.rbp-deck-display { position: relative; overflow: hidden; aspect-ratio: 1.62; border-radius: 10px; background: #080808; border: 3px solid #090909; box-shadow: 0 0 0 2px #444; }
.rbp-deck-display img { display: block; width: 100%; height: 100%; position: relative; z-index: 0; object-fit: cover; transition: opacity .22s ease; }
.rbp-deck-display.is-changing img { opacity: .24; }
.rbp-deck-screen-glass { pointer-events: none; position: absolute; z-index: 1; inset: 0; background: linear-gradient(110deg, #ffffff16, transparent 40%); }
.rbp-deck-screen-foot { padding: 11px 7px 2px; justify-content: flex-end; }
.rbp-deck-mini-plus { color: var(--acid); }
.rbp-deck-controls { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr); align-items: center; gap: 9px; padding: 20px 12px 12px; }
.rbp-deck-direction, .rbp-deck-actions { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.rbp-deck-dpad { position: relative; margin: 0 auto; width: 92px; height: 92px; filter: drop-shadow(3px 4px 0 #0004); }
.rbp-deck-dpad::before, .rbp-deck-dpad::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: linear-gradient(140deg,#444,#161616 70%); box-shadow: inset 1px 2px 1px #fff3, inset -2px -2px 3px #0006; }
.rbp-deck-dpad::before { width: 34px; height: 92px; border-radius: 6px; }
.rbp-deck-dpad::after { width: 92px; height: 34px; border-radius: 6px; }
.rbp-deck-dpad button { position: absolute; z-index: 2; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 0; background: transparent; border-radius: 5px; color: #d6d3cb; font-size: 10px; transition: color .15s ease; }
.rbp-deck-dpad button:hover { color: var(--acid); }
.rbp-deck-dpad-up { left: 30.5px; top: 0; } .rbp-deck-dpad-down { left: 30.5px; bottom: 0; }
.rbp-deck-dpad-left { left: 0; top: 30.5px; } .rbp-deck-dpad-right { right: 0; top: 30.5px; }
.rbp-deck-dpad-pivot { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 27px; height: 27px; background: radial-gradient(circle at 30% 25%, #333, #111 70%); border-radius: 50%; box-shadow: inset 1px 1px 2px #fff2; pointer-events: none; }
.rbp-deck-middle { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.rbp-deck-little-pills { display: flex; gap: 13px; }
.rbp-deck-little-pills i { width: 23px; height: 9px; display: block; background: #242424; border-radius: 10px; transform: rotate(-17deg); box-shadow: inset 0 2px 2px #fff4; }
.rbp-deck-middle > span:last-child { color: #67645c; font: 700 8px/1.2 var(--mono); white-space: nowrap; }
.rbp-deck-action-inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; background: #00000016; border-radius: 65px; }
.rbp-deck-action-inner button {
  display: grid; place-items: center; position: relative; flex: none;
  width: 48px; height: 48px; margin: 0; padding: 0;
  border: 4px solid #151515; border-radius: 50%;
  background: linear-gradient(145deg, #77daff 0%, var(--electric) 52%, #0b94df 100%);
  color: var(--black); font: 900 20px/1 var(--display);
  box-shadow: inset 2px 2px 0 #fff8, 3px 4px 0 var(--black);
  transform: translateY(0); transition: transform .16s ease, background-color .16s ease;
}
/* Deliberately identical interaction, including B (first child). */
.rbp-deck-action-inner button:hover, .rbp-deck-action-inner button:focus-visible { transform: translateY(-3px); background: var(--electric); }
.rbp-deck-action-inner button:active { transform: translateY(1px); }
.rbp-deck-footer { display: flex; justify-content: flex-end; align-items: center; padding: 9px 12px 2px; min-height: 23px; }
.rbp-deck-speaker { display: flex; gap: 4px; align-items: center; transform: rotate(-13deg); }
.rbp-deck-speaker i { width: 4px; height: 18px; display: block; border-radius: 10px; background: #333; }
.rbp-deck-speaker i:nth-child(2), .rbp-deck-speaker i:nth-child(6) { height: 22px; }
.rbp-deck-speaker i:nth-child(3), .rbp-deck-speaker i:nth-child(5) { height: 26px; }
.rbp-deck-speaker i:nth-child(4) { height: 30px; }

/* 06. Straight ticker ------------------------------------------------------ */
.rbp-marquee { width: 100%; height: 58px; display: flex; align-items: center; overflow: hidden; color: var(--black); background: var(--electric); border-block: 2px solid var(--black); }
.rbp-marquee-flow { display: flex; width: max-content; white-space: nowrap; align-items: center; gap: 40px; padding-right: 40px; animation: rbp-marquee 38s linear infinite; }
.rbp-marquee-flow > span { display: inline-flex; align-items: center; gap: 14px; text-transform: uppercase; font: 900 24px/1 var(--display); }
.rbp-marquee .rbp-ui-icon { width: 20px; height: 20px; }
@keyframes rbp-marquee { to { transform: translateX(-50%); } }

/* 07. Intro and features — no card fills ---------------------------------- */
.rbp-intro { background: var(--greige); }
.rbp-intro-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(35px,7vw,108px); align-items: center; }
.rbp-intro-art { position: relative; min-height: 650px; display: flex; align-items: center; }
.rbp-editorial-title, .rbp-systems-headline, .rbp-engine-headline, .rbp-controls-headline, .rbp-faq-heading h2, .rbp-news-intro h2 { margin: 0 0 28px; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .94; letter-spacing: -.02em; white-space: pre-line; }
.rbp-editorial-title { font-size: clamp(64px,6.7vw,107px); }
.rbp-intro-lead { font-size: 19px; line-height: 1.65; color: #50504d; margin: 0 0 21px; }
.rbp-compatibility-note { padding: 4px 0 4px 17px; border-left: 3px solid var(--black); font-size: 15px; line-height: 1.75; color: #54534e; margin: 0 0 28px; }
.rbp-benefit-list { margin-top: 12px; }
.rbp-benefit-item { padding: 22px 0; border-bottom: 1px solid #15151537; background: transparent; }
.rbp-benefit-item:last-child { border-bottom: 0; }
.rbp-benefit-item h3 { font: 800 28px/1.15 var(--rbp-list-title-font); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 8px; }
.rbp-benefit-item p { font: 400 14px/1.7 var(--rbp-list-text-font); color: #63615a; margin: 0; }
/* Shared macOS inspired screenshot frame */
.rbp-mac-window { background: var(--paper); border: 1px solid #15151530; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 55px #15151530; }
.rbp-art-poster { width: 85%; position: relative; transform: none; }
.rbp-small-polaroid { width: 57%; position: absolute; right: -2%; bottom: 40px; z-index: 2; transform: rotate(6deg); }
.rbp-mac-topbar { display: flex; align-items: center; gap: 14px; padding: 0 12px; height: 38px; background: #e5e0d5; border-bottom: 1px solid #d4d0c7; overflow: hidden; }
.rbp-mac-traffic { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rbp-mac-traffic i { display: block; height: 10px; width: 10px; border-radius: 50%; background: #ff605b; }
.rbp-mac-traffic i:nth-child(2) { background: #ffbd2e; }
.rbp-mac-traffic i:nth-child(3) { background: #29c840; }
.rbp-mac-tab { min-width: 0; font: 600 10px/1.3 var(--text); color: #66635b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbp-mac-addressrow { height: 37px; padding: 0 12px; display: flex; align-items: center; gap: 12px; background: #f3efe7; border-bottom: 1px solid #ded9cf; }
.rbp-mac-navigation { font-size: 21px; color: #8a857a; white-space: nowrap; }
.rbp-mac-address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 8px; padding: 4px 10px; background: #e2ded5; font: 500 10px/1.4 var(--text); color: #656159; }
.rbp-mac-viewport { background: #f4f0e8; padding: 10px 10px 0; }
.rbp-mac-viewport img { display: block; width: 100%; object-fit: cover; border-radius: 10px; }
.rbp-art-poster .rbp-mac-viewport img { height: 310px; }
.rbp-art-poster-foot { padding: 12px 16px 17px; font: 800 18px/1.1 var(--display); }
.rbp-mac-window-mini .rbp-mac-topbar { height: 29px; gap: 7px; padding-inline: 9px; }
.rbp-mac-window-mini .rbp-mac-traffic { gap: 4px; }
.rbp-mac-window-mini .rbp-mac-traffic i { width: 8px; height: 8px; }
.rbp-mac-window-mini .rbp-mac-tab { font-size: 8px; }
.rbp-mac-window-mini .rbp-mac-addressrow { height: 28px; padding-inline: 8px; }
.rbp-mac-window-mini .rbp-mac-address { font-size: 8px; }
.rbp-mac-window-mini .rbp-mac-viewport { padding: 8px 8px 11px; }
.rbp-mac-window-mini .rbp-mac-viewport img { height: 160px; }

/* 08. Console/arcade systems ------------------------------------------------ */
.rbp-systems { background: var(--black); color: var(--paper); }
.rbp-systems-top { display: flex; justify-content: space-between; gap: 40px; align-items: end; }
.rbp-systems-headline { font-size: clamp(55px,6vw,94px); margin-bottom: 0; }
.rbp-systems-top > p { flex: 0 0 290px; font-size: 15px; line-height: 1.65; color: #cfccc4; margin: 0; }
.rbp-system-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 28px 0 45px; }
.rbp-system-tabs button { padding: 11px 16px; border-radius: 999px; border: 1px solid #ffffff40; background: var(--paper); color: var(--black); text-transform: uppercase; font: 700 10px/1.25 var(--rbp-button-font); }
.rbp-system-tabs button:hover, .rbp-system-tabs button.active { background: var(--acid); color: var(--black); border-color: var(--acid); }
.rbp-system-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 29px 18px; }
.rbp-system { min-width: 0; display: grid; gap: 9px; align-content: start; }
.rbp-system[hidden] { display: none; }
.rbp-system > h3 { font: 800 22px/1.08 var(--display); margin: 0; min-height: 45px; }
.rbp-cartridge-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.48; padding: 16px; background: #eeeae1; border: 3px solid #080808; border-radius: 20px; box-shadow: 0 8px 22px #0003; }
.rbp-cartridge-media img { max-height: 95px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #0008) drop-shadow(0 2px 4px #0004); }
.rbp-system-meta { color: #d5d0c7; font: 600 10px/1.5 var(--mono); letter-spacing: .035em; text-transform: uppercase; }
.rbp-symbol { font: 900 27px var(--display); color: var(--black); }

/* 09. Engine and browser-mockup collage ----------------------------------- */
.rbp-engine { background: var(--paper); }
.rbp-engine-grid { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 7%; align-items: center; }
.rbp-engine-headline { font-size: clamp(64px, 7vw, 114px); }
.rbp-engine-text > p:not(.rbp-performance-note) { font-size: 19px; line-height: 1.7; color: #54514b; }
.rbp-performance-note { font: 500 12px/1.65 var(--mono); color: #65625b; margin-top: 23px; }
.rbp-tech-tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 25px 0; }
.rbp-tech-tags span, .rbp-tech-tags p { display: inline-flex; border: 1px solid #15151540; border-radius: 30px; padding: 8px 13px; margin: 0; font: 700 10px/1.2 var(--mono); text-transform: uppercase; }
/* Two independent Mac windows, composed as an editorial stack. Both captures remain readable. */
.rbp-engine-collage { min-width: 0; position: relative; display: grid; grid-template-columns: 1fr; align-content: center; gap: 0; padding: 40px 12px 46px; isolation: isolate; }
.rbp-game-window { position: relative; width: 96%; min-width: 0; }
.rbp-window-back { justify-self: start; transform: translateX(-1%) rotate(-2deg); z-index: 1; }
.rbp-window-front { justify-self: end; width: 91%; margin-top: -14px; transform: translateX(2%) rotate(2deg); z-index: 2; }
.rbp-engine-mac-window { box-shadow: 0 22px 52px rgba(21,21,21,.18); }
.rbp-engine-mac-window .rbp-mac-viewport { padding: 10px 10px 12px; }
.rbp-engine-mac-window .rbp-mac-viewport img { aspect-ratio: 1.75; width: 100%; height: auto; object-fit: cover; object-position: top center; }

/* 10. Controller settings ------------------------------------------------- */
.rbp-controls { background: var(--black); color: var(--paper); }
.rbp-controls-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); align-items: center; gap: 7%; }
.rbp-controls-art { min-width: 0; }
.rbp-controls-image { background: #e8e4dc; padding: 10px; border-radius: 22px; box-shadow: 0 20px 50px #0005; }
.rbp-controls-image img { display: block; width: 100%; border-radius: 14px; }
.rbp-controls-headline { font-size: clamp(62px,6.3vw,100px); }
.rbp-controls-copy p { font-size: 17px; color: #d0ccc3; line-height: 1.75; }
.rbp-controls-copy strong { display: block; margin: 20px 0 14px; font-size: 18px; }
.rbp-controls-copy ul { padding-left: 22px; margin: 0; color: #e1ded8; line-height: 1.95; }

/* 11. FAQ ------------------------------------------------------------------ */
.rbp-faq { background: var(--greige); color: var(--black); }
.rbp-faq-grid { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 7%; }
.rbp-faq-heading > .rbp-faq-accent { display: block; font: 900 150px/.8 var(--display); color: var(--electric); }
.rbp-faq-heading h2 { margin: 20px 0; font-size: clamp(62px,6vw,92px); }
.rbp-faq-heading p { font-size: 17px; color: #636158; }
.rbp-faq-items { display: grid; gap: 12px; align-content: start; }
.rbp-faq-items details { background: var(--paper); border: 1px solid #1515151d; border-radius: 18px; padding: 5px 22px; }
.rbp-faq-items summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; cursor: pointer; padding: 21px 0; list-style: none; font: 800 24px/1.14 var(--display); text-transform: uppercase; }
.rbp-faq-items summary::-webkit-details-marker { display: none; }
.rbp-faq-items summary > span:last-child { font: 800 30px/1 var(--display); }
.rbp-faq-items details[open] summary > span:last-child { transform: rotate(45deg); }
.rbp-faq-items details > div { color: #5c5851; font-size: 15px; line-height: 1.8; padding-bottom: 20px; }

/* 12. Articles section: EXACT SAME ornamental DOM as hero ----------------- */
.rbp-news { padding-block: 104px; }
.rbp-news-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.rbp-news-intro h2 { font-size: 78px; margin: 0; }
.rbp-news-intro > a { color: var(--acid); text-decoration: none; font: 700 11px/1.3 var(--mono); text-transform: uppercase; }
.rbp-news-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.rbp-news-card a { display: block; height: 100%; overflow: hidden; text-decoration: none; background: var(--greige); border: 1px solid #15151530; border-radius: 18px; box-shadow: 0 15px 38px #0003; color: var(--black); }
.rbp-news-card img, .rbp-news-empty { display: block; width: 100%; height: 195px; object-fit: cover; background: #262624; }
.rbp-news-empty { display: grid; place-items: center; color: var(--acid); font: 900 60px var(--display); }
.rbp-news-body { padding: 22px; }
.rbp-news-body small { font: 700 10px var(--mono); }
.rbp-news-body h3 { font: 800 28px/1.03 var(--display); text-transform: uppercase; margin: 12px 0; }
.rbp-news-body p { font-size: 14px; color: #55534e; line-height: 1.65; margin: 0; }

/* 13. Footer -------------------------------------------------------------- */
.rbp-footer { padding: 65px 0 24px; background: var(--black); color: var(--paper); }
.rbp-footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; padding-bottom: 62px; }
.rbp-footer-brand { display: block; max-width: 260px; }
.rbp-footer-logo { display: block; max-width: 100%; height: auto; }
.rbp-footer-top p { font-size: 13px; color: #aaa79f; max-width: 375px; line-height: 1.7; }
.rbp-footer-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; margin-top: 8px; }
.rbp-footer-links a { text-decoration: none; font: 700 11px var(--mono); text-transform: uppercase; }
.rbp-footer-links a:hover { color: var(--acid); }
.rbp-footer-end { border-top: 1px solid #ffffff35; display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 20px; font: 600 10px/1.5 var(--mono); color: #bbb7af; }
.rbp-footer-credit a { color: var(--acid); text-decoration: none; }
.rbp-footer-end > a { text-decoration: none; }

/* 14. Blog pages and other WordPress templates ---------------------------- */
.rbp-inner-main { padding: 96px 0 130px; background: var(--paper); min-height: 70vh; }
.rbp-page-header { max-width: 1050px; padding-bottom: 26px; border-bottom: 2px solid var(--black); margin-bottom: 42px; }
.rbp-page-header h1 { font: 900 clamp(65px,8vw,116px)/.95 var(--display); text-transform: uppercase; margin: 0 0 23px; overflow-wrap: anywhere; }
.rbp-page-header > p { font-size: 19px; color: #555; line-height: 1.65; }
.rbp-article-meta { display: flex; gap: 12px; font: 700 11px var(--mono); text-transform: uppercase; margin-bottom: 18px; }
.rbp-content-shell { max-width: 980px; font-size: 18px; line-height: 1.85; }
.rbp-content-shell h2 { font: 800 45px/1.05 var(--display); text-transform: uppercase; margin-top: 44px; }
.rbp-content-shell h3 { font: 800 30px/1.1 var(--display); text-transform: uppercase; }
.rbp-content-shell img { max-width: 100%; height: auto; border-radius: 15px; }
.rbp-content-shell a { color: #2354a2; }
.rbp-single-cover { display: block; max-height: 530px; width: 100%; object-fit: cover; margin-bottom: 35px; }
.rbp-back, .rbp-more { display: inline-flex; margin-top: 32px; font: 700 12px var(--mono); text-transform: uppercase; }
.rbp-pagination { margin-top: 35px; }
.rbp-404 { text-align: center; }
.rbp-404 h1 { font: 900 150px/1 var(--display); margin: 20px 0; }
.rbp-kicker { font: 700 10px var(--mono); }
.rbp-button { display: inline-flex; gap: 10px; padding: 15px 24px; border-radius: 999px; text-decoration: none; text-transform: uppercase; font: 700 12px var(--mono); }
.rbp-button-hot { background: var(--acid); color: var(--black); }
.rbp-js [data-reveal] { opacity: 1; }


/* Blog: dark signature header, clearly LIGHT paper canvas and premium horizontal cards. */
.rbp-blog-index { background: var(--paper); color: var(--black); }
.rbp-blog-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--black); color: var(--paper); padding: clamp(80px,9vw,136px) 0 clamp(65px,7.5vw,104px); }
.rbp-blog-hero > .rbp-wide { position: relative; z-index: 1; }
.rbp-blog-heading { max-width: var(--wide); }
.rbp-blog-eyebrow { text-transform: uppercase; font: 700 11px/1.5 var(--mono); color: var(--acid); letter-spacing: .14em; margin: 0 0 22px; }
.rbp-blog-heading h1 { font: 900 clamp(75px,11vw,154px)/.86 var(--display); text-transform: uppercase; color: var(--paper); margin: 0 0 25px; letter-spacing: -.035em; }
.rbp-blog-heading > p:last-child { font-size: 20px; max-width: 700px; line-height: 1.65; color: #ddd9cf; margin: 0; }
.rbp-blog-content { min-height: 50vh; padding: clamp(55px,6.5vw,95px) 0 130px; background: #ede9e0; color: var(--black); }
.rbp-blog-feed-shell { position: relative; max-width: 1280px; }
.rbp-blog-list { display: flex; flex-direction: column; gap: 25px; width: 100%; margin: 0; }
.rbp-blog-entry { min-width: 0; margin: 0; }
.rbp-blog-entry-link { display: grid; grid-template-columns: minmax(260px,36%) minmax(0,1fr); min-height: 265px; gap: 0; overflow: hidden; background: #fffdf7; color: var(--black); text-decoration: none; border: 1px solid #d4cfc3; border-radius: 24px; box-shadow: 0 8px 12px rgba(24,23,21,.025), 0 24px 48px rgba(24,23,21,.07); transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.rbp-blog-entry-link:hover { border-color: #8d887c; box-shadow: 0 12px 18px rgba(24,23,21,.04), 0 31px 54px rgba(24,23,21,.11); transform: translateY(-3px); }
.rbp-blog-thumb { min-width: 0; min-height: 260px; position: relative; overflow: hidden; background: #1e1e1e; }
.rbp-blog-thumb > img, .rbp-blog-thumb .rbp-blog-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .4s ease; }
.rbp-blog-entry-link:hover .rbp-blog-thumb > img { transform: scale(1.035); }
.rbp-blog-placeholder { display: grid; position: absolute; inset: 0; place-items: center; background: radial-gradient(circle at 70% 15%,#383830,#151515 62%); }
.rbp-blog-placeholder img { display: block; width: min(55%,155px); height: auto; max-height: 155px; object-fit: contain; opacity: .9; }
.rbp-blog-entry-body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0; min-width: 0; padding: clamp(24px,3.4vw,45px) clamp(26px,4vw,55px); }
.rbp-blog-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 18px; color: #67635b; font: 700 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rbp-blog-category { padding: 6px 10px; background: #ece7d8; border-radius: 99px; color: #292824; font-size: 9px; }
.rbp-blog-entry-body h2 { margin: 0 0 16px; font: 900 clamp(29px,3.1vw,45px)/1.03 var(--display); text-transform: uppercase; letter-spacing: -.018em; text-wrap: balance; }
.rbp-blog-entry-body p { margin: 0; max-width: 650px; color: #5d5950; font: 400 15px/1.7 var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rbp-blog-entry-more { display: inline-flex; gap: 16px; align-items: center; margin-top: 24px; padding: 10px 0 6px; border-bottom: 3px solid var(--acid); color: var(--black); font: 800 11px/1.3 var(--rbp-button-font); text-transform: uppercase; letter-spacing: .03em; }
.rbp-blog-entry-more > span:last-child { font-size: 17px; transition: transform .2s ease; }
.rbp-blog-entry-link:hover .rbp-blog-entry-more > span:last-child { transform: translateX(4px); }
.rbp-blog-empty { padding: 55px; text-align: center; background: #fffdf7; border-radius: 22px; color: var(--black); }
.rbp-news-all-link { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 17px; border: 1px solid #ffffff64; border-radius: 999px; white-space: nowrap; }
.rbp-news-all-link:hover { background: var(--acid); border-color: var(--acid); color: var(--black); }
.rbp-blog-pagination { display: flex; justify-content: center; margin: 58px 0 0; }
.rbp-blog-pagination .page-numbers { list-style: none; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; }
.rbp-blog-pagination .page-numbers li { display: flex; }
.rbp-blog-pagination a.page-numbers, .rbp-blog-pagination span.page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; text-decoration: none; background: #fffdf7; border: 1px solid #c4bdaf; border-radius: 12px; color: var(--black); font: 700 13px var(--mono); }
.rbp-blog-pagination a.page-numbers:hover, .rbp-blog-pagination span.page-numbers.current { background: var(--acid); border-color: var(--black); color: var(--black); }

/* 15. Responsive layout (large → small) ----------------------------------- */
@media (max-width: 1200px) {
  .rbp-wide { width: min(calc(100% - 64px),var(--wide)); }
  .rbp-giant { font-size: clamp(60px,7.3vw,112px); }
  .rbp-header-inner { gap: 13px; }
  .rbp-menu { gap: 14px; }
  .rbp-system-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .rbp-deck-controls { grid-template-columns: 100px minmax(0,1fr) 118px; padding-inline: 8px; }
  .rbp-deck-action-inner button { width: 43px; height: 43px; }
}
@media (max-width: 1000px) {
  .rbp-header-inner { min-height: 78px; }
  .rbp-brand { width: 160px; }
  .rbp-main-nav { display: none; }
  .rbp-header-tools { margin-left: auto; }
  .rbp-burger { display: flex; }
  .rbp-mobile-nav:not([hidden]) { display: flex; flex-direction: column; gap: 3px; padding: 12px 32px 20px; background: #242424; }
  .rbp-mobile-nav a { padding: 11px 0; color: var(--paper); text-decoration: none; font: 700 12px var(--rbp-nav-font); }
  .rbp-hero-inner { grid-template-columns: 1fr; gap: 20px; }
  .rbp-hero-copy { max-width: 740px; }
  .rbp-giant { font-size: clamp(65px,10vw,108px); }
  .rbp-hero-machine { width: min(100%,680px); margin-inline: auto; padding: 70px 47px 76px; }
  .rbp-intro-grid, .rbp-engine-grid, .rbp-controls-grid { gap: 50px; }
  .rbp-systems-top > p { flex-basis: 240px; }
}
@media (max-width: 780px) {
  .rbp-wide, .rbp-container { width: calc(100% - 40px); }
  .rbp-chapter { padding-block: 84px; }
  .rbp-hero { padding-block: 54px 27px; }
  .rbp-hero-foot { margin-top: 43px; }
  .rbp-hero-machine { padding: 68px 48px 72px; }
  .rbp-giant { font-size: clamp(59px,10.7vw,100px); }
  .rbp-intro-grid, .rbp-engine-grid, .rbp-controls-grid, .rbp-faq-grid { grid-template-columns: 1fr; }
  .rbp-intro-story { order: 1; }
  .rbp-intro-art { order: 2; min-height: 500px; width: min(100%,590px); margin-inline: auto; }
  .rbp-systems-top { display: block; }
  .rbp-systems-top > p { margin-top: 20px; }
  .rbp-system-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rbp-system > h3 { font-size: 20px; }
  .rbp-engine-collage { padding-block: 22px 34px; }
  .rbp-controls-copy { order: 1; }
  .rbp-controls-art { order: 2; }
  .rbp-news-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rbp-blog-entry-link { grid-template-columns: minmax(210px,37%) minmax(0,1fr); min-height: 220px; }
  .rbp-blog-entry-body { padding: 25px 30px; }
  .rbp-blog-entry-body h2 { font-size: clamp(28px,4.3vw,38px); }
  .rbp-blog-entry-body p { font-size: 14px; }
}
@media (max-width: 540px) {
  .rbp-wide, .rbp-container { width: calc(100% - 30px); }
  .rbp-header-inner { min-height: 72px; gap: 9px; }
  .rbp-brand { width: 139px; }
  .rbp-header-tools { gap: 8px; }
  .rbp-nav-cta { padding: 10px 12px; min-height: 42px; font-size: 9px; }
  .rbp-nav-cta-alt { display: none; }
  .rbp-language-button { font-size: 9px; padding: 10px; }
  .rbp-chrome-icon { width: 16px; height: 16px; flex-basis: 16px; }
  .rbp-hero { padding-top: 39px; }
  .rbp-giant { font-size: clamp(39px,10.7vw,57px); line-height: .96; margin-bottom: 26px; letter-spacing: -.025em; }
  .rbp-broadcast { font-size: 8px; margin-bottom: 19px; }
  .rbp-hero-intro p { font-size: 15px; }
  .rbp-hero-buttons { gap: 10px; }
  .rbp-primary-button { font-size: 10px; min-height: 49px; }
  .rbp-hero-machine { padding: 48px 29px 57px; }
  .rbp-deck { padding: 11px 12px 16px; border-width: 4px; border-radius: 32px 32px 54px 27px; box-shadow: 5px 7px 0 #979a94,11px 15px 0 #151515,17px 23px 31px #0007; }
  .rbp-deck::before { inset: 5px; border-radius: 25px 25px 48px 20px; }
  .rbp-deck-header { padding: 1px 4px 9px; min-height: 23px; }
  .rbp-deck-lamp { font-size: 7px; }
  .rbp-deck-bezel { padding: 9px; border-width: 3px; border-radius: 23px 23px 32px 23px; }
  .rbp-deck-bezel-label, .rbp-deck-screen-foot { font-size: 6px; padding-bottom: 7px; letter-spacing: .045em; }
  .rbp-deck-display { border-width: 2px; border-radius: 5px; }
  .rbp-deck-controls { grid-template-columns: 82px minmax(0,1fr) 95px; gap: 3px; padding: 14px 0 2px; }
  .rbp-deck-dpad { transform: scale(.65); transform-origin: top center; height: 60px; margin-bottom: -30px; }
  .rbp-deck-middle { gap: 6px; }
  .rbp-deck-little-pills { gap: 7px; }
  .rbp-deck-little-pills i { width: 17px; height: 7px; }
  .rbp-deck-middle > span:last-child { font-size: 6px; }
  .rbp-deck-action-inner { padding: 5px; gap: 5px; }
  .rbp-deck-action-inner button { width: 32px; height: 32px; border-width: 2px; font-size: 13px; box-shadow: inset 1px 1px 0 #fff8,2px 3px 0 var(--black); }
  .rbp-deck-footer { min-height: 15px; padding-top: 3px; }
  .rbp-deck-speaker { transform: scale(.65) rotate(-13deg); transform-origin: right center; }
  .rbp-hero-foot { font-size: 7px; }
  .rbp-marquee { height: 50px; }
  .rbp-marquee-flow > span { font-size: 19px; }
  .rbp-editorial-title, .rbp-systems-headline, .rbp-engine-headline, .rbp-controls-headline { font-size: clamp(53px,12vw,72px); }
  .rbp-intro-art { min-height: 330px; }
  .rbp-art-poster { width: 87%; }
  .rbp-art-poster .rbp-mac-viewport img { height: 170px; }
  .rbp-small-polaroid { width: 59%; right: 0; bottom: 15px; }
  .rbp-small-polaroid .rbp-mac-viewport img { height: 100px; }
  .rbp-mac-topbar { height: 29px; padding-inline: 9px; }
  .rbp-mac-addressrow { height: 29px; }
  .rbp-mac-tab { font-size: 8px; }
  .rbp-benefit-item h3 { font-size: 23px; }
  .rbp-system-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 13px; }
  .rbp-system > h3 { font-size: 18px; min-height: 40px; }
  .rbp-system-meta { font-size: 9px; }
  .rbp-cartridge-media { padding: 9px; }
  .rbp-engine-collage { padding: 12px 5px 20px; }
  .rbp-game-window { width: 96%; }
  .rbp-window-front { width: 88%; margin-top: -8px; transform: translateX(-3%) rotate(1deg); }
  .rbp-engine-mac-window .rbp-mac-viewport { padding: 6px; }
  .rbp-faq-heading > .rbp-faq-accent { font-size: 114px; }
  .rbp-faq-heading h2 { font-size: 70px; }
  .rbp-faq-items summary { font-size: 21px; }
  .rbp-news-grid { grid-template-columns: 1fr; }
  .rbp-blog-hero { padding-block: 70px 58px; }
  .rbp-blog-content { padding-block: 46px 75px; }
  .rbp-blog-list { gap: 19px; }
  .rbp-blog-entry { padding: 0; }
  .rbp-blog-entry-link { grid-template-columns: 1fr; min-height: 0; border-radius: 19px; }
  .rbp-blog-thumb { aspect-ratio: 1.92; min-height: 0; }
  .rbp-blog-entry-body { padding: 26px 24px 28px; }
  .rbp-blog-entry-meta { margin-bottom: 12px; }
  .rbp-blog-entry-body h2 { font-size: clamp(31px,9vw,43px); margin-bottom: 10px; }
  .rbp-blog-entry-more { margin-top: 18px; }
  .rbp-news-intro h2 { font-size: 60px; }
  .rbp-footer-top { grid-template-columns: 1fr; }
  .rbp-footer-links { grid-template-columns: 1fr 1fr; }
  .rbp-inner-main { padding-block: 70px; }
  .rbp-page-header h1 { font-size: 65px; }
}
@media (max-width: 360px) {
  .rbp-deck-controls { grid-template-columns: 1fr 1fr; }
  .rbp-deck-middle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rbp-marquee-flow { animation: none; }
  .rbp-deck-display img, .rbp-deck-action-inner button { transition: none; }
}